/* SPECIFICITY: every rule below is doubled (.kpa-v3 .x = 0,2,0) because the
   scoped reset in site.css — `.kpa p, .kpa ul, .kpa ol {margin:0}` — is (0,1,1)
   and silently eats margins set with a single class. This is the documented
   trap in CLAUDE.md and it ate every hero spacing change until it was measured.
   Check computed styles, not screenshots, when spacing "will not apply". */
/* ==========================================================================
   VERSION 3 — light rebuild
   --------------------------------------------------------------------------
   Black, white, very light grey, gold accents. Dark is now punctuation — the
   final CTA band and a couple of surfaces — rather than the ground.

   Fixes from the 11 Aug review, in order:
     1  header phone + CTA share one height/padding, so they can't mismatch
     2  hero fits a 1440x800 viewport: H1 capped, spacing tightened, form
        shortened, stat bar pulled up into the hero itself
     3  one CTA per viewport — the header keeps the button, the hero's action
        is the form. No third "Get a Free Quote" in the hero body.
     4  eyebrows are ONE class, one size, everywhere
     5  guarantee seal circle removed
     6  services: 1 flagship + 4 beneath, never a 3+2 orphan row
   ========================================================================== */

.kpa-v3 {
  --v3-line: rgba(20, 22, 24, .12);
  --v3-line-soft: rgba(20, 22, 24, .07);
  --v3-ink: #141618;
  --v3-grey: #f8f7f4;              /* warm off-white, not cool grey */
  --v3-tint: rgba(var(--accent-rgb), .055);  /* barely-there gold wash */
  --v3-r: 14px;
  background: #fff;
  color: var(--ink);
}
.kpa-v3 .kpa-wrap { max-width: 1280px; }
.kpa-v3 .kpa-h1, .kpa-v3 .kpa-h2 { color: var(--v3-ink); letter-spacing: -.032em; }
.kpa-v3 .kpa-btn { border-radius: var(--radius-pill); font-weight: 700; }
.kpa-v3 .kpa-btn--outline { border-color: var(--v3-ink); color: var(--v3-ink); }
.kpa-v3 .kpa-btn--outline:hover { background: var(--v3-ink); color: #fff; }

/* ==========================================================================
   THE TYPE SCALE. Four sizes, and nothing on the page is allowed a fifth.
   Every section header is the same three parts in the same order at the same
   sizes — eyebrow, h2, lead — so the page reads as one system rather than a
   run of individually-designed blocks.

     eyebrow   .7rem   700  .18em tracking, uppercase, gold
     h2        clamp(1.75rem → 2.4rem)  700
     lead      1.02rem      ink-soft, max 62ch
     body      .94rem       ink-soft
     card h3   1.12rem      700
   ========================================================================== */
.kpa-v3-eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-dark); line-height: 1.2;
}
.kpa-v3-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); flex-shrink: 0; }
.kpa-v3-eyebrow--light { color: var(--accent); }
.kpa-v3-eyebrow--center { justify-content: center; }

.kpa-v3-sect { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.kpa-v3-sect--grey { background: var(--v3-grey); }
.kpa-v3-sect--dark { background: var(--v3-ink); color: rgba(255,255,255,.76); }
.kpa-v3-sect--dark .kpa-h2 { color: #fff; }

.kpa-v3-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.kpa-v3-head--center { margin-inline: auto; text-align: center; }
/* Locked here rather than left to the shared clamp, so a section heading can
   never quietly render at a different size from the one above it. */
.kpa-v3 .kpa-v3-head .kpa-h2 { margin-top: .85rem; font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.4rem); line-height: 1.1; }
.kpa-v3-head p { margin-top: .9rem; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.kpa-v3-head--center p { margin-inline: auto; }
.kpa-v3-sect--dark .kpa-v3-head p { color: rgba(255,255,255,.7); }

/* ==========================================================================
   1 — HEADER. Phone and CTA are built from one rule so they cannot drift.
   ========================================================================== */
.kpa-v3-hdr { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--v3-line-soft); }
.kpa-v3-hdr__in { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 84px; }
/* Stacked lockup: taller and narrower than a wordmark slot. */
.kpa-v3-hdr__logo { position: relative; height: 54px; width: 82px; flex-shrink: 0; }
.kpa-v3-hdr__logo img { height: 100%; width: auto; object-fit: contain; object-position: left center; }
.kpa-v3-nav { display: none; margin-inline: auto; }
.kpa-v3-nav ul { display: flex; gap: clamp(1rem, 2vw, 2rem); }
/* Every nav link is inline-flex, including the plain ones. Mixing inline text
   links with inline-flex dropdown links (which carry a chevron) put the two
   kinds on different baselines — that was the "not on the same level". */
.kpa-v3-nav a { display: inline-flex; align-items: center; gap: .35em; font-size: .89rem; font-weight: 500; line-height: 1.4; color: var(--ink-soft); padding-block: .4rem; border-bottom: 2px solid transparent; }
.kpa-v3-nav ul { align-items: center; }
.kpa-v3-nav a:hover { color: var(--v3-ink); border-bottom-color: var(--accent); }
@media (min-width: 1040px) { .kpa-v3-nav { display: block; } }
.kpa-v3-hdr__end { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

/* The fix: both controls inherit height, padding and font from one selector.
   Previously the tel was a bordered pill with its own padding and the CTA was
   a .kpa-btn, so they rendered at two different heights. */
.kpa-v3-hdr__end > .kpa-v3-hdr__tel,
.kpa-v3-hdr__end > .kpa-btn {
  height: 46px; padding: 0 1.5rem; display: inline-flex; align-items: center; gap: .5em;
  font-size: .93rem; font-weight: 700; border-radius: var(--radius-pill); white-space: nowrap;
}
.kpa-v3-hdr__tel { border: 1.5px solid var(--v3-line); color: var(--v3-ink); }
.kpa-v3-hdr__tel:hover { border-color: var(--accent); }
.kpa-v3-hdr__tel svg { color: var(--accent-dark); flex-shrink: 0; }
@media (max-width: 700px) { .kpa-v3-hdr__end > .kpa-btn { display: none; } }

/* ==========================================================================
   2 — HERO. Everything above the fold at 1440x800.
   ========================================================================== */
.kpa-v3-hero { background: var(--v3-grey); border-bottom: 1px solid var(--v3-line-soft); }
/* align-items:start, not center — the form is the taller column, and centring
   pushed a block of dead space above the headline and the stat bar off the fold. */
.kpa-v3-hero__in { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: start; padding-block: clamp(2.75rem, 4.5vw, 3.75rem); }
/* Centred against the form, which is the taller column — top-aligning left a
   150px hole under the ticks and made the headline sit high in the frame.
   Safe now that the stat bar is deliberately below the fold. */
@media (min-width: 1000px) { .kpa-v3-hero__in { grid-template-columns: 1.08fr .92fr; align-items: center; } }

/* Spacing opened up after the 11 Aug review — the headline, subhead and ticks
   were stacked too tightly against each other and sat too high in the frame.
   The extra rhythm here is also what pushes the stat bar below the fold. */
.kpa-v3-hero h1 { margin-top: 1.35rem; font-size: clamp(2.1rem, 1.3rem + 2.3vw, 3.05rem); line-height: 1.12; max-width: 17ch; }
.kpa-v3 .kpa-v3-hero__sub { margin-top: 2.6rem; max-width: 48ch; font-size: 1.03rem; line-height: 1.65; color: var(--ink-soft); }
/* Gestalt: the gap BETWEEN groups must beat the gap WITHIN a group. The ticks
   were 1.1rem apart while the whole block sat 1.25rem below the subhead, so the
   three blocks read as one undifferentiated column. Ticks tightened, block
   separation widened. */
.kpa-v3 .kpa-v3-ticks { margin-top: 3.4rem; display: grid; gap: .85rem; }
.kpa-v3 .kpa-v3-ticks li { display: flex; gap: .7em; align-items: flex-start; font-size: .95rem; font-weight: 600; color: var(--v3-ink); }
.kpa-v3 .kpa-v3-ticks svg { color: var(--accent-dark); flex-shrink: 0; margin-top: .18em; }
.kpa-v3 .kpa-v3-hero__tel { margin-top: 1.35rem; display: inline-flex; align-items: center; gap: .6em; font-size: .95rem; color: var(--ink-soft); }
.kpa-v3 .kpa-v3-hero__tel a { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--v3-ink); }
.kpa-v3 .kpa-v3-hero__tel a:hover { color: var(--accent-dark); }
/* Mobile only: the form drops below, so the hero needs its own button there. */
.kpa-v3-hero__mob { display: none; }
@media (max-width: 999px) { .kpa-v3 .kpa-v3-hero__mob { display: inline-flex; width: 100%; margin-top: 1.6rem; } }

/* Form card — shortened so the whole hero clears 800px. */
.kpa-v3-form { background: #fff; border: 1px solid var(--v3-line); border-top: 4px solid var(--accent); border-radius: var(--v3-r); padding: clamp(1.25rem, 2.2vw, 1.6rem); box-shadow: 0 20px 50px rgba(20,22,24,.09); }
.kpa-v3-form h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--v3-ink); }
.kpa-v3-form > p { margin-top: .45rem; font-size: .87rem; color: var(--ink-soft); }
.kpa-v3 .kpa-v3-form .kpa-form { margin-top: 1rem; }
.kpa-v3 .kpa-v3-form .kpa-formcard__foot { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--v3-line-soft); font-size: .78rem; }

