/* Leon Greenwood — speaking site
   Layout concept: a light editorial page by default (one off-white), with black reserved for the
   big moments: hero, showreel, selected storytelling, the closing call to action and the footer.
   One typeface (Archivo). Blue only for actions and small emphasis. Single deliberate look. */
:root {
  --ink: #0b0c0e;           /* black moments */
  --paper: #f3f3f1;         /* off-white: default background */
  --white: #ffffff;         /* forms */
  --blue: #2a55ff;          /* actions and emphasis on light */
  --blue-dark: #1d44e6;     /* hover */
  --blue-on-ink: #7593ff;   /* emphasis on black (AA contrast) */
  --heading: #0b0c0e;       /* near-black headings */
  --body: #2c3038;          /* dark charcoal body text */
  --muted: #555b66;         /* captions and small print only */
  --heading-inv: #ffffff;
  --body-inv: #d6d9df;      /* readable light grey on black */
  --muted-inv: #b4b9c2;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;   /* italic editorial statements only */
  --fs-hero: clamp(2.9rem, 8vw, 6.75rem);
  --fs-h1: clamp(2.2rem, 4.6vw, 3.75rem);
  --fs-h2: clamp(1.9rem, 3.3vw, 2.9rem);      /* ~46px desktop */
  --fs-statement: clamp(1.3rem, 2vw, 1.875rem);  /* 24-30px */
  --fs-statement-xl: clamp(1.6rem, 3.2vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.5vw, 1.35rem);
  --fs-lead: clamp(1.125rem, 1.35vw, 1.25rem);
  --fs-body: 1.0625rem;     /* 17px desktop, 16px mobile */
  --fs-small: .875rem;
  --fs-label: .8125rem;

  --gutter: clamp(20px, 4.2vw, 56px);
  --max: 1280px;
  --sec: clamp(48px, 7vw, 96px);   /* 48px mobile, up to 96px desktop */
  --gap-head: clamp(24px, 3vw, 40px);
  --header-h: 72px;
  --ease: cubic-bezier(.2,.7,.1,1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
p, figure { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--heading); text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--blue); color: var(--white); padding: 10px 14px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- Type system: the same hierarchy everywhere ---------- */
.h-hero, .h1, .h2, .h3 { font-family: var(--font); font-weight: 700; font-stretch: 87.5%; letter-spacing: -.02em; line-height: 1.06; }
.h-hero { font-size: var(--fs-hero); font-weight: 800; font-stretch: 80%; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
.label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.lead { font-size: var(--fs-lead); line-height: 1.55; }
.small, .caption { font-size: var(--fs-small); color: var(--muted); }
.caption { margin-top: 10px; }
.prose { max-width: 62ch; display: grid; gap: 1em; }

/* Dark surfaces: one rule sets every text colour */
.on-dark { background: var(--ink); color: var(--body-inv); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--heading-inv); }
.on-dark .label { color: var(--blue-on-ink); }
.on-dark .small, .on-dark .caption { color: var(--muted-inv); }
.on-dark :focus-visible { outline-color: var(--blue-on-ink); }
.on-paper { background: var(--paper); }
.on-white { background: var(--white); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); }
/* Two light sections in a row share their spacing instead of doubling it */
.sec.on-paper + .sec.on-paper { padding-top: 0; }
.stack { display: grid; gap: 18px; align-content: start; min-width: 0; }
.head { display: grid; gap: 12px; margin-bottom: var(--gap-head); max-width: 760px; }
.head--row { max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 48px; }
.head--row > div { display: grid; gap: 12px; }
.head--row p { max-width: 46ch; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.split--rev > :first-child { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split--rev > :first-child { order: 0; }
}

/* Photos: no borders, radius or shadows. Frame ratio is the photo's own unless set. */
.ph { position: relative; overflow: hidden; background: #1a1c20; max-width: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover;
  /* scale = parallax headroom x hover x reveal; translate is driven by the parallax script */
  scale: calc(var(--base, 1) * var(--hover, 1) * var(--reveal, 1));
  transition: scale .9s var(--ease); }
.ph--parallax img { --base: 1.08; will-change: translate; }
@media (hover: hover) and (pointer: fine) {
  main .ph:not(.hero__media .ph):not(.page-hero > .ph):hover img { --hover: 1.035; }
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 14px 24px; border: 1.5px solid var(--blue); border-radius: 2px;
  background: var(--blue); color: var(--white); font-family: var(--font); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn .arr, .text-link .arr { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arr, .text-link:hover .arr { transform: translateX(4px); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: transparent; color: var(--blue-on-ink); border-color: var(--blue-on-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--heading); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: color .25s; }
.text-link:hover { color: var(--blue); }
@media (max-width: 520px) { .btn-row .btn { width: 100%; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--heading-inv);
  padding-top: env(safe-area-inset-top, 0px);
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(11,12,14,.65) 0%, rgba(11,12,14,0) 100%);
  transition: background-color .3s;
}
/* No backdrop-filter or transform here: either would trap fixed-position children. */
.site-header.is-solid, .nav-open .site-header { background-color: var(--ink); background-image: none; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { text-decoration: none; display: grid; gap: 6px; line-height: 1; }
.brand__name { font-weight: 800; font-stretch: 80%; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .01em; }
.brand__tag { font-size: var(--fs-small); color: var(--body-inv); }
.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 32px); }
.nav__links a:not(.btn) { text-decoration: none; font-size: .9375rem; font-weight: 500; color: var(--body-inv); padding-block: 6px; border-bottom: 2px solid transparent; transition: color .25s, border-color .25s; }
.nav__links a:not(.btn):hover { color: var(--heading-inv); }
.nav__links a[aria-current="page"] { color: var(--heading-inv); border-bottom-color: var(--blue-on-ink); }
.nav__links .btn { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.nav__toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -12px; background: none; border: 0; color: inherit; cursor: pointer; }
.nav__toggle span { position: relative; display: block; width: 24px; height: 2px; background: currentColor; transition: background-color .2s; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
.nav__toggle span::before { transform: translateY(-7px); }
.nav__toggle span::after { transform: translateY(7px); }
.nav-open .nav__toggle span { background: transparent; }
.nav-open .nav__toggle span::before { transform: rotate(45deg); }
.nav-open .nav__toggle span::after { transform: rotate(-45deg); }

/* Mobile menu: a sibling of the header (never inside it), fixed to the viewport.
   Hidden with visibility so it can fade; visibility switches only after the fade ends. */
.mnav {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 45;
  height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink); color: var(--heading-inv);
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display: none; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.mnav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.mnav a:not(.btn) { display: block; padding-block: 10px; text-decoration: none; font-size: clamp(1.75rem, 8vw, 2.25rem); font-weight: 700; font-stretch: 87.5%; letter-spacing: -.02em; line-height: 1.15; }
.mnav a[aria-current="page"] { color: var(--blue-on-ink); }
.mnav .btn { margin-top: 24px; width: 100%; }
.mnav__meta { margin-top: auto; padding-top: 28px; font-size: var(--fs-small); color: var(--body-inv); }
.mnav .mnav__meta a { display: inline; padding: 0; font-size: inherit; font-weight: 600; letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .mnav { display: flex; }
}

/* ---------- Home hero ---------- */
.hero { position: relative; display: grid; align-items: end; min-height: min(90vh, 880px); background: var(--ink); color: var(--body-inv); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media .ph { position: absolute; inset: 0; }
.hero__media img { object-position: 66% 30%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,12,14,.94) 0%, rgba(11,12,14,.82) 32%, rgba(11,12,14,.25) 62%, rgba(11,12,14,.05) 82%),
              linear-gradient(0deg, rgba(11,12,14,.8) 0%, rgba(11,12,14,0) 40%); }
.hero__inner { padding-block: calc(var(--header-h) + 64px) clamp(48px, 6vw, 80px); display: grid; gap: 20px; }
.hero h1 { color: var(--heading-inv); }
.hero .label { color: var(--heading-inv); }
.hero .hero__line { font-size: clamp(1.3rem, 2vw, 1.75rem); color: var(--heading-inv); max-width: 26ch; }
.hero__intro { max-width: 50ch; }
@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__media { position: relative; inset: auto; z-index: 0; height: 56vh; min-height: 320px; max-height: 480px; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, rgba(11,12,14,.5) 26%, rgba(11,12,14,0) 52%), linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,0) 22%); }
  .hero::before { display: none; }
  .hero__inner { position: relative; z-index: 1; margin-top: -64px; padding-block: 0 48px; gap: 16px; }
}

