/* 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-surface-alt: #f8f7f4;       /* the alternate section ground. Role-named: a client whose alternate ground is warm sand still uses this token (A-04). */
  --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
   ========================================================================== */
/* No rule, bar or dash before an eyebrow. style-guide.md has said so since the
   house look was set — the ::before contradicted it on every section of every
   page and shipped that way twice. The gap goes with it: with no ::before there
   is nothing to space away from. Standard Q-06. */
.kpa-v3-eyebrow {
  display: inline-flex; align-items: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-dark); line-height: 1.2;
}
.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-surface-alt); }
.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-surface-alt); 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; }

/* EVEN GRID — every tile the same size, two per row, no full-width feature.
   Set with workGridEven in site.config.json. Used when the grid leads with
   before/after sliders: a double-width feature makes the first slider read as
   the only one worth dragging and the rest as filler.

   SPECIFICITY. The feature rules below are (0,4,0)
   (.kpa-v3-gal > .kpa-v3-gal__item:first-child .kpa-slider), so every override
   here carries .kpa-v3 as well to reach (0,5,0). The first attempt at this sat
   at (0,3,1) and lost silently — the feature tile kept its 21/9 crop.

   The base sheet only ever set an aspect-ratio on the FIRST slider, because
   until now the grid always had a feature. Every other slider sized to its own
   image and the rows went ragged, so all of them are constrained here. */
@media (max-width: 700px) {
  /* One per row on a phone, and only the first three: six stacked sliders is a
     very long scroll, and the drag interaction is the thing being shown —
     three shows it as well as six does. */
  .kpa-v3 .kpa-v3-gal--even > .kpa-v3-gal__item:nth-child(n + 4) { display: none; }
}
.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); }
/* Narrow viewports: the grid is a single column and every tile, slider or
   single shot, holds the same 4:3 box. */
.kpa-v3 .kpa-v3-gal--even .kpa-slider,
.kpa-v3 .kpa-v3-gal--even .kpa-v3-gal__shot { aspect-ratio: 3 / 2; }
.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; }
.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-surface-alt); 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-surface-alt); }
.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 map dot in every corner, whichever corner
   it was pinned to. 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 a dot. */
.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;
}
/* A stat whose value is words, not a number. The numeral size is set for two
   or three glyphs and 'North Wales' overflows it, so this steps down and allows
   a wrap. tabular-nums is dropped too — it is for aligning digits and does
   nothing good to text. */
.kpa-v3 .kpa-v3-statband__grid li.is-wide strong {
  font-size: clamp(1.35rem, .95rem + 1.5vw, 1.95rem); line-height: 1.1;
  font-variant-numeric: normal; text-wrap: balance;
}
.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;
  }
  /* the ::before dash is gone from the base rule, nothing to hide */
  .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; }
  /* the label sits above the number, so it has to centre with it */
  .kpa-ft__num { align-items: center; text-align: 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-surface-alt); 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-surface-alt); 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); }

/* --- /get-a-quote: three named blocks, reordered per breakpoint -------------
   The generic .kpa-v3-contact is two columns and stacks left-then-right, which
   on a phone buried the form under a headline, a lead, three reasons and a
   phone number. Named areas let mobile put the form directly under the h1 and
   push the reasons below it, without a second copy of the markup. */
.kpa-v3-contact--quote,
.kpa-v3-contact--pair { gap: 1.6rem; }
/* /get-a-quote has a heading block above the form; /contact's h1 lives in its
   own hero, so it is form + reasons only. Two explicit area maps rather than
   one with an empty row that still pays for a gap. */
.kpa-v3-contact--quote { grid-template-areas: "intro" "form" "more"; }
.kpa-v3-contact--pair  { grid-template-areas: "form" "more"; }
.kpa-v3-quote__intro { grid-area: intro; text-align: center; }
.kpa-v3-quote__form  { grid-area: form; }
.kpa-v3-quote__more  { grid-area: more; }
/* The lead is centred with the h1 on mobile, so its own max-width has to go or
   it centres inside a narrower box than the heading and reads as misaligned. */
.kpa-v3 .kpa-v3-quote__intro .kpa-v3-split__lead { margin-left: auto; margin-right: auto; }
.kpa-v3 .kpa-v3-quote__more .kpa-v3-contact__list { margin-top: 1.2rem; }

@media (min-width: 940px) {
  .kpa-v3-contact--quote,
  .kpa-v3-contact--pair {
    grid-template-columns: 1.05fr .95fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 1.8rem;
  }
  .kpa-v3-contact--quote { grid-template-areas: "intro form" "more form"; }
  .kpa-v3-contact--pair  { grid-template-areas: "more form"; }
  /* Desktop reads left-to-right, so the left column goes back to ranged left. */
  .kpa-v3-quote__intro { text-align: left; }
  .kpa-v3 .kpa-v3-quote__intro .kpa-v3-split__lead { margin-left: 0; margin-right: 0; }
}
/* 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); }

/* ==========================================================================
   EMBEDDED GHL FORM / SURVEY PAGES
   The iframe is cross-origin: nothing inside it can be styled from here. The
   form's background, field borders and button colour are set once in the GHL
   builder on the master form. This owns everything around the iframe and
   nothing within it.

   HEIGHT FLOORS are set inline from ghlForms.*.minHeight, not here — GHL's
   resizer measures a form at ITS viewport, not the width it renders in, so a
   long label that fits on one line in the builder wraps to two in a narrow
   container and crops the submit button. min-height beats a smaller height
   whatever sets it, so the resizer can grow a form but never crop one.
   ========================================================================== */
.kpa-v3 .kpa-embed-wrap { max-width: 46rem; }
.kpa-embed { background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r); padding: clamp(.5rem, 1.5vw, 1rem); }
.kpa-embed iframe { display: block; width: 100%; }
/* --plain: no card. Once the GHL form itself is transparent it sits on the page
   rather than arriving as someone else's panel. */
.kpa-embed--plain { background: none; border: 0; padding: 0; }

.kpa-v3 .kpa-embed__lead { max-width: 54ch; margin: 0 auto 1.6rem; text-align: center; color: var(--ink-soft); }

/* Numbered because these genuinely are a sequence — one triggers, then the
   other — not decoration. */
.kpa-v3 .kpa-embed__steps {
  counter-reset: s; list-style: none; padding: 0;
  margin: 0 auto 1.5rem; display: grid; gap: .9rem; max-width: 54ch;
}
.kpa-v3 .kpa-embed__steps li {
  counter-increment: s; position: relative; padding: 1rem 1.1rem 1rem 3rem;
  background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r);
}
.kpa-embed__steps li::before {
  content: counter(s); position: absolute; left: 1rem; top: 1rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  display: grid; place-items: center;
}
.kpa-v3 .kpa-embed__steps h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--v3-ink); }
.kpa-v3 .kpa-embed__steps p { margin-top: .3rem; font-size: .92rem; color: var(--ink-soft); }
.kpa-v3 .kpa-embed__why { text-align: center; font-weight: 700; color: var(--v3-ink); margin: 0 auto 1.8rem; max-width: 54ch; font-size: .97rem; }
.kpa-v3 .kpa-embed__foot { margin: 1.4rem auto 0; text-align: center; font-size: .87rem; color: var(--ink-soft); max-width: 52ch; }

