/*
 * 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: Nunito (OFL), self-hosted, one variable
 * latin woff2 (weights 200-1000), font-display: swap, preloaded by every page; no Google Fonts request (design reskin of
 * 12 Nov 2026: NJS's designer's look, owner's decisions 1-10; the "Design reskin" layer at the end of this file).
 */

/* ---------- Font ---------- */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/assets/fonts/nunito-latin-wght-normal.1a48b70f97.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: "Nunito", 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);
  -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);
  }
}
/* Home hero team photo (design reskin 3e; NJS's photo of 12 Nov 2026): rounded, lime bottom edge as in the design. */
/* Desktop: the photo sits first in the hero's lower block, so it is in the first screen beside the form (overnight fixes,
   12 Nov 2026); on phones it stays after the form. */
@media (min-width: 1024px) { .hero-rest > .hero-photo { order: -1; } }
.hero-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-lg, 12px); border-bottom: 4px solid var(--green); }
[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; }
/* A guide page's hero card is the guide form while its guide is offered (guide_hero; owner, 12 Nov 2026): every "Get the free
   PDF" link (guide_jump) scrolls up to it, smoothly unless the visitor prefers reduced motion (the rule near the top turns it off);
   html's scroll-padding-top keeps the card's heading clear of the sticky header. */
html:has([data-guide-hero]) { scroll-behavior: smooth; }
.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; } }
/* Owner, 12 Nov 2026: no floating chat launcher. The chat loads only from a "Chat with us" button; once it is closed,
   Pipedrive's own launcher is hidden too, so nothing floats over the page (the buttons reopen it). */
html body iframe#LeadboosterContainer:not(.openedChat) { visibility: hidden !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)); }

/* ==========================================================================================================================
   Design reskin (owner, 12 Nov 2026): NJS's designer's look on our approved content (decisions 1-10, "NJS website - new
   design - agreed changes", 12 Nov 2026). Style only: no wording lives here.
   Contrast (WCAG 2.2 AA, 1.4.3 / 1.4.11), each pair measured: navy on lime 7.1:1, navy on sky 7.3:1, white on purple 8.5:1,
   lime on navy 7.1:1, sky on navy 7.3:1, purple on white 8.5:1, #d5dbe6 on navy 11.0:1. Lime or sky text on white (2.1:1)
   and grey #47526a on sky (3.8:1) fail, so neither is used: text on the sky band is navy; green text on light stays --green-ink.
   ========================================================================================================================== */
:root { --r-btn: 10px; --line-navy: 1.5px solid var(--navy); }
body { background: var(--surface); }
strong, b { font-weight: 800; }
/* Nunito draws lighter than Inter at the same number: the weight utilities follow the design's 600-900. */
.fw-6 { font-weight: 600; } .fw-7 { font-weight: 700; } .fw-8 { font-weight: 800; } .fw-9 { font-weight: 900; }
.h1, .h2, .h3, h1, h2, h3, .capture-title, .cta-band h2 { font-weight: 900; letter-spacing: -0.01em; }
.h1 { line-height: 1.06; }
.art h2, .prose h2, .lg h2, .art h3, .prose h3 { font-weight: 900; }
.hl { color: var(--green); }
.light .hl { color: var(--green-ink); }
/* A light card inside a dark section draws its text in ink: without this, a card's plain text inherited white from .dark and
   vanished on the white card (About's "at a glance" card and the Reviews hero card, found in the reskin check, 12 Nov 2026). */
.dark .light { color: var(--ink); }
/* About's "at a glance" rows: the label keeps its words whole; the value wraps instead. */
.light > .justify-between > span:first-child { flex: none; overflow-wrap: normal; }
/* The "figures are compensation before any deductions" note in a dark hero: #47526a on navy was 1.6:1; now 11.0:1. */
.dark .figures-note, .dark .c-muted { color: var(--on-dark-2); }
.dark .light .c-muted { color: var(--ink-2); }
.eyebrow, .eb, .lbl { font-weight: 800; letter-spacing: 0.12em; }
.bg-sky { background: var(--sky); } .bg-indigo { background: var(--indigo); } .c-navy { color: var(--navy); }
.bg-sky { --t-soft: var(--navy); --t-link: var(--navy); --t-indigo: var(--navy); color: var(--navy); }

