/* =========================================================
   KC SPLASH — COMMERCIAL SILO CSS  v2
   Code Snippets Plugin — "KC Splash Commercial Silo CSS"
   Last updated: 2026
   REQUIRES: KC Splash Master Core CSS (tokens, buttons, pills, type)

   WHAT'S NEW IN v2 (residential parity update)
   ─────────────────────────────────────────────
   • Trust strip — C.16 — matches residential −3.2rem overlap
   • Footer CTA — C.17 — child-div parallax (Safari/iOS fix)
     Same four-layer system as residential silo v3.
     Per-page bg set via .kc-cp-XX modifier class.
   • Cross-link cards — C.18 — commercial service interlinking
   • FAQ page-card container — C.19 — single white card style
   • Service area block — C.20 — pill/accordion/map layout
   • H2 + H3 weight lock — C.21 — 950 weight on all section headings
   • Process steps — C.22 — numbered card grid
   • Review block upgrade — C.23 — full review card matching residential

   FOOTER PAGE CODES (.kc-cp-XX sets bg image per page):
     kc-cp-hub = Commercial Hub
     kc-cp-pg  = Parking Garage Cleaning
     kc-cp-pl  = Parking Lot Cleaning
     kc-cp-bw  = Building Washing
     kc-cp-hr  = High-Rise & Rooftop
     kc-cp-cc  = Commercial Concrete
     kc-cp-gr  = Graffiti Removal
     kc-cp-ac  = Awning Cleaning

   TABLE OF CONTENTS
   ── ORIGINAL (unchanged) ──────────────────────────────
   C.01  Breadcrumb
   C.02  Color + Alignment Utilities
   C.03  Section Rhythm
   C.04  Card System
   C.05  Grid Extensions
   C.06  Eyebrow / Chip
   C.07  CTA Row
   C.08  List / Checklist
   C.09  Stars + Review Block (original)
   C.10  H2 Underline Bar
   C.11  FAQ Accordion
   C.12  Inline Link
   C.13  Forwho / Callout Box
   C.14  Universal Service Page Hero (.kc-svc-hero)
   C.15  Responsive (original)
   ── NEW IN V2 ─────────────────────────────────────────
   C.16  Trust Strip
   C.17  Footer CTA — Child-Div Parallax
   C.18  Cross-Link Cards
   C.19  FAQ Page-Card Container
   C.20  Service Area Block
   C.21  H2 + H3 Weight Lock
   C.22  Process Steps
   C.23  Review Block Upgrade
   C.24  Responsive (v2 additions)
   C.25 Building Washing footer CTA background
========================================================= */


/* ─────────────────────────────────────────────────────────
   C.01  BREADCRUMB — commercial style, unchanged
─────────────────────────────────────────────────────────── */
.kc-breadcrumb { padding: 12px 0 0; }
.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-breadcrumb a { color: rgba(11,18,32,.54); text-decoration: none; transition: color .15s ease; }
.kc-breadcrumb a:hover { color: var(--kc-teal-deep); }
.kc-breadcrumb__sep { color: rgba(11,18,32,.28); font-size: 11px; font-weight: 400; }
.kc-breadcrumb [aria-current="page"] { color: var(--kc-gold); font-weight: 800; }


/* ─────────────────────────────────────────────────────────
   C.02  COLOR + ALIGNMENT UTILITIES
─────────────────────────────────────────────────────────── */
.kc-navy   { color: var(--kc-ink) !important; }
.kc-gold   { color: var(--kc-gold) !important; }
.kc-accent { color: var(--kc-gold) !important; }
.kc-muted  { color: rgba(11,18,32,.64); }
.kc-center { text-align: center; }
.kc-max    { max-width: 980px; margin-left: auto; margin-right: auto; }
.kc-sub    { margin: 0 auto 22px; max-width: 900px; }


