@charset "UTF-8";
/* Keil Electric - Design System
 * Red primary, navy secondary, warm paper neutrals.
 * Inter Tight (display), Inter (body), JetBrains Mono (eyebrows/codes).
 * Component vocabulary: .kx-* (buttons, cards, eyebrows, tags, images, forms).
 */

:root {
  /* Brand */
  --keil-red: #E4002B;
  --keil-red-deep: #B30022;
  --keil-red-tint: #FCE7EB;

  /* Secondary — used sparingly */
  --keil-navy: #0B1B2B;
  --keil-navy-2: #14273B;
  --keil-navy-3: #1F3850;

  /* Neutrals — warm */
  --ink: #0E1217;
  --ink-2: #2A2F36;
  --ink-3: #5B6470;
  --ink-4: #8A93A0;
  --line: #E6E7EA;
  --line-2: #F0F1F3;
  --paper: #FAFAF7;
  --paper-2: #F4F3EE;
  --white: #FFFFFF;

  /* Semantic */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--ink-3);

  /* Type */
  --font-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-script: 'Caveat', cursive;

  /* Scale */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;

  --shadow-sm: 0 1px 2px rgba(11,27,43,.06), 0 1px 1px rgba(11,27,43,.04);
  --shadow-md: 0 4px 16px rgba(11,27,43,.08), 0 1px 2px rgba(11,27,43,.04);
  --shadow-lg: 0 24px 48px rgba(11,27,43,.12), 0 4px 12px rgba(11,27,43,.06);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration: none; }
/*
 * Text-link hover: brand red. Button-styled anchors are excluded via :not()
 * so each button class controls its own hover color. The patterns below
 * cover every button/CTA naming convention used in the theme — new button
 * classes that follow the same conventions auto-inherit the exclusion.
 *
 * Patterns:
 *   btn       — kx-btn, kx-btn-primary, kx-mobile-cta-bar__btn, etc.
 *   cta       — kx-shop-card__cta, kx-owner-strip__cta, kx-cta__btn-ghost
 *   phone     — kx-shop-card__phone, kx-hero__phone-btn
 *   __link    — kx-contact-supplement__emergency-link, kx-shop-card__hub-link
 *   __row     — kx-services-row (clickable rows)
 *   __cell    — kx-clients__cell, kx-service-grid__cell (clickable grid cells)
 *   __submit  — kx-search__submit
 *   __more    — kx-reviews-compact__more
 *   __cta     — explicit redundancy with cta above for clarity
 *
 * Before this rule existed, the global a:hover{color:red} silently overrode
 * every button's text color on hover (because :hover has higher specificity
 * than a plain class). Every new button required a defensive color:
 * declaration on :hover. With this rule, that's no longer needed.
 */
a:hover:not([class*="btn"]):not([class*="cta"]):not([class*="phone"]):not([class*="__link"]):not([class*="__row"]):not([class*="__cell"]):not([class*="__submit"]):not([class*="__more"]) {
  color: var(--keil-red);
}

.kx-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--keil-red);
  margin: 0;
}
.kx-eyebrow.muted { color: var(--ink-3); }

.kx-section-code {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
}
.kx-section-code__num { color: var(--keil-red); }
.kx-section-code__label { color: var(--ink-3); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 4.5vw, 44px); line-height: 1.05; letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; }
h4 { font-size: 18px; line-height: 1.3; }

p { margin: 0 0 1em; line-height: 1.55; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

ul, ol { color: var(--ink-2); line-height: 1.55; }

/* Buttons */
.kx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.kx-btn:active { transform: translateY(1px); }
.kx-btn-primary { background: var(--keil-red); color: white; }
.kx-btn-primary:hover { background: var(--keil-red-deep); color: white; }
.kx-btn-dark { background: var(--keil-navy); color: white; }
.kx-btn-dark:hover { background: var(--keil-navy-2); color: white; }
.kx-btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.kx-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.kx-btn-light {
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
}
.kx-btn-light:hover { border-color: var(--ink); color: var(--ink); }
.kx-btn-on-red {
  background: white;
  color: var(--keil-red);
}
.kx-btn-on-red:hover { background: var(--paper); color: var(--keil-red); }
.kx-btn-link {
  background: transparent;
  color: var(--ink);
  padding: 0;
  border: none;
}
.kx-btn-lg { padding: 18px 28px; font-size: 15px; }

/* Tag / pill */
.kx-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--keil-red-tint);
  color: var(--keil-red-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
}
.kx-tag.dark { background: rgba(255,255,255,.08); color: white; }
.kx-tag.neutral { background: var(--paper-2); color: var(--ink-2); }

/* Container */
.kx-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.kx-container-narrow { max-width: 1040px; margin: 0 auto; padding: 0 32px; }

/* Section spacing */
.kx-section { padding: 96px 0; }
.kx-section-sm { padding: 56px 0; }
.kx-section-lg { padding: 120px 0; }

/* Card */
.kx-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}

/* Image placeholder — striped */
.kx-img {
  background:
    repeating-linear-gradient(135deg, rgba(11,27,43,.05) 0 1px, transparent 1px 8px),
    var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.kx-img.dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px),
    var(--keil-navy-2);
  color: rgba(255,255,255,.55);
}
.kx-img.red {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 1px, transparent 1px 8px),
    var(--keil-red);
  color: rgba(255,255,255,.85);
}

/* Divider */
.kx-divider { height: 1px; background: var(--line); border: none; margin: 0; }
.kx-divider.dark { background: rgba(255,255,255,.08); }

/* Logo lockup */
.kx-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.kx-logo .bolt {
  width: 28px;
  height: 28px;
  background: var(--keil-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 6px;
}
.kx-logo .bolt svg { width: 14px; height: 14px; }
.kx-logo.lg { font-size: 26px; }
.kx-logo.lg .bolt { width: 36px; height: 36px; }
.kx-logo.lg .bolt svg { width: 18px; height: 18px; }
.kx-logo.sm { font-size: 16px; }
.kx-logo.sm .bolt { width: 22px; height: 22px; }
.kx-logo.sm .bolt svg { width: 11px; height: 11px; }
.kx-logo .keil-mark { display: inline; font-weight: 700; }
.kx-logo .keil-electric { font-weight: 400; opacity: 0.6; margin-left: 4px; }
.kx-logo.light { color: white; }
.kx-logo.light .keil-electric { opacity: 0.7; }

/* Image logo (Customizer-set custom_logo for header, keil_footer_logo for footer).
   When an image is in use we drop the bolt+text gap and let the image size itself.
   Footer cap is much taller than header because the footer logo file is
   typically a square brand mark (1:1 aspect) and needs vertical mass to read,
   while header logos are usually wide (3:1+) and look right at 44px. */
.kx-logo--img { gap: 0; }
.kx-logo__img { display: block; max-height: 40px; width: auto; height: auto; }
.kx-logo.lg .kx-logo__img { max-height: 44px; }
.kx-logo__img--footer { max-height: 180px; max-width: 240px; margin-bottom: 4px; }
@media (max-width: 768px) {
  .kx-logo__img--footer { max-height: 140px; max-width: 200px; }
}

/* Form */
.kx-input, .kx-select, .kx-textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease;
}
.kx-input:focus, .kx-select:focus, .kx-textarea:focus { border-color: var(--keil-navy); }
.kx-textarea { resize: vertical; min-height: 120px; }
.kx-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 1000;
  background: var(--ink);
  color: white;
  padding: 8px 16px;
  border-radius: var(--r-md);
}
.skip-link:focus { left: 8px; }

/* ==========================================================================
   Site header
   ========================================================================== */

.kx-compliance-strip {
  background: white;
  color: var(--ink-3);
  font-size: 11px;
  padding: 8px 0;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  border-bottom: 1px solid var(--line);
}
.kx-compliance-strip__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.kx-compliance-strip strong { color: var(--keil-red); font-weight: 700; }
.kx-compliance-strip a { color: var(--ink-3); text-decoration: underline; }

.kx-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 30;
}
.kx-header.is-sticky { position: sticky; top: 0; }
.kx-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 88px;
  gap: 32px;
}
.kx-nav {
  display: flex;
  gap: 28px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.kx-nav a:not(.kx-btn) { color: var(--ink-2); text-decoration: none; }
.kx-nav a:not(.kx-btn):hover, .kx-nav a:not(.kx-btn).is-active { color: var(--keil-red); }
.kx-nav-right {
  display: flex;
  gap: 24px;
  font-size: 13px;
  font-weight: 500;
  justify-content: flex-end;
  align-items: center;
}
/* :not(.kx-btn) excludes buttons inside the nav from the nav-link color rule.
   Without this exclusion, .kx-nav-right a wins on specificity (0,1,1) over
   .kx-btn-primary (0,1,0), so the "Get a quote" button rendered with dark
   ink text on the red background instead of white. */
.kx-nav-right a:not(.kx-btn) { color: var(--ink-2); text-decoration: none; }
.kx-nav-right a:not(.kx-btn):hover { color: var(--keil-red); }

.kx-mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}

/* ==========================================================================
   Breadcrumbs (mono, hairline)
   ========================================================================== */

.kx-breadcrumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .16em;
  padding: 24px 0 0;
  text-transform: uppercase;
}
.kx-breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.kx-breadcrumbs a:hover { color: var(--keil-red); }
.kx-breadcrumbs__sep { padding: 0 8px; color: var(--ink-4); }
.kx-breadcrumbs [aria-current] { color: var(--ink-2); }

/* ==========================================================================
   Hero
   ========================================================================== */