/* Buttons: rounded rectangles, heavier type (design 6f). */
.btn { border-radius: var(--r-btn); font-weight: 800; }
.btn-secondary, .btn.bg-white, .btn.bg-none { border-color: var(--navy); }
.dark .btn-secondary, .dark .btn.bg-none, .dark .btn.bg-white { border-color: #fff; }
/* White surfaces inside dark sections (the enquiry card, the open menu, light cards) keep the light-surface button. */
.dark .light .btn-secondary, .dark .capture .btn-secondary, .dark .pd-capture .btn-secondary, .menu-panel .btn-secondary, .dark .light .btn.bg-none { color: var(--ink); border-color: var(--navy); }

/* Header (2a-2f): navy band, larger logo; on wide screens a white panel with the pills above the menu. Phones and tablets keep
   the compact bar (logo, call, menu; tablets also "Start my claim", as they have no action bar). The tall wide-screen header
   scrolls away rather than sticking. */
.brand { font-weight: 600; letter-spacing: 0; }
.header-panel { display: none; }
.header-actions .tab-only { display: none; }
.btn-call > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.btn-call { padding: 0 12px; min-width: 44px; background: var(--green); color: var(--navy); border-color: var(--green); }
@media (min-width: 760px) {
  .header-actions .tab-only { display: inline-flex; }
  .btn-call > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .btn-call { background: transparent; color: #fff; border-color: rgb(255 255 255 / 60%); }
}
@media (min-width: 1100px) {
  .site-header { position: relative; border-bottom: 0; }
  html { scroll-padding-top: 16px; }
  .header-bar { padding-top: 22px; padding-bottom: 22px; gap: 32px; }
  .brand { font-size: 2rem; gap: 14px; margin-right: 0; }
  .brand svg { width: 56px; height: 56px; }
  .header-actions { display: none; }
  .header-panel { display: block; flex: 1 1 640px; max-width: 1000px; margin-left: auto; background: var(--surface); color: var(--navy); border-radius: 16px; }
  .header-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: var(--line-navy); }
  /* Overnight fixes 12 Nov 2026 (audit: empty slot left by the dropped search box and "Free consultation"): the pills share the
     row evenly instead of one being pushed to the far right. */
  .header-pills > * { flex: 1 1 auto; }
  .header-pills > .nav-item > .hpill { width: 100%; }
  .header-pills .hpill { justify-content: center; }
  .hpill { min-height: 44px; padding: 0 20px; font-size: var(--t-15); color: var(--navy); }
  .hpill-green { background: var(--green); border-color: var(--green); }
  .hpill-green:hover { background: var(--green-hover); border-color: var(--green-hover); }
  .hpill-sky { background: var(--sky); border-color: var(--sky); }
  .hpill-sky:hover { border-color: var(--navy); }
  .hpill-chat { background: var(--surface); border-color: var(--navy); }
  .hpill-chat:hover { background: var(--canvas); }
  .hpill > span { display: inline-flex; gap: 6px; }
  .header-panel .nav-desktop { display: block; margin: 0; padding: 0 16px; }
  .header-panel .nav-list { justify-content: space-between; }
  .header-panel .nav-link { color: var(--navy); min-height: 52px; font-size: 1.0625rem; font-weight: 700; padding: 0 12px; }
  .header-panel .nav-link:hover { background: var(--canvas); }
  .header-panel .nav-menu { z-index: 60; }
  .header-pills .nav-menu { left: 0; right: auto; }
  .header-panel :focus-visible { outline-color: var(--focus); box-shadow: none; }
  .page-aside, .case-layout .case-aside { top: 16px; }
}

/* Hero (3a-3d): green eyebrow, lime second half of the headline, sky-bordered stats, form card with a green top edge, the
   No Win No Fee box restyled as the "In short" box. */
[data-hero] .eyebrow { color: var(--green); font-size: var(--t-sm); }
.stats .stat { border: 1.5px solid var(--sky); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.stats .stat > span:first-child { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 900; color: #fff; }
.stats .stat > span + span { color: var(--sky); font-weight: 800; font-size: var(--t-sm); }
.capture { border: 0; border-top: 6px solid var(--green); border-radius: 20px; padding: clamp(20px, 3vw, 30px); }
.capture-title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); }
.capture input[type="text"], .capture input[type="tel"], .capture input[type="email"], .capture select, .capture textarea,
.guide-form input[type="text"], .guide-form input[type="tel"], .guide-form input[type="email"] { border-color: var(--navy); border-radius: var(--r-btn); }
.capture label, .field { font-weight: 800; }
.dark .fee-basis { background: rgb(255 255 255 / 6%); border: 0; border-left: 4px solid var(--green); border-radius: 14px; color: var(--on-dark-2); padding: 16px 20px; --t-link: #fff; }
.dark .fee-basis strong, .dark .fee-basis a { color: #fff; }
[data-hero] .bg-navy.bdl-accent { background: rgb(255 255 255 / 6%); border-radius: 14px; } /* the "In short" box */
.dark .capture .fee-basis { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-left: 4px solid var(--green); padding: 10px 14px; --t-link: var(--indigo); }
.dark .capture .fee-basis strong { color: var(--ink); }
.dark .capture .fee-basis a { color: var(--indigo); }

/* Trust band (4a-4e): full-width sky band, navy icon tiles, navy text; the "figures verified" line kept under it. */
.trust { background: var(--sky); border-bottom: 0; color: var(--navy); }
.trust ul { padding: 20px 16px; gap: 16px 20px; }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 24px; } }
@media (max-width: 899px) { .trust li:last-child:nth-child(odd) { grid-column: auto; } }
.trust li { color: var(--navy); font-size: var(--t-sm); font-weight: 600; gap: 12px; }
.trust li strong { color: var(--navy); font-weight: 900; font-size: var(--t-15); }
.trust a { color: var(--navy); }
.trust .trust-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--navy); display: flex; align-items: center; justify-content: center; }
.trust .trust-ic .icon { color: var(--green); }
.trust .trust-note { color: var(--navy); padding-bottom: 14px; }
.trust :focus-visible { outline-color: var(--navy); }

