/* =========================================================
   KC SPLASH — RESIDENTIAL SILO CSS  v3
   Code Snippets Plugin — Snippet: "KC Splash Residential Silo CSS"
   Last updated: 2026
   REQUIRES: KC Splash Master Core CSS (tokens, buttons, pills, type)
   REQUIRES: KC Splash Commercial Silo CSS (.kc-svc-hero system)

   WHAT'S NEW IN v3 (homepage patterns adopted)
   ─────────────────────────────────────────────
   • Trust strip overlap: −3.2rem (matches homepage — deeper pull)
   • Footer CTA: child-div parallax (Safari/iOS fix). Same system as
     homepage. NO ::before. HTML needs three child divs:
       .kc-rp-footer__bg + .kc-rp-footer__overlay +
       .kc-rp-footer__rollover + .kc-rp-footer__topband
   • Footer rollover: soft white feather at top edge
   • Footer topband: 4px gold→teal stripe at very top
   • Hero sizes locked: 51vh desktop / 100svh mobile (same as homepage)
   • FAQ: homepage single-card container style added (.kc-rp-faq--page)
   • Buttons: documented — use theme-btn / outline-btn / call-btn
     (master CSS classes) across all residential pages

   TABLE OF CONTENTS

   R.01  Breadcrumb (residential variant)
   R.02  Trust Strip  ← −3.2rem overlap (v3 update)
   R.03  Section Rhythm + Backgrounds
         ↳ R.03a  H2 Typography Lock (950 weight)
         ↳ R.03b  H3 Card Title Lock
   R.04  Before / After Slider
   R.05  Process Steps
   R.06  Guarantee Grid
   R.07  Review Block
   R.08  Cross-Link Cards
   R.09  More Services Nav
   R.10  FAQ Accordion
   R.11  Service Area Block
   R.12  Footer CTA — Child-Div Parallax  ← rebuilt in v3
   R.13  Hero Color Fixes (white H1 + gold span)
   R.14  Responsive
   ========================================================= */


/* ─────────────────────────────────────────────────────────
   R.01  BREADCRUMB — residential variant
─────────────────────────────────────────────────────────── */
.kc-rp-breadcrumb {
  padding: 10px 0 0;
}

.kc-rp-breadcrumb .kc-breadcrumb__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0 7px;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: rgba(11,18,32,.54);
}

.kc-rp-breadcrumb a {
  color: rgba(11,18,32,.54);
  text-decoration: none;
  transition: color .15s ease;
}

.kc-rp-breadcrumb a:hover { color: var(--kc-teal-deep); }

.kc-rp-breadcrumb .kc-breadcrumb__sep {
  color: rgba(11,18,32,.28);
  font-size: 11px;
  font-weight: 400;
}

.kc-rp-breadcrumb [aria-current="page"] {
  color: var(--kc-gold);
  font-weight: 800;
}


/* ─────────────────────────────────────────────────────────
   R.02  TRUST STRIP
   v3: overlap is now −3.2rem (matches homepage exactly).
   Was −2.2rem in v2. Deeper pull = better hero integration.

   HTML pattern (same as homepage):
   <section class="kc-rp-trust-strip">
     <div class="kc-wrap">
       <div class="kc-rp-trust-shell">
         <div class="kc-rp-trust-grid"> ... </div>
       </div>
     </div>
   </section>
─────────────────────────────────────────────────────────── */
.kc-rp-trust-strip {
  margin-top: -3.2rem;   /* v3: was -2.2rem */
  position: relative;
  z-index: 3;
}

.kc-rp-trust-shell {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 26px;
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
  padding: 1.15rem;
}

.kc-rp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
}

.kc-rp-trust-item {
  border-radius: 18px;
  padding: 1rem 1rem 1.05rem;
  background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
  border: 1px solid rgba(11,18,32,.08);
  text-align: left;
}

.kc-rp-trust-item .kc-rp-trust-num {
  display: block;
  color: var(--kc-gold);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 950;
  line-height: 1;
  margin-bottom: .38rem;
}

.kc-rp-trust-item strong {
  display: block;
  color: var(--kc-ink);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  font-weight: 950;
  line-height: 1.2;
  margin-bottom: .35rem;
}

.kc-rp-trust-item span {
  display: block;
  color: rgba(11,18,32,.78);
  line-height: 1.58;
  font-size: .95rem;
}


