/*
  styles.css — The Fourth Sheet

  KEY LOCATIONS:
  - Colour palette / CSS variables ........... :root block (line ~1)
  - Section vertical spacing (desktop) ....... .section { padding } — search "SECTION SPACING"
  - Section vertical spacing (mobile) ........ @media (max-width: 900px) — search "MOBILE SECTION SPACING"
  - Hero banner spacing ...................... search "HERO SPACING"
  - Section heading gap ...................... .section-heading { margin-bottom }
  - Button styles ............................ .button / .button.primary
  - Vertical annotation list (diagram notes) . .decision-list / .decision-item
  - Placeholder "TBC" chip ................... .tbc
  - Big orange TO DO notes ................... .devnote (switched by body.dev-notes)
  - Report cards / mock dashboard ............ search "REPORT CARDS" / "REPORT MOCK"
  - Embed loading spinner .................... search "EMBED LOADING STATE"
  - Focus outlines / skip link .............. search "ACCESSIBILITY"
  - Mobile breakpoints ....................... @media (max-width: 900px) and (max-width: 720px)
*/

:root {
  color-scheme: light;
  /* colour: base */
  --bg: #f4f7f2;
  --surface: #fbfdf9;
  --border: #dce8dc;
  --text: #25342a;
  --muted: #5f6f63;
  --accent: #2f7a5d;          /* brand green: logo, buttons, headings, and "good" text */
  --accent-soft: #eaf6ee;
  /* colour: data (meaning, not sign) */
  --good: #0E9F6E;            /* the one data green: bars, lines, dots */
  --bad: #b42318;             /* below target, overspent, losing money, negatives */
  --warn: #8a6d3b;            /* close to target, provisional */
  --neutral-bar: #7d8790;     /* below-target bars (3:1 on white) */
  /* colour: supporting */
  --paper: #ffffff;
  --on-accent: #fbfdf9;
  --bg-alt: #f8faf8;
  --track: #eef2ee;
  --grid: #e6eae7;
  --border-strong: #9db8a6;
  --accent-tint: #eef5f0;
  --accent-tint-border: #cfe2d6;
  --accent-soft-hover: #d6ebdd;
  --on-dark-muted: #cfe3d5;
  --good-soft: #e3f4e8;
  --bad-soft: #fbe7e5;
  --note-bg: #fbfaf6;
  --note-border: #e6dfcf;
  --note-edge: #8a7a52;
  --ink-line: #2f2f2f;
  --guide: #8a959c;
  --header-bg: #fcfbf7;
  --backdrop: rgba(37, 52, 42, 0.45);
  /* type: six steps */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(2rem, 3.2vw, 3rem);
  /* spacing: 4px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  /* radius and shadow */
  --r-sm: 6px;
  --r-md: 12px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(37, 52, 42, 0.15);
  --shadow-md: 0 10px 30px rgba(37, 52, 42, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
img { max-width: 100%; }
.container { width: min(1360px, calc(100% - 2rem)); margin: 0 auto; }
@media (min-width: 1700px) { html { font-size: 18px; } }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); border-bottom: 1px solid var(--border); }
.nav-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) 0; }
.brand { font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--text); font-size: var(--fs-md); }
.nav-links { display: flex; gap: var(--sp-4); }
.nav-links a { color: var(--muted); text-decoration: none; transition: color 180ms ease; font-size: var(--fs-md); }
.nav-links a:hover { color: var(--text); }
.nav-links .nav-book { display: none; }
.nav-toggle { display: none; background: transparent; color: var(--text); border: 1px solid var(--border); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
/* ACCESSIBILITY — visible keyboard focus everywhere, and a "Skip to content"
   link that only appears when tabbed to. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.button:focus-visible { border-radius: var(--r-pill); }
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 50;
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }
/* Stop the sticky header covering a section's heading after a nav click. */
section[id], main[id] { scroll-margin-top: 4.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spinner { animation-duration: 3s; }
}
.button:hover { filter: brightness(0.95); }
/* HERO SPACING — top/bottom padding on the hero banner */
.hero { padding: var(--sp-8) 0 var(--sp-7); }
.hero-grid { display: grid; gap: var(--sp-7); grid-template-columns: 1.4fr 0.9fr; align-items: center; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--fs-xs); font-weight: 700; margin-bottom: var(--sp-2); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--sp-3); }
/* PARAGRAPH RHYTHM — 12 px between paragraphs, none above; nothing extra after the last thing in a card or box */
p { margin: 0 0 var(--sp-3); }
:is(.info-card, .rung, .rung-card, .step-card, .contact-box, .dashboard-card, .report-card, .no-data, .client-needs) > :last-child,
:is(.contact-box) > div > :last-child { margin-bottom: 0; }
.eyebrow:first-child { margin-top: 0; }      /* a label that starts a block adds no space above it */
h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-4); letter-spacing: -0.03em; }
h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); letter-spacing: -0.02em; }
.section-heading a { color: var(--accent); text-underline-offset: 3px; }
.hero-copy, .section-heading p, .info-card p, .dashboard-card p, .contact-box p { color: var(--muted); font-size: var(--fs-md); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-6) 0; }
.button { display: inline-block; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill); text-decoration: none; font-weight: 600; }
.button.primary { background: var(--accent); color: var(--on-accent); }
.button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.hero-card, .info-card, .dashboard-card, .step-card, .contact-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.hero-card { padding: var(--sp-5); }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.mini-metric { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-3); background: var(--paper); }
.mini-label { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: var(--sp-1); }
.metric-value { display: block; font-size: var(--fs-md); color: var(--text); font-weight: 600; }
.metric-value.positive { color: var(--accent); }
.metric-value.neutral { color: var(--text); }
/* SECTION SPACING — the gap between sections is about twice this (bottom of one + top of the next) */
.section { padding: var(--sp-6) 0; }
.section-alt { background: var(--bg-alt); }
.section .container > :first-child, .section-heading > :first-child { margin-top: 0; }
/* SECTION HEADING — controls gap between heading and section content */
.section-heading { margin-bottom: var(--sp-6); }
.card-grid, .dashboard-grid, .steps-grid { display: grid; gap: var(--sp-5); }
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-grid, .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.info-card, .dashboard-card, .step-card { padding: var(--sp-5); }
/* DECISION LIST — vertical stacked annotations, e.g. "judgment calls" callouts
   under a diagram. One item per row rather than a card grid, for short notes
   that read better top-to-bottom than side-by-side. */
.decision-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.decision-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.decision-item .tag {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 0.1rem var(--sp-2);
  margin-bottom: var(--sp-2);
}
.decision-item p { margin: 0; color: var(--text); font-size: var(--fs-md); }
.contact-box { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-5); }
/* EMBED LOADING STATE — spinner/message laid over an iframe until it loads.
   script.js (watchEmbedLoad) adds .is-loading / .is-slow / .is-loaded to the
   container. Without JavaScript the overlay never shows. */