.kx-hero {
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.kx-hero__grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,27,43,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,27,43,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.kx-hero__inner { position: relative; padding: 40px 0 0; }
.kx-hero__bar {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .16em;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.kx-hero__bar-code { color: var(--keil-red); }
.kx-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  /* `align-items: end` was producing a tall empty gap above the H1
     whenever the right CTA cluster (service window + button + phones
     + trust strip) was taller than the H1+lede stack — the headline
     got pushed all the way to the bottom to bottom-align with the
     CTA column. `start` keeps both columns flowing from the top edge,
     so the H1 sits directly below the hero bar. */
  align-items: start;
}
.kx-hero__title {
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 32px;
}
.kx-hero__title .red-comma,
.kx-hero__title .red-period { color: var(--keil-red); }
/* Render the trailing red period via ::after instead of a <span>. The
   inline span pattern made some HTML parsers (BeautifulSoup get_text,
   certain SEO crawlers) report a false-positive space before the period
   when walking adjacent text + element nodes. The pseudo-element is in
   the visual layer only; parsers see clean trailing text. */
.kx-hero__title--red-period::after { content: '.'; color: var(--keil-red); }
.kx-hero__lede {
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.5;
  max-width: 580px;
}
.kx-hero__media {
  margin-top: 64px;
  height: clamp(280px, 36vw, 420px);
  border-radius: 0;
  overflow: hidden;
}
.kx-hero__decor {
  margin-top: 32px;
  height: clamp(140px, 18vw, 210px);
  position: relative;
  overflow: hidden;
}
.kx-hero__decor-bolts svg { width: 100%; height: 100%; display: block; }
@media (max-width: 768px) {
  .kx-hero__decor { margin-top: 24px; height: 120px; }
}
@media (max-width: 480px) {
  .kx-hero__decor { margin-top: 20px; height: 90px; }
}
.kx-hero__service-window {
  border: 1px solid var(--line);
  background: white;
  padding: 24px;
  border-radius: var(--r-md);
}
.kx-hero__service-window-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.kx-hero__service-window-value {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kx-hero__service-window-note {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
}
.kx-hero__cta-stack { display: grid; gap: 16px; margin-bottom: 8px; }
.kx-hero__phone-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 18px 28px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.kx-hero__phone-btn:hover { border-color: var(--ink); color: var(--ink); }
.kx-hero__phone-btn-loc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Stat row */
.kx-stat-row {
  background: white;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kx-stat-row__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--line);
}
.kx-stat-row__cell {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
}
.kx-stat-row__num {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  color: var(--keil-red);
}
.kx-stat-row__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ==========================================================================
   Services table (homepage-style structured row layout)
   ========================================================================== */

.kx-services-table {
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-services-row {
  display: grid;
  grid-template-columns: 60px 1fr 2fr 1fr 60px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  min-height: 88px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s;
}
.kx-services-row:last-child { border-bottom: none; }
.kx-services-row:hover { background: var(--paper); color: var(--ink); }
.kx-services-row__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: .08em;
  text-align: center;
}
.kx-services-row__name {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 8px;
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.kx-services-row__icon { color: var(--keil-red); flex-shrink: 0; }
.kx-services-row__desc {
  font-size: 14px;
  color: var(--ink-3);
  padding-right: 24px;
}
.kx-services-row__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .06em;
}
.kx-services-row__arrow {
  text-align: center;
  color: var(--ink);
}

/* ==========================================================================
   Locations panels
   ========================================================================== */

.kx-locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-location-panel {
  padding: 40px;
  background: white;
  border-right: 1px solid var(--line);
}
.kx-location-panel:last-child { border-right: none; }
.kx-location-panel__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .12em;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.kx-location-panel__region {
  font-size: 12px;
  font-weight: 700;
  color: var(--keil-red);
  letter-spacing: .1em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.kx-location-panel__city {
  font-size: clamp(36px, 4.5vw, 48px);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  margin-bottom: 32px;
  line-height: 1;
}
.kx-location-panel__media {
  height: 220px;
  margin-bottom: 32px;
  border-radius: 0;
  overflow: hidden;
}
.kx-location-panel__info {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px 24px;
  font-size: 14px;
  margin-bottom: 24px;
}
.kx-location-panel__info-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kx-location-panel__info-value { color: var(--ink); font-weight: 600; }
.kx-location-panel__info-note { color: var(--ink-2); }
.kx-location-panel__cta {
  width: 100%;
  justify-content: space-between;
}

/* ==========================================================================
   Process grid
   ========================================================================== */

.kx-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.kx-process-step {
  border-right: 1px solid var(--line);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.kx-process-step:last-child { border-right: none; }
.kx-process-step__num {
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  color: var(--keil-red);
  margin-bottom: 16px;
  line-height: 1;
}
.kx-process-step h4 { margin-bottom: 12px; font-size: 20px; }
.kx-process-step p { font-size: 14px; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.kx-reviews-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 56px;
  align-items: end;
}
.kx-reviews-rating {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.kx-reviews-rating__num {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--keil-red);
}
.kx-reviews-rating__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .08em;
  margin-top: 8px;
  text-transform: uppercase;
}
.kx-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-review-card {
  padding: 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kx-review-card:nth-child(2n) { border-right: none; }
.kx-review-card:nth-last-child(-n+2) { border-bottom: none; }
.kx-review-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.kx-review-card__service {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kx-review-card__text {
  font-size: 17px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 24px;
}
.kx-review-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.kx-review-card__name { font-weight: 600; font-size: 14px; }
.kx-review-card__loc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kx-stars { display: inline-flex; gap: 2px; color: var(--keil-red); }

/* ==========================================================================
   CTA section (solid red)
   ========================================================================== */

.kx-cta {
  padding: 120px 0;
  background: var(--keil-red);
  color: white;
  position: relative;
  overflow: hidden;
}
.kx-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.kx-cta__inner { position: relative; }
.kx-cta__bar {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.7);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.kx-cta__title {
  color: white;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 40px;
  max-width: 1100px;
}
.kx-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.kx-cta__btn-ghost {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,.4);
}
.kx-cta__btn-ghost:hover { border-color: white; color: white; }

/* ==========================================================================
   Footer
   ========================================================================== */

.kx-footer {
  background: var(--ink);
  color: white;
  padding: 64px 0 32px;
  border-top: 4px solid var(--keil-red);
}
.kx-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.kx-footer__brand-col { max-width: 320px; }
.kx-footer__brand-tag {
  color: rgba(255,255,255,.6);
  font-size: 14px;
  margin-top: 16px;
}
.kx-footer__col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kx-footer__links { display: grid; gap: 10px; font-size: 14px; }
.kx-footer__links a { color: rgba(255,255,255,.7); text-decoration: none; }
.kx-footer__links a:hover { color: white; }
.kx-footer__legal {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: .08em;
  flex-wrap: wrap;
  gap: 16px;
  text-transform: uppercase;
}
.kx-footer__legal-list { display: flex; gap: 24px; flex-wrap: wrap; }

/* Legal-link row directly below the copyright line. Browser-default
   link colors (blue/purple) are nearly invisible against the near-black
   footer background, so we re-color to match the muted legal-row tone. */
.kx-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.kx-footer__legal-links a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
}
.kx-footer__legal-links a:hover {
  color: white;
  text-decoration: underline;
}

/* Financing disclosure in footer — small, muted, italic to match
   regulatory disclosure conventions without dominating the footer.
   Renders only on pages where the current franchise has a financing URL. */
.kx-footer__financing-disclosure {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255,255,255,.45);
  font-style: italic;
  max-width: 1100px;
}
.kx-footer__financing-disclosure p { margin: 0; }
.kx-footer__financing-disclosure a {
  color: rgba(255,255,255,.6);
  text-decoration: underline;
}
.kx-footer__financing-disclosure a:hover { color: white; }

/* Financing pre-approval card — renders on location-scoped pages when
   the location has loc_financing_url set. Two-column grid on desktop
   (copy + terms list on the left, big CTA + small print on the right);
   stacks to single column on mobile. Matches the surrounding card aesthetic. */
.kx-financing-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--keil-red);
  padding: 40px 48px;
  border-radius: 4px;
}
.kx-financing-card__title {
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.kx-financing-card__lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 20px;
}
.kx-financing-card__terms {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 8px;
}
.kx-financing-card__terms li {
  font-size: 15px;
  color: var(--ink);
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.kx-financing-card__terms li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: var(--keil-red);
  border-radius: 50%;
}
.kx-financing-card__terms li span {
  color: var(--ink-3);
  font-size: 13px;
}
.kx-financing-card__fineprint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 16px 0 0;
}
.kx-financing-card__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.kx-financing-card__cta .kx-btn {
  width: 100%;
  justify-content: space-between;
}
.kx-financing-card__cta-sub {
  font-size: 12px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: .04em;
  line-height: 1.45;
}
@media (max-width: 768px) {
  .kx-financing-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 24px;
  }
}

/* Switch-location strip used on franchise-scoped pages */
.kx-footer-switch {
  background: var(--keil-navy);
  color: rgba(255,255,255,.7);
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kx-footer-switch__inner {
  display: flex;
  align-items: center;
  gap: 16px 32px;
  flex-wrap: wrap;
}
.kx-footer-switch__label { color: rgba(255,255,255,.5); }
.kx-footer-switch ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.kx-footer-switch a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.kx-footer-switch a:hover { color: white; border-bottom-color: var(--keil-red); }

/* ==========================================================================
   Generic helpers shared across templates
   ========================================================================== */

/* =====================================================================
   .kx-rich — long-form deep content. Wider reading column with stylish
   typographic treatment: red-accent h2s, drop-cap-ish lead paragraph,
   colored list markers, pull-quote blockquotes, code, tables, figures.
   ===================================================================== */
.kx-rich {
  max-width: 80ch;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
}
.kx-rich > *:first-child { margin-top: 0; }
.kx-rich > *:last-child { margin-bottom: 0; }

/* Lead paragraph — slightly larger, slightly darker. Pulls the eye in. */
.kx-rich > p:first-of-type {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.4em;
}

/* H2 — red accent line above, large bold heading. Section separator. */
.kx-rich h2 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin: 2.2em 0 0.7em;
  padding-top: 0.7em;
  position: relative;
  border-top: 2px solid var(--line);
}
.kx-rich h2::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--keil-red);
}

/* H3 — clean, bold, no border. Sub-heading within a section. */
.kx-rich h3 {
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink);
  margin: 1.7em 0 0.5em;
}

/* H4 — small label-style heading. */
.kx-rich h4 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 1.5em 0 0.4em;
}

.kx-rich p { margin: 0 0 1.1em; }
.kx-rich strong { color: var(--ink); font-weight: 600; }
.kx-rich em { font-style: italic; }

.kx-rich a {
  color: var(--keil-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.kx-rich a:hover { color: #B30021; }

/* Lists — red marker pop, comfortable spacing. */
.kx-rich ul, .kx-rich ol {
  margin: 1.2em 0;
  padding-left: 1.6em;
}
.kx-rich li { margin: 0 0 0.55em; }
.kx-rich li::marker { color: var(--keil-red); font-weight: 600; }
.kx-rich ul { list-style-type: square; }
.kx-rich ol { list-style-type: decimal; }
.kx-rich ul ul, .kx-rich ol ol, .kx-rich ul ol, .kx-rich ol ul {
  margin: 0.4em 0;
}

/* Blockquote — pull quote with red rule and italic, larger size. */
.kx-rich blockquote {
  margin: 1.8em 0;
  padding: 4px 0 4px 28px;
  border-left: 3px solid var(--keil-red);
  font-size: 21px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}
.kx-rich blockquote p { margin-bottom: 0.6em; }
.kx-rich blockquote p:last-child { margin-bottom: 0; }
.kx-rich blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-style: normal;
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.kx-rich blockquote cite::before { content: "— "; }

/* Inline code */
.kx-rich code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--ink);
  border: 1px solid var(--line);
}

/* Code blocks */
.kx-rich pre {
  background: var(--ink);
  color: rgba(255,255,255,0.92);
  padding: 22px 26px;
  border-radius: var(--r-sm);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.55;
  margin: 1.4em 0;
}
.kx-rich pre code {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* Tables — bordered with mono uppercase header. */
.kx-rich table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.kx-rich th {
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  padding: 14px 18px;
  text-align: left;
  border-bottom: 2px solid var(--line);
}
.kx-rich td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}
.kx-rich tr:last-child td { border-bottom: 0; }
.kx-rich tr:nth-child(even) td { background: rgba(247,245,240,0.4); }

/* Figures — full reading-column width with caption. */
.kx-rich figure,
.kx-rich .wp-block-image {
  margin: 1.8em 0;
}
.kx-rich figure img,
.kx-rich .wp-block-image img,
.kx-rich img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-sm);
}
.kx-rich figcaption {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 10px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  font-style: normal;
}

/* Wide / breakout: lets WP's alignwide / alignfull break the reading column
   and use the full container width — useful for full-bleed images and
   tables. Sites like Substack do this for mid-article visuals. */
.kx-rich .alignwide,
.kx-rich .alignfull {
  max-width: none;
  margin-left: calc(50% - 50vw + 16px);
  margin-right: calc(50% - 50vw + 16px);
  width: auto;
}
@media (max-width: 900px) {
  .kx-rich .alignwide,
  .kx-rich .alignfull { margin-left: 0; margin-right: 0; }
}

/* HR — small section break, not a full-width line. */
.kx-rich hr {
  border: 0;
  border-top: 2px solid var(--line);
  margin: 2.6em 0;
  width: 64px;
}

@media (max-width: 640px) {
  .kx-rich { font-size: 16px; line-height: 1.7; }
  .kx-rich > p:first-of-type { font-size: 17px; }
  .kx-rich blockquote { padding-left: 20px; font-size: 19px; }
}

/* Long-form deep-content progressive disclosure. Full prose stays in the DOM
   for SEO; visually clipped to a fixed max-height with a gradient fade out.
   Toggle expands to full reading view. JS adds .is-static when the content
   already fits the preview area, hiding the (useless) toggle in that case.
   The fade gradient targets var(--paper-2) since this collapsible currently
   only ships in sections with that background; if reused on a different bg,
   override --kx-rich-fade-to on the wrapper. */
.kx-rich-collapsible-wrap {
  --kx-rich-fade-to: var(--paper-2);
  position: relative;
}
.kx-rich-collapsible {
  position: relative;
  max-height: 600px;
  overflow: hidden;
  transition: max-height .4s ease;
}
.kx-rich-collapsible::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(239, 234, 224, 0) 0%, var(--kx-rich-fade-to) 75%);
  pointer-events: none;
  transition: opacity .3s ease;
}
.kx-rich-collapsible-wrap.is-expanded .kx-rich-collapsible {
  max-height: none;
}
.kx-rich-collapsible-wrap.is-expanded .kx-rich-collapsible::after {
  opacity: 0;
}
.kx-rich-collapsible-wrap.is-static .kx-rich-collapsible {
  max-height: none;
}
.kx-rich-collapsible-wrap.is-static .kx-rich-collapsible::after,
.kx-rich-collapsible-wrap.is-static .kx-grid-toggle-wrap {
  display: none;
}

/* Trust strip (used on location-aware pages) */
.kx-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: white;
}
.kx-trust-strip__cell {
  padding: 20px 24px;
  border-right: 1px solid var(--line);
}
.kx-trust-strip__cell:last-child { border-right: none; }
.kx-trust-strip__label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kx-trust-strip__value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.kx-trust-strip__value a { color: var(--ink); text-decoration: none; }

/* Owner block — Signed Statement layout. Statement text on the left,
   photo on the right, real handwritten signature in script font as the
   focal trust element. The first paragraph of loc_owner_bio is styled
   as the big statement; remaining paragraphs become the sub-text. The
   typed signature element below uses Caveat (loaded via functions.php
   font enqueue) so the owner's name reads as an actual ink signature. */
.kx-owner-block {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}
.kx-owner-block__body { padding-top: 8px; }
.kx-owner-block__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--keil-red);
  font-weight: 600;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kx-owner-block__eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* The statement is the punchy first sentence — display-font, large. */