/* The form note and the explanation below it are two different things — how to
   fill this in, then what happens once you have. Butted together they read as
   one paragraph, so the explainer gets a rule and real space above it. */
.kpa-v3 .kpa-embed__foot + .kpa-embed__lead {
  margin-top: 2.6rem; padding-top: 2.2rem;
  border-top: 1px solid var(--v3-line-soft);
}

/* Eyebrow on the internal form page — it labels the page rather than decorating
   it, so it stays quiet and sits above the lead. */
.kpa-v3 .kpa-embed__eyebrow {
  text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink, var(--accent)); margin: 0 0 .6rem;
}

/* ==========================================================================
   LOGO MARQUEE — clients and accreditations
   --------------------------------------------------------------------------
   One track at width:max-content holding the set TWICE, translated -50% on a
   linear loop, so the join lands exactly where the first set ended and the seam
   never shows. Same mechanism as the trust ticker above; kept as its own
   component because the ticker is text on a dark band and this is artwork on a
   light one, and merging them would mean a rule for every difference.

   DURATION IS NOT SPEED. It is time-per-loop, so a track with twice the logos
   scrolls twice as fast at the same duration. --accreds carries four logos
   against the client row's nine, so it takes roughly half the time to travel
   the same proportion — which is why the two values below look mismatched and
   are not. Re-time it if the number of logos changes much.
   ========================================================================== */
.kpa-v3-mq { padding-block: clamp(2.25rem, 4.5vw, 3.25rem); overflow: hidden; }
.kpa-v3-mq--accreds { background: var(--v3-surface-alt); border-block: 1px solid var(--v3-line-soft); }
.kpa-v3-mq__lead { text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.kpa-v3 .kpa-v3-mq__sub { margin-top: .7rem; font-size: .93rem; color: var(--ink-soft); max-width: 56ch; margin-inline: auto; }

/* The mask fades both ends so a logo slides out of view instead of being
   guillotined by the container edge. -webkit- kept: Safari still needs it. */
.kpa-v3-mq__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kpa-v3-mq__track {
  display: flex; align-items: center; width: max-content;
  animation: kpa-v3-marquee 46s linear infinite;
}
.kpa-v3-mq__track--slow { animation-duration: 24s; }
.kpa-v3-mq__viewport:hover .kpa-v3-mq__track { animation-play-state: paused; }

.kpa-v3-mq__item {
  flex: 0 0 auto; display: grid; place-items: center;
  padding-inline: clamp(1.5rem, 4vw, 3.25rem);
}
/* Full colour on purpose — see the note in partials/brands-marquee.html. The
   height cap is what makes a mixed set of lockups sit on one optical line;
   width is left to the artwork so nothing is squashed. */
.kpa-v3-mq__item img {
  height: 52px; width: auto; max-width: 190px; object-fit: contain; display: block;
}
.kpa-v3-mq__item--accred img { height: 46px; max-width: 160px; }
@media (min-width: 900px) {
  .kpa-v3-mq__item img { height: 62px; max-width: 230px; }
  .kpa-v3-mq__item--accred img { height: 54px; max-width: 190px; }
}

/* Reduced motion: no travel, and the duplicate set removed so the row does not
   read every client twice. The aria-hidden attribute already marks exactly the
   copies, so it doubles as the selector. */
@media (prefers-reduced-motion: reduce) {
  .kpa-v3-mq__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; }
  .kpa-v3-mq__item[aria-hidden="true"] { display: none; }
  .kpa-v3-mq__viewport { -webkit-mask-image: none; mask-image: none; }
}

/* Hero Google rating. Sits between the bullets and the mobile CTA; the mobile
   reviews shortcut already covers narrow screens, so this hides below 1000px
   rather than stacking a second rating on top of it. */