/* ---------- Inner page heroes ---------- */
.page-hero { position: relative; display: grid; align-items: end; min-height: min(72vh, 700px); background: var(--ink); color: var(--body-inv); overflow: hidden; isolation: isolate; }
.page-hero > .ph { position: absolute; inset: 0; z-index: -2; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,12,14,.9) 0%, rgba(11,12,14,.6) 45%, rgba(11,12,14,.1) 80%),
              linear-gradient(0deg, rgba(11,12,14,.9) 0%, rgba(11,12,14,0) 50%); }
.page-hero__inner { padding-block: calc(var(--header-h) + 64px) clamp(40px, 5vw, 72px); display: grid; gap: 18px; }
.page-hero__inner .lead { max-width: 54ch; }
.page-hero h1, .page-hero .label { color: var(--heading-inv); }
.page-hero--plain { min-height: 0; }
.page-hero--plain::before { display: none; }
@media (max-width: 760px) {
  .page-hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  .page-hero > .ph { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
  .page-hero > .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, rgba(11,12,14,0) 45%), linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,0) 25%); }
  .page-hero::before { display: none; }
  .page-hero__inner { position: relative; z-index: 1; padding-top: 8px; padding-bottom: 40px; }
  .page-hero--plain .page-hero__inner { padding-top: calc(var(--header-h) + 32px); }
}

