/* ==========================================================================
   RidgeRoofer — Main stylesheet
   Budget: < 30 KB. No framework. Mobile-first.
   ========================================================================== */

/* Design tokens — two-colour system.
   Colour lives in tokens.css. This :root block aliases every LEGACY token
   name still referenced in this stylesheet (--graphite, --sky, --signal,
   --amber-*, --clay, --leaf, --sun, etc.) to the two brand colours in
   tokens.css. That way we do NOT rewrite every rule in this file — the
   variables resolve to the new palette on the next reflow.
   Non-colour tokens (spacing, type, radii, transition) are kept as-is. */
:root {
  /* --- Core aliases -------------------------------------------------- */
  --graphite:  var(--rr-charcoal);       /* headers, footer, dark bands */
  --slate:     var(--rr-charcoal-alt);   /* secondary dark surface     */
  --zinc:      var(--rr-hairline);       /* dividers, borders, muted fills */
  --paper:     var(--rr-white);          /* page background — now white   */
  --signal:    var(--rr-ember);          /* CTA — Ember                   */
  --flashing:  var(--rr-charcoal);       /* was brand-blue; secondary actions
                                            + focus states are charcoal now */
  --white:     var(--rr-white);

  /* --- Extended palette aliases ------------------------------------- */
  --sky:        var(--rr-charcoal);      /* was brand-blue                */
  --sky-deep:   var(--rr-charcoal-alt);
  --sky-tint:   var(--rr-paper);         /* alt-section wash — warm paper */
  --sky-glow:   var(--rr-hairline);      /* borders on tinted sections    */
  --amber:      var(--rr-ember);
  --amber-hover:var(--rr-ember-hover);
  --signal-ink: var(--rr-white);         /* text ON the ember CTA — white
                                            passes AA on #C64A1E (~4.9:1) */
  --amber-deep: var(--rr-ember-hover);
  --amber-tint: var(--rr-paper);         /* warm wash for highlight boxes */
  --clay:       var(--rr-ember);         /* terracotta collapses to Ember */
  --clay-tint:  var(--rr-paper);
  --sun:        var(--rr-ember);         /* accent-yellow → Ember         */
  --leaf:       var(--rr-charcoal);      /* success glyphs — dark neutral */
  --leaf-tint:  var(--rr-paper);

  /* --- Text --- */
  --ink:        var(--rr-charcoal);      /* headings                     */
  --body:       var(--rr-charcoal-alt);  /* body copy                    */
  --muted:      var(--rr-muted);         /* meta text, form hints        */
  --line:       var(--rr-hairline);      /* hairlines                    */

  /* --- Spacing (8px scale) --- */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;

  /* --- Typography --- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --text-h1:    clamp(2.125rem, 4.6vw, 3.5rem);
  --text-h2:    clamp(1.625rem, 3vw, 2.375rem);
  --text-h3:    clamp(1.1875rem, 2vw, 1.4375rem);
  --text-body:  clamp(1rem, 1.4vw, 1.0625rem);
  --text-small: 0.875rem;
  --text-mono:  0.8125rem;

  /* --- Layout --- */
  --max-content: 1200px;
  --max-prose:   68ch;

  /* --- Decoration --- */
  --radius:    6px;
  --radius-lg: 12px;
  --shadow:    var(--rr-shadow-sm);
  --shadow-md: var(--rr-shadow-md);
  --shadow-lg: var(--rr-shadow-lg);

  --transition: 160ms ease;
  --focus-ring: 3px solid var(--rr-ember);   /* Ember for the a11y ring */
}

/* --- Self-hosted fonts ---
   Place WOFF2 files in /assets/fonts/ before launch.
   Use: https://gwfh.mranftl.com to download Google Fonts as WOFF2.
   Subset: latin only. Preload: Archivo 800 (H1 weight).
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   0. Overflow guards
   --------------------------------------------------------------------------
   The horizontal scroll in v1.2 came from CSS Grid: a bare `1fr` track is
   `minmax(auto, 1fr)`, so grid items refuse to shrink below their content's
   intrinsic min-width. The multi-step form's option row was wider than the
   hero column allowed, and pushed the page sideways. Every track is now
   `minmax(0, 1fr)`.
   These rules are the belt-and-braces layer so a single long word, a wide
   embed, or a future component can't reintroduce it.
   ========================================================================== */

html, body {
  max-width: 100%;
  overflow-x: clip; /* clip, not hidden — hidden on <body> breaks position:sticky */
}

/* Media and embeds never exceed their container */
img, video, iframe, embed, object, canvas, svg, table, pre {
  max-width: 100%;
}

/* Long URLs and unbroken strings wrap instead of pushing the layout */
p, li, h1, h2, h3, h4, dd, dt, figcaption, blockquote, td, th, summary, label, a {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Flex and grid children default to min-width:auto, which is the same trap.
   Reset it on the layout primitives that hold arbitrary content. */
.hero__inner > *,
.article-grid > *,
.blog-layout > *,
.cta-band__inner > *,
.featured-post > *,
.post-card,
.service-card,
.pricing-card,
.contact-card,
.city-hero__grid > *,
.state-hero > *,
.two-col > *,
.qgrid > *,
.city-grid > *,
.split > * { min-width: 0; }

/* Horizontally scrollable regions opt in explicitly rather than by accident */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* ==========================================================================
   1. Base reset
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--body);       /* charcoal-alt — softer than pure charcoal */
  background: var(--rr-white);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: var(--rr-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--rr-link-hover);
  text-decoration: none;
}

/* ==========================================================================
   2. Accessibility
   ========================================================================== */

/* Skip-to-content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  background: var(--graphite);
  color: var(--white);
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--sp-1);
}

/* Global focus ring */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.3;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--sp-2);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--sp-4);
  }
}

.prose {
  max-width: var(--max-prose);
}

section {
  padding-block: var(--sp-8);
}

.section--dark {
  background: var(--graphite);
  color: var(--white);
}

.section--dark a {
  color: var(--zinc);
}

.section--slate {
  background: var(--slate);
  color: var(--white);
}

.section--zinc {
  background: var(--zinc);
}

/* ==========================================================================
   5. The pitch rule — 4:12 roof slope divider
   clip-path on the section's top edge (≈18.4°, a true 4:12 slope)
   ========================================================================== */

.section--pitched-top {
  clip-path: polygon(0 4.5vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -4.5vw;
  padding-top: calc(4.5vw + var(--sp-8));
}

.section--pitched-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5vw), 0 100%);
  padding-bottom: calc(4.5vw + var(--sp-8));
}

/* ==========================================================================
   6. Shingle-offset card grid
   Alternating rows stagger by half a card width on desktop, like shingle courses.
   ========================================================================== */

.shingle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}

/* Shingle offset disabled.
   v1 shifted every odd CHILD by half a card width. That worked with 2 cards
   per row but the grid is auto-fill(280px, 1fr) — at ~900–1200px it fits 3
   columns and the "odd" 3rd card gets pushed off the right of the viewport.
   Kept the class name so existing markup still validates; no transform. */

/* ==========================================================================
   7. Card component
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-3);
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 0.875rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

/* Primary CTA — Ember. Use once per viewport. */
.btn--signal {
  background: var(--rr-ember);
  color: var(--rr-white);
  border-color: var(--rr-ember);
}