/* Stat bar, pulled up into the hero so the numbers are near the fold. */
.kpa-v3-hero__stats { border-top: 1px solid var(--v3-line); }
.kpa-v3-hero__stats ul { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .kpa-v3-hero__stats ul { grid-template-columns: repeat(4, 1fr); } }
.kpa-v3-hero__stats li { padding: 1.35rem 1rem; text-align: center; border-right: 1px solid var(--v3-line); }
.kpa-v3-hero__stats li:last-child { border-right: 0; }
.kpa-v3-hero__stats li { border-bottom: 0; }
@media (max-width: 799px) { .kpa-v3-hero__stats li:nth-child(2n) { border-right: 0; } .kpa-v3-hero__stats li:nth-child(-n+2) { border-bottom: 1px solid var(--v3-line); } }
.kpa-v3-hero__stats strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1; color: var(--accent-dark); }
.kpa-v3-hero__stats span { display: block; margin-top: .4rem; font-size: .78rem; color: var(--ink-soft); }

/* ==========================================================================
   3 — TRUST BAR: partners plus the reasons to believe, on one row
   ========================================================================== */
.kpa-v3-trust { padding-block: clamp(2rem, 3.5vw, 2.75rem); border-bottom: 1px solid var(--v3-line-soft); }
.kpa-v3-trust__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem clamp(1.75rem, 4vw, 3rem); }
.kpa-v3-trust__lab { width: 100%; text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
.kpa-v3-trust li { position: relative; width: 118px; height: 40px; }
.kpa-v3-trust img { height: 40px; width: auto; max-width: 118px; object-fit: contain; margin-inline: auto; filter: grayscale(1); opacity: .6; transition: filter .25s ease, opacity .25s ease; }
.kpa-v3-trust li:hover img { filter: none; opacity: 1; }
.kpa-v3-trust li.is-inverted img { filter: grayscale(1) invert(1); }
.kpa-v3-trust li.is-inverted:hover img { filter: invert(1); opacity: 1; }
.kpa-v3 .kpa-v3-badges { margin-top: 1.9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.kpa-v3 .kpa-v3-badges li { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.1em; border: 1px solid var(--v3-line); border-radius: var(--radius-pill); font-size: .84rem; font-weight: 600; color: var(--v3-ink); background: #fff; }
.kpa-v3 .kpa-v3-badges svg { color: var(--accent-dark); flex-shrink: 0; }

/* ==========================================================================
   4 — BEFORE & AFTER
   ========================================================================== */
.kpa-v3-gal { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); }
@media (min-width: 1000px) { .kpa-v3-gal { grid-template-columns: repeat(2, 1fr); } }
.kpa-v3-gal > figure:first-child { grid-column: 1 / -1; }
.kpa-v3 .kpa-slider { border-radius: var(--v3-r); border: 1px solid var(--v3-line); box-shadow: 0 14px 36px rgba(20,22,24,.10); }
.kpa-v3-gal > figure:first-child .kpa-slider { aspect-ratio: 2 / 1; }
@media (max-width: 700px) { .kpa-v3-gal > figure:first-child .kpa-slider { aspect-ratio: 4 / 3; } }
.kpa-v3-gal figcaption { margin-top: .85rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; }
.kpa-v3-gal__town { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--v3-ink); }
.kpa-v3 .kpa-v3-gal__meta { font-size: .85rem; color: var(--ink-soft); }
.kpa-v3-gal__foot { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }

/* ==========================================================================
   5 — SERVICES: one flagship, then four. Never a 3+2 orphan row.
   ========================================================================== */
.kpa-v3-flag {
  display: grid; gap: 0; background: #fff; border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); overflow: hidden; margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
  transition: border-color .25s ease, box-shadow .25s ease;
}
@media (min-width: 860px) { .kpa-v3-flag { grid-template-columns: 1.05fr .95fr; } }
.kpa-v3-flag:hover { border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 16px 40px rgba(20,22,24,.10); }
.kpa-v3-flag__img { position: relative; min-height: 300px; }
.kpa-v3-flag__img .kpa-ph { position: absolute; inset: 0; }
.kpa-v3-flag__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-v3-flag__body { padding: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }
.kpa-v3-flag__body h3 { margin-top: .9rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.05rem); color: var(--v3-ink); letter-spacing: -.02em; }
.kpa-v3-flag__body p { margin-top: .8rem; color: var(--ink-soft); }
.kpa-v3 .kpa-v3-flag__list { margin-top: 1.25rem; display: grid; gap: .55rem; }
.kpa-v3 .kpa-v3-flag__list li { display: flex; gap: .6em; align-items: flex-start; font-size: .92rem; color: var(--v3-ink); }
.kpa-v3 .kpa-v3-flag__list svg { color: var(--accent-dark); flex-shrink: 0; margin-top: .18em; }
.kpa-v3-flag__go { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5em; font-size: .9rem; font-weight: 700; color: var(--accent-dark); }
.kpa-v3-flag:hover .kpa-v3-flag__go { gap: .9em; }

.kpa-v3-svcs { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); }
@media (min-width: 560px) { .kpa-v3-svcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kpa-v3-svcs { grid-template-columns: repeat(4, 1fr); } }
.kpa-v3-svc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.kpa-v3-svc:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 16px 36px rgba(20,22,24,.10); }
.kpa-v3-svc__img { position: relative; aspect-ratio: 16 / 10; }
.kpa-v3-svc__img .kpa-ph { width: 100%; height: 100%; }
.kpa-v3-svc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-v3-svc__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.kpa-v3-svc__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.13rem; color: var(--v3-ink); }
.kpa-v3-svc__body p { margin-top: .5rem; font-size: .89rem; color: var(--ink-soft); flex: 1; }
.kpa-v3-svc__go { margin-top: 1rem; display: inline-flex; align-items: center; gap: .45em; font-size: .84rem; font-weight: 700; color: var(--accent-dark); }
.kpa-v3-svc:hover .kpa-v3-svc__go { gap: .8em; }

/* ==========================================================================
   6 — PROCESS. Connected rail, gold numerals.
   ========================================================================== */
.kpa-v3-steps { display: grid; gap: clamp(1.75rem, 3vw, 2.25rem); position: relative; }
@media (min-width: 940px) { .kpa-v3-steps { grid-template-columns: repeat(4, 1fr); } }
.kpa-v3-step { position: relative; padding-top: 3.4rem; }
.kpa-v3-step::after { content: ""; position: absolute; top: 21px; left: 0; right: 0; height: 2px; background: var(--v3-line); }
.kpa-v3-step:last-child::after { right: 50%; }
@media (max-width: 939px) { .kpa-v3-step::after { display: none; } .kpa-v3-step { padding-top: 3rem; } }
.kpa-v3-step__n {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
}
.kpa-v3-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; color: var(--v3-ink); }
.kpa-v3-step p { margin-top: .6rem; font-size: .92rem; color: var(--ink-soft); }

/* ==========================================================================
   7 — GUARANTEE. Gold band, no seal.
   ========================================================================== */
.kpa-v3-guar { background: var(--accent); color: var(--on-accent); }
.kpa-v3-guar__in { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 3.75rem); }
@media (min-width: 940px) { .kpa-v3-guar__in { grid-template-columns: 1fr auto; } }
.kpa-v3-guar h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem); line-height: 1.15; color: var(--on-accent); letter-spacing: -.02em; }
.kpa-v3-guar p { margin-top: .85rem; color: var(--on-accent-dim); max-width: 66ch; font-size: .97rem; }
.kpa-v3-guar__lab { font-size: .69rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--on-accent-dim); margin-bottom: .7rem; }
.kpa-v3 .kpa-v3-guar .kpa-btn { background: var(--v3-ink); color: #fff; white-space: nowrap; }
.kpa-v3 .kpa-v3-guar .kpa-btn:hover { background: #000; }

/* ==========================================================================
   8 — WHY US
   ========================================================================== */
.kpa-v3-why { display: grid; gap: 0 clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .kpa-v3-why { grid-template-columns: repeat(2, 1fr); } }
.kpa-v3-why li { padding-block: 1.5rem; border-top: 1px solid var(--v3-line); }
.kpa-v3-why h3 { display: flex; align-items: center; gap: .6em; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--v3-ink); }
.kpa-v3-why h3 svg { color: var(--accent-dark); flex-shrink: 0; }
.kpa-v3-why p { margin-top: .5rem; font-size: .92rem; color: var(--ink-soft); }

/* ==========================================================================
   9 — AREAS
   ========================================================================== */
.kpa-v3-towns { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 700px) { .kpa-v3-towns { grid-template-columns: repeat(5, 1fr); } }
.kpa-v3-towns a { display: block; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--v3-line); border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--v3-ink); transition: border-color .2s ease, box-shadow .2s ease; }
.kpa-v3-towns a small { display: block; margin-top: .2rem; font-size: .71rem; font-weight: 500; color: var(--ink-soft); }
.kpa-v3-towns a:hover { border-color: var(--accent); box-shadow: 0 8px 20px rgba(20,22,24,.07); }

