/* Leon Taylor: 2026 site styles. Mobile first; breakpoints at 48rem (tablet) and 64rem (desktop). */

:root {
  --navy: #0b2a4a;
  --navy-deep: #061a30;
  --navy-soft: #13406b;
  --aqua: #6ad8d3;
  --aqua-bright: #8ee6e1;
  --teal: #0c7479;
  --ink: #142233;
  --muted: #4c5f71;
  --mist: #edf5f6;
  --line: #d8e3e8;
  --white: #fff;

  --font-head: "Manrope", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --track-body: 0.03em; /* Plex runs narrow; this opens it up about 7% */

  --wrap: 72rem;
  --gutter: 1rem;
  --section: 4rem;
  --radius: 4px;
  --shadow: 0 10px 30px rgb(6 26 48 / 0.12);
}
@media (min-width: 48rem) { :root { --gutter: 2rem; --section: 5.5rem; } }
@media (min-width: 64rem) { :root { --section: 7rem; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.65 var(--font-body); letter-spacing: var(--track-body); }
/* Manrope text that sets no tracking of its own keeps its natural spacing */
.btn, .link-arrow, .site-nav a, .panel p, .features--numbered li::before, .press .wordmark, .talk__subtitle, .talk-list strong, .form legend, .book-card__title, .topics strong { letter-spacing: normal; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-family: var(--font-head); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--navy); }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem); }
h3, .h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
blockquote { margin: 0; }
/* Focus ring: teal on light backgrounds, aqua on navy, so it always meets 3:1 contrast */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
:is(.section--navy, .hero, .home-hero, .cta, .site-footer, .logos-band, .video-modal) :focus-visible { outline-color: var(--aqua); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--navy); color: var(--white); }
.skip-link:focus { top: 1rem; }

/* Layout */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(46rem + 2 * var(--gutter)); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section--mist { background: var(--mist); }
.section--navy { background: var(--navy); color: #d9e6ef; }
.section--navy h2, .section--navy h3, .section--navy h1 { color: var(--white); }
.section--flush-top { padding-top: 0; }
.center { text-align: center; }
.stack > * + * { margin-top: 1.25rem; }

/* Type helpers */
.eyebrow { display: block; margin-bottom: 0.9rem; font: 700 0.8125rem/1.3 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
.section--navy .eyebrow, .on-dark .eyebrow { color: var(--aqua); }
.lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem); line-height: 1.55; color: var(--muted); }
.section--navy .lead, .on-dark .lead { color: #c9dbe8; }
.big-line { font: 800 clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem)/1.2 var(--font-head); letter-spacing: -0.02em; color: var(--navy); }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; }
.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.8rem 1.5rem;
  border: 2px solid var(--navy); border-radius: var(--radius); background: var(--navy); color: var(--white);
  font: 700 1rem/1.2 var(--font-head); text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn:hover { background: var(--navy-soft); border-color: var(--navy-soft); }