.kx-owner-block__statement { margin: 0 0 32px; }
.kx-owner-block__statement p {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  font-weight: 600;
}
.kx-owner-block__statement p strong {
  color: var(--keil-red);
  font-weight: 700;
}
.kx-owner-block__statement p em {
  font-style: normal;
  border-bottom: 3px solid var(--keil-red);
  padding-bottom: 1px;
}
/* The body is everything after the first sentence — calm body text. */
.kx-owner-block__bio-body { margin: 0 0 56px; max-width: 560px; }
.kx-owner-block__bio-body p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.kx-owner-block__bio-body p:last-child { margin-bottom: 0; }

/* Owner statement when sourced from loc_owner_signed_quote (which is a
   blockquote element). Match the existing .kx-owner-block__statement
   typography, plus a subtle red left-border for the signed-quote feel. */
blockquote.kx-owner-block__statement {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 32px;
  padding: 0 0 0 24px;
  border-left: 4px solid var(--keil-red);
  font-weight: 600;
  font-style: italic;
}

/* Owner specialties chip strip — sits between bio body and signoff.
   Lets visitors scan what the master electrician focuses on without
   reading the full bio. AI engines also pick this up via Person.knowsAbout
   in the JSON-LD. */
.kx-owner-block__specialties {
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.kx-owner-block__specialties-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.kx-owner-block__specialties-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kx-owner-block__specialty-chip {
  display: inline-block;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
}
.kx-owner-block__bio-body strong { color: var(--ink); font-weight: 600; }

.kx-owner-block__signoff {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.kx-owner-block__signature {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.01em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.kx-owner-block__signoff-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 4px;
}
.kx-owner-block__signoff-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

.kx-owner-block__photo-col { padding-top: 8px; }
.kx-owner-block__photo {
  margin: 0 0 16px;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.kx-owner-block__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.kx-owner-block__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: repeating-linear-gradient(135deg, var(--paper) 0, var(--paper) 10px, var(--paper-2) 10px, var(--paper-2) 20px);
  text-align: center;
  padding: 16px;
}
.kx-owner-block__caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

@media (max-width: 900px) {
  .kx-owner-block { grid-template-columns: 1fr; gap: 32px; }
  .kx-owner-block__photo-col { max-width: 320px; order: -1; }
  .kx-owner-block__signature { font-size: 44px; }
}

/* AEO answer card */
.kx-answer-card {
  padding: clamp(24px, 3vw, 36px);
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid var(--keil-red);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.kx-answer-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--keil-red);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.kx-answer-card__body { font-size: 17px; color: var(--ink); line-height: 1.55; }
.kx-answer-card__body p:last-child { margin-bottom: 0; }

/* Service context strip — slim "Part of [brand service] · From [location]"
   band that sits below the AEO answer block on location-service pages.
   Closes the strategy's required brand ↔ local visible-link loop without
   adding a heavyweight section. Mono caps so it reads as wayfinding chrome
   rather than primary content. */
.kx-svc-context-strip {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.kx-svc-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kx-svc-context__label {
  color: var(--ink-3);
}
.kx-svc-context__link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed rgba(14, 18, 23, .35);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.kx-svc-context__link:hover,
.kx-svc-context__link:focus {
  color: var(--keil-red);
  border-color: var(--keil-red);
  outline: none;
}
.kx-svc-context__sep {
  color: var(--ink-4);
}

/* Project gallery (loc_proof_blocks) */
.kx-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.kx-gallery-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kx-gallery-card__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
}
.kx-gallery-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kx-gallery-card__body { padding: 24px; }
.kx-gallery-card__title {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--ink);
}
.kx-gallery-card__desc {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}
/* Location-attribution chip on cross-location galleries (e.g., the brand
   service hub gallery that auto-pulls from both shops). Mono caps so it
   reads as wayfinding chrome, red on red-tinted bg so it stays subtle but
   visible — the photo is the primary content. */
.kx-gallery-card__attribution {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--keil-red);
  background: rgba(228, 0, 43, .08);
  padding: 3px 8px;
  margin-bottom: 10px;
  border-radius: 3px;
}

/* Fleet/crew grid (loc_fleet_blocks) — image-forward */
.kx-fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.kx-fleet-card {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-2);
}
.kx-fleet-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kx-fleet-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(14,18,23,.85), transparent);
  color: white;
  padding: 24px 16px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .kx-gallery-grid, .kx-fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kx-gallery-grid, .kx-fleet-grid { grid-template-columns: 1fr; }
}

/* Client logo bar (enterprise / commercial accounts trust strip)
   Models the pattern from the existing keilelectric.com brand site —
   a row of named commercial accounts as social proof. Wordmarks are
   styled text for now; can be swapped to uploaded SVGs later. */
.kx-clients-section__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}
.kx-clients-section__title {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  max-width: 720px;
}
.kx-clients-section__subline {
  font-size: 14px;
  color: var(--ink-3);
  max-width: 360px;
  margin: 0;
  line-height: 1.55;
}
.kx-clients {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-clients__cell {
  padding: 36px 16px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  transition: color .15s ease, background .15s ease;
}
.kx-clients__cell:last-child { border-right: none; }
.kx-clients__cell:hover { color: var(--ink); background: var(--paper); }
.kx-clients__cell-mark {
  display: block;
}
/* Image-mode cells. The source webp files have been pre-normalized to a
   uniform 400×80 transparent canvas with each brand's glyph trimmed and
   resized to a common 60px height, centered. That means a single height
   rule renders all five logos at matched apparent size — no per-brand
   tuning needed. Grayscale + reduced opacity unifies the row; hover
   restores color so cells feel interactive. */
.kx-clients__cell.has-img {
  padding: 16px;
}
.kx-clients__cell-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 56px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter .2s ease, opacity .2s ease;
}
.kx-clients__cell:hover .kx-clients__cell-img {
  filter: grayscale(0);
  opacity: 1;
}
.kx-clients__cell-tag {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.16em;
  margin-top: 6px;
}
/* Dark variant for use over --ink backgrounds */
.kx-clients.is-dark {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.12);
}
.kx-clients.is-dark .kx-clients__cell {
  border-right-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
}
.kx-clients.is-dark .kx-clients__cell:hover {
  color: white;
  background: rgba(255,255,255,0.04);
}
/* Dark variant: white-key the logos with brightness(0) invert(1) so dark-on-light
   marks read as white-on-ink. Color cannot be restored on hover (info is destroyed
   by brightness(0)), so we just bump opacity instead. */
.kx-clients.is-dark .kx-clients__cell-img {
  filter: brightness(0) invert(1);
  opacity: 0.55;
}
.kx-clients.is-dark .kx-clients__cell:hover .kx-clients__cell-img {
  opacity: 1;
}

@media (max-width: 1024px) {
  .kx-clients-section__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .kx-clients { grid-template-columns: repeat(3, 1fr); }
  .kx-clients__cell:nth-child(3n) { border-right: none; }
  .kx-clients__cell:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .kx-clients.is-dark .kx-clients__cell:nth-child(-n+3) { border-bottom-color: rgba(255,255,255,0.08); }
  .kx-clients__cell-img { height: 48px; }
}
@media (max-width: 560px) {
  .kx-clients { grid-template-columns: repeat(2, 1fr); }
  .kx-clients__cell { font-size: 16px; padding: 24px 12px; min-height: 110px; }
  .kx-clients__cell.has-img { padding: 18px 14px; }
  .kx-clients__cell:nth-child(2n) { border-right: none; }
  .kx-clients__cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .kx-clients__cell:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--line); }
  .kx-clients.is-dark .kx-clients__cell:nth-child(odd) { border-right-color: rgba(255,255,255,0.08); }
  .kx-clients.is-dark .kx-clients__cell:not(:nth-last-child(-n+2)) { border-bottom-color: rgba(255,255,255,0.08); }
  /* Odd-count overflow: when there are an odd number of logos, the last
     cell would sit alone in row N column 1 with an empty column 2.
     Spanning the last orphan cell across both columns centers it cleanly
     so the grid never has a visible empty slot. */
  .kx-clients__cell:nth-child(odd):last-child {
    grid-column: 1 / -1;
    border-right: none;
  }
  /* Slightly larger logos on mobile because individual cells are bigger
     visual targets than they are at desktop. */
  .kx-clients__cell-img {
    height: 52px;
    opacity: 0.85;
  }
  /* Sam's Club specific: the source image is a small diamond glyph in a
     wide canvas, so even at matched 52px height it reads tiny next to
     wide-text logos. Boost its rendered height so it carries comparable
     visual weight to Chase / Walmart / Verizon. */
  .kx-clients__cell.has-img[data-brand="sams-club"] .kx-clients__cell-img,
  .kx-clients__cell.has-img:has(img[src*="sams-club"]) .kx-clients__cell-img {
    height: 72px;
  }
}

/* Service grid (location pages) */
.kx-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: white;
}
.kx-service-grid__cell {
  background: white;
  padding: 24px;
  min-height: 180px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
/* No right-border on last column cells (parent border handles the edge). */
.kx-service-grid__cell:nth-child(4n) { border-right: none; }
.kx-service-grid__cell:hover { background: var(--paper); }

/* Collapsible services grid — show first 8, reveal remainder via toggle.
   All cards remain in the DOM for SEO. CSS hides overflow until expanded. */
.kx-service-grid--collapsed > .kx-service-grid__cell:nth-child(n+9) {
  display: none;
}
.kx-service-grid--collapsed.is-expanded > .kx-service-grid__cell:nth-child(n+9) {
  display: flex;
}

.kx-grid-toggle-wrap {
  margin-top: 24px;
  text-align: center;
}
.kx-grid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.kx-grid-toggle:hover,
.kx-grid-toggle:focus {
  background: var(--keil-red);
  color: white;
  border-color: var(--keil-red);
  outline: none;
}
.kx-grid-toggle__count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
/* Toggle text switches based on aria-expanded state — same button both ways. */
.kx-grid-toggle__label--expanded { display: none; }
.kx-grid-toggle[aria-expanded="true"] .kx-grid-toggle__label--collapsed { display: none; }
.kx-grid-toggle[aria-expanded="true"] .kx-grid-toggle__label--expanded { display: inline-flex; align-items: center; gap: 10px; }
.kx-service-grid__icon { color: var(--keil-red); margin-bottom: 16px; }
.kx-service-grid__name { font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.kx-service-grid__desc { font-size: 13px; color: var(--ink-3); }

/* Coverage list */
.kx-coverage-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  font-size: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kx-coverage-list li { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.kx-coverage-list svg { color: var(--keil-red); flex-shrink: 0; }

/* Coverage section: 50/50 split (text left, map right) on desktop, stacks
   on mobile with the map on top so it reads as the visual anchor first. */
.kx-coverage-section__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .kx-coverage-section__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .kx-coverage-section__map { order: -1; }
}

/* /{location}/service-areas/ archive page layout. The page used inline
   grid styles with no mobile breakpoints, which squeezed the hero into
   a half-viewport, packed 4 city columns into a phone width (cells too
   narrow to read), and stacked the routing CTA awkwardly. Classes here
   give each section a proper mobile fallback. */
.kx-cities-archive__hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
@media (max-width: 900px) {
  .kx-cities-archive__hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
  }
}

.kx-cities-archive__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.kx-cities-archive__item {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kx-cities-archive__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  min-height: 44px;
}
.kx-cities-archive__link:hover {
  background: var(--paper);
  color: var(--keil-red);
}
.kx-cities-archive__name { font-weight: 500; }
.kx-cities-archive__state {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .08em;
}
@media (max-width: 1024px) {
  .kx-cities-archive__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .kx-cities-archive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-cities-archive__link { padding: 14px 16px; font-size: 14px; }
}
@media (max-width: 420px) {
  .kx-cities-archive__list { grid-template-columns: 1fr; }
}

.kx-cities-archive__cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
}
.kx-cities-archive__cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 768px) {
  .kx-cities-archive__cta-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 12px 0;
  }
}

/* FAQ */
.kx-faq { display: grid; gap: 0; }
.kx-faq details {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.kx-faq details:first-child { border-top: 1px solid var(--line); }
.kx-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  list-style: none;
  color: var(--ink);
}
.kx-faq summary::-webkit-details-marker { display: none; }
.kx-faq summary::after {
  content: "+";
  color: var(--keil-red);
  font-size: 22px;
  font-weight: 400;
  transition: transform .15s;
}
.kx-faq details[open] summary::after { content: "−"; }
.kx-faq summary:hover { color: var(--keil-red); }
.kx-faq__body { margin-top: 12px; font-size: 16px; color: var(--ink-2); max-width: 800px; line-height: 1.6; }