/* ==========================================================================
   10 — FINAL CTA
   ========================================================================== */
.kpa-v3-final { background: var(--v3-ink); color: rgba(255,255,255,.74); text-align: center; }
.kpa-v3-final__in { padding-block: clamp(3rem, 6vw, 4.75rem); }
.kpa-v3-final h2 { margin-top: 1rem; color: #fff; }
.kpa-v3-final > div > p { margin-top: 1.1rem; margin-inline: auto; max-width: 52ch; }
.kpa-v3-final__act { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
.kpa-v3 .kpa-v3-final .kpa-btn--outline { border-color: rgba(255,255,255,.4); color: #fff; }
.kpa-v3 .kpa-v3-final .kpa-btn--outline:hover { background: #fff; color: var(--v3-ink); }
.kpa-v3 .kpa-v3-final__proof { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5em; font-size: .85rem; }
.kpa-v3 .kpa-v3-final__proof svg { color: var(--accent); flex-shrink: 0; }

/* ==========================================================================
   ADDITIONS — 11 Aug review round 2
   ========================================================================== */

/* --- Hero photograph + gradient ----------------------------------------
   The page stays light, so the wash is white-to-transparent left-to-right:
   headline sits on near-white and the photograph carries the right-hand side
   behind the form card. On narrow screens it flips to top-down. */
.kpa-v3-hero { position: relative; overflow: hidden; }
.kpa-v3-hero__bg { position: absolute; inset: 0; z-index: 0; }
.kpa-v3-hero__bg .kpa-ph { width: 100%; height: 100%; }
.kpa-v3-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 55%; }
.kpa-v3-hero__wash {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 34%,
    rgba(255,255,255,.80) 55%, rgba(255,255,255,.58) 78%, rgba(255,255,255,.48) 100%);
}
@media (max-width: 999px) {
  .kpa-v3-hero__wash { background: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 55%, rgba(255,255,255,.9) 100%); }
}
.kpa-v3-hero__in, .kpa-v3-hero__stats { position: relative; z-index: 2; }

/* --- Stat bar: a deliberate card, not a band clipped by the wrap width --- */
.kpa-v3-hero__stats {
  border: 1px solid var(--v3-line); border-radius: var(--v3-r);
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(20,22,24,.10); overflow: hidden;
  /* Sits below the fold on purpose: the hero's job above the fold is headline,
     proof ticks and the form. The stats reward the first scroll. */
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.kpa-v3-hero__stats.kpa-wrap { width: calc(100% - 2 * var(--gut)); padding-inline: 0; }
.kpa-v3 .kpa-v3-hero__stats li { transition: transform .25s ease; }
.kpa-v3 .kpa-v3-hero__stats li:hover { transform: translateY(-3px); }
/* Solid, not a gradient — the gradient read as a texture rather than a number.
   The staggered reveal and the hover lift are what made it feel alive. */
.kpa-v3 .kpa-v3-hero__stats strong { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.3rem); color: var(--accent-dark); }
.kpa-v3 .kpa-v3-hero__stats span { font-weight: 600; color: var(--v3-ink); font-size: .79rem; }

/* --- Social proof cluster ------------------------------------------------
   Initials, not stock headshots. Swap for real reviewer photos when the
   Google reviews land; a fake face is the one thing the framework says
   contaminates everything near it. */
.kpa-v3-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .85rem 1.25rem; padding-block: 1.5rem; }
.kpa-v3 .kpa-v3-social__txt { font-size: .93rem; color: var(--ink-soft); }
.kpa-v3 .kpa-v3-social__txt strong { color: var(--v3-ink); }
.kpa-v3-stars { display: inline-flex; gap: .12em; color: var(--accent); }

/* --- Why choose us: icon cards ------------------------------------------ */
.kpa-v3-cards { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 620px) { .kpa-v3-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kpa-v3-cards { grid-template-columns: repeat(4, 1fr); } }
.kpa-v3-card {
  background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r);
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.kpa-v3-card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 18px 40px rgba(20,22,24,.10); }
.kpa-v3-card__ico {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-dark); margin-bottom: 1.1rem;
  transition: background-color .28s ease, color .28s ease, transform .28s ease;
}
.kpa-v3-card:hover .kpa-v3-card__ico { background: var(--accent); color: var(--on-accent); transform: scale(1.06) rotate(-4deg); }
.kpa-v3-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.13rem; color: var(--v3-ink); }
.kpa-v3-card p { margin-top: .55rem; font-size: .94rem; color: var(--ink-soft); }

/* --- Guarantee: rebuilt ------------------------------------------------- */
.kpa-v3-guar__in { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .kpa-v3-guar__in { grid-template-columns: 1.15fr .85fr; } }
.kpa-v3-guar__yrs { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .9rem; }
.kpa-v3-guar__yrs b { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 2.4rem + 3vw, 5rem); line-height: .85; color: var(--on-accent); }
.kpa-v3-guar__yrs i { font-style: normal; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-accent-dim); max-width: 7ch; line-height: 1.3; }
.kpa-v3-guar__list { display: grid; gap: .6rem; margin-top: 1.4rem; }
.kpa-v3-guar__list li { display: flex; gap: .6em; align-items: flex-start; font-size: .95rem; font-weight: 600; color: var(--on-accent); }
.kpa-v3-guar__list svg { flex-shrink: 0; margin-top: .18em; }
.kpa-v3-guar__panel { background: rgba(20,22,24,.09); border: 1px solid rgba(20,22,24,.14); border-radius: var(--v3-r); padding: clamp(1.35rem, 2.5vw, 1.85rem); }
.kpa-v3-guar__panel p { margin: 0 0 1.1rem; font-size: .9rem; color: var(--on-accent-dim); }
.kpa-v3 .kpa-v3-guar__panel .kpa-btn { width: 100%; }

/* --- Reviews slot -------------------------------------------------------- */
.kpa-v3-revs { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 780px) { .kpa-v3-revs { grid-template-columns: repeat(3, 1fr); } }
.kpa-v3-rev { background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r); padding: clamp(1.35rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; }
.kpa-v3-rev__stars { display: flex; gap: .15em; color: var(--accent); margin-bottom: .9rem; }
.kpa-v3-rev blockquote { flex: 1; font-size: .96rem; color: var(--ink-soft); }
.kpa-v3-rev figcaption { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--v3-line-soft); font-size: .87rem; font-weight: 700; color: var(--v3-ink); }
.kpa-v3-rev--empty { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: var(--v3-grey); min-height: 190px; }
.kpa-v3-rev--empty p { font-size: .88rem; color: var(--ink-soft); max-width: 26ch; }
.kpa-v3 .kpa-v3-revnote { margin-top: 1.75rem; text-align: center; font-size: .88rem; color: var(--ink-soft); }

