/* =============================================================
   City Renovations — Design Tokens
   Source of truth for colors, type, spacing, motion, layout.
   @font-face declarations live inline in head-meta.njk so the
   preloaded fonts match before the bundle CSS round-trip lands.
   ============================================================= */

:root {
  /* ===== Color — Brand ===== */
  --cr-ink:        #0B0B0C;
  --cr-ink-soft:   #1F2024;
  --cr-paper:      #FFFFFF;
  --cr-paper-2:    #F9FAFB;
  --cr-paper-3:    #F4F5F7;
  --cr-line:       #E6E7EA;
  --cr-line-soft:  #F0F1F3;

  /* ===== Color — Action / Accent (orange CTA is locked across all variants) =====
     `--cr-orange` is the brand surface tone; use it on tinted/decorative
     backgrounds where contrast doesn't apply. For button backgrounds with
     white text and for orange foreground text on white, use the darker
     `--cr-orange-text` (≥5.7:1, AA pass). */
  --cr-orange:        #F97316;
  --cr-orange-hover:  #EA6A0F;
  --cr-orange-press:  #C95A0C;
  --cr-orange-soft:   #FFF1E6;
  --cr-orange-tint:   #FFE3CC;
  --cr-orange-text:   #B14E0A; /* AA-pass on #FFF (5.30:1) — buttons + foreground */
  --cr-orange-text-h: #983E08; /* hover */
  --cr-orange-text-p: #7E3206; /* press */

  /* Mobile nav "you are here" highlight (current page only). Faint warm
     tint + a solid left accent bar so it reads without relying on colour
     alone. Desktop nav uses the breadcrumb for this, so these are consumed
     only inside the max-width:1000px nav rules. */
  --cr-nav-active-bg:  var(--cr-orange-soft);
  --cr-nav-active-bar: var(--cr-orange);

  /* ===== Color — Neutrals (slate scale) ===== */
  --cr-n-50:  #F9FAFB;
  --cr-n-100: #F3F4F6;
  --cr-n-200: #E5E7EB;
  --cr-n-300: #D1D5DB;
  --cr-n-400: #9CA3AF;
  --cr-n-500: #5B6471; /* darkened from Tailwind 500 (#6B7280) to pass AA on white + alt bg */
  --cr-n-600: #4B5563;
  --cr-n-700: #374151;
  --cr-n-800: #1F2937;
  --cr-n-900: #111827;

  /* ===== Color — Semantic ===== */
  --cr-success: #16A34A;
  --cr-warning: #F59E0B;
  --cr-danger:  #DC2626;
  --cr-info:    #2563EB;

  /* ===== Color — Variant Accents (imagery + soft tints, never buttons) ===== */
  --cr-renovation:  #2563EB;
  --cr-landscaping: #2F6F3E;
  --cr-plumbing:    #0EA5E9;
  --cr-plumbing-text: #075985; /* AA-pass on white (7.05:1) — for text + eyebrows */
  --cr-plumbing-100: #E0F2FE;
  --cr-plumbing-300: #7DD3FC;

  /* Civil Works variant — slate/concrete palette for structural & finishing trades. */
  --cr-civilworks:      #475569; /* slate-600 — surface tone */
  --cr-civilworks-text: #1E293B; /* slate-800 — AA-pass on white (12.6:1) for text + eyebrows */
  --cr-civilworks-100:  #F1F5F9; /* slate-100 — alt section bg */
  --cr-civilworks-300:  #94A3B8; /* slate-400 — soft accents */

  /* Painting variant — multi-color inspiration palette (never primary text). */
  --cr-paint-blue-100:    #E0F2FE;
  --cr-paint-blue-300:    #7DD3FC;
  --cr-paint-green-100:   #DCFCE7;
  --cr-paint-green-300:   #7FD4A5;
  --cr-paint-yellow-100:  #FEF9C3;
  --cr-paint-yellow-300:  #FDEDA3;
  --cr-paint-neutral-100: #F5F5F4;
  --cr-paint-neutral-300: #D6D3D1;
  --cr-painting:          var(--cr-paint-neutral-300);

  /* ===== Foreground / Background tokens ===== */
  --cr-fg-1: var(--cr-ink);
  --cr-fg-2: var(--cr-n-700);
  --cr-fg-3: var(--cr-n-500);
  --cr-fg-4: var(--cr-n-400);
  --cr-fg-on-orange: #FFFFFF;
  --cr-fg-on-ink:    #FFFFFF;

  --cr-bg-1: var(--cr-paper);
  --cr-bg-2: var(--cr-paper-2);
  --cr-bg-3: var(--cr-paper-3);
  --cr-bg-ink: var(--cr-ink);

  /* ===== Type families ===== */
  --cr-font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --cr-font-sans:    "DM Sans", system-ui, -apple-system, sans-serif;
  --cr-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== Type scale ===== */
  --cr-fs-12: 0.75rem;
  --cr-fs-13: 0.8125rem;
  --cr-fs-14: 0.875rem;
  --cr-fs-15: 0.9375rem;
  --cr-fs-16: 1rem;
  --cr-fs-18: 1.125rem;
  --cr-fs-20: 1.25rem;
  --cr-fs-24: 1.5rem;
  --cr-fs-30: 1.875rem;
  --cr-fs-36: 2.25rem;
  --cr-fs-48: 3rem;
  --cr-fs-60: 3.75rem;
  --cr-fs-72: 4.5rem;

  /* ===== Spacing — 8px scale ===== */
  --cr-s-0:  0;
  --cr-s-1:  4px;
  --cr-s-2:  8px;
  --cr-s-3:  12px;
  --cr-s-4:  16px;
  --cr-s-5:  24px;
  --cr-s-6:  32px;
  --cr-s-7:  48px;
  --cr-s-8:  64px;
  --cr-s-9:  96px;
  --cr-s-10: 128px;

  /* ===== Radii ===== */
  --cr-r-0:    0px;
  --cr-r-sm:   4px;
  --cr-r-md:   8px;
  --cr-r-lg:   12px;
  --cr-r-xl:   16px;
  --cr-r-2xl:  24px;
  --cr-r-pill: 999px;

  /* ===== Shadows ===== */
  --cr-shadow-xs:    0 1px 2px rgba(15, 18, 23, 0.06);
  --cr-shadow-sm:    0 1px 3px rgba(15, 18, 23, 0.08), 0 1px 2px rgba(15, 18, 23, 0.04);
  --cr-shadow-md:    0 6px 16px rgba(15, 18, 23, 0.08), 0 2px 4px rgba(15, 18, 23, 0.04);
  --cr-shadow-lg:    0 18px 40px rgba(15, 18, 23, 0.10), 0 4px 10px rgba(15, 18, 23, 0.06);
  --cr-shadow-xl:    0 30px 60px rgba(15, 18, 23, 0.12);
  --cr-shadow-cta:   0 8px 20px rgba(249, 115, 22, 0.28);
  --cr-shadow-inset: inset 0 0 0 1px rgba(15, 18, 23, 0.06);

  /* ===== Motion ===== */
  --cr-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --cr-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --cr-ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1);
  --cr-dur-1: 120ms;
  --cr-dur-2: 200ms;
  --cr-dur-3: 320ms;
  --cr-dur-4: 480ms;

  /* ===== Layout ===== */
  --cr-container:    1200px;
  --cr-container-sm: 960px;
  --cr-gutter:       24px;

  /* ===== Short-form aliases =====
     The canonical names are --cr-* (prefixed). The aliases below are
     the un-prefixed short forms that sub-pages use heavily inside their
     inline <style> blocks (--ink, --orange, --paper, etc.). They remain
     part of the public token surface — sub-page authors may continue to
     use either form. */
  --ink: var(--cr-ink);
  --paper: var(--cr-paper);
  --paper-2: var(--cr-paper-2);
  --paper-3: var(--cr-paper-3);
  --line: var(--cr-line);
  --line-soft: var(--cr-line-soft);

  /* Shorthand aliases route to AA-pass shades; brand `--cr-orange` stays
     for decorative use (lines, dots, focus rings, shadows). */
  --orange: var(--cr-orange-text);
  --orange-h: var(--cr-orange-text-h);
  --orange-p: var(--cr-orange-text-p);
  --orange-soft: var(--cr-orange-soft);
  --orange-tint: var(--cr-orange-tint);

  --n-50: var(--cr-n-50);
  --n-100: var(--cr-n-100);
  --n-200: var(--cr-n-200);
  --n-300: var(--cr-n-300);
  --n-400: var(--cr-n-400);
  --n-500: var(--cr-n-500);
  --n-600: var(--cr-n-600);
  --n-700: var(--cr-n-700);
  --n-800: var(--cr-n-800);
  --n-900: var(--cr-n-900);

  --green: var(--cr-success);
  --blue: var(--cr-renovation);
  --blue-soft: rgba(37,99,235,0.08);
  --blue-deep: #1D4ED8;

  --shadow-sm: var(--cr-shadow-sm);
  --shadow-md: var(--cr-shadow-md);
  --shadow-lg: var(--cr-shadow-lg);
  --shadow-xl: var(--cr-shadow-xl);
  --shadow-cta: var(--cr-shadow-cta);

  --ease-out: var(--cr-ease-out);
  --ease-spring: var(--cr-ease-spring);

  --font-display: var(--cr-font-display);
  --font-sans: var(--cr-font-sans);

  --max-w: var(--cr-container);
  --gutter: var(--cr-gutter);

  /* lucide circle-alert — used as a CSS mask by .form-error::before so every
     inline validation message shows the same icon as the home page. */
  --cr-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
}

/* =============================================================
   City Renovations — Base
   Reset, typography helpers, generic utilities. Sits on tokens.css.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Offset hash-link jumps so anchor targets land below the sticky nav (60px + breathing room). */
  scroll-padding-top: 72px;
}
body {
  font-family: var(--cr-font-sans);
  background: var(--cr-bg-1);
  color: var(--cr-fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Contain inadvertent horizontal overflow (marquee tracks, negative-margin
     bleeds, oversize images) so it can't trigger a horizontal scrollbar.
     This MUST live on <body>, not <html>: setting any non-visible overflow
     on the root element makes the root the scroll container, and per the
     CSS overflow-coupling rule a `clip` x-axis forces the `visible` y-axis
     to compute as `auto`. iOS Safari then mis-positions `position: sticky`
     descendants (the nav) on tap/scroll repaints — the bar visibly jumps
     left. Keeping the clip on the non-scrolling <body> leaves the sticky
     containing block as the viewport, which WebKit handles correctly. */
  overflow-x: clip;
}
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; cursor: pointer; }

/* ===== Semantic typography helpers ===== */

.cr-display {
  font-family: var(--cr-font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, var(--cr-fs-72));
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--cr-fg-1);
}

.cr-h1 {
  font-family: var(--cr-font-sans);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, var(--cr-fs-48));
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cr-fg-1);
}

.cr-h2 {
  font-family: var(--cr-font-sans);
  font-weight: 700;
  font-size: var(--cr-fs-36);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--cr-fg-1);
}

.cr-h3 {
  font-family: var(--cr-font-sans);
  font-weight: 600;
  font-size: var(--cr-fs-24);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cr-fg-1);
}

.cr-h4 {
  font-family: var(--cr-font-sans);
  font-weight: 600;
  font-size: var(--cr-fs-20);
  line-height: 1.3;
  color: var(--cr-fg-1);
}

.cr-eyebrow {
  font-family: var(--cr-font-sans);
  font-weight: 600;
  font-size: var(--cr-fs-13);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cr-orange-text);
}

.cr-lead   { font-family: var(--cr-font-sans); font-weight: 400; font-size: var(--cr-fs-20); line-height: 1.55; color: var(--cr-fg-2); }
.cr-body   { font-family: var(--cr-font-sans); font-weight: 400; font-size: var(--cr-fs-16); line-height: 1.6;  color: var(--cr-fg-2); }
.cr-small  { font-family: var(--cr-font-sans); font-weight: 400; font-size: var(--cr-fs-14); line-height: 1.5;  color: var(--cr-fg-3); }
.cr-caption { font-family: var(--cr-font-sans); font-weight: 500; font-size: var(--cr-fs-13); line-height: 1.4; color: var(--cr-fg-3); letter-spacing: 0.01em; }
.cr-mono   { font-family: var(--cr-font-mono); font-size: var(--cr-fs-14); color: var(--cr-fg-2); }

.cr-wordmark {
  font-family: var(--cr-font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cr-ink);
}

/* Inline icon helper — sized via the icon() macro's width/height. */
.ck-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ===== Canonical Service Coverage section =====
   Rendered by partials/coverage.njk on every landing page. Replaces the
   former per-variant .ho-/.rl-/.pn-/.cw-coverage rules so the block looks
   identical sitewide. Lives in base.css (concatenated into every bundle). */
