/* ==========================================================================
   KOPA site stylesheet
   --------------------------------------------------------------------------
   Everything is scoped to `.kpa` and prefixed `kpa-`. The prefix is fixed and
   generic on purpose: a fix made here ports to every other client site
   verbatim, with no find-replace.

   TOKENS — this block is the entire skin. Change these values from
   03-design/style-guide.md and the site rebrands. Never rename a token:
   roles (--brand, --accent) survive a client change, colours (--navy) don't.

   THE HOUSE LOOK. Geometry, type and rhythm are the KOPA default, taken from
   the GHL/agency references (Poppins, ~12px radius, big type, one idea per
   section, lots of air). COLOUR is not: those references all run the same
   blue-and-orange, and matching it would fail the logo-cover test the whole
   framework hangs on. Palette is per-client, always.
   ========================================================================== */
.kpa {
  /* Brand — graphite, not blue-black. The logo is monochrome; the page ground
     stays monochrome with it and gold does all the colour work. */
  --brand:        #1c1f22;
  --brand-deep:   #0e1012;
  --brand-soft:   #3c4247;

  /* Accent — gold. Used as a FILL, never as text on white.
     --accent      #c9a227  fills, marks, numbers on dark. 7.6:1 vs --on-accent.
     --accent-dark #7d6219  the text-safe step: 5.8:1 on white, 5.3:1 on canvas.
     Never swap these two round — white on --accent is 2.4:1 and fails. */
  --accent:       #c9a227;
  --accent-dark:  #7d6219;
  --accent-rgb:   201, 162, 39;
  --accent-tint:  rgba(var(--accent-rgb), .12);

  /* What sits ON an accent fill. The template's default accent was dark enough
     for white text; a gold one is not, so the pairing is a token rather than a
     hardcoded #fff. Any light accent — gold, yellow, lime — needs this. */
  --on-accent:     #1a1408;
  --on-accent-dim: rgba(26, 20, 8, .82);

  /* Text */
  --ink:          #17191c;
  --ink-soft:     #565c63;
  --on-brand:     #f6f7f8;
  --on-brand-dim: rgba(246, 247, 248, .78);

  /* Surfaces — neutral greys. `--canvas-warm` keeps its role name; the value
     is a cool grey here, which is the point of role-based tokens. */
  --canvas:       #f5f5f6;
  --canvas-warm:  #ebecee;
  --surface:      #ffffff;
  --line:         rgba(28, 31, 34, .14);

  /* Hero/page-hero scrim, so a brand change carries into the overlays. */
  --scrim-rgb:    14, 16, 18;

  /* Type — geometric humanist sans, one family, heavy weights for headings.
     Loaded via site.fonts.googleUrl in the config; the stack degrades to
     system fonts if that request fails, so nothing depends on it. */
  --font-display: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Shape & rhythm — softer and roomier than a default. The references all
     sit at 10–15px and it's a large part of why they read as approachable. */
  --radius:       12px;
  --radius-sm:    8px;
  --radius-pill:  100px;
  --gut:          clamp(1.25rem, 5vw, 3rem);
  --sect:         clamp(4.5rem, 10vw, 7.5rem);
  --max:          1200px;

  /* Soft and wide, not tight and dark — cards should lift off the page. */
  --shadow:    0 1px 2px rgba(19, 26, 33, .04), 0 10px 30px rgba(19, 26, 33, .07);
  --shadow-lg: 0 2px 6px rgba(19, 26, 33, .05), 0 24px 60px rgba(19, 26, 33, .12);
}

/* ==========================================================================
   RESET — scoped
   ========================================================================== */
html, body { margin: 0; padding: 0; background: #f5f5f6; }

.kpa, .kpa *, .kpa *::before, .kpa *::after { box-sizing: border-box; }
.kpa { margin: 0; }
.kpa h1, .kpa h2, .kpa h3, .kpa h4, .kpa p, .kpa ul, .kpa ol, .kpa figure, .kpa blockquote { margin: 0; }
.kpa ul, .kpa ol { padding: 0; list-style: none; }
.kpa img, .kpa svg, .kpa video { display: block; max-width: 100%; height: auto; }
/* NOTE: element-qualified (0,1,1). Any single-class override of button padding
   will lose to this — use a doubled selector, e.g. `.kpa .kpa-thing`. */
.kpa button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.kpa a { color: inherit; text-decoration: none; }

.kpa {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Nothing may push the page wider than the viewport. */
.kpa, .kpa * { min-width: 0; }

.kpa :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.kpa-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--brand); color: var(--on-brand); padding: .8em 1.4em; border-radius: 0 0 var(--radius) 0;
}
.kpa-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .kpa *, .kpa *::before, .kpa *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.kpa-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.kpa-sect { padding-block: var(--sect); }
.kpa-band { background: var(--canvas-warm); }

.kpa-h1, .kpa-h2, .kpa-h3 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word;
}
/* Bigger than a default type scale, on purpose: the references are legible at
   arm's length on a phone, and that legibility is most of what "simple" means. */
.kpa-h1 { font-size: clamp(2.05rem, 1.25rem + 3.3vw, 3.5rem); }
.kpa-h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem); }
.kpa-h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); line-height: 1.25; }

.kpa-eyebrow {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: .9rem;
}
.kpa-eyebrow--on-brand { color: var(--accent); }

.kpa-lead { font-size: clamp(1rem, .96rem + .2vw, 1.08rem); color: var(--ink-soft); line-height: 1.62; }