/* About hero: portrait at its native proportion beside the text */
.about-hero { padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; background: var(--ink); color: var(--body-inv); }
.about-hero__text { padding: 64px var(--gutter) clamp(40px, 5vw, 72px); display: grid; gap: 18px; justify-self: end; width: 100%; max-width: 740px; }
.about-hero__text .lead { max-width: 44ch; }
.about-hero h1 { color: var(--heading-inv); }
.about-hero .label { color: var(--heading-inv); }
@media (max-width: 860px) {
  .about-hero { grid-template-columns: minmax(0, 1fr); }
  .about-hero .ph { order: -1; }
  .about-hero__text { padding-top: 28px; padding-bottom: 48px; justify-self: stretch; max-width: none; }
}

/* ---------- Credentials ---------- */
.creds ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 32px; padding-block: 0 clamp(32px, 4vw, 48px); }
.creds li { font-weight: 600; color: var(--heading-inv); font-size: clamp(1rem, 1.25vw, 1.0625rem); line-height: 1.3; }
@media (max-width: 760px) { .creds ul { grid-template-columns: 1fr 1fr; padding-bottom: 40px; } }

/* ---------- Topics overview (home) ---------- */
.topics { display: grid; gap: clamp(20px, 2.4vw, 28px); }
.topics li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 6px 48px; align-items: baseline; }
.topics a { text-decoration: none; transition: color .25s; }
.topics a:hover { color: var(--blue); }
.topics p { max-width: 58ch; }
@media (max-width: 760px) { .topics li { grid-template-columns: minmax(0, 1fr); } }

/* Speaking topics: one shared layout, one background, alternating sides */
.topic + .topic { margin-top: clamp(56px, 7vw, 96px); }
.topic-nav ul { display: flex; flex-wrap: wrap; gap: 4px 28px; padding-block: 0 24px; }
.topic-nav a { text-decoration: none; font-weight: 500; color: var(--body-inv); padding-block: 8px; display: inline-block; transition: color .25s; }
.topic-nav a:hover { color: var(--heading-inv); }
.events { display: grid; gap: 4px; }