/* ─────────────────────────────────────────────────────────
   C.03  SECTION RHYTHM
─────────────────────────────────────────────────────────── */
.kc-sec { padding: 68px 0; background: transparent; }
.kc-sec--soft {
  background:
    radial-gradient(1200px 520px at 12% 10%, rgba(4,124,132,.07), transparent 55%),
    radial-gradient(980px 520px at 88% 18%, rgba(184,149,63,.07), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,0));
  border-top: 1px solid rgba(15,23,42,.05);
  border-bottom: 1px solid rgba(15,23,42,.05);
}
.kc-sec--white { background: #fff; }
.kc-sec--dark  { background: linear-gradient(135deg, #0f1f34 0%, #1e324f 100%); }
.kc-sec--tight { padding: 34px 0; }

.kc-sec-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-sec-eyebrow--gold { color: var(--kc-gold); }


/* ─────────────────────────────────────────────────────────
   C.04  CARD SYSTEM
─────────────────────────────────────────────────────────── */
.kc-card {
  background: rgba(255,255,255,.92); border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 26px 80px rgba(15,23,42,.10), 0 2px 0 rgba(255,255,255,.75) inset;
}
.kc-card--tint {
  background:
    radial-gradient(900px 360px at 12% 0%, rgba(4,124,132,.06), transparent 62%),
    radial-gradient(900px 360px at 88% 0%, rgba(184,149,63,.06), transparent 62%),
    rgba(255,255,255,.88);
}
.kc-card--link { text-decoration: none; display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kc-card--link:hover { transform: translateY(-3px); border-color: rgba(4,124,132,.28); box-shadow: 0 34px 95px rgba(15,23,42,.14); }
.kc-card--video { height: 100%; display: flex; padding: 12px; }
.kc-card--video video { width: 100%; height: 100%; min-height: 380px; object-fit: cover; border-radius: 14px; display: block; }
.kc-link-text { margin-top: 12px; font-weight: 900; color: var(--kc-teal-deep); display: block; }


/* ─────────────────────────────────────────────────────────
   C.05  GRID EXTENSIONS
─────────────────────────────────────────────────────────── */
.kc-grid    { display: grid; gap: 18px; margin-top: 22px; }
.kc-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kc-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kc-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }


/* ─────────────────────────────────────────────────────────
   C.06  EYEBROW / CHIP
─────────────────────────────────────────────────────────── */
.kc-eyebrow { display: inline-block; letter-spacing: .22em; text-transform: uppercase; font-weight: 950; font-size: .82rem; color: var(--kc-gold); margin: 0 0 10px; }
.kc-chip { display: inline-flex; align-items: center; margin-left: 10px; padding: .24rem .6rem; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: #f6f7f8; font-weight: 900; font-size: .82rem; color: var(--kc-teal-deep); }


/* ─────────────────────────────────────────────────────────
   C.07  CTA ROW
─────────────────────────────────────────────────────────── */
.kc-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 18px; }
.kc-cta-row--center { justify-content: center; }
.kc-cta-row--left   { justify-content: flex-start; }
.kc-cta-row a.theme-btn, .kc-cta-row a.outline-btn, .kc-cta-row a.call-btn { min-height: 46px !important; padding: 13px 22px !important; }


/* ─────────────────────────────────────────────────────────
   C.08  LIST / CHECKLIST
─────────────────────────────────────────────────────────── */
.kc-list { margin: 12px 0 0; padding-left: 18px; color: rgba(15,23,42,.78); line-height: 1.75; }
.kc-list li { margin-bottom: .4em; }


/* ─────────────────────────────────────────────────────────
   C.09  STARS + REVIEW BLOCK (original — full upgrade in C.23)
─────────────────────────────────────────────────────────── */
.kc-stars { color: #facc15; font-weight: 900; letter-spacing: .5px; }
.kc-review { background: radial-gradient(980px 420px at 14% 0%, rgba(4,124,132,.07), transparent 62%), radial-gradient(980px 420px at 86% 0%, rgba(184,149,63,.07), transparent 62%), rgba(255,255,255,.94); }
.kc-review__top    { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.kc-review__quote  { margin: 0 0 12px; color: rgba(15,23,42,.80); line-height: 1.72; }
.kc-review__bottom { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.kc-muted-source   { font-size: 13px; font-weight: 900; color: rgba(11,18,32,.60); }


/* ─────────────────────────────────────────────────────────
   C.10  H2 UNDERLINE BAR
─────────────────────────────────────────────────────────── */
.kc-h2-bar::after { content: ""; display: block; width: 82px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, rgba(184,149,63,.98), rgba(4,124,132,.88)); box-shadow: 0 10px 22px rgba(15,23,42,.10); margin: 12px auto 0; }
.kc-h2-bar--left::after { margin-left: 0; margin-right: auto; }


/* ─────────────────────────────────────────────────────────
   C.11  FAQ ACCORDION (original inline style)
─────────────────────────────────────────────────────────── */
.kc-faq-block { padding: 10px 22px; }
.kc-faq__item { border-bottom: 1px solid rgba(15,23,42,.08); padding: 14px 0; }
.kc-faq__item:last-child { border-bottom: 0; }
.kc-faq__item summary { font-weight: 950; color: var(--kc-ink); cursor: pointer; letter-spacing: -.01em; list-style: none; }
.kc-faq__item summary::-webkit-details-marker { display: none; }
.kc-faq__item .kc-p { margin-top: 8px; color: rgba(11,18,32,.78); line-height: 1.75; }


/* ─────────────────────────────────────────────────────────
   C.12  INLINE LINK
─────────────────────────────────────────────────────────── */
.kc-link { color: var(--kc-teal-deep); font-weight: 900; text-decoration: none; transition: color .15s ease; }
.kc-link:hover { color: var(--kc-teal-mid); }


/* ─────────────────────────────────────────────────────────
   C.13  FORWHO / CALLOUT BOX
─────────────────────────────────────────────────────────── */
.kc-forwho { max-width: 980px; margin: 16px auto 0; padding: 12px 14px; border-radius: 14px; background: radial-gradient(900px 220px at 12% 0%, rgba(4,124,132,.10), transparent 60%), radial-gradient(900px 220px at 88% 0%, rgba(184,149,63,.10), transparent 60%), rgba(255,255,255,.72); border: 1px solid rgba(15,23,42,.10); box-shadow: 0 14px 40px rgba(15,23,42,.06); color: rgba(15,23,42,.78); font-weight: 850; line-height: 1.6; text-align: center; }


/* ─────────────────────────────────────────────────────────
   C.14  UNIVERSAL SERVICE PAGE HERO (.kc-svc-hero)
   Height: 52vh desktop / 100svh mobile
   Added: kicker pill + topband stripe in v2
─────────────────────────────────────────────────────────── */
.kc-svc-hero { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 520px; height: 52vh; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
@media (max-width: 768px) { .kc-svc-hero { height: auto; min-height: 100svh; } }
.kc-svc-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.72) contrast(1.04); }
.kc-svc-hero__overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 1000px 600px at 50% 40%, rgba(0,0,0,.04), rgba(0,0,0,.38) 75%), linear-gradient(180deg, rgba(6,10,18,.44) 0%, rgba(6,10,18,.28) 45%, rgba(6,10,18,.52) 100%); }
.kc-svc-hero__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)); }
.kc-svc-hero__inner   { position: relative; z-index: 2; width: 100%; padding: 3.5rem 1.5rem; }
.kc-svc-hero__content { max-width: 900px; margin: 0 auto; }
.kc-svc-hero__kicker  { display: inline-block; margin-bottom: .85rem; padding: .36rem .9rem; border-radius: 999px; background: rgba(184,149,63,.18); border: 1px solid rgba(184,149,63,.35); color: rgba(212,175,74,.92) !important; font-size: .78rem; font-weight: 800; letter-spacing: .10em; text-transform: uppercase; }
.kc-svc-hero__h1      { margin: 0 0 .7rem; color: #ffffff !important; font-weight: 980; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(2.5rem, 2.5vw + 1.7rem, 4rem); text-shadow: 0 3px 22px rgba(0,0,0,.44); }
/* Gold span: same size as H1 line 1 — matches residential hub (no .82em reduction) */
.kc-svc-hero__gold    { display: block; color: #D4AF4A !important; font-size: 1em; margin-top: 0; line-height: 1.05; }
.kc-svc-hero__sub     { margin: 0 auto .2rem; max-width: 580px; color: rgba(255,255,255,.88) !important; font-size: clamp(1rem, .4vw + .96rem, 1.1rem); font-weight: 500; line-height: 1.60; text-shadow: 0 1px 8px rgba(0,0,0,.28); }
.kc-svc-hero__btns    { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.4rem; }
.kc-svc-hero__trust   { color: rgba(255,255,255,.72) !important; font-size: .82rem; font-weight: 600; letter-spacing: .02em; margin-top: 1rem; }

@media (max-width: 768px) {
  .kc-svc-hero__h1   { font-size: clamp(2.6rem, 8.5vw, 3.6rem) !important; }
  .kc-svc-hero__sub  { font-size: 1rem !important; max-width: 34ch; }
  .kc-svc-hero__btns { flex-direction: column; align-items: stretch; max-width: 300px; margin-left: auto; margin-right: auto; }
}


/* ─────────────────────────────────────────────────────────
   C.15  RESPONSIVE (original)
─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .kc-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 980px)  { .kc-grid--3, .kc-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .kc-sec { padding: 48px 0; }
  .kc-sec--tight { padding: 26px 0; }
  .kc-grid { gap: 14px; }
  .kc-cta-row a.theme-btn, .kc-cta-row a.outline-btn, .kc-cta-row a.call-btn { width: 100% !important; max-width: none !important; min-height: 48px !important; }
  .kc-card--video video { min-height: 280px; }
  .kc-center { text-align: left; }
  .kc-center .kc-h2-bar::after { margin-left: 0; margin-right: auto; }
}


/* =========================================================
   ── NEW IN V2 ──────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────
   C.16  TRUST STRIP
   Overlaps hero by −2.2rem (matches residential hub).

   SPECIFICITY FIX v2.1:
   .kc-cp-trust-item span (0,1,1) was beating .kc-cp-trust-num (0,1,0).
   Fixed by:
   1. Using .kc-cp-trust-item .kc-cp-trust-num (0,2,0) — wins over (0,1,1)
   2. Hardcoded #C6A24A — no CSS variable that could fail to resolve
   3. Fixed 1.55rem — matches residential hub exactly (not clamp)
   4. span:not(.kc-cp-trust-num) — description text never touches the number

   HTML:
   <section class="kc-cp-trust-strip">
     <div class="kc-wrap">
       <div class="kc-cp-trust-shell">
         <div class="kc-cp-trust-grid">
           <div class="kc-cp-trust-item">
             <span class="kc-cp-trust-num">600k+</span>
             <strong>Sq Ft in One Night</strong>
             <span>Crown Center garage — zero shutdown</span>
           </div>
           ... (4 items total)
         </div>
       </div>
     </div>
   </section>
─────────────────────────────────────────────────────────── */
.kc-cp-trust-strip {
  margin-top: -2.2rem;   /* residential hub value */
  position: relative;
  z-index: 3;
}
.kc-cp-trust-shell {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 24px;   /* residential hub value */
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
  padding: 1.25rem;      /* residential hub value */
}
.kc-cp-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
}
.kc-cp-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;
}