/* --- FAQ centred --------------------------------------------------------- */
.kpa-v3-faq { max-width: 820px; margin-inline: auto; }
.kpa-v3 .kpa-v3-faq .kpa-faq__item { background: #fff; }
.kpa-v3-faq__foot { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }

/* --- Final CTA ----------------------------------------------------------- */
.kpa-v3-final__kicker { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.kpa-v3 .kpa-v3-final h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.kpa-v3-final .kpa-v3-social { padding-block: 0; margin-top: 2rem; }
.kpa-v3-final .kpa-v3-social__txt { color: rgba(255,255,255,.74); }
.kpa-v3-final .kpa-v3-social__txt strong { color: #fff; }

/* --- Motion polish ------------------------------------------------------- */
.kpa-v3 .kpa-btn { transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kpa-v3 .kpa-btn--accent:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--accent-rgb), .4); }
.kpa-v3-gal figure { transition: transform .3s ease; }
.kpa-v3-gal figure:hover { transform: translateY(-3px); }

/* ==========================================================================
   ROUND 3 — bottom-up review
   ========================================================================== */

/* --- Materials ----------------------------------------------------------- */
.kpa-v3-mats { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); border-bottom: 1px solid var(--v3-line-soft); }
.kpa-v3-mats__in { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .kpa-v3-mats__in { grid-template-columns: .85fr 1.15fr; } }
.kpa-v3-mats__txt h2 { margin-top: .8rem; font-family: var(--font-display); font-weight: 700; color: var(--v3-ink); }
.kpa-v3-mats__txt p { margin-top: .7rem; font-size: .93rem; color: var(--ink-soft); max-width: 46ch; }
.kpa-v3-mats__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 1.75rem clamp(2rem, 5vw, 4rem); }
.kpa-v3-mats__row li { position: relative; width: 150px; height: 48px; }
.kpa-v3-mats__row img { height: 48px; width: auto; max-width: 150px; object-fit: contain; margin-inline: auto; filter: grayscale(1); opacity: .7; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.kpa-v3-mats__row li:hover img { filter: none; opacity: 1; transform: scale(1.05); }
.kpa-v3-mats__row li.is-inverted img { filter: grayscale(1) invert(1); }
.kpa-v3-mats__row li.is-inverted:hover img { filter: invert(1); opacity: 1; }

/* --- Guarantee: two columns, said once ----------------------------------- */
.kpa-v3-guar__in { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .kpa-v3-guar__in { grid-template-columns: 1fr auto; } }
.kpa-v3-guar h2 { max-width: 18ch; }
.kpa-v3-guar > .kpa-wrap > div > p { margin-top: .9rem; color: var(--on-accent-dim); max-width: 52ch; font-size: 1.02rem; }
.kpa-v3 .kpa-v3-guar__list { display: grid; gap: .85rem; }
.kpa-v3-guar__list li { display: flex; gap: .7em; align-items: flex-start; font-size: .98rem; font-weight: 600; color: var(--on-accent); }
.kpa-v3-guar__list svg { flex-shrink: 0; margin-top: .12em; }

/* --- Final CTA: its own block, on the photograph ------------------------- */
.kpa-v3-final { position: relative; overflow: hidden; background: var(--v3-ink); color: rgba(255,255,255,.8); text-align: center; }
.kpa-v3-final__bg { position: absolute; inset: 0; }
.kpa-v3-final__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.kpa-v3-final__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,24,.9), rgba(20,22,24,.82)); }
.kpa-v3-final__in { position: relative; z-index: 2; padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.kpa-v3 .kpa-v3-final h2 { color: #fff; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); }
.kpa-v3-final__in > p { margin: 1.1rem auto 0; max-width: 54ch; color: rgba(255,255,255,.8); }
.kpa-v3-final__act { margin-top: 2.1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
.kpa-v3 .kpa-v3-final .kpa-btn { height: 56px; padding-inline: 2.4rem; font-size: 1rem; }
.kpa-v3 .kpa-v3-final .kpa-btn--outline { border-color: rgba(255,255,255,.45); color: #fff; }
.kpa-v3 .kpa-v3-final .kpa-btn--outline:hover { background: #fff; color: var(--v3-ink); }
.kpa-v3-final .kpa-v3-social { padding-block: 0; margin-top: 1.9rem; }
.kpa-v3-final .kpa-v3-social__txt { color: rgba(255,255,255,.8); }
.kpa-v3-final .kpa-v3-social__txt strong { color: #fff; }

/* --- Footer: kept dark, deliberately. The final CTA now sits on the
       photograph under its own wash, so the two no longer merge into one black
       slab — which is what made the old kicker look invisible. A dark footer
       also keeps the light-on-dark logo working; a white footer would need a
       second logo file we don't have yet. ---------------------------------- */
.kpa-v3 .kpa-ft { border-top: 3px solid var(--accent); }

/* --- Areas: motion ------------------------------------------------------- */
.kpa-v3-towns a { transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.kpa-v3-towns a:hover { transform: translateY(-3px); }

/* --- Gallery CTA: motion ------------------------------------------------- */
.kpa-v3-gal__foot .kpa-btn--accent { position: relative; }
.kpa-v3-gal__foot .kpa-btn--accent::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55);
  animation: kpa-v3-pulse 2.8s ease-out infinite;
}
@keyframes kpa-v3-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .kpa-v3-gal__foot .kpa-btn--accent::after { animation: none; } }

/* ==========================================================================
   TRUST BAR — replaces the 4-up stat card with a slim icon row.
   Borrowed shape from cardiffdrivesandpatios.co.uk, which does this well: one
   line, icon + short claim, rating first. Ours carries only claims we can
   actually stand behind — no "fully insured" until Taylor confirms cover.
   ========================================================================== */
.kpa-v3-trustbar { border-block: 1px solid var(--v3-line); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kpa-v3-trustbar ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem clamp(1.25rem, 3vw, 2.75rem); padding-block: 1.15rem; }
.kpa-v3-trustbar li { display: inline-flex; align-items: center; gap: .6em; font-size: .92rem; font-weight: 600; color: var(--v3-ink); white-space: nowrap; }
.kpa-v3-trustbar li svg { flex-shrink: 0; color: var(--accent-dark); }
.kpa-v3-trustbar__rating { font-weight: 400; color: var(--ink-soft); }
.kpa-v3-trustbar__rating b { font-weight: 700; color: var(--v3-ink); }
.kpa-v3-trustbar__stars { display: inline-flex; gap: .1em; color: var(--accent); }
.kpa-v3-gmark { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 900px) { .kpa-v3-trustbar ul { justify-content: center; } }

/* ==========================================================================
   HEADER — services mega-dropdown + burger
   The V3 header shipped without a burger, which meant NO navigation at all
   below 1040px: the mobile menu markup was in the DOM with nothing to open it.
   ========================================================================== */
.kpa-v3-nav__has { position: relative; }
.kpa-v3-nav__has > a { display: inline-flex; align-items: center; gap: .35em; }
.kpa-v3-drop {
  /* Left-anchored, not centred: a 660px panel centred on the first nav item
     hangs off the left edge of the viewport. */
  position: absolute; top: calc(100% + 14px); left: 0; transform: translateY(-6px);
  /* Two columns, everything shown — no "all services" escape hatch. */
  width: min(660px, 94vw); display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; background: #fff; border: 1px solid var(--v3-line);
  border-radius: var(--v3-r); box-shadow: 0 24px 60px rgba(20,22,24,.16);
  padding: .5rem; opacity: 0; visibility: hidden; z-index: 70;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
/* Bridges the gap between the link and the panel so the pointer can travel. */
.kpa-v3-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.kpa-v3-nav__has:hover .kpa-v3-drop,
.kpa-v3-nav__has:focus-within .kpa-v3-drop,
.kpa-v3-nav__has[data-open="true"] .kpa-v3-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.kpa-v3-drop a { display: flex; align-items: flex-start; gap: .85rem; padding: .8rem; border-radius: 10px; transition: background-color .16s ease; }
.kpa-v3-drop a:hover { background: var(--v3-grey); }
.kpa-v3-drop strong { display: block; font-size: .93rem; font-weight: 700; color: var(--v3-ink); }
.kpa-v3-drop small { display: block; margin-top: .18rem; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); }
.kpa-v3-drop__ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-dark); transition: background-color .18s ease, color .18s ease;
}
.kpa-v3-drop a:hover .kpa-v3-drop__ico { background: var(--accent); color: var(--on-accent); }

.kpa-v3-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; }
.kpa-v3-burger span { display: block; height: 2px; background: var(--v3-ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
@media (min-width: 1040px) { .kpa-v3-burger { display: none; } }

/* ==========================================================================
   MOBILE  (<=999px)
   The desktop rhythm is too generous at 390px — the same margins that give the
   headline room on a 1440 monitor push the CTA below the fold on a phone.
   ========================================================================== */
@media (max-width: 999px) {
  .kpa-v3-hdr__in { min-height: 68px; }
  .kpa-v3-hdr__logo { height: 44px; width: 66px; }
  .kpa-v3-hdr__end > .kpa-v3-hdr__tel { height: 42px; padding: 0 1rem; font-size: .88rem; }

  .kpa-v3-hero__in { padding-block: 2rem 1.75rem; gap: 1.75rem; }
  .kpa-v3-hero h1 { margin-top: .7rem; max-width: none; }
  .kpa-v3 .kpa-v3-hero__sub { margin-top: 1.1rem; font-size: .98rem; }
  .kpa-v3 .kpa-v3-ticks { margin-top: 1.6rem; gap: .8rem; }
  .kpa-v3 .kpa-v3-ticks li { font-size: .92rem; }
  .kpa .kpa-v3-hero__mob { margin-top: 1.75rem; height: 54px; font-size: 1rem; }

  /* Trust bar: a wrapped flex row of five items reads as a jumble on a phone.
     Two clean columns instead. */
  .kpa-v3-trustbar ul { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; padding-block: 1.25rem; }
  .kpa-v3-trustbar li { white-space: normal; font-size: .82rem; align-items: flex-start; }
  .kpa-v3-trustbar li:first-child { grid-column: 1 / -1; justify-content: center; }

  .kpa-v3-sect { padding-block: clamp(2.75rem, 9vw, 3.5rem); }
  .kpa-v3-head { margin-bottom: 1.75rem; }
  .kpa-v3 .kpa-v3-head .kpa-h2 { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2rem); }
  .kpa-v3-head p { font-size: .96rem; }

  .kpa-v3-flag__img { min-height: 220px; }
  .kpa-v3-flag__body { padding: 1.5rem; }

  .kpa-v3-steps { gap: 1.5rem; }
  .kpa-v3-step { padding-top: 0; padding-left: 3.75rem; min-height: 44px; }
  .kpa-v3-step__n { width: 40px; height: 40px; font-size: .88rem; }

  .kpa-v3-guar__in { padding-block: 2.5rem; }
  .kpa-v3-guar h2 { max-width: none; }

  .kpa-v3-social { flex-direction: column; gap: .5rem; text-align: center; }
  .kpa-v3 .kpa-v3-social__txt { font-size: .9rem; }

  .kpa-v3-gal__foot, .kpa-v3-faq__foot { flex-direction: column; }
  .kpa-v3 .kpa-v3-gal__foot .kpa-btn, .kpa-v3 .kpa-v3-faq__foot .kpa-btn { width: 100%; }

  .kpa-v3-final__in { padding-block: 3rem; }
  .kpa-v3 .kpa-v3-final .kpa-btn { width: 100%; height: 54px; }
  .kpa-v3-final__act { flex-direction: column; gap: .75rem; }

  .kpa-v3-mats__row { justify-content: center; gap: 1.5rem 2rem; }
  .kpa-v3-mats__row li { width: 110px; height: 38px; }
  .kpa-v3-mats__row img { height: 38px; max-width: 110px; }
}

@media (max-width: 560px) {
  .kpa-v3-towns { grid-template-columns: 1fr 1fr; }
  .kpa-v3-trustbar li { font-size: .79rem; }
}

/* ==========================================================================
   COVERAGE — pitch + town pills beside a real, inline-SVG coverage map
   ========================================================================== */
.kpa-v3-cover { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .kpa-v3-cover { grid-template-columns: 1fr 1.05fr; } }
.kpa-v3 .kpa-v3-cover__lead { margin-top: 1rem; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.kpa-v3-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.kpa-v3-pills a {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .62em 1.1em; border: 1px solid var(--v3-line); border-radius: var(--radius-pill);
  background: #fff; font-size: .89rem; font-weight: 600; color: var(--v3-ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kpa-v3-pills a svg { color: var(--accent-dark); flex-shrink: 0; }
.kpa-v3-pills a:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,22,24,.08); }

.kpa-v3-map { position: relative; border: 1px solid var(--v3-line); border-radius: var(--v3-r); overflow: hidden; box-shadow: 0 18px 44px rgba(20,22,24,.10); }
/* Direct child only — as a descendant selector this also hit the icon inside
   the "View on Google Maps" button and blew it up to full width. */
.kpa-v3-map > svg { display: block; width: 100%; height: auto; }
.kpa-v3-map__lbl { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: var(--v3-ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.kpa-v3-map__lbl--base { fill: var(--v3-ink); font-size: 11.5px; }
.kpa-v3-map__pt circle { transition: r .2s ease; }
.kpa-v3-map__pt:hover circle { r: 7.5; }
/* A floating badge collided with a dot in every corner — Carlisle top-left,
   Brampton top-right, Kirkby Stephen bottom-right. It is a footer strip on the
   card instead, which cannot collide with anything. */
.kpa-v3-map__badge {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .9rem;
  background: var(--v3-ink); color: #fff; padding: .85rem 1.1rem;
}
.kpa-v3-map__badge strong { font-size: .87rem; }
.kpa-v3-map__badge small { font-size: .78rem; color: rgba(255,255,255,.66); margin-left: auto; }
@media (max-width: 560px) {
  .kpa-v3-map__badge { justify-content: center; text-align: center; }
  .kpa-v3-map__badge small { margin-left: 0; width: 100%; }
  .kpa-v3-map__lbl { font-size: 13px; }
}

/* Areas dropdown — two compact columns of pins. */
.kpa-v3-drop--areas { width: min(460px, 94vw); }
.kpa-v3-drop--areas a { align-items: center; padding: .6rem .7rem; gap: .55rem; }
.kpa-v3-drop--areas strong { font-size: .88rem; }
.kpa-v3-drop__pin { flex-shrink: 0; color: var(--accent-dark); display: grid; place-items: center; }

/* Google Maps link on the coverage map */
/* In the badge strip, not floating over the map — it was landing on Coniston. */
.kpa-v3-map__maps {
  display: inline-flex; align-items: center; gap: .45em; margin-left: auto;
  background: #fff; color: var(--v3-ink); font-size: .8rem; font-weight: 700;
  padding: .5em .95em; border-radius: var(--radius-pill); white-space: nowrap;
  transition: transform .2s ease;
}
.kpa-v3-map__maps svg { width: 15px; height: 15px; color: var(--accent-dark); flex-shrink: 0; }
.kpa-v3-map__maps:hover { transform: translateY(-1px); }
.kpa-v3-map__badge {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .9rem;
  background: var(--v3-ink); color: #fff; padding: .85rem 1.1rem;
}
.kpa-v3-map__badge strong { font-size: .87rem; }
.kpa-v3-map__badge small { font-size: .78rem; color: rgba(255,255,255,.66); margin-left: auto; }
@media (max-width: 560px) {
  .kpa-v3-map__badge { justify-content: center; text-align: center; }
  .kpa-v3-map__badge small { margin-left: 0; width: 100%; }
  .kpa-v3-map__lbl { font-size: 13px; }
}

/* Areas dropdown — two compact columns of pins. */
.kpa-v3-drop--areas { width: min(460px, 94vw); }
.kpa-v3-drop--areas a { align-items: center; padding: .6rem .7rem; gap: .55rem; }
.kpa-v3-drop--areas strong { font-size: .88rem; }
.kpa-v3-drop__pin { flex-shrink: 0; color: var(--accent-dark); display: grid; place-items: center; }

/* Google Maps link on the coverage map */
.kpa-v3-map__maps {
  position: absolute; left: 1rem; bottom: calc(1rem + 52px); white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5em;
  background: #fff; color: var(--v3-ink); font-size: .88rem; font-weight: 700;
  padding: .7em 1.2em; border-radius: var(--radius-pill); box-shadow: 0 8px 24px rgba(20,22,24,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpa-v3-map__maps svg { width: 17px; height: 17px; color: var(--accent-dark); flex-shrink: 0; }
.kpa-v3-map__maps:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,22,24,.28); }
@media (max-width: 560px) { .kpa-v3-map__maps { left: .75rem; right: .75rem; bottom: calc(.75rem + 74px); justify-content: center; } }

/* ==========================================================================
   TRUST TICKER — under the header
   ========================================================================== */
.kpa-v3-ticker { background: var(--v3-ink); color: #fff; overflow: hidden; }
.kpa-v3-ticker__track { display: flex; width: max-content; animation: kpa-v3-marquee 38s linear infinite; }
.kpa-v3-ticker__track:hover { animation-play-state: paused; }
.kpa-v3 .kpa-v3-ticker__set { display: flex; align-items: center; }
.kpa-v3-ticker__set li {
  display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  padding: .72rem clamp(1.25rem, 3vw, 2.25rem);
  font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.9);
}
.kpa-v3-ticker__set li svg { flex-shrink: 0; color: var(--accent); }
.kpa-v3-ticker__set li .kpa-v3-gmark { width: 16px; height: 16px; }
.kpa-v3-ticker__set li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.28); margin-left: clamp(1.25rem, 3vw, 2.25rem); }
@keyframes kpa-v3-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .kpa-v3-ticker__track { animation: none; }
  .kpa-v3 .kpa-v3-ticker__set:last-child { display: none; }
  .kpa-v3 .kpa-v3-ticker__set { flex-wrap: wrap; justify-content: center; }
}

/* Hero bullet icons — one per point instead of three identical ticks. */
.kpa-v3-ticks__ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-dark);
}
.kpa-v3 .kpa-v3-ticks li { align-items: center; gap: .8em; }