/* Claim cards (5a-5c): navy cards, coloured icon tiles, green "All ... claims" link. */
.cc { background: var(--navy); color: #fff; border: 0; border-radius: 18px; padding: 26px; gap: 14px; box-shadow: none; --t-white: #fff; --t-link: #fff; }
.cc h3 { font-size: 1.375rem; font-weight: 900; }
.cc .ls { gap: 4px; font-weight: 600; }
.cc .ls a, .cc .ls span { color: #fff; }
.cc p { color: var(--on-dark-2); }
.cc .more { color: var(--green); font-weight: 900; }
.ic-sky { background: var(--sky); color: var(--navy); }
.ic-green { background: var(--green); color: var(--navy); }
.ic-indigo { background: var(--indigo); color: #fff; }

/* "Why NJS Law" (6a-6c) and results: navy sections; the quote in a white card with a purple edge. */
.quote-card { border-left: 8px solid var(--indigo); border-radius: 24px; }
.quote-card > .icon { color: var(--indigo); }
.results-band .result-feature { border-radius: 20px; }
.results-band .result-feature .bdt { border-top: 2px solid var(--navy); }
/* Purple on lime is 4.0:1 (fails 1.4.3 for small text), so links on a lime surface are navy (7.1:1). */
.bg-green a, .result-feature a { color: var(--navy); }

/* Home 5-step strip (7a): thick coloured top bars, heavy numbers. */
.step { padding-top: 20px; gap: 12px; }
.step.bdt-accent { border-top-width: 6px; }
.step h3 { font-size: 1.1875rem; font-weight: 900; }

/* Cards with a navy outline (9a, 9c): insight cards, news cards. */
.insight-card { border: var(--line-navy); background: var(--surface); }
.g3 > a.bd.r-lg.clip, .grid > a.bd.r-lg.clip { border: var(--line-navy); border-radius: 18px; }
a.bd.r-lg.clip .tag { background: var(--indigo); color: #fff; font-weight: 800; }

/* Lime closing band (9b): navy text and a navy main button on lime. */
.cta-band { background: var(--green); color: var(--navy); border-top: 0; --t-white: var(--navy); --t-link: var(--navy); --t-soft: var(--navy); --t-green: var(--navy); }
.cta-band h2 { color: var(--navy); font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem); }
.cta-band p { color: var(--navy); font-weight: 600; }
.cta-band .cta-actions .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: none; }
.cta-band .cta-actions .btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.cta-band .cta-actions .btn-secondary { border-color: var(--navy); color: var(--navy); }
.cta-band .cta-actions .btn-secondary:hover { background: rgb(26 37 62 / 8%); }
.cta-band :focus-visible { outline-color: var(--navy); }

/* Service pages (8a-8g): navy-edged tables, numbered eligibility cards, sticky "On this page" menu, navy box. */
.tbox { border: var(--line-navy); border-radius: 14px; }
.tbl th { background: var(--navy); font-weight: 800; }
.tbl td:first-child { font-weight: 800; }
.tbl tr:nth-child(even) td { background: transparent; }
.tbl td { border-top: 1px solid rgb(26 37 62 / 35%); }
.card { border: var(--line-navy); box-shadow: none; border-radius: 16px; }
#entitled .card > .r-full { background: var(--green); }
.toc { border: var(--line-navy); border-radius: 16px; padding: 12px 8px; }
.toc .mono, .toc .toc-head { padding: 4px 12px 8px; font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.toc a { flex: none; min-height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 1.35; font-size: var(--t-sm); font-weight: 600; }
.toc a.bg-green { background: var(--green); color: var(--navy); font-weight: 800; }
.toc-mobile { border: var(--line-navy); border-radius: 14px; margin-bottom: var(--s-6); }
.toc-mobile summary { font-weight: 800; }
@media (min-width: 1024px) {
  /* A long menu scrolls inside the sticky panel; a visible navy scrollbar shows there is more. */
  .case-aside .toc { max-height: calc(100vh - 360px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--navy) var(--canvas); }
}
.speak-box h2 { color: #fff; }
.page-aside > .bg-navy, .speak-box { border-radius: 16px; }

/* Guides (7c-7e): numbered headings in purple squares, outlined step cards with a purple "Step" pill. */
.num:not([class*="bg-"]) { background: var(--indigo); color: #fff; } /* a tinted .num keeps its own tile colours */
.num.bg-green-soft { background: var(--green); color: var(--navy); }
.lg .box { border: var(--line-navy); border-radius: 14px; }
.lg .toc ol a { text-decoration: underline; font-size: var(--t-base); color: var(--navy); }
.tag.bg-indigo, .dark .tag.bg-indigo { background: var(--indigo); color: #fff; font-weight: 800; }

/* Footer (10a-10g): navy, four columns, lime headings, round social icons, company and SRA line under a sky rule. */
.site-footer { color: #fff; }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 40px; } }
.site-footer h2 { color: var(--green); font-weight: 900; }
.site-footer h2.mt-24 { margin-top: 24px; }
.site-footer li a, .site-footer address { color: #fff; }
.site-footer .footer-phone { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: #fff; font-weight: 800; text-decoration: none; }
.site-footer .footer-phone:hover { text-decoration: underline; }
.site-footer .footer-mail { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: #fff; text-decoration: none; }
.site-footer .footer-mail:hover { text-decoration: underline; }
.site-footer .footer-brand .brand svg { width: 48px; height: 48px; }
.social-icons { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.site-footer .social-icons a { width: 34px; height: 34px; min-height: 0; border-radius: 50%; background: #fff; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.site-footer .social-icons a:hover { background: var(--green); }
.social-icons .icon { width: 18px; height: 18px; }
.site-footer .legal { border-top: 1.5px solid var(--sky); color: var(--on-dark-2); }

/* Cookie banner keyboard focus (overnight fixes 12 Nov 2026) */
/* Every banner control gets the light-page ring, whatever section the banner sits in: 3 px solid --focus (#2f6fde), 4.7:1 on
   the banner's white --surface (WCAG 2.2 SC 1.4.11 and 2.4.13 ask 3:1 and 2 px). This replaces, inside the banner only, the
   .dark two-colour ring (its light outer colour is 1.8:1 on white) and the 25 % tint inputs get elsewhere, which is too faint
   on a checkbox. Looks and sizes of the buttons are unchanged. */
.cookie-banner :is(a, button, input, [tabindex]):focus-visible,
.dark .cookie-banner :is(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; border-radius: 4px;
}
.cookie-banner .btn:focus-visible { border-radius: var(--r-btn, 4px); }

/* Audit fixes B (overnight 12 Nov 2026) */
/* F3: a compensation table whose ranges must stay visible at every width: no minimum width, cells wrap. */
.tbl.tbl-fit { min-width: 0; table-layout: auto; }
.tbl.tbl-fit td, .tbl.tbl-fit th { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 599.98px) { .tbl.tbl-fit td, .tbl.tbl-fit th { padding: 10px 10px; } .tbl.tbl-fit { font-size: var(--t-sm); } }
/* F10: an eyebrow on a white card inside a dark hero takes the dark-on-light green (green-ink on white passes 4.5:1). */
[data-hero] .light .eyebrow { color: var(--green-ink); }
/* Low: the reviews rating card keeps "England & Wales" on one line; the row wraps instead of squeezing it. */
.shadow-lg.light > .flex.justify-between.t-15 { flex-wrap: wrap; }
.shadow-lg.light > .flex.justify-between.t-15 > .c-muted { white-space: nowrap; }
/* Low: at 320 px the case-results card's "Handled by ..." line could not shrink (the About "at a glance" rule above keeps a
   row's first span at its full width), so the page was 371 px wide; in a wrapping row it may now wrap. */
.light > .justify-between.wrap-yes.t-sm > span:first-child { flex: 0 1 auto; min-width: 0; }