/*
 * Layout and components. Colours, type and spacing come from tokens.css only.
 * No inline styles anywhere: the CSP (style-src 'self') blocks them.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; } /* same width whether or not a page scrolls, so nothing jumps between pages (20 Oct) */

body {
  margin: 0;
  background: var(--surface);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: var(--leading);
  font-weight: 400;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.25; }

p, ul, ol, dl { margin: 0 0 var(--space-4); }
p { text-wrap: pretty; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

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

strong { color: var(--ink); font-weight: 600; }

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }

.skip {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--ink); color: var(--surface);
  padding: var(--space-2) var(--space-4); z-index: 10; text-decoration: none;
}
.skip:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header ---------- */

.site-header { padding: var(--space-6) 0; }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}
/* On narrow screens the switch sits beside the logo and the nav wraps underneath, so the header stays two rows at most. */
@media (max-width: 48rem) {
  .site-header .wrap { gap: var(--space-3) var(--space-4); }
  .theme-toggle { order: 1; }
  .nav { order: 2; flex-basis: 100%; }
}
.logo { display: block; flex: none; }
.logo .logo-svg { width: 188px; height: auto; margin-left: -5px; display: block; overflow: visible; }
.logo-svg .ink { fill: var(--ink); }
.logo-svg .sec { fill: var(--secondary); }
/* "Latent" lights up orange on hover or focus (AM 19 Oct; a departure from "never orange in the mark", wordmark only, on interaction only) */
.logo-svg .word-latent { transition: fill 200ms ease; }
.logo:hover .word-latent, .logo:focus-visible .word-latent { fill: var(--highlight); }
/* Hover: the two Ls open diagonally like the section signs, leaving the latent square empty (AM 23 Oct) */
@media (prefers-reduced-motion: no-preference) {
  .logo-sym .logo-l1, .logo-sym .logo-l2 { transition: transform 1200ms cubic-bezier(.2,.8,.2,1); }
  .logo:hover .logo-l1, .logo:focus-visible .logo-l1 { transform: translate(-32px, 32px); }
  .logo:hover .logo-l2, .logo:focus-visible .logo-l2 { transform: translate(32px, -32px); }
}

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.nav a {
  display: inline-block; padding: var(--space-1) 0;
  color: var(--body); text-decoration: none; font-weight: 500; font-size: var(--step--1);
  letter-spacing: 0.01em; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--highlight); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
/* Every menu link stretches to the row height, so underlines line up whether the link is a word or an icon. */
.nav li { display: flex; }
.nav .nav-icon-link { display: flex; align-items: center; position: relative; }
/* An icon-only menu link names itself: a tooltip under the icon where there is hover,
   and the word beside the icon on touch screens, which have no hover (AM 23 Oct). */
.nav-tip { margin-left: 0.35em; }
@media (hover: hover) {
  .nav-tip {
    position: absolute; top: 100%; left: 50%; margin: var(--space-1) 0 0; z-index: 10;
    padding: 0.2em 0.6em; border-radius: var(--radius); white-space: nowrap;
    background: var(--ink); color: var(--surface); font-size: 0.8rem; font-weight: 500;
    opacity: 0; pointer-events: none; transform: translate(-50%, -4px);
    transition: opacity 150ms ease, transform 150ms ease;
  }
  .nav-icon-link:hover .nav-tip, .nav-icon-link:focus-visible .nav-tip { opacity: 1; transform: translate(-50%, 0); }
}
.nav-icon { width: 1.35em; height: 1.35em; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Sections ---------- */

main { display: block; }

.section { padding: clamp(var(--space-12), 7vw, var(--space-16)) 0; }
.section + .section { padding-top: 0; }
.section > .wrap { border-top: 0; }
.ruled { border-top: var(--rule); padding-top: var(--space-6); }

.label {
  display: block;
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--body); margin: 0 0 var(--space-6);
}

.split { display: grid; gap: var(--space-6); }
.split > .label { margin-bottom: 0; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 2fr; gap: var(--space-12); }
}

/* ---------- Hero ---------- */

.hero { padding: var(--space-12) 0 var(--space-16); position: relative; }
.hero .wrap { position: relative; }
.hero h1 {
  font-size: var(--step-5); line-height: 0.98; letter-spacing: -0.035em;
  margin-bottom: var(--space-4); max-width: 12ch;
}
.hero .strap {
  font-size: var(--step-3); font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
  line-height: 1.15; margin-bottom: var(--space-8); max-width: 20ch;
}
.hero .lede { font-size: var(--step-1); max-width: 34rem; margin-bottom: var(--space-6); }
@media (min-width: 64rem) {
  .hero .wrap { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: var(--space-12); align-items: start; }
  .hero .wrap > :not(.hero-figure) { grid-column: 1; } /* h1, strap, lede, actions, bridge */
}