/* ---------- Chapters (About) ---------- */
.chapters { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 2fr); gap: clamp(28px, 6vw, 96px); }
.chapters__head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; display: grid; gap: 12px; }
.chapters ol { display: grid; gap: clamp(24px, 3vw, 36px); }
.chapter { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 20px; }
.chapter__num { font-weight: 700; font-stretch: 87.5%; color: var(--blue); font-variant-numeric: tabular-nums; font-size: 1.125rem; line-height: 1.4; }
.chapter .stack { gap: 6px; }
.chapter p { max-width: 60ch; }
@media (max-width: 960px) { .chapters { grid-template-columns: minmax(0, 1fr); } .chapters__head { position: static; } }
@media (max-width: 520px) { .chapter { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 12px; } }

.full-photo { background: var(--ink); }

/* ---------- Video (16:9 everywhere): thumbnail first, YouTube player on click ---------- */
.vid__frame { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 2px; color: var(--heading-inv); background: #16181c; }
.vid__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid__frame::after { content: ""; position: absolute; inset: 0; background: rgba(11,12,14,.18); pointer-events: none; transition: background-color .25s; }
.vid__play { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; background: none; border: 0; color: var(--heading-inv); cursor: pointer; }
.vid__play svg { box-sizing: content-box; width: clamp(20px, 2.4vw, 30px); padding: clamp(20px, 2.4vw, 30px); padding-left: calc(clamp(20px, 2.4vw, 30px) + 4px); border-radius: 50%; background: var(--blue); transition: background-color .25s; }
.vid--sm .vid__play svg { width: 20px; padding: 20px 20px 20px 24px; }
.vid__play svg { transition: background-color .25s, transform .35s var(--ease); }
.vid__play:hover svg, .vid__play:focus-visible svg { background: var(--blue-dark); transform: scale(1.1); }
@media (hover: hover) and (pointer: fine) { .vid:hover .vid__frame::after { background: rgba(11,12,14,.38); } }
.vid__play:focus-visible { outline: 2px solid var(--white); outline-offset: -6px; }
.vid__label { display: none; position: absolute; left: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); bottom: clamp(12px, 2vw, 20px); z-index: 2; font-weight: 600; font-size: clamp(.9375rem, 1.3vw, 1.125rem); line-height: 1.3; color: var(--heading-inv); pointer-events: none; }
.vid.no-thumb .vid__label { display: block; }
.vid.is-playing .vid__label, .vid.is-blocked .vid__label { display: none; }
.vid__fallback { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 12px 18px; background: var(--blue); color: var(--white); font-weight: 600; text-decoration: none; border-radius: 2px; white-space: nowrap; }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.vid.is-playing .vid__frame::after, .vid.is-playing .vid__play, .vid.is-playing .vid__thumb { display: none; }
.vid.is-blocked .vid__play, .vid.is-blocked iframe { display: none; }
.vid.is-blocked .vid__fallback { display: inline-flex; gap: 8px; }
/* YouTube play button: a rounded rectangle in YouTube's player style, red on hover or focus */
.vid .vid__play--yt svg { width: clamp(56px, 5.4vw, 72px); height: auto; padding: 0; border-radius: 0; background: none; overflow: visible; }
.vid.vid--sm .vid__play--yt svg { width: 60px; padding: 0; }
.vid__play--yt .vid__yt-bg { fill: #212121; fill-opacity: .82; transition: fill .2s, fill-opacity .2s; }
.vid .vid__play--yt:hover svg, .vid .vid__play--yt:focus-visible svg { background: none; transform: scale(1.06); }
.vid__play--yt:hover .vid__yt-bg, .vid__play--yt:focus-visible .vid__yt-bg, .vid.is-loading .vid__yt-bg { fill: #f00; fill-opacity: 1; }
.vid.is-loading .vid__play { cursor: progress; }
.vid.is-loading .vid__frame iframe { opacity: 0; }
.vid__hint { display: none; position: absolute; left: 50%; bottom: clamp(12px, 2vw, 20px); transform: translateX(-50%); z-index: 4; padding: 8px 14px; background: rgba(11,12,14,.88); color: var(--white); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; border-radius: 2px; pointer-events: none; }
.vid.needs-tap .vid__hint { display: block; }
.vid-cap { margin-top: 12px; display: grid; gap: 4px; font-size: var(--fs-small); color: var(--muted); max-width: 60ch; }
.vid-cap__title { font-size: 1rem; font-weight: 600; color: var(--heading); }
.on-dark .vid-cap { color: var(--muted-inv); }
.on-dark .vid-cap__title { color: var(--heading-inv); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .trio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Gallery (consistent 3:2 frames) ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.gallery .g-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .gallery { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Closing call to action ---------- */
.cta-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 48px; }
.cta-band .stack { max-width: 620px; }

/* ---------- Book ---------- */
.book { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); background: var(--white); }
.book__media { position: sticky; top: 0; height: 100vh; height: 100svh; }
.book__media .ph { position: absolute; inset: 0; }
.book__media img { object-position: 62% 30%; }
.book__body { padding: calc(var(--header-h) + 56px) var(--gutter) var(--sec); display: grid; gap: 22px; align-content: start; max-width: 780px; }
.notice { font-size: var(--fs-small); font-weight: 600; color: var(--heading); }
@media (max-width: 960px) {
  .book { grid-template-columns: minmax(0, 1fr); }
  .book__media { position: relative; height: auto; aspect-ratio: 3 / 2; }
  .book__body { padding-top: 32px; max-width: none; }
}
.form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 24px; }
.field { display: grid; gap: 6px; min-width: 0; grid-column: span 3; align-content: start; }
.field--third { grid-column: span 2; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .9375rem; font-weight: 600; color: var(--heading); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--heading); background: var(--white);
  border: 1px solid rgba(11,12,14,.3); border-radius: 2px; padding: 12px 14px; min-height: 50px;
  -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--heading) 50%), linear-gradient(135deg, var(--heading) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,85,255,.18); }
