/*
Theme Name:   Zenon 2026 Redesign (autorepair_2 child)
Theme URI:    https://zenonplumbing.com/
Description:  Child theme of autorepair_2. Overrides the front-page, about-us, contact-us, our-services, blog, and faq templates so they render the_content() — letting the 2026 Zenon redesign (saved in each page's post_content) appear instead of the parent theme's hard-coded PHP layouts. Built by Digital Beverly, May 2026.
Author:       Digital Beverly
Author URI:   https://digitalbeverly.com/
Template:     autorepair_2
Version:      1.0.21
Text Domain:  autorepair_2-child
*/

/* The redesign brings its own CSS (scoped under .zenon-2026), so this stylesheet
   only adds light spacing to neutralize the parent theme wrappers if needed. */

.zenon-redesign-wrap {
  margin: 0;
  padding: 0;
}
.zenon-redesign-wrap > .zenon-2026 {
  display: block;
}

/* Hide any parent-theme leftover containers we don't want around our content. */
.zenon-redesign-wrap .container > h1.entry-title,
.zenon-redesign-wrap .container > .page-header,
.zenon-redesign-wrap .breadcrumb {
  display: none;
}

/* Parent autorepair_2 theme injects `<h1 class="start_rep_title">PageTitle</h1>`
   into `.page_main .container` BEFORE our <main> element. Our redesign supplies
   its own H1 inside the body — drop the parent's so we don't ship two H1s per
   page (SEO problem and visual duplication). */
body .page_main h1.start_rep_title,
body .start_rep_title {
  display: none !important;
}
/* While we're here, also hide the parent theme's breadcrumb chunk that
   shows above empty pages — we render our own breadcrumb when needed. */
body .start_rep_desc > .breadcrumb,
body .start_rep > .breadcrumb {
  display: none !important;
}

/* Easy Table of Contents plugin — kill the widget AND its in-heading anchors.
   The widget injected as #ez-toc-container at top of post_content looks like
   a Wikipedia table-of-contents and ruins the design. We don't need it. */
#ez-toc-container,
.ez-toc-v2_0_71_1,
div.ez-toc-counter,
div.ez-toc-widget-container,
.ez-toc-container-direction {
  display: none !important;
}
/* The inline <span class="ez-toc-section"> inside our headings has no visual
   bg of its own but make sure it doesn't add stray height. */
span.ez-toc-section,
span.ez-toc-section-end {
  display: contents !important;
}

/* ────────────────────────────────────────────────────────────────
   Atlas /locations/ pages — visual unification with .zenon-2026
   ────────────────────────────────────────────────────────────────
   Atlas's 25 city/service pages render their content under
   `.zenon-phase3-page` with their own inline <style> block (navy/gold,
   different fonts). Override the palette + typography variables so
   they pick up the same visual language as the rest of the redesign.
   `!important` is used because the page's inline <style> loads AFTER
   this stylesheet and would otherwise win on identical specificity.

   We keep Atlas's information-dense LAYOUT intact (their neighborhood
   blocks, partnering-insurers grid, etc.) — only the visual tokens
   change, preserving every byte of city-specific SEO copy. */

.zenon-phase3-page {
  --z-blue:    #0A2540 !important;   /* our navy */
  --z-blue2:   #143659 !important;   /* deeper navy */
  --z-gold:    #C8102E !important;   /* OUR accent red — replaces gold */
  --z-paper:   #FAF8F4 !important;   /* our cream */
  --z-line:    #DCE3EC !important;   /* same as our .zenon-2026 --line */
  --z-ink:     #0A2540 !important;   /* navy text */
  --z-muted:   #6B7A8F !important;   /* our --muted */
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: -0.005em !important;
}
.zenon-phase3-page h1,
.zenon-phase3-page h2,
.zenon-phase3-page h3,
.zenon-phase3-page h4 {
  font-family: "Barlow", system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}
