/* =============================================================================
   Comera Movement Science — site styles.

   COLOURS ARE THE APPROVED BRAND KIT (C:/projects/Branding/final-kit), which the
   kit's own guide states supersedes all previous brand guidance. Values come from
   tokens/tokens.css; the design sample's palette was an approximation of these.

   The kit's four-token rule, followed here:
     dark            dark backgrounds/footers — white text always passes
     accent          FILLS, icons, graphics — never small text, never a text bg
     accent-ink      the accent darkened until it passes as text on white
     accent-on-dark  the accent lightened until it passes as text on the brand dark

   THREE PLACES THIS BUILD HAD TO GO BEYOND THE KIT — all measured, not eyeballed:

   1. A solid `accent` (#E04A28) button fails with EITHER ink: navy 4.14:1,
      white 4.05:1, both under 4.5. So buttons use accent-ink #D5401F as the FILL
      with white text (4.58:1). `accent` is kept for non-text fills, exactly as the
      guide intends.
   2. `accent-ink` passes on pure white (4.58:1) but NOT on the brand's own light
      surface #F2F6F7 (4.21:1) — it appears to be derived against white only. Body
      text on the light band therefore uses --ink/--muted, never accent-ink.
   3. `accent-2` (#12A5B0 teal) ships with no -ink pair, and the guide explicitly
      says to derive and check one yourself. --teal-ink #0C737A is that derivation:
      5.60:1 on white, 5.15:1 on the light surface.

   Re-verify with the LAYOUT.md snippet after ANY colour change.
   ============================================================================= */

:root {
  /* ---- brand kit: Comera Movement Science ---- */
  --navy: #0D1F2D;            /* kit: dark */
  --navy-2: #102636;          /* derived gradient end — white 15.53, teal 5.20 */
  --navy-card: #14293A;       /* derived raised panel on navy */
  --navy-line: #24405A;       /* derived border on navy */
  --bg-soft: #F2F6F7;         /* kit: light */

  --orange: #E04A28;          /* kit: accent — FILLS/GRAPHICS ONLY */
  --orange-btn: #D5401F;      /* kit: accent-ink, used as button fill + white text */
  --orange-on-dark: #E3593A;  /* kit: accent-on-dark — orange TEXT on navy (4.60) */

  --teal: #12A5B0;            /* kit: accent-2 — dark surfaces only (5.62 on navy) */
  --teal-ink: #0C737A;        /* DERIVED — kit ships no ink for accent-2 */

  --ink: #0D1F2D;
  --muted: #5b6b7a;           /* 5.04 on the light surface, 5.48 on white */
  --line: #e0e7e9;
  --on-dark: #c7d2da;         /* body text on navy */
  --on-dark-soft: #8fa2b3;    /* meta text on the navy card */

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* layout — kit defaults */
  --maxw: 1200px;
  --gutter: 32px;
  --radius: 12px;
  --shadow: 0 20px 40px -20px rgba(13, 31, 45, .25);
}
@media (min-width: 1600px) { :root { --maxw: 1400px; } }

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.15; }

/* ---------- accessibility helpers (kit — keep) ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 300;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-weight: 700; transition: top .15s ease;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 2px; }
.on-dark :focus-visible, .hero :focus-visible, footer :focus-visible, .cta :focus-visible {
  outline-color: var(--teal);
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- container ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* =============================================================================
   BUTTONS — every variant sets an explicit background (kit rule: a variant that
   never sets one lets the UA's ButtonFace bleed through; that shipped a 1.32:1
   button twice). Fill ink differs per accent — see the note at the top of the file.
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 8px;
  font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.2;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange-btn); color: #fff; }   /* 4.58:1 — see note 1 */