/* The lever (carried over from latentlabs.nz; monochrome, so the call to action keeps the one orange) */
.lever { width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.lever-handle { touch-action: none; }
.lever .ln, .lever .hatch line { stroke: var(--secondary); stroke-width: 1.5; }
.lever .beam { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.lever .arrow { fill: var(--ink); }
.lever #effLine { stroke: var(--ink); stroke-width: 2; }
.lever .load { fill: var(--ink); }
.lever .load-label { fill: var(--surface); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.lever .fulcrum { fill: var(--secondary); }
.lever .dim { stroke: var(--secondary); stroke-width: 1; }
.lever .anno { fill: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.lever .adv-value { fill: var(--ink); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.lever .status { fill: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; }
.lever .status.heavy { fill: var(--body); font-weight: 600; }
.lever .dial-track { stroke: var(--surface-raised); stroke-width: 4; stroke-linecap: round; }
.lever .dial-fill { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.lever-handle { cursor: grab; outline: none; }
.lever-handle:active { cursor: grabbing; }
.lever .handle-hit { fill: transparent; }
.lever .handle-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.lever .handle-grip { fill: var(--ink); }
.lever-handle:hover .handle-grip, .lever-handle:focus-visible .handle-grip { fill: var(--highlight); }
.lever-handle:focus-visible .handle-hit { stroke: var(--focus); stroke-width: 2; stroke-dasharray: 3 3; }
/* The demo (AM 2 Nov): a caption, a ghost cursor, and a pulsing "Drag me" on the fulcrum. Never catches the pointer. */
.lever .demo { pointer-events: none; }
.lever .demo-cap { fill: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.lever .ghost { opacity: 0; transition: opacity 200ms ease; }
.lever .ghost path { fill: var(--ink); stroke: var(--surface); stroke-width: 1.2; stroke-linejoin: round; }
.lever.ghosting .ghost { opacity: 1; }
.lever .drag-me { opacity: 0; transition: opacity 300ms ease; }
.lever.invite .drag-me { opacity: 1; }
.lever .drag-pulse { fill: none; stroke: var(--highlight); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.lever.invite .drag-pulse { animation: drag-pulse 1.6s ease-out infinite; }
@keyframes drag-pulse { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2); opacity: 0; } }
.lever .drag-label { fill: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
@media (prefers-reduced-motion: reduce) { .lever.invite .drag-pulse { animation: none; } .lever .ghost, .lever .drag-me { transition: none; } }
.demo-replay { margin-left: var(--space-3); padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.demo-replay:hover { text-decoration-color: var(--highlight); }
.demo-replay:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* How we help: "Find your latent leverage", the words beside the lever (AM 2 Nov) */
.leverage .wrap { display: grid; gap: var(--space-12); }
.leverage-words { max-width: var(--measure); }
.leverage-words .lede { font-size: var(--step-2); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-6); }
.leverage-words p { margin: 0 0 var(--space-4); }
.leverage-words .button { margin-top: var(--space-4); }
@media (min-width: 64rem) { .leverage .wrap { grid-template-columns: 1fr 1.05fr; column-gap: var(--space-16); align-items: center; } }

.page-head { padding: var(--space-12) 0 clamp(var(--space-8), 5vw, var(--space-12)); }
.page-head h1 { max-width: 14ch; font-size: clamp(2.75rem, 1.9rem + 4.2vw, 5rem); line-height: 1; letter-spacing: -0.035em; margin-bottom: var(--space-6); }
.post h1 { font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 18ch; margin-bottom: var(--space-6); text-wrap: balance; }
.post .byline { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: var(--space-8); }
.post .byline::before { content: ""; width: 0.6em; height: 0.6em; background: var(--highlight); border-radius: 2px; }
.post .prose > h2 { position: relative; padding-top: var(--space-4); }
.post .prose > h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 3px; background: var(--highlight); }
.post .prose > p:last-of-type { border-top: var(--rule); padding-top: var(--space-6); margin-top: var(--space-12); }
.page-head .lede { font-size: var(--step-1); max-width: 36rem; margin: 0; }

/* ---------- Actions ---------- */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }

.button {
  display: inline-block; font: inherit; font-weight: 600; font-size: var(--step-0);
  background: var(--highlight); color: var(--on-highlight);
  border: 0; border-radius: var(--radius); padding: 0.85rem 1.5rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.button:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.button[disabled] { cursor: progress; opacity: 0.8; }

.more { font-weight: 600; text-decoration: none; color: var(--ink); }
.more:hover { text-decoration: underline; }

/* ---------- Belief ---------- */

.belief h2 { font-size: var(--step-4); max-width: 18ch; }
.belief .body p { max-width: var(--measure); }

/* ---------- Numbered grid (propositions, ways of working) ---------- */

.grid { display: grid; gap: var(--space-12) var(--space-8); list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
.grid > li { border-top: 2px solid var(--ink); padding-top: var(--space-4); }
.grid .num {
  display: block; font-weight: 600; font-size: var(--step--1); color: var(--body);
  letter-spacing: 0.1em; margin-bottom: var(--space-4); font-variant-numeric: tabular-nums;
}
.grid h3 { font-size: var(--step-2); margin-bottom: var(--space-3); }
.grid p:last-child { margin-bottom: 0; }

/* ---------- Ladder ---------- */

/* ---------- Proof panel ---------- */

.facts { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: var(--space-4); }
.facts li { padding-left: var(--space-6); position: relative; }
.facts li::before, .prose ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6em; height: 0.6em;
  border: 2px solid currentColor; border-radius: 2px; color: var(--ink);
}
.band .facts li::before { color: var(--band-ink); }

.credit { font-weight: 500; color: var(--ink); }

/* ---------- People ---------- */

.people { display: grid; gap: var(--space-12) var(--space-8); list-style: none; margin: 0; padding: 0; }
@media (min-width: 56rem) { .people { grid-template-columns: repeat(3, 1fr); } }
.person img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius);
  background: var(--surface-raised); margin-bottom: var(--space-6);
}
.person h2 { font-size: var(--step-2); margin-bottom: var(--space-1); }
.person .role { font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.person .leads { font-size: var(--step--1); margin-bottom: var(--space-4); }
.person .leads strong { font-weight: 600; }
/* One column below 56rem: a full-width photo dwarfs the text (MM 29 Oct), so it stays small until the three-up row */
@media (max-width: 55.99rem) { .person img { width: 9rem; } }

/* ---------- FAQ: native <details>, the latent square as the marker ---------- */

.faq { border-top: 2px solid var(--ink); }
.qa { border-bottom: var(--rule); }
.qa > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--space-6); padding: var(--space-6) 0;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary h2, .qa > summary h3 { font-size: var(--step-2); margin: 0; max-width: 34ch; }
.qa > summary::after {
  content: ""; width: 1.25rem; height: 1.25rem; border: 2px solid var(--ink); border-radius: 3px;
  transition: background-color 200ms ease, border-color 200ms ease, transform 300ms cubic-bezier(.3,1.6,.5,1);
}
.qa > summary:hover h2, .qa > summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.qa[open] > summary::after { background: var(--highlight); border-color: var(--highlight); transform: rotate(90deg); }
.qa > div { max-width: var(--measure); padding: 0 0 var(--space-8); }
.qa p:last-child, .qa ul:last-child { margin-bottom: 0; }
.qa ul { list-style: none; padding: 0; }
.qa ul > li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-2); }
.qa ul > li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6em; height: 0.6em; border: 2px solid var(--ink); border-radius: 2px; }
/* MM 29 Oct: answers always sit flush left under their question (was offset a third at wide widths) */
@media (prefers-reduced-motion: reduce) { .qa > summary::after { transition: none; } }

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: var(--space-6); }
.prose ol > li::marker { font-weight: 700; color: var(--ink); }
.prose li { margin-bottom: var(--space-2); }
.post .byline + p { font-size: var(--step-1); color: var(--ink); line-height: 1.5; }
.prose blockquote {
  margin: var(--space-8) 0; padding-left: var(--space-6); border-left: 2px solid var(--ink);
  color: var(--ink); font-size: var(--step-1); font-weight: 500;
}