.btn--aqua { background: var(--aqua); border-color: var(--aqua); color: var(--navy); }
.btn--aqua:hover { background: var(--aqua-bright); border-color: var(--aqua-bright); }
.btn--ghost { background: transparent; border-color: currentColor; color: var(--white); }
.btn--ghost:hover { background: rgb(255 255 255 / 0.1); border-color: var(--white); }
.btn--outline { background: transparent; color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.btn-row.center { justify-content: center; }
.btn .icon-play { width: 1.1em; height: 1.1em; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.35rem; font: 700 1rem/1.3 var(--font-head); color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--aqua); padding-bottom: 2px; }
.link-arrow::after { content: "→"; transition: transform 0.2s; }
.link-arrow:hover::after { transform: translateX(3px); }
.on-dark .link-arrow, .section--navy .link-arrow { color: var(--white); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 0.97); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.logo img { width: 11.5rem; height: auto; }
.nav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--navy); cursor: pointer; -webkit-appearance: none; appearance: none; }
/* Explicit width: Safari doesn't stretch flex children inside a <button>, so the lines had no width there */
.nav-toggle span:not(.visually-hidden) { display: block; width: 1.5rem; height: 2px; border-radius: 1px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav { display: none; position: absolute; inset: 100% 0 auto; padding: 0.5rem var(--gutter) 1.5rem; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.nav-open .site-nav { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 0.85rem 0; font: 600 1.0625rem/1.2 var(--font-head); color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--aqua); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.site-nav .nav-cta { margin-top: 1rem; border: 0; }
.site-nav .nav-cta a { display: flex; color: var(--white); border-bottom: 0; text-decoration: none; }
.site-nav .nav-cta a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--aqua); }
@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  .site-nav, .nav-open .site-nav { display: block; position: static; padding: 0; background: none; border: 0; box-shadow: none; }
  .site-nav ul { display: flex; align-items: center; gap: 2rem; }
  .site-nav a { padding: 0.5rem 0; border: 0; font-size: 1rem; }
  .site-nav a:hover { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .site-nav .nav-cta { margin: 0 0 0 0.5rem; }
  .site-nav .nav-cta a { padding: 0.7rem 1.25rem; }
  .site-nav .nav-cta a:hover { text-decoration: none; }
}

/* Heroes: .hero holds a background <picture class="hero__bg"> and content on top */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #d9e6ef; }
.hero h1 { color: var(--white); }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(6 26 48 / 0.92) 0%, rgb(6 26 48 / 0.7) 45%, rgb(6 26 48 / 0.15) 100%); }
.hero__inner { padding-block: clamp(4rem, 3rem + 6vw, 8.5rem); max-width: 40rem; }
.hero__inner .lead { color: #d3e3ee; max-width: 34rem; }
.hero .eyebrow { color: var(--aqua); }
.hero--center .hero__inner { margin-inline: auto; text-align: center; }
.hero--center .btn-row { justify-content: center; }
.hero--center::before { background: rgb(6 26 48 / 0.62); }
/* Aside hero (Hosting): the photo sits above the words on phones and tablets, and fills the right of the hero on wide screens, so Leon is never behind the text */
.hero--aside::before { content: none; }
.hero--aside .hero__bg { position: relative; inset: auto; z-index: auto; }
.hero--aside .hero__bg img { height: auto; aspect-ratio: 3 / 2; }
@media (min-width: 64rem) {
  .hero--aside::before { content: ""; background: linear-gradient(90deg, rgb(6 26 48 / 0.95) 0%, rgb(6 26 48 / 0.85) 36%, rgb(6 26 48 / 0) 62%); }
  .hero--aside .hero__bg { position: absolute; inset: 0 0 0 36%; z-index: -2; }
  .hero--aside .hero__bg img { height: 100%; aspect-ratio: auto; object-position: 20% 30%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
}
/* Split hero (Workshops & Coaching): photo on top on phones, filling the right half on wider screens */
.hero--split::before { content: none; }
.hero__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 48rem) {
  .hero__photo { position: absolute; inset: 0 0 0 50%; }
  .hero__photo img { height: 100%; aspect-ratio: auto; }
  .hero--split .hero__inner { max-width: calc(50% - 2.5rem); }
}

/* Home hero: credentials across the top, words left, framed portrait right, diver between */
.home-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #d3e3ee; }
.home-hero__bg { position: absolute; inset: 0; z-index: -2; }
.home-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; opacity: 0.35; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 42 74 / 0.95) 0%, rgb(11 42 74 / 0.75) 60%, rgb(11 42 74 / 0.9) 100%); }
.home-hero .wrap { padding-block: 2.5rem 3.5rem; }
.credentials { margin: 0 0 1.75rem; font: 700 clamp(0.8125rem, 0.75rem + 0.3vw, 1rem)/1.5 var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; color: var(--aqua); }
.credentials span { white-space: nowrap; }
.home-hero h1 { color: var(--white); max-width: 15ch; }
.home-hero .lead { margin-top: 1rem; color: #d3e3ee; }
.home-hero__portrait { width: min(17.5rem, 80%); margin-top: 2.75rem; border: 8px solid var(--white); box-shadow: 0 18px 40px rgb(0 0 0 / 0.35); aspect-ratio: 4 / 5; }
.home-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  /* Photo starts a quarter of the way in so the diver lands in the gap between words and portrait */
  .home-hero__bg { left: 27%; }
  .home-hero__bg img { opacity: 1; object-position: 50% 35%; }
  .home-hero::before { background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 30%, rgb(11 42 74 / 0.55) 48%, rgb(11 42 74 / 0) 62%, rgb(11 42 74 / 0) 100%); }
  .home-hero .wrap { padding-block: 3rem 4.5rem; }
  .home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.55fr) auto; align-items: center; gap: 1.5rem; }
  /* Nudged 15px out towards the edge so the diver photo behind has a little more room */
  .home-hero__portrait { grid-column: 3; width: clamp(14rem, 22vw, 21.25rem); margin: 0; position: relative; left: 15px; }
}
@media (min-width: 64rem) { .home-hero .wrap { padding-block: 3.5rem 6rem; } .credentials { margin-bottom: 3rem; } }
/* The framed portrait floats above the hero photo, angled slightly, and turns to face the camera
   as the page scrolls. It also drifts down as you scroll, so it moves more slowly than the photo
   behind it (a gentle parallax). Scroll-driven CSS animation, no JavaScript. Browsers without it, and people
   who prefer reduced motion, see the same gentle angle standing still. */