/* rem, not ch — `ch` resolves against the container's 1rem, which is far too
   narrow for the display headings sitting inside these blocks. */
.kpa-sect-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.kpa-sect-head .kpa-lead { margin-top: 1rem; max-width: 56ch; }
.kpa-sect-head--center { text-align: center; margin-inline: auto; }
.kpa-sect-head--center .kpa-lead { margin-inline: auto; }

.kpa-note { margin-top: 2rem; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: var(--accent-tint); font-size: .9rem; }

/* Buttons ---------------------------------------------------------------- */
.kpa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .95em 1.9em;
  font-size: .96rem; font-weight: 600; letter-spacing: .01em;
  border-radius: var(--radius-pill);
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align: center;
}
.kpa-btn:active { transform: translateY(1px); }

/* Doubled `.kpa` prefix (0,2,0) deliberately: `.kpa a {color:inherit}` is
   (0,1,1) and would otherwise beat a bare `.kpa-btn--accent` (0,1,0), which
   silently renders dark text on the accent pill. */
.kpa .kpa-btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.kpa .kpa-btn--accent:hover { background: var(--accent-dark); color: #fff; }

.kpa .kpa-btn--brand { background: var(--brand); color: var(--on-brand); }
.kpa .kpa-btn--brand:hover { background: var(--brand-soft); color: var(--on-brand); }

.kpa .kpa-btn--ghost { border: 1px solid rgba(255, 255, 255, .42); color: var(--on-brand); }
.kpa .kpa-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.kpa .kpa-btn--outline { border: 1px solid var(--brand); color: var(--brand); }
.kpa .kpa-btn--outline:hover { background: var(--brand); color: var(--on-brand); }

/* Chips ------------------------------------------------------------------ */
.kpa .kpa-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.kpa-chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .5em 1em; font-size: .84rem; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius-pill);
  color: var(--on-brand); background: rgba(255, 255, 255, .07);
}
.kpa-chip svg { flex-shrink: 0; color: var(--accent); }
.kpa .kpa-chips--light { margin-top: .8rem; }
.kpa-chips--light .kpa-chip {
  background: var(--canvas-warm); border-color: var(--line); color: var(--ink-soft); font-size: .76rem; padding: .35em .8em;
}

/* Placeholder blocks -----------------------------------------------------
   A missing image must never ship a broken-image icon. The <img> sits on top
   of this; site.js removes the <img> on error and the labelled block shows. */
.kpa-ph {
  position: relative; display: grid; place-items: center;
  background-color: #d8dade;
  background-image: repeating-linear-gradient(45deg, rgba(31, 41, 51, .08) 0 12px, transparent 12px 24px);
  color: var(--brand); overflow: hidden;
}
.kpa-ph::after {
  content: attr(data-label);
  font-family: var(--font-body);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .93); border: 1px solid rgba(31, 41, 51, .2);
  padding: .5em 1em; border-radius: 2px; text-align: center; max-width: 85%; line-height: 1.4;
}
.kpa-ph--logo { position: absolute; inset: 0; }
.kpa-ph--logo::after { font-size: .55rem; padding: .3em .6em; }
/* Absolute, like --brand. Left in flow it stacks on top of the <img> and the
   88px result overflows the 44px <li>, pushing logos through the divider. */
.kpa-ph--accred { position: absolute; inset: 0; }
.kpa-ph--accred::after { font-size: .5rem; padding: .25em .5em; letter-spacing: .06em; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.kpa-hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 245, 246, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .25s ease;
}
.kpa-hdr[data-stuck="true"] { border-bottom-color: var(--line); background: rgba(245, 245, 246, .98); }
.kpa-hdr .kpa-wrap { max-width: 1360px; }
.kpa-hdr__in { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2.5rem); min-height: 72px; }

/* Sized for a STACKED logo lockup (monogram over wordmark), not a horizontal
   wordmark — a 30px-tall slot renders the wordmark unreadably small. */
.kpa-logo { position: relative; display: flex; align-items: center; color: var(--brand); flex-shrink: 0; height: clamp(42px, 4.5vw, 54px); width: auto; }
.kpa-logo img { height: 100%; width: auto; object-fit: contain; object-position: left center; position: relative; }

.kpa-nav { display: none; margin-left: auto; }
.kpa-nav ul { display: flex; gap: clamp(1rem, 2vw, 1.9rem); }
.kpa-nav a {
  font-size: .92rem; font-weight: 500; color: var(--ink-soft);
  padding-block: .4rem; position: relative; transition: color .16s ease; white-space: nowrap;
}
.kpa-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--accent); transition: right .22s ease;
}
.kpa-nav a:hover { color: var(--brand); }
.kpa-nav a:hover::after, .kpa-nav a[aria-current="page"]::after { right: 0; }
.kpa-nav a[aria-current="page"] { color: var(--brand); }

.kpa-hdr__end { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.25rem); margin-left: auto; }

/* Always visible, every width. This is a build gate, not a decoration. */
.kpa-hdr__tel {
  display: inline-flex; align-items: center; gap: .55em;
  font-weight: 700; color: var(--brand); white-space: nowrap;
  padding: .5em .9em; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); font-size: .95rem;
}
.kpa-hdr__tel:hover { border-color: var(--accent); color: var(--accent-dark); }
.kpa-hdr__tel svg { flex-shrink: 0; color: var(--accent-dark); }
.kpa-hdr__tel small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-hdr__cta { display: none; }

