/*
 * NJS Law website: the one shared stylesheet (design system "Calm & clear", owner 18 Oct 2026).
 *
 * Used by every public page, the booking page and the lead-flow prototype, so the whole journey looks like one site.
 * Layers, in order: font face · tokens · base · layout · components · page furniture (header, footer, action bar,
 * banner) · journey screens (booking, lead flow) · utilities (seeded from the marketing templates' inline styles
 * and normalised onto the tokens; see deploy/site-preview/README.md). No inline style attributes anywhere: the CSP
 * is style-src 'self'.
 *
 * Palette: navy #1a253e (header, footer, one strong section per page); green #8dc049 for actions only, with a darker
 * accessible green for text; sky #4cc0ef sparingly; off-white canvas. Type: Inter (OFL), self-hosted, one variable
 * latin woff2, font-display: swap, preloaded by every page.
 */

/* ---------- Font ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.3100e775e8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --navy: #1a253e;
  --navy-2: #24345a;
  --navy-3: #31446f;
  --green: #8dc049;
  --green-hover: #7db23a;
  --green-ink: #3d6b10;
  --green-soft: #eef6e3;
  --sky: #4cc0ef;
  --sky-ink: #0a6a93;
  --sky-soft: #e8f6fd;
  --indigo: #424395;
  --indigo-soft: #eeeefa;
  --amber-soft: #fdf1dc;
  --amber-ink: #7a4f0e;
  --red-soft: #fde8e8;
  --red-ink: #9b2c2c;
  --pink-soft: #fbe9f1;
  --ink: #1a253e;
  --ink-2: #47526a;
  --line: #dfe4ec;
  --line-strong: #c5cdd9;
  /* Form field edges (WCAG 2.2 SC 1.4.11; audit 9 Nov 2026): 3.6:1 on white, 3.4:1 on the canvas, 3.1:1 on indigo-soft. --line-strong
     (1.6:1) stays for decorative lines and secondary-button edges, where the text identifies the control. */
  --field-line: #7d879a;
  --canvas: #f7f8fa;
  --surface: #ffffff;
  --on-dark: #ffffff;
  --on-dark-2: #d5dbe6;
  --tp: #00b67a;
  --focus: #2f6fde;
  --focus-on-dark: #a6caff; /* 9.1:1 on --navy: with the navy inner ring the pair passes technique C40 (two colours at 9:1 or more) */
  --bar-h: 69px; /* the mobile action bar: 10 px + 48 px button + 10 px padding + 1 px border, plus the safe area below */

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Fluid type scale (360 px → 1280 px). */
  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-15: 0.9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --t-xl: clamp(1.3125rem, 1.15rem + 0.65vw, 1.625rem);
  --t-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --t-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --t-4xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  /* Spacing scale. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-xl: clamp(40px, 5vw, 64px);
  --s-2xl: clamp(48px, 7vw, 88px);
  /* Shape and depth. */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgb(26 37 62 / 6%), 0 1px 3px rgb(26 37 62 / 8%);
  --shadow-md: 0 4px 12px rgb(26 37 62 / 8%), 0 2px 4px rgb(26 37 62 / 6%);
  --shadow-lg: 0 18px 48px rgb(26 37 62 / 16%);
  --wrap: 1200px;
  --header-h: 64px;
  --strip-h: 33px; /* the freephone strip above the header bar, border included */

  /* Contextual text colours: utilities read these, and .dark / .light sections reset them. */
  --t-white: #ffffff;
  --t-green: var(--green-ink);
  --t-sky: var(--sky-ink);
  --t-indigo: var(--indigo);
  --t-soft: var(--ink-2);
  --t-link: var(--indigo);
}
.dark {
  --t-white: #ffffff;
  --t-green: var(--green);
  --t-sky: var(--sky);
  --t-indigo: #c8caf6;
  --t-soft: var(--on-dark-2);
  --t-link: #ffffff;
  color: var(--on-dark);
}
.light {
  --t-white: var(--ink);
  --t-green: var(--green-ink);
  --t-sky: var(--sky-ink);
  --t-indigo: var(--indigo);
  --t-soft: var(--ink-2);
  --t-link: var(--indigo);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--strip-h) + 16px); }
/* Phones: the fixed action bar covers the bottom of the screen, so a focused element is scrolled clear of it (WCAG 2.2 SC 2.4.11
   Focus Not Obscured; pre-launch audit L9). The sticky header is covered by scroll-padding-top above. */