.ck-coverage {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: center;
}
.ck-coverage__map {
  position: relative;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-r-xl);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.ck-coverage__map img,
.ck-coverage__map picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ck-coverage__map-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(17, 24, 39, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 24, 39, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ck-coverage__h {
  font-family: var(--cr-font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  color: var(--cr-ink);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 8px 0 12px;
}
.ck-coverage__sub {
  font-size: 15px;
  color: var(--cr-fg-2);
  line-height: 1.6;
  margin-bottom: 16px;
}
.ck-coverage__cities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.ck-coverage__cities li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--cr-n-700);
}
.ck-coverage__cities .ck-icon {
  color: var(--cr-success);
  flex-shrink: 0;
}
.ck-coverage__cta {
  margin-top: 24px;
}
@media (max-width: 1000px) {
  .ck-coverage {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ck-coverage__map {
    order: -1;
  }
}
@media (max-width: 600px) {
  .ck-coverage__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Shared spec / comparison table component =====
   Used by civil-works/electrical-works (origin) and the W2.T6 material
   comparison tables across renovation, painting, landscaping & civil-works.
   Pages may add a one-line accent override (e.g. hover tint) locally. */
.specs-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.specs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs-table thead { background: var(--ink); }
.specs-table th { padding: 16px 18px; text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); font-weight: 700; border-right: 1px solid rgba(255,255,255,.08); }
.specs-table th:last-child { border-right: 0; }
.specs-table td { padding: 16px 18px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; color: var(--n-700); line-height: 1.5; }
.specs-table td:last-child { border-right: 0; }
.specs-table tbody tr:nth-child(even) { background: var(--paper-2); }
.specs-table tbody tr:hover { background: var(--paper-2); }
.specs-table td strong { color: var(--ink); display: block; margin-bottom: 2px; }
.specs-cap { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; margin-right: 4px; }
.specs-cap--good { background: rgba(34,197,94,.12); color: #0F6A33; }
.specs-cap--ok { background: rgba(245,158,11,.14); color: #9A4408; }
.specs-cap--basic { background: rgba(37,99,235,.12); color: #1E40AF; }
.specs-foot { font-size: 12px; color: var(--n-500); padding: 14px 18px; background: var(--paper-2); border-top: 1px solid var(--line); line-height: 1.55; }
@media (max-width: 760px) {
  .specs-wrap { overflow-x: auto; }
  .specs-table { min-width: 640px; }
  .specs-table { font-size: 13px; }
  .specs-table th, .specs-table td { padding: 12px; }
}

/* =============================================================
   City Renovations — Chrome
   Buttons, page container, sections, nav, footer, sticky CTA, form.
   Variant-agnostic. Loads after tokens.css + base.css.
   ============================================================= */

/* ===== Variant switcher (top dev-strip) ===== */
.vs-switcher {
  position: sticky; top: 0; z-index: 60;
  background: #0B0B0C; color: #fff;
  padding: 10px 22px; display: flex; gap: 10px; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--cr-font-sans);
}
.vs-switcher__lbl { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-right: 6px; }
.vs-switcher__btn {
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px;
  color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.06);
  text-decoration: none; transition: all 200ms var(--cr-ease-out);
  display: inline-flex; align-items: center;
}
.vs-switcher__btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
.vs-switcher__btn.is-active { background: var(--cr-orange-text); color: #fff; }
.vs-switcher__spacer { flex: 1; }
.vs-switcher__phone { font-size: 12.5px; color: rgba(255,255,255,0.62); font-weight: 500; }

/* ===== Buttons ===== */
.ck-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cr-font-sans); font-weight: 600;
  font-size: 15px; line-height: 1; padding: 14px 22px;
  border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: all 200ms var(--cr-ease-out);
  white-space: nowrap;
}
.ck-btn--sm { padding: 10px 16px; font-size: 13px; }
.ck-btn--lg { padding: 16px 26px; font-size: 16px; }
.ck-btn--primary { background: var(--cr-orange-text); color: #fff; box-shadow: var(--cr-shadow-cta); }
.ck-btn--primary:hover { background: var(--cr-orange-text-h); transform: translateY(-1px); }
.ck-btn--primary:active { background: var(--cr-orange-text-p); transform: scale(0.98); }
.ck-btn--ghost { background: transparent; color: var(--cr-ink); border-color: var(--cr-ink); }
.ck-btn--ghost:hover { background: var(--cr-ink); color: #fff; }
.ck-btn--secondary { background: var(--cr-ink); color: #fff; }
.ck-btn--whatsapp { background: #075E54; color: #fff; border-color: #075E54; }
.ck-btn--whatsapp:hover { background: #054C44; border-color: #054C44; transform: translateY(-1px); }

/* ===== Layout ===== */
.ck-page { max-width: var(--cr-container); margin: 0 auto; padding: 0 var(--cr-gutter); }
.ck-section { padding: 80px 0; background: var(--cr-bg-1); }
.ck-section--lg { padding: 96px 0; }
.ck-section--alt { background: var(--cr-bg-2); }
.ck-section--ink { background: var(--cr-ink); color: #fff; }

/* Section background system — variant overrides on the alt band only. */
[data-variant="painting"]    .ck-section--alt { background: var(--cr-paint-neutral-100); }
[data-variant="landscaping"] .ck-section--alt { background: #F4F8F2; }
[data-variant="plumbing"]    .ck-section--alt { background: var(--cr-plumbing-100); }
[data-variant="civil-works"] .ck-section--alt { background: var(--cr-civilworks-100); }

.ck-section__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; max-width: 640px; }
.ck-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cr-orange-text); }
.ck-h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0; color: var(--cr-fg-1); }

/* Variant accent on shared kit */
[data-variant="painting"] .ck-eyebrow { color: var(--cr-orange-text); }

/* ===== Nav ===== */
.ck-nav {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--cr-line-soft);
  background: var(--cr-bg-1);
  transition: box-shadow 200ms var(--cr-ease-out);
}
.ck-nav.is-scrolled { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.ck-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 14px 0;
  min-height: 60px;
}
.ck-nav__brand { display: flex; align-items: center; gap: 10px; }
.ck-nav__mark { height: 32px; }
.ck-nav__wm { font-family: var(--cr-font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cr-ink); }
.ck-nav__links { display: flex; gap: 28px; }
.ck-nav__link { font-size: 14px; font-weight: 500; color: var(--cr-fg-2); transition: color 120ms var(--cr-ease-out); }
.ck-nav__link:hover { color: var(--cr-fg-1); }
.ck-nav__link.is-active { color: var(--cr-fg-1); font-weight: 600; }
/* "Home" row exists only inside the mobile menu (desktop uses the logo);
   hidden by default, re-shown in the max-width:1000px block. */
.ck-nav__link--mobile-only { display: none; }
.ck-nav__right { display: flex; align-items: center; gap: 14px; }
.ck-nav__phone { font-size: 13px; font-weight: 600; color: var(--cr-fg-1); }
.ck-nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: var(--cr-fg-1); cursor: pointer; border-radius: 8px;
}
.ck-nav__toggle:focus-visible { outline: 2px solid var(--cr-orange-text); outline-offset: 2px; }
.ck-nav__toggle-icon { display: inline-flex; align-items: center; justify-content: center; }
.ck-nav__toggle-icon--close { display: none; }
.ck-nav.is-open .ck-nav__toggle-icon--menu { display: none; }
.ck-nav.is-open .ck-nav__toggle-icon--close { display: inline-flex; }

/* ===== Service dropdown groups =====
   Desktop: parent label is a real link to the section landing page; the
   adjacent chevron button is the keyboard/touch trigger. Panel opens on
   hover, on keyboard focus anywhere in the group (:focus-within), or when
   JS sets the disclosure button's aria-expanded="true" (touch/no-hover). */
.ck-nav__group { position: relative; display: flex; align-items: center; gap: 2px; }
.ck-nav__link--parent { display: inline-flex; align-items: center; }
.ck-nav__disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; margin: 0;
  background: transparent; border: 0; color: var(--cr-fg-2);
  cursor: pointer; border-radius: 6px;
}
.ck-nav__disc:hover { color: var(--cr-fg-1); }
.ck-nav__disc:focus-visible { outline: 2px solid var(--cr-orange-text); outline-offset: 2px; }
.ck-nav__chev { display: inline-flex; transition: transform 160ms var(--cr-ease-out); }
.ck-nav__group:hover .ck-nav__chev,
.ck-nav__group:focus-within .ck-nav__chev,
.ck-nav__disc[aria-expanded="true"] .ck-nav__chev { transform: rotate(180deg); }
.ck-nav__sub {
  /* Centered under its own group (not left-edge-aligned) so an open panel
     stays under its trigger instead of bleeding right under the next nav
     items — that overlap made the gap to the adjacent menu tight and
     caused stray clicks landing on the open dropdown. */
  position: absolute; top: 100%; left: 50%;
  min-width: 248px;
  display: flex; flex-direction: column;
  padding: 8px;
  background: var(--cr-bg-1);
  border: 1px solid var(--cr-line-soft);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 140ms var(--cr-ease-out), transform 140ms var(--cr-ease-out), visibility 0s linear 140ms;
  z-index: 50;
}
/* Invisible hover bridge over the 6px gap so moving the cursor from the
   trigger down into the panel doesn't pass through dead space and close it. */
.ck-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* Desktop-only. These compound selectors are specificity (0,3,0); the mobile
   `.ck-nav__sub { transform: none }` reset is only (0,1,0) and a media query
   adds zero specificity, so at global scope this rule WINS on touch too. On
   iOS a tap sets sticky :hover / :focus-within on the group, this `transform:
   translate(-50%, 0)` then yanks the in-flow mobile submenu 50% of its width
   off-screen left (looks like "the nav jumps left"). Gating it behind the
   desktop breakpoint is what keeps the mobile reset uncontested. */
@media (min-width: 1001px) {
  .ck-nav__group:hover .ck-nav__sub,
  .ck-nav__group:focus-within .ck-nav__sub,
  .ck-nav__disc[aria-expanded="true"] + .ck-nav__sub {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity 140ms var(--cr-ease-out), transform 140ms var(--cr-ease-out), visibility 0s linear 0s;
  }
}
.ck-nav__sublink {
  font-size: 13.5px; font-weight: 500; color: var(--cr-fg-2);
  padding: 9px 12px; border-radius: 8px; white-space: nowrap;
  transition: background 120ms var(--cr-ease-out), color 120ms var(--cr-ease-out);
}
.ck-nav__sublink:hover { background: var(--cr-paper); color: var(--cr-fg-1); }
.ck-nav__sublink.is-active { color: var(--cr-fg-1); font-weight: 600; background: var(--cr-paper); }

/* ===== Generic service grid ===== */
.ck-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ck-svc {
  background: var(--cr-paper); border: 1px solid var(--cr-line); border-radius: 12px;
  padding: 24px; box-shadow: var(--cr-shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
  transition: all 200ms var(--cr-ease-out); cursor: pointer;
  text-decoration: none; color: inherit;
}
.ck-svc:hover { transform: translateY(-2px); box-shadow: var(--cr-shadow-md); border-color: var(--cr-line); }
.ck-svc:focus-visible { outline: 2px solid var(--cr-orange-text); outline-offset: 2px; }
.ck-svc__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--cr-orange-soft); color: var(--cr-orange-press);
  display: flex; align-items: center; justify-content: center;
}
.ck-svc__title { font-size: 17px; font-weight: 700; color: var(--cr-fg-1); }
.ck-svc__desc  { font-size: 14px; color: var(--cr-fg-2); line-height: 1.5; }
.ck-svc__cta   { font-size: 13px; font-weight: 600; color: var(--cr-orange-text); margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ===== Sticky mobile CTA — spec: mobile-spec.md §4 ===== */
.ck-sticky {
  display: none; /* hidden on desktop; mobile media block flips to flex */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  /* Height must grow by the safe-area inset, not absorb it. With border-box,
     a fixed 64px height + padding-bottom:env(safe-area-inset-bottom) shrinks
     the content box when iOS Safari's bottom toolbar collapses on scroll-down,
     clipping the 44px buttons. */
  height: calc(64px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  align-items: center;
  /* Promote to its own compositor layer so it doesn't count toward CLS when
     layout below it changes (e.g. fonts swap, images load). Lighthouse was
     flagging this element for ~0.14 CLS on the civil-works landing. */
  transform: translateZ(0);
  contain: layout style paint;
}
.ck-sticky__btn {
  flex: 1; height: 44px;
  border-radius: 6px;
  font-family: var(--cr-font-sans); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.ck-sticky__btn--wa      { background: #075E54; color: #ffffff; } /* darkened green for WCAG AA on white text (7.05:1) */
.ck-sticky__btn--primary { background: var(--cr-orange-text); color: #ffffff; }

/* ===== Form ===== */
.ck-form {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px; background: var(--cr-paper);
  border: 1px solid var(--cr-line); border-radius: 14px;
  box-shadow: var(--cr-shadow-md);
}
.ck-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ck-field { display: flex; flex-direction: column; gap: 6px; }
.ck-field__lbl { font-size: 12px; font-weight: 600; color: var(--cr-fg-1); }
.ck-input {
  font-family: var(--cr-font-sans); font-size: 16px; /* 16px+ prevents iOS auto-zoom on focus */
  padding: 12px 14px; border-radius: 8px;
  min-height: 48px;
  border: 1px solid var(--cr-line);
  background: var(--cr-bg-1); color: var(--cr-fg-1);
  width: 100%;
  transition: all 120ms var(--cr-ease-out);
}
.ck-input:focus { outline: none; border-color: var(--cr-orange-text); box-shadow: 0 0 0 3px rgba(249,115,22,0.18); }
.ck-form__hint { font-size: 12px; color: var(--cr-fg-3); }

/* ===== Generic form validation states =====
   Applies anywhere on the site — sub-service pages, top-level forms,
   shared .ck-form, variant-specific forms (.rl-form, .pn-form). The class
   goes on the input itself; the .form-error span is injected dynamically
   by the JS validators. Variant CSS that defines field-level invalid
   styling (e.g. .rl-form__field.is-invalid .rl-form__input) is more
   specific and wins where it applies. */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.14);
}
input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18);
}
/* Matches the home page's .ho-form__error exactly so every form's inline
   validation message looks identical site-wide. The alert-circle icon is
   added here via ::before (single source) — JS validators only set text. */
.form-error {
  font-size: 12px;
  color: #DC2626;
  font-weight: 500;
  margin-top: -2px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.form-error::before {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--cr-icon-alert) center / contain no-repeat;
  mask: var(--cr-icon-alert) center / contain no-repeat;
}
.form-error .ck-icon { flex-shrink: 0; }

/* Required-field indicators (added by lead.js markRequired, site-wide).
   Brand orange — distinct from the validation-error red so the two
   never read as the same signal. */
.cr-req {
  color: var(--cr-orange-text, #d9550f);
  font-weight: 700;
}
.cr-req-legend {
  font-size: 12px;
  color: var(--cr-fg-3, #6b6b6b);
  margin: 4px 0 0;
}
.cr-req-legend span {
  color: var(--cr-orange-text, #d9550f);
  font-weight: 700;
}

/* ===== Trust strip =====
   Flex with space-between so items hug their natural width and the visual
   spacing between them reads uniform regardless of label length. On mobile
   (≤600px) the strip becomes a single-row scroller that the JS carousel in
   base.njk wraps in `.ck-mscroll` for auto-advance + manual drag. */
.ck-trust-strip {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding: 22px 0;
  border-top: 1px solid var(--cr-line-soft);
  border-bottom: 1px solid var(--cr-line-soft);
}
.ck-trust-strip__item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cr-fg-2); }
.ck-trust-strip__item .ck-icon { color: var(--cr-orange-text); }
@media (max-width: 600px) {
  .ck-trust-strip {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    /* Self-contain before the carousel JS wraps this in .ck-mscroll, so the
       nowrap row can never stretch the page width (FOUC / slow / failed JS
       would otherwise clip the whole layout on mobile). */
    overflow-x: clip;
  }
  .ck-trust-strip__item {
    flex: 0 0 auto;
    padding: 0 18px;
    border-right: 1px solid var(--cr-line);
    white-space: nowrap;
  }
  .ck-trust-strip__item:first-child { padding-left: 0; }
  .ck-trust-strip__item:last-child  { border-right: 0; padding-right: 0; }
}

/* ===== Stats band (shared across home + service landings) =====
   Light theme. 4 items in a 1.25fr/1fr/1.25fr/1fr grid on desktop (lead stats
   get more width). 2-column grid at ≤1000px, single-row scroller at ≤600px
   (wrapped by `.ck-mscroll` for auto-advance + manual drag). */
.ck-stats-section {
  background: var(--cr-paper-2);
  padding: 64px 0;
  border-top: 1px solid var(--cr-line-soft);
  border-bottom: 1px solid var(--cr-line-soft);
}
.ck-stats {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.25fr 1fr;
  align-items: end;
  gap: 0;
}
.ck-stats__item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 36px;
  border-right: 1px solid var(--cr-line);
}
.ck-stats__item:first-child { padding-left: 0; }
.ck-stats__item:last-child  { border-right: 0; padding-right: 0; }
.ck-stats__num {
  font-family: var(--cr-font-display);
  font-size: 40px; font-weight: 600;
  line-height: 1; letter-spacing: -0.022em;
  color: var(--cr-n-700);
}
.ck-stats__num em { color: var(--cr-renovation); font-style: normal; font-size: 24px; margin-left: 2px; vertical-align: 4px; }
/* Stat-suffix accent follows the family theme via [data-variant], matching the
   per-variant treatment already used for eyebrows / section tints / footer.
   Renovation + home use the default (--cr-renovation) above. */
[data-variant="landscaping"] .ck-stats__num em { color: var(--cr-landscaping); }
[data-variant="painting"]    .ck-stats__num em { color: var(--cr-orange-text); }
[data-variant="plumbing"]    .ck-stats__num em { color: var(--cr-plumbing-text); }
[data-variant="civil-works"] .ck-stats__num em { color: var(--cr-civilworks-text); }
.ck-stats__lbl {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cr-n-500); font-weight: 600;
}
.ck-stats__item--lead .ck-stats__num {
  font-size: 60px; color: var(--cr-ink);
  letter-spacing: -0.025em;
}
.ck-stats__item--lead .ck-stats__num em { font-size: 32px; }
.ck-stats__item--lead .ck-stats__lbl { color: var(--cr-n-700); }
@media (max-width: 1000px) {
  .ck-stats-section { padding: 48px 0; }
  .ck-stats { grid-template-columns: 1fr 1fr; gap: 0; }
  .ck-stats__item { padding: 20px 16px; border-right: 0; border-bottom: 1px solid var(--cr-line); }
  .ck-stats__item:nth-child(odd) { border-right: 1px solid var(--cr-line); }
  .ck-stats__item:nth-last-child(-n+2) { border-bottom: 0; }
  .ck-stats__item:first-child { padding-left: 16px; }
  .ck-stats__item:last-child  { padding-right: 16px; }
  .ck-stats__item--lead .ck-stats__num { font-size: 48px; }
  .ck-stats__num { font-size: 32px; }
}
@media (max-width: 600px) {
  .ck-stats {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 0;
    padding: 8px 0;
    /* Self-contain before the carousel JS wraps this in .ck-mscroll (see
       .ck-trust-strip note) — prevents the nowrap row stretching the page. */
    overflow-x: clip;
  }
  .ck-stats__item {
    flex: 0 0 auto;
    min-width: 200px;
    padding: 0 24px;
    border-right: 1px solid var(--cr-line);
    border-bottom: 0;
  }
  .ck-stats__item:first-child { padding-left: 16px; }
  .ck-stats__item:last-child  { border-right: 0; padding-right: 16px; }
  .ck-stats__item--lead .ck-stats__num { font-size: 44px; }
  .ck-stats__num { font-size: 32px; }
}