/* ─────────────────────────────────────────────────────────
   R.03  SECTION RHYTHM + BACKGROUNDS
─────────────────────────────────────────────────────────── */
.kc-rp-sec {
  padding: 64px 0;
}

.kc-rp-sec--tight {
  padding: 36px 0;
}

.kc-rp-sec--white {
  background: #ffffff;
}

.kc-rp-sec--soft {
  background:
    radial-gradient(1200px 520px at 12% 10%, rgba(4,124,132,.05), transparent 55%),
    radial-gradient(900px 480px at 88% 20%, rgba(184,149,63,.05), transparent 60%),
    linear-gradient(180deg, #f8f8f7 0%, #f4f7f8 100%);
  border-top: 1px solid rgba(15,23,42,.05);
  border-bottom: 1px solid rgba(15,23,42,.05);
}

.kc-rp-sec--dark {
  background: linear-gradient(135deg, #0f1f34 0%, #1e324f 100%);
}

/* Section heading underline bar */
.kc-rp-h2-bar::after {
  content: "";
  display: block;
  width: 78px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(184,149,63,.95), rgba(4,124,132,.85));
  margin: 12px auto 0;
}

.kc-rp-h2-bar--left::after {
  margin-left: 0;
  margin-right: auto;
}

/* Section eyebrow */
.kc-rp-eyebrow {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kc-teal-deep);
  margin: 0 0 .5rem;
  text-align: center;
}

.kc-rp-eyebrow--gold {
  color: var(--kc-gold);
}


/* ─────────────────────────────────────────────────────────
   R.03a  H2 TYPOGRAPHY LOCK — 950 weight, all residential pages
─────────────────────────────────────────────────────────── */
.kc-rp-sec h2,
.kc-rp-sa h2,
.kc-rp-review__title {
  font-size: clamp(1.9rem, .9vw + 1.45rem, 2.7rem) !important;
  font-weight: 950 !important;
  letter-spacing: -.028em !important;
  line-height: 1.1 !important;
  color: #0B1220 !important;
  margin: 0 auto .85rem !important;
}

/* Gold accent span inside any residential H2 */
.kc-rp-sec h2 span,
.kc-rp-sa h2 span {
  color: #B8953F !important;
}

@media (max-width: 768px) {
  .kc-rp-sec h2,
  .kc-rp-sa h2 {
    font-size: clamp(1.65rem, 4.6vw, 2.2rem) !important;
  }
}


/* ─────────────────────────────────────────────────────────
   R.03b  H3 CARD TITLE LOCK — 950 weight on all card H3s
─────────────────────────────────────────────────────────── */
.kc-rp-proc-card h3,
.kc-rp-guar-card h3,
.kc-rp-cross-card__title,
.kc-rp-ba-body h3,
.kc-rp-faq-item summary,
.kc-rp-sec h3 {
  font-weight: 950 !important;
}


/* ─────────────────────────────────────────────────────────
   R.04  BEFORE / AFTER SLIDER
─────────────────────────────────────────────────────────── */
.kc-rp-ba-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.kc-rp-ba-card {
  background: #fff;
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.kc-rp-ba-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(15,23,42,.12);
}

.kc-rp-ba-viewport {
  position: relative;
  aspect-ratio: 16/10;
  background: #f4f7f8;
  --pos: 50%;
}

.kc-rp-ba-viewport img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kc-rp-ba-after {
  clip-path: polygon(0 0, var(--pos) 0, var(--pos) 100%, 0 100%);
}

.kc-rp-ba-range {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  margin: 0 auto;
  width: min(92%, 420px);
  z-index: 4;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.kc-rp-ba-range::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(11,18,32,.35);
  border-radius: 2px;
}

.kc-rp-ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kc-gold);
  margin-top: -8px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(184,149,63,.30);
}

.kc-rp-ba-range::-moz-range-track {
  height: 4px;
  background: rgba(11,18,32,.35);
  border-radius: 2px;
}

.kc-rp-ba-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kc-gold);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(184,149,63,.30);
}

.kc-rp-ba-labels {
  position: absolute;
  inset: 12px auto auto 12px;
  z-index: 4;
  display: flex;
  gap: .5rem;
  pointer-events: none;
}