.embed-status {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-md);
  background: var(--surface);
  border-radius: inherit;
}
.is-loading > .embed-status { display: flex; }
.is-slow > .embed-status { flex-direction: column; }
.is-slow .spinner { display: none; }
.spinner {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* REPORT CARDS — built by script.js from the REPORTS list. */
.report-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}
/* A report with a real embed spans the full row so it's readable. */
.report-card--live { grid-column: 1 / -1; }
.report-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.report-card-header h3 { margin: 0; }
.report-question { color: var(--muted); margin: var(--sp-2) 0 var(--sp-4); }
.status-chip {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
}
.report-frame {
  position: relative;
  margin-top: auto;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
.report-card--live .report-frame { aspect-ratio: 16 / 9.5; }
.report-frame iframe { display: block; width: 100%; height: 100%; border: none; }
.report-pending-msg {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* Report preview image (while a report is "In build") */
.report-preview { position: absolute; inset: 0; display: block; }
.report-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* REPORT MOCK — the grey outline of a dashboard shown while a report is
   "In build". Purely decorative (hidden from screen readers). */
.report-mock {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-8);
}
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.mock-kpi { height: 1.6rem; border-radius: var(--r-sm); background: var(--accent-soft); border: 1px solid var(--border); }
.mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 6%;
  padding: 0 var(--sp-1);
  border-bottom: 1px solid var(--border);
  min-height: 2.5rem;
}
.mock-bar { flex: 1; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--on-dark-muted); }
.mock-rows { display: grid; gap: var(--sp-1); }
.mock-row { height: 0.45rem; border-radius: var(--r-pill); background: var(--border); }
.mock-row:nth-child(2) { width: 85%; }
.mock-row:nth-child(3) { width: 65%; }

.noscript-note { color: var(--muted); }

/* PLACEHOLDER CHIP — marks a detail still to be confirmed ("Name TBC").
   The real token is in the element's data-placeholder
   attribute. Delete the chip when you fill the value in: see the project notes in OneDrive. */
.tbc {
  display: inline-block;
  padding: 0.05em 0.55em;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  background: var(--accent-soft);
  border: 1px dashed #9db8a6;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: 0.05em;
}

/* HERO PERSON — photo, name and location at the top of the hero card. */
.hero-person { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.headshot { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--accent-soft); }
.person-name { margin: 0; font-weight: 700; font-size: var(--fs-md); }
.person-meta { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* GAME SLOT — poster with a Play button; pressing Play swaps in the game
   (script.js, search "GAME SLOT"). While playing, the game takes the full
   width and the text sits underneath. */
.game-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.game-stage { position: relative; }
.game-poster { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); }
.game-play {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  padding: var(--sp-3) var(--sp-6);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.game-play:hover { filter: brightness(0.95); }
.game-play:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.game-copy { color: var(--muted); }
.game-links { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.game-links a { color: var(--accent); text-underline-offset: 3px; }
.game-frame { display: block; width: 100%; border: 0; }
.game-grid.is-playing { grid-template-columns: minmax(0, 1fr); }
.game-grid.is-playing [data-game-play] { display: none; }

/* ABOUT lead paragraph — the differentiator, slightly larger than body text. */
.section-heading .lead { color: var(--text); font-size: var(--fs-md); max-width: 48rem; }

/* Small label above a card heading, e.g. "Sales" on the Why clarity matters cards. */
.card-tag {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 0.1rem var(--sp-2);
}

/* DEV NOTES — big orange "TO DO" reminders for the site owner. They are
   hidden by default and only shown while <body class="dev-notes">. Before
   going live, remove that class from the body tag in index.html. */
.devnote { display: none; }
body.dev-notes .devnote { display: flex; }
.devnote--bar {
  justify-content: center;
  padding: 0.6rem 1rem;
  text-align: center;
  font-weight: 700;
  color: #3a2300;
  background: #ffb020;
  border-bottom: 3px solid #3a2300;
}
.devnote--big {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  text-align: center;
  color: #3a2300;
  background: rgba(255, 176, 32, 0.96);
  border: 4px dashed #3a2300;
  border-radius: 0.6rem;
  pointer-events: none; /* clicks still reach the image/link underneath */
}
.devnote--inline { margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); color: #3a2300; background: rgba(255, 176, 32, 0.96); border: 3px dashed #3a2300; border-radius: 0.6rem; font-weight: 700; }
.devnote--big strong { font-size: clamp(0.95rem, 2.2vw, 1.5rem); line-height: 1.15; }
.devnote--big small { font-size: 0.8rem; line-height: 1.3; }
.display-link { display: block; position: relative; }

/* BRAND MARK — the green "4" square before the name in the header */
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.9rem; padding: 0 var(--sp-1); border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: var(--fs-md); line-height: 1;
}

.brand-mark sup { font-size: 0.55em; font-weight: 700; margin-left: 1px; }
.brand sup { font-size: 0.6em; line-height: 0; }

/* HERO extras — the "three sheets" lead line and the two audience links */
.hero-lead { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 600; color: var(--accent); line-height: 1.35; }
.hero-paths { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin: 0; font-weight: 600; }
.hero-paths a { color: var(--accent); text-decoration: none; }
.hero-paths a:hover { text-decoration: underline; }

/* CREDIBILITY STRIP — one line under the hero */
.cred-strip { background: var(--text); color: var(--accent-soft); padding: var(--sp-4) 0; }
.cred-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-6); }
.cred-line { margin: 0; font-size: var(--fs-md); max-width: 52rem; }
.cred-names { margin: 0; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; }

/* AUDIENCE SECTIONS — spine number beside the "next layer" numbers */
.audience-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-6); align-items: start; }
.spine { background: var(--accent); color: var(--on-accent); border-radius: var(--r-md); padding: var(--sp-6) var(--sp-6); }
.spine-label { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-muted); }
.spine strong { display: block; margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-xl); line-height: 1.15; }
.spine p { margin: 0; color: var(--accent-soft); }
.next-layer { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.next-layer li { padding: 0 0 var(--sp-3); border-bottom: 1px solid var(--border); color: var(--muted); }
.next-layer li:last-child { border-bottom: 0; padding-bottom: 0; }
.next-layer strong { color: var(--text); }
.audience-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.proof { margin: 0; color: var(--muted); }
.proof strong { color: var(--text); }
.proof-label { display: inline-block; margin-right: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); padding: 0.1rem var(--sp-2); }

/* TRACK RECORD — two groups of cards */
.record-group { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.record-group:first-of-type { margin-top: 0; }
.card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.info-card a { color: var(--accent); text-underline-offset: 3px; }

/* HERO DASHBOARD — sample statements and "the fourth sheet" on the home page */
.hero-grid--dash { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: start; }   /* the dashboard gets ~55% */
.hero-grid--dash > div:first-child { padding-top: var(--sp-3); }   /* the eyebrow lines up with the dashboard's first row */
.hero-grid--dash > div:first-child > .eyebrow { margin-top: 0; }
.dash-orgbar { margin-bottom: var(--sp-2); }
.hero-grid > * { min-width: 0; }   /* columns may shrink below their content's widest line (the toggles scroll instead) */
/* The headline with the sheets illustration (assets/brand/sheets-illustration.svg) on a brand-green panel beside it. */
.hero-headline { display: flex; align-items: center; gap: var(--sp-5); }
.hero-headline h1 { flex: 1; min-width: 0; }
.hero-sheets { flex: none; background: var(--accent); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-4); line-height: 0; }
.hero-sheets img { display: block; width: 104px; height: auto; }
.h1-accent { color: var(--accent); }
.hero-byline { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.hero-byline strong { color: var(--text); }
.headshot--sm { width: 36px; height: 36px; }
.headshot--lg { width: 96px; height: 96px; }
.about-intro { display: flex; align-items: center; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-5); font-size: var(--fs-md); }
.moment-result { margin: auto 0 0; padding-top: var(--sp-3); color: var(--accent); font-weight: 700; }
.moment { display: flex; flex-direction: column; }
.moment .card-tag { align-self: flex-start; }
/* CAREER STORIES as rows: tag and question on the left, what was done in the middle, the result on the right.
   Rows take any height, so stories of different lengths sit evenly. Phones: one column, top to bottom. */