.kpa-v3 .kpa-v3-hero__grate {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem;
  padding: .5rem .95rem; border: 1px solid var(--v3-line); border-radius: var(--radius-pill);
  background: #fff; text-decoration: none; color: var(--v3-ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.kpa-v3 .kpa-v3-hero__grate:hover { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 6px 18px rgba(20,22,24,.08); }
.kpa-v3 .kpa-v3-hero__grate .kpa-v3-gmark { width: 17px; height: 17px; flex-shrink: 0; }
.kpa-v3 .kpa-v3-hero__grate .kpa-v3-stars { display: inline-flex; gap: 1px; color: #F5A623; }
.kpa-v3 .kpa-v3-hero__grate-txt { font-size: .84rem; font-weight: 600; }
@media (max-width: 1000px) { .kpa-v3 .kpa-v3-hero__grate { display: none; } }


/* An option card with no photograph is a text card, not a card with a hole in
   it. The image block is now omitted entirely rather than filled with a
   placeholder, so these need to sit right without one. */
.kpa-v3-opt:not(:has(.kpa-v3-opt__img)) .kpa-v3-opt__body { padding-top: 1.4rem; }


/* Area and service intros are several paragraphs, emitted by {{@paras}} into a
   wrapper rather than a single <p>. Space them like body copy. */
.kpa-v3 .kpa-v3-split__lead p + p { margin-top: 1rem; }


/* A split whose text column runs to several hundred words. The photo is a fixed
   4:3 and the copy is two or three times its height, so align-items:center left
   it floating in the middle of an empty column with a large gap above and below.
   Pinning it to the top and letting it stick keeps it beside the text the whole
   way down, which is what the layout was for. */
@media (min-width: 900px) {
  .kpa-v3 .kpa-v3-split--long { align-items: start; }
  .kpa-v3 .kpa-v3-split--long .kpa-v3-split__media { position: sticky; top: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .kpa-v3 .kpa-v3-split--long .kpa-v3-split__media { position: static; }
}


/* ==========================================================================
   CLIENT SKIN — design-led
   --------------------------------------------------------------------------
   C&M Developments, Track 2 (lean). Everything client-specific in the design
   lives below this line so master fixes can be pasted over the rules above.
   Colours are tokens from site.css; nothing here is a bare brand hex.

   The gold rule, measured: gold text only ever sits on purple. On light
   surfaces gold appears as a solid shape (buttons, number chips, tick chips)
   with purple carrying the meaning.

   Mobile (<= 760px): headings, CTAs and short copy centre; long prose, lists
   and form fields stay left-aligned for reading. That split is deliberate.
   ========================================================================== */
.kpa-dl {
  --v3-ink: var(--ink);
  --v3-surface-alt: var(--canvas);
  --v3-line: rgba(69, 29, 120, .12);
  --v3-line-soft: rgba(69, 29, 120, .07);
  --v3-tint: rgba(69, 29, 120, .04);
  --dl-r: 14px;
  background: var(--surface);
}
.kpa-dl .kpa-h1, .kpa-dl .kpa-h2 { color: var(--brand); letter-spacing: -.025em; font-weight: 700; }
.kpa-dl .kpa-h2 { font-size: clamp(1.85rem, 1.3rem + 2vw, 2.75rem); line-height: 1.08; }
.kpa-dl .kpa-btn { font-weight: 700; }
.kpa-dl .kpa-btn--accent:hover { background: #F4C44A; color: var(--brand); }
html { scroll-behavior: smooth; }
.kpa-dl [id] { scroll-margin-top: 96px; }

/* HEADER on purple, so the raster logo's baked-in purple box disappears. */
.kpa-dl .kpa-v3-ticker { display: none; }
.kpa-dl .kpa-v3-hdr { background: var(--brand); border-bottom: 1px solid rgba(var(--accent-rgb), .28); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kpa-dl .kpa-v3-hdr__in { min-height: 80px; }
.kpa-dl .kpa-v3-hdr__logo { width: auto; height: 60px; }
.kpa-dl .kpa-v3-hdr__logo img { height: 60px; width: auto; }
.kpa-dl .kpa-v3-nav a { color: rgba(255,255,255,.86); font-size: .95rem; }
.kpa-dl .kpa-v3-nav a:hover, .kpa-dl .kpa-v3-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }
.kpa-dl .kpa-v3-hdr__tel { border-color: rgba(255,255,255,.3); color: #fff; }
.kpa-dl .kpa-v3-hdr__tel:hover { border-color: var(--accent); }
.kpa-dl .kpa-v3-hdr__tel svg { color: var(--accent); }
.kpa-dl .kpa-v3-burger span { background: #fff; }
.kpa-dl .kpa-v3-drop { border-radius: var(--dl-r); }
.kpa-dl .kpa-v3-drop a strong { color: var(--brand); }
.kpa-dl .kpa-v3-drop a:hover strong { color: var(--brand-soft); }
@media (max-width: 1180px) and (min-width: 1040px) { .kpa-dl .kpa-v3-hdr__telnum { display: none; } .kpa-dl .kpa-v3-hdr__end > .kpa-v3-hdr__tel { padding: 0; width: 46px; justify-content: center; } }
@media (max-width: 560px) {
  .kpa-dl .kpa-v3-hdr__telnum { display: none; }
  .kpa-dl .kpa-v3-hdr__end > .kpa-v3-hdr__tel { padding: 0; width: 46px; justify-content: center; }
  .kpa-dl .kpa-v3-hdr__logo, .kpa-dl .kpa-v3-hdr__logo img { height: 50px; }
}

/* MOBILE MENU. The top bar is a copy of the header: same height, same logo,
   and the close control drawn exactly like the burger's cross in the burger's
   position. It fades in place; nothing slides or shrinks. */
.kpa-dl .kpa-menu { background: var(--brand); padding: 0 var(--gut) clamp(1.5rem, 5vw, 2.5rem); transform: none; transition: opacity .22s ease, visibility .22s; }
.kpa-dl .kpa-menu[data-open="true"] { transform: none; }
.kpa-dl .kpa-menu__top { justify-content: space-between; align-items: center; min-height: 81px; border-bottom: 1px solid rgba(var(--accent-rgb), .28); margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); }
.kpa-dl .kpa-menu__logo { display: block; height: 50px; }
.kpa-dl .kpa-menu__logo img { height: 50px; width: auto; }
@media (min-width: 561px) { .kpa-dl .kpa-menu__logo, .kpa-dl .kpa-menu__logo img { height: 60px; } }
.kpa .kpa-dl .kpa-menu__close, .kpa-dl .kpa-menu__close { position: relative; width: 44px; height: 44px; display: block; padding: 0; margin-right: 0; }
.kpa-dl .kpa-menu__close span { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; margin-top: -1px; background: #fff; border-radius: 2px; }
.kpa-dl .kpa-menu__close span:first-child { transform: rotate(45deg); }
.kpa-dl .kpa-menu__close span:last-child { transform: rotate(-45deg); }
.kpa-dl .kpa-menu__close:hover span { background: var(--accent); }
.kpa-dl .kpa-menu__links { margin-top: 1.5rem; }
.kpa-dl .kpa-menu__links a { color: #fff; border-bottom-color: rgba(255,255,255,.12); }
.kpa-dl .kpa-menu__links a:hover { color: var(--accent); }
.kpa-dl .kpa-menu__cta { gap: 1.1rem; }
.kpa-dl .kpa-menu__cta .kpa-btn { width: 100%; }

.kpa-dl-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.kpa-dl-link { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; color: var(--brand); border-bottom: 2px solid var(--accent); padding-bottom: .15em; }
.kpa-dl-link:hover { color: var(--brand-soft); }
.kpa-dl .kpa-dl-more { margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }

/* Section rhythm: one light theme; purple is the brand band. */
.kpa-dl-journey, .kpa-dl-who, .kpa-dl-ground, .kpa-dl-projects, .kpa-dl-about, .kpa-dl-faq, .kpa-dl-intro,
.kpa-dl-local, .kpa-dl-mini, .kpa-dl-pipeline, .kpa-dl-record, .kpa-dl-areas, .kpa-dl-contact, .kpa-dl-legalwrap { padding-block: clamp(3.75rem, 8vw, 6rem); }
.kpa-dl-journey, .kpa-dl-ground, .kpa-dl-about, .kpa-dl-local, .kpa-dl-pipeline { background: var(--canvas); }
.kpa-dl .kpa-dl-head { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.kpa-dl .kpa-dl-head p { margin-top: 1rem; font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.kpa-dl .kpa-dl-head--center { margin-inline: auto; text-align: center; }
.kpa-dl .kpa-dl-head--center p { margin-inline: auto; }
.kpa-dl .kpa-dl-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
.kpa-dl .kpa-dl-prose { display: grid; gap: 1rem; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.7; max-width: 64ch; }

/* 1 HOME HERO ------------------------------------------------------------- */
.kpa-dl-hero { position: relative; overflow: hidden; background: var(--brand-deep); color: #fff; }
.kpa-dl-hero__media { position: absolute; inset: 0; }
.kpa-dl-hero__media .kpa-ph { position: absolute; inset: 0; }
.kpa-dl-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.kpa-dl-hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--scrim-rgb), .93) 0%, rgba(var(--scrim-rgb), .78) 42%, rgba(var(--scrim-rgb), .45) 70%, rgba(var(--scrim-rgb), .35) 100%),
    linear-gradient(0deg, rgba(var(--scrim-rgb), .5) 0%, rgba(var(--scrim-rgb), 0) 45%); }
.kpa-dl-hero__in { position: relative; z-index: 2; display: grid; gap: 2rem; align-items: center; padding-block: clamp(3rem, 7vw, 5rem); min-height: clamp(560px, 80vh, 760px); }
@media (min-width: 1100px) { .kpa-dl-hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 5vw, 5rem); } }
.kpa-dl .kpa-dl-hero h1 { color: #fff; margin-top: 1rem; max-width: 12ch; font-size: clamp(2.5rem, 1.4rem + 4.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; }
.kpa-dl .kpa-dl-hero__sub { margin-top: 1.25rem; max-width: 34rem; font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); line-height: 1.55; color: rgba(255,255,255,.9); }
.kpa-dl .kpa-dl-hero__act { margin-top: 2rem; }
.kpa-dl .kpa-dl-hero__act .kpa-btn { padding: 1.05em 2.3em; font-size: 1rem; }
.kpa-dl .kpa-dl-hero__trust { margin-top: 1.5rem; font-size: .9rem; color: rgba(255,255,255,.78); }
/* The form is the hero CTA on desktop, so the button is not repeated beside it. */
.kpa-dl-hero__form { display: none; }
@media (min-width: 1100px) {
  .kpa-dl-hero__form { display: block; }
  .kpa-dl .kpa-dl-hero__act { display: none; }
}

/* FORM CARD (hero, enquiry section, contact page) ------------------------- */
.kpa-dl-formcard { background: var(--surface); color: var(--ink); border-radius: calc(var(--dl-r) + 4px); padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: 0 24px 60px rgba(20, 6, 40, .28); border-top: 5px solid var(--accent); }
.kpa-dl .kpa-dl-formcard h2 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); color: var(--brand); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.kpa-dl .kpa-dl-formcard__lead { margin-top: .4rem; margin-bottom: 1.1rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.kpa-dl .kpa-dl-formcard .kpa-form { gap: .85rem; }
@media (min-width: 520px) { .kpa-dl .kpa-dl-formcard .kpa-form__row { grid-template-columns: 1fr 1fr; } }
.kpa-dl .kpa-field label { color: var(--brand); font-size: .8rem; }
.kpa-dl .kpa-field__opt { font-weight: 500; color: var(--ink-soft); }
.kpa-dl .kpa-field input, .kpa-dl .kpa-field textarea { border-radius: 10px; border: 1.5px solid rgba(69,29,120,.2); background: #fff; font-size: 1rem; }
.kpa-dl .kpa-field input:focus, .kpa-dl .kpa-field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(69,29,120,.14); }
.kpa-dl .kpa-dl-formcard .kpa-field textarea { min-height: 72px; }
.kpa-dl .kpa-form__submit { width: 100%; padding: 1em 1.5em; font-size: 1rem; }
.kpa-dl .kpa-consent { font-size: .78rem; }
.kpa-dl .kpa-consent a { color: var(--brand); text-decoration: underline; }
.kpa-dl .kpa-consent input { accent-color: var(--brand); }
.kpa-dl .kpa-formcard__foot { margin-top: .9rem; display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--ink-soft); }
.kpa-dl .kpa-formcard__foot svg { color: var(--brand); }
.kpa-dl .kpa-form__msg.is-ok { color: #1f6b43; }

/* 2 TAI CALON ------------------------------------------------------------- */
.kpa-dl-ref { background: var(--brand); color: #fff; border-top: 1px solid rgba(var(--accent-rgb), .22); }
.kpa-dl-ref__in { display: grid; gap: 1.75rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .kpa-dl-ref__in { grid-template-columns: 250px 1fr auto; gap: clamp(2rem, 4vw, 3.5rem); } }
.kpa-dl-ref__logo { position: relative; background: #fff; border-radius: var(--dl-r); padding: 1.1rem 1.4rem; max-width: 260px; }
.kpa-dl-ref__logo img { width: 100%; height: auto; }
.kpa-dl .kpa-dl-ref__quote blockquote p { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.45; font-weight: 500; color: #fff; max-width: 46ch; }
.kpa-dl .kpa-dl-ref__quote figcaption { margin-top: .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.kpa-dl-ref__fig { display: grid; gap: .35rem; }
@media (min-width: 900px) { .kpa-dl-ref__fig { padding-left: clamp(2rem, 3vw, 3rem); border-left: 1px solid rgba(255,255,255,.18); max-width: 16rem; } }
.kpa-dl-ref__fig strong { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.3rem); line-height: 1; font-weight: 800; color: var(--accent); letter-spacing: -.03em; }
.kpa-dl-ref__fig span { font-size: .92rem; line-height: 1.45; color: rgba(255,255,255,.82); }

/* 3 ACCREDITATIONS -------------------------------------------------------- */
.kpa-dl-accreds { background: var(--surface); border-bottom: 1px solid var(--v3-line-soft); padding-block: clamp(1.75rem, 3.5vw, 2.5rem); }
.kpa-dl .kpa-dl-accreds__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem clamp(1.75rem, 4vw, 3.25rem); }
.kpa-dl-accreds__row li { position: relative; height: 52px; display: flex; align-items: center; }
.kpa-dl-accreds__row img { height: 100%; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .25s ease, opacity .25s ease; }
.kpa-dl-accreds__row li:hover img { filter: none; opacity: 1; }
@media (max-width: 600px) { .kpa-dl-accreds__row li { height: 40px; } .kpa-dl .kpa-dl-accreds__row { gap: 1.25rem 1.75rem; } }

/* 4 JOURNEY: step one as a full-width band, four stages beneath ----------- */
.kpa-dl-start { display: grid; gap: 1.25rem; align-items: center; background: var(--brand); color: #fff; border-radius: calc(var(--dl-r) + 4px); padding: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 900px) { .kpa-dl-start { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.5rem, 3vw, 2.75rem); } }
.kpa-dl-start__n { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: var(--brand); font-weight: 800; font-size: 1.6rem; }
.kpa-dl .kpa-dl-start h3 { margin-top: .5rem; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem); line-height: 1.1; letter-spacing: -.02em; color: #fff; font-weight: 700; }
.kpa-dl .kpa-dl-start__txt > p:last-child { margin-top: .75rem; color: rgba(255,255,255,.86); line-height: 1.6; max-width: 62ch; }
.kpa-dl .kpa-dl-stages { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 640px) { .kpa-dl .kpa-dl-stages { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kpa-dl .kpa-dl-stages { grid-template-columns: repeat(4, 1fr); } }
.kpa-dl-stage { background: var(--surface); border: 1px solid var(--v3-line); border-radius: var(--dl-r); overflow: hidden; display: flex; flex-direction: column; }
.kpa-dl-stage__img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.kpa-dl-stage__img .kpa-ph { position: absolute; inset: 0; }
.kpa-dl-stage__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.kpa-dl-stage:hover .kpa-dl-stage__img img { transform: scale(1.03); }
.kpa-dl .kpa-dl-stage__body { padding: 1.2rem 1.3rem 1.45rem; display: grid; gap: .5rem; align-content: start; }
.kpa-dl-stage__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--brand); font-weight: 800; font-size: .95rem; }
.kpa-dl .kpa-dl-stage h3 { font-size: 1.15rem; line-height: 1.25; color: var(--brand); font-weight: 700; }
.kpa-dl .kpa-dl-stage p { color: var(--ink-soft); line-height: 1.55; font-size: .96rem; }

/* 5 ROWS (who we work with, principles) ----------------------------------- */
.kpa-dl .kpa-dl-rows { border-top: 1px solid var(--v3-line); }
.kpa-dl .kpa-dl-rows li { display: grid; gap: .5rem 3rem; padding-block: clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--v3-line); }
@media (min-width: 820px) { .kpa-dl .kpa-dl-rows li { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); align-items: baseline; } }
.kpa-dl .kpa-dl-rows h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); color: var(--brand); line-height: 1.2; font-weight: 700; }
.kpa-dl .kpa-dl-rows p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 60ch; }

/* 6 GROUND: split --------------------------------------------------------- */
.kpa-dl-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .kpa-dl-split { grid-template-columns: 1fr 1fr; } }
.kpa-dl-split__media { position: relative; aspect-ratio: 6 / 5; border-radius: var(--dl-r); overflow: hidden; }
.kpa-dl-split__media .kpa-ph { position: absolute; inset: 0; }
.kpa-dl-split__media img { width: 100%; height: 100%; object-fit: cover; }
.kpa-dl .kpa-dl-split__txt > p { margin-top: 1.1rem; font-size: 1.06rem; line-height: 1.65; color: var(--ink-soft); max-width: 58ch; }
.kpa-dl .kpa-dl-ticks { margin-top: 1.6rem; display: grid; gap: .8rem; }
.kpa-dl .kpa-dl-ticks li { display: flex; gap: .75rem; align-items: flex-start; font-weight: 600; color: var(--ink); line-height: 1.45; text-align: left; }
.kpa-dl-ticks li > span { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--brand); display: grid; place-items: center; margin-top: .05rem; }