.kc-rp-ba-tag {
  background: rgba(11,18,32,.88);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  padding: .3rem .55rem;
  border-radius: 6px;
}

.kc-rp-ba-tag--after {
  background: linear-gradient(135deg, #5fb6ba 0%, #4ea7ab 40%, #3e9498 100%);
}

.kc-rp-ba-body {
  padding: 1rem 1rem 1.1rem;
}

.kc-rp-ba-body p {
  margin: 0;
  color: rgba(11,18,32,.70);
  line-height: 1.66;
  font-size: .95rem;
}


/* ─────────────────────────────────────────────────────────
   R.05  PROCESS STEPS
─────────────────────────────────────────────────────────── */
.kc-rp-proc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.kc-rp-proc-grid--4 {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.kc-rp-proc-card {
  background: #fff;
  border: 1px solid rgba(184,149,63,.14);
  border-radius: 18px;
  padding: 1.25rem 1.2rem 1.3rem;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}

.kc-rp-proc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9d7426 0%, #d3af58 52%, #ab8030 100%);
  color: #fff;
  font-size: .9rem;
  font-weight: 900;
  margin-bottom: .75rem;
  flex-shrink: 0;
}

.kc-rp-proc-card h3 {
  margin: 0 0 .5rem;
  color: var(--kc-ink);
  font-size: 1.02rem;
  line-height: 1.24;
}

.kc-rp-proc-card p {
  margin: 0;
  color: rgba(11,18,32,.70);
  font-size: .93rem;
  line-height: 1.68;
}


/* ─────────────────────────────────────────────────────────
   R.06  GUARANTEE GRID
─────────────────────────────────────────────────────────── */
.kc-rp-guar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.kc-rp-guar-grid--5 {
  grid-template-columns: repeat(5, minmax(0,1fr));
}

.kc-rp-guar-card {
  background: #fff;
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  padding: 1.1rem 1rem 1.15rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.kc-rp-guar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
  border-color: rgba(184,149,63,.22);
}

.kc-rp-guar-num {
  display: block;
  color: var(--kc-gold);
  font-size: 1.4rem;
  font-weight: 950;
  line-height: 1;
  margin-bottom: .35rem;
}

.kc-rp-guar-card h3 {
  margin: 0 0 .4rem;
  color: var(--kc-ink);
  font-size: .97rem;
  line-height: 1.24;
}

.kc-rp-guar-card p {
  margin: 0;
  color: rgba(11,18,32,.68);
  font-size: .9rem;
  line-height: 1.58;
}

.kc-rp-guar-note {
  text-align: center;
  margin-top: 1rem;
  font-size: .93rem;
  color: rgba(11,18,32,.60);
}

.kc-rp-guar-note a {
  color: var(--kc-gold);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────
   R.07  REVIEW BLOCK
─────────────────────────────────────────────────────────── */
.kc-rp-review {
  background: #fff;
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
}

.kc-rp-review__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.kc-rp-review__title {
  margin: 0;
  line-height: 1.2;
}

.kc-rp-review__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.kc-rp-review__stars {
  color: var(--kc-gold);
  letter-spacing: .12em;
  font-weight: 980;
  font-size: 16px;
  line-height: 1;
}

.kc-rp-review__source {
  font-size: 13px;
  font-weight: 900;
  color: rgba(11,18,32,.60);
}

.kc-rp-review__quote {
  color: rgba(11,18,32,.78);
  line-height: 1.72;
  margin: 0 0 14px;
}

.kc-rp-review__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kc-rp-review__name {
  font-weight: 950;
  color: rgba(11,18,32,.92);
}

.kc-rp-review__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(4,124,132,.10);
  border: 1px solid rgba(4,124,132,.22);
  color: rgba(11,18,32,.92);
  font-weight: 900;
  font-size: 12px;
  margin-left: 10px;
}

.kc-rp-review__more {
  color: var(--kc-teal-deep);
  font-weight: 900;
  font-size: .9rem;
  text-decoration: none;
  transition: color .15s ease;
}

.kc-rp-review__more:hover { color: var(--kc-teal-mid); }


/* ─────────────────────────────────────────────────────────
   R.08  CROSS-LINK CARDS
─────────────────────────────────────────────────────────── */
.kc-rp-cross-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
  margin-top: 1.25rem;
}