.field input::placeholder, .field textarea::placeholder { color: #767b85; }
.field.is-invalid input, .field.is-invalid select { border-color: #c8312b; }
.field .err { font-size: var(--fs-small); color: #b02a25; }
.form__error { font-size: var(--fs-small); color: #b02a25; }
.form__error a { color: inherit; }
.form .hp { display: none; }
.form__submit { grid-column: 1 / -1; display: grid; gap: 12px; justify-items: start; margin-top: 4px; }
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); } .field, .field--third { grid-column: 1 / -1; } .form__submit .btn { width: 100%; } }
.thanks { padding: clamp(24px, 4vw, 40px); background: var(--ink); color: var(--body-inv); display: grid; gap: 12px; }
.thanks .h2 { color: var(--heading-inv); }

/* ---------- Legal ---------- */
.legal { max-width: 720px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--body-inv); padding-block: clamp(48px, 6vw, 80px) 28px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-bottom: clamp(32px, 4vw, 48px); }
.footer-top .brand { color: var(--heading-inv); }
.footer-top .brand__name { font-size: 1.75rem; }
.footer-top h2 { font-size: var(--fs-small); font-weight: 600; color: var(--muted-inv); margin-bottom: 12px; }
.footer-top ul { display: grid; gap: 8px; }
.footer-top a:not(.btn) { text-decoration: none; color: var(--heading-inv); transition: color .25s; }
.footer-top a:not(.btn):hover { color: var(--blue-on-ink); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: var(--fs-small); color: var(--body-inv); }
.footer-base a { color: var(--body-inv); transition: color .25s; }
.footer-base a:hover { color: var(--heading-inv); }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > :first-child { grid-column: 1 / -1; } }

@media (max-width: 520px) {
  :root { --fs-body: 1rem; }
}
@media (max-width: 520px) { :root { --fs-body: 1rem; } }

/* ---------- Editorial statements: the one serif voice on the site ---------- */
.statement { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--fs-statement); line-height: 1.3; letter-spacing: -.005em; color: var(--heading); max-width: 30ch; text-wrap: balance; }
.statement--xl { font-size: var(--fs-statement-xl); line-height: 1.18; max-width: 24ch; }
.on-dark .statement, .hero .statement { color: var(--heading-inv); }