.btn--signal:hover,
.btn--signal:focus-visible {
  background: var(--rr-ember-hover);
  border-color: var(--rr-ember-hover);
  color: var(--rr-white);
  text-decoration: none;
}

/* Secondary — outlined charcoal. Hover flips to filled charcoal + white. */
.btn--secondary {
  background: transparent;
  color: var(--rr-charcoal);
  border-color: var(--rr-charcoal);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--rr-charcoal);
  color: var(--rr-white);
  border-color: var(--rr-charcoal);
  text-decoration: none;
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

.btn--full {
  width: 100%;
}

/* ==========================================================================
   9. Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--graphite);
  height: 64px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-logo__text {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.site-logo__text span {
  color: var(--signal);
}

.site-nav {
  display: none;
}

/* WP's wp_nav_menu wraps every item in an <li>. The theme uses
   items_wrap='%3$s' so there's no outer <ul>, but the orphan <li>s
   still inherit the browser default `display: list-item` and render
   a marker (the visible bullet). `list-style: none` suppresses the
   marker; `display: contents` collapses each <li> so its <a> child
   participates directly in the flex layout of .site-nav. */
.site-nav li {
  list-style: none;
  display: contents;
}

@media (min-width: 768px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .site-nav a {
    color: var(--zinc);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition);
  }

  .site-nav a:hover {
    color: var(--white);
  }
}

.site-header__phone {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--zinc);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__phone:hover {
  color: var(--white);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.site-footer {
  background: var(--graphite);
  color: var(--zinc);
  padding-block: var(--sp-8);
  font-size: var(--text-small);
}

.site-footer a {
  color: var(--zinc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer a:hover {
  color: var(--white);
}

.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

.footer-brand p {
  margin-top: var(--sp-2);
  max-width: 40ch;
  line-height: 1.5;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.footer-states {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.footer-bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--slate);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.8125rem;
}

.footer-legal {
  max-width: 60ch;
  line-height: 1.5;
  color: var(--rr-on-dark-muted);
}

/* ==========================================================================
   11. Hero (homepage + city page)
   ========================================================================== */

.hero {
  background: var(--graphite);
  color: var(--white);
  padding-block: var(--sp-8);
}

.hero__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.hero__eyebrow {
  color: var(--signal);
  margin-bottom: var(--sp-2);
}

.hero__title {
  color: var(--white);
  margin-bottom: var(--sp-3);
}

.hero__sub {
  font-size: 1.125rem;
  color: var(--zinc);
  max-width: 44ch;
  margin-bottom: var(--sp-4);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--text-small);
  color: var(--zinc);
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero__trust-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--signal);
}

/* ==========================================================================
   12. Proof / stat band
   ========================================================================== */

.proof-band {
  background: var(--slate);
  color: var(--white);
  padding-block: var(--sp-4);
}

.proof-band__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  align-items: center;
}

.proof-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proof-stat__number {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--rr-ember);   /* accent moment — brief §5 */
  letter-spacing: -0.02em;
}

.proof-stat__label {
  font-size: var(--text-small);
  color: var(--zinc);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   13. Multi-step lead form (rrf = RidgeRoofer Form)
   ========================================================================== */

.rrf-form-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--rr-charcoal) 16%, transparent);
  padding: var(--sp-4);
  max-width: 440px;
  width: 100%;
}

/* Progress bar */
.rrf-progress-track {
  height: 4px;
  background: var(--zinc);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-1);
}

.rrf-progress-bar {
  height: 100%;
  background: var(--signal);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.rrf-progress {
  color: var(--muted);
  margin-bottom: var(--sp-3);
}

/* Step labels */
.rrf-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--graphite);
  margin-bottom: var(--sp-3);
}

/* Text inputs */
.rrf-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--zinc);
  border-radius: var(--radius);
  font-size: 1rem;
  color: var(--graphite);
  background: var(--white);
  transition: border-color var(--transition);
  appearance: none;
}

.rrf-input:focus {
  outline: 3px solid var(--rr-ember);
  outline-offset: 2px;
  border-color: var(--rr-charcoal);
}

.rrf-input[aria-invalid="true"] {
  border-color: var(--rr-ember);
}

/* ZIP + button inline on desktop */
.rrf-input-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.rrf-input-row .rrf-input {
  flex: 1;
  min-width: 120px;
}

.rrf-input-row .btn {
  flex-shrink: 0;
}

/* Field wrapper (step 4) */
.rrf-field {
  margin-bottom: var(--sp-3);
}

.rrf-field label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--graphite);
  margin-bottom: var(--sp-1);
}

/* Tap cards (step 2 & 3) */
.rrf-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.rrf-card {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--zinc);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 1rem;
  font-weight: 500;
  color: var(--graphite);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), background var(--transition);
}

.rrf-card:hover {
  border-color: var(--flashing);
}

.rrf-card.is-selected {
  border-color: var(--rr-charcoal);
  background: var(--rr-paper);
}

/* Consent */
.rrf-consent {
  margin-bottom: var(--sp-3);
}

.rrf-consent-label {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  cursor: pointer;
}

.rrf-consent-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--flashing);
  cursor: pointer;
}

.rrf-consent-text {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Back button */
.rrf-back {
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  padding: var(--sp-1) 0;
  margin-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rrf-back:hover {
  color: var(--graphite);
}

/* Error */
.rrf-error {
  font-size: var(--text-small);
  color: var(--signal);
  font-weight: 500;
  margin-bottom: var(--sp-2);
}

/* Success */
.rrf-success {
  text-align: center;
  padding: var(--sp-4) var(--sp-2);
}

.rrf-success svg {
  margin-inline: auto;
  margin-bottom: var(--sp-3);
}

.rrf-success h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.rrf-success p {
  color: var(--muted);
  max-width: 36ch;
  margin-inline: auto;
}

/* ==========================================================================
   14. Services section
   ========================================================================== */

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.service-card__icon {
  width: 40px;
  height: 40px;
  color: var(--flashing);
}

.service-card h3 {
  font-size: 1.125rem;
}

.service-card p {
  color: var(--body);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* ==========================================================================
   15. FAQ section
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--zinc);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item {
  background: var(--white);
}

.faq-item summary {
  padding: var(--sp-3) var(--sp-3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--flashing);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 var(--sp-3) var(--sp-3);
  color: var(--body);
  line-height: 1.7;
}

/* ==========================================================================
   16. Testimonials
   ========================================================================== */

.testimonial {
  background: var(--white);
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
  padding: var(--sp-3);
  box-shadow: var(--shadow);
}

.testimonial__stars {
  color: var(--rr-ember);
  font-family: var(--font-mono);
  letter-spacing: 2px;
  margin-bottom: var(--sp-2);
}

.testimonial__quote {
  font-style: italic;
  color: var(--graphite);
  margin-bottom: var(--sp-2);
  line-height: 1.6;
}

.testimonial__byline {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--muted);
}

/* ==========================================================================
   17. Nearby cities
   ========================================================================== */

.nearby-cities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.nearby-cities a {
  padding: 6px 12px;
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--flashing);
  transition: background var(--transition), color var(--transition);
}

.nearby-cities a:hover {
  background: var(--flashing);
  color: var(--white);
  border-color: var(--flashing);
}