.byline { font-size: var(--step--1); font-weight: 500; color: var(--body); margin-bottom: var(--space-8); }

/* ---------- Insights list ---------- */

.posts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.posts li { border-bottom: var(--rule); padding: var(--space-8) 0; display: flex; flex-direction: column; position: relative; }
.posts h2 { order: -1; font-size: var(--step-3); margin-bottom: var(--space-3); max-width: 24ch; }
.posts a { text-decoration: none; }
.posts a::after { content: ""; position: absolute; inset: 0; }
.posts li:hover h2 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.posts p { margin: 0; max-width: var(--measure); }
.posts .byline { margin-bottom: var(--space-3); }
.posts li:focus-within { outline: 3px solid var(--focus); outline-offset: 4px; }
.posts a:focus-visible { outline: none; }

/* ---------- Form ---------- */

.enquiry { max-width: 40rem; }
.field { margin-bottom: var(--space-6); }
.field label { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--space-2); }
.field .hint { font-weight: 400; color: var(--body); }
.field input, .field textarea {
  display: block; width: 100%; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--body); border-radius: var(--radius);
  padding: 0.75rem 0.875rem;
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field [aria-invalid="true"] { border: 2px solid var(--error); }
.field .error { color: var(--error); font-weight: 600; margin: var(--space-2) 0 0; }
.field .error:empty { display: none; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.form-foot a { font-size: var(--step--1); }
.form-status { margin-top: var(--space-6); font-weight: 600; color: var(--ink); }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }

/* ---------- Footer: a charcoal band, so every page ends on the home page's colour ---------- */
/* The floating bar: copyright and links, always in view */
main { padding-bottom: 3.5rem; } /* room for the floating bar */
/* Floats over the page: the surface colour, see-through and blurred, as on latentlabs.nz */
.floating-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; font-size: var(--step--1); color: var(--body);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.ff-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3.25rem; }
.ff-copy { margin: 0; }
.ff-links { display: flex; gap: var(--space-1); }
.ff-links a { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--ink); border-radius: var(--radius); }
.ff-links a:hover, .ff-links a:focus-visible { color: var(--highlight); }
.ff-links svg { width: 1.25rem; height: 1.25rem; }
/* A page that ends on a band runs straight into the footer. */
main > .band:last-child { margin-bottom: 0; }

/* ---------- Status page ---------- */

.status-page { padding: var(--space-16) 0; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- People and stories (AM 19 Oct: lead with people and stories) ---------- */
/* The quote sits in a speech bubble in the mark's grey (AM 19 Oct), ink text in both themes */
/* Home team row (AM/MM 28 Oct): the same bubble under each director, tail pointing up at them */
.person blockquote { position: relative; margin: var(--space-6) 0 0; padding: var(--space-4); background: var(--secondary); color: var(--on-secondary); border-radius: var(--radius); }
.person blockquote::before { content: ""; position: absolute; left: var(--space-6); top: -10px; width: 20px; height: 20px; background: var(--secondary); clip-path: polygon(0 100%, 0 0, 100% 100%); }
.person blockquote p { font-size: var(--step-0); color: var(--on-secondary); line-height: 1.4; margin: 0; }
.person blockquote p::before { content: "\201C"; }
.person blockquote p::after { content: "\201D"; }
/* Every quote shares one cell, so the bubble keeps the longest one's height and nothing below moves (MM 29 Oct) */
.q-stack { display: grid; }
.q-stack > p { grid-area: 1 / 1; }
.q-stack > p.q-off { visibility: hidden; }

.band { background: var(--band-bg); color: var(--band-body); padding: var(--space-24) 0; margin: var(--space-8) 0 var(--space-16); }
.band { --focus: var(--band-ink); }
.band h2, .band h3, .band strong { color: var(--band-ink); }
.band a:not(.button) { color: var(--band-ink); }
.band h2 { max-width: 22ch; margin-bottom: var(--space-12); }
.band .label { color: var(--band-body); }
/* Stories stack vertically and arrive one after another as you scroll (AM 19 Oct) */
.stories { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-8); }
.story { border-top: 2px solid var(--band-ink); padding: var(--space-6) 0 var(--space-8); display: grid; gap: var(--space-2) var(--space-8); align-items: start; }
@media (min-width: 56rem) { .story { grid-template-columns: 9rem minmax(0, 1fr); } .story .num { grid-row: 1 / span 4; } }
.story .num { display: block; font-size: var(--step-5); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--band-ink); margin-bottom: var(--space-4); }
.story h3 { font-size: var(--step-3); max-width: 22ch; margin-bottom: var(--space-2); }
.story p { max-width: var(--measure); }
.story .pop-open { justify-self: start; }
/* The lesson stays folded until the pointer is over the story, or it has keyboard focus (AM 19 Oct). Always shown where there is no hover. */
.story .lesson { color: var(--band-ink); font-weight: 500; max-width: var(--measure); border-left: 3px solid var(--highlight); padding: 0 0 0 var(--space-3); margin: 0; font: inherit; font-weight: 500; text-align: left; background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; justify-self: start; }
.story .lesson:hover > span { text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: hover) {
  .story .lesson { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 350ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease; }
  .story .lesson > strong, .story .lesson > span { min-height: 0; overflow: hidden; }
  .story:hover .lesson, .story:focus-within .lesson { grid-template-rows: 1fr; opacity: 1; }
}
.story .lesson strong { color: var(--band-ink); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; margin-right: var(--space-2); }
.band .pop-open { color: var(--band-ink); border-color: var(--band-ink); }

.pop-open {
  font: inherit; font-weight: 600; font-size: var(--step--1); color: var(--ink);
  background: none; border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 0.45em 1.1em; cursor: pointer;
}
.pop-open:hover { background: var(--highlight); border-color: var(--highlight); color: var(--on-highlight); }

/* The popovers carry the colour: Station Orange, one at a time, on top of the page. */

/* ---------- Colour pops (AM 19 Oct: "interactive colour pops and excitement") ----------
   Orange stays the only colour; it just moves. Everything settles to a static,
   fully visible state under prefers-reduced-motion. */

/* Highlighter swipe */

/* Proposition cards flood orange on hover or focus. The flood is a pseudo-element
   that bleeds into the gutter (never past it), so the grid's rules stay aligned. */