.zenon-phase3-page h1 { font-size: clamp(32px, 4vw, 48px) !important; }
.zenon-phase3-page h2 { font-size: clamp(24px, 2.8vw, 32px) !important; }
.zenon-phase3-page h3 { font-size: clamp(19px, 2vw, 24px) !important; }
.zenon-phase3-page a {
  color: #C8102E !important;
  text-decoration: none !important;
}
.zenon-phase3-page a:hover { color: #A00C24 !important; }

/* Atlas CTA buttons — `.zenon-btn-primary` is the gold gradient button on
   every location hero. Force a solid red (matching our .btn--urgent). */
.zenon-phase3-page .zenon-btn-primary,
.zenon-phase3-page a.zenon-btn-primary,
.zenon-phase3-page .zenon-cta,
.zenon-phase3-page .zenon-button,
.zenon-phase3-page a.zenon-call,
.zenon-phase3-page .zenon-call-btn {
  background: #C8102E !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #C8102E !important;
  border-radius: 10px !important;
  padding: 14px 22px !important;
  font-family: "Barlow", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-shadow: none !important;
  transition: background .15s ease, border-color .15s ease !important;
}
.zenon-phase3-page .zenon-btn-primary:hover,
.zenon-phase3-page a.zenon-btn-primary:hover {
  background: #A00C24 !important;
  border-color: #A00C24 !important;
}

/* Atlas outline / secondary buttons — `.zenon-btn-secondary` is the second
   CTA next to the primary call button. By default styled navy-on-navy
   (invisible against the navy hero card). Force white outline on dark surfaces. */
.zenon-phase3-page .zenon-btn-outline,
.zenon-phase3-page .zenon-btn-secondary,
.zenon-phase3-page a.zenon-btn-secondary,
.zenon-phase3-page a.zenon-btn-outline {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 12.5px 22px !important;
  font-family: "Barlow", system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
.zenon-phase3-page .zenon-btn-outline:hover,
.zenon-phase3-page .zenon-btn-secondary:hover,
.zenon-phase3-page a.zenon-btn-secondary:hover,
.zenon-phase3-page a.zenon-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* Atlas card / panel surfaces → match our card surface */
.zenon-phase3-page .zenon-card,
.zenon-phase3-page .zenon-panel,
.zenon-phase3-page .zenon-block {
  background: #FFFFFF !important;
  border: 1px solid #DCE3EC !important;
  border-radius: 14px !important;
  padding: 24px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.zenon-phase3-page .zenon-card:hover,
.zenon-phase3-page .zenon-panel:hover {
  border-color: #B8C5D6 !important;
  box-shadow: 0 4px 14px rgba(10, 37, 64, 0.06) !important;
}

/* If Atlas hard-coded any backgrounds with the OLD navy or gold, override */
.zenon-phase3-page [style*="#10354a"],
.zenon-phase3-page [style*="#0a2637"] {
  background-color: #0A2540 !important;
}
.zenon-phase3-page [style*="#f4a62a"],
.zenon-phase3-page [style*="#ffc05c"] {
  background-color: #C8102E !important;
}
/* Atlas's gold-gradient header strips */
.zenon-phase3-page [class*="header"] {
  background-image: none !important;
}

/* ────────────────────────────────────────────────────────────────
   Atlas page polish — make /locations/ pages feel native to the
   `.zenon-2026` design system. Targets Atlas's own class names so
   the visual quality matches the rest of the site (cards, hero,
   typography, spacing, alerts).
   ──────────────────────────────────────────────────────────────── */

.zenon-phase3-page .zenon-hero {
  background: linear-gradient(135deg, #0A2540 0%, #143659 100%) !important;
  border-radius: 16px !important;
  padding: clamp(28px, 4vw, 56px) !important;
  margin-bottom: clamp(28px, 4vw, 48px) !important;
  display: grid !important;
  grid-template-columns: 1.1fr 1fr !important;
  gap: clamp(24px, 3vw, 48px) !important;
  align-items: center !important;
  box-shadow: 0 8px 32px rgba(10, 37, 64, 0.08) !important;
}
.zenon-phase3-page .zenon-hero-text { color: #F8F3E7 !important; }
.zenon-phase3-page .zenon-hero h1 {
  color: #FFFFFF !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.05 !important;
  margin-bottom: 16px !important;
}
.zenon-phase3-page .zenon-hero .zenon-lede,
.zenon-phase3-page .zenon-hero p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.55 !important;
}
.zenon-phase3-page .zenon-hero-media {
  border-radius: 12px !important;
  overflow: hidden !important;
  aspect-ratio: 4 / 3 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}
.zenon-phase3-page .zenon-hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.zenon-phase3-page .zenon-cta-row {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
}
@media (max-width: 900px) {
  .zenon-phase3-page .zenon-hero {
    grid-template-columns: 1fr !important;
    padding: 28px !important;
  }
}

/* Service cards — adopt our card aesthetic with hover lift */
.zenon-phase3-page .zenon-card {
  background: #FFFFFF !important;
  border: 1px solid #DCE3EC !important;
  border-radius: 14px !important;
  padding: 24px !important;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.03) !important;
  transition: border-color .15s ease, box-shadow .2s ease, transform .12s ease !important;
}
.zenon-phase3-page .zenon-card h3,
.zenon-phase3-page .zenon-card h4 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  letter-spacing: -0.015em !important;
  color: #0A2540 !important;
  font-weight: 700 !important;
}
.zenon-phase3-page .zenon-card p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #1F3A5F !important;
  margin: 0 !important;
}
.zenon-phase3-page .zenon-card:hover {
  border-color: #B8C5D6 !important;
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.08) !important;
  transform: translateY(-2px);
}