/* ==========================================================================
   18. CTA band
   ========================================================================== */

.cta-band {
  background: var(--graphite);
  color: var(--white);
  padding-block: var(--sp-8);
  text-align: center;
}

.cta-band h2 {
  color: var(--white);
  margin-bottom: var(--sp-2);
}

.cta-band p {
  color: var(--zinc);
  margin-bottom: var(--sp-4);
  max-width: 48ch;
  margin-inline: auto;
}

/* ==========================================================================
   19. Blog / single post
   ========================================================================== */

.post-header {
  padding-block: var(--sp-8);
  background: var(--graphite);
  color: var(--white);
}

.post-meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--zinc);
  margin-bottom: var(--sp-2);
}

.post-content {
  max-width: var(--max-prose);
  margin-inline: auto;
  padding-block: var(--sp-8);
}

.post-content > * + * {
  margin-top: 1.25em;
}

.post-content h2,
.post-content h3 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.post-content a {
  font-weight: 500;
}

.post-content ul,
.post-content ol {
  list-style: revert;
  padding-left: var(--sp-4);
}

/* Inline CTA inside blog post */
.post-cta {
  background: var(--zinc);
  border-left: 4px solid var(--signal);
  border-radius: var(--radius);
  padding: var(--sp-3);
  margin-block: var(--sp-6);
}

/* ==========================================================================
   20. State hub (taxonomy-state.php)
   ========================================================================== */

.state-hero {
  background: var(--graphite);
  color: var(--white);
  padding-block: var(--sp-8);
}

.city-directory {
  columns: 2;
  column-gap: var(--sp-6);
}

@media (min-width: 768px) {
  .city-directory {
    columns: 3;
  }
}

@media (min-width: 1024px) {
  .city-directory {
    columns: 4;
  }
}

.city-directory a {
  display: block;
  padding: 4px 0;
  font-size: var(--text-small);
  break-inside: avoid;
}

/* ==========================================================================
   21. Utility
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-white  { color: var(--white); }
.text-zinc   { color: var(--zinc); }
.text-signal { color: var(--signal); }

.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }

.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }

.flex      { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2     { gap: var(--sp-2); }
.gap-3     { gap: var(--sp-3); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ==========================================================================
   14. Page hero (interior pages)
   ========================================================================== */

.page-hero {
  padding-block: var(--sp-8) var(--sp-6);
  background: var(--paper);
  border-bottom: 1px solid var(--zinc);
}

.page-hero--tight { padding-block: var(--sp-6) var(--sp-4); }

.page-hero--dark {
  background: var(--graphite);
  color: var(--white);
  border-bottom: 0;
  padding-block: var(--sp-12) var(--sp-8);
}

.page-hero--dark .page-hero__eyebrow { color: var(--signal); }
.page-hero--dark .page-hero__sub     { color: var(--rr-on-dark-muted); }

.page-hero__eyebrow {
  color: var(--flashing);
  margin-bottom: var(--sp-2);
}

.page-hero__title { max-width: 20ch; }
.page-hero--tight .page-hero__title { max-width: none; }

.page-hero__sub {
  margin-top: var(--sp-3);
  max-width: 58ch;
  font-size: 1.125rem;
  color: var(--body);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-5, 40px);
}

/* ==========================================================================
   15. Generic section scaffolding
   ========================================================================== */

.section       { padding-block: var(--sp-8); }
.section--zinc { background: var(--zinc); }

.section__title { margin-bottom: var(--sp-2); }

.section__sub {
  max-width: 62ch;
  color: var(--body);
  margin-bottom: var(--sp-6);
}

.prose--wide { max-width: 76ch; }
.prose--wide h2 { margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose--wide h2:first-child { margin-top: 0; }
.prose--wide p  { margin-bottom: var(--sp-3); }

/* ==========================================================================
   16. Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 14px var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.btn--lg { padding: 18px var(--sp-4); font-size: 1.0625rem; }

.btn--primary {
  background: var(--signal);
  color: var(--signal-ink);
  font-weight: 700;
}
.btn--primary:hover { background: var(--amber-hover); }

.btn--secondary        { background: var(--white); color: var(--graphite); border-color: var(--rr-hairline); }
.btn--secondary:hover  { border-color: var(--graphite); }

.btn--ghost            { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn--ghost:hover      { border-color: var(--white); background: rgba(255,255,255,.06); }

/* ==========================================================================
   17. Contact page
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact-card__tag   { color: var(--flashing); }
.contact-card__title { font-size: 1.25rem; }
.contact-card .btn   { margin-top: auto; align-self: flex-start; }

.contact-list { display: grid; gap: var(--sp-2); }

.contact-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--zinc);
}

.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list__label { color: var(--muted); }

/* ==========================================================================
   18. Notice box
   ========================================================================== */

.notice-box {
  background: var(--white);
  border: 1px solid var(--zinc);
  border-left: 3px solid var(--flashing);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.notice-box--muted { border-left-color: var(--rr-hairline); margin-top: var(--sp-6); }
.notice-box h3     { margin-bottom: var(--sp-1); }

/* ==========================================================================
   19. Pricing (contractor page)
   ========================================================================== */

.pricing-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pricing-card {
  background: var(--white);
  border: 1px solid var(--rr-hairline);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.pricing-card--featured {
  border-color: var(--graphite);
  border-width: 2px;
  box-shadow: var(--shadow);
}

.pricing-card__tag   { color: var(--flashing); margin-bottom: var(--sp-2); }
.pricing-card--featured .pricing-card__tag { color: var(--signal); }

.pricing-card__price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pricing-card__price span { font-size: 1.5rem; color: var(--muted); }

.pricing-card__unit { color: var(--muted); margin-top: 4px; margin-bottom: var(--sp-3); }

.pricing-card__list { display: grid; gap: var(--sp-1); }

.pricing-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
}

.pricing-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--flashing);
  border-bottom: 2px solid var(--flashing);
  transform: rotate(-45deg);
}

.pricing-note {
  margin-top: var(--sp-4);
  font-size: var(--text-small);
  color: var(--muted);
  max-width: 66ch;
}

/* ==========================================================================
   20. Unit-economics box
   ========================================================================== */

.math-box {
  background: var(--graphite);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-4);
}

.math-box h2 { margin-bottom: var(--sp-1); }
.math-box > p { color: var(--rr-on-dark-muted); margin-bottom: var(--sp-4); }

.math-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .math-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.math-item {
  background: var(--slate);
  border-radius: var(--radius);
  padding: var(--sp-3);
}

.math-item--highlight { background: var(--signal); }

.math-item__label  { color: var(--rr-on-dark-muted); margin-bottom: var(--sp-1); }
.math-item--highlight .math-item__label { color: rgba(255,255,255,.85); }

.math-item__calc   { color: var(--rr-on-dark-muted); margin-bottom: var(--sp-2); }
.math-item--highlight .math-item__calc { color: rgba(255,255,255,.75); }

.math-item__result {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
}

.math-item__result span {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rr-on-dark-muted);
  margin-top: 4px;
}

.math-item--highlight .math-item__result span { color: rgba(255,255,255,.85); }

.math-note {
  margin-top: var(--sp-4);
  font-size: var(--text-small);
  color: var(--rr-on-dark-muted);
  max-width: 70ch;
}