@media (max-width: 759.98px) { html { scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 16px); } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 var(--t-base) / 1.6 var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
main a, main span { overflow-wrap: anywhere; }
.brand svg { flex: none; }
a { color: var(--t-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 650; }
/* Focus (WCAG 2.2 SC 1.4.11; pre-launch audit L9). On light pages one 3 px ring in --focus: 4.7:1 on white, 4.2:1 or more on the
   soft tints. Inside .dark sections a light ring alone measured 1.79:1 on the white menus, cards and enquiry card those sections
   hold, so there the ring has two colours: a 2 px navy inner ring (15.2:1 on white) under the light outer ring (9.1:1 on navy).
   One of the two always stands out, whatever the surface (technique C40). The offset is fixed at 2 px so the inner ring shows. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--focus-on-dark); outline-offset: 2px; box-shadow: 0 0 0 2px var(--navy); }
::selection { background: var(--sky-soft); color: var(--ink); }
table { border-collapse: collapse; }
sup { line-height: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* left: 0 keeps the 1 px box at the left of its containing block: at its static position (the end of a link near the right edge)
   it made the page scroll sideways once text spacing was increased (WCAG 2.2 SC 1.4.12; audit 9 Nov 2026). Top stays static. */
.sr, .sr-only {
  position: absolute; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 1000; background: #fff; color: var(--ink);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 650; box-shadow: var(--shadow-md);
}
.skip:focus { top: 12px; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 760px) { .wrap { padding-left: 24px; padding-right: 24px; } }
.g2, .g3, .g4, .g5, .g6 { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .g2, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g5, .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sec { padding: var(--s-2xl) 0; }
.sec-alt { padding: var(--s-2xl) 0; background: var(--surface); }

/* Hero: headline first, then the capture card (on phones straight after the headline), then the rest. */
.hero {
  display: grid; gap: var(--s-6); align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "card" "rest";
}
.hero-head { grid-area: head; display: flex; flex-direction: column; gap: var(--s-3); }
.hero-card { grid-area: card; min-width: 0; }
.hero-rest { grid-area: rest; display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
@media (min-width: 1024px) {
  .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas: "head card" "rest card";
    grid-template-rows: auto 1fr;
    column-gap: var(--s-12); row-gap: var(--s-5);
  }
}
[data-hero] { position: relative; }
[data-hero] > .wrap { padding-top: var(--s-6); }
@media (max-width: 759px) { [data-hero] > .wrap { padding-bottom: var(--s-xl); gap: var(--s-5); } }

/* Article column + aside (service pages). */
.article { min-width: 0; }
.page-aside { display: none; }
@media (min-width: 1024px) {
  .page-aside { display: flex; flex-direction: column; gap: var(--s-5); position: sticky; top: calc(var(--header-h) + var(--strip-h) + 16px); flex: 0 1 300px; }
  .toc-mobile { display: none; }
}
.toc-mobile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.toc-mobile summary { padding: 12px 16px; min-height: 48px; font-weight: 650; }
.toc-mobile nav { display: flex; flex-direction: column; padding: 0 8px 8px; }
.toc-mobile nav a { padding: 10px 8px; min-height: 44px; display: flex; align-items: center; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }

/* ---------- Type components ---------- */
.h1 { margin: 0; font-size: var(--t-4xl); line-height: 1.08; font-weight: 750; letter-spacing: -0.025em; }
.h2 { margin: 0 0 var(--s-4); font-size: var(--t-3xl); line-height: 1.15; font-weight: 720; letter-spacing: -0.02em; scroll-margin-top: calc(var(--header-h) + var(--strip-h) + 16px); }
.h3 { margin: 0; font-size: var(--t-lg); line-height: 1.3; font-weight: 680; }
.p { margin: 0 0 var(--s-4); font-size: var(--t-md); line-height: 1.7; }
.muted { margin: 0; font-size: var(--t-15); line-height: 1.6; color: var(--t-soft); }
.eyebrow, .eb, .lbl {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-green);
}
.mono { font-variant-numeric: tabular-nums; }
.lede { font-size: var(--t-md); line-height: 1.6; color: var(--t-soft); margin: 0; }
.link { font-weight: 650; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
.link:hover { text-decoration: underline; }
.prose p, .art p, .lg p { margin: 0 0 var(--s-4); font-size: var(--t-md); line-height: 1.75; }
.art h2, .prose h2 { margin: var(--s-10) 0 var(--s-4); font-size: var(--t-2xl); font-weight: 720; }
.art ul, .prose ul, .lg ul { margin: 0 0 var(--s-4); padding-left: 22px; font-size: var(--t-md); line-height: 1.7; }
.art li, .prose li { margin-bottom: 6px; }
.lg { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-xl); }
.lg section { display: flex; flex-direction: column; gap: var(--s-4); }
.lg h2 { margin: 0; font-size: var(--t-2xl); line-height: 1.2; font-weight: 720; display: flex; align-items: center; gap: 14px; }
.lg h3 { margin: 8px 0 0; font-size: var(--t-lg); font-weight: 680; }
.lg li::marker { color: var(--indigo); }
.ph, .placeholder {
  display: inline-block; font-size: 0.6875rem; line-height: 1.5; font-weight: 650; letter-spacing: 0.02em; vertical-align: 0.15em;
  color: var(--amber-ink); background: var(--amber-soft); border-radius: 4px; padding: 0 5px; margin-left: 4px;
}
.dark .ph { color: #5a3a07; background: #fbe3b5; }
.fig { font-variant-numeric: tabular-nums; }

/* ---------- Buttons (two styles: primary action, secondary) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: var(--r-full); font: 650 var(--t-15) / 1.1 var(--font); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; background: var(--surface); color: var(--ink); white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary, .btn.bg-green { background: var(--green); color: var(--navy); border-color: var(--green); box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn.bg-green:hover { background: var(--green-hover); border-color: var(--green-hover); }
.btn-secondary, .btn.bg-white, .btn.bg-none { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover, .btn.bg-white:hover, .btn.bg-none:hover { border-color: var(--ink); }
.dark .btn-secondary, .dark .btn.bg-none, .dark .btn.bg-white { color: #fff; border-color: rgb(255 255 255 / 45%); }
.dark .btn-secondary:hover, .dark .btn.bg-none:hover { border-color: #fff; background: rgb(255 255 255 / 8%); }
.btn.bg-navy, .btn.bg-navy-2 { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.bg-sky-soft, .btn.bg-green-soft { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: var(--t-sm); }
.btn-block { width: 100%; }
.btn-wa { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn-wa .icon { color: #128c4b; }

/* ---------- Cards and surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-sm); }
a.card, .card-link { color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
a.card:hover, .card-link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: 8px; }
.cc { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-sm); --t-white: var(--ink); --t-link: var(--ink); }
.cc h3 { margin: 0; font-size: var(--t-lg); font-weight: 700; }
.cc .ls { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-15); }
.cc .ls a, .cc .ls span { color: var(--ink-2); min-height: 36px; display: inline-flex; align-items: center; }
.cc .more { margin-top: auto; color: var(--indigo); font-weight: 650; display: inline-flex; gap: 6px; align-items: center; min-height: 44px; text-decoration: none; }
.cc .ic.dark { background: var(--sky-soft); color: var(--navy); }
.ic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.res { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); display: flex; align-items: center; gap: var(--s-5); text-decoration: none; }
.res .amt { font-size: var(--t-2xl); font-weight: 750; min-width: 120px; font-variant-numeric: tabular-nums; }
.res .t { display: block; font-weight: 650; font-size: var(--t-base); }
.res .s { display: block; font-size: var(--t-sm); margin-top: 4px; color: var(--ink-2); }
.step { display: flex; flex-direction: column; gap: 10px; padding-top: var(--s-4); }
.step h3 { margin: 0; font-size: var(--t-md); font-weight: 680; }
.step p { margin: 0; font-size: var(--t-15); line-height: 1.55; }
.rv { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: 12px; }
.chk { display: flex; gap: 12px; font-size: var(--t-base); line-height: 1.55; align-items: flex-start; }
.chk > .icon { flex: none; color: var(--t-green); margin-top: 3px; }
.tick, .rule b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.rule { display: flex; gap: 12px; font-size: var(--t-base); line-height: 1.5; }
.num { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--t-md); font-weight: 700; }
.cover { --t-green: var(--green); --t-white: #fff; --t-soft: var(--on-dark-2); color: #fff; flex: none; border-radius: 8px; background: var(--navy); display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow-md); }
.tag, .pill, .chip {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: var(--t-xs); font-weight: 650;
  padding: 4px 10px; border-radius: var(--r-full); background: var(--green-soft); color: var(--green-ink); line-height: 1.3;
}
.dark .tag, .dark .pill, .dark .tag.c-ink { background: var(--green-soft); color: var(--green-ink); }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); display: flex; flex-direction: column; gap: 2px; }
.toc a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: var(--t-15); }
.toc a:hover { background: var(--canvas); }
.toc ol { margin: 0; padding-left: 22px; font-weight: 600; line-height: 2.1; }
@media (min-width: 760px) { .toc ol { columns: 2; column-gap: 40px; } }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); }
.mlink, .book { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 20px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.mlink:hover, .book:hover { background: var(--canvas); }
.gl { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; border-bottom: 1px solid rgb(255 255 255 / 25%); color: #fff; text-decoration: none; font-weight: 600; }
.sw { display: flex; flex-direction: column; gap: 10px; }
.sw .c { height: 96px; border-radius: 14px; border: 1px solid var(--line); }
.sw .n { font-weight: 700; } .sw .h { font-size: var(--t-sm); color: var(--ink-2); }

/* Avatars and photo slots: the person's photo (NJS's photos of 9 Nov 2026, P-079); initials only for someone without one. */
.av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--sky-soft); color: var(--navy); }
img.av { display: block; object-fit: cover; } /* a person's photo in the round slot (person_avatar); initials only without one */
[data-photo], .photo {
  display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sky-soft), var(--indigo-soft));
  color: var(--navy); font-weight: 750; font-size: var(--t-xl); letter-spacing: 0.04em; border-radius: var(--r-md);
  aspect-ratio: auto !important; min-height: 0 !important; height: auto; padding: 18px 0;
}
.media-slot {
  display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-md); color: var(--ink-2);
  background: linear-gradient(135deg, #eef1f6, #f6f7fa); font-size: var(--t-sm); padding: 24px 12px; text-align: center;
}