/* ── Number: higher specificity (0,2,0) beats span (0,1,1) ── */
.kc-cp-trust-item .kc-cp-trust-num {
  display: block;
  color: #C6A24A;        /* hardcoded — no CSS variable */
  font-size: 1.55rem;    /* fixed, matches residential hub */
  font-weight: 950;
  line-height: 1;
  margin-bottom: .35rem;
}

/* ── Label ── */
.kc-cp-trust-item strong {
  display: block;
  color: #0B1220;        /* hardcoded — no CSS variable */
  font-size: 1rem;       /* fixed, matches residential hub */
  font-weight: 950;
  line-height: 1.2;
  margin-bottom: .28rem;
}

/* ── Description: explicitly excludes .kc-cp-trust-num ── */
.kc-cp-trust-item span:not(.kc-cp-trust-num) {
  display: block;
  color: rgba(11,18,32,.78);
  line-height: 1.55;
  font-size: .94rem;
}


/* ─────────────────────────────────────────────────────────
   C.17  FOOTER CTA — CHILD-DIV PARALLAX
   Four-layer system. Background on child div, not ::before.
   Safari/iOS safe. Matches residential silo v3 exactly.

   HTML for every commercial page footer:
   <section class="kc-cp-footer-cta kc-cp-XX" aria-label="...">
     <div class="kc-cp-footer__bg"       aria-hidden="true"></div>
     <div class="kc-cp-footer__overlay"  aria-hidden="true"></div>
     <div class="kc-cp-footer__rollover" aria-hidden="true"></div>
     <div class="kc-cp-footer__topband"  aria-hidden="true"></div>
     <div class="kc-cp-footer__inner">
       <div class="kc-cp-footer__copy">
         <h2>Your Heading <span>Gold Accent</span></h2>
         <p>Lead copy.</p>
         <div class="btn-row">
           <a href="#" class="theme-btn kc-open-quote">Get a Commercial Quote</a>
           <a href="tel:8162538462" class="call-btn">Call (816) 253-8462</a>
           <a href="/commercial-pressure-washing/" class="outline-btn">All Commercial Services</a>
           <a href="/case-studies/" class="outline-btn">View Case Studies</a>
         </div>
       </div>
     </div>
   </section>
─────────────────────────────────────────────────────────── */
.kc-cp-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-cp-footer-cta { min-height: 60vh; } }