/* ---------- Speaking: controlled variation, shared rhythm ---------- */
.topic + .topic, .topic-film + .topic { margin-top: clamp(72px, 9vw, 128px); }
.topic + .topic-film { margin-top: clamp(32px, 4vw, 48px); }
.topic--feature { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.topic-film { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 1000px; margin-left: auto; }
.topic-film .stack { gap: 10px; }
.topic__intro { margin-bottom: clamp(28px, 4vw, 48px); }
.topic--balanced { align-items: center; }
.topic__spacious-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
@media (max-width: 860px) {
  .topic--feature, .topic-film, .topic__spacious-text { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .topic-film { max-width: none; }
  .topic--spacious .ph { aspect-ratio: 3 / 2 !important; }
}

/* ---------- Motion system ----------
   Classes are added by JavaScript only to content below the first screen, so without JS
   (or with reduced motion) everything is simply visible. Each element animates once. */
:root { --rv-y: 28px; }
@media (max-width: 760px) { :root { --rv-y: 18px; } }
.rv { opacity: 0; transform: translate3d(0, var(--rv-y), 0); transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: var(--rv-d, 0ms); }
.rv.is-in { opacity: 1; transform: none; }
/* Cinematic photo reveal: the photo opens from the bottom of its frame while it settles.
   The clip sits on the image, not the frame, so the frame stays visible to the observer. */
.rv-clip img { --reveal: 1.12; clip-path: inset(100% 0 0 0); transition: clip-path 1.05s cubic-bezier(.65, 0, .25, 1), scale 1.3s var(--ease); transition-delay: var(--rv-d, 0ms); }
.rv-clip.is-in img { --reveal: 1; clip-path: inset(0 0 0 0); }
/* Smaller photos and video frames: simple fade, rise and settle */
.rv-fade { opacity: 0; transform: translate3d(0, var(--rv-y), 0) scale(.985); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--rv-d, 0ms); }
.rv-fade.is-in { opacity: 1; transform: none; }

/* Hero entrance: name, identity, supporting text, then the booking button */
@keyframes enter { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
.hero__inner > *, .page-hero__inner > *, .about-hero__text > *, .book__body > :nth-child(-n+4) { animation: enter .8s var(--ease) both; }
.hero__inner > h1 { animation-delay: .05s; }
.hero__inner > .label { animation-delay: .2s; }
.hero__inner > .hero__line { animation-delay: .32s; }
.hero__inner > .hero__intro { animation-delay: .42s; }
.hero__inner > .btn-row { animation-delay: .58s; }
.page-hero__inner > :nth-child(2), .about-hero__text > :nth-child(2), .book__body > :nth-child(2) { animation-delay: .1s; }
.page-hero__inner > :nth-child(3), .about-hero__text > :nth-child(3), .book__body > :nth-child(3) { animation-delay: .2s; }
.book__body > :nth-child(4) { animation-delay: .28s; }
@keyframes heroImg { from { scale: 1.06; } to { scale: 1; } }
.hero__media img, .hero__video, .page-hero > .ph img { animation: heroImg 2.2s var(--ease) both; }

/* Page transitions: a short fade in on arrival and out on leaving */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
main { animation: pageIn .45s ease both; }
html.is-leaving main, html.is-leaving .site-footer { opacity: 0; transition: opacity .18s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .rv, .rv-fade { opacity: 1 !important; transform: none !important; }
  .rv-clip img { clip-path: none !important; }
  .ph img { scale: 1 !important; translate: none !important; }
  html.is-leaving main, html.is-leaving .site-footer { opacity: 1; }
}
.ph--pending { display: grid; place-items: center; background: #e4e5e2; }
.ph--pending span { font-size: var(--fs-small); color: var(--muted); }

/* Speaking hero */
.sp-hero-title { max-width: 15ch; }
.page-hero .statement { color: var(--heading-inv); }
.page-hero__inner > :nth-child(4) { animation-delay: .3s; }
@media (max-width: 760px) { .sp-hero-title { font-size: clamp(2rem, 9vw, 2.6rem); } }

/* Events Leon speaks at */
.event-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(28px, 5vw, 80px); margin-bottom: clamp(40px, 5vw, 64px); }
.event-types .stack { gap: 8px; }
.event-types p { max-width: 52ch; }
.event-feature { margin-bottom: clamp(36px, 4vw, 56px); }
@media (max-width: 760px) { .event-types { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Logo marquee ---------- */
.logos__head { margin-bottom: 18px; }
.logos__head--second { margin-top: clamp(36px, 4vw, 52px); }
.logos__title { font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-on-ink); }
.marquee { position: relative; overflow: hidden; max-width: 100%; padding-block: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.marquee:focus-visible { outline: 2px solid var(--blue-on-ink); outline-offset: 4px; }
/* --reps = copies of the logo list in each half of the track. Duration scales with it so the speed never changes. */
.marquee__track { --reps: 1; display: flex; width: max-content; animation: marquee calc(16s * var(--reps)) linear infinite; will-change: transform; }
.marquee--ltr .marquee__track { animation-direction: reverse; animation-duration: calc(18.7s * var(--reps)); }
.marquee__set .rep2, .marquee__set .rep3 { display: none; }
@media (min-width: 640px) { .marquee__track { --reps: 2; } .marquee__set .rep2 { display: flex; } }
@media (min-width: 1800px) { .marquee__track { --reps: 3; } .marquee__set .rep3 { display: flex; } }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__set, .marquee__static, .logo-row { display: flex; align-items: center; flex-shrink: 0; }
.marquee__set .logo { padding-inline: clamp(28px, 4vw, 56px); }
.marquee__static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* read by screen readers; shown when motion is reduced */
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.logo { display: flex; align-items: center; min-height: clamp(40px, 4.4vw, 56px); white-space: nowrap; }  /* min-height, so tall crests are never cropped by the marquee */
/* Official logos keep their own colours: every file used here is the brand's own version for dark backgrounds. */
.logo img { display: block; height: var(--logo-h, 30px); width: auto; max-width: 220px; object-fit: contain; }
.logo--key img { --logo-h: 40px; }
.logo[data-shape="square"] img { --logo-h: 52px; }       /* Lidl's square mark reads small at text height */
.logo[data-shape="tall"] img { --logo-h: 58px; }         /* crests and stacked marks */
.logo[data-shape="compact"] img { --logo-h: 38px; }
.logo[data-shape="crest"] img { --logo-h: 78px; }        /* Lord Wandsworth crest, Black Business Expo stacked mark */
@media (max-width: 760px) {
  .logo img { --logo-h: 24px; }
  .logo--key img { --logo-h: 32px; }
  .logo[data-shape="square"] img { --logo-h: 42px; }
  .logo[data-shape="tall"] img { --logo-h: 48px; }
  .logo[data-shape="compact"] img { --logo-h: 30px; }
  .logo[data-shape="crest"] img { --logo-h: 64px; }
}
.logo__text { font-weight: 700; font-stretch: 87.5%; letter-spacing: -.01em; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--body-inv); opacity: .78; }
.logo--key .logo__text { font-size: clamp(1.35rem, 2.2vw, 1.9rem); color: var(--heading-inv); opacity: 1; }
/* Static row (Videos & Media) on light background */
.logo-row--dark { background: var(--ink); padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 40px); }
.logo-row.logo-row--dark .logo__text { color: var(--body-inv); opacity: .85; }
.logo-row { flex-wrap: wrap; gap: 14px clamp(32px, 5vw, 64px); }
.logo-row .logo__text { color: var(--heading); opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { display: none; }
  .marquee__static { position: static; width: auto; height: auto; clip: auto; white-space: normal; display: flex; flex-wrap: wrap; gap: 10px clamp(28px, 4vw, 56px); padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
}

/* ---------- Speaking: additional speaking & workshop experience (small, static, secondary) ---------- */
.also-spoke { margin-top: clamp(40px, 5vw, 64px); }
.also-spoke__title { color: var(--muted, #5b5e66); margin-bottom: 14px; }
.also-spoke .logo-row { justify-content: center; gap: 14px clamp(36px, 6vw, 88px); }
.also-spoke .logo[data-shape="crest"] img { --logo-h: 64px; }
@media (max-width: 640px) { .also-spoke .logo[data-shape="crest"] img { --logo-h: 56px; } }

/* ---------- About: British Bobsleigh & Skeleton, within the Olympic journey ---------- */
.represents { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding-top: 18px; border-top: 1px solid rgba(11,12,14,.12); }
.represents img { height: 72px; flex-shrink: 0; width: auto; display: block; }
.represents p { margin: 0; font-size: .95rem; line-height: 1.45; }
.also-spoke + .event-cta { margin-top: clamp(28px, 3vw, 40px); }
.logo[data-shape="wide"] img { --logo-h: 48px; max-width: 280px; }   /* long single-line wordmarks with a fine crest */
@media (max-width: 640px) { .logo[data-shape="wide"] img { --logo-h: 38px; max-width: 220px; } }

/* ---------- Carousel logo sizing (both homepage carousels only) ----------
   Each logo carries --h, a height worked out in build.py from its proportions so every logo has about the
   same visible area. One scale per breakpoint keeps them consistent; spacing is a single even gap. */
.marquee { --logo-scale: 1; }
.marquee .logo, .marquee .logo[data-shape] { min-height: calc(58px * var(--logo-scale)); }
.marquee .logo img, .marquee .logo[data-shape] img, .marquee .logo--key img {
  height: calc(var(--h, 30) * var(--logo-scale) * 1px); max-width: none; flex-shrink: 0; }
.marquee__set .logo { padding-inline: clamp(20px, 5.5vw, 44px); flex-shrink: 0; }
@media (min-width: 640px) { .marquee { --logo-scale: 1.15; } }
@media (min-width: 1024px) { .marquee { --logo-scale: 1.3; } }

/* Videos & Media: As Seen On logos centred in their black panel; each wrapped row centres on its own */
.logo-row--center { justify-content: center; }

/* ---------- Written testimonials (compact; uses the site's existing type scale and blue accent) ---------- */
.duo__item { display: grid; gap: clamp(18px, 2vw, 24px); align-content: start; }
.endorse { margin: 0; padding-left: 18px; border-left: 2px solid var(--blue); display: grid; gap: 10px; max-width: 62ch; }
.endorse__theme { font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.endorse__text, .endorse__text p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--body); }
.endorse__by { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--muted); }
.endorse__name { font-weight: 600; color: var(--heading); }
.endorse__note { font-size: var(--fs-small); font-style: italic; color: var(--muted); margin-bottom: 4px; }
.endorse--after-gallery { margin-top: clamp(32px, 4vw, 48px); }
.on-dark .endorse__theme { color: var(--blue-on-ink); }
.on-dark .endorse__text, .on-dark .endorse__text p { color: var(--body-inv); }
.on-dark .endorse__name { color: var(--heading-inv); }
.on-dark .endorse__by, .on-dark .endorse__note { color: var(--muted-inv); }


/* Homepage hero background video: covers the hero, cropped not stretched, dimmed slightly so the
   text stays clear. Beneath it sits the video's own first frame with the same crop, dimming and
   scale, so the video fades in over an identical picture once its first frame is on screen. */
.hero__media picture { display: contents; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  opacity: .01; transition: opacity .6s ease-out; filter: brightness(.66); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { object-position: 50% 35%; filter: brightness(.66); }
}
.hero__video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* Native testimonial videos: same frame, play button and overlay as the YouTube embeds */
.vid__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vid--local:not(.is-playing) .vid__media { pointer-events: none; }

/* Smallest phones (under 375px): the hero name scales with the screen so "GREENWOOD" always fits.
   At 375px and wider this resolves to the normal hero size, so nothing else changes. */
@media (max-width: 374px) { .hero .h-hero { font-size: min(var(--fs-hero), calc((100vw - 2 * var(--gutter)) / 7.2)); } }

/* Date field: keyboard focus lands on its day/month/year parts, so show the same focus ring via :focus-within */
.field input[type="date"]:focus-within { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,85,255,.18); }