/* ==========================================================================
   KRP Automotive — Redesign Chrome + Design System  (ALL WIDTHS)
   The redesigned header, video hero, footer and content polish now render at
   every breakpoint so mobile and tablet are true responsive versions of the
   desktop design (not the old Elementor look). The successful mobile system
   from krp-site.css (fixed bottom nav + drawer + call sheet) is preserved;
   only the old Elementor header/footer/hero and the redundant top action bar
   are replaced.
   Reference: premium service-business layout (A1 Garage-style), rebuilt in
   KRP's own brand (red #d62128 / blue #34a0cf) on a white-dominant canvas.

   Breakpoints
     >= 1200px  full desktop header (utility strip + mega-menu nav)
     < 1200px   compact header (logo + Call Now + Book Service [+ menu])
     1025-1199  compact header shows a menu button (bottom nav is hidden here)
     <= 1024px  fixed bottom nav owns navigation (menu button hidden)
     <= 768px   phone tuning; hero shows the poster (video paused to save data)
   ========================================================================== */

:root {
  --krpd-ink: #14171c;
  --krpd-ink-2: #3a4048;
  --krpd-muted: #667085;
  --krpd-line: #e7eaef;
  --krpd-line-2: #eef1f5;
  --krpd-bg: #ffffff;
  --krpd-bg-soft: #f6f8fb;
  --krpd-bg-soft-2: #f0f4f9;
  --krpd-red: #d62128;
  --krpd-red-dark: #aa191f;
  --krpd-blue: #34a0cf;
  --krpd-blue-dark: #23718f;
  --krpd-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --krpd-shadow-md: 0 10px 24px rgba(16,24,40,.08), 0 3px 8px rgba(16,24,40,.05);
  --krpd-shadow-lg: 0 24px 60px rgba(16,24,40,.16), 0 8px 20px rgba(16,24,40,.08);
  --krpd-ring: 0 0 0 3px rgba(52,160,207,.35);
  --krpd-r: 14px;
  --krpd-r-sm: 10px;
  --krpd-r-lg: 22px;
  --krpd-container: 1280px;
  --krpd-font: "Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ==========================================================================
   ACTIVATION — swap old Elementor chrome for the redesigned chrome (all widths)
   ========================================================================== */
html.krp-enhanced .elementor-location-header,
html.krp-enhanced .elementor-location-footer { display: none !important; }

/* Homepage: hide the old carousel hero everywhere; the video hero replaces it. */
html.krp-hp .elementor-element-190de13 { display: none !important; }

/* The old mobile top action bar is now redundant (the sticky header carries
   Call + Book on small screens). */
html.krp-enhanced .krp-actionbar { display: none !important; }

.krpd-header { display: block; }
html.krp-hp .krpd-hero { display: flex; }
.krpd-footer { display: block; }

/* `clip` (not hidden) keeps the sticky header working while blocking overflow. */
html.krp-enhanced, html.krp-enhanced body { overflow-x: clip; }
html.krp-enhanced body { background: var(--krpd-bg); }

.krpd-header *, .krpd-hero *, .krpd-footer * { box-sizing: border-box; }

/* ==========================================================================
   GLOBAL CONTENT POLISH  (layered on Elementor content, every width)
   ========================================================================== */
html.krp-enhanced .elementor-heading-title { letter-spacing: -.015em; line-height: 1.16; }
html.krp-enhanced .elementor-widget-heading .elementor-heading-title { font-weight: 700; }
html.krp-enhanced .elementor-size-xxl { font-size: clamp(2.15rem, 5.2vw, 3.6rem) !important; }
html.krp-enhanced .elementor-size-xl  { font-size: clamp(1.9rem, 4.4vw, 2.8rem) !important; }
html.krp-enhanced .elementor-widget-text-editor { color: var(--krpd-ink-2); }
html.krp-enhanced .elementor-widget-text-editor p { line-height: 1.72; }

/* Buttons — premium, brand-forward pills everywhere. */
html.krp-enhanced .elementor-button {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  padding-block: .8em !important;
  padding-inline: 1.5em !important;
  box-shadow: var(--krpd-shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease;
}
html.krp-enhanced .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--krpd-shadow-md); }

/* Content photography: square corners, no border, no drop shadow. */
html.krp-enhanced .elementor-widget-image img {
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.krp-enhanced .elementor-widget-icon-box {
  background: var(--krpd-bg); border: 1px solid var(--krpd-line);
  border-radius: var(--krpd-r); box-shadow: var(--krpd-shadow-sm);
  padding: 26px 24px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
html.krp-enhanced .elementor-widget-icon-box:hover {
  transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: #dfe3ea;
}
html.krp-enhanced .elementor-icon-box-title { letter-spacing: -.01em; }

/* Remove the brand-red frame Elementor put around some images (item 12).
   The frame is applied via per-element <style> rules on the image widget's
   container, so we neutralize the border on image-widget containers site-wide
   (the redesign presents images clean, with radius + shadow instead). */
html.krp-enhanced .elementor-widget-image > .elementor-widget-container {
  border-width: 0 !important;
  border-style: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

html.krp-enhanced a:focus-visible,
html.krp-enhanced button:focus-visible,
html.krp-enhanced [role="button"]:focus-visible { outline: none; box-shadow: var(--krpd-ring); border-radius: 8px; }

/* Content container width (desktop). */
@media (min-width: 1025px) {
  html.krp-enhanced .e-con-boxed > .e-con-inner { max-width: var(--krpd-container); }
}

/* ==========================================================================
   1. HEADER  (base = full desktop; compact rules further down)
   ========================================================================== */
.krpd-header {
  position: sticky; top: 0; z-index: 900;
  font-family: var(--krpd-font);
  background: var(--krpd-bg);
  border-bottom: 1px solid var(--krpd-line);
  /* Stronger separation from the video hero underneath. */
  box-shadow: 0 10px 28px rgba(16,24,40,.16), 0 2px 6px rgba(16,24,40,.08);
}

/* -- utility strip -- */
.krpd-util { background: var(--krpd-ink); color: #cfd5df; font-size: 13px; }
.krpd-util__in {
  max-width: var(--krpd-container); margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.krpd-util__l, .krpd-util__r { display: flex; align-items: center; gap: 18px; }
.krpd-util__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.krpd-util__item svg { width: 15px; height: 15px; color: var(--krpd-blue); flex: none; }
.krpd-util a { color: #cfd5df; text-decoration: none; transition: color .14s ease; white-space: nowrap; }
.krpd-util a:hover { color: #fff; }
.krpd-util__sep { width: 1px; height: 16px; background: rgba(255,255,255,.16); }
.krpd-util__socials { display: inline-flex; gap: 10px; }
.krpd-util__socials a { display: inline-flex; }
.krpd-util__socials svg { width: 16px; height: 16px; }

/* -- main bar -- */
.krpd-bar {
  max-width: var(--krpd-container); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 22px;
  transition: padding .2s ease;
}
.krpd-brand { display: inline-flex; align-items: center; flex: none; }
.krpd-brand img { height: 78px; width: auto; display: block; transition: height .2s ease; }

.krpd-nav { margin-left: auto; }
.krpd-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.krpd-nav > ul > li { position: relative; }
.krpd-nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 13px; border-radius: 10px;
  color: var(--krpd-ink); text-decoration: none;
  font-size: 15.5px; font-weight: 600; letter-spacing: .005em;
  transition: color .14s ease, background-color .14s ease;
}
.krpd-nav__link svg.krpd-caret { width: 15px; height: 15px; color: var(--krpd-muted); transition: transform .18s ease; }
.krpd-nav__link:hover, .krpd-nav > ul > li:hover > .krpd-nav__link,
.krpd-nav > ul > li.is-open > .krpd-nav__link { color: var(--krpd-red); background: var(--krpd-bg-soft); }
.krpd-nav > ul > li:hover > .krpd-nav__link .krpd-caret,
.krpd-nav > ul > li.is-open > .krpd-nav__link .krpd-caret { transform: rotate(180deg); color: var(--krpd-red); }
.krpd-nav__link[aria-current="page"] { color: var(--krpd-red); }
.krpd-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  background: var(--krpd-red); border-radius: 2px;
}

/* -- dropdown / mega panels -- */
.krpd-drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--krpd-bg); border: 1px solid var(--krpd-line);
  border-radius: var(--krpd-r); box-shadow: var(--krpd-shadow-lg); padding: 12px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 950;
}
.krpd-drop::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.krpd-nav > ul > li:hover > .krpd-drop,
.krpd-nav > ul > li:focus-within > .krpd-drop,
.krpd-nav > ul > li.is-open > .krpd-drop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.krpd-drop--simple { min-width: 230px; }
.krpd-drop--simple a {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
  color: var(--krpd-ink); text-decoration: none; font-size: 15px; font-weight: 600;
  transition: background-color .12s ease, color .12s ease;
}
.krpd-drop--simple a:hover { background: var(--krpd-bg-soft); color: var(--krpd-red); }
.krpd-drop--simple a svg { width: 17px; height: 17px; color: var(--krpd-red); flex: none; }
.krpd-drop--simple .krpd-drop__meta { display: flex; flex-direction: column; gap: 1px; }
.krpd-drop--simple .krpd-drop__meta small { font-weight: 500; color: var(--krpd-muted); font-size: 12.5px; }

.krpd-drop--mega { width: 720px; padding: 18px; }
.krpd-mega__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 4px 8px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--krpd-line-2);
}
.krpd-mega__head strong { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--krpd-blue-dark); }
.krpd-mega__head a { font-size: 13px; font-weight: 700; color: var(--krpd-red); text-decoration: none; }
.krpd-mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 10px; }
.krpd-mega__grid a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: var(--krpd-ink); text-decoration: none; font-size: 14.5px; font-weight: 600;
  transition: background-color .12s ease, color .12s ease;
}
.krpd-mega__grid a:hover { background: var(--krpd-bg-soft); color: var(--krpd-red); }
.krpd-mega__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: rgba(214,33,40,.08); color: var(--krpd-red);
}
.krpd-mega__ic svg { width: 18px; height: 18px; }

.krpd-drop--loc { width: 320px; }
.krpd-loc-row { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; transition: background-color .12s ease; }
.krpd-loc-row:hover { background: var(--krpd-bg-soft); }
.krpd-loc-row b { display: flex; align-items: center; gap: 8px; color: var(--krpd-ink); font-size: 15px; }
.krpd-loc-row b svg { width: 16px; height: 16px; color: var(--krpd-red); }
.krpd-loc-row span { display: block; margin: 3px 0 0 24px; color: var(--krpd-muted); font-size: 13px; }
.krpd-loc-row span.krpd-loc-tel { color: var(--krpd-red); font-weight: 700; }