/* ==========================================================================
   ANIMATED STAT BAND
   ========================================================================== */
/* Gold wash rather than grey — it breaks up the run of white sections and ties
   the band to the accent without shouting. */
.kpa-v3-statband { background: var(--v3-tint); border-block: 1px solid rgba(var(--accent-rgb), .22); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.kpa-v3 .kpa-v3-statband__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
@media (min-width: 820px) { .kpa-v3 .kpa-v3-statband__grid { grid-template-columns: repeat(4, 1fr); } }
.kpa-v3-statband__grid li { text-align: center; position: relative; }
@media (min-width: 820px) { .kpa-v3-statband__grid li + li::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(var(--accent-rgb), .3); } }
.kpa-v3-statband strong {
  display: block; font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem); color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.kpa-v3-statband span { display: block; margin-top: .6rem; font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }

/* A tinted section modifier, used to break long runs of white. */
.kpa-v3-sect--tint { background: var(--v3-tint); }

/* ==========================================================================
   MOBILE REWORK — 11 Aug
   The hero was asking twice in one viewport (a CTA button AND a form) while
   showing no photograph at all, because the desktop white wash reads as opaque
   on a narrow screen. On a phone: one image, one message, one action.
   ========================================================================== */
/* MOBILE-ONLY ELEMENTS. Every one of these needs its `display:none` HERE, at
   base — styling them only inside the max-width query leaves them visible on
   desktop, which is exactly how the hero photo panel and the reviews link
   leaked onto the desktop layout. */
.kpa-v3-hero__sub--sm,
.kpa-v3-hero__shot,
.kpa-v3-hero__revlink { display: none; }

/* Sticky action bar — desktop never sees it. */
.kpa-v3-bar { display: none; }