.kc-cp-footer__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-repeat: no-repeat; background-position: center;
}
@media (min-width: 769px) { .kc-cp-footer__bg { background-attachment: fixed; } }
@supports (-webkit-touch-callout: none) { .kc-cp-footer__bg { background-attachment: scroll !important; } }
@media (max-width: 768px) { .kc-cp-footer__bg { background-attachment: scroll !important; } }

.kc-cp-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,.46) 72%),
    linear-gradient(180deg, rgba(11,34,61,.46) 0%, rgba(11,34,61,.62) 55%, rgba(11,34,61,.78) 100%);
}
.kc-cp-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%);
}
.kc-cp-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));
}
.kc-cp-footer__inner { position: relative; z-index: 3; width: 100%; padding: 3rem 1rem; }
.kc-cp-footer__copy  { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

.kc-cp-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-cp-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;
}
.kc-cp-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 — update URLs with your actual photos */
.kc-cp-hub .kc-cp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/KC-Splash-Commercial-pressure-washing-Kansas-City.jpg'); }
.kc-cp-pg  .kc-cp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/kc-splash-commercial-parking-garage-cleaning-kansas-city.jpg'); }
.kc-cp-pl  .kc-cp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/12/parking-lot-cleaning-the-beast-kansas-city-kc-splash-scaled.jpg'); }
.kc-cp-bw  .kc-cp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/kc-splash-team-pressure-washing-kansas-city.jpg'); }
.kc-cp-hr  .kc-cp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/kc-splash-commercial-parking-garage-cleaning-kansas-city.jpg'); }
.kc-cp-cc  .kc-cp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/12/parking-lot-cleaning-the-beast-kansas-city-kc-splash-scaled.jpg'); }
.kc-cp-gr  .kc-cp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/KC-Splash-Commercial-pressure-washing-Kansas-City.jpg'); }
.kc-cp-ac  .kc-cp-footer__bg { background-image: url('https://kc-splash.com/wp-content/uploads/2025/07/kc-splash-team-pressure-washing-kansas-city.jpg'); }