/* ==========================================================================
   21. Contractor apply block
   ========================================================================== */

.apply-box { max-width: 60ch; }
.apply-box > p { margin-top: var(--sp-2); margin-bottom: var(--sp-3); }

.apply-requirements {
  display: grid;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.apply-requirements li {
  position: relative;
  padding-left: 24px;
}

.apply-requirements li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  transform: rotate(-45deg);
}

.apply-note { margin-top: var(--sp-2); color: var(--rr-on-dark-muted); }

/* ==========================================================================
   22. Legal documents
   ========================================================================== */

.legal-doc { max-width: var(--max-prose); }
.legal-doc h2 { margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.legal-doc h3 { margin-top: var(--sp-4); margin-bottom: var(--sp-1); }
.legal-doc p, .legal-doc li { margin-bottom: var(--sp-2); }

.legal-doc ul, .legal-doc ol {
  padding-left: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.legal-doc ul li { list-style: disc; }
.legal-doc ol li { list-style: decimal; }

/* ==========================================================================
   23. Search
   ========================================================================== */

.search-form { display: flex; gap: var(--sp-1); max-width: 480px; }

.search-form__input {
  flex: 1;
  padding: 13px var(--sp-2);
  border: 1px solid var(--rr-hairline);
  border-radius: var(--radius);
  background: var(--white);
}

.search-form__input:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   24. CTA band layout
   ========================================================================== */

.cta-band__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ==========================================================================
   25. Pagination
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}

.pagination .nav-links { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--rr-hairline);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--graphite);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

.pagination .page-numbers:hover   { border-color: var(--graphite); }
.pagination .page-numbers.current  { background: var(--graphite); color: var(--white); border-color: var(--graphite); }

/* ==========================================================================
   26. Breadcrumbs
   ========================================================================== */

.breadcrumbs {
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--zinc);
  background: var(--white);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.03em;
}

.breadcrumbs__item { display: flex; align-items: center; gap: 6px; }

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  color: var(--rr-on-dark-muted);
}

.breadcrumbs__item a       { color: var(--muted); text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--flashing); text-decoration: underline; }
.breadcrumbs__item span    { color: var(--graphite); font-weight: 500; }

/* ==========================================================================
   27. Reading progress
   ========================================================================== */

.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}

.progress__bar {
  height: 100%;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .progress__bar { transition: transform 80ms linear; }
}

/* ==========================================================================
   28. Article layout
   ========================================================================== */

.post-header { padding-block: var(--sp-6) var(--sp-4); }
.post-header__inner { max-width: var(--max-prose); }
.post-header__cat { margin-bottom: var(--sp-2); }
.post-header__title { margin-bottom: var(--sp-2); }

.post-header__sub {
  font-size: 1.1875rem;
  color: var(--body);
  margin-bottom: var(--sp-3);
}

.post-header__meta { display: flex; align-items: center; gap: var(--sp-2); }
.post-header__avatar { border-radius: 50%; }
.post-header__byline { display: flex; flex-direction: column; }
.post-header__author { font-weight: 600; font-size: 0.9375rem; }
.post-header__dates  { color: var(--muted); }

.post-featured { margin-bottom: var(--sp-6); }
.post-featured img { width: 100%; border-radius: var(--radius); }

.post-featured__caption {
  margin-top: var(--sp-1);
  font-size: var(--text-small);
  color: var(--muted);
}

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-8); }
}

.article-main { min-width: 0; max-width: var(--max-prose); }

/* Sticky unit: TOC + CTA travel together, bounded by the grid row so they
   stop at the end of the article rather than riding over the footer. */
.article-sidebar { display: none; }

@media (min-width: 1024px) {
  .article-sidebar { display: block; position: sticky; top: 0; align-self: start; }
  .article-sidebar__sticky {
    position: sticky;
    top: 88px;
    display: grid;
    gap: var(--sp-2);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ==========================================================================
   29. Table of contents
   ========================================================================== */

.toc {
  background: var(--white);
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.toc--desktop { display: none; padding: var(--sp-3); }
.toc--mobile  { display: block; margin-bottom: var(--sp-4); }

@media (min-width: 1024px) {
  .toc--desktop { display: block; }
  .toc--mobile  { display: none; }
}

.toc__summary {
  padding: 14px var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graphite);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toc__summary::-webkit-details-marker { display: none; }

.toc__summary::after {
  content: "▾";
  transition: transform var(--transition);
}

.toc--mobile[open] .toc__summary::after { transform: rotate(180deg); }
.toc--mobile[open] .toc__nav { padding: 0 var(--sp-3) var(--sp-3); }

.toc__heading { color: var(--muted); margin-bottom: var(--sp-2); }

.toc__list { display: grid; gap: 2px; }

.toc__item--h3 .toc__link { padding-left: var(--sp-3); font-size: 0.8125rem; }

.toc__link {
  display: block;
  padding: 6px var(--sp-1);
  border-left: 2px solid transparent;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--body);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}

.toc__link:hover { color: var(--graphite); }

.toc__link.is-active {
  color: var(--signal);
  border-left-color: var(--signal);
  font-weight: 600;
  background: rgba(214, 69, 0, 0.04);
}

/* ==========================================================================
   30. Sidebar CTA
   ========================================================================== */

.sidebar-cta {
  background: var(--graphite);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--sp-3);
}

.sidebar-cta__eyebrow { color: var(--signal); margin-bottom: var(--sp-1); }

.sidebar-cta__title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-1);
}

.sidebar-cta__body {
  font-size: 0.9375rem;
  color: var(--rr-on-dark-muted);
  margin-bottom: var(--sp-3);
}

.sidebar-cta__btn { width: 100%; }

.sidebar-cta__note {
  margin-top: var(--sp-1);
  font-size: 0.8125rem;
  color: var(--rr-on-dark-muted);
  text-align: center;
}

/* ==========================================================================
   31. Post cards, tags, author
   ========================================================================== */

.post-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px)  { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.blog-layout__main .post-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .blog-layout__main .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.post-card {
  background: var(--white);
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition);
}

.post-card:hover { border-color: var(--rr-on-dark-muted); }

/* Square art, matching the editorial system (blog.css). Was a fixed 180px
   letterbox, which read inconsistently against the 1:1 crops elsewhere. */
.post-card__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.post-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }

.post-card__title { font-size: 1.125rem; line-height: 1.3; }
.post-card__title a { color: var(--graphite); text-decoration: none; }
.post-card__title a:hover { color: var(--flashing); }

.post-card__excerpt { font-size: 0.9375rem; color: var(--body); }
.post-card__meta { color: var(--muted); margin-top: auto; padding-top: var(--sp-1); }

.cat-pill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--zinc);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--flashing);
  text-decoration: none;
  align-self: flex-start;
}

.cat-pill:hover    { border-color: var(--flashing); }
.cat-pill.is-active { background: var(--graphite); border-color: var(--graphite); color: var(--white); }
.cat-pill--sm      { font-size: 0.6875rem; padding: 3px 8px; }
.cat-pill__count   { margin-left: 4px; opacity: 0.6; }

.tag-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--zinc);
  font-size: 0.8125rem;
  color: var(--body);
  text-decoration: none;
}