/* Service detail "what's included" list */
.kx-included-list { display: grid; gap: 0; }
.kx-included-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.kx-included-item__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--keil-red);
  letter-spacing: .06em;
}
.kx-included-item__title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--ink);
}
.kx-included-item__desc {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Typical project sidebar */
.kx-typical-card { padding: 28px; }
.kx-typical-card__rows { display: grid; gap: 14px; font-size: 14px; }
.kx-typical-card__row {
  display: flex;
  justify-content: space-between;
}
.kx-typical-card__row span { color: var(--ink-3); }
.kx-typical-card__row strong { color: var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .kx-stat-row__inner { grid-template-columns: repeat(2, 1fr); }
  .kx-stat-row__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .kx-process-grid { grid-template-columns: repeat(2, 1fr); }
  .kx-process-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .kx-process-step:nth-child(2n) { border-right: none; }
  .kx-locations-grid { grid-template-columns: 1fr; }
  .kx-location-panel { border-right: none; border-bottom: 1px solid var(--line); }
  .kx-location-panel:last-child { border-bottom: none; }
  .kx-service-grid { grid-template-columns: repeat(2, 1fr); }
  .kx-reviews-grid { grid-template-columns: 1fr; }
  .kx-review-card { border-right: none; }
  .kx-review-card:not(:last-child) { border-bottom: 1px solid var(--line); }
  .kx-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .kx-header__inner {
    grid-template-columns: auto 1fr auto;
    min-height: 64px;
    height: auto;
    gap: 16px;
    align-items: center;
  }
  .kx-nav, .kx-nav-right { display: none; }
  .kx-logo { grid-column: 1; }
  .kx-mobile-toggle {
    display: inline-flex;
    grid-column: 3;
  }

  /* Mobile menu open state.
     -----
     Both nav blocks expand into rows 2 and 3 of the header grid and span
     full width. Each gets its OWN solid background + z-index because the
     header element above stacks under page sections in some templates
     (each .kx-section creates its own stacking context). Setting the
     background on the parent .kx-header alone wasn't enough to prevent
     visual bleed-through. Belt + suspenders: solid bg on each nav block,
     plus stronger z-index, plus an opaque parent. */
  .kx-header.is-open {
    background: var(--paper);
    z-index: 50;
  }
  /* The grid container's 16px gap creates row gaps between the open menu
     blocks. Column gap is still needed for the row-1 layout (logo + toggle),
     so only zero out the row gap. */
  .kx-header.is-open .kx-header__inner {
    row-gap: 0;
  }
  .kx-header.is-open .kx-nav,
  .kx-header.is-open .kx-nav-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding: 0;                            /* no internal padding, the items create their own rhythm */
    background: var(--paper);
    grid-column: 1 / -1;
    position: relative;
    z-index: 51;
  }
  .kx-header.is-open .kx-nav {
    grid-row: 2;
    border-top: 1px solid var(--line);     /* single seam at the top of the menu */
  }
  .kx-header.is-open .kx-nav-right {
    grid-row: 3;
    padding-bottom: 16px;                  /* breathing room before the bottom of the menu */
  }
  .kx-header.is-open .kx-nav a,
  .kx-header.is-open .kx-nav-right a:not(.kx-btn) {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  /* Only the very last menu item drops its border. The .kx-nav last item
     KEEPS its border so the .kx-nav → .kx-nav-right seam reads as a normal
     menu divider, not as the end of one list and start of another. */
  .kx-header.is-open .kx-nav-right a:not(.kx-btn):last-of-type {
    border-bottom: none;
  }
  /* Preserve the red CTA styling on the Get-a-quote button. The general
     link rule above used to flatten it to paper background, which killed
     the visual hierarchy of the menu. */
  .kx-header.is-open .kx-nav-right .kx-btn {
    margin: 16px 0 0 0 !important;
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    border-bottom: none;
    background: var(--keil-red);
    color: white;
  }
  .kx-header.is-open .kx-nav-right .kx-btn:hover {
    background: var(--keil-red-deep);
  }

  .kx-hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .kx-services-row { grid-template-columns: 40px 1fr 40px; min-height: auto; padding: 20px 0; gap: 12px; }
  .kx-services-row__desc, .kx-services-row__tag { display: none; }
  .kx-service-grid { grid-template-columns: 1fr; }
  .kx-trust-strip { grid-template-columns: repeat(2, 1fr); }
  .kx-trust-strip__cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .kx-trust-strip__cell:nth-child(2n) { border-right: none; }
  /* .kx-owner-block mobile rules now live with the component definition above */
  .kx-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .kx-reviews-summary { grid-template-columns: 1fr; gap: 24px; }
  .kx-included-item { grid-template-columns: 32px 1fr; gap: 16px; }
  .kx-coverage-list { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================================
   Mobile spacing consolidation
   ----------------------------------------------------------------------------
   Catches issues that aren't already handled by per-component breakpoints:
   1. .kx-section / .kx-section-lg padding (96/120px desktop) was unchanged
      on mobile, leaving cavernous empty bands between every section.
   2. .kx-container horizontal padding (32px) was the same on every viewport,
      eating into already-narrow content area at 375-414px.
   3. .kx-hero__grid has inline grid-template-columns set by several templates
      (single-keil_location, keil_render_hero), which beats the existing media
      query — mobile heroes were rendering 2-col instead of stacking. !important
      forces the override regardless of inline style.
   ============================================================================ */
@media (max-width: 768px) {
  .kx-section { padding: 56px 0; }
  .kx-section-lg { padding: 72px 0; }
  .kx-section-sm { padding: 40px 0; }
  .kx-cta { padding: 64px 0; }
  .kx-container,
  .kx-container-narrow { padding: 0 20px; }
  .kx-hero__grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .kx-card { padding: 20px; }
  /* Inline 2-column grids inside section containers (lead-form sections,
     location-hub coverage section, brand-hub locations row) all set
     style="display: grid; grid-template-columns: 1fr 1.4fr" inline, which
     beats class-based media queries. !important is the only way to force
     them to stack on mobile without editing every template. */
  .kx-section .kx-container > div[style*="grid-template-columns"],
  .kx-section-lg .kx-container > div[style*="grid-template-columns"],
  .kx-section .kx-container > div > div[style*="grid-template-columns"],
  .kx-section-lg .kx-container > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 480px) {
  .kx-section { padding: 48px 0; }
  .kx-section-lg { padding: 56px 0; }
  .kx-cta { padding: 56px 0; }
  .kx-container,
  .kx-container-narrow { padding: 0 16px; }
}

/* =====================================================================
   Phase A — CRO components: promo strip, sticky mobile CTA, hero trust,
   review badge, ZIP widget, lead form, real map embed.
   ===================================================================== */

/* Promo / offer strip — top of page, just below compliance */
.kx-promo {
  background: var(--keil-red);
  color: white;
  padding: 10px 0;
  font-size: 13px;
  position: relative;
  z-index: 12;
}
.kx-promo__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}
.kx-promo__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  background: rgba(255,255,255,.18);
  padding: 4px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
.kx-promo__offer { font-weight: 600; }
/* Desktop/mobile offer split: render both, hide one based on viewport. The
 * mobile copy is a short, benefit-focused single line; the desktop copy
 * is the full sentence with all three benefits. Only one shows at a time. */
.kx-promo__offer--mobile { display: none; }
.kx-promo__cta {
  font-weight: 700;
  text-decoration: underline;
  color: white;
  white-space: nowrap;
}
.kx-promo__cta:hover, .kx-promo__cta:focus { color: rgba(255,255,255,.85); }
.kx-promo__disclaimer { font-size: 11px; opacity: .75; }

@media (max-width: 768px) {
  /* Single-line layout on mobile: hide the brand label and the long
   * desktop offer; show the short mobile offer + CTA inline. */
  .kx-promo { font-size: 12px; padding: 8px 0; }
  .kx-promo__inner {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
    padding: 0 12px;
  }
  .kx-promo__label { display: none; }
  .kx-promo__offer--desktop { display: none; }
  .kx-promo__offer--mobile {
    display: inline;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .kx-promo__cta {
    font-size: 12px;
    flex-shrink: 0;
  }
  .kx-promo__disclaimer { display: none; }
}

/* Sticky mobile CTA bar — fixed bottom on mobile, franchise-context only */
.kx-mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: white;
  border-top: 1px solid var(--line);
  display: none;
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
}
.kx-mobile-cta-bar__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.kx-mobile-cta-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.2;
  min-height: 52px;
}
.kx-mobile-cta-bar__btn--call {
  background: var(--keil-red);
  color: white;
}
.kx-mobile-cta-bar__btn--call:hover,
.kx-mobile-cta-bar__btn--call:focus { background: #B30021; color: white; }
.kx-mobile-cta-bar__btn--secondary {
  background: white;
  color: var(--ink);
  border-left: 1px solid var(--line);
}
.kx-mobile-cta-bar__btn--secondary:hover,
.kx-mobile-cta-bar__btn--secondary:focus { background: var(--paper); color: var(--ink); }

@media (max-width: 768px) {
  .kx-mobile-cta-bar { display: block; }
  body.has-sticky-cta { padding-bottom: 56px; }
}

/* Hero trust callout — 3 promise rows, sits inside hero card */
.kx-hero-trust {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  margin-top: 16px;
}
.kx-hero-trust__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
.kx-hero-trust__row svg { flex-shrink: 0; margin-top: 2px; }
.kx-hero-trust__row strong { color: var(--ink); font-weight: 600; }

/* Owner proof strip — small trust anchor for LSV + spoke pages so visitors
 * landing deep in the site see the master-electrician owner before reading
 * the body. Inline variant: full-width band; card variant: drop-shadowed
 * card for embedded contexts. */
.kx-owner-strip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 24px 0;
}
.kx-owner-strip--card {
  background: white;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06);
}
.kx-owner-strip__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.kx-owner-strip__photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kx-owner-strip__photo--placeholder {
  background: white;
}
.kx-owner-strip__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait photos: anchor crop to the top so the face stays in frame
   * inside the circular avatar. PHP serves the 'medium' WP size so the
   * source file still includes the head — the hard-cropped 'thumbnail'
   * size already cut it off. */
  object-position: center top;
  display: block;
}
.kx-owner-strip__body {
  flex: 1;
  min-width: 0;
}
.kx-owner-strip__name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.kx-owner-strip__name span {
  color: var(--ink-3);
  font-weight: 500;
}
.kx-owner-strip__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  text-transform: uppercase;
  line-height: 1.4;
}
.kx-owner-strip__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ink);
  color: white;
  text-decoration: none;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  transition: background .15s ease;
}
.kx-owner-strip__cta:hover { background: var(--keil-red); }
@media (max-width: 640px) {
  .kx-owner-strip { padding: 12px 14px; }
  .kx-owner-strip__inner { gap: 12px; }
  .kx-owner-strip__cta { width: 100%; justify-content: center; }
  .kx-owner-strip__photo { width: 48px; height: 48px; }
  .kx-owner-strip__name { font-size: 14px; }
}

/* Aggregate review badge (when real GBP data is set) */
.kx-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.kx-review-badge__stars { display: inline-flex; gap: 1px; align-items: center; }
.kx-review-badge__rating { font-weight: 700; font-size: 16px; color: var(--ink); }
.kx-review-badge__count { font-size: 13px; color: var(--ink-3); }
.kx-review-badge--lg { padding: 14px 18px; }
.kx-review-badge--lg .kx-review-badge__rating { font-size: 22px; }

/* Hero info-card spacing: when the review badge or 3-row trust strip is
   appended below the info rows inside .kx-card, give it breathing room
   so it doesn't visually crash into the last row (TX License, etc.). */
.kx-card .kx-review-badge,
.kx-card .kx-hero-trust { margin-top: 18px; }

/* Service-area ZIP widget */
.kx-zip-widget {
  display: grid;
  gap: 8px;
  padding: 32px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.kx-zip-widget__label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 4px;
}
.kx-zip-widget__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--ink);
}
.kx-zip-widget__sub {
  margin: 0;
  font-size: 14px;
  color: var(--ink-3);
}
.kx-zip-widget__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 16px;
}
.kx-zip-widget__input {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: white;
  width: 100%;
}
.kx-zip-widget__input:focus {
  border-color: var(--keil-red);
  outline: 2px solid rgba(228,0,43,.18);
  outline-offset: 0;
}
.kx-zip-widget__result {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
  display: none;
  line-height: 1.5;
}
.kx-zip-widget__result.is-served {
  background: rgba(46,160,67,.08);
  border-left: 3px solid #2ea043;
  color: var(--ink);
  display: block;
}
.kx-zip-widget__result.is-outside {
  background: rgba(228,0,43,.06);
  border-left: 3px solid var(--keil-red);
  color: var(--ink);
  display: block;
}
.kx-zip-widget__result a {
  color: var(--keil-red);
  font-weight: 600;
  text-decoration: underline;
}
.kx-zip-widget__result strong { color: var(--ink); }