/* Scroll reveals for the stories */
/* Readable at rest, dimmed; each story arrives as it scrolls in, and its numeral flashes orange once */
.js .story { opacity: 0.62; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
.js .story.is-in { opacity: 1; transform: none; }
.js .story.is-in .num { animation: num-flash 1400ms ease 700ms both; }
@keyframes num-flash { 0% { color: var(--band-ink); } 35% { color: var(--highlight); } 100% { color: var(--band-ink); } }

/* The lever lights up when the load lifts */
.lever .load, .lever .adv-value { transition: fill 250ms ease; }
.lever.lifted .load { fill: var(--highlight); }
.lever.lifted .load-label { fill: var(--on-highlight); }
.lever.lifted .adv-value { fill: var(--highlight); }

@media (prefers-reduced-motion: reduce) {
  .js .story { transition: none !important; }
  .js .story { opacity: 1; transform: none; }
  .js .story.is-in .num { animation: none; }
  .story .lesson { transition: none; }
}

/* Real captures as proof (AM 19 Oct: "a raw capture of something real") */
.screenshot { margin: 0; }
.screenshot img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 30px 80px rgb(0 0 0 / 0.18); }
.screenshot figcaption { font-size: var(--step--1); margin-top: var(--space-3); }

/* ---------- Ways of working: rows on the charcoal band, big numerals ---------- */

.band-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }
.band-head h2 { margin-bottom: 0; }
.ways { list-style: none; margin: 0; padding: 0; }
.ways > li {
  display: grid; gap: var(--space-2) var(--space-8);
  padding: var(--space-8) 0; border-top: 1px solid rgb(255 255 255 / 0.18);
}
.ways > li:first-child { border-top: 2px solid var(--band-ink); }
@media (min-width: 56rem) {
  .ways > li { grid-template-columns: 8rem minmax(0, 24rem) minmax(0, 1fr); align-items: start; }
}
.ways .num {
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em;
  color: var(--band-ink); font-variant-numeric: tabular-nums;
}
.ways h3 { font-size: var(--step-2); margin: 0; }
.ways p:last-child { margin-bottom: 0; }
.ways .text { max-width: var(--measure); }

/* ---------- People page ---------- */

.person { display: flex; flex-direction: column; }
.person img { margin-bottom: var(--space-6); }
.person h2 { font-size: var(--step-3); }
.person .role {
  align-self: start; font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.person .leads { font-size: var(--step-0); color: var(--ink); margin-bottom: var(--space-6); }
.band .credit { color: var(--band-ink); }

/* ---------- Key words in orange (AM 19 Oct) ---------- */
.key { font-style: normal; color: var(--highlight); }
/* Keywords light up as you reach their section (AM 29 Oct call): ink by default, orange once the
   heading is in view (effects.js sets .is-in). Without script or with reduced motion they stay orange. */
.js .sign .key, .js .sign-plain .key { color: var(--ink); transition: color var(--fade-orange) ease-in-out; }
.js .band .sign .key, .js .band .sign-plain .key { color: var(--band-ink); }
.js .sign.is-in .key, .js .sign-plain.is-in .key { color: var(--highlight); }
@media (prefers-reduced-motion: reduce) { .js .sign .key, .js .sign-plain .key { transition: none; } }
#team .sign .key, .js #team .sign.is-in .key { color: var(--ink); } /* AM 5 Nov (MM: busy): team heading in one colour */

/* ---------- The sign: mark, then title, on one line (AM 19 Oct) ----------
   Starts as the closed mark. When the section is active the Ls open, the
   latent square appears with the section's icon, and the title expands out
   to the right. One shot; open and still without JavaScript or under reduced
   motion. --s is the latent square's side, set from the text size. */
.sign {
  --s: 0.74em;
  display: flex; align-items: center; gap: 0.5em;
  margin: 0 0 var(--space-4); font-weight: 700; color: var(--ink);
  letter-spacing: -0.025em; line-height: 1.05; max-width: none;
}
p.sign { font-size: var(--step-3); }
h2.sign { font-size: var(--step-4); }
h1.sign { font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem); margin-bottom: var(--space-6); }
/* The mark is a 4s square. Closed, the two Ls overlap on the central s square.
   Open, each L moves diagonally by s/2, so the pocket between their inner corners
   grows to 2s; the 1.5s orange square sits in it with an even 0.25s gap on every
   side, framed by the Ls' stems and feet. The Ls stay the main forms. */