@media (max-width: 999px) {
  /* --- header: thicker, per request --- */
  .kpa-v3-hdr__in { min-height: 78px; }
  .kpa-v3-hdr__logo { height: 48px; width: 72px; }

  /* --- burger: smooth morph to an X --- */
  .kpa-v3-burger span { transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s ease; transform-origin: center; }
  .kpa-v3-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .kpa-v3-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .kpa-v3-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- hero: centred, image visible, one ask --- */
  .kpa-v3-hero__wash {
    background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.62) 100%);
  }
  .kpa-v3-hero__in { padding-block: 1.75rem 2.25rem; text-align: center; }
  /* Natural reading order kept: photo, headline, subhead, ticks, CTA.
     Measured at a 170px photo the CTA lands at 796px — inside the 844 fold on
     a modern phone, though below it on a 667 iPhone SE. If SE traffic ever
     matters, swap these two orders and the CTA moves to ~633px:
       .kpa-v3 .kpa-v3-hero__mob { order: 1 }
       .kpa-v3 .kpa-v3-ticks     { order: 2 } */
  .kpa-v3 .kpa-v3-hero__revlink { order: 3; }
  .kpa-v3-hero__in > div:first-child { display: flex; flex-direction: column; align-items: center; }
  .kpa-v3-hero .kpa-v3-eyebrow { justify-content: center; }
  .kpa-v3-hero h1 { font-size: clamp(2.15rem, 1.5rem + 3.2vw, 2.75rem); }
  .kpa-v3 .kpa-v3-hero__sub--lg { display: none; }
  .kpa-v3 .kpa-v3-hero__sub--sm { display: block; margin-top: 1rem; max-width: 34ch; }
  .kpa-v3 .kpa-v3-ticks { margin-top: 2rem; gap: .9rem; width: 100%; max-width: 22rem; }
  .kpa-v3-ticks li { text-align: left; }
  .kpa-v3 .kpa-v3-hero__mob { max-width: 22rem; margin-top: 1.6rem; }
  .kpa-v3 .kpa-v3-hero__mobproof { display: block; margin-top: .9rem; font-size: .8rem; color: var(--ink-soft); }

  /* The form leaves the phone hero entirely — /get-a-quote carries it. */
  .kpa-v3-form { display: none; }

  /* --- sticky action bar --- */
  .kpa-v3-bar {
    display: grid; grid-template-columns: 1fr 1.15fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--v3-line); box-shadow: 0 -6px 24px rgba(20,22,24,.10);
  }
  .kpa-v3-bar a {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    height: 52px; border-radius: var(--radius-pill); font-weight: 700; font-size: .95rem;
  }
  .kpa-v3-bar__call { border: 1.5px solid var(--v3-ink); color: var(--v3-ink); }
  .kpa-v3-bar__call svg { color: var(--accent-dark); flex-shrink: 0; }
  .kpa-v3-bar__cta { background: var(--accent); color: var(--on-accent); }
  /* Nothing must sit under the bar. */

  /* --- generally more air, more centred --- */
  .kpa-v3-sect { padding-block: clamp(3.25rem, 10vw, 4rem); }
  .kpa-v3-head { margin-bottom: 2rem; text-align: center; margin-inline: auto; }
  .kpa-v3-head .kpa-v3-eyebrow { justify-content: center; }
  .kpa-v3 .kpa-v3-head p { margin-inline: auto; }
  .kpa-v3 .kpa-v3-statband__grid { gap: 2.25rem 1rem; }
  .kpa-v3-statband span { font-size: .78rem; }
}

/* ==========================================================================
   MOBILE PASS 2 — 11 Aug
   Two bugs first, both the same specificity trap as the hero margins:
   the burger's padding was eaten by `.kpa button {padding:0}` (0,1,1), and
   eyebrows were rendering at three different sizes across the page.
   ========================================================================== */
.kpa .kpa-v3-burger { padding: 0 10px; }

@media (max-width: 999px) {
  /* --- eyebrows: one size, centred, no dash --- */
  .kpa-v3 .kpa-v3-eyebrow {
    font-size: .74rem; letter-spacing: .16em; justify-content: center;
    width: 100%; text-align: center;
  }
  .kpa-v3 .kpa-v3-eyebrow::before { display: none; }
  .kpa-v3 .kpa-v3-guar__lab, .kpa-v3 .kpa-v3-trust__lab { text-align: center; width: 100%; font-size: .74rem; letter-spacing: .16em; }

  /* --- header: icon-only call button, no number --- */
  .kpa-v3-hdr__telnum { display: none; }
  .kpa-v3-hdr__end > .kpa-v3-hdr__tel { width: 46px; padding: 0; justify-content: center; }
  .kpa-v3-hdr__tel svg { width: 19px; height: 19px; }

  /* --- hero: photo as a panel, not a backdrop --- */
  .kpa-v3-hero__bg, .kpa-v3-hero__wash { display: none; }
  /* White, so the photo's bottom fade grades into white as intended. */
  .kpa-v3-hero { background: #fff; }
  /* Photo first, then the copy — image leads on a phone, matching the
     reference. `order:-1` because the hero column is a flex stack here. */
  .kpa-v3 .kpa-v3-hero__shot {
    display: block; order: -1; width: 100%; margin: 0 0 1rem;
    border-radius: 0; box-shadow: none; overflow: visible;
  }
  /* Rounded AND faded, matching the reference: the top corners stay crisply
     rounded while the bottom edge dissolves into the page. A bottom-only
     linear mask does that; a radial one softened the corners away entirely. */
  .kpa-v3 .kpa-v3-hero__shot img {
    width: 100%; height: 170px; object-fit: cover; display: block;
    border-radius: 20px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.18) 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.18) 90%, transparent 100%);
  }

  .kpa-v3 .kpa-v3-hero__revlink {
    display: inline-flex; align-items: center; gap: .5em; margin-top: 1.25rem;
    font-size: .92rem; font-weight: 700; color: var(--v3-ink);
    border-bottom: 2px solid rgba(var(--accent-rgb), .5); padding-bottom: .2rem;
  }
  .kpa-v3-hero__revlink .kpa-v3-stars { color: var(--accent); }

  /* --- why choose us: centred, bigger icons, gold edge --- */
  .kpa-v3-card { text-align: center; border-top: 3px solid var(--accent); }
  .kpa-v3-card__ico { margin: 0 auto 1.1rem; width: 62px; height: 62px; border-radius: 16px; }
  .kpa-v3-card__ico svg { width: 30px; height: 30px; }
  .kpa-v3-card h3 { font-size: 1.18rem; }

  /* --- footer centred --- */
  .kpa-ft__grid { text-align: center; }
  .kpa-ft__brand { display: flex; flex-direction: column; align-items: center; }
  .kpa-ft__blurb { max-width: 40ch; }
  .kpa-ft__badges, .kpa-ft__social { justify-content: center; }
  .kpa-ft__contact li { justify-content: center; }
  .kpa-ft__legal { justify-content: center; text-align: center; padding-bottom: 2rem; }
  .kpa-ft__logo { margin-inline: auto; }

  /* --- reviews: give the empty state some presence --- */
  .kpa-v3-rev--empty { min-height: 150px; }

  /* --- coverage: centred --- */
  .kpa-v3-cover { text-align: center; }
  .kpa-v3 .kpa-v3-cover__lead { margin-inline: auto; }
  .kpa-v3-pills { justify-content: center; }

  /* --- guarantee + gallery centred --- */
  .kpa-v3-guar__in { text-align: center; }
  .kpa-v3 .kpa-v3-guar > .kpa-wrap > div > p { margin-inline: auto; }
  .kpa-v3 .kpa-v3-guar__list { justify-items: center; }
  .kpa-v3-guar__list li { text-align: left; max-width: 21rem; }
  .kpa-v3-gal figcaption, .kpa-v3-flag__body { text-align: center; }
  .kpa-v3-gal figcaption { justify-content: center; }
  .kpa-v3-flag__body .kpa-v3-eyebrow { justify-content: center; }
  .kpa-v3 .kpa-v3-flag__list { justify-items: center; }
  .kpa-v3-flag__list li { text-align: left; max-width: 21rem; }
  .kpa-v3-flag__go, .kpa-v3-svc__go { justify-content: center; }
  .kpa-v3-svc__body { text-align: center; }
}

/* Mobile menu: no wordmark row, centred links, generous targets. */
@media (max-width: 999px) {
  .kpa-menu__top { justify-content: flex-end; min-height: 60px; }
  .kpa-menu__links { text-align: center; margin-top: 1.5rem; }
  .kpa-menu__links a { justify-content: center; font-size: 1.5rem; padding-block: .85rem; }
  .kpa-menu__links a::after { display: none; }
  .kpa-menu__cta { padding-top: 2rem; }
}

/* ==========================================================================
   SERVICE PAGES
   Built to the same depth as the reference: photo hero with breadcrumb, why-us
   cards in four tones, options, laying patterns, process, maintenance.
   ========================================================================== */
.kpa-v3-shero { position: relative; overflow: hidden; background: var(--v3-ink); }
.kpa-v3-shero__bg { position: absolute; inset: 0; }
.kpa-v3-shero__bg .kpa-ph { width: 100%; height: 100%; }
.kpa-v3-shero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-v3-shero__wash { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,22,24,.93) 0%, rgba(20,22,24,.86) 46%, rgba(20,22,24,.66) 100%); }
.kpa-v3-shero__in { position: relative; z-index: 2; padding-block: clamp(2.75rem, 6vw, 5rem); max-width: 1280px; }
/* DOUBLED (0,2,1): `.kpa-v3 .kpa-h1 {color: var(--v3-ink)}` is (0,2,0) and was
   winning, so every dark photo hero rendered its H1 in near-black on near-black.
   Any colour override inside a dark section needs the .kpa-v3 prefix. */