@media (max-width: 520px) {
  /* Keep the number tappable but let the logo breathe: drop the label, keep
     the digits. Never collapse this to an icon with no number. */
  .kpa-hdr__tel { padding: .5em .75em; font-size: .88rem; }
  .kpa-hdr__tel small { display: none; }
}
@media (min-width: 1000px) {
  .kpa-nav { display: block; }
  .kpa-hdr__cta { display: inline-flex; }
  .kpa-hdr__end { margin-left: 0; }
  .kpa-hdr__in { justify-content: space-between; }
}

/* Burger — in the header flow, not fixed. The reference build floated it and
   then had to fight its own stacking context. */
.kpa-burger {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border-radius: var(--radius); flex-shrink: 0;
}
.kpa-burger span { display: block; width: 24px; height: 2px; background: var(--brand); border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
@media (min-width: 1000px) { .kpa-burger { display: none; } }

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */
.kpa-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--brand); color: var(--on-brand);
  display: flex; flex-direction: column; padding: clamp(1rem, 5vw, 2rem) var(--gut) clamp(1.5rem, 5vw, 2.5rem);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  overflow-y: auto;
}
.kpa-menu[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.kpa-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.kpa-menu__logo { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; }
.kpa-menu__close { width: 44px; height: 44px; display: grid; place-items: center; color: var(--on-brand); }
.kpa-menu__close:hover { color: var(--accent); }
.kpa-menu__links { display: flex; flex-direction: column; margin-top: clamp(1rem, 4vw, 2.5rem); flex: 1; }
.kpa-menu__links a {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 7vw, 2.1rem);
  padding: .45em 0; border-bottom: 1px solid rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: space-between; transition: color .2s ease, padding-left .2s ease;
}
.kpa-menu__links a::after { content: "\2192"; color: var(--accent); opacity: 0; transition: opacity .2s ease; font-size: .65em; }
.kpa-menu__links a:hover { color: var(--accent); padding-left: .3rem; }
.kpa-menu__links a:hover::after { opacity: 1; }
.kpa-menu__cta { display: grid; gap: 1rem; padding-top: 1.5rem; }
.kpa-menu__tel { text-align: center; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-brand-dim); }
.kpa-menu__tel strong { display: block; font-size: 1.55rem; letter-spacing: 0; text-transform: none; color: var(--on-brand); margin-top: .2rem; }

/* ==========================================================================
   HERO
   ========================================================================== */
.kpa-hero { position: relative; background: var(--brand); color: var(--on-brand); overflow: hidden; }
.kpa-hero__bg { position: absolute; inset: 0; }
.kpa-hero__bg .kpa-ph { width: 100%; height: 100%; }
.kpa-hero__bg .kpa-ph::after { position: absolute; right: 1rem; bottom: 1rem; font-size: .6rem; max-width: 24ch; }
/* On mobile the hero fills the viewport and this label lands on top of the CTA
   proof line. The stripes already say "no image" — the label can go. */
@media (max-width: 939px) { .kpa-hero__bg .kpa-ph::after { display: none; } }
.kpa-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.kpa-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(var(--scrim-rgb),.96) 0%, rgba(var(--scrim-rgb),.9) 42%, rgba(var(--scrim-rgb),.6) 72%, rgba(var(--scrim-rgb),.48) 100%);
}
/* Single column below 940 — a sideways gradient would leave white text over
   the bright part of the photo. */
@media (max-width: 939px) {
  .kpa-hero__scrim { background: linear-gradient(180deg, rgba(var(--scrim-rgb),.93), rgba(var(--scrim-rgb),.88)); }
}
.kpa-hero__in { position: relative; z-index: 2; padding-block: clamp(2.75rem, 8vw, 5.5rem); }
.kpa-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 940px) { .kpa-hero__grid { grid-template-columns: 1.06fr .94fr; } }