.kc-rp-cross-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
  border: 1.5px solid rgba(184,149,63,.18);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.kc-rp-cross-card:hover {
  border-color: rgba(184,149,63,.40);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,23,42,.10);
}

.kc-rp-cross-card__title {
  font-size: .95rem;
  color: var(--kc-ink);
  margin-bottom: 3px;
}

.kc-rp-cross-card__desc {
  font-size: .86rem;
  color: rgba(11,18,32,.62);
  line-height: 1.5;
}

.kc-rp-cross-arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--kc-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ─────────────────────────────────────────────────────────
   R.09  MORE SERVICES NAV
─────────────────────────────────────────────────────────── */
.kc-rp-more-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-top: 1rem;
}

.kc-rp-more-link {
  min-width: unset !important;
  min-height: 40px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
}


/* ─────────────────────────────────────────────────────────
   R.10  FAQ ACCORDION
   Two containers available:

   A) .kc-rp-faq — floating individual cards (original style)

   B) .kc-rp-faq--page — v3 homepage-match style.
      Wrap all <details> in a single white card.
      Use this on all new residential pages.

   HTML for B:
   <div class="kc-rp-faq kc-rp-faq--page">
     <details class="kc-rp-faq-item"> ... </details>
   </div>
─────────────────────────────────────────────────────────── */
.kc-rp-faq {
  max-width: 820px;
  margin: 1.75rem auto 0;
}

/* ── B: page-card style (homepage match) ── */
.kc-rp-faq--page {
  background: #fff;
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
  padding: 6px 16px;
  overflow: hidden;
}

/* When using --page, individual cards lose their own card styling */
.kc-rp-faq--page .kc-rp-faq-item {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(11,18,32,.08);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  transform: none !important;
}

.kc-rp-faq--page .kc-rp-faq-item:first-child {
  border-top: none;
}

.kc-rp-faq--page .kc-rp-faq-item[open] {
  border-color: transparent;
  box-shadow: none;
}

/* ── Shared item styles (both A and B) ── */
.kc-rp-faq-item {
  background: #fff;
  border: 1px solid rgba(11,18,32,.10);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(11,18,32,.06);
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.kc-rp-faq-item:hover {
  border-color: rgba(184,149,63,.35);
  box-shadow: 0 14px 34px rgba(11,18,32,.09);
  transform: translateY(-1px);
}

.kc-rp-faq-item[open] {
  border-color: rgba(184,149,63,.45);
  box-shadow: 0 16px 38px rgba(11,18,32,.10);
}

.kc-rp-faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 58px 20px 22px;
  color: var(--kc-ink);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  font-weight: 800;
  line-height: 1.4;
  transition: background .15s ease;
}

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

.kc-rp-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 500;
  color: var(--kc-ink);
  background: linear-gradient(180deg, #fffdf7 0%, #f4ebd2 100%);
  border: 1px solid rgba(184,149,63,.45);
  box-shadow: 0 4px 12px rgba(184,149,63,.14);
}

.kc-rp-faq-item[open] summary::after { content: "−"; }

.kc-rp-faq-answer {
  padding: 0 22px 22px;
  color: rgba(11,18,32,.72);
  line-height: 1.78;
  font-size: .98rem;
}

.kc-rp-faq-answer p { margin-bottom: .8rem; }
.kc-rp-faq-answer p:last-child { margin-bottom: 0; }

.kc-rp-faq-answer strong {
  color: var(--kc-ink);
  font-weight: 800;
}

.kc-rp-faq-answer a {
  color: var(--kc-teal-deep);
  font-weight: 800;
  text-decoration: none;
}

.kc-rp-faq-answer a:hover { color: var(--kc-teal-mid); }

/* FAQ footer link row */
.kc-rp-faq-links {
  max-width: 820px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: .93rem;
  color: rgba(11,18,32,.60);
  line-height: 1.7;
}

.kc-rp-faq-links a {
  color: var(--kc-gold);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(184,149,63,.35);
}

.kc-rp-faq-links a:hover {
  color: var(--kc-gold-dark);
  border-bottom-color: rgba(168,130,51,.55);
}