.sign-mark { position: relative; flex: none; width: calc(4 * var(--s)); height: calc(4 * var(--s)); }
.sm-l { position: absolute; width: calc(2 * var(--s)); height: calc(2 * var(--s)); overflow: visible; }
.sm-l1 { left: calc(0.5 * var(--s)); bottom: calc(0.5 * var(--s)); fill: var(--ink); transform: translate(calc(-0.5 * var(--s)), calc(0.5 * var(--s))); }
.sm-l2 { right: calc(0.5 * var(--s)); top: calc(0.5 * var(--s)); fill: var(--secondary); transform: translate(calc(0.5 * var(--s)), calc(-0.5 * var(--s))) rotate(180deg); }
.band .sm-l1 { fill: var(--band-ink); }
.sm-sq {
  position: absolute; left: calc(1.25 * var(--s)); top: calc(1.25 * var(--s)); width: calc(1.5 * var(--s)); height: calc(1.5 * var(--s));
  display: grid; place-items: center; background: var(--highlight); color: var(--on-highlight);
  border-radius: calc(var(--s) * 10 / 64);
}
.sm-icon { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sign-text { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* Closed and small until the section is active; then the mark grows, the Ls
     open diagonally, the orange square swells to fill the pocket with the
     section's icon, and the title expands out (AM 19 Oct). */
  .sign-mark { transform-origin: left center; }
  .js .sign .sign-mark { transition: transform 1000ms cubic-bezier(.2,.8,.2,1); }
  .js .sign .sm-l1, .js .sign .sm-l2 { transition: transform 900ms cubic-bezier(.2,.8,.2,1) 350ms; }
  .js .sign .sm-sq { transition: transform 900ms cubic-bezier(.2,.8,.2,1) 350ms, opacity 400ms ease 450ms; }
  .js .sign .sign-text { transition: clip-path 800ms cubic-bezier(.2,.8,.2,1) 900ms, opacity 500ms ease 900ms, transform 800ms cubic-bezier(.2,.8,.2,1) 900ms; }
  /* Closing runs the opening in reverse: title first, then the square, then the Ls, then the shrink. */
  .js .sign:not(.is-in) .sign-text { transition-delay: 0ms, 0ms, 0ms; transition-duration: 450ms, 300ms, 450ms; }
  .js .sign:not(.is-in) .sm-sq { transition-delay: 250ms, 350ms; transition-duration: 500ms, 300ms; }
  .js .sign:not(.is-in) .sm-l1, .js .sign:not(.is-in) .sm-l2 { transition-delay: 450ms; transition-duration: 600ms; }
  .js .sign:not(.is-in) .sign-mark { transform: scale(0.38); transition-delay: 700ms; transition-duration: 700ms; }
  .js .sign:not(.is-in) .sm-l1 { transform: translate(0, 0); }
  .js .sign:not(.is-in) .sm-l2 { transform: translate(0, 0) rotate(180deg); }
  .js .sign:not(.is-in) .sm-sq { opacity: 0; transform: scale(0.5); }
  .js .sign:not(.is-in) .sign-text { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(-0.6em); }
  .js .sign.is-in .sign-text { clip-path: inset(0 0 0 0); }
}

/* ---------- Home page tabs (AM 19 Oct: a tabbed interface, not one long scroll) ---------- */
.tabs { margin-top: 0; }
.tablist {
  display: flex; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: var(--rule); scrollbar-width: none; margin-bottom: var(--space-12);
}
.tablist::-webkit-scrollbar { display: none; }
/* On phones the tabs wrap rather than clip */
@media (max-width: 40rem) { .tablist { flex-wrap: wrap; overflow: visible; gap: 0; } .tablist [role="tab"] { padding: var(--space-3) var(--space-3); font-size: var(--step--1); } }
.tablist [role="tab"] {
  flex: none; padding: var(--space-3) var(--space-4); margin-bottom: -1px;
  font-weight: 600; color: var(--body); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tablist [role="tab"]:hover { color: var(--ink); border-bottom-color: var(--highlight); }
.tablist [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--highlight); }
.tablist [role="tab"]:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 4px; }
.tabpanel { scroll-margin-top: var(--space-6); }
.tabpanel > .wrap { padding-bottom: var(--space-12); }
.tabpanel .band { margin: 0; padding: var(--space-16) 0; }
.tabpanel .band .lede { color: var(--band-body); }
.tabpanel .band .sign .sm-sq { color: var(--on-highlight); }
/* Without JavaScript every panel shows, stacked, and the tabs are in-page links. */
.no-js .tabpanel[hidden] { display: block; }

/* ---------- Theme switch ---------- */
/* Hidden until theme.js has run, so a reader without JavaScript never meets an inert button. */
:root:not(.theme-ready) .theme-toggle { display: none; }
.theme-toggle {
  flex: none; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1.5px solid var(--secondary); border-radius: 999px; background: none; color: var(--ink); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--highlight); color: var(--highlight); }
.theme-toggle svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Contact and people: plain link lists */
.person .li { font-size: var(--step--1); margin: calc(-1 * var(--space-4)) 0 var(--space-1); }
.person .email { font-size: var(--step--1); margin: 0 0 var(--space-6); }

/* ---------- External review, 19 Oct: evidence early, compact stories, a real closing block ---------- */
.case { padding-top: var(--space-8); }
.case-card { border: 2px solid var(--ink); border-radius: var(--radius); padding: clamp(var(--space-6), 4vw, var(--space-12)); display: grid; gap: var(--space-4); }
.case-label { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body); margin: 0; }
.case-card h2 { margin: 0; }
.case-grid { display: grid; gap: var(--space-6); margin: var(--space-2) 0; }
@media (min-width: 52rem) { .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case-grid dt { font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); padding-top: var(--space-3); border-top: 3px solid var(--highlight); }
.case-grid dd { margin: 0; }
.case-lesson { font-weight: 600; color: var(--ink); margin: 0; max-width: 44rem; }

.story .result { color: var(--band-ink); font-weight: 600; margin: 0; }
.story .desc { margin: 0; }
/* Each story's lesson, always shown (AM 2 Nov): what the pop-ups used to end on, in one line */
.story .takeaway { margin: var(--space-2) 0 0; padding-left: var(--space-3); border-left: 3px solid var(--highlight); color: var(--band-ink); font-weight: 600; max-width: var(--measure); }
@media (min-width: 56rem) {
  .stories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-8); }
  .story--feature { grid-column: 1 / -1; }
  /* Compact stories: a column whose button sits on the bottom, so 02-04 line up across the row */
  .story:not(.story--feature) { display: flex; flex-direction: column; gap: var(--space-2); }
  .story:not(.story--feature) .pop-open { margin-top: auto; align-self: flex-start; }
  .story:not(.story--feature) .lesson { margin-bottom: var(--space-4); }
  .story:not(.story--feature) .takeaway { margin-top: auto; padding-top: 0; } /* lessons line up along the foot of each row */
  .story:not(.story--feature) .num { grid-row: auto; font-size: var(--step-4); margin-bottom: var(--space-2); }
  .story:not(.story--feature) h3 { font-size: var(--step-2); }
}

.closing { margin-top: var(--space-16); padding: var(--space-16) 0; border-top: 2px solid var(--ink); }
.closing h2 { font-size: var(--step-4); max-width: 18ch; margin-bottom: var(--space-4); }
.closing p { max-width: 36rem; font-size: var(--step-1); }

/* ---------- Hero carousel and the people rows (AM 20 Oct) ---------- */

/* One director at a time where the lever was; the lever moves to How we work */
/* With script running, every slide shares one cell, so the carousel keeps the tallest slide's height and the controls never move (AM 20 Oct) */
/* Back and forward sit on the photo's top corners (AM 20 Oct); Pause stays below */
@media (min-width: 64rem) { /* label, h1, strap, thumbs, lede, actions, then a spare row */
  .hero .wrap:has(.carousel) { grid-template-rows: repeat(6, auto) 1fr; } /* the spare row takes the carousel's extra height, so the words stay together */
}

/* Greyscale until you hover or focus a person: then colour, and the first name in orange */
.person-photo { filter: grayscale(1); transition: filter 0.3s ease; }
.director:hover .person-photo, .director:has(:focus-visible) .person-photo, .director:target .person-photo { filter: none; }
.director:target .first { color: var(--highlight); } /* AM 5 Nov: arriving from a name or photo on Home (/people/#matt), that director in colour, first name orange */
.director { scroll-margin-top: var(--space-12); }
.director .first { transition: color 0.3s ease; }
.director:hover .first, .director:has(:focus-visible) .first { color: var(--highlight); }
/* In the carousel the arrows sit outside the slide, so the whole carousel counts: colour while the pointer is on it,
   or while keyboard focus is in it. A mouse click leaves no visible focus, so it goes grey when the pointer leaves (AM 20 Oct). */