#career .card-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
#career .moment { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr); grid-template-areas: "tag desc result" "q desc result"; grid-template-rows: auto 1fr;
  column-gap: var(--sp-7); row-gap: 0; align-items: start; }
#career .moment .card-tag { grid-area: tag; justify-self: start; }
#career .moment h3 { grid-area: q; margin: var(--sp-2) 0 0; }
#career .moment > p:not(.moment-result) { grid-area: desc; margin: 0; }
#career .moment .moment-result { grid-area: result; margin: 0; padding: 0 0 0 var(--sp-5); border-left: 2px solid var(--accent-tint-border, var(--border)); }
#career .moment .moment-quote { grid-column: 2 / -1; }      /* only takes a row once it's shown */
@media (max-width: 900px) {
  #career .moment { grid-template-columns: 1fr; grid-template-areas: "tag" "q" "desc" "result"; grid-template-rows: none; row-gap: var(--sp-3); }
  #career .moment .moment-quote { grid-column: 1; }
  #career .moment h3 { margin-top: 0; }
  #career .moment .moment-result { padding: var(--sp-3) 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
}
.moment-quote { margin: var(--sp-4) 0 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 2px solid #0B6E4F; font-weight: 400; }
.moment-quote p { margin: 0 0 var(--sp-1); color: var(--text); font-size: var(--fs-sm); }
.moment-quote footer { font-size: var(--fs-xs); color: var(--muted); }
.moment-quote[data-placeholder], .moment-quote[hidden] { display: none; }   /* hidden until the quote is filled in */
.about-links a:not(.button) { color: var(--accent); font-weight: 600; }
.about-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin: 0; }
.hero-dash { margin: 0; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); }   /* no overflow clipping: the Export menu must show in full */
.dash-head { padding: var(--sp-3) var(--sp-3) 0; }
.dash-body { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.dash-kpi { padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0; }
.dash-kpi span { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
.dash-kpi strong { display: block; font-size: var(--fs-lg); line-height: 1.2; margin: 0.1rem 0; color: var(--text); }
.dash-kpi em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--muted); }
.dash-kpi em.good { color: var(--accent); font-weight: 600; }
.dash-chart { margin-top: var(--sp-3); }
.dash-chart-title { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.dash-svg { display: block; max-width: 100%; height: auto; overflow: visible; }   /* drawn at its real width: never stretched */
.dash-svg .dash-grid { stroke: var(--border); stroke-width: 1.5; }
.dash-svg .dash-bar { fill: var(--good); transform-box: fill-box; transform-origin: bottom; animation: dash-rise 600ms ease-out both; }
.dash-svg .dash-bar--below { fill: var(--neutral-bar); }
.dash-svg .dash-bar--bad { fill: var(--bad); }
.dash-svg .dash-bar--warn { fill: var(--warn); }
.dash-svg .dash-bar--good { fill: var(--good); }
.dash-svg .dash-value--good { fill: var(--accent); }
.dash-svg .dash-value { font-size: 12px; font-weight: 500; fill: var(--muted); paint-order: stroke; stroke: var(--paper); stroke-width: 2px; stroke-linejoin: round; font-variant-numeric: tabular-nums; animation: dash-fade 300ms 450ms ease-out both; }
@keyframes dash-fade { from { opacity: 0; } }
.dash-svg .dash-bar--h { transform-origin: left; animation-name: dash-grow; }
@keyframes dash-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dash-svg .dash-key { font-size: 11px; fill: var(--muted); }
.dash-svg .dash-axis { font-size: 11px; fill: var(--muted); }
.dash-svg .dash-target { stroke: var(--ink-line); stroke-width: 1; stroke-dasharray: 3 2; }
.dash-svg .dash-target-label { font-size: 11px; font-weight: 600; fill: var(--ink-line); }
.dash-svg .dash-breakeven { stroke: var(--bad); stroke-width: 1; stroke-dasharray: 1 2; }
.dash-svg .dash-breakeven-label { font-size: 11px; font-weight: 600; fill: var(--bad); }
@keyframes dash-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .dash-svg .dash-bar, .dash-svg .dash-value { animation: none; } }
.dash-table, .st-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.dash-table th, .st-table thead th { text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: var(--sp-1) var(--sp-1); border-bottom: 1px solid var(--border); }
.dash-table td, .st-table td { padding: var(--sp-1) var(--sp-1); border-bottom: 1px solid var(--track); }
.dash-table .n, .st-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-total td { font-weight: 700; border-top: 1px solid var(--text); border-bottom: 3px double var(--text); }
/* statements: the line types */
.st-scroll { max-height: 26rem; overflow-y: auto; overflow-x: auto; }
.st-table .st-change { color: var(--muted); font-style: italic; }
.st-table thead th { position: sticky; top: 0; background: var(--paper); }
.st-heading th { padding: var(--sp-2) var(--sp-1) var(--sp-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); text-align: left; border: 0; }
.st-detail td:first-child { padding-left: var(--sp-4); color: var(--muted); }
.st-subtotal td { font-weight: 600; }
.st-total td { font-weight: 700; border-top: 1px solid var(--border-strong); }
.st-key td { font-weight: 700; color: var(--accent); background: var(--accent-soft); border-top: 1px solid var(--text); border-bottom: 3px double var(--text); }
.dash-phone-note { display: none; margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.dash-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--muted); background: var(--surface); border-top: 1px solid var(--border); }
.dash-sample { font-weight: 600; }
.dash-check { margin-left: var(--sp-2); padding: 0.1rem var(--sp-2); border-radius: var(--r-pill); font-weight: 700; }
.dash-check.is-ok { color: var(--accent); background: var(--good-soft); }
.dash-check.is-bad { color: var(--bad); background: var(--bad-soft); }


/* SEG — the one segmented toggle: statement tabs, sample business, %/$ views, report filters, period
   ranges. 36px tall (44px on touch screens), a clear selected state, arrow keys move along (script.js).
   When there isn't room it scrolls sideways in one row rather than wrapping into two. */
.seg { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; padding: 3px; background: var(--track); border-radius: var(--r-pill); overflow-x: auto; scrollbar-width: none; vertical-align: middle; }
.seg::-webkit-scrollbar { display: none; }
.seg > button { flex: none; min-height: 36px; padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1; color: var(--muted); white-space: nowrap; background: transparent; border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer; }
.seg > button:hover { color: var(--text); }
.seg > button[aria-pressed="true"], .seg > button[aria-selected="true"] { color: var(--accent); font-weight: 700; background: var(--paper); border-color: var(--border); box-shadow: var(--shadow-sm); }
.seg > button:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
@media (pointer: coarse) { .seg > button { min-height: 44px; } }
.seg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.seg-bar > .seg, .report-toggles, .report-toggles > .seg, .dash-chart-head > * { min-width: 0; max-width: 100%; }
.seg-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

.dash-body > .seg, .deliv-bar .seg { margin-bottom: var(--sp-3); }
.dash-chart-head .seg, .report-toggles .seg { margin-bottom: var(--sp-2); }

/* EXPORT MENU — one Export button and its menu (script.js mountExportMenu). A popover anchored to the button;
   a bottom sheet on phones. */