/* ---------- Tables ---------- */
.tbox { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); -webkit-overflow-scrolling: touch; }
.tbox:focus-visible { outline-offset: 0; }
.tbox-plain { border: 0; border-radius: 0; background: transparent; } /* a migrated article's plain table: scrolls, unframed */
.tbl { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--t-15); }
.tbl th { background: var(--navy); color: #fff; text-align: left; padding: 12px 16px; font-weight: 650; font-size: var(--t-sm); }
.tbl td { padding: 12px 16px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.tbl tr:nth-child(even) td { background: #fafbfc; }
.tbl td:first-child { font-weight: 600; }
.tbl-note { font-size: var(--t-sm); color: var(--ink-2); margin: 8px 0 0; }
@media (max-width: 759px) { .tbox::after { content: ""; } .tbl { min-width: 480px; } }

/* ---------- FAQ (visible text only; no FAQPage schema) ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details, details.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 18px; font-weight: 650; font-size: var(--t-base); min-height: 56px; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; transition: transform 0.15s ease; color: var(--ink-2); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .ans { padding: 0 18px 18px; font-size: var(--t-base); line-height: 1.7; color: var(--ink); }
.faq .ans p { margin: 0 0 10px; }
.dark .faq summary, .dark .faq .ans { color: var(--ink); }
.dark .faq { --t-link: var(--indigo); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); font-weight: 650; color: var(--ink); }
label { font-weight: 600; }
input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: 400 1rem / 1.4 var(--font); color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--field-line); border-radius: var(--r-md);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); outline: 3px solid rgb(47 111 222 / 25%); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--red-ink); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 650; padding: 0; margin-bottom: 8px; }
.choice {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px;
  border: 1.5px solid var(--field-line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-weight: 600;
}
.choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--navy); }
.choice small { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--ink-2); }
.choice:has(input:checked) { border-color: var(--navy); background: var(--indigo-soft); box-shadow: inset 0 0 0 1px var(--navy); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice:has(input:disabled) { cursor: not-allowed; background: #f1f3f6; color: var(--ink-2); border-style: dashed; }
.choices { display: grid; gap: 8px; }
@media (min-width: 640px) { .choices.two { grid-template-columns: 1fr 1fr; } .choices.three { grid-template-columns: repeat(3, 1fr); } }
.hint { color: var(--ink-2); font-size: var(--t-sm); margin: -2px 0 10px; font-weight: 400; }
.err { color: var(--red-ink); font-weight: 650; font-size: var(--t-15); margin: 4px 0 0; }
.err:empty { display: none; }
.note { color: var(--ink); --t-white: var(--ink); --t-link: var(--indigo); background: var(--canvas); border-left: 4px solid var(--indigo); border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: var(--t-15); }
.note-warn { background: var(--amber-soft); border-left-color: #b7791f; }
.yn { display: flex; gap: 8px; }
.yn button { flex: 1; min-height: 44px; border-radius: var(--r-md); border: 1.5px solid var(--line-strong); background: var(--surface); font: 650 var(--t-15) var(--font); color: var(--ink); cursor: pointer; }

/* ---------- Capture card (the one enquiry form) ---------- */
.capture {
  background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px;
  --t-white: var(--ink); --t-green: var(--green-ink); --t-soft: var(--ink-2); --t-link: var(--indigo);
}
.capture-title { margin: 0; font-size: var(--t-xl); font-weight: 720; }
.capture-sub { margin: -6px 0 0; color: var(--ink-2); font-size: var(--t-15); }
.capture .row { display: flex; flex-direction: column; gap: 6px; }
.capture label { font-size: var(--t-sm); font-weight: 650; }
.capture .fine { margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-2); }
.steps-strip { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.steps-strip li { font-size: var(--t-xs); line-height: 1.35; color: var(--ink-2); }
.steps-strip b { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); font-size: 12px; margin-bottom: 4px; }
.steps-strip strong { display: block; color: var(--ink); font-weight: 650; }

/* ---------- Trust strip, CTA band, byline, breadcrumbs ---------- */
.trust { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust ul { list-style: none; margin: 0 auto; padding: 14px 16px; max-width: var(--wrap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
@media (max-width: 899px) { .trust li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 24px; } }
.trust li { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); line-height: 1.35; color: var(--ink-2); }
.trust li strong { display: block; color: var(--ink); font-weight: 650; }
.trust .icon { flex: none; color: var(--green-ink); width: 22px; height: 22px; }
.cta-band { padding: var(--s-2xl) 0; }
.cta-band .inner { display: grid; gap: var(--s-8); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .cta-band .inner.with-card { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); } }
.cta-band { background: linear-gradient(180deg, var(--surface), var(--canvas)); }
.cta-band h2 { margin: 0 0 var(--s-3); font-size: var(--t-3xl); font-weight: 720; color: var(--ink); }
.cta-band p { margin: 0 0 var(--s-5); color: var(--ink-2); font-size: var(--t-md); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.byline { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); line-height: 1.45; color: var(--t-soft); }
.byline .av { width: 40px; height: 40px; font-size: 14px; }
.byline a { color: inherit; font-weight: 650; }
.byline strong { color: var(--t-white); font-weight: 650; }
.crumbs { background: var(--navy); }
.crumbs ol { list-style: none; margin: 0 auto; padding: 10px 16px 0; max-width: var(--wrap); display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: var(--t-sm); color: var(--on-dark-2); }
@media (min-width: 760px) { .crumbs ol { padding: 14px 24px 0; } }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: rgb(255 255 255 / 40%); }
.crumbs a { color: #fff; display: inline-flex; align-items: center; min-height: 32px; }
.crumbs [aria-current] { color: var(--on-dark-2); }

/* ---------- Icons ---------- */
.icon { width: 20px; height: 20px; flex: none; vertical-align: -0.2em; stroke-width: 2; }
.i-12 { width: 12px; height: 12px; } .i-14 { width: 14px; height: 14px; } .i-16 { width: 16px; height: 16px; }
.i-18 { width: 18px; height: 18px; } .i-20 { width: 20px; height: 20px; } .i-22 { width: 22px; height: 22px; }
.i-24 { width: 24px; height: 24px; } .i-26 { width: 26px; height: 26px; } .i-28 { width: 28px; height: 28px; }
.i-30 { width: 30px; height: 30px; } .i-32 { width: 32px; height: 32px; } .i-36 { width: 36px; height: 36px; }
.i-40 { width: 40px; height: 40px; } .i-46 { width: 46px; height: 46px; } .i-48 { width: 48px; height: 48px; }
.star { color: #f2b544; fill: currentColor; }
.stars { display: inline-flex; gap: 2px; color: #f2b544; }
.stars .icon { fill: currentColor; width: 18px; height: 18px; }
.stars .icon.star-off { fill: none; color: #9aa3b2; }  /* the unearned stars of a live Trustpilot review (ADR-0081) */

/* ---------- Site header ---------- */
.site-header { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.header-bar { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
/* The sales number (owner, 7 Nov 2026; site.json phone_numbers): a slim strip above the bar, so the number is visible at every width without
   crowding the bar at 390 px. Tap target 32 px high, the full width of the text (WCAG 2.2 2.5.8). */
.header-strip { border-bottom: 1px solid rgb(255 255 255 / 8%); }
.header-strip .wrap { display: flex; justify-content: flex-end; }
.header-phone { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: #fff; text-decoration: none; font-weight: 650; font-size: var(--t-sm); }
.header-phone:hover { text-decoration: underline; }
@media (max-width: 759px) { .header-strip .wrap { justify-content: center; } }
/* A sales number on a paid visit (site.js): hidden in place, so nothing moves (no layout shift). */
.phone-off { visibility: hidden; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; min-height: 44px; margin-right: auto; white-space: nowrap; }
.brand svg { width: 34px; height: 34px; }
.nav-desktop { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .desk-only { display: none; }
@media (min-width: 1100px) {
  .nav-desktop { display: block; margin-right: auto; }
  .brand { margin-right: 12px; }
  .header-actions .desk-only { display: inline-flex; }
  .menu-mobile { display: none; }
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; color: #fff; text-decoration: none; font-weight: 550; font-size: var(--t-15); border-radius: var(--r-sm); white-space: nowrap; }
.nav-link:hover { background: rgb(255 255 255 / 8%); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--green); }
.dark .nav-link[aria-current="page"]:focus-visible { box-shadow: 0 0 0 2px var(--navy), inset 0 -2px 0 var(--green); }
.nav-menu {
  position: absolute; top: 100%; left: 0; min-width: 300px; padding: 8px; background: var(--surface); color: var(--ink);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.nav-menu.wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nav-item:hover > .nav-menu, .nav-item:focus-within > .nav-menu { visibility: visible; opacity: 1; transform: none; }
/* Escape closes a menu shown on hover or focus without moving the pointer or focus (WCAG 2.2 SC 1.4.13; audit 9 Nov 2026):
   site.js adds this class and takes it off when the pointer and focus have left the item. */
.nav-item.menu-dismissed > .nav-menu { visibility: hidden; opacity: 0; transform: translateY(4px); }
.nav-menu a { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--t-15); }
.nav-menu a small { font-weight: 400; color: var(--ink-2); font-size: var(--t-xs); }
.nav-menu a:hover { background: var(--canvas); }
.header-actions .nav-menu { left: auto; right: 0; }
.menu-mobile { position: static; }
.menu-mobile > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 1.5px solid rgb(255 255 255 / 40%); border-radius: var(--r-full); color: #fff; font-weight: 600; font-size: var(--t-15); cursor: pointer;
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile[open] > summary { background: #fff; color: var(--navy); }
.menu-mobile .menu-open, .menu-mobile[open] .menu-closed { display: none; }
.menu-mobile[open] .menu-open { display: inline; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); color: var(--ink); max-height: calc(100vh - var(--header-h) - var(--strip-h));
  overflow-y: auto; box-shadow: var(--shadow-lg); padding: 8px 16px 24px; border-top: 1px solid var(--line);
}
.menu-panel h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); margin: 16px 0 4px; font-weight: 700; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a { display: flex; align-items: center; min-height: 48px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.menu-panel .menu-cta { display: grid; gap: 8px; margin-top: 16px; }
.menu-panel .menu-cta a { border: 0; justify-content: center; }
/* The panel is white inside the dark header: its secondary button ("Chat with us") keeps the light-surface colours, else
   ".dark .btn-secondary" drew it white on white (button check of 10 Nov 2026). */
.menu-panel .btn-secondary { color: var(--ink); border-color: var(--line-strong); }
.menu-panel .btn-secondary:hover { border-color: var(--ink); background: transparent; }
.btn-header { min-height: 44px; padding: 0 16px; font-size: var(--t-15); }
.btn-outline-dark { background: transparent; color: #fff; border-color: rgb(255 255 255 / 45%); }
.btn-outline-dark:hover { border-color: #fff; background: rgb(255 255 255 / 8%); }
@media (max-width: 419px) { .brand { font-size: 1.2rem; gap: 8px; } .brand svg { width: 28px; height: 28px; } .btn-header { padding: 0 14px; } .menu-mobile > summary { padding: 0 10px; } .menu-mobile > summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .header-bar { gap: 8px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-dark-2); padding: var(--s-xl) 0 calc(var(--s-8) + 72px); font-size: var(--t-15); }
@media (min-width: 760px) { .site-footer { padding-bottom: var(--s-8); } }
.footer-grid { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } }
.site-footer h2 { color: #fff; font-size: var(--t-15); font-weight: 650; margin: 0 0 8px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-dark-2); text-decoration: none; }
.site-footer li a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.6; margin: 12px 0; }
.site-footer .legal { border-top: 1px solid rgb(255 255 255 / 12%); margin-top: var(--s-8); padding-top: var(--s-5); font-size: var(--t-sm); line-height: 1.6; }
.site-footer .legal a { color: #fff; }

/* ---------- Mobile action bar and preview banner ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / 96%);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgb(26 37 62 / 10%);
}
.action-bar .btn { min-height: 48px; padding: 0 10px; }
@media (min-width: 760px) { .action-bar { display: none; } }
body.has-bar { padding-bottom: 0; }
.preview-banner {
  background: #fbe3b5; color: #3d2803; font-size: var(--t-xs); font-weight: 600; line-height: 1.3; text-align: center;
  padding: 6px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preview-banner a { color: #3d2803; font-weight: 700; }
.preview-banner .long { display: none; }
@media (min-width: 900px) { .preview-banner .long { display: inline; } }

/* ---------- Calculator ---------- */
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 16px; color: var(--ink); }
.calc-result { border-radius: var(--r-md); background: var(--canvas); border: 1px solid var(--line); padding: 16px; }
.calc-result .amount { font-size: var(--t-2xl); font-weight: 750; font-variant-numeric: tabular-nums; }

/* ---------- Journey screens: booking and lead flow ---------- */
.journey { max-width: 880px; margin: 0 auto; padding: var(--s-6) 16px var(--s-xl); }
.journey h1 { font-size: var(--t-3xl); margin: 0 0 6px; font-weight: 740; }
.journey h2 { font-size: var(--t-xl); margin: 0 0 8px; font-weight: 700; }
.journey h2:focus { outline: none; }
.journey h3 { font-size: var(--t-md); margin: 0 0 6px; }
.journey .intro { color: var(--ink-2); margin: 0 0 16px; }
.journey .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-sm); }
.progress { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.progress.five { grid-template-columns: repeat(5, 1fr); }
.progress li { border-top: 4px solid var(--line); padding-top: 6px; font-size: var(--t-xs); font-weight: 650; color: var(--ink-2); }
.progress li.done { border-color: var(--sky); }
.progress li[aria-current="step"] { border-color: var(--green); color: var(--ink); }
.asap {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; min-height: 64px; padding: 14px 16px;
  border: 1.5px solid var(--green); border-radius: var(--r-md); background: var(--green-soft); color: var(--ink); font: inherit; cursor: pointer;
}
.asap strong { display: block; font-size: var(--t-md); }
.asap[aria-pressed="true"] { background: var(--green); border-color: var(--navy); }
.asap .dot { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 3px solid var(--navy); background: #fff; margin-top: 2px; }
.asap[aria-pressed="true"] .dot { background: var(--navy); box-shadow: inset 0 0 0 3px #fff; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 650; margin: 16px 0 10px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.day { flex-direction: column; justify-content: center; gap: 0; text-align: center; padding: 6px 2px; min-height: 64px; line-height: 1.15; }
.day input, .slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.day .dn { font-size: var(--t-xs); color: var(--ink-2); } .day .dd { font-size: 1.25rem; } .day .dm { font-size: 12px; color: var(--ink-2); }
.day:has(input:checked), .slot:has(input:checked) { background: var(--navy); color: #fff; border-color: var(--navy); }
.day:has(input:checked) .dn, .day:has(input:checked) .dm { color: #fff; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 12px; }
.slot { justify-content: center; padding: 6px; text-align: center; font-variant-numeric: tabular-nums; flex-direction: column; gap: 0; }
.slot .tk { display: block; font-size: 12px; font-weight: 500; }
.slot:has(input:disabled) .tm { text-decoration: line-through; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
dl.sum { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
dl.sum dt { font-weight: 650; } dl.sum dd { margin: 0; }
@media (max-width: 480px) { dl.sum { grid-template-columns: 1fr; } dl.sum dd { margin-bottom: 6px; } }
.rem { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rem li { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); }
.rem li.skip-r { border-style: dashed; background: var(--canvas); }
.rem .when { font-weight: 650; }
.rem .chan { display: inline-block; margin: 4px 6px 0 0; padding: 2px 10px; border-radius: var(--r-full); background: var(--sky-soft); color: var(--navy); font-size: var(--t-xs); font-weight: 650; }
.rem .links a { display: inline-flex; align-items: center; min-height: 44px; margin-right: 14px; }
.msg { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--canvas); font-size: var(--t-15); white-space: pre-wrap; }
.msgs { display: grid; gap: 12px; }
@media (min-width: 760px) { .msgs { grid-template-columns: 1fr 1fr; } }
.ok-banner { display: flex; gap: 12px; align-items: center; background: var(--green-soft); border: 1.5px solid var(--green); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 16px; }
.ok-banner .tick { width: 40px; height: 40px; background: var(--green); color: var(--navy); }

/* Lead-flow prototype: client screens look like the site; staff screens sit behind a "Staff view" switch. */
.flow-switch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.flow-tabs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.flow-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-full); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: var(--t-sm); font-weight: 600; background: var(--surface); }
.flow-tabs a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.screen { display: flex; flex-direction: column; gap: 14px; }
.bubble { max-width: 340px; border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: var(--t-15); line-height: 1.45; background: var(--surface); border: 1px solid var(--line); }
.bubble.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--navy); color: #fff; border-color: var(--navy); }
.chat { display: flex; flex-direction: column; gap: 10px; background: var(--canvas); border-radius: var(--r-lg); padding: 16px; border: 1px solid var(--line); }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-15); padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv span:first-child { color: var(--ink-2); }
.kv span:last-child { text-align: right; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.kpi .v { font-size: var(--t-2xl); font-weight: 720; }
.ok { color: var(--green-ink); font-weight: 650; } .warn { color: var(--amber-ink); font-weight: 650; } .bad { color: var(--red-ink); font-weight: 650; }
.staff-table { width: 100%; font-size: var(--t-sm); min-width: 860px; }
.staff-table th { text-align: left; color: var(--ink-2); font-size: var(--t-xs); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.staff-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bar-row { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); margin-bottom: 8px; }
.bar-row .lbl2 { width: 190px; flex: none; }
.bar-row .track { flex: 1; height: 20px; background: var(--canvas); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.bar-row .fill { height: 100%; background: var(--sky); }
.meter { height: 8px; background: var(--line); border-radius: var(--r-full); overflow: hidden; }
.meter > div { height: 100%; background: var(--green); }
.w-0p { width: 0%; } .w-10p { width: 10%; } .w-20p { width: 20%; } .w-30p { width: 30%; } .w-40p { width: 40%; } .w-50p { width: 50%; }
.w-60p { width: 60%; } .w-70p { width: 70%; } .w-80p { width: 80%; } .w-90p { width: 90%; } .w-100p { width: 100%; }

/* ---------- Utilities (seeded from the templates' inline styles; values snapped to the tokens) ---------- */
.flex { display: flex; } .iflex { display: inline-flex; } .grid { display: grid; } .block { display: block; }
.iblock { display: inline-block; } .inline { display: inline; } .hidden { display: none; }
.col { flex-direction: column; } .row { flex-direction: row; } .wrap-yes { flex-wrap: wrap; } .wrap-no { flex-wrap: nowrap; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-around { justify-content: space-around; }
.self-start { align-self: flex-start; } .self-center { align-self: center; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; }
.f-none { flex: none; } .f-1 { flex: 1 1 0%; min-width: 0; }
.fb-200 { flex: 1 1 200px; } .fb-260 { flex: 1 1 260px; } .fb-300 { flex: 1 1 300px; } .fb-320 { flex: 1 1 320px; }
.fb-360 { flex: 1 1 360px; } .fb-440 { flex: 1 1 440px; } .fb-480 { flex: 1 1 480px; } .fb-560 { flex: 1 1 560px; }
.fb-640 { flex: 1 1 640px; } .fb-560-grow { flex: 999 1 560px; } .fb-640-grow { flex: 999 1 640px; min-width: 0; }
.minw-0 { min-width: 0; }
.auto-200 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.auto-250 { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.auto-280 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.auto-320 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* People cards ({{team:…}}; the /team/ card): columns of at least 150px, two on a phone (build PEOPLE_GRID_SIZES). */
.people-grid { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3, .cols-4, .cols-5, .cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.cols-side { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cols-side { grid-template-columns: 280px minmax(0, 1fr); } }
.span-all { grid-column: 1 / -1; }
.gap-0 { gap: 0; } .gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: var(--s-8); } .gap-40 { gap: var(--s-10); }
.gap-48 { gap: var(--s-12); } .gap-xl { gap: var(--s-xl); } .gap-2xl { gap: var(--s-2xl); }
.gapy-12 { row-gap: 12px; } .gapy-20 { row-gap: 20px; } .gapy-24 { row-gap: 24px; } .gapx-20 { column-gap: 20px; }
.gapx-24 { column-gap: 24px; } .gapx-40 { column-gap: 40px; }
.m-0 { margin: 0; } .mx-auto { margin-left: auto; margin-right: auto; } .mx-0 { margin-left: 0; margin-right: 0; }
.mt-auto { margin-top: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 2px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.mt-n48 { margin-top: -48px; } .my-32 { margin-top: 32px; margin-bottom: 32px; }
.mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.p-0 { padding: 0; } .p-4 { padding: 4px; } .p-6 { padding: 6px; } .p-8 { padding: 8px; } .p-12 { padding: 12px; }
.p-16 { padding: 16px; } .p-20 { padding: 20px; } .p-24 { padding: 24px; } .p-32 { padding: var(--s-6); } .p-40 { padding: var(--s-8); }
@media (min-width: 760px) { .p-32 { padding: var(--s-8); } .p-40 { padding: var(--s-10); } }
.px-0 { padding-left: 0; padding-right: 0; } .px-6 { padding-left: 6px; padding-right: 6px; } .px-8 { padding-left: 8px; padding-right: 8px; }
.px-12 { padding-left: 12px; padding-right: 12px; } .px-16 { padding-left: 16px; padding-right: 16px; }
.px-20 { padding-left: 20px; padding-right: 20px; } .px-24 { padding-left: 20px; padding-right: 20px; }
.px-32 { padding-left: 24px; padding-right: 24px; } .px-2xl { padding-left: var(--s-6); padding-right: var(--s-6); }
@media (min-width: 760px) { .px-24 { padding-left: 24px; padding-right: 24px; } .px-32 { padding-left: 32px; padding-right: 32px; } .px-2xl { padding-left: var(--s-2xl); padding-right: var(--s-2xl); } }
.py-0 { padding-top: 0; padding-bottom: 0; } .py-2 { padding-top: 2px; padding-bottom: 2px; } .py-4 { padding-top: 4px; padding-bottom: 4px; }
.py-6 { padding-top: 6px; padding-bottom: 6px; } .py-8 { padding-top: 8px; padding-bottom: 8px; } .py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; } .py-20 { padding-top: 20px; padding-bottom: 20px; } .py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-32 { padding-top: var(--s-8); padding-bottom: var(--s-8); } .py-48 { padding-top: var(--s-12); padding-bottom: var(--s-12); }
.py-xl { padding-top: var(--s-xl); padding-bottom: var(--s-xl); } .py-2xl { padding-top: var(--s-2xl); padding-bottom: var(--s-2xl); }
.pt-0 { padding-top: 0; } .pt-4 { padding-top: 4px; } .pt-6 { padding-top: 6px; } .pt-8 { padding-top: 8px; } .pt-12 { padding-top: 12px; }
.pt-16 { padding-top: 16px; } .pt-20 { padding-top: 20px; } .pt-24 { padding-top: 24px; } .pt-48 { padding-top: var(--s-12); }
.pt-xl { padding-top: var(--s-xl); } .pt-2xl { padding-top: var(--s-2xl); }
.pb-0 { padding-bottom: 0; } .pb-6 { padding-bottom: 6px; } .pb-8 { padding-bottom: 8px; } .pb-16 { padding-bottom: 16px; }
.pb-20 { padding-bottom: 20px; } .pb-24 { padding-bottom: 24px; } .pb-xl { padding-bottom: var(--s-xl); } .pb-2xl { padding-bottom: var(--s-2xl); }
.pl-0 { padding-left: 0; } .pl-20 { padding-left: 20px; } .pr-0 { padding-right: 0; }
.t-xs { font-size: var(--t-xs); } .t-sm { font-size: var(--t-sm); } .t-15 { font-size: var(--t-15); } .t-base { font-size: var(--t-base); }
.t-md { font-size: var(--t-md); } .t-lg { font-size: var(--t-lg); } .t-xl { font-size: var(--t-xl); } .t-2xl { font-size: var(--t-2xl); }
.t-3xl { font-size: var(--t-3xl); } .t-4xl { font-size: var(--t-4xl); }
.fw-6 { font-weight: 550; } .fw-7 { font-weight: 600; } .fw-8 { font-weight: 650; } .fw-9 { font-weight: 700; }
.lh-1 { line-height: 1; } .lh-tight { line-height: 1.1; } .lh-snug { line-height: 1.3; } .lh-normal { line-height: 1.55; } .lh-relaxed { line-height: 1.7; }
.ls-wide { letter-spacing: 0.08em; } .ls-tight { letter-spacing: -0.02em; }
.upper { text-transform: uppercase; } .center { text-align: center; } .left { text-align: left; } .right { text-align: right; }
.nowrap { white-space: nowrap; } .ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .italic { font-style: italic; }
.x-font-style { font-style: italic; } .x-justify-self { justify-self: start; }
.no-ul { text-decoration: none; } .ul { text-decoration: underline; } .list-none { list-style: none; } .pointer { cursor: pointer; }
.clip { overflow: hidden; } .scroll-x { overflow-x: auto; } .rel { position: relative; } .abs { position: absolute; }
.center-abs { transform: translate(-50%, -50%); } .left-50 { left: 50%; } .top-50 { top: 50%; } .left-8 { left: 8px; } .left-16 { left: 16px; }
.bottom-8 { bottom: 8px; } .bottom-12 { bottom: 12px; } .right-12 { right: 12px; }
.ar-16-9 { aspect-ratio: 16 / 9; } .ar-1 { aspect-ratio: 1; } .ar-4-5 { aspect-ratio: 4 / 5; }
.tap { min-height: 44px; }
.c-white { color: var(--t-white); } .c-ink { color: var(--ink); } .c-green { color: var(--t-green); } .c-green-ink { color: var(--green-ink); }
.c-indigo { color: var(--t-indigo); } .c-sky { color: var(--t-sky); } .c-sky-ink { color: var(--sky-ink); } .c-soft { color: var(--t-soft); }
.c-muted { color: var(--ink-2); } .c-amber { color: var(--amber-ink); } .c-red { color: var(--red-ink); }
.dark .c-ink { color: var(--ink); }
.bg-navy { background: var(--navy); } .bg-navy-2 { background: var(--navy-2); } .bg-white { background: var(--surface); }
.bg-canvas { background: var(--canvas); } .bg-none { background: transparent; } .bg-green { background: var(--green); }
.bg-green-soft { background: var(--green-soft); } .bg-sky-soft { background: var(--sky-soft); } .bg-indigo-soft { background: var(--indigo-soft); }
.bg-amber-soft { background: var(--amber-soft); } .bg-red-soft { background: var(--red-soft); } .bg-pink-soft { background: var(--pink-soft); }
.bg-tp { background: var(--tp); color: #fff; }
.bd { border: 1px solid var(--line); } .bd-0 { border: 0; } .bd-dark { border: 1px solid rgb(255 255 255 / 22%); } .bd-dash { border: 2px dashed var(--line-strong); }
.bdt { border-top: 1px solid var(--line); } .bdt-0 { border-top: 0; } .bdb { border-bottom: 1px solid var(--line); } .bdl { border-left: 1px solid var(--line); }
.dark .bdt, .dark .bdb { border-color: rgb(255 255 255 / 16%); }
.light .bd-dark { border-color: var(--line); }
.light .bdt, .light .bdb { border-color: var(--line); }
.bdl-accent { border-left: 4px solid var(--bc, var(--green)); } .bdt-accent { border-top: 4px solid var(--bc, var(--green)); }
.bdb-accent { border-bottom: 3px solid var(--bc, var(--green)); }
.bc-green { --bc: var(--green); } .bc-sky { --bc: var(--sky); } .bc-indigo { --bc: var(--indigo); } .bc-navy { --bc: var(--navy); } .bc-white { --bc: #fff; }
.r-sm { border-radius: var(--r-sm); } .r-md { border-radius: var(--r-md); } .r-lg { border-radius: var(--r-lg); } .r-full { border-radius: var(--r-full); }
.shadow-lg { box-shadow: var(--shadow-lg); } .shadow-md { box-shadow: var(--shadow-md); }
.mw-300 { max-width: 300px; } .mw-340 { max-width: 340px; } .mw-440 { max-width: 440px; } .mw-480 { max-width: 480px; }
.mw-560 { max-width: 560px; } .mw-600 { max-width: 600px; } .mw-640 { max-width: 640px; } .mw-680 { max-width: 680px; }
.mw-720 { max-width: 720px; } .mw-760 { max-width: 760px; } .mw-820 { max-width: 820px; } .mw-860 { max-width: 860px; }
.mw-900 { max-width: 900px; } .mw-960 { max-width: 960px; } .mw-1000 { max-width: 1000px; }
.w-2 { width: 2px; } .w-10 { width: 10px; } .w-12 { width: 12px; } .w-14 { width: 14px; } .w-18 { width: 18px; } .w-20 { width: 20px; }
.w-24 { width: 24px; } .w-28 { width: 28px; } .w-32 { width: 32px; } .w-36 { width: 36px; } .w-40 { width: 40px; } .w-44 { width: 44px; }
.w-48 { width: 48px; } .w-52 { width: 52px; } .w-56 { width: 56px; } .w-64 { width: 64px; } .w-72 { width: 72px; } .w-80 { width: 80px; }
.w-88 { width: 88px; } .w-104 { width: 104px; } .w-110 { width: 110px; } .w-150 { width: 150px; } .w-200 { width: 200px; }
.w-34p { width: 34%; } .w-38p { width: 38%; }
.h-3 { height: 3px; } .h-4 { height: 4px; } .h-8 { height: 8px; } .h-10 { height: 10px; } .h-12 { height: 12px; } .h-18 { height: 18px; }
.h-20 { height: 20px; } .h-24 { height: 24px; } .h-32 { height: 32px; } .h-36 { height: 36px; } .h-40 { height: 40px; } .h-44 { height: 44px; }
.h-48 { height: 48px; } .h-52 { height: 52px; } .h-56 { height: 56px; } .h-64 { height: 64px; } .h-72 { height: 72px; } .h-80 { height: 80px; }
.h-88 { height: 88px; } .h-96 { height: 96px; } .h-118 { height: 118px; } .h-140 { height: 140px; } .h-200 { height: 200px; } .h-100p { height: 100%; }
.minh-120 { min-height: 120px; } .minh-130 { min-height: 130px; } .minw-48 { min-width: 48px; } .minw-120 { min-width: 120px; }
@media (max-width: 759px) { .hide-sm { display: none !important; } .w-200 { width: 100%; } }
@media (min-width: 760px) { .show-sm { display: none !important; } }

/* ---------- Case studies (owner, 18 Oct 2026) ---------- */
.case-grid-cards { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.case-card { display: flex; flex-direction: column; gap: 10px; }
/* A results row (home "Claims we won", result cards) with only one card (owner, 11 Nov 2026): from 760px the card stands
   alone, centred across the row, with a link to all case studies under it; with two or more cards the grid is unchanged,
   and below 760px (one column) nothing changes. Keyed on the number of cards, never on a particular case. */
.results-more { display: none; }
@media (min-width: 760px) {
  .results-row > :only-child { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 640px; }
  .results-row:has(> :only-child) + .results-more { display: flex; justify-content: center; margin: 0; }
}
.case-card .link { min-height: 0; margin-top: auto; color: var(--indigo); font-size: var(--t-sm); }
.case-title { font-weight: 680; font-size: var(--t-md); line-height: 1.35; color: var(--ink); }
.video-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: linear-gradient(135deg, var(--navy), var(--navy-3)); color: #fff; }
.video-slot { margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--navy), var(--navy-3)); display: flex; align-items: center; justify-content: center; color: #fff; }
.video-slot video { width: 100%; height: 100%; }
.video-play { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; text-align: center; padding: 16px; font-weight: 600; }
.video-play .icon { width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: var(--green); color: var(--navy); fill: var(--navy); }
.transcript { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.transcript summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 12px 16px; font-weight: 650; cursor: pointer; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript p { margin: 0; padding: 0 16px 16px; }
.quote { margin: 0; padding: 16px 20px; border-left: 4px solid var(--green); background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--t-md); }
.case-layout { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .case-layout { grid-template-columns: minmax(0, 1fr) 300px; } .case-aside { position: sticky; top: calc(var(--header-h) + var(--strip-h) + 16px); align-self: start; } }

/* ---------- Ad landing pages (stage 1, owner 7 Nov 2026): the live Elementor pages' order on the design system ---------- */
.landing-strip { justify-content: space-between !important; align-items: center; gap: 12px; color: rgb(255 255 255 / 80%); flex-wrap: wrap; }
.landing-header .header-actions { margin-left: auto; }
.landing-hero p, .landing-hero li { font-size: var(--t-md); line-height: 1.6; color: var(--t-soft); }
.landing-hero h2 { font-size: var(--t-2xl); margin: var(--s-4) 0 0; }
.landing-art .cta-actions { margin: var(--s-4) 0; }
.landing-art figure img, .landing-hero figure img { width: 100%; }
ul.ticks { list-style: none; padding-left: 0; }
ul.ticks li { position: relative; padding-left: 28px; }
ul.ticks li::before { content: "\2713"; position: absolute; left: 4px; top: 0; font-weight: 800; color: var(--t-green); }
@media (min-width: 1024px) { .landing-art + div .capture, .case-layout > div > .capture { position: sticky; top: calc(var(--header-h) + 16px); } }

/* ---------- Blog posts (ADR-0090): post images keep their ratio; cards crop to 16:9 ---------- */
.post-img { display: block; width: 100%; height: auto; }
.post-img.ar-16-9 { object-fit: cover; }
.article-figure { margin: 0 0 var(--s-6); }
.article-figure img, .art img { height: auto; border-radius: var(--r-md); }
.art ol { margin: 0 0 var(--s-4); padding-left: 22px; font-size: var(--t-md); line-height: 1.7; }
.posts-for ul { margin: 8px 0 0; padding-left: 22px; line-height: 1.7; }

/* ---------- Compliance furniture (audit 18 Oct 2026) ---------- */
.fee-basis { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--r-sm); padding: 10px 14px; margin: 12px 0; max-width: 760px; --t-link: var(--indigo); }
.fee-basis strong { color: var(--ink); }
.sra-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 64px; max-width: 420px; padding: 10px 14px; margin-bottom: 16px; border: 1px dashed rgb(255 255 255 / 40%); border-radius: var(--r-md); font-size: var(--t-xs); }
.cookie-banner { position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 70; max-width: 560px; margin: 0 auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 16px; font-size: var(--t-sm); }
@media (min-width: 760px) { .cookie-banner { bottom: 16px; left: auto; right: 16px; } }
.cookie-banner p { margin: 0 0 10px; }
.cookie-banner .cta-actions .btn { flex: 1 1 0; min-width: 120px; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); font-weight: 400; line-height: 1.45; }
.consent-check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
.trust-note { max-width: var(--wrap); margin: 0 auto; padding: 0 16px 10px; font-size: var(--t-xs); color: var(--ink-2); }
@media (min-width: 900px) { .trust-note { padding: 0 24px 12px; } }
.site-footer .social-list { display: flex; flex-wrap: wrap; gap: 0 16px; }

/* ---------- Website chat bubble (ADR-0085): a link to the public intake's /chat/, beside the WhatsApp button ---------- */
.chat-bubble {
  position: fixed; left: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 61; display: inline-flex; align-items: center;
  gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r-full); border: 2px solid #fff; background: var(--navy); color: #fff;
  font: 650 var(--t-15) / 1.1 var(--font); text-decoration: none; box-shadow: var(--shadow-lg); cursor: pointer;
}
.chat-bubble:hover { background: var(--navy-2); color: #fff; text-decoration: none; }
.chat-bubble:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.chat-bubble svg { width: 20px; height: 20px; flex: none; }
@media (min-width: 760px) { .chat-bubble { left: 24px; bottom: 24px; } }
/* Phones: the action bar already carries "Chat with us", so the floating bubble would duplicate it and cover content. */
@media (max-width: 759.98px) { body:has(.action-bar) .chat-bubble { display: none; } }

/* ---------- Go-live (ADR-0088): consent banner, Pipedrive enquiry card, SRA badge ---------- */
/* Banner: three equal buttons; "Choose" opens one switch per category. On a phone it sits above the action bar and scrolls
   inside itself, so it never covers the page's heading for long and the page stays usable behind it (no overlay). */
.cookie-banner { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.cookie-banner .cb-title { margin: 0 0 6px; font-size: var(--t-md); font-weight: 720; }
.cookie-banner .cb-title:focus { outline: none; }
.cookie-banner .cb-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cb-choices { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.cb-choices fieldset { display: flex; flex-direction: column; gap: 8px; }
.cb-switch { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.45; cursor: pointer; }
.cb-switch input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
.cb-switch input:disabled { cursor: not-allowed; }
.cb-switch strong { display: block; }
@media (max-width: 759px) { .cookie-banner { padding: 12px; } .cookie-banner .cb-text { font-size: var(--t-xs); } }
/* Buttons with a second, smaller line ("Loads Pipedrive's form"). */
.btn.two-line { white-space: normal; padding-block: 8px; text-align: center; }
.btn.two-line > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.btn small { display: block; font-size: var(--t-xs); font-weight: 450; line-height: 1.2; }
/* The Pipedrive card and its form (Pipedrive's loader also injects these rules inline; the CSP may block that, so they are here). */
.pd-capture { gap: 12px; }
.pd-form-slot { width: 100%; }
.pd-form-slot:focus { outline: none; }
.pipedriveWebForms { width: 100%; overflow: hidden; position: relative; }
.pipedriveWebForms iframe { border: none; overflow: hidden; width: 100%; max-width: 768px; min-height: 480px; position: relative; }
.link-button { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--t-link); text-decoration: underline;
  text-underline-offset: 0.18em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
/* Our own enquiry form on the card (ADR-0088 amendment of 7 Nov 2026; enquiry-form.js). */
.enquiry textarea { min-height: 112px; resize: vertical; }
.enquiry select[aria-invalid="true"], .enquiry textarea[aria-invalid="true"] { border-color: var(--red-ink); }
.enquiry .hint { margin: 0; }
.enquiry label.consent-check { font-weight: 400; }
.enquiry [data-enquiry-failed]:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The spam trap: off-screen, never shown or announced (aria-hidden, tabindex -1); people never fill it. */
.enquiry .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* The new client form and its code screen (ADR-0103; new-client-form.js). Hidden parts use the hidden attribute only. */
.ncf [hidden], .ncf-codes [hidden], .ncf-codes[hidden], .ncf[hidden] { display: none; }
.ncf-notice { font-size: var(--t-sm); }
.ncf-codes h3:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.ncf-channel { border: 1.5px solid var(--line, #d9dee7); border-radius: var(--r-md); padding: 14px 16px; }
.ncf-channel input[name="code"] { max-width: 12ch; letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }
.ncf-channel input[aria-invalid="true"] { border-color: var(--red-ink); }
.ncf-to { overflow-wrap: anywhere; }
.ncf-turnstile:empty { display: none; }
/* The guide request form (ADR-0111; guide-form.js): a full-width row of its block, fields stacked; the picker's radio list. */
.guide-form { min-width: 0; }
.guide-form [hidden] { display: none; }
.guide-form .row { display: flex; flex-direction: column; gap: 6px; }
.guide-form p, .prose .guide-form p, .art .guide-form p, .lg .guide-form p { margin: 0; font-size: var(--t-15); line-height: 1.5; }
.guide-form .hint, .prose .guide-form .hint, .art .guide-form .hint, .lg .guide-form .hint,
.guide-form .t-sm, .prose .guide-form .t-sm, .art .guide-form .t-sm, .lg .guide-form .t-sm { margin: 0; font-size: var(--t-sm); }
.guide-form label.consent-check { font-weight: 400; }
.guide-form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.guide-form input[type="email"], .guide-form input[type="tel"], .guide-form input[type="text"] { max-width: 32rem; }
.guide-form .btn-block { max-width: 32rem; }
.guide-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.guide-choices legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.guide-choice { font-size: var(--t-15); min-height: 32px; align-items: center; }
.guide-choice input { margin-top: 0; }
/* Our floating "Chat with us" is a button; once Pipedrive's own launcher is up, ours steps aside. */
button.chat-bubble { appearance: none; }
html.pd-chat-ready .chat-bubble { display: none; }
/* Pipedrive's chat launcher at the bottom left, like our bubble (owner, 9 Nov 2026: on the right it got in the way). Pipedrive
   has no position setting (LeadBooster Browser API, updated 12 Nov 2025: open/close and events only; the playbook settings offer
   none): its loader (leadbooster-chat.pipedrive.com/assets/loader.js, read 9 Nov 2026) injects
   "html body #LeadboosterContainer { position: fixed; bottom: 0; right: 0 }" (bottom/right 28px from 576px), all !important, after
   this stylesheet, so these rules name the iframe too (one more type selector) to win. The open chat keeps Pipedrive's own box. */
html body iframe#LeadboosterContainer { right: auto !important; left: 0 !important; }
@media (min-width: 576px) { html body iframe#LeadboosterContainer:not(.openedChat) { left: 28px !important; } }
@media (min-width: 576px) { html body iframe#LeadboosterContainer.openedChat { left: 28px !important; right: auto !important; } }
/* Phones and tablets: above the action bar (its 48px buttons and 10px padding), never over it; and hidden while the cookie
   banner is open (the banner spans the screen there, and the launcher's frame would sit over its buttons). */
@media (max-width: 759.98px) {
  body:has(.action-bar:not(.is-hidden)) iframe#LeadboosterContainer:not(.openedChat) { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
  body:has(.cookie-banner:not([hidden])) iframe#LeadboosterContainer:not(.openedChat) { visibility: hidden !important; }
}
/* SRA digital badge (Yoshki iframe, the size Yoshki's own embed uses). */
.sra-badge-live { border: 0; padding: 0; min-height: 0; }
.sra-frame { display: block; width: 275px; max-width: 100%; height: 163px; border: 0; background: transparent; }
/* The second badge at the top of an ad landing page (NJS, 9 Nov 2026): on the navy band above the hero, not in the sticky header. */
.landing-sra { background: var(--navy); color: #fff; padding: 12px 0 0; }
.landing-sra .sra-badge { margin: 0; }
/* The card is white inside a dark hero: its secondary buttons keep the light-surface colours. */
.pd-capture .btn-secondary { color: var(--ink); border-color: var(--line-strong); }
.pd-capture .btn-secondary:hover { border-color: var(--ink); background: transparent; }

/* ---------- Paid landing pages at /start/<claim-type>/ (ADR-0101): one template, scripts/site_landing.py ---------- */
.start-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--t-sm); color: var(--on-dark-2); }
.start-trust li { display: inline-flex; align-items: center; gap: 8px; }
.start-actions .btn { min-height: 48px; flex: 1 1 220px; }
.start-steps { margin: 0 0 var(--s-4); padding-left: 22px; font-size: var(--t-md); line-height: 1.7; }
.start-quote blockquote { margin: 0; }
.start-quote figcaption { margin-top: 8px; font-weight: 650; }
.fee-link { font-size: var(--t-sm); white-space: nowrap; }
.cta-note { margin: 12px auto; }
.action-bar.is-hidden { display: none; }

/* ---------- WCAG 2.2 AA check of 9 Nov 2026 (docs/research/accessibility-audit-2026-11-09.md) ---------- */
/* 1.4.3: the fee-basis box is white inside an ad landing page's navy hero; ".landing-hero p" gave it the hero's light text (1.4:1). */
.landing-hero .fee-basis { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
/* 1.4.10 Reflow at 320 px: the header's logo, "Start my claim" and Menu were 5 px wider than the screen. */
@media (max-width: 359.98px) {
  .header-bar.wrap { padding-left: 12px; padding-right: 12px; }
  .header-bar, .header-actions { gap: 6px; }
  .btn-header { padding: 0 10px; font-size: var(--t-sm); }
}
/* 1.4.10 / 1.4.12: Chrome still lays out a closed <details>' content; the closed menu's 44 px-wide panel let its words spill past the
   right edge once text spacing was increased, so the page scrolled sideways. A closed menu's panel is not drawn at all. */
.menu-mobile:not([open]) > .menu-panel { display: none; }
/* Button check of 10 Nov 2026: on phones the fixed action bar (72 px) sat over the end of the open menu, so its last item ("Chat
   with us") could not be tapped. The panel leaves that much room at its end, as the footer does. */
@media (max-width: 759.98px) { .menu-panel { padding-bottom: calc(24px + 72px + env(safe-area-inset-bottom)); } }
/* 1.4.10: a phone button on a narrow screen (an ad landing page's header, any phone button in the action bar) let its label and
   number run out of the button. The label now wraps above the number, which stays on one line. */
@media (max-width: 419.98px) {
  .landing-header .btn-header.phone { white-space: normal; line-height: 1.15; text-align: left; padding-block: 4px; }
  .landing-header .header-actions { min-width: 0; }
}
@media (max-width: 759.98px) { .action-bar .btn.phone { white-space: normal; line-height: 1.15; text-align: left; padding-block: 4px; } }
@media (max-width: 359.98px) { .action-bar .btn.phone svg { display: none; } }
/* 2.4.7: keyboard focus inside the SRA badge (a Yoshki iframe) showed no ring on our side; the frame takes one while it has focus. */
/* An iframe never matches :focus here while its own page has focus, so site.js marks it with .frame-focus. */
.sra-frame.frame-focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.dark .sra-frame.frame-focus, .landing-sra .sra-frame.frame-focus { outline-color: var(--focus-on-dark); box-shadow: 0 0 0 2px var(--navy); }
/* 2.4.11: on wider screens the fixed "Chat with us" bubble (bottom left, 48 px + 24 px) covered part of a focused element at the
   bottom of the screen; the scroll padding keeps a focused element clear of it, as the phones' rule above does for the action bar. */
@media (min-width: 760px) { html:has(.chat-bubble) { scroll-padding-bottom: 88px; } }
/* 2.4.11 at the end of a page: the footer leaves room under its last links for the bubble on wider screens, and while the cookie
   banner is open it grows by the height the banner covers (--cookie-h, set by consent.js), so those links can be scrolled clear. */
@media (min-width: 760px) { body:has(.chat-bubble) .site-footer { padding-bottom: calc(var(--s-8) + 72px); } }
html:has(.cookie-banner:not([hidden])) .site-footer { padding-bottom: calc(var(--s-8) + 72px + var(--cookie-h, 0px)); }