@media (prefers-reduced-motion: reduce) { .person-photo, .director .first { transition: none; } }

/* How we work: the steps beside the lever */
.lever-figure { margin: 0; max-width: 34rem; }
.lever-figure figcaption { font-size: var(--step--1); color: var(--body); margin-top: var(--space-3); } /* no shape column beside the lever */

/* Our people: LinkedIn and email with an icon inside the link (AM 20 Oct) */
.icon-link { margin: 0 0 var(--space-1); font-size: var(--step--1); }
.icon-link a { display: inline-flex; align-items: center; gap: var(--space-2); }
.icon-link .icon { width: 1.1em; height: 1.1em; flex: none; }
.person .icon-link{ margin: 0 0 var(--space-1); }
.person .icon-link:last-of-type{ margin-bottom: var(--space-6); }
.person .links { margin-bottom: var(--space-6); } .person .links .icon-link:last-child { margin-bottom: 0; }
.person .leads { margin-bottom: var(--space-4); }
/* Every bio starts at the same height: the cards share one set of rows, so a role that wraps moves all three (AM 20 Oct) */
@media (min-width: 56rem) {
  .people { row-gap: 0; } /* one row of three; the parent's row gap would otherwise open up every shared row */
  .people > .person { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; } /* photo, name, role, one-liner, leads, links, bio */
}

/* How we work: the draft's opening words beside the lever (AM 20 Oct) */
.fulcrum-words h2 { font-size: var(--step-4); letter-spacing: -0.03em; margin-bottom: var(--space-3); }
.fulcrum-words .strap { font-size: var(--step-2); font-weight: 600; color: var(--ink); margin-bottom: var(--space-6); }
.fulcrum-words .lede { font-size: var(--step-1); max-width: 34rem; } /* the bridge now sits above the buttons (AM 20 Oct) */

/* How we work: the lever to the right of the heading column (AM 20 Oct) */
.page-head .fulcrum-words { margin-top: var(--space-8); }
.page-head .lever-figure { margin-top: var(--space-12); }

/* A pair of images, one per theme: follows the system setting and the theme toggle, as the tokens do (AM 20 Oct) */
.theme-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-light { display: none; }
  :root:not([data-theme="light"]) .theme-dark { display: block; }
}
:root[data-theme="dark"] .theme-light { display: none; }
:root[data-theme="dark"] .theme-dark { display: block; }
/* The risk register question, folded into the point of view as a side note (AM 20 Oct) */
/* The close: the second half carries the weight (AM 20 Oct) */
.closing h2 .soft { font-weight: 400; }
.closing h2 strong { font-weight: 700; }

/* Home: three signposts under the hero, so the depth is a click away (AM 20 Oct) */ /* only the key word (AM 20 Oct) */
/* Our work: the stories band opens the page */
.band h1, .band .sign { color: var(--band-ink); } /* a page that opens on the band (Our work) */

/* Design rule (AM 20 Oct): the expanding mark once per page; later signs are a large heading
   with their orange (.key) or bold words, and no mark. The build applies it. */
.sign-plain { margin: 0 0 var(--space-4); font-weight: 700; color: var(--ink); letter-spacing: -0.025em; line-height: 1.05; max-width: none; }
p.sign-plain { font-size: var(--step-3); }
h2.sign-plain { font-size: var(--step-4); }
.band .sign-plain { color: var(--band-ink); }

/* Our work: each story's key phrase turns orange on hover or keyboard focus (AM 20 Oct) */
.story h3 .hover-key, .ways h3 .hover-key { transition: color var(--fade-orange) ease-in-out; }
.story:hover h3 .hover-key, .story:has(:focus-visible) h3 .hover-key { color: var(--highlight); }
.ways > li:hover h3 .hover-key { color: var(--highlight); } /* Principles: the same, on How we work (AM 20 Oct) */
@media (prefers-reduced-motion: reduce) { .story h3 .hover-key, .ways h3 .hover-key { transition: none; } }

/* Contact: orange, on the far right of the header, after the theme toggle (AM 20 Oct) */
.nav-contact { background: var(--highlight); color: var(--on-highlight); border-radius: var(--radius); padding: var(--space-2) var(--space-4); font-weight: 600; font-size: var(--step--1); text-decoration: none; }
.nav-contact:hover, .nav-contact:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
/* Footer bar: FAQ, Lab and Privacy as text links between the copyright and the icons */
.ff-pages { display: flex; gap: var(--space-4); margin-left: auto; margin-right: var(--space-4); }
.ff-pages a { color: var(--body); text-decoration: none; }
.ff-pages a:hover, .ff-pages a:focus-visible { color: var(--highlight); }
/* On a phone the bar takes two rows: the copyright, then the page links and icons */
@media (max-width: 40rem) {
  .ff-inner { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-2); }
  .ff-copy { flex-basis: 100%; }
  .ff-pages { margin-left: 0; }
  .ff-links { margin-left: auto; }
  main { padding-bottom: 6rem; }
}
/* Desktop header: logo on the left; nav, theme toggle and Contact together on the right (AM 20 Oct) */
@media (min-width: 48.01rem) {
  .site-header .wrap { justify-content: flex-start; }
  .site-header .nav { margin-left: auto; }
}
@media (max-width: 48rem) {
  .theme-toggle { margin-left: auto; }
  .nav-contact { order: 1; } /* after the toggle, so Contact is far right on a phone too */
}
/* The "We were Forge Labs" line: very small, under the copyright, until formerly_until (AM 20 Oct) */
.ff-copy p { margin: 0; }
.ff-was { font-size: 0.7rem; line-height: 1.3; opacity: 0.8; }

/* Hero: the two other directors, small, under the words (AM 20 Oct) */ /* sits under the strapline (AM 20 Oct) */

/* Director one-liners under the name and title (AM 20 Oct) */
.person .oneliner { font-weight: 600; color: var(--ink); margin: 0 0 var(--space-3); }

/* Home hero: "people" turns orange while the pointer is in the hero (AM 20 Oct) */
.hero .strap .hover-key { transition: color var(--fade-orange) ease-in-out; }
.hero:hover .strap .hover-key, .hero:has(:focus-visible) .strap .hover-key { color: var(--highlight); }
@media (prefers-reduced-motion: reduce) { .hero .strap .hover-key{ transition: none; } }