.kpa-hero__h1 { color: #fff; }
.kpa-hero__sub { margin-top: 1.25rem; max-width: 48ch; color: var(--on-brand-dim); font-size: clamp(1rem, .96rem + .24vw, 1.1rem); }
.kpa-hero__btn { display: none; margin-top: 1.6rem; }
.kpa-hero__proof { display: none; }

@media (max-width: 939px) {
  /* One message, one action. The form moves to /get-a-quote; the CTA and the
     header call button carry the mobile hero. */
  .kpa-formcard { display: none; }
  .kpa .kpa-hero__btn { display: inline-flex; width: 100%; }
  .kpa-hero__proof {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    margin-top: .9rem; font-size: .82rem; color: var(--on-brand-dim); text-align: center;
  }
  .kpa-hero__grid > div { text-align: center; }
  .kpa-hero__sub { margin-inline: auto; }
  .kpa .kpa-chips { justify-content: center; margin-top: 1.4rem; }
}

/* Form card -------------------------------------------------------------- */
.kpa-formcard {
  background: var(--surface); border-top: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: clamp(1.35rem, 3.5vw, 2.1rem); color: var(--ink);
}
.kpa-formcard__h { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.2; }
.kpa-formcard__p { font-size: .92rem; color: var(--ink-soft); margin-top: .55rem; }
.kpa-formcard__foot {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .79rem; color: var(--ink-soft); display: flex; align-items: center; gap: .5em;
}
.kpa-formcard__foot svg { color: var(--accent-dark); flex-shrink: 0; }

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.kpa-phero { position: relative; background: var(--brand); color: var(--on-brand); overflow: hidden; }
.kpa-phero__bg { position: absolute; inset: 0; }
.kpa-phero__bg .kpa-ph { width: 100%; height: 100%; }
.kpa-phero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-phero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--scrim-rgb),.88), rgba(var(--scrim-rgb),.93)); }
.kpa-phero__in { position: relative; z-index: 2; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.kpa-phero__crumb { font-size: .78rem; color: rgba(247,248,248,.6); margin-bottom: .9rem; }
.kpa-phero__crumb a:hover { color: var(--accent); }
.kpa-phero h1 { color: #fff; max-width: 22ch; }
.kpa-phero__sub { margin-top: 1rem; max-width: 58ch; color: var(--on-brand-dim); font-size: clamp(1rem, .96rem + .26vw, 1.1rem); }
.kpa-phero__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.kpa-phero__proof { margin-top: 1rem; font-size: .82rem; color: var(--on-brand-dim); }
@media (max-width: 767px) {
  .kpa-phero__crumb { display: none; }   /* BreadcrumbList schema still ships */
  .kpa-phero__in { text-align: center; }
  .kpa-phero h1, .kpa-phero__sub { margin-inline: auto; }
  .kpa-phero__btns { justify-content: center; }
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.kpa-strip { background: var(--brand-deep); color: var(--on-brand-dim); }
.kpa-strip ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; padding-block: 2.2rem; text-align: center; }
@media (min-width: 780px) { .kpa-strip ul { grid-template-columns: repeat(4, 1fr); } }
.kpa-strip strong { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.5rem); font-weight: 700; color: var(--accent); line-height: 1; }
.kpa-strip span { display: block; font-size: .81rem; letter-spacing: .03em; margin-top: .5rem; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.kpa-proc { background: var(--brand); color: var(--on-brand-dim); }
.kpa-proc .kpa-h2 { color: #fff; }
.kpa-proc .kpa-lead { color: var(--on-brand-dim); }
.kpa-steps { display: grid; gap: clamp(1.6rem, 3.5vw, 2.5rem); counter-reset: s; }
@media (min-width: 760px) { .kpa-steps { grid-template-columns: repeat(4, 1fr); } }
.kpa-step { position: relative; padding-top: 2.4rem; border-top: 2px solid rgba(255,255,255,.16); counter-increment: s; }
.kpa-step::before {
  content: "0" counter(s); position: absolute; top: .9rem; left: 0;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem; letter-spacing: .1em; color: var(--accent);
}
.kpa-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: #fff; line-height: 1.25; }
.kpa-step p { margin-top: .65rem; font-size: .93rem; color: var(--on-brand-dim); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.kpa-svcs { display: grid; gap: clamp(1rem, 2.2vw, 1.4rem); }
@media (min-width: 620px) { .kpa-svcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kpa-svcs { grid-template-columns: repeat(3, 1fr); } }

.kpa-svc {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.kpa-svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.kpa-svc__img { aspect-ratio: 16 / 10; position: relative; }
.kpa-svc__img .kpa-ph { width: 100%; height: 100%; }
.kpa-svc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-svc__body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.kpa-svc__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; color: var(--brand); }
.kpa-svc__body p { margin-top: .6rem; font-size: .93rem; color: var(--ink-soft); flex: 1; }
.kpa-svc__more { margin-top: 1.1rem; font-size: .87rem; font-weight: 700; color: var(--accent-dark); display: inline-flex; align-items: center; gap: .45em; transition: gap .2s ease; }
.kpa-svc:hover .kpa-svc__more { gap: .8em; }

.kpa-svc--flag { grid-column: 1 / -1; }
@media (min-width: 1040px) {
  .kpa-svc--flag { flex-direction: row; align-items: stretch; }
  .kpa-svc--flag .kpa-svc__img { flex: 1 1 52%; aspect-ratio: auto; }
  .kpa-svc--flag .kpa-svc__body { flex: 1 1 48%; justify-content: center; padding: clamp(2rem, 4vw, 3rem); }
  .kpa-svc--flag .kpa-svc__body h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
  .kpa-svc--flag .kpa-svc__body p { flex: 0; font-size: 1rem; }
}

/* ==========================================================================
   SPLIT (text + media)
   ========================================================================== */
.kpa-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 860px) { .kpa-split { grid-template-columns: 1.1fr .9fr; } }
.kpa-split__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.kpa-split__media .kpa-ph { width: 100%; height: 100%; }
.kpa-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-split__body p { margin-top: 1.1rem; color: var(--ink-soft); }
.kpa-split__lead { font-size: clamp(1.08rem, 1rem + .45vw, 1.24rem); color: var(--ink); line-height: 1.5; }
.kpa-split__body .kpa-btn { margin-top: 1.75rem; }
.kpa-sign { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--brand); }
.kpa-sign span { display: block; font-weight: 500; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: .25rem; }

/* Doubled prefix (0,2,0) — same reason as .kpa-accreds. */
.kpa .kpa-ticks { display: grid; gap: .8rem; margin-top: 1.5rem; }
.kpa-ticks li { display: flex; gap: .7em; align-items: flex-start; font-size: .96rem; color: var(--ink-soft); }
.kpa-ticks svg { flex-shrink: 0; margin-top: .18em; color: var(--accent-dark); }

.kpa-inline-proof { margin-top: .85rem; font-size: .82rem; color: var(--ink-soft); }

/* ==========================================================================
   WHY US
   ========================================================================== */
.kpa-why { display: grid; gap: clamp(1.6rem, 4vw, 2.75rem); }
@media (min-width: 700px) { .kpa-why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kpa-why { grid-template-columns: repeat(3, 1fr); } }
.kpa-why li h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--brand); display: flex; align-items: center; gap: .6em; }
.kpa-why li h3 svg { color: var(--accent-dark); flex-shrink: 0; }
.kpa-why li p { margin-top: .6rem; font-size: .94rem; color: var(--ink-soft); }