/* ===== Mobile carousel wrapper (trust strip + stats on ≤600px) =====
   The JS carousel in base.njk wraps `.ck-trust-strip` and `.ck-stats` with
   this class on mobile, clones the children for a seamless loop, and
   auto-advances `scrollLeft`. Users can swipe/drag to scroll manually;
   auto-advance pauses for ~2s after each touch. Replaces the older
   CSS-transform marquee (which couldn't combine with manual scrolling). */
.ck-mscroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Soft fade at both edges so the auto-advancing track reads as a contained
     scroller instead of content hard-sliced at the gutter (looks like a page
     bleed otherwise, esp. with long trust-strip labels). */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.ck-mscroll::-webkit-scrollbar { display: none; }
.ck-mscroll > .ck-trust-strip,
.ck-mscroll > .ck-stats {
  width: max-content;
  max-width: none;
}

/* =============================================================
   Footer — variant-themed via CSS custom properties
   Spec: footer-system.md
   ============================================================= */
.ck-footer {
  --fbg:   #f9fafb;
  --fg:    #111827;
  --fg-2:  #374151;
  --fg-3:  #4B5563;
  --fbord: #e5e7eb;
  --fbord-soft: #eef0f3;
  --finvert: 0;

  background: var(--fbg);
  color: var(--fg-2);
  border-top: 1px solid var(--fbord);
  padding: 72px 0 28px;
  font-family: var(--cr-font-sans);
}
/* Unified footer style — every variant resolves to the same CSS variables.
   Variant-specific classes are kept (so future divergence is one rule change
   away) but currently they all alias to the renovation/plumbing palette. */
.ck-footer--renovation,
.ck-footer--plumbing,
.ck-footer--painting,
.ck-footer--landscaping,
.ck-footer--civil-works,
.ck-footer--home {
  --fbg: #f9fafb;
  --fg: #111827;
  --fg-2: #374151;
  --fg-3: #4B5563;
  --fbord: #e5e7eb;
  --fbord-soft: #eef0f3;
  --finvert: 0;
}

/* Contact column tint — same across all variants. */
.ck-footer--renovation .ck-footer__col--contact,
.ck-footer--plumbing .ck-footer__col--contact,
.ck-footer--painting .ck-footer__col--contact,
.ck-footer--landscaping .ck-footer__col--contact,
.ck-footer--civil-works .ck-footer__col--contact,
.ck-footer--home .ck-footer__col--contact {
  border-radius: 12px;
  padding: 18px 18px 20px;
  margin-top: -10px;
  background: var(--cr-n-100);
}

.ck-footer__lead {
  display: grid; grid-template-columns: 1.1fr auto;
  gap: 32px; align-items: center;
  padding-bottom: 36px; margin-bottom: 36px;
  border-bottom: 1px solid var(--fbord);
}
.ck-footer__brand { display: flex; gap: 16px; align-items: flex-start; }
.ck-footer__mark  { height: 44px; filter: invert(var(--finvert)); }
.ck-footer__wm    { font-family: var(--cr-font-display); font-weight: 600; letter-spacing: 0.08em; color: var(--fg); font-size: 17px; }
.ck-footer__tag   { font-size: 14px; color: var(--fg-3); margin-top: 6px; max-width: 420px; line-height: 1.55; }
.ck-footer__cta-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ck-footer__cta-note { font-size: 12px; color: var(--fg-3); font-weight: 500; letter-spacing: 0.02em; }

.ck-footer__cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr;
  gap: 32px; padding-bottom: 32px;
  border-bottom: 1px solid var(--fbord);
}
.ck-footer__col { display: flex; flex-direction: column; }
.ck-footer__h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg);
  margin-bottom: 14px;
}
.ck-footer__col a {
  display: block; font-size: 14px; padding: 5px 0;
  color: var(--fg-2);
  transition: color 120ms var(--cr-ease-out);
}
.ck-footer__col a:hover { color: var(--fg); }

.ck-footer__contact { display: flex !important; align-items: center; gap: 10px; }
.ck-footer__contact .ck-icon { color: var(--fg-3); flex-shrink: 0; }
.ck-footer__contact:hover .ck-icon { color: var(--fg); }
.ck-footer__hours {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-3);
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--fbord-soft);
  letter-spacing: 0.01em;
}
.ck-footer__hours .ck-icon { color: var(--fg-3); }

.ck-footer__bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; font-size: 12px; color: var(--fg-3);
  flex-wrap: wrap; gap: 12px;
}
.ck-footer__bot-mid    { color: var(--fg-3); }
.ck-footer__bot-links  { display: flex; gap: 20px; }
.ck-footer__bot-links a { color: var(--fg-3); transition: color 120ms var(--cr-ease-out); }
.ck-footer__bot-links a:hover { color: var(--fg); }

/* =============================================================
   Sub-page chrome — utility bar (dark) + breadcrumb
   Used by sub-service.njk; one shared treatment across all sub-pages.
   Page-unique sections (hero, services, signature, packages, FAQ, etc.)
   stay inlined in the per-page <style> block.
   ============================================================= */