.tag-pill:hover { background: var(--rr-hairline); }

.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--zinc);
}

.post-tags__label { color: var(--muted); margin-right: var(--sp-1); }

.author-card {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
}

.author-card__avatar { border-radius: 50%; flex-shrink: 0; }
.author-card__label  { color: var(--muted); margin-bottom: 2px; }
.author-card__name   { font-weight: 600; margin-bottom: 4px; }
.author-card__bio    { font-size: 0.9375rem; color: var(--body); }

.post-cta--end {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--zinc);
  border-radius: var(--radius);
  text-align: center;
}

.post-cta__title { margin-bottom: var(--sp-1); }
.post-cta--end p { margin-bottom: var(--sp-3); color: var(--body); }

/* ==========================================================================
   32. Blog listing
   ========================================================================== */

.blog-search { margin-top: var(--sp-4); }

.cat-filter {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--zinc);
  background: var(--white);
}

.cat-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 2px solid var(--zinc);
}

@media (min-width: 900px) {
  .featured-post { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
}

.featured-post__media img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.featured-post__body { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.featured-post__tag  { color: var(--signal); }
.featured-post__title { font-size: clamp(1.5rem, 3vw, 2rem); font-family: var(--font-display); font-weight: 800; line-height: 1.15; }
.featured-post__title a { color: var(--graphite); text-decoration: none; }
.featured-post__title a:hover { color: var(--flashing); }
.featured-post__excerpt { color: var(--body); }
.featured-post__meta { color: var(--muted); }

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-8); }
}

.blog-layout__side { display: grid; gap: var(--sp-2); }

@media (min-width: 1024px) {
  .blog-layout__sticky { position: sticky; top: 88px; display: grid; gap: var(--sp-2); }
}

.side-card {
  background: var(--white);
  border: 1px solid var(--zinc);
  border-radius: var(--radius);
  padding: var(--sp-3);
}

.side-card--dark { background: var(--slate); border-color: var(--slate); color: var(--white); }
.side-card--dark .side-card__heading { color: var(--rr-on-dark-muted); }
.side-card--dark .side-card__body { color: var(--rr-on-dark); font-size: 0.9375rem; margin-bottom: var(--sp-2); }

.side-card__heading { color: var(--muted); margin-bottom: var(--sp-2); }

.side-list { display: grid; gap: var(--sp-2); }
.side-list li { display: flex; gap: var(--sp-1); align-items: baseline; }
.side-list__num { color: var(--rr-on-dark-muted); flex-shrink: 0; }
.side-list a { font-size: 0.9375rem; color: var(--graphite); text-decoration: none; line-height: 1.4; }
.side-list a:hover { color: var(--flashing); text-decoration: underline; }

.side-cats { display: grid; gap: 2px; }

.side-cats a {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--zinc);
  font-size: 0.9375rem;
  color: var(--graphite);
  text-decoration: none;
}

.side-cats li:last-child a { border-bottom: 0; }
.side-cats a:hover { color: var(--flashing); }
.side-cats a span { color: var(--rr-on-dark-muted); }

/* ==========================================================================
   33. Locations hub — tile-grid map
   ========================================================================== */

.loc-search { margin-top: var(--sp-4); max-width: 460px; }

.loc-search__input {
  width: 100%;
  padding: 15px var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--white);
  font-size: 1rem;
}

.loc-search__input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.loc-search__status { margin-top: var(--sp-1); color: var(--rr-on-dark-muted); min-height: 1em; }

.us-grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
  max-width: 760px;
  margin-bottom: var(--sp-3);
}

.us-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-family: var(--font-mono);
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), opacity var(--transition);
  min-height: 30px;
}

.us-cell__abbr  { font-size: clamp(0.5rem, 1.4vw, 0.75rem); font-weight: 500; letter-spacing: 0.02em; }
.us-cell__count { font-size: clamp(0.4rem, 1.1vw, 0.625rem); opacity: 0.75; }

.us-cell--active { background: var(--flashing); color: var(--white); }

.us-cell--active:hover,
.us-cell--active:focus-visible {
  background: var(--signal);
  transform: translateY(-2px);
  z-index: 1;
}

.us-cell--empty { background: var(--zinc); color: var(--rr-on-dark-muted); cursor: default; }
.us-cell.is-dimmed { opacity: 0.2; }

.us-grid__legend {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--muted);
  flex-wrap: wrap;
}

.us-grid__key {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 2px;
  margin-left: var(--sp-2);
}

.us-grid__key--active { background: var(--flashing); margin-left: 0; }
.us-grid__key--empty  { background: var(--zinc); }

/* State cards */
.state-grid {
  display: grid;
  gap: var(--sp-1);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px)  { .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .state-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.state-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--transition), transform var(--transition);
}

.state-card:hover { border-color: var(--graphite); transform: translateX(2px); }

.state-card__abbr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--graphite);
  color: var(--white);
  border-radius: 3px;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.state-card__body  { display: flex; flex-direction: column; min-width: 0; }
.state-card__name  { font-weight: 600; color: var(--graphite); font-size: 0.9375rem; }
.state-card__count { color: var(--muted); }

.state-card__arrow {
  margin-left: auto;
  color: var(--rr-on-dark-muted);
  transition: transform var(--transition);
}

.state-card:hover .state-card__arrow { transform: translateX(3px); color: var(--signal); }

.loc-empty {
  padding: var(--sp-4);
  text-align: center;
  color: var(--muted);
}

/* Inline post CTA (mobile's substitute for the sticky sidebar) */
.post-cta--inline {
  margin-block: var(--sp-4);
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--zinc);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
}

.post-cta__eyebrow { color: var(--signal); margin-bottom: var(--sp-1); }
.post-cta__lead    { margin-bottom: var(--sp-2); font-weight: 500; }

@media (min-width: 1024px) {
  /* The sticky sidebar already carries the CTA on desktop — soften the
     inline one so the same ask does not appear twice at full strength. */
  .post-cta--inline { border-left-color: var(--zinc); background: var(--paper); }
}

/* ==========================================================================
   34. Image slots & placeholders
   ========================================================================== */

.img-slot { width: 100%; height: 100%; object-fit: cover; display: block; }

.img-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-3);
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      var(--sky-tint) 0 12px,
      var(--rr-hairline) 12px 24px
    );
  border: 2px dashed var(--sky-glow);
  border-radius: var(--radius);
  color: var(--sky-deep);
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.img-ph__icon  { width: 42px; height: 42px; opacity: 0.55; }
.img-ph__label { color: var(--sky-deep); opacity: 0.8; }

.img-ph__brief {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--body);
  max-width: 32ch;
}

.img-ph__field {
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(11, 127, 212, 0.1);
  color: var(--sky-deep);
}

.img-ph--hero      { min-height: 100%; border: 0; border-radius: 0; }
.img-ph--landscape { aspect-ratio: 4 / 3; }
.img-ph--square    { aspect-ratio: 1; min-height: 0; padding: var(--sp-2); }
.img-ph--square .img-ph__brief,
.img-ph--square .img-ph__field { display: none; }
.img-ph--square .img-ph__icon  { width: 28px; height: 28px; }
.img-ph--portrait  { aspect-ratio: 3 / 4; }

/* ==========================================================================
   35. Icons
   ========================================================================== */

.icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ==========================================================================
   36. Homepage hero
   ========================================================================== */

.hero-v2 {
  position: relative;
  isolation: isolate;
  background: var(--graphite);
  color: var(--white);
  padding-block: var(--sp-8) var(--sp-10);
  overflow: hidden;
}

.hero-v2__media { position: absolute; inset: 0; z-index: -2; }
.hero-v2__media img,
.hero-v2__media .img-ph { width: 100%; height: 100%; object-fit: cover; }

.hero-v2__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--rr-charcoal) 94%, transparent) 0%,
    color-mix(in srgb, var(--rr-charcoal) 86%, transparent) 45%,
    color-mix(in srgb, var(--rr-charcoal) 62%, transparent) 100%
  );
}

.hero-v2__inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 960px) {
  .hero-v2__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 420px); gap: var(--sp-8); align-items: center; }
}

.hero-v2__eyebrow {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rr-ember) 16%, transparent);
  color: var(--rr-ember);
  margin-bottom: var(--sp-3);
}

.hero-v2__title { margin-bottom: var(--sp-3); max-width: 16ch; }

.hero-v2__sub {
  font-size: 1.0625rem;
  color: var(--rr-on-dark);
  max-width: 50ch;
  margin-bottom: var(--sp-4);
}

.hero-v2__phone { margin-top: var(--sp-3); color: var(--rr-on-dark); font-size: 0.9375rem; }
.hero-v2__phone a { color: var(--white); font-weight: 500; }

.hero-v2__form { width: 100%; min-width: 0; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--body);
}

.trust-row li .icon { color: var(--leaf); }
.hero-v2 .trust-row li,
.trust-row--light li { color: var(--rr-on-dark); }
.hero-v2 .trust-row li .icon,
.trust-row--light li .icon { color: var(--rr-ember); }

/* ==========================================================================
   37. Stats strip
   ========================================================================== */

.stats-strip {
  background: var(--sky);
  color: var(--white);
  padding-block: var(--sp-4);
}

.stats-strip__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  text-align: center;
}

@media (min-width: 768px) {
  .stats-strip__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat { display: flex; flex-direction: column; gap: 2px; }

.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.375rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rr-ember);   /* accent moment — brief §5 */
}

.stat__label { color: var(--rr-on-dark); font-size: 0.6875rem; }

/* ==========================================================================
   38. At a glance box
   ========================================================================== */

.glance {
  background: var(--amber-tint);
  border: 1px solid var(--rr-hairline);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

.glance__label { color: var(--amber-deep); margin-bottom: var(--sp-2); }
.glance__list { display: grid; gap: var(--sp-2); }

.glance__list li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
  line-height: 1.6;
}

.glance__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
}

/* ==========================================================================
   39. Sections
   ========================================================================== */

.section--tint { background: var(--sky-tint); }

/* ==========================================================================
   40. Steps
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: step;
}

@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}

.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  position: relative;
}

/* Step numerals — Ember accent moment. Oversized, low letter-spacing.
   The old filled circle is gone; the number itself carries the emphasis. */
.step__num {
  display: block;
  color: var(--rr-ember);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-2);
}

.step__title { margin-bottom: var(--sp-1); }
.step p { color: var(--body); font-size: 0.9375rem; }

/* ==========================================================================
   41. Split content + media
   ========================================================================== */

.split {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-bottom: var(--sp-6);
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-8); }
  .split--reverse .split__media { order: -1; }
  /* When a location page has no ACF image, the split degrades to a single
     centred prose column rather than an empty half. See rrf_has_image_slot()
     in functions.php (v2.5.0). */
  .split--copy-only { grid-template-columns: minmax(0, 720px); justify-content: center; }
}

.split__copy h2 { margin-bottom: var(--sp-2); }
.split__copy p  { color: var(--body); margin-bottom: var(--sp-2); }

.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.check-list { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); }

.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--body);
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 9px; height: 5px;
  border-left: 2.5px solid var(--leaf);
  border-bottom: 2.5px solid var(--leaf);
  transform: rotate(-45deg);
}

/* ==========================================================================
   42. Data table
   ========================================================================== */

.table-wrap {
  margin-top: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.data-table { width: 100%; border-collapse: collapse; min-width: 560px; }

.data-table__caption {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.data-table thead th {
  background: var(--sky-tint);
  padding: 12px var(--sp-2);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sky-deep);
  border-block: 1px solid var(--sky-glow);
}

.data-table tbody th,
.data-table tbody td {
  padding: 13px var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

.data-table tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.data-table tbody td { color: var(--body); }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--sky-tint); }

.table-note {
  margin-top: var(--sp-2);
  font-size: var(--text-small);
  color: var(--muted);
  max-width: 70ch;
}

/* Gutenberg wp:table blocks — the block editor's own stylesheet
   (wp-block-library) is dequeued site-wide for performance in
   functions.php, so tables in blog post content render bare without
   this. Matches the tone of .data-table above but scoped to whatever
   the editor emits inside a .wp-block-table figure. */
.wp-block-table {
  margin: var(--sp-4) 0;
  overflow-x: auto;
}
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--rr-hairline);
  background: var(--rr-white);
  font-size: 0.9375rem;
}
.wp-block-table thead th {
  background: var(--rr-paper);
  color: var(--rr-charcoal);
  font-family: var(--font-display);
  font-weight: 700;
  text-align: left;
  padding: 12px var(--sp-2);
  border-bottom: 2px solid var(--rr-hairline);
}
.wp-block-table tbody th,
.wp-block-table tbody td {
  padding: 12px var(--sp-2);
  border-top: 1px solid var(--rr-hairline);
  color: var(--rr-charcoal-alt);
  vertical-align: top;
}
.wp-block-table tbody th {
  font-weight: 600;
  text-align: left;
  color: var(--rr-charcoal);
}
.wp-block-table tbody tr:hover {
  background: var(--rr-paper);
}
.wp-block-table figcaption {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--rr-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   43. Callouts & disclaimers
   ========================================================================== */

.callout {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sky);
  border-radius: var(--radius);
}

.callout--warn { border-left-color: var(--rr-ember); background: var(--rr-paper); border-color: var(--rr-hairline); }
.callout__label { color: var(--clay); margin-bottom: 6px; }
.callout p:last-child { color: var(--body); }

.disclaimer {
  margin-top: var(--sp-3);
  font-size: var(--text-small);
  color: var(--muted);
  max-width: 72ch;
}

/* ==========================================================================
   44. Service cards
   ========================================================================== */

.svc-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px)  { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.svc-card:hover {
  border-color: var(--sky-glow);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.svc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--sky-tint);
  color: var(--sky);
  margin-bottom: var(--sp-2);
}

.svc-card__title { margin-bottom: 6px; }
.svc-card__body  { color: var(--body); font-size: 0.9375rem; }

/* ==========================================================================
   45. Inline & final CTAs
   ========================================================================== */

.cta-inline { background: var(--sky-tint); border-block: 1px solid var(--sky-glow); padding-block: var(--sp-5); }

.cta-inline__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cta-inline__title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin-bottom: 4px; }
.cta-inline p { color: var(--body); }

.cta-final { background: var(--graphite); color: var(--white); padding-block: var(--sp-8); }