.xm { position: relative; display: inline-block; }
.xm-btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--accent); background: var(--paper); border: 1.5px solid var(--accent); border-radius: var(--r-pill); cursor: pointer; }
.xm-btn:hover { background: var(--accent-soft); }
.xm-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.xm-ico { width: 18px; height: 18px; }
.xm-chev { width: 16px; height: 16px; transition: transform 150ms ease; }
.xm.is-open .xm-chev { transform: rotate(180deg); }
@media (pointer: coarse) { .xm-btn { min-height: 44px; } }
.xm-menu { position: absolute; right: 0; top: calc(100% + var(--sp-2)); z-index: 40; width: min(360px, calc(100vw - 2rem)); padding: var(--sp-2); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.xm-menu[hidden] { display: none; }
.xm-head { margin: var(--sp-1) var(--sp-2) var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.xm-head strong { color: var(--text); }
.xm-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; min-height: 44px; padding: var(--sp-3); color: var(--text); text-decoration: none; border-radius: var(--r-sm); }
.xm-item:hover, .xm-item:focus-visible { background: var(--accent-soft); outline: none; }
.xm-item[aria-disabled] { color: var(--muted); cursor: not-allowed; }
.xm-item[aria-disabled] .xm-badge { background: var(--track); color: var(--muted); }
.xm-badge { min-width: 48px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); font-weight: 700; text-align: center; color: var(--on-accent); background: var(--accent); border-radius: var(--r-sm); }
.xm-text { display: grid; gap: 2px; }
.xm-text b { font-size: var(--fs-sm); }
.xm-text span { font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.xm-size { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.xm-size:empty { display: none; }
.xm-foot { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.xm-sub { display: block; min-height: 40px; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-align: left; color: var(--accent); background: none; border: 0; border-radius: var(--r-sm); text-decoration: none; cursor: pointer; }
.xm-sub:hover, .xm-sub:focus-visible { background: var(--accent-soft); outline: none; }
@media (max-width: 720px) {
  .xm-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-6); border-radius: var(--r-md) var(--r-md) 0 0; }
  .xm.is-open::before { content: ""; position: fixed; inset: 0; z-index: 39; background: var(--backdrop); }
  .xm-item, .xm-sub { min-height: 44px; }
}
.report-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-2); }
.report-head-row .report-period { margin: 0; }
.report-back-line { margin: var(--sp-4) 0 0; }
.dash-export, .deliv-export { margin-left: auto; }
.dash-export .xm-menu { top: auto; bottom: calc(100% + var(--sp-2)); }     /* the hero's Export sits on the bottom row: open upwards */
.hero-dash > .dash-caption { border-radius: 0 0 var(--r-md) var(--r-md); }
.link-btn { padding: 0; font: inherit; font-weight: 600; color: var(--accent); background: none; border: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* CONTACT PAGE — the form and the booking panel */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; margin-top: var(--sp-6); }
.contact-form, .contact-book { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.contact-form { display: grid; gap: var(--sp-4); }
.contact-book { background: var(--accent-soft); }
.contact-book h2 { font-size: var(--fs-lg); }
.contact-request { margin: 0; padding: var(--sp-3) var(--sp-4); background: var(--accent-tint); border: 1px solid var(--accent-tint-border); border-radius: var(--r-sm); }
.contact-topic { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
.contact-topic legend { margin-bottom: var(--sp-2); font-weight: 700; }
.contact-topic label, .field-check { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: 32px; }
.contact-topic input, .field-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-1); }
.field > span { font-size: var(--fs-sm); font-weight: 700; }
.field small { font-weight: 400; color: var(--muted); }
.field input, .field textarea { min-height: 44px; padding: var(--sp-2) var(--sp-3); font: inherit; color: var(--text); background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.field-check { font-size: var(--fs-sm); color: var(--muted); }
.field-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form .button { justify-self: start; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.form-status { margin: 0; font-weight: 600; color: var(--accent); }
.form-status:empty { display: none; }
.contact-form-link { margin: var(--sp-2) 0 0; }
.contact-form-link a { font-weight: 700; color: var(--accent); }
@media (max-width: 900px) { .contact-grid, .field-row { grid-template-columns: 1fr; } }

/* ASSUMPTIONS POP-UP */
.assumptions { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); background: var(--paper); box-shadow: var(--shadow-md); }
.assumptions::backdrop { background: var(--backdrop); }
.assumptions-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--paper); border-bottom: 1px solid var(--border); }
.assumptions-head h2 { margin: 0; font-size: var(--fs-lg); }
.assumptions-close { width: 2.2rem; height: 2.2rem; font-size: var(--fs-lg); line-height: 1; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.assumptions-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.assumptions-body { padding: var(--sp-2) var(--sp-5) var(--sp-5); overflow-y: auto; }
.assumptions-intro { color: var(--muted); }
.assumptions-body h3 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.assumptions-body dl { margin: 0; }
.assumptions-body dl div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--track); font-size: var(--fs-sm); }
.assumptions-body dt { color: var(--muted); }
.assumptions-body dd { margin: 0; }
.assumptions-checks { margin: 0; padding: 0; list-style: none; }
.assumptions-checks li { padding: var(--sp-1) 0 var(--sp-1) var(--sp-6); position: relative; font-size: var(--fs-sm); }
.assumptions-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* EXAMPLE QUESTIONS — chips on the doors and audience pages ("…or bring your own") */
.q-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-1); padding: 0; list-style: none; }
.q-chips li { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); line-height: 1.3; color: var(--text); background: var(--accent-soft); border-radius: var(--r-md); }
.q-chips .q-own { background: transparent; border: 1px solid var(--border-strong); color: var(--accent); font-weight: 600; }
.q-chips--page { margin-top: var(--sp-3); }
.q-chips--page li { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); }
.q-intro { margin: var(--sp-4) 0 0; font-weight: 700; color: var(--text); }

/* QUESTION ROWS — the questions on the home page doors: full-width rows, the same padding, › on the right */
.soon-tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.cards-soon { margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); color: var(--muted); background: var(--track); border-radius: var(--r-sm); }
.cards-soon strong { color: var(--text); }

/* HUB AND SPOKE — home "doors", sub-page headers, links between pages */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.door {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-6); text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.door-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.door strong { font-size: var(--fs-lg); line-height: 1.2; }
.door-text { color: var(--muted); }
.door-go { margin-top: auto; padding-top: var(--sp-2); font-weight: 700; color: var(--accent); }
.page-top { padding-top: var(--sp-8); }
.page-top h1 { font-size: var(--fs-2xl); }
.more-link { margin: var(--sp-5) 0 0; font-weight: 700; }
.more-link a { color: var(--accent); text-decoration: none; }
.more-link a:hover { text-decoration: underline; }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* WHO I'VE WORKED WITH — plain lists of organisations */
.org-lists { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-7) var(--sp-8); }
.org-group { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.org-list { margin: 0; padding: 0; list-style: none; columns: 2 14rem; column-gap: var(--sp-7); }
.org-list li { break-inside: avoid; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-md); font-weight: 600; color: var(--text); }

/* THE OFFER — three-rung ladder */
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin: 0 0 var(--sp-6); padding: 0; list-style: none; }
.rung { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.rung-step { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-bottom: var(--sp-2); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.rung p { color: var(--muted); }
.rung-price { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); font-weight: 700; color: var(--text); }
.rung-price small { display: block; font-weight: 400; color: var(--muted); }
.rung-tag { display: block; margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 700; color: var(--accent); }
.rung-price span:empty { display: none; }
.ladder-price { margin: 0 0 var(--sp-2); font-weight: 700; color: var(--text); }
.offer-cta { margin-top: var(--sp-6); }

/* NO DATA YET? — help clients start capturing data */
.no-data { margin: 0 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--accent-soft); border: 1px solid var(--accent-tint-border); border-radius: var(--r-md); }
.no-data h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); }
.no-data p { margin: 0; color: var(--muted); }
.no-data-line { margin: var(--sp-5) 0 0; color: var(--muted); }
.no-data-line strong { color: var(--text); }
.no-data-line a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