.btn-primary:hover { background: #E04A28; }
.btn-accent { background: var(--teal); color: var(--navy); }    /* 5.62:1 */
.btn-accent:hover { background: #16BAC6; }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-light { background: transparent; color: #fff; border-color: #3a4c5e; }  /* DARK bg only */
.btn-light:hover { background: rgba(255, 255, 255, .12); }
.btn-block { width: 100%; }
.btn-sm { padding: 12px 22px; font-size: 13px; }

/* =============================================================================
   HEADER
   ============================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  /* padding-block only — a `padding: 18px 0` shorthand here would wipe .wrap's
     horizontal gutter and pull the header 32px out of the content column
     (invisible at 1366px, obvious at 1440px+; the kit flags this exact bug). */
  padding-block: 18px;
}
/* Approved lockups from the brand kit. on-light in the header, on-dark in the
   footer — the kit is explicit that these are not interchangeable. */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 41px; width: auto; }
.footer-logo { height: 48px; width: auto; margin-bottom: 16px; }

.nav-toggle {
  display: none;
  background: #fff; color: var(--navy); border: 1.5px solid var(--navy);
  border-radius: 8px; padding: 12px 18px;   /* 44px tap target */
  font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
}

#site-nav { display: flex; align-items: center; gap: 2px; }
#site-nav a {
  text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  color: var(--ink); padding: 10px 13px; border-radius: 999px;
  white-space: nowrap;
}
#site-nav a:hover { background: var(--bg-soft); }
#site-nav a[aria-current="page"] { background: var(--navy); color: #fff; }

.header-actions { display: flex; align-items: center; gap: 20px; }
.partner-link {
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap;
  padding: 6px 0;   /* >=24px target */
}
.partner-link:hover { border-bottom-color: var(--teal-ink); color: var(--teal-ink); }

/* =============================================================================
   HERO
   ============================================================================= */
.hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  padding: 70px 0 80px;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: start;
}
.kicker {
  color: var(--teal);
  font-size: 12px; font-weight: 700; letter-spacing: 3px;
  margin: 0 0 22px; text-transform: uppercase;
}
.headline {
  font-size: clamp(34px, 5vw, 56px); line-height: 1.08; font-weight: 800;
  margin: 0 0 26px; letter-spacing: -1px;
}
.headline .line1 { color: #fff; display: block; }
.headline .line2 { color: var(--teal); display: block; }
.hero-copy { color: var(--on-dark); font-size: 16.5px; max-width: 540px; margin: 0 0 32px; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* system card — Practitioner Tools / Practitioner Education */
.sys-card {
  background: var(--navy-card); border: 1px solid var(--navy-line);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.tool-box { border-radius: 10px; padding: 18px 20px; }
.tool-box.orange { background: var(--orange-btn); }
.tool-box.teal { background: var(--teal); }
/* The two fills need DIFFERENT ink: white on the orange (4.58:1 — navy would be
   4.14 and fail), navy on the teal (5.62:1 — white would be 3.0 and fail). */
.tool-box h2 {
  font-size: 13px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; margin: 0 0 12px;
  padding-bottom: 10px; border-bottom: 1px solid currentColor;
}
.tool-box.orange, .tool-box.orange h2, .tool-box.orange li, .tool-box.orange h3 { color: #fff; }
.tool-box.teal,   .tool-box.teal h2,   .tool-box.teal li,   .tool-box.teal h3   { color: var(--navy); }
.tool-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tool-box li {
  font-size: 13px; font-weight: 600; line-height: 1.4;
  padding-left: 15px; position: relative;
}
.tool-box li::before { content: "\2192"; position: absolute; left: 0; top: 0; font-weight: 800; }
.tool-box .item-sub { font-weight: 400; }
.tool-box h3 {
  font-size: 12px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; margin: 14px 0 0; padding-left: 15px; position: relative;
}
.tool-box h3::before { content: "\2192"; position: absolute; left: 0; top: 0; font-weight: 800; }
.tool-box h3:first-of-type { margin-top: 0; }

/* =============================================================================
   STATS BAR
   ============================================================================= */
.stats { background: var(--bg-soft); padding: 30px 0; border-bottom: 1px solid var(--line); }
/* The <ul> is nested INSIDE .wrap rather than sharing the class: a list reset
   (margin:0) on the same element would override .wrap's `margin: 0 auto` and
   the whole band would stop centring on wide monitors. */
.stats-grid { display: flex; flex-wrap: wrap; gap: 24px 60px; margin: 0; padding: 0; list-style: none; }
.stat { display: flex; align-items: baseline; gap: 14px; max-width: 340px; }
.stat b { font-size: 26px; color: var(--teal-ink); font-weight: 800; }   /* 5.27:1 on soft */
.stat span { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* =============================================================================
   SECTIONS
   ============================================================================= */
.section { padding: 72px 0; }
.section--alt { background: var(--bg-soft); }
.section h2 { font-size: clamp(24px, 3.2vw, 30px); font-weight: 800; margin: 0 0 10px; letter-spacing: -.5px; }
.section .sub { color: var(--muted); font-size: 15px; max-width: 640px; margin: 0 0 34px; }

/* ---------- persona cards (grid steps 4 -> 2 -> 1) ---------- */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.persona-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 0;   /* pins the link row across the row */
}
.persona-card .tag {
  font-size: 10.5px; letter-spacing: .8px; color: var(--muted);
  font-weight: 700; text-transform: uppercase; margin: 0 0 10px;
}
.persona-card h3 { font-size: 15px; margin: 0 0 12px; line-height: 1.35; font-weight: 700; }
.persona-card .links { display: flex; flex-direction: column; gap: 2px; align-self: end; }
/* padding brings these standalone links to >=24px tall (WCAG 2.2 target size —
   the inline-in-a-sentence exception doesn't apply to a list of links) */
.persona-card a {
  font-size: 12.5px; color: var(--teal-ink); font-weight: 700; text-decoration: none;
  padding: 5px 0; display: inline-block;
}
.persona-card a:hover { text-decoration: underline; }

/* =============================================================================
   BRAND SECTIONS (Kinetic Control, TPM)
   These exist so the primary nav can navigate THIS site. The link out to the
   brand's own site lives here, as an explicit labelled CTA, instead of in the nav.
   ============================================================================= */
.brand-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.eyebrow {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--teal-ink); font-weight: 700; margin: 0 0 12px;
}
/* Sibling brand marks. Decorative: the heading beside them already names the
   brand, so alt="" + aria-hidden avoids a screen reader announcing it twice. */
.brand-mark { width: 72px; height: 72px; border-radius: 10px; margin: 0 0 14px; }
.brand-mark--wide { width: auto; height: 70px; border-radius: 0; }
.brand-section h2 { font-size: clamp(26px, 3.6vw, 34px); margin: 0 0 14px; }
.brand-lead { font-size: 16.5px; color: var(--ink); margin: 0 0 14px; max-width: 44ch; }
.brand-note { font-size: 14px; color: var(--muted); margin: 0 0 24px; max-width: 44ch; }

.brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.brand-list li {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 5px;
}
.section--alt .brand-list li { background: #fff; }
.brand-list strong { font-size: 15px; font-weight: 700; }
/* Target the description explicitly. A bare `.brand-list span` rule (0-1-1) would
   outrank `.pill` (0-1-0) and silently repaint the pill's text --muted on its teal
   background — 1.08:1. Over-broad element selectors cause this class of bug. */
.brand-list .desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.pill {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  background: var(--teal-ink); color: #fff;                  /* 5.94:1 */
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
/* Anchor targets sit under the sticky header, so they need an offset at least as
   tall as it. The header is NOT a fixed height: ~78px on one row, ~145px in the
   two-row band (1041–1560px), taller again when the mobile menu is open — so the
   offset is set per breakpoint alongside the header rules, not as one guess. */
#kinetic-control, #tpm, #msp, #solutions, #contact { scroll-margin-top: 96px; }
#centre-of-excellence { scroll-margin-top: 116px; }

/* ---------- solution family (grid steps 3 -> 2 -> 1) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.prod-card {
  background: var(--navy); color: #fff; border-radius: var(--radius); padding: 26px;
  display: grid; grid-template-rows: auto auto 1fr auto;   /* button aligns across the row */
}
.prod-card .tag {
  font-size: 10.5px; letter-spacing: 1px; color: var(--teal);
  font-weight: 700; text-transform: uppercase; margin: 0 0 14px;
}
.prod-card h3 { font-size: 20px; margin: 0 0 12px; font-weight: 800; }
.prod-card p { font-size: 13px; color: #aebccb; margin: 0 0 22px; }   /* 8.80:1 */

/* =============================================================================
   CTA BAND — gradient darkened so white and the pale tint both pass AA
   ============================================================================= */
.cta { background: linear-gradient(120deg, #09595E, #0A666C); color: #fff; padding: 60px 0; }
.cta-heading { margin: 0 0 34px; }
.cta h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 12px; font-weight: 800; }
.cta-heading p { margin: 0; font-size: 15px; max-width: 560px; color: #E6F7F8; }  /* 6.08:1 */
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; list-style: none; margin: 0; padding: 0; }
/* Panel overlay DARKENS the band rather than lightening it. A white 10% overlay
   (as in the design sample) lifts the gradient's light end to rgb(35,138,129),
   which drops the pale body text to 3.87:1 — a real AA failure that only shows
   up once the alpha is composited. Black 12% gives 5.66:1 at the same point. */
.cta-box {
  background: rgba(0, 0, 0, .12); border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 14px; padding: 30px;
  display: grid; grid-template-rows: auto auto 1fr auto;
}
.cta-box .tag {
  font-size: 10.5px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase;
  color: #E6F7F8; margin: 0 0 10px;
}
.cta-box h3 { font-size: 22px; margin: 0 0 10px; font-weight: 800; }
.cta-box p { margin: 0 0 22px; font-size: 14px; color: #E6F7F8; }
.cta-box .btn { justify-self: start; }

/* =============================================================================
   CONTACT / ENQUIRY FORM
   ============================================================================= */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.contact-details { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-details li { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; }
.contact-details .label {
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.contact-details a { color: var(--teal-ink); font-weight: 700; text-decoration: none; padding: 3px 0; display: inline-block; }
.contact-details a:hover { text-decoration: underline; }

.enquiry-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.enquiry-form label { font-size: 13px; font-weight: 700; color: var(--ink); }
.enquiry-form .req { color: var(--orange-btn); }   /* 4.58:1 on white */
.enquiry-form .optional { font-weight: 400; color: var(--muted); }
.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="tel"],
.enquiry-form select,
.enquiry-form textarea {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: #fff;
  /* WCAG 1.4.11 (non-text contrast): the border is what identifies the control,
     so it needs 3:1 against the field. The obvious light grey (#c3ced7) is only
     1.6:1 — text-contrast checks never catch this because it isn't text. */
  border: 1.5px solid #7d8e9f;                /* 3.36:1 on white */
  border-radius: 8px;
  padding: 11px 13px; width: 100%;
}
.enquiry-form textarea { resize: vertical; min-height: 110px; }
.enquiry-form input:focus-visible,
.enquiry-form select:focus-visible,
.enquiry-form textarea:focus-visible { border-color: var(--teal-ink); }
.enquiry-form input[aria-invalid="true"],
.enquiry-form textarea[aria-invalid="true"] { border-color: #c2410c; }

.field-check { display: flex; align-items: flex-start; gap: 10px; }
.field-check input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.field-check label { font-weight: 400; font-size: 13px; color: var(--ink); line-height: 1.5; }

/* Honeypot — kept OFF-SCREEN, deliberately not display:none (some bots skip
   hidden fields, which defeats the trap). If this rule is ever lost the field
   renders as a real input, and a human filling it in gets a fake success while
   their enquiry is silently discarded. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.form-note a { color: var(--teal-ink); }

.f-status { margin: 0; font-size: 14px; font-weight: 600; }
.f-status:empty { display: none; }
.f-status.ok  { color: #0A666C; }               /* 6.71:1 on white */
.f-status.err { color: #B33213; }               /* 6.21:1 on white */

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer { background: var(--navy); color: var(--on-dark); padding: 56px 0 30px; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px;
  padding-bottom: 34px; border-bottom: 1px solid var(--navy-line);
}
.footer-grid h2 { color: #fff; font-size: 13px; letter-spacing: .5px; margin: 0 0 16px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid a {
  display: inline-block; color: #9fb0bf; text-decoration: none; font-size: 13.5px;
  margin-bottom: 4px; padding: 5px 0;   /* >=24px target */
}
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-contact p { font-size: 13.5px; color: #9fb0bf; margin: 0 0 8px; }   /* 7.65:1 */
.footer-bottom { margin-top: 24px; font-size: 12px; color: #a3b3c1; }
.footer-bottom p { margin: 0 0 8px; }
.footer-bottom a { color: #c7d2da; text-decoration: underline; }
.statutory { color: #a3b3c1; }

/* =============================================================================
   COOKIE BANNER (PECR — nothing non-essential loads before consent)
   ============================================================================= */
.cookiebar {
  display: none;
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  background: var(--navy); color: #fff; border: 1px solid var(--navy-line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
  gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.cookiebar.show { display: flex; }
.cookiebar p { margin: 0; font-size: 13.5px; color: var(--on-dark); max-width: 640px; }
.cookiebar a { color: var(--teal); }
.cookiebar .actions { display: flex; gap: 10px; }

/* =============================================================================
   RESEARCH PAGE (generated — see scripts/generate_research.py)
   ============================================================================= */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 40px 0 44px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.breadcrumb a { color: var(--teal-ink); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.page-hero h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; margin: 0 0 14px; letter-spacing: -.5px; }
.page-hero .lede { font-size: 16px; color: var(--ink); max-width: 68ch; margin: 0 0 16px; }
.page-hero .hero-note {
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--teal-ink); font-weight: 700; margin: 0;
}

/* A bibliography is reference material: a readable measure matters more than
   filling the container, so it keeps its own reading column. */
.research-wrap { max-width: 860px; }
.research-year {
  font-size: 15px; font-weight: 800; letter-spacing: 1.5px;
  color: var(--teal-ink); margin: 38px 0 12px;
  padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.research-year:first-child { margin-top: 0; }
.research-list { list-style: none; margin: 0; padding: 0; }
.research-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.research-item:last-child { border-bottom: 0; }
.r-meta { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; font-weight: 600; }
.r-title { font-size: 15.5px; font-weight: 700; line-height: 1.45; margin: 0; }
.r-title a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--teal-ink); }
.r-title a:hover { color: var(--teal-ink); }
/* An external citation link is a meaningful destination — mark it rather than
   leaving the reader to guess which titles are clickable. */
.r-title a::after { content: " \2197"; color: var(--teal-ink); font-weight: 800; }
.r-source { font-size: 13px; color: var(--muted); margin: 4px 0 0; font-style: italic; }

/* =============================================================================
   MOVEMENT SCIENCE PRACTITIONER PAGE (generated — see scripts/generate.py)
   ============================================================================= */
.msp-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: start; }
.msp-grid h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; margin: 0 0 16px; }
.msp-grid p { font-size: 16px; margin: 0 0 16px; max-width: 62ch; }
.pull {
  border-left: 3px solid var(--teal-ink); padding-left: 18px;
  font-size: 17px; font-style: italic; color: var(--ink); margin-top: 24px;
}
.msp-aside {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px;
}
.msp-aside h2 { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 16px; }
.spec { margin: 0 0 22px; }
.spec dt {
  font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-top: 14px;
}
.spec dt:first-child { margin-top: 0; }
.spec dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }

.msp-intensive {
  margin-top: 20px; background: var(--navy); color: #fff;
  border-radius: var(--radius); padding: 26px;
}
.msp-intensive .tag {
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin: 0 0 12px;
}
.msp-intensive h3 { font-size: 20px; font-weight: 800; margin: 0 0 10px; }
.msp-intensive p { font-size: 14px; color: #aebccb; margin: 0; }

/* =============================================================================
   LEGAL / DOC PAGES + 404
   ============================================================================= */
.doc { max-width: 820px; margin: 0 auto; padding: 56px var(--gutter) 80px; }
.doc h1 { font-size: 32px; margin: 0 0 8px; }
.doc h2 { font-size: 20px; margin: 34px 0 10px; }
.doc .meta { color: var(--muted); font-size: 13px; margin: 0 0 28px; }
.doc p, .doc li { font-size: 15px; }
.doc a { color: var(--teal-ink); }
.doc table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--bg-soft); }
/* Wide tables scroll in their own box — the PAGE never scrolls sideways */
.doc .table-wrap { overflow-x: auto; margin: 12px 0 18px; }
.back-link { display: inline-block; color: var(--teal-ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.back-link:hover { text-decoration: underline; }

.notfound { text-align: center; padding: 100px var(--gutter); }
.notfound h1 { font-size: 40px; margin: 0 0 12px; }
.notfound p { color: var(--muted); margin: 0 0 28px; }

/* =============================================================================
   RESPONSIVE — the kit tier recipe: N -> 2 -> 1, never N -> 1.
   ============================================================================= */
/* Header: the six nav labels are long ("HUMAN PERFORMANCE GROUP", "CENTRE OF
   EXCELLENCE"), so logo + nav + actions only fit on ONE row above ~1560px.
   Between the mobile breakpoint and there, the nav drops to its own full-width
   row instead — all links stay visible, no hamburger forced onto laptops, and
   no horizontal overflow. (A width sweep caught this bleeding up to 200px at
   1100px; it is invisible at 1366px and 1920px, the two widths you'd eyeball.) */
@media (max-width: 1560px) and (min-width: 1041px) {
  .header-inner { flex-wrap: wrap; }
  #site-nav {
    order: 3; width: 100%; flex-wrap: wrap; gap: 2px;
    border-top: 1px solid var(--line); padding-top: 8px;
  }
  #site-nav a { padding: 9px 11px; letter-spacing: .3px; }
  .header-actions { gap: 16px; }
  /* two-row header (~145px) — anchors need the bigger offset here */
  #kinetic-control, #tpm, #msp, #solutions, #contact { scroll-margin-top: 160px; }
  #centre-of-excellence { scroll-margin-top: 180px; }
}

@media (max-width: 1180px) {
  /* Both grids step N -> 2 -> 1. Going 3 -> 1 directly leaves a dead zone where
     cards keep shrinking inside a narrowing container and break out of the row. */
  .cards-4, .cards-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1040px) {
  /* Mobile nav: a real button toggling a full-width dropdown. NOT a scrollable
     strip — the kit flags that as a shipped failure (links invisible off-screen). */
  /* Two rows: [logo .......... Menu] then [Partner with us ...... Store].
     `order` is set on the DIRECT children of .header-inner only. A previous
     `.partner-link { order: 2 }` here did nothing useful and one thing harmful:
     .partner-link is a GRANDCHILD (it lives inside .header-actions), so the order
     applied within that group and swapped it past the store button. Ordering a
     grandchild can never affect the outer layout.
     The Menu button also sat centred, because row one was logo + toggle + actions
     under `justify-content: space-between`. Giving .header-actions its own full
     width row leaves the toggle alone on the right, where it belongs. */
  .header-inner { flex-wrap: wrap; gap: 12px 16px; }
  .logo { order: 1; }
  .nav-toggle { display: inline-block; order: 2; margin-left: auto; }
  .header-actions { order: 3; width: 100%; justify-content: space-between; }
  #site-nav {
    display: none; order: 4; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0 4px; border-top: 1px solid var(--line);
  }
  #site-nav.open { display: flex; }
  #site-nav a { padding: 13px 12px; border-radius: 8px; font-size: 13px; letter-spacing: .6px; }
}

@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .cards-3, .cta-grid, .contact-grid, .brand-grid, .msp-grid { grid-template-columns: 1fr; }
  .contact-grid, .brand-grid, .msp-grid { gap: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .cards-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-actions { gap: 12px; }
  .partner-link { font-size: 12.5px; }
}

@media (max-width: 540px) {
  :root { --gutter: 20px; }
  .section { padding: 52px 0; }
  .field-row { grid-template-columns: 1fr; }
  .enquiry-form { padding: 20px; }
  .hero { padding: 48px 0 56px; }
  .btn { width: 100%; }             /* full-width taps on a phone */
  /* …except in the header, where the store button shares its row with the
     partner link. Without this the blanket rule above stretches it and forces a
     third header row before any content. */
  .header-actions .btn { width: auto; }
  .cta-box .btn { justify-self: stretch; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .cookiebar { left: 10px; right: 10px; bottom: 10px; }
  .cookiebar .actions { width: 100%; }
  .cookiebar .actions .btn { flex: 1; }
}