.cta-final__inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 960px) {
  .cta-final__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--sp-8); }
}

.cta-final__copy h2 { margin-bottom: var(--sp-2); max-width: 20ch; }
.cta-final__copy p  { color: var(--rr-on-dark); margin-bottom: var(--sp-3); max-width: 50ch; }

/* ==========================================================================
   46. State chips
   ========================================================================== */

.state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}

.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color var(--transition), background var(--transition);
}

.state-chip:hover { border-color: var(--sky); background: var(--sky-tint); }
.state-chip span  { color: var(--muted); }

/* ==========================================================================
   47. Locations hub
   ========================================================================== */

.loc-hero {
  position: relative;
  isolation: isolate;
  background: var(--graphite);
  color: var(--white);
  padding-block: var(--sp-8);
  overflow: hidden;
}

.loc-hero__media { position: absolute; inset: 0; z-index: -2; }
.loc-hero__media img,
.loc-hero__media .img-ph { width: 100%; height: 100%; object-fit: cover; }

.loc-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rr-charcoal) 90%, transparent) 0%, color-mix(in srgb, var(--rr-charcoal) 82%, transparent) 100%);
}

.loc-hero__title { margin-bottom: var(--sp-2); max-width: 18ch; }
.loc-hero__sub   { color: var(--rr-on-dark); max-width: 56ch; margin-bottom: var(--sp-4); }

/* Two-part find bar */
.findbar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  max-width: 780px;
}

@media (min-width: 760px) {
  .findbar { flex-direction: row; align-items: stretch; gap: 0; }
}

.findbar__field {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 8px 40px;
  min-width: 0;
}

.findbar__label { color: var(--muted); font-size: 0.625rem; }

.findbar__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sky);
  display: flex;
}

.findbar__input {
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--ink);
  padding: 2px 0;
  width: 100%;
  min-width: 0;
  appearance: none;
}

.findbar__input:focus { outline: none; }
.findbar__field:focus-within { background: var(--sky-tint); border-radius: var(--radius); }

.findbar__divider { display: none; }

@media (min-width: 760px) {
  .findbar__divider { display: block; width: 1px; background: var(--line); margin-block: 8px; }
}

.findbar__submit { border-radius: var(--radius); gap: 8px; }

@media (max-width: 759px) {
  .findbar__submit { margin-top: 4px; }
}

.findbar__status { margin-top: var(--sp-1); color: var(--rr-on-dark-muted); min-height: 1em; }

/* Service tiles */
.tile-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

@media (min-width: 640px)  { .tile-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tile-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  text-align: center;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.tile:hover { border-color: var(--sky); transform: translateY(-3px); box-shadow: var(--shadow-md); }

.tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--sky-tint);
  color: var(--sky);
}

.tile__label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }

/* Featured state cards */
.feat-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px)  { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* v2.4 — image column removed; card is now text-first.
   Left rail: the state name is the visual anchor. Right rail: chevron. */
.feat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--rr-white);
  border: 1px solid var(--rr-hairline);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.feat-card:hover {
  border-color: var(--rr-charcoal);
  box-shadow: var(--rr-shadow-md);
  transform: translateY(-1px);
}

.feat-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feat-card__badges { display: flex; flex-wrap: wrap; gap: 5px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge--verified { background: var(--leaf-tint); color: var(--leaf); }
.badge--count    { background: var(--sky-tint); color: var(--sky-deep); }

.feat-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
}

.feat-card__abbr { color: var(--muted); font-size: 0.75rem; }

.feat-card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--muted);
}

.feat-card__go { color: var(--sky); display: flex; }

/* A-Z bar */
.az-bar {
  display: flex;
  gap: 3px;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.az-bar__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--sky);
  background: var(--sky-tint);
}

.az-bar__item:hover { background: var(--sky); color: var(--white); }
.az-bar__item.is-empty { color: var(--rr-muted); background: transparent; }

.az-group { margin-bottom: var(--sp-5); }

.az-group__letter {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--sky);
  padding-bottom: 6px;
  margin-bottom: var(--sp-2);
  border-bottom: 2px solid var(--sky-glow);
}

.az-group__grid {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px)  { .az-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .az-group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .az-group__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.loc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}

.loc-row:hover { border-color: var(--sky); background: var(--sky-tint); }
.loc-row__pin  { color: var(--sky); display: flex; }
.loc-row__name { flex: 1; color: var(--ink); font-size: 0.9375rem; font-weight: 500; min-width: 0; }

.loc-row__count {
  color: var(--muted);
  background: var(--paper);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
}

.loc-empty { padding: var(--sp-4); text-align: center; color: var(--muted); }

/* ==========================================================================
   48. FAQ (wide variant)
   ========================================================================== */

.faq-list--wide { max-width: 820px; }

.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.faq-item summary {
  padding: var(--sp-3);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--sky);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq-item[open] summary::after { content: "−"; }
.faq-item[open] { border-color: var(--sky-glow); }
.faq-answer { padding: 0 var(--sp-3) var(--sp-3); color: var(--body); }

/* ==========================================================================
   49. Header & footer — brightened for the Clear Sky palette
   ========================================================================== */

/* White header with a navy-on-white logo reads far lighter than the v1 dark
   bar, and lets the orange CTA carry the only strong colour up top. */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--rr-charcoal) 6%, transparent);
  height: 68px;
}

.site-header__inner { gap: var(--sp-3); }

.site-logo__text { color: var(--rr-charcoal); font-family: var(--font-display); font-weight: 800; }
.site-logo__text span { color: var(--rr-ember); }   /* accent character */

.site-nav a {
  color: var(--rr-charcoal-alt);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav .current-menu-item a {
  color: var(--rr-charcoal);
  border-bottom-color: var(--rr-ember);   /* Ember underline on hover */
}

.site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--signal);
  color: var(--signal-ink);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 700;
}

.site-header__phone:hover { background: var(--amber-hover); }

/* Footer keeps the deep navy — it anchors the page bottom without reading
   as black, and gives the bright body something to sit against. */
.site-footer {
  background: var(--rr-charcoal);
  color: var(--rr-on-dark);
  border-top: 4px solid var(--rr-ember);   /* Ember hairline caps the footer */
}

.site-footer a { color: var(--rr-on-dark); }
.site-footer a:hover { color: var(--white); }

/* Legacy dark hero/section classes brightened so v1 templates stay coherent */
.hero, .post-header.section--pitched-bottom, .state-hero {
  background: var(--graphite);
  color: var(--white);
}

.proof-band.section--slate { background: var(--slate); color: var(--white); }
.cta-band { background: var(--graphite); color: var(--white); }
.cta-band h2 { color: var(--white); }

/* The v1 pitch-rule dividers were tuned to a near-black palette. Softened so
   they read as a roofline against the lighter page rather than a hard slab. */
.section--pitched-bottom { padding-bottom: calc(3.5vw + var(--sp-6)); }
.section--pitched-top    { margin-top: -3.5vw; padding-top: calc(3.5vw + var(--sp-6)); }

/* Focus visibility on the brighter surfaces */
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }


/* ==========================================================================
   50. State + city page redesign (v2)
   --------------------------------------------------------------------------
   Backs taxonomy-state.php and single-city.php.

   Additive-only: existing hero/callout/table classes stay in charge of what
   they already own; the new pieces (state badge + hero-stats bar, overlapping
   quick-answer card, AEO FAQ grid, city cards, city hero form card) get
   their own classes so nothing here touches the homepage or blog templates.
   ========================================================================== */

/* --- Section head shared by both templates ------------------------------ */
.sec-head       { margin-bottom: var(--sp-4); }
.sec-eyebrow    { display: block; color: var(--sky); margin-bottom: 4px; }
.sec-head h2    { color: var(--ink); }
.sec-head .sec-sub,
.sec-sub        { color: var(--muted); font-size: 0.9375rem; margin-top: 6px; max-width: 60ch; }

/* --- State hero (dark navy, badge + stats) ------------------------------ */
.state-hero {
  position: relative;
  isolation: isolate;
  background: var(--graphite);
  color: var(--white);
  padding-block: var(--sp-6) 0;
  overflow: hidden;
}

/* Two overlaid layers to match the preview: a subtle diagonal stripe base,
   and a directional gradient on top for depth. */
.state-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: repeating-linear-gradient(120deg, var(--rr-charcoal) 0 40px, var(--rr-charcoal-alt) 40px 80px);
}
.state-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, color-mix(in srgb, var(--rr-charcoal) 94%, transparent) 0%, color-mix(in srgb, var(--rr-charcoal) 80%, transparent) 55%, color-mix(in srgb, var(--rr-charcoal) 50%, transparent) 100%);
}

.state-hero__top {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.state-hero__eyebrow { color: var(--rr-on-dark); }

.state-badge {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--white);
}

.state-hero__title { color: var(--white); margin-bottom: var(--sp-2); max-width: 22ch; }
.state-hero__sub   { color: var(--rr-on-dark); max-width: 58ch; margin-bottom: var(--sp-3); font-size: 1rem; }

/* --- State hero: copy + lead-form two-column layout -------------------- */
/* Matches the city hero so the quote widget sits to the right of the copy
   on both location templates. Collapses to a single column on mobile, with
   the form dropping below the headline. */
.state-hero__grid {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}
@media (min-width: 960px) {
  .state-hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 420px);
    gap: var(--sp-6);
    align-items: center;
  }
}
.state-hero__copy { min-width: 0; }
.state-hero__copy .hero-stats { padding-bottom: 0; }

.state-hero__form { width: 100%; min-width: 0; }

/* Give the form card a solid white skin so it reads as a card against the
   dark navy hero — same treatment as the city hero form. */
.state-hero__form .rrf-form-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  color: var(--ink);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--rr-charcoal) 20%, transparent);
}
.state-hero__form .rrf-form-wrap .rrf-label,
.state-hero__form .rrf-form-wrap .rrf-progress { color: var(--ink); }
.state-hero__form .rrf-form-wrap .rrf-input {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* --- Hero stats bar (state + city) -------------------------------------- */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-4);
}

.hstat b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--white);
  display: block;
  letter-spacing: -0.01em;
}
.hstat i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rr-on-dark-muted);
}

/* --- Quick-answer overlapping card ------------------------------------- */
/* Sits over the hero seam so the answer engines find it above the fold.
   Rounded top, hard bottom against the next section. */
.qa-box {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -6px 22px color-mix(in srgb, var(--rr-charcoal) 14%, transparent);
  margin-top: var(--sp-3);
}
.qa-box__inner { padding: var(--sp-3) 0; }

.qa-box__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  color: var(--sky-deep);
}
.qa-box__label svg  { color: var(--sky); }
.qa-box__label span { color: var(--sky-deep); }

.qa-box p { color: var(--ink); font-size: 1rem; line-height: 1.55; max-width: 74ch; }
.qa-box b { color: var(--sky-deep); font-weight: 700; }

/* --- Quick-answers FAQ grid (AEO) -------------------------------------- */
.qgrid {
  display: grid;
  gap: var(--sp-1);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px)  { .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Individual Q card. The large ghost "Q" glyph mirrors the preview and
   also doubles as a visual index on long grids. */
.qcard {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.qcard::before {
  content: "Q";
  position: absolute;
  top: 10px; right: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--sky-tint);
}
.qcard h3 {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
  padding-right: 28px; /* clear the ghost Q */
  position: relative;
  z-index: 1;
}
.qcard p {
  font-size: 0.875rem;
  color: var(--body);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* --- City card grid (state page) --------------------------------------- */
.city-grid {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ccard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ccard:hover,
.ccard:focus-visible {
  border-color: var(--sky);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* .ccard__media dropped — the placeholder image area on city cards was
   removed because there is no realistic way to source a distinct photo
   per city. The climate label that used to sit inside .ccard__media is
   now .ccard__tag, promoted to an inline eyebrow chip inside the body. */
.ccard__tag {
  align-self: flex-start;
  background: var(--rr-paper);
  color: var(--rr-ember-hover);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.ccard__body   { padding: var(--sp-3); display: flex; flex-direction: column; gap: 8px; }
.ccard__name   { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.ccard__badges { display: flex; gap: 5px; flex-wrap: wrap; }
.ccard__cta    { margin-top: 4px; color: var(--sky); font-weight: 600; font-size: 0.8125rem; }

/* Full alphabetical list under the featured cards. Reuses .nearby-cities
   pill styling for consistency across the site. */
.city-directory {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-4);
}
.city-directory a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
}
.city-directory a:hover { border-color: var(--sky); color: var(--sky); }

/* --- City hero (headline + inline form card) --------------------------- */
.city-hero { padding-block: var(--sp-6) 0; overflow: hidden; }

.city-hero__grid {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
  padding-bottom: var(--sp-5);
}
@media (min-width: 960px) {
  .city-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 420px); gap: var(--sp-6); align-items: center; }
}

.city-hero__eyebrow {
  color: var(--zinc);
  margin-bottom: var(--sp-1);
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}
.city-hero__eyebrow a { color: var(--zinc); text-decoration: underline; text-underline-offset: 3px; }
.city-hero__eyebrow a:hover { color: var(--white); }

.city-hero__stats { padding-bottom: 0; margin-top: var(--sp-3); }

/* The form card overrides the multi-step form's default (transparent) skin
   so it stands off the dark hero as a proper card. .rrf-form is untouched
   elsewhere. */
.city-hero__form .rrf-form-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  color: var(--ink);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--rr-charcoal) 20%, transparent);
}
.city-hero__form .rrf-form-wrap .rrf-label,
.city-hero__form .rrf-form-wrap .rrf-progress { color: var(--ink); }
.city-hero__form .rrf-form-wrap .rrf-input {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* --- Two-column signs + insurance -------------------------------------- */
.two-col {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) {
  .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
}
.two-col__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.two-col p { color: var(--body); font-size: 0.9375rem; }

/* --- "Last updated" note ------------------------------------------------ */
.updated {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
}

/* --- Responsive tweaks -------------------------------------------------- */
@media (max-width: 640px) {
  .state-hero__title { font-size: clamp(1.75rem, 6vw, 2rem); }
  .hstat b           { font-size: 1.125rem; }
  .qa-box__inner     { padding: var(--sp-2) 0; }
  .qa-box p          { font-size: 0.9375rem; }
  .qcard::before     { font-size: 1.5rem; top: 8px; right: 12px; }
}