/* H&R Automotive -- phone polish (BUILD 60, Eric's review of 2026-09-03).
   Loaded last so it wins the cascade. Everything here is phone/tablet only unless noted. */

/* The Text (sms:) icon gets a colour -- all screen sizes. */
.icon-btn.sms { background: #2f80ed; border-color: #2f80ed; }

@media (max-width: 900px) {
  /* Header, ONE row, Eric's order: name | Google rating (tight) | EN/ES | WhatsApp | Text.
     Five things across a 360px phone, so the wordmark stacks "H&R" over "AUTOMOTIVE"
     beside the logo mark, and everything else is trimmed to fit. */
  header .wrap { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; }
  header .nav-spacer { display: none; }
  header .call-btn { display: none; }
  /* Name on one line wherever it fits (wide phones, folds, tablets); it only
     stacks "H&R" over "AUTOMOTIVE" under 480px -- see below. */
  header .logo { order: 1; font-size: 14px; letter-spacing: 0; flex: 0 0 auto; gap: 5px; }
  header .logo img { height: 32px; width: 32px; margin-right: 0; }
  /* The rating pill floats in the middle of whatever room is left between the
     name and EN/ES, instead of hugging the name. */
  header .hdr-rating { display: inline-flex; order: 2; flex: 0 0 auto; margin: 0 auto; padding: 4px 8px; gap: 5px; }
  header .hdr-stars { font-size: 10px; letter-spacing: 0; }
  header .hdr-score { font-size: 12.5px; }
  header .hdr-rev { font-size: 9.5px; color: #d4d4d8; }
  header .lang-switch { order: 3; margin-left: 0; }
  header .lang-switch .ls { padding: 3px 4px; font-size: 9px; letter-spacing: .02em; }
  header .hdr-actions { order: 4; margin-left: 0; gap: 4px; }
  header .icon-btn { width: 28px; height: 28px; }
  header .icon-btn svg { width: 14px; height: 14px; }

  /* Section titles: no yellow bar, no grey rule, centred. Every page. */
  .section-tag { justify-content: center; text-align: center; }
  .section-tag::before, .section-tag::after { display: none; }

  /* The bottom bar already offers "Is my car ready?", Call and Book, so the
     status band and the Get-in-Touch banner are duplicates on a phone. */
  /* BUILD 135 (Eric, 2026-09-08): the band is back on phones. It was hidden as a
     duplicate of the bottom bar, but the bottom bar is buttons only -- it never
     says the shop can be checked without calling. */
  .status-band { display: block; }
  /* BUILD 67: the "Get In Touch" banner is back on phones because its form now
     files a real repair request. Its Call/Book pair stays hidden -- the bottom
     bar already has both. */
  .cta-banner .cta-banner-btnrow { display: none; }

  /* Reviews band: everything centred. */
  .rv-head { text-align: center; justify-items: center; }
  .rv-score { justify-content: center; }
  .rv-headtext p { margin-left: auto; margin-right: auto; }
  .rv-tags { justify-content: center; }
  .rv-actions { align-items: center; }

  /* Service cards (all seven, including Pre-Purchase Inspections): centred text. */
  .service-card .body { text-align: center; }

  /* Hero wordmark: "H&R AUTOMOTIVE TIRE OUTLET" all yellow, one size, ONE line;
     the size follows the screen width so it never wraps (Eric, 2026-09-03). */
  .hero-mark { white-space: nowrap; font-size: min(5.55vw, 44px); letter-spacing: .01em; }
  .hero-mark-sub { display: inline; font-size: 1em; letter-spacing: inherit; color: inherit; margin: 0 0 0 .28em; }

  /* Footer: name + tagline on the left with Visit beside it, Services under the
     name, social row across, then the map. Fills the empty right half. */
  .footer-left { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 12px; align-items: start; }
  .footer-logo { grid-column: 1; grid-row: 1; font-size: 17px; }
  .footer-tagline { grid-column: 1; grid-row: 2; margin-bottom: 4px; }
  .footer-cols { display: contents; }
  .footer-cols .footer-col:nth-child(2) { grid-column: 2; grid-row: 1 / 4; }
  .footer-cols .footer-col:nth-child(1) { grid-column: 1; grid-row: 3; margin-top: 6px; }
  .footer-social { grid-column: 1 / -1; grid-row: 4; justify-content: center; margin-top: 6px; }
}
/* Narrow phones: the name stacks beside the logo mark, the pill keeps the
   stars and the score and drops the review count. */
@media (max-width: 480px) {
  header .logo { display: inline-grid; grid-template-columns: auto auto; column-gap: 5px;
    row-gap: 0; gap: 0; align-items: center; align-content: center; font-size: 11.5px; line-height: 1; }
  header .logo img { grid-row: 1 / 3; height: 28px; width: 28px; }
  header .logo .hr { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 1px; }
  header .logo .full { grid-column: 2; grid-row: 2; align-self: start; padding-top: 1px; }
  header .hdr-rev { display: none; }
  header .hdr-rating { padding: 4px 7px; gap: 4px; }
}
@media (max-width: 345px) {
  header .wrap { gap: 3px; padding-left: 5px; padding-right: 5px; }
  header .logo { font-size: 10px; column-gap: 4px; }
  header .logo img { height: 22px; width: 22px; }
  header .icon-btn { width: 25px; height: 25px; }
  header .icon-btn svg { width: 13px; height: 13px; }
  header .hdr-actions { gap: 3px; }
  header .hdr-rating { padding: 3px 5px; gap: 3px; }
  header .hdr-stars { font-size: 9px; }
  header .hdr-score { font-size: 12px; }
  header .lang-switch .ls { padding: 3px 3px; font-size: 8.5px; }
}

/* ---- BUILD 75 (Eric, 2026-09-04 evening) --------------------------------- */
/* Language switch: English is always blue, Spanish always red (house rule). */
.lang-switch .ls[aria-label="English"].is-on { background: #2f80ed; color: #fff; }
.lang-switch .ls[aria-label="Espa\00f1ol"].is-on, .lang-switch .ls[aria-label="Español"].is-on { background: #e53935; color: #fff; }
/* Phone-number text links: a grey that reads on black (not the yellow pills). */
a[href^="tel:"]:not(.call-btn):not(.btn-primary):not(.mab-call):not(.cta-banner-callbtn) { color: #c9cfd4; }
/* "Book" is blue now, never white. */
.btn-secondary { background: #2f80ed; color: #fff; }
.btn-secondary:hover { background: #4a95f5; color: #fff; }
/* Header: everything to the left, even spacing, no gap between Contact and the reviews pill. */
header .wrap { justify-content: flex-start; }
header .nav-spacer { display: none; }
header .hdr-rating { margin: 0; }
header .hdr-actions { margin-left: 0; }
@media (max-width: 900px) {
  header .wrap { justify-content: flex-start; gap: 8px; }
  header .hdr-rating { margin: 0; }
  header .lang-switch { margin-left: 0; }
  /* Response Generator: a floating, pinned pill at the bottom-left above the action bar. */
  .chat-cta { display: inline-flex !important; position: fixed; left: 12px; right: auto;
    bottom: calc(66px + 12px + env(safe-area-inset-bottom)); z-index: 61; padding: 9px 13px; font-size: 11px; }
}

/* ---- BUILD 76 (Eric, 2026-09-04 night) ----------------------------------- */
/* Logo mark 20% smaller (was an inline 64px on the <img>; now CSS-only). */
.logo img { height: 51px; width: 51px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
/* The name: both lines the same face, the same thick yellow. */
header .logo .hr, header .logo .full { color: var(--red-light) !important; font-weight: 800 !important;
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important; letter-spacing: .02em; text-transform: uppercase; }
/* Header Call button is gone on every page (the hero has one); the rest spread evenly. */
header .call-btn { display: none !important; }
header .wrap { justify-content: space-between; }
/* House rule: every pill matches the Google-reviews pill in the header: thin and sleek. */
.btn-primary, .btn-secondary, .call-btn, .cta-banner-callbtn, .contact-form button, .form-toggle, .chat-cta,
a.btn, button.btn, .status-form button, .hero-ctas a {
  padding: 7px 16px !important; font-size: 12px !important; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 999px; line-height: 1.3; min-height: 0; }
.form-toggle { width: auto; margin: 0 auto; gap: 8px; }
.lang-switch .ls { padding: 4px 9px !important; font-size: 11px !important; line-height: 1.2; }
/* Reviews band: 40% smaller, everything centred, tags are plain words not buttons. */
.reviews-band { padding: 16px 0 26px; }
.rv-head { gap: 14px; padding-bottom: 16px; margin-bottom: 16px; text-align: center; justify-items: center; }
.rv-score { flex-direction: column; gap: 4px; }
.rv-number { font-size: 37px; }
.rv-stars.big { font-size: 13px; letter-spacing: 2px; }
.rv-count { margin-top: 2px; font-size: 11.5px; }
.rv-headtext h2 { font-size: 16px; margin-bottom: 5px; }
.rv-headtext p { font-size: 12.5px; margin: 0 auto; line-height: 1.5; }
.rv-tags { justify-content: center; gap: 3px 0; margin-top: 8px; }
.rv-tags span { border: 0; padding: 0; color: #9aa0a6; font-size: 10.5px; }
.rv-tags span + span::before { content: '\00b7'; margin: 0 8px; color: #55595e; }
.rv-actions { align-items: center; gap: 8px; }
.rv-grid { gap: 10px; }
.rv-card { padding: 12px 13px 11px; }
.rv-card blockquote { font-size: 12.5px; line-height: 1.5; margin: 6px 0 8px; }
@media (max-width: 1000px) { .rv-number { font-size: 30px; } }
@media (max-width: 900px) {
  header .wrap { justify-content: space-between; gap: 6px; }
  header .logo { display: inline-grid; grid-template-columns: auto auto; column-gap: 6px; row-gap: 0; gap: 0;
    align-items: center; align-content: center; font-size: 12px; line-height: 1.05; }
  header .logo img { grid-row: 1 / 3; height: 51px; width: 51px; margin-right: 0; }
  header .logo .hr { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 1px; }
  header .logo .full { display: block !important; grid-column: 2; grid-row: 2; align-self: start; padding-top: 1px;
    overflow: visible; text-overflow: clip; white-space: nowrap; }
  .btn-primary, .btn-secondary, .contact-form button, .form-toggle, .chat-cta, .hero-ctas a { padding: 6px 13px !important; font-size: 11.5px !important; }
  .lang-switch .ls { padding: 3px 7px !important; font-size: 10px !important; }
  /* Response Generator: floats mid-screen on the right, drag it anywhere (assets/chatbot.js keeps the spot). */
  .chat-cta { left: auto; right: 12px; top: 50%; bottom: auto; transform: translateY(-50%); touch-action: none; }
  .chat-cta.is-placed { transform: none; }
  body.chat-open .chat-cta { display: none !important; }
}
@media (max-width: 480px) { header .logo { font-size: 11px; } header .logo img { height: 51px; width: 51px; } }
@media (max-width: 345px) { header .logo { font-size: 10px; } header .logo img { height: 44px; width: 44px; } }

/* ---- BUILD 80 (Eric, 2026-09-05) ----------------------------------------- */
/* Bottom bar order: BOOK | IS MY CAR READY? | WHATSAPP | CALL */
.mobile-action-bar .mab-book { order: 1; } .mobile-action-bar .mab-chat { order: 2; }
.mobile-action-bar .mab-wa { order: 3; } .mobile-action-bar .mab-call { order: 4; }
/* Reviews: the 4.8 is the star of the show (75% bigger, flashing), then the count,
   two reviews with the stars centred, the one-line summary, the two actions. */
.rv80 { text-align: center; padding: 18px 0 26px; }
.rv80-score { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.rv80-num { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 65px; font-weight: 700; letter-spacing: -.03em; color: #f2a900; animation: rv80flash 1s ease-in-out infinite alternate; }
.rv80-star { font-size: 44px; color: #f2a900; animation: rv80flash 1s ease-in-out infinite alternate; }
@keyframes rv80flash { from { color: #f2a900; text-shadow: 0 0 6px rgba(242,169,0,.5); transform: scale(1); } to { color: #ff3b3b; text-shadow: 0 0 22px rgba(255,59,59,.85); transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .rv80-num, .rv80-star, .rv80-stars { animation: none; } }
.rv80-count { margin: 4px 0 14px; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #cfd4d7; }
.rv80-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 auto 14px; max-width: 760px; }
.rv80-card { margin: 0; background: #16161a; border: 1px solid #2a2d2f; border-top: 3px solid #f2a900; padding: 12px 14px 12px; text-align: center; }
.rv80-stars { color: #f2a900; font-size: 15px; letter-spacing: 3px; margin: 0 0 8px; animation: rv80flash 1s ease-in-out infinite alternate; }
.rv80-card blockquote { margin: 0 0 8px; color: #dfe3e6; font-size: 12.5px; line-height: 1.5; }
.rv80-card figcaption { color: #fff; font-size: 12px; font-weight: 600; font-family: 'Space Grotesk', Arial, sans-serif; }
.rv80-line { margin: 0 0 12px; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f2a900; }
.rv80-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rv80-read { padding: 6px 16px !important; font-size: 12px !important; }
.rv80-leave { display: inline-block; background: #f2a900; color: #121212; border-radius: 999px; padding: 12px 30px; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 0 3px rgba(242,169,0,.25), 0 0 22px rgba(242,169,0,.55); }
.rv80-leave:hover { background: #ffc233; }
@media (max-width: 900px) {
  /* Header: one tight row, no gaps between the name, the reviews pill, EN/ES and the icons. */
  header .wrap { justify-content: flex-start; gap: 4px; padding-left: 8px; padding-right: 8px; }
  header .logo { column-gap: 4px; }
  header .hdr-rating { margin: 0; padding: 3px 6px; gap: 3px; flex: 0 0 auto !important; justify-content: flex-start; }
  header .lang-switch { margin: 0; }
  header .hdr-actions { margin: 0; gap: 4px; }
  /* Response Generator: parked upper-right on every first visit, dark with the site's yellow; still draggable. */
  .chat-cta { left: auto; right: 10px; top: 118px; bottom: auto; transform: none; }
  .rv80-cards { grid-template-columns: 1fr; max-width: 520px; }
  /* Footer: the VISIT block sits centred against the whole left column. */
  .footer-cols .footer-col:nth-child(2) { align-self: center; justify-self: center; text-align: center; }
}

/* ---- BUILD 81 (Eric, 2026-09-05) ----------------------------------------- */
/* 4.8 breathes in the shop's yellow only (red read as an alarm). */
@keyframes rv80flash { from { color: #f2a900; text-shadow: 0 0 4px rgba(242,169,0,.35); transform: scale(1); } to { color: #ffc233; text-shadow: 0 0 18px rgba(242,169,0,.95), 0 0 34px rgba(242,169,0,.55); transform: scale(1.04); } }
.rv80-num, .rv80-star { animation-duration: 1.4s; }
/* Review actions use the same compact, content-width pill proportions as the
   rest of the site. "Leave a review" is an action, not a wide CTA slab. */
.rv80-read { padding: 5px 13px !important; font-size: 11px !important; }
.rv80-actions { gap: 8px; padding-top: 2px; }
.rv80-leave { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 0;
  background: #2f80ed; color: #121212; padding: 5px 13px; border-radius: 999px;
  font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(47,128,237,.28), 0 0 8px rgba(47,128,237,.32); }
.rv80-leave:hover { background: #4a95f5; }
@media (max-width: 900px) {
  /* Header opened up: the row is centred and spans ~88% of the bar, items spread evenly across it. */
  header .wrap { justify-content: space-between; gap: 6px; width: 88%; max-width: 88%; margin: 0 auto; padding-left: 0; padding-right: 0; }
}

/* ---- BUILD 86: the customer's comment box on the status page ---- */
.status-ask { margin-top: 12px; padding: 12px; border: 1px solid rgba(242,169,0,.45); border-radius: 10px; background: rgba(242,169,0,.06); }
.status-ask h4 { margin: 0 0 8px; color: #f2a900; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.status-ask-input { display: block; width: 100%; min-height: 64px; padding: 10px 12px; border: 1.5px solid #55555d; border-radius: 10px; background: #000; color: #f2f4f5; font-size: 16px; }
.status-ask-send { display: inline-block; margin-top: 8px; background: #2f80ed; color: #fff; border: 0; border-radius: 999px; padding: 6px 16px; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.status-ask-send:disabled { opacity: .55; }

/* ---- BUILD 91 (Eric, 2026-09-06, medium phone) ---------------------------- */
/* 4. SERVICES: the title's own face, black letters framed in yellow, like the service pictures. */
.services .section-tag { justify-content: center; color: #000; font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800; letter-spacing: .03em; -webkit-text-stroke: 1.3px #f2a900; paint-order: stroke fill;
  text-shadow: 0 0 1px #f2a900, 0 0 2px rgba(242,169,0,.6); }
/* 5. the 4.8: twice as bright at the peak, half the pace. */
@keyframes rv80flash { from { color: #f2a900; text-shadow: 0 0 4px rgba(242,169,0,.35); transform: scale(1); }
  to { color: #fff6d0; text-shadow: 0 0 10px #ffe082, 0 0 26px #ffd54a, 0 0 54px rgba(255,213,74,.95), 0 0 90px rgba(242,169,0,.8); transform: scale(1.08); } }
.rv80-num, .rv80-star, .rv80-stars { animation-duration: 2.8s; }
/* 7. every footer link reads as a link: yellow. Social circles keep their own colours. */
footer a:not(.fb):not(.ig):not(.wa):not(.map-call) { color: #f2a900 !important; }
footer a:not(.fb):not(.ig):not(.wa):not(.map-call):hover { color: #ffc233 !important; }
@media (max-width: 900px) {
  /* 1. hero name centred, one line, sized to the screen */
  .hero-text { align-items: center !important; text-align: center !important; }
  .hero-mark { display: block !important; width: 100%; text-align: center; white-space: nowrap; font-size: min(5.3vw, 44px) !important; margin: 0 auto 6px; }
  /* 3. trust strip: two centred lines -- Est/35 years + ASE, then hours + Hablamos Español */
  .cred-inner { display: grid !important; grid-template-columns: auto auto; justify-content: center; column-gap: 8px; row-gap: 5px; padding: 10px 8px; }
  .cred-item { font-size: 11px !important; letter-spacing: .05em; white-space: nowrap; }
  .cred-item:nth-child(1) { grid-row: 1; grid-column: 1; text-align: right; }
  .cred-item:nth-child(3) { grid-row: 1; grid-column: 2; text-align: left; }
  .cred-item:nth-child(2) { grid-row: 2; grid-column: 1; text-align: right; }
  .cred-item:nth-child(4) { grid-row: 2; grid-column: 2; text-align: left; }
  .cred-item:nth-child(1)::after, .cred-item:nth-child(2)::after { content: ' \00b7'; }
}
/* 6. header name on ONE line on phones (was stacked on two) */
@media (max-width: 480px) {
  header .logo { display: inline-flex !important; align-items: center; gap: 5px; white-space: nowrap; font-size: clamp(8.5px, 2.7vw, 11px); letter-spacing: 0; }
  header .logo .hr, header .logo .full { grid-area: auto; padding: 0; letter-spacing: 0; }
  header .logo .hr::after { content: ' '; }
}
/* 6b. both halves of the header name on the same baseline; the footer name on one line too. */
@media (max-width: 480px) {
  header .logo .hr, header .logo .full { align-self: center !important; line-height: 1; }
}
@media (max-width: 900px) {
  .footer-logo { white-space: nowrap; font-size: 15px !important; letter-spacing: .01em; }
  .footer-logo img { height: 36px !important; width: 36px !important; }
}
/* 6c. the one-line footer name spans the whole footer; the two columns sit under it. */
@media (max-width: 900px) {
  .footer-left { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-logo { grid-column: 1 / -1 !important; grid-row: 1 !important; justify-content: center; }
  .footer-tagline { grid-column: 1; grid-row: 2; }
  .footer-cols .footer-col:nth-child(2) { grid-column: 2; grid-row: 2 / 4; }
  .footer-cols .footer-col:nth-child(1) { grid-column: 1; grid-row: 3; }
  .footer-social { grid-row: 4; }
}

/* ---- BUILD 92 (Eric, 2026-09-06, medium phone) ---------------------------- */
/* 3. ES is red even when English is showing. */
.lang-switch .ls[aria-label="Español"]:not(.is-on), .lang-switch .ls[aria-label="Espa\00f1ol"]:not(.is-on) { color: #e53935; }
/* 6. service card titles in the shop's yellow. */
.service-card h3 { color: #f2a900 !important; }
/* 7. the whole card is the button (it is a link); a yellow frame that thickens on hover / press. */
.service-card { box-shadow: 0 0 0 2px #f2a900; transition: box-shadow .15s; }
.service-card:hover, .service-card:active, .service-card:focus-visible { box-shadow: 0 0 0 6px #f2a900; }
/* 8. the small "What's included ->" links are gone; the card itself opens the page. */
.service-card .more { display: none !important; }
@media (max-width: 900px) {
  /* 1. Response Generator pinned upper right under the header. */
  .chat-cta:not(.is-placed) { left: auto; right: 10px; top: 118px; bottom: auto; }   /* BUILD 123: no !important, or dragging cannot move it */
  /* 2. header row centred. */
  header .wrap { justify-content: center !important; }
  /* 4. trust strip: each line centred on the page's own centre line. */
  .cred-inner { display: flex !important; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px; }
  .cred-line { display: flex; justify-content: center; align-items: baseline; gap: 8px; white-space: nowrap; }
  .cred-line .cred-item { grid-row: auto; grid-column: auto; text-align: center !important; }
  .cred-line .cred-item:first-child::after { content: ' \00b7'; }
  .cred-line .cred-item:nth-child(2)::after { content: none; }
  /* 5. SERVICES 20% bigger. */
  .services .section-tag { font-size: 26.5px !important; }
}
/* 2b. so the centred header row fits: on phones the pill shows one star + 4.8, tighter gaps. */
@media (max-width: 480px) {
  header .wrap { gap: 4px !important; padding-left: 6px !important; padding-right: 6px !important; flex-wrap: nowrap; overflow: hidden; }
  header .hdr-stars { display: none; }
  header .hdr-score::before { content: '\2605 '; color: #f2a900; }
  header .hdr-rating { padding: 3px 6px !important; }
  header .logo img { height: 26px; width: 26px; }
}
/* 2c. a few more pixels so nothing clips on a 390 px phone. */
@media (max-width: 480px) {
  header .logo { font-size: clamp(8px, 2.45vw, 10px) !important; gap: 4px !important; }
  header .icon-btn { width: 26px !important; height: 26px !important; }
  header .icon-btn svg { width: 14px !important; height: 14px !important; }
  header .hdr-actions { gap: 3px !important; }
  header .lang-switch .ls { padding: 3px 5px !important; }
}

/* ---- BUILD 93 (Eric, 2026-09-06) ------------------------------------------ */
/* 2. service card frames doubled: 4px, 12px on hover / press. */
.service-card { box-shadow: 0 0 0 4px #f2a900; }
.service-card:hover, .service-card:active, .service-card:focus-visible { box-shadow: 0 0 0 12px #f2a900; }
@media (max-width: 900px) {
  /* The showcase frame on a desktop loses 17px to a scrollbar; phones never show one. Hide it so both match. */
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; width: 0; height: 0; }
  /* 1. Response Generator floats directly under the header, right side (top set by chatbot.js). */
  .chat-cta:not(.is-placed) { position: fixed !important; top: var(--rg-top, 62px) !important; right: 10px !important; left: auto !important; bottom: auto !important; }
}


/* ---- BUILD 94 (Eric, 2026-09-06) ------------------------------------------ */
/* Book an Appointment is red. */
.hero-ctas .btn-secondary { background: #e53935 !important; border-color: #e53935 !important; color: #fff !important; }
.hero-ctas .btn-secondary:hover { background: #ff4d49 !important; }
/* Intake / request forms: "coming in today" row, and Send beside "or schedule". */
.contact-form .today-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.contact-form label.today { display: flex; align-items: center; gap: 10px; margin: 0; cursor: pointer; }
.contact-form label.today input[type=checkbox] { width: 22px; height: 22px; min-width: 22px; margin: 0; accent-color: #f2a900; }
.contact-form label.today span { color: #f2f4f5; font-size: 15px; }
.contact-form label.eta { flex: 1 1 180px; margin: 0; }
.contact-form .send-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; margin-top: 4px; }
.contact-form .send-row button[type=submit] { width: 100%; margin: 0; }
.contact-form label.sched { margin: 0; }
.contact-form label.sched input { width: 100%; color-scheme: dark; }
@media (max-width: 480px) { .contact-form .send-row { grid-template-columns: 1fr; } }
/* trust strip lines at every width: items spaced, dot between the two on each line */
.cred-line { display: inline-flex; align-items: baseline; gap: 14px; }
.cred-line .cred-item:first-child::after { content: ' ·'; }
/* the ETA dropdown sits beside the checkbox, and Send beside "or schedule", even on a 390px phone */
.contact-form .today-row { flex-wrap: nowrap; }
.contact-form label.today { flex: 0 1 auto; }
.contact-form label.today span { font-size: 13px; line-height: 1.2; }
.contact-form label.eta { flex: 1 1 130px; min-width: 130px; font-size: 11px; }
@media (max-width: 480px) { .contact-form .send-row { grid-template-columns: 1fr 1fr; gap: 10px; } .contact-form label.sched { font-size: 11px; } }


/* ---- BUILD 95 (Eric, 2026-09-06, home page) -------------------------------- */
/* Hero: Start a Repair Request (red) and Check My Repair Status (blue), same pill. */
.hero-ctas .btn-status { background: #2f80ed !important; border-color: #2f80ed !important; color: #fff !important; }
.hero-ctas .btn-status:hover { background: #4a95f5 !important; }
/* "Check your repair status" banner: no buttons, everything centred, the heading glows yellow with stars. */
.status-band-inner { justify-content: center; }
.status-band-text { flex: 1 1 auto; max-width: 820px; margin: 0 auto; text-align: center; }
.status-band-tag { display: inline-block; }
.status-band h2 { color: #f2a900 !important; text-align: center; animation: sbglow 2.8s ease-in-out infinite alternate; }
.status-band p { text-align: center; margin-left: auto; margin-right: auto; }
@keyframes sbglow { from { text-shadow: 0 0 6px rgba(242,169,0,.45); } to { text-shadow: 0 0 14px #ffe082, 0 0 30px rgba(255,213,74,.9), 0 0 56px rgba(242,169,0,.7); } }
@media (prefers-reduced-motion: reduce) { .status-band h2 { animation: none; text-shadow: 0 0 12px rgba(242,169,0,.8); } }


/* ---- BUILD 97 (Eric, 2026-09-06): hero back where it was; tablet like desktop; RG under the header everywhere ---- */
@media (min-width: 761px) and (max-width: 900px) {
  header .wrap { justify-content: space-between !important; }
  header .logo { order: 0 !important; }
  header nav { order: 1; }
  header .hdr-rating { margin: 0 !important; }
}
.chat-cta:not(.is-placed) { position: fixed !important; top: var(--rg-top, 72px) !important; right: 14px !important; left: auto !important; bottom: auto !important; }
.status-band-how { text-align: center; color: #f2a900; font-weight: 700; font-size: 15px; margin: 10px auto 0; max-width: 720px; }
.status-band-how b { color: #fff; }
/* tablet header: name on one line, review count dropped so everything fits on the right */
@media (min-width: 761px) and (max-width: 900px) {
  header .logo { white-space: nowrap; font-size: 12px !important; display: inline-flex !important; align-items: center; gap: 6px; }
  header .logo .hr, header .logo .full { grid-area: auto; padding: 0; }
  header .hdr-rev { display: none; }
  header .wrap { gap: 10px !important; }
  header nav { gap: 10px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  header .logo .hr, header .logo .full { align-self: center !important; line-height: 1; }
}


/* ---- BUILD 98 (Eric, 2026-09-06) ------------------------------------------ */
/* 3. Response Generator clear of the yellow separator, and draggable on a phone (touch must not scroll). */
.chat-cta { touch-action: none; }

/* ---- BUILD 100 (Eric, 2026-09-06 night) ---------------------------------------------------- */
/* 1. fold + tablet (761-900): the BUILD 80 phone hero -- full photo, wordmark only, hero ends at the fold. */
@media (min-width: 761px) and (max-width: 900px) {
  .hero { display: flex !important; align-items: flex-end !important; height: calc(100dvh - var(--fold-rest, 200px)) !important; min-height: 360px !important; max-height: 1000px !important; }
  .hero-bg { position: absolute !important; inset: 0 !important; display: block !important; }
  .hero-bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 46% !important; transform: none !important; }
  .hero-scrim { display: block !important; background: linear-gradient(180deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.26) 24%, rgba(0,0,0,.16) 48%, rgba(0,0,0,.68) 78%, rgba(0,0,0,.93) 100%) !important; }
  .hero-vignette { display: none !important; }
  .hero-text { padding: 0 0 20px !important; max-width: 100% !important; align-items: center !important; text-align: center !important; }
  .hero .eyebrow, .hero h1, .hero p.lead, .hero-ctas { display: none !important; }
  .hero-mark { display: block !important; color: #f2a900; font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; font-weight: 800; text-transform: uppercase; line-height: 1.05; font-size: min(5.3vw, 44px) !important; margin: 0 auto 6px; text-shadow: 0 2px 22px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.7); }
}
/* 2. medium + small phones: hero back to full fold height; the photo is zoomed a third so the car is bigger and the floor is gone. */
@media (max-width: 400px) {
  .hero-bg img { transform: scale(1.08) translateX(-17px); transform-origin: 50% 54%; /* BUILD 137 (Eric, 2026-09-08): horizontal control moved off transform-origin and onto    translateX. At a 1.08 zoom the origin lever is only 0.08, so shifting the car 10px meant    swinging the anchor ~38% -- every nudge overshot. translateX moves it by exact pixels:    -8px = 8px left, and the next adjustment is just this number. BUILD 140: -21 put the
     bumper 5px OFF the left edge; -17 lands it flush against it with the whole car in frame. */ }
}
/* 6-7. status band: button name yellow; 'Car in the shop?' red, heavier, 25% bigger. */
.status-band-how b { color: #f2a900 !important; }
.status-band-tag { color: #e53935 !important; font-weight: 900 !important; font-size: 15px !important; }
/* 8. trust strip: two centred lines at every size. */
@media (min-width: 901px) {
  .cred-inner { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .cred-line { display: inline-flex; justify-content: center; align-items: baseline; gap: 14px; }
}
/* 9. section titles centred, no yellow bar, no rule -- every size. */
.section-tag { justify-content: center !important; text-align: center !important; }
.section-tag::before, .section-tag::after { display: none !important; content: none !important; }
/* 10. service cards: black frames. */
.service-card { box-shadow: 0 0 0 4px #000 !important; }
.service-card:hover, .service-card:active, .service-card:focus-visible { box-shadow: 0 0 0 12px #000 !important; }

/* ---- BUILD 101 (Eric, 2026-09-07): desktop/laptop hero = the Aug 31 (BUILD 26) hero ------------------- */
/* BUILD 26 was a plain box at least 500px tall with the copy at the top left and the photo at 50% 52%;
   at 1024 wide that showed 27.5% of the portrait photo (roof to floor). Since BUILD 37 the height followed
   the window height, which on short windows cut the bumper. Height now follows the page width (46vw ~ the
   same band at every width) and never the window height. Phones and the fold (<=900) are untouched. */
@media (min-width: 901px) {
  .hero { height: max(500px, 46vw) !important; min-height: 500px !important; max-height: none !important; align-items: flex-start !important; }
  .hero-bg img { object-position: 50% 54% !important; }
  .hero-text { max-width: 450px !important; padding: 28px 0 32px !important; }
  .hero-ctas { flex-wrap: wrap !important; gap: 14px 18px !important; }
}

/* ---- BUILD 105 (Eric, 2026-09-07): desktop hero = the widened photo, one-line trust strip, bigger services --- */
/* The portrait photo can't fill a 1920-wide band without either burying the screen (920px tall) or slicing the
   car. assets/hero-wide-desktop.webp is the same shot extended to 3:1 with the shop's own left side, mirrored,
   blurred and darkened, so the copy sits on real (out-of-focus) shop instead of a flat panel. Served by a
   <picture> source at >=901 only; phones and the fold keep the portrait file and the BUILD 100 hero. */
@media (min-width: 901px) {
  .hero { height: 620px !important; min-height: 620px !important; max-height: 620px !important; align-items: center !important; }
  /* BUILD 108: anchor left, not centre. Between 901 and ~1600 the 2880-wide photo is cropped to fit, and a
     centred anchor threw away the blurred left side -- the grille ended up under the headline. Anchored left,
     the out-of-focus side always sits behind the copy and the car keeps to the right at every desktop width. */
  .hero-bg img { object-position: 0% 50% !important; }
  .hero-vignette { display: none !important; }
  .hero-scrim { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.42) 30%, rgba(0,0,0,.12) 52%, rgba(0,0,0,.22) 100%) !important; }
  .hero .wrap { max-width: none !important; margin: 0 !important; padding: 0 0 0 110px !important; }
  .hero-text { max-width: 560px !important; padding: 0 !important; }
  /* the three pills on one line: estimate, status, call -- markup order is left alone so phones don't move. */
  .hero-ctas { flex-wrap: nowrap !important; gap: 14px !important; }
  .hero-ctas a { white-space: nowrap !important; }
  .hero-ctas .btn-secondary:not(.btn-status) { order: 1; }
  .hero-ctas .btn-status { order: 2; }
  .hero-ctas .btn-primary { order: 3; background: #125c2c !important; color: #fff !important; }
  .hero-ctas .btn-primary:hover { background: #16733a !important; }
  /* trust strip: every company fact on ONE line. */
  .cred-inner { flex-direction: row !important; flex-wrap: nowrap !important; gap: 14px !important; }
  .cred-line:first-child::after { content: ' \00b7'; opacity: .6; }
  /* SERVICES 30% bigger: the grid is three 1fr columns, so a 30% wider container = 30% bigger cards. */
  .services .wrap { max-width: min(1430px, 96vw) !important; }
  .services .section-tag { font-size: 34px !important; }
}

/* ---- BUILD 107 (Eric, 2026-09-07): header lines up with the hero copy ------------------------------- */
/* BUILD 105 pulled the hero copy to 110px from the left edge; the header was still centred in the 1100px
   container, so the logo sat ~300px right of the headline. Header now runs the full width with the same
   110px left margin. Phones and the fold (<=900) keep the centred header from BUILD 97b/100. */
@media (min-width: 901px) {
  header .wrap { max-width: none !important; margin: 0 !important; padding: 0 40px 0 110px !important; }
}
/* BUILD 108: three desktop crops (narrow 1.87:1 / mid 2.2:1 / wide 3:1) picked by <picture>, because one
   image cannot fit a 942px window and a 1920px TV -- centre-anchoring put the grille under the headline and
   left-anchoring hid the car. Narrow windows have no room for empty space beside the car, so there the copy
   sits on a harder scrim, the way the Aug 31 hero did. */
@media (min-width: 901px) and (max-width: 1150px) {
  .hero-scrim { background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.66) 38%, rgba(0,0,0,.28) 62%, rgba(0,0,0,.25) 100%) !important; }
}
/* BUILD 109: hero extension rebuilt so the shop falls into shadow with no visible join (mirror is
   pixel-continuous at the seam; blur and darkening both start AT the join and ramp left, so nothing
   crosses it). The mid tier has less room to the left of the car, so its scrim carries more of the work. */
@media (min-width: 1151px) and (max-width: 1500px) {
  .hero-scrim { background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.18) 56%, rgba(0,0,0,.22) 100%) !important; }
}

/* ---- BUILD 110 (Eric, 2026-09-07): copy sits higher and 25% bigger, background darker ---------------- */
@media (min-width: 901px) {
  .hero { align-items: flex-start !important; }
  .hero .wrap { padding-top: 88px !important; }
  .hero-text { max-width: 700px !important; }
  .hero .eyebrow { font-size: 16px !important; margin-bottom: 16px !important; }
  .hero h1 { font-size: 35px !important; margin-bottom: 17px !important; }
  .hero p.lead { font-size: 17.5px !important; max-width: 620px !important; margin-bottom: 22px !important; }
}

/* ---- BUILD 111 (Eric, 2026-09-07): status band + hero copy height ----------------------------------- */
/* Hero CHECK REPAIR STATUS pill matches the yellow of the status-band heading below it. */
.hero-ctas .btn-status { background: #f2a900 !important; color: #121212 !important; }
.hero-ctas .btn-status:hover { background: #ffc233 !important; color: #121212 !important; }
/* CAR IN THE SHOP? +15% (15px -> 17.25px); the heading +30% (1.5rem -> 1.95rem) and clickable. */
.status-band-tag { font-size: 17.25px !important; }
.status-band h2 { font-size: 1.95rem !important; }
.status-band h2 .sb-link { color: inherit; text-decoration: none; }
.status-band h2 .sb-link:hover { text-decoration: underline; }
/* the words inside the sentence are white and stay plain text, not a link. */
.status-band-how b { color: #fff !important; }
@media (min-width: 901px) {
  .hero .wrap { padding-top: 43px !important; }
}

/* ---- BUILD 112 (Eric, 2026-09-07): header +20%, trust strip +20%, status pill glows --------------- */
@media (min-width: 901px) {
  /* header, everything in it, 20% up from the base sizes */
  .logo { font-size: 27.6px !important; }
  .logo img { height: 62px !important; width: 62px !important; margin-right: 14px !important; }
  header nav a { font-size: 18px !important; }
  .hdr-stars { font-size: 14.4px !important; }
  .hdr-score { font-size: 19.2px !important; }
  .hdr-rev { font-size: 13.8px !important; }
  .lang-switch .ls { font-size: 14.4px !important; padding: 7px 13px !important; }
  .icon-btn { width: 48px !important; height: 48px !important; }
  .icon-btn svg { width: 24px !important; height: 24px !important; }
  .call-btn { font-size: 16.8px !important; padding: 11px 19px !important; }
  /* the info strip under the hero, 20% up (12.5px -> 15px) */
  .cred-item { font-size: 15px !important; }
}
/* CHECK REPAIR STATUS pill glows and pulses so it gets noticed - both in the hero and on other pages. */
@keyframes hrStatusGlow {
  from { box-shadow: 0 0 0 0 rgba(242,169,0,.55), 0 0 10px 2px rgba(242,169,0,.45); }
  to   { box-shadow: 0 0 0 10px rgba(242,169,0,0), 0 0 22px 6px rgba(242,169,0,.85); }
}
.hero-ctas .btn-status { animation: hrStatusGlow 1.6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .hero-ctas .btn-status { animation: none; box-shadow: 0 0 18px 4px rgba(242,169,0,.7); }
}

/* ---- BUILD 113 (Eric, 2026-09-07): yellow nav, trust strip spread across the banner ---------------- */
@media (min-width: 901px) {
  /* nav tabs: yellow, and 20% up from 15px. Beats the clamp() rule at index.html:607. */
  header nav a.nav-link { font-size: 18px !important; color: var(--red-light) !important; font-weight: 600 !important; }
  header nav a.nav-link:hover { color: #fff !important; }
  /* trust strip: each point stands on its own, spread the full width of the banner. */
  .cred-inner { max-width: none !important; padding-left: 80px !important; padding-right: 80px !important;
                justify-content: space-between !important; }
  .cred-line { display: contents !important; }
  .cred-line .cred-item::after { content: none !important; }
  .cred-item { white-space: nowrap; }
}
/* ASE Certified in the site yellow, same as the other highlighted facts. */
.cred-item:nth-child(2), .cred-line:first-child .cred-item:nth-child(2) { color: var(--red-light) !important; font-weight: 700; }

/* ---- BUILD 114 (Eric, 2026-09-07): shade further right so no tools show behind the copy ------------ */
/* The photo's join sits near 38% of the width; the toolbox and shelving run to about 48%. The shade now
   carries past the join and doesn't lift until the car itself starts. */
@media (min-width: 1501px) {
  .hero-scrim { background: linear-gradient(90deg,
      rgba(0,0,0,.90) 0%, rgba(0,0,0,.88) 30%, rgba(0,0,0,.80) 40%,
      rgba(0,0,0,.55) 47%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.12) 64%, rgba(0,0,0,.22) 100%) !important; }
}
@media (min-width: 1151px) and (max-width: 1500px) {
  .hero-scrim { background: linear-gradient(90deg,
      rgba(0,0,0,.90) 0%, rgba(0,0,0,.84) 26%, rgba(0,0,0,.68) 38%,
      rgba(0,0,0,.40) 48%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.22) 100%) !important; }
}

/* ---- BUILD 115 (Eric, 2026-09-07): the hero wordmark radiates, 25% larger ------------------------- */
/* H&R AUTOMOTIVE TIRE OUTLET is the whole hero copy at <=900 (headline, lead and pills are hidden there),
   so this is the thing that has to carry the hero on a phone and on the fold. */
@keyframes hrMarkGlow {
  from { text-shadow: 0 2px 22px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.7), 0 0 14px rgba(242,169,0,.45), 0 0 28px rgba(242,169,0,.20); }
  to   { text-shadow: 0 2px 22px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.7), 0 0 22px rgba(255,194,51,.95), 0 0 46px rgba(242,169,0,.65); }
}
@media (max-width: 900px) {
  .hero-mark { font-size: min(6.6vw, 55px) !important; }
}
/* BUILD 135: the glow belongs to the big wordmark now, at every width. */
.hero-mark { animation: hrMarkGlow 2.2s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .hero-mark { animation: none; text-shadow: 0 2px 22px rgba(0,0,0,.85), 0 0 20px rgba(242,169,0,.75) !important; }
}

/* ---- BUILD 116 (Eric, 2026-09-07): yellow tabs at every size, darker WhatsApp green --------------- */
/* Colour is not size-dependent, so the nav tabs are yellow at every width, not just desktop. */
header nav a.nav-link { color: var(--red-light) !important; font-weight: 600 !important; }
header nav a.nav-link:hover { color: #fff !important; }
/* WhatsApp was #25D366 - white text on it was hard to read. Darker green, same family as Call. */
.mab-wa { background: #0b7a45 !important; }
.hdr-actions .icon-btn.wa { background: #0b7a45 !important; }

/* ---- BUILD 117 (Eric, 2026-09-07): header wordmark bigger + glowing on the fold/tablet band -------- */
@keyframes hrLogoGlow {
  from { text-shadow: 0 0 10px rgba(242,169,0,.35), 0 0 20px rgba(242,169,0,.15); }
  to   { text-shadow: 0 0 16px rgba(255,194,51,.85), 0 0 34px rgba(242,169,0,.5); }
}
/* BUILD 135 (Eric, 2026-09-08): glow removed from the header wordmark -- two glowing
   wordmarks on one screen fought each other. It now lives only on the big one over
   the photo (.hero-mark, hrMarkGlow below). */
.logo { animation: none; }
@media (prefers-reduced-motion: reduce) { .logo { animation: none; text-shadow: none; } }
@media (min-width: 761px) and (max-width: 900px) {
  .logo { font-size: 21.25px !important; }          /* 17 -> +25% */
  .logo img { height: 48px !important; width: 48px !important; margin-right: 10px !important; }
  header nav a.nav-link { font-size: 16.25px !important; }
  .hdr-score { font-size: 18px !important; }
  .hdr-stars { font-size: 13px !important; }
  .lang-switch .ls { font-size: 13.5px !important; padding: 6px 11px !important; }
  .icon-btn { width: 42px !important; height: 42px !important; }
  .icon-btn svg { width: 21px !important; height: 21px !important; }
}
/* WhatsApp back to WhatsApp green; Call takes its own colour so the two greens stop touching. */
.mab-wa { background: #25D366 !important; }
.hdr-actions .icon-btn.wa { background: #25D366 !important; }
.mab-call { background: #f2a900 !important; color: #121212 !important; }
.mab-call svg { stroke: #121212 !important; }
/* BUILD 117b: at 761-900 the bigger header ran past the right edge - tighten the row so it fits. */
@media (min-width: 761px) and (max-width: 900px) {
  header .wrap { gap: 10px !important; padding-left: 14px !important; padding-right: 12px !important; }
  .hdr-stars { display: none !important; }
  header nav { gap: 13px !important; }
  header nav a.nav-link { font-size: 15.5px !important; }
}

/* ---- BUILD 119 (Eric, 2026-09-08): wordmark yellow + pulsing, one line; nav tabs white ----------- */
/* Older rules beat plain `.logo` selectors: `header .logo{font-size:12px!important}` at 761-900 and
   `header .logo .hr,.full{color:...!important}`. Everything here is written at `header .logo` or deeper. */
@keyframes hrLogoBeam {
  from { text-shadow: 0 0 6px rgba(242,169,0,.55), 0 0 14px rgba(242,169,0,.30), 0 0 26px rgba(242,169,0,.15); }
  to   { text-shadow: 0 0 12px rgba(255,194,51,1), 0 0 26px rgba(242,169,0,.85), 0 0 52px rgba(242,169,0,.55); }
}
header .logo, header .logo .hr, header .logo .full { color: var(--red-light) !important; }
header .logo .hr, header .logo .full {
  text-shadow: 0 0 10px rgba(255,194,51,.85), 0 0 22px rgba(242,169,0,.6), 0 0 44px rgba(242,169,0,.35);
  animation: hrLogoBeam 1.9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  header .logo .hr, header .logo .full { animation: none;
    text-shadow: 0 0 12px rgba(255,194,51,.9), 0 0 26px rgba(242,169,0,.6); }
}
/* nav tabs white */
header nav a.nav-link { color: #ffffff !important; font-weight: 600 !important; }
header nav a.nav-link:hover { color: var(--red-light) !important; }
/* one line at every size, never stacked */
@media (min-width: 901px) { header .logo { font-size: 30px !important; } }
@media (min-width: 761px) and (max-width: 900px) {
  header .logo { display: inline-flex !important; align-items: center !important;
                 font-size: 21.25px !important; white-space: nowrap !important; gap: 7px !important; }
  header .logo img { grid-row: auto !important; height: 48px !important; width: 48px !important; margin-right: 4px !important; }
  header .logo .hr, header .logo .full { grid-column: auto !important; grid-row: auto !important;
                 display: inline !important; align-self: auto !important; }
  header nav a.nav-link { font-size: 15.5px !important; }
  header nav { gap: 13px !important; }
  header .wrap { gap: 10px !important; }
  .hdr-stars { display: none !important; }
}
/* BUILD 119b: 21.25px still pushed EN/ES and the bubbles off at 885. Sized to actually fit on one line. */
@media (min-width: 761px) and (max-width: 900px) {
  header .logo { font-size: 18px !important; gap: 6px !important; }
  header .logo img { height: 42px !important; width: 42px !important; margin-right: 2px !important; }
  header nav a.nav-link { font-size: 13.5px !important; }
  header nav { gap: 11px !important; }
  header .wrap { gap: 8px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .lang-switch .ls { padding: 4px 8px !important; font-size: 11.5px !important; }
  .icon-btn { width: 36px !important; height: 36px !important; }
  .icon-btn svg { width: 18px !important; height: 18px !important; }
}
/* BUILD 119c: 858 (the fold) was 3px over. A hair more room so it fits from 761 all the way up. */
@media (min-width: 761px) and (max-width: 900px) {
  header .logo { font-size: 17px !important; }
  header nav { gap: 9px !important; }
  header nav a.nav-link { font-size: 13px !important; }
  header .wrap { padding-left: 8px !important; padding-right: 8px !important; }
}
/* BUILD 119d: at the narrow end of the band (761-830) there isn't room for the rating pill as well;
   the 4.8 shows again from 831 up. Nothing else is dropped. */
@media (min-width: 761px) and (max-width: 830px) { .hdr-rating { display: none !important; } }
/* BUILD 119e: 761-800 is the tightest point in the band - one more notch down so nothing clips there. */
@media (min-width: 761px) and (max-width: 800px) {
  header .logo { font-size: 15.5px !important; }
  header .logo img { height: 38px !important; width: 38px !important; }
  header nav a.nav-link { font-size: 12px !important; }
  header nav { gap: 7px !important; }
  .icon-btn { width: 32px !important; height: 32px !important; }
  .icon-btn svg { width: 16px !important; height: 16px !important; }
}

/* ---- BUILD 121 (Eric, 2026-09-08): a way out of the repair-status page ---------------------------- */
/* On a phone the nav links are hidden, so a customer who lands on /status from a text had no exit at all
   short of the browser's back button - and arriving from a text there is no back history. */
.status-panel { position: relative; }
/* BUILD 152 (Eric, 2026-09-08): the X was a 10%-white disc -- see-through, and whatever was
   behind it read straight through the middle. Solid red now, white cross, on every page it
   appears on, with a z-index high enough that nothing floats over it. */
.status-exit { position: absolute; top: 10px; right: 12px; z-index: 70;
  width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: #e53935; color: #fff; font-size: 26px; line-height: 1; text-decoration: none;
  border: 1px solid #e53935; box-shadow: 0 2px 10px rgba(0,0,0,.45); }
.status-exit:hover, .status-exit:active { background: #ff4d49; color: #fff; border-color: #ff4d49; }
.status-back { display: block; margin: 22px auto 0; text-align: center; color: var(--red-light);
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.status-back:hover { text-decoration: underline; }
@media (max-width: 760px) { .status-exit { top: 8px; right: 8px; width: 42px; height: 42px; } }
/* BUILD 122: the +25% wordmark from BUILD 115 ran wider than the screen and clipped the last letter of
   OUTLET on phones. Sized so the text fits inside the container at every phone width (checked 360-900). */
@media (max-width: 760px) { .hero-mark { font-size: min(5.9vw, 55px) !important; } }
@media (min-width: 761px) and (max-width: 900px) { .hero-mark { font-size: min(6.2vw, 55px) !important; } }

/* ---- BUILD 123 (Eric, 2026-09-08) --------------------------------------------------------------- */
/* 1. Response Generator would not move on a phone: the BUILD 97/100 rules pinned it with !important on
   all four sides, and an !important rule beats the inline position the drag writes. Once it has been
   dragged it carries .is-placed, so the pins now step aside for it. */
@media (max-width: 900px) {
  .chat-cta:not(.is-placed) { left: auto; right: 10px; top: 118px; bottom: auto; }
  .chat-cta.is-placed { left: auto; right: auto; bottom: auto; transform: none !important; }
}
/* 3. the facts under the hero on one line on the fold and tablets too (small phones keep two - six
   facts cannot fit across 390px without shrinking to about 7px). */
@media (min-width: 761px) and (max-width: 900px) {
  .cred-inner { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important;
                gap: 8px !important; padding-left: 12px !important; padding-right: 12px !important; }
  .cred-line { display: contents !important; }
  .cred-item { font-size: 10.5px !important; white-space: nowrap !important; }
  .cred-line .cred-item::after { content: none !important; }
}
/* BUILD 124: the 4.8 goes back exactly as it was - it was the wordmark he wanted brighter. */
header .logo, header .logo .hr, header .logo .full { color: #ffe08a !important; }
header .logo .hr, header .logo .full {
  text-shadow: 0 0 12px rgba(255,224,138,.95), 0 0 26px rgba(255,201,51,.75), 0 0 50px rgba(242,169,0,.45);
}
@keyframes hrLogoBeam {
  from { text-shadow: 0 0 8px rgba(255,224,138,.75), 0 0 18px rgba(255,201,51,.45), 0 0 34px rgba(242,169,0,.22); }
  to   { text-shadow: 0 0 16px rgba(255,238,180,1), 0 0 34px rgba(255,201,51,.95), 0 0 60px rgba(242,169,0,.6); }
}

/* ---- BUILD 142 (Eric, 2026-09-08): desktop pass -------------------------------------------------- */

/* 1. Hero copy: it sat 110px in from the edge at 35px type and read as a wall of text over the car.
   Eric wants it hard against the left margin with about a quarter inch of air, the whole block
   smaller, and pulled up so it finishes near the car's hood instead of running across the windscreen.
   One block so the three moves stay in step -- shrinking the type without also cutting the top
   padding just leaves a hole above the hood. */
@media (min-width: 901px) {
  .hero .wrap { padding-left: 28px !important; padding-top: 56px !important; }
  .hero-text { max-width: 560px !important; }
  .hero .eyebrow { font-size: 13.5px !important; margin-bottom: 12px !important; }
  .hero h1 { font-size: 28px !important; margin-bottom: 13px !important; }
  .hero p.lead { font-size: 15px !important; max-width: 500px !important; margin-bottom: 17px !important; }
}

/* 2. Header brand was being cut. "Tire Outlet" carries overflow:hidden and is the only thing in the
   bar allowed to shrink, so once the nav, the reviews pill, EN/ES and the two icons had taken their
   width it was squeezed to nothing -- on every page, which is why it looked like the header was
   stuck. Freeing the wrap from its 1280px cap and trimming the brand and gaps buys back the room. */
@media (min-width: 901px) {
  header .wrap { max-width: none !important; gap: 12px !important; padding-left: 22px !important; padding-right: 22px !important; }
  header .logo { font-size: 20px !important; }
  header .logo img { height: 46px !important; width: 46px !important; margin-right: 8px !important; }
  header .logo .full { overflow: visible !important; text-overflow: clip !important; flex-shrink: 0 !important; }
  header .hdr-rev { font-size: 12px !important; }
}

/* 3. Response Generator was pinned to the top-right corner at EVERY width. BUILD 97 put it
   "under the header everywhere" with an unscoped rule; on a phone that is right, on desktop it
   parks the pill on top of the hero photo in the corner. Scoped to phones and tablets now, so
   desktop falls back to the base bottom-right position and the hero is clear. Still draggable --
   :not(.is-placed) means Eric's own position always wins. */
@media (min-width: 901px) {
  /* 88px, not 22px: at 22 the pill landed on top of HABLAMOS ESPANOL in the trust strip
     the moment the page loaded. 88 clears the strip and keeps it off the hero copy. */
  .chat-cta:not(.is-placed) { top: auto !important; bottom: 88px !important; right: 24px !important; }
}

/* ---- BUILD 143 (Eric, 2026-09-08): desktop pass 2 ------------------------------------------------ */

/* 4. Status-band buttons were 8px-radius rectangles while every other button on the site is a pill.
   Same shape and same weight as the rest now. (The band itself is home-page only from this build --
   the markup was pulled from the other 26 pages.) */
.status-band-cta { border-radius: 999px !important; min-height: 40px !important; padding: 9px 20px !important; font-size: 13px !important; }

/* 5. Contact page, desktop only: the form comes off and the address, hours and map take the width,
   so Contact runs straight into the footer under it. Phones keep the form -- it is the easiest way
   to reach the shop from a phone. */
@media (min-width: 901px) {
  .contact .form-panel { display: none !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
}

/* 6. Header 30% taller, and the grey floor cut off the bottom of the hero.
   Eric asked whether a taller header would push the car down and swallow the floor. It does not --
   a taller header just moves the whole hero band further down the page; the car sits inside the
   photo and does not move relative to it. At 1366 the box (2.203) and the mid photo (2.200) are
   the same shape, so the photo was being shown whole, floor and all, with nothing cropped.
   Shortening the hero to 540 makes the box wider than the photo, which crops it vertically, and
   anchoring at 15% throws that crop away off the BOTTOM -- the floor -- instead of the ceiling.
   Header height is done separately below because it is a separate thing. */
@media (min-width: 901px) {
  header .wrap { padding-top: 14px !important; padding-bottom: 14px !important; }
  .hero { height: 540px !important; min-height: 540px !important; max-height: 540px !important; }
  .hero-bg img { object-position: 0% 15% !important; }
  .hero .wrap { padding-top: 40px !important; }
}

/* ---- BUILD 144 (Eric, 2026-09-08): hero fills the window to the yellow line ---------------------- */
/* Eric wants the black trust strip under the hero to sit on the bottom of the window, with the
   yellow line beneath it landing exactly on the fold. So the hero takes whatever height is left
   over instead of a fixed 540. The pieces above and below it are fixed heights:
       pre-launch banner 39  +  header 74  +  checker strip 8  +  trust strip 55  +  yellow line 3
   The banner is a launch switch, so it gets its own variable -- set --prelaunch-banner to 0px on
   launch day when the banner comes off and the maths still lands.
   Capped at 760 because on a very tall window an over-tall hero shows the grey floor again (the
   box stops being wider than the photo, so nothing gets cropped off the bottom). */
:root { --prelaunch-banner: 39px; }
@media (min-width: 901px) {
  .hero {
    height: clamp(420px, calc(100dvh - var(--prelaunch-banner) - 140px), 760px) !important;
    min-height: 420px !important; max-height: 760px !important;
  }
  /* Parked above the black banner on the grey floor, right-hand side. Still free to float --
     :not(.is-placed) drops the moment Eric drags it, and BUILD 144 in chatbot.js lets him. */
  .chat-cta:not(.is-placed) { top: auto !important; bottom: 74px !important; right: 24px !important; }
}

/* ---- BUILD 146 (Eric, 2026-09-08): desktop pass 3 ------------------------------------------------ */

/* 4. About now leads with the same page header every other tab has, and Eric wants the line itself
   in the shop's yellow rather than white. */
body.page-about .svc-hero h1 { color: #f2a900 !important; }

/* 6 + 10. One rule for every way of saying "call". Anything that dials the shop is green -- the same
   green as the CALL pill in the hero -- so a customer learns the colour once. The phone number has
   come off the labels; the button just says Call, and the number is in the link. */
a[href^="tel:"].btn-primary,
a[href^="tel:"].promo-cta,
a[href^="tel:"].call-link,
.status-help .call-link,
.hero-ctas a[href^="tel:"] {
  background: #125c2c !important; border-color: #125c2c !important; color: #fff !important;
}
a[href^="tel:"].btn-primary:hover,
a[href^="tel:"].promo-cta:hover,
a[href^="tel:"].call-link:hover,
.status-help .call-link:hover,
.hero-ctas a[href^="tel:"]:hover { background: #16733a !important; border-color: #16733a !important; }

/* 7. Repair status page. The tag at the top goes yellow, the heading and its paragraph centre,
   and the whole lookup -- label, field and button -- centres under them so the form reads as one
   column instead of drifting left. "Can't find your vehicle?" goes red because it is the thing
   somebody reads when the answer they wanted did not come back. */
.status-panel .section-tag { color: #f2a900 !important; justify-content: center !important; }
.status-panel h1 { text-align: center !important; }
.status-panel .status-lead { text-align: center !important; max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; }
.status-form { display: flex !important; flex-direction: column !important; align-items: center !important; }
.status-form label { text-align: center !important; width: 100% !important; max-width: 320px !important; }
.status-form input { text-align: center !important; }
.status-form button { align-self: center !important; }
.status-form .form-status { text-align: center !important; }
.status-help h2 { color: #e53935 !important; }

/* 9. "Proof in the work" on About, 30% bigger -- heading and body both, or the heading grows away
   from its own paragraph. */
.legacy-card h3 { font-size: 1.3em !important; }
.legacy-card p { font-size: 1.3em !important; line-height: 1.55 !important; }

/* 11. The paragraph Eric asked for between the Our Work header and the engine photos. */
.work-intro { background: #0b0b0c; padding: 34px 0 30px; }
.work-intro p { max-width: 760px; margin: 0 auto; text-align: center; color: #d6dadd;
  font-size: 16.5px; line-height: 1.65; font-family: 'Roboto', Arial, sans-serif; }
@media (max-width: 760px) { .work-intro { padding: 24px 0 22px; } .work-intro p { font-size: 15px; padding: 0 16px; } }

/* 12. Phone header ~35% taller. Eric asked whether the space under the car would allow it. It does,
   but the header growing does not by itself take that space -- so --fold-rest grows with it, which
   keeps the button bar and the wordmark where they are and takes the extra height out of the photo
   instead of pushing the page down. */
@media (max-width: 760px) {
  header .wrap { padding-top: 12px !important; padding-bottom: 12px !important; }
  header .logo img { height: 44px !important; width: 44px !important; }
  :root { --fold-rest: 224px; }
}

/* 6b. The bottom-bar CALL on phones was still yellow (BUILD 618 rule above). Eric's rule is that
   anything that dials the shop is green, everywhere, so a customer learns the colour once. */
.mobile-action-bar .mab-call { background: #125c2c !important; color: #fff !important; }
.mobile-action-bar .mab-call svg { stroke: #fff !important; }

/* ---- BUILD 149 (Eric, 2026-09-08): phone pass ---------------------------------------------------- */

/* W1. Response Generator drops clear of the header. The fallback matches the new +48 in chatbot.js
   so it lands in the same place before the script has measured anything. */
/* BUILD 159 (Eric, 2026-09-08): scoped to phones. Unscoped, this set `top` with !important on
   top of the desktop rule above that sets `top:auto; bottom:74px`. A fixed box with BOTH a top
   and a bottom and no height stretches to fill the gap -- which is why the pill turned into a
   200px-wide, 650px-tall slab down the right of the desktop hero. My own rule, from BUILD 149. */
@media (max-width: 900px) { .chat-cta:not(.is-placed) { top: var(--rg-top, 96px) !important; } }

/* W2. Phone header another 30%: 44px mark -> 56px, padding 12 -> 15. --fold-rest grows by the same
   amount so the extra height comes out of the photo (the empty floor under the jack stand) rather
   than pushing the wordmark and the button bar down the page. */
@media (max-width: 760px) {
  /* The height grows, the logo does not. A 56px mark pushed the row past 390px and cut the
     blue chat button off the right edge -- there is no spare width on a phone. 22px of padding
     on a 44px mark is the same +30% in height with nothing added across. */
  header .wrap { padding-top: 22px !important; padding-bottom: 22px !important; }
  header .logo img { height: 44px !important; width: 44px !important; }
  :root { --fold-rest: 250px; }
}

/* W5 pulled: setting margins on the rating pill, EN/ES and the icon group pushed the row past
   390px and cut the blue chat button off the right edge. There is no spare width in the phone
   header -- whatever "together" ends up meaning, it cannot cost width. */

/* W3. Repair status: the heading takes the same green as every Call button, and Check Status goes
   grey -- it is the neutral action on the page, not the thing being advertised. */
.status-panel h1 { color: #2e9e57 !important; }
.status-form button { background: #6b7280 !important; color: #fff !important; }
.status-form button:hover { background: #7d8694 !important; }

/* W4. Footer tagline centres under the shop name. */
.footer-tagline { text-align: center !important; }

/* ---- BUILD 151 (Eric, 2026-09-08) ---------------------------------------------------------- */
/* The Response Generator icon shrinks with the pill -- a 19px robot inside a 7px-padded pill
   looks like the pill was cropped around it. */
.chat-cta .chat-cta-icon svg { width: 13px !important; height: 13px !important; }
@media (max-width: 760px) {
  .chat-cta { font-size: 9px !important; padding: 6px 12px !important; }
  .chat-cta .chat-cta-icon svg { width: 12px !important; height: 12px !important; }
}


/* ---- BUILD 152 (Eric, 2026-09-08): fold-narrow pass ---------------------------------------- */

/* 3. The repair-status heading takes the exact green of the Call buttons, as asked. */
.status-panel h1 { color: #125c2c !important; }

/* 4. Phones and the fold had no way into About, Services, Tires, Our Work or Contact -- the nav
   is desktop-only and the footer never listed About, so a whole section of the site was
   unreachable on a phone. A thin scrolling strip under the header carries all five. It scrolls
   sideways so it costs no width, and --fold-rest grows by its height so it comes out of the
   photo rather than pushing the button bar down. */
@media (max-width: 900px) {
  .phone-nav { display: flex !important; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: #000; padding: 7px 10px; scrollbar-width: none; }
  .phone-nav::-webkit-scrollbar { display: none; }
  .phone-nav a { flex: 0 0 auto; color: #f2a900; text-decoration: none; font-weight: 700;
    font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
    font-family: 'Space Grotesk', Arial, sans-serif; padding: 5px 12px; border-radius: 999px;
    border: 1px solid rgba(242,169,0,.45); white-space: nowrap; }
  .phone-nav a:active { background: #f2a900; color: #121212; }
}
@media (max-width: 760px) { :root { --fold-rest: 292px; } }
.phone-nav { display: none; }

/* 5. The message box on the repair-status page. */
.status-msg-field { margin-top: 4px; width: 100%; max-width: 320px; }
.status-msg-field label { display: block; text-align: center; color: #cfd3d6; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  font-family: 'Space Grotesk', Arial, sans-serif; margin-bottom: 7px; }
.status-msg-field textarea { display: block; width: 100%; min-height: 72px; padding: 11px 14px;
  background: #000; border: 1px solid #27272a; border-radius: 8px; color: #f2f4f5;
  font-size: 15px; font-family: 'Roboto', Arial, sans-serif; }
.status-msg-send { display: inline-flex; align-items: center; justify-content: center;
  margin: 10px auto 0; padding: 9px 20px; border-radius: 999px; border: 0;
  background: #125c2c; color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; font-family: 'Space Grotesk', Arial, sans-serif; text-decoration: none; }
.status-msg-send:hover { background: #16733a; }
.status-msg-send.off { background: #3a3f45; color: #8b9096; }

/* BUILD 152: the pill must never cover the nav strip. The fallback matches the strip's height
   plus the header, for the moment before the script has measured anything. */
@media (max-width: 900px) { .chat-cta:not(.is-placed) { top: var(--rg-top, 150px) !important; } }


/* BUILD 159: whatever else is written above, on desktop the pill hangs off the BOTTOM only.
   Setting height auto with both edges pinned is what produced the slab. */
@media (min-width: 901px) {
  .chat-cta:not(.is-placed) { top: auto !important; bottom: 74px !important; right: 24px !important;
    height: auto !important; max-height: none !important; }
}

/* ---- BUILD 161 (Eric, 2026-09-09): payment options ---------------------------------------- */
/* Format lifted from the Reynoso financing band; the colours are H&R's. Purple stays, because
   Eric asked for it and because it is the one colour nothing else on this site uses -- so a
   payment button can never be mistaken for a call, an estimate or a status check. */
.financing-band { background: #0b0b0c; padding: 40px 0 44px; border-top: 1px solid rgba(242,169,0,.22); }
.financing-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.financing-text h2 { font-size: 1.75rem; margin-bottom: 8px; color: #f2a900; text-transform: uppercase; letter-spacing: .03em; }
.financing-text p { color: #c9cfd4; max-width: 640px; margin: 0 auto; line-height: 1.6; }
.financing-fold-row { margin: 6px 0 0; }
.financing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; width: 100%; margin-top: 18px; }
.financing-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 26px 22px 24px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 12px; }
.financing-card h3 { margin: 0; color: #fff; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; }
.financing-card p { margin: 0; color: #c3cbe0; font-size: .93rem; line-height: 1.55; flex: 1 1 auto; }

/* the purple */
.btn-findout { display: inline-flex; align-items: center; justify-content: center;
  background: #6A1B9A; color: #fff; border: 1px solid #6A1B9A; border-radius: 999px;
  padding: 10px 22px; font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; box-shadow: 0 4px 14px rgba(106,27,154,.38); }
.btn-findout:hover { background: #4A148C; border-color: #4A148C; color: #fff; }

/* Request an estimate is red, the same red as the one in the hero -- it is the same action. */
.btn-estimate { display: inline-flex; align-items: center; justify-content: center;
  background: #e53935; color: #fff; border: 1px solid #e53935; border-radius: 999px;
  padding: 10px 22px; font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.btn-estimate:hover { background: #ff4d49; border-color: #ff4d49; }

.finance-page { display: grid; grid-template-columns: 1.4fr .9fr; gap: 34px; align-items: start; }
.finance-copy h2 { color: #f2a900; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .03em; margin: 22px 0 8px; }
.finance-copy ol { color: #c9cfd4; line-height: 1.7; padding-left: 20px; }
.finance-note { color: #9aa3ab; font-size: .9rem; line-height: 1.6; margin-top: 14px; }
.finance-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }

/* The QR is a placeholder on purpose -- Eric will drop each company's real code in. Copying
   Reynoso's would have pointed H&R's customers at another shop's finance account. */
.finance-qr-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 22px; text-align: center; }
.finance-qr-card p { color: #9aa3ab; font-size: .88rem; line-height: 1.5; margin: 12px 0 0; }
.qr-placeholder { width: 100%; aspect-ratio: 1 / 1; max-width: 260px; margin: 0 auto;
  border: 2px dashed rgba(242,169,0,.55); border-radius: 12px; display: flex;
  align-items: center; justify-content: center; background: rgba(242,169,0,.06); }
.qr-placeholder span { color: #f2a900; font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 0 14px; }

@media (max-width: 900px) {
  .financing-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .finance-page { grid-template-columns: 1fr; }
  .financing-text h2 { font-size: 1.4rem; }
  .finance-actions { justify-content: center; }
}

/* ---- BUILD 162 (Eric, 2026-09-09): EasyPay only, and the finance pages go dark ------------- */
/* H&R deals with EasyPay and nobody else. Acima and Synchrony are deleted, not hidden -- an
   unlinked page still gets found, and a page offering finance the shop cannot arrange is worse
   than no page at all. One option means no fold: hiding a single card behind a button is a tap
   for nothing. */
.financing-single { grid-template-columns: minmax(0, 460px) !important; justify-content: center; }

/* The finance pages inherited the service-page cream background and looked like a different
   site. Dark, like everything else. */
body.page-finance .svc-body,
.finance-page { background: transparent; }
.svc-body:has(.finance-page) { background: #0b0b0c !important; color: #e8ebed !important; }
.finance-copy p, .finance-copy li { color: #c9cfd4 !important; }
.finance-copy h2 { color: #f2a900 !important; }
.finance-note { color: #9aa3ab !important; }
.finance-qr-card { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; }

/* ---- BUILD 163 (Eric, 2026-09-09) --------------------------------------------------------- */

/* About: the headline was sitting across the shop sign, the busiest part of the photo. The photo
   now ends where it ends and the words sit under it, centred, on the dark. Same type size as
   every other page header -- About only looked bigger because its line wraps. */
.svc-hero.about-hero { display: block !important; height: auto !important; min-height: 0 !important; }
.svc-hero.about-hero .svc-hero-photo { position: relative !important; height: 220px; display: flex; justify-content: center; overflow: hidden; background: repeating-linear-gradient(90deg, #6687a0 0 55px, #5b7e99 56px 59px, #7495ac 60px 64px); }
.svc-hero.about-hero .svc-hero-photo img { width: min(100%, 470px); height: 100%; object-fit: cover; object-position: 50% 62%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent); }
.svc-hero.about-hero .svc-hero-inner { position: relative !important; padding: 26px 20px 30px !important;
  text-align: center !important; background: #0b0b0c; }
.svc-hero.about-hero .svc-back { display: inline-block; }
.svc-hero.about-hero h1 { font-size: 30px !important; margin: 0 auto !important; max-width: 780px;
  text-align: center !important; text-shadow: none !important; }
@media (max-width: 760px) {
  .svc-hero.about-hero .svc-hero-photo { height: 190px; }
  .svc-hero.about-hero .svc-hero-photo img { width: 100%; object-position: 50% 62%; }
  .svc-hero.about-hero h1 { font-size: 22px !important; }
}

/* Status page: the phone box and Check Status share a row and match in height. */
.status-lookup-row { display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  width: 100%; max-width: 420px; margin: 0 auto; }
.status-lookup-row label { flex: 1 1 auto; margin-bottom: 0 !important; text-align: center; }
.status-lookup-row button { flex: 0 0 auto; height: 44px !important; margin: 0 !important; white-space: nowrap; }
.status-form input { height: 44px !important; }

/* Send text takes the blue of the EN pill in the header -- it is the same kind of action, and
   green is already spoken for by Call. */
.status-msg-send, .status-msg-send.off { background: #14b8a6 !important; color: #06231f !important; }
.status-msg-send:hover { background: #2cc7b5 !important; }

/* BUILD 163: the trust strip still was not reaching the bottom on Eric's screen. The clamp I
   wrote in BUILD 144 caps the hero at 760px, which lands the yellow line on the fold at 768 but
   leaves it stranded above the fold on anything taller -- his monitor is 1080. Cap raised so the
   line meets the window on a big screen too. The trade is a little more grey floor up there,
   which is the lesser of the two. */
@media (min-width: 901px) {
  .hero {
    height: clamp(420px, calc(100dvh - var(--prelaunch-banner) - 140px), 1040px) !important;
    max-height: 1040px !important;
  }
}

/* BUILD 163: the inline error under a bad email or phone on Request an Estimate. */
.contact-form .field-bad { border-color: #e53935 !important; box-shadow: 0 0 0 2px rgba(229,57,53,.18) !important; }
.contact-form .field-msg { display: block; color: #ff6b67; font-size: 12px; line-height: 1.4;
  margin-top: 5px; text-transform: none; letter-spacing: 0; font-family: 'Roboto', Arial, sans-serif; }


/* ==== BUILD 169 (Eric, 2026-09-09) ======================================================== */

/* E. No header text on a hero photo, on any tab. The photo ends where it ends and the words sit
   in a black band directly underneath it, centred, with the headline in the shop's yellow.
   About already worked this way from BUILD 163; the band there was painted on the .wrap, which
   is exactly what drew the black rectangle Eric could see -- it is on the section now, so it
   runs edge to edge and reads as part of the page rather than a box dropped on it. */
.svc-hero { display: block !important; min-height: 0 !important; height: auto !important;
  background: #0b0b0c !important; }
/* the gradient existed to hold text off the photo; there is no text on the photo now */
.svc-hero::after { display: none !important; }
.svc-hero .svc-hero-photo { position: relative !important; height: 220px; }
.svc-hero.suspension-hero .svc-hero-photo { height: 220px; }
.svc-hero .svc-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-hero .svc-hero-inner { position: relative !important; background: transparent !important;
  padding: 22px 20px 26px !important; text-align: center !important; }
.svc-hero .svc-back { display: inline-block; margin-bottom: 8px; }
.svc-hero h1 { color: #f2a900 !important; font-size: 30px !important;
  margin: 0 auto 8px !important; max-width: 820px; text-align: center !important;
  text-shadow: none !important; }
.svc-hero .svc-lede { margin: 0 auto !important; max-width: 660px; text-align: center !important;
  text-shadow: none !important; }
@media (max-width: 760px) {
  .svc-hero .svc-hero-photo { height: 190px; }
  .svc-hero.suspension-hero .svc-hero-photo { height: 190px; }
  .svc-hero h1 { font-size: 22px !important; }
}

/* B. About: the headline is the top line of the story, not a headline stranded above a gap,
   and "Proof in the work" is set at the same size as it. */
body.page-about .legacy { padding-top: 6px !important; }
body.page-about .legacy-copy { margin-top: 0 !important; }
body.page-about .legacy-card h3 { font-size: 30px !important; line-height: 1.15; }

/* C. Footer: the tagline sits directly under the shop's name, tight against it, and centred on
   it. Only the brand block centres -- the Services and Visit columns stay left, where a list
   belongs. */
.footer-left { text-align: center !important; }
.footer-logo { justify-content: center; margin-bottom: 3px !important; }
.footer-tagline { max-width: 340px !important; margin: 0 auto 18px !important; }
.footer-cols { text-align: left; }

/* D. Tires. */
/* BUILD 171: the two opening paragraphs are one paragraph now, so the whole thing centres. */
.tire-intro p { text-align: center; margin-left: auto; margin-right: auto; }
/* The call box was pinned to the top of its column, hard right and a long way from the list it
   belongs to. It centres in the space beside the bullets and sits closer to them. */
.tire-split { align-items: center !important; gap: 30px !important; }
.tire-cta { text-align: center; }
.tire-cta h4 { color: #f2a900 !important; text-align: center; }
.tire-cta p { text-align: center; }
.tire-cta .btn-primary { display: inline-block; float: none; }

/* A. Payment options: one partner, so no grid of boxes -- and at half width the band reads as a
   note rather than a section shouting for attention. Greens per Eric: the heading in green, the
   partner's name in a darker one, neither of them the Call button's colour. */
.financing-inner { max-width: 560px; margin-left: auto; margin-right: auto; }
/* The pair Eric approved was #1f8f4a over #0f5027, and the dark one measured 2.04:1 against
   this band -- under even the 3.0 floor for large text, so it read as a smudge rather than
   words. Both are shifted one step lighter: the heading is plainly green, the partner's name
   plainly darker than it, and they now measure 10.9:1 and 4.7:1. Neither is the Call red nor
   the WhatsApp green, so the payment line still cannot be mistaken for either. */
.financing-text h2 { color: #3ddc84 !important; margin-bottom: 2px; }
.financing-partner { color: #1f8f4a; font-size: 1.15rem; text-transform: uppercase;
  letter-spacing: .04em; margin: 0 0 10px; }
.financing-text .btn-findout { margin-top: 16px; }

/* B (cont.). Closing the gap for real. Three things made it, not one: BUILD 163's padding rule
   on the About header is more specific than the shared one above, the hero section carries a
   margin, and the story section adds its own. The headline now sits on top of the paragraph it
   introduces, which is what it is for. */
.svc-hero.about-hero .svc-hero-inner { padding-bottom: 12px !important; }
body.page-about .svc-hero { margin-bottom: 0 !important; }
body.page-about .legacy { padding-top: 0 !important; margin-top: 0 !important; }
body.page-about .legacy > .wrap { padding-top: 0 !important; }
/* The hero section's own 34px top and bottom padding was left over from when the words sat on
   the photo and needed room. The photo now runs flush to the nav and the band flush to the
   text under it; the inner block carries the only spacing that is still wanted. */
.svc-hero { padding: 0 !important; }
.svc-hero .svc-hero-inner { padding-bottom: 18px !important; }
.svc-hero.about-hero .svc-hero-inner { padding-bottom: 18px !important; }


/* ==== BUILD 171 (Eric, 2026-09-09) ==== */

/* Tires. The call box sat hard right, a long way from the bullets it belongs to, and its Call
   button was the smallest thing on the page -- 63px wide at 12px type. The box moves left and
   the button is given real size. It stays an oval pill: larger, not fatter. */
@media (min-width: 901px) {
  .tire-split { grid-template-columns: 1.15fr .92fr !important; gap: 16px !important; }
}
.tire-cta .btn-primary {
  font-size: 15px !important; padding: 12px 34px !important;
  border-radius: 999px !important; letter-spacing: .04em;
}

/* Our Work. Its black band carries a one-line heading and a one-line lede, where Tires carries a
   kicker, two heading lines and three lede lines -- which is the whole reason one band came out
   shorter than the other. A floor on the height matches them and the text centres inside it. */
body.page-work .svc-hero-inner {
  min-height: 161px; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 760px) { body.page-work .svc-hero-inner { min-height: 202px; } }

/* The white strip between the black block and the photographs was a 30px top margin on the
   gallery collapsing out through a section with no top padding, so it painted in the body's
   white rather than the band's black. The margin is gone; the black block's own 30px of bottom
   padding is what now separates the two. */

/* Request an Estimate, under the paragraph and still on the black. */
.work-cta { text-align: center; margin-top: 20px; }
.work-cta .btn-primary {
  font-size: 15px !important; padding: 12px 34px !important;
  border-radius: 999px !important; letter-spacing: .04em;
}

/* Footer: a Call button under the map. Eric: just "Call", a standard-size pill (not a
   full-width block), centred under the map. */
footer a.map-call {
  display: inline-block; width: auto; text-align: center; margin-top: 8px; padding: 9px 22px;
  background: #125c2c; border-radius: 999px; text-decoration: none;
  font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  font-family: 'Space Grotesk', Arial, sans-serif;
  /* Every Call on this site is the BUILD 100 green, so the footer's is too -- and the footer
     paints its links yellow, which on a coloured pill has to be overridden outright. */
  color: #fff !important;
}
footer .footer-map { text-align: center; }
footer a.map-call:hover { background: #16733a; }

/* ================= BUILD 172 (Eric, 2026-09-09, the TV session) ================= */
/* 1. Eric on the phone pills: the Text icon rides the right edge of the screen.
   Measured at 344 (fold cover): the icons ended at 338/344 and overflowed their own
   row, because BUILD 81's wrap is 88% wide and centred - both margins wasted. The row
   now spans the full width with its own padding, so everything shifts left and the
   icons keep a real margin from the edge. */
@media (max-width: 900px) {
  header .wrap { width: 100%; margin: 0; padding: 0 12px 0 8px; gap: 6px; }
}

/* 2. The section pills under the header: Eric keeps them, but "smaller, tight around
   the words, no AI-looking buttons" - the house pill rule, thinner and leaner, with a
   soft gold glow instead of bulk. */
@media (max-width: 900px) {
  .phone-nav { gap: 6px; padding: 6px 8px; }
  .phone-nav a { font-size: 10px; padding: 3px 9px; letter-spacing: .06em;
    border: 1px solid rgba(242,169,0,.55);
    box-shadow: 0 0 7px rgba(242,169,0,.28), inset 0 0 4px rgba(242,169,0,.12); }
}

/* 3. The hero wordmark radiates - same slow yellow breath as the reviews 4.8, glow
   only, the letters themselves never change colour. */
@keyframes hrMarkGlow {
  0%, 100% { text-shadow: 0 2px 22px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.7),
             0 0 14px rgba(242,169,0,.35); }
  50%      { text-shadow: 0 2px 22px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.7),
             0 0 26px rgba(242,169,0,.75), 0 0 46px rgba(242,169,0,.35); }
}
.hero-mark { animation: hrMarkGlow 2.8s ease-in-out infinite; }

/* ================= BUILD 173 (Eric, 2026-09-09, the TV session) ================= */
/* The header row was computing to justify-content:center at 88% width, pinned left,
   which left ~47px of dead black on the right and clumped everything (BUILD 81's 88%
   + BUILD 123's `center !important`). This block wins outright with !important:
   the row spans the full width and its items spread evenly across it, so it fills the
   whole top of the header and reads centred/balanced rather than crammed to one side.
   Logo mark and the wordmark grow inside the SAME header height (there was slack). */
@media (max-width: 900px) {
  header .wrap { justify-content: center !important; width: 100% !important;
    max-width: 100% !important; margin: 0 !important; padding: 15px 8px !important;
    gap: 6px !important; align-items: center !important; flex-wrap: nowrap !important; }
  header .logo img { height: 44px !important; width: 44px !important; }
  header .logo .hr  { font-size: 9px !important; }
  header .logo .full { font-size: 9px !important; }   /* Eric: TIRE OUTLET the same size as H&R AUTOMOTIVE */
  /* Spunk: each section tab wears its own text colour - the pill border stays the original
     gold (Eric: only the verbiage coloured, leave the pills alone). */
  .phone-nav a:nth-child(1) { color: #3b9bff !important; }
  .phone-nav a:nth-child(2) { color: #33d17a !important; }
  .phone-nav a:nth-child(3) { color: #ffb02e !important; }
  .phone-nav a:nth-child(4) { color: #c07cff !important; }
  .phone-nav a:nth-child(5) { color: #ff5c5c !important; }
  /* The 4.8 fills the empty space the tight row leaves. Trimmed ~5% (Eric: header was a hair
     too wide, the Text icon sat right on the right edge) so it clears the margin again. */
  header .hdr-rating { padding: 6px 11px !important; gap: 6px !important; flex: 0 0 auto !important; }
  header .hdr-score { font-size: 17px !important; }
  header .hdr-stars { font-size: 13px !important; }
  /* The section tabs pack close together, centred - gaps roughly halved from the spread. */
  .phone-nav { justify-content: center; padding: 6px 10px; gap: 8px; }
}
/* Narrow phones (Galaxy 360, fold cover 344): the 46px logo would push the Text icon
   off the edge, so it steps down just enough that the whole row still fits. */
@media (max-width: 374px) {
  header .wrap { padding: 13px 4px !important; gap: 4px !important; }
  header .logo img { height: 35px !important; width: 35px !important; }
  header .hdr-rating { padding: 4px 7px !important; gap: 4px !important; }
  header .hdr-score { font-size: 13px !important; }
  header .hdr-stars { font-size: 11px !important; }
  .phone-nav { padding: 6px 10px; gap: 6px; }
}

/* Radial glow: the header 4.8 and the header wordmark breathe like the reviews 4.8 -
   an even halo on all sides, the letters' own colour untouched. */
@keyframes hrRadGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(242,169,0,.35), 0 0 12px rgba(242,169,0,.18); }
  50%      { text-shadow: 0 0 12px rgba(242,169,0,.9), 0 0 24px rgba(242,169,0,.6),
             0 0 40px rgba(242,169,0,.32); }
}
header .hdr-score,
header .logo .hr, header .logo .full { animation: hrRadGlow 2.8s ease-in-out infinite; }

/* ================= BUILD 174 (Eric, 2026-09-09, the TV session) ================= */
/* 1. Our Work's verbiage stays in a BLACK section, matching the About page's story block
   (Eric: put all of the verbiage in the black section, both pages the same). */
.work-intro { background: #0b0b0c !important; }
.work-intro p { color: #d6dadd !important; }
/* The Request an Estimate button here reads like the small red hero pill, not a fat button. */
.work-intro .btn-primary, .work-cta .btn-primary {
  background: #e53935 !important; color: #fff !important;
  display: inline-block !important; width: auto !important;
  padding: 9px 20px !important; font-size: 13px !important; font-weight: 700 !important;
  border-radius: 999px !important; letter-spacing: .04em !important; box-shadow: none !important; }

/* 2. Sub-pages need an explicit way back. A red close X sits top-left of the black hero
   (top-right is where the Mr. Auto & Tire pill parks) and returns to the home page.
   The X element itself is injected by chatbot.js on any page that has a .svc-hero. */
.svc-hero { position: relative; }
.svc-close { position: absolute; top: 10px; left: 10px; z-index: 6;
  width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(0,0,0,.55); border: 1.5px solid rgba(229,57,53,.85);
  color: #e53935; font-size: 17px; line-height: 1; text-decoration: none; font-weight: 700;
  box-shadow: 0 0 8px rgba(0,0,0,.5); }
.svc-close:hover, .svc-close:active { background: #e53935; color: #fff; }

/* ================= BUILD 175 (Eric, 2026-09-09, the TV session) ================= */
/* Footer: the tagline under "H&R Automotive Tire Outlet" reads centred beneath the name,
   the whole left block centred on phones (Eric: it was sitting off to the left). */
@media (max-width: 900px) {
  footer .footer-left { text-align: center !important; }
  footer .footer-logo { justify-content: center !important; }
  footer .footer-tagline { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
}

/* ================= BUILD 176 (Eric, 2026-09-09, the TV session) ================= */
/* Show the review count in the header pill: "★ 4.8  114 reviews". The enlarged 4.8
   eases back a little because the count now fills the row, and "Google" is dropped on
   phones to save width (kept on desktop). */
@media (max-width: 900px) {
  header .wrap { gap: 4px !important; }
  header .hdr-rating { flex-wrap: nowrap !important; gap: 3px !important; padding: 5px 6px !important; }
  header .hdr-score { font-size: 13px !important; }
  header .hdr-score::before { content: '' !important; margin: 0 !important; }  /* drop the star; "4.8 114 reviews" */
  header .hdr-rev { display: inline !important; font-size: 8px !important; color: #c9cfd4 !important;
    letter-spacing: 0 !important; white-space: nowrap !important; }
  header .hdr-rev .rev-g { display: none !important; }
}
@media (max-width: 374px) {
  header .logo img { height: 33px !important; width: 33px !important; }
  header .logo .hr, header .logo .full { font-size: 8px !important; }
  header .hdr-score { font-size: 11px !important; }
  header .hdr-rev { font-size: 6.5px !important; }
  header .hdr-rating { padding: 3px 5px !important; gap: 2px !important; }
  header .wrap { gap: 3px !important; padding: 13px 4px !important; }
}

/* ================= BUILD 177 (Eric, 2026-09-09, the TV session) ================= */
/* Mr. Auto & Tire launcher: a question mark sits under the brain (Eric: brain image with
   a "?" underneath), so the icon reads "ask the brain". */
.chat-cta .chat-cta-icon { display: inline-flex !important; flex-direction: column; align-items: center; line-height: 1; }
.chat-cta .chat-cta-icon::after { content: "?"; font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 800; font-size: 9px; margin-top: 1px; color: #f2a900; }

/* ================= BUILD 173 (Eric, 2026-09-09 night, AiLand) ================= */
/* 1. Hero buttons: the yellow glow moves off CHECK REPAIR STATUS and onto REQUEST AN
   ESTIMATE. Same hrStatusGlow breath as before, just a different pill. Hero only; the
   status pill on other pages is untouched. */
.hero-ctas .btn-status { animation: none !important; box-shadow: none !important; }
.hero-ctas .btn-secondary:not(.btn-status) { animation: hrStatusGlow 1.6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .hero-ctas .btn-secondary:not(.btn-status) { animation: none; box-shadow: 0 0 18px 4px rgba(242,169,0,.7); }
}
/* 2. Hero CALL pill 30% longer (63 -> 83px on desktop). Eric: "it's not going to hit the car". */
.hero-ctas .btn-primary { padding: 7px 26px !important; }

/* ================= BUILD 175 (Eric, 2026-09-09 night, AiLand) ================= */
/* Mr. Auto & Tire launcher: no question mark, bigger brain, tighter pill, a colour that
   pulls the eye (electric violet, off Eric's approved palette), and "Ask me anything"
   centred under the name. */
.chat-cta .chat-cta-icon::after { content: none !important; }
.chat-cta .chat-cta-icon svg { width: 24px !important; height: 24px !important; }
.chat-cta { padding: 5px 11px 5px 8px !important; gap: 6px !important; background: #7c3aed !important; border: 1.5px solid #c4b5fd !important;
  color: #fff !important; box-shadow: 0 0 0 3px rgba(124,58,237,.25), 0 0 22px rgba(124,58,237,.75), 0 4px 16px rgba(0,0,0,.45) !important; }
.chat-cta:hover { background: #8b5cf6 !important; }
.chat-cta .chat-cta-icon { color: #fff !important; }
.chat-cta .chat-launcher-label { display: inline-flex !important; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
.chat-cta .chat-launcher-sub { display: block; font-size: 7.5px; font-weight: 600; letter-spacing: .03em; text-transform: none; color: #ede9fe; margin-top: 2px; }
@media (max-width: 760px) { .chat-cta .chat-cta-icon svg { width: 20px !important; height: 20px !important; } .chat-cta .chat-launcher-sub { font-size: 7px; } }

/* ================= BUILD 176 (Eric, 2026-09-10) ================= */
/* Launcher: thinner pill, "Ask me anything" bigger, parked right under the nav pills (chatbot.js). */
.chat-cta { padding: 3px 11px 3px 8px !important; gap: 6px !important; }
.chat-cta .chat-launcher-label { font-size: 9.5px !important; line-height: 1.05 !important; }
.chat-cta .chat-launcher-sub { font-size: 10px !important; font-weight: 700 !important; margin-top: 1px !important; letter-spacing: .02em !important; }
.chat-cta .chat-cta-icon svg { width: 22px !important; height: 22px !important; }

/* BUILD 176b (Eric): launcher skinnier and smaller still. */
.chat-cta { padding: 2px 9px 2px 7px !important; gap: 5px !important; border-width: 1px !important; }
.chat-cta .chat-launcher-label { font-size: 8.5px !important; line-height: 1.05 !important; }
.chat-cta .chat-launcher-sub { font-size: 8.5px !important; margin-top: 0 !important; }
.chat-cta .chat-cta-icon svg { width: 17px !important; height: 17px !important; }

/* ================= BUILD 177 (Eric, 2026-09-10): launcher ORANGE and GLOWING ================= */
.chat-cta { background: #ff7a00 !important; border: 1px solid #ffc27a !important; color: #fff !important;
  box-shadow: 0 0 0 2px rgba(255,122,0,.16), 0 0 10px 2px rgba(255,140,0,.45), 0 4px 14px rgba(0,0,0,.4) !important;
  animation: hrLauncherPulse 2.2s ease-in-out infinite alternate; }
@keyframes hrLauncherPulse { from { filter: drop-shadow(0 0 1px rgba(255,140,0,.2)); } to { filter: drop-shadow(0 0 4px rgba(255,140,0,.5)); } }
.chat-cta:hover { background: #ff8f1f !important; }
.chat-cta .chat-cta-icon { color: #fff !important; }
.chat-cta .chat-launcher-sub { color: #fff3e0 !important; }
@keyframes hrLauncherGlow {
  from { box-shadow: 0 0 0 2px rgba(255,122,0,.25), 0 0 10px 2px rgba(255,122,0,.55), 0 4px 16px rgba(0,0,0,.45); }
  to   { box-shadow: 0 0 0 3px rgba(255,122,0,.35), 0 0 24px 6px rgba(255,140,0,.95), 0 4px 16px rgba(0,0,0,.45); }
}


/* ================= BUILD 181 (Eric, 2026-09-10) =================================
   THE BUTTON RULE. Every button on this site is a skinny pill that hugs its words.
   Nothing fat. If a new button appears and it looks bloated, it is missing this.
   Written at html body ... specificity because the older house rule uses a.btn,
   which outranks a bare class and was quietly winning. */
html body .btn, html body a.btn, html body button.btn,
html body .btn-primary, html body .btn-secondary, html body .btn-findout,
html body .call-link, html body .status-form button, html body .status-msg-send,
html body a.map-call, html body .cta-banner-callbtn, html body .call-btn {
  padding: 6px 18px !important; min-height: 0 !important; line-height: 1.35 !important;
  border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .07em !important;
}

/* --- Repair Status page ------------------------------------------------------- */
/* The phone field, the button beside it and the message box below all share one
   width, so the left and right edges line up down the form. */
.status-form .status-lookup-row, .status-form .status-msg-field, .status-form .form-status {
  width: 100% !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important;
}
.status-lookup-row { display: flex !important; align-items: flex-end !important; gap: 8px !important; }
.status-lookup-row label { flex: 1 1 auto !important; max-width: none !important; }
.status-form input, .status-form textarea { width: 100% !important; }
.status-form input { height: 40px !important; }
.status-lookup-row button { height: 40px !important; }
.status-msg-field { margin-top: 14px !important; }
.status-msg-field textarea { min-height: 64px !important; }
/* Two different colours, neither of them grey. */
.status-form button { background: #0e9f9a !important; color: #04231f !important; }
.status-form button:hover { background: #13b8b1 !important; }
.status-msg-send { background: #4f46e5 !important; color: #fff !important; }
.status-msg-send:hover { background: #6366f1 !important; }
.status-msg-send.off { background: #3a3f45 !important; color: #8b9096 !important; }

/* --- Payment options band ------------------------------------------------------ */
/* Same yellow as CHECK YOUR REPAIR STATUS, a star each side, and the same slow shine. */
.financing-text h2 { color: #f2a900 !important; animation: hrPayGlow 2.8s ease-in-out infinite alternate; }
.financing-text h2 { white-space: nowrap; }
.financing-text h2::before { content: "\2605\00a0"; }
.financing-text h2::after  { content: "\00a0\2605"; }
@media (max-width: 640px) { .financing-text h2 { white-space: normal; font-size: 1.25rem !important; } }
@keyframes hrPayGlow {
  from { text-shadow: 0 0 6px rgba(242,169,0,.45); }
  to   { text-shadow: 0 0 14px #ffe082, 0 0 30px rgba(255,213,74,.9), 0 0 56px rgba(242,169,0,.7); }
}
.financing-text .financing-partner { font-size: 1.2em !important; }
html body .btn-findout { padding: 6px 26px !important; }

/* --- Footer -------------------------------------------------------------------- */
@media (min-width: 901px) {
  /* The shop name and its line under it sit centred in their column. */
  .footer-left { text-align: center !important; }
  .footer-logo { justify-content: center !important; }
  .footer-tagline { margin-left: auto !important; margin-right: auto !important; }
  .footer-cols { text-align: left; }
}
/* The footer Call: longer and thin, not a slab. */
html body footer a.map-call { padding: 5px 46px !important; font-size: 12px !important; }


/* ================= BUILD 183 (Eric, 2026-09-10): repair status form ====================
   At 390 and 470 the phone field was collapsing to 53px while Check Status stretched to
   the screen edge, because an older rule gives .status-form button width:100%. The field
   now owns its own full-width line and both buttons are centred pills at every size. */
html body .status-form .status-lookup-row{display:flex !important; flex-wrap:wrap !important;
  gap:10px !important; justify-content:center !important; align-items:center !important;}
html body .status-form .status-lookup-row label{flex:0 0 100% !important; max-width:100% !important;
  width:100% !important; margin:0 !important; text-align:center !important;}
html body .status-form input{width:100% !important; max-width:none !important; height:40px !important;}
html body .status-form .status-lookup-row button{flex:0 0 auto !important; width:auto !important;
  margin:0 auto !important; padding:6px 22px !important; height:auto !important; min-height:0 !important;}
html body .status-msg-field{text-align:center !important;}
html body .status-msg-field label{display:block !important; text-align:center !important;}
html body .status-msg-field textarea{width:100% !important;}
html body .status-msg-send{display:inline-block !important; width:auto !important;
  margin:10px auto 0 !important; padding:6px 22px !important; min-height:0 !important;}


/* ================= BUILD 184 (Eric, 2026-09-10): the Repair Status page ================
   The heading wears the same stars and the same slow shine as CHECK YOUR REPAIR STATUS on
   the home page, so the two read as one thing. The message box centres its own words. */
html body .status-hero h1, html body #statusPanel h1, html body .status-wrap h1,
html body main h1 { }
html body .status-lead { max-width: 460px; }
html body .status-form + *, html body .status-msg-field textarea { }


/* ================= BUILD 184 (Eric, 2026-09-10) ==================================
   The stars belong to the yellow REPAIR STATUS label, exactly as on the home page.
   They have to live here, after line 423, because that rule switches the tag's two
   pseudo-elements off with !important and this file loads after the page's own <style>. */
body.page-status .section-tag{animation:hrTagGlow 2.8s ease-in-out infinite alternate;}
body.page-status .section-tag::before{display:inline !important; content:"\2605\00a0" !important;
  width:auto !important; height:auto !important; background:none !important; flex:0 0 auto !important; opacity:1 !important;}
body.page-status .section-tag::after{display:inline !important; content:"\00a0\2605" !important;
  width:auto !important; height:auto !important; background:none !important; flex:0 0 auto !important; opacity:1 !important;}
@keyframes hrTagGlow{
  from{text-shadow:0 0 6px rgba(242,169,0,.45);}
  to{text-shadow:0 0 14px #ffe082, 0 0 30px rgba(255,213,74,.9), 0 0 56px rgba(242,169,0,.7);}
}


/* ================= BUILD 185 (Eric, 2026-09-10): Repair Status spacing ================
   The red exit button sits at 188-226 down the panel and the heading started at 208, so
   the right-hand star was landing under it. The whole block drops clear of it; there was
   dead space at the foot of the frame to absorb it. */
body.page-status .section-tag{margin-top:52px !important;}
/* "Can't find your vehicle?" gets a separator you can actually see - the old one was
   #27272a on near-black. */
body.page-status .status-help{border-top:1px solid rgba(255,255,255,.22) !important;
  margin-top:34px !important; padding-top:26px !important;}


/* ================= BUILD 189 (Eric, 2026-09-11): the offer pop-up =====================
   Two things. First the button: it read "Call to Book", was painted green by the
   a[href^="tel:"] rule at line 836, and was the only button on the site exempt from the
   skinny-pill rule, so it filled the whole card. It now asks for an estimate, in the
   site's red (#e53935, the same red as the hero's Request an Estimate and the bottom
   bar), and hugs its words. Written at html body a.promo-cta so it outranks the inline
   .promo-cta{background:var(--red)} that ships on all 34 pages. */
html body a.promo-cta {
  display: table !important; margin: 10px auto 0 !important;
  padding: 6px 18px !important; min-height: 0 !important; line-height: 1.35 !important;
  font-size: 12px !important; letter-spacing: .07em !important; border-radius: 999px !important;
  background: #e53935 !important; border-color: #e53935 !important; color: #fff !important;
}
html body a.promo-cta:hover { background: #ff4d49 !important; border-color: #ff4d49 !important; }

/* Second, the shape. "side" is the card the site has always had and gets no new rules at
   all, so it cannot drift. "background" fills the card with the photo and lays the words
   over it, which is how Eric builds these for his other shops. */
.promo-card[data-layout="background"] { position: relative; display: block !important; min-height: 330px; overflow: hidden; }
.promo-card[data-layout="background"] .promo-photo {
  position: absolute !important; inset: 0 !important; height: auto !important; flex: none !important; z-index: 0;
}
.promo-card[data-layout="background"] .promo-photo::after {
  content: ""; position: absolute; inset: 0;
  /* BUILD 193 (Eric): thicker fog - the words have to win over a busy photo. */
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.74) 45%, rgba(0,0,0,.95) 100%);
}
.promo-card[data-layout="background"] .promo-body {
  position: relative; z-index: 1; padding-top: 132px !important; text-align: center;
}
.promo-card[data-layout="background"] .promo-body h3,
.promo-card[data-layout="background"] .promo-desc,
.promo-card[data-layout="background"] .promo-list li,
.promo-card[data-layout="background"] .promo-note,
.promo-card[data-layout="background"] .promo-price-label { color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.promo-card[data-layout="background"] .promo-list li::before { position: static; margin-right: 6px; }
.promo-card[data-layout="background"] .promo-list li { padding-left: 0; }
.promo-card[data-layout="background"] .promo-price-row { border-color: rgba(255,255,255,.28) !important; }
.promo-card[data-layout="background"] .promo-price-amt { text-shadow: 0 1px 3px rgba(0,0,0,.85); }
@media (min-width: 620px) {
  /* the inline sheet turns .promo-card into a flex row at this width; the background
     layout must stay a single block or the photo becomes a 208px column again. */
  .promo-card[data-layout="background"] { display: block !important; max-width: 620px; min-height: 300px; }
  .promo-card[data-layout="background"] .promo-body { padding-top: 150px !important; }
}

/* ── BUILD 190 (Eric, 2026-09-11): live Google reviews ─────────────────────
   The quote cards are chosen -- 4 stars and up by default -- while the score
   and the count above them are whatever Google says. This label is the line
   that keeps that honest: it tells the reader the quotes are a selection, and
   the "Read all on Google" button beside it goes to the unedited listing.
   Hidden in the shipped HTML and revealed only when real reviews are in the
   cards, so it never labels the two placeholder quotes. Muted grey on purpose:
   the gold count line above it is the thing that should be read first. */
.rv80-flabel { margin: 2px 0 10px; font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #cfd4d7; }
.rv80-flabel[hidden] { display: none; }
.rv80-cards[hidden] { display: none; }
/* A card from Google carries a date; the two hand-written ones do not. */
.rv80-card .rv80-when { display: block; margin-top: 4px; color: #9aa1a6; font-size: 11px;
  font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 500; }

/* An odd number of live reviews left the last card stranded in the left column
   of a two-column grid, which reads as a mistake. Centre it instead. */
.rv80-cards > .rv80-card:last-child:nth-child(odd) { grid-column: 1 / -1;
  max-width: 374px; justify-self: center; width: 100%; }


/* ── BUILD 198 (Eric, 2026-09-11) ──────────────────────────────────────────
   The footer tagline sat left of the shop name above it. .footer-left is a
   two-column grid and the logo row is forced to span both columns, but the
   tagline stayed pinned to column one, so every text-align:center applied to
   it was centring it inside the LEFT HALF. Span both columns and it centres
   under the title properly. */
.footer-tagline { grid-column: 1 / -1 !important; }

/* The payment-options heading is the link now; the partner's name under it is
   gone. Keep the heading looking like a heading, not a default blue link. */
.financing-text h2 .financing-link { color: inherit; text-decoration: none;
  border-bottom: 2px solid rgba(242,169,0,.55); padding-bottom: 2px; }
.financing-text h2 .financing-link:hover,
.financing-text h2 .financing-link:focus-visible { color: #f2a900;
  border-bottom-color: #f2a900; }


/* ── BUILD 199 (Eric, 2026-09-11) ──────────────────────────────────────────
   Both headings read as links now. A real underline rather than the
   border-bottom I used before, because a border draws once per line-box and
   broke into two stubs when the heading wrapped on a phone. */
.status-band h2 .sb-link,
.financing-text h2 .financing-link { text-decoration: underline !important;
  text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: rgba(242,169,0,.6); color: inherit; border-bottom: 0 !important; }
.status-band h2 .sb-link:hover, .status-band h2 .sb-link:focus-visible,
.financing-text h2 .financing-link:hover,
.financing-text h2 .financing-link:focus-visible { text-decoration-color: #f2a900; }

/* EasyPay Finance stays as plain text under the heading. It is the partner's
   name, not a link -- the heading above it is the only link in this band. */
.financing-text .financing-partner { margin: 2px 0 0; }

/* Tighten the band: the Find out more button is gone, so the air it needed
   goes with it. */
.financing-band { padding: 26px 0 28px !important; }
.financing-inner { gap: 6px !important; }
.financing-text h2 { margin-bottom: 4px !important; }
.financing-text p { margin-top: 6px !important; }


/* ── BUILD 199b (Eric, 2026-09-11) ─────────────────────────────────────────
   Footer brand, phone widths. The shop name was centred across the whole
   footer while SERVICES underneath it started at the left margin, so the two
   never lined up. Left-align the name to that same margin, and hold the
   tagline inside a narrower column so it wraps to about three lines instead
   of running the full width. Last in the sheet and !important because every
   rule it overrides is itself !important, spread across three media blocks. */
@media (max-width: 900px) {
  footer .footer-left { text-align: left !important; }
  footer .footer-logo { justify-content: flex-start !important; }
  footer .footer-tagline { grid-column: 1 / -1 !important;
    text-align: left !important;
    max-width: 260px !important;
    margin-left: 0 !important; margin-right: 0 !important; }
}


/* ── BUILD 200 (Eric, 2026-09-11) ──────────────────────────────────────────
   The offer pop-up was pinned to the bottom of the screen: .promo-overlay in
   every page's inline sheet uses align-items:flex-end. Centre it, and take the
   card up 30% -- 356 to 463 on phones, 620 to 806 from 620px up. */
.promo-overlay { align-items: center !important; }
.promo-card { max-width: 463px !important; max-height: 86vh !important; }
@media (min-width: 620px) { .promo-card { max-width: 806px !important; } }


/* ── BUILD 201 (Eric, 2026-09-11) ──────────────────────────────────────────
   At laptop widths the brand overflowed its own box by 118px and printed
   straight over About and Services. index.html:611-612 already solved this:
   the wordmark shrinks first and ellipsises rather than letting anything spill.
   The block at line 758 of this file disabled all three parts of that -- a
   fixed 20px font, overflow:visible, flex-shrink:0 -- so the text had no way to
   give ground. This restores it, and keeps the big brand on wide screens. */
@media (min-width: 901px) {
  header .logo { font-size: clamp(14px, 1.5vw, 20px) !important;
    flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
  header .logo .full { overflow: hidden !important; text-overflow: ellipsis !important;
    flex-shrink: 1 !important; min-width: 0 !important; }
}


/* ── BUILD 192 (Eric, 2026-09-11) ──────────────────────────────────────────
   Picture-beside-text card: 30% narrower (806 -> 564) and the wording 25%
   larger. The photo column shrinks with it so the words keep their share. */
@media (min-width: 620px) {
  .promo-card[data-layout="side"] { max-width: 564px !important; }
  .promo-card[data-layout="side"] .promo-photo { flex: 0 0 176px !important; }
  .promo-card[data-layout="side"] .promo-eyebrow { font-size: 13px !important; }
  .promo-card[data-layout="side"] .promo-body h3 { font-size: 24px !important; }
  .promo-card[data-layout="side"] .promo-desc { font-size: 15.5px !important; }
  .promo-card[data-layout="side"] .promo-list li { font-size: 15px !important; }
  .promo-card[data-layout="side"] .promo-price-amt { font-size: 27.5px !important; }
  .promo-card[data-layout="side"] .promo-note { font-size: 13.5px !important; }
}

/* ── BUILD 193 (Eric, 2026-09-11): the offer placard ───────────────────────
   Words up 40%, the frame 40% narrower left-to-right (620 -> 372), 20% taller,
   and the photo sits centred unless the shop picked a focal point in /admin.
   The shop can also choose the colour of the words; promo.js writes it as
   --promo-ink on the card and every line of copy follows it. */
.promo-card[data-layout="background"]{ min-height:396px; }
.promo-card[data-layout="background"] .promo-photo img{ object-position:50% 50%; }
.promo-card[data-layout="background"] .promo-eyebrow{ font-size:14.7px !important; }
.promo-card[data-layout="background"] .promo-body h3{ font-size:26.6px !important; line-height:1.15; }
.promo-card[data-layout="background"] .promo-desc{ font-size:17.5px !important; }
.promo-card[data-layout="background"] .promo-list li{ font-size:16.8px !important; }
.promo-card[data-layout="background"] .promo-price-label{ font-size:15.4px !important; }
.promo-card[data-layout="background"] .promo-price-amt{ font-size:30.8px !important; }
.promo-card[data-layout="background"] .promo-note{ font-size:15.4px !important; }
.promo-card[data-layout="background"] .promo-cta{ font-size:16.8px !important; padding:12px 18px !important; }
@media (min-width: 620px) {
  .promo-card[data-layout="background"]{ max-width:372px !important; min-height:360px !important; }
  .promo-card[data-layout="background"] .promo-body{ padding-top:120px !important; }
}
/* The colour of the words, chosen in /admin. Falls back to white, which is what
   every offer built before this build already looks like. */
.promo-card[data-layout="background"] .promo-body h3,
.promo-card[data-layout="background"] .promo-desc,
.promo-card[data-layout="background"] .promo-list li,
.promo-card[data-layout="background"] .promo-note,
.promo-card[data-layout="background"] .promo-price-label{ color:var(--promo-ink, #fff) !important; }
.promo-card[data-layout="background"] .promo-list li::before,
.promo-card[data-layout="background"] .promo-price-amt,
.promo-card[data-layout="background"] .promo-eyebrow{ color:var(--promo-accent, var(--red-light)) !important; }

/* ── BUILD 193 (Eric, 2026-09-11): the shop header across the top of the placard ──
   Not a pill: a band from one edge of the card to the other, an extension of the
   display, sized like the site's own header (about an inch on Eric's 50" TV). */
.promo-brand{ display:flex; align-items:center; justify-content:center; gap:10px; height:48px;
  padding:0 44px 0 14px; background:#000; border-bottom:2px solid #f2a900; position:relative; z-index:2;
  font-family:'Space Grotesk', Arial, sans-serif; font-weight:800; font-size:15px; letter-spacing:.05em;
  text-transform:uppercase; color:#f2a900; white-space:nowrap; }
.promo-brand img{ width:34px; height:34px; border-radius:50%; flex:0 0 auto; }
.promo-brand b{ font-weight:800; color:#fff; }
.promo-card.has-brand .promo-close{ top:9px; }
/* picture behind text: the photo starts under the band */
.promo-card.has-brand[data-layout="background"]{ min-height:444px; }
.promo-card.has-brand[data-layout="background"] .promo-photo{ top:50px !important; }
@media (min-width: 620px) {
  .promo-card.has-brand[data-layout="background"]{ min-height:410px !important; }
  /* picture beside text is a flex row at this width; the band takes the whole first row */
  .promo-card.has-brand[data-layout="side"]{ flex-wrap:wrap; }
  .promo-card.has-brand[data-layout="side"] .promo-brand{ flex:0 0 100%; }
}
@media (max-width: 360px) { .promo-brand{ font-size:13px; gap:8px; } }

/* ── BUILD 195 (Eric, 2026-09-11): the status page's message box ──────────
   "Want to tell us something?" now says what it wants -- Please explain your
   issue -- and the whole block is centred over the box. Send text and the
   Call button under "Can't find your vehicle?" take black lettering. */
.status-ask:not(#_):not(#_), .status-ask label:not(#_):not(#_) { text-align: center !important; }
.status-ask label:not(#_):not(#_) { display: block !important; width: 100% !important; }
.status-msg-send:not(#_):not(#_):not(#_), .status-ask-send:not(#_):not(#_):not(#_), .status-help .call-link:not(#_):not(#_):not(#_),
a[href^="tel:"].call-link:not(#_):not(#_):not(#_), .call-link:not(#_):not(#_):not(#_) { color: #000 !important; }
.status-ask .status-msg-send:not(#_):not(#_) { display: inline-block !important; }

/* ── BUILD 196 (Eric, 2026-09-11): the footer's shop name and the line under it ──
   The block sat centred in its column. It goes to the left margin, lining up with
   SERVICES underneath it. The line under the name starts at the H and ends at the
   T because .footer-brand is only as wide as the name row, and the line is pushed
   in by the width of the logo mark. Desktop only; phones keep the centred stack. */
@media (min-width: 901px) {
  footer .footer-left:not(#_):not(#_) { text-align: left !important; }
  footer .footer-brand:not(#_):not(#_) { width: fit-content; margin: 0 0 18px !important; text-align: left !important; }
  footer .footer-logo:not(#_):not(#_) { justify-content: flex-start !important; margin: 0 0 4px !important; }
  footer .footer-tagline:not(#_):not(#_) { max-width: 100% !important; margin: 0 !important;
    padding-left: 54px !important; text-align: left !important; }
  /* Call goes under the middle of the map, and reads black like the other pills. */
  footer .footer-map:not(#_):not(#_) { text-align: center !important; }
  footer a.map-call:not(#_):not(#_) { display: block !important; width: fit-content !important;
    margin: 8px auto 0 !important; }
}
footer a.map-call:not(#_):not(#_):not(#_) { color: #000 !important; }

/* ── BUILD 198 (Eric, 2026-09-12): the offer placard ──────────────────────
   1. TIRE OUTLET is the same yellow as H&R AUTOMOTIVE.
   2. A real X in the top right, sitting BELOW the header band, not on it --
      the same rule as every other escape on this site. Closing it takes the
      viewer back to whatever they were on; inside the dashboard's Preview
      frame that is the dashboard (promo.js).
   3. The words move up: the photo shows above them, the copy starts higher.
   4. Request an Estimate is the hero's pill -- same size, same shape. */
.promo-brand b{ color:#f2a900 !important; }
.promo-card.has-brand .promo-close:not(#_):not(#_){
  top:58px !important; right:10px !important; width:30px !important; height:30px !important;
  background:#e53935 !important; border:1px solid #e53935 !important;
  color:#fff !important; font-size:19px !important; line-height:26px !important; z-index:4 !important; }
.promo-card.has-brand .promo-close:not(#_):not(#_):hover{ background:#ff4d49 !important; border-color:#ff4d49 !important; }
.promo-card.has-brand[data-layout="background"] .promo-body{ padding-top:84px !important; }
@media (min-width: 620px) {
  .promo-card.has-brand[data-layout="background"] .promo-body{ padding-top:96px !important; }
}
html body a.promo-cta:not(#_):not(#_){
  /* The offer's Estimate action is a compact action pill, not a hero button.
     It stays content-width and matches the tight controls around the site. */
  padding:5px 12px !important; min-height:0 !important; font-size:11px !important; font-weight:800 !important;
  letter-spacing:.06em !important; line-height:1.3 !important; border-radius:999px !important;
  display:table !important; margin:8px auto 0 !important; }

/* ── BUILD 198 (Eric, 2026-09-12): the Request an Estimate form ───────────
   1. An escape at the top right of the panel -- never on the header band.
   2. "Yes, I'm coming in today" sits centred on its own line, with the ETA
      under it and Customer Issue underneath that. */
.intake-panel{ position: relative; }
.intake-panel .panel-x{
  position:absolute; top:12px; right:12px; z-index:5; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.45); background:rgba(0,0,0,.55);
  color:#fff !important; font-size:22px; line-height:1; text-decoration:none; }
.intake-panel .panel-x:hover{ background:#e53935; border-color:#e53935; color:#fff !important; }
/* BUILD 201 (Eric, 2026-09-12): back onto ONE line. Stacking this into a column is what
   put the tick box and its time on separate lines and left the hole above Customer Issue.
   It reads as one sentence: [x] Yes, I'm coming in today   ETA [1:00 PM]. */
.contact-form .today-row:not(#_):not(#_){
  flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center !important; justify-content:center !important;
  gap:0 14px !important; margin:6px 0 8px !important; }
.contact-form .today-row .today:not(#_):not(#_),
.contact-form .today-row .eta:not(#_):not(#_){
  justify-content:center !important; white-space:nowrap !important; }
/* The children carry `flex: 1 1 130px` from the old side-by-side row; pinned to their own
   width so neither half stretches and forces a break. */
.contact-form .today-row > *:not(#_):not(#_){ margin:0 !important; flex:0 0 auto !important;
  min-width:0 !important; height:auto !important; min-height:0 !important; }
.contact-form .today-row .eta select:not(#_):not(#_){ width:auto !important; min-width:0 !important; }
/* Small phones: the sentence shrinks rather than breaking in half. */
@media (max-width:420px){
  .contact-form .today-row:not(#_):not(#_){ gap:0 9px !important; }
  .contact-form .today-row .today span:not(#_):not(#_){ font-size:12px !important; }
  .contact-form .today-row .eta:not(#_):not(#_){ font-size:10.5px !important; }
  .contact-form .today-row .eta select:not(#_):not(#_){ font-size:13px !important;
    padding:10px 26px 10px 8px !important; }
}
.contact-form label[for]:not(#_), .contact-form > label:not(#_):not(#_){ text-align:center; }
.contact-form textarea[name="problem"]:not(#_):not(#_){ text-align:left; }

/* BUILD 211 (Eric, 2026-09-18, during the pipeline test): the repair-status page
   reads down the middle. Eric checked a real job on it and asked for the vehicle,
   the issue label and the whole question box to be centred like everything else.
   The three-repeat :not(#_) is needed because assets/status.css and the page's own
   inline block both set text-align on these with !important already. */
.status-card:not(#_):not(#_):not(#_),
.status-card-head:not(#_):not(#_):not(#_),
.status-vehicle:not(#_):not(#_):not(#_),
.status-name:not(#_):not(#_):not(#_),
.status-contact:not(#_):not(#_):not(#_),
.status-now:not(#_):not(#_):not(#_),
.status-now h3:not(#_):not(#_):not(#_),
.status-desc:not(#_):not(#_):not(#_),
.status-meta:not(#_):not(#_):not(#_),
.status-callout:not(#_):not(#_):not(#_),
.status-note:not(#_):not(#_):not(#_),
.status-note-label:not(#_):not(#_):not(#_),
.status-note p:not(#_):not(#_):not(#_),
.status-trail:not(#_):not(#_):not(#_),
.status-trail h4:not(#_):not(#_):not(#_),
.status-trail li:not(#_):not(#_):not(#_),
.status-msg-field:not(#_):not(#_):not(#_),
.status-msg-field label:not(#_):not(#_):not(#_) { text-align:center !important; }

/* The history list keeps its rows centred, so the default marker indent has to go
   or every line sits a bullet's width off to the right. */
.status-trail ol:not(#_):not(#_){ list-style:none !important; margin:0 !important; padding:0 !important; }
.status-contact:not(#_):not(#_){ justify-content:center !important; }
.status-meta:not(#_):not(#_){ justify-content:center !important; }
.status-msg-field label:not(#_):not(#_){ display:block !important; width:100% !important; }

/* Both message boxes: the prompt sits centred while the box is empty, and the
   words a customer types run left to right the way writing does. */
.status-msg-field textarea:not(#_):not(#_),
.status-ask-input:not(#_):not(#_){ text-align:left !important; }
.status-msg-field textarea:placeholder-shown:not(#_):not(#_),
.status-ask-input:placeholder-shown:not(#_):not(#_){ text-align:center !important; }

/* BUILD 213 (Eric, 2026-09-18) -- the rest of the repair-status page. */

/* "What has happened so far" would not centre because every row is a flex line;
   text-align does nothing to flex children, it needs justify-content. The vertical
   timeline rail and its dots are pinned to the left edge by design, so they cannot
   survive centred rows -- they come off rather than hang off to one side. */
.status-trail ol:not(#_):not(#_){ padding:0 !important; }
.status-trail ol:not(#_):not(#_)::before{ display:none !important; }
.status-trail li:not(#_):not(#_){ justify-content:center !important; padding-left:0 !important; }
.status-trail li:not(#_):not(#_)::before{ display:none !important; }

/* The conversation is colour-coded the same way the dashboard codes it, so the
   shop and the customer read the same thread the same way on both screens:
   the shop speaks in green, the customer in the dashboard's red. */
.status-ask-msg:not(#_):not(#_){ background:rgba(255,59,59,.12) !important;
  border-left:3px solid #ff3b3b !important; }
.status-ask-msg .who:not(#_):not(#_){ color:#ff8f8f !important; }
.status-ask-msg.from-staff:not(#_):not(#_){ background:rgba(0,170,0,.12) !important;
  border-left:3px solid #00aa00 !important; }
.status-ask-msg.from-staff .who:not(#_):not(#_){ color:#5fd65f !important; }

/* BUILD 214 (Eric, 2026-09-18) -- repair-status page, third pass. */

/* The vehicle + name row would not centre for the same reason the history list
   would not: .status-card-head is display:flex, and text-align does nothing to a
   flex container's children. It needs justify-content, like the two rows below it
   that were already fixed. This is the one I missed twice. */
.status-card-head:not(#_):not(#_){ justify-content:center !important; }

/* Everything the CUSTOMER said is red, on both screens. Eric: "What you told us"
   is the same thing as "You asked" -- both are the customer talking, they are just
   kept apart so the shop can see which is which. The shop's own voice stays green. */
.status-note:not(#_):not(#_){ background:rgba(255,59,59,.10) !important;
  border-left:3px solid #ff3b3b !important; }
.status-note-label:not(#_):not(#_){ color:#ff8f8f !important; }
.status-note p:not(#_):not(#_){ color:#ffe2e2 !important; }

/* The stage the car is at right now is the one thing the customer opened the page
   to read, so it is the site yellow and it glows, using the same sbglow the home
   page banner already uses. The trail underneath turns yellow too but does not
   animate -- four glowing lines at once is a fairground, not a status page. */
.status-now h3:not(#_):not(#_){ color:#f2a900 !important;
  animation:sbglow 2.8s ease-in-out infinite alternate !important; }
.status-trail-label:not(#_):not(#_){ color:#f2a900 !important; font-weight:700 !important; }
@media (prefers-reduced-motion: reduce) {
  .status-now h3:not(#_):not(#_){ animation:none !important; text-shadow:0 0 14px rgba(242,169,0,.8) !important; }
}

/* BUILD 215 (Eric, 2026-09-18) -- repair-status page: the card reads top to bottom. */

/* Vehicle over name, both centred. It was a flex ROW, so the name sat beside the
   vehicle; Eric wants the car first and the person under it. */
.status-card-head:not(#_):not(#_){ flex-direction:column !important;
  align-items:center !important; justify-content:center !important; gap:2px !important; }
.status-vehicle:not(#_):not(#_){ font-size:26px !important; line-height:1.15 !important; }
.status-name:not(#_):not(#_){ font-size:14px !important; }

/* The card lands under the header rather than behind it when results scroll in. */
.status-results:not(#_):not(#_){ scroll-margin-top:96px !important; }

/* The stage is why they opened the page: 18px -> 25px, Eric's 40%. */
.status-now h3:not(#_):not(#_){ font-size:25px !important; line-height:1.2 !important; }

/* The six-stage gauge. One column per stage the shop can pick, so the customer can
   see the whole journey and where their car sits on it -- done behind, lit here,
   waiting ahead. Labels shrink away on narrow phones; the bars still tell the story. */
.status-bar:not(#_):not(#_){ display:flex !important; gap:4px !important;
  height:auto !important; background:none !important; overflow:visible !important;
  margin:0 0 12px !important; align-items:flex-start !important; }
.status-seg{ flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; gap:4px; text-align:center; }
.status-seg-bar{ display:block; width:100%; height:8px; border-radius:999px;
  background:#1c1c1f; transition:background .4s ease, box-shadow .4s ease; }
.status-seg-label{ font-size:9.5px; line-height:1.15; letter-spacing:.02em;
  text-transform:uppercase; color:#6c7176; }
.status-seg.is-done .status-seg-bar{ background:#00aa00; }
.status-seg.is-done .status-seg-label{ color:#5fd65f; }
.status-seg.is-now .status-seg-bar{ background:#f2a900;
  box-shadow:0 0 10px rgba(242,169,0,.85), 0 0 22px rgba(242,169,0,.45); }
.status-seg.is-now .status-seg-label{ color:#f2a900; font-weight:800; }
@media (max-width: 560px){
  .status-seg-label{ font-size:8px !important; }
  .status-bar:not(#_):not(#_){ gap:3px !important; }
}

/* ===================================================================
   BUILD 216 (Eric, 2026-09-18) -- THE ESCAPE X, ONE RULE, EVERYWHERE.
   UI-RULES.md rule 13.

   Before this there were five sizes (26 / 28 / 38 / 42 / unset), three
   different colour behaviours (solid red, red-on-hover-only, plain text) and
   two different centring methods. Eric circled the status page's X because the
   cross sat off-centre in its circle.

   WHY IT WAS OFF-CENTRE, and why this is built the way it is:
   the old rule centred a "x" TEXT GLYPH. A glyph does not sit at the optical
   centre of its own em box -- which is why somebody had already added a
   translateY(-0.5px) nudge to chase it -- and it lands differently again on any
   device that substitutes a different font. So the cross is no longer a
   character at all. It is two bars, rotated 45 degrees, each pinned at 50%/50%
   and pulled back by half its own size. That is centred by geometry. There is
   no font involved, so there is nothing left to drift.

   font-size:0 kills the &times; still sitting in the markup on all 89 buttons,
   so none of this needed an HTML change.

   The tap target stays 44px via ::after on the wrapper -- invisible, so the
   button reads as small as Eric wants while still being catchable with a thumb
   on a phone. Small to the eye, not small to the finger.
   =================================================================== */
.status-exit:not(#_):not(#_):not(#_),
.promo-close:not(#_):not(#_):not(#_),
.chat-close:not(#_):not(#_):not(#_),
.bkm-x:not(#_):not(#_):not(#_),
.panel-x:not(#_):not(#_):not(#_),
.intake-panel .panel-x:not(#_):not(#_):not(#_){
  position:absolute !important; box-sizing:border-box !important;
  width:27px !important; height:27px !important; min-width:0 !important; min-height:0 !important;
  padding:0 !important; border-radius:999px !important;
  background:#e53935 !important; border:1px solid #e53935 !important;
  color:#fff !important; font-size:0 !important; line-height:0 !important; text-indent:0 !important;
  cursor:pointer !important; text-decoration:none !important;
  box-shadow:0 2px 10px rgba(0,0,0,.45) !important; z-index:70 !important;
  display:block !important;
}
/* The two bars. Centred by geometry, not by font metrics. */
.status-exit:not(#_):not(#_):not(#_)::before, .status-exit:not(#_):not(#_):not(#_)::after,
.promo-close:not(#_):not(#_):not(#_)::before, .promo-close:not(#_):not(#_):not(#_)::after,
.chat-close:not(#_):not(#_):not(#_)::before, .chat-close:not(#_):not(#_):not(#_)::after,
.bkm-x:not(#_):not(#_):not(#_)::before, .bkm-x:not(#_):not(#_):not(#_)::after,
.panel-x:not(#_):not(#_):not(#_)::before, .panel-x:not(#_):not(#_):not(#_)::after{
  content:"" !important; position:absolute !important; left:50% !important; top:50% !important;
  width:11px !important; height:2px !important; border-radius:2px !important;
  background:#fff !important; transform-origin:50% 50% !important;
}
.status-exit:not(#_):not(#_):not(#_)::before,
.promo-close:not(#_):not(#_):not(#_)::before,
.chat-close:not(#_):not(#_):not(#_)::before,
.bkm-x:not(#_):not(#_):not(#_)::before,
.panel-x:not(#_):not(#_):not(#_)::before{ transform:translate(-50%,-50%) rotate(45deg) !important; }
.status-exit:not(#_):not(#_):not(#_)::after,
.promo-close:not(#_):not(#_):not(#_)::after,
.chat-close:not(#_):not(#_):not(#_)::after,
.bkm-x:not(#_):not(#_):not(#_)::after,
.panel-x:not(#_):not(#_):not(#_)::after{ transform:translate(-50%,-50%) rotate(-45deg) !important; }

.status-exit:not(#_):not(#_):not(#_):hover,
.promo-close:not(#_):not(#_):not(#_):hover,
.chat-close:not(#_):not(#_):not(#_):hover,
.bkm-x:not(#_):not(#_):not(#_):hover,
.panel-x:not(#_):not(#_):not(#_):hover{
  background:#ff4d49 !important; border-color:#ff4d49 !important; }

/* Same 27px on a phone -- the size no longer changes per screen, which was half
   the inconsistency. The finger target below keeps it usable. */
@media (max-width: 760px){
  .status-exit:not(#_):not(#_):not(#_){ top:8px !important; right:8px !important;
    width:27px !important; height:27px !important; }
}

/* ===================================================================
   BUILD 217 (Eric, 2026-09-18) -- service pages: the escape, and the CTA pair.
   =================================================================== */

/* THE ESCAPE LEAVES THE BLACK BAND. Eric's rule, already in memory and now
   proven again here: an escape never sits on a header band -- the band is the
   shop's identity block, and a control on it makes the branding read like a
   dialog box. On every service and finance page the X was inside
   .svc-hero-inner, i.e. on the black photo/title band. The markup moved into
   <section class="svc-body">, the content area under it, so this just has to
   give it something to anchor to and pin it top-right of THAT area. */
/* BUILD 218 (Eric, 2026-09-18): anchored to the CONTENT COLUMN, not the section.
   .svc-body runs the full width of the page, so pinning the X to it put the button
   against the browser edge -- Eric: "now it's off the page, it's not exactly in the
   corner". It hangs half off behind the scrollbar on a wide window.
   It now lives inside .wrap (max-width 1100px, centred) so it lines up with the right
   edge of the text a reader is already looking at, at any window width.
   And it is deliberately NOT jammed into the corner. Eric: "don't put it right in the
   very corner, because if we make changes, it may push that button halfway off the
   page, like it is right now." The inset is the wrap's own 24px gutter, so the button
   has room on both sides and a later layout change cannot shove it off the edge. */
.svc-body .wrap{ position:relative !important; }
.svc-body .wrap > .status-exit:not(#_):not(#_):not(#_){
  position:absolute !important; top:12px !important; right:24px !important; }
@media (max-width: 760px){
  .svc-body .wrap > .status-exit:not(#_):not(#_):not(#_){ top:10px !important; right:18px !important; }
}

/* THE CTA PAIR. "Start a Repair Request" was a grey ghost outline -- the one
   thing on the page that actually earns the shop money, dressed as the least
   important control on it. It becomes Request an Estimate in the house CTA red
   (UI-RULES.md 2: one semantic treatment, compact red pill, both languages),
   and it now leads, with Call second. Both pills come down to the lean house
   size instead of 14px/9px-20px. */
.guide-cta .btns:not(#_):not(#_){ gap:10px !important; }
.guide-cta .btn-estimate-cta:not(#_):not(#_):not(#_){
  display:inline-block !important; background:#e53935 !important; border:0 !important;
  color:#fff !important; border-radius:999px !important;
  padding:6px 16px !important; font-size:11.5px !important; font-weight:800 !important;
  letter-spacing:.06em !important; line-height:1.4 !important; text-transform:uppercase !important;
  text-decoration:none !important; min-height:0 !important; }
.guide-cta .btn-estimate-cta:not(#_):not(#_):not(#_):hover{ background:#ff4d49 !important; }
/* Call keeps its own colour -- brand-recognised control, the one documented
   exception to no-two-buttons-share-a-colour -- but matches the new size. */
.guide-cta .btn-primary:not(#_):not(#_):not(#_){
  padding:6px 16px !important; font-size:11.5px !important; font-weight:800 !important;
  letter-spacing:.06em !important; line-height:1.4 !important; text-transform:uppercase !important;
  border-radius:999px !important; min-height:0 !important; }

/* ===================================================================
   BUILD 219 (Eric, 2026-09-19) -- desktop pass on Services, Tires, Our Work.
   =================================================================== */

/* SERVICES headline: centred, and on one line. It had max-width:720px, which
   forced the wrap, and no centring at all. Eric: "Center this. It should be one
   line." The clamp comes down a touch so the sentence fits the 1100px column on
   a desktop; below 900px it is allowed to wrap again rather than shrink to
   nothing on a phone. */
.services-heading:not(#_):not(#_){
  max-width:none !important; text-align:center !important; margin-left:auto !important;
  margin-right:auto !important; font-size:clamp(26px, 3.1vw, 38px) !important;
  text-wrap:balance; }
@media (min-width: 901px){
  .services-heading:not(#_):not(#_){ white-space:nowrap !important; }
}

/* THE CALL BUTTONS: one green, one size, everywhere. The colour is fixed in
   _middleware.js (they joined the green group); this is the shape. The footer
   Call is the length Eric pointed at -- "it should be this long" -- so these
   match its 46px side padding instead of the 34px slab they were. */
.guide-cta .btn-primary:not(#_):not(#_):not(#_),
.tire-cta .btn-primary:not(#_):not(#_):not(#_){
  display:inline-block !important; padding:6px 46px !important; font-size:12px !important;
  font-weight:800 !important; letter-spacing:.09em !important; line-height:1.4 !important;
  text-transform:uppercase !important; border-radius:999px !important;
  min-height:0 !important; text-decoration:none !important; }

/* OUR WORK's "Request an Estimate" is a customer-acquisition CTA, so it takes the
   house red (UI-RULES.md 2) -- not the teal it inherited, and not a slab. Same lean
   pill as the one on the service pages. */
.work-cta .btn-primary:not(#_):not(#_):not(#_){
  background:#e53935 !important; border-color:#e53935 !important; color:#fff !important;
  display:inline-block !important; padding:6px 22px !important; font-size:11.5px !important;
  font-weight:800 !important; letter-spacing:.06em !important; line-height:1.4 !important;
  text-transform:uppercase !important; border-radius:999px !important;
  min-height:0 !important; box-shadow:none !important; }
.work-cta .btn-primary:not(#_):not(#_):not(#_):hover{
  background:#ff4d49 !important; border-color:#ff4d49 !important; }

/* Our Work: the gap between the lede and the paragraph under it. */
body.page-work .work-intro:not(#_):not(#_){ margin-top:6px !important; }
body.page-work .svc-lede:not(#_):not(#_){ margin-bottom:4px !important; }
.work-cta:not(#_):not(#_){ margin-top:12px !important; }

/* ===================================================================
   BUILD 222 (Eric, 2026-09-19): THE RESPONSE GENERATOR, MADE TO LOOK LIKE
   THE SHOP'S OWN. Eric: "It's just not attractive."

   This block is deliberately the LAST word on the launcher and the panel.
   The launcher had been restyled four times on top of itself -- original dark
   gold (chat.css), then BUILD 175 electric violet, then 176/176b thinner, then
   177 orange with a pulse -- so what shipped was the sum of four opinions:
   an orange pill, in a palette that has no orange, with 8.5px text crammed
   into 2px of padding, pulsing. Rather than add a fifth layer this redefines
   the look completely. Position is NOT touched: --rg-top, .is-placed and the
   drag handling belong to park() in chatbot.js and work.

   Colour: back to the shop's own black and gold. Orange belonged to nothing on
   this site; gold is the wordmark, the reviews pill and the hero. It reads as
   H&R's, which is the whole point -- a generic widget bolted on is exactly the
   thing Eric keeps rejecting. The glow stays (he asked for glowing) but it is
   gold, and it is a halo rather than an animation competing with the page.
   =================================================================== */

/* ---- the launcher ----
   BUILD 222b (Eric, 2026-09-19, same night): "Chatbot button disappeared."
   It had not moved -- every positioning rule above is untouched -- it had gone
   INVISIBLE. 222 made it near-black (#101012) to match the header, and it parks
   directly under that black header band, over a dark hero photo. Black on black.
   Matching the header was the wrong instinct for the one control on the page
   whose whole job is to be noticed; that is why it had been loud in the first
   place. So it is the gold FILLED, which is the site's own accent (wordmark,
   reviews pill, hero) and cannot be lost against either the dark top of the page
   or the cream body below it. */
.chat-cta:not(#_):not(#_) {
  background: #f2a900 !important;
  border: 1.5px solid #ffd97a !important;
  color: #121212 !important;
  padding: 4px 13px 4px 9px !important;
  gap: 7px !important;
  border-radius: 999px !important;
  animation: none !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35),
              0 0 22px rgba(242,169,0,.60),
              0 6px 18px rgba(0,0,0,.55) !important;
  transition: box-shadow .2s, background .2s, transform .15s !important;
}
.chat-cta:not(#_):not(#_):hover {
  background: #ffc233 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45),
              0 0 34px rgba(242,169,0,.85),
              0 6px 18px rgba(0,0,0,.55) !important;
}
.chat-cta:not(#_):not(#_) .chat-cta-icon { color: #121212 !important; }
.chat-cta:not(#_):not(#_) .chat-cta-icon svg { width: 19px !important; height: 19px !important; }
/* Two lines, but readable ones. 8.5px stacked on 8.5px was a smudge. */
.chat-cta:not(#_):not(#_) .chat-launcher-label {
  font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .07em !important;
  line-height: 1.1 !important; text-transform: uppercase !important; color: #121212 !important;
}
.chat-cta:not(#_):not(#_) .chat-launcher-sub {
  font-size: 8px !important; font-weight: 600 !important; letter-spacing: .04em !important;
  margin-top: 1px !important; text-transform: none !important; color: #3b2f0b !important;
}

/* ---- the panel ---- */
.chat-panel:not(#_):not(#_) {
  border: 1px solid #2a2a2e !important;
  border-top: 2px solid #f2a900 !important;
  border-radius: 16px !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.72) !important;
}
/* The head is the shop's header in miniature: black band, gold name. */
.chat-head:not(#_):not(#_) {
  background: #000 !important; border-bottom: 1px solid #2a2a2e !important;
  padding: 11px 13px !important; position: relative !important;
}
.chat-head-icon:not(#_):not(#_) { color: #f2a900 !important; }
.chat-head-text strong:not(#_):not(#_) {
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  font-size: 13.5px !important; font-weight: 800 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  color: #f2a900 !important;
}
.chat-head-text span:not(#_):not(#_) { font-size: 10.5px !important; color: #8d8d95 !important; }

/* The close button follows UI-RULES.md 13 like every other escape on the site,
   but it is a flex child here, so it stays IN FLOW -- the shared rule pins the
   others absolutely and that would collapse this header's spacing. */
.chat-head .chat-close:not(#_):not(#_):not(#_):not(#_) {
  position: relative !important; top: auto !important; right: auto !important;
  flex: 0 0 auto !important; margin-left: 2px !important;
}

/* EN / ES: the house segmented treatment, tight. */
.chat-lang:not(#_):not(#_) {
  font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: .06em !important;
  padding: 3px 9px !important; border-radius: 999px !important;
  border: 1px solid #344154 !important; background: #070d16 !important; color: #63a4ff !important;
}
.chat-lang:not(#_):not(#_):hover { background: #2f80ed !important; border-color: #2f80ed !important; color: #fff !important; }

.chat-log:not(#_):not(#_) { background: #050506 !important; padding: 14px !important; gap: 10px !important; }

/* The shop speaks with a gold edge; the customer's own words are the filled
   gold bubble they already were. */
.chat-msg:not(#_):not(#_) { font-size: 13.5px !important; line-height: 1.5 !important; padding: 10px 13px !important; }
.chat-msg-bot:not(#_):not(#_) {
  background: #101014 !important; border: 1px solid #2a2a2e !important;
  border-left: 2px solid #f2a900 !important; border-radius: 12px !important;
  border-bottom-left-radius: 3px !important;
}
.chat-msg-user:not(#_):not(#_) { background: #f2a900 !important; color: #121212 !important; font-weight: 600 !important; }

/* Chips and actions keep the restraint that is already documented in chat.css:
   big saturated pills read as a generic AI widget. Tightened, not loudened. */
.chat-chip:not(#_):not(#_) {
  font-size: 11.5px !important; padding: 4px 9px !important; border-radius: 999px !important;
  background: #101014 !important; border: 1px solid #2a2a2e !important; color: #cfcfd6 !important;
}
.chat-chip:not(#_):not(#_):hover { border-color: #f2a900 !important; color: #f2a900 !important; background: #17150f !important; }
.chat-chips-intro:not(#_):not(#_) { font-size: 9.5px !important; letter-spacing: .1em !important; color: #7b7b84 !important; }

.chat-action:not(#_):not(#_) {
  font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; padding: 5px 12px !important; border-radius: 999px !important;
  border: 1px solid #2a2a2e !important; color: #cfcfd6 !important; background: transparent !important;
}
.chat-action:not(#_):not(#_):first-child { background: #f2a900 !important; border-color: #f2a900 !important; color: #121212 !important; }
.chat-action:not(#_):not(#_):hover { border-color: #f2a900 !important; color: #f2a900 !important; }
.chat-action:not(#_):not(#_):first-child:hover { background: #ffc233 !important; color: #121212 !important; }
/* "Read the full answer" is a link, not an action -- it must not take the fill. */
.chat-more .chat-action-more:not(#_):not(#_),
.chat-more .chat-action-more:not(#_):not(#_):first-child {
  background: transparent !important; border: 0 !important; padding: 2px 0 !important;
  color: #f2a900 !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 11.5px !important; font-weight: 700 !important; text-decoration: underline !important;
}

.chat-input:not(#_):not(#_) { background: #0b0b0d !important; padding: 11px 13px 7px !important; }
.chat-input input:not(#_):not(#_) {
  font-size: 13.5px !important; padding: 8px 12px !important; border-radius: 999px !important;
  background: #000 !important; border: 1.5px solid #2a2a2e !important;
}
.chat-input input:not(#_):not(#_):focus { border-color: #f2a900 !important; box-shadow: 0 0 0 3px rgba(242,169,0,.18) !important; }
.chat-send:not(#_):not(#_) {
  font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; padding: 6px 15px !important; border-radius: 999px !important;
  background: #f2a900 !important; color: #121212 !important; border: 0 !important;
}
.chat-send:not(#_):not(#_):hover { background: #ffc233 !important; }
.chat-disclaimer:not(#_):not(#_) { background: #0b0b0d !important; font-size: 10px !important; color: #6f6f78 !important; padding: 3px 13px 11px !important; }

/* BUILD 224 (Eric, 2026-09-19): the chat's language control is the house EN | ES
   segmented switch (UI-RULES.md 12) -- English blue, Spanish red, the side you
   are in filled. It used to be one button that relabelled itself to the other
   language, which is a different control doing the same job as the one in the
   header, and ambiguous besides: "Espanol" reads as a state to one person and
   an action to the next. */
.chat-lang:not(#_):not(#_) {
  display: inline-flex !important; align-items: stretch !important; overflow: hidden !important;
  padding: 0 !important; border-radius: 999px !important;
  border: 1px solid #344154 !important; background: #070d16 !important;
  flex: 0 0 auto !important;
}
.chat-lang .chat-lang-opt {
  font: inherit; font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
  min-width: 32px; min-height: 22px; padding: 0 8px; border: 0; border-radius: 0;
  background: transparent; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-lang .chat-lang-opt[data-lang="en"] { color: #63a4ff; }
.chat-lang .chat-lang-opt[data-lang="es"] { color: #ff807c; border-left: 1px solid #344154; }
.chat-lang .chat-lang-opt[data-lang="en"].on { background: #2f80ed; color: #fff; }
.chat-lang .chat-lang-opt[data-lang="es"].on { background: #e53935; color: #fff; }

/* ------------------------------------------------------------------------
   BUILD 225 (Eric, 2026-09-19) - the iPhone 13-15 view, top to bottom.
   Measured at a real 390px viewport before touching anything:
     - the header row wanted 414px inside a 374px box, so the logo started
       at x=-9 (cut off on the left) and the Text button ended at x=403
       (cut off on the right);
     - EN/ES was 86x36 sitting beside 26px icon buttons;
     - the bottom four were two different heights (56px and 52px) and the
       shop name's baseline was only 12px clear of the bar.
   ------------------------------------------------------------------------ */
@media (max-width: 460px) {
  /* Everything stays on the line - the name stacks over TIRE OUTLET instead
     of running across, which is where the 56px came from. */
  header .wrap { flex-wrap: nowrap !important; gap: 6px !important;
                 padding: 8px 10px !important; justify-content: space-between !important; }
  header .logo { display: inline-grid !important; grid-template-columns: auto auto;
                 column-gap: 5px !important; row-gap: 0 !important;
                 font-size: 10px !important; line-height: 1.08 !important;
                 letter-spacing: 0 !important; flex: 0 0 auto !important; }
  header .logo img  { grid-row: 1 / 3; height: 36px !important; width: 36px !important;
                      margin-right: 0 !important; }
  header .logo .hr   { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 0 !important; }
  header .logo .full { display: block !important; grid-column: 2; grid-row: 2;
                       align-self: start; padding-top: 0 !important; }
  header .hdr-rating { flex: 0 0 auto !important; margin: 0 !important;
                       padding: 4px 7px !important; gap: 4px !important; }

  /* EN/ES is the same height as the WhatsApp and Text buttons beside it.
     black-ink.css loads AFTER this file and pins the switch at 42x34 with
     two :not(#_) of id weight, so these carry three to win. */
  html body header .lang-switch:not(#_):not(#_):not(#__) {
    flex: 0 0 auto !important; margin: 0 !important;
    height: 26px !important; align-self: center; overflow: hidden;
  }
  html body header .lang-switch .ls:not(#_):not(#_):not(#__) {
    min-width: 0 !important; min-height: 0 !important;
    width: auto !important; height: 26px !important;
    padding: 0 8px !important; font-size: 9.5px !important;
    letter-spacing: .04em !important; line-height: 1 !important;
  }
  header .hdr-actions { flex: 0 0 auto !important; margin: 0 !important; gap: 5px !important; }
  header .icon-btn { width: 26px !important; height: 26px !important; }
  header .icon-btn svg { width: 14px !important; height: 14px !important; }
}

@media (max-width: 900px) {
  /* Shape only - same words, same icon, same colour on each one.
     Measured off Eric's BUILD 137 picture (a true 390x844 shot): 90px wide,
     6px gap, 6px from each edge, 14px off the bottom, corner about 8px. The
     bar had drifted to a 999px oval. Heights in his shot were 56 and 52
     because two labels run to two lines; all four are 56 here so they are
     genuinely uniform. The four keep BLACK lettering (Eric, looking at the
     iPad view), which is black-ink.css's site-wide rule left alone. */
  .mobile-action-bar { gap: 6px !important;
                       padding: 6px 6px calc(14px + env(safe-area-inset-bottom)) !important; }
  .mobile-action-bar a, .mobile-action-bar button {
    height: 56px !important; min-height: 56px !important;
    border-radius: 8px !important; padding: 6px 2px 5px !important;
  }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  .chat-cta { bottom: calc(76px + 12px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 760px) {
  /* The shop name lifts clear of the bar instead of sitting on it. */
  .hero .hero-text { padding-bottom: 34px !important; }
}

/* ------------------------------------------------------------------------
   BUILD 225 part two - his pass across the hub's device sizes. Measured
   before changing anything:
     desktop 1366/1024  Call 84 wide, Request an Estimate 202, Check Repair
                        Status 200;
     iPad 10.2 810, iPad 768, Fold open 858 - EN/ES 86x36 beside 32-36px icon
                        buttons, and the wordmark OVERLAPPING the bar by 11px
                        at all three.
   ------------------------------------------------------------------------ */

/* The two long pills come in 20%, Call goes out 20%. Width is what he asked
   for ("from left to right"), so it is set explicitly; the padding gives up
   the room, which leaves the type alone - the labels are only 128px wide. */
@media (min-width: 901px) {
  .hero-ctas .btn-primary:not(#_):not(#_) {
    width: 101px !important; padding-left: 14px !important; padding-right: 14px !important;
    justify-content: center; text-align: center;
  }
  .hero-ctas .btn-secondary:not(#_):not(#_) {
    width: 162px !important; padding-left: 10px !important; padding-right: 10px !important;
    justify-content: center; text-align: center; white-space: nowrap;
  }
  .hero-ctas .btn-secondary.btn-status:not(#_):not(#_) { width: 160px !important; }
}

/* No arrow on the two hero pills. The pill already centres its contents; the
   arrow sat inside that centred group and shoved the words to the left. With
   it gone the label centres on its own. Hero only - .btn-secondary keeps its
   arrow everywhere else on the site. */
.hero-ctas .btn-secondary:not(#_):not(#_)::after { content: none !important; }

/* EN/ES is the same height as the icon buttons in EVERY header, not just on
   the small phones. black-ink.css pinned it at 86x36 at every width above
   460, which is why it towered over the 32-36px icons on iPad 10.2, iPad and
   Fold open. Both are set together so they cannot drift apart again. */
@media (max-width: 900px) and (min-width: 461px) {
  html body header .icon-btn:not(#_):not(#_):not(#__) {
    width: 34px !important; height: 34px !important;
  }
  html body header .icon-btn svg:not(#_):not(#_):not(#__) {
    width: 18px !important; height: 18px !important;
  }
  html body header .lang-switch:not(#_):not(#_):not(#__) {
    height: 34px !important; align-self: center; overflow: hidden;
  }
  html body header .lang-switch .ls:not(#_):not(#_):not(#__) {
    min-width: 0 !important; min-height: 0 !important;
    width: auto !important; height: 34px !important;
    padding: 0 11px !important; font-size: 11.5px !important; line-height: 1 !important;
  }
}

/* The wordmark lifts clear of the bar on the tablets and the fold too - it
   was sitting 11px UNDER the buttons at 768, 810 and 858. */
@media (max-width: 900px) and (min-width: 761px) {
  .hero .hero-text { padding-bottom: 56px !important; }
}

/* ========================================================================
   BUILD 225 part three - the Response Generator.
   It opens centred and floating instead of parked in the bottom-right
   corner, 240% of its old area (380x560 -> 589x867, 1.55x each side, capped
   to the window). The dimming behind it is the panel's own outer shadow -
   100vmax of it - so no extra element had to be added to the page.
   The BUILD 224 block above owns the geometry; everything here is colour,
   placement and the change from buttons to clickable words. Every
   declaration carries !important because that block carries it too, at the
   same weight, and an earlier !important beats a later plain one.
   ======================================================================== */
.chat-panel:not(#_):not(#_) {
  left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(589px, calc(100vw - 28px)) !important;
  height: min(520px, calc(100vh - 36px)) !important;   /* 40% shorter - the empty space is gone */
  max-width: none !important; border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 100vmax rgba(0,0,0,.55) !important;
}

/* MR. AUTO & TIRE centred, with the introduction under it in yellow, as one
   paragraph. EN/ES and the close X sit out of the flow at the top right so
   the title is centred on the panel, not on what is left over beside them. */
.chat-head:not(#_):not(#_) {
  position: relative !important; display: block !important; text-align: center !important;
  padding: 14px 92px 13px !important;
}
.chat-head-icon:not(#_):not(#_) { display: none !important; }
.chat-head-text strong:not(#_):not(#_) { font-size: 17px !important; }
.chat-head-text span:not(#_):not(#_) {
  white-space: normal !important;
  font-size: 12.5px !important; line-height: 1.5 !important;
  color: #f2a900 !important;
  max-width: 44em !important; margin: 7px auto 0 !important;
}
.chat-head .chat-lang:not(#_):not(#_) { position: absolute !important; right: 46px !important; top: 13px !important; }
/* The BUILD 224 rule keeps this one in flow because the header used to be a
   flex row; it is a centred block now, so in-flow drops the X onto its own
   line. That rule carries four :not(#_) - this carries five. */
.chat-head .chat-close:not(#_):not(#_):not(#_):not(#_):not(#__) {
  position: absolute !important; right: 14px !important; top: 11px !important;
  margin-left: 0 !important;
}

/* EN / ES to the house rule: the side that is ON reads white on its own
   colour; off, English is blue and Espanol is RED. It was a washed-out
   #ff807c, which is why ES read grey. */
.chat-lang .chat-lang-opt[data-lang="en"]:not(#_):not(#_) { color: #2f80ed !important; }
.chat-lang .chat-lang-opt[data-lang="es"]:not(#_):not(#_) { color: #e53935 !important; }
.chat-lang .chat-lang-opt[data-lang="en"].on:not(#_):not(#_) { background: #2f80ed !important; color: #fff !important; }
.chat-lang .chat-lang-opt[data-lang="es"].on:not(#_):not(#_) { background: #e53935 !important; color: #fff !important; }

/* Everything in the body reads down the middle. */
.chat-actions:not(#_):not(#_) { justify-content: center !important; }

/* The row under an answer (Eric, 2026-09-19): centred, and reading left to
   right as Request an Estimate | Contact page | Call. They are coloured by
   WHICH button they are, not by where they happen to sit - the BUILD 224 rule
   fills whatever lands first, which is why Call came out yellow. All three
   take a fill, so all three are the same shape. */
.chat-action[href*="intake"]:not(#_):not(#_)  { order: 1 !important; }
.chat-action[href*="contact"]:not(#_):not(#_) { order: 2 !important; }
.chat-action[href^="tel:"]:not(#_):not(#_)    { order: 3 !important; }

.chat-action[href*="intake"]:not(#_):not(#_),
.chat-action[href*="intake"]:not(#_):not(#_):first-child {
  background: #e53935 !important; border-color: #e53935 !important; color: #121212 !important;
}
.chat-action[href*="intake"]:not(#_):not(#_):hover {
  background: #ff5a54 !important; border-color: #ff5a54 !important; color: #121212 !important;
}
/* Contact page takes the dark blue off Eric's own Reload preview button.
   Black ink would vanish on it, so this one reads white - same as that button. */
.chat-action[href*="contact"]:not(#_):not(#_),
.chat-action[href*="contact"]:not(#_):not(#_):first-child {
  background: #0000cc !important; border-color: #0000cc !important; color: #fff !important;
}
.chat-action[href*="contact"]:not(#_):not(#_):hover {
  background: #1a1ae0 !important; border-color: #1a1ae0 !important; color: #fff !important;
}
.chat-action[href^="tel:"]:not(#_):not(#_),
.chat-action[href^="tel:"]:not(#_):not(#_):first-child {
  background: #25d366 !important; border-color: #25d366 !important; color: #121212 !important;
}
.chat-action[href^="tel:"]:not(#_):not(#_):hover {
  background: #4ae585 !important; border-color: #4ae585 !important; color: #121212 !important;
}
.chat-chips:not(#_):not(#_) { justify-content: center !important; text-align: center !important;
                              gap: 4px 14px !important; }
.chat-chips-intro:not(#_):not(#_) {
  display: block !important; width: 100% !important; text-align: center !important; margin-bottom: 3px !important;
}

/* The two headings are one thing now (Eric, 2026-09-19): "Browse by topic:"
   and "Or request an estimate:" - same font, same size, same case, both
   underlined, so they read as a matched pair of section titles. */
.chat-lead:not(#_):not(#_),
.chat-chips-intro:not(#_):not(#_) {
  text-align: center !important; color: #d4d4d8 !important;
  font-size: 13.3px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .06em !important;
  line-height: 1.5 !important;
  text-decoration: underline !important; text-underline-offset: 4px !important;
}
.chat-lead:not(#_):not(#_) { margin: 4px 0 6px !important; }
.chat-chips-intro:not(#_):not(#_) { margin-bottom: 6px !important; }

/* The rule between the topics and the estimate line. */
.chat-sep:not(#_):not(#_) {
  height: 1px !important; background: #2a2a2e !important;
  margin: 12px auto 10px !important; width: 88% !important;
}

/* Eric, 2026-09-19: these are not buttons any more - they are words you
   click. No pill, no fill, no border; the colour each one had becomes its
   ink, so the list still reads as a set of distinct choices. */
.chat-chip:not(#_):not(#_) {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 2px 4px !important; font-weight: 700 !important; font-size: 12.5px !important;
  text-decoration: none !important; cursor: pointer !important; line-height: 1.5 !important;
}
.chat-chip:not(#_):not(#_):hover {
  background: none !important; text-decoration: underline !important;
  text-underline-offset: 3px !important; filter: brightness(1.15) !important;
}
/* A star in front of every topic, and only the topics. */
.chat-chips-topics .chat-chip:not(#_):not(#_)::before { content: '\2605\00a0'; opacity: .95; }

/* Send: steel blue, not green - Call owns the green on this site and no two
   buttons share a colour. It keeps the small-caps pill it already had. */
/* Send is a flex child of the input row, so it was being STRETCHED to the
   input's full 39px - padding could never shrink it. It centres on its own
   height now: 24px, the house pill, not a fat slab. */
.chat-send:not(#_):not(#_) {
  background: #60a5fa !important; color: #121212 !important;
  align-self: center !important; height: auto !important;
  padding: 4px 15px !important; line-height: 1.35 !important;
}
.chat-send:not(#_):not(#_):hover { background: #93c5fd !important; }

/* Sixteen inks, handed out by chatbot.js across the whole panel so no two
   choices ever share one. */
.chat-chip-c0:not(#_):not(#_)  { color: #14b8a6 !important; }
.chat-chip-c1:not(#_):not(#_)  { color: #f2a900 !important; }
.chat-chip-c2:not(#_):not(#_)  { color: #a78bfa !important; }
.chat-chip-c3:not(#_):not(#_)  { color: #22d3ee !important; }
.chat-chip-c4:not(#_):not(#_)  { color: #fb923c !important; }
.chat-chip-c5:not(#_):not(#_)  { color: #34d399 !important; }
.chat-chip-c6:not(#_):not(#_)  { color: #c084fc !important; }
.chat-chip-c7:not(#_):not(#_)  { color: #eab308 !important; }
.chat-chip-c8:not(#_):not(#_)  { color: #f87171 !important; }
.chat-chip-c9:not(#_):not(#_)  { color: #38bdf8 !important; }
.chat-chip-c10:not(#_):not(#_) { color: #fbbf24 !important; }
.chat-chip-c11:not(#_):not(#_) { color: #2dd4bf !important; }
.chat-chip-c12:not(#_):not(#_) { color: #84cc16 !important; }
.chat-chip-c13:not(#_):not(#_) { color: #06b6d4 !important; }
.chat-chip-c14:not(#_):not(#_) { color: #a3e635 !important; }
.chat-chip-c15:not(#_):not(#_) { color: #5eead4 !important; }

/* On a phone it stays the full-width sheet it already was - a centred box
   240% bigger has nowhere to go on a 390px screen. */
@media (max-width: 760px) {
  .chat-panel:not(#_):not(#_) {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
    transform: none !important; width: auto !important;
    height: min(82vh, calc(100vh - 54px)) !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,.6), 0 0 0 100vmax rgba(0,0,0,.55) !important;
  }
  .chat-head:not(#_):not(#_) { padding: 12px 84px 11px !important; }
}

/* ── BUILD 227 (Eric, 2026-09-22): the chat panel's titles ────────────────
   1. MR. AUTO & TIRE is underlined, like the section headings under it.
   2. Picking a topic or a category no longer echoes its name as a bubble
      from the visitor ("it looks like a button"). It is the title of what
      is now on screen, so it wears the panel title's look -- centred,
      yellow, underlined -- and matches. Questions the visitor taps or
      types are still bubbles; those are their own words.
   The underline offset is 4px on both, the same as .chat-chips-intro, so
   the three kinds of title read as one family. */
.chat-head-text strong:not(#_):not(#_):not(#_) {
  text-decoration: underline !important; text-underline-offset: 4px !important;
}
.chat-subject:not(#_):not(#_) {
  align-self: center !important; width: 100% !important; max-width: 100% !important;
  margin: 8px 0 6px !important; padding: 0 !important; background: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font-family: 'Space Grotesk', Arial, sans-serif !important;
  font-size: 13.5px !important; font-weight: 800 !important;
  letter-spacing: .07em !important; text-transform: uppercase !important;
  color: #f2a900 !important; text-align: center !important; line-height: 1.5 !important;
  text-decoration: underline !important; text-underline-offset: 4px !important;
}

/* ── BUILD 228 (Eric, 2026-09-24): the answer box sits centred in the panel, under
   its centred heading, instead of hugging the left edge. ─────────────────────── */
.chat-msg-bot:not(#_):not(#_) { align-self: center !important; margin-left: auto !important; margin-right: auto !important; }

/* ── BUILD 228 (Eric, 2026-09-24): the page X is pinned -- top right of the content, just
   under the header, never on it, and it does not scroll away. --page-x-top is set by
   chatbot.js from the header's bottom edge. Every page, every width. ───────────────── */
.page-x-pinned:not(#_):not(#_):not(#_):not(#_){
  position:fixed !important; top:var(--page-x-top, 90px) !important; right:14px !important;
  left:auto !important; bottom:auto !important; z-index:60 !important;
}
body.chat-open .page-x-pinned:not(#_):not(#_):not(#_):not(#_){ z-index:1 !important; }

/* ── BUILD 235 (Eric, 2026-09-24) ─────────────────────────────────────────────
   1. Spanish hero: "Ver estado de reparación" ran past its pill ("ER ESTADO DE
      REPARACIÓ"). Smaller lettering on that one button, Spanish pages only, so the whole
      phrase sits inside it.
   2. "Read the full answer" is the reason the chat exists -- 25% bigger and glowing.
   3. A deep link from the chat lands the section just under the header, lit briefly,
      instead of the top of a 2,000-word page. */
html[lang^="es"] .hero-ctas .btn-status:not(#_):not(#_) { font-size: 10.5px !important; letter-spacing: .02em !important; padding-left: 8px !important; padding-right: 8px !important; }
.chat-more .chat-action-more:not(#_):not(#_):not(#_),
.chat-more .chat-action-more:not(#_):not(#_):not(#_):first-child {
  font-size: 14.4px !important; font-weight: 800 !important; color: #ffc233 !important;
  text-shadow: 0 0 6px rgba(242,169,0,.85), 0 0 14px rgba(242,169,0,.55);
  animation: hrReadGlow 1.8s ease-in-out infinite alternate;
}
@keyframes hrReadGlow {
  from { text-shadow: 0 0 4px rgba(242,169,0,.55), 0 0 9px rgba(242,169,0,.3); }
  to   { text-shadow: 0 0 9px rgba(255,194,51,1), 0 0 20px rgba(242,169,0,.8), 0 0 32px rgba(242,169,0,.45); }
}
@media (prefers-reduced-motion: reduce) { .chat-more .chat-action-more:not(#_):not(#_):not(#_) { animation: none; } }
.svc-body h2[id] { scroll-margin-top: 110px; }
.svc-body h2[id]:target { animation: hrSectionLit 2.4s ease-out 1; border-radius: 6px; }
@keyframes hrSectionLit {
  0%, 35% { background: rgba(242,169,0,.28); box-shadow: 0 0 0 8px rgba(242,169,0,.28); }
  100%    { background: transparent; box-shadow: 0 0 0 8px transparent; }
}

/* ── BUILD 235 (Eric, 2026-09-24): every page X is the same solid red circle with a white X
   (the About/Tires/Our Work one was a faint outline). ─────────────────────────────── */
.svc-close.page-x-pinned:not(#_):not(#_):not(#_):not(#_) {
  width: 30px !important; height: 30px !important; background: #e53935 !important; border: 1px solid #e53935 !important;
  color: #fff !important; font-size: 18px !important; font-weight: 700 !important; box-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
}
.svc-close.page-x-pinned:not(#_):not(#_):not(#_):not(#_):hover { background: #ff4d49 !important; }
/* Status page: "Text the shop". BUILD 2048 (Eric, 2026-10-01): teal #14b8a6 with near-black
   lettering, full strength even while the box is empty (dimmed read as broken). */
html body .status-msg-send:not(#_):not(#_):not(#_) { background: #14b8a6 !important; border-color: #14b8a6 !important; color: #06231f !important; }
.status-msg-send:not(#_):not(#_):hover { background: #2cc7b5 !important; }
html body .status-msg-send.off:not(#_):not(#_):not(#_) { background: #14b8a6 !important; color: #06231f !important; opacity: 1; }

/* 2026-09-25 (Eric): home reviews band - "Read all Google reviews" and "Leave a review" side by
   side (were stacked), and the read button in #eb1eeb. */
.rv80-actions:not(#_) { flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.rv80-actions > .rv80-read:not(#_) { background: #eb1eeb !important; border-color: #eb1eeb !important; color: #1f001f !important; box-shadow: 0 3px 13px #eb1eeb66 !important; }
@media (max-width: 480px) {
  .rv80-actions:not(#_) { flex-wrap: nowrap; gap: 6px; }
  .rv80-actions:not(#_) > a { white-space: nowrap; font-size: 9.5px !important; padding: 5px 9px !important; letter-spacing: .04em !important; }
}

/* 2026-09-25 (Eric): the pop-up header is solid black with the website's own checkered strip
   under it -- the same strip that separates the site header from the hero (.checker-strip:
   6px, #000 / #6b4d0a checks). Photo starts right under it in "Image behind". */
.promo-brand:not(#_){ height:54px; padding-bottom:6px; border-bottom:0;
  background:linear-gradient(#000,#000) top / 100% calc(100% - 6px) no-repeat,
             repeating-conic-gradient(#000000 0% 25%, #6b4d0a 0% 50%) 0 100% / 10px 10px; }
.promo-card.has-brand[data-layout="background"] .promo-photo:not(#_){ top:54px !important; }
/* 2026-09-25: "Image beside" + Header on + a long headline pushed the words onto their own row
   under the photo, leaving the photo alone on a row at 0px tall. The words shrink to fit
   beside the photo instead. */
.promo-card.has-brand[data-layout="side"] > .promo-body:not(#_){ flex:1 1 0; min-width:0; }

/* Contact photo and repair-request action */
.contact-hero-photo { height: 220px; overflow: hidden; background: #25252a; }
.contact-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.contact-intake .lead-cta { background: #e53935 !important; border-color: #e53935 !important; color: #fff !important; }
.contact-rail .info-list a[href="intake.html"], .contact-rail .info-list a[href="intake-es.html"] { color: #e53935 !important; font-weight: 700; }
.contact-intake .lead-cta:hover, .contact-intake .lead-cta:focus-visible { background: #ff4d49 !important; border-color: #ff4d49 !important; color: #fff !important; }
@media (max-width: 700px) { .contact-hero-photo { height: 190px; } }

/* Phone subpage return control sits below the section navigation, clear of page copy. */
@media (max-width: 900px) {
  .svc-close.page-x-pinned:not(#_):not(#_):not(#_):not(#_) {
    left: 14px !important;
    right: auto !important;
  }
}

/* Larger phone tap areas without turning the compact controls into large buttons. */
@media (max-width: 900px) {
  .phone-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    box-sizing: border-box;
  }
  .phone-nav a::before {
    content: "";
    position: absolute;
    inset: -6px 0;
  }
  .svc-close.page-x-pinned::before {
    content: "";
    position: absolute;
    inset: -7px;
  }
}

/* BUILD 2048 (Eric, 2026-10-01, circled): CUSTOMER ISSUE sat left of centre. The 320px cap on
   .status-form labels is narrower than the 420px message box, so the label centred inside a
   strip that started at the box's left edge. The label spans the box instead. */
.status-msg-field label { max-width: none !important; }

/* BUILD 2048 check (2026-10-01): the car card's "Text the shop" wears the same teal pill as the
   "Text the shop" above it -- same name, same button (Eric's consistency rule). */
html body .status-ask-send:not(#_):not(#_):not(#_):not(#_) { background: #14b8a6 !important; border-color: #14b8a6 !important;
  color: #06231f !important; font-size: .72rem !important; padding: 6px 22px !important; line-height: 1.35 !important;
  letter-spacing: .07em !important; }
html body .status-ask-send:not(#_):not(#_):not(#_):not(#_):hover { background: #2cc7b5 !important; }
/* BUILD 2048 check: Call under "Can't find your vehicle?" wears the same pill size as Check Status
   and Text the shop (it was bolder and taller). Colour unchanged. */
html body .status-help .call-link:not(#_):not(#_):not(#_):not(#_) { font-size: .72rem !important; font-weight: 700 !important;
  padding: 6px 22px !important; line-height: 1.35 !important; letter-spacing: .07em !important; min-height: 0 !important; }

/* BUILD 2048 (Eric, 2026-10-01, circled): service card headings and the words under them are
   centred at every size, not only on phones (home EN/ES and the Services pages). */
html body .service-card .body:not(#_):not(#_), html body .service-card .body h3:not(#_):not(#_), html body .service-card .body p:not(#_):not(#_) { text-align: center !important; }

/* BUILD 2048 (Eric, 2026-10-01): replaces the BUILD 143-era desktop rule above. Desktop: the chat
   pill parks right under the header on the right. Phones (bottom bar showing): bottom right, just
   above the bar -- chatbot.js works out the spot either way and hands it over as --rg-top. Still
   draggable: :not(.is-placed) means a dragged position always wins. */
html body .chat-cta:not(.is-placed):not(#_):not(#_) { top: var(--rg-top, 96px) !important; bottom: auto !important; right: 14px !important; left: auto !important; }