/* ==========================================================================
   BEFORE / AFTER
   ========================================================================== */
.kpa-ba__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .kpa-ba__grid { grid-template-columns: repeat(2, 1fr); } }

.kpa-slider {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); user-select: none; touch-action: pan-y; cursor: ew-resize;
}
.kpa-slider__layer { position: absolute; inset: 0; }
.kpa-slider__layer .kpa-ph { width: 100%; height: 100%; }
.kpa-slider__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-slider__layer--after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.kpa-slider__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: #fff; transform: translateX(-1px); z-index: 3; box-shadow: 0 0 12px rgba(19,26,33,.4);
}
.kpa-slider__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--brand);
  display: grid; place-items: center; box-shadow: 0 3px 14px rgba(19,26,33,.35); border: 2px solid var(--accent);
}
.kpa-slider:not(.is-touched) .kpa-slider__knob { animation: kpa-knob 2.4s ease-in-out infinite; }
/* The pulse reads from --accent-rgb. It was a hardcoded literal of the old
   accent, which meant every reskin shipped the previous client's colour here. */
@keyframes kpa-knob {
  0%, 100% { box-shadow: 0 3px 14px rgba(19,26,33,.35), 0 0 0 0 rgba(var(--accent-rgb), .5); }
  50%      { box-shadow: 0 3px 14px rgba(19,26,33,.35), 0 0 0 12px rgba(var(--accent-rgb), 0); }
}
.kpa-slider__tag {
  position: absolute; bottom: .8rem; z-index: 2;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .4em .9em; border-radius: var(--radius-pill); background: rgba(19,26,33,.8); color: #fff;
}
.kpa-slider__tag--b { left: .8rem; }
.kpa-slider__tag--a { right: .8rem; background: var(--accent); color: var(--on-accent); }
.kpa-slider__hint {
  position: absolute; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 4;
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .42em 1em; border-radius: var(--radius-pill); background: rgba(255,255,255,.94); color: var(--brand);
  box-shadow: 0 2px 10px rgba(19,26,33,.25); transition: opacity .3s ease; pointer-events: none;
}
.kpa-slider.is-touched .kpa-slider__hint { opacity: 0; }
.kpa-slider__hint svg { animation: kpa-nudge 1.6s ease-in-out infinite; }
@keyframes kpa-nudge { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }

.kpa-ba__cap { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.kpa-ba__town { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--brand); }
.kpa-ba__detail { font-size: .87rem; color: var(--ink-soft); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.kpa-revs { background: var(--surface); }
.kpa-revgrid { display: grid; gap: clamp(1rem, 2.2vw, 1.4rem); }
@media (min-width: 700px) { .kpa-revgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kpa-revgrid { grid-template-columns: repeat(3, 1fr); } }

.kpa-rev {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.5vw, 1.7rem); display: flex; flex-direction: column;
}
.kpa-rev blockquote { font-size: .98rem; color: var(--ink); line-height: 1.6; flex: 1; }
.kpa-rev figcaption { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .86rem; }
.kpa-rev figcaption strong { display: block; color: var(--brand); font-weight: 700; }
.kpa-rev figcaption span { color: var(--ink-soft); }

.kpa .kpa-rev__video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.1rem; }
.kpa-rev__video .kpa-ph { width: 100%; height: 100%; }
.kpa-rev__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpa-rev__play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; background: linear-gradient(to top, rgba(19,26,33,.5), rgba(19,26,33,0) 55%); }
.kpa-rev__play i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--brand); box-shadow: 0 4px 18px rgba(19,26,33,.3); transition: transform .25s ease, background-color .25s ease; }
.kpa-rev__video:hover .kpa-rev__play i { transform: scale(1.08); background: var(--accent); color: var(--on-accent); }