.ck-sub-utility {
  background: var(--cr-ink);
  color: rgba(255,255,255,.75);
  font-size: 12.5px;
}
.ck-sub-utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; gap: 16px; flex-wrap: wrap;
}
.ck-sub-utility__left { display: flex; align-items: center; gap: 14px; }
.ck-sub-utility__pulse {
  width: 7px; height: 7px; border-radius: 999px;
  background: #22c55e;
  animation: ck-sub-pulse 2s var(--cr-ease-out) infinite;
  flex-shrink: 0;
}
@keyframes ck-sub-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.ck-sub-utility__right {
  display: flex; align-items: center; gap: 14px;
  color: rgba(255,255,255,.6);
}
.ck-sub-utility__right span { display: inline-flex; align-items: center; gap: 6px; }
.ck-sub-utility__sep { width: 1px; height: 14px; background: rgba(255,255,255,.15); }
.ck-sub-utility__phone { color: rgba(255,255,255,.85); font-weight: 600; }
@media (max-width: 1000px) { .ck-sub-utility { display: none; } }

.ck-breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--cr-line-soft);
}
.ck-breadcrumb__inner {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--cr-n-500);
}
.ck-breadcrumb__sep { color: var(--cr-n-300); }
.ck-breadcrumb__current { color: var(--cr-n-700); font-weight: 500; }

/* ===== WhatsApp float ===== */
.ck-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 56px; height: 56px; border-radius: 999px;
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.42);
  transition: transform 200ms var(--cr-ease-out);
}
.ck-whatsapp:hover { transform: translateY(-2px) scale(1.04); }
@media (max-width: 1000px) { .ck-whatsapp { display: none; } }

/* ===== Chrome pages (about, contact, projects, process, careers, blog, privacy, terms) ===== */
.cp-hero {
  background:
    radial-gradient(900px 360px at 100% -10%, rgba(14,165,233,.08), transparent 60%),
    linear-gradient(180deg, var(--cr-paper) 0%, var(--cr-n-50) 100%);
  border-bottom: 1px solid var(--cr-line-soft);
}
.cp-hero__inner { padding: 72px 0 56px; max-width: 760px; }
.cp-hero__ey {
  display: inline-block; font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cr-orange-text); margin-bottom: 14px;
}
.cp-hero__h {
  font-family: var(--cr-font-display); font-size: clamp(34px, 4vw, 54px);
  font-weight: 600; line-height: 1.06; letter-spacing: -.02em;
  color: var(--cr-ink); margin: 0 0 16px; text-wrap: balance;
}
.cp-hero__h em { color: var(--cr-orange-text); font-style: italic; font-weight: 500; }
.cp-hero__sub { font-size: 18px; color: var(--cr-n-600); line-height: 1.6; margin: 0; }

.cp-section { padding: 72px 0; }
.cp-section--alt  { background: var(--cr-paper-2); }
.cp-section--ink  { background: var(--cr-ink); color: rgba(255,255,255,.85); }
.cp-section__head { text-align: center; margin: 0 auto 40px; max-width: 720px; }
.cp-section__ey   { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cr-orange-text); margin-bottom: 10px; }
.cp-section__h    { font-family: var(--cr-font-display); font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.018em; color: var(--cr-ink); margin: 0; line-height: 1.2; }
.cp-section--ink .cp-section__h { color: #fff; }
.cp-section__sub  { font-size: 16px; color: var(--cr-n-600); line-height: 1.65; margin: 12px 0 0; }
.cp-section--ink .cp-section__sub { color: rgba(255,255,255,.65); }

.cp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.cp-card {
  background: var(--cr-paper); border: 1px solid var(--cr-line);
  border-radius: 14px; padding: 24px; box-shadow: var(--cr-shadow-sm);
  transition: transform 200ms var(--cr-ease-out), box-shadow 200ms var(--cr-ease-out);
  display: flex; flex-direction: column; gap: 10px;
}
.cp-card:hover { transform: translateY(-2px); box-shadow: var(--cr-shadow-md); }
.cp-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--cr-orange-soft); color: var(--cr-orange-p); display: flex; align-items: center; justify-content: center; }
.cp-card__t { font-size: 16px; font-weight: 700; color: var(--cr-ink); letter-spacing: -.005em; }
.cp-card__d { font-size: 14px; color: var(--cr-n-600); line-height: 1.6; margin: 0; }
.cp-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cr-orange-text); margin-top: auto; padding-top: 8px; }
.cp-card__link:hover { color: var(--cr-orange-text-h); }

.cp-prose { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: var(--cr-n-700); }
.cp-prose h2 { font-family: var(--cr-font-display); font-size: 22px; font-weight: 600; color: var(--cr-ink); margin: 36px 0 12px; letter-spacing: -.012em; }
.cp-prose h3 { font-size: 16px; font-weight: 700; color: var(--cr-ink); margin: 24px 0 8px; }
.cp-prose p  { margin: 0 0 14px; }
.cp-prose ul { margin: 0 0 14px; padding: 0 0 0 22px; }
.cp-prose ul li { margin: 4px 0; }
.cp-prose a  { color: var(--cr-orange-text); text-decoration: underline; text-underline-offset: 2px; }
.cp-prose code { background: var(--cr-n-100); padding: 2px 6px; border-radius: 4px; font-size: 14px; }

.cp-meta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 10px;
  background: var(--cr-paper-2); border: 1px solid var(--cr-line);
  font-size: 13px; color: var(--cr-n-600);
}
.cp-meta-row strong { color: var(--cr-ink); font-weight: 600; }

@media (max-width: 1000px) {
  .cp-grid-3, .cp-grid-4 { grid-template-columns: 1fr 1fr; }
  .cp-grid-2 { grid-template-columns: 1fr; gap: 20px; }
  .cp-hero__inner { padding: 48px 0 40px; }
}
@media (max-width: 600px) {
  /* Phase 2 densification: keep top-level page grids at 2-col on phones rather
     than collapsing to 1-col. cp-grid-4 → clean 2×2. cp-grid-3 → 2 cards on row 1
     and the third spanning both columns to avoid a lonely half-width card. */
  .cp-grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cp-grid-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cp-grid-3 > :nth-child(3):last-child { grid-column: 1 / -1; }
}