/* 7 HOME PROJECT TILES ---------------------------------------------------- */
.kpa-dl .kpa-dl-tiles { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 900px) { .kpa-dl .kpa-dl-tiles { grid-template-columns: 1.25fr 1fr; align-items: start; } }
.kpa-dl-tile { display: block; }
.kpa-dl-tile__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--dl-r); overflow: hidden; background: var(--canvas-warm); }
.kpa-dl-tile__img .kpa-ph { position: absolute; inset: 0; }
.kpa-dl-tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.kpa-dl-tile:hover .kpa-dl-tile__img img { transform: scale(1.03); }
.kpa-dl .kpa-dl-tile__body { padding-top: 1.1rem; }
.kpa-dl .kpa-dl-tile h3 { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); color: var(--brand); font-weight: 700; }
.kpa-dl .kpa-dl-tile__place { margin-top: .2rem; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-dl .kpa-dl-tile__body p:last-child { margin-top: .6rem; color: var(--ink-soft); line-height: 1.6; max-width: 52ch; }

/* 8 ABOUT + FACTS --------------------------------------------------------- */
.kpa-dl-about__in { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .kpa-dl-about__in { grid-template-columns: 1.2fr 1fr; } }
.kpa-dl .kpa-dl-about__body { margin-top: 1.1rem; display: grid; gap: 1rem; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.65; max-width: 58ch; }
.kpa-dl .kpa-dl-about .kpa-dl-link { margin-top: 1.5rem; }
.kpa-dl .kpa-dl-facts { background: var(--surface); border: 1px solid var(--v3-line); border-radius: var(--dl-r); padding: .5rem clamp(1.25rem, 3vw, 2rem); }
.kpa-dl .kpa-dl-facts div { display: grid; gap: .15rem; padding-block: 1rem; }
.kpa-dl .kpa-dl-facts div + div { border-top: 1px solid var(--v3-line-soft); }
.kpa-dl .kpa-dl-facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-dl .kpa-dl-facts dd { margin: 0; font-weight: 600; font-size: 1.05rem; color: var(--brand); }

/* 9 FAQ ------------------------------------------------------------------- */
.kpa-dl .kpa-faq__item:hover { border-color: rgba(69,29,120,.35); }
.kpa-dl .kpa-faq__item[data-open="true"] { border-color: rgba(69,29,120,.35); background: #fff; }
.kpa-dl .kpa-faq__q { color: var(--brand); text-align: left; }
.kpa-dl .kpa-faq__q:hover { color: var(--brand-soft); }
.kpa-dl .kpa-faq__item[data-open="true"] .kpa-faq__icon::before,
.kpa-dl .kpa-faq__item[data-open="true"] .kpa-faq__icon::after { background: var(--brand); }

/* 10 GET IN TOUCH (closing section, every page) --------------------------- */
.kpa-dl-enquire { background: var(--canvas-warm); padding-block: clamp(3.75rem, 8vw, 6rem); border-top: 1px solid var(--v3-line-soft); }
.kpa-dl-enquire__in { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { .kpa-dl-enquire__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.kpa-dl .kpa-dl-enquire__txt > p { margin-top: 1rem; font-size: 1.1rem; line-height: 1.6; color: var(--ink-soft); max-width: 44ch; }
.kpa-dl .kpa-dl-enquire__contact { margin-top: 1.75rem; display: grid; gap: .75rem; }
.kpa-dl-enquire__contact a { display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.1rem; color: var(--brand); }
.kpa-dl-enquire__contact svg { flex-shrink: 0; color: var(--brand); }
.kpa-dl-enquire__contact a:hover { color: var(--brand-soft); }
.kpa-dl .kpa-dl-enquire__proof { margin-top: 2rem; padding: 1.25rem 1.4rem; background: var(--surface); border-radius: var(--dl-r); border-left: 4px solid var(--accent); max-width: 30rem; }
.kpa-dl .kpa-dl-enquire__proof img { height: 34px; width: auto; }
.kpa-dl .kpa-dl-enquire__proof blockquote p { margin-top: .8rem; font-size: .98rem; line-height: 1.55; color: var(--ink); }
.kpa-dl .kpa-dl-enquire__proof figcaption { margin-top: .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-dl .kpa-dl-enquire__badges { margin-top: 1.1rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.kpa-dl .kpa-dl-enquire .kpa-dl-formcard { box-shadow: 0 18px 50px rgba(46,16,82,.12); }

/* INNER PAGE HERO --------------------------------------------------------- */
.kpa-dl-phero { position: relative; overflow: hidden; background: var(--brand); color: #fff; }
.kpa-dl-phero__media { position: absolute; inset: 0; }
.kpa-dl-phero__media .kpa-ph { position: absolute; inset: 0; }
.kpa-dl-phero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-dl-phero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--scrim-rgb), .92) 0%, rgba(var(--scrim-rgb), .78) 50%, rgba(var(--scrim-rgb), .5) 100%); }
.kpa-dl-phero__in { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5.25rem); }
.kpa-dl-phero--plain { background: var(--brand); background-image: radial-gradient(120% 140% at 100% 0%, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-rgb), 0) 55%); }
.kpa-dl-crumb { font-size: .84rem; color: rgba(255,255,255,.7); }
.kpa-dl-crumb a:hover { color: var(--accent); }
.kpa-dl-crumb i { font-style: normal; opacity: .55; margin: 0 .2em; }
.kpa-dl-crumb span { color: #fff; font-weight: 600; }
.kpa-dl .kpa-dl-phero h1 { margin-top: 1rem; color: #fff; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -.03em; max-width: 20ch; }
.kpa-dl .kpa-dl-phero__sub { margin-top: 1.1rem; max-width: 50ch; color: rgba(255,255,255,.88); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.55; }
.kpa-dl .kpa-dl-phero__act { margin-top: 1.9rem; }
.kpa-dl .kpa-dl-phero__meta { margin-top: 1.25rem; font-size: .88rem; color: rgba(255,255,255,.75); }

/* INTRO / LOCAL ----------------------------------------------------------- */
.kpa-dl-intro__in, .kpa-dl-local__in { display: grid; gap: 1.5rem clamp(2rem, 5vw, 5rem); }
@media (min-width: 900px) { .kpa-dl-intro__in, .kpa-dl-local__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }

/* WHAT WE DO: TIMELINE ---------------------------------------------------- */
.kpa-dl .kpa-dl-timeline { display: grid; gap: clamp(1rem, 2vw, 1.4rem); max-width: 1100px; margin-inline: auto; }
.kpa-dl-tl { display: grid; gap: 1.25rem; background: var(--surface); border: 1px solid var(--v3-line); border-radius: calc(var(--dl-r) + 2px); padding: clamp(1.4rem, 3vw, 2rem); align-items: center; }
@media (min-width: 900px) { .kpa-dl-tl { grid-template-columns: auto minmax(0, 1fr) minmax(0, .8fr); gap: clamp(1.5rem, 3vw, 2.5rem); } }
.kpa-dl-tl__n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--brand); font-weight: 800; font-size: 1.25rem; align-self: start; }
.kpa-dl .kpa-dl-tl h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); color: var(--brand); font-weight: 700; line-height: 1.2; }
.kpa-dl .kpa-dl-tl__body > p:not(.kpa-dl-eyebrow) { margin-top: .6rem; color: var(--ink-soft); line-height: 1.65; }
.kpa-dl-tl__img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--dl-r); overflow: hidden; }
.kpa-dl-tl__img .kpa-ph { position: absolute; inset: 0; }
.kpa-dl-tl__img img { width: 100%; height: 100%; object-fit: cover; }
.kpa-dl-tl--start { background: var(--brand); border-color: var(--brand); }
@media (min-width: 900px) { .kpa-dl-tl--start { grid-template-columns: auto minmax(0, 1fr); } }
.kpa-dl .kpa-dl-tl--start h3 { color: #fff; margin-top: .4rem; }
.kpa-dl .kpa-dl-tl--start .kpa-dl-tl__body > p:not(.kpa-dl-eyebrow) { color: rgba(255,255,255,.86); max-width: 70ch; }
.kpa-dl .kpa-dl-tl--start .kpa-btn { margin-top: 1.25rem; }

/* OUR WORK ---------------------------------------------------------------- */
.kpa-dl-jump { position: sticky; top: 80px; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--v3-line); }
.kpa-dl-jump__in { display: flex; gap: .5rem; overflow-x: auto; padding-block: .75rem; scrollbar-width: none; }
.kpa-dl-jump__in::-webkit-scrollbar { display: none; }
.kpa-dl-jump a { flex-shrink: 0; padding: .5em 1.1em; border-radius: var(--radius-pill); border: 1.5px solid var(--v3-line); font-weight: 600; font-size: .9rem; color: var(--brand); white-space: nowrap; }
.kpa-dl-jump a:hover { border-color: var(--brand); }
.kpa-dl-project { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.kpa-dl-project + .kpa-dl-project { border-top: 1px solid var(--v3-line); }
.kpa-dl-project__top { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 960px) {
  .kpa-dl-project__top { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .kpa-dl-project--flip .kpa-dl-project__cover { order: 2; }
}
.kpa-dl-project__cover { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--dl-r) + 4px); overflow: hidden; background: var(--canvas-warm); }
.kpa-dl-project__cover .kpa-ph { position: absolute; inset: 0; }
.kpa-dl-project__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.kpa-dl-project__cover:hover img { transform: scale(1.025); }
.kpa-dl .kpa-dl-project__type { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-dl .kpa-dl-project__txt .kpa-h2 { margin-top: .5rem; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); }
.kpa-dl .kpa-dl-project__meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.kpa-dl .kpa-dl-project__meta div { background: var(--canvas); border: 1px solid var(--v3-line); border-radius: 10px; padding: .55rem .9rem; }
.kpa-dl .kpa-dl-project__meta dt { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-dl .kpa-dl-project__meta dd { margin: 0; font-weight: 700; color: var(--brand); }
.kpa-dl .kpa-dl-project__txt .kpa-dl-prose { margin-top: 1.25rem; }
.kpa-dl .kpa-dl-scope { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.kpa-dl .kpa-dl-scope li { font-size: .86rem; font-weight: 600; color: var(--brand); background: rgba(69,29,120,.07); border-radius: var(--radius-pill); padding: .4em .95em; }
.kpa-dl .kpa-dl-gallery { margin-top: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: clamp(.6rem, 1.2vw, .9rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .kpa-dl .kpa-dl-gallery { grid-template-columns: repeat(4, 1fr); } }
.kpa-dl-gallery a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--canvas-warm); }
.kpa-dl-gallery a .kpa-ph { position: absolute; inset: 0; }
.kpa-dl-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.kpa-dl-gallery a:hover img { transform: scale(1.05); }
.kpa-dl-gallery a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--accent); transition: box-shadow .2s ease; }
.kpa-dl-gallery a:hover::after, .kpa-dl-gallery a:focus-visible::after { box-shadow: inset 0 0 0 3px var(--accent); }
@media (min-width: 760px) { .kpa-dl .kpa-dl-gallery li:first-child:nth-last-child(2), .kpa-dl .kpa-dl-gallery li:first-child:nth-last-child(2) ~ li { grid-column: span 2; } }