/* ─────────────────────────────────────────────────────────
   R.11  SERVICE AREA BLOCK
   Matching homepage layout exactly — same pill/accordion/map system.
─────────────────────────────────────────────────────────── */
.kc-rp-sa {
  padding: 3.5rem 0;
  background:
    radial-gradient(1200px 500px at 12% 10%, rgba(4,124,132,.06), transparent 55%),
    radial-gradient(900px 480px at 88% 20%, rgba(184,149,63,.05), transparent 60%),
    linear-gradient(180deg, #f8f8f7 0%, #f4f7f8 100%);
  border-top: 1px solid rgba(15,23,42,.05);
  border-bottom: 1px solid rgba(15,23,42,.05);
}

.kc-rp-sa__head {
  text-align: center;
  margin-bottom: 1.25rem;
}

.kc-rp-sa__sub {
  max-width: 78ch;
  margin: 0 auto;
  color: rgba(11,18,32,.68);
  line-height: 1.7;
  text-align: center;
}

.kc-rp-sa__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
  align-items: stretch;
}

.kc-rp-sa__left {
  background: #fff !important;
  border: 1px solid rgba(11,18,32,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 55px rgba(15,23,42,.10) !important;
  padding: 22px !important;
}

.kc-rp-sa__right {
  background: #fff !important;
  border: 1px solid rgba(11,18,32,.08) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 55px rgba(15,23,42,.10) !important;
  padding: 12px !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

.kc-rp-sa__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.kc-rp-sa-details {
  margin-top: 10px;
}

.kc-rp-sa-summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(11,18,32,.10);
  background: rgba(11,18,32,.03);
  font-weight: 900;
  cursor: pointer;
  list-style: none;
  color: var(--kc-ink);
  transition: background .15s ease, border-color .15s ease;
}

.kc-rp-sa-summary::-webkit-details-marker { display: none; }

.kc-rp-sa-summary::after {
  content: "+";
  font-size: 20px;
  line-height: 1;
  color: var(--kc-gold);
  font-weight: 900;
}

.kc-rp-sa-details[open] .kc-rp-sa-summary {
  background: rgba(4,124,132,.06);
  border-color: rgba(4,124,132,.22);
}

.kc-rp-sa-details[open] .kc-rp-sa-summary::after { content: "–"; }

.kc-rp-sa__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 4px 4px;
}

.kc-rp-sa__counties {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(11,18,32,.78);
}

.kc-rp-sa__map {
  width: 100% !important;
  min-height: 280px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
  display: block !important;
  box-shadow: 0 6px 20px rgba(15,23,42,.10) !important;
}


/* ─────────────────────────────────────────────────────────
   R.12  FOOTER CTA — CHILD-DIV PARALLAX  (v3 rebuild)
   ─────────────────────────────────────────────────────────
   HOW IT WORKS (same as homepage):
   The background image lives on a child div (.kc-rp-footer__bg),
   NOT a ::before pseudo-element. Child divs with
   background-attachment:fixed work on Safari and iOS.
   Pseudo-elements with fixed attachment break on mobile WebKit.

   HTML pattern for every residential page footer:
   ─────────────────────────────────────────────────────────
   <section class="kc-rp-footer-cta kc-rp-XX" aria-label="...">
     <div class="kc-rp-footer__bg"    aria-hidden="true"></div>
     <div class="kc-rp-footer__overlay" aria-hidden="true"></div>
     <div class="kc-rp-footer__rollover" aria-hidden="true"></div>
     <div class="kc-rp-footer__topband" aria-hidden="true"></div>
     <div class="kc-rp-footer__inner">
       <div class="kc-rp-footer__copy">
         <h2>Heading <span>Gold Accent</span></h2>
         <p>Lead copy</p>
         <div class="btn-row">
           <a href="#" class="theme-btn kc-open-quote">Get a Free Quote</a>
           <a href="tel:8162538462" class="call-btn">Call (816) 253-8462</a>
         </div>
       </div>
     </div>
   </section>
   ─────────────────────────────────────────────────────────
   Each page class (.kc-rp-hw, .kc-rp-rc, etc.) sets the bg image.
─────────────────────────────────────────────────────────── */

/* ── Shell ── */
.kc-rp-footer-cta {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 40vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #0B1220;
  color: #fff;
  text-align: center;
}

@media (max-width: 768px) {
  .kc-rp-footer-cta { min-height: 60vh; }
}