/* Grid wrapper */
.zenon-phase3-page .zenon-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
@media (max-width: 900px) {
  .zenon-phase3-page .zenon-grid { grid-template-columns: 1fr !important; }
}

/* Section spacing */
.zenon-phase3-page .zenon-section {
  margin-bottom: clamp(40px, 5vw, 72px) !important;
}
.zenon-phase3-page .zenon-section > h2 {
  font-size: clamp(22px, 2.6vw, 32px) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 14px !important;
  color: #0A2540 !important;
}

/* Eyebrow / kicker — make it match our .eyebrow style */
.zenon-phase3-page .zenon-kicker {
  font-family: "Geist Mono", monospace !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #C8102E !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.zenon-phase3-page .zenon-kicker::before {
  content: "" !important;
  width: 22px !important;
  height: 1px !important;
  background: #C8102E !important;
}

/* Alerts — change Atlas's yellow callout to our cream card with red accent stripe */
.zenon-phase3-page .zenon-alert {
  background: #FAF8F4 !important;
  border: 1px solid #DCE3EC !important;
  border-left: 4px solid #C8102E !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
  color: #0A2540 !important;
}
.zenon-phase3-page .zenon-alert h2,
.zenon-phase3-page .zenon-alert h3,
.zenon-phase3-page .zenon-alert h4 {
  font-size: 18px !important;
  margin: 0 0 8px !important;
  color: #0A2540 !important;
}
.zenon-phase3-page .zenon-alert p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #1F3A5F !important;
  margin: 4px 0 0 !important;
}