@media (min-width: 48rem) {
  .home-hero__portrait { transform: perspective(1400px) rotateY(-11deg) rotateX(4deg) rotate(1deg);
    box-shadow: 22px 28px 56px rgb(0 0 0 / 0.42), 0 6px 16px rgb(0 0 0 / 0.22); }
}
@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .home-hero__portrait { animation: portrait-turn linear both; animation-timeline: scroll(root); animation-range: 0 34rem; }
  }
}
@keyframes portrait-turn {
  from { transform: perspective(1400px) rotateY(-11deg) rotateX(4deg) rotate(1deg) translateY(0);
    box-shadow: 22px 28px 56px rgb(0 0 0 / 0.42), 0 6px 16px rgb(0 0 0 / 0.22); }
  to { transform: perspective(1400px) rotateY(0deg) rotateX(0deg) rotate(0deg) translateY(4.5rem);
    box-shadow: 0 36px 72px rgb(0 0 0 / 0.48), 0 10px 22px rgb(0 0 0 / 0.24); }
}

/* Full-width image band (height grows with width) */
.band { position: relative; overflow: hidden; background: var(--navy); }
.band img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 48rem) { .band img { aspect-ratio: 100 / 42; } }
.band--top img { object-position: center 12%; }
.band__caption { position: absolute; inset: auto 0 0; padding: 3rem var(--gutter) 1.5rem; background: linear-gradient(0deg, rgb(6 26 48 / 0.85), transparent); color: var(--white); font: 700 clamp(1.25rem, 1rem + 1.4vw, 2.2rem)/1.25 var(--font-head); letter-spacing: -0.01em; }
.band__caption .wrap { padding: 0; }