/* ===== Responsive — spec: mobile-spec.md §2/§4/§6 ===== */
@media (max-width: 1000px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }  /* clear sticky CTA bar */
  .ck-sticky { display: flex; }
  /* Hide the floating CTA bar while the on-screen keyboard is open so
     it doesn't overlay the active input. Specificity (body.kb-open .ck-sticky)
     beats the .ck-sticky rule above, no !important needed. */
  body.kb-open .ck-sticky { display: none; }
  body.kb-open { padding-bottom: 0; }

  /* Sub-service final CTA mobile reorder.
     The 26 sub-service pages share the .final-grid pattern:
       <div class="final-grid">
         <div>                       <!-- unnamed wrapper -->
           <div class="final__ey">…</div>
           <h2 class="final__h">…</h2>
           <p  class="final__p">…</p>
           <div class="final__checks">…</div>
           <div class="final__contacts">…</div>
         </div>
         <div class="quote-form" id="quote-form">…</div>
       </div>
     On mobile we want the user to land on the form fields immediately
     after the eyebrow / heading / lead. We flatten the unnamed left
     wrapper via `display: contents` so its children become direct grid
     items, then place each via grid-template-areas. Higher specificity
     (body .final-grid) beats each sub-page's inline `.final-grid` rule. */
  body .final-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro-ey"
      "intro-h"
      "intro-p"
      "form"
      "checks"
      "contacts";
    column-gap: 0;
    row-gap: 18px;
    align-items: start;
  }
  body .final-grid > div:first-child { display: contents; }
  body .final__ey       { grid-area: intro-ey; margin-bottom: 0; }
  body .final__h        { grid-area: intro-h;  margin-bottom: 0; }
  body .final__p        { grid-area: intro-p;  margin-bottom: 0; }
  body .final-grid > .quote-form,
  body .final-grid > #quote-form { grid-area: form; }
  body .final__checks   { grid-area: checks;   margin-bottom: 0; }
  /* No divider line on mobile sitewide — spacing comes purely from the grid
     row-gap so every sub-service final CTA matches the landing-page pattern.
     The `.final-grid` qualifier raises specificity to (0,0,2,1) so this beats
     the global light-theme re-skin (`body .final__contacts { border-top:1px }`,
     specificity (0,0,1,1)) further down the file regardless of source order —
     without it that rule re-added the divider on mobile. margin-top:0 also
     defeats any page re-adding a top divider/offset. */
  body .final-grid .final__contacts { grid-area: contacts; margin-top: 0; padding-top: 0; border-top: 0; }
  /* Trim the final-CTA section top padding on mobile sitewide. These sections
     carry `id="quote"`, so the header "Free Quote" / sticky "Get a Quote"
     buttons jump here. With scroll-padding-top:72px ≈ the 73px mobile nav, the
     section's top edge lands right under the nav — meaning its padding-top is
     the entire visible gap before the GET STARTED eyebrow. The desktop 96px
     (and the 64px some variants set) reads as dead space after the jump; 44px
     sits snug and intentional. body-prefixed (0,0,1,1) beats each section's
     own (0,0,1,0) base/mobile rule, so this normalizes every page at once.
     Only padding-top is touched — bottom padding stays per-section. */
  body .rl-final, body .pn-final, body .lv-final,
  body .cw-final, body .ho-final, body .final { padding-top: 44px; }
  .ck-section { padding: 56px 0; }
  .ck-section--lg { padding: 72px 0; }
  .ck-svc-grid { grid-template-columns: 1fr; }
  .ck-nav__toggle { display: inline-flex; }
  .ck-nav__phone { display: none; }
  /* Header CTA: drop the --sm sizing on mobile so the tap target meets the
     project's mobile-spec.md §3 minimum of 44×44px. Horizontal padding stays
     compact so it doesn't crowd the hamburger toggle; vertical sized via
     min-height (text centers via the existing flex align-items: center). */
  .ck-nav .ck-btn--sm {
    padding: 0 18px;
    font-size: 14px;
    min-height: 44px;
  }
  /* Push the CTA group (.ck-nav__right) to align next to the hamburger so the
     brand has full left-side breathing room and the right side reads as one
     compact action cluster. Without this, justify-content: space-between leaves
     the button stranded in the middle of the bar. */
  .ck-nav__right { margin-left: auto; gap: 10px; }
  /* Brand wordmark stacks "CITY" / "RENOVATIONS" onto two lines on mobile —
     reads as a more polished mark and leaves more horizontal room for the
     button + hamburger. `width: min-content` shrinks the box to the widest
     word ("RENOVATIONS"), forcing "CITY" to wrap above it. */
  .ck-nav__wm {
    display: inline-block;
    width: min-content;
    font-size: 13px;
    letter-spacing: 0.06em;
    line-height: 1.15;
  }
  .ck-nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 4px;
    /* The always-expanded mega-menu is taller than the viewport (4 groups ×
       up to 9 sub-links). The panel must scroll internally — the document
       scroll is clamped (html overflow-y: clip) so it can't carry the menu.
       Bottom padding clears the fixed .ck-sticky CTA bar (64px + safe area)
       so the last link (Contact) stays tappable when scrolled to the end. */
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 20px calc(20px + 64px + env(safe-area-inset-bottom));
    background: var(--cr-bg-1);
    border-bottom: 1px solid var(--cr-line-soft);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    display: none;
  }
  .ck-nav.is-open .ck-nav__links { display: flex; }
  .ck-nav.is-open { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .ck-nav__link {
    padding: 12px 4px;
    font-size: 16px;
    border-bottom: 1px solid var(--cr-line-soft);
  }
  .ck-nav__link:last-child { border-bottom: 0; }
  /* Mobile: each service group owns the divider; its sub-pages render
     always-expanded and indented so any sub-page is reachable in ≤2 taps
     (tap hamburger, tap sub-link). No per-group accordion toggle — the
     chevron disclosure button is desktop-only. */
  .ck-nav__group {
    flex-direction: column; align-items: stretch; gap: 0;
    border-bottom: 1px solid var(--cr-line-soft);
  }
  .ck-nav__group:last-child { border-bottom: 0; }
  .ck-nav__link--parent {
    padding: 12px 4px; font-size: 16px; border-bottom: 0;
    min-height: 44px; display: flex; align-items: center;
    /* Group headers carry weight so the menu reads as sections with
       items beneath (sub-links are lighter, below). */
    font-weight: 600;
  }
  .ck-nav__disc { display: none; }
  .ck-nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: flex; flex-direction: column;
    min-width: 0; padding: 0 0 8px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    transition: none; z-index: auto;
  }
  .ck-nav__sub::before { display: none; }
  .ck-nav__sublink {
    font-size: 15px; white-space: normal;
    padding: 10px 4px 10px 16px; border-radius: 0;
    min-height: 44px; display: flex; align-items: center;
    /* Lighter than the 600 group header for clear hierarchy. */
    font-weight: 450;
  }
  /* Home row: mobile-only, matches the parent-row tap metrics. */
  .ck-nav__link--mobile-only {
    display: flex; align-items: center; min-height: 44px;
  }
  /* "You are here" — current page only. Faint brand tint + a solid left
     accent bar so it doesn't rely on colour alone. Mobile-only by design:
     the desktop breadcrumb already signals location, so this lives inside
     the max-width:1000px block and never touches the desktop dropdown. */
  .ck-nav__link[aria-current="page"],
  .ck-nav__sublink[aria-current="page"] {
    background: var(--cr-nav-active-bg);
    box-shadow: inset 3px 0 0 var(--cr-nav-active-bar);
    color: var(--cr-fg-1);
  }
  .ck-footer__lead { grid-template-columns: 1fr; gap: 24px; }
  /* Full-width primary CTA on mobile per mobile-spec.md §3 — the column-collapsed
     footer lead reads as underweight when the button is content-sized. Stretching
     the wrap to full width and the CTA inside it gives the conversion moment
     proper visual weight. */
  .ck-footer__cta-wrap { align-items: stretch; }
  .ck-footer__cta { justify-content: center; width: 100%; }
  .ck-footer__cta-note { align-self: center; }
  .ck-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ck-trust-strip { grid-template-columns: repeat(3, 1fr); }
  /* Mobile contact-column override applies to every variant (all share the same tint now). */
  .ck-footer__col--contact { margin-top: 0; }
  .ck-footer__bot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ck-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Tighter section padding on phones — saves ~8px per top + 8px per bottom × ~10
     sections per page = ~160px per page. Compounds across the whole estate. */
  .ck-section { padding: 32px 0; }
  .ck-section--lg { padding: 48px 0; }
  /* Trust strip: horizontal scroll on phones (was 2-col grid taking ~180px).
     Converts to a single tight strip ~70px tall. Items separated by hairline
     dividers; scrollbar hidden visually, swipe to see all 6 claims. */
  .ck-trust-strip {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 0;
    padding: 14px 0;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ck-trust-strip::-webkit-scrollbar { display: none; }
  .ck-trust-strip__item {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 0 14px;
    border-right: 1px solid var(--cr-line-soft);
  }
  .ck-trust-strip__item:first-child { padding-left: 0; }
  .ck-trust-strip__item:last-child  { padding-right: 0; border-right: 0; }
  .ck-footer__cols { grid-template-columns: 1fr; }

  /* Sub-service stats band: keep 2×2 instead of collapsing to 1-col. Each sub-page
     has its own inline rule `.stats-row { grid-template-columns: 1fr }` at ≤600px;
     `body .stats-row` higher-specificity wins. Saves ~180px per sub-page × 26. */
  body .stats-row { grid-template-columns: 1fr 1fr; }
  body .stats-row > .stt {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 16px 12px;
  }
  body .stats-row > .stt:nth-last-child(-n+2) { border-bottom: 0; }

  /* Sub-service hero CTA full-width on mobile.
     Each of the 26 sub-service pages defines `.hero__btns` in its own
     inline <style> block (display: flex; flex-wrap: wrap). Higher specificity
     (body .hero__btns) wins over those page-level rules. Mirrors the
     mobile-spec.md §3 convention used on the variant landing heroes. */
  body .hero__btns { width: 100%; }
  body .hero__btns > a,
  body .hero__btns > button,
  body .hero__btns > .btn,
  body .hero__btns > .ck-btn { width: 100%; justify-content: center; }

  /* Sub-service "why us" cards: 1-col stack with compact 2-row internal grid
     (icon + title on row 1, description on row 2). Mirrors the variant landings'
     pattern. 25 sub-pages share `.why-grid` + `.why-card` + `.why-card__icon/t/d`;
     `body .X` higher specificity wins over each page's inline rules. */
  body .why-grid { grid-template-columns: 1fr; gap: 10px; }
  body .why-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "desc desc";
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    padding: 14px 16px;
  }
  body .why-card__icon { grid-area: icon; margin-bottom: 0; }
  body .why-card__t    { grid-area: title; align-self: center; margin-bottom: 0; }
  body .why-card__d    { grid-area: desc; }

  /* Sub-service "Our Process" steps: 1-col stack with compact 2-row internal
     grid (number + title on row 1, description on row 2). Sub-pages share `.proc`
     + `.proc__num/t/d` with various containers (`.process-row`, `.proc-row`,
     `.process-grid`). Higher specificity overrides per-page inline rules. */
  body .process-row,
  body .proc-row,
  body .process-grid { grid-template-columns: 1fr; gap: 10px; }
  body .proc {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num   title"
      "desc  desc";
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
  }
  body .proc__num { grid-area: num; margin: 0; }
  body .proc__t   { grid-area: title; align-self: center; margin-bottom: 0; text-align: left; }
  body .proc__d   { grid-area: desc; text-align: left; }

  /* Plumbing diagnostic cards (.diag-grid / .diag-card) — 6 plumbing sub-pages.
     1-col stack with 3-row internal grid: icon+title row 1, desc row 2,
     metadata block row 3. Same vocabulary as plumbing problem cards. */
  body .diag-grid { grid-template-columns: 1fr; gap: 10px; }
  body .diag-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "desc desc"
      "meta meta";
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    padding: 14px 16px;
  }
  body .diag-card__icon { grid-area: icon; margin-bottom: 0; }
  body .diag-card__t    { grid-area: title; align-self: center; margin-bottom: 0; }
  body .diag-card__d    { grid-area: desc; margin-bottom: 0; }
  body .diag-card__diag { grid-area: meta; }

  /* Majlis element cards (.elements-grid / .element-card) — 2-row internal grid,
     same as why-card. */
  body .elements-grid { grid-template-columns: 1fr; gap: 10px; }
  body .element-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "desc desc";
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    padding: 14px 16px;
  }
  body .element-card__icon { grid-area: icon; margin-bottom: 0; }
  body .element-card__t    { grid-area: title; align-self: center; margin-bottom: 0; }
  body .element-card__d    { grid-area: desc; margin-bottom: 0; }

  /* Materials swatches (.materials-grid / .mat-card) — 1-col compact horizontal:
     swatch becomes a 64×48 thumbnail on the left, name + desc stack on the right.
     Saves ~270px vs the current 2-col layout where each card is ~230px tall. */
  body .materials-grid { grid-template-columns: 1fr; gap: 10px; }
  body .mat-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--cr-line);
  }
  body .mat-card__swatch { height: 48px; width: 64px; border-radius: 8px; }
  body .mat-card__body { display: flex; flex-direction: column; gap: 2px; }

  /* Landscaping design process (.dp-grid) — 2-col on phones (per-page rule
     keeps it 3-col which feels cramped at iPhone-SE width). */
  body .dp-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Tap-target fix: .btn--sm at ≤600px must hit 44×44 minimum per mobile-spec.md
     §3. Sub-pages use .btn--sm for "View all" / ghost CTAs that currently render
     at ~40px tall. */
  body .btn--sm { min-height: 44px; }
}

/* ============================================================================
   CANONICAL FAQ STYLE — SITE-WIDE SINGLE SOURCE OF TRUTH.

   Every FAQ accordion on the site shows the FIRST LINE of each answer while
   collapsed (a "peek") and the full answer once its item gets `.is-open`
   (legacy `.open` also honoured). These `body .X` rules deliberately
   out-specify every per-page inline <style>, so FAQ collapse/expand behaviour
   is controlled HERE, in exactly one place.

   ── Building a NEW FAQ section? Use ONLY this markup and you inherit
      everything (styling + the peek + the toggle) for free — no per-page CSS,
      no per-page JS, no onclick:

        <div class="ck-faq">
          <div class="ck-faq__item">
            <button class="ck-faq__btn" type="button" aria-expanded="false">
              Question text
              <span class="ck-faq__plus" aria-hidden="true">+</span>
            </button>
            <div class="ck-faq__panel">
              <div class="ck-faq__inner">Answer text…</div>
            </div>
          </div>
        </div>

      The toggle is global (delegated on `.ck-faq__btn`, see base.njk).
      Do NOT add a per-page FAQ <style> or a max-height / grid-template-rows:0fr
      collapse — it will be overridden here and is not needed.

   Legacy class families (.faq / .ho-faq / .cw-faq / .pn-faq / .rl-faq) are
   peek-mapped below too, so the whole site stays visually consistent without
   rewriting their markup. See CLAUDE.md → "FAQ styling convention".
   ============================================================================ */