.kpa-v3 .kpa-v3-shero h1 { color: #fff; margin-top: 1.1rem; font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); max-width: 18ch; }
.kpa-v3 .kpa-v3-shero__sub { margin-top: 1.2rem; max-width: 52ch; color: rgba(255,255,255,.82); font-size: 1.05rem; line-height: 1.6; }
.kpa-v3-shero__act { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.kpa-v3 .kpa-v3-shero__call { border: 1.5px solid rgba(255,255,255,.45); color: #fff; }
.kpa-v3 .kpa-v3-shero__call:hover { background: #fff; color: var(--v3-ink); }
.kpa-v3 .kpa-v3-shero__proof { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; font-size: .87rem; color: rgba(255,255,255,.8); }

.kpa-v3-crumb { font-size: .82rem; color: rgba(255,255,255,.65); }
.kpa-v3-crumb a:hover { color: var(--accent); }
.kpa-v3-crumb i { font-style: normal; opacity: .5; margin: 0 .15em; }
.kpa-v3-crumb span { color: #fff; font-weight: 600; }

/* Four icon-tile tones so a page of cards has some colour in it. */
.kpa-v3-card--a .kpa-v3-card__ico { background: rgba(var(--accent-rgb), .14); color: var(--accent-dark); }
.kpa-v3-card--b .kpa-v3-card__ico { background: rgba(28, 31, 34, .07);      color: var(--v3-ink); }
.kpa-v3-card--c .kpa-v3-card__ico { background: rgba(122, 92, 20, .12);     color: #7a5c14; }
.kpa-v3-card--d .kpa-v3-card__ico { background: rgba(70, 84, 74, .12);      color: #46544a; }
.kpa-v3-card--a { border-top: 3px solid var(--accent); }
.kpa-v3-card--b { border-top: 3px solid var(--v3-ink); }
.kpa-v3-card--c { border-top: 3px solid #7a5c14; }
.kpa-v3-card--d { border-top: 3px solid #46544a; }

/* Split: photo beside the argument */
.kpa-v3-split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .kpa-v3-split { grid-template-columns: .95fr 1.05fr; } }
.kpa-v3-split__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--v3-r); overflow: hidden; box-shadow: 0 18px 44px rgba(20,22,24,.12); }
.kpa-v3-split__media .kpa-ph { width: 100%; height: 100%; }
.kpa-v3-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-v3 .kpa-v3-split__lead { margin-top: 1rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
.kpa-v3 .kpa-v3-ticklist { display: grid; gap: .7rem; margin: 1.5rem 0 1.9rem; }
.kpa-v3-ticklist li { display: flex; gap: .7em; align-items: flex-start; font-size: .95rem; color: var(--v3-ink); }
.kpa-v3-ticklist svg { color: var(--accent-dark); flex-shrink: 0; margin-top: .18em; }

/* Options */
.kpa-v3-opts { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 700px)  { .kpa-v3-opts { grid-template-columns: repeat(3, 1fr); } }
.kpa-v3-opt { background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.kpa-v3-opt:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20,22,24,.10); }
.kpa-v3-opt__img { position: relative; aspect-ratio: 16 / 10; }
.kpa-v3-opt__img .kpa-ph { width: 100%; height: 100%; }
.kpa-v3-opt__body { padding: 1.3rem; border-top: 3px solid var(--accent); }
.kpa-v3-opt--2 .kpa-v3-opt__body { border-top-color: #7a5c14; }
.kpa-v3-opt--3 .kpa-v3-opt__body { border-top-color: #46544a; }
.kpa-v3-opt h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--v3-ink); }
.kpa-v3-opt p { margin-top: .5rem; font-size: .9rem; color: var(--ink-soft); }

/* Laying patterns — SVG diagrams */
.kpa-v3-pats { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .kpa-v3-pats { grid-template-columns: repeat(3, 1fr); } }
.kpa-v3-pat { background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r); overflow: hidden; }
.kpa-v3-pat__art { aspect-ratio: 4 / 3; background: var(--v3-grey); color: rgba(28,31,34,.30); overflow: hidden; }
.kpa-v3-pat__art svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.kpa-v3-pat figcaption { padding: 1.1rem 1.2rem 1.3rem; border-top: 3px solid rgba(var(--accent-rgb), .55); }
.kpa-v3-pat h3 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--v3-ink); }
.kpa-v3-pat p { margin-top: .45rem; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }

/* Maintenance + guarantee panel */
.kpa-v3-maint { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .kpa-v3-maint { grid-template-columns: 1.1fr .9fr; } }
.kpa-v3-maint > div > p { margin-top: 1rem; color: var(--ink-soft); line-height: 1.65; }
.kpa-v3-maint__panel { background: var(--accent); color: var(--on-accent); border-radius: var(--v3-r); padding: clamp(1.6rem, 3vw, 2.25rem); }
.kpa-v3-maint__panel h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.kpa-v3-maint__panel p { margin-top: .8rem; color: var(--on-accent-dim); font-size: .94rem; }
.kpa-v3 .kpa-v3-maint__panel .kpa-btn { margin-top: 1.4rem; border-color: var(--on-accent); color: var(--on-accent); }
.kpa-v3 .kpa-v3-maint__panel .kpa-btn:hover { background: var(--v3-ink); border-color: var(--v3-ink); color: #fff; }

@media (max-width: 999px) {
  .kpa-v3-shero__in { text-align: center; padding-block: 2.25rem 2.5rem; }
  .kpa-v3 .kpa-v3-shero h1, .kpa-v3 .kpa-v3-shero__sub { margin-inline: auto; }
  .kpa-v3-crumb { justify-content: center; }
  .kpa-v3-shero__act { flex-direction: column; }
  .kpa-v3 .kpa-v3-shero__act .kpa-btn { width: 100%; }
  .kpa-v3 .kpa-v3-shero__proof { justify-content: center; }
  .kpa-v3-split__media { order: -1; }
  .kpa-v3-split { text-align: center; }
  .kpa-v3 .kpa-v3-split__lead { margin-inline: auto; }
  .kpa-v3 .kpa-v3-ticklist { justify-items: center; }
  .kpa-v3-ticklist li { text-align: left; max-width: 22rem; }
  .kpa-v3-split .kpa-v3-eyebrow { justify-content: center; }
  .kpa-v3-maint { text-align: center; }
  .kpa-v3-pats { grid-template-columns: repeat(2, 1fr); }
  .kpa-v3-pat p { font-size: .82rem; }
}

/* Service long-form: argument column beside a sticky materials panel. */
.kpa-v3-prose { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .kpa-v3-prose { grid-template-columns: 1.35fr .65fr; } }
.kpa-v3-prose__main .kpa-h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); }
.kpa-v3-prose__main .kpa-h2 + p { margin-top: 1rem; }
.kpa-v3-prose__main p { color: var(--ink-soft); line-height: 1.7; font-size: 1.01rem; }
.kpa-v3-prose__main p + p { margin-top: 1rem; }
.kpa-v3-prose__main .kpa-h2:not(:first-child) { margin-top: 2.5rem; }
.kpa-v3-prose__main strong { color: var(--v3-ink); font-weight: 700; }
.kpa-v3-prose__side { background: var(--v3-grey); border: 1px solid var(--v3-line); border-top: 3px solid var(--accent); border-radius: var(--v3-r); padding: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 940px) { .kpa-v3-prose__side { position: sticky; top: 110px; } }
.kpa-v3-prose__side h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--v3-ink); }
.kpa-v3 .kpa-v3-prose__side ul { display: grid; gap: .75rem; margin-top: 1.1rem; }
.kpa-v3-prose__side li { display: flex; gap: .6em; align-items: flex-start; font-size: .92rem; color: var(--v3-ink); line-height: 1.5; }
.kpa-v3-prose__side svg { color: var(--accent-dark); flex-shrink: 0; margin-top: .2em; }
.kpa-v3 .kpa-v3-prose__note { margin-top: 1.2rem; font-size: .86rem; color: var(--ink-soft); }
.kpa-v3 .kpa-v3-prose__side .kpa-btn { margin-top: 1.1rem; width: 100%; }
@media (max-width: 939px) { .kpa-v3-prose { text-align: center; } .kpa-v3-prose__side { text-align: left; } }

/* ==========================================================================
   SYMMETRY RULES
   Grids leave orphan rows when the item count doesn't divide by the column
   count. This basis was set for five services (3 + 2 centred); at four it
   produced 3 + 1, which is the same orphan problem one item smaller. Half
   width gives 2 + 2 — even rows, and the cards are large enough to carry a
   photograph properly.

   If the service count changes again, change this number with it.
   ========================================================================== */
@media (min-width: 1000px) {
  .kpa-v3-svcs {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(1.1rem, 2.2vw, 1.6rem);
  }
  /* Basis is a fraction of the row, not a pixel width — a px basis small
     enough to grow into half a row is also small enough for three to fit on a
     wide screen, which is how this produced 3 + 1 at 1440px.

     Three items sit three across. Four go two and two, because 3 + 1 leaves a
     lone card on its own row. The count is read off the DOM so this keeps
     working when the service list changes. */
  .kpa-v3-svcs > * { flex: 1 1 calc(33.333% - 1.1rem); max-width: calc(33.333% - 1.1rem); }
  .kpa-v3-svcs:has(> :nth-child(4)) > * { flex-basis: calc(50% - .8rem); max-width: calc(50% - .8rem); }

  /* Six why-us cards: 3 + 3, never 4 + 2. */
  .kpa-v3-cards--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 620px) and (max-width: 999px) {
  .kpa-v3-svcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
  .kpa-v3-svcs > * { flex: 1 1 260px; max-width: calc(50% - .6rem); }
}

/* Pills centred where they are the whole section, left where they sit beside
   copy (the home-page coverage block). */
.kpa-v3-pills--center { justify-content: center; }