/* Lightbox */
.kpa-lb {
  position: fixed; inset: 0; z-index: 220; background: rgba(15,20,26,.94);
  display: grid; place-items: center; padding: var(--gut);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.kpa-lb[data-open="true"] { opacity: 1; visibility: visible; }
.kpa-lb__box { width: min(1000px, 100%); }
.kpa-lb__frame { aspect-ratio: 16 / 9; max-height: 78vh; margin-inline: auto; background: #000; border-radius: var(--radius); overflow: hidden; }
.kpa-lb__frame .kpa-ph { width: 100%; height: 100%; }
.kpa-lb__close { display: block; margin: 1rem auto 0; color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.kpa-lb__close:hover { color: var(--accent); }

/* ==========================================================================
   GUARANTEE
   ========================================================================== */
.kpa-guar { background: var(--canvas-warm); }
.kpa-guar__box {
  background: var(--brand); color: var(--on-brand-dim); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem); text-align: center; box-shadow: var(--shadow-lg);
}
.kpa-guar__box .kpa-h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.kpa-guar__box p { margin: 1.1rem auto 0; max-width: 58ch; }
/* Doubled prefix (0,2,0): margin AND padding here both lose to the resets
   `.kpa ul {margin:0}` and `.kpa ul {padding:0}`, which are (0,1,1). Without
   it the logos render on top of the divider. */
.kpa .kpa-accreds { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem 2.5rem; margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); }
.kpa-accreds li { position: relative; width: 120px; height: 44px; flex: 0 0 auto; }
.kpa-accreds img { height: 44px; width: auto; object-fit: contain; position: relative; margin-inline: auto; }

/* ==========================================================================
   AREAS
   ========================================================================== */
.kpa-areas { background: var(--surface); }
.kpa-region { border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--canvas); }
.kpa-region__towns { display: flex; flex-wrap: wrap; gap: .5rem; }
.kpa-region__towns a, .kpa-ft__pills a {
  font-size: .86rem; padding: .42em .9em; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); transition: all .16s ease;
}
.kpa-region__towns a:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.kpa-region__tel { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.kpa-region__tel small { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-region__tel a { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--brand); }
.kpa-region__tel a:hover { color: var(--accent-dark); }

.kpa-areagrid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .kpa-areagrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .kpa-areagrid { grid-template-columns: repeat(3, 1fr); } }
.kpa-areacard {
  display: block; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; transition: transform .2s ease, box-shadow .2s ease;
}
.kpa-areacard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpa-areacard h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--brand); }
.kpa-areacard__pc { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: .3rem; }
.kpa-areacard .kpa-svc__more { margin-top: 1rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.kpa-faqwrap { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 920px) {
  .kpa-faqwrap { grid-template-columns: minmax(240px, .8fr) 1.2fr; align-items: start; }
  .kpa-faqwrap__aside { position: sticky; top: 100px; }
}
.kpa-faqwrap__lead { font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); line-height: 1.45; color: var(--brand); margin-top: 1rem; }
.kpa-faqcta { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.kpa-faqcta small { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; }

.kpa-faq { display: grid; gap: .7rem; }
.kpa-faq__item {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
.kpa-faq__item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 0;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.kpa-faq__q, .kpa-faq__a { position: relative; z-index: 1; }
.kpa-faq__item:hover { border-color: rgba(194,65,12,.45); }
.kpa-faq__item[data-open="true"] { border-color: rgba(194,65,12,.5); background: #fffaf7; box-shadow: 0 8px 26px rgba(19,26,33,.08); }
.kpa-faq__item[data-open="true"]::before { transform: scaleX(1); }

/* Doubled prefix (0,2,0) so the padding beats the reset `.kpa button` (0,1,1).
   Without it the padding is silently dropped and the accordion collapses. */
.kpa .kpa-faq__q {
  width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem clamp(1.25rem, 2.5vw, 1.85rem);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, .96rem + .32vw, 1.15rem); line-height: 1.35;
  color: var(--brand); cursor: pointer; transition: color .18s ease;
}
.kpa-faq__q:hover { color: var(--accent-dark); }

.kpa-faq__icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-tint); position: relative; transition: background-color .25s ease, transform .3s ease; }
.kpa-faq__item[data-open="true"] .kpa-faq__icon { background: var(--accent); transform: rotate(180deg); }
.kpa-faq__icon::before, .kpa-faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--accent-dark);
  transform: translate(-50%, -50%); transition: transform .28s ease, background-color .25s ease;
}
.kpa-faq__item[data-open="true"] .kpa-faq__icon::before,
.kpa-faq__item[data-open="true"] .kpa-faq__icon::after { background: #fff; }
.kpa-faq__icon::before { width: 12px; height: 2px; }
.kpa-faq__icon::after  { width: 2px; height: 12px; }
.kpa-faq__item[data-open="true"] .kpa-faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }

.kpa-faq__a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.kpa-faq__item[data-open="true"] .kpa-faq__a { max-height: 700px; }
.kpa-faq__a p { padding: 0 clamp(1.25rem, 2.5vw, 1.85rem) 1.5rem; color: var(--ink-soft); max-width: 68ch; line-height: 1.7; }
/* No JS: every answer is open and readable. */
.kpa-nojs .kpa-faq__a { max-height: none; }

/* ==========================================================================
   QUOTE / CONTACT LAYOUT
   ========================================================================== */
.kpa-book { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .kpa-book { grid-template-columns: 1fr 1.02fr; } }
.kpa-book__points { margin-top: 1.75rem; display: grid; gap: 1.1rem; }
.kpa-book__point { display: flex; gap: .85rem; }
.kpa-book__point svg { flex-shrink: 0; color: var(--accent-dark); margin-top: 2px; }
.kpa-book__point strong { display: block; color: var(--brand); font-family: var(--font-display); font-size: 1.05rem; }
.kpa-book__point span { font-size: .93rem; color: var(--ink-soft); }
.kpa-book__tel { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.kpa-book__tel small { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.kpa-book__tel a { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--brand); }
.kpa-book__tel a:hover { color: var(--accent-dark); }
.kpa-quote { padding-top: clamp(2.5rem, 6vw, 4rem); }

.kpa-contacts { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .kpa-contacts { grid-template-columns: repeat(2, 1fr); } }
.kpa-contact { border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); display: flex; flex-direction: column; }
.kpa-contact h2 { font-family: var(--font-display); font-weight: 700; color: var(--brand); font-size: 1.2rem; }
.kpa-contact p { margin-top: .5rem; font-size: .92rem; color: var(--ink-soft); }
.kpa-contact__tel { display: inline-block; margin-top: auto; padding-top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--brand); word-break: break-word; }
.kpa-contact__tel:hover { color: var(--accent-dark); }