/* ── Layer 0: Background photo (parallax lives here, not ::before) ── */
.kc-rp-footer__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Desktop: CSS fixed parallax on child div */
@media (min-width: 769px) {
  .kc-rp-footer__bg { background-attachment: fixed; }
}

/* iOS/Safari: fixed attachment breaks on mobile WebKit — scroll fallback */
@supports (-webkit-touch-callout: none) {
  .kc-rp-footer__bg { background-attachment: scroll !important; }
}

/* Mobile: always scroll */
@media (max-width: 768px) {
  .kc-rp-footer__bg { background-attachment: scroll !important; }
}

/* ── Layer 1: Dark gradient overlay ── */
.kc-rp-footer__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(0,0,0,.10), rgba(0,0,0,.44) 72%),
    linear-gradient(180deg, rgba(11,34,61,.44) 0%, rgba(11,34,61,.60) 55%, rgba(11,34,61,.74) 100%);
}

/* ── Layer 2: White feather rollover at top edge ── */
.kc-rp-footer__rollover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(248,247,244,.26) 0%,
    rgba(248,247,244,.10) 38%,
    transparent 100%
  );
}

/* ── Layer 3: Gold → teal 4px accent stripe at very top ── */
.kc-rp-footer__topband {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  z-index: 4;
  background: linear-gradient(90deg, rgba(184,149,63,.96), rgba(4,124,132,.85));
}

/* ── Content wrapper ── */
.kc-rp-footer__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 3rem 1rem;
}

.kc-rp-footer__copy {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ── Footer H2 — white + gold span ── */
.kc-rp-footer-cta h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: center !important;
  margin: 0 auto .6rem !important;
  font-size: clamp(2rem, 1.35vw + 1.55rem, 3.2rem) !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
  line-height: 1.04 !important;
  text-shadow: 0 4px 22px rgba(0,0,0,.38) !important;
}