/* ─────────────────────────────────────────────────────────
   C.18  CROSS-LINK CARDS
   Links between commercial service pages. 2-column grid.

   HTML:
   <div class="kc-cp-cross-grid">
     <a class="kc-cp-cross-card" href="/commercial-pressure-washing/parking-lot-cleaning/">
       <div>
         <div class="kc-cp-cross-card__title">Parking Lot Cleaning</div>
         <div class="kc-cp-cross-card__desc">Drive lanes, curbs, and high-traffic concrete.</div>
       </div>
       <svg class="kc-cp-cross-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M3 8h10M9 4l4 4-4 4"/>
       </svg>
     </a>
   </div>
─────────────────────────────────────────────────────────── */
.kc-cp-cross-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px; margin-top: 1.25rem;
}
.kc-cp-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-cp-cross-card:hover {
  border-color: rgba(184,149,63,.40); transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,23,42,.10);
}
.kc-cp-cross-card__title { font-size: .95rem; font-weight: 950; color: var(--kc-ink); margin-bottom: 3px; }
.kc-cp-cross-card__desc  { font-size: .86rem; color: rgba(11,18,32,.62); line-height: 1.5; }
.kc-cp-cross-arrow       { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--kc-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* ─────────────────────────────────────────────────────────
   C.19  FAQ PAGE-CARD CONTAINER
   Single white card wrapping all FAQs. Pricing Q always first + open.

   HTML:
   <div class="kc-cp-faq kc-cp-faq--page">
     <details class="kc-cp-faq-item" open>
       <summary class="kc-cp-faq-summary">How much does parking garage cleaning cost in Kansas City?</summary>
       <div class="kc-cp-faq-answer"><p>Answer here with links.</p></div>
     </details>
     <details class="kc-cp-faq-item">...</details>
   </div>
─────────────────────────────────────────────────────────── */
.kc-cp-faq { max-width: 820px; margin: 1.75rem auto 0; }
.kc-cp-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;
}
.kc-cp-faq-item { border-top: 1px solid rgba(11,18,32,.08); overflow: hidden; }
.kc-cp-faq-item:first-child { border-top: none; }
.kc-cp-faq-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-cp-faq-summary::-webkit-details-marker { display: none; }
.kc-cp-faq-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-cp-faq-item[open] .kc-cp-faq-summary::after { content: "−"; }
.kc-cp-faq-answer { padding: 0 22px 22px; color: rgba(11,18,32,.72); line-height: 1.78; font-size: .98rem; }
.kc-cp-faq-answer p { margin-bottom: .8rem; }
.kc-cp-faq-answer p:last-child { margin-bottom: 0; }
.kc-cp-faq-answer strong { color: var(--kc-ink); font-weight: 800; }
.kc-cp-faq-answer a { color: var(--kc-teal-deep); font-weight: 800; text-decoration: none; }
.kc-cp-faq-answer a:hover { color: var(--kc-teal-mid); }
.kc-cp-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-cp-faq-links a { color: var(--kc-gold); font-weight: 800; text-decoration: none; border-bottom: 1px solid rgba(184,149,63,.35); }
.kc-cp-faq-links a:hover { color: var(--kc-gold-dark); border-bottom-color: rgba(168,130,51,.55); }