/* Canonical component look (blog uses .ck-article__faq as the wrapper). */
.ck-faq, .ck-article__faq { max-width: 800px; margin: 16px auto 8px; }
.ck-faq__item { border-bottom: 1px solid var(--line); }
.ck-faq__btn { width: 100%; text-align: left; background: transparent; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; color: var(--ink); font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: -.005em; transition: color 120ms var(--cr-ease-out); border: 0; }
.ck-faq__btn:hover { color: var(--orange-p); }
.ck-faq__plus { width: 28px; height: 28px; border-radius: 999px; background: var(--n-100); color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; font-weight: 600; line-height: 1; transition: transform 200ms var(--cr-ease-out), background 200ms, color 200ms; }
.ck-faq__item.is-open .ck-faq__plus { transform: rotate(45deg); background: var(--orange); color: #fff; }
.ck-faq__panel { padding: 0 0 22px; }
.ck-faq__inner { font-size: 15px; color: var(--n-500); line-height: 1.68; max-width: 680px; }

/* PEEK: collapsed = first line only (canonical + every legacy family). */
body .ck-faq__inner,
body .faq-inner, body .faq-panel > .faq-inner,
body .ho-faq__inner, body .cw-faq__inner,
body .pn-faq__inner, body .rl-faq__inner {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
  overflow: hidden; min-height: 0;
}
/* FULL: open item shows the whole answer. */
body .ck-faq__item.is-open .ck-faq__inner,
body .faq-item.is-open .faq-inner, body .faq-item.open .faq-inner,
body .ho-faq__item.is-open .ho-faq__inner,
body .cw-faq__item.is-open .cw-faq__inner,
body .pn-faq__item.is-open .pn-faq__inner, body .pn-faq__item.open .pn-faq__inner,
body .rl-faq__item.is-open .rl-faq__inner, body .rl-faq__item.open .rl-faq__inner {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
/* Never collapse the panel itself — the inner clamp does the hiding, so the
   first line always peeks. Out-specifies per-page max-height/grid collapse.
   Collapsed = tight single line: zero the panel/inner bottom padding so the
   peek doesn't carry ~22px of trailing space that reads as a 2nd (blank) line.
   The open state restores comfortable spacing. */
body .ck-faq__panel,
body .faq-panel, body .ho-faq__panel, body .cw-faq__panel,
body .pn-faq__panel, body .rl-faq__panel {
  display: block; grid-template-rows: none; max-height: none;
  overflow: visible; transition: none;
  padding-bottom: 12px;
}
body .ck-faq__inner,
body .faq-inner, body .ho-faq__inner, body .cw-faq__inner,
body .pn-faq__inner, body .rl-faq__inner {
  padding-bottom: 0;
}
body .ck-faq__item.is-open .ck-faq__panel,
body .faq-item.is-open .faq-panel, body .faq-item.open .faq-panel,
body .ho-faq__item.is-open .ho-faq__panel,
body .cw-faq__item.is-open .cw-faq__panel,
body .pn-faq__item.is-open .pn-faq__panel, body .pn-faq__item.open .pn-faq__panel,
body .rl-faq__item.is-open .rl-faq__panel, body .rl-faq__item.open .rl-faq__panel {
  padding-bottom: 22px;
}

/* ===== Sub-service decorative badge glassmorphism removal.
   12 small floating-pill classes across sub-pages all use the same
   `rgba(255,255,255,.92); backdrop-filter: blur(5-6px)` pattern (a known
   AI-slop tell). Drop the blur, replace with solid white + soft shadow.
   Mirrors the .rl-hero__photo-tag / .pn-hm-badge / .pn-insp-tag fix on
   the variant landings. */
body .gal-tag,
body .ext-badge,
body .ig-tag,
body .pg-tag,
body .wp-badge,
body .room-badge,
body .mos-badge,
body .mos-tag,
body .mosaic-chip,
body .panel-badge,
body .vis-tag,
body .board-badge {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 8px rgba(15,23,42,0.18);
}

/* ===== Sub-service final CTA: dark → light theme.
   Sub-pages each define a `.final` / `.final-section` / `.cta-section` wrapper
   with their own dark inline <style>. This block uses `body .X` higher
   specificity to override every per-page rule at once: section bg goes light,
   decorative ::before/::after gradients are killed, and the form
   glassmorphism is replaced with a solid white card matching the
   .rl-final / .pn-final pattern on the variant landings. */

/* Section: light gradient surface. Three wrapper conventions across sub-pages:
   `.final`, `.final-section`, and the surface-prep outlier `.cta-section`. */
body .final,
body .final-section,
body .cta-section {
  background: linear-gradient(180deg, var(--cr-paper) 0%, #FFF7EE 100%);
  border-top: 1px solid var(--cr-line);
  position: relative;
  overflow: hidden;
}
body .final > .w,
body .final-section > .w,
body .cta-section > .w,
body .final > .ck-page,
body .final-section > .ck-page,
body .cta-section > .ck-page { position: relative; z-index: 2; }
body .final::before,
body .final::after,
body .final-section::before,
body .final-section::after,
body .cta-section::before,
body .cta-section::after { content: none; }

/* Section text: ink/secondary instead of white */
body .final__ey,
body .final-section__ey { color: var(--cr-orange-text); }
body .final__h,
body .final-section__h { color: var(--cr-ink); }
body .final__h em,
body .final-section__h em { color: var(--cr-orange-press); }
body .final__p,
body .final-section__p { color: var(--cr-n-600); }
body .final__check,
body .final-section__check { color: var(--cr-n-700); }
body .final__check .ck-icon,
body .final-section__check .ck-icon { color: var(--cr-orange-text); }
body .final__contacts,
body .final-section__contacts { border-top: 1px solid var(--cr-line); }
body .final__contact-lbl,
body .final-section__contact-lbl { color: var(--cr-n-500); }
body .final__contact-val,
body .final-section__contact-val { color: var(--cr-ink); }

/* Surface-prep variant of the final-CTA text (uses .cta-lhs__* prefix) */
body .cta-lhs__eyebrow { color: var(--cr-orange-text); }
body .cta-lhs__h { color: var(--cr-ink); }
body .cta-lhs__h em { color: var(--cr-orange-press); font-style: italic; }
body .cta-lhs__p { color: var(--cr-n-600); }
body .cta-lhs__chk { color: var(--cr-n-700); }
body .cta-lhs__chk svg { color: var(--cr-orange-text); }
body .cta-contact__row { color: var(--cr-n-700); }
body .cta-contact__row strong { color: var(--cr-ink); }

/* Form: solid white card, no glassmorphism, light inputs.
   Sub-pages use TWO different class naming conventions for the form:
     A) Painting subs (6): `.quote-form` container, `.form-input`,
        `.form-select`, `.form-textarea`, `.form-lbl`, `.form-field`
     B) Renovation + plumbing + landscaping subs (20): `.form` container
        (with `id="quote-form"`), `.form-i`, `.form-s`, `.form-ta`,
        `.form-l`, `.form-f`
   Both naming conventions covered below. Final-CTA wrapper selectors
   (`.final` / `.final-section`) further scope these rules so the
   short-name `.form` doesn't catch unrelated form elements elsewhere. */

/* Form card (both naming conventions) */
body .quote-form,
body .final .form,
body .final-section .form {
  background: var(--cr-paper);
  border: 1px solid var(--cr-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 16px 40px -16px rgba(15,23,42,0.16), 0 4px 12px -4px rgba(15,23,42,0.06);
}

/* Labels */
body .quote-form .form-lbl,
body .final .form .form-l,
body .final-section .form .form-l { color: var(--cr-n-700); }

/* Inputs / selects / textareas */
body .quote-form .form-input,
body .quote-form .form-select,
body .quote-form .form-textarea,
body .final .form .form-i,
body .final .form .form-s,
body .final .form .form-ta,
body .final-section .form .form-i,
body .final-section .form .form-s,
body .final-section .form .form-ta {
  background: var(--cr-paper);
  color: var(--cr-ink);
  border-color: var(--cr-line);
}
body .quote-form .form-input::placeholder,
body .quote-form .form-textarea::placeholder,
body .final .form .form-i::placeholder,
body .final .form .form-ta::placeholder,
body .final-section .form .form-i::placeholder,
body .final-section .form .form-ta::placeholder { color: var(--cr-n-400); }
body .quote-form .form-input:focus,
body .quote-form .form-select:focus,
body .quote-form .form-textarea:focus,
body .final .form .form-i:focus,
body .final .form .form-s:focus,
body .final .form .form-ta:focus,
body .final-section .form .form-i:focus,
body .final-section .form .form-s:focus,
body .final-section .form .form-ta:focus {
  border-color: var(--cr-orange-text);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.16);
  background: var(--cr-paper);
}
body .quote-form .form-select,
body .final .form .form-s,
body .final-section .form .form-s {
  color: var(--cr-ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
body .quote-form .form-select option,
body .final .form .form-s option,
body .final-section .form .form-s option { background: #fff; color: var(--cr-ink); }

/* Chips (universal selector — both conventions use `.form-chip`) */
body .quote-form .form-chip,
body .final .form .form-chip,
body .final-section .form .form-chip {
  background: var(--cr-paper);
  color: var(--cr-n-700);
  border-color: var(--cr-line);
}
body .quote-form .form-chip:hover,
body .final .form .form-chip:hover,
body .final-section .form .form-chip:hover {
  border-color: var(--cr-n-400);
  color: var(--cr-ink);
}
body .quote-form .form-chip.on,
body .quote-form .form-chip.is-active,
body .final .form .form-chip.on,
body .final .form .form-chip.is-active,
body .final-section .form .form-chip.on,
body .final-section .form .form-chip.is-active {
  background: var(--cr-orange-text);
  color: #fff;
  border-color: var(--cr-orange-text);
}

/* Hint + success state (both conventions) */
body .quote-form .form-hint,
body .final .form .form-hint,
body .final-section .form .form-hint { color: var(--cr-n-500); }
body .quote-form .form-hint .ck-icon,
body .final .form .form-hint .ck-icon,
body .final-section .form .form-hint .ck-icon { color: var(--cr-n-500); }
body .quote-form .form-success,
body .final .form .form-success,
body .final-section .form .form-success {
  background: rgba(22,163,74,0.08);
  border: 1px solid rgba(22,163,74,0.32);
  color: #166534;
}
body .quote-form .form-success .ck-icon,
body .final .form .form-success .ck-icon,
body .final-section .form .form-success .ck-icon { color: #16A34A; }

/* ===== Shared marquee (auto-scrolling carousel) =====
   Applied via JS at ≤600px to: trust strip, stats bands, inspiration grids.
   The JS injects a `.marquee-clip` parent around the target track to clip
   off-stage clones, then clones the track's children (with aria-hidden) and
   adds `.is-marquee` to enable the animation. Pauses on hover/focus. */
.marquee-clip { overflow: hidden; }
@media (max-width: 600px) {
  .is-marquee {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    overflow: visible !important;
    animation: site-marquee var(--marquee-dur, 32s) linear infinite;
    /* Padding-inline trick used by inspiration carousels needs reset since
       the clip-parent now owns the gutter context. */
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
  .is-marquee:hover,
  .is-marquee:focus-within { animation-play-state: paused; }
  @keyframes site-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-marquee { animation: none !important; }
}

/* Marquee clones are only valid above the mobile breakpoint while the
   `is-marquee` animation runs. If the user resizes from mobile back to
   desktop, the cloned children stay in the DOM but the animation stops —
   they'd otherwise appear as duplicate grid items in the desktop layout.
   Hide them at >600px to keep the desktop grid intact.

   `body` prefix bumps specificity to 0,1,1 so we beat variant CSS rules
   like `.rl-stats__item { display: flex }` (0,1,0) that come later in
   the cascade and would otherwise win on source order. */
@media (min-width: 601px) {
  body [data-marquee-clone] { display: none; }
}

@media (max-width: 480px) {
  /* Narrow phones: tighten the header CTA so it doesn't dominate the nav.
     Wordmark sizing is handled in the ≤1000px block (two-line stack). */
  .ck-nav .ck-btn--sm {
    padding: 0 12px;
    font-size: 13px;
    min-height: 40px;
    box-shadow: none;
  }
  .ck-nav__inner { gap: 8px; }
}

/* ===== Clickable contact strips (home + all variant final-CTA sections) =====
   Values are linkified by lead.js (linkifyContacts). Keep the inherited look,
   add affordance. underline-on-hover reads on light OR dark backgrounds. */
a[class*="contact-val"] { text-decoration: none; color: inherit; cursor: pointer; }
a[class*="contact-val"]:hover { text-decoration: underline; }

/* ===== Success-replaces-form (crShowFormSuccess in lead.js) =====
   On a confirmed submit the form fields are hidden and the success block takes
   over the card — centered + larger so it can't be missed (was a small note
   below the button). One rule for every form family (ho/rl/pn/cw/lv/generic/ct);
   !important guards the layout against each variant's base success padding
   regardless of stylesheet order. Colours/background stay per-family. */
.cr-success-full {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  gap: 16px !important;
  padding: 44px 28px !important;
  min-height: 320px;
}
.cr-success-full svg { width: 52px !important; height: 52px !important; flex-shrink: 0; }
/* "Need us sooner? Call / WhatsApp" line appended to every success block by
   crShowFormSuccess. color:inherit so it reads on light or dark success panels. */
.cr-success-nudge { margin: 4px 0 0; font-size: 13px; opacity: .85; }
.cr-success-nudge a { color: inherit; font-weight: 600; text-decoration: underline; }

/* =============================================================
   Civil Works variant
   Loaded only on civil works pages via the layout's variantCss block.
   Uses .cw-* prefix for page-unique classes (Civil Works Landing).
   Shared chrome (nav, footer, buttons, sections) comes from chrome.css.
   ============================================================= */

/* ===== Sub-page utility bar — themed slate to match the parent landing ===== */
[data-variant="civil-works"] .ck-sub-utility {
  background: var(--cr-civilworks);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
[data-variant="civil-works"] .ck-sub-utility__left  { gap: 8px; }
[data-variant="civil-works"] .ck-sub-utility__right { color: #fff; }
[data-variant="civil-works"] .ck-sub-utility__phone { color: #fff; }
[data-variant="civil-works"] .ck-sub-utility__pulse {
  background: #fff;
  animation: ck-sub-pulse-white 2s var(--cr-ease-out) infinite;
}
@keyframes ck-sub-pulse-white {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
[data-variant="civil-works"] .ck-sub-utility__sep { background: rgba(255,255,255,.25); }

/* ===== Utility bar (slate) ===== */
.cw-utility { background: var(--cr-civilworks); color: #fff; font-size: 13px; font-weight: 600; }
.cw-utility .ck-page {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; padding-bottom: 10px; gap: 24px; flex-wrap: wrap;
}
.cw-utility__left  { display: flex; align-items: center; gap: 8px; }
.cw-utility__right { display: flex; align-items: center; gap: 24px; color: #fff; }
.cw-utility__right span { display: inline-flex; align-items: center; gap: 6px; }
.cw-utility__pulse {
  width: 8px; height: 8px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
  animation: cw-utility-pulse 2s var(--cr-ease-out) infinite;
  flex-shrink: 0;
}
@keyframes cw-utility-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (max-width: 1000px) { .cw-utility { display: none; } }

/* ===== Hero ===== */
.cw-hero-bleed {
  position: relative;
  background:
    radial-gradient(1200px 480px at 88% -10%, rgba(71,85,105,0.08), transparent 60%),
    radial-gradient(800px 320px at 5% 110%, rgba(249,115,22,0.05), transparent 60%),
    var(--cr-paper);
  overflow: hidden;
}
.cw-hero-bleed::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(17,24,39,0.03) 1px, transparent 1px);
  background-size: 80px 100%;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  pointer-events: none;
}
.cw-hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 64px; row-gap: 20px;
  align-items: start; padding: 80px 0 68px;
}
.cw-hero__copy   { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; }
.cw-hero__media  { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.cw-hero__slider-controls { grid-column: 1; grid-row: 2; }
.cw-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cr-orange-text); margin-bottom: 16px;
}
.cw-hero__eyebrow-line { width: 28px; height: 2px; background: var(--cr-orange-text); border-radius: 2px; }
.cw-hero__h {
  font-family: var(--cr-font-display); font-weight: 600;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.06; letter-spacing: -0.022em;
  color: var(--cr-ink); text-wrap: balance;
  margin-bottom: 20px;
}
.cw-hero__h em { font-style: italic; font-weight: 600; color: var(--cr-orange-press); }
.cw-hero__h-line { display: block; }
.cw-hero__sub {
  font-size: 17px; line-height: 1.68;
  color: var(--cr-n-600); max-width: 520px;
  margin-bottom: 28px; text-wrap: pretty; font-weight: 300;
}
.cw-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
@media (max-width: 600px) {
  /* Hero primary CTA goes full-width on mobile per mobile-spec.md §3 */
  .cw-hero__btns { width: 100%; }
  .cw-hero__btns > .ck-btn { width: 100%; justify-content: center; }
  /* Hero padding 40 top / 32 bottom on phones per mobile-spec.md §6 (closes spec drift). */
  .cw-hero { padding: 40px 0 32px; gap: 28px; }
}
.cw-hero__metas {
  display: flex; gap: 22px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--cr-line-soft);
}
.cw-hero__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--cr-n-700); font-weight: 500;
}
.cw-hero__meta .ck-icon { color: var(--cr-civilworks); }

.cw-hero__media {
  position: relative; aspect-ratio: 4 / 4.4;
  border-radius: var(--cr-r-xl);
}
.cw-hero__photo {
  position: absolute; inset: 0;
  border-radius: var(--cr-r-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(17,24,39,0.30), 0 12px 28px -16px rgba(17,24,39,0.18);
  background: linear-gradient(160deg, #c4cad3 0%, #8d96a3 60%, #4b5563 100%);
}
.cw-hero__photo-frame {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0; transition: opacity 400ms ease;
}
.cw-hero__photo-frame.is-visible { opacity: 1; }
.cw-hero__photo-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform: scale(1);
  transition: transform 5000ms linear;
}
@media (prefers-reduced-motion: no-preference) {
  .cw-hero__photo-frame.is-visible img { transform: scale(1.025); }
}
.cw-hero__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,0.0) 30%, rgba(15,23,42,0.55) 100%);
}
.cw-hero__photo-tag {
  position: absolute; left: 16px; top: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cr-n-700);
  box-shadow: 0 2px 8px rgba(15,23,42,0.18);
}
.cw-hero__photo-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--cr-orange-text); }
.cw-hero__photo-meta {
  position: absolute; left: 18px; bottom: 18px; right: 18px; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  color: #fff; transition: opacity 300ms ease;
}
.cw-hero__photo-meta-t { font-size: 15px; font-weight: 700; line-height: 1.25; max-width: 58%; }
.cw-hero__photo-meta-s { font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 3px; }
.cw-hero__photo-meta-num {
  font-family: var(--cr-font-display);
  font-size: 28px; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: #fff; text-align: right;
}
.cw-hero__photo-meta-num em { color: var(--cr-orange-text); font-style: normal; }
.cw-hero__photo-meta-lbl {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); margin-top: 2px;
}

/* Slider controls */
.cw-hero__slider-controls { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.cw-hero__nav {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--cr-line); background: var(--cr-paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; line-height: 1;
  transition: background 120ms;
}
.cw-hero__nav:hover { background: var(--cr-paper-2); }
.cw-hero__dots { display: flex; align-items: center; gap: 8px; }
.cw-hero__dot {
  /* button is the 24x24 hit target (a11y target-size); the visual pill is inside */
  min-width: 24px; min-height: 24px;
  padding: 8px 0; border: none; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cw-hero__dot-pill {
  /* Inactive: round 10px dot, gray. Active state expands it into a 40px pill. */
  display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--cr-n-300); position: relative; overflow: hidden;
  transition: width 320ms var(--cr-ease-out), height 320ms var(--cr-ease-out), border-radius 320ms var(--cr-ease-out), background 200ms ease;
}
.cw-hero__dot.is-active .cw-hero__dot-pill {
  width: 40px; height: 8px; border-radius: 4px;
  background: var(--cr-orange-tint);
}
.cw-hero__dot-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--cr-orange-text); border-radius: 4px; width: 0%;
}
/* Mobile: keep the pill+progress treatment on the active dot (the timer
   affordance), but tighten everything around it so the row fits in 327px
   container without horizontal overflow. */