/* DEV NOTE (inline) — a small orange TO DO line in the page flow */
.devnote--inline { margin: 0 0 0.75rem; padding: 0.35rem 0.7rem; font-size: 0.85rem; font-weight: 700; color: #3a2300; background: #ffb020; border: 2px dashed #3a2300; border-radius: 0.4rem; width: fit-content; }

/* TOOLS STRIP — "Tools I work in", grouped chips under the hero. */
.tools-strip { padding: var(--sp-6) 0 var(--sp-6); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.tools-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-4); }
.tools-heading { margin: 0; font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tools-note { margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--accent); }
/* One row per group: label on the left, tools in a single line to the
   right. On phones the label sits above its tools. */
.tool-groups { display: grid; }
.tool-group {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
}
.tool-group:first-child { border-top: 0; padding-top: 0; }
.tool-group-name { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.tool-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.tool {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.tool img { display: block; }
.tool-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--accent);
  border-radius: var(--r-sm);
}

/* LIVE DISPLAYS — three dashboard screenshots (warehouse, reception, boardroom). */
.display-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.display { margin: 0; }
.display img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.display a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-md); }
.display figcaption { margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--muted); }
.display figcaption strong { color: var(--text); }
.display-note { margin: var(--sp-4) 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* EXAMPLE SPLIT — text beside one large example image (templates) */
.example-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-7); align-items: center; }
.example-list { margin: var(--sp-4) 0 0; padding-left: var(--sp-4); color: var(--muted); }
.example-list li { margin-bottom: var(--sp-1); }
.example-list li::marker { color: var(--accent); }

/* QUICK WINS — six small automations in a ticked grid */
.wins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-7); margin: 0; padding: 0; list-style: none; }
.wins-grid li { position: relative; padding-left: var(--sp-7); color: var(--muted); line-height: 1.55; }
.wins-grid strong { display: block; color: var(--text); margin-bottom: var(--sp-1); }
.wins-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h7M7.5 4.5L11 8l-3.5 3.5' fill='none' stroke='%232f7a5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.85rem no-repeat;
}
.win-tools { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--accent); }

/* WHAT I DO — the three packages (Set up / Dig in / Stay on top). */
.package-card { display: flex; flex-direction: column; }
.package-card .card-tag { align-self: flex-start; }
.package-price { margin: 0 0 var(--sp-2); font-weight: 600; color: var(--text); }
.package-price a { color: var(--accent); text-underline-offset: 3px; }
.package-list { margin: 0; padding-left: var(--sp-4); color: var(--muted); }
.package-list li { margin-bottom: var(--sp-2); }
.package-list li::marker { color: var(--accent); }

/* STARTER BUNDLE — price/delivery strip and the scope list. */
.offer-summary { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.offer-fact {
  flex: 1 1 14rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.offer-fact strong { font-size: var(--fs-lg); margin-right: var(--sp-2); }
.offer-note { color: var(--muted); font-size: var(--fs-sm); }
.scope-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); margin: var(--sp-6) 0 0; }
.scope-list dt { font-weight: 700; }
.scope-list dd { margin: var(--sp-1) 0 0; color: var(--muted); }
.scope-list a { color: var(--accent); text-underline-offset: 3px; }

/* HOW IT WORKS — what the client has to do. */
.client-needs {
  margin-top: var(--sp-5);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
}
.client-needs h3 { margin-bottom: var(--sp-2); font-size: var(--fs-md); }
.client-needs p { margin: 0; }

/* SERVICES — each rung in depth; the first 30 days; report cards that link. */
.rung-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin-bottom: var(--sp-6); }
.rung-card { padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; }
.rung-card-step { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); color: var(--accent); font-size: var(--fs-sm); font-weight: 700; }
.rung-card-step .rung-step { margin: 0; }
.rung-card h2 { font-size: var(--fs-xl); margin: 0 0 var(--sp-2); }
.rung-card .rung-price { margin-top: 0; }
.rung-card dl { margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-3); }
.rung-card dt { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.rung-card dd { margin: var(--sp-1) 0 0; font-size: var(--fs-md); }
.draft { font-style: italic; }
.steps-grid--weeks { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.step-when { margin: 0 0 var(--sp-1); color: var(--accent); font-size: var(--fs-sm); font-weight: 700; }
.info-card--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.info-card--link:hover, .info-card--link:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.info-card--link .card-tag { align-self: flex-start; }
.card-more { margin-top: auto; padding-top: var(--sp-3); color: var(--accent); font-weight: 600; font-size: var(--fs-sm); }

/* CONTACT — secondary contact options under the main text. */
.contact-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: 0; }
.contact-cta { flex: none; }

.site-footer { padding: var(--sp-6) 0 var(--sp-7); color: var(--muted); }
.footer-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.footer-links a { color: var(--text); font-weight: 500; text-decoration: none; padding: var(--sp-1) 0; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
.footer-content { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: var(--sp-4); }
@media (max-width: 900px) {
  .rung-detail { grid-template-columns: 1fr; }
  .hero-grid--dash, .wins-grid, .card-grid, .card-grid--two, .audience-grid, .ladder, .doors, .org-lists, .dashboard-grid, .steps-grid, .hero-grid, .report-grid, .game-grid, .scope-list, .display-grid, .excel-grid, .example-split { grid-template-columns: 1fr; }
  .contact-box { flex-direction: column; align-items: flex-start; }
  /* MOBILE SECTION SPACING — tighten further on tablet/mobile */
  .section { padding: var(--sp-5) 0; }
  .section-heading { margin-bottom: var(--sp-4); }
}
@media (max-width: 720px) {
  .hero-sheets { padding: var(--sp-2); }
  .hero-sheets img { width: 64px; }
  .st-table .detail { display: none; }
  .dash-kpis { grid-template-columns: 1fr 1fr; }
  .dash-kpis > .dash-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* three tiles: the third takes the row */
  .dash-phone-note { display: block; }
  .st-scroll { max-height: none; }
  .assumptions-body dl div { grid-template-columns: 1fr; gap: 0.1rem; }
  .tool-group { grid-template-columns: 1fr; gap: var(--sp-2); }
  .nav-toggle { display: inline-block; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); }
  .nav-links > a { display: flex; align-items: center; min-height: 44px; }
  .nav-links .nav-book { display: flex; justify-content: center; margin-top: var(--sp-2); }
  .nav-links.open { display: flex; }
  .hero { padding-top: var(--sp-7); padding-bottom: var(--sp-6); }
}

/* ---------------------------------------------------------------- DELIVERIES MAP (work.html) */
.deliv { margin: 0; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.deliv-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) 0; }
.deliv-period { margin: var(--sp-2) var(--sp-4) 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.deliv-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); }
.deliv-kpis div { padding: var(--sp-2) var(--sp-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.deliv-kpis span { display: block; font-size: var(--fs-xs); color: var(--muted); }
.deliv-kpis strong { font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.deliv-kpis .bad strong { color: var(--bad); }
.deliv-body { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--sp-4); padding: 0 var(--sp-4) var(--sp-4); }
.deliv-map { height: 420px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--track); z-index: 0; }
.deliv-side h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); }
.deliv-side ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); font-size: var(--fs-sm); }
.deliv-side ol li { margin: var(--sp-1) 0; }
.deliv-side ol li b { color: var(--bad); }
.deliv-legend { list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--muted); }
.deliv-legend li { margin: var(--sp-1) 0; }
.deliv-legend i { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: var(--sp-2); border-radius: 50%; vertical-align: -1px; }
.deliv-note { font-size: var(--fs-xs); color: var(--muted); }
.leaflet-container { font-family: "Roboto", "Segoe UI", Arial, sans-serif; }   /* the map library uses Helvetica by default */
.deliv-dc { padding: 1px var(--sp-1); font: 700 11px "Roboto", "Segoe UI", Arial, sans-serif; color: var(--paper); background: var(--text); border-radius: var(--r-sm); white-space: nowrap; }
@media (max-width: 720px) {
  .deliv-kpis { grid-template-columns: repeat(2, 1fr); }
  .deliv-body { grid-template-columns: 1fr; }
  .deliv-map { height: 340px; }
}