/* Lead form */
.kx-lead-form {
  display: grid;
  gap: 14px;
  background: white;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.kx-lead-form__title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  line-height: 1.1;
}
.kx-lead-form__intro {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 0 12px;
  line-height: 1.5;
}
.kx-lead-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kx-lead-form__field { display: grid; gap: 6px; }
.kx-lead-form__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  font-weight: 500;
}
.kx-lead-form__input,
.kx-lead-form__select,
.kx-lead-form__textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: white;
  width: 100%;
  box-sizing: border-box;
}
.kx-lead-form__input:focus,
.kx-lead-form__select:focus,
.kx-lead-form__textarea:focus {
  border-color: var(--keil-red);
  outline: 2px solid rgba(228,0,43,.15);
  outline-offset: 0;
}
.kx-lead-form__textarea {
  min-height: 110px;
  resize: vertical;
}
.kx-lead-form__honey {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.kx-lead-form__submit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.kx-lead-form__legal {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
  flex: 1;
  min-width: 220px;
  line-height: 1.5;
}
.kx-form-flash {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 500;
  line-height: 1.5;
}
.kx-form-flash--success {
  background: rgba(46,160,67,.08);
  border-left: 3px solid #2ea043;
  color: var(--ink);
}
.kx-form-flash--error {
  background: rgba(228,0,43,.08);
  border-left: 3px solid var(--keil-red);
  color: var(--ink);
}

/* Success dialog — shown after AJAX form submit succeeds. Uses the native
 * <dialog> element for free focus-trapping, ESC-close, and backdrop. */
.kx-form-dialog {
  border: 0;
  border-radius: var(--r-md);
  padding: 0;
  background: white;
  max-width: 480px;
  width: calc(100% - 32px);
  box-shadow: 0 20px 60px rgba(15, 23, 42, .25), 0 8px 24px rgba(15, 23, 42, .12);
  color: var(--ink);
  /* Center the dialog with a flex-friendly margin (works alongside the
   * browser's default top/bottom auto margin). */
  margin: auto;
}
.kx-form-dialog::backdrop {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
}
.kx-form-dialog__inner {
  padding: 32px 28px;
  text-align: center;
}
.kx-form-dialog__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2ea043; /* success green */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 0 0 6px rgba(46, 160, 67, .14);
}
.kx-form-dialog__title {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}
.kx-form-dialog__body {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.kx-form-dialog__phone-line {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--ink-3);
}
.kx-form-dialog__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.kx-form-dialog__phone:hover {
  color: var(--keil-red);
  border-bottom-color: var(--keil-red);
}
.kx-form-dialog__close {
  min-width: 140px;
}
@media (max-width: 640px) {
  .kx-form-dialog__inner { padding: 26px 20px; }
  .kx-form-dialog__title { font-size: 19px; }
}

/* A11y: per-field error spans (populated by inline JS validator). Hidden when
 * empty so they don't take up space, color-coded red when populated. */
.kx-lead-form__error {
  display: block;
  min-height: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--keil-red);
  font-weight: 500;
}
.kx-lead-form__error:empty { display: none; }
.kx-lead-form__req { color: var(--keil-red); margin-left: 2px; }

/* aria-invalid="true" gets a red border + ring so the validation state is
 * communicated visually in addition to the screen-reader announcement. */
.kx-lead-form__input[aria-invalid="true"],
.kx-lead-form__select[aria-invalid="true"],
.kx-lead-form__textarea[aria-invalid="true"] {
  border-color: var(--keil-red);
  outline: 2px solid rgba(228,0,43,.18);
  outline-offset: 0;
}

/* Global :focus-visible — keyboard users get a clear red ring on every
 * interactive element. Mouse clicks don't trigger this, so the visual
 * regression for sighted-mouse users is zero. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--keil-red);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Suppress the default focus on mouse interaction now that we have a strong
 * keyboard focus — keeps the UI clean while preserving keyboard a11y. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}
@media (max-width: 640px) {
  .kx-lead-form { padding: 24px 20px; }
  .kx-lead-form__row { grid-template-columns: 1fr; }
  .kx-lead-form__title { font-size: 26px; }
  .kx-zip-widget { padding: 24px 20px; }
  .kx-zip-widget__row { grid-template-columns: 1fr; }
}

/* Link grid — used by keil_render_related_links on spoke templates */
.kx-link-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-link-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.kx-link-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.kx-link-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.kx-link-grid__cell {
  background: white;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  min-height: 100px;
  transition: background .15s ease;
}
.kx-link-grid__cell:hover { background: var(--paper); }
.kx-link-grid__label {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  display: block;
  grid-column: 1;
  margin-bottom: 4px;
}
.kx-link-grid__note {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  display: block;
  grid-column: 1;
}
.kx-link-grid__arrow {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  color: var(--ink-3);
}
/* Collapsible variant — same contract as .kx-service-grid--collapsed.
   Hides cells past index 8 by default. JS toggle adds .is-expanded
   to reveal the rest. The 1px hairline grid background means we also
   need to reset the inner border when last visible row wraps short. */
.kx-link-grid--collapsed > .kx-link-grid__cell:nth-child(n+9) {
  display: none;
}
.kx-link-grid--collapsed.is-expanded > .kx-link-grid__cell:nth-child(n+9) {
  display: grid;
}

/* Cost / duration / meta grid — small data blocks for service pages */
.kx-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-meta-grid__cell {
  background: white;
  padding: 28px 24px;
}
.kx-meta-grid__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.kx-meta-grid__value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 4px;
  display: block;
}
.kx-meta-grid__sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* Comparison block — us vs handyman vs DIY */
.kx-comparison {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-comparison__col {
  background: white;
  padding: 28px 24px;
  display: grid;
  gap: 14px;
}
.kx-comparison__col--us {
  background: var(--ink);
  color: white;
}
.kx-comparison__col--us .kx-comparison__label { color: var(--keil-red); }
.kx-comparison__col--us .kx-comparison__title { color: white; }
.kx-comparison__col--us .kx-comparison__row { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.12); }
.kx-comparison__col--us .kx-comparison__row svg { color: var(--keil-red); }
.kx-comparison__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.kx-comparison__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.kx-comparison__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.kx-comparison__row:last-child { border-bottom: none; padding-bottom: 0; }
.kx-comparison__row svg { flex-shrink: 0; margin-top: 2px; color: var(--keil-red); }

/* Drive-time panel — used on city / city-service pages */
.kx-drive-panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-drive-panel__body { padding: 32px; }
.kx-drive-panel__map { background: var(--paper-2); min-height: 280px; position: relative; }
.kx-drive-panel__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.kx-drive-panel__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.kx-drive-panel__sub {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 16px;
}
.kx-drive-panel__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.kx-drive-panel__stat-num {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
}
.kx-drive-panel__stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

/* Permits & warranty info card */
.kx-info-card {
  background: var(--paper);
  border-left: 3px solid var(--keil-red);
  padding: 24px 28px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.kx-info-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--keil-red);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}
.kx-info-card__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.kx-info-card__body {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.kx-info-card__rows {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.kx-info-card__row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
}
.kx-info-card__row svg { flex-shrink: 0; margin-top: 2px; color: var(--keil-red); }
.kx-info-card__row strong { color: var(--ink); }

@media (max-width: 1024px) {
  .kx-link-grid--cols-3, .kx-link-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .kx-meta-grid, .kx-comparison { grid-template-columns: 1fr; }
  .kx-drive-panel { grid-template-columns: 1fr; }
  .kx-drive-panel__map { min-height: 220px; }
}
@media (max-width: 640px) {
  .kx-link-grid--cols-2, .kx-link-grid--cols-3, .kx-link-grid--cols-4 { grid-template-columns: 1fr; }
  .kx-meta-grid__value { font-size: 24px; }
  .kx-drive-panel__body { padding: 24px 20px; }
}

/* =====================================================================
   Phase C+ — reviews, crew bios, before/after gallery, emergency landing.
   ===================================================================== */

/* =====================================================================
   Reviews — editorial pull-quote layout. One large featured review at the
   top with a magazine-style oversized quote mark, then smaller supporting
   reviews in a 2-column grid below. Aggregate badge inline with the head.
   ===================================================================== */

/* Inline aggregate badge in head row */
.kx-reviews-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.kx-reviews-head h2 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
  max-width: 720px;
}
.kx-reviews-aggregate {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  white-space: nowrap;
}
.kx-reviews-aggregate__stars {
  color: #FFC107;
  font-size: 18px;
  letter-spacing: 1px;
  display: inline-flex;
  gap: 2px;
}
.kx-reviews-aggregate__rating {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.kx-reviews-aggregate__meta {
  font-size: 13px;
  color: var(--ink-3);
  border-left: 1px solid var(--line);
  padding-left: 14px;
  line-height: 1.35;
}

/* Featured pull-quote card */
.kx-reviews-featured {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 64px;
  position: relative;
  margin-bottom: 32px;
  overflow: hidden;
}
.kx-reviews-featured::before {
  content: "\201C";
  position: absolute;
  top: -40px;
  left: 28px;
  font-family: var(--font-display);
  font-size: 280px;
  line-height: 1;
  color: var(--keil-red);
  opacity: 0.18;
  font-weight: 800;
}
.kx-reviews-featured__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--keil-red);
  background: rgba(228,0,43,0.08);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 24px;
  position: relative;
}
.kx-reviews-featured__quote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 32px;
  position: relative;
  max-width: 880px;
}
.kx-reviews-featured__attr {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex-wrap: wrap;
}
.kx-reviews-featured__name {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.2;
}
.kx-reviews-featured__meta {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
}
.kx-reviews-featured__stars {
  margin-left: auto;
  color: #FFC107;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-flex;
  gap: 2px;
}

/* Generic letter avatar */
.kx-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--keil-red);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  flex-shrink: 0;
}
.kx-avatar--sm {
  width: 36px; height: 36px;
  font-size: 14px;
  background: var(--paper-2);
  color: var(--ink);
}

/* Supporting reviews grid below the featured card — 2-col */
.kx-reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.kx-review-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
  display: grid;
  gap: 16px;
  align-content: start;
}
.kx-review-card__attr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.kx-review-card__attr-meta { display: grid; gap: 2px; flex: 1; min-width: 0; }
.kx-review-card__name-line { font-weight: 600; font-size: 14px; color: var(--ink); }
.kx-review-card__time { font-size: 12px; color: var(--ink-3); }

.kx-reviews-cta {
  margin-top: 40px;
  text-align: center;
}
.kx-reviews-cta a {
  display: inline-block;
  padding: 14px 28px;
  background: var(--ink);
  color: white;
  text-decoration: none;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 15px;
  transition: background .15s ease;
}
.kx-reviews-cta a:hover { background: var(--keil-red); }