/* Two-column text + media. Add .split--reverse to put media first on wide screens. */
.split { display: grid; gap: 2rem; align-items: center; }
.split__media img { width: 100%; border-radius: var(--radius); }
.split__media--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 3 / 2; object-fit: cover; }
/* Landscape photo with a caption underneath (The Mentor Effect) */
figure.split__media { margin: 0; }
.split__media--photo img { aspect-ratio: 5 / 4; object-fit: cover; }
.split__media figcaption { margin-top: 0.75rem; text-wrap: pretty; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
@media (min-width: 48rem) {
  .split { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
  .split--reverse .split__media { order: -1; }
  .split--60 { grid-template-columns: 1.4fr 1fr; }
}
@media (min-width: 64rem) { .split { gap: 5rem; } }

/* Tinted call-out panel */
.panel { margin-top: 3rem; padding: 2rem; background: var(--mist); border-left: 5px solid var(--aqua); border-radius: var(--radius); }
.panel p { font: 600 clamp(1.125rem, 1rem + 0.5vw, 1.35rem)/1.45 var(--font-head); color: var(--navy); }
@media (min-width: 48rem) { .panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.25rem 2.75rem; } .panel p { margin: 0; } .panel .btn { flex: none; } }
.panel--full { margin: 0; padding-inline: 0; border-left: 0; border-radius: 0; } /* after the media query so it wins on every width */

/* Stats row */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; margin: 0; padding: 0; list-style: none; }
.stats li { border-top: 3px solid var(--aqua); padding-top: 0.9rem; }
.stats strong { display: block; font: 800 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem)/1.05 var(--font-head); color: var(--navy); letter-spacing: -0.02em; }
.stats span { display: block; margin-top: 0.35rem; font-size: 0.9375rem; color: var(--muted); }
.section--navy .stats strong, .on-dark .stats strong { color: var(--white); }
.section--navy .stats span, .on-dark .stats span { color: #b9cddc; }
@media (min-width: 48rem) { .stats { grid-template-columns: repeat(4, 1fr); gap: 2rem; } .stats--3 { grid-template-columns: repeat(3, 1fr); } }

/* Cards */
.cards { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 48rem) and (max-width: 63.99rem) { .cards--3 { grid-template-columns: repeat(2, 1fr); } .cards--4 { grid-template-columns: repeat(2, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.card__body p { color: var(--muted); }
.card__body .link-arrow { margin-top: auto; align-self: flex-start; }
.card__body p + .link-arrow { margin-top: auto; padding-top: 0.5rem; }
.card--plain { border: 0; background: none; }
.card--plain .card__body { padding: 0; }
.card h3 { margin-bottom: 0.6rem; }

/* Simple feature columns (three reasons, journey steps) */
.features { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.features h3 { margin-bottom: 0.5rem; }
.features p { color: var(--muted); }
.section--navy .features p { color: #c3d6e4; }
@media (min-width: 48rem) { .features { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.features--numbered { counter-reset: step; }
.features--numbered li { counter-increment: step; }
.features--numbered li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 0.75rem; font: 800 1rem/1 var(--font-head); color: var(--teal); letter-spacing: 0.08em; }
.section--navy .features--numbered li::before { color: var(--aqua); }

/* Quotes */
.quote { position: relative; }
.quote p { font: 600 clamp(1.25rem, 1.05rem + 1vw, 1.75rem)/1.4 var(--font-head); color: var(--navy); letter-spacing: -0.01em; }
.quote--small p { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem); font-weight: 600; line-height: 1.5; }
.quote--body p { font: 400 1.0625rem/1.7 var(--font-body); color: var(--ink); }
.quote footer, .quote cite { display: block; margin-top: 1rem; font: 400 0.9375rem/1.4 var(--font-body); font-style: normal; color: var(--muted); }
.quote cite strong { display: block; color: var(--navy); font-weight: 700; }
.quote--rule { padding-left: 1.5rem; border-left: 4px solid var(--aqua); }
.section--navy .quote p, .on-dark .quote p { color: var(--white); }
.section--navy .quote cite, .on-dark .quote cite { color: #b9cddc; }
.section--navy .quote cite strong, .on-dark .quote cite strong { color: var(--aqua); }
.saying { font: 700 clamp(1.4rem, 1.1rem + 1.4vw, 2rem)/1.3 var(--font-head); color: var(--navy); letter-spacing: -0.015em; }
.saying::before { content: "“"; } .saying::after { content: "”"; }

/* Logo strips */
.logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.logo-grid li { display: flex; align-items: center; justify-content: center; min-height: 6rem; padding: 1.25rem; background: var(--white); }
.logo-grid img { max-height: 2.5rem; max-width: 8.5rem; width: auto; filter: grayscale(1); opacity: 0.75; }
.logo-grid .wordmark { font: 800 1.0625rem/1.2 var(--font-head); color: #6a7a89; letter-spacing: -0.01em; text-align: center; }
@media (min-width: 48rem) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 64rem) { .logo-grid { grid-template-columns: repeat(8, 1fr); } }
.press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.5rem; margin: 0; padding: 0; list-style: none; }
/* The supplied SVGs carry generous built-in padding, so they're sized up */
.press img { height: 3rem; width: auto; filter: grayscale(1); opacity: 0.6; }
.press img.tight { height: 1.5rem; }
.press .wordmark { font: 800 1rem/1 var(--font-head); color: #7d8b98; }
.press-label { margin: 0 0 1.25rem; font: 700 0.8125rem/1.3 var(--font-head); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* Ticked lists */
.ticks { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ticks li { position: relative; padding-left: 1.9rem; margin-bottom: 0.6rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 1.05rem; height: 0.6rem; border-left: 3px solid var(--teal); border-bottom: 3px solid var(--teal); transform: rotate(-45deg) translateY(-2px); }
.list-label { margin: 1.75rem 0 0.75rem; font: 700 0.875rem/1.3 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.ideal { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); }
.ideal strong { color: var(--navy); }

/* Talk blocks (Speaking) */
.talk { scroll-margin-top: 5rem; }
.talk + .talk { border-top: 1px solid var(--line); }
.talk__subtitle { font: 600 clamp(1.125rem, 1rem + 0.5vw, 1.35rem)/1.45 var(--font-head); color: var(--teal); }
.tag { display: inline-block; margin-bottom: 1rem; padding: 0.3rem 0.7rem; border-radius: 99px; background: var(--navy); color: var(--aqua); font: 700 0.75rem/1.2 var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; }

/* Chapters (About) */
/* Portrait chapter photos stay a sensible height beside the text */
.chapter__media--portrait { justify-self: center; width: 100%; max-width: 26rem; }
.chapter__num { display: block; margin-bottom: 0.5rem; font: 800 0.875rem/1 var(--font-head); letter-spacing: 0.14em; color: var(--teal); text-transform: uppercase; }

/* Talk list (Home speaking section) */
.talk-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / 0.18); }
.talk-list li { border-bottom: 1px solid rgb(255 255 255 / 0.18); }
.talk-list a { display: grid; gap: 0.35rem; align-items: baseline; padding: 1.5rem 2.5rem 1.5rem 0; position: relative; text-decoration: none; }
.talk-list a::after { content: "→"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); color: var(--aqua); font-size: 1.5rem; transition: transform 0.2s; }
.talk-list a:hover::after { transform: translate(4px, -50%); }
.talk-list strong { font: 800 clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem)/1.2 var(--font-head); color: var(--white); }
.talk-list em { font-style: normal; color: var(--aqua); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.talk-list span { color: #c3d6e4; }
@media (min-width: 48rem) { .talk-list a { grid-template-columns: 18rem 1fr; gap: 0.35rem 2rem; } .talk-list em { grid-column: 1 / -1; } }

/* Books */
.books { display: grid; gap: 3rem; }
@media (min-width: 48rem) { .books { grid-template-columns: 1fr 1fr; } }
.book { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) { .book { grid-template-columns: 10rem 1fr; gap: 2rem; } }
.book img { box-shadow: 0 12px 24px rgb(6 26 48 / 0.25); }
.book h3 { margin-bottom: 0.4rem; font-style: italic; }
.book .btn-row { margin-top: 1.25rem; }

/* Call-to-action band with background photo */
.cta { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: #d3e3ee; }
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(6 26 48 / 0.94) 0%, rgb(6 26 48 / 0.8) 50%, rgb(6 26 48 / 0.35) 100%); }
/* Wide screens: the stage photo moves to the right of the words, so Leon stands in the open space
   rather than behind the text, and fades into the navy instead of ending in a hard edge. */
@media (min-width: 64rem) {
  .cta__bg { left: 44%; }
  .cta__bg img { object-position: 8% 22%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
  .cta::before { background: linear-gradient(90deg, rgb(6 26 48 / 0.6) 0%, rgb(6 26 48 / 0.3) 45%, rgb(6 26 48 / 0) 70%); }
}
.cta h2 { color: var(--white); }
.cta__inner { max-width: 36rem; padding-block: var(--section); }
.cta .small { margin-top: 1.25rem; color: #b9cddc; }

/* Video lightbox */
.video-modal { width: min(64rem, 94vw); padding: 0; border: 0; background: #000; }
.video-modal::backdrop { background: rgb(3 14 26 / 0.85); }
.video-modal video { width: 100%; }
.video-modal__close { position: absolute; right: 0.5rem; top: 0.5rem; z-index: 2; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.6); color: var(--white); font-size: 1.5rem; cursor: pointer; }

/* Inline video (About) */
.video-frame { position: relative; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video-frame video { width: 100%; aspect-ratio: 16 / 9; }

/* Forms */
.form { display: grid; gap: 1.25rem; }
.form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 1.25rem; }
.form legend { margin-bottom: 0.25rem; font: 800 1.125rem/1.3 var(--font-head); color: var(--navy); }
.form legend + * { margin-top: 0.25rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.9375rem; color: var(--navy); }
.field label .opt { font-weight: 400; color: var(--muted); white-space: nowrap; }
.field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; border: 1px solid #768a9a; border-radius: var(--radius); background: var(--white); color: var(--ink); font: inherit; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--aqua); outline-offset: 0; border-color: var(--navy); }
.field--hl select { border: 2px solid var(--navy); font-weight: 600; }
.fields-2 { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .fields-2 { grid-template-columns: 1fr 1fr; } }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form__note { margin: 0; font-size: 0.875rem; color: var(--muted); }
.form__status { padding: 1rem 1.25rem; border-radius: var(--radius); }
.form__status:empty { padding: 0; }
.form__status--ok { background: #e3f6ef; color: #0b5a3b; }
.form__status--error { background: #fdecec; color: #8a1f1f; }
.hp { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

/* Contact side panel */
.aside-box { padding: 2rem; background: var(--mist); border-radius: var(--radius); }
.aside-box .h3 { font-size: 1.125rem; margin-top: 1.75rem; }
.aside-box .h3:first-child { margin-top: 0; }
.aside-box ol { padding-left: 1.2em; margin: 0; }
.aside-box li { margin-bottom: 0.5rem; }

/* Confident Club block */
.cc-logo { width: 13rem; margin-bottom: 1.75rem; }
.glance { padding: 2rem; border: 2px solid var(--navy); border-radius: var(--radius); }
.glance dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; margin: 0 0 1.25rem; }
.glance dt { font-weight: 700; color: var(--navy); }
.glance dd { margin: 0; }
.photo-row { display: grid; gap: 1rem; }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 48rem) { .photo-row { grid-template-columns: repeat(3, 1fr); } }

/* Footer */
.site-footer { background: var(--navy-deep); color: #b9cddc; font-size: 0.9375rem; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--aqua); }
.footer-signup { padding-block: 3.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); }

/* MENTOR card: the front offers the book; "Send me the book" flips it over to Kit's form */
.book-card { max-width: 52rem; margin-inline: auto; perspective: 1600px; }
.book-card__inner { display: grid; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.2, 0.75, 0.25, 1); }
.book-card.is-flipped .book-card__inner { transform: rotateY(180deg); }
.book-card__face { grid-area: 1 / 1; display: grid; align-content: center; gap: 1.5rem; padding: 2rem 1.5rem;
  background: linear-gradient(135deg, var(--navy) 0%, #0f3a63 100%); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 14px;
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.35); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.book-card__back { transform: rotateY(180deg); justify-items: center; text-align: center; }
.book-card__face { position: relative; }
.book-card__close { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgb(255 255 255 / 0.18); border-radius: 50%; background: rgb(255 255 255 / 0.06); color: #d3e3ee; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.book-card__close:hover { background: rgb(255 255 255 / 0.16); color: var(--white); }
@media (prefers-reduced-motion: no-preference) { .book-card__close:hover { transform: rotate(90deg); } }
.book-card__cover { width: 7rem; box-shadow: 0 14px 28px rgb(0 0 0 / 0.45); transform: rotate(-3deg); }
.book-card__text .eyebrow { color: var(--aqua); }
.book-card h2 { margin-bottom: 0.4rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--white); }
.book-card__text p { margin-bottom: 1.5rem; }
.book-card__title { margin: 0; font: 700 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.25 var(--font-head); color: var(--white); }
.book-card__title:focus { outline: none; }
.kit-slot { width: 100%; max-width: 30rem; min-height: 3rem; text-align: left; }
.kit-loading { margin: 0; padding: 1rem 0; color: #9fb6c9; text-align: center; }
.kit-slot:has(.formkit-form) .kit-loading { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .book-card__front { transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .book-card:not(.is-flipped) .book-card__front:hover { transform: translateY(-4px); box-shadow: 0 32px 60px rgb(0 0 0 / 0.42); }
}
@media (prefers-reduced-motion: reduce) { .book-card__inner { transition: none; } }
@media (min-width: 40rem) {
  .book-card__face { padding: 2.5rem 3rem; }
  .book-card__front { grid-template-columns: 8rem 1fr; gap: 2.5rem; align-items: center; }
  .book-card__cover { width: 8rem; }
}
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 2rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-logo { width: 9rem; filter: brightness(0) invert(1); opacity: 0.85; }

/* Reveal on scroll (only when JS has run, and not for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* Small helpers */
.measure { max-width: 46rem; }
.split--top { align-items: start; }
@media (min-width: 48rem) { .features.about-beyond { grid-template-columns: repeat(2, 1fr); } }
.features--stacked { grid-template-columns: 1fr !important; gap: 1.75rem; margin-top: 2rem; }
.panel__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
figure.band { margin: 0; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3.5rem; }
.mt-4 { margin-top: 4rem; }
.mb-4 { margin-bottom: 4rem; }
.mx-auto { margin-inline: auto; }

/* Logo strips sit on navy: the supplied logos are white artwork made for dark backgrounds */
.logos-band { background: var(--navy-deep); padding-block: 3.5rem; }
.logos-band .press-label { color: #9fb6c8; }
.logos-band .logo-grid { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.1); }
.logos-band .logo-grid li { background: var(--navy-deep); }
.logos-band img { filter: brightness(0) invert(1); opacity: 0.8; }
.logos-band .wordmark { color: #d5e2ec; }

/* Kit's MENTOR form: keep Kit's white card, drop its photo and duplicate heading */
/* Kit sets a 600px minimum width on its form, which pushed it off-centre in the card; fit it to the slot */
.kit-slot .formkit-form[data-uid] { width: 100% !important; min-width: 0 !important; max-width: 30rem !important; margin: 0 auto !important; }
.kit-slot .formkit-form[data-uid] .formkit-background,
.kit-slot .formkit-form[data-uid] .formkit-header { display: none !important; }
.kit-slot .formkit-form[data-uid] [data-style="full"] { display: block !important; }
.kit-slot .formkit-form[data-uid] .formkit-column { padding: 1.5rem !important; }
.logos-band .logo-grid img { max-height: 4rem; max-width: 7.5rem; }
/* Logos taken from each company's site are cropped tight, so they need less room */
.logos-band .logo-grid img.tight { max-height: 2.25rem; max-width: 6.25rem; }
.logos-band .logo-grid img.stacked { max-height: 3.25rem; }
/* Fine-lined wordmarks: full brightness and a little more width so they read as clearly as the bold ones */
.logos-band .logo-grid img.thin { max-width: 7.5rem; opacity: 1; }
.cta .lead, .hero .lead, .home-hero .lead { color: #d3e3ee; }

/* Print: show content that would otherwise wait to fade in, and drop the motion */
@media print {
  .js .reveal { opacity: 1; transform: none; }
  .home-hero__portrait { animation: none; transform: none; }
  .site-header, .video-modal, .kit-slot { display: none; }
}