/* ─────────────────────────────────────────────────────────
   C.20  SERVICE AREA BLOCK
   Two-column: left = accordions + pills, right = map image.

   HTML: see commercial page template in project docs.
─────────────────────────────────────────────────────────── */
.kc-cp-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-cp-sa__head { text-align: center; margin-bottom: 1.25rem; }
.kc-cp-sa__sub  { max-width: 78ch; margin: 0 auto; color: rgba(11,18,32,.68); line-height: 1.7; text-align: center; }
.kc-cp-sa__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: stretch; }
.kc-cp-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-cp-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-cp-sa__cta   { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kc-cp-sa-details { margin-top: 10px; }
.kc-cp-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-cp-sa-summary::-webkit-details-marker { display: none; }
.kc-cp-sa-summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--kc-gold); font-weight: 900; }
.kc-cp-sa-details[open] .kc-cp-sa-summary { background: rgba(4,124,132,.06); border-color: rgba(4,124,132,.22); }
.kc-cp-sa-details[open] .kc-cp-sa-summary::after { content: "–"; }
.kc-cp-sa__pills   { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px 4px; }
.kc-cp-sa__counties { margin: 16px 0 0; font-size: 14px; line-height: 1.35; color: rgba(11,18,32,.78); }
.kc-cp-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; }