@media (max-width: 1024px) {
  .kx-reviews-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .kx-reviews-featured { padding: 40px 28px; }
  .kx-reviews-featured::before { font-size: 200px; top: -20px; }
}
@media (max-width: 640px) {
  .kx-reviews-grid { grid-template-columns: 1fr; }
  .kx-reviews-featured__quote { font-size: 19px; }
  .kx-avatar { width: 44px; height: 44px; font-size: 18px; }
}
.kx-review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.kx-review-card__stars { display: inline-flex; gap: 1px; color: #FFC107; }
.kx-review-card__source {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.kx-review-card__quote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.kx-review-card__quote::before { content: '\201C'; }
.kx-review-card__quote::after { content: '\201D'; }
.kx-review-card__attr {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: grid;
  gap: 4px;
}
.kx-review-card__name { font-weight: 600; font-size: 15px; color: var(--ink); }
.kx-review-card__meta { font-size: 13px; color: var(--ink-3); }
.kx-review-card__service-tag {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(228,0,43,0.08);
  color: var(--keil-red);
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .kx-reviews-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .kx-reviews-grid { grid-template-columns: 1fr; }
}

/* Crew bios — Concept C "Structured profile cards" / dossier feel.
   Square photo + ID badge in the corner, name, role, optional credential
   strip with a red dot. Uses object-position: center top so faces stay
   in frame even when the source portrait is cropped to 1:1. */
.kx-crew-section {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.kx-crew-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 48px;
}
.kx-crew-head__title {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 720px;
}
.kx-crew-head__sub {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 700px;
  margin: 0;
}
.kx-crew-head__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}
.kx-crew-head__count strong {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--keil-red);
  margin-bottom: 4px;
}
.kx-crew-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kx-crew-card {
  background: white;
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kx-crew-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 28px rgba(14, 18, 23, .08);
  border-color: var(--ink);
}
.kx-crew-card__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper);
  overflow: hidden;
}
.kx-crew-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the square crop toward the RIGHT of the source so the subject
     stays in frame on photos where the person is composed on the right
     side of the original (standing next to the company van branding),
     and toward the top so the head keeps a touch of headroom (~12%). */
  object-position: 75% 12%;
  display: block;
}
.kx-crew-card__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: repeating-linear-gradient(135deg, var(--paper) 0, var(--paper) 10px, var(--paper-2) 10px, var(--paper-2) 20px);
}
.kx-crew-card__id {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(14, 18, 23, .85);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  padding: 4px 8px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.kx-crew-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kx-crew-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.kx-crew-card__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kx-crew-card__bio {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 6px 0 0;
}
.kx-crew-card__cred {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.kx-crew-card__cred-dot {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--keil-red);
}

@media (max-width: 1024px) {
  .kx-crew-head { grid-template-columns: 1fr; align-items: start; }
  .kx-crew-head__count { text-align: left; }
  .kx-crew-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kx-crew-grid { gap: 12px; }
}

/* Before / after gallery — paired image cards */
.kx-ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.kx-ba-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.kx-ba-card__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.kx-ba-card__half {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: var(--paper-2);
}
.kx-ba-card__half img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.kx-ba-card__half--before { border-right: 1px solid var(--line); }
.kx-ba-card__label {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(14,18,23,0.85);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  padding: 5px 11px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 2;
}
.kx-ba-card__half--after .kx-ba-card__label {
  background: var(--keil-red);
}
.kx-ba-card__body { padding: 24px 28px; }
.kx-ba-card__service-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.kx-ba-card__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.2;
}
.kx-ba-card__desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1024px) {
  .kx-ba-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kx-ba-card__pair { grid-template-columns: 1fr; }
  .kx-ba-card__half { height: 220px; }
  .kx-ba-card__half--before { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Emergency landing page — high-urgency red hero with phone-first design */
.kx-emergency-hero {
  background: linear-gradient(135deg, #1F0A0E 0%, #570014 50%, #B3021D 100%);
  color: white;
  padding: 88px 0 64px;
  position: relative;
  overflow: hidden;
}
.kx-emergency-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.kx-emergency-hero__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
}
.kx-emergency-hero__bar {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 600;
}
.kx-emergency-hero__pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: kx-pulse 1.5s infinite;
  display: inline-block;
}
@keyframes kx-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.kx-emergency-hero__title {
  font-size: clamp(44px, 6.5vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: white;
  margin: 0 0 24px;
}
.kx-emergency-hero__sub {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,255,255,0.94);
  max-width: 540px;
  margin: 0 0 36px;
}
.kx-emergency-hero__caveat {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  margin: 0;
}
.kx-emergency-hero__phone-stack {
  display: grid; gap: 14px;
}
.kx-emergency-hero__phone {
  background: white;
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 22px 26px;
  text-decoration: none;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
  border: 2px solid transparent;
}
.kx-emergency-hero__phone:hover,
.kx-emergency-hero__phone:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  border-color: white;
  color: var(--ink);
}
.kx-emergency-hero__phone-loc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--keil-red);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
.kx-emergency-hero__phone-num {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  line-height: 1;
}
.kx-emergency-hero__phone-num svg { color: var(--keil-red); }
.kx-emergency-hero__phone-note {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}

@media (max-width: 1024px) {
  .kx-emergency-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .kx-emergency-hero { padding: 64px 0 48px; }
  .kx-emergency-hero__phone-num { font-size: 26px; }
}

/* Emergency triage list — what we treat as emergency vs schedule next-day */
.kx-triage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.kx-triage__col {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px;
}
.kx-triage__col--urgent { border-left: 4px solid var(--keil-red); }
.kx-triage__col--schedule { border-left: 4px solid var(--ink-4); }
.kx-triage__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.kx-triage__col--urgent .kx-triage__label { color: var(--keil-red); }
.kx-triage__col--schedule .kx-triage__label { color: var(--ink-3); }
.kx-triage__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.kx-triage__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.kx-triage__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.kx-triage__list li svg { flex-shrink: 0; margin-top: 3px; }
.kx-triage__col--urgent .kx-triage__list li svg { color: var(--keil-red); }
.kx-triage__col--schedule .kx-triage__list li svg { color: var(--ink-3); }
.kx-triage__list li strong { color: var(--ink); font-weight: 600; }

@media (max-width: 1024px) {
  .kx-triage { grid-template-columns: 1fr; gap: 20px; }
  .kx-triage__col { padding: 24px; }
}

/* =====================================================================
   Search widget — live AJAX dropdown + server-side results template.
   ===================================================================== */

.kx-search { position: relative; width: 100%; }
.kx-search--hero { max-width: 720px; margin: 0 auto; }
.kx-search--compact { max-width: 560px; }

.kx-search__sr {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.kx-search__form {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kx-search__form:focus-within {
  border-color: var(--keil-red);
  box-shadow: 0 0 0 3px rgba(228,0,43,0.12);
}

.kx-search--hero .kx-search__form {
  font-size: 18px;
  border-width: 2px;
}

.kx-search__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: var(--ink-3);
}
.kx-search__form:focus-within .kx-search__icon { color: var(--keil-red); }

.kx-search__input {
  border: 0;
  outline: none;
  padding: 14px 8px;
  font-family: inherit;
  font-size: 15px;
  background: transparent;
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
.kx-search--hero .kx-search__input { padding: 18px 8px; font-size: 17px; }
.kx-search__input::placeholder { color: var(--ink-3); }
.kx-search__input::-webkit-search-cancel-button { display: none; }

.kx-search__submit {
  border: 0;
  background: var(--keil-red);
  color: white;
  padding: 0 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  align-self: stretch;
  transition: background .15s ease;
}
.kx-search__submit:hover { background: #B30021; }
.kx-search--hero .kx-search__submit { padding: 0 30px; font-size: 16px; }

.kx-search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(14,18,23,0.08);
  max-height: 480px;
  overflow-y: auto;
  z-index: 50;
}

.kx-search__results-empty,
.kx-search__results-loading,
.kx-search__results-error {
  padding: 18px 20px;
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
}

.kx-search-result {
  display: block;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background .12s ease;
  outline: none;
}
.kx-search-result:last-child { border-bottom: 0; }
.kx-search-result:hover,
.kx-search-result:focus,
.kx-search-result.is-active {
  background: var(--paper);
  color: var(--ink);
}
.kx-search-result__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.kx-search-result__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.kx-search-result__type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--keil-red);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.kx-search-result__breadcrumb {
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 4px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.kx-search-result__snippet {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
}

.kx-search-results-page {
  display: grid;
  gap: 16px;
}
.kx-search-results-page .kx-search-result {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.kx-search-results-page .kx-search-result__title { font-size: 18px; }
.kx-search-results-page .kx-search-result__snippet { font-size: 14px; }

@media (max-width: 640px) {
  .kx-search__form { grid-template-columns: auto 1fr; }
  .kx-search__submit { display: none; }
  .kx-search__input { padding-right: 14px; }
  .kx-search--hero .kx-search__form { font-size: 16px; }
}

/* =====================================================================
   404 page — recovery + search-led navigation back to value.
   ===================================================================== */

.kx-404-hero {
  background: linear-gradient(135deg, var(--ink) 0%, var(--keil-navy-3) 100%);
  color: white;
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}
.kx-404-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.kx-404-hero__inner {
  position: relative; z-index: 2;
  max-width: 800px;
}
.kx-404-hero__code {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--keil-red);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.kx-404-hero__title {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: white;
  margin: 0 0 24px;
}
.kx-404-hero__sub {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
  margin: 0 0 32px;
  max-width: 560px;
}

@media (max-width: 768px) {
  .kx-404-hero { padding: 64px 0 48px; }
}

/* Warranty matrix — 3 tier cards (5-year / 10-year / Lifetime) */
.kx-warranty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kx-warranty-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px;
  display: grid;
  gap: 18px;
  align-content: start;
  position: relative;
  overflow: hidden;
}
.kx-warranty-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--keil-red);
}
.kx-warranty-card__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--keil-red);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}
.kx-warranty-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.kx-warranty-card__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}
.kx-warranty-card__list li svg { flex-shrink: 0; margin-top: 3px; }

.kx-warranty-footnote {
  margin-top: 28px;
  padding: 22px 26px;
  background: rgba(228,0,43,0.04);
  border-left: 3px solid var(--keil-red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.kx-warranty-footnote__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--keil-red);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.kx-warranty-footnote p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.kx-warranty-footnote a { color: var(--keil-red); font-weight: 600; }

@media (max-width: 1024px) {
  .kx-warranty-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Power-Perks pricing tiers */
.kx-perks-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.kx-perks-tier {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 28px;
  text-align: center;
  position: relative;
}
.kx-perks-tier--featured {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.kx-perks-tier__duration {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  line-height: 1;
}
.kx-perks-tier--featured .kx-perks-tier__duration { color: white; }
.kx-perks-tier__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: block;
}
.kx-perks-tier--featured .kx-perks-tier__label { color: rgba(255,255,255,.6); }
.kx-perks-tier__price {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--keil-red);
  margin-bottom: 8px;
}
.kx-perks-tier__sub {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}
.kx-perks-tier--featured .kx-perks-tier__sub { color: rgba(255,255,255,.5); }
.kx-perks-tier__featured-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--keil-red);
  color: white;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
}

.kx-perks-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.kx-perk {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px;
}
.kx-perk__icon {
  width: 44px; height: 44px;
  background: var(--keil-red);
  color: white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.kx-perk__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.25;
}
.kx-perk__body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .kx-perks-tiers, .kx-perks-benefits { grid-template-columns: 1fr; }
}

/* Footer trust badges row — pill-style trust signals above the legal row */
.kx-footer-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 0 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.kx-footer-trust-row__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  font-weight: 500;
}
.kx-footer-trust-row__pill svg { color: var(--keil-red); flex-shrink: 0; }

@media (max-width: 768px) {
  .kx-footer-trust-row { gap: 6px; }
  .kx-footer-trust-row__pill { font-size: 10px; padding: 6px 10px; letter-spacing: .08em; }
}

/* Real Google Maps embed wrapper */
.kx-map-embed {
  position: relative;
  width: 100%;
  height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-2);
}
.kx-map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 768px) {
  .kx-map-embed { height: 320px; }
}


/* =====================================================================
 * Contact page — two-shop picker (no form on this page; routes to the
 * franchise contact section). Each card is the only conversion path
 * for that location's coverage area.
 * ===================================================================== */
.kx-shops-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.kx-shop-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.kx-shop-card:hover {
  border-color: var(--ink);
  box-shadow: 0 24px 48px -28px rgba(14,18,23,0.18);
  transform: translateY(-2px);
}
.kx-shop-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kx-shop-card__loc-tag {
  color: var(--keil-red);
  font-weight: 600;
}
.kx-shop-card__coverage {
  color: var(--ink-3);
}
.kx-shop-card__name {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  font-weight: 700;
}
.kx-shop-card__owner {
  font-size: 15px;
  color: var(--ink-2);
  margin-bottom: 24px;
  line-height: 1.5;
}
.kx-shop-card__owner strong { color: var(--ink); font-weight: 600; }
.kx-shop-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: 14px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 24px;
  transition: background 160ms ease, border-color 160ms ease;
}
.kx-shop-card__phone:hover {
  background: var(--paper-2);
  border-color: var(--ink-2);
  color: var(--ink); /* Override global a:hover { color: red } */
}
.kx-shop-card__phone svg { color: var(--keil-red); flex-shrink: 0; }
.kx-shop-card__details {
  display: grid;
  gap: 12px;
  margin: 0 0 32px 0;
  padding: 0;
}
.kx-shop-card__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
.kx-shop-card__row svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.kx-shop-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: var(--keil-red);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  border-radius: var(--r-md);
  margin-top: auto;
  transition: background 160ms ease, transform 160ms ease;
}
.kx-shop-card__cta:hover {
  background: var(--keil-red-deep);
  color: white; /* Override the global a:hover { color: red } rule */
  transform: translateX(2px);
}
.kx-shop-card__cta svg { flex-shrink: 0; }
.kx-shop-card__hub-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 160ms ease;
}
.kx-shop-card__hub-link:hover { color: var(--ink); }

@media (max-width: 900px) {
  .kx-shops-grid { grid-template-columns: 1fr; gap: 24px; }
  .kx-shop-card { padding: 28px; }
  .kx-shop-card__phone { font-size: 22px; padding: 12px 16px; }
}

/* Contact page — supplementary email + emergency block below shop picker */
.kx-contact-supplement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
.kx-contact-supplement__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.kx-contact-supplement__label--red { color: var(--keil-red); }
.kx-contact-supplement__email-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.kx-contact-supplement__email-link:hover { color: var(--keil-red); }
.kx-contact-supplement__note {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}
.kx-contact-supplement__emergency-body {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 14px 0;
}
.kx-contact-supplement__emergency-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--keil-red);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.kx-contact-supplement__emergency-link:hover { gap: 12px; }