/* Workings behind the numbers (hero dashboard) */
button.dash-kpi { font: inherit; text-align: left; color: inherit; cursor: pointer; }
button.dash-kpi:hover { border-color: var(--accent); }
button.dash-kpi:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.dash-how { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.dash-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.dash-svg .dash-row { cursor: pointer; outline: none; }
.dash-svg .dash-hit { fill: transparent; }
.dash-svg .dash-row:hover .dash-hit, .dash-svg .dash-row:focus-visible .dash-hit { fill: var(--track); }
.dash-svg .dash-mark { stroke: var(--ink-line); stroke-width: 1.4; }
.dash-hint { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.support-formula { margin: var(--sp-2) 0; font-weight: 600; }
.support-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.support-table th, .support-table td { padding: var(--sp-1) var(--sp-1); border-bottom: 1px solid var(--track); text-align: left; font-weight: 400; }
.support-table thead th { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.support-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.support-table tbody tr:last-child th, .support-table tbody tr:last-child td { font-weight: 700; border-top: 1px solid var(--border); }
.support-chart-title { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.support-foot { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }

/* Data status: how final the numbers are (Locked / Provisional / Incomplete) */
.dash-status { display: inline-block; padding: 0.05rem var(--sp-2); font-size: var(--fs-xs); font-weight: 700; border: 1px solid currentColor; border-radius: var(--r-pill); cursor: help; }
.dash-status.is-locked { color: var(--accent); }
.dash-status.is-provisional { color: var(--warn); }
.dash-status.is-incomplete { color: var(--bad); }
.dash-status-line { margin: -0.3rem 0 var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.deliv-status { margin: var(--sp-1) var(--sp-4) 0; font-size: var(--fs-xs); color: var(--muted); }
.deliv-status .dash-status { margin-right: var(--sp-2); cursor: default; }
.dash-chart-sub { margin: -0.15rem 0 var(--sp-2); font-size: var(--fs-xs); line-height: 1.35; color: var(--muted); }

/* ---------------------------------------------------------------- REPORT PAGES (report-*.html) */
.report-page .eyebrow a { color: inherit; }
.report-crumb { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; }
.report-embed { position: relative; padding: 0; overflow: hidden; }
.report-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 10; min-height: 420px; border: 0; }
.report-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); }
#report-root { margin-top: var(--sp-4); }
.report-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-2); }
.report-period label { font-weight: 700; font-size: var(--fs-sm); }
.report-period select { font: inherit; font-size: var(--fs-md); padding: var(--sp-2) var(--sp-7) var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); max-width: 100%; }
.report-period select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.report-period select:disabled { opacity: 0.6; }
.report-period-note { color: var(--bad); font-size: var(--fs-sm); }
.report-blocks { margin-bottom: var(--sp-4); }
.report-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--sp-4); }
.report-card { margin: 0 0 var(--sp-4); padding: var(--sp-4) var(--sp-4); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); }
.report-h { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.report-toggles { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.report-scroll { overflow-x: auto; }
.report-cols { display: block; width: 100%; height: auto; }
.dash-svg .dash-col { fill: var(--good); }
.dash-svg .dash-col--light { fill: var(--good); fill-opacity: 0.35; stroke: var(--good); stroke-dasharray: 3 2; }
.dash-svg .dash-value--v { font-size: 12px; }
.dash-svg .dash-key--warn { fill: var(--bad); font-size: 11px; }
.report-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.report-text > div { padding: var(--sp-4) var(--sp-4); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); }
.report-text p { margin: 0; }
.report-text .report-act { background: var(--accent-tint); }
.report-table .st-total td { font-weight: 700; border-top: 1px solid var(--border); }
.report-list { margin: 0; padding-left: var(--sp-5); } .report-list li { margin: var(--sp-1) 0; }
@media (max-width: 720px) { .report-text { grid-template-columns: 1fr; } }
.report-card { min-width: 0; }
.report-back { margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: none; }
.report-back:hover { text-decoration: underline; }

/* Question chips that open a report */
.q-chips li:has(a) { padding: 0; }
.q-chips li a { display: block; padding: var(--sp-1) var(--sp-3); color: inherit; text-decoration: none; border-radius: inherit; }
.q-chips--page li a { padding: var(--sp-2) var(--sp-3); }
.q-chips li a::after { content: " \203A"; color: var(--accent); font-weight: 700; }
.q-chips li a:hover, .q-chips li a:focus-visible { background: var(--accent-soft-hover); outline: 2px solid var(--accent); outline-offset: -2px; }
.q-chips .q-later { color: var(--muted); background: transparent; border: 1px dashed var(--border); }
.door .door-go { color: var(--accent); font-weight: 600; text-decoration: none; }
.door .door-go:hover { text-decoration: underline; }
/* Example report cards (SME and not-for-profit pages) */
.report-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.report-cards li { display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-5); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); }
.report-cards h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); } .report-cards h3 a { color: var(--text); text-decoration: none; }
.report-cards p { margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }
.report-cards .report-open { margin-top: auto; color: var(--accent); font-weight: 600; text-decoration: none; }
.report-cards .report-open:hover { text-decoration: underline; }
.report-cards .report-later { background: transparent; border-style: dashed; }

@media (max-width: 1000px) { .report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .report-cards { grid-template-columns: 1fr; } }