@media (max-width: 600px) {
  /* Allow the hero grid column to shrink below content min-width so the
     slider-controls row doesn't push the column past the viewport. */
  .cw-hero { grid-template-columns: minmax(0, 1fr); }
  .cw-hero__copy { min-width: 0; }
  /* Tighten the dot row so 9 dots + 2 nav buttons fit comfortably on phones. */
  .cw-hero__slider-controls { gap: 6px; }
  /* Drop prev/next on mobile — the 9 dots provide direct navigation and we
     need the row budget for 24×24 dot hit targets (Lighthouse target-size). */
  .cw-hero__nav { display: none; }
  .cw-hero__dots { gap: 4px; width: 100%; justify-content: center; }
  .cw-hero__dot { min-width: 24px; min-height: 24px; padding: 8px 0; }
  .cw-hero__dot-pill { width: 8px; height: 8px; }
}

/* ===== Services grid (page-unique: hover line + tags + arrow CTA) ===== */
.cw-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cw-svc {
  background: var(--cr-paper);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-r-lg); padding: 26px;
  box-shadow: var(--cr-shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform var(--cr-dur-2) var(--cr-ease-out), box-shadow var(--cr-dur-2) var(--cr-ease-out); cursor: pointer;
  position: relative; overflow: hidden;
  text-decoration: none; color: inherit;
}
.cw-svc:focus-visible { outline: 2px solid var(--cr-orange-text); outline-offset: 2px; }
.cw-svc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cr-civilworks); opacity: 0;
  transition: opacity var(--cr-dur-2) var(--cr-ease-out);
}
.cw-svc:hover { transform: translateY(-3px); box-shadow: var(--cr-shadow-md); }
.cw-svc:hover::before { opacity: 1; }
.cw-svc__icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--cr-orange-soft); color: var(--cr-orange-press);
  display: flex; align-items: center; justify-content: center;
}
.cw-svc__title { font-size: 17px; font-weight: 700; color: var(--cr-fg-1); letter-spacing: -0.01em; }
.cw-svc__desc { font-size: 14px; color: var(--cr-fg-2); line-height: 1.55; flex: 1; }
.cw-svc__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cw-svc__tag {
  padding: 3px 10px;
  background: var(--cr-n-100); color: var(--cr-n-700);
  border-radius: 999px; font-size: 11px; font-weight: 600;
}
.cw-svc__cta {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--cr-orange-text);
  margin-top: 4px;
}
.cw-svc__cta .ck-icon { transition: transform var(--cr-dur-2) var(--cr-ease-out); }
.cw-svc:hover .cw-svc__cta .ck-icon { transform: translateX(3px); }

/* ===== Mid-page CTA band ===== */
.cw-midcta {
  background: var(--cr-paper);
  border: 1px solid var(--cr-line);
  border-radius: 18px;
  padding: 32px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  box-shadow: 0 14px 30px -20px rgba(17,24,39,0.14);
  margin-top: 32px;
}
.cw-midcta__h { font-size: 20px; font-weight: 700; color: var(--cr-ink); letter-spacing: -0.01em; }
.cw-midcta__s { font-size: 14px; color: var(--cr-n-600); margin-top: 5px; }
/* Equal-width buttons via 1fr 1fr grid; gap is 12px (impeccable tight-grouping range 8-12px). */
.cw-midcta__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cw-midcta__btns > .ck-btn { justify-content: center; }
@media (max-width: 480px) {
  /* Stacked: matches the project's mobile-spec convention of full-width primary CTAs.
     `width: 100%` stretches the btns container to fill the card; `1fr` then fills each row. */
  .cw-midcta__btns { grid-template-columns: 1fr; width: 100%; }
}

/* ===== Stats band (dark, asymmetric: lead stats differentiate proof; quieter scale) ===== */
.cw-stats-band { background: var(--cr-ink); }
.cw-stats {
  display: grid; grid-template-columns: 1.25fr 1fr 1.25fr 1fr;
  padding: 72px 0;
  align-items: end;
}
.cw-stats__item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 36px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.cw-stats__item:first-child { padding-left: 0; }
.cw-stats__item:last-child  { border-right: 0; }
.cw-stats__num {
  font-family: var(--cr-font-display);
  font-size: 40px; font-weight: 600;
  line-height: 1; letter-spacing: -0.022em; color: rgba(255,255,255,0.72);
}
.cw-stats__num em { color: var(--cr-orange-text); font-style: normal; opacity: 0.85; }
.cw-stats__lbl {
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.42); font-weight: 500;
}
.cw-stats__item--lead .cw-stats__num {
  font-size: 60px; color: rgba(255,255,255,0.96);
  letter-spacing: -0.025em;
}
.cw-stats__item--lead .cw-stats__lbl {
  color: rgba(255,255,255,0.6); font-weight: 500;
}

/* ===== Process (4 steps with connecting line) ===== */
.cw-proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.cw-proc::before {
  content: "";
  position: absolute; top: 28px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(to right, transparent, var(--cr-line) 20%, var(--cr-line) 80%, transparent);
  z-index: 0;
}
.cw-proc__step {
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 1;
  text-align: center; align-items: center;
}
.cw-proc__num {
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--cr-paper);
  border: 2px solid var(--cr-line);
  color: var(--cr-orange-press); font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--cr-shadow-sm);
  transition:
    transform var(--cr-dur-2) var(--cr-ease-out),
    box-shadow var(--cr-dur-2) var(--cr-ease-out),
    background var(--cr-dur-2) var(--cr-ease-out),
    color var(--cr-dur-2) var(--cr-ease-out),
    border-color var(--cr-dur-2) var(--cr-ease-out);
}
.cw-proc__step:hover .cw-proc__num {
  background: var(--cr-orange-text);
  color: #fff; border-color: var(--cr-orange-text);
  box-shadow: var(--cr-shadow-cta);
  transform: scale(1.08);
}
.cw-proc__t { font-size: 15px; font-weight: 700; color: var(--cr-fg-1); }
.cw-proc__d { font-size: 13px; color: var(--cr-fg-2); line-height: 1.55; }

/* ===== Portfolio (asymmetric grid, 1 feature + 4 small) ===== */
.cw-portfolio {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.cw-proj {
  background: var(--cr-paper);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-r-lg);
  overflow: hidden; cursor: pointer;
  box-shadow: var(--cr-shadow-sm);
  transition: transform var(--cr-dur-2) var(--cr-ease-out), box-shadow var(--cr-dur-2) var(--cr-ease-out);
  display: flex; flex-direction: column;
}
.cw-proj:hover { transform: translateY(-3px); box-shadow: var(--cr-shadow-md); }
.cw-proj--feature { grid-row: span 2; }
.cw-proj__img {
  aspect-ratio: 4/3;
  display: flex; align-items: flex-end; padding: 14px;
  position: relative;
  overflow: hidden;
  background-size: cover; background-position: center;
}
.cw-proj--feature .cw-proj__img { aspect-ratio: unset; height: auto; flex: 1; min-height: 360px; }
.cw-proj__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cw-proj__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,12,0.55) 0%, transparent 60%);
  z-index: 1;
}
.cw-proj__body { padding: 16px 18px; }
.cw-proj__eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--cr-fg-3); margin-bottom: 5px;
}
.cw-proj__title { font-size: 15px; font-weight: 700; color: var(--cr-fg-1); }
.cw-proj__desc  { font-size: 13px; color: var(--cr-fg-2); line-height: 1.45; margin-top: 4px; }
.cw-proj__tag-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cw-proj__tag {
  padding: 3px 9px; background: var(--cr-n-100);
  border-radius: 999px; font-size: 11px; color: var(--cr-n-600); font-weight: 600;
}

/* ===== Testimonials ===== */
.cw-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cw-testi {
  background: var(--cr-paper);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--cr-shadow-sm);
}
.cw-testi__stars { color: var(--cr-warning); font-size: 14px; letter-spacing: 2px; }
.cw-testi__quote { font-size: 15px; line-height: 1.6; color: var(--cr-fg-1); flex: 1; }
.cw-testi__by    { font-size: 12px; color: var(--cr-fg-3); border-top: 1px solid var(--cr-line-soft); padding-top: 12px; margin-top: 4px; }
.cw-testi__by strong { color: var(--cr-fg-2); font-weight: 600; }

/* ===== Why us / promise grid ===== */
.cw-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cw-promise {
  background: var(--cr-paper);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.cw-promise__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(37,99,235,0.08); color: #1D4ED8;
  display: flex; align-items: center; justify-content: center;
}
.cw-promise__t { font-size: 16px; font-weight: 700; color: var(--cr-fg-1); }
.cw-promise__d { font-size: 14px; color: var(--cr-fg-2); line-height: 1.55; }

/* Coverage / map — canonical .ck-coverage now lives in base.css */