.kpa-hours { margin-top: 1.75rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.kpa-hours h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand); margin-bottom: .85rem; }
.kpa-hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--ink-soft); padding-block: .3rem; }
.kpa-hours li strong { color: var(--ink); }
.kpa-hours__area { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-soft); }

/* ==========================================================================
   FORM
   ========================================================================== */
.kpa-form { display: grid; gap: 1rem; }
.kpa-form__row { display: grid; gap: 1rem; }
@media (min-width: 480px) { .kpa-form__row { grid-template-columns: 1fr 1fr; } }

.kpa-field { display: grid; gap: .35rem; }
.kpa-field label { font-size: .82rem; font-weight: 700; color: var(--brand); }
.kpa-field label .req { color: var(--accent-dark); }
.kpa-field input, .kpa-field textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  padding: .72em .85em; border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.kpa-field input::placeholder, .kpa-field textarea::placeholder { color: #98a1ab; }
.kpa-field input:focus, .kpa-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.kpa-field textarea { resize: vertical; min-height: 92px; }
.kpa-field--invalid input, .kpa-field--invalid textarea { border-color: #c0392b; background: #fdf6f5; }
.kpa-field__err { font-size: .75rem; color: #c0392b; display: none; }
.kpa-field--invalid .kpa-field__err { display: block; }

.kpa-consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .78rem; color: var(--ink-soft); line-height: 1.5; }
.kpa-consent input { margin-top: .18rem; flex-shrink: 0; width: 17px; height: 17px; accent-color: var(--accent); }
.kpa-consent a { color: var(--accent-dark); text-decoration: underline; }
.kpa-consent.kpa-field--invalid { color: #c0392b; }

/* Off-screen, not display:none — hidden fields are ignored by some bots. */
.kpa-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Doubled prefix (0,2,0): vertical padding must beat the button reset. */
.kpa .kpa-form__submit { width: 100%; margin-top: .25rem; padding-top: 1.15em; padding-bottom: 1.15em; }
.kpa-form__msg { display: none; font-size: .9rem; line-height: 1.5; padding: .85em 1.1em; border-radius: 6px; }
.kpa-form__msg.is-ok  { display: block; background: #eaf5ee; border: 1px solid #b7dbc4; color: #1e6b3a; }
.kpa-form__msg.is-err { display: block; background: #fdf0ee; border: 1px solid #e6b7ae; color: #a03123; }
.kpa-form[data-sending="true"] .kpa-form__submit { opacity: .6; pointer-events: none; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.kpa-cta { background: var(--brand); color: var(--on-brand-dim); text-align: center; }
.kpa-cta .kpa-h2 { color: #fff; }
.kpa-cta p { margin: 1.1rem auto 0; max-width: 52ch; }
.kpa-cta__btns { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 2rem; }
.kpa-cta__proof {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 1.5rem;
  padding: .55em 1.1em; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06); font-size: .84rem;
}
.kpa-cta__proof svg { color: var(--accent); flex-shrink: 0; }

/* ==========================================================================
   PROSE (legal pages)
   ========================================================================== */
.kpa-prose { max-width: 68ch; }
.kpa-prose p { margin-top: 1.05rem; color: var(--ink-soft); }
.kpa-prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--brand); margin-top: 2.5rem; }
.kpa-prose a { color: var(--accent-dark); text-decoration: underline; }

/* ==========================================================================
   404
   ========================================================================== */
.kpa-404 { background: var(--brand); color: var(--on-brand-dim); text-align: center; }
.kpa-404__in { max-width: 44rem; }
.kpa-404 h1 { color: #fff; margin-bottom: 1rem; }
.kpa-404 p { max-width: 48ch; margin-inline: auto; }
.kpa-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 2.5rem; }
.kpa-404__links a { font-size: .85rem; padding: .4em .9em; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-pill); }
.kpa-404__links a:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.kpa-ft { background: var(--brand-deep); color: rgba(247,248,248,.62); font-size: .9rem; border-top: 3px solid var(--accent); }
.kpa-ft__grid { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 700px)  { .kpa-ft__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .kpa-ft__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } }
.kpa-ft h3 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.kpa-ft a:hover { color: var(--accent); }
.kpa-ft__logo { position: relative; display: block; height: 56px; width: 90px; }
.kpa-ft__logo img { height: 100%; width: auto; object-fit: contain; object-position: left center; position: relative; filter: brightness(0) invert(1); }
.kpa-ft__blurb { margin-top: 1.1rem; max-width: 38ch; line-height: 1.6; }
.kpa-ft__tel { display: inline-flex; align-items: center; gap: .55em; margin-top: 1.2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; }
.kpa-ft__tel svg { color: var(--accent); flex-shrink: 0; }

/* Review badges. One tile per platform we can actually evidence. */
.kpa-ft__badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.kpa-ft__badge { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.04); }
.kpa-ft__badge svg { width: 20px; height: 20px; flex-shrink: 0; }
.kpa-ft__badge strong { display: block; font-size: .8rem; color: #fff; }
.kpa-ft__badge small { display: block; font-size: .72rem; color: rgba(247,248,248,.6); }

.kpa-ft__links li + li { margin-top: .55rem; }
.kpa-ft__hours { margin-top: 1.2rem; font-size: .82rem; line-height: 1.6; color: rgba(247,248,248,.5); }
.kpa-ft__social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.kpa-ft__social a { font-size: .8rem; padding: .4em .9em; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-pill); }
.kpa-ft__social a:hover { border-color: var(--accent); }
.kpa-ft__legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center; font-size: .79rem;
}
.kpa-ft__trust { color: rgba(247,248,248,.5); }

