/* ==========================================================================
   Gonzalez Auto Mechanic - site stylesheet
   --------------------------------------------------------------------------
   Structure, spacing, responsive behavior and component anatomy are ported
   from the upstream reference implementation, which is the presentation authority for
   this rebuild. Every color, font binding, and business-specific rule below
   is Gonzalez's own: the approved charcoal + amber palette on predominantly
   light pages, amber reserved for interactive controls and genuinely critical
   marks, red reserved for the attention layer (phone, prices, urgency, errors).

   Typography is Oswald (display) + Poppins (text), self-hosted. There is no
   Google Fonts link and no remote runtime dependency of any kind: a local
   preview of this site transmits nothing.

   Fonts: Oswald (c) 2016 The Oswald Project Authors; Poppins (c) 2020 The
   Poppins Project Authors. Both SIL OFL 1.1 - see assets/fonts/OFL.txt.
   ========================================================================== */

/* Oswald ships from Google Fonts as a single variable WOFF2 per subset, so one
   file covers the whole 200-700 range and the four weights we bind are the
   same bytes. Declaring the range avoids synthesising faux weights for <b>. */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("fonts/oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("fonts/oswald-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0d1218;
  --charcoal: #12171d;
  --charcoal-900: #080c11;
  --charcoal-700: #232a31;
  --muted: #4a525b;
  --muted-soft: #6d7580;
  --line: #ddd6c8;
  --line-soft: #e9e3d7;
  --white: #ffffff;
  --paper: #faf8f2;
  --paper-alt: #f4f1ea;
  --soft: #f6f4ec;
  --cream: #f4f1ea;
  --line2: #e4ddcd;
  --amber: #ffb020;
  --amber-600: #e09400;
  --amber-dark: #8d5b09;
  --red: #c81717;
  --red-700: #a81111;
  --ok: #127a4a;
  --wrap: 1180px;
  --sec-y: 52px;
  --disp: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --text: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--white); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--text); color: var(--ink); background: var(--white); line-height: 1.6; font-size: 15.5px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--disp); text-transform: uppercase; line-height: 1.08; margin: 0 0 .35em; color: var(--ink); letter-spacing: .01em; }
h1, h2, h3, h4, .btn, .btn-white, .caps, .nav-links, .mpnav, .mega, .ft h3 { font-synthesis: none; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.caps { font-family: var(--disp); text-transform: uppercase; letter-spacing: .06em; }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink); }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 900; background: var(--amber); color: var(--ink); font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 10px 16px; border-radius: 4px; }
.skip-link:focus { top: 10px; }