@media (max-width: 768px) {
  .kx-contact-supplement { grid-template-columns: 1fr; gap: 32px; }
  .kx-contact-supplement__email-link { font-size: 18px; }
}

/* =====================================================================
 * Responsive pass 2 — tablet + small-tablet + phone padding/spacing.
 * Addresses user feedback that the spacing felt off at "tablet size" —
 * the hero band on synthetic pages (/contact/, /services/) was 180px tall
 * at every breakpoint and the hero inner had 64px top + 64px bottom
 * padding inline, eating ~310px of vertical space before content. Service
 * grid was also collapsing to 1-col at 768px when there was still room
 * for 2-col through tablet sizes.
 * ===================================================================== */

/* Synthetic hero shared class (set by templates that use the
   "hero with eyebrow + title + decoration band" pattern). */
.kx-hero__inner--with-band { padding-bottom: 64px; }
.kx-hero__copy-block { max-width: 800px; }
.kx-hero__synthetic-title {
  font-size: clamp(34px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  font-weight: 700;
}
.kx-hero__synthetic-lede {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--ink-2);
  max-width: 640px;
  line-height: 1.55;
  margin: 0;
}

/* Decoration band — same gradient + svg pattern across synthetic pages.
   Height shrinks at smaller viewports so the band reads as a thin sweep
   rather than an empty 180px wall on a 600px screen.
   NOTE: each media query is scoped with both min and max so smaller
   breakpoints aren't accidentally re-overridden by a later rule with a
   broader max-width range. */
.kx-hero-deco-band { height: 180px; }
@media (min-width: 769px) and (max-width: 1024px) {
  .kx-hero-deco-band { height: 140px; }
}
/* Hide the decorative band on all mobile widths. The SVG inside positions
   its bolt at x=120 and the location-name text at x=80%, both of which
   fall outside the visible area when xMidYMid slice crops to mobile width.
   The band renders as an empty dark strip, no info, just wasted scroll.
   Hidden ≤768px; desktop keeps the decoration where bolt + text actually
   appear. Same logic + class name on the location hub's inline band
   (.kx-loc-decorative-band, hidden in the @media (max-width: 600px) block
   above), but this one is the shared helper used on LSV / spoke / brand
   service / city pages too. */
@media (max-width: 768px) {
  .kx-hero-deco-band { display: none; }
}

/* Synthetic hero inner padding — tightens at tablet so the hero doesn't
   feel like dead space. */
@media (min-width: 769px) and (max-width: 1024px) {
  .kx-hero__inner--with-band { padding-bottom: 44px; }
  .kx-hero__inner { padding-top: 48px; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .kx-hero__inner--with-band { padding-bottom: 32px; }
  .kx-hero__inner { padding-top: 32px; }
}
@media (max-width: 480px) {
  .kx-hero__inner--with-band { padding-bottom: 24px; }
  .kx-hero__inner { padding-top: 24px; }
}

/* Hero bar — meta strip at top of every hero. The 3-flex layout was
   wrapping awkwardly (3 stacked rows) on phones. At <600 it collapses
   into a left-aligned column with tight gaps and smaller type. */
@media (max-width: 600px) {
  .kx-hero__bar {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 12px;
    font-size: 11px;
    letter-spacing: .12em;
  }
  /* Hide the right-side region span (e.g. "AUSTIN METRO" / "SAN DIEGO
     COUNTY") on mobile. The breadcrumb above it already names the
     franchise ("KEIL ELECTRIC AUSTIN"), so this strip just adds another
     near-identical line to the bar's stacked layout. The bar-code (e.g.
     "[ TX LIC #40645 ]") stays since it's the only place the license
     number renders in the hero. */
  .kx-hero__bar > span:not(.kx-hero__bar-code) {
    display: none;
  }
  /* Decorative dark band on the location hub between the hero card and
     the client logos. The SVG inside it positions a bolt at x=120 and
     the location-name text at x=80%, both of which fall outside the
     visible area when the SVG slices to mobile width — the band renders
     blank. Hide it entirely on mobile (it is purely decorative, no info
     loss, saves 180px of empty scroll). Stays visible on desktop where
     the bolt + text actually render. */
  .kx-loc-decorative-band {
    display: none;
  }
}

/* Service grid — was dropping to 1-col at 768. Keep 2-col through tablet
   sizes; only collapse to 1-col on phones. */
@media (min-width: 601px) and (max-width: 1024px) {
  .kx-service-grid { grid-template-columns: repeat(2, 1fr); }
  .kx-service-grid__cell:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  .kx-service-grid { grid-template-columns: 1fr; }
  .kx-service-grid__cell { border-right: none; }
}

/* Stat row on the homepage — at <=480 a 2x2 grid with "5/10/Life" was
   wrapping the big numerals oddly. Single column with tighter cell
   padding reads cleaner on phone. */
@media (max-width: 480px) {
  .kx-stat-row__inner { grid-template-columns: 1fr; border-left: none; }
  .kx-stat-row__cell {
    padding: 20px 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .kx-stat-row__cell:last-child { border-bottom: none; }
  .kx-stat-row__num { font-size: 28px; }
  .kx-stat-row__label { font-size: 10px; }
}

/* Locations grid panels — at tablet (768-1024) the panels collapse to
   single-column already (per existing rule). Tighten the panel padding
   at tablet so each panel doesn't take up an entire viewport height. */
@media (min-width: 481px) and (max-width: 1024px) {
  .kx-location-panel { padding: 32px 28px; }
}
@media (max-width: 480px) {
  .kx-location-panel { padding: 24px 20px; }
  .kx-location-panel__region { font-size: 28px; }
  .kx-location-panel__city { font-size: 16px; }
}

/* Process grid — at tablet 2x2 was already set; on phone collapses to
   single column. Tighten step padding/font on small viewports. */
@media (max-width: 600px) {
  .kx-process-grid { grid-template-columns: 1fr; }
  .kx-process-step:nth-child(n) { border-bottom: 1px solid var(--line); border-right: none; }
  .kx-process-step:last-child { border-bottom: none; }
  .kx-process-step { padding: 24px 0; }
}

/* Shop card on /contact/ — header was wrapping the location tag onto
   2 lines at tablet and the phone button was getting cropped. Allow
   header to stack vertically on small screens and shrink phone size. */
@media (min-width: 601px) and (max-width: 1024px) {
  .kx-shops-grid { gap: 24px; }
  .kx-shop-card { padding: 32px; }
  .kx-shop-card__name { font-size: clamp(26px, 3.6vw, 36px); }
}
@media (max-width: 600px) {
  .kx-shops-grid { gap: 20px; }
  .kx-shop-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .kx-shop-card { padding: 24px 20px; }
  .kx-shop-card__phone { font-size: 20px; padding: 12px 14px; gap: 10px; }
  .kx-shop-card__cta { padding: 14px 18px; font-size: 15px; }
}

/* Services-row at tablet — was already mobile-collapsed at 768. Tighten
   row height at tablet so the table doesn't feel sparse. */
@media (min-width: 481px) and (max-width: 1024px) {
  .kx-services-row { padding: 24px 0; gap: 20px; }
  .kx-services-row__name { font-size: 18px; }
}
@media (max-width: 480px) {
  .kx-services-row { padding: 16px 0; }
  .kx-services-row__name { font-size: 16px; gap: 10px; }
  .kx-services-row__icon svg { width: 22px; height: 22px; }
}

/* Section padding consolidation — original mobile pass tightens at
   <=768. Add a tablet step in the 769-1024 range only so smaller
   breakpoints aren't accidentally bumped back up. */
@media (min-width: 769px) and (max-width: 1024px) {
  .kx-section { padding: 72px 0; }
  .kx-section-lg { padding: 88px 0; }
  .kx-cta { padding: 80px 0; }
  .kx-container,
  .kx-container-narrow { padding: 0 24px; }
}

/* =====================================================================
 * "Pick your local team" picker (Concept A) — stat-block cards used
 * by keil_render_location_picker. Drop-in replacement for the flat
 * 2-cell kx-link-grid that used to sit in this slot. Lives on:
 *   - /services/ index (archive-keil_service.php)
 *   - /services/{service-slug}/ brand service hubs (single-keil_service.php)
 * ===================================================================== */
.kx-shop-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
/* Each cell wraps the card-anchor + the sibling phone-anchor so the grid
   sees ONE child per cell. Phone is broken out of the card anchor so it
   can be a real <a href="tel:..."> link without nesting anchors. */
.kx-shop-picker-cell {
  display: flex;
  flex-direction: column;
}
.kx-shop-picker-card {
  position: relative;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Red accent line that draws across the top on hover. */
.kx-shop-picker-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 4px;
  width: 0;
  background: var(--keil-red);
  transition: width .35s ease;
}
.kx-shop-picker-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -32px rgba(14,18,23,.20);
  border-color: var(--ink);
  color: var(--ink);
}
.kx-shop-picker-card:hover::before { width: 100%; }
.kx-shop-picker-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  gap: 12px;
}
.kx-shop-picker-card__code { color: var(--keil-red); font-weight: 600; }
.kx-shop-picker-card__coverage { color: var(--ink-3); }
.kx-shop-picker-card__name {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: .95;
  margin-bottom: 4px;
  color: var(--ink);
  font-family: var(--font-display);
}
.kx-shop-picker-card__region {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 28px;
}
.kx-shop-picker-card__owner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.kx-shop-picker-card__avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.kx-shop-picker-card__owner-meta { line-height: 1.4; }
.kx-shop-picker-card__owner-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.kx-shop-picker-card__owner-role { font-size: 13px; color: var(--ink-3); }
.kx-shop-picker-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.kx-shop-picker-card__stat {
  padding: 16px 14px;
  border-right: 1px solid var(--line);
}
.kx-shop-picker-card__stat:last-child { border-right: none; }
.kx-shop-picker-card__stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.kx-shop-picker-card__stat-value {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  color: var(--ink);
}
.kx-shop-picker-card__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: var(--ink);
  color: white;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 15px;
  margin-top: auto;
  transition: background .2s ease;
}
.kx-shop-picker-card:hover .kx-shop-picker-card__cta { background: var(--keil-red); }
.kx-shop-picker-card__cta svg { flex-shrink: 0; }
/* Phone block sits as a sibling of the card-anchor (not inside it) so it
   can be a real <a href="tel:..."> link without nesting anchors. Visual
   negative margin-top + matching width pulls it visually flush with the
   bottom of the card so the pair reads as one unit. */
.kx-shop-picker-card__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kx-shop-picker-card__phone:hover {
  background: white;
  border-color: var(--keil-red);
  color: var(--keil-red);
}
.kx-shop-picker-card__phone strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -.01em;
  font-weight: 700;
}
.kx-shop-picker-card__phone:hover strong { color: var(--keil-red); }

/* Tablet: keep 2-up but tighten interior padding so cards don't get
   cramped at the column-width drop. */
@media (min-width: 769px) and (max-width: 1024px) {
  .kx-shop-picker-grid { gap: 18px; }
  .kx-shop-picker-card { padding: 28px 28px 24px; }
  .kx-shop-picker-card__name { font-size: clamp(30px, 4vw, 44px); }
}

/* Phone + small tablet: stack to single column, shrink type, drop the
   stat strip's right border on the last visible cell after wrap. */
@media (max-width: 768px) {
  .kx-shop-picker-grid { grid-template-columns: 1fr; gap: 18px; }
  .kx-shop-picker-card { padding: 24px 22px; }
  .kx-shop-picker-card__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .kx-shop-picker-card__name { font-size: 32px; }
  .kx-shop-picker-card__stats { grid-template-columns: 1fr 1fr; }
  .kx-shop-picker-card__stat:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--line);
  }
  .kx-shop-picker-card__stat:nth-child(2) { border-right: none; }
}
@media (max-width: 480px) {
  .kx-shop-picker-card__cta { padding: 14px 16px; font-size: 14px; }
  .kx-shop-picker-card__avatar { width: 44px; height: 44px; font-size: 16px; }
}

/* =====================================================================
 * Hero-bar breadcrumbs — sit inside .kx-hero__bar between the bar code
 * and the right-side meta. Match the surrounding mono type so they read
 * as one continuous strip; links pick up the red on hover. The current
 * page uses the same color as the surrounding bar text and is announced
 * to screen readers via aria-current.
 * ===================================================================== */