/* ==========================================================================
   COOKIE BANNER (injected by site.js on first visit)
   ========================================================================== */
.kpa-cookie {
  position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: min(440px, calc(100% - 2rem)); z-index: 120;
  background: var(--brand); color: var(--on-brand-dim);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.2rem 1.35rem;
  transform: translateY(150%); opacity: 0;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
}
.kpa-cookie.is-in { transform: none; opacity: 1; }
.kpa-cookie p { font-size: .84rem; line-height: 1.55; }
.kpa-cookie a { color: var(--accent); text-decoration: underline; }
.kpa-cookie__btns { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.kpa-cookie__btns .kpa-btn { padding: .55em 1.2em; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .kpa-cookie { transition: opacity .3s ease; transform: none; } }

/* ==========================================================================
   BRANDS / ACCREDITATION WALL
   ========================================================================== */
.kpa-brands { background: var(--surface); border-block: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.kpa-brands__head { text-align: center; margin-bottom: 2rem; }
.kpa-brands__head h2 { color: var(--brand); }
.kpa-brands__head p { margin-top: .6rem; font-size: .92rem; color: var(--ink-soft); max-width: 52ch; margin-inline: auto; }
.kpa-brands__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem clamp(2rem, 5vw, 3.5rem); }
.kpa-brands__row li { position: relative; width: 118px; height: 40px; }
.kpa-brands__row img {
  height: 40px; width: auto; max-width: 118px; object-fit: contain; margin-inline: auto; position: relative;
  /* Mixed-quality manufacturer logos read as clutter in full colour. Greyscale
     until hover keeps the row calm and the eye on the copy. */
  filter: grayscale(1); opacity: .62; transition: filter .25s ease, opacity .25s ease;
}
.kpa-brands__row li:hover img { filter: none; opacity: 1; }
/* Some manufacturers only publish a white-on-transparent mark because their own
   site runs a dark header. Inverting it is the only way it shows on this row.
   Set "invert": true on that logo in site.config.json. */
.kpa-brands__row li.is-inverted img { filter: grayscale(1) invert(1); }
.kpa-brands__row li.is-inverted:hover img { filter: invert(1); opacity: 1; }
.kpa-ph--brand { position: absolute; inset: 0; }
.kpa-ph--brand::after { font-size: .5rem; padding: .25em .5em; letter-spacing: .06em; }

/* ==========================================================================
   MID-PAGE CTA BAND
   ========================================================================== */
/* Text on the accent band reads from --on-accent, not #fff: on a gold band
   white copy is 2.4:1 and unreadable. */
.kpa-band-cta { background: var(--accent); color: var(--on-accent); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.kpa-band-cta__in { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 860px) { .kpa-band-cta__in { grid-template-columns: 1.5fr auto; gap: 3rem; } }
.kpa-band-cta .kpa-h2 { color: var(--on-accent); }
.kpa-band-cta p { margin-top: .6rem; color: var(--on-accent-dim); max-width: 52ch; }
.kpa-band-cta__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
/* The accent button would vanish on the accent band — invert it to the dark
   brand, which is the strongest contrast available against gold. */
.kpa .kpa-band-cta__act .kpa-btn--accent { background: var(--brand); color: var(--on-brand); }
.kpa .kpa-band-cta__act .kpa-btn--accent:hover { background: var(--brand-deep); color: #fff; }
.kpa-band-cta__tel { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--on-accent); white-space: nowrap; }
.kpa-band-cta__tel small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-accent-dim); }

/* ==========================================================================
   SCROLL REVEAL
   IMPORTANT: content is hidden only once JS has added `.kpa-anim` AND has
   confirmed it can observe and reveal it. Never hide on `.kpa-reveal` alone —
   if the script fails or the observer is unsupported, the page would render
   blank. Progressive enhancement only.
   ========================================================================== */
.kpa-anim .kpa-reveal { opacity: 0; transform: translateY(18px); }
.kpa-anim .kpa-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .kpa-anim .kpa-reveal, .kpa-anim .kpa-reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Footer contact column: icon + value rows, not a link list. */
.kpa-ft__contact li { display: flex; align-items: flex-start; gap: .6em; }
.kpa-ft__contact li + li { margin-top: .7rem; }
.kpa-ft__contact svg { flex-shrink: 0; margin-top: .22em; color: var(--accent); }

/* Decline on the cookie banner was --brand text on a --brand background, i.e.
   near-black on near-black — invisible. Beyond looking broken, an unfindable
   Decline is a dark pattern: refusing has to be as easy as accepting.
   Tripled (0,3,0) to beat `.kpa .kpa-btn--outline` (0,2,0). */
.kpa .kpa-cookie .kpa-btn--outline { border-color: rgba(255, 255, 255, .5); color: #fff; }
.kpa .kpa-cookie .kpa-btn--outline:hover { background: #fff; border-color: #fff; color: var(--brand); }

/* Cookie card vs the chat bubble. On a phone the card is almost full-width and
   the GHL bubble is fixed bottom-right, so the bubble lands on top of it and
   the two read as one broken component. Lift the card clear of the bubble
   rather than shrinking it — the Accept and Decline buttons need the width.
   Breakpoint is 600px: above that the 440px card and the bubble no longer
   meet. */
@media (max-width: 600px) {
  .kpa-cookie {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.75rem);
  }
}