/* What we believe: the belief as the closing line (AM 20 Oct) */
.pull { font-size: var(--step-1); font-weight: 600; color: var(--ink); max-width: 34rem; }

/* Reserve the small portraits' space from first paint (theme.js marks the page before it paints),
   so nothing below them moves when carousel.js fills them in (Lighthouse CLS, 20 Oct) */

/* Small portrait names: orange at this size is 3.4:1 on white (fails AA), so on hover they
   stay ink and take an orange underline instead (round 9, 20 Oct) */
/* The step slide: the hero words sit above the gliding photos, so a photo crossing
   the column passes behind the headline, not over it (round 9) */
.hero .wrap > :not(.carousel) { position: relative; z-index: 2; } /* both sets of moving photos stay under the words */

/* The lever's hint (AM 20 Oct): while it demonstrates itself, the fulcrum handle glows orange */

/* Home: the risk-register question after the people (AM 20 Oct) */
/* Home (AM 2 Nov): "Who it's for" and the risk question sit inside "What we believe" */
.measure .for-title { font-size: var(--step-2); letter-spacing: -0.02em; margin: var(--space-12) 0 var(--space-3); text-wrap: balance; }
#for .measure .for-title { margin-top: 0; } /* AM 5 Nov: on How we help it opens its own section */
/* AM 5 Nov: Home "What we believe" as one belief and three points of view */
.povs { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-8); }
.povs h3 { font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin: 0 0 var(--space-2); text-wrap: balance; }
.povs p { margin: 0; max-width: 40rem; }
.povs .pov-ask { margin-top: var(--space-3); font-weight: 600; color: var(--ink); }
.povs .hover-key { transition: color var(--fade-orange) ease-in-out; }
.povs li:hover .hover-key, .povs li:focus-within .hover-key { color: var(--highlight); }
@media (prefers-reduced-motion: reduce) { .povs .hover-key { transition: none; } }
/* "risk" turns orange as you go over the box, or tab into its link (AM 2 Nov) */

/* MM 23 Oct: a small LinkedIn icon beside each director's name on the home page team section */
.person h3 .li-name, .spot-body h3 .li-name { color: var(--body); margin-left: var(--space-1); }
.person h3 .li-name svg, .spot-body h3 .li-name svg { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.08em; }
.person h3 .li-name:hover, .person h3 .li-name:focus-visible, .spot-body h3 .li-name:hover, .spot-body h3 .li-name:focus-visible { color: var(--highlight); }
.spot-details { grid-column: 1 / -1; min-width: 0; }
.spot-body:not(:has(blockquote)) { display: none; } /* no approved quote yet: the details sit beside the photo instead */
@media (min-width: 48rem) { .spot-slide:not(:has(blockquote)) .spot-details { grid-column: 2; grid-row: 1; } } /* AM 2 Nov: name, details and the link in a full-width row under photo and quote */
.spot-details h3 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.spot-link { color: inherit; text-decoration: none; } .spot-link .spot-photo { transition: opacity 0.2s ease; } .spot-link:hover .spot-photo { opacity: 0.85; }
.spot-details .first { transition: color 0.3s ease; }
.spot-slide:has(.spot-link:hover) .first, .spot-slide:has(.spot-link:focus-visible) .first { color: var(--highlight); } /* AM 5 Nov: name or photo hovered, the first name turns orange, as on Our people; no underline */
@media (prefers-reduced-motion: reduce) { .spot-details .first { transition: none; } }
.spot-details .oneliner { font-weight: 600; color: var(--ink); margin: 0 0 var(--space-1); }

/* ---------- Team spotlight (MM 29 Oct, direction A): one director in focus, quote large ---------- */
.spot-slide { display: grid; gap: var(--space-6); align-items: start; align-content: start; } /* spare reserved height goes to the foot, not between photo and quote (AM 2 Nov) */ /* top-aligned: square photo, the quote starts level with it and pushes the rest down (MM 29 Oct) */
.spot-slide + .spot-slide { margin-top: var(--space-12); } /* without script all three show in turn */
@media (min-width: 48rem) { .spot-slide { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-4) var(--space-12); } } /* rows close: the details sit just under the photo (AM 2 Nov) */
.spot-photo { display: block; width: 8rem; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--surface-raised); }
@media (min-width: 48rem) { .spot-photo { width: 12rem; } /* AM 5 Nov: was 15rem */ }
.spot-body { min-width: 0; }
.spot-body blockquote { margin: 0; }
/* Wide screens (AM 2 Nov): the quote sits in a box exactly the photo's height, centred vertically;
   spotlight.js sets each quote to the largest size that fits (16-72 px). */
@media (min-width: 48rem) { .spot-body { height: 12rem; display: flex; align-items: center; } .spot-body blockquote { width: 100%; } }
.spot-body blockquote p { font-size: clamp(1.3rem, 0.95rem + 1.6vw, 2rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--quote); margin: 0; text-wrap: pretty; } /* dark slate grey (AM 2 Nov) */
.spot-body blockquote p.q-long { font-size: clamp(1.1rem, 0.85rem + 1.1vw, 1.5rem); } /* longer quotes a size smaller, so all fit the same space (AM 2 Nov) */
.spot-body blockquote p::before { content: "\201C"; font-weight: 700; }
.spot-body blockquote p::after { content: "\201D"; font-weight: 700; } /* AM 5 Nov (MM: busy): marks in the quote colour. Was both marks orange (MM 29 Oct) */
.spot-body .q-stack > p { transition: opacity 0.4s ease; }
.spot-body .q-stack > p.q-off { opacity: 0; }
/* With script, only the showing quote takes space, so the name follows it; the script reserves the tallest height on the whole section instead */
.spotlight[data-ready] .spot-body .q-stack > p.q-off { display: none; }
/* No approved quote yet (Cam): the one-liner stands in at quote size */

/* With script: the slides share one cell, so the section keeps the tallest one's height and nothing below moves */
.spotlight[data-ready] .spot-slides { display: grid; }
.spotlight[data-ready] .spot-slide { grid-area: 1 / 1; margin: 0; will-change: opacity, transform; transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1) 0.15s, visibility 0s linear 0s; }
.spotlight[data-ready] .spot-slide[data-off] { opacity: 0; visibility: hidden; transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.3s; } /* AM 5 Nov: the one leaving stays visible while it fades and drifts out (spotlight.js) */
@media (prefers-reduced-motion: reduce) { .spotlight .spot-slide, .spotlight[data-ready] .spot-slide[data-off], .spot-body .q-stack > p { transition: none; } }