.kx-hero__crumbs {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.kx-hero__crumbs-link {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s ease;
}
.kx-hero__crumbs-link:hover,
.kx-hero__crumbs-link:focus { color: var(--keil-red); }
.kx-hero__crumbs-current { color: var(--ink-2); }
.kx-hero__crumbs-sep {
  color: var(--ink-4);
  padding: 0 8px;
  font-weight: 400;
}
@media (max-width: 600px) {
  .kx-hero__crumbs-sep { padding: 0 6px; }
}

/* =====================================================================
 * Sibling-spoke nav strip (item #7) — sits at the top of every spoke,
 * directly under the AEO answer block. Lets a visitor jump from
 * "panels in Burnet" to "emergency in Burnet" in one click without
 * scrolling to the bottom card grid.
 * ===================================================================== */
.kx-spoke-strip {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.kx-spoke-strip__inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}
.kx-spoke-strip__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  flex-shrink: 0;
}
.kx-spoke-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.kx-spoke-strip__item {
  display: inline-flex;
  align-items: center;
}
.kx-spoke-strip__link,
.kx-spoke-strip__current {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink-2);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.kx-spoke-strip__link:hover,
.kx-spoke-strip__link:focus {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.kx-spoke-strip__current {
  background: var(--keil-red);
  border-color: var(--keil-red);
  color: white;
  font-weight: 600;
}

@media (max-width: 768px) {
  .kx-spoke-strip { padding: 14px 0; }
  .kx-spoke-strip__inner { gap: 10px; }
  .kx-spoke-strip__link,
  .kx-spoke-strip__current { font-size: 12px; padding: 6px 10px; }
}

/* =====================================================================
 * Compact reviews widget (item #5) — surfaces 2 Google reviews on each
 * spoke without competing visually with the proper reviews module on
 * the location hub. Sits between proof gallery and permits section.
 * ===================================================================== */
.kx-reviews-compact { max-width: 1100px; margin: 0; }
.kx-reviews-compact__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.kx-reviews-compact__heading {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 0;
  letter-spacing: -0.02em;
}
.kx-reviews-compact__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
}
.kx-reviews-compact__stars,
.kx-reviews-compact__cardstars {
  display: inline-flex;
  gap: 1px;
  color: #F5B400;
  letter-spacing: 1px;
}
.kx-reviews-compact__star.is-empty { color: var(--line); }
.kx-reviews-compact__rating {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-left: 4px;
}
.kx-reviews-compact__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.kx-reviews-compact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.kx-reviews-compact__card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
}
.kx-reviews-compact__cardstars { margin-bottom: 12px; font-size: 14px; }
.kx-reviews-compact__quote {
  margin: 0 0 14px;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}
.kx-reviews-compact__byline {
  font-size: 13px;
  color: var(--ink-3);
}
.kx-reviews-compact__author { font-weight: 600; color: var(--ink-2); }
.kx-reviews-compact__when { color: var(--ink-3); }
.kx-reviews-compact__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--keil-red);
  font-weight: 600;
  text-decoration: none;
}
.kx-reviews-compact__more:hover { gap: 12px; }

@media (max-width: 768px) {
  .kx-reviews-compact__grid { grid-template-columns: 1fr; gap: 14px; }
  .kx-reviews-compact__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .kx-reviews-compact__card { padding: 20px 22px; }
}




/* ============================================================================
   Mobile overflow fix (launch QA)
   ----------------------------------------------------------------------------
   Auditor flagged right-edge clipping on real iPhone-size screenshots:
   promo bar, location switcher, long H1s, phone buttons, sticky CTA.
   This block addresses each at the layout level rather than masking with
   overflow-x:hidden on body (which hides the symptom but breaks horizontal
   scroll on legitimately-wide tables/grids).
   ============================================================================ */

/* Universal: long words (city names, "electricians", phone-number formats)
   should break onto the next line rather than push their parent wider. */
@media (max-width: 480px) {
  h1, h2, h3, .kx-hero__title, .kx-hero__synthetic-title {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Hero H1: clamp floor of 40px is too tall for words like "electricians"
     on 360-390px viewports. Drop the floor to 30px on small screens; the
     6vw fluid still scales up cleanly on tablets. */
  .kx-hero__title,
  .kx-hero__synthetic-title,
  h1[style*="clamp(40px"] {
    font-size: clamp(30px, 7vw, 56px) !important;
    line-height: 1.08 !important;
  }

  /* Promo bar mobile rules now live in the main .kx-promo block above
     (single-line layout with mobile-only offer copy). Nothing extra
     needed at this breakpoint. */

  /* Compliance strip / location switcher: same min-width fix so the long
     "VIEWING · AUSTIN · SWITCH" + "24/7 EMERGENCY SERVICE" pair wraps
     instead of pushing past the viewport when both share one row. */
  .kx-compliance-strip__inner > span { min-width: 0; }

  /* Sticky bottom CTA bar: two-column 50/50 grid was tight on long button
     labels. Tighten padding/font-size and let labels wrap to two lines if
     they have to (Get a quote / Call Austin both fit comfortably after). */
  .kx-mobile-cta-bar__btn {
    padding: 12px 8px;
    font-size: 13px;
    line-height: 1.15;
    min-width: 0;          /* let flex children shrink below intrinsic */
  }
  .kx-mobile-cta-bar__btn span,
  .kx-mobile-cta-bar__btn { white-space: normal; }

  /* Phone buttons (the formatted "(888) 442-5345" pattern): in a constrained
     button or card cell, the parenthesized format can push wider than its
     container. Allow line-breaks on hyphens and after the area code. */
  a[href^="tel:"],
  .kx-shop-card__phone,
  .kx-shop-picker-card__phone {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Belt + suspenders: any container that uses inline grid styles in templates
   should not allow its children to push it wider than the viewport. The
   .kx-container max-width handles desktop; this catches the mobile case
   where a deeply-nested grid still pushes out. */
@media (max-width: 480px) {
  .kx-container,
  .kx-container-narrow {
    max-width: 100vw;
    overflow-x: clip;       /* clip > hidden: doesn't establish a scroll context */
  }
}

/* ============================================================================
   Mobile overflow — pass 2 (aggressive)
   ----------------------------------------------------------------------------
   Pass 1 set min-width:0 on specific elements + reduced H1 floor. Auditor
   verified at 390px and content was still clipping in promo strip, location
   switcher, hero copy, city H1s, contact page copy, sticky CTA. This pass
   is broader: applies min-width:0 to ALL flex/grid descendants on mobile
   (the universal cause of inline content pushing past parent), forces
   wrapping at every level, and overrides inline clamp() font-size styles
   that templates set in style="" attributes.
   ============================================================================ */
@media (max-width: 480px) {
  /* Universal min-width:0 — flex/grid children default to min-content width
     which can push wider than the parent when content is non-breaking
     (long words, formatted phone numbers, monospace strings). Resetting to
     0 lets the parent's max-width win. */
  body * { min-width: 0; }

  /* Heading wrapping — overflow-wrap allows mid-word breaks for long compound
     words (lifetime-warrantied, master-licensed); hyphens auto adds
     hyphenation hints where the browser supports it. */
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  /* Override inline clamp() font-sizes set in style="" attributes on hero
     H1s. The previous attribute selector didn't match all variants because
     templates set the inline style differently (some have margin-bottom
     before font-size, some after). Catch them all by targeting any H1 with
     a clamp() in its inline style. */
  h1[style*="clamp"] {
    font-size: clamp(28px, 7vw, 52px) !important;
    line-height: 1.08 !important;
  }
  h2[style*="clamp"] {
    font-size: clamp(24px, 6vw, 40px) !important;
    line-height: 1.1 !important;
  }

  /* Inline 2-column grids that templates set in style="grid-template-columns:..."
     must collapse to 1-col on mobile. The !important is needed because the
     inline style otherwise wins over external CSS. */
  div[style*="grid-template-columns: 1fr 1.4fr"],
  div[style*="grid-template-columns: 1.4fr 1fr"],
  div[style*="grid-template-columns: 1.2fr 1fr"],
  div[style*="grid-template-columns: 1fr 1.2fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Padding tighten: containers with desktop padding values were eating
     50-60px of horizontal space on phones. */
  .kx-container, .kx-container-narrow {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Promo strip mobile rules: handled in the main .kx-promo block.
     The mobile layout is single-row (label hidden, mobile-only short
     offer + CTA) — no column-stack at this breakpoint. */

  /* Compliance strip stacks too. The two spans (VIEWING/SWITCH + EMERGENCY)
     were overflowing on smallest phones. */
  .kx-compliance-strip__inner {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
  }

  /* Sticky CTA bar: tighten to fit on 320px+ phones. Two short labels in a
     50/50 grid; longest label is "Get a quote" which fits at 12px. */
  .kx-mobile-cta-bar__btn {
    padding: 10px 6px !important;
    font-size: 12px !important;
    gap: 6px !important;
    line-height: 1.1 !important;
  }
  .kx-mobile-cta-bar__btn svg { width: 14px; height: 14px; }

  /* Location info card on the location hub had a long address line that
     could overflow. */
  .kx-card { word-break: break-word; }
  .kx-card a { word-break: break-word; }

  /* Buttons globally: shrink padding so long labels don't push button
     wider than its container on phones. */
  .kx-btn {
    padding: 12px 14px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
  .kx-btn-lg {
    padding: 14px 18px;
    font-size: 14px;
  }
}

/* Tighter overrides at the smallest practical width (320-360px). Some
   320px phones (iPhone SE) need extra-aggressive padding/font reductions. */
@media (max-width: 360px) {
  .kx-hero__title,
  .kx-hero__synthetic-title,
  h1[style*="clamp"] {
    font-size: 26px !important;
  }
  .kx-container, .kx-container-narrow {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .kx-mobile-cta-bar__btn {
    padding: 10px 4px !important;
    font-size: 11px !important;
  }
}

/* ============================================================================
   Mobile overflow — pass 3 (element-targeted, hard caps)
   ----------------------------------------------------------------------------
   Pass 2 was broad. Pass 3 targets the exact 6 elements the auditor named in
   their fresh 390px screenshots, with hard pixel sizes (no clamp/vw fluid)
   so the rendering is deterministic at every viewport <=480.
   ============================================================================ */
@media (max-width: 480px) {
  /* Universal page-level guard. No element should ever be wider than the
     viewport. max-width:100vw + box-sizing:border-box forces every block
     element to honor the viewport regardless of inline styles. */
  html, body { max-width: 100vw; overflow-x: clip; }
  body * { max-width: 100%; box-sizing: border-box; }

  /* 1. Top promo bar — single-line layout uses the rules in the main
     .kx-promo block. Only keep hard pixel sizes here for safety on the
     smallest viewports. The label is already display:none on mobile so
     no need to size it. */
  .kx-promo {
    padding: 8px 0 !important;
    font-size: 12px !important;
  }
  .kx-promo__offer--mobile {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .kx-promo__cta {
    font-size: 12px !important;
  }

  /* 2. Compliance / license / location switcher strip */
  .kx-compliance-strip {
    font-size: 10px !important;
    padding: 6px 0 !important;
    letter-spacing: 0.04em !important;   /* reduce letter-spacing — main cause of width inflation */
  }
  .kx-compliance-strip__inner {
    flex-direction: column !important;
    gap: 2px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .kx-compliance-strip__inner > span {
    width: 100% !important;
    word-break: break-word !important;
  }

  /* 3. Hero LEDE — fluid font + max-width 100% so long content wraps */
  .kx-hero__lede,
  .kx-hero__synthetic-lede {
    font-size: 16px !important;
    max-width: 100% !important;
    line-height: 1.45 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* 4. Breadcrumbs / eyebrows / hero bar code — letter-spacing was the
     main width inflator on mono-font monospace strings like
     "[ TX LIC #40645 ]". Tighten letter-spacing on mobile. */
  .kx-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
  .kx-hero__bar,
  .kx-hero__bar-code,
  .kx-hero__bar > * {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
  }
  .kx-hero__bar {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  .kx-hero__bar > span,
  .kx-hero__bar > * {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  /* 5. H1s — hard pixel cap, no clamp on mobile. Auditor's 390px screenshots
     showed clipping even with the pass-2 reduced floor; switching to a
     fixed pixel value eliminates all clamp-related uncertainty. */
  h1,
  .kx-hero__title,
  .kx-hero__synthetic-title,
  h1[style*="font-size"],
  h1[class*="kx-hero__title"] {
    font-size: 28px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    max-width: 100% !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* 6. Sticky CTA bar — both labels with fixed shorter text via CSS pseudo
     would be cleaner, but for now: shrink everything, force normal wrap,
     allow line-break inside button. */
  .kx-mobile-cta-bar__inner {
    grid-template-columns: 1fr 1fr !important;
  }
  .kx-mobile-cta-bar__btn {
    padding: 10px 4px !important;
    font-size: 11px !important;
    gap: 4px !important;
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .kx-mobile-cta-bar__btn svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
  }
}

/* Smallest phones (320-360 — iPhone SE, older Androids): tighten further */
@media (max-width: 360px) {
  h1,
  .kx-hero__title,
  .kx-hero__synthetic-title { font-size: 24px !important; }
  .kx-mobile-cta-bar__btn { font-size: 10px !important; padding: 9px 3px !important; }
  .kx-promo__offer--mobile { font-size: 11px !important; }
  .kx-compliance-strip { font-size: 9px !important; }
}