.kpa-dl .kpa-dl-pipe { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 900px) { .kpa-dl .kpa-dl-pipe { grid-template-columns: repeat(3, 1fr); } }
.kpa-dl .kpa-dl-pipe li { position: relative; border-radius: calc(var(--dl-r) + 2px); padding: clamp(1.5rem, 3vw, 2rem); min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; overflow: hidden;
  background: repeating-linear-gradient(135deg, rgba(69,29,120,.05) 0 14px, rgba(69,29,120,0) 14px 28px), var(--surface); border: 1.5px dashed rgba(69,29,120,.28); }
.kpa-dl-pipe__label { position: absolute; top: 1.25rem; left: 1.5rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: var(--accent); border-radius: var(--radius-pill); padding: .35em .85em; }
.kpa-dl .kpa-dl-pipe h3 { font-size: 1.3rem; color: var(--brand); font-weight: 700; line-height: 1.2; }
.kpa-dl .kpa-dl-pipe p { color: var(--ink-soft); line-height: 1.55; }
.kpa-dl .kpa-dl-pipe .kpa-dl-pipe--cta { background: var(--brand); border: 0; color: #fff; }
.kpa-dl .kpa-dl-pipe--cta h3 { color: #fff; }
.kpa-dl .kpa-dl-pipe--cta p { color: rgba(255,255,255,.84); }
.kpa-dl .kpa-dl-pipe--cta .kpa-btn { margin-top: .75rem; align-self: flex-start; }

.kpa-dl-record__in { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { .kpa-dl-record__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.kpa-dl .kpa-dl-record__logo { height: 52px; width: auto; margin-bottom: 1.5rem; }
.kpa-dl .kpa-dl-record__txt > p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.06rem; line-height: 1.65; max-width: 52ch; }
.kpa-dl .kpa-dl-record__txt blockquote { margin-top: 1.5rem; padding-left: 1.1rem; border-left: 4px solid var(--accent); }
.kpa-dl .kpa-dl-record__txt blockquote p { font-size: 1.1rem; line-height: 1.55; color: var(--ink); font-weight: 500; }
.kpa-dl .kpa-dl-record__list { border-top: 1px solid var(--v3-line); }
.kpa-dl .kpa-dl-record__list li { display: flex; justify-content: space-between; gap: 1.25rem; align-items: baseline; padding-block: 1.05rem; border-bottom: 1px solid var(--v3-line); }
.kpa-dl-record__list strong { display: block; color: var(--brand); font-size: 1.05rem; }
.kpa-dl-record__list span { display: block; margin-top: .2rem; color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }
.kpa-dl-record__list b { flex-shrink: 0; font-size: 1.1rem; font-weight: 800; color: var(--brand); white-space: nowrap; }

/* CONTACT PAGE ------------------------------------------------------------ */
.kpa-dl-contact__in { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 960px) { .kpa-dl-contact__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.kpa-dl .kpa-dl-contact .kpa-dl-formcard { box-shadow: 0 18px 50px rgba(46,16,82,.12); }
.kpa-dl .kpa-dl-contact__h { font-size: 1.3rem; color: var(--brand); font-weight: 700; margin-bottom: 1rem; }
.kpa-dl .kpa-dl-contact__h + .kpa-dl-details, .kpa-dl .kpa-dl-next + .kpa-dl-contact__h { margin-top: 2.25rem; }
.kpa-dl .kpa-dl-next { display: grid; gap: 1rem; }
.kpa-dl .kpa-dl-next li { display: flex; gap: .9rem; align-items: flex-start; }
.kpa-dl-next li > span { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--brand); font-weight: 800; }
.kpa-dl .kpa-dl-next h3 { font-size: 1.05rem; color: var(--brand); font-weight: 700; }
.kpa-dl .kpa-dl-next p { margin-top: .2rem; color: var(--ink-soft); line-height: 1.55; font-size: .96rem; }
.kpa-dl .kpa-dl-details { display: grid; gap: .1rem; background: var(--canvas); border-radius: var(--dl-r); padding: .4rem 1.25rem; }
.kpa-dl .kpa-dl-details li { display: grid; gap: .1rem; padding-block: .8rem; color: var(--ink); font-weight: 600; }
.kpa-dl .kpa-dl-details li + li { border-top: 1px solid var(--v3-line-soft); }
.kpa-dl-details span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-dl-details a { color: var(--brand); }

/* AREAS ------------------------------------------------------------------- */
.kpa-dl-areas { padding-top: 0; }
.kpa-dl .kpa-dl-areagrid { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 700px) { .kpa-dl .kpa-dl-areagrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kpa-dl .kpa-dl-areagrid { grid-template-columns: repeat(3, 1fr); } }
.kpa-dl-areagrid a { height: 100%; display: flex; flex-direction: column; gap: .5rem; padding: clamp(1.4rem, 3vw, 1.9rem); border-radius: calc(var(--dl-r) + 2px); border: 1px solid var(--v3-line); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.kpa-dl-areagrid a:hover { border-color: rgba(69,29,120,.35); box-shadow: 0 14px 34px rgba(46,16,82,.1); transform: translateY(-2px); }
.kpa-dl .kpa-dl-areagrid__kind { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-dl .kpa-dl-areagrid h2 { font-size: 1.55rem; color: var(--brand); font-weight: 700; line-height: 1.15; }
.kpa-dl .kpa-dl-areagrid p { color: var(--ink-soft); line-height: 1.55; flex: 1; }
.kpa-dl .kpa-dl-areagrid__meta { font-size: .88rem; font-weight: 600; color: var(--ink); }
.kpa-dl .kpa-dl-areagrid .kpa-dl-link { margin-top: .5rem; align-self: flex-start; }
.kpa-dl-areaintro { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .kpa-dl-areaintro:has(.kpa-dl-areaimg) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.kpa-dl .kpa-dl-areaintro .kpa-dl-prose { margin-top: 1.1rem; }
.kpa-dl .kpa-dl-areaproof { margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: 4px solid var(--accent); background: var(--canvas); border-radius: 0 10px 10px 0; font-weight: 600; color: var(--brand); max-width: 60ch; }
.kpa-dl-areaimg { position: relative; margin: 0; }
.kpa-dl-areaimg img, .kpa-dl-areaimg .kpa-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--dl-r); }
.kpa-dl .kpa-dl-areaimg figcaption { margin-top: .6rem; font-size: .85rem; color: var(--ink-soft); }
.kpa-dl .kpa-dl-ministeps { display: grid; gap: .75rem; counter-reset: none; }
@media (min-width: 900px) { .kpa-dl .kpa-dl-ministeps { grid-template-columns: repeat(5, 1fr); } }
.kpa-dl .kpa-dl-ministeps li { display: flex; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--v3-line); border-radius: var(--dl-r); padding: .9rem 1rem; font-weight: 700; color: var(--brand); line-height: 1.3; }
.kpa-dl-ministeps li > span { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--brand); font-weight: 800; font-size: .9rem; }
.kpa-dl-mini { background: var(--canvas); }
.kpa-dl-nearby { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--v3-line-soft); }
.kpa-dl .kpa-dl-nearby h2 { font-size: 1.2rem; color: var(--brand); font-weight: 700; text-align: center; }
.kpa-dl .kpa-dl-nearby ul { margin-top: 1.1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.kpa-dl-nearby a { display: inline-block; padding: .5em 1.1em; border-radius: var(--radius-pill); border: 1.5px solid var(--v3-line); font-weight: 600; color: var(--brand); }
.kpa-dl-nearby a:hover { border-color: var(--brand); }

/* LEGAL + 404 ------------------------------------------------------------- */
.kpa-dl .kpa-v3-legal { max-width: 760px; }
.kpa-dl .kpa-v3-legal h2 { color: var(--brand); }
.kpa-dl .kpa-v3-legal a { color: var(--brand); text-decoration: underline; }
.kpa-dl-404 { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: center; }

/* LIGHTBOX ---------------------------------------------------------------- */
.kpa-lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.kpa-lb::backdrop { background: rgba(20, 6, 40, .92); }
.kpa-lb figure { margin: 0; height: 100%; display: grid; place-items: center; align-content: center; gap: .8rem; padding: 4rem 1rem 2rem; }
.kpa-lb img { max-width: min(1400px, 92vw); max-height: 80vh; width: auto; height: auto; border-radius: 10px; }
.kpa-lb figcaption { color: rgba(255,255,255,.8); font-size: .9rem; text-align: center; }
.kpa .kpa-lb button { position: fixed; color: #fff; font-size: 2.4rem; line-height: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); }
.kpa .kpa-lb button:hover { background: var(--accent); color: var(--brand); }
.kpa .kpa-lb .kpa-lb__x { top: 1rem; right: 1rem; }
.kpa .kpa-lb .kpa-lb__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.kpa .kpa-lb .kpa-lb__next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* FOOTER on the brand purple ---------------------------------------------- */
.kpa-dl .kpa-ft { background: var(--brand); color: rgba(255,255,255,.74); border-top: 1px solid rgba(var(--accent-rgb), .45); }
.kpa-dl .kpa-ft__logo { width: auto; height: 80px; }
.kpa-dl .kpa-ft__logo img { height: 80px; width: auto; }
@media (min-width: 1040px) { .kpa-dl .kpa-ft__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.kpa-dl .kpa-ft__company { padding-bottom: 1.25rem; }
.kpa-dl .kpa-ft__company p { font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.66); max-width: 90ch; }
.kpa-dl .kpa-ft__legal { color: rgba(255,255,255,.55); }

/* MOBILE: centre what should centre ---------------------------------------- */
@media (max-width: 760px) {
  .kpa-dl-hero__in { min-height: 0; padding-block: 2.5rem 2.75rem; text-align: center; }
  .kpa-dl .kpa-dl-hero h1, .kpa-dl .kpa-dl-hero__sub { margin-inline: auto; }
  .kpa-dl .kpa-dl-hero h1 { max-width: none; font-size: clamp(2.05rem, 1rem + 5vw, 2.5rem); }
  .kpa-dl .kpa-dl-enquire .kpa-dl-enquire__proof, .kpa-dl .kpa-dl-enquire .kpa-dl-enquire__badges { display: none; }
  .kpa-dl .kpa-dl-enquire__contact { margin-top: 1.25rem; }
  .kpa-dl-hero__scrim { background: linear-gradient(0deg, rgba(var(--scrim-rgb), .94) 0%, rgba(var(--scrim-rgb), .8) 55%, rgba(var(--scrim-rgb), .6) 100%); }
  .kpa-dl .kpa-dl-hero__act .kpa-btn { width: 100%; max-width: 22rem; }

  .kpa-dl-ref__in { text-align: center; justify-items: center; }
  .kpa-dl .kpa-dl-ref__quote blockquote p { margin-inline: auto; }

  .kpa-dl .kpa-dl-head, .kpa-dl .kpa-dl-head--row { text-align: center; margin-inline: auto; justify-content: center; }
  .kpa-dl .kpa-dl-head p { margin-inline: auto; }

  .kpa-dl-start { text-align: center; justify-items: center; }
  .kpa-dl-start__n { width: 52px; height: 52px; font-size: 1.3rem; }
  .kpa-dl .kpa-dl-start .kpa-btn { width: 100%; }
  .kpa-dl .kpa-dl-stage__body { justify-items: center; text-align: center; }

  .kpa-dl .kpa-dl-rows li { text-align: center; }
  .kpa-dl .kpa-dl-rows p { margin-inline: auto; }

  .kpa-dl-split__txt { text-align: center; }
  .kpa-dl .kpa-dl-split__txt > p { margin-inline: auto; }
  .kpa-dl .kpa-dl-ticks { justify-content: center; max-width: 24rem; margin-inline: auto; }

  .kpa-dl .kpa-dl-tile__body { text-align: center; }
  .kpa-dl .kpa-dl-tile__body p:last-child { margin-inline: auto; }

  .kpa-dl-about__in > div:first-child { text-align: center; }
  .kpa-dl .kpa-dl-about__body { margin-inline: auto; }
  .kpa-dl .kpa-dl-facts { text-align: center; }

  .kpa-dl-enquire__txt { text-align: center; }
  .kpa-dl .kpa-dl-enquire__txt > p { margin-inline: auto; }
  .kpa-dl .kpa-dl-enquire__contact { justify-items: center; }
  .kpa-dl .kpa-dl-enquire__proof { margin-inline: auto; text-align: left; }
  .kpa-dl-enquire__in { gap: 2rem; }

  .kpa-dl-phero__in { text-align: center; }
  .kpa-dl .kpa-dl-phero h1, .kpa-dl .kpa-dl-phero__sub { margin-inline: auto; }
  .kpa-dl .kpa-dl-phero__act .kpa-btn { width: 100%; max-width: 22rem; }

  .kpa-dl-intro__in > h2, .kpa-dl-local__in > h2 { text-align: center; }
  .kpa-dl-tl { text-align: center; justify-items: center; }
  .kpa-dl .kpa-dl-tl__body > p:not(.kpa-dl-eyebrow) { text-align: left; }
  .kpa-dl-tl__img { width: 100%; }

  .kpa-dl-project__txt { text-align: center; }
  .kpa-dl .kpa-dl-project__meta, .kpa-dl .kpa-dl-scope { justify-content: center; }
  .kpa-dl .kpa-dl-project__txt .kpa-dl-prose { text-align: left; }
  .kpa-dl .kpa-dl-pipe li { text-align: center; align-items: center; }
  .kpa-dl-pipe__label { left: 50%; transform: translateX(-50%); }
  .kpa-dl .kpa-dl-pipe--cta .kpa-btn { align-self: stretch; }
  .kpa-dl-record__txt { text-align: center; }
  .kpa-dl .kpa-dl-record__txt > p { margin-inline: auto; }
  .kpa-dl .kpa-dl-record__txt blockquote { text-align: left; }
  .kpa-dl .kpa-dl-record__logo { margin-inline: auto; }

  .kpa-dl .kpa-dl-contact__h { text-align: center; }
  .kpa-dl .kpa-dl-details { text-align: center; }
  .kpa-dl .kpa-dl-areagrid a { align-items: center; text-align: center; }
  .kpa-dl .kpa-dl-areagrid .kpa-dl-link { align-self: center; }
  .kpa-dl-areaintro > div:first-child { text-align: center; }
  .kpa-dl .kpa-dl-areaintro .kpa-dl-prose { text-align: left; }
  .kpa-dl .kpa-dl-areaproof { text-align: left; }

  .kpa-dl .kpa-ft__grid, .kpa-dl .kpa-ft__company p, .kpa-dl .kpa-ft__legal { text-align: center; }
  .kpa-dl .kpa-ft__logo { margin-inline: auto; }
  .kpa-dl .kpa-ft__contact li { justify-content: center; }
}

.kpa-dl .kpa-dl-phero__meta::first-letter { text-transform: uppercase; }