/* Breadcrumbs — minimal mono style matching our pattern */
.zenon-phase3-page .zenon-breadcrumbs {
  font-family: "Geist Mono", monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  color: #6B7A8F !important;
  margin-bottom: 18px !important;
}
.zenon-phase3-page .zenon-breadcrumbs a { color: #6B7A8F !important; }
.zenon-phase3-page .zenon-breadcrumbs a:hover { color: #C8102E !important; }

/* Lede paragraph (long intro under hero) — readable lead */
.zenon-phase3-page > .zenon-lede,
.zenon-phase3-page .zenon-section > .zenon-lede {
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.6 !important;
  color: #1F3A5F !important;
  max-width: 68ch !important;
  margin-bottom: 24px !important;
}

/* Generic body type cleanup inside Atlas content */
.zenon-phase3-page p {
  line-height: 1.6 !important;
  color: #1F3A5F !important;
}
.zenon-phase3-page strong { color: #0A2540 !important; font-weight: 600 !important; }

/* Outer padding to give the page edges some breathing room */
.zenon-phase3-page {
  padding: clamp(16px, 2vw, 24px) clamp(16px, 3vw, 48px) clamp(40px, 5vw, 72px) !important;
}

/* ════════════════════════════════════════════════════════════════
   ATLAS PARITY V2 — May 12, 2026
   ════════════════════════════════════════════════════════════════
   The Atlas inline <style> block declares `.zenon-section p` and
   `.zenon-card span` WITHOUT a font-size. They then inherit from
   the parent theme's body default (24px) — which is why every Atlas
   page renders with giant body copy ("ужасно крупно").
   Fix: explicit font-sizes that match `.zenon-2026` so Atlas pages
   visually match the rest of the redesign. Cascade safety: each rule
   is more specific than the inline style (`.zenon-phase3-page X`
   beats `X` on specificity), and uses `!important` to win even when
   the page-level inline style also uses `!important`.
   ════════════════════════════════════════════════════════════════ */

/* THE KILL SHOT — body text 24px → main-site 14.5–16px */
.zenon-phase3-page,
.zenon-phase3-page p,
.zenon-phase3-page li,
.zenon-phase3-page span,
.zenon-phase3-page a,
.zenon-phase3-page label {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}

/* ATLAS LAYOUT PRIMITIVES — promoted from the page's inline <style> block
   so we can safely strip the inline <style> from post_content. */
.zenon-phase3-page {
  max-width: 1180px !important;
  margin: 0 auto !important;
  color: #0A2540 !important;
}
.zenon-phase3-page * { box-sizing: border-box; }
.zenon-phase3-page a { text-decoration: none !important; }

/* Hero — predictable flexbox layout.
   Both city hubs and city-service singles now wrap text in
   `.zenon-hero-text` (singles wrapped post-deploy via REST), so hero
   always has exactly 2 flex children: text-block + media-block. */
.zenon-phase3-page .zenon-hero {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 32px !important;
  background: linear-gradient(135deg, #143659, #0A2540) !important;
  color: #fff !important;
  padding: clamp(28px, 4vw, 48px) !important;
  border-radius: 16px !important;
  margin-bottom: clamp(28px, 4vw, 40px) !important;
  box-shadow: 0 8px 32px rgba(10, 37, 64, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}
.zenon-phase3-page .zenon-hero-text {
  flex: 1 1 420px !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.zenon-phase3-page .zenon-hero-media {
  flex: 0 1 380px !important;
  min-width: 240px !important;
  position: relative !important;
  z-index: 1 !important;
}
.zenon-phase3-page .zenon-hero-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
.zenon-phase3-page .zenon-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

/* Grids — 3-col by default, .two = 2-col, .zenon-proof = 3-col compact */
.zenon-phase3-page .zenon-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
.zenon-phase3-page .zenon-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.zenon-phase3-page .zenon-proof {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 20px !important;
}

@media (max-width: 900px) {
  .zenon-phase3-page .zenon-hero {
    padding: 24px !important;
    gap: 24px !important;
  }
  .zenon-phase3-page .zenon-hero-text,
  .zenon-phase3-page .zenon-hero-media {
    flex: 1 1 100% !important;
  }
  .zenon-phase3-page .zenon-grid,
  .zenon-phase3-page .zenon-grid.two,
  .zenon-phase3-page .zenon-proof {
    grid-template-columns: 1fr !important;
  }
}
.zenon-phase3-page .zenon-hero h1 {
  font-size: clamp(28px, 3.6vw, 46px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px !important;
  color: #FFFFFF !important;
}
.zenon-phase3-page .zenon-hero .zenon-lede,
.zenon-phase3-page .zenon-hero p {
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 60ch !important;
  margin: 0 !important;
}

/* Kicker pill → clean mono eyebrow with red prefix bar
   (Atlas inline sets padding/border/border-radius — reset all of them) */
.zenon-phase3-page .zenon-kicker {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #C8102E !important;
  font-family: "Geist Mono", ui-monospace, monospace !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  line-height: 1 !important;
}
.zenon-phase3-page .zenon-kicker::before {
  content: "" !important;
  width: 22px !important;
  height: 1px !important;
  background: #C8102E !important;
  flex-shrink: 0 !important;
}

/* Section wrapper — Atlas treats sections as cards (white box).
   Keep that but tighten the radius + space them properly. */
.zenon-phase3-page .zenon-section {
  margin-top: clamp(20px, 2.5vw, 28px) !important;
  padding: clamp(24px, 3vw, 36px) !important;
  border-radius: 14px !important;
  border: 1px solid #DCE3EC !important;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.03) !important;
}
.zenon-phase3-page .zenon-section > h2 {
  font-size: clamp(22px, 2.4vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px !important;
  color: #0A2540 !important;
  font-family: "Barlow", system-ui, sans-serif !important;
  font-weight: 700 !important;
}
.zenon-phase3-page .zenon-section > h3 {
  font-size: 18px !important;
  margin: 0 0 8px !important;
  color: #0A2540 !important;
}
/* Section intro paragraph — needs margin-bottom so it doesn't
   crash into the grid of cards. This was the "no breathing room"
   bug the user pointed out. */
.zenon-phase3-page .zenon-section > p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #4A5A73 !important;
  max-width: 68ch !important;
  margin: 0 0 24px !important;
}
.zenon-phase3-page .zenon-section > p:last-child {
  margin-bottom: 0 !important;
}

/* Grid + cards inside sections — equal heights, matched gap */
.zenon-phase3-page .zenon-grid {
  gap: 16px !important;
  align-items: stretch !important;
}
.zenon-phase3-page .zenon-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 22px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 1px solid #DCE3EC !important;
  box-shadow: 0 1px 2px rgba(10, 37, 64, 0.03) !important;
  transition: border-color .15s ease, box-shadow .2s ease, transform .12s ease !important;
}
.zenon-phase3-page .zenon-card:hover {
  border-color: #B8C5D6 !important;
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.08) !important;
  transform: translateY(-2px) !important;
}
.zenon-phase3-page .zenon-card strong {
  display: block !important;  /* <strong> defaults to inline; without block the text after runs into the title */
  font-size: 16.5px !important;
  line-height: 1.25 !important;
  font-family: "Barlow", system-ui, sans-serif !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
  color: #0A2540 !important;
  margin-bottom: 8px !important;
}
.zenon-phase3-page .zenon-card span {
  display: block !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #4A5A73 !important;
}

/* "Proof" sub-cards (Free estimate / Local trades approach / Clear next steps) —
   Atlas styles them as gold-bordered cream boxes. Bring them in line. */
.zenon-phase3-page .zenon-proof {
  gap: 14px !important;
  margin-top: 20px !important;
}
.zenon-phase3-page .zenon-proof > div {
  background: #FAF8F4 !important;
  border: 1px solid #DCE3EC !important;
  border-left: 3px solid #C8102E !important;
  border-radius: 10px !important;
  padding: 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #4A5A73 !important;
}
.zenon-phase3-page .zenon-proof strong {
  display: block !important;  /* same fix: <strong> defaults inline, breaks line after title */
  font-size: 14.5px !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  color: #0A2540 !important;
}

/* FAQ — keep accordion behavior, tighten typography */
.zenon-phase3-page .zenon-faq details {
  border: 1px solid #DCE3EC !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  background: #FFFFFF !important;
  margin-top: 8px !important;
}
.zenon-phase3-page .zenon-faq summary {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0A2540 !important;
  line-height: 1.4 !important;
}
.zenon-phase3-page .zenon-faq p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #4A5A73 !important;
  margin: 10px 0 0 !important;
}

/* Alert callout (Availability box) */
.zenon-phase3-page .zenon-alert {
  background: #FAF8F4 !important;
  border: 1px solid #DCE3EC !important;
  border-left: 4px solid #C8102E !important;
  border-radius: 10px !important;
  padding: 18px 22px !important;
  margin: 16px 0 !important;
}
.zenon-phase3-page .zenon-alert h2 {
  font-size: 17px !important;
  margin: 0 0 6px !important;
  color: #0A2540 !important;
  letter-spacing: -0.01em !important;
}
.zenon-phase3-page .zenon-alert p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #4A5A73 !important;
  margin: 4px 0 0 !important;
}

/* Breadcrumbs — small mono, muted */
.zenon-phase3-page .zenon-breadcrumbs {
  font-family: "Geist Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: #6B7A8F !important;
  margin: 0 0 18px !important;
}
.zenon-phase3-page .zenon-breadcrumbs a {
  color: #6B7A8F !important;
  font-weight: 400 !important;
}
.zenon-phase3-page .zenon-breadcrumbs a:hover { color: #C8102E !important; }

/* Hero buttons — solid red primary, white outline secondary */
.zenon-phase3-page .zenon-btn {
  min-height: 48px !important;
  padding: 12px 22px !important;
  border-radius: 10px !important;
  font-family: "Barlow", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
}
.zenon-phase3-page .zenon-btn-primary {
  background: #C8102E !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #C8102E !important;
}
.zenon-phase3-page .zenon-btn-primary:hover {
  background: #A00C24 !important;
  border-color: #A00C24 !important;
}
.zenon-phase3-page .zenon-btn-secondary {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.zenon-phase3-page .zenon-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: #FFFFFF !important;
}

/* Hero radial gold burst → red, much softer */
.zenon-phase3-page .zenon-hero::after {
  background: radial-gradient(circle, rgba(200, 16, 46, 0.18), rgba(200, 16, 46, 0) 68%) !important;
}

/* Mobile tightening */
@media (max-width: 700px) {
  .zenon-phase3-page .zenon-section {
    padding: 22px !important;
    border-radius: 12px !important;
  }
  .zenon-phase3-page .zenon-hero {
    padding: 24px !important;
    border-radius: 14px !important;
  }
  .zenon-phase3-page .zenon-hero h1 { font-size: 28px !important; }
  .zenon-phase3-page .zenon-section > h2 { font-size: 22px !important; }
}

/* ════════════════════════════════════════════════════════════════
   /locations/ hub cards — main-site (.zenon-2026) card polish
   The "View services →" + phone row is visually weak: feels like
   raw text rather than a button affordance. Promote View services
   to look like a proper "card action", de-emphasize the phone.
   ════════════════════════════════════════════════════════════════ */
.zenon-2026 a.city-card:hover,
.zenon-2026 a.card.city-card:hover {
  border-color: #B8C5D6 !important;
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.08) !important;
  transform: translateY(-2px);
}
/* SCOPED to .city-card only — earlier version used `.zenon-2026 a.card` which
   ALSO matched the home/services service cards, turning their `.zenon-learn-more`
   span red-on-red (invisible). Always scope card-bottom-row CTA rules to the
   specific card class. */
.zenon-2026 a.city-card .row[style*="space-between"] > span:first-child {
  /* "View services →" — make it look like a CTA, not raw text */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #C8102E !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.01em !important;
  transition: gap .15s ease !important;
}
.zenon-2026 a.city-card:hover .row[style*="space-between"] > span:first-child {
  gap: 12px !important;  /* arrow slides right on hover */
}
.zenon-2026 a.city-card .row[style*="space-between"] > span.mono {
  /* phone number — muted, secondary */
  color: #6B7A8F !important;
  font-size: 12.5px !important;
}