/* ─────────────────────────────────────────────────────────
   C.21  H2 + H3 WEIGHT LOCK
   950 weight enforced on all commercial section headings.
─────────────────────────────────────────────────────────── */
.kc-sec h2,
.kc-cp-sa h2,
.kc-cp-footer-cta h2 {
  font-weight: 950 !important;
  letter-spacing: -.028em !important;
  line-height: 1.1 !important;
}
.kc-sec h2,
.kc-cp-sa h2 {
  font-size: clamp(1.9rem, .9vw + 1.45rem, 2.7rem) !important;
  color: #0B1220 !important;
  margin: 0 auto .85rem !important;
}
.kc-sec h2 span,
.kc-cp-sa h2 span { color: #B8953F !important; }

/* Dark section overrides */
.kc-sec--dark h2         { color: #ffffff !important; }
.kc-sec--dark h2 span    { color: #D4AF4A !important; }

/* H3 weight lock */
.kc-cp-proc-card h3,
.kc-cp-cross-card__title,
.kc-cp-faq-summary,
.kc-sec h3 { font-weight: 950 !important; }

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


/* ─────────────────────────────────────────────────────────
   C.22  PROCESS STEPS
   Numbered card grid matching residential style.

   HTML:
   <div class="kc-cp-proc-grid">
     <div class="kc-cp-proc-card">
       <span class="kc-cp-proc-num">1</span>
       <h3>Walkthrough & Quote</h3>
       <p>We confirm surfaces, access, runoff, and timing before quoting.</p>
     </div>
   </div>
─────────────────────────────────────────────────────────── */
.kc-cp-proc-grid     { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.5rem; }
.kc-cp-proc-grid--4  { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kc-cp-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-cp-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-cp-proc-card h3  { margin: 0 0 .5rem; color: var(--kc-ink); font-size: 1.02rem; line-height: 1.24; }
.kc-cp-proc-card p   { margin: 0; color: rgba(11,18,32,.70); font-size: .93rem; line-height: 1.68; }


/* ─────────────────────────────────────────────────────────
   C.23  REVIEW BLOCK UPGRADE
   Full review card matching residential quality.
   3-column grid via .kc-cp-review-grid.

   HTML:
   <div class="kc-cp-review-grid">
     <div class="kc-cp-review">
       <div class="kc-cp-review__head">
         <div class="kc-cp-review__stars" aria-label="5 out of 5 stars">★★★★★</div>
         <div class="kc-cp-review__source">Google Review</div>
       </div>
       <p class="kc-cp-review__quote">"Review text."</p>
       <div class="kc-cp-review__foot">
         <div>
           <span class="kc-cp-review__name">— Name</span>
           <span class="kc-cp-review__tag">Parking Garage · Kansas City</span>
         </div>
       </div>
     </div>
   </div>
─────────────────────────────────────────────────────────── */
.kc-cp-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-top: 1.5rem; }
.kc-cp-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); display: flex; flex-direction: column; justify-content: space-between; }
.kc-cp-review__head   { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.kc-cp-review__stars  { color: var(--kc-gold); letter-spacing: .12em; font-weight: 980; font-size: 16px; line-height: 1; }
.kc-cp-review__source { font-size: 13px; font-weight: 900; color: rgba(11,18,32,.60); }
.kc-cp-review__quote  { color: rgba(11,18,32,.78); line-height: 1.72; margin: 0 0 14px; flex: 1; }
.kc-cp-review__foot   { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kc-cp-review__name   { font-weight: 950; color: rgba(11,18,32,.92); }
.kc-cp-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; }


/* ─────────────────────────────────────────────────────────
   C.24  RESPONSIVE (v2 additions)
─────────────────────────────────────────────────────────── */

/* Trust strip */
@media (max-width: 900px) { .kc-cp-trust-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) {
  .kc-cp-trust-strip { margin-top: 0; padding-top: 1rem; }
  .kc-cp-trust-shell { padding: 1rem; border-radius: 20px; }
  .kc-cp-trust-grid  { grid-template-columns: 1fr; }
  .kc-cp-trust-item  { padding: .95rem 1rem 1rem; }
}

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

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

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

/* Service area */
@media (max-width: 900px) { .kc-cp-sa__grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  .kc-cp-sa { padding: 3rem 0; }
  .kc-cp-sa__cta { flex-direction: column; align-items: stretch; }
  .kc-cp-sa__cta a { width: 100%; }
  .kc-cp-sa__map { min-height: 200px !important; max-height: 260px !important; }
}

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

/* Review grid */
@media (max-width: 900px) { .kc-cp-review-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .kc-cp-review__head { flex-direction: column; } }

C.25 Building Washing footer CTA background
/* Building Washing footer CTA background */
.kc-cp-bw .kc-cp-footer__bg {
  background-image: url('https://kc-splash.com/wp-content/uploads/2026/03/parkway-senior-living-two-crew-parallel-wash-kc-splash-scaled.jpg');
  background-position: center 30%;
}