.kc-rp-footer-cta h2 span {
  color: #D4AF4A !important;
  -webkit-text-fill-color: #D4AF4A !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ── Footer lead paragraph ── */
.kc-rp-footer-cta p {
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  text-align: center !important;
  margin: 0 auto 1.25rem !important;
  max-width: 72ch;
  font-size: clamp(1rem, .16vw + .98rem, 1.08rem) !important;
  line-height: 1.68 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

/* ── Per-page background images ── */
.kc-rp-hw  .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/KC-Splash-House-Washing-Side-Angle-Soft-Wash-1536x1152.webp'); }
@media (max-width:768px){ .kc-rp-hw .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/KC-Splash-House-Washing-Side-Angle-Soft-Wash-768x576.webp'); } } /* 2026-10-08: right-sized footer photo (was 247KB full-size jpeg on every page) */
.kc-rp-rc  .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/roof-cleaning-closeup-kc-splash-scaled.jpeg'); }
.kc-rp-gc  .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/06/Gutter-Cleaning-Service-near-me.webp'); }
.kc-rp-dc  .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/06/Driveway-Cleaning.webp'); }
.kc-rp-df  .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/before-after-fence-cleaning-kansas-city-kc-splash.jpg'); }
.kc-rp-wc  .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/06/Window-Washing.webp'); }
.kc-rp-sw  .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2026/05/kc-splash-house-washing-luxury-brick-estate-soft-wash-kansas-city.jpg'); }
.kc-rp-hub .kc-rp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2026/05/kc-splash-house-washing-luxury-brick-estate-soft-wash-kansas-city.jpg'); }


/* ─────────────────────────────────────────────────────────
   R.13  HERO COLOR FIXES
   White H1 + gold span — locked for ALL residential heroes.
─────────────────────────────────────────────────────────── */

/* White H1 */
.kc-rp-hero__h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Gold accent span */
.kc-rp-hero__gold {
  color: #D4AF4A !important;
  -webkit-text-fill-color: #D4AF4A !important;
  display: block;
}

/* Hero kicker pill */
.kc-rp-hero__kicker {
  color: #ffffff !important;
}

/* Hero body paragraph */
.kc-rp-hero__p {
  color: rgba(255,255,255,.96) !important;
}

/* Legacy per-page hero classes — kept for backwards compatibility */
.kc-rp-hw-hero__h1, .kc-rp-rc-hero__h1, .kc-rp-gc-hero__h1,
.kc-rp-dc-hero__h1, .kc-rp-df-hero__h1, .kc-rp-wc-hero__h1,
.kc-rp-sw-hero__h1 { color: #ffffff !important; }

.kc-rp-hw-hero__gold, .kc-rp-rc-hero__gold, .kc-rp-gc-hero__gold,
.kc-rp-dc-hero__gold, .kc-rp-df-hero__gold, .kc-rp-wc-hero__gold,
.kc-rp-sw-hero__gold { color: #D4AF4A !important; display: block; }


/* ─────────────────────────────────────────────────────────
   R.14  RESPONSIVE
─────────────────────────────────────────────────────────── */

/* Trust strip */
@media (max-width: 960px) {
  .kc-rp-trust-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px) {
  .kc-rp-trust-strip  { margin-top: -1.5rem; }
  .kc-rp-trust-shell  { padding: 1rem; border-radius: 20px; }
  .kc-rp-trust-grid   { grid-template-columns: 1fr; }
  .kc-rp-trust-item   { padding: .95rem 1rem 1rem; }
}

/* Sections */
@media (max-width: 768px) {
  .kc-rp-sec        { padding: 44px 0; }
  .kc-rp-sec--tight { padding: 28px 0; }
}

/* Before / After */
@media (max-width: 768px) {
  .kc-rp-ba-grid { grid-template-columns: 1fr; }
}

/* Process */
@media (max-width: 900px) {
  .kc-rp-proc-grid,
  .kc-rp-proc-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .kc-rp-proc-grid,
  .kc-rp-proc-grid--4 { grid-template-columns: 1fr; }
}

/* Guarantee */
@media (max-width: 900px) {
  .kc-rp-guar-grid--5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 768px) {
  .kc-rp-guar-grid,
  .kc-rp-guar-grid--5 { grid-template-columns: 1fr; }
}

/* Cross links */
@media (max-width: 640px) {
  .kc-rp-cross-grid { grid-template-columns: 1fr; }
}

/* More services nav */
@media (max-width: 768px) {
  .kc-rp-more-nav     { flex-direction: column; align-items: center; }
  .kc-rp-more-nav a   { width: min(520px, 100%); }
}

/* FAQ */
@media (max-width: 768px) {
  .kc-rp-faq-item summary  { padding: 17px 50px 17px 17px; font-size: 1rem; }
  .kc-rp-faq-answer        { padding: 0 17px 18px; }
}

/* Service area */
@media (max-width: 900px) {
  .kc-rp-sa__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .kc-rp-sa          { padding: 3rem 0; }
  .kc-rp-sa__cta     { flex-direction: column; align-items: stretch; }
  .kc-rp-sa__cta a   { width: 100%; }
  .kc-rp-sa__map     { min-height: 200px !important; max-height: 260px !important; }
}

/* Footer CTA */
@media (max-width: 768px) {
  .kc-rp-footer__rollover { height: 80px; }
}

/* Review block */
@media (max-width: 640px) {
  .kc-rp-review__head   { flex-direction: column; }
  .kc-rp-review__rating { align-items: flex-start; }
}

/* =========================================================
   MOBILE BREADCRUMB REORDER (added 2026-05-10)
   On mobile only, move .kc-rp-breadcrumb to appear after
   .kc-rp-trust-strip on residential service pages.
   Desktop is unaffected (the @media rule scopes to <=768px).
   Pages without a breadcrumb no-op gracefully because
   :has() does not match.
   ========================================================= */
/* Apply at all viewport widths so desktop, tablet, and mobile match. */
section:has(> .kc-rp-breadcrumb):has(> .kc-rp-trust-strip) {
  display: flex;
  flex-direction: column;
}
section:has(> .kc-rp-breadcrumb) > * { order: 99; }
section:has(> .kc-rp-breadcrumb) > .hero { order: 1; }
section:has(> .kc-rp-breadcrumb) > .kc-rp-trust-strip { order: 2; }
section:has(> .kc-rp-breadcrumb) > .kc-rp-breadcrumb { order: 3; }
/* Tighten gap above breadcrumb when reordered (default has 80px top padding for old position) */
section:has(> .kc-rp-breadcrumb):has(> .kc-rp-trust-strip) > .kc-rp-breadcrumb { padding-top: 24px; padding-bottom: 8px; }