/* --- buttons: amber is the interactive color ------------------------- */
.btn { display: inline-block; font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 14.5px; padding: 13px 26px; border-radius: 4px; border: 0; cursor: pointer; background: var(--amber); color: var(--ink); text-align: center; transition: background .15s, transform .12s; }
.btn:hover { background: var(--amber-600); color: var(--ink); transform: translateY(-1px); }
/* A ghost button is still a button: same anatomy as .btn, outlined. As a
   bare inline anchor it wrapped mid-label and its border broke across
   lines on narrow screens. */
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 14.5px; border-radius: 4px; text-align: center; background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 11px 24px; }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-white { display: inline-block; font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 14.5px; padding: 13px 26px; border-radius: 4px; background: var(--white); color: var(--ink); border: 0; cursor: pointer; text-align: center; transition: background .15s, transform .12s; }
.btn-white:hover { background: var(--amber); color: var(--ink); transform: translateY(-1px); }
.btn[disabled], .btn-white[disabled] { background: #c7cccf; color: #4a5257; border-color: #c7cccf; opacity: 1; cursor: not-allowed; transform: none; }

/* --- utility ribbon + warranty thread ---------------------------------- */
.rib { background: var(--charcoal); color: #d9dde2; font-size: 13px; text-align: center; padding: 8px 14px; }
.rib b { color: var(--white); }
.rib a { color: var(--amber); font-weight: 700; margin-left: 8px; }
.rib a:hover { color: var(--white); }

/* --- header ------------------------------------------------------------ */
.hd { position: relative; z-index: 300; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.hd .nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 18px; }
.hd .wrap.nav { max-width: 1360px; }
.hd .logo { flex: 0 0 auto; }
.hd .logo img { height: 52px; width: auto; object-fit: contain; }
@media (max-width: 560px) { .hd .wrap.nav { padding-left: 16px; padding-right: 16px; gap: 10px; } .hd .logo img { height: 44px; } }
@media (max-width: 430px) { .hd .wrap.nav { padding-left: 13px; padding-right: 13px; gap: 8px; } .hd .logo img { height: 40px; } }
.nav-links { display: flex; align-items: center; gap: 24px; font-family: var(--disp); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.nav-links > a, .nav-links > .mnav > a { white-space: nowrap; padding: 6px 0; border-bottom: 3px solid transparent; }
.nav-links > a:hover, .nav-links > .mnav > a:hover { color: var(--amber-dark); border-color: var(--amber); }
.nav-links a[aria-current="page"] { border-color: var(--amber); }
.hd .nav .right { display: flex; align-items: center; gap: 18px; }
.hph { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; min-height: 44px; font-family: var(--disp); font-weight: 700; color: var(--red); font-size: 16.5px; line-height: 1.05; text-align: right; letter-spacing: .02em; white-space: nowrap; }
.hph small { display: block; font-family: var(--text); font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.hph:hover { color: var(--red-700); }
.hph.hph-book { align-items: center; min-height: 42px; padding: 10px 16px; border-radius: 4px; background: var(--amber); color: var(--ink); font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.hph.hph-book:hover { background: var(--amber-600); color: var(--ink); }
@media (max-width: 560px) { .hph.hph-book { font-size: 11.5px; padding: 9px 12px; } }
@media (max-width: 430px) { .hph.hph-book { font-size: 11px; padding: 8px 10px; letter-spacing: .03em; } }
.hd-lang { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0; border-bottom: 3px solid transparent; color: var(--muted); font-family: var(--disp); font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.hd-lang:hover, .hd-lang:focus-visible { color: var(--amber-dark); border-color: var(--amber); }
.lang-switch { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 9px; border: 1px solid transparent; border-radius: 6px; font-family: var(--disp); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.shop .lang-switch { display: none; color: var(--amber); }
.ft .bot .lang-switch { color: var(--amber); }
.lang-switch:hover, .lang-switch:focus-visible { color: var(--white); border-color: var(--amber); background: rgba(255, 176, 32, .12); }
/* Organic desktop keeps both primary actions visible while the language
   switch moves into the information strip. Paid-search headers retain their
   isolated language control. */
body:not(.paid-search-page) .hd .hd-lang { display: none; }
body:not(.paid-search-page) > .shop .lang-switch { display: inline-flex; }
@media (max-width: 640px) { .hph { display: flex; align-items: center; height: 42px; font-size: 17px; text-align: left; } }
@media (max-width: 360px) {
  .hd .wrap.nav { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .hd .logo img { height: 30px; }
  .hd .nav .right { gap: 6px; }
  .hd .hph { min-height: 44px; height: 44px; font-size: 14px; }
  .hd .hph small { display: none; }
  .hd .hph.hph-book { padding: 7px; font-size: 10px; letter-spacing: .02em; }
  .hd .mburger { width: 44px; margin-left: 0; }
}

/* Spanish navigation needs more horizontal room than English. Keep the full
   desktop menu at 1440px, then move only the Spanish shell to the approved
   hamburger anatomy before its labels can force the language link off-screen. */
html[lang="es-MX"] .nav-links { gap: 14px; font-size: 14px; }
html[lang="es-MX"] .hd .nav .right { gap: 10px; }
@media (max-width: 1320px) {
  html[lang="es-MX"] .nav-links, html[lang="es-MX"] .mega { display: none; }
  html[lang="es-MX"] .mburger { display: flex; }
  html[lang="es-MX"] .hd-lang { display: none; }
  html[lang="es-MX"] .shop .lang-switch { display: inline-flex; margin-left: 0; }
}

/* Match the proven compact header pattern whenever the hamburger is active:
   the menu still contains the appointment action, while the header keeps one
   immediate Call-or-Book slot. */
@media (max-width: 1250px) {
  .hd .hph-book-open { display: none !important; }
}
@media (min-width: 1251px) and (max-width: 1320px) {
  html[lang="es-MX"] .hd .hph-book-open { display: none !important; }
}

/* On hamburger layouts the phone slot becomes the single appointment action
   after hours. Desktop adds a separate open-hours scheduling option. */

/* mega menus */
.mnav { display: flex; align-items: center; align-self: stretch; }
.mnav > a { position: relative; }
.mnav > a::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 26px; }
.mega { visibility: hidden; opacity: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--soft); border-bottom: 1px solid var(--line); box-shadow: 0 22px 34px rgba(0, 0, 0, .14); z-index: 80; transition: opacity .16s ease .25s, visibility 0s linear .45s; }
.mnav:hover .mega, .mnav:focus-within .mega { visibility: visible; opacity: 1; transition: opacity .18s ease .35s, visibility 0s linear .35s; }
.mega-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 200px 1fr 290px; gap: 30px; padding: 26px 22px 30px; align-items: stretch; }
.mimg { min-height: 170px; border-radius: 10px; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.mh { font-family: var(--disp); text-transform: uppercase; font-weight: 600; font-size: 15.5px; letter-spacing: .05em; margin-bottom: 12px; color: var(--ink); }
.mfind { min-width: 0; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 8px 20px; }
.mgrid a { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 7px 6px; border-radius: 6px; line-height: 1.25; }
.mgrid a.mega-featured, .mgrid a.mega-featured svg { color: var(--amber-dark); }
.mgrid a:hover { color: var(--amber-dark); background: var(--white); }
.mgrid svg { width: 19px; height: 19px; color: var(--muted); flex: 0 0 auto; }
.mgrid a:hover svg { color: var(--amber-dark); }
.mall { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 13px; color: var(--ink); }
.mall:hover { color: var(--amber-dark); }
.mall.m2 { color: var(--muted); margin-left: 18px; }
.mega-supplemental { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.mega-supplemental-label { color: var(--muted); font-family: var(--disp); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mega-supplemental a { color: var(--ink); font-size: 12.5px; font-weight: 700; }
.mega-supplemental a:hover, .mega-supplemental a:focus-visible { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 3px; }
.mega .mvintro, .mega .msch p { text-transform: none; letter-spacing: 0; }
.mvintro { margin: 2px 0 12px; color: var(--muted); font-size: 13.5px; max-width: 62ch; line-height: 1.5; }
.mvcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 22px; }
.mvcat { font-family: var(--disp); text-transform: uppercase; font-size: 12px; letter-spacing: .05em; color: var(--muted); font-weight: 600; margin: 0 0 4px; }
.mvcols a { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 5px 6px; border-radius: 6px; line-height: 1.2; }
.mvcols a:hover { color: var(--amber-dark); background: var(--white); }
.mcoupons { display: flex; flex-direction: column; gap: 8px; }
.mcoupons a { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); transition: border-color .15s, transform .15s; }
.mcoupons a:hover { border-color: var(--amber); transform: translateX(2px); }
.mcoupons b { font-family: var(--disp); color: var(--red); font-size: 19px; line-height: 1; flex: 0 0 auto; min-width: 52px; }
.mcoupons span { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.mrevs { display: flex; flex-direction: column; gap: 12px; }
.mrevs blockquote { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); font-style: italic; }
.mrevs cite { display: block; margin-top: 5px; font-style: normal; font-family: var(--disp); text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.msch { border-left: 1px solid var(--line); padding-left: 26px; }
.msch .btn { font-size: 12px; padding: 12px 16px; letter-spacing: .04em; }
.msch p { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.55; }
.mcp { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; max-width: 60ch; }
@media (max-width: 1250px) { .nav-links { display: none; } .mega { display: none; } .mburger { display: flex; } .hd-lang { display: none; } }
@media (max-width: 1250px) {
  /* The information strip never duplicates the header action in the
     hamburger shell. Keep the locale link available beside shop status. */
  .shop .shop-phone { display: none; }
  .shop .lang-switch { display: inline-flex; margin-left: auto; }
}

@media (max-width: 1250px) {
  /* Hamburger-shell ribbon: centered natural wrapping follows the approved
     reference rhythm. The complete warranty sentence remains in the DOM;
     data-compact supplies the shorter visual treatment while the desktop
     navigation is replaced by the hamburger. */
  .rib { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 8px; row-gap: 0; padding: 2px 12px; font-size: 11.5px; line-height: 1.2; text-align: center; }
  .rib-copy { flex: 0 1 auto; min-width: 0; text-align: center; }
  .rib .rib-warranty { font-size: 0; }
  .rib .rib-warranty::after { content: attr(data-compact); font-size: 11.5px; }
  .rib a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
}

/* burger + mobile panel */
.mburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 1.5px solid var(--line); border-radius: 7px; cursor: pointer; padding: 10px 9px; margin-left: 10px; flex: 0 0 auto; }
.mburger span { display: block; height: 2.5px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform .28s cubic-bezier(.4, .05, .2, 1), opacity .18s; }
.mburger.open { border-color: var(--amber); }
.mburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.mburger.open span:nth-child(2) { opacity: 0; }
.mburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* The reveal has to sit after the base rule, not before it. Both have the same
   specificity, so an earlier media query loses and the button never appears. */
@media (max-width: 1250px) { .mburger { display: flex; } }
.mpanel { position: fixed; left: 0; right: 0; top: 77px; bottom: 0; background: var(--charcoal-900); border-top: 3px solid var(--amber); box-shadow: 0 22px 40px rgba(0, 0, 0, .55); z-index: 350; display: none; min-height: calc(100svh - 77px); max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 0 22px; }
.mpanel.open { display: block; }
html.menu-open .rib { display: none; }
html.menu-open, html.menu-open body { overflow: hidden; overscroll-behavior: none; }
.mpnav { display: flex; flex-direction: column; padding: 6px 20px 0; }
.mpnav > a, .mptog { min-height: 44px; padding: 9px 2px; color: var(--white); font-family: var(--disp); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); background: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; }
.mpnav > a { display: block; }
.mpnav > a:hover, .mptog:hover { color: var(--amber); }
.mpnav > a.mplang { color: var(--amber); }
.mpnav > a.mplang:hover, .mpnav > a.mplang:focus-visible { color: var(--white); }
.mpchev { width: 16px; height: 16px; stroke: var(--amber); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; transition: transform .26s ease; }
.mpitem.open > .mptog .mpchev { transform: rotate(180deg); }
.mpsub { display: none; padding: 4px 0 10px 12px; margin: 2px 0 6px; border-left: 2px solid rgba(255, 176, 32, .45); }
.mpitem.open > .mpsub { display: block; }
.mpsub a { display: block; min-height: 44px; padding: 9px 12px; color: #d8dde3; font-family: var(--disp); font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.mpsub a:hover { color: var(--amber); }
.mpsupp { display: none; margin: -4px 0 10px 12px; padding: 6px 0 4px 12px; border-left: 2px solid rgba(255, 176, 32, .45); }
.mpitem.open > .mpsupp { display: block; }
.mpsupp span { display: block; padding: 6px 12px 4px; color: #9fb0bd; font-family: var(--disp); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mpsupp a { display: block; min-height: 42px; padding: 8px 12px; color: #d8dde3; font-family: var(--disp); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mpsupp a:hover, .mpsupp a:focus-visible { color: var(--amber); }
.mpphone { display: flex; flex-direction: column; gap: 2px; padding: 14px 2px 4px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 10px; }
.mpphone-label { font-family: var(--disp); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: #9fb0bd; }
.mpphone .mpphone-num { color: var(--white); font-family: var(--disp); font-weight: 700; font-size: 22px; letter-spacing: .01em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.mpphone a.mpphone-num:hover { color: var(--amber); }
.mpall { color: var(--amber) !important; }
.mpcat { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 12px; background: none; border: 0; color: #eef1f4; font-family: var(--disp); font-weight: 600; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; text-align: left; }
.mpcat:hover { color: var(--amber); }
.mpcat .mpchev { width: 14px; height: 14px; stroke: #c4a86f; }
.mpitem2.open > .mpcat .mpchev { transform: rotate(180deg); }
.mpsub2 { display: none; padding: 4px 0 8px 12px; margin-left: 6px; border-left: 2px solid rgba(255, 255, 255, .14); }
.mpitem2.open > .mpsub2 { display: block; columns: 2; column-gap: 10px; }
.mpsub2 a { display: block; padding: 7px 8px; color: #bcc4cd; font-family: var(--disp); font-weight: 600; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase; break-inside: avoid; }
.mpsub2 a:hover { color: var(--amber); }
.mpnav > a.mpbook { display: block; margin: 8px 0 6px; padding: 11px 18px; background: var(--amber); color: var(--ink); border: 0; border-radius: 5px; text-align: center; justify-content: center; letter-spacing: .05em; }
.mpnav > a.mpbook:hover { background: var(--amber-600); color: var(--ink); }
.mpmaps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 20px 4px; }
.mpcard { position: relative; display: block; height: 72px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .14); }
.mpcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mptag { position: absolute; left: 8px; bottom: 8px; background: rgba(255, 255, 255, .95); color: var(--ink); font-family: var(--disp); font-weight: 600; font-size: 11px; letter-spacing: .03em; padding: 4px 9px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }

/* --- shop strip -------------------------------------------------------- */
.shop { background: var(--charcoal); color: #c6ccd3; font-size: 13px; }
.shop .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1360px; padding: 9px 24px; }
.shop-identity, .shop-status { display: contents; }
.shop .caps { color: var(--amber); font-weight: 700; font-size: 12.5px; }
.shop b { color: inherit; font-weight: 400; }
.shop .shop-phone { white-space: nowrap; }
.shop .shop-phone .tellink { color: var(--white); font-weight: 700; letter-spacing: .01em; }
.shop .shop-phone .tellink:hover { color: var(--amber); }
.shop .shop-address .tellink { text-decoration: underline; text-underline-offset: 3px; }
.shop .shop-address .tellink:hover { color: var(--amber); }
.shop .shop-address .tellink:focus-visible { color: var(--amber); }
.hours-item { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.hours-label { font-weight: 400; }
.hours-separator { margin: 0 8px; color: var(--muted-soft); }
@media (min-width: 821px) {
  .shop .wrap { flex-wrap: nowrap; white-space: nowrap; }
  .shop .shop-address { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .shop .hrs { white-space: nowrap; }
}
@media (max-width: 1250px) {
  /* Hamburger-shell information strip: three deliberate, left-aligned rows.
     Identity owns row one, labeled hours own row two, and status/locale own
     row three at phone and tablet widths alike. */
  .shop .wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; width: 100%; justify-content: start; align-items: center; gap: 0; padding: 6px clamp(16px, 5.8vw, 24px) 7px; }
  .shop-identity { display: flex; grid-column: 1; grid-row: 1; align-items: baseline; flex-wrap: wrap; gap: 0 8px; width: 100%; min-width: 0; }
  /* Fold8-style hierarchy: the shop name leads the address, while the
     flexible address can wrap instead of forcing horizontal overflow. */
  .shop .caps { display: block; flex: 0 0 auto; color: var(--white); font-size: 13px; line-height: 1.2; letter-spacing: .01em; text-align: left; white-space: nowrap; }
  .shop-address { display: block; flex: 1 1 125px; width: auto; min-width: 0; font-size: 13px; line-height: 1.22; letter-spacing: .015em; text-align: left; }
  .shop .shop-address .tellink { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; min-height: 44px; line-height: 1.2; text-align: left; white-space: normal; text-decoration: underline; text-underline-offset: 3px; }
  .shop .hrs { display: flex; grid-column: 1; grid-row: 2; align-items: baseline; flex-wrap: wrap; width: 100%; min-width: 0; justify-self: start; margin: 0; font-size: 12.5px; line-height: 1.3; text-align: left; white-space: normal; }
  .shop .hrs b { color: var(--white); font-weight: 700; }
  .shop .hours-separator { margin: 0 7px; }
  .shop-status { display: flex; grid-column: 1; grid-row: 3; align-items: center; flex-wrap: nowrap; gap: 0 8px; width: 100%; min-width: 0; }
  .shop .hs-pill { flex: 0 1 auto; width: max-content; min-width: 0; max-width: calc(100% - 76px); grid-column: 1; grid-row: 3; justify-self: start; margin: 0; font-size: clamp(10.5px, 3vw, 12px); line-height: 1.12; letter-spacing: .045em; padding: 5px 11px; gap: 6px; white-space: normal; }
  .shop .lang-switch { flex: 0 0 auto; grid-column: 2; grid-row: 3; justify-self: start; margin: 0; min-height: 44px; padding: 3px 7px; font-size: 12px; }
}

/* Spanish navigation keeps the hamburger through 1320px because its labels
   need more room. Extend the same compact ribbon and three-row shop strip to
   that language-only boundary without changing the English desktop shell. */
@media (min-width: 1251px) and (max-width: 1320px) {
  html[lang="es-MX"] .rib { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 8px; row-gap: 0; padding: 2px 12px; font-size: 11.5px; line-height: 1.2; text-align: center; }
  html[lang="es-MX"] .rib-copy { flex: 0 1 auto; min-width: 0; text-align: center; }
  html[lang="es-MX"] .rib .rib-warranty { font-size: 0; }
  html[lang="es-MX"] .rib .rib-warranty::after { content: attr(data-compact); font-size: 11.5px; }
  html[lang="es-MX"] .rib a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 0; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  html[lang="es-MX"] .shop .shop-phone { display: none; }
  html[lang="es-MX"] .shop .wrap { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; width: 100%; justify-content: start; align-items: center; gap: 0; padding: 6px clamp(16px, 5.8vw, 24px) 7px; white-space: normal; }
  html[lang="es-MX"] .shop-identity { display: flex; grid-column: 1; grid-row: 1; align-items: baseline; flex-wrap: wrap; gap: 0 8px; width: 100%; min-width: 0; }
  html[lang="es-MX"] .shop .caps { display: block; flex: 0 0 auto; color: var(--white); font-size: 13px; line-height: 1.2; letter-spacing: .01em; text-align: left; white-space: nowrap; }
  html[lang="es-MX"] .shop-address { display: block; flex: 1 1 125px; width: auto; min-width: 0; font-size: 13px; line-height: 1.22; letter-spacing: .015em; text-align: left; }
  html[lang="es-MX"] .shop .shop-address .tellink { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; min-height: 44px; line-height: 1.2; text-align: left; white-space: normal; text-decoration: underline; text-underline-offset: 3px; }
  html[lang="es-MX"] .shop .hrs { display: flex; grid-column: 1; grid-row: 2; align-items: baseline; flex-wrap: wrap; width: 100%; min-width: 0; justify-self: start; margin: 0; font-size: 12.5px; line-height: 1.3; text-align: left; white-space: normal; }
  html[lang="es-MX"] .shop .hrs b { color: var(--white); font-weight: 700; }
  html[lang="es-MX"] .shop .hours-separator { margin: 0 7px; }
  html[lang="es-MX"] .shop-status { display: flex; grid-column: 1; grid-row: 3; align-items: center; flex-wrap: nowrap; gap: 0 8px; width: 100%; min-width: 0; }
  html[lang="es-MX"] .shop .hs-pill { display: flex; flex: 0 1 auto; width: max-content; min-width: 0; max-width: calc(100% - 76px); grid-column: 1; grid-row: 3; justify-self: start; margin: 0; font-size: clamp(10.5px, 3vw, 12px); line-height: 1.12; letter-spacing: .045em; padding: 5px 11px; gap: 6px; white-space: normal; }
  html[lang="es-MX"] .shop .lang-switch { display: inline-flex; flex: 0 0 auto; grid-column: 2; grid-row: 3; justify-self: start; margin: 0; min-height: 44px; padding: 3px 7px; font-size: 12px; }
}

/* hours pill - amber outline while open, muted while closed */
.hs-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-family: var(--disp); font-weight: 600; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--charcoal-900); background: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 4px 11px; vertical-align: middle; white-space: nowrap; }
.hs-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.hs-pill[data-state="closed"] { background: #2b333b; color: #e9eff4; border-color: #4d565f; }
.hs-pill[data-state="closed"] .dot { border-radius: 1px; }
.hs-pill[hidden] { display: none; }
@media (max-width: 1250px) { .hs-pill { display: flex; width: max-content; margin: 0; } }

/* Hours state is declarative. The document starts in the closed state so the
   no-JS render never invites a call the shop cannot answer. */
/* The hidden attribute always wins, even over classes that set display. */
[hidden] { display: none !important; }
html:not([data-hs-state="open"]) [data-hs-open-only] { display: none !important; }
html[data-hs-state="open"] [data-hs-closed-only] { display: none !important; }
.hs-closed-note { font-size: 13px; color: var(--muted); font-weight: 500; }

/* --- hero -------------------------------------------------------------- */
.hero { position: relative; color: var(--white); background-size: cover; background-position: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 12, 17, .94), rgba(18, 23, 29, .82) 55%, rgba(8, 12, 17, .48)); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 38px; align-items: center; padding: 54px 24px 62px; }
.hero h1 { color: var(--white); font-size: clamp(30px, 4.2vw, 52px); font-weight: 700; max-width: 18ch; }
.hero h1 .r { color: var(--amber); }
.hero .sub { font-size: 17px; color: #e4e7ea; max-width: 52ch; }
.hero .pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 20px; padding: 0; list-style: none; font-family: var(--disp); font-size: 14px; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; color: #dfe3e7; }
.hero .pts li { min-width: 0; }
.hero .pts li::before { content: "\2713"; color: var(--amber); margin-right: 6px; font-weight: 700; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .hero .wrap { display: flex; flex-direction: column; gap: 16px; padding: 18px 0 26px; align-items: stretch; } .hero .wrap > div:first-child { padding: 0 22px; } .hero .widget { width: 100%; max-width: none; border-radius: 0; margin: 0; } .hero h1 { font-size: 27px; line-height: 1.15; margin: 14px 0 8px; } .hero .sub { font-size: 14px; margin: 0 0 12px; } .hero .pts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 10px 0 14px; font-size: 11px; line-height: 1.25; letter-spacing: .02em; } }

/* --- category hubs ------------------------------------------------------ */
.hub-hero { position: relative; color: var(--white); background-size: cover; background-position: center; }
.hub-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,12,17,.96), rgba(18,23,29,.78) 55%, rgba(8,12,17,.40)); }
.hub-hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); gap: 42px; align-items: center; padding: 48px 24px 54px; }
.hub-hero-copy { min-width: 0; }
.hub-hero .crumb { margin-bottom: 12px; color: #d6dce1; }
.hub-hero .crumb a:hover { color: var(--amber); }
.hub-hero h1 { color: var(--white); max-width: 18ch; font-size: clamp(30px, 4vw, 50px); line-height: 1.04; margin: 0 0 12px; }
.hub-hero .eyebrow { color: var(--amber); }
.hub-sub { max-width: 58ch; color: #eef1f3; font-size: 17px; }
.hub-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 18px; margin: 18px 0 22px; padding: 0; list-style: none; color: #f0f2f4; font-family: var(--disp); font-size: 13px; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; }
.hub-hero .hub-proof li::before { content: "\2713"; color: var(--amber); margin-right: 7px; font-weight: 700; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hub-actions .btn-outline { border: 1px solid #f0f2f4; background: transparent; color: #fff; }
.hub-hero .hub-actions .btn-outline:hover, .hub-hero .hub-actions .btn-outline:focus-visible { border-color: var(--amber); color: var(--amber); }
.hub-hero-entry { min-width: 0; }
.hub-lead { max-width: 70ch; }
.hub-decision { padding-top: 0; }
.hub-decision-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 36px; align-items: start; padding: 28px; border: 1px solid var(--line); border-left: 4px solid var(--amber); background: var(--white); }
.hub-decision-intro .title { margin-bottom: 8px; }
.hub-decision-intro p, .hub-decision-options p { margin: 0; color: var(--muted); }
.hub-decision-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.hub-decision-options article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.hub-decision-options h3 { margin: 0 0 8px; color: var(--ink); font-family: var(--disp); font-size: 18px; letter-spacing: .02em; }
.hub-decision-options .go { display: inline-block; margin-top: 12px; }
.hub-testing { background: var(--charcoal-900); color: #f3f5f6; --band-fg: #dfe6ec; --band-muted: #9fb0bd; --band-tick-bg: var(--amber); --band-tick-fg: var(--charcoal-900); }
.hub-testing h2, .hub-testing .eyebrow { color: #fff; }
.hub-testing p, .hub-testing li { color: #d7dde2; }
.hub-finder-head { max-width: 72ch; }
.make-finder-label { display: block; margin-top: 20px; color: var(--ink); font-family: var(--disp); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.make-finder { width: min(100%, 520px); min-height: 48px; margin-top: 7px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); font: inherit; font-size: 16px; }
.make-finder-status { min-height: 1.3em; margin-top: 6px; color: var(--muted); font-size: 13px; }
.make-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 54px); align-items: start; margin-top: 34px; }
.make-group h3 { margin: 0; padding: 0 0 12px; border-bottom: 2px solid var(--amber); font-family: var(--disp); font-size: 17px; text-transform: uppercase; }
.make-list { display: block; }
.make-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 43px; padding: 10px 2px; border-bottom: 1px solid var(--line2); color: var(--ink); text-decoration: none; transition: color .15s ease, padding-left .15s ease; }
.make-link::after { content: "›"; color: var(--amber-dark); font-family: var(--disp); font-size: 19px; line-height: 1; }
.make-link:hover, .make-link:focus-visible { padding-left: 6px; color: var(--amber-dark); }
.additional-makes { margin-top: clamp(38px, 6vw, 70px); padding-top: clamp(28px, 4vw, 46px); border-top: 1px solid var(--line); }
.additional-makes .body { max-width: 72ch; }
.additional-make-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin-top: 24px; }
.make-entry-static { display: grid; gap: 4px; align-content: start; min-height: 76px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); }
.make-entry-static span { font-weight: 700; }
.make-entry-static small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.vehicle-fit-cta .body { max-width: 76ch; }
.vehicle-fit-cta .btn { margin-top: 12px; }

/* Compact directory and hub routers. These pages organize decisions; they do
 * not borrow the image-heavy paid-landing-page hero or service-page anatomy. */
.router-heading { padding: clamp(32px, 5vw, 62px) 0; background: var(--charcoal); color: var(--white); }
.router-heading > .wrap { display: grid; gap: clamp(26px, 5vw, 62px); align-items: start; }
.router-heading-widget > .wrap { grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr); }
.router-heading-copy { max-width: 720px; }
.router-heading .crumb { margin-bottom: 18px; color: #d6dae0; }
.router-heading .crumb a { color: #fff; }
.router-heading .eyebrow { color: #fff; opacity: .78; }
.router-heading h1 { margin: 8px 0 0; color: #fff; font-size: clamp(38px, 5vw, 62px); line-height: .98; }
.router-subhead { margin: 18px 0 0; color: #fff; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.3; }
.router-lead { max-width: 66ch; margin: 16px 0 0; color: #e5e8ec; font-size: 16px; line-height: 1.65; }
.router-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.router-action { min-width: 205px; text-align: center; }
.router-widget { min-width: 0; }
.router-widget .widget { margin: 0; background: #fff; color: var(--ink); box-shadow: 0 18px 42px rgba(0,0,0,.22); }
.service-directory > .wrap > .section-head, .service-directory > .wrap > .title { max-width: 820px; }
.service-family-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(34px, 5vw, 62px); margin-top: 42px; }
.service-family { min-width: 0; padding-top: 18px; border-top: 3px solid var(--amber); }
.service-family > header h2 { margin: 0; font-family: var(--disp); font-size: 25px; line-height: 1.05; text-transform: uppercase; }
.service-family > header p { margin: 9px 0 0; color: var(--muted); line-height: 1.55; }
.router-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 25px; }
.service-family .router-card-grid { grid-template-columns: 1fr; gap: 0; margin-top: 15px; }
.router-card-grid-four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.router-card-grid-two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.router-service-card { min-width: 0; padding: 20px; border: 1px solid var(--line); background: #fff; }
.service-family .router-service-card { padding: 17px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.router-service-card h3 { margin: 0; font-family: var(--disp); font-size: 18px; line-height: 1.16; text-transform: uppercase; }
.router-service-card h3 a { color: var(--ink); text-decoration: none; }
.router-service-card h3 a:hover, .router-service-card h3 a:focus-visible { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 3px; }
.router-service-card p { margin: 9px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.router-service-card .go { display: inline-block; margin-top: 12px; }
.router-offramp > .wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: center; }
.router-link-row { display: flex; flex-wrap: wrap; gap: 10px; }
.router-decisions > .wrap { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.router-decisions article { padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line); background: #fff; }
.router-decisions .router-decision-primary { border-top: 4px solid var(--amber); }
.router-decisions h2 { margin: 6px 0 0; font-family: var(--disp); font-size: clamp(24px,3vw,34px); line-height: 1.04; text-transform: uppercase; }
.router-decisions p { margin: 13px 0 0; color: var(--muted); line-height: 1.6; }
.router-decisions .go { display: inline-block; margin-top: 16px; }
.router-prose { max-width: 78ch; }
.router-help .wrap, .router-urgent .body { max-width: 940px; }
.router-urgent { border-top: 1px solid var(--line); }
.hub-split-copy { max-width: 72ch; }
.hub-closing > .free { margin-top: 0; }
@media (max-width: 920px) { .hub-hero .wrap { grid-template-columns: 1fr; gap: 28px; } .hub-hero h1 { max-width: 24ch; } .hub-hero-entry { max-width: 620px; } .make-groups { grid-template-columns: 1fr; gap: 28px; } .make-list, .additional-make-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 18px; } }
@media (max-width: 1100px) { .router-heading-widget > .wrap { grid-template-columns: 1fr; } .router-widget { max-width: 760px; } .router-card-grid-four { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 820px) { .service-family-list, .router-card-grid { grid-template-columns: 1fr; } .router-card-grid-two, .router-card-grid-four { grid-template-columns: repeat(2, minmax(0,1fr)); } .router-offramp > .wrap { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .hub-decision-grid { grid-template-columns: 1fr; gap: 22px; padding: 22px; } }
@media (max-width: 560px) { .hub-hero .wrap { padding: 28px 18px 32px; gap: 20px; } .hub-hero h1 { font-size: 29px; } .hub-sub { font-size: 15px; } .hub-proof { grid-template-columns: 1fr; font-size: 12px; } .hub-actions { display: grid; grid-template-columns: 1fr; } .hub-actions > * { width: 100%; } .make-list, .additional-make-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 14px; } }
@media (max-width: 620px) { .router-heading { padding: 28px 0 34px; } .router-heading h1 { font-size: 38px; } .router-actions, .router-link-row { display: grid; grid-template-columns: 1fr; } .router-actions > *, .router-link-row > * { width: 100%; } .router-card-grid-two, .router-card-grid-four, .router-decisions > .wrap { grid-template-columns: 1fr; } .router-service-card { padding: 18px; } }
@media (max-width: 520px) { .hub-decision-options { grid-template-columns: 1fr; gap: 20px; } .hub-decision-options article + article { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 430px) { .make-list, .additional-make-list { grid-template-columns: 1fr; } }

/* --- widget / form primitives ------------------------------------------ */
.widget { background: var(--white); border-radius: 8px; box-shadow: 0 24px 50px rgba(0, 0, 0, .38); overflow: hidden; color: var(--ink); }
.wtabs { display: flex; }
.wtab { flex: 1; text-align: center; font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; padding: 14px 10px; background: var(--soft); color: var(--muted); cursor: pointer; border: 0; border-bottom: 3px solid var(--line); }
.widget:has(> .wtab-radio:first-of-type:focus-visible) .wtabs > .wtab:first-child,
.widget:has(> .wtab-radio:nth-of-type(2):focus-visible) .wtabs > .wtab:nth-child(2) { outline: 3px solid var(--ink); outline-offset: -3px; }
.wtab.on { background: var(--white); color: var(--ink); border-color: var(--amber); }
.wbd { padding: 18px 20px 20px; }
.wbd label, .fldwrap label { display: block; font-family: var(--disp); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 5px; }
.fld { width: 100%; border: 1.5px solid var(--line); border-radius: 4px; padding: 11px 12px; font-size: 14.5px; font-family: var(--text); color: var(--ink); background: #fcfbf7; }
.fld:focus { border-color: var(--ink); background: var(--white); }
/* The select already carried this; the text inputs landed at 43px, one
   pixel under, which is the kind of miss only measurement finds. */
select.fld,
input.fld,
textarea.fld { min-height: 44px; }
@media (max-width: 700px) {
  input.fld,
  select.fld,
  textarea.fld { font-size: 16px; }
}
.row { display: flex; gap: 10px; align-items: start; }
.row > div { flex: 1; min-width: 0; }
@media (max-width: 620px) { .row { flex-direction: column; gap: 0; } .row > div { width: 100%; } }
.wbd .btn { width: 100%; padding: 14px; }
.wbd .req { font-size: 11.5px; color: var(--muted); margin-top: 9px; text-align: center; }

/* Validation text is small and sits directly beneath its own field. Empty
   messages reserve no vertical space; paired rows align from their controls,
   while a real error expands only beneath the field it describes. */
.fldwrap { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 11px; }
.fldnote { display: block; min-height: 0; margin-top: 0; font-size: 12px; line-height: 1.25rem; color: var(--red); }
.fldnote:not(:empty) { min-height: 1.25rem; margin-top: 4px; }
.fld[aria-invalid="true"] { border-color: var(--red); }
fieldset.fldwrap { min-inline-size: 0; border: 0; padding: 0; }

/* Contact-preference pills keep their label on one line and reflow as whole
   controls rather than wrapping mid-label. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: 0 0 auto; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--white); min-height: 44px; }
.pill input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pill input:focus-visible + span { outline: 2px solid var(--amber-dark); outline-offset: 3px; border-radius: 3px; }
.pill:hover { border-color: var(--amber); }
.pill:has(input:checked) { border-color: var(--amber); background: #ffb020; color: var(--ink); }

/* The shared home/hub request widget is a no-script two-pane radio tabset. The
   radios stay keyboard reachable while their labels provide the large F7
   tab targets; only one pane is visible at a time. */
#gz-funnel .wtab-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
#gz-funnel .wtab { display: flex; align-items: center; justify-content: center; min-height: 52px; }
#gz-funnel .wtab-radio:first-of-type:focus-visible ~ .wtabs label:first-of-type,
#gz-funnel .wtab-radio:nth-of-type(2):focus-visible ~ .wtabs label:nth-of-type(2) { outline: 2px solid var(--amber); outline-offset: -4px; }
#gz-funnel .wtab-radio:first-of-type:checked ~ .wtabs label:first-of-type,
#gz-funnel .wtab-radio:nth-of-type(2):checked ~ .wtabs label:nth-of-type(2) { background: var(--white); color: var(--ink); border-color: var(--amber); }
#gz-funnel .wpanel { display: none; }
#gz-funnel .wtab-radio:first-of-type:checked ~ .wbd .wpanel-book,
#gz-funnel .wtab-radio:nth-of-type(2):checked ~ .wbd .wpanel-question { display: block; }
#gz-funnel .wpanel-request:not([hidden]) { display: block; }
#gz-funnel .wintro { text-align: left; margin: 0 0 12px; }
#gz-funnel .wzopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#gz-funnel .wpanel-book .wzopts { grid-template-columns: 1fr; }
#gz-funnel .wzopt { gap: 10px; }
#gz-funnel button.wzopt { appearance: none; font: inherit; }
#gz-funnel .wzopt .ic { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#gz-funnel .wzopt .wzchev { width: 16px; height: 16px; margin-left: auto; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#gz-funnel .wzopt span { min-width: 0; }
#gz-funnel .wbd { padding-top: 10px; }
#gz-funnel .wpanel-request { padding: 0 0 4px; }
#gz-funnel .gw-back { display: inline-flex; min-height: 44px; align-items: center; padding: 0; border: 0; background: none; color: var(--amber-dark); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#gz-funnel .gwfield { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
#gz-funnel .gwfield label, #gz-funnel .gwchips legend { color: var(--ink); font-family: var(--disp); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
#gz-funnel .gwfield input, #gz-funnel .gwfield textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--white); font: inherit; font-size: 16px; }
#gz-funnel .gwfield textarea { min-height: 92px; resize: vertical; }
#gz-funnel .gwfield input:focus, #gz-funnel .gwfield textarea:focus { outline: 2px solid var(--amber); outline-offset: 2px; }
#gz-funnel .gwerror { display: block; min-height: 1.2em; color: var(--red-700); font-size: 12px; line-height: 1.25; }
#gz-funnel .gwchips { margin: 14px 0 0; padding: 0; border: 0; }
#gz-funnel .gwchips legend { margin-bottom: 7px; }
#gz-funnel .gwchip { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; cursor: pointer; }
#gz-funnel .gwchip.on, #gz-funnel .gwchip:hover, #gz-funnel .gwchip:focus-visible { border-color: var(--amber-dark); background: #fff8ea; }
#gz-funnel .gwgrid { display: grid; grid-template-columns: 1fr; gap: 0; }
#gz-funnel .gwnote { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 12px 0 0; }
#gz-funnel .gw-send { margin-top: 14px; }
#gz-funnel .gwstate { margin-top: 12px; padding: 10px 12px; border-radius: 6px; font-size: 13px; }
#gz-funnel .gw-success { background: #edf7ee; color: #1f5c2c; }
#gz-funnel .gw-failure { background: #fdf1f1; color: var(--red-700); }
#gz-funnel .gw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#gz-funnel .w-noscript { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
#gz-funnel .w-noscript a { color: var(--amber-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* The homepage only introduces the dedicated symptom checker. Keep the
   category choices scannable and link-first, rather than rendering the full
   result flow a second time on the home route. */
.home-symptom-step1 { max-width: 980px; margin: 26px auto 0; }
.symptom-entry-link { justify-content: space-between; color: var(--ink); text-decoration: none; }
.symptom-entry-link svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.symptom-entry-open { display: inline-flex; align-items: center; min-height: 44px; margin-top: 14px; color: var(--amber-dark); font-family: var(--disp); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 3px; }

/* Contact follows the current upstream reference hierarchy without copying
   another shop's facts: three first-action cards, a compact proof strip, then the
   message form and shop-planning card in one balanced row. */
.contact-actions { padding: 30px 0 26px; background: var(--white); }
.contact-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.contact-action-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); box-shadow: 0 8px 22px rgba(0, 0, 0, .05); }
.contact-action-card h2 { margin: 0 0 7px; font-size: 21px; }
.contact-action-card p { flex: 1; margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.contact-action-card .btn { width: 100%; }
.contact-proof-strip,
.contact-proof-strip[data-surface] { background: var(--charcoal); color: var(--white); }
.contact-proof-strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.contact-proof-strip article { padding: 17px 18px; border-left: 1px solid #394149; }
.contact-proof-strip article:first-child { border-left: 0; }
.contact-proof-strip strong, .contact-proof-strip span { display: block; }
.contact-proof-strip strong { color: var(--amber); font-family: var(--disp); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.contact-proof-strip span { margin-top: 4px; color: #d6dce1; font-size: 12.5px; line-height: 1.4; }
.contact-main { padding: 40px 0 46px; background: var(--soft); }
.contact-main > .wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 24px; align-items: start; }
.contact-form-card, .contact-visit-card { border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 10px 26px rgba(0, 0, 0, .06); }
.contact-form-card { padding: 24px; }
.contact-form-head { margin: 0 0 18px; }
.contact-form-head p { max-width: 66ch; margin: 6px 0 0; color: var(--muted); }
.contact-form-card .widget { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.contact-form-card .wbd { padding: 0; }
.contact-form-card .fldwrap { margin-bottom: 9px; }
.contact-form-card textarea.fld { min-height: 118px; }
.contact-visit-card { padding: 24px; }
.contact-visit-card h2 { margin: 3px 0 14px; font-size: 24px; }
.contact-address { display: inline-block; color: var(--amber-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.contact-landmark { margin: 10px 0 16px; color: var(--muted); font-size: 13.5px; }
.contact-hours { list-style: none; margin: 0 0 16px; padding: 0; }
.contact-hours li { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.contact-hours li:first-child { border-top: 0; }
.contact-hours span { text-align: right; }
.contact-direct-call { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 0 0 14px; }
.contact-direct-call strong { color: var(--ink); font-size: 18px; }
.contact-direct-call .btn { width: 100%; }
.contact-visit-maps { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.contact-map-card { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--ink); text-decoration: none; }
.contact-map-card img { display: block; width: 100%; height: 82px; object-fit: cover; }
.contact-map-card span { display: block; padding: 8px 9px; font-family: var(--disp); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.contact-map-card:hover, .contact-map-card:focus-visible { border-color: var(--amber-dark); color: var(--amber-dark); }
.contact-helpful { padding: 34px 0 48px; background: var(--white); }
.contact-helpful h2 { margin: 0 0 18px; font-size: 25px; }
.contact-helpful-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.contact-helpful-grid a { position: relative; display: grid; gap: 4px; min-height: 104px; padding: 17px 42px 17px 18px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; }
.contact-helpful-grid strong { font-family: var(--disp); font-size: 15px; text-transform: uppercase; }
.contact-helpful-grid span { color: var(--muted); font-size: 13px; }
.contact-helpful-grid b { position: absolute; top: 50%; right: 18px; color: var(--amber-dark); font-size: 23px; transform: translateY(-50%); }
.contact-helpful-grid a:hover, .contact-helpful-grid a:focus-visible { border-color: var(--amber-dark); }
@media (max-width: 920px) {
  .contact-action-grid { grid-template-columns: 1fr; }
  .contact-action-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; }
  .contact-action-card h2, .contact-action-card p { grid-column: 1; }
  .contact-action-card p { margin-bottom: 0; }
  .contact-action-card .btn { grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .contact-proof-strip .wrap { grid-template-columns: 1fr 1fr; }
  .contact-proof-strip article:nth-child(3) { border-left: 0; border-top: 1px solid #394149; }
  .contact-proof-strip article:nth-child(4) { border-top: 1px solid #394149; }
  .contact-main > .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .contact-actions { padding: 22px 0; }
  .contact-action-card { display: flex; padding: 17px; }
  .contact-action-card p { margin-bottom: 14px; }
  .contact-action-card .btn { width: 100%; }
  .contact-proof-strip .wrap { grid-template-columns: 1fr; }
  .contact-proof-strip article, .contact-proof-strip article:nth-child(3) { border-left: 0; border-top: 1px solid #394149; }
  .contact-proof-strip article:first-child { border-top: 0; }
  .contact-main { padding: 30px 0 36px; }
  .contact-form-card, .contact-visit-card { padding: 18px; }
  .contact-visit-maps, .contact-helpful-grid { grid-template-columns: 1fr; }
  .contact-helpful { padding: 28px 0 38px; }
}

/* Dedicated diagnosis ticket. The action cells touch edge to edge so the
   coupon reads as one connected ticket rather than three unrelated links. */
.ticket-visual { margin-bottom: 14px; }
.ticket-visual img { border-radius: 8px; }
.ticket { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 26px rgba(0, 0, 0, .06); margin-bottom: 18px; }
.ticket-bar { height: 7px; flex: 0 0 auto; background: linear-gradient(90deg, var(--ink), var(--amber)); }
.ticket-body { padding: 20px 20px 18px; flex: 1; }
.ticket-body .eyebrow { color: var(--muted); font-family: var(--disp); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ticket-value { color: var(--amber-dark); font-family: var(--disp); font-size: clamp(48px, 8vw, 76px); font-weight: 700; line-height: .9; margin: 4px 0 5px; }
.ticket-label { color: var(--ink); font-family: var(--disp); font-size: 18px; line-height: 1.05; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.ticket-quip { color: var(--muted); font-size: 14px; font-style: italic; margin: 11px 0 0; }
.ticket-price { color: var(--amber-dark); font-family: var(--disp); font-size: 16px; font-weight: 700; margin: 14px 0 0; }
.ticket-terms { border-top: 1px dashed var(--line); color: var(--muted); font-family: var(--disp); font-size: 11.5px; letter-spacing: .04em; line-height: 1.45; margin: 12px 0 0; padding-top: 10px; text-transform: uppercase; }
.ticket-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr); border-top: 1px solid var(--line); }
.ticket-actions a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: 10px 6px; color: var(--ink); font-family: var(--disp); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.ticket-actions > * + * { border-left: 1px solid var(--line); }
.ticket-actions .cta-cell { display: flex; min-width: 0; }
.ticket-actions .cta-cell > a { flex: 1; min-width: 0; }
.ticket-actions .cta-cell > a + a { border-left: 0; }
.ticket-actions a:hover, .ticket-actions a:focus-visible { background: var(--amber); color: var(--ink); }

/* The Spanish appointment lead can wrap one line earlier than English. Keep
   the same approved type scale, but remove surplus band padding only on that
   locale so the compact reference heading remains compact. */
.phero.phero-appointment-es .wrap { padding-top: 14px; padding-bottom: 12px; }
.phero.phero-appointment-es .psub { margin-top: 4px; line-height: 1.28; }

/* --- offers ------------------------------------------------------------ */
.offers { background: var(--cream); border-bottom: 1px solid var(--line); }
.offers .wrap { padding: var(--sec-y) 24px calc(var(--sec-y) + 6px); }
.offers .k { font-family: var(--disp); color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.offers h2 { font-size: clamp(26px, 3.2vw, 36px); }
.ogrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; }
.cpn { background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 22px rgba(0, 0, 0, .06); }
.cpn .bar { height: 6px; background: linear-gradient(90deg, var(--ink), var(--amber)); }
.cpn .bd { padding: 20px 20px 16px; flex: 1; }
.cpn .eyebrow { font-family: var(--disp); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cpn .anchor { font-family: var(--disp); font-weight: 700; font-size: 40px; line-height: 1; color: var(--red); margin: 2px 0; }
.cpn .qual { font-family: var(--disp); font-size: 16px; text-transform: uppercase; color: var(--ink); }
.cpn .quip { color: var(--muted); font-size: 13px; margin: 8px 0 0; font-style: italic; }
.cpn .exp { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 10px; font-family: var(--disp); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cpn .ctas { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .85fr); border-top: 1px solid var(--line); }
.cpn .ctas a { flex: 1; min-width: 0; text-align: center; padding: 12px 6px; min-height: 44px; font-family: var(--disp); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); white-space: nowrap; display: flex; align-items: center; justify-content: center; }
.cpn .ctas > * + * { border-left: 1px solid var(--line); }
.cpn .ctas .cta-cell { display: flex; min-width: 0; }
.cpn .ctas .cta-cell > a { flex: 1; min-width: 0; }
html:not([data-hs-state="open"]) .cpn .ctas { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); }
@media (max-width: 1020px) { .cpn .ctas a { white-space: normal; line-height: 1.15; padding: 11px 5px; font-size: 11px; } }
@media (max-width: 430px) { .cpn .ctas a { font-size: 10.5px; letter-spacing: .01em; padding: 10px 4px; } }
.cpn .ctas .cta-cell > a + a { border-left: 0; }
.cpn .ctas a:hover { background: var(--amber); color: var(--ink); }
@media (max-width: 1020px) { .ogrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ogrid { grid-template-columns: 1fr; } }
@media (max-width: 430px) {
  .cpn .ctas { grid-template-columns: minmax(0, 1.65fr) minmax(0, .9fr) minmax(0, .65fr); }
  html:not([data-hs-state="open"]) .cpn .ctas { grid-template-columns: minmax(0, 1.65fr) minmax(0, .65fr); }
  .cpn .ctas a { padding-left: 4px; padding-right: 4px; font-size: 10.5px; }
}

/* --- generic blocks ---------------------------------------------------- */
section.block { padding: var(--sec-y) 0; }
section.block > .wrap > :last-child, section.block .body > :last-child { margin-bottom: 0; }
.section-more { margin: 20px 0 0; }
section.block > .wrap > :first-child, section.block .body > :first-child { margin-top: 0; }
.center .section-more { text-align: center; }
h2.title { font-size: clamp(26px, 3.1vw, 36px); font-weight: 700; }
.lead { color: var(--muted); max-width: 64ch; font-size: 16px; }
.center h2.title, .center .lead { margin-left: auto; margin-right: auto; }
.creambg { background: var(--cream); }
section[data-surface="cream"] { background: var(--cream); }
section[data-surface="white"] { background: var(--white); }
section[data-surface="soft"] { background: var(--soft); }
.softbg { background: var(--soft); }
.eyebrow { font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--muted); }

/* service cards */
.sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; text-align: left; }
.svc { background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; position: relative; }
.svc:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, .12); transform: translateY(-3px); }
.svc .ph { height: 130px; background-size: cover; background-position: center; }
.svc .ph.svc-no-photo { display: grid; place-items: center; color: var(--amber-dark); background: linear-gradient(135deg, #fff9ec, #f1ece1); }
.svc .ph.svc-no-photo svg { width: 46px; height: 46px; }
.svc .bd { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.svc h3 { font-size: 18px; margin-bottom: 4px; }
.svc .stat { font-size: 13px; color: var(--muted); margin-bottom: 12px; flex: 1; }
.svc .go { font-family: var(--disp); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--amber-dark); }
.svc .go::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc:hover .go { text-decoration: underline; }
.home-services .svc .bd { padding: 14px 16px 17px; }
.home-services .svc h3 { margin-bottom: 6px; font-size: 17px; line-height: 1.1; }
.home-services .svc .stat { margin-bottom: 14px; font-size: 13px; line-height: 1.45; }
.home-services .section-more { margin-top: 24px; }
.home-services .section-more .btn { min-width: 190px; }
@media (max-width: 960px) { .sgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sgrid { grid-template-columns: 1fr; } }

/* The Brake pilot is a decision path, not a migrated long-form article. Keep
   every safety and choice section visible, bounded, and easy to scan. */
.decision-main { width: 100%; max-width: 760px; margin-inline: auto; }
.decision-intro { font-size: 17px; line-height: 1.65; }
.decision-main > section + section,
.decision-main > figure + section { margin-top: 26px; }
.decision-main h2 { margin: 0 0 10px; font-size: clamp(21px, 2.5vw, 28px); }
.decision-safety { padding: 20px 22px; border-left: 4px solid var(--amber); background: #fff8ea; }
.decision-safety-hours { margin: 14px 0 0; font-weight: 600; }
.decision-safety-hours span { display: block; }
.decision-safety-cta { margin-top: 14px; }
.decision-safety-action { min-height: 44px; }
.decision-start { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); }
.decision-start ul { margin: 0; padding-left: 20px; }
.decision-start li + li { margin-top: 7px; }
.decision-step { padding-top: 24px; border-top: 1px solid var(--line); }
.decision-close { padding-top: 26px; border-top: 2px solid var(--ink); }
.decision-close .closer { margin-top: 20px; }
@media (max-width: 760px) {
  .decision-safety, .decision-start { padding: 17px 16px; }
  .decision-main > section + section,
  .decision-main > figure + section { margin-top: 22px; }
}
@media (max-width: 350px) {
  .decision-close .cbtns .btn,
  .decision-close .cbtns .btn-ghost {
    padding-inline: 12px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* full-bleed charcoal call band */
.free { background: var(--charcoal); color: var(--white); --band-fg: #dfe6ec; --band-muted: #9fb0bd; --band-tick-bg: var(--amber); --band-tick-fg: var(--charcoal-900); }
.free .wrap { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; padding: 38px 24px; }
.free h2 { color: var(--white); font-size: clamp(24px, 2.8vw, 32px); margin: 0; }
.free p { margin: 6px 0 0; color: #c6ccd3; font-size: 14.5px; max-width: 70ch; }
@media (max-width: 760px) { .free .wrap { grid-template-columns: 1fr; } }

/* trust columns */
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.tcol { border: 1px solid var(--line); border-top: 5px solid var(--ink); border-radius: 0 0 8px 8px; padding: 24px 22px; text-align: center; background: var(--white); }
.tcol .big { font-family: var(--disp); font-weight: 700; font-size: 30px; color: var(--ink); }
.tcol p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.quote { max-width: 760px; margin: 34px auto 0; text-align: center; }
.quote p { font-size: 17.5px; font-style: italic; color: var(--ink); }
.quote .who { font-family: var(--disp); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: var(--muted); font-weight: 600; }
@media (max-width: 820px) { .tgrid { grid-template-columns: 1fr; } }

/* how it works */
.hgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0 34px; text-align: left; }
.hstep { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 24px 22px; }
.hstep .no { font-family: var(--disp); font-weight: 700; font-size: 38px; color: var(--amber-dark); line-height: 1; }
.hstep h3 { font-size: 17px; margin: 8px 0 4px; }
.hstep p { color: var(--muted); font-size: 14px; margin: 0; }
@media (max-width: 820px) { .hgrid { grid-template-columns: 1fr; } }

/* FAQ */
.faq details { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; background: transparent; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font-family: var(--disp); font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--amber-dark); font-weight: 700; }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 30px 16px 0; color: var(--muted); font-size: 14.5px; }
.faq .a p:last-child { margin-bottom: 0; }

/* meet / feature split */
.meet .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; }
.meet img { border-radius: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); width: 100%; }
.meet .note { font-size: 12px; color: var(--muted); margin-top: 8px; }
@media (max-width: 820px) { .meet .wrap { grid-template-columns: 1fr; } }

/* page hero band - deliberately compact per the owner's title-band ruling */
.phero { background: linear-gradient(100deg, var(--charcoal-900), var(--charcoal-700)); color: var(--white); }
.phero .wrap { padding: 30px 24px 28px; }
.phero .crumb { font-family: var(--disp); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #b9c1c9; margin-bottom: 8px; }
.phero .crumb a:hover { color: var(--amber); }
.phero .eyebrow { color: var(--amber); margin-bottom: 6px; }
.phero h1 { color: var(--white); font-size: clamp(26px, 3.4vw, 40px); max-width: 26ch; margin: 0; }
.phero .psub { margin: 10px 0 0; color: #ccd2d8; font-size: 15.5px; max-width: 64ch; }

/* --- organic A/C service page -------------------------------------------
   A continuous service explanation and a contextual appointment path.  The
   sidebar is sticky only while it has a separate desktop column; on smaller
   screens it becomes part of the reading flow and the adjacent duplicate
   booking action is removed. */
.ac-service-title { border-bottom: 5px solid var(--amber); background: linear-gradient(100deg, var(--charcoal-900), var(--charcoal-700)); color: var(--white); }
.ac-service-title .wrap { padding-top: 44px; padding-bottom: 40px; }
.ac-service-crumb { margin: 0 0 18px; color: #c8ced4; font-family: var(--disp); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ac-service-crumb a { color: #c8ced4; }
.ac-service-crumb a:hover, .ac-service-crumb a:focus-visible { color: var(--amber); }
.ac-service-title h1 { max-width: 24ch; margin: 0; color: var(--white); font-size: 44px; line-height: 1.02; }
.ac-service-content { padding: 58px 0 66px; background: var(--white); }
.ac-service-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 44px; align-items: start; }
.ac-service-grid-single { grid-template-columns: minmax(0,760px); }
.ac-service-article { max-width: 720px; }
.ac-service-intro p { margin: 0 0 23px; color: #353d45; font-size: 16.5px; line-height: 1.72; }
.ac-service-intro p:first-child { color: #242b32; font-size: 18px; line-height: 1.65; }
.editorial-priority-note { margin-top: 31px; padding: 24px 26px 25px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 5px solid var(--amber); background: var(--paper); }
.editorial-priority-note h2 { margin: 0 0 10px; color: var(--ink); font-size: 24px; line-height: 1.16; }
.editorial-priority-note p { margin: 0 0 10px; color: #353d45; font-size: 15.5px; line-height: 1.62; }
.editorial-priority-note .editorial-priority-state { margin-bottom: 0; color: var(--ink); font-weight: 700; }
.editorial-priority-actions { margin-top: 18px; }
.editorial-priority-action { min-height: 48px; }
.ac-service-decision { margin-top: 38px; padding-top: 31px; border-top: 1px solid var(--line); }
.ac-service-decision h2 { max-width: 22ch; margin: 0 0 12px; color: var(--ink); font-size: 31px; line-height: 1.1; }
.ac-service-decision-lead { margin: 0 0 21px; color: #353d45; font-size: 16.5px; line-height: 1.68; }
.ac-service-decision-note { margin: 0 0 24px; padding: 17px 19px; border-left: 4px solid var(--amber); background: var(--paper); }
.ac-service-decision-note strong { display: block; margin-bottom: 5px; color: var(--ink); font-family: var(--disp); font-size: 16px; letter-spacing: .035em; text-transform: uppercase; }
.ac-service-decision-note p { margin: 0; color: #353d45; font-size: 15px; line-height: 1.58; }
.ac-service-decision-list { border-top: 1px solid var(--line); }
.ac-service-decision-row { display: grid; grid-template-columns: minmax(150px,.34fr) minmax(0,.66fr); gap: 24px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.ac-service-decision-row h3 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.16; }
.ac-service-decision-row p { margin: 0; color: #353d45; font-size: 15.5px; line-height: 1.63; }
.ac-service-decision-close { margin: 20px 0 0; color: var(--ink); font-size: 15.5px; font-weight: 700; line-height: 1.6; }
.ac-service-section { margin-top: 39px; }
.ac-service-section h2 { margin: 0 0 13px; color: var(--ink); font-size: 27px; line-height: 1.14; }
.ac-service-services { margin-top: 48px; }
.ac-service-services h2 { margin-bottom: 16px; font-size: 35px; line-height: 1.12; }
.ac-service-section p { margin: 0 0 23px; color: #353d45; font-size: 16.5px; line-height: 1.72; }
.ac-service-section p:last-child { margin-bottom: 0; }
.ac-service-section ul { display: grid; gap: 8px; margin: 8px 0 26px; padding: 0; list-style: none; }
.ac-service-section li { position: relative; padding-left: 24px; color: #353d45; font-size: 16px; line-height: 1.65; }
.ac-service-section li::before { content: ""; position: absolute; top: .72em; left: 0; width: 8px; height: 8px; background: var(--amber); transform: rotate(45deg); }
.ac-service-plain-note { margin-top: 34px; padding: 25px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ac-service-plain-note strong { display: block; margin-bottom: 6px; color: var(--ink); font-family: var(--disp); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.ac-service-plain-note p { margin: 0; color: #353d45; font-size: 16px; line-height: 1.65; }
.ac-service-aside { position: sticky; top: 24px; }
.ac-service-sidecard { padding: 34px 30px 31px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 6px 24px rgba(18,23,29,.07); }
.ac-service-side-rule { display: block; width: 58px; height: 5px; margin-bottom: 22px; background: var(--amber); }
.ac-service-sidecard h2 { margin: 0 0 13px; font-size: 31px; line-height: 1.08; }
.ac-service-sidecard > p { margin: 0 0 20px; color: #414850; font-size: 15px; line-height: 1.7; }
.ac-service-side-action { width: 100%; margin-top: 4px; }
.ac-service-side-action, .ac-service-trust-book, .ac-service-final-action { min-height: 48px; color: var(--ink); }
.ac-service-sidecard ul { display: grid; gap: 17px; margin: 27px 0 0; padding: 23px 0 0; border-top: 1px solid var(--line); list-style: none; }
.ac-service-sidecard li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-family: var(--disp); font-weight: 600; letter-spacing: .04em; line-height: 1.25; text-transform: uppercase; }
.ac-service-sidecard li span { color: var(--amber-dark); font-family: var(--text); font-weight: 700; }
.ac-service-trust { padding: 27px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-alt); }
.ac-service-trust-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.ac-service-trust-row h2 { margin: 0; color: var(--ink); font-size: 20px; line-height: 1.15; }
.ac-service-trust-row p { max-width: 760px; margin: 3px 0 0; color: #414850; font-size: 14px; }
.ac-service-trust-actions { display: flex; gap: 10px; white-space: nowrap; }
.ac-service-trust-call { background: var(--charcoal); color: var(--white); }
.ac-service-trust-call:hover, .ac-service-trust-call:focus-visible { background: var(--charcoal-900); color: var(--white); }
.ac-service-makes { padding: 58px 0 67px; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ac-service-makes h2 { margin: 0 0 12px; font-size: 39px; line-height: 1.08; }
.ac-service-makes-lead { max-width: 820px; margin: 0 0 26px; color: #414850; }
.ac-service-make-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.ac-service-make-item { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-weight: 700; line-height: 1.25; text-decoration: none; }
a.ac-service-make-item:hover, a.ac-service-make-item:focus-visible { border-color: var(--amber); color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.ac-service-make-item.is-featured { border-left: 4px solid var(--amber); }
.ac-service-make-item b { color: var(--amber-dark); font-size: 18px; }
.ac-service-makes-note { max-width: 900px; margin: 22px 0 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.ac-service-make-directory-link { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ac-service-related { padding: 58px 0 67px; background: var(--white); }
.ac-service-kicker { margin: 0 0 5px; color: var(--amber-dark); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.ac-service-related h2, .ac-service-final h2 { margin: 0 0 25px; font-size: 39px; line-height: 1.08; }
.ac-service-related-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.ac-service-related-card { display: flex; min-height: 154px; flex-direction: column; padding: 24px 22px; border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ac-service-related-card:hover, .ac-service-related-card:focus-visible { border-color: var(--amber); color: var(--ink); box-shadow: 0 9px 24px rgba(0,0,0,.06); transform: translateY(-2px); }
.ac-service-related-card strong { font-family: var(--disp); font-size: 22px; line-height: 1.1; letter-spacing: .035em; text-transform: uppercase; }
.ac-service-related-card span { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ac-service-related-card b { margin-top: auto; color: var(--amber-dark); font-size: 13px; }
.ac-service-final { padding: 58px 0; background: var(--charcoal-900); color: var(--white); }
.ac-service-final-row { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.ac-service-final h2 { margin-bottom: 12px; color: var(--white); }
.ac-service-final p { max-width: 690px; margin: 0; color: #ccd2d7; }
.ac-service-final-action { flex: 0 0 auto; }
.ac-service-final-action:hover, .ac-service-final-action:focus-visible { color: var(--ink); }
@media (max-width: 1050px) {
  .ac-service-make-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ac-service-related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .ac-service-grid { grid-template-columns: minmax(0,1fr); }
  .ac-service-article { max-width: 760px; }
  .ac-service-aside { position: static; max-width: 520px; }
}
@media (max-width: 760px) {
  .ac-service-title .wrap { padding-top: 34px; padding-bottom: 32px; }
  .ac-service-crumb { margin-bottom: 13px; font-size: 10.5px; }
  .ac-service-title h1 { font-size: 28px; }
  .ac-service-content { padding: 42px 0 48px; }
  .ac-service-content > .wrap { padding-left: 16px; padding-right: 16px; }
  .ac-service-grid { gap: 43px; }
  .ac-service-intro p { font-size: 16px; }
  .ac-service-intro p:first-child { font-size: 18px; }
  .editorial-priority-note { padding: 21px 20px 22px; }
  .editorial-priority-note h2 { font-size: 22px; }
  .editorial-priority-action { width: 100%; }
  .ac-service-decision { margin-top: 30px; padding-top: 26px; }
  .ac-service-decision h2 { font-size: 27px; }
  .ac-service-decision-row { display: block; padding: 18px 0; }
  .ac-service-decision-row h3 { margin-bottom: 7px; }
  .ac-service-section h2 { font-size: 24px; }
  .ac-service-services h2 { font-size: 30px; }
  .ac-service-section p, .ac-service-section li { font-size: 15.5px; }
  .ac-service-sidecard { padding: 28px 24px; }
  .ac-service-sidecard h2 { font-size: 28px; }
  .ac-service-trust-row, .ac-service-final-row { align-items: flex-start; flex-direction: column; }
  .ac-service-trust-actions { width: 100%; }
  .ac-service-trust-actions .btn { width: 100%; }
  html[data-hs-state="open"] .ac-service-trust-book { display: none; }
  .ac-service-related { padding: 45px 0 51px; }
  .ac-service-makes { padding: 45px 0 51px; }
  .ac-service-makes h2 { font-size: 33px; }
  .ac-service-related h2, .ac-service-final h2 { font-size: 33px; }
  .ac-service-final { padding: 46px 0; }
  .ac-service-final-action { width: 100%; }
}
@media (max-width: 560px) {
  .ac-service-make-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ac-service-related-grid { grid-template-columns: minmax(0,1fr); }
  .ac-service-related-card { min-height: 132px; }
}
@media (max-width: 390px) {
  .ac-service-make-grid { grid-template-columns: minmax(0,1fr); }
}

/* --- repair-or-replace decision guide ----------------------------------
   A quiet editorial shell: no service photo, no generic sidebar and no TOC. */
.decision-guide-hero, .decision-guide-hero[data-surface] { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.decision-guide-hero > .wrap { padding-top: 24px; padding-bottom: 46px; }
.decision-guide-crumb { color: var(--muted); }
.decision-guide-crumb a:hover, .decision-guide-crumb a:focus-visible { color: var(--amber-dark); }
.decision-guide-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 56px; align-items: end; }
.decision-guide-hero-copy .eyebrow, .decision-guide-prompt .caps { color: var(--amber-dark); }
.decision-guide-hero h1 { max-width: 23ch; margin: 8px 0 14px; font-size: clamp(35px, 4.4vw, 54px); line-height: 1.04; text-transform: none; }
.decision-guide-hero-copy > p { max-width: 68ch; margin-bottom: 0; color: var(--muted); font-size: 16px; }
.decision-guide-prompt { padding: 22px 24px; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 7px; background: var(--white); }
.decision-guide-prompt h2 { margin: 7px 0 14px; font-size: 22px; text-transform: none; }
.decision-guide-prompt ul { margin: 0; padding-left: 19px; color: var(--muted); font-size: 14px; }
.decision-guide-prompt li + li { margin-top: 7px; }
.decision-guide-intro { padding: 38px 0 34px; }
.decision-guide-intro[data-surface] { background: var(--white); }
.decision-guide-intro .body { max-width: 72ch; margin-inline: auto; }
.decision-guide-intro p { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.75; }
.decision-guide-content, .decision-guide-content[data-surface] { padding: 50px 0 56px; border-top: 1px solid var(--line); background: var(--cream); }
.decision-guide-path { max-width: 900px; margin-inline: auto; }
.decision-guide-path-head { max-width: 680px; margin-bottom: 26px; }
.decision-guide-path-head .eyebrow, .decision-guide-fork-head .eyebrow, .decision-guide-help > .eyebrow { color: var(--amber-dark); }
.decision-guide-path-head h2 { font-size: clamp(28px, 3.4vw, 39px); text-transform: none; }
.decision-guide-step { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 22px; padding: 30px 0; border-top: 1px solid var(--line); }
.decision-guide-step > span { color: var(--amber-dark); font: 700 18px/1 var(--disp); letter-spacing: .07em; }
.decision-guide-step h2 { margin: 0 0 10px; font-size: 27px; text-transform: none; }
.decision-guide-step p { max-width: 70ch; color: #2b3138; }
.decision-guide-fork { margin: 18px 0 4px; padding: 28px; border-radius: 9px; background: var(--white); box-shadow: 0 12px 28px rgba(13,18,24,.07); }
.decision-guide-fork-head { max-width: 680px; margin-bottom: 22px; }
.decision-guide-fork-head h2 { font-size: 28px; text-transform: none; }
.decision-guide-fork-head p { color: var(--muted); }
.decision-guide-fork-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.decision-guide-fork-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.decision-guide-fork-grid h3 { margin-bottom: 10px; font-size: 22px; text-transform: none; }
.decision-guide-fork-grid p { margin-bottom: 0; color: var(--muted); font-size: 14.5px; }
.decision-guide-help { margin-top: 22px; padding: 30px; border-radius: 9px; background: var(--charcoal); color: var(--white); }
.decision-guide-help > h2 { color: var(--white); font-size: 29px; text-transform: none; }
.decision-guide-help > p { max-width: 70ch; color: #dce2e6; }
.decision-guide-help .closer { margin-bottom: 0; color: var(--ink); }

@media (max-width: 920px) {
  .decision-guide-hero-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .decision-guide-prompt { max-width: 680px; }
}
@media (max-width: 620px) {
  .decision-guide-hero > .wrap { padding-left: 16px; padding-right: 16px; }
  .decision-guide-crumb { margin-bottom: 17px; line-height: 1.4; }
  .decision-guide-hero h1 { font-size: clamp(31px, 9.4vw, 42px); }
  .decision-guide-prompt { padding: 19px 18px; }
  .decision-guide-fork-grid { grid-template-columns: minmax(0,1fr); }
  .decision-guide-hero > .wrap { padding-bottom: 34px; }
  .decision-guide-intro { padding: 30px 0 28px; }
  .decision-guide-intro > .wrap, .decision-guide-content > .wrap { padding-left: 16px; padding-right: 16px; }
  .decision-guide-intro p { font-size: 16.5px; }
  .decision-guide-content { padding: 40px 0 44px; }
  .decision-guide-step { grid-template-columns: 42px minmax(0,1fr); gap: 12px; padding: 25px 0; }
  .decision-guide-step h2 { font-size: 23px; }
  .decision-guide-fork, .decision-guide-help { padding: 21px 18px; }
  .decision-guide-fork-grid article { padding: 18px 16px; }
}

/* article / detail body */
.content { padding: 46px 0 8px; }
.content .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 44px; align-items: start; }
.content .body p { font-size: 16.5px; color: #2b3138; }
.content .body h2 { font-size: 23px; margin-top: 30px; }
.content .body h3 { font-size: 19px; margin-top: 26px; }
.content .body ul, .content .body ol { color: #2b3138; padding-left: 22px; }
.content .body li { margin-bottom: 8px; }

/* Service and vehicle-make detail pages use an editorial reading path rather
   than a stack of interchangeable boxes. This keeps the approved SEO copy in
   the document while making long pages scannable for a customer. */
.detail-content { padding-top: 34px; }
.detail-content .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.detail-main { min-width: 0; }
.detail-intro { padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.detail-intro > :first-child { margin-top: 0; }
.detail-intro > :last-child { margin-bottom: 0; }
.detail-intro p:first-child { max-width: 72ch; color: var(--ink); font-size: 18px; line-height: 1.65; }
.detail-jump { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 0 0 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.detail-jump > span { color: var(--muted); font-family: var(--disp); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.detail-jump a { color: var(--amber-dark); font-size: 13.5px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.detail-jump a:hover, .detail-jump a:focus-visible { color: var(--ink); }
.detail-topic { padding: 26px 0 6px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.detail-topic:first-of-type { border-top: 0; }
.content .body .detail-topic h2 { margin: 0 0 14px; font-size: clamp(22px, 2.2vw, 28px); }
.detail-topic h3 { margin-top: 22px; }
.detail-topic p { max-width: 72ch; }
.detail-topic ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.service-overview { display: grid; grid-template-columns: minmax(180px, .25fr) minmax(0, .75fr); gap: 30px; padding: 0 0 30px; border-bottom: 1px solid var(--line); }
.content .body .service-overview h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); }
.service-overview-heading { padding-top: 3px; }
.service-overview-body { min-width: 0; }
.service-overview-lead { max-width: 76ch; }
.service-overview-lead > :first-child { margin-top: 0; }
.service-overview-lead > :last-child { margin-bottom: 0; }
.content .body .service-overview-lead p { color: var(--ink); font-size: 18px; line-height: 1.65; }
.service-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.service-overview-grid > p { margin: 0; padding: 0 0 20px; max-width: 48ch; }
.service-overview-grid > h2, .service-overview-grid > h3, .service-overview-grid > h4,
.service-overview-grid > ul, .service-overview-grid > ol, .service-overview-grid > table,
.service-overview-grid > blockquote { grid-column: 1 / -1; }
.content .body .service-overview-grid > h2,
.content .body .service-overview-grid > h3 { margin: 8px 0 14px; }
.service-overview-grid > ul, .service-overview-grid > ol { margin-top: 0; }
.service-overview-more { margin-top: 2px; border-top: 1px solid var(--line); }
.service-overview-more summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; color: var(--amber-dark); cursor: pointer; font-family: var(--disp); font-size: 14px; font-weight: 700; letter-spacing: .04em; list-style: none; text-transform: uppercase; }
.service-overview-more summary::-webkit-details-marker { display: none; }
.service-overview-more summary::after { content: "+"; color: var(--amber-dark); font-size: 21px; line-height: 1; }
.service-overview-more[open] summary::after { content: "\2212"; }
.service-overview-more .service-overview-grid { margin-top: 0; padding-top: 20px; }
.service-detail-photo { width: min(100%, 640px); margin: 24px 0 28px; overflow: hidden; border-radius: 8px; background: var(--soft); }
.service-detail-photo img { display: block; width: 100%; height: min(360px, 42vw); min-height: 220px; object-fit: cover; object-position: center; }
.service-detail-photo.brake-photo { width: min(100%, 560px); margin-inline: auto; aspect-ratio: 16 / 9; }
.service-detail-photo.brake-photo img { height: 100%; min-height: 0; }
.detail-content .side { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: stretch; width: 100%; max-width: none; justify-self: stretch; }
.service-detail-content .sidebox { display: flex; flex-direction: column; margin-bottom: 0; }
.service-detail-content .sidebox .b { display: flex; flex: 1; flex-direction: column; }
.service-detail-content .sidebox .b .btn { margin-top: auto; }
.service-detail-content .sidebox .btn-ghost { width: 100%; min-height: 48px; }
.service-detail-reading { margin-top: 32px; padding: 6px 0 34px; background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-detail-reading > .wrap { display: block; }
.service-topic-stack { width: 100%; }
.service-topic { display: grid; grid-template-columns: minmax(210px, .34fr) minmax(0, .66fr); gap: 32px; align-items: start; padding: 30px 0; border-top: 1px solid var(--line); }
.service-topic:first-child { border-top: 0; }
.service-detail-reading .service-topic h2 { margin: 0; max-width: 15ch; font-size: clamp(22px, 2.2vw, 28px); }
.service-topic-copy { min-width: 0; }
.service-topic-copy > :first-child { margin-top: 0; }
.service-topic-copy > :last-child { margin-bottom: 0; }
.service-topic-copy p { max-width: 76ch; }
.service-detail-reading .closer { margin: 12px 0 0; }
@media (max-width: 960px) {
  .service-topic { grid-template-columns: minmax(180px, .3fr) minmax(0, .7fr); gap: 24px; }
}
@media (max-width: 620px) {
  .detail-content { padding-top: 28px; }
  .detail-intro p:first-child { font-size: 16.5px; }
  .detail-jump { display: grid; gap: 7px; }
  .detail-jump > span { margin-bottom: 2px; }
  .detail-topic { padding-top: 22px; }
  .detail-topic ul { grid-template-columns: 1fr; }
  .service-overview { display: block; padding-bottom: 24px; }
  .service-overview h2 { margin-bottom: 14px !important; }
  .content .body .service-overview-lead p { font-size: 16.5px; }
  .service-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 20px; padding-top: 18px; }
  .service-overview-grid > h2, .service-overview-grid > h3, .service-overview-grid > h4,
  .service-overview-grid > ul, .service-overview-grid > ol, .service-overview-grid > table,
  .service-overview-grid > blockquote { grid-column: auto; }
  .service-overview-grid > p { max-width: none; padding-bottom: 16px; }
  .service-detail-photo img { height: 230px; min-height: 0; }
  .detail-content .side { grid-template-columns: minmax(0, 1fr); }
  .service-detail-reading { margin-top: 24px; padding-bottom: 26px; }
  .service-topic { display: block; padding: 24px 0; }
  .service-detail-reading .service-topic h2 { max-width: none; margin-bottom: 14px; }
}
.service-scope-line { border-top: 1px solid var(--line); color: var(--amber-dark); font-family: var(--disp); font-size: 14px; font-weight: 700; letter-spacing: .03em; margin: 14px 0 0; padding-top: 10px; }
/* Scoped to .body, not .content .body: the band-level tables (drive times,
   turnaround) live in a .tablewrap.body outside .content and were rendering
   with no borders, no cell padding and no header fill, so their columns ran
   together. */
.body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.body th, .body td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
.body th { background: var(--soft); font-family: var(--disp); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.body td:first-child, .body th:first-child { white-space: nowrap; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) { .body table { font-size: 13.5px; } .body th, .body td { padding: 8px 9px; } }
.block p a:not(.btn):not(.btn-white):not(.btn-ghost), .block ul a, .block ol a, .body p a:not(.btn):not(.btn-white):not(.btn-ghost), .body li a, ul.symp a { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.block p a:not(.btn):not(.btn-white):not(.btn-ghost):hover, .body p a:not(.btn):not(.btn-white):not(.btn-ghost):hover, .body li a:hover, ul.symp a:hover { color: var(--ink); }
.ilink { color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ilink:hover { color: var(--ink); }
.symp { list-style: none; padding: 0; margin: 20px 0; }
.symp li { padding-left: 20px; position: relative; margin-bottom: 10px; color: var(--band-fg, #333a41); }
.symp.ck li, .symp.x li { padding-left: 30px; }
.symp li::before { content: "\2013"; position: absolute; left: 2px; top: 0; color: var(--band-muted, var(--muted)); font-weight: 700; }
.symp.ck li::before { content: "\2713"; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--band-tick-bg, var(--ink)); color: var(--band-tick-fg, var(--white)); font-size: 11px; display: grid; place-items: center; }
.symp.x li::before { content: "\2717"; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--red); color: var(--white); font-size: 11px; display: grid; place-items: center; }
.closer { background: var(--cream); border-left: 5px solid var(--amber); padding: 16px 20px; border-radius: 0 8px 8px 0; font-weight: 600; color: var(--ink); margin: 26px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px 22px; flex-wrap: wrap; }
.closer .cbtns { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.closer .tellink { color: var(--red); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.closer .tellink:hover { color: var(--red-700); }
.mkquote { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--ink); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 18px 0 26px; }
.mkqk { font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--red); }
.mkquote blockquote { margin: 8px 0 6px; font-size: 15.5px; color: var(--ink); font-style: italic; }
.mkqw { font-family: var(--disp); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

/* sidebar */
.side { position: static; }
.sidebox { background: var(--white); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 18px; box-shadow: 0 10px 26px rgba(0, 0, 0, .06); }
.sidebox .h { background: var(--charcoal); color: var(--white); font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; padding: 12px 18px; }
.sidebox .b { padding: 16px 18px; font-size: 14px; color: var(--muted); }
.sidebox .b p:last-child { margin-bottom: 0; }
.sidebox .b .btn { width: 100%; margin-top: 10px; }
.service-detail-content .sidebox .b .btn { margin-top: auto; }
.sidebox img { width: 100%; height: 150px; object-fit: cover; display: block; }
.sidelist { list-style: none; margin: 0; padding: 0; }
.sidelist li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); }
.sidelist li b { font-weight: 700; }
.sidelist li:last-child { border-bottom: 0; }
.sidelist a { display: block; padding: 9px 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.sidelist a:hover { color: var(--amber-dark); }
.rel { padding: calc(var(--sec-y) - 14px) 0 var(--sec-y); }
.rel h2 { font-size: 24px; }
.relgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
.ogrid.two { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: start; }
@media (max-width: 760px) { .ogrid.two { grid-template-columns: 1fr; } }
.relgrid .svc .ph { height: 110px; }
@media (max-width: 960px) { .content .wrap { grid-template-columns: minmax(0, 1fr); } .side { position: static; } .relgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .relgrid { grid-template-columns: 1fr; } }

/* --- make carousel ----------------------------------------------------- */
.mkcar-shell { position: relative; margin-top: 26px; }
.mkcar-controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.mkcar-controls button { width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); font: 600 28px/1 var(--disp); cursor: pointer; }
.mkcar-controls button:hover, .mkcar-controls button:focus-visible { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.mkcar-controls button:disabled { opacity: .38; cursor: default; background: var(--paper); border-color: var(--line); }
.mkcar { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: thin; padding: 2px 2px 12px; }
.mkcar::-webkit-scrollbar { height: 7px; }
.mkcar::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 999px; }
.mkcar::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 999px; }
.mktrack { display: flex; gap: 16px; width: max-content; }
.mkcard { width: 190px; flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--white); }
.mkcard img { width: 100%; height: 118px; object-fit: cover; }
.mkcard span { display: block; padding: 10px 12px; font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; text-align: center; }
.mkcard:hover span { color: var(--amber-dark); }
@media (max-width: 560px) {
  .mkcar-shell { margin-top: 20px; }
  .mkcard { width: min(74vw, 240px); }
}

/* --- directory grids --------------------------------------------------- */
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.dcard { border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 18px 20px; position: relative; }
.dcard h3 { font-size: 17px; margin-bottom: 6px; }
.dcard p { font-size: 13.5px; color: var(--muted); margin: 0; }
.dcard .go { display: inline-block; margin-top: 10px; font-family: var(--disp); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--amber-dark); }
.dcard .go::after { content: ""; position: absolute; inset: 0; }
.dcard:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .1); }
@media (max-width: 900px) { .dgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dgrid { grid-template-columns: 1fr; } }
.mkgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.mkgrid a { border: 1px solid var(--line); border-radius: 7px; background: var(--white); padding: 12px 14px; font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.mkgrid a:hover { border-color: var(--amber); color: var(--amber-dark); }
@media (max-width: 820px) { .mkgrid { grid-template-columns: 1fr 1fr; } }

/* --- gallery ----------------------------------------------------------- */
.ggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.gfig { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--white); }
.gfig img { width: 100%; height: 230px; object-fit: cover; }
.gfig figcaption { padding: 10px 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .ggrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ggrid { grid-template-columns: 1fr; } .gfig img { height: 200px; } }

/* --- reviews ----------------------------------------------------------- */
.rvgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.rvcard { border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 20px 22px; }
.rvcard blockquote { margin: 0 0 10px; font-style: italic; color: var(--ink); font-size: 15px; }
.rvcard .who { font-family: var(--disp); text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; color: var(--muted); font-weight: 600; }
/* Raw amber on white is 1.83:1. Stars carry the rating, so they use the
   accessible amber instead. */
.stars { color: var(--amber); background: var(--charcoal); letter-spacing: 2px; font-size: 13px; line-height: 1; display: inline-flex; align-items: center; padding: 4px 9px 5px; border-radius: 999px; vertical-align: middle; }
.rvcard .who2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.rvcard .google-review-mark { width: 18px; height: 18px; flex: 0 0 auto; }
.rvcard .who2 b { font-weight: 700; white-space: nowrap; }
.rvcard .rvlink { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; }
.rvcard .rvlink:hover { color: var(--ink); }
.rvminis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 20px; }
.rvmini { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 16px 12px; text-align: center; }
.rvmini b { display: block; font-size: 14px; margin-bottom: 7px; }
.rvplaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.rvplace { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 20px; transition: box-shadow .15s, border-color .15s; }
.rvplace:hover { border-color: var(--amber); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }
.rvplace h3 { font-size: 16.5px; margin-bottom: 6px; }
.rvplace p { font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.rvplace .go { margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--disp); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--amber-dark); }
@media (max-width: 960px) { .rvminis { grid-template-columns: repeat(3, 1fr); } .rvplaces { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rvminis { grid-template-columns: 1fr 1fr; } .rvplaces { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .rvgrid { grid-template-columns: 1fr; } }

/* --- appointment stepper ----------------------------------------------- */
.phero.phero-appointment .wrap { padding: 18px 24px 16px; }
.phero.phero-appointment .crumb { margin-bottom: 4px; line-height: 1; }
.phero.phero-appointment .crumb a { min-height: 0; padding: 0; }
.phero.phero-appointment h1 { max-width: none; font-size: clamp(25px, 2.6vw, 34px); margin-bottom: 0; }
.phero.phero-appointment .psub { max-width: none; margin-top: 6px; font-size: 14px; line-height: 1.35; }
.apwrap { max-width: 1040px; margin: 0 auto; padding: 34px 24px 56px; }
.apintro { max-width: 920px; margin: 0 auto; padding: 0 24px 10px; color: var(--muted); font-size: 14px; line-height: 1.45; text-align: center; }
.apnotice { max-width: 920px; margin: 0 auto 14px; padding: 10px 12px; border-left: 3px solid var(--amber); background: #fff8ea; color: var(--ink); font-size: 13px; line-height: 1.45; }
.aprail { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; margin-bottom: 26px; position: relative; }
.aprail::before { content: ""; position: absolute; left: 8%; right: 8%; top: 15px; height: 2px; background: var(--line); z-index: 0; }
.apcontexts { max-width: 920px; margin: 0 auto 14px; display: grid; gap: 9px; }
.apcontext { margin: 0; padding: 12px 16px; justify-content: flex-start; font-size: 14px; line-height: 1.45; }
.apcontext b { font-family: var(--disp); text-transform: uppercase; letter-spacing: .035em; }
.apcontext-coupon { background: #fff8ea; }
.apcontext-symptom { background: var(--cream); }
.apstep { position: relative; z-index: 1; flex: 1; text-align: center; }
.apdot { width: 32px; height: 32px; margin: 0 auto 7px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); color: var(--muted); font-family: var(--disp); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.apstep.on .apdot { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.apstep.done .apdot { background: var(--ink); border-color: var(--ink); color: var(--white); }
.aplabel { font-family: var(--disp); text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.apstep.on .aplabel { color: var(--ink); }
.apcard { max-width: 920px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .07); padding: 28px 34px 26px; }
.vehicle-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.appane[hidden] { display: none; }
.apnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.apnav.end { justify-content: flex-end; }
.apreview { list-style: none; margin: 0 0 6px; padding: 0; font-size: 14.5px; }
.apreview li { display: flex; gap: 14px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.apreview li[hidden] { display: none; }
.apreview .k { color: var(--muted); font-family: var(--disp); text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
.apreview .v { font-weight: 600; text-align: right; }
.apnote { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.apalert { display: none; border: 1.5px solid var(--red); background: #fdf1f1; color: var(--red-700); border-radius: 6px; padding: 11px 14px; font-size: 14px; margin-bottom: 14px; }
.apalert.on { display: block; }
.apreassurances { max-width: 920px; margin: 0 auto 68px; padding: 0 24px; display: flex; flex-direction: column; gap: 18px; }
.apreassurance { padding: 0 0 16px; border-bottom: 1px solid var(--line-soft); }
.apreassurance:last-child { border-bottom: 0; padding-bottom: 0; }
.apreassurance h3 { margin: 0 0 4px; font-size: 16px; }
.apreassurance p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ac-noscript { margin: 14px 0 0; padding: 12px 14px; border-left: 4px solid var(--amber); background: #fff8e8; color: var(--ink); font-weight: 700; line-height: 1.45; }
@media (max-width: 620px) { .aplabel { font-size: 10.5px; } .apcard { padding: 20px 18px 18px; } .vehicle-row { grid-template-columns: 1fr; } }
/* At 375 the nested padding of wrap + card left only 241px of content, so
   the contact-preference legend wrapped and its pills stacked oddly. The
   card keeps its shape; the gutters give the form back its width. */
@media (max-width: 430px) {
  .phero.phero-appointment .wrap { padding: 12px 16px 14px; }
  .phero.phero-appointment h1 { font-size: clamp(23px, 7vw, 30px); line-height: 1.03; }
  .phero.phero-appointment .psub { margin-top: 5px; font-size: 13.5px; line-height: 1.3; }
  .apwrap { padding: 22px 12px 44px; }
  .apcard { padding: 18px 14px 16px; }
  .apcard fieldset.fldwrap { padding: 0; }
  .apintro { padding-left: 12px; padding-right: 12px; }
  .apreassurances { padding-left: 12px; padding-right: 12px; margin-bottom: 54px; }
}

/* --- symptom checker (ported from the upstream reference implementation) ---------- */
.wz { background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .08); overflow: hidden; }
.wzhd { background: var(--charcoal); color: var(--white); padding: 16px 22px; }
.wzhd .k { font-family: var(--disp); text-transform: uppercase; letter-spacing: .09em; font-size: 12px; color: var(--amber); }
.wzhd h2, .wzhd h3, .wzhd .wzq { color: var(--white); margin: 4px 0 0; font-size: 19px; }
.wzbd { padding: 20px 22px 22px; }
.wzq { font-family: var(--disp); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; margin: 0 0 14px; color: var(--ink); }
/* Owner ruling 8-25 (174): Step 1 category labels are all caps; Step 2
   choices stay normal case. Both steps share .wzopt, so the step is told
   apart by its container. The homepage entry uses the same Step 1 voice. */
#wzgrid .wzopt, .home-symptom-link { text-transform: uppercase; letter-spacing: .03em; }
.wzopts .wzopt { text-transform: none; letter-spacing: 0; }
.symptom-entry-grid .wzopt { text-transform: uppercase; letter-spacing: .03em; }
.wzopts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wzopt { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; background: var(--white); border: 1.5px solid var(--line); border-radius: 8px; padding: 13px 15px; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--ink); cursor: pointer; min-height: 52px; transition: border-color .14s, background .14s, transform .12s; }
.wzopt:hover { border-color: var(--amber); background: #fffaf0; transform: translateY(-1px); }
.wzopt .ic { width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted); }
.wzopt:hover .ic { color: var(--amber-dark); }
.wzopt .sub { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.wzback { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 6px 0; margin-bottom: 8px; font-weight: 700; font-size: 13.5px; color: var(--amber-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-family: inherit; }
.wzback:hover { color: var(--ink); }
.wzcrumb { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.wzpane[hidden] { display: none; }
/* The result card is the upstream anatomy: a bordered card whose top edge
   carries the verdict. Amber for a routine finding, red with a light tint
   when the outcome asks the driver to take it seriously. */
.wzres { border: 1.5px solid var(--line); border-top: 6px solid var(--amber); border-radius: 10px; background: var(--white); padding: 22px; margin: 14px 0 4px; }
.wzres.urgent { border-top-color: var(--red); background: #fdf6f5; }
.wzres h3 { font-size: 19px; margin: 0 0 8px; }
.wzres .lead2 { margin: 0 0 8px; }
.wzres .wzguidance { margin: 10px 0 14px; font-weight: 700; }
/* Step 2 is a single-column list of outcomes, the way the upstream renders it. */
.wzopts.wzlisted { grid-template-columns: 1fr; }
.wzopts.wzlisted .wzopt { min-height: 48px; }
.wzacts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.wzline { margin: 16px 0 6px; font-size: 14.5px; }
@media (max-width: 620px) { .wzopts { grid-template-columns: 1fr; } }
.symptom-checker-page .body { margin-bottom: 30px; }

/* --- thank-you --------------------------------------------------------- */
.tybox { max-width: 920px; margin: 0 auto; }
.tygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 6px; }
.tyitem { border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 14px 16px; }
.tyitem[hidden] { display: none; }
.tyitem .k { font-family: var(--disp); text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; color: var(--muted); display: block; margin-bottom: 3px; }
.tyitem .v { font-weight: 600; font-size: 15px; }
.ty-contact, .ty-note, .ty-context-card, .tyvisit { border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 18px; }
.ty-contact { border-left: 5px solid var(--amber); margin-bottom: 16px; }
.ty-contact .k, .ty-note .k, .ty-context-card .k { display: block; color: var(--muted); font-family: var(--disp); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.ty-contact p, .ty-note p, .ty-context-card p { margin: 0; }
.ty-context-card { margin-top: 14px; }
.ty-context-card h3 { margin: 2px 0 8px; font-size: 20px; }
.ty-context-card .ty-context-kicker { color: var(--amber-dark); font-family: var(--disp); font-size: 13px; letter-spacing: .04em; margin-bottom: 7px; text-transform: uppercase; }
.ty-context-card .ilink { display: inline-block; margin-top: 10px; }
.ty-note { margin-top: 14px; white-space: pre-wrap; }
.ty-not-confirmed { background: var(--cream); border-left: 4px solid var(--amber); margin: 20px 0; padding: 14px 16px; font-weight: 700; }
.ty-useful-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ty-useful-links .btn-ghost { min-height: 44px; display: inline-flex; align-items: center; }
.tyvisit { margin-top: 26px; background: var(--cream); }
.tyvisit .title { margin-bottom: 8px; }
.tyvisit > p { margin: 8px 0; }
.tyhours { list-style: none; margin: 14px 0; padding: 0; max-width: 520px; }
.tyhours li { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.tyvisit .cbtns { justify-content: flex-start; margin-top: 14px; }
.tysteps { counter-reset: ty; list-style: none; padding: 0; margin: 18px 0 0; }
.tysteps li { position: relative; padding-left: 38px; margin-bottom: 14px; }
.tysteps li::before { counter-increment: ty; content: counter(ty); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--white); font-family: var(--disp); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
@media (max-width: 620px) {
  .tygrid { grid-template-columns: 1fr; }
  .ty-contact, .ty-note, .ty-context-card, .tyvisit { padding: 15px; }
  .ty-useful-links { flex-direction: column; }
  .ty-useful-links .btn-ghost { width: 100%; justify-content: center; }
  .tyhours li { align-items: flex-start; flex-direction: column; gap: 2px; }
}

/* --- footer ------------------------------------------------------------ */
.ft { background: var(--charcoal); color: #b6bec6; padding: 28px 0 14px; font-size: 14px; }
.ft2 { display: grid; grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ft a { text-decoration: none; }
.ft h3 { font-family: var(--disp); color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 9px; padding-bottom: 7px; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.ft h3 a { color: var(--white); }
.ft h3 a:hover, .ft a:hover { color: var(--amber); }
.ft .lg { flex: 0 0 auto; }
.ft .lg img { height: 44px; width: auto; object-fit: contain; margin-bottom: 12px; }
.ft ul { list-style: none; padding: 0; margin: 0; line-height: 1.55; }
.ft ul.ftlist { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.ft ul.ftquick, .ft ul.ftmakes, .ft ul.ftareas { column-count: 2; column-gap: 16px; }
.ft ul.ftquick li, .ft ul.ftmakes li, .ft ul.ftareas li { break-inside: avoid; }
.ft ul.ftlist a { color: #b6bec6; font-size: 12.5px; }
.ftbrand p { color: #96a0aa; font-size: 12.5px; line-height: 1.5; margin: 0 0 10px; }
.ftaddr { display: block; color: #b6bec6; font-size: 12.5px; line-height: 1.45; margin: 0 0 8px; border-bottom: 1px dotted #55606b; width: fit-content; }
.fthours { color: #96a0aa; font-size: 12.5px; line-height: 1.6; margin-bottom: 2px; }
.ftbrand h3 { margin-top: 14px; }
.ft .bot { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 16px; padding-top: 10px; color: #8590a0; font-size: 12.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ft .bot a { color: #8590a0; }
.ft .bot a:hover { color: var(--amber); }
@media (max-width: 900px) { .ft2 { grid-template-columns: 1fr 1fr; } .ft2 ul.ftmakes { column-count: 2; column-gap: 22px; } .ft2 ul.ftmakes li { break-inside: avoid; } }
@media (max-width: 520px) { .ft2 { grid-template-columns: 1fr; } .ftbtop { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ftbtop .lg { flex: 0 0 auto; } .ftbtop .lg img { margin-bottom: 0; } .ftbtop p { flex: 1; margin: 0; } .ft .bot { flex-direction: column; align-items: center; text-align: center; gap: 6px; } }

/* Make links are a deliberate compact grid, not browser column flow. Two
   wide desktop columns keep the full authority readable without collisions. */
.ft ul.ftmakes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-count: initial; column-gap: 20px; row-gap: 3px; }
/* The makes column needs enough width for names such as Mercedes-Benz and
   Land Rover / Range Rover. Giving that column a real desktop allocation and
   using two readable columns prevents adjacent links from visually joining. */
@media (min-width: 1100px) {
    .ft2 { grid-template-columns: minmax(210px, 1.15fr) minmax(145px, .85fr) minmax(145px, .85fr) minmax(340px, 1.55fr) minmax(135px, .75fr); }
  .ft ul.ftmakes { column-gap: 20px; row-gap: 3px; }
  .ft ul.ftmakes a { white-space: nowrap; }
}
@media (max-width: 1099px) { .ft2 { grid-template-columns: 1fr 1fr; } .ft2 ul.ftmakes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-count: initial; column-gap: 22px; row-gap: 2px; } }
@media (max-width: 520px) { .ft2 { grid-template-columns: 1fr; } .ft2 ul.ftmakes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-count: initial; column-gap: 16px; } }

.ftquick-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 18px; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ftquick-strip h3 { margin: 0; white-space: nowrap; }
.ftquick-strip ul.ftquick { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-count: initial; columns: auto; column-gap: 12px; row-gap: 2px; }
@media (max-width: 900px) { .ftquick-strip { grid-template-columns: 1fr; gap: 6px; } .ftquick-strip ul.ftquick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ftquick-strip ul.ftquick { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } }

@media (max-width: 430px) {
  .phero.phero-appointment-es .wrap { padding-top: 8px; padding-bottom: 10px; }
  .phero.phero-appointment-es .psub { margin-top: 3px; line-height: 1.24; }
  #gz-funnel .wtabs { display: flex; }
  #gz-funnel .wtab { min-height: 48px; padding-left: 7px; padding-right: 7px; font-size: 12px; }
  #gz-funnel .wzopts { grid-template-columns: 1fr; }
  .ticket-actions a { font-size: 10.5px; padding-left: 3px; padding-right: 3px; }
}

/* --- misc -------------------------------------------------------------- */
.tellink { color: inherit; white-space: nowrap; }
.tellink:hover { color: var(--amber-dark); }
.notefoot { font-size: 12.5px; color: var(--muted); }
.err404 { text-align: center; padding: 70px 24px 80px; }
.err404 h1 { font-size: clamp(30px, 5vw, 54px); }
@media print { .hd, .mpanel, .rib, .shop { display: none !important; } }

/* --- mega menu variant used by the reviews panel ----------------------- */
/* mega2 panels carry prose (review quotes, brand blurbs); they must not
   inherit the nav's uppercase. The upstream ships this exact reset. */
.mega2 { text-transform: none; letter-spacing: normal; font-weight: 400; }
.mega2 .mh { font-family: var(--disp); text-transform: uppercase; font-weight: 700; font-size: 17px; letter-spacing: .05em; color: var(--ink); margin-bottom: 10px; }
.mega2 .mrevs blockquote { font-size: 14px; }
.mega2 .mrevs cite { text-transform: none; letter-spacing: normal; font-family: var(--text); font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* --- footer service column -------------------------------------------- */
.ft h3.mt { margin-top: 18px; }
.ftquick-strip h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.ft .ftlist a.ftall { color: var(--amber); font-weight: 600; }
.ft .ftlist a.ftall:hover { color: var(--white); }
.ft .ftlist a { color: #c2cbd3; text-decoration: none; }
.ft .ftlist a:hover, .ft .ftlist a:focus-visible { color: var(--amber); text-decoration: none; }

/* --- comparison grid ---------------------------------------------------- */
.cmpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.cmpcol { border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; background: var(--soft); }
.cmpcol h3 { font-size: 16px; letter-spacing: .05em; color: var(--muted); }
.cmpus { background: var(--white); border-color: var(--amber); }
.cmpus h3 { color: var(--ink); }
.cmprow { display: block; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.cmprow:last-child { border-bottom: 0; }
.cmpk { display: block; font-family: var(--disp); text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.cmpv { display: block; font-size: 14.5px; color: var(--ink); }
.cmpother .cmpv { color: var(--muted); }
.cmpus .cmpv { font-weight: 600; }
@media (max-width: 760px) { .cmpgrid { grid-template-columns: 1fr; } }

/* --- symptom checker: result card and the no-JS directory --------------- */
.wzres.urgent { border-top: 4px solid var(--red); }
.wzres .lead2 { font-size: 16px; margin: 0 0 10px; }
.wzguidance { margin: 10px 0 14px; font-weight: 700; }
.wzhedge { font-size: 13px; color: var(--muted); margin: 10px 0 14px; }
.wzoffer { display: block; margin: 14px 0 0; background: var(--cream); border: 1px dashed var(--amber); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wzoffer span { color: var(--amber-dark); }
.wzoffer:hover { border-color: var(--ink); }
.wzcat h3 { margin: 26px 0 6px; font-size: 18px; }
.wzlist { list-style: none; padding: 0; margin: 0 0 8px; }
.wzlist li { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.wzlist a { color: var(--amber-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.wzlist a:hover { color: var(--ink); }
.wzp { display: block; color: var(--muted); font-size: 14px; }
.wzflag { display: inline-block; font-family: var(--disp); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--white); background: var(--red); border-radius: 4px; padding: 2px 7px; margin-left: 6px; }
#wizdir[hidden] { display: none; }

/* --- touch targets ------------------------------------------------------
   Contact actions and standalone links get a full target on a phone. Ordinary
   footer navigation deliberately keeps its compact rows, per the owner's
   footer-density ruling; only the contact actions are enlarged. */
@media (max-width: 760px) {
  .rib a,
  .shop .shop-phone .tellink,
  .ftaddr,
  .fthours a,
  .phero .crumb a,
  .closer .tellink,
  .sidelist a { display: inline-flex; align-items: center; min-height: 44px; }
  /* The language switch lives here, so the bottom bar keeps full targets even
     though the footer columns stay deliberately compact. */
  .ft .bot a { display: inline-flex; align-items: center; min-height: 44px; }
  .ft .bot { gap: 2px; }
  .phero .crumb { line-height: 1.1; }
  /* "Read more" measured 21px tall, the only target that was materially short
     rather than two pixels under. Inline-flex plus a min-height grows the hit
     area without moving the label or reflowing the card. */
  .svc .go,
  .dcard .go,
  .art .go { display: inline-flex; align-items: center; min-height: 44px; }
  .logo { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  /* The verified Google Maps address remains an obvious, full-size tap target
     in the first row; the header still owns the only phone/booking action. */
  .shop .shop-address .tellink { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}

/* --- paid A/C search lander ------------------------------------------- */
.paid-ac-hero {
  color: var(--white);
  background-color: var(--ink);
  background-position: center;
  background-size: cover;
  position: relative;
  isolation: isolate;
}
.paid-ac-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13,18,24,.96), rgba(13,18,24,.78) 50%, rgba(13,18,24,.52));
  z-index: -1;
}
.paid-ac-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(390px,.82fr);
  gap: 52px;
  max-width: 1180px;
  padding-top: 64px;
  padding-bottom: 64px;
  align-items: center;
}
.paid-ac-copy { max-width: 650px; }
.paid-ac-hero .eyebrow { color: var(--amber); }
.paid-ac-copy h1 { max-width: 20ch; color: var(--white); }
.paid-ac-lead { max-width: 62ch; font-size: 18px; color: #f4f1ea; }
.paid-ac-proofs { list-style: none; padding: 0; margin: 26px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 20px; }
.paid-ac-proofs li { display: flex; gap: 9px; align-items: flex-start; color: #fff; font-size: 14px; }
.paid-ac-proofs li span { color: #ffb020; font-weight: 800; }
.paid-ac-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.paid-ac-form-card { background: var(--paper); color: var(--ink); border-radius: 10px; padding: 26px; box-shadow: 0 18px 48px rgba(0,0,0,.24); }
.paid-ac-form-card h2 { margin: 0 0 6px; color: var(--ink); }
.paid-ac-form-lead { color: var(--muted); margin: 0 0 18px; }
.paid-ac-form { position: relative; }
.ac-progress { display: flex; gap: 8px; margin: 0 0 18px; }
.ac-progress span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font-weight: 800; font-size: 12px; }
.ac-progress span.on, .ac-progress span.done { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.ac-step[hidden] { display: none !important; }
.ac-step .row { margin-top: 0; }
.ac-step .fldwrap { min-width: 0; }
.ac-step .fldwrap[data-ac-other-wrap][hidden] { display: none !important; }
.ac-step .fldnote { min-height: 1.15em; display: block; font-size: 12px; line-height: 1.25; color: #a32626; }
.ac-step .fldnote:empty { visibility: hidden; }
.ac-step .fld.has-error, .ac-step select[aria-invalid="true"] { border-color: #a32626; }
.ac-date-note { margin: 0 0 14px; padding: 9px 11px; border-left: 3px solid var(--amber-dark); background: var(--paper-alt); color: var(--muted); font-size: 13px; }
.ac-date-helper { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }
.ac-selected-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-left: 3px solid var(--amber-dark); background: var(--paper-alt); padding: 4px 8px; margin-bottom: 14px; font-size: 13px; }
.ac-selected-summary[hidden] { display: none !important; }
.ac-selected-summary button { background: transparent; color: var(--amber-dark); text-decoration: underline; border: 0; padding: 4px 0; cursor: pointer; }
.ac-soft-action { border: 0; border-radius: 7px; padding: 12px 18px; font-weight: 800; cursor: pointer; background: #c3c9c6; color: #39413d; }
.ac-soft-action[data-ready="true"], .ac-soft-action.is-ready { background: #1fd66a; color: #03211a; }
.ac-soft-action:focus-visible, .ac-selected-summary button:focus-visible, .ac-symptom-card button:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.ac-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.ac-alert { min-height: 0; margin-bottom: 0; }
.ac-alert.on { padding: 10px 12px; margin-bottom: 14px; background: var(--paper-alt); border-left: 3px solid var(--amber-dark); }
.paid-ac-price-bridge { background: var(--paper-alt); }
.paid-ac-price-bridge .body { max-width: 70ch; }
.paid-ac-symptoms .section-head { display: block; }
.ac-symptom-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.ac-symptom-card { border-bottom: 1px solid var(--line); padding: 0 0 12px; }
.ac-symptom-card > button { width: 100%; min-height: 48px; text-align: left; border: 1px solid var(--line); border-radius: 7px; background: var(--white); color: var(--ink); padding: 12px 14px; font-weight: 800; cursor: pointer; }
.ac-symptom-card > button:hover, .ac-symptom-card > button.on { border-color: var(--amber-dark); color: var(--amber-dark); }
.ac-symptom-result { display: none; padding: 10px 4px 0; color: var(--muted); font-size: 14px; }
.ac-symptom-result.on { display: block; }
.ac-symptom-result p { margin: 0 0 7px; }
.paid-ac-process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 22px; }
.paid-ac-process-grid article { padding: 22px 18px; border-right: 1px solid var(--line); }
.paid-ac-process-grid article:last-child { border-right: 0; }
.paid-ac-process-grid b { color: var(--amber-dark); font-family: var(--disp); letter-spacing: .08em; }
.paid-ac-process-grid p { margin: 8px 0 0; color: var(--muted); }
.paid-ac-proof-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.8fr); gap: 42px; align-items: center; }
.paid-ac-proof-grid img { width: 100%; height: auto; border-radius: 8px; }
.paid-ac-cause-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); margin-top: 22px; }
.paid-ac-cause-grid article { padding: 22px 18px; border-right: 1px solid rgba(255,255,255,.2); }
.paid-ac-cause-grid article:last-child { border-right: 0; }
.paid-ac-cause-grid h3 { color: var(--white); }
.paid-ac-cause-grid p { color: #f4f1ea; }
.paid-ac-summer .body { max-width: 70ch; }
.dark-band { background: var(--ink); color: var(--white); }
.dark-band .eyebrow { color: var(--amber); }
.dark-band h2, .dark-band h3 { color: var(--white); }
.dark-band p, .dark-band li { color: #f4f1ea; }
.dark-band a { color: var(--amber); }
.dark-band a:hover, .dark-band a:focus-visible { color: var(--white); }
.dark-band .paid-ac-cause-grid { border-color: rgba(255,255,255,.24); }
.dark-band .paid-ac-cause-grid article { border-color: rgba(255,255,255,.24); }
@media (max-width: 920px) {
  .paid-ac-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 46px; padding-bottom: 46px; }
  .paid-ac-copy { max-width: 760px; }
  .paid-ac-form-card { max-width: 680px; }
  .paid-ac-proof-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .paid-ac-hero { background-image: none !important; }
  .paid-ac-hero::before { background: var(--ink); }
  .paid-ac-hero-grid { padding-top: 34px; padding-bottom: 34px; }
  .paid-ac-copy h1 { font-size: clamp(34px, 11vw, 52px); }
  .paid-ac-lead { font-size: 16px; }
  .paid-ac-proofs { grid-template-columns: 1fr; gap: 8px; }
  .paid-ac-call { display: none !important; }
  .paid-ac-actions .btn, .paid-ac-actions a { width: 100%; text-align: center; }
  .paid-ac-form-card { padding: 18px; }
  .paid-ac-form input, .paid-ac-form select, .paid-ac-form textarea { font-size: 16px; }
  .paid-ac-form .vehicle-row { grid-template-columns: 1fr; }
  .ac-symptom-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .ac-symptom-card > button { min-height: 46px; padding: 10px; font-size: 13px; }
  .paid-ac-process-grid, .paid-ac-cause-grid { grid-template-columns: 1fr; }
  .paid-ac-process-grid article, .paid-ac-cause-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .paid-ac-cause-grid article { border-bottom-color: rgba(255,255,255,.2); }
  .paid-ac-process-grid article:last-child, .paid-ac-cause-grid article:last-child { border-bottom: 0; }
  .ac-actions { justify-content: stretch; }
  .ac-actions > * { flex: 1; text-align: center; }
}
@media (max-width: 430px) {
  .paid-ac-hero-grid { padding-left: 16px; padding-right: 16px; }
  .paid-ac-form-card { padding: 14px; }
  .ac-symptom-grid { gap: 6px; }
  .ac-symptom-card > button { font-size: 12.5px; }
}

/* --- clean-slate paid Search system -----------------------------------
   BMW, Mercedes-Benz, and A/C share one focused conversion language. The
   organic mega-navigation and five-column footer deliberately stay out of
   these noindex paths, while the real shop identity, hours, phone, Spanish
   switch, and verified form runtime remain intact. */
.paid-search-page { background: var(--white); color: var(--ink); }
.paid-search-page .ad-mobile-lang { display: none; }
.ad-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.ad-head-row { max-width: 1180px; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 10px; padding-bottom: 10px; }
.ad-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ad-logo img { display: block; width: 220px; max-width: 100%; height: auto; object-fit: contain; }
.ad-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.ad-head-phone .tellink { color: var(--ink); font-family: var(--disp); font-weight: 700; letter-spacing: .03em; }
.ad-head-phone .tellink:hover { color: var(--amber-dark); }
html:not([data-hs-state="open"]) .paid-search-page .ad-head-request { display: none; }
.ad-lang, .ad-footer-lang { color: var(--amber-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ad-head-request { white-space: nowrap; }
.paid-search-page > .shop .wrap { max-width: 1180px; }
.paid-search-page > .shop .shop-phone:empty { display: none; }
.ad-footer { background: var(--charcoal); color: #c2cbd3; padding: 30px 0 14px; font-size: 13px; }
.ad-footer-grid { display: grid; grid-template-columns: 1.4fr .7fr 1.5fr auto; gap: 26px; align-items: start; }
.ad-footer b { display: block; color: var(--white); font-family: var(--disp); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.ad-footer p { margin: 0; color: #c2cbd3; line-height: 1.55; }
.ad-footer a { color: #c2cbd3; }
.ad-footer a:hover { color: var(--amber); background-color: var(--charcoal); }
.ad-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ad-footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 20px; padding-top: 12px; color: #8f99a4; }

.paid-landing-hero { position: relative; isolation: isolate; color: var(--white); background-color: var(--ink); background-size: cover; background-position: center; }
.paid-landing-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13,18,24,.97) 0%, rgba(13,18,24,.89) 43%, rgba(13,18,24,.65) 72%, rgba(13,18,24,.52) 100%); }
.ad-hero-grid { max-width: 1180px; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(390px,.82fr); gap: 48px; align-items: center; padding-top: 58px; padding-bottom: 58px; }
.ad-hero-copy { max-width: 650px; }
.paid-landing-hero .eyebrow { color: var(--amber); }
.paid-landing-hero h1 { max-width: 18ch; margin: 8px 0 16px; color: var(--white); font-size: clamp(42px,4.7vw,68px); line-height: .98; }
.ad-hero-lead { max-width: 60ch; margin: 0; color: #f4f1ea; font-size: 17.5px; line-height: 1.6; }
.ad-hero-proofs { list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 20px; margin: 25px 0; padding: 0; }
.ad-hero-proofs li { display: flex; align-items: flex-start; gap: 9px; color: var(--white); font-size: 13.5px; line-height: 1.45; }
.paid-landing-hero .ad-hero-proofs li span { color: var(--amber); font-weight: 800; }
.ad-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.paid-landing-hero .ad-call { color: var(--white); border-color: rgba(255,255,255,.82); background: rgba(13,18,24,.26); }
.paid-landing-hero .ad-call:hover { color: var(--ink); border-color: var(--white); background: var(--white); }
.ad-form-card { min-width: 0; border-radius: 10px; background: var(--paper); color: var(--ink); padding: 25px 27px 27px; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.ad-form-card > .eyebrow { color: var(--amber-dark); }
.ad-form-card > h2 { margin: 5px 0 6px; color: var(--ink); font-size: 25px; line-height: 1.04; }
.ad-form-card > p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ad-callback-form .fldwrap, .ad-ac-form-card .fldwrap { margin-bottom: 11px; }
.ad-callback-form .fldwrap label, .ad-ac-form-card .fldwrap label { margin-bottom: 5px; font-size: 11.5px; }
.ad-callback-form input, .ad-callback-form textarea, .ad-ac-form-card input, .ad-ac-form-card select, .ad-ac-form-card textarea { min-height: 48px; padding: 11px 13px; }
.ad-callback-form textarea, .ad-ac-form-card textarea { min-height: 86px; }
.ad-form-submit { width: 100%; margin-top: 3px; }
.ad-form-note { margin: 9px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }

.ad-proof-strip { border-bottom: 1px solid var(--line); background: var(--paper); }
.ad-proof-grid { max-width: 1180px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.ad-proof-grid article { min-width: 0; padding: 20px 22px; border-right: 1px solid var(--line); }
.ad-proof-grid article:first-child { padding-left: 0; }
.ad-proof-grid article:last-child { padding-right: 0; border-right: 0; }
.ad-proof-grid strong { display: block; color: var(--amber-dark); font-family: var(--disp); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.ad-proof-grid span { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ad-concerns .section-head { max-width: 780px; }
.ad-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ad-card-grid article { padding: 22px 23px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ad-card-grid article:nth-child(3n) { border-right: 0; }
.ad-card-grid article:nth-last-child(-n+3) { border-bottom: 0; }
.ad-card-grid h3 { margin: 0 0 7px; font-size: 16px; }
.ad-card-grid p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.ad-process .title { max-width: 22ch; }
.ad-process-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 24px; }
.ad-process-grid article { border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 20px; }
.ad-process-grid .ad-step { color: var(--amber-dark); font-family: var(--disp); font-size: 34px; font-weight: 700; line-height: 1; }
.ad-process-grid h3 { margin: 8px 0 5px; font-size: 15px; }
.ad-process-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ad-evidence-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr); gap: 44px; align-items: center; }
.ad-evidence .section-head { max-width: 620px; }
.ad-evidence figure { margin: 0; overflow: hidden; border-radius: 9px; }
.ad-evidence figure img { display: block; width: 100%; aspect-ratio: 19/12; object-fit: cover; }
.ad-price-band { background: var(--charcoal); color: var(--white); }
.ad-price-row { max-width: 1180px; min-height: 164px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 42px; padding-top: 28px; padding-bottom: 28px; }
.ad-price-band .eyebrow { color: var(--amber); }
.ad-price-band h2 { margin: 4px 0 5px; color: var(--white); font-size: 27px; }
.ad-price-band p { max-width: 72ch; margin: 0; color: #d5dbe0; font-size: 13.5px; line-height: 1.55; }
.ad-price-band strong { max-width: 340px; color: var(--amber); font-family: var(--disp); font-size: clamp(24px,3.1vw,40px); line-height: 1.05; text-align: right; }
.ad-reviews { background: var(--white); }
.paid-search-page .faq { max-width: 920px; }
.paid-ac-reviews-link { margin: 20px 0 0; text-align: center; }
.paid-ac-reviews-link .btn-ghost { display: inline-flex; }
.paid-search-page .paid-ac-faq {
  width: min(920px, calc(100% - 32px));
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.paid-search-page .paid-ac-faq > .wrap {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.ad-final { background: var(--amber); color: var(--ink); }
.ad-final-row { max-width: 1180px; min-height: 178px; display: flex; align-items: center; justify-content: space-between; gap: 34px; padding-top: 30px; padding-bottom: 30px; }
.ad-final h2 { margin: 0 0 5px; color: var(--ink); }
.ad-final p { max-width: 70ch; margin: 0; color: #2d2d2d; }
.ad-final .btn { flex: 0 0 auto; background: var(--ink); color: var(--white); }
.ad-final .btn:hover { background: var(--white); color: var(--ink); }
.ad-ac-symptoms { background: var(--paper); }
.ad-ac-symptoms .section-head { max-width: 780px; }
.ad-ac-symptoms .ac-symptom-card { border-bottom: 0; }
.ad-ac-symptoms .ac-symptom-card > button { min-height: 52px; }
.ad-ac-form-card .paid-ac-form { margin-top: 4px; }

@media (max-width: 1000px) {
  .ad-head-row { min-height: 70px; }
  .ad-head-request { display: none; }
  .ad-hero-grid { grid-template-columns: 1fr; gap: 30px; padding-top: 46px; padding-bottom: 46px; }
  .ad-hero-copy { max-width: 760px; }
  .ad-form-card { max-width: 720px; }
  .ad-proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ad-proof-grid article:nth-child(2) { border-right: 0; }
  .ad-proof-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ad-proof-grid article:nth-child(3) { padding-left: 0; }
  .ad-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ad-card-grid article:nth-child(3n) { border-right: 1px solid var(--line); }
  .ad-card-grid article:nth-child(2n) { border-right: 0; }
  .ad-card-grid article:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .ad-card-grid article:nth-last-child(-n+2) { border-bottom: 0; }
  .ad-process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ad-evidence-grid { grid-template-columns: 1fr; }
  .ad-evidence figure { max-width: 760px; }
  .ad-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .ad-head-row { padding-left: 16px; padding-right: 16px; }
  .ad-logo img { width: 170px; }
  .ad-head-actions { gap: 10px; }
  .ad-head-phone { font-size: 12px; }
  .ad-lang { font-size: 12px; }
  .paid-landing-hero { background-image: none !important; }
  .paid-landing-hero::before { background: var(--ink); }
  .ad-hero-grid { padding: 34px 16px; }
  .paid-landing-hero h1 { font-size: clamp(36px,11vw,52px); }
  .ad-hero-lead { font-size: 16px; }
  .ad-hero-proofs { grid-template-columns: 1fr; gap: 7px; }
  .ad-hero-actions > * { flex: 1; text-align: center; }
  .ad-form-card { padding: 20px 17px; }
  .ad-callback-form input, .ad-callback-form textarea, .ad-ac-form-card input, .ad-ac-form-card select, .ad-ac-form-card textarea { font-size: 16px; }
  .ad-proof-grid, .ad-card-grid, .ad-process-grid { grid-template-columns: 1fr; }
  .ad-proof-grid article { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .ad-proof-grid article:nth-child(2) { border-bottom: 1px solid var(--line); }
  .ad-proof-grid article:last-child { border-bottom: 0; }
  .ad-card-grid article, .ad-card-grid article:nth-child(3n), .ad-card-grid article:nth-child(2n), .ad-card-grid article:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--line); }
  .ad-card-grid article:last-child { border-bottom: 0; }
  .ad-price-row { grid-template-columns: 1fr; gap: 14px; }
  .ad-price-band strong { max-width: none; text-align: left; }
  .ad-final-row { min-height: 0; flex-direction: column; align-items: stretch; }
  .ad-final .btn { text-align: center; }
  .ad-footer-grid { grid-template-columns: 1fr; gap: 18px; }
  .ad-footer-links { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 430px) {
  .ad-head-row { min-height: 64px; gap: 8px; }
  .ad-logo img { width: 145px; }
  .ad-head-phone { display: inline-flex; }
  .ad-form-card { padding: 17px 14px; }
  .ad-ac-symptoms .ac-symptom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 330px) {
  /* Windows mobile viewports can lose 15px to a persistent scrollbar. Keep
     the real logo and the one hours-aware Call/Book action on one clean row. */
  .paid-search-page .ad-logo img { width: 120px; }
  .paid-search-page .ad-head-phone .hph-book { padding: 8px 6px; font-size: 10.5px; letter-spacing: .015em; }
}

/* --- owner-approved paid A/C journey, 2026-08-26 ----------------------
   This route deliberately uses a quieter, predominantly light hero. The
   form remains the single primary conversion action; supporting sections
   explain how the shop separates causes before recommending work. */
.paid-search-page .ad-ac-hero {
  color: var(--ink);
  background: linear-gradient(135deg, #f7f3e9 0%, #fff 58%, #f2eee3 100%);
  border-bottom: 1px solid var(--line);
}
.paid-search-page .ad-ac-hero::before { display: none; }
.ad-ac-hero .ad-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(390px, .84fr);
  gap: 42px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 52px;
}
.ad-ac-hero .ad-hero-copy { max-width: 650px; }
.ad-ac-hero h1 {
  max-width: 16ch;
  margin: 18px 0 13px;
  color: var(--ink);
  font-size: clamp(40px, 4vw, 54px);
  line-height: 1.01;
}
.ad-ac-hero .ad-hero-lead {
  max-width: 58ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.58;
}
.paid-ac-hero-offer {
  max-width: 610px;
  padding: 14px 17px 13px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(13, 18, 24, .06);
}
.paid-ac-hero-offer .ac-offer-eyebrow {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-family: var(--disp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.paid-ac-hero-offer > strong {
  display: inline-block;
  color: var(--red);
  font-family: var(--disp);
  font-size: 31px;
  line-height: 1;
  text-transform: uppercase;
}
.paid-ac-hero-offer .ac-offer-subject {
  display: inline-block;
  margin-left: 9px;
  color: var(--ink);
  font-family: var(--disp);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.paid-ac-hero-offer p {
  margin: 8px 0 4px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.paid-ac-hero-offer small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.ad-ac-hero .ad-hero-proofs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  margin: 22px 0 18px;
}
.ad-ac-hero .ad-hero-proofs li {
  display: block;
  min-height: 36px;
  padding-left: 10px;
  border-left: 2px solid var(--amber-600);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.42;
}
.ac-google-proof {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
}
.ac-google-proof img { flex: 0 0 auto; }
.ac-google-proof span { display: flex; align-items: baseline; gap: 7px; }
.ac-google-proof b { color: var(--ink); font-size: 12.5px; }
.ac-google-proof small { color: var(--muted); font-size: 10.5px; }

.ad-ac-form-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber);
  background: var(--white);
  padding: 23px 25px 25px;
  box-shadow: 0 16px 42px rgba(13, 18, 24, .13);
}
.ad-ac-form-card > .eyebrow { font-size: 11px; }
.ad-ac-form-card > h2 { max-width: 20ch; font-size: 27px; }
.ad-ac-form-card > p { margin-bottom: 13px; }
.ad-ac-form-card .ac-alert.on {
  padding: 8px 10px;
  margin: 0 0 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-dark);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font-size: 12px;
}
.ad-ac-form-card .ac-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 18px;
}
.ad-ac-form-card .ac-progress::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 31px;
  right: 31px;
  height: 1px;
  background: var(--line);
}
.ad-ac-form-card .ac-progress > div {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted-soft);
}
.ad-ac-form-card .ac-progress span {
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  font-family: var(--disp);
  font-size: 14px;
  font-weight: 700;
}
.ad-ac-form-card .ac-progress b {
  background: var(--white);
  color: inherit;
  font-family: var(--disp);
  font-size: 11px;
  letter-spacing: .045em;
  line-height: 1.15;
  text-transform: uppercase;
}
.ad-ac-form-card .ac-progress > .on span {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--ink);
}
.ad-ac-form-card .ac-progress > .done span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}
.ad-ac-form-card .ac-progress > .on b,
.ad-ac-form-card .ac-progress > .done b { color: var(--ink); }
.ac-choice-field legend {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--disp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.ac-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.ac-choice { position: relative; min-width: 0; cursor: pointer; }
.ad-ac-form-card .ac-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.ac-choice span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
}
.ac-choice:hover span { border-color: var(--amber-dark); }
.ac-choice input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.ac-choice input:checked + span {
  border-color: var(--amber-600);
  box-shadow: inset 4px 0 0 var(--amber);
  background: #fff8e9;
}
.ac-choice-field.has-error .ac-choice-grid { padding-bottom: 1px; }
.ac-choice-field.has-error .ac-choice span { border-color: var(--red); }
.ad-ac-form-card .fldwrap { margin-bottom: 9px; }
.ad-ac-form-card .fldnote:not(:empty) { margin-top: 5px; }
.ad-ac-form-card .ac-step .fldnote:empty { display: none; }
.ad-ac-form-card .ac-actions {
  align-items: stretch;
  justify-content: space-between;
  margin-top: 14px;
}
.ad-ac-form-card .ac-soft-action { min-height: 48px; flex: 1 1 auto; }
.ad-ac-form-card [data-ac-back] { min-height: 48px; }
.ad-ac-form-card .ac-selected-summary {
  margin-bottom: 12px;
  padding: 5px 8px;
  border-left-color: var(--amber-600);
  font-size: 11.5px;
}
.ad-ac-form-card .ac-date-note {
  margin-bottom: 11px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
}
.ad-ac-form-card .ac-date-helper {
  margin: 3px 0 11px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.ad-ac-symptoms { background: var(--paper); }
.ad-ac-symptoms .section-head { max-width: 780px; }
.ac-checker {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr);
  gap: 0;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 14px 34px rgba(13, 18, 24, .08);
}
.ac-checker-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 22px;
}
.ac-checker-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-600);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--disp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .025em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.ac-checker-options button span { color: var(--amber-dark); font-size: 22px; }
.ac-checker-options button:hover,
.ac-checker-options button.on {
  border-color: var(--amber-600);
  background: #fff8e9;
}
.ac-checker-options button:focus-visible,
.ac-add-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ac-checker-answer {
  display: flex;
  min-height: 100%;
  align-items: center;
  padding: 28px 27px;
  border-left: 1px solid var(--line);
  background: var(--charcoal);
  color: var(--white);
}
.ac-checker-answer > * { width: 100%; }
.ac-checker-answer .eyebrow { margin-bottom: 8px; color: var(--amber); }
.ac-checker-answer p {
  margin: 0;
  color: #e0e5e9;
  font-size: 14px;
  line-height: 1.62;
}
.ac-symptom-result[hidden] { display: none !important; }
.ac-symptom-result.on { display: block; }
.ac-add-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--amber);
  font-family: var(--disp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
}
.ac-add-link:hover { color: var(--white); }

.ad-ac-causes { background: var(--white); }
.ad-ac-causes .section-head { max-width: 820px; }
.ac-cause-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 25px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ac-cause-grid article { padding: 21px 20px; border-right: 1px solid var(--line); }
.ac-cause-grid article:first-child { padding-left: 0; }
.ac-cause-grid article:last-child { padding-right: 0; border-right: 0; }
.ac-cause-grid h3 { margin: 0 0 7px; font-size: 16px; }
.ac-cause-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.ac-season-band { border-top: 1px solid #decda9; border-bottom: 1px solid #decda9; background: #f1e6d0; }
.ac-season-band .wrap {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.ac-season-band h2 { margin: 0 0 5px; color: var(--ink); font-size: 27px; }
.ac-season-band p { max-width: 70ch; margin: 0; color: var(--muted); }
.ac-season-band .btn { flex: 0 0 auto; }

@media (max-width: 920px) {
  .ad-ac-hero .ad-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 38px; padding-bottom: 42px; }
  .ad-ac-hero .ad-hero-copy { max-width: 760px; }
  .ad-ac-form-card { max-width: 700px; }
  .ac-checker { grid-template-columns: 1fr; }
  .ac-checker-answer { min-height: 210px; border-top: 1px solid var(--line); border-left: 0; }
  .ac-cause-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-cause-grid article { border-bottom: 1px solid var(--line); }
  .ac-cause-grid article:nth-child(2) { border-right: 0; }
  .ac-cause-grid article:nth-child(3) { padding-left: 0; border-bottom: 0; }
  .ac-cause-grid article:nth-child(4) { border-bottom: 0; }
}
@media (max-width: 700px) {
  .ad-ac-hero .ad-hero-grid { padding: 30px 16px 34px; }
  .ad-ac-hero h1 { max-width: 18ch; font-size: clamp(34px, 10vw, 44px); }
  .ad-ac-hero .ad-hero-lead { font-size: 15px; }
  .paid-ac-hero-offer { padding: 12px 13px; }
  .paid-ac-hero-offer > strong { font-size: 27px; }
  .paid-ac-hero-offer .ac-offer-subject { font-size: 14px; }
  .ad-ac-form-card { padding: 19px 16px 20px; }
  .ad-ac-form-card > h2 { font-size: 24px; }
  .ad-ac-form-card .ac-progress { gap: 8px; }
  .ad-ac-form-card .ac-progress > div { gap: 5px; }
  .ad-ac-form-card .ac-progress b { font-size: 10px; }
  .ad-ac-form-card input,
  .ad-ac-form-card select,
  .ad-ac-form-card textarea { font-size: 16px; }
  .ad-ac-form-card .vehicle-row { grid-template-columns: 1fr; }
  .ac-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
  .ac-choice span { min-height: 48px; padding: 8px 9px; font-size: 10.5px; }
  .ac-checker-options { grid-template-columns: 1fr; padding: 16px; gap: 7px; }
  .ac-checker-options button { min-height: 50px; padding: 9px; font-size: 11px; }
  .ac-checker-answer { min-height: 190px; padding: 22px 20px; }
  .ac-cause-grid { grid-template-columns: 1fr; }
  .ac-cause-grid article,
  .ac-cause-grid article:first-child,
  .ac-cause-grid article:nth-child(3),
  .ac-cause-grid article:last-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .ac-cause-grid article:last-child { border-bottom: 0; }
  .ac-season-band .wrap { min-height: 0; flex-direction: column; align-items: stretch; gap: 18px; }
  .ac-season-band .btn { text-align: center; }
}
@media (max-width: 430px) {
  .ad-ac-hero .ad-hero-proofs { grid-template-columns: 1fr; gap: 8px; }
  .ac-google-proof { border-radius: 8px; }
  .ac-google-proof span { display: block; }
  .ac-google-proof small { display: block; margin-top: 1px; }
  .ad-ac-form-card .ac-progress::before { left: 16px; right: 16px; }
  .ad-ac-form-card .ac-progress > div { grid-template-columns: 32px 1fr; }
  .ac-checker-options button { font-size: 10.5px; }
}

/* --- focused BMW and Mercedes-Benz paid journeys ---------------------- */
.paid-search-page .ad-brand-hero {
  color: var(--ink);
  background: linear-gradient(135deg, #f7f3e9 0%, #fff 58%, #f2eee3 100%);
  border-bottom: 1px solid var(--line);
}
.paid-search-page .ad-brand-hero::before { display: none; }
.ad-brand-hero .ad-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(410px, .86fr);
  gap: 42px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 52px;
}
.ad-brand-hero .ad-hero-copy { max-width: 650px; }
.ad-brand-hero .ad-hero-copy > .eyebrow { color: var(--amber-dark); }
.ad-brand-hero h1 {
  max-width: 17ch;
  margin: 12px 0 13px;
  color: var(--ink);
  font-size: clamp(40px, 4vw, 54px);
  line-height: 1.01;
}
.ad-brand-hero .ad-hero-lead {
  max-width: 58ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.58;
}
.ad-brand-hero .ad-hero-proofs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  margin: 22px 0 18px;
}
.ad-brand-hero .ad-hero-proofs li {
  display: block;
  min-height: 36px;
  padding-left: 10px;
  border-left: 2px solid var(--amber-600);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.42;
}
.ad-brand-form-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber);
  background: var(--white);
  box-shadow: 0 16px 42px rgba(13, 18, 24, .13);
}
.paid-brand-form select.is-fixed {
  pointer-events: none;
  color: var(--ink);
  background-color: var(--paper);
  background-image: none;
  font-weight: 600;
}
.paid-brand-concern-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 25px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.paid-brand-concern-grid article {
  min-width: 0;
  padding: 21px 19px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.paid-brand-concern-grid article:nth-child(4n) { border-right: 0; }
.paid-brand-concern-grid article:nth-last-child(-n + 4) { border-bottom: 0; }
.paid-brand-concern-grid h3 { margin: 0 0 7px; font-size: 15px; }
.paid-brand-concern-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.paid-brand-process .ad-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paid-brand-inline-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.paid-brand-inline-request p { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.45; }
.paid-brand-inline-request .btn-ghost { flex: 0 0 auto; }

@media (max-width: 1000px) {
  .ad-brand-hero .ad-hero-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 38px; padding-bottom: 42px; }
  .ad-brand-hero .ad-hero-copy { max-width: 760px; }
  .paid-brand-concern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paid-brand-concern-grid article,
  .paid-brand-concern-grid article:nth-child(4n),
  .paid-brand-concern-grid article:nth-last-child(-n + 4) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .paid-brand-concern-grid article:nth-child(2n) { border-right: 0; }
  .paid-brand-concern-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 700px) {
  .ad-brand-hero .ad-hero-grid { padding: 30px 16px 34px; }
  .ad-brand-hero h1 { max-width: 18ch; font-size: clamp(34px, 10vw, 44px); }
  .ad-brand-hero .ad-hero-lead { font-size: 15px; }
  .ad-brand-hero .ad-hero-proofs { grid-template-columns: 1fr; gap: 8px; }
  .paid-brand-concern-grid,
  .paid-brand-process .ad-process-grid { grid-template-columns: 1fr; }
  .paid-brand-concern-grid article,
  .paid-brand-concern-grid article:nth-child(4n),
  .paid-brand-concern-grid article:nth-child(2n),
  .paid-brand-concern-grid article:nth-last-child(-n + 4),
  .paid-brand-concern-grid article:nth-last-child(-n + 2) {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .paid-brand-concern-grid article:last-child { border-bottom: 0; }
  .paid-brand-inline-request { align-items: flex-start; flex-direction: column; gap: 12px; }
}