/* ===== FAQ accordion ===== */
.cw-faq { max-width: 820px; margin: 0 auto; }
.cw-faq__item { border-bottom: 1px solid var(--cr-line); }
.cw-faq__btn {
  width: 100%; text-align: left;
  background: transparent; padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  cursor: pointer; color: var(--cr-ink);
  font-family: var(--cr-font-sans); font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: color 120ms var(--cr-ease-out);
  border: 0;
}
.cw-faq__btn:hover { color: var(--cr-orange-press); }
.cw-faq__plus {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--cr-n-50); color: var(--cr-ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px; font-weight: 600;
  transition: transform var(--cr-dur-2) var(--cr-ease-out), background var(--cr-dur-2);
}
.cw-faq__item.is-open .cw-faq__plus { transform: rotate(45deg); background: var(--cr-orange-text); color: #fff; }
.cw-faq__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--cr-dur-3) var(--cr-ease-out);
}
.cw-faq__item.is-open .cw-faq__panel { grid-template-rows: 1fr; }
.cw-faq__inner {
  overflow: hidden; min-height: 0;
  padding: 0 0 22px; max-width: 680px;
  font-size: 15px; color: var(--cr-n-600); line-height: 1.65;
}

/* ===== Final CTA / light form section ===== */
.cw-final {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--cr-paper) 0%, #FFF7EE 100%);
  border-top: 1px solid var(--cr-line);
}
.cw-final::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(900px 360px at 92% 8%, rgba(249,115,22,0.08), transparent 60%),
    radial-gradient(700px 280px at 4% 100%, rgba(71,85,105,0.06), transparent 60%);
  pointer-events: none;
}
.cw-final > .ck-page { position: relative; z-index: 2; }
.cw-final__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  column-gap: 64px;
  align-items: start;
}
.cw-final__left {
  display: flex;
  flex-direction: column;
  /* children (intro, list, contact) keep their own margin-top values for spacing */
}
.cw-final__eyebrow {
  color: var(--cr-orange-text); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px;
}
.cw-final__h {
  font-family: var(--cr-font-display);
  font-size: clamp(28px, 3vw, 42px); font-weight: 700;
  line-height: 1.12; letter-spacing: -0.02em;
  color: var(--cr-ink); text-wrap: balance;
}
.cw-final__h em { color: var(--cr-orange-press); font-style: italic; }
.cw-final__sub { font-size: 17px; color: var(--cr-n-600); line-height: 1.6; margin-top: 16px; max-width: 440px; }
.cw-final__list { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 12px; padding: 0; }
.cw-final__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.5px; color: var(--cr-n-700); line-height: 1.5;
}
.cw-final__list .ck-icon { color: var(--cr-orange-text); flex-shrink: 0; margin-top: 2px; }
.cw-final__contact {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--cr-line);
  display: flex; gap: 28px; flex-wrap: wrap;
}
.cw-final__contact-item { display: flex; flex-direction: column; gap: 2px; }
.cw-final__contact-lbl  { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cr-n-500); font-weight: 600; }
.cw-final__contact-val  { font-size: 15px; font-weight: 600; color: var(--cr-ink); }

/* Light form (solid surface, no glassmorphism) */
.cw-form {
  background: var(--cr-paper);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-r-xl); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 16px 40px -16px rgba(15,23,42,0.16), 0 4px 12px -4px rgba(15,23,42,0.06);
}
.cw-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cw-form__field { display: flex; flex-direction: column; gap: 6px; }
.cw-form__lbl   { font-size: 12px; font-weight: 600; color: var(--cr-n-700); letter-spacing: 0.02em; }
.cw-form__input,
.cw-form__select,
.cw-form__textarea {
  font-family: var(--cr-font-sans); font-size: 16px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--cr-line);
  background: var(--cr-paper); color: var(--cr-ink);
  width: 100%; transition: border-color 120ms var(--cr-ease-out), box-shadow 120ms var(--cr-ease-out);
}
.cw-form__input::placeholder,
.cw-form__textarea::placeholder { color: var(--cr-n-400); }
.cw-form__input:focus,
.cw-form__select:focus,
.cw-form__textarea:focus {
  outline: none; border-color: var(--cr-orange-text);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.16);
}
.cw-form__select { appearance: none; color: var(--cr-ink); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.cw-form__textarea { resize: vertical; min-height: 80px; font-family: var(--cr-font-sans); }
.cw-form__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-form__chip {
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--cr-line);
  background: var(--cr-paper); color: var(--cr-n-700);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color 120ms var(--cr-ease-out), background 120ms var(--cr-ease-out), color 120ms var(--cr-ease-out);
}
.cw-form__chip:hover { border-color: var(--cr-n-400); color: var(--cr-ink); }
.cw-form__chip.is-active { background: var(--cr-orange-text); border-color: var(--cr-orange-text); color: #fff; }
.cw-form__hint  { font-size: 12px; color: var(--cr-n-500); display: flex; align-items: center; gap: 6px; }
.cw-form__hint .ck-icon { color: var(--cr-n-500); }

/* Inline field-level error state (replaces alert() popup) */
.cw-form__field.is-invalid .cw-form__input,
.cw-form__field.is-invalid .cw-form__select,
.cw-form__field.is-invalid .cw-form__textarea {
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
.cw-form__error {
  font-size: 12px; color: #DC2626; font-weight: 500;
  display: none; align-items: center; gap: 6px;
  margin-top: -2px;
}
.cw-form__field.is-invalid .cw-form__error { display: flex; }

.cw-form__success {
  background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.32);
  color: #166534; border-radius: var(--cr-r-lg);
  padding: 18px; font-size: 14px; gap: 10px;
  display: none; align-items: flex-start;
  animation: cw-fade-up 320ms var(--cr-ease-out);
}
.cw-form__success.is-visible { display: flex; }
.cw-form__success .ck-icon { color: #16A34A; flex-shrink: 0; margin-top: 1px; }
.cw-form__success-check {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 0;
  color: #16A34A;
}
.cw-form__success-check circle {
  fill: rgba(22,163,74,0.10); stroke: #16A34A;
  stroke-width: 1.5; stroke-dasharray: 64; stroke-dashoffset: 64;
}
.cw-form__success-check path {
  fill: none; stroke: #16A34A;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 18; stroke-dashoffset: 18;
}
.cw-form__success.is-visible .cw-form__success-check circle {
  animation: cw-check-circle 360ms var(--cr-ease-out) 80ms forwards;
}
.cw-form__success.is-visible .cw-form__success-check path {
  animation: cw-check-draw 460ms var(--cr-ease-out) 240ms forwards;
}
@keyframes cw-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cw-check-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes cw-check-draw {
  to { stroke-dashoffset: 0; }
}

/* Chip activate pulse: tactile feedback when user toggles a Services Needed chip on. */
@keyframes cw-chip-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.cw-form__chip.is-active { animation: cw-chip-pop 240ms var(--cr-ease-out); }

/* FAQ plus icon: pulse on open (in addition to existing 45° rotate). */
@keyframes cw-faq-plus-pulse {
  0%   { transform: rotate(45deg) scale(1); }
  50%  { transform: rotate(45deg) scale(1.15); }
  100% { transform: rotate(45deg) scale(1); }
}
.cw-faq__item.is-open .cw-faq__plus { animation: cw-faq-plus-pulse 280ms var(--cr-ease-out); }

/* ===== Variant chrome accents ===== */
[data-variant="civil-works"] .ck-eyebrow    { color: var(--cr-orange-text); }
[data-variant="civil-works"] .ck-svc__icon  { background: rgba(37,99,235,0.10); color: var(--cr-civilworks); }

/* ===== Section-head center variant ===== */
.cw-section-head--center { text-align: center; align-self: center; max-width: 720px; margin: 0 auto 32px; }
.cw-section-head--center p { margin: 12px auto 0; }

.cw-section-head--split {
  display: flex; flex-direction: row; justify-content: space-between;
  align-items: flex-end; flex-wrap: wrap; gap: 16px;
  max-width: 100%;
}
.cw-section-head--split > div { display: flex; flex-direction: column; gap: 8px; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .cw-hero__chip--tl { left: 8px; }
  .cw-hero__chip--br { right: 8px; }
}
@media (max-width: 1000px) {
  .cw-hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 24px; padding: 40px 0 36px; }
  .cw-hero__copy   { grid-column: 1; grid-row: 1; }
  .cw-hero__media  { grid-column: 1; grid-row: 2; }
  .cw-hero__slider-controls { grid-column: 1; grid-row: 3; margin-top: 0; }
  .cw-svc-grid { grid-template-columns: 1fr 1fr; }
  .cw-stats { grid-template-columns: 1fr 1fr; }
  .cw-stats__item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 20px 0; }
  .cw-stats__item--lead .cw-stats__num { font-size: 50px; }
  .cw-proc { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cw-proc::before { display: none; }
  .cw-portfolio { grid-template-columns: 1fr 1fr; }
  .cw-proj--feature { grid-row: auto; grid-column: span 2; }
  .cw-testi-grid { grid-template-columns: 1fr 1fr; }
  .cw-testi-grid > .cw-testi:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 8px); }
  .cw-promise-grid { grid-template-columns: 1fr 1fr; }
  /* Mobile: flatten the .cw-final__left wrapper via display: contents so its
     children become direct flex items of .cw-final__grid; then `order` puts
     the form between the intro and the list+contact. User hits the form
     immediately after the heading + lead; reassurance items appear below. */
  .cw-final__grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .cw-final__left { display: contents; }
  .cw-final__intro   { order: 1; }
  .cw-final .cw-form { order: 2; }
  .cw-final__list    { order: 3; margin-top: 0; }
  .cw-final__contact { order: 4; margin-top: 0; padding-top: 0; border-top: 0; }
  .cw-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Service cards: 1-col stack with compact 4-row internal layout:
       row 1: icon (left) + title (right)
       row 2: description (full width)
       row 3: tags chips (full width)
       row 4: explicit "View X Services →" CTA (full width) — restores affordance
              that was lost when the card became compact. */
  .cw-svc-grid { grid-template-columns: 1fr; gap: 10px; }
  .cw-svc {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon  title"
      "desc  desc"
      "tags  tags"
      "cta   cta";
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    padding: 14px 16px;
  }
  .cw-svc__icon  { grid-area: icon; }
  .cw-svc__title { grid-area: title; align-self: center; }
  .cw-svc__desc  { grid-area: desc; }
  .cw-svc__tags  { grid-area: tags; }
  .cw-svc__cta   {
    grid-area: cta;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--cr-line-soft);
    font-size: 13px;
    font-weight: 600;
    color: var(--cr-orange-text);
  }
  /* Promises: 1-col stack on phones with each card as a compact 2-row grid:
       row 1: icon (left) + title (right, vertically centered)
       row 2: description (full width)
     Same compact-card vocabulary used on painting why-us, plumbing problem cards. */
  .cw-promise-grid { grid-template-columns: 1fr; gap: 10px; }
  .cw-promise {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "desc desc";
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
  }
  .cw-promise__icon { grid-area: icon; margin-bottom: 0; }
  .cw-promise__t    { grid-area: title; align-self: center; margin-bottom: 0; }
  .cw-promise__d    { grid-area: desc; }
  .cw-proc { grid-template-columns: 1fr; }
  /* Process steps: 2-row internal grid (number+title on row 1, desc on row 2).
     Same compact-card vocabulary as why-us / problem cards / service cards. */
  .cw-proc__step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num   title"
      "desc  desc";
    column-gap: 14px;
    row-gap: 6px;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
  }
  .cw-proc__num { grid-area: num; margin: 0; }
  .cw-proc__t   { grid-area: title; align-self: center; }
  .cw-proc__d   { grid-area: desc; }
  /* Portfolio: feature project spans full width, 4 satellites form a 2×2 grid below.
     Saves ~500px vs all 5 cards stacked. */
  .cw-portfolio { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cw-proj--feature { grid-column: 1 / -1; }
  /* Stats: single-row carousel on phones (auto-scrolls via the shared marquee
     pattern in chrome.css). Stats become a horizontal strip of "credentials"
     that ticks past, like a news ribbon. */
  .cw-stats {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    gap: 0;
    padding: 28px 0;
  }
  .cw-stats__item {
    flex: 0 0 auto;
    min-width: 220px;
    padding: 0 24px;
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom: 0;
  }
  .cw-stats__item--lead .cw-stats__num { font-size: 48px; }
  .cw-stats__num { font-size: 36px; }
  .cw-midcta { flex-direction: column; align-items: flex-start; padding: 18px; gap: 14px; }
  .cw-testi-grid { grid-template-columns: 1fr; }
  .cw-testi-grid > .cw-testi:nth-child(3) { grid-column: auto; max-width: 100%; }
  /* Card padding 14×16 per mobile-spec.md §6 (closes spec drift; was 26px desktop). */
  .cw-svc, .cw-promise, .cw-testi { padding: 14px 16px; }
  .cw-proj__body { padding: 14px 16px; }
}