/* Live charts on the SME and not-for-profit pages */
.report-feature { margin: 0 0 var(--sp-6); }
.report-feature .eyebrow a { color: inherit; }
.card-chart { margin: var(--sp-1) 0 var(--sp-2); }
.card-chart .report-scroll { overflow: hidden; }
.report-cards .card-kpi { margin: 0 0 var(--sp-1); color: var(--text); } .card-kpi strong { font-size: var(--fs-lg); color: var(--accent); }
.card-kpi span { font-size: var(--fs-xs); color: var(--muted); }
.report-cards .card-chart-title { margin: 0 0 2px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.card-chart .dash-hint { display: none; }
.card-chart .dash-value, .card-chart .dash-key--warn { display: none; }
.mini-bars { list-style: none; margin: var(--sp-1) 0 0; padding: 0; }
.mini-bars li { display: grid; grid-template-columns: 42% 1fr auto; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0; font-size: var(--fs-xs); }
.mini-bars .mb-l { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.mini-bars .mb-t { height: 0.55rem; background: var(--track); border-radius: var(--r-sm); }
.mini-bars .mb-t i { display: block; height: 100%; background: var(--good); border-radius: var(--r-sm); }
.mini-bars .mb-t i.below { background: var(--neutral-bar); }
.mini-bars .mb-v { font-variant-numeric: tabular-nums; color: var(--text); }
.report-cards .mini-bars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(40px, 1fr) auto; padding: 0; background: none; border: 0; border-radius: 0; }
.mini-bars .mb-l { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
.dash-svg .dash-value--top { font-size: 12px; }
.report-feature-line { margin: 0 0 var(--sp-2); color: var(--text); }

/* Area charts (report pages): labelled y-axis, light gridlines */
.dash-svg .dash-line { fill: none; stroke: var(--good); stroke-width: 3; stroke-linejoin: round; }
.dash-svg .dash-line--light { stroke-dasharray: 4 3; stroke-opacity: 0.6; }
.dash-svg .dash-dot { fill: var(--paper); stroke: var(--good); stroke-width: 1.6; }
.dash-svg .dash-dot--light { stroke-opacity: 0.55; }
.dash-svg .dash-row:hover .dash-dot, .dash-svg .dash-row:focus-visible .dash-dot { fill: var(--good); }
.dash-svg .dash-gridline { stroke: var(--grid); stroke-width: 1; }
.dash-svg .dash-ytick { font-size: 11px; fill: var(--muted); }
.report-area { display: block; height: auto; }
.report-area--mini .dash-value--top { font-size: 11px; }
.dash-svg .dash-row--dim .dash-bar { fill-opacity: 0.3; }
.dash-svg .dash-row--dim .dash-axis, .dash-svg .dash-row--dim .dash-value { fill-opacity: 0.55; }
.report-table tr.st-hl td { background: var(--accent-tint); font-weight: 700; }
.report-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: var(--sp-2) var(--sp-3); background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); }
.report-filter > span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.card-chart .dash-value { display: inline; }