/* ==========================================================================
   REMAINING PAGE TYPES — contact, quote, legal, 404, index pages
   ========================================================================== */
.kpa-v3-contact { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .kpa-v3-contact { grid-template-columns: 1.05fr .95fr; } }
.kpa-v3 .kpa-v3-contact__list { display: grid; gap: 1.6rem; margin-top: 1.8rem; }
.kpa-v3-contact__list li { display: flex; gap: 1rem; align-items: flex-start; }
.kpa-v3-contact__list h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--v3-ink); }
.kpa-v3-contact__list p { margin-top: .35rem; font-size: .94rem; color: var(--ink-soft); line-height: 1.6; }
.kpa-v3-contact__list .kpa-v3-card__ico { margin-bottom: 0; flex-shrink: 0; }
.kpa-v3-contact__big { display: inline-block; margin-top: .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--v3-ink); }
.kpa-v3-contact__big:hover { color: var(--accent-dark); }
.kpa-v3 .kpa-v3-contact__tel { margin-top: 1.8rem; font-size: .95rem; color: var(--ink-soft); }
.kpa-v3-contact__tel a { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--v3-ink); }
/* The full four-field form on its own page, not squeezed into a hero. */
.kpa-v3 .kpa-v3-form--page { display: block; }
.kpa-v3 .kpa-v3-form--page textarea { min-height: 96px; }

.kpa-v3-areagrid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px)  { .kpa-v3-areagrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .kpa-v3-areagrid { grid-template-columns: repeat(5, 1fr); } }
.kpa-v3-areacard { display: block; background: #fff; border: 1px solid var(--v3-line); border-top: 3px solid var(--accent); border-radius: var(--v3-r); padding: 1.4rem 1.25rem; transition: transform .22s ease, box-shadow .22s ease; }
.kpa-v3-areacard:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(20,22,24,.10); }
.kpa-v3-areacard svg { color: var(--accent-dark); }
.kpa-v3-areacard h3 { margin-top: .7rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--v3-ink); }
.kpa-v3-areacard p { margin-top: .2rem; font-size: .8rem; color: var(--ink-soft); }
.kpa-v3-areacard .kpa-v3-svc__go { margin-top: .9rem; }

.kpa-v3-legal { max-width: 68ch; margin-inline: auto; }
.kpa-v3-legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--v3-ink); margin-top: 2.25rem; }
.kpa-v3-legal h2:first-child { margin-top: 0; }
.kpa-v3-legal p { margin-top: .9rem; color: var(--ink-soft); line-height: 1.7; }
.kpa-v3-legal a { color: var(--accent-dark); text-decoration: underline; }
.kpa-v3-legal strong { color: var(--v3-ink); }

.kpa-v3-404 { text-align: center; }
.kpa-v3-404 .kpa-h1 { margin-top: 1rem; }
.kpa-v3-404 > .kpa-wrap > p { margin: 1.1rem auto 0; max-width: 48ch; color: var(--ink-soft); }
.kpa-v3-404 .kpa-v3-final__act { margin-top: 2rem; }

.kpa-v3-sign { margin-top: 1.8rem; font-family: var(--font-display); font-weight: 700; color: var(--v3-ink); }
.kpa-v3-sign span { display: block; font-family: var(--font-body); font-weight: 500; font-size: .84rem; color: var(--ink-soft); margin-top: .2rem; }

/* Contact / quote icon tiles: the same four tones as the cards, and they
   animate on hover of their row rather than sitting inert. */
.kpa-v3-ico--a { background: rgba(var(--accent-rgb), .14); color: var(--accent-dark); }
.kpa-v3-ico--c { background: rgba(122, 92, 20, .12);       color: #7a5c14; }
.kpa-v3-ico--d { background: rgba(70, 84, 74, .12);        color: #46544a; }
.kpa-v3-contact__list li { transition: transform .25s ease; }
.kpa-v3-contact__list li:hover { transform: translateX(4px); }
.kpa-v3-contact__list .kpa-v3-card__ico { transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .25s ease, color .25s ease; }
.kpa-v3-contact__list li:hover .kpa-v3-card__ico { transform: scale(1.08) rotate(-5deg); }
.kpa-v3-contact__list li:hover .kpa-v3-ico--a { background: var(--accent); color: var(--on-accent); }
.kpa-v3-contact__list li:hover .kpa-v3-ico--c { background: #7a5c14; color: #fff; }
.kpa-v3-contact__list li:hover .kpa-v3-ico--d { background: #46544a; color: #fff; }

/* The quote page went h1 straight to h3 — a real heading-level skip. This h2
   restores the order and gives the points block a proper label. */
.kpa-v3-quote__h2 { margin-top: 2rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.7rem); }

/* The email address is long — let it shrink rather than overflow the column. */
.kpa-v3-contact__mail { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); word-break: break-word; }

/* Review widget container. min-height reserves space so the iframe arriving
   cannot shift the page — third-party embeds are a classic CLS source. */
.kpa-v3-revwidget { min-height: 320px; }
.kpa-v3-revwidget iframe { display: block; width: 100%; border: 0; }
.kpa-v3 .kpa-v3-revnote { margin-top: 1.75rem; text-align: center; }

/* Sample photos in the options cards. Same treatment as every other photo
   slot: absolutely positioned over the placeholder so a missing file still
   leaves a labelled box rather than a broken-image icon. */
.kpa-v3-opt__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Work grid: filter chips and the finished-shot variant.
   SPECIFICITY: doubled, because the scoped reset in site.css sets
   `.kpa button {padding:0}` at (0,1,1) and would eat the chip padding. */
.kpa-v3 .kpa-v3-filters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.kpa-v3 .kpa-v3-filter {
  padding: .55em 1.15em; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--ink-soft); background: #fff;
  border: 1px solid var(--v3-line); border-radius: 99px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.kpa-v3 .kpa-v3-filter:hover { color: var(--v3-ink); border-color: var(--v3-ink); }
.kpa-v3 .kpa-v3-filter.is-on {
  background: var(--v3-ink); border-color: var(--v3-ink); color: #fff;
}
.kpa-v3 .kpa-v3-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A job with one photograph rather than a pair. Same footprint as the slider
   so the grid stays even whichever kind of entry lands in it. */
.kpa-v3-gal__shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--v3-r); }
.kpa-v3-gal__shot .kpa-ph { width: 100%; height: 100%; }
.kpa-v3-gal__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-v3 .kpa-v3-gal__empty { text-align: center; color: var(--ink-soft); margin-top: 1rem; }

/* A pattern card can now carry a real photograph instead of the SVG diagram.
   Same box either way, so the grid does not shift when one has a photo and
   the next does not. */
.kpa-v3-pat__art img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==========================================================================
   WORK GRID — feature + rows
   The first job runs the full width as the piece that stops you scrolling;
   everything after it sits in even rows beneath. Two per row by default, so
   five jobs read as 1 + 2 + 2 rather than 1 + 3 + 1. Once there are seven or
   more, the rows go three across, which is where three-up starts looking
   deliberate rather than sparse.
   ========================================================================== */
@media (min-width: 860px) {
  .kpa-v3-gal { display: grid; grid-template-columns: repeat(6, 1fr); align-items: start; }
  .kpa-v3-gal > .kpa-v3-gal__item { grid-column: span 3; }
  .kpa-v3-gal > .kpa-v3-gal__item:first-child { grid-column: span 6; }
  .kpa-v3-gal:has(> .kpa-v3-gal__item:nth-child(7)) > .kpa-v3-gal__item:not(:first-child) { grid-column: span 2; }

  /* The feature is doing the work of a hero, so it gets a wider crop than the
     4:3 the smaller cards use. */
  .kpa-v3-gal > .kpa-v3-gal__item:first-child .kpa-slider,
  .kpa-v3-gal > .kpa-v3-gal__item:first-child .kpa-v3-gal__shot { aspect-ratio: 21 / 9; }
  .kpa-v3-gal > .kpa-v3-gal__item:first-child figcaption .kpa-v3-gal__town { font-size: 1.15rem; }
}

/* Embedded third-party form. min-height matches the form's own data-height so
   the page reserves the space before the iframe reports back — without it the
   footer jumps up the screen and then down again as the form loads. */
.kpa-v3-embed { max-width: 46rem; }
.kpa-v3-embed iframe { display: block; width: 100%; min-height: 813px; border: 0; }
.kpa-v3 .kpa-v3-embed__act { margin-top: 1.5rem; }

/* ==========================================================================
   BARE PAGES — standalone form and survey
   One job per page, so everything competing with it is stripped: no ticker,
   no photograph, no sub line. The band is deliberately shallow so the embed
   clears the fold on a 667px phone, not just a modern one.
   ========================================================================== */
.kpa-v3-bhero { background: var(--v3-ink); color: #fff; padding-block: clamp(1.1rem, 3vw, 1.6rem); }
.kpa-v3 .kpa-v3-bhero .kpa-h1 { color: #fff; font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.15; margin: 0; }
.kpa-v3-bare .kpa-v3-ticker { display: none; }
.kpa-v3-bare .kpa-v3-embed { padding-top: 0; }
.kpa-v3-bare .kpa-v3-sect:first-of-type { padding-block-start: clamp(1.1rem, 3vw, 1.5rem); }