.spot-tabs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-8); } /* above the slides, tight under the heading (AM 2 Nov) */
@media (max-width: 47.99rem) { .spot-slide { gap: var(--space-4); } } /* phone: photo and quote closer together */
.spot-tabs[hidden] { display: none; }
/* AM 5 Nov: on wide screens the faces sit under the heading text, beside the mark, their foot level with the foot of the mark.
   Sized in the heading's em: the mark is 4 x 0.74em wide plus the sign's 0.5em gap; the row is pulled up by its own height plus the sign's margin. */
@media (min-width: 48rem) {
  #team .spot-tabs { font-size: var(--step-4); margin: calc(-1 * (var(--space-4) + 2.25rem + 6px)) 0 var(--space-8) calc(4 * 0.74em + 0.5em); }
  #team .spot-thumb { width: 2.25rem; height: 2.25rem; }
}
/* They arrive with the heading: hidden while the sign is closed, in after the title opens */
@media (prefers-reduced-motion: no-preference) {
  .js #team .spot-tabs { transition: opacity 500ms ease 1300ms; }
  .js #team:has(.sign:not(.is-in)) .spot-tabs { opacity: 0; transition-delay: 0ms; }
}
.spot-tab { /* AM 5 Nov (MM: busy): faces only, no outline; the active face full strength with a ring, the others dimmed */
  position: relative; display: inline-grid; place-items: center; padding: 3px; border: 0; border-radius: 50%;
  background: none; cursor: pointer; opacity: 0.5; transition: opacity 0.2s ease;
}
.spot-tab:hover, .spot-tab:focus-visible { opacity: 0.85; }
.spot-tab[aria-selected="true"] { opacity: 1; }
/* AM 5 Nov: the ring round the active face is the timer. A faint track, and a subtle grey arc that fills
   over the interval (12 s, matching data-interval), holds while paused and stays full once someone has picked a person. */
@property --spot-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.spot-tab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  --spot-p: 100%;
  background: conic-gradient(var(--secondary) var(--spot-p), color-mix(in srgb, var(--secondary) 30%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0;
}
.spot-tab[aria-selected="true"]::before { opacity: 1; }
.spot-tab.run::before { animation: spot-ring 12s linear forwards; }
.spot-tab.run.held::before { animation-play-state: paused; }
@keyframes spot-ring { from { --spot-p: 0%; } to { --spot-p: 100%; } }
.spot-thumb { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; background: var(--surface-raised); }

/* ---------- How we help: two ways in (MM 29 Oct; no tabs, AM 2 Nov) ----------
   Two titles over one hairline as jump links, then both tracks one after the other. Nothing hides
   or swaps, so the page never jumps (29 Oct call). */
.choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);
  border-bottom: 1px solid var(--secondary); margin: 0 0 var(--space-12);
}
.choice a {
  display: flex; flex-direction: column; gap: var(--space-1); margin: 0 0 -1px; padding: 0 0 var(--space-4);
  color: var(--body); text-decoration: none; border-bottom: 6px solid transparent; transition: border-color 0.2s, color 0.2s;
}
.choice a:hover, .choice a:focus-visible { border-bottom-color: var(--highlight); }
.choice a:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.choice .num { font-size: var(--step--1); font-weight: 600; color: var(--highlight-text); font-variant-numeric: tabular-nums; }
.choice-title { font-size: var(--step-2); font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; }
.choice-sub { display: none; font-size: var(--step--1); }
@media (min-width: 40rem) { .choice-sub { display: block; } }
@media (prefers-reduced-motion: reduce) { .choice a { transition: none; } }

/* Each track: its title, then its steps, all on the page's left edge (AM 2 Nov) */
.choice-panel { scroll-margin-top: var(--space-8); }
.choice-panel + .choice-panel { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--secondary); }
.track-title { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--step-3); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-8); text-wrap: balance; }
.track-title .num { font-size: var(--step--1); font-weight: 600; color: var(--highlight-text); font-variant-numeric: tabular-nums; }
.choice-panel .steps { display: grid; gap: var(--space-6) var(--space-8); list-style: none; margin: 0; padding: 0; counter-reset: step; }
/* One step under another at every width: the numbers read as a sequence (MM 29 Oct) */
.choice-panel .steps { max-width: var(--measure); }
.choice-panel .steps li { counter-increment: step; }
/* Each step's number in an orange circle, to draw the eye down the steps (MM 29 Oct) */
.choice-panel .steps h4 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step-1); margin: 0 0 var(--space-2); }
.choice-panel .steps h4::before {
  content: counter(step); flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--highlight); color: var(--on-highlight); font-size: var(--step--1); font-weight: 700; line-height: 1;
}
/* The numbers turn orange one after another when the track comes into view, and stay orange (AM).
   They rest grey only with script; without it, or with reduced motion, they are simply orange. */
.js .choice-panel .steps h4::before { background: var(--secondary); color: var(--on-secondary); transition: background-color var(--fade-orange) ease-in-out, color var(--fade-orange) ease-in-out; }
.js .choice-panel .steps.is-in h4::before { background: var(--highlight); color: var(--on-highlight); }
.js .choice-panel .steps li:nth-child(2) h4::before { transition-delay: 1.2s; }
.js .choice-panel .steps li:nth-child(3) h4::before { transition-delay: 2.4s; }
.js .choice-panel .steps li:nth-child(4) h4::before { transition-delay: 3.6s; }
@media (prefers-reduced-motion: reduce) { .js .choice-panel .steps h4::before { transition: none; } }
.choice-panel .steps p { margin: 0; }
.choice-note { margin: var(--space-8) 0 0; max-width: var(--measure); }
.choice-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: var(--space-8) 0 0; font-weight: 600; color: var(--ink); }
#faq { margin-top: var(--space-16); } /* MM 29 Oct: more room before the questions */
#faq .faq { margin-top: var(--space-8); }
#faq .actions { margin-top: var(--space-8); }

/* A one-sentence statement at heading size, like the home page's "What we believe" line (MM 29 Oct, people page Why us) */
.statement { font-size: var(--step-3); font-weight: 700; line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0 0 var(--space-6); text-wrap: balance; }