/* Definition box and the gross-margin-to-profit insight (report pages) */
.report-def { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--note-bg); border: 1px solid var(--note-border); border-left: 4px solid var(--note-edge); border-radius: var(--r-md); }
.report-def summary { cursor: pointer; min-height: 28px; }
.report-kpis--one { max-width: 360px; }
.report-card .st-scroll + .dash-chart-sub { margin-top: var(--sp-2); }
.report-kpis--big .dash-kpi strong { font-size: var(--fs-2xl); }
.report-list--num { padding-left: 1.4em; }
.report-list--num li { font-weight: 500; margin-bottom: var(--sp-2); }
.report-list--num li::marker { color: var(--accent); font-weight: 700; }
#report-period { width: 15.5em; max-width: 100%; }
.report-def summary span { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.report-def[open] summary { margin-bottom: var(--sp-2); }
.report-def p { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); color: var(--text); }
.report-def a { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); }
.report-insight { display: block; width: 100%; margin: 0 0 var(--sp-4); padding: var(--sp-4) var(--sp-4); font: inherit; text-align: left; color: inherit; background: var(--accent-tint); border: 1px solid var(--accent-tint-border); border-radius: var(--r-md); cursor: pointer; }
.report-insight strong { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.report-insight span { display: block; font-size: var(--fs-md); }
.report-insight:hover { border-color: var(--accent); }
.dash-svg .dash-gridline { stroke: var(--grid); }
.report-area .dash-dot { r: 0; }
.report-area .dash-row:hover .dash-dot, .report-area .dash-row:focus-visible .dash-dot { r: 3.2px; }

/* The numbers, explained */
.container.narrow { max-width: 46rem; }
.explain-list { margin: var(--sp-6) 0 0; }
.explain { padding: var(--sp-4) 0; border-top: 1px solid var(--border); scroll-margin-top: 5rem; }
.explain dt { font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.explain dd { margin: 0; color: var(--text); }
.explain:target { background: var(--accent-tint); padding-left: var(--sp-3); border-radius: var(--r-sm); }
.dash-svg .dash-marker { fill: var(--good); stroke: var(--paper); stroke-width: 1.5; }
/* area charts: a hairline guide and the point's marker on hover, not a grey band */
.report-area .dash-row:hover .dash-hit, .report-area .dash-row:focus-visible .dash-hit { fill: transparent; }
.dash-svg .dash-guide { stroke: var(--guide); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0; }
.report-area .dash-row:hover .dash-guide, .report-area .dash-row:focus-visible .dash-guide { opacity: 1; }
/* Negative numbers: always red, in brackets */
/* Redraws without re-animating (script.js marks unchanged sections .no-anim) */
.report-slot.no-anim .dash-svg *, .report-slot.no-anim * { animation: none; }
/* Negative numbers: always red, in brackets. [class] lifts it above component colours without !important. */
.neg, [class].neg { color: var(--bad); }
.dash-svg text.neg, .dash-svg text[class].neg { fill: var(--bad); }
/* Colour by meaning (script.js tone()): good / warn / bad, whatever the sign */
[class].is-good { color: var(--accent); }
[class].is-warn { color: var(--warn); }
[class].is-bad { color: var(--bad); }
.dash-kpi em.bad { color: var(--bad); font-weight: 600; }
.no-explain .report-def { display: none; }

/* TOUCH TARGETS — on touch screens every toggle, menu row and small link is at least 44 px tall. KPI cards are buttons
   already (the whole card opens the workings), so on phones the small "How it's worked out" link is hidden. */
@media (pointer: coarse) {
  .xm-item, .report-def summary, #report-period, .footer-links a, .nav-toggle,   .footer-links a { display: flex; align-items: center; }
  .report-def summary { padding: var(--sp-2) 0; }
  .dash-how { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 640px) {
  .dash-kpi .dash-how, .report-insight .dash-how { display: none; }
}

/* LIGHTBOX — mock-up images on examples.html (script.js setupLightbox). */
.lightbox { width: min(1400px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: var(--sp-3); border: 0; border-radius: var(--r-md); background: var(--paper); box-shadow: var(--shadow-md); }
.lightbox::backdrop { background: rgba(20, 28, 22, 0.75); }
.lightbox img { display: block; width: 100%; height: auto; max-height: calc(100vh - 7rem); object-fit: contain; }
.lightbox-cap { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.lightbox-close { position: absolute; top: var(--sp-2); right: var(--sp-2); width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }

/* NUMBERS EXPLAINED — the jump list of terms. */
.title-bar { position: fixed; left: 0; right: 0; z-index: 19; background: var(--header-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transform: translateY(-120%); visibility: hidden; transition: transform 0.18s ease, visibility 0.18s; }
.title-bar.is-shown { transform: none; visibility: visible; }
.explain { scroll-margin-top: 130px; }      /* a jumped-to term lands below the header and the title bar */
.title-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 48px; }
.title-bar strong { font-size: var(--fs-md); white-space: nowrap; }
@media (max-width: 640px) { .title-bar strong { font-size: var(--fs-sm); } .title-bar select { flex: 0 1 auto; min-width: 0; width: min(46vw, 240px); max-width: none; } }
.title-bar select { max-width: 55vw; min-height: 36px; padding: 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--paper); font: inherit; font-size: var(--fs-sm); }
@media (pointer: coarse) { .title-bar select { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .title-bar { transition: none; } }
.jump-list ul { columns: 2; column-gap: var(--sp-6); list-style: none; margin: var(--sp-4) 0 var(--sp-6); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.jump-list li { break-inside: avoid; padding: var(--sp-1) 0; font-size: var(--fs-sm); }
.jump-list a { color: var(--accent); }
@media (max-width: 640px) { .jump-list ul { columns: 1; } }
.report-cards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .report-cards--four { grid-template-columns: 1fr; } }
.report-cards .card-tag { align-self: flex-start; justify-self: start; width: auto; margin-bottom: var(--sp-2); }
.page-more { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-4); font-weight: 600; }
.page-more a { color: var(--accent); }

/* CHART TIPS — the label and value of whatever chart point, bar or row is hovered, focused or tapped (script.js setupChartTips). */
.chart-tip { position: absolute; z-index: 60; max-width: min(320px, calc(100vw - 16px)); padding: var(--sp-1) var(--sp-2); background: var(--text); color: var(--paper); font-size: 12px; font-weight: 600; line-height: 1.35; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); pointer-events: none; font-variant-numeric: tabular-nums; }
.chart-tip[hidden] { display: none; }
.mini-bars li[data-tip] { cursor: default; }
.mini-bars .neg-bar { background: var(--bad); }
.card-group + .card-group { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.card-chart-note { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* MADE WITH — a quiet credit line on every hand-built chart or report: what made it. */
.made-with { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.dash-made-with { padding: 0 var(--sp-4) var(--sp-3); margin: 0; }
.dash-caption .made-with { display: block; margin-top: var(--sp-1); }

/* LADDER — "Start here" sits beside the step number, so the three tiles' headings line up */
.rung .rung-tag { position: absolute; top: var(--sp-5); left: calc(var(--sp-5) + 2rem + var(--sp-2)); right: var(--sp-5); margin: 0; line-height: 2rem; }

/* CONTACT — the email under "Or book a time" */
.contact-direct-h { margin-top: var(--sp-6); }
.contact-direct a, .contact-secondary a[href^="mailto:"] { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

.tbc[hidden] { display: none; }      /* a placeholder chip switched off until it has something to show */

/* QUESTION LIST — the questions a business or not-for-profit asks: a calm list with hairline dividers, a small tag
   for the kind of question, and where it goes ("Example →" opens a working report; "Ask me →" opens the contact
   form with the question filled in). No fills: the questions are text, not buttons. */
.q-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; border-top: 1px solid var(--border); }
.q-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto 6.5rem; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: var(--fs-sm); line-height: 1.35; }
.q-list .q-tag { padding: 1px var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.q-list .q-go { grid-column: 3; justify-self: end; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); white-space: nowrap; }
.q-list .q-ask .q-go { color: var(--muted); }
.q-list a:hover .q-text, .q-list a:focus-visible .q-text { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.q-list a:hover .q-go, .q-list a:focus-visible .q-go { color: var(--accent); }
.q-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
@media (max-width: 640px) {
  .q-list a { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "text text" "tag go"; row-gap: var(--sp-1); padding: var(--sp-3) 0; }
  .q-list .q-text { grid-area: text; } .q-list .q-tag { grid-area: tag; justify-self: start; } .q-list .q-go { grid-area: go; }
}

/* HERO — the line that says what the three sheets and the fourth are */
.hero-define { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-md); line-height: 1.55; color: var(--text); max-width: 36rem; }
.hero-define strong { color: var(--accent); }

/* INTRO — plays once per visit on the home page (markup: index.html, logic: script.js, search "INTRO").
   The three sheets arrive one at a time, data flows into the fourth, then script.js shrinks the picture
   into .hero-sheets. Timings are the animation-delay values below (seconds from the start). */
.intro { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background-color: var(--bg); transition: background-color 700ms ease; }
.intro[hidden] { display: none; }
.intro-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: 0 16px; }
.intro-art { display: block; width: min(400px, 76vw, calc((100vh - 13rem) * 0.8667)); height: auto; overflow: visible; }
.intro-label { font-size: 4.2px; font-weight: 700; fill: var(--on-accent); }
.intro-label--fourth { font-size: 5.4px; fill: var(--accent); }
.intro-line { opacity: 0; transition: opacity 400ms ease; }
.intro-captions { position: relative; width: min(40rem, 92vw); height: 3.6em; font-size: clamp(1.05rem, 2.2vw, var(--fs-lg)); line-height: 1.4; text-align: center; }
.intro-cap { position: absolute; inset: 0; margin: 0; color: var(--muted); opacity: 0; }
.intro-cap strong { color: var(--text); }
.intro-cap strong.intro-accent { color: var(--accent); }
.intro-skip { position: absolute; right: var(--sp-5); bottom: var(--sp-5); }
.intro-captions, .intro-skip, .intro-label { transition: opacity 400ms ease; }

.intro-sheet, .intro-pill { opacity: 0; }
.intro-sheet, .intro-bar, .intro-pill { transform-box: fill-box; }
.intro-s1 { animation: intro-in 600ms ease-out 300ms both; }
.intro-s2 { animation: intro-in 600ms ease-out 2000ms both; }
.intro-s3 { animation: intro-in 600ms ease-out 3700ms both; }
.intro-s4 { animation: intro-slide 700ms cubic-bezier(.2, .7, .2, 1) 5400ms both; }
.intro-c1 { animation: intro-cap 1900ms ease 350ms both; }
.intro-c2 { animation: intro-cap 1900ms ease 2050ms both; }
.intro-c3 { animation: intro-cap 1900ms ease 3750ms both; }
.intro-c4 { animation: intro-in 600ms ease-out 5500ms both; }
.intro-p0 { animation: intro-p0 1000ms ease-in-out 5900ms both; }
.intro-p1 { animation: intro-p1 1000ms ease-in-out 6050ms both; }
.intro-p2 { animation: intro-p2 1000ms ease-in-out 6200ms both; }
.intro-bar { transform-origin: bottom; }
.intro-b0 { animation: intro-grow 600ms ease-out 6700ms both; }
.intro-b1 { animation: intro-grow 600ms ease-out 6850ms both; }
.intro-b2 { animation: intro-grow 600ms ease-out 7000ms both; }

@keyframes intro-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes intro-slide { from { opacity: 0; transform: translate(10px, 6px); } to { opacity: 1; transform: none; } }
@keyframes intro-cap { 0% { opacity: 0; transform: translateY(6px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes intro-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* each piece starts on its own sheet and lands on the base of its bar */
@keyframes intro-p0 { 0% { opacity: 0; transform: none; } 20% { opacity: 1; transform: none; } 85% { opacity: 1; transform: translate(8px, 95px); } 100% { opacity: 0; transform: translate(8px, 95px); } }
@keyframes intro-p1 { 0% { opacity: 0; transform: none; } 20% { opacity: 1; transform: none; } 85% { opacity: 1; transform: translate(9px, 85px); } 100% { opacity: 0; transform: translate(9px, 85px); } }
@keyframes intro-p2 { 0% { opacity: 0; transform: none; } 20% { opacity: 1; transform: none; } 85% { opacity: 1; transform: translate(16px, 75px); } 100% { opacity: 0; transform: translate(16px, 75px); } }

/* Leaving: the background fades to show the page, the words go, and the picture becomes the brand illustration */
body.intro-active { overflow: hidden; }
body.intro-active .hero-sheets img { visibility: hidden; }
.intro--leaving { background-color: transparent; pointer-events: none; }
.intro--leaving .intro-captions, .intro--leaving .intro-skip, .intro--leaving .intro-label { opacity: 0; }
.intro--leaving .intro-line { opacity: 1; }
.intro--leaving .intro-art { transition: transform 900ms cubic-bezier(.65, 0, .35, 1); }
.intro--fade { opacity: 0; transition: opacity 500ms ease; }
/* Skipped: jump every part to its finished state */
.intro--skipped .intro-sheet, .intro--skipped .intro-bar { animation: none; opacity: 1; }
.intro--skipped .intro-pill, .intro--skipped .intro-cap { animation: none; opacity: 0; }
.intro--skipped .intro-c4 { opacity: 1; }
@media (max-width: 640px) { .intro-skip { right: 50%; transform: translateX(50%); bottom: var(--sp-4); } }