/* -- action clusters -- */
.krpd-actions { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.krpd-actions--compact { display: none; margin-left: auto; gap: 8px; }

.krpd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 20px; border-radius: 999px;
  font: 700 15px/1 var(--krpd-font); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, color .14s ease, border-color .14s ease;
}
.krpd-btn svg { width: 18px; height: 18px; flex: none; }
.krpd-btn--primary { background: var(--krpd-red); color: #fff; box-shadow: 0 8px 20px rgba(214,33,40,.28); }
.krpd-btn--primary:hover { background: var(--krpd-red-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(214,33,40,.34); }
.krpd-btn--ghost { background: #fff; color: var(--krpd-ink); border-color: var(--krpd-line); }
.krpd-btn--ghost:hover { border-color: var(--krpd-red); color: var(--krpd-red); transform: translateY(-2px); }
/* Compact-header actions — forced so global <button> theming can't bleed in. */
.krpd-btn--call { background: var(--krpd-red) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(214,33,40,.24); }
.krpd-btn--call:hover { background: var(--krpd-red-dark) !important; }
.krpd-btn--book { background: #fff !important; color: var(--krpd-red) !important; border-color: var(--krpd-red) !important; }
.krpd-btn--book:hover { background: var(--krpd-red) !important; color: #fff !important; }

.krpd-callbtn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px; }
.krpd-callbtn__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: rgba(52,160,207,.12); color: var(--krpd-blue-dark);
}
.krpd-callbtn__ic svg { width: 20px; height: 20px; }
.krpd-callbtn__meta { display: flex; flex-direction: column; line-height: 1.1; }
.krpd-callbtn__meta small { font-size: 11.5px; font-weight: 600; color: var(--krpd-muted); letter-spacing: .04em; text-transform: uppercase; }
/* "Call a Location": maximized for readability on the white header (client
   feedback). Explicit near-black + heavy weight, decoupled from --krpd-ink so
   it always stays the darkest, highest-contrast label in the header. Icon,
   "SPEAK WITH US" eyebrow, position and spacing are unchanged. */
.krpd-callbtn__meta b { font-size: 17px; font-weight: 900; color: #0a0c10; letter-spacing: -.01em; }
.krpd-callbtn:hover .krpd-callbtn__ic { background: var(--krpd-blue); color: #fff; }

/* menu (hamburger) button — only used in the 1025-1199 gap */
.krpd-menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  background: var(--krpd-bg-soft) !important; border: 1px solid var(--krpd-line);
  color: var(--krpd-ink) !important; cursor: pointer;
}
.krpd-menu-btn svg { width: 24px; height: 24px; }
.krpd-menu-btn:hover { border-color: var(--krpd-red); color: var(--krpd-red) !important; }

/* sticky shrink. The transition is what turns the size change from a jump
   into a movement; the thresholds that stop it oscillating are in the JS. */
.krpd-header .krpd-bar { transition: padding-top .18s ease, padding-bottom .18s ease; }
.krpd-header .krpd-brand img { transition: height .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .krpd-header .krpd-bar, .krpd-header .krpd-brand img { transition: none; }
}
.krpd-header.is-stuck .krpd-bar { padding-top: 9px; padding-bottom: 9px; }
.krpd-header.is-stuck .krpd-brand img { height: 60px; }

/* ==========================================================================
   2. VIDEO HERO  (homepage)
   ========================================================================== */
/* Content-led height: the hero copy is taller than a centred box at common
   laptop heights, and centring clipped the first line of the H1 behind the
   header (Dawson, 2026-10-01). Anchor the content and let the hero grow. */
.krpd-hero {
  position: relative;
  min-height: clamp(540px, 66vh, 700px);
  display: flex; align-items: flex-start;
  font-family: var(--krpd-font); overflow: hidden;
  background: #0d1013 url("/public/images/home-hero-poster.webp") center/cover no-repeat;
  isolation: isolate;
}
.krpd-hero__media { position: absolute; inset: 0; z-index: -2; }
.krpd-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.krpd-hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,13,17,.86) 0%, rgba(10,13,17,.66) 42%, rgba(10,13,17,.28) 78%, rgba(10,13,17,.12) 100%),
    linear-gradient(0deg, rgba(10,13,17,.55) 0%, rgba(10,13,17,0) 45%);
}
.krpd-hero__inner { max-width: var(--krpd-container); width: 100%; margin: 0 auto; padding: clamp(44px, 5vw, 72px) 24px clamp(48px, 5vw, 76px); }
.krpd-hero__content { max-width: 1020px; color: #fff; }
.krpd-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 999px; margin-bottom: 20px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px);
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.krpd-hero__eyebrow svg { width: 16px; height: 16px; color: var(--krpd-blue); }
/* Two deliberate lines: the claim, then the four towns kept together on one
   line (Dawson, 2026-10-01). Sized so the town list never breaks on desktop. */
.krpd-hero__title {
  margin: 0 0 18px; color: #fff;
  font-size: clamp(2.1rem, 3.3vw, 3.15rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.krpd-hero__towns { display: block; }
@media (min-width: 1100px) { .krpd-hero__towns { white-space: nowrap; } }
.krpd-hero__sub { margin: 0 0 30px; max-width: 720px; font-size: clamp(1.18rem, 1.6vw, 1.5rem); line-height: 1.6; color: #eef2f7; font-weight: 400; }
.krpd-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.krpd-hero .krpd-btn { height: 60px; padding: 0 34px; font-size: 17.5px; }
.krpd-hero .krpd-btn--ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.krpd-hero .krpd-btn--ghost:hover { background: #fff; color: var(--krpd-ink); border-color: #fff; }
.krpd-hero__trust {
  list-style: none; margin: 34px 0 0; padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: 14px 34px;
}
.krpd-hero__trust li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #eef2f7; }
.krpd-hero__trust svg { width: 22px; height: 22px; color: var(--krpd-blue); flex: none; }

/* ==========================================================================
   3. FOOTER
   ========================================================================== */
/* Redesigned footer — predominantly WHITE/light with dark text and brand-color
   accents. The KRP logo now sits naturally on a clean white panel (no dark
   trapezoid), the hierarchy is easier to scan, and it's built mobile-first. */
/* Dark, premium footer (charcoal/navy) — a strong, cohesive conclusion that
   matches the site's dark warranty band and the KRP identity. Structure follows
   the reference philosophy: a bright pre-footer conversion CTA, then a prominent
   four-location "Visit Us" band (address / phone / hours / Get Directions), then
   brand + navigation columns, and a restrained legal bar. */
.krpd-footer { font-family: var(--krpd-font); background: #0e1218; color: #aeb6c2; }

/* Pre-footer CTA band — bright conversion band above the dark footer. */
.krpd-footcta {
  background: var(--krpd-bg-soft);
  border-bottom: 1px solid var(--krpd-line);
  position: relative;
}
.krpd-footcta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--krpd-red), var(--krpd-blue)); }
.krpd-footcta__in {
  max-width: var(--krpd-container); margin: 0 auto; padding: clamp(34px, 4vw, 46px) 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.krpd-footcta__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  color: var(--krpd-red); font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.krpd-footcta__eyebrow svg { width: 15px; height: 15px; }
.krpd-footcta__t { margin: 0; color: var(--krpd-ink); font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.12; }
.krpd-footcta__sub { margin: 8px 0 0; color: var(--krpd-ink-2); font-size: 1rem; line-height: 1.5; }
.krpd-footcta__btns { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.krpd-footcta .krpd-btn--ghost { background: #fff; color: var(--krpd-ink); border-color: var(--krpd-line); }
.krpd-footcta .krpd-btn--ghost:hover { background: var(--krpd-red); color: #fff; border-color: var(--krpd-red); }

/* Four-location "Visit Us" band. */
.krpd-footlocs {
  background: radial-gradient(1100px 460px at 84% -30%, rgba(52,160,207,.13), transparent 62%), #12161d;
  color: #fff; border-top: 1px solid rgba(255,255,255,.06);
}
.krpd-footlocs__in { max-width: var(--krpd-container); margin: 0 auto; padding: clamp(40px, 4.5vw, 60px) 24px; }
.krpd-footlocs__head { margin-bottom: 26px; }
.krpd-footlocs__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #8fd0ee; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.krpd-footlocs__eyebrow svg { width: 15px; height: 15px; }
.krpd-footlocs__t { margin: 8px 0 0; color: #fff; font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; }
/* Five locations from 2026-10. Hard-coding four left the fifth card alone
   on its own row. auto-fit keeps five across on a wide screen and folds
   sensibly below that, so the count can change again without a CSS edit. */
.krpd-footlocs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); gap: 16px; }
.krpd-floc {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; padding: 20px;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.krpd-floc:hover { transform: translateY(-3px); border-color: rgba(52,160,207,.5); background: rgba(255,255,255,.06); }
.krpd-floc__name { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.krpd-floc__name svg { width: 19px; height: 19px; color: #ff6b70; flex: none; }
/* Veteran-owned line in the "who we are" section on the home page. It began
   as a fifth hero badge and a seventh Why Choose KRP card, and in both places
   it landed alone on its own row under a tidy grid. This is the paragraph it
   actually belongs in. Dawson, 2026-10-06. */
.krpx-vetline {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 20px 0 0; padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(214,33,40,.22);
  background: linear-gradient(90deg, rgba(214,33,40,.06), rgba(52,160,207,.05));
  font-size: 15.5px; line-height: 1.55;
}
.krpx-vetline svg { width: 26px; height: auto; flex: none; margin-top: 3px; border-radius: 3px; }
.krpx-vetline b { color: var(--krpd-ink, #14171c); }

/* Veteran-owned note under the specials lead. The hero photograph on that
   page is the flag hanging above the tire rack in the Franklin shop, so the
   line has something real to point at. Added 2026-10-06. */
.krpx-vet {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 660px; margin: 18px auto 0;
  padding: 14px 18px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(214,33,40,.28);
  background: rgba(214,33,40,.05);
  color: #3f4650; font-size: 15px; line-height: 1.55;
}
.krpx-vet svg { width: 26px; height: auto; flex: none; margin-top: 3px; border-radius: 3px; }
.krpx-vet b { color: #16181c; }
@media (max-width: 680px) { .krpx-vet { margin-left: 0; margin-right: 0; font-size: 14.5px; } }

/* Reserve two lines for the address so the red phone number and the hours
   line up across every card. Hawthorne's address is the long one and wraps
   to two lines, which pushed its phone and hours lower than the other three
   and read as a layout fault. 13.5px x 1.5 line-height x 2 lines.
   Reported by Dawson 2026-10-06. */
.krpd-floc__addr { margin: 0 0 12px; color: #aeb6c2; font-size: 14.5px; line-height: 1.5;
  min-height: calc(14.5px * 1.5 * 3); }
.krpd-floc__tel { display: inline-flex; align-items: center; gap: 7px; color: #8fd0ee; font-weight: 800; font-size: 1.1rem; text-decoration: none; margin-bottom: 8px; }
.krpd-floc__tel svg { width: 15px; height: 15px; flex: none; }
.krpd-floc__tel:hover { color: #fff; }
.krpd-floc__hrs { display: flex; align-items: center; gap: 7px; margin: 0 0 16px; color: #8b95a3; font-size: 13.5px; }
.krpd-floc__hrs svg { width: 14px; height: 14px; flex: none; }
/* A shop that is announced but not trading yet: no number to call and no
   hours to publish, so the slot says so rather than showing a blank or a
   guess. See OPENING_SOON in krp_redesign_inject.py. */
.krpd-floc__soon, .krpx-speccard__soon {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 16px; padding: 6px 11px; border-radius: 999px;
  background: rgba(52,160,207,.14); border: 1px solid rgba(52,160,207,.42);
  color: #8fd0ee; font-weight: 700; font-size: 12.5px; letter-spacing: .01em;
}
.krpd-floc__soon svg, .krpx-speccard__soon svg { width: 14px; height: 14px; flex: none; }
.krpx-speccard__soon { background: rgba(214,33,40,.10); border-color: rgba(214,33,40,.38); color: #b3242a; }
.krpd-loc-tel:empty, .krpx-loc__tel:empty { display: none; }

.krpd-floc__act { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.krpd-floc__dir { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: 10px; background: rgba(214,33,40,.16); border: 1px solid rgba(214,33,40,.42); color: #ff9195; font-weight: 700; font-size: 14px; text-decoration: none; transition: background-color .14s ease, color .14s ease, border-color .14s ease; }
.krpd-floc__dir svg { width: 15px; height: 15px; flex: none; }
.krpd-floc__dir:hover { background: var(--krpd-red); color: #fff; border-color: var(--krpd-red); }
.krpd-floc__more { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #c9d2dd; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.krpd-floc__more svg { width: 14px; height: 14px; flex: none; }
.krpd-floc__more:hover { color: #fff; }

/* Main footer — dark canvas: brand + navigation columns. */
.krpd-footmain { background: #0e1218; color: #aeb6c2; border-top: 1px solid rgba(255,255,255,.06); }
.krpd-footmain__in {
  max-width: var(--krpd-container); margin: 0 auto; padding: 52px 24px 40px;
  display: grid; grid-template-columns: 1fr 2.2fr; gap: 48px; align-items: start;
}
.krpd-footcols { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 36px; }

.krpd-footbrand { max-width: 340px; }
.krpd-footbrand__logo {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 20px; margin-bottom: 20px;
  background: #fff; border-radius: var(--krpd-r);
  box-shadow: var(--krpd-shadow-sm);
}
.krpd-footbrand__logo img { height: 66px; width: auto; display: block; }
.krpd-footbrand p { margin: 0 0 22px; font-size: 14px; line-height: 1.7; color: #8b95a3; }
.krpd-footsoc { display: flex; gap: 12px; }
.krpd-footsoc a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.06); color: #c9d2dd; text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  transition: background-color .14s ease, color .14s ease, transform .14s ease, border-color .14s ease;
}
.krpd-footsoc a:hover { background: var(--krpd-red); color: #fff; border-color: var(--krpd-red); transform: translateY(-2px); }
.krpd-footsoc svg { width: 19px; height: 19px; }

.krpd-footcol :is(h2,h3,h4) { margin: 4px 0 18px; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.krpd-footcol ul { list-style: none; margin: 0; padding: 0; }
.krpd-footcol.krpd-footcol--links ul { columns: 2; column-gap: 22px; }
.krpd-footcol li { margin-bottom: 11px; break-inside: avoid; }
.krpd-footcol a { color: #aeb6c2; text-decoration: none; font-size: 14px; font-weight: 500; transition: color .12s ease, padding-left .12s ease; }
.krpd-footcol a:hover { color: #fff; padding-left: 4px; }

.krpd-footbar { background: #0b0e13; border-top: 1px solid rgba(255,255,255,.07); color: #8b95a3; }
.krpd-footbar__in {
  max-width: var(--krpd-container); margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 13px;
}
.krpd-footbar__in a { color: #8b95a3; text-decoration: none; }
.krpd-footbar__in a:hover { color: #fff; }
.krpd-footbar__cities { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; font-weight: 600; color: #c9d2dd; }
.krpd-footbar__cities span { color: var(--krpd-red); }

/* --- Welcome section tuning ------------------------------------------- */
/* Desktop: give the image column slightly more presence. The split is
   governed by the OUTER columns (text = d971225, image = 97b87f7); the inner
   wrapper (1f31ccb) must be left free or it traps the heading. */
@media (min-width: 1025px) {
  html.krp-enhanced .elementor-element-97b87f7 { flex: 1 1 55% !important; max-width: 55% !important; }
  html.krp-enhanced .elementor-element-d971225 { flex: 1 1 45% !important; max-width: 45% !important; }
}
/* Desktop + iPad: the "KRP Automotive Repair" sign fills the column width so
   it reads as wide as the copy below it. The inner text wrapper is
   `fit-content` (~292px), which trapped the heading; stretch it to the full
   column width and enlarge the heading to fill it. */
@media (min-width: 768px) {
  html.krp-enhanced .elementor-element-1f31ccb {
    width: 100% !important; max-width: 100% !important; align-self: stretch !important;
  }
  html.krp-enhanced .elementor-element-8c043a4,
  html.krp-enhanced .elementor-element-4aa5e9e { width: 100%; }
  html.krp-enhanced .elementor-element-8c043a4 .elementor-heading-title,
  html.krp-enhanced .elementor-element-4aa5e9e .elementor-heading-title { text-align: left; }
  html.krp-enhanced .elementor-element-4aa5e9e .elementor-heading-title {
    font-size: clamp(2rem, 4.3vw, 4.2rem) !important;
    line-height: 1.05 !important;
  }
}
/* Mobile: show the "Welcome to KRP" sign above the image. */
@media (max-width: 767px) {
  html.krp-enhanced .elementor-element-a6e1545 { --flex-direction: column !important; }
}

/* Very wide screens: let the composition breathe. */
@media (min-width: 1600px) {
  :root { --krpd-container: 1440px; }
}

/* ==========================================================================
   COMPACT HEADER  (< 1200px : tablet + mobile)
   ========================================================================== */
@media (max-width: 1199px) {
  .krpd-util { display: none; }
  .krpd-nav { display: none; }
  .krpd-actions { display: none; }
  .krpd-actions--compact { display: inline-flex; }
  .krpd-bar { padding: 10px 18px; gap: 12px; }
  .krpd-brand { margin-right: auto; }
  .krpd-brand img { height: 54px; }
  .krpd-header.is-stuck .krpd-brand img { height: 48px; }
  .krpd-actions--compact .krpd-btn { height: 46px; padding: 0 18px; }
}

/* Menu button appears only where the fixed bottom nav is absent. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .krpd-menu-btn { display: inline-flex; }
}

/* ==========================================================================
   TABLET  (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .krpd-menu-btn { display: none; }              /* nav via fixed bottom bar */
  .krpd-hero__inner { padding: 48px 22px; }
  .krpd-hero__title { font-size: clamp(1.95rem, 4.4vw, 2.6rem); }
  .krpd-footmain__in { grid-template-columns: 1fr; gap: 36px; }
  .krpd-footbrand { max-width: none; }
  .krpd-footcols { grid-template-columns: 1fr 1fr; gap: 30px; }
  .krpd-footlocs__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   PHONE  (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .krpd-bar { padding: 9px 14px; gap: 10px; }
  .krpd-brand img { height: 46px; }
  .krpd-header.is-stuck .krpd-brand img { height: 42px; }
  .krpd-actions--compact { gap: 8px; }
  .krpd-actions--compact .krpd-btn { height: 44px; padding: 0 14px; font-size: 14px; gap: 7px; flex: 0 1 auto; }

  /* Hero: shorter; the video now plays on mobile too. */
  .krpd-hero { min-height: clamp(440px, 76vh, 560px); }
  .krpd-hero__inner { padding: 40px 20px; }
  .krpd-hero__content { max-width: 100%; }
  .krpd-hero__title { font-size: clamp(1.95rem, 8vw, 2.6rem); }
  .krpd-hero__sub { font-size: 1.06rem; margin-bottom: 24px; }
  .krpd-hero__cta { gap: 10px; }
  .krpd-hero .krpd-btn { height: 52px; flex: 1 1 auto; }
  .krpd-hero__trust { gap: 12px 22px; margin-top: 26px; padding-top: 20px; }
  .krpd-hero__trust li { font-size: 13.5px; }

  /* Footer stacks cleanly. */
  .krpd-footcta__in { flex-direction: column; align-items: flex-start; gap: 20px; text-align: left; padding: 32px 20px; }
  .krpd-footcta__btns { width: 100%; }
  .krpd-footcta__btns .krpd-btn { flex: 1 1 auto; }
  .krpd-footmain__in { grid-template-columns: 1fr; gap: 30px; padding: 40px 20px 30px; }
  .krpd-footcols { grid-template-columns: 1fr; gap: 28px; }
  .krpd-footcol.krpd-footcol--links ul { columns: 2; }
  .krpd-footlocs__in { padding: 40px 20px; }
  .krpd-footlocs__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .krpd-footbar__in { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 560px) {
  .krpd-footlocs__grid { grid-template-columns: 1fr; }
}

/* Narrow phones: shorten the header actions to "Call" / "Book" so nothing
   clips, and keep them comfortable. */
@media (max-width: 480px) {
  .krpd-lbl-xs { display: none; }
  .krpd-actions--compact .krpd-btn { padding: 0 13px; font-size: 13.5px; gap: 7px; }
}
@media (max-width: 430px) {
  .krpd-brand img { height: 42px; }
  .krpd-actions--compact { gap: 6px; }
  .krpd-actions--compact .krpd-btn { padding: 0 12px; font-size: 13px; gap: 6px; }
  .krpd-actions--compact .krpd-btn svg { width: 16px; height: 16px; }
  .krpd-hero__cta { flex-direction: column; align-items: stretch; }
  .krpd-hero .krpd-btn { width: 100%; }
}
@media (max-width: 360px) {
  .krpd-brand img { height: 38px; }
  .krpd-actions--compact .krpd-btn { padding: 0 11px; }
}

/* ==========================================================================
   HOMEPAGE TWEAKS
   ========================================================================== */
/* Breathing room above the red "15-min / same-day / road-hazard" trust banner.
   Elementor drives the margin off the --margin-top custom property. */
html.krp-enhanced .elementor-element-5cac93e { --margin-top: 56px !important; margin-top: 56px !important; }
@media (max-width: 768px) {
  html.krp-enhanced .elementor-element-5cac93e { --margin-top: 32px !important; margin-top: 32px !important; }
}
/* Decorative red car graphic in the Lifetime Warranty section. */
html.krp-enhanced .elementor-element-178b782 img {
  width: 320px !important; max-width: 90% !important; height: auto !important;
}

/* Space above the Customer Testimonials section, and make the testimonial
   content column the same height as the photo beside it (stretch the row so
   both columns match, and vertically center the testimonial content). */
html.krp-enhanced .elementor-element-9cda52f { --margin-top: 60px !important; margin-top: 60px !important; }
html.krp-enhanced .elementor-element-40e30b8 { align-items: stretch !important; }
html.krp-enhanced .elementor-element-daa24a0 { justify-content: center !important; }
@media (max-width: 768px) {
  html.krp-enhanced .elementor-element-9cda52f { --margin-top: 40px !important; margin-top: 40px !important; }
}

/* Matching space below the Why Choose Us section. */
html.krp-enhanced .elementor-element-c96b37f { --margin-bottom: 60px !important; margin-bottom: 60px !important; }
@media (max-width: 768px) {
  html.krp-enhanced .elementor-element-c96b37f { --margin-bottom: 40px !important; margin-bottom: 40px !important; }
}

/* ==========================================================================
   HERO OVERLAY READABILITY — glass badge cards, Lifetime Warranty featured
   ========================================================================== */
.krpd-hero__sub { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.krpd-hero__eyebrow { box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.krpd-hero__badges {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: 640px;
}
.krpd-badge {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px;
  background: rgba(11,15,20,.58); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
}
.krpd-badge__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  background: rgba(52,160,207,.22); color: #8fd0ee;
}
.krpd-badge__ic svg { width: 21px; height: 21px; }
.krpd-badge__tx { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.krpd-badge__tx b { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.krpd-badge__tx small { color: #ccd4de; font-size: 12px; }
.krpd-badge--feature {
  background: linear-gradient(135deg, rgba(214,33,40,.94), rgba(170,25,31,.94));
  border-color: rgba(255,255,255,.3); box-shadow: 0 12px 32px rgba(214,33,40,.4);
}
.krpd-badge--feature .krpd-badge__ic { background: rgba(255,255,255,.22); color: #fff; }
.krpd-badge--feature .krpd-badge__tx small { color: #ffdedf; }

/* ==========================================================================
   SHARED REDESIGN PRIMITIVES  (krpx-*)
   ========================================================================== */
.krpx-wrap { max-width: var(--krpd-container); margin: 0 auto; padding: 0 24px; }
.krpx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  color: var(--krpd-red); font: 800 13px/1 var(--krpd-font);
  letter-spacing: .09em; text-transform: uppercase;
}
.krpx-eyebrow svg { width: 16px; height: 16px; }
.krpx-eyebrow .krpd-star { width: 15px; height: 15px; color: #f5a623; }
.krpx-eyebrow--light { color: #8fd0ee; }
.krpx-h2 {
  margin: 0 0 14px; color: var(--krpd-ink); font-family: var(--krpd-font);
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
}
.krpx-h2--light { color: #fff; }
.krpx-lead { margin: 0; color: var(--krpd-ink-2); font-size: clamp(1rem, 1.15vw, 1.14rem); line-height: 1.7; }
.krpx-lead--light { color: #c9d2dd; }

/* ==========================================================================
   REVIEWS SECTION  (directly below hero on the homepage)
   ========================================================================== */
.krpx-reviews { background: #fff; padding: clamp(48px, 6vw, 84px) 0; font-family: var(--krpd-font); }
.krpx-reviews__head { text-align: center; max-width: 780px; margin: 0 auto 42px; }
.krpx-reviews__head .krpx-eyebrow { justify-content: center; }
.krpx-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.krpx-review {
  background: #fff; border: 1px solid var(--krpd-line); border-radius: 18px; padding: 26px 24px;
  box-shadow: var(--krpd-shadow-sm); display: flex; flex-direction: column; gap: 14px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.krpx-review:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); }
.krpx-review__stars { display: flex; gap: 3px; color: #f5a623; }
.krpx-review__stars .krpd-star { width: 18px; height: 18px; }
.krpx-review__text { margin: 0; color: var(--krpd-ink-2); font-size: 15px; line-height: 1.65; flex: 1; }
.krpx-review__by { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--krpd-line-2); padding-top: 14px; }
.krpx-review__av {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: linear-gradient(135deg, var(--krpd-red), var(--krpd-red-dark));
  color: #fff; font-weight: 800; font-size: 17px; flex: none;
}
.krpx-review__meta { display: flex; flex-direction: column; line-height: 1.25; }
.krpx-review__meta b { color: var(--krpd-ink); font-size: 15px; }
.krpx-review__meta small { color: var(--krpd-muted); font-size: 12.5px; }
.krpx-reviews__cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
/* "Read More Reviews" is an <a> (the theme's global link colour tinted it dark-red
   on the red button); force its text + star white to match the button. */
.krpx-reviews__cta a.krpd-btn--primary,
.krpx-reviews__cta a.krpd-btn--primary svg { color: #fff !important; }
.krpx-reviews__cta a.krpd-btn--primary svg { fill: currentColor; stroke: currentColor; }

/* Google rating + ASE trust row */
.krpx-trustrow { display: inline-flex; align-items: stretch; gap: 14px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.krpx-google, .krpx-ase { display: inline-flex; align-items: center; gap: 13px; padding: 12px 20px; background: #fff; border: 1px solid var(--krpd-line); border-radius: 14px; box-shadow: var(--krpd-shadow-sm); }
.krpx-gicon { width: 26px; height: 26px; }
.krpx-google__g .krpx-gicon { width: 32px; height: 32px; }
.krpx-google__meta { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.krpx-google__label { font-size: 12.5px; font-weight: 700; color: var(--krpd-muted); letter-spacing: .02em; }
.krpx-google__rating { display: inline-flex; align-items: center; gap: 8px; }
.krpx-google__rating b { font-size: 23px; font-weight: 800; color: var(--krpd-ink); letter-spacing: -.01em; }
.krpx-google__stars { display: inline-flex; gap: 1px; color: #f5a623; }
.krpx-google__stars .krpd-star { width: 16px; height: 16px; }
.krpx-ase__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(214,33,40,.09); color: var(--krpd-red); }
.krpx-ase__ic svg { width: 23px; height: 23px; }
.krpx-ase__tx { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.krpx-ase__tx b { font-size: 15px; font-weight: 800; color: var(--krpd-ink); }
.krpx-ase__tx small { font-size: 12px; color: var(--krpd-muted); }

/* review card: top row (stars + verified) and Google mark */
.krpx-review__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.krpx-review__verified { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--krpd-blue-dark); background: rgba(52,160,207,.1); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.krpx-review__verified svg { width: 13px; height: 13px; }
.krpx-review__meta { flex: 1; }
.krpx-review__gicon { margin-left: auto; }
.krpx-review__gicon .krpx-gicon { width: 20px; height: 20px; }
.krpx-reviews__grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   HOMEPAGE REDESIGNED BODY  (vehicle-page design language)
   ========================================================================== */
.krpx-home { font-family: var(--krpd-font); }
.krpx-center { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
/* Beat .krpv-section__head's left margin so centered heads truly center. */
.krpv-section__head.krpx-center { margin-left: auto; margin-right: auto; }
.krpx-center .krpx-eyebrow { justify-content: center; }
.krpx-morebtn { margin-top: 36px; }
.krpd-btn--dark { color: var(--krpd-ink) !important; border-color: var(--krpd-line) !important; background: #fff !important; }
.krpd-btn--dark:hover { border-color: var(--krpd-red) !important; color: var(--krpd-red) !important; }
.krpv-why--3 { grid-template-columns: repeat(3, 1fr); gap: 26px 40px; }
.krpv-lead-grid--rev { grid-template-columns: .9fr 1.1fr; }
.krpx-center-chips { justify-content: center; }

/* Warranty band highlight cards */
.krpx-warrantyband__head { max-width: 760px; margin: 0 auto 38px; text-align: center; }
.krpx-warrantyband__head .krpx-eyebrow { justify-content: center; }
/* Warranty value cards — LIGHT card vocabulary (these sit on a white krpv-section,
   so they must read as clean white cards with dark type, not the dark-band styling
   they used before, which rendered white-on-white). Matches .krpx-infocard. */
.krpx-wcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.krpx-wcard { display: flex; flex-direction: column; background: var(--krpd-bg); border: 1px solid var(--krpd-line); border-radius: var(--krpd-r); padding: 28px 26px; box-shadow: var(--krpd-shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.krpx-wcard:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: #dfe3ea; }
.krpx-wcard__ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(214,33,40,.09); color: var(--krpd-red); margin-bottom: 16px; }
.krpx-wcard__ic svg { width: 26px; height: 26px; }
.krpx-wcard b { display: block; color: var(--krpd-ink); font-size: 1.14rem; font-weight: 700; margin-bottom: 9px; letter-spacing: -.01em; }
.krpx-wcard p { margin: 0; color: var(--krpd-ink-2); font-size: .97rem; line-height: 1.62; }
/* The SAME .krpx-wcard also appears inside the DARK reusable warranty band
   (homepage / location pages). There it must keep the dark-surface treatment —
   the light styling above is only correct on the white warranty-page section. */
.krpx-warrantyband .krpx-wcard { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.krpx-warrantyband .krpx-wcard:hover { border-color: rgba(255,255,255,.28); box-shadow: none; transform: translateY(-3px); }
.krpx-warrantyband .krpx-wcard__ic { background: var(--krpd-red); color: #fff; }
.krpx-warrantyband .krpx-wcard b { color: #fff; }
.krpx-warrantyband .krpx-wcard p { color: #c9d2dd; }
.krpx-warrantyband__cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* Location cards */
.krpx-loccards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.krpx-loccard { background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px; padding: 24px; box-shadow: var(--krpd-shadow-sm); transition: transform .16s ease, box-shadow .16s ease; }
.krpx-loccard:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); }
.krpx-loccard :is(h2,h3,h4) { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.krpx-loccard :is(h2,h3,h4) svg { width: 18px; height: 18px; color: var(--krpd-red); flex: none; }
.krpx-loccard__tel { display: inline-block; color: var(--krpd-red); font-weight: 800; font-size: 1.05rem; text-decoration: none; margin-bottom: 10px; }
.krpx-loccard p { margin: 0 0 4px; color: var(--krpd-ink-2); font-size: .9rem; line-height: 1.5; }
.krpx-loccard__hrs { color: var(--krpd-muted) !important; }
.krpx-loccard__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--krpd-red); font-weight: 700; font-size: .88rem; text-decoration: none; }
.krpx-loccard__link svg { width: 15px; height: 15px; }

/* Hide the old Elementor homepage sections (kept in DOM for SEO). */
html.krp-hp .elementor-80 > .e-con.e-parent { display: none !important; }

/* ==========================================================================
   SERVICE PAGE FAQ  (native <details> accordion, no JS)
   ========================================================================== */
.krpx-faq { background: #fff; padding: clamp(44px, 5.5vw, 78px) 0; font-family: var(--krpd-font); }
.krpx-faq__list { max-width: 860px; margin: 36px auto 0; display: flex; flex-direction: column; gap: 14px; }
.krpx-faq__item { background: #fff; border: 1px solid var(--krpd-line); border-radius: 14px; box-shadow: var(--krpd-shadow-sm); overflow: hidden; transition: box-shadow .16s ease, border-color .16s ease; }
.krpx-faq__item[open] { border-color: #dfe3ea; box-shadow: var(--krpd-shadow-md); }
.krpx-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 24px; font-weight: 700; font-size: 1.05rem; color: var(--krpd-ink); letter-spacing: -.01em; }
.krpx-faq__item summary::-webkit-details-marker { display: none; }
.krpx-faq__item summary:focus-visible { outline: none; box-shadow: var(--krpd-ring); border-radius: 10px; }
.krpx-faq__chev { flex: none; width: 22px; height: 22px; color: var(--krpd-red); transition: transform .2s ease; }
.krpx-faq__item[open] .krpx-faq__chev { transform: rotate(180deg); }
.krpx-faq__a { padding: 0 24px 22px; color: var(--krpd-ink-2); line-height: 1.7; font-size: .98rem; }
@media (max-width: 768px) {
  .krpx-faq__item summary { padding: 16px 18px; font-size: .98rem; }
  .krpx-faq__a { padding: 0 18px 18px; font-size: .95rem; }
}

/* ==========================================================================
   SERVICE / VEHICLE TRUST STRIP
   ========================================================================== */
.krpx-svctrust { background: #fff; border-bottom: 1px solid var(--krpd-line); font-family: var(--krpd-font); }
.krpx-trust { list-style: none; margin: 0; padding: 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.krpx-trust__item { display: flex; align-items: center; gap: 12px; }
.krpx-trust__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(214,33,40,.09); color: var(--krpd-red); flex: none; }
.krpx-trust__ic svg { width: 22px; height: 22px; }
.krpx-trust__tx { display: flex; flex-direction: column; line-height: 1.2; }
.krpx-trust__tx b { color: var(--krpd-ink); font-size: 15px; font-weight: 700; }
.krpx-trust__tx small { color: var(--krpd-muted); font-size: 12.5px; }

/* ==========================================================================
   WARRANTY + LOCATIONS + CTA  (dark band, service & vehicle pages)
   ========================================================================== */
.krpx-warranty { background: radial-gradient(1200px 400px at 80% -10%, rgba(52,160,207,.18), transparent 60%), #14171c; color: #fff; padding: clamp(48px, 6vw, 80px) 0; font-family: var(--krpd-font); }
.krpx-warranty__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 46px; align-items: center; }
.krpx-warranty__btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.krpx-warranty .krpd-btn--ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.35); }
.krpx-warranty .krpd-btn--ghost:hover { background: #fff; color: var(--krpd-ink); border-color: #fff; }
.krpx-warranty__locs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.krpx-loc { display: block; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); text-decoration: none; transition: background .14s ease, border-color .14s ease, transform .14s ease; }
.krpx-loc:hover { background: rgba(255,255,255,.09); border-color: rgba(52,160,207,.5); transform: translateY(-2px); }
.krpx-loc b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 700; }
.krpx-loc b svg { width: 16px; height: 16px; color: #ff6b70; }
.krpx-loc span { display: block; color: #aeb6c2; font-size: 13px; margin-top: 6px; }
.krpx-loc span.krpx-loc__tel { color: #8fd0ee; font-weight: 700; }

/* ==========================================================================
   SERVICES INDEX — premium, labeled service card grid.
   Replaces the unlabeled Elementor "loop-grid" photo gallery. The original
   loop-grid is HIDDEN (kept in the DOM for SEO + crawlable links) and this
   first-party grid — same photos, same destination links, now with a clear
   service name, dark gradient for contrast and a Learn More affordance — is the
   visible content. The whole card is one link.
   ========================================================================== */
html.krp-svcindex .elementor-widget-loop-grid { display: none !important; }
html.krp-svcindex section.e-con:has(.elementor-widget-loop-grid) { display: none !important; padding: 0 !important; margin: 0 !important; }

.krpx-svcgrid { background: var(--krpd-bg); padding: clamp(42px, 5vw, 74px) 0; font-family: var(--krpd-font); }
.krpx-svcgrid__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.krpx-svccard {
  position: relative; display: block; overflow: hidden;
  border-radius: 16px; aspect-ratio: 4 / 3;
  background: #14171c; box-shadow: var(--krpd-shadow-sm); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.krpx-svccard:hover { transform: translateY(-4px); box-shadow: var(--krpd-shadow-lg); }
.krpx-svccard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.krpx-svccard:hover .krpx-svccard__img { transform: scale(1.06); }
.krpx-svccard__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,13,.93) 0%, rgba(8,10,13,.58) 32%, rgba(8,10,13,.12) 62%, rgba(8,10,13,0) 100%); }
.krpx-svccard__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 5px; }
.krpx-svccard__title { color: #fff; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.krpx-svccard__more { display: inline-flex; align-items: center; gap: 6px; color: #ffd9da; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; max-height: 0; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, max-height .2s ease; }
.krpx-svccard__more svg { width: 15px; height: 15px; }
.krpx-svccard:hover .krpx-svccard__more, .krpx-svccard:focus-visible .krpx-svccard__more { opacity: 1; transform: translateY(0); max-height: 2em; }
.krpx-svccard::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--krpd-red); z-index: 2; transition: width .3s ease; }
.krpx-svccard:hover::after, .krpx-svccard:focus-visible::after { width: 100%; }
.krpx-svccard:focus-visible { outline: none; box-shadow: var(--krpd-ring), var(--krpd-shadow-md); }
/* Touch devices have no hover — always reveal the Learn More affordance. */
@media (hover: none) {
  .krpx-svccard__more { opacity: 1; transform: none; max-height: 2em; }
}
@media (max-width: 1100px) { .krpx-svcgrid__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .krpx-svcgrid__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .krpx-svccard__title { font-size: 1rem; } .krpx-svccard__cap { padding: 14px 14px 13px; } }
@media (max-width: 430px)  { .krpx-svcgrid__grid { grid-template-columns: 1fr; } .krpx-svccard { aspect-ratio: 16 / 9; } }

/* Lead-grid photos (home / about / vehicle intro): uniform 3:2 crop so authentic
   shop photos of any source ratio stay consistent and never cause layout shift. */
.krpv-lead-grid img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ==========================================================================
   VEHICLES MEGA MENU
   ========================================================================== */
.krpd-drop--mega-veh { width: 640px; }
/* Three equal columns. The makes read alphabetically COLUMN-MAJOR (top-to-bottom
   down col 1, then col 2, then col 3). A plain row-major grid is used and the
   injector emits the links pre-ordered so that filling left-to-right/top-to-
   bottom reproduces the column-major reading order — this is browser-agnostic
   and doesn't depend on grid-auto-flow (which a `grid` shorthand elsewhere in
   the cascade was resetting). See _column_major_fill() in the injector. */
.krpd-mega__grid--veh { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   VEHICLE / SERVICE PAGE CONTENT  (krpv-*)
   ========================================================================== */
.krpv { font-family: var(--krpd-font); color: var(--krpd-ink); }
.krpv-hero { position: relative; background: linear-gradient(120deg, #14171c 0%, #1c2430 60%, #23303f 100%); color: #fff; overflow: hidden; }
.krpv-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 320px at 85% 0%, rgba(52,160,207,.22), transparent 60%); pointer-events: none; }
.krpv-hero__in { position: relative; z-index: 1; max-width: var(--krpd-container); margin: 0 auto; padding: clamp(46px, 6vw, 84px) 24px; max-width: 860px; }
.krpv-crumbs { font-size: 13px; color: #9fb0c2; margin-bottom: 18px; }
.krpv-crumbs a { color: #c9d6e2; text-decoration: none; }
.krpv-crumbs a:hover { color: #fff; }
.krpv-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font: 800 12.5px/1 var(--krpd-font); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 18px; }
.krpv-hero__eyebrow svg { width: 15px; height: 15px; color: #8fd0ee; }
.krpv-hero h1 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.krpv-hero p { margin: 0 0 26px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: #dbe2ea; max-width: 640px; }
.krpv-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.krpv-section { padding: clamp(44px, 5.5vw, 78px) 0; }
.krpv-section--soft { background: var(--krpd-bg-soft); }
.krpv-section__head { max-width: 760px; margin: 0 0 36px; }
.krpv-lead-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.krpv-lead-grid img { width: 100%; height: auto; border-radius: 16px; display: block; }
.krpv-lead-grid p { color: var(--krpd-ink-2); font-size: 1.05rem; line-height: 1.75; margin: 0 0 16px; }

.krpv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.krpv-card { background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px; padding: 24px; box-shadow: var(--krpd-shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.krpv-card:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: #dfe3ea; }
.krpv-card__ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(214,33,40,.09); color: var(--krpd-red); margin-bottom: 14px; }
.krpv-card__ic svg { width: 24px; height: 24px; }
.krpv-card :is(h2,h3,h4) { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.krpv-card p { margin: 0; color: var(--krpd-ink-2); font-size: .95rem; line-height: 1.6; }
.krpv-card a.krpv-card__link { color: var(--krpd-red); font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; }
.krpv-card__link svg { width: 16px; height: 16px; flex: none; }
.krpv-related a svg { width: 17px; height: 17px; flex: none; }
.krpv-crumbs svg { width: 14px; height: 14px; }

.krpv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.krpv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--krpd-line); font-size: 14px; font-weight: 600; color: var(--krpd-ink); }
.krpv-chip svg { width: 15px; height: 15px; color: var(--krpd-red); }

.krpv-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.krpv-why__item { display: flex; gap: 14px; }
.krpv-why__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(52,160,207,.12); color: var(--krpd-blue-dark); flex: none; }
.krpv-why__ic svg { width: 21px; height: 21px; }
.krpv-why__item b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.krpv-why__item p { margin: 0; color: var(--krpd-ink-2); font-size: .95rem; line-height: 1.55; }

.krpv-related { display: flex; flex-wrap: wrap; gap: 12px; }
.krpv-related a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--krpd-line); text-decoration: none; color: var(--krpd-ink); font-weight: 600; font-size: 14.5px; transition: border-color .14s ease, color .14s ease, transform .14s ease; }
.krpv-related a:hover { border-color: var(--krpd-red); color: var(--krpd-red); transform: translateY(-2px); }

/* Service-body checklist (plain bullet lists parsed from the page's own copy) */
.krpv-checklist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 34px; max-width: 920px; }
.krpv-checklist li { display: flex; align-items: flex-start; gap: 11px; color: var(--krpd-ink-2); font-size: 1rem; line-height: 1.55; }
.krpv-checklist li svg { width: 20px; height: 20px; color: var(--krpd-red); flex: none; margin-top: 2px; }
.krpv-checklist li span { display: block; }
.krpv-checklist li span strong, .krpv-checklist li span b { color: var(--krpd-ink); }
/* Service body prose blocks between card/checklist groups read as an article column */
.krpx-bodywrap, .krp-servicepage .krpx-prose { max-width: 840px; }
.krp-servicepage .krpx-prose + .krpx-infocards, .krp-servicepage .krpx-infocards + .krpx-prose,
.krp-servicepage .krpv-checklist + .krpx-prose, .krp-servicepage .krpx-prose + .krpv-checklist { margin-top: 26px; }
@media (max-width: 760px) { .krpv-checklist { grid-template-columns: 1fr; gap: 11px; } }

/* ==========================================================================
   RESPONSIVE for the new components
   ========================================================================== */
@media (max-width: 1024px) {
  .krpx-reviews__grid:not(.krpx-reviews__grid--3), .krpv-cards { grid-template-columns: repeat(2, 1fr); }
  .krpx-warranty__in { grid-template-columns: 1fr; gap: 32px; }
  .krpv-lead-grid, .krpv-lead-grid--rev { grid-template-columns: 1fr; gap: 26px; }
  .krpv-why--3 { grid-template-columns: repeat(2, 1fr); }
  .krpx-loccards { grid-template-columns: repeat(2, 1fr); }
  .krpd-drop--mega-veh { width: 520px; }
  /* image-first lead grids: put image below the copy on stacked layouts */
  .krpv-lead-grid--rev > div:first-child { order: 2; }
}
/* Reviews: 3 across on desktop + large tablet, stacked below 900px. */
@media (max-width: 900px) {
  .krpx-reviews__grid--3 { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 768px) {
  .krpd-hero__badges { grid-template-columns: 1fr; gap: 10px; max-width: 100%; }
  .krpx-reviews__grid, .krpv-cards { grid-template-columns: 1fr; }
  .krpx-trust { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .krpx-warranty__locs { grid-template-columns: 1fr 1fr; }
  .krpv-why, .krpv-why--3 { grid-template-columns: 1fr; }
  .krpx-wcards { grid-template-columns: 1fr; }
  .krpx-loccards { grid-template-columns: 1fr; }
  /* Compact review cards on mobile — less padding, tighter gaps. */
  .krpx-reviews { padding: 40px 0; }
  .krpx-reviews__head { margin-bottom: 26px; }
  .krpx-review { padding: 16px 17px; gap: 9px; border-radius: 14px; }
  .krpx-review__text { font-size: 14px; line-height: 1.5; }
  .krpx-review__by { padding-top: 11px; gap: 10px; }
  .krpx-review__av { width: 36px; height: 36px; font-size: 14px; }
  .krpx-review__meta small { font-size: 12px; }
  .krpx-trustrow { gap: 10px; margin-top: 18px; }
  .krpx-google, .krpx-ase { padding: 9px 14px; gap: 10px; }
  .krpx-reviews__cta { margin-top: 26px; }
}
@media (max-width: 430px) {
  .krpx-trust { grid-template-columns: 1fr; }
  .krpx-warranty__locs { grid-template-columns: 1fr; }
  .krpx-trustrow { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   HOMEPAGE "BOOK NOW" CONVERSION BAND  (directly under the hero)
   High-visibility above-the-fold booking widget: bold brand-red band, the
   simple 4-step preview, and a large white Book button.
   ========================================================================== */
.krpx-bookbar { background: linear-gradient(120deg, var(--krpd-red) 0%, var(--krpd-red-dark) 100%); color: #fff; font-family: var(--krpd-font); padding: clamp(30px, 4vw, 50px) 0; position: relative; }
.krpx-bookbar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 240px at 88% -10%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; }
.krpx-bookbar__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .85fr; gap: 34px; align-items: center; }
.krpx-eyebrow--onred { color: #ffe0e1; justify-content: flex-start; }
.krpx-bookbar__h { margin: 0 0 10px; font-size: clamp(1.55rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.12; color: #fff; }
.krpx-bookbar__p { margin: 0 0 20px; color: #ffe0e1; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; max-width: 560px; }
.krpx-booksteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: step; }
.krpx-bookstep { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24); border-radius: 12px; padding: 11px 12px; }
.krpx-bookstep__n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--krpd-red); font-weight: 800; font-size: 13px; flex: none; }
.krpx-bookstep__ic { display: inline-flex; color: #fff; flex: none; }
.krpx-bookstep__ic svg { width: 20px; height: 20px; }
.krpx-bookstep__tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.krpx-bookstep__tx b { font-size: 13.5px; color: #fff; }
.krpx-bookstep__tx small { font-size: 11.5px; color: #ffd0d2; }
.krpx-bookbar__cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.krpx-bookbar__book { background: #fff !important; color: var(--krpd-red) !important; height: 58px; font-size: 17px; box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.krpx-bookbar__book:hover { background: #0d1013 !important; color: #fff !important; transform: translateY(-2px); }
.krpx-bookbar__call { background: rgba(255,255,255,.1) !important; color: #fff !important; border-color: rgba(255,255,255,.55) !important; height: 58px; }
.krpx-bookbar__call:hover { background: #fff !important; color: var(--krpd-red) !important; border-color: #fff !important; }
.krpx-bookbar__note { color: #ffd0d2; font-size: 12.5px; text-align: center; }

/* ==========================================================================
   ABOUT US — story timeline, founders, values
   ========================================================================== */
.krpx-about { font-family: var(--krpd-font); }
.krpx-tl { list-style: none; margin: 6px auto 0; padding: 0; max-width: 820px; position: relative; }
.krpx-tl::before { content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; background: var(--krpd-line); }
.krpx-tl__item { position: relative; display: flex; gap: 18px; padding-bottom: 24px; }
.krpx-tl__item:last-child { padding-bottom: 0; }
.krpx-tl__dot { position: relative; z-index: 1; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--krpd-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(214,33,40,.3); }
.krpx-tl__dot svg { width: 22px; height: 22px; }
.krpx-tl__card { background: #fff; border: 1px solid var(--krpd-line); border-radius: 14px; box-shadow: var(--krpd-shadow-sm); padding: 16px 20px; flex: 1; }
.krpx-tl__card b { display: block; font-size: 1.1rem; color: var(--krpd-ink); margin-bottom: 5px; letter-spacing: -.01em; }
.krpx-tl__card p { margin: 0; color: var(--krpd-ink-2); font-size: .96rem; line-height: 1.6; }

.krpx-leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.krpx-leader { margin: 0; background: #fff; border: 1px solid var(--krpd-line); border-radius: 18px; box-shadow: var(--krpd-shadow-sm); padding: 30px 24px; text-align: center; transition: transform .16s ease, box-shadow .16s ease; }
.krpx-leader:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); }
.krpx-leader__av { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; margin-bottom: 16px; background: linear-gradient(135deg, var(--krpd-red), var(--krpd-red-dark)); box-shadow: 0 10px 24px rgba(214,33,40,.28); overflow: hidden; }
.krpx-leader__av img { width: 100%; height: 100%; object-fit: cover; }
.krpx-mono { color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: .02em; }
.krpx-leader__cap b { display: block; font-size: 1.2rem; color: var(--krpd-ink); letter-spacing: -.01em; }
.krpx-leader__role { display: inline-block; margin: 7px 0 12px; padding: 3px 12px; border-radius: 999px; background: rgba(52,160,207,.12); color: var(--krpd-blue-dark); font-size: 12.5px; font-weight: 700; }
.krpx-leader__cap p { margin: 0; color: var(--krpd-ink-2); font-size: .95rem; line-height: 1.6; }
.krpv-why--2 { grid-template-columns: repeat(2, 1fr); gap: 16px 26px; }
.krpx-about-cta { text-align: center; max-width: 720px; margin: 0 auto; }
.krpx-about-cta .krpx-eyebrow { justify-content: center; }

/* ==========================================================================
   CAREERS — why-join cards + benefits
   ========================================================================== */
.krpx-careers { font-family: var(--krpd-font); }
.krpv-cards--4 { grid-template-columns: repeat(4, 1fr); }
.krpx-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.krpx-benefit { background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px; box-shadow: var(--krpd-shadow-sm); padding: 24px 22px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.krpx-benefit:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: #dfe3ea; }
.krpx-benefit__ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 13px; background: rgba(214,33,40,.09); color: var(--krpd-red); margin-bottom: 14px; }
.krpx-benefit__ic svg { width: 26px; height: 26px; }
.krpx-benefit b { display: block; font-size: 1.05rem; color: var(--krpd-ink); margin-bottom: 6px; letter-spacing: -.01em; }
.krpx-benefit p { margin: 0; color: var(--krpd-ink-2); font-size: .92rem; line-height: 1.55; }
.krpx-benefits__note { max-width: 840px; margin: 26px auto 0; display: flex; gap: 8px; align-items: flex-start; color: var(--krpd-muted); font-size: 13px; line-height: 1.55; }
.krpx-benefits__note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--krpd-blue-dark); }
.krpx-extnote { display: inline-flex; gap: 6px; align-items: center; justify-content: center; margin: 16px 0 0; color: #c9d2dd; font-size: 12.5px; }
.krpx-extnote svg { width: 14px; height: 14px; }

/* ==========================================================================
   SPECIALS — redesigned hero, location selector, coupon typography
   ========================================================================== */
.krpx-specials { font-family: var(--krpd-font); }
/* Hide the generic single-page title band; our hero owns the page H1. */
html.krp-specials [data-elementor-type="single-page"] > .e-con.e-parent:first-child { display: none !important; }
/* Bring the real Elementor coupon content into the design system's typeface. */
html.krp-specials [data-elementor-type="wp-page"] .elementor-heading-title,
html.krp-specials [data-elementor-type="wp-page"] .elementor-widget-text-editor,
html.krp-specials [data-elementor-type="wp-page"] .elementor-button { font-family: var(--krpd-font) !important; }
html.krp-specials [data-elementor-type="wp-page"] { padding-bottom: 20px; }

.krpx-specials__picker { background: var(--krpd-bg-soft); border-bottom: 1px solid var(--krpd-line); padding: clamp(26px, 3.5vw, 42px) 0; }
.krpx-locpick { max-width: 720px; margin: 0 auto; }
.krpx-locpick__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.krpx-locpick__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--krpd-ink); font-size: 1.02rem; }
.krpx-locpick__label svg { width: 18px; height: 18px; color: var(--krpd-red); }
.krpx-locselect { appearance: none; -webkit-appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; border: 2px solid var(--krpd-line); border-radius: 12px; padding: 12px 44px 12px 16px; font: 600 15px var(--krpd-font); color: var(--krpd-ink); min-width: 230px; min-height: 48px; cursor: pointer; }
.krpx-locselect:focus-visible { outline: none; box-shadow: var(--krpd-ring); border-color: var(--krpd-blue); }
.krpx-speccards { margin-top: 22px; }
.krpx-speccard { background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px; box-shadow: var(--krpd-shadow-sm); padding: 24px; text-align: center; max-width: 460px; margin: 0 auto; }
.krpx-speccard :is(h2,h3,h4) { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; }
.krpx-speccard :is(h2,h3,h4) svg { width: 18px; height: 18px; color: var(--krpd-red); }
.krpx-speccard__addr { margin: 0 0 10px; color: var(--krpd-ink-2); font-size: .95rem; }
.krpx-speccard__tel { display: inline-flex; align-items: center; gap: 7px; color: var(--krpd-red); font-weight: 800; font-size: 1.15rem; text-decoration: none; margin-bottom: 6px; }
.krpx-speccard__tel svg { width: 17px; height: 17px; }
.krpx-speccard__hrs { margin: 0 0 16px; color: var(--krpd-muted); font-size: .9rem; }
.krpx-speccard__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.krpx-locpick__note { display: flex; gap: 8px; align-items: flex-start; justify-content: center; text-align: center; margin: 18px auto 0; max-width: 620px; color: var(--krpd-muted); font-size: 13px; line-height: 1.5; }
.krpx-locpick__note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--krpd-blue-dark); }
.krpx-specials__intro { padding: clamp(34px, 4.5vw, 58px) 0 6px; }

/* ==========================================================================
   ABOUT / CAREERS — hide the original Elementor page content (kept in the DOM
   for SEO); our injected first-party experience is the visible content.
   ========================================================================== */
html.krp-about [data-elementor-type="single-page"] > .e-con.e-parent,
html.krp-careers [data-elementor-type="single-page"] > .e-con.e-parent { display: none !important; }

/* ==========================================================================
   LOCATION PAGES — consistent, full-bleed hero photo (fixes Hawthorne's 4:3
   image leaving white space; all four locations now match).
   ========================================================================== */
html.krp-loc .krp-lochero { width: 100% !important; max-width: 100% !important; }
html.krp-loc .krp-lochero > .elementor-widget-container { max-width: 100%; }
html.krp-loc .krp-lochero img {
  width: 100% !important; display: block;
  aspect-ratio: 16 / 6.4; object-fit: cover; object-position: center;
  border-radius: 16px; height: auto;
}
@media (max-width: 1024px) { html.krp-loc .krp-lochero img { aspect-ratio: 16 / 7.5; } }
@media (max-width: 768px)  { html.krp-loc .krp-lochero img { aspect-ratio: 16 / 9; border-radius: 12px; } }

/* ==========================================================================
   VEHICLES — A–Z filter bar
   ========================================================================== */
.krpv-az { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 760px; margin: 0 auto 12px; }
.krpv-az__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--krpd-line); background: #fff; color: var(--krpd-ink); font: 700 14px var(--krpd-font); cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.krpv-az__btn:hover:not(.is-disabled):not(.is-active) { border-color: var(--krpd-red); color: var(--krpd-red); }
.krpv-az__btn.is-active { background: var(--krpd-red); color: #fff; border-color: var(--krpd-red); box-shadow: 0 6px 14px rgba(214,33,40,.28); }
.krpv-az__btn.is-disabled { color: #c3c9d2; background: var(--krpd-bg-soft); cursor: default; pointer-events: none; }
.krpv-az__btn:focus-visible { outline: none; box-shadow: var(--krpd-ring); }
.krpv-az__all { min-width: auto; padding: 0 15px; font-weight: 800; }
.krpv-az__status { text-align: center; color: var(--krpd-muted); font-size: 13px; margin: 0 0 22px; min-height: 1.1em; }
.krpv-makegrid { margin-top: 2px; }
.krpv-az__empty { text-align: center; color: var(--krpd-ink-2); margin: 26px 0 0; font-size: 1rem; }
.krpv-az__reset { background: none; border: 0; color: var(--krpd-red); font-weight: 700; cursor: pointer; text-decoration: underline; font: inherit; }

/* ==========================================================================
   RESPONSIVE — new components
   ========================================================================== */
@media (max-width: 1024px) {
  .krpx-bookbar__in { grid-template-columns: 1fr; gap: 22px; }
  .krpx-bookbar__cta { flex-direction: row; flex-wrap: wrap; }
  .krpx-bookbar__cta .krpd-btn { flex: 1 1 auto; }
  .krpx-bookbar__note { flex-basis: 100%; }
  .krpx-benefits { grid-template-columns: repeat(2, 1fr); }
  .krpv-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .krpx-leaders { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 768px) {
  .krpx-booksteps { grid-template-columns: repeat(2, 1fr); }
  .krpx-leaders { grid-template-columns: 1fr; }
  .krpx-benefits { grid-template-columns: 1fr 1fr; }
  .krpv-why--2 { grid-template-columns: 1fr; }
  .krpx-tl__dot { width: 42px; height: 42px; }
  .krpx-tl__dot svg { width: 20px; height: 20px; }
  .krpx-tl::before { left: 20px; }
}
@media (max-width: 480px) {
  .krpx-booksteps { grid-template-columns: 1fr; }
  .krpx-benefits { grid-template-columns: 1fr; }
  .krpx-bookbar__cta { flex-direction: column; }
  .krpv-az__btn { min-width: 36px; height: 36px; font-size: 13px; }
}

/* ==========================================================================
   REDUCED MOTION — show the poster, never the moving video
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .krpd-hero__video { display: none !important; }
  .krpd-btn, .krpd-nav__link, .krpd-drop, .elementor-button, .elementor-widget-icon-box { transition: none !important; }
  .krpd-btn:hover, .elementor-button:hover, .elementor-widget-icon-box:hover { transform: none !important; }
  .krpx-leader, .krpx-benefit, .krpv-az__btn { transition: none !important; }
  .krpx-leader:hover, .krpx-benefit:hover { transform: none !important; }
}

/* ==========================================================================
   REFINEMENT PASS (9th) — split photographic heroes, location/warranty/contact
   redesign, blog redesign, footer "Get Directions" color. All new classes;
   nothing above is overridden except the scoped .krpd-floc__dir color.
   ========================================================================== */

/* --- Split photographic hero: dark navy + text left, fading into a KRP photo
   right (service, vehicle, location, warranty, contact, blog heroes). -------- */
.krpv { font-family: var(--krpd-font); }
/* Split hero = photograph BEHIND a full-width navy scrim (no navy|photo seam).
   The base is a FLAT navy identical to the scrim's opaque colour, so wherever the
   photo's left edge sits it is buried under matching opaque navy — nothing marks
   where "the image starts". */
.krpv-hero--split { position: relative; display: flex; align-items: center; min-height: clamp(400px, 40vw, 520px); background: #14171c; }
.krpv-hero--split::after { display: none; }               /* drop base cyan glow; photo owns the right */
.krpv-hero--split .krpv-hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--krpd-container); }
.krpv-hero--split .krpv-hero__content { position: relative; z-index: 2; max-width: 600px; }
/* BOTTOM LAYER — the photograph. Occupies the right of the hero but extends well
   to the left (its left edge, at 44%, stays under the opaque scrim at every
   width). */
.krpv-hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 0; overflow: hidden; }
.krpv-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kpos, 50% 50%); display: block; }
/* TOP LAYER — a FULL-WIDTH navy scrim over the whole hero: opaque #14171c through
   the text zone and past the photo's left edge (44%), then a long smooth fade to
   fully transparent so the photo is revealed on the right with NO vertical edge.
   Reaches 0 alpha on the right so the photograph is not over-darkened; a faint
   bottom vignette only grounds the base. */
.krpv-hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      #14171c 0%, #14171c 44%,
      rgba(20,23,28,.86) 53%,
      rgba(20,23,28,.52) 64%,
      rgba(20,23,28,.24) 77%,
      rgba(20,23,28,.07) 89%,
      rgba(20,23,28,0) 100%),
    linear-gradient(0deg, rgba(20,23,28,.20) 0%, rgba(20,23,28,0) 24%); }
.krpv-hero__facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.krpv-hero__facts li { display: flex; align-items: center; gap: 10px; color: #dbe2ea; font-size: 15px; }
.krpv-hero__facts li svg { width: 18px; height: 18px; color: #8fd0ee; flex: none; }
.krpv-hero__facts a { color: #8fd0ee; text-decoration: none; font-weight: 700; }
.krpv-hero__facts a:hover { color: #fff; }
/* Tablet + phone (<=1024px): full-bleed photograph behind a strong, EVEN overlay
   — same "photo behind navy" principle, just stacked, with the text kept highly
   readable over the top. The single continuous photo + single continuous overlay
   means there is no seam here either. */
@media (max-width: 1024px) {
  .krpv-hero--split { min-height: 0; display: block; background: #14171c; }
  .krpv-hero--split .krpv-hero__photo { width: 100%; }
  .krpv-hero--split .krpv-hero__content { max-width: none; }
  .krpv-hero__fade { inset: 0; background:
    linear-gradient(180deg, rgba(20,23,28,.80) 0%, rgba(20,23,28,.72) 46%, rgba(20,23,28,.90) 100%),
    linear-gradient(90deg, rgba(20,23,28,.34) 0%, rgba(20,23,28,.06) 100%); }
}

/* --- Static info cards (location feature sections) ------------------------- */
.krpx-infocards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.krpx-infocard { background: var(--krpd-bg); border: 1px solid var(--krpd-line); border-radius: var(--krpd-r); padding: 24px 22px; box-shadow: var(--krpd-shadow-sm); }
.krpx-infocard__ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(214,33,40,.08); color: var(--krpd-red); margin-bottom: 14px; }
.krpx-infocard__ic svg { width: 24px; height: 24px; }
.krpx-infocard :is(h2,h3,h4) { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; color: var(--krpd-ink); }
.krpx-infocard p { margin: 0 0 8px; color: var(--krpd-ink-2); font-size: .97rem; line-height: 1.62; }
.krpx-infocard p:last-child { margin-bottom: 0; }
.krpx-prose { max-width: 840px; }
.krpx-prose .krpx-subh { font-size: 1.25rem; font-weight: 700; color: var(--krpd-ink); margin: 0 0 10px; }
.krpx-prose p { color: var(--krpd-ink-2); line-height: 1.7; margin: 0 0 14px; }

/* --- Location / contact info + map card ------------------------------------ */
.krpx-locinfo { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; align-items: stretch; background: var(--krpd-bg); border: 1px solid var(--krpd-line); border-radius: var(--krpd-r-lg); box-shadow: var(--krpd-shadow-md); overflow: hidden; }
.krpx-locinfo__body { padding: 30px; }
.krpx-locinfo__name { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 1.35rem; font-weight: 800; color: var(--krpd-ink); }
.krpx-locinfo__name svg { width: 22px; height: 22px; color: var(--krpd-red); flex: none; }
.krpx-locinfo__addr { margin: 0 0 12px; color: var(--krpd-ink-2); }
.krpx-locinfo__tel { display: inline-flex; align-items: center; gap: 8px; font-size: 1.22rem; font-weight: 800; color: var(--krpd-red); text-decoration: none; }
.krpx-locinfo__tel svg { width: 18px; height: 18px; }
.krpx-locinfo__hrs { display: flex; align-items: center; gap: 8px; color: var(--krpd-ink-2); margin: 12px 0 0; font-size: .95rem; }
.krpx-locinfo__hrs svg { width: 16px; height: 16px; color: var(--krpd-blue); flex: none; }
.krpx-locinfo__hrs--muted { color: var(--krpd-muted); margin-top: 4px; }
.krpx-locinfo__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.krpx-locmap { width: 100%; min-height: 300px; height: 100%; border: 0; display: block; filter: grayscale(.12); }
.krpx-contactgrid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 992px) { .krpx-contactgrid { grid-template-columns: 1fr 1fr; } }

/* --- Warranty panels (verbatim legal copy, on-brand) ---------------------- */
.krpx-wpanels { display: grid; gap: 18px; max-width: 940px; margin: 0 auto; }
.krpx-wpanel { background: var(--krpd-bg); border: 1px solid var(--krpd-line); border-left: 4px solid var(--krpd-blue); border-radius: var(--krpd-r); padding: 26px 28px; box-shadow: var(--krpd-shadow-sm); }
.krpx-wpanel__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.28rem; font-weight: 800; color: var(--krpd-ink); }
.krpx-wpanel__h svg { width: 22px; height: 22px; color: var(--krpd-blue); flex: none; }
.krpx-wpanel p { margin: 0 0 12px; color: var(--krpd-ink-2); line-height: 1.72; }
.krpx-wpanel p:last-child { margin-bottom: 0; }
.krpx-wpanel--feature { border-left-color: var(--krpd-red); background: linear-gradient(180deg, rgba(214,33,40,.05), transparent 55%); }
.krpx-wpanel--feature .krpx-wpanel__h svg { color: var(--krpd-red); }
.krpx-wpanel--fine { border-left-color: var(--krpd-muted); background: var(--krpd-bg-soft); }
.krpx-wpanel--fine p { font-size: .92rem; }

@media (max-width: 900px) {
  .krpx-infocards { grid-template-columns: 1fr 1fr; }
  .krpx-locinfo { grid-template-columns: 1fr; }
  .krpx-locmap { min-height: 240px; }
}
@media (max-width: 600px) { .krpx-infocards { grid-template-columns: 1fr; } }

/* --- Vehicle "Common Issues" cards (whole card is a link to a service) ----- */
.krpv-issue :is(h2,h3,h4) { line-height: 1.25; }
.krpv-issue p { min-height: 0; }

/* Blog & Specials content sat in a ~59%-wide LEFT column (leftover of the old
   posts+sidebar / offset row = shared container 8b10672). Make that column full
   width so the post grid / coupon grid fill the page and CENTER in the content
   container. Scoped to these two page types. */
.krp-blog .elementor-element-8b10672,
.krp-specials .elementor-element-8b10672 { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; margin-left: auto; margin-right: auto; }

/* --- BLOG: modern article-card archive + readable post typography --------- */
.krp-blog .elementor-widget-posts { max-width: var(--krpd-container); margin-left: auto; margin-right: auto; }
/* breathing room above the pagination at the foot of the archive */
.krp-blog .elementor-pagination { margin-top: 40px; text-align: center; }
.krp-blog .elementor-posts-container { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.krp-blog .elementor-post { position: relative; margin: 0; background: #fff; border: 1px solid var(--krpd-line); border-radius: var(--krpd-r); overflow: hidden; box-shadow: var(--krpd-shadow-sm); display: flex; flex-direction: column; padding-top: 172px; transition: transform .16s ease, box-shadow .16s ease; }
.krp-blog .elementor-post:hover { transform: translateY(-4px); box-shadow: var(--krpd-shadow-md); }
.krp-blog .elementor-post__thumbnail { display: none !important; }
.krp-blog .elementor-post::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 172px; background-size: cover; background-position: center; background-color: #1c2430; }
.krp-blog .elementor-post:nth-child(5n+1)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img6552.webp); }
.krp-blog .elementor-post:nth-child(5n+2)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img3612.webp); }
.krp-blog .elementor-post:nth-child(5n+3)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img6595.webp); }
.krp-blog .elementor-post:nth-child(5n+4)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img6575.webp); }
.krp-blog .elementor-post:nth-child(5n+5)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img6572.webp); }
.krp-blog .elementor-post__text { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; border: 0; }
.krp-blog .elementor-post__title { font-size: 1.14rem; line-height: 1.34; margin: 0 0 10px; font-weight: 700; }
.krp-blog .elementor-post__title a { color: var(--krpd-ink); text-decoration: none; }
.krp-blog .elementor-post__title a:hover { color: var(--krpd-red); }
.krp-blog .elementor-post__meta-data { font-size: .82rem; color: var(--krpd-muted); margin-bottom: 10px; }
.krp-blog .elementor-post__excerpt { margin-bottom: 14px; }
.krp-blog .elementor-post__excerpt p { font-size: .95rem; color: var(--krpd-ink-2); line-height: 1.6; margin: 0; }
.krp-blog .elementor-post__read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--krpd-red); font-weight: 700; text-decoration: none; border: 0; padding: 0; }
.krp-blog .elementor-post__read-more:hover { gap: 9px; }
/* the demoted "Blog" title band (if any) — keep it out of the way of the hero */
.krp-blog .elementor-widget-theme-page-title, .krp-blog .elementor-widget-archive-title { display: none; }
/* leftover Elementor promo/contact block (redundant with the new hero + CTA band
   + footer; also carried an out-of-date phone) — hidden on blog index & posts */
.krp-blog .elementor-element-8ee5d5b, .krp-blog .elementor-element-771c522,
.krp-post .elementor-element-8ee5d5b, .krp-post .elementor-element-771c522 { display: none !important; }
/* The desktop-only right-side sidebar container (e1019fd) wraps the redundant
   "Book Service Now" button + promo (templates 4587/6730, already hidden). Its
   EMPTY 313px column still pushed the blog posts AND specials coupons into a
   narrow left column. Hidden site-wide so that content fills and centers. Kept in
   DOM for SEO; legitimate header/footer/in-page CTAs are unaffected. */
.krp-enhanced .elementor-element-e1019fd { display: none !important; }
/* Legacy SHARED Elementor library blocks embedded on ~79 pages (brake/exhaust/
   battery service pages, about, specials, blog, blog posts): a redundant
   "Book Service Now" button (template 4587) and a promo/contact block (template
   6730) that carried an OUT-OF-DATE phone number. Both are fully redundant with
   the redesigned header, footer, in-page CTAs and warranty band — and they'd read
   as old-template remnants beneath the redesigned bodies. Hidden site-wide (kept
   in the DOM for SEO/no-JS). The legitimate KRP Book Service / Call CTAs in the
   header, footer, bookbar and SVCCTA band are unaffected. */
.krp-enhanced div[data-elementor-type="container"][data-elementor-id="4587"],
.krp-enhanced div[data-elementor-type="container"][data-elementor-id="6730"] { display: none !important; }

.krp-post .elementor-widget-theme-post-featured-image { display: none; }
.krp-post .elementor-widget-theme-post-title h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em; color: var(--krpd-ink); max-width: 820px; margin-left: auto; margin-right: auto; }
.krp-post .elementor-widget-post-info { max-width: 820px; margin-left: auto; margin-right: auto; color: var(--krpd-muted); }
.krp-post .elementor-widget-theme-post-content { max-width: 780px; margin-left: auto; margin-right: auto; }
.krp-post .elementor-widget-theme-post-content p { font-size: 1.07rem; line-height: 1.8; color: var(--krpd-ink-2); margin: 0 0 18px; }
.krp-post .elementor-widget-theme-post-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 36px 0 14px; color: var(--krpd-ink); line-height: 1.2; }
.krp-post .elementor-widget-theme-post-content h3 { font-size: 1.3rem; margin: 26px 0 10px; color: var(--krpd-ink); }
.krp-post .elementor-widget-theme-post-content ul, .krp-post .elementor-widget-theme-post-content ol { max-width: 780px; margin: 0 auto 18px; padding-left: 24px; }
.krp-post .elementor-widget-theme-post-content li { line-height: 1.8; color: var(--krpd-ink-2); margin-bottom: 8px; }
.krp-post .elementor-widget-theme-post-content a { color: var(--krpd-red); text-decoration: underline; text-underline-offset: 2px; }
.krp-post .elementor-widget-theme-post-content img { border-radius: var(--krpd-r); }

@media (max-width: 1000px) { .krp-blog .elementor-posts-container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .krp-blog .elementor-posts-container { grid-template-columns: 1fr; } }

/* --- Footer location "Get Directions" — WHITE (scoped to footer loc items) - */
.krpd-footer .krpd-floc__dir { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.34); color: #ffffff !important; }
.krpd-footer .krpd-floc__dir svg { color: #ffffff; }
.krpd-footer .krpd-floc__dir:hover, .krpd-footer .krpd-floc__dir:focus-visible { background: #ffffff; color: var(--krpd-ink) !important; border-color: #ffffff; }
.krpd-footer .krpd-floc__dir:hover svg, .krpd-footer .krpd-floc__dir:focus-visible svg { color: var(--krpd-red); }

/* ==========================================================================
   2026-10-01 ORGANIC PASS (Dawson): readability, full-width service copy,
   footer rebuilt to the autoservicefairfax.com pattern, inline links.
   ========================================================================== */
/* Larger text everywhere copy is read. */
html.krp-enhanced .elementor-kit-9, html.krp-enhanced .krpv, html.krp-enhanced .krpx-home, html.krp-enhanced .krpx-about { font-size: 17px; }
.krpx-lead { font-size: 1.2rem; line-height: 1.65; }
.krpx-prose p, .krpx-prose li { font-size: 1.12rem; line-height: 1.75; }
.krpx-prose .krpx-subh { font-size: 1.4rem; }
.krpx-infocard p { font-size: 1.04rem; line-height: 1.65; }
.krpx-infocard :is(h2,h3,h4) { font-size: 1.2rem; }
.krpv-checklist li { font-size: 1.08rem; line-height: 1.6; }
.krpv-why__item p { font-size: 1.02rem; }
.krpx-faq__a { font-size: 1.08rem; line-height: 1.7; }
.krpx-faq__item summary { font-size: 1.12rem; }
.krpv-lead-grid p, .krpv-section p.krpx-cross { font-size: 1.12rem; line-height: 1.75; }
.krpx-h2 { font-size: clamp(1.75rem, 2.6vw, 2.35rem); }
/* Service and vehicle body copy runs the full content width (was an 840px column with empty space beside it). */
.krpx-prose, .krp-servicepage .krpx-prose, .krpx-bodywrap { max-width: none; }
.krpv-checklist { max-width: none; }
.krpv-section__head .krpx-lead { max-width: none; }
/* Prose-only sections are set as a split: copy beside an authentic shop photo. */
.krpx-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.krpx-split--rev > .krpx-split__media { order: -1; }
.krpx-split__media img { width: 100%; height: 100%; min-height: 280px; max-height: 420px; object-fit: cover; border-radius: var(--krpd-r); box-shadow: var(--krpd-shadow-md); display: block; }
.krpx-split .krpx-prose { max-width: none; }
@media (max-width: 900px) { .krpx-split { grid-template-columns: 1fr; } .krpx-split--rev > .krpx-split__media { order: 0; } .krpx-split__media img { max-height: 300px; } }
/* Inline contextual links inside copy. */
.krpv p a:not(.krpd-btn), .krpv li a:not(.krpd-btn), .krpx-home p a:not(.krpd-btn), .krpx-about p a:not(.krpd-btn), .krpx-faq__a a, .krpx-prose a, .krpx-cross a { color: var(--krpd-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
.krpv p a:not(.krpd-btn):hover, .krpx-prose a:hover, .krpx-cross a:hover { color: var(--krpd-red-dark); text-decoration-thickness: 2px; }
.krpx-warranty p a, .krpx-h2--light + p a, .krpx-lead--light a { color: #fff; }
/* Cross-reference paragraph at the end of a service body. */
.krpx-cross { margin: 26px 0 0; padding: 22px 26px; border-left: 4px solid var(--krpd-red); background: var(--krpd-bg-soft); border-radius: 0 var(--krpd-r) var(--krpd-r) 0; }
/* Carfax photo inside the dark warranty band. */
.krpx-wphoto { margin: 28px auto 0; max-width: 680px; border-radius: var(--krpd-r); overflow: hidden; box-shadow: var(--krpd-shadow-lg); }
/* The award photo is a landscape shelf shot, so it fills the frame cleanly.
   Keep this box landscape: a tall photo here crops to a zoomed band. */
.krpx-wphoto img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto;
  object-fit: cover; object-position: 50% 58%; background: #0e1218; }
.krpx-wphoto figcaption { background: #0e1218; color: #c9d2dd; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 10px 14px; font-weight: 700; }

/* ---- Footer (autoservicefairfax.com pattern) ---- */
.krpf-visit { background: #0b0e13; color: #fff; border-top: 1px solid rgba(255,255,255,.06); }
.krpf-visit__in { max-width: var(--krpd-container); margin: 0 auto; padding: clamp(44px, 5vw, 68px) 24px clamp(36px, 4vw, 56px); }
/* Dawson, 2026-10-06: the intro line sat hard against the first row of cards */
.krpf-visit__head { margin-bottom: clamp(28px, 3vw, 40px); }
.krpf-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: #c9d2dd; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.krpf-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--krpd-red); display: inline-block; }
.krpf-visit__title { margin: 10px 0 0; color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.krpf-visit__sub { margin: 10px 0 0; max-width: 760px; color: #aeb6c2; font-size: 1.02rem; line-height: 1.6; }
.krpf-visit__sub a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.krpf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.krpf-loc { display: flex; flex-direction: column; gap: 10px; }
.krpf-loc__name { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; }
.krpf-loc__name a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.krpf-loc__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.krpf-loc__name svg { width: 18px; height: 18px; color: var(--krpd-red); }
.krpf-loc--blue .krpf-loc__name svg { color: #8fbdf8; }
.krpf-detail { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: inherit; text-decoration: none; }
.krpf-detail--link { transition: background 120ms ease, border-color 120ms ease; }
.krpf-detail--link:hover, .krpf-detail--link:focus-visible { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.krpf-detail--link:hover em { text-decoration: underline; }
.krpf-detail__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(214,33,40,.2); color: #ff8079; }
.krpf-detail__icon svg { width: 18px; height: 18px; }
.krpf-loc--blue .krpf-detail__icon { background: rgba(52,160,207,.22); color: #8fd0ee; }
.krpf-detail > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.krpf-detail small { color: #8b95a3; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.krpf-detail b { color: rgba(255,255,255,.92); font-weight: 500; font-size: 15px; line-height: 1.45; }
.krpf-detail em { font-style: normal; color: #ff6b66; font-weight: 600; font-size: 14px; margin-top: 2px; }
.krpf-loc__more { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; color: #c9d2dd; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.krpf-loc__more svg { width: 14px; height: 14px; }
.krpf-loc__more:hover { color: #fff; }
.krpf-flagbar { display: block; height: 4px; max-width: var(--krpd-container); margin: 0 auto; background: linear-gradient(90deg, var(--krpd-blue) 0 33.33%, #fff 33.33% 66.66%, var(--krpd-red) 66.66% 100%); }
.krpf-bottom { background: #0b0e13; color: #8b95a3; }
.krpf-bottom__in { max-width: var(--krpd-container); margin: 0 auto; padding: 18px 24px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.krpf-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.krpf-legal span, .krpf-legal a { color: #8b95a3; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.krpf-legal a:hover { color: #fff; }
.krpf-socials { display: flex; gap: 10px; }
.krpf-socials a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #0b0e13; text-decoration: none; }
.krpf-socials a:hover { background: var(--krpd-red); color: #fff; }
.krpf-socials svg { width: 16px; height: 16px; }
/* The footer's own CTA band and the old location/link blocks are retired. */
.krpd-footlocs, .krpd-footmain, .krpd-footbar { display: none !important; }
@media (max-width: 1024px) { .krpf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .krpf-grid { grid-template-columns: 1fr; } .krpf-bottom__in { flex-direction: column; align-items: center; text-align: center; } .krpf-legal { justify-content: center; } }
/* Section heads on service pages read wider now that the body copy runs full width. */
.krp-servicepage .krpv-section__head:not(.krpx-center) { max-width: 980px; }
.krpv-section__head--wide { max-width: none !important; margin-bottom: 22px !important; }
/* The split hero needs the same top clearance as the plain hero under the sticky header. */
.krpv-hero--split .krpv-hero__in { padding-top: clamp(46px, 6vw, 84px); padding-bottom: clamp(46px, 6vw, 84px); }
/* Area pages (template 3071): the post content sat in a ~60% left column beside an empty sidebar column. Full width, larger type. */
html.krp-enhanced .elementor-3071 .elementor-element-8b10672 { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }
html.krp-enhanced .elementor-3071 .elementor-element-e1019fd { display: none !important; }
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content { font-size: 1.08rem; line-height: 1.75; }
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content h2:not(.krpo__title) { font-size: 1.5rem; margin-top: 1.6em; }
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content a { color: var(--krpd-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Town pages, shop sections, ratings (2026-10-01) */
.krpx-rating { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.krpv-hero__facts .krpx-rating { color: #fff; }
.krpx-infocards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .krpx-infocards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .krpx-infocards--4 { grid-template-columns: 1fr; } }
a.krpx-infocard--link { text-decoration: none; color: inherit; display: block; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
a.krpx-infocard--link:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: var(--krpd-red); }
a.krpx-infocard--link h3 { color: var(--krpd-red); }
.krpv-chip small { color: var(--krpd-muted); font-weight: 500; margin-left: 4px; }
.krp-areapage .krpv-lead-grid .krpx-locinfo { height: 100%; }
.krpd-hero__video[preload="none"]:not([src]) { background: transparent; }

/* ==========================================================================
   ORPHAN-FREE CARD GRIDS (2026-10-01). A 3-up grid with 5 cards left an empty
   slot; now 2 leftover cards split the last row, 4 cards sit 2x2, 7 cards go
   3+2+2, a lone leftover spans the row. Mobile keeps its own column counts.
   ========================================================================== */
@media (min-width: 901px) {
  .krpx-infocards:not(.krpx-infocards--4), .krpv-cards, .krpx-wcards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .krpx-infocards:not(.krpx-infocards--4) > *, .krpv-cards > *, .krpx-wcards > * { grid-column: span 2; }
  /* two leftovers (5, 8, 11 cards): last two span half the row each */
  .krpx-infocards:not(.krpx-infocards--4):has(> :nth-child(3n+2):last-child) > :nth-last-child(-n+2),
  .krpv-cards:has(> :nth-child(3n+2):last-child) > :nth-last-child(-n+2),
  .krpx-wcards:has(> :nth-child(3n+2):last-child) > :nth-last-child(-n+2) { grid-column: span 3; }
  /* exactly four: 2x2 */
  .krpx-infocards:not(.krpx-infocards--4):has(> :nth-child(4):last-child) > *,
  .krpv-cards:has(> :nth-child(4):last-child) > *,
  .krpx-wcards:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
  /* one leftover with 7+ cards: last four go 2+2 */
  .krpx-infocards:not(.krpx-infocards--4):has(> :nth-child(3n+1):nth-child(n+7):last-child) > :nth-last-child(-n+4),
  .krpv-cards:has(> :nth-child(3n+1):nth-child(n+7):last-child) > :nth-last-child(-n+4),
  .krpx-wcards:has(> :nth-child(3n+1):nth-child(n+7):last-child) > :nth-last-child(-n+4) { grid-column: span 3; }
  /* a single card spans the row */
  .krpx-infocards:not(.krpx-infocards--4):has(> :first-child:last-child) > *, .krpx-wcards:has(> :first-child:last-child) > * { grid-column: span 6; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .krpx-infocards:not(.krpx-infocards--4):has(> :nth-child(odd):last-child) > :last-child { grid-column: span 2; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .krpv-cards:has(> :nth-child(odd):last-child) > :last-child { grid-column: span 2; }
}


/* ---------------------------------------------------------------------------
   LOCATION HERO (Dawson, 2026-10-01: "we can't even see the location").
   The standard split hero hides a storefront behind the scrim: the photo starts
   at 44% and the navy stays near-opaque to 64%, so only a sliver shows. On the
   four shop pages the storefront IS the point, so the photograph runs full
   width and the scrim only darkens the column the text sits in, fading out
   well before the building.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .krpv-hero--loc .krpv-hero__photo { width: 100%; }
  .krpv-hero--loc .krpv-hero__fade {
    background:
      linear-gradient(90deg,
        rgba(20,23,28,.96) 0%,
        rgba(20,23,28,.94) 26%,
        rgba(20,23,28,.80) 38%,
        rgba(20,23,28,.46) 50%,
        rgba(20,23,28,.18) 62%,
        rgba(20,23,28,.04) 76%,
        rgba(20,23,28,0) 100%),
      linear-gradient(0deg, rgba(20,23,28,.26) 0%, rgba(20,23,28,0) 30%); }
  .krpv-hero--loc .krpv-hero__content { max-width: 520px; }
}

/* A portrait photo in the intro grid stretched the row and stranded the copy in
   the middle of a tall column (Dawson, 2026-10-01). Cap the photo's height and
   let the text start at the top of the row. */
@media (min-width: 901px) {
  .krpv-lead-grid { align-items: start; }
  .krpv-lead-grid > div:last-child { align-self: stretch; }
  .krpv-lead__img { max-height: 480px; height: 100%; object-fit: cover; }
}

/* Shop hero, mirrored: text and scrim on the RIGHT so the photograph is revealed
   on the LEFT. Used where the building and signage sit left of centre
   (Dawson, 2026-10-01: "flip it so we can see the sign and building more"). */
@media (min-width: 1025px) {
  .krpv-hero--flip .krpv-hero__in { display: flex; justify-content: flex-end; }
  .krpv-hero--flip .krpv-hero__content { max-width: 520px; }
  .krpv-hero--flip .krpv-hero__fade {
    background:
      linear-gradient(270deg,
        rgba(20,23,28,.96) 0%,
        rgba(20,23,28,.94) 26%,
        rgba(20,23,28,.80) 38%,
        rgba(20,23,28,.46) 50%,
        rgba(20,23,28,.18) 62%,
        rgba(20,23,28,.04) 76%,
        rgba(20,23,28,0) 100%),
      linear-gradient(0deg, rgba(20,23,28,.26) 0%, rgba(20,23,28,0) 30%); }
}


/* Mobile readability: the footer legal row and coupon fine print were the only
   12px text left on the site (Dawson asked for larger text throughout). */
@media (max-width: 900px) {
  .krpf-legal span, .krpf-legal a, .krpf-bottom, .krpd-footbar { font-size: 13px; }
  .krpd-floc__addr, .krpd-floc__hrs, .krpd-floc__more { font-size: 14px; }
  .krpx-specials small, .krpx-coupon small, .krpx-coupon__fine, .krpx-fine { font-size: 13px; }
  .krpd-badge__tx small, .krpx-ase__tx small, .krpx-review__meta small { font-size: 13px; }
}


/* ---------------------------------------------------------------------------
   SPECIALS hero. The boxed photo beside the copy read as a stock slot, so the
   shop's own flag now runs full width behind the same scrim the shop pages use,
   with a three-stripe rule picking up the flag's colours.
   --------------------------------------------------------------------------- */
.krpx-flagrule { display: flex; gap: 6px; margin: 0 0 18px; }
.krpx-flagrule i { display: block; width: 34px; height: 5px; border-radius: 3px; }
.krpx-flagrule i:nth-child(1) { background: var(--krpd-red); }
.krpx-flagrule i:nth-child(2) { background: #fff; }
.krpx-flagrule i:nth-child(3) { background: #34a0cf; }
.krpx-specbullets { list-style: none; margin: 20px 0 4px; padding: 0; display: grid; gap: 10px; }
.krpx-specbullets li { display: flex; align-items: center; gap: 10px; color: #e7ecf3; font-size: 1.02rem; }
.krpx-specbullets li svg { width: 18px; height: 18px; flex: none; color: #8fd0ee; }
@media (min-width: 1025px) { .krpx-spechero .krpv-hero__content { max-width: 560px; } }
@media (max-width: 900px) {
  html.krp-specials .elementor-widget-text-editor p { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY AND RHYTHM (Dawson, 2026-10-02). Section headings were 28px
   against First Call's 32px, and sections sat too close together, so the bold
   headings never read as the start of something new. Matched to First Call's
   scale and given more air above each heading.
   --------------------------------------------------------------------------- */
/* Elementor's global kit caps every heading (.elementor-kit-9 h2 at 28px) and
   outranks a single class, so these use a doubled class to win on specificity
   without !important. First Call runs H2 at 32px; this lands at 34 to 38. */
.krpx-h2.krpx-h2 { font-size: clamp(1.8rem, 2.45vw, 2.15rem); line-height: 1.16; letter-spacing: -.015em; }
.krpv-hero .krpx-h2.krpx-h2, .krpx-warranty .krpx-h2.krpx-h2 { font-size: clamp(1.75rem, 2.35vw, 2.05rem); }
.krpv-section { padding: clamp(56px, 6.5vw, 96px) 0; }
.krpv-section__head { max-width: 820px; margin: 0 0 clamp(26px, 3vw, 44px); }
.krpv-section :is(h2,h3,h4).krpx-h3, .krpx-infocard :is(h2,h3,h4), .krpv-card :is(h2,h3,h4), .krpv-section__head + * :is(h2,h3,h4) { font-size: clamp(1.1rem, 1.25vw, 1.22rem); }
/* a heading that follows body copy inside the same section needs its own gap */
.krpx-prose + .krpv-section__head, .krpx-split + .krpv-section__head { margin-top: clamp(30px, 3.4vw, 52px); }
/* A heading absorbed into a merged section sits as a sub-head with its own air. */
.krpx-subhead { margin: clamp(30px, 3.2vw, 46px) 0 14px; font-size: clamp(1.3rem, 1.7vw, 1.55rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.22; }
.krpv-section__head + .krpx-subhead, .krpx-subhead:first-child { margin-top: 0; }

/* Second consecutive section of the same kind: same content, different face,
   so a long page never shows the same layout twice in a row. */
.krpv-section--alt .krpv-checklist { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; max-width: none; }
.krpv-section--alt .krpv-checklist li { background: #fff; border: 1px solid var(--krpd-line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.krpv-section--soft.krpv-section--alt .krpv-checklist li { background: #fff; }
.krpv-section--alt .krpx-prose { border-left: 3px solid var(--krpd-red); padding-left: clamp(18px, 2vw, 30px); max-width: 880px; }
.krpv-section--alt .krpx-infocards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 760px) { .krpv-section--alt .krpx-prose { padding-left: 14px; } }

/* A tall photo beside a short paragraph left a bare column under the text
   (Dawson, 2026-10-02). Cap the split photo so the two sides stay balanced. */
@media (min-width: 901px) {
  .krpx-split { align-items: center; }
  .krpx-split__media img { min-height: 0; max-height: 340px; aspect-ratio: 4 / 3; object-fit: cover; }
  .krpx-split > div:first-child > .krpx-prose:only-child { align-self: center; }
}

/* Per-page warranty tier note. KRP's terms exclude engines and transmissions
   and cap wear items at 24mo/24k, so the pages for those services say so
   rather than inheriting the sitewide lifetime line. */
.krpx-wtier { margin-top: 14px !important; font-size: .98rem !important; opacity: .9; }
.krpx-wtier a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   HEADING SCALE, 2026-10-02.
   Dawson, after comparing pages: "make all of the titles 52.8". 52.8px is the
   size the services H1 was already running at, and he picked it as the one
   correct size for the site. So every page title and every section heading now
   tops out there instead of the old spread of 28px to 52.8px.
   The value is a ceiling, not a fixed size: the clamp scales the same headings
   down on narrow screens so nothing overflows at phone width.
   This block is last in the file and uses doubled classes, which is what beats
   the Elementor kit without reaching for !important.
   --------------------------------------------------------------------------- */
:root { --krpd-title: clamp(2rem, 4.1vw, 3.3rem); }   /* 3.3rem = 52.8px */

/* Page titles */
.krpv-hero h1,
.krpd-hero .krpd-hero__title.krpd-hero__title,
.krp-post .elementor-widget-theme-post-title h1 { font-size: var(--krpd-title); }
.krpd-hero .krpd-hero__title .krpd-hero__towns { font-size: .9em; }

/* Section headings */
.krpx-h2.krpx-h2,
.krpv-hero .krpx-h2.krpx-h2,
.krpx-warranty .krpx-h2.krpx-h2,
.krpx-bookbar__h.krpx-bookbar__h,
.krpd-footcta__t.krpd-footcta__t,
.krpf-visit__title.krpf-visit__title { font-size: var(--krpd-title); line-height: 1.12; }

/* The call sheet is a dialog, not a page section, so it keeps a dialog size. */
.krp-sheet__title.krp-sheet__title { font-size: clamp(1.5rem, 2.1vw, 1.85rem); }

/* Card headings are labels rather than titles, raised to sit under the new
   scale rather than up at it. */
.krpv-section :is(h2,h3,h4).krpx-h3,
.krpx-infocard :is(h2,h3,h4),
.krpv-card :is(h2,h3,h4),
/* Raised 2026-10-06: with section headings fixed at 52.8px a 20.9px card
   heading read as an afterthought beside them (Dawson: "the title of them are
   weirdly small"). 25.6px keeps the card a rung below without closing the gap. */
.krpv-section__head + * :is(h2,h3,h4) { font-size: clamp(1.32rem, 1.78vw, 1.6rem); }
.krpx-speccard :is(h2,h3,h4) { font-size: 1.56rem; }
.krpx-loccard :is(h2,h3,h4) { font-size: 1.56rem; }
.krpd-footcol :is(h2,h3,h4) { font-size: 1.12rem; }

/* ---------------------------------------------------------------------------
   SERVICE TILES, 2026-10-02.
   Dawson: "can we do images on these services and do the filter over it and
   the effect when hovering over it ... like we did for first call auto care",
   and "only have 6 there, the bottom two big ones look weird".
   So: a photo tile with a dark gradient that keeps the name readable, and on
   hover the image eases in while the gradient's base turns KRP red. Six tiles
   in a 3 x 2 grid, which fills evenly and leaves no stretched orphan row.
   --------------------------------------------------------------------------- */
.krpx-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin-top: 34px;
}
/* The services hub runs the same tiles over all sixteen services, so it uses
   four columns: three would leave a single tile alone on the last row. */
@media (min-width: 1100px) { .krpx-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.krpx-tiles--4 .krpx-tile { min-height: 260px; }
.krpx-tile {
  position: relative; display: flex; align-items: flex-end; isolation: isolate;
  /* 350, not 300. The library is shot portrait, so a wide shallow tile crops
     a thin band out of the middle of it. The services hub runs four across,
     which makes a tile 293x260 and shows much more of the photograph, and
     Dawson preferred that framing on the home page too (2026-10-06). At three
     across a tile is about 397 wide, so 350 tall puts the home tiles at the
     same proportions as the hub's. */
  min-height: 350px; border-radius: 16px; overflow: hidden;
  text-decoration: none; color: #fff;
  box-shadow: 0 14px 34px rgba(16,24,40,.14);
}
/* The theme forces height:auto on every img, which let this one render at its
   full intrinsic height and get clipped by the tile instead of cropped by
   object-fit, so object-position never had any effect. Height is forced here. */
.krpx-tile .krpx-tile__img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  max-width: none; aspect-ratio: auto; object-fit: cover;
  z-index: -2; transition: transform .5s ease;
}
.krpx-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,16,19,.30) 0%, rgba(13,16,19,.58) 52%, rgba(13,16,19,.88) 100%);
  transition: background .3s ease;
}
.krpx-tile:hover .krpx-tile__img,
.krpx-tile:focus-visible .krpx-tile__img { transform: scale(1.06); }
.krpx-tile:hover::after, .krpx-tile:focus-visible::after {
  background: linear-gradient(180deg, rgba(13,16,19,.24) 0%, rgba(13,16,19,.50) 48%, rgba(214,33,40,.82) 100%);
}
.krpx-tile:focus-visible { outline: 3px solid var(--krpd-red); outline-offset: 3px; }
.krpx-tile__body { padding: 22px 24px 24px; }
/* The tile is an <a>, and the theme colors links red with enough specificity
   to beat a single class, so white is stated on the tile and on the text. */
.krpx-tile.krpx-tile, .krpx-tile.krpx-tile:visited { color: #fff; }
.krpx-tile .krpx-tile__t {
  display: block; color: #fff;
  font-family: var(--krpd-font); font-weight: 800;
  font-size: 1.5rem; line-height: 1.16; letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.krpx-tile .krpx-tile__t::after {
  content: " \2192"; opacity: 0; transition: opacity .25s ease;
}
.krpx-tile:hover .krpx-tile__t::after,
.krpx-tile:focus-visible .krpx-tile__t::after { opacity: 1; }
.krpx-tile .krpx-tile__d {
  display: block; margin-top: 8px; font-size: 1.02rem; line-height: 1.5;
  color: rgba(255,255,255,.9); font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .krpx-tile__img { transition: none; }
  .krpx-tile:hover .krpx-tile__img { transform: none; }
}
@media (max-width: 1000px) { .krpx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .krpx-tiles { grid-template-columns: 1fr; } .krpx-tile { min-height: 250px; } }

/* The services index already used photo cards. Give them the same red wash on
   hover as the home tiles so the two pages read as one system, and bring the
   card title up to the tile's size. */
.krpx-svccard__grad { transition: background .3s ease; }
.krpx-svccard:hover .krpx-svccard__grad,
.krpx-svccard:focus-visible .krpx-svccard__grad {
  background: linear-gradient(to top, rgba(214,33,40,.85) 0%, rgba(13,16,19,.56) 38%, rgba(13,16,19,.14) 66%, rgba(13,16,19,0) 100%);
}
.krpx-svccard .krpx-svccard__title { font-size: 1.32rem; }

/* ---------------------------------------------------------------------------
   SPECIALS, 2026-10-02.
   Dawson: "can we copy the exact thing ABS unlimited has? just dont use a
   photo ... like font and button layout and font size and everything."
   This is the ABS special-offers card, same structure and same type scale,
   with the photo column dropped and KRP's red in place of ABS's.
   Doubled classes throughout because Elementor's kit styles every heading,
   list and button with enough specificity to beat a single class.
   --------------------------------------------------------------------------- */
/* The coupons sit inside an Elementor container capped at 760px, which
   squeezed the grid into one narrow column. Centering on the viewport frees
   it without touching the legacy container. Nine coupons fill a 3 x 3 with
   no orphan row. */
.krpo {
  /* The grid now lives in our own full-width section, so it needs no breakout
     and simply fills the standard content wrapper. */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px; align-items: stretch; margin: 8px 0 0;
}
.krpx-wcard { display: flex; flex-direction: column; background: var(--krpd-bg); border: 1px solid var(--krpd-line); border-radius: var(--krpd-r); padding: 28px 26px; box-shadow: var(--krpd-shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.krpx-wcard:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: #dfe3ea; }
.krpx-wcard__ic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(214,33,40,.09); color: var(--krpd-red); margin-bottom: 16px; }
.krpx-wcard__ic svg { width: 26px; height: 26px; }
.krpx-wcard b { display: block; color: var(--krpd-ink); font-size: 1.14rem; font-weight: 700; margin-bottom: 9px; letter-spacing: -.01em; }
.krpx-wcard p { margin: 0; color: var(--krpd-ink-2); font-size: .97rem; line-height: 1.62; }
/* The SAME .krpx-wcard also appears inside the DARK reusable warranty band
   (homepage / location pages). There it must keep the dark-surface treatment —
   the light styling above is only correct on the white warranty-page section. */
.krpx-warrantyband .krpx-wcard { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); box-shadow: none; }
.krpx-warrantyband .krpx-wcard:hover { border-color: rgba(255,255,255,.28); box-shadow: none; transform: translateY(-3px); }
.krpx-warrantyband .krpx-wcard__ic { background: var(--krpd-red); color: #fff; }
.krpx-warrantyband .krpx-wcard b { color: #fff; }
.krpx-warrantyband .krpx-wcard p { color: #c9d2dd; }
.krpx-warrantyband__cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* Location cards */
.krpx-loccards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.krpx-loccard { background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px; padding: 24px; box-shadow: var(--krpd-shadow-sm); transition: transform .16s ease, box-shadow .16s ease; }
.krpx-loccard:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); }
.krpx-loccard :is(h2,h3,h4) { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.krpx-loccard :is(h2,h3,h4) svg { width: 18px; height: 18px; color: var(--krpd-red); flex: none; }
.krpx-loccard__tel { display: inline-block; color: var(--krpd-red); font-weight: 800; font-size: 1.05rem; text-decoration: none; margin-bottom: 10px; }
.krpx-loccard p { margin: 0 0 4px; color: var(--krpd-ink-2); font-size: .9rem; line-height: 1.5; }
.krpx-loccard__hrs { color: var(--krpd-muted) !important; }
.krpx-loccard__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--krpd-red); font-weight: 700; font-size: .88rem; text-decoration: none; }
.krpx-loccard__link svg { width: 15px; height: 15px; }

/* Hide the old Elementor homepage sections (kept in DOM for SEO). */
html.krp-hp .elementor-80 > .e-con.e-parent { display: none !important; }

/* ==========================================================================
   SERVICE PAGE FAQ  (native <details> accordion, no JS)
   ========================================================================== */
.krpx-faq { background: #fff; padding: clamp(44px, 5.5vw, 78px) 0; font-family: var(--krpd-font); }
.krpx-faq__list { max-width: 860px; margin: 36px auto 0; display: flex; flex-direction: column; gap: 14px; }
.krpx-faq__item { background: #fff; border: 1px solid var(--krpd-line); border-radius: 14px; box-shadow: var(--krpd-shadow-sm); overflow: hidden; transition: box-shadow .16s ease, border-color .16s ease; }
.krpx-faq__item[open] { border-color: #dfe3ea; box-shadow: var(--krpd-shadow-md); }
.krpx-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 24px; font-weight: 700; font-size: 1.05rem; color: var(--krpd-ink); letter-spacing: -.01em; }
.krpx-faq__item summary::-webkit-details-marker { display: none; }
.krpx-faq__item summary:focus-visible { outline: none; box-shadow: var(--krpd-ring); border-radius: 10px; }
.krpx-faq__chev { flex: none; width: 22px; height: 22px; color: var(--krpd-red); transition: transform .2s ease; }
.krpx-faq__item[open] .krpx-faq__chev { transform: rotate(180deg); }
.krpx-faq__a { padding: 0 24px 22px; color: var(--krpd-ink-2); line-height: 1.7; font-size: .98rem; }
@media (max-width: 768px) {
  .krpx-faq__item summary { padding: 16px 18px; font-size: .98rem; }
  .krpx-faq__a { padding: 0 18px 18px; font-size: .95rem; }
}

/* ==========================================================================
   SERVICE / VEHICLE TRUST STRIP
   ========================================================================== */
.krpx-svctrust { background: #fff; border-bottom: 1px solid var(--krpd-line); font-family: var(--krpd-font); }
.krpx-trust { list-style: none; margin: 0; padding: 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.krpx-trust__item { display: flex; align-items: center; gap: 12px; }
.krpx-trust__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(214,33,40,.09); color: var(--krpd-red); flex: none; }
.krpx-trust__ic svg { width: 22px; height: 22px; }
.krpx-trust__tx { display: flex; flex-direction: column; line-height: 1.2; }
.krpx-trust__tx b { color: var(--krpd-ink); font-size: 15px; font-weight: 700; }
.krpx-trust__tx small { color: var(--krpd-muted); font-size: 12.5px; }

/* ==========================================================================
   WARRANTY + LOCATIONS + CTA  (dark band, service & vehicle pages)
   ========================================================================== */
.krpx-warranty { background: radial-gradient(1200px 400px at 80% -10%, rgba(52,160,207,.18), transparent 60%), #14171c; color: #fff; padding: clamp(48px, 6vw, 80px) 0; font-family: var(--krpd-font); }
.krpx-warranty__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 46px; align-items: center; }
.krpx-warranty__btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.krpx-warranty .krpd-btn--ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.35); }
.krpx-warranty .krpd-btn--ghost:hover { background: #fff; color: var(--krpd-ink); border-color: #fff; }
.krpx-warranty__locs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.krpx-loc { display: block; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); text-decoration: none; transition: background .14s ease, border-color .14s ease, transform .14s ease; }
.krpx-loc:hover { background: rgba(255,255,255,.09); border-color: rgba(52,160,207,.5); transform: translateY(-2px); }
.krpx-loc b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 15px; font-weight: 700; }
.krpx-loc b svg { width: 16px; height: 16px; color: #ff6b70; }
.krpx-loc span { display: block; color: #aeb6c2; font-size: 13px; margin-top: 6px; }
.krpx-loc span.krpx-loc__tel { color: #8fd0ee; font-weight: 700; }

/* ==========================================================================
   SERVICES INDEX — premium, labeled service card grid.
   Replaces the unlabeled Elementor "loop-grid" photo gallery. The original
   loop-grid is HIDDEN (kept in the DOM for SEO + crawlable links) and this
   first-party grid — same photos, same destination links, now with a clear
   service name, dark gradient for contrast and a Learn More affordance — is the
   visible content. The whole card is one link.
   ========================================================================== */
html.krp-svcindex .elementor-widget-loop-grid { display: none !important; }
html.krp-svcindex section.e-con:has(.elementor-widget-loop-grid) { display: none !important; padding: 0 !important; margin: 0 !important; }

.krpx-svcgrid { background: var(--krpd-bg); padding: clamp(42px, 5vw, 74px) 0; font-family: var(--krpd-font); }
.krpx-svcgrid__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.krpx-svccard {
  position: relative; display: block; overflow: hidden;
  border-radius: 16px; aspect-ratio: 4 / 3;
  background: #14171c; box-shadow: var(--krpd-shadow-sm); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.krpx-svccard:hover { transform: translateY(-4px); box-shadow: var(--krpd-shadow-lg); }
.krpx-svccard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.krpx-svccard:hover .krpx-svccard__img { transform: scale(1.06); }
.krpx-svccard__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,10,13,.93) 0%, rgba(8,10,13,.58) 32%, rgba(8,10,13,.12) 62%, rgba(8,10,13,0) 100%); }
.krpx-svccard__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 5px; }
.krpx-svccard__title { color: #fff; font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.krpx-svccard__more { display: inline-flex; align-items: center; gap: 6px; color: #ffd9da; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; max-height: 0; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, max-height .2s ease; }
.krpx-svccard__more svg { width: 15px; height: 15px; }
.krpx-svccard:hover .krpx-svccard__more, .krpx-svccard:focus-visible .krpx-svccard__more { opacity: 1; transform: translateY(0); max-height: 2em; }
.krpx-svccard::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--krpd-red); z-index: 2; transition: width .3s ease; }
.krpx-svccard:hover::after, .krpx-svccard:focus-visible::after { width: 100%; }
.krpx-svccard:focus-visible { outline: none; box-shadow: var(--krpd-ring), var(--krpd-shadow-md); }
/* Touch devices have no hover — always reveal the Learn More affordance. */
@media (hover: none) {
  .krpx-svccard__more { opacity: 1; transform: none; max-height: 2em; }
}
@media (max-width: 1100px) { .krpx-svcgrid__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .krpx-svcgrid__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .krpx-svccard__title { font-size: 1rem; } .krpx-svccard__cap { padding: 14px 14px 13px; } }
@media (max-width: 430px)  { .krpx-svcgrid__grid { grid-template-columns: 1fr; } .krpx-svccard { aspect-ratio: 16 / 9; } }

/* Lead-grid photos (home / about / vehicle intro): uniform 3:2 crop so authentic
   shop photos of any source ratio stay consistent and never cause layout shift. */
.krpv-lead-grid img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ==========================================================================
   VEHICLES MEGA MENU
   ========================================================================== */
.krpd-drop--mega-veh { width: 640px; }
/* Three equal columns. The makes read alphabetically COLUMN-MAJOR (top-to-bottom
   down col 1, then col 2, then col 3). A plain row-major grid is used and the
   injector emits the links pre-ordered so that filling left-to-right/top-to-
   bottom reproduces the column-major reading order — this is browser-agnostic
   and doesn't depend on grid-auto-flow (which a `grid` shorthand elsewhere in
   the cascade was resetting). See _column_major_fill() in the injector. */
.krpd-mega__grid--veh { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   VEHICLE / SERVICE PAGE CONTENT  (krpv-*)
   ========================================================================== */
.krpv { font-family: var(--krpd-font); color: var(--krpd-ink); }
.krpv-hero { position: relative; background: linear-gradient(120deg, #14171c 0%, #1c2430 60%, #23303f 100%); color: #fff; overflow: hidden; }
.krpv-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 320px at 85% 0%, rgba(52,160,207,.22), transparent 60%); pointer-events: none; }
.krpv-hero__in { position: relative; z-index: 1; max-width: var(--krpd-container); margin: 0 auto; padding: clamp(46px, 6vw, 84px) 24px; max-width: 860px; }
.krpv-crumbs { font-size: 13px; color: #9fb0c2; margin-bottom: 18px; }
.krpv-crumbs a { color: #c9d6e2; text-decoration: none; }
.krpv-crumbs a:hover { color: #fff; }
.krpv-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); font: 800 12.5px/1 var(--krpd-font); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 18px; }
.krpv-hero__eyebrow svg { width: 15px; height: 15px; color: #8fd0ee; }
.krpv-hero h1 { margin: 0 0 16px; font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.krpv-hero p { margin: 0 0 26px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: #dbe2ea; max-width: 640px; }
.krpv-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.krpv-section { padding: clamp(44px, 5.5vw, 78px) 0; }
.krpv-section--soft { background: var(--krpd-bg-soft); }
.krpv-section__head { max-width: 760px; margin: 0 0 36px; }
.krpv-lead-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.krpv-lead-grid img { width: 100%; height: auto; border-radius: 16px; display: block; }
.krpv-lead-grid p { color: var(--krpd-ink-2); font-size: 1.05rem; line-height: 1.75; margin: 0 0 16px; }

.krpv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.krpv-card { background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px; padding: 24px; box-shadow: var(--krpd-shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.krpv-card:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: #dfe3ea; }
.krpv-card__ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(214,33,40,.09); color: var(--krpd-red); margin-bottom: 14px; }
.krpv-card__ic svg { width: 24px; height: 24px; }
.krpv-card :is(h2,h3,h4) { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.krpv-card p { margin: 0; color: var(--krpd-ink-2); font-size: .95rem; line-height: 1.6; }
.krpv-card a.krpv-card__link { color: var(--krpd-red); font-weight: 700; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; }
.krpv-card__link svg { width: 16px; height: 16px; flex: none; }
.krpv-related a svg { width: 17px; height: 17px; flex: none; }
.krpv-crumbs svg { width: 14px; height: 14px; }

.krpv-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.krpv-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--krpd-line); font-size: 14px; font-weight: 600; color: var(--krpd-ink); }
.krpv-chip svg { width: 15px; height: 15px; color: var(--krpd-red); }

.krpv-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.krpv-why__item { display: flex; gap: 14px; }
.krpv-why__ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(52,160,207,.12); color: var(--krpd-blue-dark); flex: none; }
.krpv-why__ic svg { width: 21px; height: 21px; }
.krpv-why__item b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.krpv-why__item p { margin: 0; color: var(--krpd-ink-2); font-size: .95rem; line-height: 1.55; }

.krpv-related { display: flex; flex-wrap: wrap; gap: 12px; }
.krpv-related a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--krpd-line); text-decoration: none; color: var(--krpd-ink); font-weight: 600; font-size: 14.5px; transition: border-color .14s ease, color .14s ease, transform .14s ease; }
.krpv-related a:hover { border-color: var(--krpd-red); color: var(--krpd-red); transform: translateY(-2px); }

/* Service-body checklist (plain bullet lists parsed from the page's own copy) */
.krpv-checklist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 34px; max-width: 920px; }
.krpv-checklist li { display: flex; align-items: flex-start; gap: 11px; color: var(--krpd-ink-2); font-size: 1rem; line-height: 1.55; }
.krpv-checklist li svg { width: 20px; height: 20px; color: var(--krpd-red); flex: none; margin-top: 2px; }
.krpv-checklist li span { display: block; }
.krpv-checklist li span strong, .krpv-checklist li span b { color: var(--krpd-ink); }
/* Service body prose blocks between card/checklist groups read as an article column */
.krpx-bodywrap, .krp-servicepage .krpx-prose { max-width: 840px; }
.krp-servicepage .krpx-prose + .krpx-infocards, .krp-servicepage .krpx-infocards + .krpx-prose,
.krp-servicepage .krpv-checklist + .krpx-prose, .krp-servicepage .krpx-prose + .krpv-checklist { margin-top: 26px; }
@media (max-width: 760px) { .krpv-checklist { grid-template-columns: 1fr; gap: 11px; } }

/* ==========================================================================
   RESPONSIVE for the new components
   ========================================================================== */
@media (max-width: 1024px) {
  .krpx-reviews__grid:not(.krpx-reviews__grid--3), .krpv-cards { grid-template-columns: repeat(2, 1fr); }
  .krpx-warranty__in { grid-template-columns: 1fr; gap: 32px; }
  .krpv-lead-grid, .krpv-lead-grid--rev { grid-template-columns: 1fr; gap: 26px; }
  .krpv-why--3 { grid-template-columns: repeat(2, 1fr); }
  .krpx-loccards { grid-template-columns: repeat(2, 1fr); }
  .krpd-drop--mega-veh { width: 520px; }
  /* image-first lead grids: put image below the copy on stacked layouts */
  .krpv-lead-grid--rev > div:first-child { order: 2; }
}
/* Reviews: 3 across on desktop + large tablet, stacked below 900px. */
@media (max-width: 900px) {
  .krpx-reviews__grid--3 { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 768px) {
  .krpd-hero__badges { grid-template-columns: 1fr; gap: 10px; max-width: 100%; }
  .krpx-reviews__grid, .krpv-cards { grid-template-columns: 1fr; }
  .krpx-trust { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .krpx-warranty__locs { grid-template-columns: 1fr 1fr; }
  .krpv-why, .krpv-why--3 { grid-template-columns: 1fr; }
  .krpx-wcards { grid-template-columns: 1fr; }
  .krpx-loccards { grid-template-columns: 1fr; }
  /* Compact review cards on mobile — less padding, tighter gaps. */
  .krpx-reviews { padding: 40px 0; }
  .krpx-reviews__head { margin-bottom: 26px; }
  .krpx-review { padding: 16px 17px; gap: 9px; border-radius: 14px; }
  .krpx-review__text { font-size: 14px; line-height: 1.5; }
  .krpx-review__by { padding-top: 11px; gap: 10px; }
  .krpx-review__av { width: 36px; height: 36px; font-size: 14px; }
  .krpx-review__meta small { font-size: 12px; }
  .krpx-trustrow { gap: 10px; margin-top: 18px; }
  .krpx-google, .krpx-ase { padding: 9px 14px; gap: 10px; }
  .krpx-reviews__cta { margin-top: 26px; }
}
@media (max-width: 430px) {
  .krpx-trust { grid-template-columns: 1fr; }
  .krpx-warranty__locs { grid-template-columns: 1fr; }
  .krpx-trustrow { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   HOMEPAGE "BOOK NOW" CONVERSION BAND  (directly under the hero)
   High-visibility above-the-fold booking widget: bold brand-red band, the
   simple 4-step preview, and a large white Book button.
   ========================================================================== */
.krpx-bookbar { background: linear-gradient(120deg, var(--krpd-red) 0%, var(--krpd-red-dark) 100%); color: #fff; font-family: var(--krpd-font); padding: clamp(30px, 4vw, 50px) 0; position: relative; }
.krpx-bookbar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 240px at 88% -10%, rgba(255,255,255,.14), transparent 60%); pointer-events: none; }
.krpx-bookbar__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .85fr; gap: 34px; align-items: center; }
.krpx-eyebrow--onred { color: #ffe0e1; justify-content: flex-start; }
.krpx-bookbar__h { margin: 0 0 10px; font-size: clamp(1.55rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.12; color: #fff; }
.krpx-bookbar__p { margin: 0 0 20px; color: #ffe0e1; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; max-width: 560px; }
.krpx-booksteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: step; }
.krpx-bookstep { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24); border-radius: 12px; padding: 11px 12px; }
.krpx-bookstep__n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--krpd-red); font-weight: 800; font-size: 13px; flex: none; }
.krpx-bookstep__ic { display: inline-flex; color: #fff; flex: none; }
.krpx-bookstep__ic svg { width: 20px; height: 20px; }
.krpx-bookstep__tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.krpx-bookstep__tx b { font-size: 13.5px; color: #fff; }
.krpx-bookstep__tx small { font-size: 11.5px; color: #ffd0d2; }
.krpx-bookbar__cta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.krpx-bookbar__book { background: #fff !important; color: var(--krpd-red) !important; height: 58px; font-size: 17px; box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.krpx-bookbar__book:hover { background: #0d1013 !important; color: #fff !important; transform: translateY(-2px); }
.krpx-bookbar__call { background: rgba(255,255,255,.1) !important; color: #fff !important; border-color: rgba(255,255,255,.55) !important; height: 58px; }
.krpx-bookbar__call:hover { background: #fff !important; color: var(--krpd-red) !important; border-color: #fff !important; }
.krpx-bookbar__note { color: #ffd0d2; font-size: 12.5px; text-align: center; }

/* ==========================================================================
   ABOUT US — story timeline, founders, values
   ========================================================================== */
.krpx-about { font-family: var(--krpd-font); }
.krpx-tl { list-style: none; margin: 6px auto 0; padding: 0; max-width: 820px; position: relative; }
.krpx-tl::before { content: ""; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; background: var(--krpd-line); }
.krpx-tl__item { position: relative; display: flex; gap: 18px; padding-bottom: 24px; }
.krpx-tl__item:last-child { padding-bottom: 0; }
.krpx-tl__dot { position: relative; z-index: 1; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--krpd-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(214,33,40,.3); }
.krpx-tl__dot svg { width: 22px; height: 22px; }
.krpx-tl__card { background: #fff; border: 1px solid var(--krpd-line); border-radius: 14px; box-shadow: var(--krpd-shadow-sm); padding: 16px 20px; flex: 1; }
.krpx-tl__card b { display: block; font-size: 1.1rem; color: var(--krpd-ink); margin-bottom: 5px; letter-spacing: -.01em; }
.krpx-tl__card p { margin: 0; color: var(--krpd-ink-2); font-size: .96rem; line-height: 1.6; }

.krpx-leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.krpx-leader { margin: 0; background: #fff; border: 1px solid var(--krpd-line); border-radius: 18px; box-shadow: var(--krpd-shadow-sm); padding: 30px 24px; text-align: center; transition: transform .16s ease, box-shadow .16s ease; }
.krpx-leader:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); }
.krpx-leader__av { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; margin-bottom: 16px; background: linear-gradient(135deg, var(--krpd-red), var(--krpd-red-dark)); box-shadow: 0 10px 24px rgba(214,33,40,.28); overflow: hidden; }
.krpx-leader__av img { width: 100%; height: 100%; object-fit: cover; }
.krpx-mono { color: #fff; font-size: 2rem; font-weight: 800; letter-spacing: .02em; }
.krpx-leader__cap b { display: block; font-size: 1.2rem; color: var(--krpd-ink); letter-spacing: -.01em; }
.krpx-leader__role { display: inline-block; margin: 7px 0 12px; padding: 3px 12px; border-radius: 999px; background: rgba(52,160,207,.12); color: var(--krpd-blue-dark); font-size: 12.5px; font-weight: 700; }
.krpx-leader__cap p { margin: 0; color: var(--krpd-ink-2); font-size: .95rem; line-height: 1.6; }
.krpv-why--2 { grid-template-columns: repeat(2, 1fr); gap: 16px 26px; }
.krpx-about-cta { text-align: center; max-width: 720px; margin: 0 auto; }
.krpx-about-cta .krpx-eyebrow { justify-content: center; }

/* ==========================================================================
   CAREERS — why-join cards + benefits
   ========================================================================== */
.krpx-careers { font-family: var(--krpd-font); }
.krpv-cards--4 { grid-template-columns: repeat(4, 1fr); }
.krpx-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.krpx-benefit { background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px; box-shadow: var(--krpd-shadow-sm); padding: 24px 22px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.krpx-benefit:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: #dfe3ea; }
.krpx-benefit__ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 13px; background: rgba(214,33,40,.09); color: var(--krpd-red); margin-bottom: 14px; }
.krpx-benefit__ic svg { width: 26px; height: 26px; }
.krpx-benefit b { display: block; font-size: 1.05rem; color: var(--krpd-ink); margin-bottom: 6px; letter-spacing: -.01em; }
.krpx-benefit p { margin: 0; color: var(--krpd-ink-2); font-size: .92rem; line-height: 1.55; }
.krpx-benefits__note { max-width: 840px; margin: 26px auto 0; display: flex; gap: 8px; align-items: flex-start; color: var(--krpd-muted); font-size: 13px; line-height: 1.55; }
.krpx-benefits__note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--krpd-blue-dark); }
.krpx-extnote { display: inline-flex; gap: 6px; align-items: center; justify-content: center; margin: 16px 0 0; color: #c9d2dd; font-size: 12.5px; }
.krpx-extnote svg { width: 14px; height: 14px; }

/* ==========================================================================
   SPECIALS — redesigned hero, location selector, coupon typography
   ========================================================================== */
.krpx-specials { font-family: var(--krpd-font); }
/* Hide the generic single-page title band; our hero owns the page H1. */
html.krp-specials [data-elementor-type="single-page"] > .e-con.e-parent:first-child { display: none !important; }
/* Bring the real Elementor coupon content into the design system's typeface. */
html.krp-specials [data-elementor-type="wp-page"] .elementor-heading-title,
html.krp-specials [data-elementor-type="wp-page"] .elementor-widget-text-editor,
html.krp-specials [data-elementor-type="wp-page"] .elementor-button { font-family: var(--krpd-font) !important; }
html.krp-specials [data-elementor-type="wp-page"] { padding-bottom: 20px; }

.krpx-specials__picker { background: var(--krpd-bg-soft); border-bottom: 1px solid var(--krpd-line); padding: clamp(26px, 3.5vw, 42px) 0; }
.krpx-locpick { max-width: 720px; margin: 0 auto; }
.krpx-locpick__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.krpx-locpick__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--krpd-ink); font-size: 1.02rem; }
.krpx-locpick__label svg { width: 18px; height: 18px; color: var(--krpd-red); }
.krpx-locselect { appearance: none; -webkit-appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; border: 2px solid var(--krpd-line); border-radius: 12px; padding: 12px 44px 12px 16px; font: 600 15px var(--krpd-font); color: var(--krpd-ink); min-width: 230px; min-height: 48px; cursor: pointer; }
.krpx-locselect:focus-visible { outline: none; box-shadow: var(--krpd-ring); border-color: var(--krpd-blue); }
.krpx-speccards { margin-top: 22px; }
.krpx-speccard { background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px; box-shadow: var(--krpd-shadow-sm); padding: 24px; text-align: center; max-width: 460px; margin: 0 auto; }
.krpx-speccard :is(h2,h3,h4) { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.2rem; font-weight: 800; }
.krpx-speccard :is(h2,h3,h4) svg { width: 18px; height: 18px; color: var(--krpd-red); }
.krpx-speccard__addr { margin: 0 0 10px; color: var(--krpd-ink-2); font-size: .95rem; }
.krpx-speccard__tel { display: inline-flex; align-items: center; gap: 7px; color: var(--krpd-red); font-weight: 800; font-size: 1.15rem; text-decoration: none; margin-bottom: 6px; }
.krpx-speccard__tel svg { width: 17px; height: 17px; }
.krpx-speccard__hrs { margin: 0 0 16px; color: var(--krpd-muted); font-size: .9rem; }
.krpx-speccard__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.krpx-locpick__note { display: flex; gap: 8px; align-items: flex-start; justify-content: center; text-align: center; margin: 18px auto 0; max-width: 620px; color: var(--krpd-muted); font-size: 13px; line-height: 1.5; }
.krpx-locpick__note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--krpd-blue-dark); }
.krpx-specials__intro { padding: clamp(34px, 4.5vw, 58px) 0 6px; }

/* ==========================================================================
   ABOUT / CAREERS — hide the original Elementor page content (kept in the DOM
   for SEO); our injected first-party experience is the visible content.
   ========================================================================== */
html.krp-about [data-elementor-type="single-page"] > .e-con.e-parent,
html.krp-careers [data-elementor-type="single-page"] > .e-con.e-parent { display: none !important; }

/* ==========================================================================
   LOCATION PAGES — consistent, full-bleed hero photo (fixes Hawthorne's 4:3
   image leaving white space; all four locations now match).
   ========================================================================== */
html.krp-loc .krp-lochero { width: 100% !important; max-width: 100% !important; }
html.krp-loc .krp-lochero > .elementor-widget-container { max-width: 100%; }
html.krp-loc .krp-lochero img {
  width: 100% !important; display: block;
  aspect-ratio: 16 / 6.4; object-fit: cover; object-position: center;
  border-radius: 16px; height: auto;
}
@media (max-width: 1024px) { html.krp-loc .krp-lochero img { aspect-ratio: 16 / 7.5; } }
@media (max-width: 768px)  { html.krp-loc .krp-lochero img { aspect-ratio: 16 / 9; border-radius: 12px; } }

/* ==========================================================================
   VEHICLES — A–Z filter bar
   ========================================================================== */
.krpv-az { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 760px; margin: 0 auto 12px; }
.krpv-az__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--krpd-line); background: #fff; color: var(--krpd-ink); font: 700 14px var(--krpd-font); cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.krpv-az__btn:hover:not(.is-disabled):not(.is-active) { border-color: var(--krpd-red); color: var(--krpd-red); }
.krpv-az__btn.is-active { background: var(--krpd-red); color: #fff; border-color: var(--krpd-red); box-shadow: 0 6px 14px rgba(214,33,40,.28); }
.krpv-az__btn.is-disabled { color: #c3c9d2; background: var(--krpd-bg-soft); cursor: default; pointer-events: none; }
.krpv-az__btn:focus-visible { outline: none; box-shadow: var(--krpd-ring); }
.krpv-az__all { min-width: auto; padding: 0 15px; font-weight: 800; }
.krpv-az__status { text-align: center; color: var(--krpd-muted); font-size: 13px; margin: 0 0 22px; min-height: 1.1em; }
.krpv-makegrid { margin-top: 2px; }
.krpv-az__empty { text-align: center; color: var(--krpd-ink-2); margin: 26px 0 0; font-size: 1rem; }
.krpv-az__reset { background: none; border: 0; color: var(--krpd-red); font-weight: 700; cursor: pointer; text-decoration: underline; font: inherit; }

/* ==========================================================================
   RESPONSIVE — new components
   ========================================================================== */
@media (max-width: 1024px) {
  .krpx-bookbar__in { grid-template-columns: 1fr; gap: 22px; }
  .krpx-bookbar__cta { flex-direction: row; flex-wrap: wrap; }
  .krpx-bookbar__cta .krpd-btn { flex: 1 1 auto; }
  .krpx-bookbar__note { flex-basis: 100%; }
  .krpx-benefits { grid-template-columns: repeat(2, 1fr); }
  .krpv-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .krpx-leaders { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 768px) {
  .krpx-booksteps { grid-template-columns: repeat(2, 1fr); }
  .krpx-leaders { grid-template-columns: 1fr; }
  .krpx-benefits { grid-template-columns: 1fr 1fr; }
  .krpv-why--2 { grid-template-columns: 1fr; }
  .krpx-tl__dot { width: 42px; height: 42px; }
  .krpx-tl__dot svg { width: 20px; height: 20px; }
  .krpx-tl::before { left: 20px; }
}
@media (max-width: 480px) {
  .krpx-booksteps { grid-template-columns: 1fr; }
  .krpx-benefits { grid-template-columns: 1fr; }
  .krpx-bookbar__cta { flex-direction: column; }
  .krpv-az__btn { min-width: 36px; height: 36px; font-size: 13px; }
}

/* ==========================================================================
   REDUCED MOTION — show the poster, never the moving video
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .krpd-hero__video { display: none !important; }
  .krpd-btn, .krpd-nav__link, .krpd-drop, .elementor-button, .elementor-widget-icon-box { transition: none !important; }
  .krpd-btn:hover, .elementor-button:hover, .elementor-widget-icon-box:hover { transform: none !important; }
  .krpx-leader, .krpx-benefit, .krpv-az__btn { transition: none !important; }
  .krpx-leader:hover, .krpx-benefit:hover { transform: none !important; }
}

/* ==========================================================================
   REFINEMENT PASS (9th) — split photographic heroes, location/warranty/contact
   redesign, blog redesign, footer "Get Directions" color. All new classes;
   nothing above is overridden except the scoped .krpd-floc__dir color.
   ========================================================================== */

/* --- Split photographic hero: dark navy + text left, fading into a KRP photo
   right (service, vehicle, location, warranty, contact, blog heroes). -------- */
.krpv { font-family: var(--krpd-font); }
/* Split hero = photograph BEHIND a full-width navy scrim (no navy|photo seam).
   The base is a FLAT navy identical to the scrim's opaque colour, so wherever the
   photo's left edge sits it is buried under matching opaque navy — nothing marks
   where "the image starts". */
.krpv-hero--split { position: relative; display: flex; align-items: center; min-height: clamp(400px, 40vw, 520px); background: #14171c; }
.krpv-hero--split::after { display: none; }               /* drop base cyan glow; photo owns the right */
.krpv-hero--split .krpv-hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--krpd-container); }
.krpv-hero--split .krpv-hero__content { position: relative; z-index: 2; max-width: 600px; }
/* BOTTOM LAYER — the photograph. Occupies the right of the hero but extends well
   to the left (its left edge, at 44%, stays under the opaque scrim at every
   width). */
.krpv-hero__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 0; overflow: hidden; }
.krpv-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kpos, 50% 50%); display: block; }
/* TOP LAYER — a FULL-WIDTH navy scrim over the whole hero: opaque #14171c through
   the text zone and past the photo's left edge (44%), then a long smooth fade to
   fully transparent so the photo is revealed on the right with NO vertical edge.
   Reaches 0 alpha on the right so the photograph is not over-darkened; a faint
   bottom vignette only grounds the base. */
.krpv-hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      #14171c 0%, #14171c 44%,
      rgba(20,23,28,.86) 53%,
      rgba(20,23,28,.52) 64%,
      rgba(20,23,28,.24) 77%,
      rgba(20,23,28,.07) 89%,
      rgba(20,23,28,0) 100%),
    linear-gradient(0deg, rgba(20,23,28,.20) 0%, rgba(20,23,28,0) 24%); }
.krpv-hero__facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.krpv-hero__facts li { display: flex; align-items: center; gap: 10px; color: #dbe2ea; font-size: 15px; }
.krpv-hero__facts li svg { width: 18px; height: 18px; color: #8fd0ee; flex: none; }
.krpv-hero__facts a { color: #8fd0ee; text-decoration: none; font-weight: 700; }
.krpv-hero__facts a:hover { color: #fff; }
/* Tablet + phone (<=1024px): full-bleed photograph behind a strong, EVEN overlay
   — same "photo behind navy" principle, just stacked, with the text kept highly
   readable over the top. The single continuous photo + single continuous overlay
   means there is no seam here either. */
@media (max-width: 1024px) {
  .krpv-hero--split { min-height: 0; display: block; background: #14171c; }
  .krpv-hero--split .krpv-hero__photo { width: 100%; }
  .krpv-hero--split .krpv-hero__content { max-width: none; }
  .krpv-hero__fade { inset: 0; background:
    linear-gradient(180deg, rgba(20,23,28,.80) 0%, rgba(20,23,28,.72) 46%, rgba(20,23,28,.90) 100%),
    linear-gradient(90deg, rgba(20,23,28,.34) 0%, rgba(20,23,28,.06) 100%); }
}

/* --- Static info cards (location feature sections) ------------------------- */
.krpx-infocards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.krpx-infocard { background: var(--krpd-bg); border: 1px solid var(--krpd-line); border-radius: var(--krpd-r); padding: 24px 22px; box-shadow: var(--krpd-shadow-sm); }
.krpx-infocard__ic { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(214,33,40,.08); color: var(--krpd-red); margin-bottom: 14px; }
.krpx-infocard__ic svg { width: 24px; height: 24px; }
.krpx-infocard :is(h2,h3,h4) { margin: 0 0 8px; font-size: 1.12rem; font-weight: 700; color: var(--krpd-ink); }
.krpx-infocard p { margin: 0 0 8px; color: var(--krpd-ink-2); font-size: .97rem; line-height: 1.62; }
.krpx-infocard p:last-child { margin-bottom: 0; }
.krpx-prose { max-width: 840px; }
.krpx-prose .krpx-subh { font-size: 1.25rem; font-weight: 700; color: var(--krpd-ink); margin: 0 0 10px; }
.krpx-prose p { color: var(--krpd-ink-2); line-height: 1.7; margin: 0 0 14px; }

/* --- Location / contact info + map card ------------------------------------ */
.krpx-locinfo { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; align-items: stretch; background: var(--krpd-bg); border: 1px solid var(--krpd-line); border-radius: var(--krpd-r-lg); box-shadow: var(--krpd-shadow-md); overflow: hidden; }
.krpx-locinfo__body { padding: 30px; }
.krpx-locinfo__name { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 1.35rem; font-weight: 800; color: var(--krpd-ink); }
.krpx-locinfo__name svg { width: 22px; height: 22px; color: var(--krpd-red); flex: none; }
.krpx-locinfo__addr { margin: 0 0 12px; color: var(--krpd-ink-2); }
.krpx-locinfo__tel { display: inline-flex; align-items: center; gap: 8px; font-size: 1.22rem; font-weight: 800; color: var(--krpd-red); text-decoration: none; }
.krpx-locinfo__tel svg { width: 18px; height: 18px; }
.krpx-locinfo__hrs { display: flex; align-items: center; gap: 8px; color: var(--krpd-ink-2); margin: 12px 0 0; font-size: .95rem; }
.krpx-locinfo__hrs svg { width: 16px; height: 16px; color: var(--krpd-blue); flex: none; }
.krpx-locinfo__hrs--muted { color: var(--krpd-muted); margin-top: 4px; }
.krpx-locinfo__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.krpx-locmap { width: 100%; min-height: 300px; height: 100%; border: 0; display: block; filter: grayscale(.12); }
.krpx-contactgrid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 992px) { .krpx-contactgrid { grid-template-columns: 1fr 1fr; } }

/* --- Warranty panels (verbatim legal copy, on-brand) ---------------------- */
.krpx-wpanels { display: grid; gap: 18px; max-width: 940px; margin: 0 auto; }
.krpx-wpanel { background: var(--krpd-bg); border: 1px solid var(--krpd-line); border-left: 4px solid var(--krpd-blue); border-radius: var(--krpd-r); padding: 26px 28px; box-shadow: var(--krpd-shadow-sm); }
.krpx-wpanel__h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.28rem; font-weight: 800; color: var(--krpd-ink); }
.krpx-wpanel__h svg { width: 22px; height: 22px; color: var(--krpd-blue); flex: none; }
.krpx-wpanel p { margin: 0 0 12px; color: var(--krpd-ink-2); line-height: 1.72; }
.krpx-wpanel p:last-child { margin-bottom: 0; }
.krpx-wpanel--feature { border-left-color: var(--krpd-red); background: linear-gradient(180deg, rgba(214,33,40,.05), transparent 55%); }
.krpx-wpanel--feature .krpx-wpanel__h svg { color: var(--krpd-red); }
.krpx-wpanel--fine { border-left-color: var(--krpd-muted); background: var(--krpd-bg-soft); }
.krpx-wpanel--fine p { font-size: .92rem; }

@media (max-width: 900px) {
  .krpx-infocards { grid-template-columns: 1fr 1fr; }
  .krpx-locinfo { grid-template-columns: 1fr; }
  .krpx-locmap { min-height: 240px; }
}
@media (max-width: 600px) { .krpx-infocards { grid-template-columns: 1fr; } }

/* --- Vehicle "Common Issues" cards (whole card is a link to a service) ----- */
.krpv-issue :is(h2,h3,h4) { line-height: 1.25; }
.krpv-issue p { min-height: 0; }

/* Blog & Specials content sat in a ~59%-wide LEFT column (leftover of the old
   posts+sidebar / offset row = shared container 8b10672). Make that column full
   width so the post grid / coupon grid fill the page and CENTER in the content
   container. Scoped to these two page types. */
.krp-blog .elementor-element-8b10672,
.krp-specials .elementor-element-8b10672 { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; margin-left: auto; margin-right: auto; }

/* --- BLOG: modern article-card archive + readable post typography --------- */
.krp-blog .elementor-widget-posts { max-width: var(--krpd-container); margin-left: auto; margin-right: auto; }
/* breathing room above the pagination at the foot of the archive */
.krp-blog .elementor-pagination { margin-top: 40px; text-align: center; }
.krp-blog .elementor-posts-container { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.krp-blog .elementor-post { position: relative; margin: 0; background: #fff; border: 1px solid var(--krpd-line); border-radius: var(--krpd-r); overflow: hidden; box-shadow: var(--krpd-shadow-sm); display: flex; flex-direction: column; padding-top: 172px; transition: transform .16s ease, box-shadow .16s ease; }
.krp-blog .elementor-post:hover { transform: translateY(-4px); box-shadow: var(--krpd-shadow-md); }
.krp-blog .elementor-post__thumbnail { display: none !important; }
.krp-blog .elementor-post::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 172px; background-size: cover; background-position: center; background-color: #1c2430; }
.krp-blog .elementor-post:nth-child(5n+1)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img6552.webp); }
.krp-blog .elementor-post:nth-child(5n+2)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img3612.webp); }
.krp-blog .elementor-post:nth-child(5n+3)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img6595.webp); }
.krp-blog .elementor-post:nth-child(5n+4)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img6575.webp); }
.krp-blog .elementor-post:nth-child(5n+5)::before { background-image: url(/wp-content/uploads/krp/photos/krp-cli-img6572.webp); }
.krp-blog .elementor-post__text { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; border: 0; }
.krp-blog .elementor-post__title { font-size: 1.14rem; line-height: 1.34; margin: 0 0 10px; font-weight: 700; }
.krp-blog .elementor-post__title a { color: var(--krpd-ink); text-decoration: none; }
.krp-blog .elementor-post__title a:hover { color: var(--krpd-red); }
.krp-blog .elementor-post__meta-data { font-size: .82rem; color: var(--krpd-muted); margin-bottom: 10px; }
.krp-blog .elementor-post__excerpt { margin-bottom: 14px; }
.krp-blog .elementor-post__excerpt p { font-size: .95rem; color: var(--krpd-ink-2); line-height: 1.6; margin: 0; }
.krp-blog .elementor-post__read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--krpd-red); font-weight: 700; text-decoration: none; border: 0; padding: 0; }
.krp-blog .elementor-post__read-more:hover { gap: 9px; }
/* the demoted "Blog" title band (if any) — keep it out of the way of the hero */
.krp-blog .elementor-widget-theme-page-title, .krp-blog .elementor-widget-archive-title { display: none; }
/* leftover Elementor promo/contact block (redundant with the new hero + CTA band
   + footer; also carried an out-of-date phone) — hidden on blog index & posts */
.krp-blog .elementor-element-8ee5d5b, .krp-blog .elementor-element-771c522,
.krp-post .elementor-element-8ee5d5b, .krp-post .elementor-element-771c522 { display: none !important; }
/* The desktop-only right-side sidebar container (e1019fd) wraps the redundant
   "Book Service Now" button + promo (templates 4587/6730, already hidden). Its
   EMPTY 313px column still pushed the blog posts AND specials coupons into a
   narrow left column. Hidden site-wide so that content fills and centers. Kept in
   DOM for SEO; legitimate header/footer/in-page CTAs are unaffected. */
.krp-enhanced .elementor-element-e1019fd { display: none !important; }
/* Legacy SHARED Elementor library blocks embedded on ~79 pages (brake/exhaust/
   battery service pages, about, specials, blog, blog posts): a redundant
   "Book Service Now" button (template 4587) and a promo/contact block (template
   6730) that carried an OUT-OF-DATE phone number. Both are fully redundant with
   the redesigned header, footer, in-page CTAs and warranty band — and they'd read
   as old-template remnants beneath the redesigned bodies. Hidden site-wide (kept
   in the DOM for SEO/no-JS). The legitimate KRP Book Service / Call CTAs in the
   header, footer, bookbar and SVCCTA band are unaffected. */
.krp-enhanced div[data-elementor-type="container"][data-elementor-id="4587"],
.krp-enhanced div[data-elementor-type="container"][data-elementor-id="6730"] { display: none !important; }

.krp-post .elementor-widget-theme-post-featured-image { display: none; }
.krp-post .elementor-widget-theme-post-title h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em; color: var(--krpd-ink); max-width: 820px; margin-left: auto; margin-right: auto; }
.krp-post .elementor-widget-post-info { max-width: 820px; margin-left: auto; margin-right: auto; color: var(--krpd-muted); }
.krp-post .elementor-widget-theme-post-content { max-width: 780px; margin-left: auto; margin-right: auto; }
.krp-post .elementor-widget-theme-post-content p { font-size: 1.07rem; line-height: 1.8; color: var(--krpd-ink-2); margin: 0 0 18px; }
.krp-post .elementor-widget-theme-post-content h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin: 36px 0 14px; color: var(--krpd-ink); line-height: 1.2; }
.krp-post .elementor-widget-theme-post-content h3 { font-size: 1.3rem; margin: 26px 0 10px; color: var(--krpd-ink); }
.krp-post .elementor-widget-theme-post-content ul, .krp-post .elementor-widget-theme-post-content ol { max-width: 780px; margin: 0 auto 18px; padding-left: 24px; }
.krp-post .elementor-widget-theme-post-content li { line-height: 1.8; color: var(--krpd-ink-2); margin-bottom: 8px; }
.krp-post .elementor-widget-theme-post-content a { color: var(--krpd-red); text-decoration: underline; text-underline-offset: 2px; }
.krp-post .elementor-widget-theme-post-content img { border-radius: var(--krpd-r); }

@media (max-width: 1000px) { .krp-blog .elementor-posts-container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .krp-blog .elementor-posts-container { grid-template-columns: 1fr; } }

/* --- Footer location "Get Directions" — WHITE (scoped to footer loc items) - */
.krpd-footer .krpd-floc__dir { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.34); color: #ffffff !important; }
.krpd-footer .krpd-floc__dir svg { color: #ffffff; }
.krpd-footer .krpd-floc__dir:hover, .krpd-footer .krpd-floc__dir:focus-visible { background: #ffffff; color: var(--krpd-ink) !important; border-color: #ffffff; }
.krpd-footer .krpd-floc__dir:hover svg, .krpd-footer .krpd-floc__dir:focus-visible svg { color: var(--krpd-red); }

/* ==========================================================================
   2026-10-01 ORGANIC PASS (Dawson): readability, full-width service copy,
   footer rebuilt to the autoservicefairfax.com pattern, inline links.
   ========================================================================== */
/* Larger text everywhere copy is read. */
html.krp-enhanced .elementor-kit-9, html.krp-enhanced .krpv, html.krp-enhanced .krpx-home, html.krp-enhanced .krpx-about { font-size: 17px; }
.krpx-lead { font-size: 1.2rem; line-height: 1.65; }
.krpx-prose p, .krpx-prose li { font-size: 1.12rem; line-height: 1.75; }
.krpx-prose .krpx-subh { font-size: 1.4rem; }
.krpx-infocard p { font-size: 1.04rem; line-height: 1.65; }
.krpx-infocard :is(h2,h3,h4) { font-size: 1.2rem; }
.krpv-checklist li { font-size: 1.08rem; line-height: 1.6; }
.krpv-why__item p { font-size: 1.02rem; }
.krpx-faq__a { font-size: 1.08rem; line-height: 1.7; }
.krpx-faq__item summary { font-size: 1.12rem; }
.krpv-lead-grid p, .krpv-section p.krpx-cross { font-size: 1.12rem; line-height: 1.75; }
.krpx-h2 { font-size: clamp(1.75rem, 2.6vw, 2.35rem); }
/* Service and vehicle body copy runs the full content width (was an 840px column with empty space beside it). */
.krpx-prose, .krp-servicepage .krpx-prose, .krpx-bodywrap { max-width: none; }
.krpv-checklist { max-width: none; }
.krpv-section__head .krpx-lead { max-width: none; }
/* Prose-only sections are set as a split: copy beside an authentic shop photo. */
.krpx-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.krpx-split--rev > .krpx-split__media { order: -1; }
.krpx-split__media img { width: 100%; height: 100%; min-height: 280px; max-height: 420px; object-fit: cover; border-radius: var(--krpd-r); box-shadow: var(--krpd-shadow-md); display: block; }
.krpx-split .krpx-prose { max-width: none; }
@media (max-width: 900px) { .krpx-split { grid-template-columns: 1fr; } .krpx-split--rev > .krpx-split__media { order: 0; } .krpx-split__media img { max-height: 300px; } }
/* Inline contextual links inside copy. */
.krpv p a:not(.krpd-btn), .krpv li a:not(.krpd-btn), .krpx-home p a:not(.krpd-btn), .krpx-about p a:not(.krpd-btn), .krpx-faq__a a, .krpx-prose a, .krpx-cross a { color: var(--krpd-red); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
.krpv p a:not(.krpd-btn):hover, .krpx-prose a:hover, .krpx-cross a:hover { color: var(--krpd-red-dark); text-decoration-thickness: 2px; }
.krpx-warranty p a, .krpx-h2--light + p a, .krpx-lead--light a { color: #fff; }
/* Cross-reference paragraph at the end of a service body. */
.krpx-cross { margin: 26px 0 0; padding: 22px 26px; border-left: 4px solid var(--krpd-red); background: var(--krpd-bg-soft); border-radius: 0 var(--krpd-r) var(--krpd-r) 0; }
/* Carfax photo inside the dark warranty band. */
.krpx-wphoto { margin: 28px auto 0; max-width: 680px; border-radius: var(--krpd-r); overflow: hidden; box-shadow: var(--krpd-shadow-lg); }
/* The award photo is a landscape shelf shot, so it fills the frame cleanly.
   Keep this box landscape: a tall photo here crops to a zoomed band. */
.krpx-wphoto img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto;
  object-fit: cover; object-position: 50% 58%; background: #0e1218; }
.krpx-wphoto figcaption { background: #0e1218; color: #c9d2dd; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 10px 14px; font-weight: 700; }

/* ---- Footer (autoservicefairfax.com pattern) ---- */
.krpf-visit { background: #0b0e13; color: #fff; border-top: 1px solid rgba(255,255,255,.06); }
.krpf-visit__in { max-width: var(--krpd-container); margin: 0 auto; padding: clamp(44px, 5vw, 68px) 24px clamp(36px, 4vw, 56px); }
.krpf-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: #c9d2dd; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.krpf-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--krpd-red); display: inline-block; }
.krpf-visit__title { margin: 10px 0 0; color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.25rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.krpf-visit__sub { margin: 10px 0 0; max-width: 760px; color: #aeb6c2; font-size: 1.02rem; line-height: 1.6; }
.krpf-visit__sub a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.krpf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.krpf-loc { display: flex; flex-direction: column; gap: 10px; }
.krpf-loc__name { margin: 0 0 4px; font-size: 1.15rem; font-weight: 800; }
.krpf-loc__name a { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.krpf-loc__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.krpf-loc__name svg { width: 18px; height: 18px; color: var(--krpd-red); }
.krpf-loc--blue .krpf-loc__name svg { color: #8fbdf8; }
.krpf-detail { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: inherit; text-decoration: none; }
.krpf-detail--link { transition: background 120ms ease, border-color 120ms ease; }
.krpf-detail--link:hover, .krpf-detail--link:focus-visible { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.krpf-detail--link:hover em { text-decoration: underline; }
.krpf-detail__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(214,33,40,.2); color: #ff8079; }
.krpf-detail__icon svg { width: 18px; height: 18px; }
.krpf-loc--blue .krpf-detail__icon { background: rgba(52,160,207,.22); color: #8fd0ee; }
.krpf-detail > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.krpf-detail small { color: #8b95a3; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.krpf-detail b { color: rgba(255,255,255,.92); font-weight: 500; font-size: 15px; line-height: 1.45; }
.krpf-detail em { font-style: normal; color: #ff6b66; font-weight: 600; font-size: 14px; margin-top: 2px; }
.krpf-loc__more { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; color: #c9d2dd; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.krpf-loc__more svg { width: 14px; height: 14px; }
.krpf-loc__more:hover { color: #fff; }
.krpf-flagbar { display: block; height: 4px; max-width: var(--krpd-container); margin: 0 auto; background: linear-gradient(90deg, var(--krpd-blue) 0 33.33%, #fff 33.33% 66.66%, var(--krpd-red) 66.66% 100%); }
.krpf-bottom { background: #0b0e13; color: #8b95a3; }
.krpf-bottom__in { max-width: var(--krpd-container); margin: 0 auto; padding: 18px 24px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.krpf-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.krpf-legal span, .krpf-legal a { color: #8b95a3; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; }
.krpf-legal a:hover { color: #fff; }
.krpf-socials { display: flex; gap: 10px; }
.krpf-socials a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #0b0e13; text-decoration: none; }
.krpf-socials a:hover { background: var(--krpd-red); color: #fff; }
.krpf-socials svg { width: 16px; height: 16px; }
/* The footer's own CTA band and the old location/link blocks are retired. */
.krpd-footlocs, .krpd-footmain, .krpd-footbar { display: none !important; }
@media (max-width: 1024px) { .krpf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .krpf-grid { grid-template-columns: 1fr; } .krpf-bottom__in { flex-direction: column; align-items: center; text-align: center; } .krpf-legal { justify-content: center; } }
/* Section heads on service pages read wider now that the body copy runs full width. */
.krp-servicepage .krpv-section__head:not(.krpx-center) { max-width: 980px; }
.krpv-section__head--wide { max-width: none !important; margin-bottom: 22px !important; }
/* The split hero needs the same top clearance as the plain hero under the sticky header. */
.krpv-hero--split .krpv-hero__in { padding-top: clamp(46px, 6vw, 84px); padding-bottom: clamp(46px, 6vw, 84px); }
/* Area pages (template 3071): the post content sat in a ~60% left column beside an empty sidebar column. Full width, larger type. */
html.krp-enhanced .elementor-3071 .elementor-element-8b10672 { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }
html.krp-enhanced .elementor-3071 .elementor-element-e1019fd { display: none !important; }
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content { font-size: 1.08rem; line-height: 1.75; }
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content h2:not(.krpo__title) { font-size: 1.5rem; margin-top: 1.6em; }
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content a { color: var(--krpd-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Town pages, shop sections, ratings (2026-10-01) */
.krpx-rating { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.krpv-hero__facts .krpx-rating { color: #fff; }
.krpx-infocards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .krpx-infocards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .krpx-infocards--4 { grid-template-columns: 1fr; } }
a.krpx-infocard--link { text-decoration: none; color: inherit; display: block; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
a.krpx-infocard--link:hover { transform: translateY(-3px); box-shadow: var(--krpd-shadow-md); border-color: var(--krpd-red); }
a.krpx-infocard--link h3 { color: var(--krpd-red); }
.krpv-chip small { color: var(--krpd-muted); font-weight: 500; margin-left: 4px; }
.krp-areapage .krpv-lead-grid .krpx-locinfo { height: 100%; }
.krpd-hero__video[preload="none"]:not([src]) { background: transparent; }

/* ==========================================================================
   ORPHAN-FREE CARD GRIDS (2026-10-01). A 3-up grid with 5 cards left an empty
   slot; now 2 leftover cards split the last row, 4 cards sit 2x2, 7 cards go
   3+2+2, a lone leftover spans the row. Mobile keeps its own column counts.
   ========================================================================== */
@media (min-width: 901px) {
  .krpx-infocards:not(.krpx-infocards--4), .krpv-cards, .krpx-wcards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .krpx-infocards:not(.krpx-infocards--4) > *, .krpv-cards > *, .krpx-wcards > * { grid-column: span 2; }
  /* two leftovers (5, 8, 11 cards): last two span half the row each */
  .krpx-infocards:not(.krpx-infocards--4):has(> :nth-child(3n+2):last-child) > :nth-last-child(-n+2),
  .krpv-cards:has(> :nth-child(3n+2):last-child) > :nth-last-child(-n+2),
  .krpx-wcards:has(> :nth-child(3n+2):last-child) > :nth-last-child(-n+2) { grid-column: span 3; }
  /* exactly four: 2x2 */
  .krpx-infocards:not(.krpx-infocards--4):has(> :nth-child(4):last-child) > *,
  .krpv-cards:has(> :nth-child(4):last-child) > *,
  .krpx-wcards:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
  /* one leftover with 7+ cards: last four go 2+2 */
  .krpx-infocards:not(.krpx-infocards--4):has(> :nth-child(3n+1):nth-child(n+7):last-child) > :nth-last-child(-n+4),
  .krpv-cards:has(> :nth-child(3n+1):nth-child(n+7):last-child) > :nth-last-child(-n+4),
  .krpx-wcards:has(> :nth-child(3n+1):nth-child(n+7):last-child) > :nth-last-child(-n+4) { grid-column: span 3; }
  /* a single card spans the row */
  .krpx-infocards:not(.krpx-infocards--4):has(> :first-child:last-child) > *, .krpx-wcards:has(> :first-child:last-child) > * { grid-column: span 6; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .krpx-infocards:not(.krpx-infocards--4):has(> :nth-child(odd):last-child) > :last-child { grid-column: span 2; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .krpv-cards:has(> :nth-child(odd):last-child) > :last-child { grid-column: span 2; }
}


/* ---------------------------------------------------------------------------
   LOCATION HERO (Dawson, 2026-10-01: "we can't even see the location").
   The standard split hero hides a storefront behind the scrim: the photo starts
   at 44% and the navy stays near-opaque to 64%, so only a sliver shows. On the
   four shop pages the storefront IS the point, so the photograph runs full
   width and the scrim only darkens the column the text sits in, fading out
   well before the building.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .krpv-hero--loc .krpv-hero__photo { width: 100%; }
  .krpv-hero--loc .krpv-hero__fade {
    background:
      linear-gradient(90deg,
        rgba(20,23,28,.96) 0%,
        rgba(20,23,28,.94) 26%,
        rgba(20,23,28,.80) 38%,
        rgba(20,23,28,.46) 50%,
        rgba(20,23,28,.18) 62%,
        rgba(20,23,28,.04) 76%,
        rgba(20,23,28,0) 100%),
      linear-gradient(0deg, rgba(20,23,28,.26) 0%, rgba(20,23,28,0) 30%); }
  .krpv-hero--loc .krpv-hero__content { max-width: 520px; }
}

/* A portrait photo in the intro grid stretched the row and stranded the copy in
   the middle of a tall column (Dawson, 2026-10-01). Cap the photo's height and
   let the text start at the top of the row. */
@media (min-width: 901px) {
  .krpv-lead-grid { align-items: start; }
  .krpv-lead-grid > div:last-child { align-self: stretch; }
  .krpv-lead__img { max-height: 480px; height: 100%; object-fit: cover; }
}

/* Shop hero, mirrored: text and scrim on the RIGHT so the photograph is revealed
   on the LEFT. Used where the building and signage sit left of centre
   (Dawson, 2026-10-01: "flip it so we can see the sign and building more"). */
@media (min-width: 1025px) {
  .krpv-hero--flip .krpv-hero__in { display: flex; justify-content: flex-end; }
  .krpv-hero--flip .krpv-hero__content { max-width: 520px; }
  .krpv-hero--flip .krpv-hero__fade {
    background:
      linear-gradient(270deg,
        rgba(20,23,28,.96) 0%,
        rgba(20,23,28,.94) 26%,
        rgba(20,23,28,.80) 38%,
        rgba(20,23,28,.46) 50%,
        rgba(20,23,28,.18) 62%,
        rgba(20,23,28,.04) 76%,
        rgba(20,23,28,0) 100%),
      linear-gradient(0deg, rgba(20,23,28,.26) 0%, rgba(20,23,28,0) 30%); }
}


/* Mobile readability: the footer legal row and coupon fine print were the only
   12px text left on the site (Dawson asked for larger text throughout). */
@media (max-width: 900px) {
  .krpf-legal span, .krpf-legal a, .krpf-bottom, .krpd-footbar { font-size: 13px; }
  .krpd-floc__addr, .krpd-floc__hrs, .krpd-floc__more { font-size: 14px; }
  .krpx-specials small, .krpx-coupon small, .krpx-coupon__fine, .krpx-fine { font-size: 13px; }
  .krpd-badge__tx small, .krpx-ase__tx small, .krpx-review__meta small { font-size: 13px; }
}


/* ---------------------------------------------------------------------------
   SPECIALS hero. The boxed photo beside the copy read as a stock slot, so the
   shop's own flag now runs full width behind the same scrim the shop pages use,
   with a three-stripe rule picking up the flag's colours.
   --------------------------------------------------------------------------- */
.krpx-flagrule { display: flex; gap: 6px; margin: 0 0 18px; }
.krpx-flagrule i { display: block; width: 34px; height: 5px; border-radius: 3px; }
.krpx-flagrule i:nth-child(1) { background: var(--krpd-red); }
.krpx-flagrule i:nth-child(2) { background: #fff; }
.krpx-flagrule i:nth-child(3) { background: #34a0cf; }
.krpx-specbullets { list-style: none; margin: 20px 0 4px; padding: 0; display: grid; gap: 10px; }
.krpx-specbullets li { display: flex; align-items: center; gap: 10px; color: #e7ecf3; font-size: 1.02rem; }
.krpx-specbullets li svg { width: 18px; height: 18px; flex: none; color: #8fd0ee; }
@media (min-width: 1025px) { .krpx-spechero .krpv-hero__content { max-width: 560px; } }
@media (max-width: 900px) {
  html.krp-specials .elementor-widget-text-editor p { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY AND RHYTHM (Dawson, 2026-10-02). Section headings were 28px
   against First Call's 32px, and sections sat too close together, so the bold
   headings never read as the start of something new. Matched to First Call's
   scale and given more air above each heading.
   --------------------------------------------------------------------------- */
/* Elementor's global kit caps every heading (.elementor-kit-9 h2 at 28px) and
   outranks a single class, so these use a doubled class to win on specificity
   without !important. First Call runs H2 at 32px; this lands at 34 to 38. */
.krpx-h2.krpx-h2 { font-size: clamp(1.8rem, 2.45vw, 2.15rem); line-height: 1.16; letter-spacing: -.015em; }
.krpv-hero .krpx-h2.krpx-h2, .krpx-warranty .krpx-h2.krpx-h2 { font-size: clamp(1.75rem, 2.35vw, 2.05rem); }
.krpv-section { padding: clamp(56px, 6.5vw, 96px) 0; }
.krpv-section__head { max-width: 820px; margin: 0 0 clamp(26px, 3vw, 44px); }
.krpv-section :is(h2,h3,h4).krpx-h3, .krpx-infocard :is(h2,h3,h4), .krpv-card :is(h2,h3,h4), .krpv-section__head + * :is(h2,h3,h4) { font-size: clamp(1.1rem, 1.25vw, 1.22rem); }
/* a heading that follows body copy inside the same section needs its own gap */
.krpx-prose + .krpv-section__head, .krpx-split + .krpv-section__head { margin-top: clamp(30px, 3.4vw, 52px); }
/* A heading absorbed into a merged section sits as a sub-head with its own air. */
.krpx-subhead { margin: clamp(30px, 3.2vw, 46px) 0 14px; font-size: clamp(1.3rem, 1.7vw, 1.55rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.22; }
.krpv-section__head + .krpx-subhead, .krpx-subhead:first-child { margin-top: 0; }

/* Second consecutive section of the same kind: same content, different face,
   so a long page never shows the same layout twice in a row. */
.krpv-section--alt .krpv-checklist { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; max-width: none; }
.krpv-section--alt .krpv-checklist li { background: #fff; border: 1px solid var(--krpd-line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.krpv-section--soft.krpv-section--alt .krpv-checklist li { background: #fff; }
.krpv-section--alt .krpx-prose { border-left: 3px solid var(--krpd-red); padding-left: clamp(18px, 2vw, 30px); max-width: 880px; }
.krpv-section--alt .krpx-infocards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 760px) { .krpv-section--alt .krpx-prose { padding-left: 14px; } }

/* A tall photo beside a short paragraph left a bare column under the text
   (Dawson, 2026-10-02). Cap the split photo so the two sides stay balanced. */
@media (min-width: 901px) {
  .krpx-split { align-items: center; }
  .krpx-split__media img { min-height: 0; max-height: 340px; aspect-ratio: 4 / 3; object-fit: cover; }
  .krpx-split > div:first-child > .krpx-prose:only-child { align-self: center; }
}

/* Per-page warranty tier note. KRP's terms exclude engines and transmissions
   and cap wear items at 24mo/24k, so the pages for those services say so
   rather than inheriting the sitewide lifetime line. */
.krpx-wtier { margin-top: 14px !important; font-size: .98rem !important; opacity: .9; }
.krpx-wtier a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   HEADING SCALE, 2026-10-02.
   Dawson, after comparing pages: "make all of the titles 52.8". 52.8px is the
   size the services H1 was already running at, and he picked it as the one
   correct size for the site. So every page title and every section heading now
   tops out there instead of the old spread of 28px to 52.8px.
   The value is a ceiling, not a fixed size: the clamp scales the same headings
   down on narrow screens so nothing overflows at phone width.
   This block is last in the file and uses doubled classes, which is what beats
   the Elementor kit without reaching for !important.
   --------------------------------------------------------------------------- */
:root { --krpd-title: clamp(2rem, 4.1vw, 3.3rem); }   /* 3.3rem = 52.8px */

/* Page titles */
.krpv-hero h1,
.krpd-hero .krpd-hero__title.krpd-hero__title,
.krp-post .elementor-widget-theme-post-title h1 { font-size: var(--krpd-title); }
.krpd-hero .krpd-hero__title .krpd-hero__towns { font-size: .9em; }

/* Section headings */
.krpx-h2.krpx-h2,
.krpv-hero .krpx-h2.krpx-h2,
.krpx-warranty .krpx-h2.krpx-h2,
.krpx-bookbar__h.krpx-bookbar__h,
.krpd-footcta__t.krpd-footcta__t,
.krpf-visit__title.krpf-visit__title { font-size: var(--krpd-title); line-height: 1.12; }

/* The call sheet is a dialog, not a page section, so it keeps a dialog size. */
.krp-sheet__title.krp-sheet__title { font-size: clamp(1.5rem, 2.1vw, 1.85rem); }

/* Card headings are labels rather than titles, raised to sit under the new
   scale rather than up at it. */
.krpv-section :is(h2,h3,h4).krpx-h3,
.krpx-infocard :is(h2,h3,h4),
.krpv-card :is(h2,h3,h4),
/* Raised 2026-10-06: with section headings fixed at 52.8px a 20.9px card
   heading read as an afterthought beside them (Dawson: "the title of them are
   weirdly small"). 25.6px keeps the card a rung below without closing the gap. */
.krpv-section__head + * :is(h2,h3,h4) { font-size: clamp(1.32rem, 1.78vw, 1.6rem); }
.krpx-speccard :is(h2,h3,h4) { font-size: 1.56rem; }
.krpx-loccard :is(h2,h3,h4) { font-size: 1.56rem; }
.krpd-footcol :is(h2,h3,h4) { font-size: 1.12rem; }

/* ---------------------------------------------------------------------------
   SERVICE TILES, 2026-10-02.
   Dawson: "can we do images on these services and do the filter over it and
   the effect when hovering over it ... like we did for first call auto care",
   and "only have 6 there, the bottom two big ones look weird".
   So: a photo tile with a dark gradient that keeps the name readable, and on
   hover the image eases in while the gradient's base turns KRP red. Six tiles
   in a 3 x 2 grid, which fills evenly and leaves no stretched orphan row.
   --------------------------------------------------------------------------- */
.krpx-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin-top: 34px;
}
/* The services hub runs the same tiles over all sixteen services, so it uses
   four columns: three would leave a single tile alone on the last row. */
@media (min-width: 1100px) { .krpx-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.krpx-tiles--4 .krpx-tile { min-height: 260px; }
.krpx-tile {
  position: relative; display: flex; align-items: flex-end; isolation: isolate;
  /* 350, not 300. The library is shot portrait, so a wide shallow tile crops
     a thin band out of the middle of it. The services hub runs four across,
     which makes a tile 293x260 and shows much more of the photograph, and
     Dawson preferred that framing on the home page too (2026-10-06). At three
     across a tile is about 397 wide, so 350 tall puts the home tiles at the
     same proportions as the hub's. */
  min-height: 350px; border-radius: 16px; overflow: hidden;
  text-decoration: none; color: #fff;
  box-shadow: 0 14px 34px rgba(16,24,40,.14);
}
/* The theme forces height:auto on every img, which let this one render at its
   full intrinsic height and get clipped by the tile instead of cropped by
   object-fit, so object-position never had any effect. Height is forced here. */
.krpx-tile .krpx-tile__img {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  max-width: none; aspect-ratio: auto; object-fit: cover;
  z-index: -2; transition: transform .5s ease;
}
.krpx-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,16,19,.30) 0%, rgba(13,16,19,.58) 52%, rgba(13,16,19,.88) 100%);
  transition: background .3s ease;
}
.krpx-tile:hover .krpx-tile__img,
.krpx-tile:focus-visible .krpx-tile__img { transform: scale(1.06); }
.krpx-tile:hover::after, .krpx-tile:focus-visible::after {
  background: linear-gradient(180deg, rgba(13,16,19,.24) 0%, rgba(13,16,19,.50) 48%, rgba(214,33,40,.82) 100%);
}
.krpx-tile:focus-visible { outline: 3px solid var(--krpd-red); outline-offset: 3px; }
.krpx-tile__body { padding: 22px 24px 24px; }
/* The tile is an <a>, and the theme colors links red with enough specificity
   to beat a single class, so white is stated on the tile and on the text. */
.krpx-tile.krpx-tile, .krpx-tile.krpx-tile:visited { color: #fff; }
.krpx-tile .krpx-tile__t {
  display: block; color: #fff;
  font-family: var(--krpd-font); font-weight: 800;
  font-size: 1.5rem; line-height: 1.16; letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.krpx-tile .krpx-tile__t::after {
  content: " \2192"; opacity: 0; transition: opacity .25s ease;
}
.krpx-tile:hover .krpx-tile__t::after,
.krpx-tile:focus-visible .krpx-tile__t::after { opacity: 1; }
.krpx-tile .krpx-tile__d {
  display: block; margin-top: 8px; font-size: 1.02rem; line-height: 1.5;
  color: rgba(255,255,255,.9); font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .krpx-tile__img { transition: none; }
  .krpx-tile:hover .krpx-tile__img { transform: none; }
}
@media (max-width: 1000px) { .krpx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .krpx-tiles { grid-template-columns: 1fr; } .krpx-tile { min-height: 250px; } }

/* The services index already used photo cards. Give them the same red wash on
   hover as the home tiles so the two pages read as one system, and bring the
   card title up to the tile's size. */
.krpx-svccard__grad { transition: background .3s ease; }
.krpx-svccard:hover .krpx-svccard__grad,
.krpx-svccard:focus-visible .krpx-svccard__grad {
  background: linear-gradient(to top, rgba(214,33,40,.85) 0%, rgba(13,16,19,.56) 38%, rgba(13,16,19,.14) 66%, rgba(13,16,19,0) 100%);
}
.krpx-svccard .krpx-svccard__title { font-size: 1.32rem; }

/* ---------------------------------------------------------------------------
   SPECIALS, 2026-10-02.
   Dawson: "can we copy the exact thing ABS unlimited has? just dont use a
   photo ... like font and button layout and font size and everything."
   This is the ABS special-offers card, same structure and same type scale,
   with the photo column dropped and KRP's red in place of ABS's.
   Doubled classes throughout because Elementor's kit styles every heading,
   list and button with enough specificity to beat a single class.
   --------------------------------------------------------------------------- */
/* The coupons sit inside an Elementor container capped at 760px, which
   squeezed the grid into one narrow column. Centering on the viewport frees
   it without touching the legacy container. Nine coupons fill a 3 x 3 with
   no orphan row. */
/* Nine coupons in two columns leaves one alone on the last row. Spanning it
   is the same treatment ABS gives a featured coupon. */
.krpo__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.krpo__card {
  position: relative; display: flex; flex-direction: column; min-height: 300px;
  background: #fff; border: 1px solid rgba(19,19,22,.10); border-radius: 2px;
  box-shadow: 0 12px 30px rgba(10,10,11,.09), 0 1px 2px rgba(10,10,11,.06);
  overflow: hidden;
}
.krpo__body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 22px 24px 20px; }
.krpo__cat.krpo__cat {
  display: flex; align-items: center; gap: 10px; margin: 0; color: #40434b;
  font-family: var(--krpd-font); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
}
.krpo__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px; flex: none;
  background: rgba(214,33,40,.10); color: var(--krpd-red);
}
/* Dawson: "we for some reason can barely read the words Warning Light Scan".
   A kit rule was pulling these down to 24px; stated at a size that reads. */
html .krpo .krpo__card .krpo__title.krpo__title {
  margin: 12px 0 0; color: var(--krpd-ink);
  font-family: var(--krpd-font); font-size: 34px; font-weight: 800; line-height: 1.08;
  letter-spacing: -.015em; text-wrap: balance; text-transform: none;
}
.krpo__prices { display: flex; align-items: flex-end; gap: 22px; margin-top: 12px; }
.krpo__price strong {
  display: block; color: var(--krpd-red); font-family: var(--krpd-font);
  font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}
.krpo__price--label.krpo__price--label strong { font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.krpo__hook.krpo__hook { margin: 12px 0 0; color: #2b2e35; font-size: 15px; line-height: 22px; font-weight: 400; }
.krpo__list.krpo__list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.krpo__list.krpo__list li {
  position: relative; padding-left: 22px; margin: 0; color: #2b2e35;
  font-size: 14px; line-height: 21px; list-style: none;
}
.krpo__list.krpo__list li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 7px;
  border-left: 2.5px solid var(--krpd-red); border-bottom: 2.5px solid var(--krpd-red);
  transform: rotate(-45deg);
}
.krpo__fine.krpo__fine { margin: 10px 0 0; color: #6b6f78; font-size: 12px; line-height: 17px; }
.krpo__footer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; padding-top: 18px; }
.krpo__ends { display: inline-flex; align-items: center; gap: 8px; color: #40434b; font-size: 14px; }
.krpo__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.krpo-btn.krpo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 14px; white-space: nowrap; cursor: pointer;
  background-color: var(--krpd-red); color: #fff; border: 2px solid var(--krpd-red); border-radius: 3px;
  font-family: var(--krpd-font); font-size: 14px; font-weight: 700; letter-spacing: .02em;
  line-height: 1.1; text-transform: none; box-shadow: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.krpo-btn.krpo-btn:hover, .krpo-btn.krpo-btn:focus-visible { background-color: #a7161c; border-color: #a7161c; color: #fff; }
.krpo-btn.krpo-btn--ghost { background-color: #fff; color: var(--krpd-ink); border-color: rgba(19,19,22,.25); }
.krpo-btn.krpo-btn--ghost:hover, .krpo-btn.krpo-btn--ghost:focus-visible { background-color: var(--krpd-ink); border-color: var(--krpd-ink); color: #fff; }
.krpo-print.krpo-print {
  background: none; background-color: transparent; border: 0; border-radius: 0;
  padding: 0 4px; min-height: 42px; cursor: pointer; color: var(--krpd-ink);
  font-family: var(--krpd-font); font-size: 14px; font-weight: 600; line-height: 1.1;
  text-transform: none; text-decoration: underline; text-underline-offset: 3px; box-shadow: none;
}
.krpo-print.krpo-print:hover, .krpo-print.krpo-print:focus-visible { color: var(--krpd-red); background-color: transparent; }
@media (max-width: 860px) { .krpo { grid-template-columns: 1fr; }
  .krpo__card:last-child:nth-child(odd) { grid-column: auto; } }
@media (max-width: 480px) {
  html .krpo .krpo__card .krpo__title.krpo__title { font-size: 27px; }
  .krpo__price strong { font-size: 38px; }
  .krpo__actions { width: 100%; }
  .krpo-btn.krpo-btn { flex: 1 1 auto; }
}

/* Print one coupon. The coupon lives deep inside the Elementor markup, so the
   script clones it into #krpo-printhost as a direct child of body; hiding the
   body's other children then leaves exactly that coupon on the page. */
#krpo-printhost { display: none; }
@media print {
  body.krpo-printmode > *:not(#krpo-printhost) { display: none !important; }
  body.krpo-printmode #krpo-printhost { display: block !important; margin: 0; padding: 0; }
  body.krpo-printmode #krpo-printhost .krpo__card {
    border: 2px dashed #999 !important; box-shadow: none !important; border-radius: 0 !important;
    width: 100% !important; max-width: 100% !important; break-inside: avoid;
  }
  body.krpo-printmode #krpo-printhost .krpo__stamp {
    margin: 12px 0 0; font-size: 11px; letter-spacing: .04em; color: #555; text-align: center;
  }
  body.krpo-printmode { background: #fff !important; }
  @page { margin: 14mm; }
}

/* ---------------------------------------------------------------------------
   REVIEWS PAGE, 2026-10-05.
   The export's /reviews/ carried an Elfsight widget that does not run in a
   static export, so the page was an H1 and nothing else. Rebuilt from the real
   Google reviews on each shop's Business Profile.
   --------------------------------------------------------------------------- */
.krpr__locs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 28px; }
.krpr__loc {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 20px 16px; border: 1px solid var(--krpd-line); border-radius: 14px;
  background: #fff; text-decoration: none; color: var(--krpd-ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.krpr__loc:hover, .krpr__loc:focus-visible {
  border-color: var(--krpd-red); box-shadow: var(--krpd-shadow-md); transform: translateY(-2px);
}
.krpr__loc-city { font-family: var(--krpd-font); font-size: 1.22rem; font-weight: 800; }
.krpr__loc-rating { font-family: var(--krpd-font); font-size: 2.1rem; font-weight: 800; color: var(--krpd-red); line-height: 1; }
.krpr__loc-count { font-size: .9rem; color: var(--krpd-muted); }
.krpr__stars { display: inline-flex; gap: 2px; color: #f5a623; }

.krpr__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.krpr__card {
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: 22px 22px 20px; background: #fff;
  border: 1px solid var(--krpd-line); border-radius: 14px; box-shadow: var(--krpd-shadow-sm);
}
.krpr__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.krpr__where { font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--krpd-muted); }
.krpr__text.krpr__text {
  margin: 0; padding: 0; border: 0; quotes: none; flex: 1;
  color: var(--krpd-ink-2); font-size: 1.02rem; line-height: 1.6;
}
.krpr__who { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.krpr__name { font-weight: 800; color: var(--krpd-ink); }
.krpr__who time { font-size: .86rem; color: var(--krpd-muted); }
.krpr__more { margin: 26px 0 0; text-align: center; color: var(--krpd-muted); font-size: .96rem; }
@media (max-width: 1000px) { .krpr__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .krpr__locs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .krpr__grid, .krpr__locs { grid-template-columns: 1fr; } }

/* Two raw <button> elements survive in Elementor html widgets on /specials/.
   They were unstyled browser buttons and one hung 70px past the right edge.
   Given the same treatment as every other booking control. */
.elementor-widget-html button[onclick*="AutoOps"] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 100%; min-height: 48px; padding: 0 22px; cursor: pointer;
  background-color: var(--krpd-red); color: #fff; border: 2px solid var(--krpd-red);
  border-radius: 999px; font-family: var(--krpd-font); font-size: 1rem; font-weight: 800;
  letter-spacing: .01em; line-height: 1.1; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.elementor-widget-html button[onclick*="AutoOps"]:hover,
.elementor-widget-html button[onclick*="AutoOps"]:focus-visible {
  background-color: #a7161c; border-color: #a7161c; color: #fff;
}
.elementor-widget-html:has(> .elementor-widget-container > button[onclick*="AutoOps"]) { text-align: center; }

/* Vehicle pages for makes with a single photo: the lead grid must collapse to
   one column, or the section renders with a half-empty right-hand column. */
.krpv-lead-grid--solo { grid-template-columns: 1fr !important; }
.krpv-lead-grid--solo > div { max-width: 78ch; }

/* ---------------------------------------------------------------------------
   HOME: ride options, 2026-10-05.
   The owner arranges rides through Uber, and a service advisor will drive a
   customer who would rather not take a rideshare. Same treatment we gave the
   equivalent section on ABS and First Call.
   --------------------------------------------------------------------------- */
.krpx-ride__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; margin-top: 34px;
}
.krpx-ridecard {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  background: #fff; border: 1px solid var(--krpd-line); border-radius: 16px;
  padding: 26px 24px; box-shadow: var(--krpd-shadow-sm);
}
.krpx-ridecard__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 13px;
  background: rgba(214,33,40,.09); color: var(--krpd-red); margin-bottom: 4px;
}
.krpx-ridecard__ic svg { width: 23px; height: 23px; }
.krpx-ridecard h3 {
  margin: 0; font-family: var(--krpd-font); font-size: 1.32rem; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.2; color: var(--krpd-ink);
}
.krpx-ridecard p { margin: 0; color: var(--krpd-ink-2); font-size: 1.04rem; line-height: 1.6; }
.krpx-ride__cta {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--krpd-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.krpx-ride__cta p { margin: 0; max-width: 56ch; color: var(--krpd-ink-2); font-size: 1.06rem; }
.krpx-ride__cta .krpv-hero__cta { margin: 0; }
@media (max-width: 980px) { .krpx-ride__grid { grid-template-columns: 1fr; } }


/* Dawson: the home page 'why choose us' points should be centred. Centring the
   icon over the text reads better in a three-up than the left-aligned row did. */
/* .krpv-why is declared twice in this file and the second copy, which sets two
   columns, comes after the --3 modifier, so the three-up never applied. */
.krpx-home .krpv-why--3 { grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 34px 30px; }
@media (max-width: 1024px) { .krpx-home .krpv-why--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .krpx-home .krpv-why--3 { grid-template-columns: 1fr; } }
.krpx-home .krpv-why--3 .krpv-why__item {
  flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 34ch;
}
.krpx-home .krpv-why--3 .krpv-why__item b { font-size: 1.12rem; margin-bottom: 2px; }
.krpx-home .krpv-why--3 .krpv-why__ic { width: 46px; height: 46px; border-radius: 13px; }
.krpx-home .krpv-why--3 .krpv-why__ic svg { width: 23px; height: 23px; }

/* Blog listing: the post titles were underlined, which read as a mistake next
   to every other heading on the site. Underline on hover only, like the rest. */
.krp-blog .elementor-post__title a,
.krp-blog .elementor-post__title { text-decoration: none; }
.krp-blog .elementor-post__title a:hover,
.krp-blog .elementor-post__title a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }


/* The post-body link rule above is for prose inside an article. On the blog
   listing the cards share that container, so it underlined every card title
   and the Continue Reading button. Matched with one more class than that rule
   carries, so it wins without !important. */
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content .elementor-post__title a,
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content .elementor-post__title {
  text-decoration: none; color: var(--krpd-ink); font-weight: 700;
}
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content .elementor-post__title a:hover,
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content .elementor-post__title a:focus-visible {
  color: var(--krpd-red); text-decoration: none;
}
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content a.elementor-post__read-more {
  text-decoration: none; color: #fff; font-weight: 700;
}
html.krp-enhanced .elementor-3071 .elementor-widget-theme-post-content a.page-numbers {
  text-decoration: none; font-weight: 700;
}

/* ---------------------------------------------------------------------------
   OPENING SOON HERO, 2026-10-06.
   Dawson: "for the hero image on lodi could you have a cool ripple effect
   instead of the image like a slowly blinking coming soon as the hero
   background?"

   A shop that has not opened has no photograph of its own, and borrowing
   another shop's storefront would say something untrue about the page. So the
   right-hand half of the hero carries no image: a map pin, three rings easing
   out from it on a slow loop, and the words behind the hero copy. All CSS, so
   it costs no image request, and it holds still under reduced motion.
   --------------------------------------------------------------------------- */
.krpv-soon {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 95% at 72% 42%, rgba(214,33,40,.26) 0%, rgba(214,33,40,0) 58%),
    linear-gradient(145deg, #1b2027 0%, #14171c 52%, #0f1216 100%);
}
.krpv-soon__rings { position: absolute; inset: 0; display: grid; place-items: center; }
.krpv-soon__ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 1.5px solid rgba(255,107,112,.55);
  transform: scale(.25); opacity: 0;
  animation: krpv-ripple 4.8s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes krpv-ripple {
  0%   { transform: scale(.25); opacity: 0; }
  12%  { opacity: .85; }
  100% { transform: scale(3.4); opacity: 0; }
}
.krpv-soon__pin {
  position: relative; display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--krpd-red, #d62128); color: #fff;
  box-shadow: 0 0 0 10px rgba(214,33,40,.16), 0 18px 40px rgba(0,0,0,.45);
}
.krpv-soon__pin svg { width: 34px; height: 34px; }
.krpv-soon__word {
  position: absolute; left: 0; right: 0; bottom: clamp(26px, 5vh, 54px);
  text-align: center; text-transform: uppercase;
  font-family: var(--krpd-display, inherit);
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 800;
  letter-spacing: .14em; line-height: 1.08; color: #fff;
  animation: krpv-soonpulse 4.8s ease-in-out infinite;
}
@keyframes krpv-soonpulse { 0%, 100% { opacity: .34; } 50% { opacity: .95; } }
/* The scrim is tuned to reveal a photograph on the right. There is no
   photograph here, so it stays lighter and lets the rings read. */
.krpv-hero--soon .krpv-hero__fade {
  background:
    linear-gradient(90deg, #14171c 0%, #14171c 42%, rgba(20,23,28,.72) 54%,
      rgba(20,23,28,.26) 70%, rgba(20,23,28,0) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .krpv-soon__ring { animation: none; opacity: .4; transform: scale(2.1); }
  .krpv-soon__word { animation: none; opacity: .9; }
}
@media (max-width: 1024px) {
  .krpv-soon__word { font-size: clamp(1.2rem, 6vw, 1.7rem); bottom: 18px; }
  .krpv-soon__pin { width: 58px; height: 58px; }
  .krpv-soon__pin svg { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------------------
   REGION MAP, 2026-10-06. Dawson: "a sick look section on the home page that
   shows the 5 locations on one map so they can get a view of where the are
   located in the region". Inline SVG, no third-party map, no API key.
   --------------------------------------------------------------------------- */
.krpx-mapsec { background: linear-gradient(180deg, #11151a 0%, #171c23 100%); }
.krpx-mapsec .krpx-h2, .krpx-mapsec .krpx-lead { color: #fff; }
.krpx-mapsec .krpx-lead { color: #aeb6c2; }
.krpx-map {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: clamp(24px, 3vw, 48px); align-items: center; margin-top: 36px;
}
.krpx-map__fig {
  border-radius: 20px; padding: clamp(14px, 2vw, 26px);
  background: radial-gradient(90% 80% at 50% 30%, rgba(214,33,40,.10) 0%, rgba(214,33,40,0) 62%), #0e1217;
  border: 1px solid rgba(255,255,255,.08);
}
.krpx-map__svg { display: block; width: 100%; height: auto; max-height: 560px; }
.krpx-map__county { fill: #1d242d; stroke: #2e3842; stroke-width: 1.4; }
.krpx-map__county--home { fill: #27323e; }
.krpx-map__halo { fill: rgba(214,33,40,.22); }
.krpx-map__dot { fill: var(--krpd-red, #d62128); stroke: #fff; stroke-width: 2.4; }
.krpx-map__pin--soon .krpx-map__dot { fill: #0e1217; stroke: #ff6b70; stroke-dasharray: 5 4; }
.krpx-map__pin--soon .krpx-map__halo { fill: rgba(255,107,112,.12); }
.krpx-map__label {
  fill: #fff; font-size: 23px; font-weight: 700;
  paint-order: stroke; stroke: #0e1217; stroke-width: 5px; stroke-linejoin: round;
}
.krpx-map__pin { cursor: pointer; }
.krpx-map__pin:hover .krpx-map__halo, .krpx-map__pin:focus-visible .krpx-map__halo { fill: rgba(214,33,40,.42); }
.krpx-map__pin:hover .krpx-map__label { fill: #ff9195; }

.krpx-maplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.krpx-maplist__i a {
  display: grid; gap: 3px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  text-decoration: none; transition: background-color .14s ease, border-color .14s ease;
}
.krpx-maplist__i a:hover, .krpx-maplist__i a:focus-visible {
  background: rgba(214,33,40,.14); border-color: rgba(214,33,40,.42);
}
.krpx-maplist__i b { color: #fff; font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.krpx-maplist__i span { color: #aeb6c2; font-size: 14px; line-height: 1.45; }
.krpx-maplist__i em { color: #8fd0ee; font-style: normal; font-weight: 800; font-size: 1rem; }
.krpx-maplist__i--soon em { color: #8b95a3; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }

@media (max-width: 900px) {
  .krpx-map { grid-template-columns: 1fr; }
  .krpx-map__label { font-size: 28px; }
}


/* ---------------------------------------------------------------------------
   REGION MAP, second pass 2026-10-06. Roads, a slow sweep across the pins,
   the map and its list wired to each other, and some depth under the land.
   --------------------------------------------------------------------------- */
.krpx-map__grid { pointer-events: none; }
.krpx-map__county { fill: #1f2731; stroke: #323d49; stroke-width: 1.4; }
.krpx-map__county--home { fill: #2b3744; }

/* Roads. The casing is a wider dark stroke underneath, which is how a real map
   keeps a line readable where it crosses a boundary. */
.krpx-map__road-case { fill: none; stroke: #0b0e12; stroke-width: 7;
  stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.krpx-map__road { fill: none; stroke-width: 3.4; stroke-linejoin: round;
  stroke-linecap: round; opacity: .92; }
.krpx-map__road--i-80 { stroke: #6ea8ff; }
.krpx-map__road--us-46 { stroke: #ffd166; }
.krpx-map__road--nj-23 { stroke: #8fe3a0; }
.krpx-map__road--us-206 { stroke: #c9a0ff; }
.krpx-map__road--garden-state-pkwy { stroke: #ff9f6e; }
.krpx-map__roadlabel { font-size: 17px; font-weight: 700; letter-spacing: .02em;
  paint-order: stroke; stroke: #0b0e12; stroke-width: 6px; stroke-linejoin: round; }
.krpx-map__roadlabel--i-80 { fill: #6ea8ff; }
.krpx-map__roadlabel--us-46 { fill: #ffd166; }
.krpx-map__roadlabel--nj-23 { fill: #8fe3a0; }
.krpx-map__roadlabel--us-206 { fill: #c9a0ff; }
.krpx-map__roadlabel--garden-state-pkwy { fill: #ff9f6e; }

/* The sweep. Each pin sends one ring out on a stagger, so the five read as a
   single slow pass rather than five things blinking at once. */
.krpx-map__ripple { fill: none; stroke: rgba(255,107,112,.75); stroke-width: 2;
  transform-origin: center; transform-box: fill-box;
  animation: krpx-mapripple 5.4s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay: var(--d, 0s); }
@keyframes krpx-mapripple {
  0% { transform: scale(.5); opacity: 0; }
  10% { opacity: .8; }
  70%, 100% { transform: scale(4.2); opacity: 0; }
}
.krpx-map__pin--soon .krpx-map__ripple { stroke: #ff9195; stroke-dasharray: 4 5; }

/* Map and list are one object: hovering either end lifts both and quiets
   everything else. The pairs are listed by name because CSS cannot compare one
   element's attribute with another's; krp_seo_pass asserts that every shop in
   LOCATIONS has a pair here, so the two cannot drift apart. */
.krpx-map__pin, .krpx-maplist__i a, .krpx-map__dot, .krpx-map__halo, .krpx-map__label {
  transition: opacity .16s ease, fill .16s ease, r .16s ease,
              background-color .16s ease, border-color .16s ease;
}
.krpx-map:has(a[data-krp-shop]:hover) .krpx-map__pin,
.krpx-map:has(a[data-krp-shop]:focus-visible) .krpx-map__pin { opacity: .3; }
.krpx-map:has(a[data-krp-shop]:hover) .krpx-maplist__i a,
.krpx-map:has(a[data-krp-shop]:focus-visible) .krpx-maplist__i a { opacity: .45; }

/* The thing you are pointing at is never the thing that dims. The rules above
   quiet everything while any pin or card is hovered, and the paired rules
   below light the OTHER end of the pair; without these the item under the
   cursor was dimmed along with the rest. (Dawson, 2026-10-06.)

   They carry the same :has() prefix on purpose. A plain
   ".krpx-map .krpx-maplist__i a:hover" loses to the dimming rule, because
   :has() takes the specificity of its argument and that pushes the dimming
   selector above it. Matching the prefix and adding :hover wins cleanly. */
.krpx-map:has(a[data-krp-shop]:hover) .krpx-maplist__i a:hover,
.krpx-map:has(a[data-krp-shop]:focus-visible) .krpx-maplist__i a:focus-visible {
  opacity: 1; background: rgba(214,33,40,.16); border-color: rgba(214,33,40,.5);
}
.krpx-map:has(a[data-krp-shop]:hover) .krpx-map__pin:hover,
.krpx-map:has(a[data-krp-shop]:focus-visible) .krpx-map__pin:focus-visible { opacity: 1; }
.krpx-map:has(a[data-krp-shop]:hover) .krpx-map__pin:hover .krpx-map__halo,
.krpx-map:has(a[data-krp-shop]:focus-visible) .krpx-map__pin:focus-visible .krpx-map__halo { fill: rgba(214,33,40,.5); }
.krpx-map:has(a[data-krp-shop]:hover) .krpx-map__pin:hover .krpx-map__dot,
.krpx-map:has(a[data-krp-shop]:focus-visible) .krpx-map__pin:focus-visible .krpx-map__dot { r: 9.5; }
.krpx-map:has(a[data-krp-shop]:hover) .krpx-map__pin:hover .krpx-map__label,
.krpx-map:has(a[data-krp-shop]:focus-visible) .krpx-map__pin:focus-visible .krpx-map__label { fill: #ff9195; }

.krpx-map:has(.krpx-maplist a[data-krp-shop="Clifton"]:hover) .krpx-map__pin[data-krp-shop="Clifton"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Clifton"]:focus-visible) .krpx-map__pin[data-krp-shop="Clifton"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Franklin"]:hover) .krpx-map__pin[data-krp-shop="Franklin"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Franklin"]:focus-visible) .krpx-map__pin[data-krp-shop="Franklin"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Hawthorne"]:hover) .krpx-map__pin[data-krp-shop="Hawthorne"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Hawthorne"]:focus-visible) .krpx-map__pin[data-krp-shop="Hawthorne"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Lodi"]:hover) .krpx-map__pin[data-krp-shop="Lodi"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Lodi"]:focus-visible) .krpx-map__pin[data-krp-shop="Lodi"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Newton"]:hover) .krpx-map__pin[data-krp-shop="Newton"],
.krpx-map:has(.krpx-maplist a[data-krp-shop="Newton"]:focus-visible) .krpx-map__pin[data-krp-shop="Newton"] { opacity: 1; }
.krpx-map:has(.krpx-maplist a[data-krp-shop="Clifton"]:hover) .krpx-map__pin[data-krp-shop="Clifton"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Clifton"]:focus-visible) .krpx-map__pin[data-krp-shop="Clifton"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Franklin"]:hover) .krpx-map__pin[data-krp-shop="Franklin"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Franklin"]:focus-visible) .krpx-map__pin[data-krp-shop="Franklin"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Hawthorne"]:hover) .krpx-map__pin[data-krp-shop="Hawthorne"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Hawthorne"]:focus-visible) .krpx-map__pin[data-krp-shop="Hawthorne"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Lodi"]:hover) .krpx-map__pin[data-krp-shop="Lodi"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Lodi"]:focus-visible) .krpx-map__pin[data-krp-shop="Lodi"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Newton"]:hover) .krpx-map__pin[data-krp-shop="Newton"] .krpx-map__halo,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Newton"]:focus-visible) .krpx-map__pin[data-krp-shop="Newton"] .krpx-map__halo { fill: rgba(214,33,40,.5); }
.krpx-map:has(.krpx-maplist a[data-krp-shop="Clifton"]:hover) .krpx-map__pin[data-krp-shop="Clifton"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Clifton"]:focus-visible) .krpx-map__pin[data-krp-shop="Clifton"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Franklin"]:hover) .krpx-map__pin[data-krp-shop="Franklin"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Franklin"]:focus-visible) .krpx-map__pin[data-krp-shop="Franklin"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Hawthorne"]:hover) .krpx-map__pin[data-krp-shop="Hawthorne"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Hawthorne"]:focus-visible) .krpx-map__pin[data-krp-shop="Hawthorne"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Lodi"]:hover) .krpx-map__pin[data-krp-shop="Lodi"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Lodi"]:focus-visible) .krpx-map__pin[data-krp-shop="Lodi"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Newton"]:hover) .krpx-map__pin[data-krp-shop="Newton"] .krpx-map__dot,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Newton"]:focus-visible) .krpx-map__pin[data-krp-shop="Newton"] .krpx-map__dot { r: 9.5; }
.krpx-map:has(.krpx-maplist a[data-krp-shop="Clifton"]:hover) .krpx-map__pin[data-krp-shop="Clifton"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Clifton"]:focus-visible) .krpx-map__pin[data-krp-shop="Clifton"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Franklin"]:hover) .krpx-map__pin[data-krp-shop="Franklin"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Franklin"]:focus-visible) .krpx-map__pin[data-krp-shop="Franklin"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Hawthorne"]:hover) .krpx-map__pin[data-krp-shop="Hawthorne"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Hawthorne"]:focus-visible) .krpx-map__pin[data-krp-shop="Hawthorne"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Lodi"]:hover) .krpx-map__pin[data-krp-shop="Lodi"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Lodi"]:focus-visible) .krpx-map__pin[data-krp-shop="Lodi"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Newton"]:hover) .krpx-map__pin[data-krp-shop="Newton"] .krpx-map__label,
.krpx-map:has(.krpx-maplist a[data-krp-shop="Newton"]:focus-visible) .krpx-map__pin[data-krp-shop="Newton"] .krpx-map__label { fill: #ff9195; }
.krpx-map:has(.krpx-map__pin[data-krp-shop="Clifton"]:hover) .krpx-maplist a[data-krp-shop="Clifton"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Clifton"]:focus-visible) .krpx-maplist a[data-krp-shop="Clifton"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Franklin"]:hover) .krpx-maplist a[data-krp-shop="Franklin"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Franklin"]:focus-visible) .krpx-maplist a[data-krp-shop="Franklin"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Hawthorne"]:hover) .krpx-maplist a[data-krp-shop="Hawthorne"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Hawthorne"]:focus-visible) .krpx-maplist a[data-krp-shop="Hawthorne"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Lodi"]:hover) .krpx-maplist a[data-krp-shop="Lodi"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Lodi"]:focus-visible) .krpx-maplist a[data-krp-shop="Lodi"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Newton"]:hover) .krpx-maplist a[data-krp-shop="Newton"],
.krpx-map:has(.krpx-map__pin[data-krp-shop="Newton"]:focus-visible) .krpx-maplist a[data-krp-shop="Newton"] { opacity: 1; background: rgba(214,33,40,.16);
  border-color: rgba(214,33,40,.5); }

@media (prefers-reduced-motion: reduce) { .krpx-map__ripple { animation: none; opacity: 0; } }

/* ---------------------------------------------------------------------------
   CARD HEADING SCALE, 2026-10-06.
   Dawson: "once again the font on this looks tiny ... for the titles i thought
   you went through and fixed these sitewide?" He was right. The earlier pass
   raised the card headings it knew about and missed the rest, so measuring
   every heading on sixteen pages turned up the same role rendering at 21.1,
   23.2, 24, 25 and 25.6px depending on which component it sat in.

   One token now, applied to every card-level heading, so the next component
   cannot drift. The order is: page title and section heading 52.8px, section
   sub-head 30.4px, card heading 25.6px.
   --------------------------------------------------------------------------- */
:root { --krpd-cardtitle: clamp(1.32rem, 1.78vw, 1.6rem); --krpd-subhead: clamp(1.45rem, 2.1vw, 1.9rem); }

.krpx-ridecard :is(h2,h3,h4).krpx-ridecard :is(h2,h3,h4),
.v2-dd__col :is(h2,h3,h4),
.v2-ncard__t.v2-ncard__t,
.v2-warn__t.v2-warn__t,
.v2-rcard__t.v2-rcard__t,
.v2-note__t.v2-note__t,
.v2-compare__t.v2-compare__t,
.krpx-locinfo__name.krpx-locinfo__name,
.krpx-speccard :is(h2,h3,h4),
.krpx-loccard :is(h2,h3,h4),
.krpx-wpanel__h.krpx-wpanel__h,
.elementor-post__title.elementor-post__title,
.krpv-section :is(h2,h3,h4).krpx-h3,
.krpx-infocard :is(h2,h3,h4),
.krpv-card :is(h2,h3,h4),
.krpv-section__head + * :is(h2,h3,h4) { font-size: var(--krpd-cardtitle); }

/* The ride cards' headings carry no class of their own. */
.krpx-ridecard h3, .krpx-ridecard h4 { font-size: var(--krpd-cardtitle); }
.v2-dd__col h3, .v2-dd__col h4 { font-size: var(--krpd-cardtitle); }

/* A section sub-head sits between the section heading and the cards under it,
   so it reads a rung above a card rather than level with one. */
.krpx-subh.krpx-subh { font-size: var(--krpd-subhead); font-weight: 600; }

/* The call sheet is a dialog and the specials cards are a deliberately larger
   card, so both keep their own size. */

/* Two of these lose on specificity or load order to rules in
   krp-service-v2.css and the Elementor kit, so they are repeated with enough
   weight to land. Checked by measuring the rendered size, not by reading the
   cascade. */
.v2-dd__col.v2-dd__col :is(h2,h3,h4) { font-size: var(--krpd-cardtitle); }
.krp-blog .elementor-post__title.elementor-post__title,
.elementor-post__title.elementor-post__title.elementor-post__title { font-size: var(--krpd-cardtitle); }
/* Elementor writes a per-element rule, ".elementor-3867
   .elementor-element.elementor-element-8c445d8 .elementor-post__title", which
   is four classes deep and beat everything above. Repeating the class is the
   way past it without reaching for !important. */
/* Elementor's per-element stylesheet also loads after ours, so matching its
   four classes only ties and then loses on order. Five wins. */
.krp-blog .elementor-post__title.elementor-post__title.elementor-post__title.elementor-post__title,
.elementor-post__title.elementor-post__title.elementor-post__title.elementor-post__title.elementor-post__title {
  font-size: var(--krpd-cardtitle);
}