/* ──────────────────────────────────────────────────────────────────────────
   Dr. Keith Keating — public site
   Dark navy/purple background with magenta-pink accents, white serif italics.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Lock the site to dark theme regardless of OS light/dark mode preference.
     Without this, browser-default elements (scrollbars, overscroll bg, native
     form controls) flip with the system theme — causing the bg to "change"
     when the ambient light sensor switches the OS theme. */
  color-scheme: dark;

  /* Typography — Inter for UI/body, IvyPresto Display for the high-contrast serif
     headings. Adobe Fonts loads ivypresto-display when the kit ID is set in CMS;
     Playfair Display + Georgia carry the look until then. */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'ivypresto-display', 'Playfair Display', 'Iowan Old Style', Georgia, serif;

  --bg: #0b0b33;
  --bg-deep: #0b0b33;
  --bg-card: #251654;
  --bg-card-2: #2d1a64;
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,0.72);
  --ink-muted: rgba(255,255,255,0.55);
  --pink: #f20081;
  --pink-soft: #ff5fa9;
  --line: rgba(255,255,255,0.12);
  --radius: 18px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --space: clamp(1rem, 2vw, 1.5rem);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* clears the sticky header */
  /* Prevent horizontal scroll caused by any element overflowing the
     viewport — fixes the "empty column on the right" issue on mobile. */
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  /* IvyPresto Display semibold is the global default. Inter is opt-in
     for prose paragraphs and blockquotes only. */
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Every section snaps to (at least) one full viewport height — full-screen
   storytelling scroll. Each section can still grow if its content needs more
   room (testimonials, long lists, etc.), but never shorter than the screen. */
main > section {
  min-height: 100vh;
}
/* Sections that should be content-tall rather than viewport-tall.
   The full-viewport snap was creating excessive empty space below the
   content in these. */
main > section.about,
main > section.services,
main > section.keynotes,
main > section.testimonials,
main > section.book,
main > section.frameworks {
  min-height: auto;
}

/* Body copy & quotes use Inter — everything else inherits the serif default. */
.hero-subhead, .hero-body,
.about-headline, .about-body,
.services-quote,
.keynote-text > p,
.testimonial blockquote,
.book-tagline, .book-description, .book-description p,
.frameworks-body,
.wlr-text > p,
.yt-handle, .yt-text > p,
.podcast-show,
.publication-venue,
.bb-fact p,
.cta-body, .cta-lead,
.footer-copyright, .footer-contact, .footer-legal,
.hint, .form-status,
input, textarea, select,
blockquote, .pull-quote p {
  font-family: var(--font-sans);
  font-weight: 400;
}

/* Buttons, numbers, and metadata callouts use Inter for clarity & punch. */
.btn,
.stat-value, .stat-label,
.service-number,
.book-meta,
.framework-source, .framework-cta,
.podcast-show,
.publication-year, .publication-cta,
.testimonial-name, .testimonial-title {
  font-family: var(--font-sans);
}
.btn { font-weight: 600; }
.primary-nav a { font-weight: 600; }
label { font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

/* Typography ------------------------------------------------------------ */

h1, h2, h3, h4 { margin: 0; line-height: 0.81; font-weight: 500; }
.white { color: var(--ink); }
.pink-italic {
  color: var(--pink);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
.d-block { display: block; }
.center { text-align: center; }

/* ─── Headings & eyebrows — sizes from spec, all IvyPresto ─── */

/* Eyebrow default — 30px (used by About, Books-hero, Frameworks) */
.eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.5vw, 30px);
  line-height: 1;
  margin: 0 0 .35em;
}
.vision .eyebrow,
.vision .eyebrow-large {
  font-size: clamp(1.3rem, 3vw, 34px);   /* "Explore the vision of" */
}
.services .eyebrow {
  /* "What" — sized 15% larger than the reference baseline */
  font-size: clamp(2.07rem, 4.03vw, 64px);
  line-height: 1;
  margin: 0 0 -.25rem;
}
.watch-listen-read .eyebrow,
.beyond-bio .eyebrow {
  font-family: var(--font-serif);   /* explicit — ensure IvyPresto wins over any inheritance */
  font-size: clamp(1rem, 2vw, 24px);     /* "Watch. Listen. Read." / "Beyond the Bio" */
}
.youtube-block .eyebrow {
  font-size: clamp(.7rem, 1.4vw, 19px);  /* "YOUTUBE" small label */
}
/* Podcasts + Publications eyebrows: small uppercase Inter, pink (was serif white) */
.podcasts .eyebrow,
.publications .eyebrow {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(.65rem, 1vw, 12px);   /* half of prior 23 */
  letter-spacing: .12em;
  color: var(--pink);
}

/* Display name "Keith" / "Keith Does" */
.display-name {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--pink);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 52px);   /* default = About */
  line-height: 0.92;
  margin: 0 0 1.5rem;
}
.vision .display-name {
  font-size: clamp(5rem, 18vw, 260px);
  line-height: 0.85;
}
.services .display-name {
  /* "Keith Does" — 15% larger than the previous tuning. */
  font-size: clamp(2.07rem, 4.37vw, 69px);
  line-height: .95;
  white-space: nowrap;
}

/* Stacked section heading: white top line + pink italic bottom line */
.section-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 30px);   /* white top line — default 30 */
  font-weight: 500;
  line-height: 1;
  margin: 0 0 1.5rem;
}
.section-heading .pink-italic {
  font-size: clamp(1.8rem, 4vw, 52px);     /* pink italic — default 52 */
  line-height: 0.95;
  display: block;
}
/* Trusted-By: larger, more prominent title — both white and pink lines. */
.trusted .section-heading {
  font-size: clamp(1.5rem, 3vw, 40px); /* white line — "Trusted By" */
}
.trusted .section-heading .pink-italic {
  font-size: clamp(2rem, 4.2vw, 60px); /* pink italic — bigger, 2 lines */
  line-height: 1;
}
/* Watch-Listen-Read, Beyond Bio, Final CTA: white line at 24 (less prominent) */
.watch-listen-read .section-heading,
.beyond-bio .section-heading,
.final-cta .section-heading {
  font-size: clamp(1rem, 2vw, 24px);
}

/* Buttons --------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-light { background: #fff; color: var(--bg-deep); }
.btn-light:hover { background: #f3f3f3; }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline:hover { border-color: #fff; }
.btn-pink { background: var(--pink); color: #fff; }
.btn-pink:hover { background: var(--pink-soft); }

/* Section background images (optional, per-section via CMS) ------------- */

.has-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Placeholders ---------------------------------------------------------- */

.placeholder {
  background: var(--bg-card);
  border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted);
  font-size: .9rem;
  border-radius: var(--radius);
}
.placeholder-portrait { aspect-ratio: 3/4; }
.placeholder-avatar { aspect-ratio: 1; border-radius: 50%; }
.placeholder-book { aspect-ratio: 2/3; }
.placeholder-thumb { aspect-ratio: 16/9; }
.placeholder-photo { aspect-ratio: 4/3; }

/* Header — centred floating glass pill, overlays the page (doesn't take flow space) */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center;
  padding: 12px clamp(12px, 4vw, 32px);
  pointer-events: none; /* clicks pass through to content; pill re-enables below */
}
.site-header > * { pointer-events: auto; }
.header-inner {
  /* No `gap` here — the CTA manages its own left-margin so it can
     collapse cleanly (no orphan gap) when the user is at the top. */
  display: flex; align-items: center;
  padding: .6rem 1.5rem;
  background: rgba(22, 12, 64, 0.55);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.primary-nav,
.primary-nav a,
.nav-toggle,
.header-cta {
  /* Menu chrome stays in Inter regardless of the page-wide serif default. */
  font-family: var(--font-sans);
}
.primary-nav ul { display: flex; gap: 1.75rem; align-items: center; }
.primary-nav a {
  text-decoration: none; font-size: .82rem; letter-spacing: .03em;
  color: var(--ink-dim); padding: .5rem .25rem;
  transition: color .15s ease;
}
.primary-nav a:hover { color: #fff; }
.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--line);
  color: #fff; padding: .4rem .8rem; border-radius: 999px;
  font-size: .8rem; cursor: pointer;
  align-items: center;
  justify-content: center;
}
/* Hamburger icon — 3 stacked lines that morph into an X when the menu
   is open (`.is-open` is toggled on .primary-nav by JS). */
.nav-toggle-icon {
  display: inline-block;
  width: 20px;
  height: 14px;
  position: relative;
}
.nav-toggle-icon span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle-icon span:nth-child(1) { top: 0; }
.nav-toggle-icon span:nth-child(2) { top: 6px; }
.nav-toggle-icon span:nth-child(3) { top: 12px; }
.primary-nav.is-open .nav-toggle-icon span:nth-child(1) {
  top: 6px; transform: rotate(45deg);
}
.primary-nav.is-open .nav-toggle-icon span:nth-child(2) { opacity: 0; }
.primary-nav.is-open .nav-toggle-icon span:nth-child(3) {
  top: 6px; transform: rotate(-45deg);
}

/* Brand mark on the LEFT of the header. Hidden on desktop (the pill
   handles navigation alone); visible on mobile beside the hamburger. */
/* Desktop: floating logo image fixed at the TOP-LEFT corner of the
   page. Starts BIG over the hero, then shrinks to a compact size once
   the user scrolls past the hero (smooth transition). */
.floating-brand-mark {
  position: fixed;
  top: 1.25rem;
  left: 1.5rem;
  z-index: 150;
  display: block;
  text-decoration: none;
  pointer-events: auto;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  transform-origin: top left;
}
.floating-brand-mark img {
  display: block;
  /* Compact size — the BIG starting size is achieved via the parent's
     transform: scale(...) so the image's own height stays constant. */
  height: 56px;
  width: auto;
  transition: filter .55s ease;
}
/* Initial state (no scroll yet) — logo is enlarged 2× from its compact
   pill-friendly size. The transform-origin: top left keeps it anchored
   at the top-left corner so it grows downward + rightward. */
body:not(.is-scrolled) .floating-brand-mark {
  transform: scale(2);
}

/* Desktop: brand text inside the pill is HIDDEN — the floating image
   in the top-left corner is the only brand mark. */
.site-brand {
  display: none;
}

/* Hero photo gradient — only shown on mobile (full-bleed banner mode).
   Desktop layout uses a 2-column grid where the photo doesn't need
   the gradient at its bottom edge. */
.hero-photo-gradient { display: none; }

/* ─── Mobile menu overlay (Mel Robbins style) ──────────────────────
   Full-screen white panel that takes over when the hamburger is
   tapped. Hidden on desktop entirely. */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Same purple-to-navy gradient used across the site sections so the
     menu blends visually with the rest of the page. */
  background: linear-gradient(180deg, #321b7e 0%, #0b0b33 100%);
  color: #fff;
  flex-direction: column;
  padding: 1.25rem 1.5rem 2rem;
  animation: mobile-menu-in .25s ease-out;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { display: flex; }
@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0 1rem;
}
.mobile-menu-brand {
  text-decoration: none;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.mobile-menu-brand img { display: block; height: 32px; width: auto; }
.mobile-menu-close {
  background: transparent;
  border: none;
  width: 44px; height: 44px;
  cursor: pointer;
  display: grid; place-items: center;
  color: #fff;
  padding: 0;
  border-radius: 50%;
  transition: background .15s ease;
}
.mobile-menu-close:hover { background: rgba(255, 255, 255, 0.1); }
.mobile-menu-close svg { width: 22px; height: 22px; }

.mobile-menu-nav {
  flex: 1;
  overflow-y: auto;
  margin-top: .5rem;
}
.mobile-menu-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu-nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-menu-nav li:last-child { border-bottom: none; }
.mobile-menu-nav a {
  display: block;
  padding: 1.5rem .25rem;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0;
  transition: color .15s ease;
}
.mobile-menu-nav a:hover { color: var(--pink); }

.mobile-menu-cta {
  display: block;
  margin-top: 1.5rem;
  padding: 1.1rem 1.5rem;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(242, 0, 129, 0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mobile-menu-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(242, 0, 129, 0.45);
}

/* Hero CTA echoed in the pill — animates in/out as the user scrolls past the
   hero. The button is always in the DOM (so we can transition between states),
   but visually collapsed: width 0, no padding, no margin, opacity 0, nudged
   right. When `.is-scrolled` lands on the header, every property eases back
   to its natural value at the same time, so the pill appears to grow and the
   button to slide in. */
.header-cta {
  display: inline-block;
  font-size: .75rem;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Desktop: hide the mobile-only mail icon, show the text label. */
.header-cta-icon { display: none; }
.header-cta-label { display: inline; }
.header-cta {

  /* Collapsed (default — user is at the top of the page) */
  opacity: 0;
  max-width: 0;
  padding: 0;
  margin-left: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(10px);

  transition:
    opacity .35s ease,
    max-width .5s cubic-bezier(.16, 1, .3, 1),
    padding .5s cubic-bezier(.16, 1, .3, 1),
    margin .5s cubic-bezier(.16, 1, .3, 1),
    transform .35s cubic-bezier(.16, 1, .3, 1);
}
.site-header.is-scrolled .header-cta {
  /* Expanded (user has scrolled past the trigger threshold) */
  opacity: 1;
  max-width: 260px;
  padding: .55rem 1.1rem;
  margin-left: 1rem;
  pointer-events: auto;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .header-inner { transition: none; }
  .header-cta { transition: none; }
}

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

.hero {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 8vw, 6rem);
  background: linear-gradient(180deg, #321b7e 0%, #0b0b33 100%);
  /* Center the hero content vertically inside the now-full-screen section. */
  display: flex;
  align-items: center;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero-photo img {
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.hero-copy h1 {
  /* Hero headline — 144px (double 72) per spec */
  font-family: var(--font-serif);
  font-size: clamp(4rem, 12vw, 144px);
  line-height: 0.95;
  margin-bottom: 1.5rem;
}
.hero-copy h1 .white { display: block; font-weight: 500; }
.hero-copy h1 .pink-italic {
  /* inline-block so the element shrinks to the width of the text — that way
     the pink rule we draw underneath it ends right at the period of "Else." */
  display: inline-block;
  font-size: 1em;
  line-height: 0.95;
  border-bottom: 1px solid var(--pink);
  padding-bottom: .35rem;
}
.hero-subhead {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem;
  /* Preserve newlines from the CMS as visible line breaks. */
  white-space: pre-line;
}
.hero-body {
  color: var(--ink-dim);
  margin: 0 0 2rem;
  max-width: 36rem;
  white-space: pre-line;
}

/* Vision section -------------------------------------------------------- */

.vision {
  position: relative;
  /* Place the title block in the upper portion of the section so the model
     (anchored bottom-centre) overlaps just the lower half of the "Keith"
     letters — matching the reference composition. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(5rem, 10vh, 8rem) 0 clamp(3rem, 7vw, 5rem);
  /* Height comes from the global `main > section { min-height: 100vh }` rule
     so the background image covers the full viewport. No local override here. */
  overflow: hidden;
}

/* Layer 1 — background photo. The CMS background image (FONDO KEYNOTE REEL)
   already ships with its own darkening baked in, so we don't apply additional
   opacity or an overlay on top — that would crush the photo to near-black. */
.vision-bg {
  position: absolute; inset: 0; z-index: 0;
}
.vision-bg img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Layer 2 — centred title */
.vision-inner {
  position: relative; z-index: 2; text-align: center;
}

/* Layer 3 — foreground cutout PNG (Keith standing) overlays the title.
   Anchored to bottom-centre so the model "rises" from the floor of the
   section. PNG is expected to have a transparent background; clicks pass
   through so the card behind stays interactive. */
.vision-model {
  position: absolute;
  /* `bottom` lifts the cutout off the viewport edge so the model's feet
     land on the stage in the background photo, not on the audience
     silhouette in the foreground. Tweak this value if the stage line
     in the background image is at a different height. */
  bottom: clamp(60px, 14%, 160px);
  /* Shifted slightly left of dead-centre — feels less stiff than a perfect
     centre and matches the reference composition. */
  left: 45%;
  /* `--parallax-y` is driven from site.js — it shifts the model up/down
     a few px as the user scrolls past the section, creating a subtle depth
     parallax against the fixed-position background and title. */
  --parallax-y: 0px;
  transform: translateX(-50%) translate3d(0, var(--parallax-y), 0);
  will-change: transform;
  z-index: 3;
  /* Proportionally smaller so Keith looks like he's standing on the stage
     at a believable scale, not towering over the venue. */
  height: clamp(300px, 55%, 600px);
  pointer-events: none;
}

/* Inner wrapper is a passthrough container — the scroll parallax lives on
   the outer .vision-model via its `--parallax-y` variable. No autonomous
   animation here; motion is fully scroll-driven. */
.vision-model-inner {
  height: 100%;
  display: flex; align-items: flex-end;
}
.vision-model-inner img {
  height: 100%; width: auto;
  object-fit: contain;
  object-position: bottom center;
}

/* Layer 4 — large Keynote-reel card.
   Thumbnail is the card's full background; a soft dark gradient sits on top
   so the title text and Watch button remain readable. The whole card is a
   single anchor — clicking anywhere opens the YouTube video in a new tab. */
.vision-card {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1rem, 4vw, 3rem);
  z-index: 4;
  display: block;
  width: clamp(360px, 38vw, 560px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  /* Scroll-driven translation: `--parallax-y` is updated from site.js as
     the user moves through the Vision section, so the card shifts in
     response to the scroll (no autonomous animation). */
  --parallax-y: 0px;
  transform: translate3d(0, var(--parallax-y), 0);
  transition: box-shadow .25s ease;
  will-change: transform;
}
.vision-card:hover {
  box-shadow: 0 28px 80px rgba(0,0,0,.65);
}
/* The YouTube iframe paints over the poster image once it loads.
   `pointer-events: none` ensures every click on the card falls through
   to the parent <a> (opening the full video on YouTube), never to the
   embedded player itself. */
.vision-card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  pointer-events: none;
  /* Subtle scale-up: the YouTube embed adds black letterboxing on the sides
     at certain aspect ratios; scaling slightly hides those bars. */
  transform: scale(1.02);
  transform-origin: center;
  z-index: 1;
}
.vision-card-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0; /* sits beneath the iframe; acts as a fallback while it loads */
}
/* Subtle dark gradient at the bottom for text legibility — sits above the
   YouTube iframe so text remains readable while the video plays. */
.vision-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,11,51,0) 40%,
    rgba(11,11,51,.55) 80%,
    rgba(11,11,51,.85) 100%);
  pointer-events: none;
  z-index: 2;
}
/* Text block — bottom-left of the card */
.vision-card-text {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.75rem);
  /* Reserve space on the right for the .vision-watch-btn so a longer
     video title never slides behind / under the white pill. */
  right: clamp(7rem, 12vw, 9.5rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  z-index: 3;
  min-width: 0;
}
.vision-card-title {
  overflow-wrap: anywhere;
}
.vision-card-meta {
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(255,255,255,.85);
  margin: 0;
}
.vision-card-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1;
}

/* Watch — white pill button anchored bottom-right of the card */
.vision-watch-btn {
  position: absolute;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.5rem);
  z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,0.95);
  color: var(--bg-deep);
  border: none;
  border-radius: 999px;
  padding: .55rem 1rem .55rem .6rem;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s ease;
}
.vision-card:hover .vision-watch-btn { background: #fff; }
.vision-watch-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-deep);
  color: #fff;
  font-size: .6rem;
  padding-left: 1px;
}
.vision-watch-label { line-height: 1; }

/* On narrow screens the card breaks out of the absolute corner and stacks
   centred under the headline so it doesn't overflow the viewport. */
@media (max-width: 700px) {
  .vision-card {
    position: static;
    margin: 2rem auto 0;
    width: min(100%, 480px);
  }
}

/* ──────────────────────────────────────────────────────────────────────
   Video modal — in-page lightbox for the Keynote Reel. Opens when the
   card is clicked. Click on the backdrop, the close button or pressing
   ESC closes it.
   ────────────────────────────────────────────────────────────────────── */
.video-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: video-modal-fade .25s ease-out;
}
.video-modal[hidden] { display: none; }
@keyframes video-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Dark blurred backdrop fills the viewport behind the player */
.video-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

/* Centred 16:9 player surface */
.video-modal-container {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
.video-modal-iframe {
  width: 100%; height: 100%;
  display: block;
  border: 0;
}

/* Close button — pink circle (#f20081 per request) */
.video-modal-close {
  position: absolute;
  top: clamp(.75rem, 1.5vw, 1.25rem);
  right: clamp(.75rem, 1.5vw, 1.25rem);
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #f20081;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 20px rgba(242, 0, 129, .45);
}
.video-modal-close:hover,
.video-modal-close:focus-visible {
  background: #ff1a93;
  transform: scale(1.06);
  outline: none;
  box-shadow: 0 8px 24px rgba(242, 0, 129, .6);
}
.video-modal-close span { transform: translateY(-1px); }

/* Trusted strip --------------------------------------------------------- */

.trusted {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
  /* Full-screen section — inherits min-height: 100vh from the global rule.
     The background image now has enough vertical room to render with cover
     without aggressively cropping the speaker's head or feet. */
  display: flex;
  align-items: center;
}

/* Background photo anchored to the right edge of the section. A horizontal
   gradient overlay fades dark → transparent across the section so the
   logos/title on the left stay readable against the dark side, while the
   speaker/audience photo remains visible on the right. */
.trusted-bg {
  position: absolute; inset: 0; z-index: 0;
}
/* Cover fills the entire section. Anchored to `right top` so any vertical
   crop happens at the bottom (audience area), keeping the speaker's head
   safely in frame at the top. With the section back to 100vh, the
   image needs to scale less to cover, so cropping is minimal. */
.trusted-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right top;
}
/* Gradient overlay — solid dark on the left where content sits, fades to
   transparent over the right where the photo lives. */
.trusted-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--bg) 0%,
    var(--bg) 42%,
    rgba(11, 11, 51, .4) 58%,
    rgba(11, 11, 51, 0) 75%);
}

/* Override the standard centred container for this section — we want the
   content hugging the LEFT edge of the viewport, not constrained to a
   max-width column. The right half stays empty so the venue photo shows. */
.trusted .container {
  max-width: 100%;
  padding-left: clamp(2rem, 5vw, 5rem);
  padding-right: 0;
  margin: 0;
}

.trusted-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
}
.trusted-content {
  grid-column: 1;
  padding-right: clamp(1rem, 3vw, 3rem);
  /* No max-width here — the grid column itself limits the width. The title
     and 4-column logo grid fill the left column edge to edge. */
}

.trusted .section-heading {
  text-align: left;
  margin: 0 0 1.25rem;
}
/* Both heading lines render as blocks so the title sits cleanly on three
   distinct lines: "Trusted By" / "Organizations" / "That Demand Results".
   The pink line uses `pre-line` to honour the \n authored in the CMS. */
.trusted .section-heading .white,
.trusted .section-heading .pink-italic {
  display: block;
}
.trusted .section-heading .pink-italic {
  white-space: pre-line;
  line-height: 1;
}

.logo-grid {
  display: grid;
  /* 4 equal columns. Items are CENTERED in each cell so visual spacing
     between adjacent logos stays uniform regardless of each logo's
     intrinsic width — fixes the previous left-aligned look that made
     gaps feel unequal between narrow vs wide logos. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  /* Row gap zero so rows touch — the li min-height (60px on desktop,
     80px in the 1100px tablet zone) is what actually defines vertical
     air between logos. Horizontal column-gap unchanged. */
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding: 0;
  list-style: none;
}
.logo-grid li {
  /* `flex` + center alignment so the logo sits in the middle of its
     grid column — produces visually equal spacing between siblings. */
  display: flex;
  justify-content: center; align-items: center;
  /* Very tight min-height — most logos render 60-90px tall (wider-than-
     tall marks pinned at `max-width: 95%`). 60px barely pads the row
     beyond the actual logo height, eliminating the empty bands. */
  min-height: 60px;
  /* Initial state for the scroll-triggered stagger animation — invisible
     and pushed further up so the entrance reads clearly. JS adds
     `.is-visible` on the parent section when it reaches the viewport,
     which animates each logo in. `--i` is set per-item from JS for the
     staggered transition-delay. */
  --i: 0;
  opacity: 0;
  transform: translateY(-40px);
  transition:
    opacity .6s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 70ms),
    transform .6s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 70ms);
}
.trusted.is-visible .logo-grid li {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .logo-grid li { opacity: 1; transform: none; transition: none; }
}
.logo-grid img {
  /* Per-logo size scale: each <li> can set --logo-scale via inline style
     (from the CMS "Size Scale" field) — applied as a visual `transform:
     scale()` so it works regardless of whether width or height is the
     binding constraint. (Previously the scale only multiplied max-height,
     which had no visible effect for WIDE logos like HSBC / Yale where
     max-width: 95% was already the binding cap.) */
  max-height: 213px;
  max-width: 95%;
  width: auto;
  transform: scale(var(--logo-scale, 1));
  transform-origin: center center;
  filter: brightness(0) invert(1) opacity(.95);
  object-fit: contain;
  transition: filter .15s ease, opacity .15s ease;
}
.logo-grid a:hover img { filter: brightness(0) invert(1); }
/* Opt-in: show logo in its original colors (no monochrome filter) */
.logo-grid img.color-logo,
.logo-grid a:hover img.color-logo {
  filter: none;
  opacity: 1;
}
.logo-text-fallback {
  color: var(--ink-dim); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; font-size: .85rem;
}

/* On narrow screens collapse the two-column layout: content spans the full
   width, the background photo's gradient fades vertically instead of
   horizontally so it sits behind the logos without overwhelming them. */
@media (max-width: 900px) {
  .trusted-grid { grid-template-columns: 1fr; }
  .trusted-content { grid-column: 1; padding-right: 0; }
  .trusted-bg::after {
    background: linear-gradient(180deg,
      var(--bg) 0%,
      rgba(11, 11, 51, .85) 60%,
      rgba(11, 11, 51, .92) 100%);
  }
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* About ---------------------------------------------------------------- */

.about {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, #321b7e 0%, #0b0b33 100%);
  overflow: hidden;
  /* Flex column with space-between: grid anchored at TOP, stats at
     BOTTOM. Stats then lift UP with a negative `top` to overlap the
     photo's lower torso area. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1rem, 2vh, 2rem);
}

/* Photo of Keith sits BEHIND all the text. ANCHORED TO BOTTOM so it grows
   upward from the section floor — Keith's face lands near the top of the
   section and his torso extends down past the stats. Stats float on the
   photo's lower gradient via z-index. Height scales with the 100vh
   section so the composition still works on tall screens. */
.about-photo {
  /* Photo spans the full grid width (set via grid-column: 1/-1 below)
     and is centered. Acts as the visual backdrop for the text boxes.
     Scaled 30% larger via transform (visual-only — layout box stays
     the same so nothing else in the section moves). Origin is at the
     TOP-LEFT so the photo grows toward the BOTTOM-RIGHT corner. */
  position: relative;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 620px;
  height: clamp(500px, 78vh, 780px);
  z-index: 1;
  /* scale 1.56 × 1.2 = 1.872 — another 20% growth. Visual-only via
     transform so the layout box stays identical and no other elements
     move. */
  transform: scale(1.872);
  transform-origin: top left;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.about-photo img {
  height: 100%;
  width: auto;
  object-fit: contain;
  object-position: center;
  /* Reset any old constraints that used to crop the photo to 3:4 */
  border-radius: 0;
  aspect-ratio: auto;
  max-width: none;
  display: block;
}

/* 3-column: copy on the LEFT, photo in the MIDDLE (no longer absolute),
   quote on the RIGHT. Each element owns its own column — no overlap. */
.about-grid-3 {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  /* 3-column grid where the PHOTO spans all columns (background) and
     the text boxes are layered on TOP of it via z-index, in columns 1
     and 3. Explicit `grid-template-areas` lock all 3 children into the
     same single row regardless of HTML source order — fixes a Chrome
     rendering bug where the photo would push down into its own row.
     Column 1 (copy) widened so the headline "Learning Saved My Life." /
     "Now It's My Life's Work." fits as 2 lines (was breaking to 4).
     Column 3 (quote) still wider than baseline so the pull quote has
     room to breathe. Middle column is just a spacer (the photo spans
     all three columns anyway). */
  grid-template-columns: 1.15fr 1fr 1.4fr;
  grid-template-rows: auto;
  grid-template-areas: "copy photo quote";
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
}
/* Photo spans the FULL WIDTH of the grid and sits BEHIND the text. */
.about-photo {
  grid-area: 1 / 1 / 2 / -1 !important;
  justify-self: center !important;
  align-self: center !important;
  z-index: 1 !important;
  /* Shift the photo RIGHT so Keith's face sits at the OPTICAL centre of
     the section, not the geometric centre. Reason: Keith's head is in
     the LEFT third of the source image, so a perfectly centred photo
     drops his face into the left-of-centre zone. The 10% nudge brings
     his face onto the section's midline, balanced between the copy
     column (left) and the quote column (right). */
  transform: translateX(10%) !important;
}
/* Copy in LEFT column, layered above the photo. */
.about-copy {
  grid-area: copy !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  z-index: 3;
  align-self: center;
}
/* Quote in RIGHT column, layered above the photo, anchored at the TOP
   of the grid row so it sits at the height of Keith's FACE in the
   portrait (which lives in the upper portion of the photo). */
.about-quote {
  grid-area: quote !important;
  grid-row: 1 !important;
  grid-column: 3 !important;
  z-index: 3;
  align-self: start;
  /* Push down from the very top so the quote lines up with Keith's
     face area, not the top of his head / hair. */
  margin-top: clamp(2.5rem, 8vh, 7rem);
}
/* Pin the spacer (was the empty middle column) to the END of the row so
   the new photo-in-middle layout works. We're not using spacer anymore. */
.about-spacer { display: none; }
.about-spacer {
  /* Empty middle column — just holds space for the photo behind. */
  min-height: 1px;
}

/* "About" eyebrow + "Keith" display-name — compact and LEFT-aligned per
   the new reference. The whole about-copy block reads as a tight block
   flush with the column's left edge. */
.about-copy { text-align: left; }
.about .eyebrow {
  /* "About" — italic serif, sized per reference */
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  margin-bottom: .15rem;
  text-align: left;
}
.about .display-name {
  /* "Keith" — large pink italic serif per reference */
  font-size: clamp(4rem, 6.5vw, 6rem);
  line-height: .9;
  margin: 0 0 1.5rem;
  text-align: left;
}

.about-headline {
  /* "Learning Saved My Life. / Now It's My Life's Work." per reference.
     Cap reduced (was 1.75rem → 1.55rem) so the longest line
     "Learning Saved My Life." fits on a single line in the (relatively
     narrow) left copy column — two-line headline per the design,
     instead of breaking to 4. */
  font-size: clamp(1.3rem, 1.55vw, 1.55rem);
  margin: 1rem 0 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: pre-line;
  /* CMS stores the two lines with a \n between them (honoured by the
     pre-line above). `text-wrap: balance` is intentionally NOT used
     here — we want the browser to honour the authored break, not its
     own balancing heuristic. */
}
.about-body {
  /* Sized down a touch (was 1.1rem → .95rem) per design feedback —
     the two paragraphs ("I didn't finish 10th grade…" and
     "Twenty-five years later…") read better as a smaller body block
     against the larger headline above. */
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.5rem;
  white-space: pre-line;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  position: relative;
  z-index: 4;
}

.about-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Let the quote sit inside its grid column. The old `width: 160%;
     translateX(-25%)` worked only at specific viewport sizes and could
     push text off-screen when the section's height (and therefore grid
     column widths) recomputed. */
}
/* Old `.about-copy { transform: translateX(-55%) !important }` removed —
   it was visually nudging the copy block over the photo, but at wider
   desktop viewports it shifted the text off the left edge of the screen. */
/* Button flush-left in the column (matches the left-aligned reference). */
.about-copy .btn { align-self: flex-start; margin-left: 0; margin-right: auto; }
/* Pull-quote — no pink left rule any more; the colour-coded italic carries
   the visual weight on its own. */
.pull-quote {
  text-align: left;
  margin: 0;
  border: none;
  padding-left: 0;
}
.pull-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--ink);
  margin: 0 0 .75rem;
  line-height: 1.35;
}
/* In the About section the pull-quote uses Inter (matches the mockup),
   while every other use of `.pull-quote` keeps the site's default serif.
   The "lead" pink portion is set noticeably larger than the white
   continuation to match the size hierarchy in the reference. */
.about .pull-quote {
  /* Center-aligned in the right column. Each authored line of pink
     and white text renders on its own line via white-space: pre-line
     on the child spans. The widened column 3 (1.45fr) gives this
     quote room to breathe — capped here at 34rem so a wide viewport
     doesn't stretch lines into a long ribbon. */
  text-align: center;
  position: relative;
  z-index: 4;
  margin: 0 auto;
  padding: 0;
  max-width: 34rem;
  width: 100%;
}
.about .pull-quote p {
  font-family: var(--font-sans);
  /* Tight bottom margin so the cite ("Dr. Keith Keating") sits close to
     the body of the quote per the reference. */
  margin-bottom: .25rem;
  font-size: clamp(.68rem, .92vw, .92rem);
  line-height: 1.45;
  /* Honour the \n stored in `pull_quote` and `pull_quote_continuation` so
     the quote breaks exactly where the designer wants — three pink lines
     followed by two white lines, every time, regardless of viewport. */
  white-space: pre-line;
}
.about .pull-quote-lead {
  /* Pink "lead" — another 30% larger than the previous value. */
  font-size: clamp(1.61rem, 2.03vw, 2.12rem);
  line-height: 1.3;
  font-weight: 700;
  display: block;
  white-space: pre-line;
  text-align: center;
}
.about .pull-quote-rest {
  /* White continuation — another 30% larger than the previous value. */
  display: block;
  margin-top: .7rem;
  font-size: clamp(1.05rem, 1.31vw, 1.39rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: pre-line;
  text-align: center;
}
.about .pull-quote cite {
  font-family: var(--font-sans);
  /* Tight gap from the white continuation, matching the reference where
     "Dr. Keith Keating" sits just below the body of the quote. */
  margin-top: .35rem;
  display: inline-block;
}
.pull-quote-lead {
  color: var(--pink);
  font-weight: 700;
  font-size: 1.25em;
}
.pull-quote-rest {
  color: var(--ink);
  font-weight: 400;
}
.pull-quote cite {
  font-style: normal;
  color: var(--ink-dim);
  font-size: .85rem;
}

/* Stats row — three columns confined to the MIDDLE column of the grid so
   the numbers sit directly over the photo (not spread across the whole
   section). Centered horizontally over the photo via max-width matching
   the photo's max-width, and anchored vertically just above the photo's
   base with a negative margin pulled into the photo. */
.about .stats {
  /* Anchored at the section's bottom by flex space-between, then LIFTED
     UP with a negative `top` so the numbers sit OVER the photo's lower
     torso area. Centered horizontally on the section so they line up
     directly under (and on top of) the photo. */
  position: relative;
  top: clamp(-11.9rem, -18.7vh, -7.65rem);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  /* Cap to a narrow band and center as a flex item AND with auto
     margins — both belt + braces so the row is unambiguously centered. */
  width: min(460px, 100% - 2rem);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  padding: 0;
  text-align: center;
  pointer-events: none;
  box-sizing: border-box;
}
.about .stats .stat { pointer-events: auto; }
.about .stats .stat { pointer-events: auto; }
.about .stat-value {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  /* 40% larger than the previous compact size. */
  font-size: clamp(2.1rem, 3.08vw, 2.73rem);
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1;
}
.about .stat-plus {
  color: var(--pink);
}
.about .stat-label {
  /* 40% larger labels to match the bigger numbers */
  font-size: .77rem; letter-spacing: .14em;
  color: #fff;
  text-transform: uppercase;
  margin-top: .55rem;
}

/* About detail page (/about) ------------------------------------------- */

.about-detail {
  background: linear-gradient(180deg, #321b7e 0%, #0b0b33 100%);
  padding: clamp(7rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
  min-height: 100vh;
}

/* Hero portion: 2-column grid — text/stats on the LEFT, photo on the RIGHT.
   The columns sit close together (small gap) so the title block and Keith's
   portrait feel like one composition, matching the reference. */
.about-detail-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(.5rem, 1vw, 1rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.about-detail-hero-left {
  text-align: center;
}
.about-detail-hero-left .eyebrow {
  /* Reduced from 100pt source — sized so the title fits comfortably in
     the left column without forcing wraps or overflow. */
  font-size: clamp(1.5rem, 3vw, 3.2rem);
  line-height: 1;
  margin: 0 0 -.25rem;
  text-align: center;
}
.about-detail-hero-left .display-name {
  /* "Keith" — reduced from 170pt source. Still dominant but no longer
     pushing the photo offscreen. */
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: .95;
  margin: 0 0 1.25rem;
  text-align: center;
}
.about-detail-headline {
  font-family: var(--font-sans);
  /* Headline — reduced so "Learning Saved My Life" fits on ONE line. */
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 1.5rem;
  white-space: pre-line;
  color: var(--ink);
  text-align: center;
}

.about-detail-photo {
  margin: 0;
}
.about-detail-photo img {
  width: 100%;
  max-width: 780px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius);
}

.about-detail-stats {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  /* Stats sit tight together in a centred group */
  gap: 0;
  margin: 0 auto;
}
/* Thin vertical divider between stats — the 2nd and 3rd get a left
   border; the first doesn't. Padding around each stat keeps the dividers
   from touching the numbers. */
.about-detail-stats .stat {
  padding: 0 clamp(.85rem, 1.6vw, 1.4rem);
  border-left: 1px solid rgba(255, 255, 255, .22);
  text-align: center;
}
.about-detail-stats .stat:first-child {
  padding-left: 0;
  border-left: none;
}
.about-detail-stats .stat:last-child {
  padding-right: 0;
}
.about-detail-stats .stat-value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.about-detail-stats .stat-plus { color: var(--pink); }
.about-detail-stats .stat-label {
  font-family: var(--font-sans);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-top: .4rem;
  text-align: left;
}

/* Body + quote sit BELOW the hero in a narrower centred column for
   comfortable reading width. */
.about-detail-body-wrap,
.about-detail-quote-wrap {
  max-width: 760px;
  margin: 0 auto;
}
.about-detail-body {
  text-align: left;
  font-family: var(--font-sans);
  color: var(--ink-dim);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 3rem;
}
.about-detail-body p { margin: 0 0 1.1rem; }
.about-detail-body p:last-child { margin-bottom: 0; }
/* The opening paragraph ("If you had met me 20 years ago...") sets the
   tone of the long bio — rendered in the brand pink to lead the reader in. */
.about-detail-body p:first-child {
  color: var(--pink);
  font-weight: 500;
}

/* Bottom block — quote on the LEFT (shifted toward page-centre), photo
   on the RIGHT (large, extending to the viewport's right edge). Both
   columns anchor at the BOTTOM so they share a baseline; the photo is
   taller so it rises higher than the quote. No artificial min-height —
   the block sizes to its content (driven by the photo's max-height). */
.about-detail-bottom {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(.5rem, 1.5vw, 1.5rem);
  align-items: end;
  /* Break out of the .container max-width so this block spans the
     entire viewport width — lets the photo touch the right edge.
     DESKTOP ONLY — mobile overrides below revert this. */
  width: 100vw;
  margin-left: calc(50% - 50vw + 18vw);
  margin-right: calc(50% - 50vw - 18vw);
  padding: 0 0 0 clamp(2rem, 8vw, 12rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 0;
}
/* MOBILE ONLY: cancela el break-out del desktop y centra TODO en
   la pagina (incluyendo foto). Cubre phones + tablets portrait. */
@media (max-width: 1100px), (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .about-detail-bottom {
    /* SINGLE column en mobile — quote y photo apilados, full width. */
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 clamp(1rem, 4vw, 3rem) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-items: center !important;
  }
  /* Quote y photo containers full-width centrados. */
  .about-detail-bottom-left,
  .about-detail-bottom-right {
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column;
    text-align: center !important;
  }
  /* Quote blockquote: ancho completo y centrado. */
  .about-detail-bottom-left .about-detail-quote {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    display: block !important;
  }
  .about-detail-bottom-left .about-detail-quote p,
  .about-detail-bottom-left .about-detail-quote cite,
  .about-detail-bottom-left .about-detail-quote .pull-quote-lead,
  .about-detail-bottom-left .about-detail-quote .pull-quote-rest {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: auto !important;
  }
  .about-detail-bottom-photo {
    margin: 0 auto !important;
    width: auto !important;
  }
  .about-detail-bottom-photo img {
    margin: 0 auto !important;
    object-position: center center !important;
    display: block !important;
  }
}
.about-detail-bottom-left {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  padding-right: clamp(1rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 5rem);
}
.about-detail-bottom-right {
  display: flex;
  justify-content: flex-end;
  align-items: end;
}
.about-detail-bottom-photo {
  margin: 0 0 0 auto;
}
.about-detail-bottom-photo img {
  width: auto;
  max-width: 100%;
  /* Photo grows tall — up to 95vh so it dominates the right side. */
  max-height: 95vh;
  height: auto;
  display: block;
  margin: 0 0 0 auto;
  border-radius: var(--radius);
  object-fit: contain;
  object-position: bottom right;
}
/* RESET de break-out + CENTRADO completo del bottom block en
   TABLETS y PHONES en portrait. Cubre TODOS los breakpoints
   excepto desktop muy ancho. */
@media (max-width: 1100px) and (orientation: portrait),
       (max-width: 800px),
       (orientation: portrait) {
  /* CRITICAL: reset el break-out de container (width: 100vw + margin
     shift) con MARGIN 0 + AUTO ambos para garantizar el centrado. */
  html body .about-detail-bottom,
  .about-detail.container .about-detail-bottom,
  .about-detail-bottom {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.25rem !important;
    box-sizing: border-box !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
    /* Override del shift desktop. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Sin position offset. */
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .about-detail-bottom-left {
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column;
  }
  .about-detail-bottom-right {
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
  }
  .about-detail-bottom-photo {
    margin: 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
  }
  .about-detail-bottom-photo img {
    margin: 0 auto !important;
    display: block !important;
    object-position: center center !important;
  }
  /* Quote también centrado al 100%. */
  .about-detail-bottom-left .about-detail-quote {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
}

/* MOBILE LANDSCAPE: bottom block en 2 columnas (quote IZQ + foto DER)
   replicando el layout desktop pero adaptado al viewport corto. */
@media (orientation: landscape) and (max-height: 500px) {
  .about-detail-bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    align-items: center !important;
    justify-items: stretch !important;
  }
  .about-detail-bottom-left {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .about-detail-bottom-left .about-detail-quote {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .about-detail-bottom-left .about-detail-quote .pull-quote-lead,
  .about-detail-bottom-left .about-detail-quote .pull-quote-rest {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .about-detail-bottom-left .about-detail-quote cite,
  .about-detail-bottom-left cite,
  html body .about-detail-bottom-left .about-detail-quote cite {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
  }
  .about-detail-bottom-right {
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  .about-detail-bottom-photo {
    margin: 0 0 0 auto !important;
    height: calc(100vh - 6rem) !important;
    max-height: calc(100vh - 6rem) !important;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .about-detail-bottom-photo img {
    width: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }
}

/* Re-open the @media (max-width: 800px) closing photo rule that
   was left dangling. */
@media (max-width: 800px) {
  .about-detail-bottom-photo img {
    max-width: 480px;
    max-height: none;
    margin: 0 auto;
  }
}

.about-detail-quote {
  margin: 0;
  text-align: center;
  border: none;
  padding: 0;
}
.about-detail-quote p {
  font-family: var(--font-sans);
  font-style: italic;
  /* Base = white "rest" line size (smaller than pink lead) */
  font-size: clamp(.85rem, 1.1vw, 1.1rem);
  line-height: 1.4;
  margin: 0 0 .75rem;
  /* Honour the authored \n line breaks (3 pink lines, 2 white lines). */
  white-space: pre-line;
}
.about-detail-quote .pull-quote-lead {
  color: var(--pink);
  font-weight: 700;
  /* Pink lead — large, dominant. Same scale as the home-page version. */
  font-size: clamp(1.2rem, 2vw, 2.1rem);
  line-height: 1.2;
}
.about-detail-quote .pull-quote-rest {
  color: var(--ink);
  font-weight: 400;
  /* Force the white continuation onto its OWN line, separate from the
     pink lead above. (Spans are inline by default — without this the
     white text just flows after the lead's last word.) */
  display: block;
  margin-top: .65rem;
}
.about-detail-quote cite {
  font-family: var(--font-sans);
  font-style: normal;
  color: var(--ink-dim);
  font-size: .85rem;
}

.about-detail-back {
  margin-top: 3rem;
  text-align: center;
}

/* On narrow screens the hero stacks: text + stats first, photo below. */
@media (max-width: 800px) {
  .about-detail-hero { grid-template-columns: 1fr; }
  .about-detail-photo img { max-width: 360px; }
}

/* MOBILE (vertical Y landscape): pull-quote sizing + container — para
   que el texto "If a high school dropout..." no se corte a la derecha,
   y para que la foto de Keith no se desborde de la sección. */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  .about-detail { padding: 5rem 1.25rem 3rem !important; }
  .about-detail-hero {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 !important;
  }
  .about-detail-photo {
    margin: 0 auto !important;
    width: 100% !important;
    /* Force a portrait crop window — image is `object-fit: cover` inside it
       so the rendered window is always exactly this aspect ratio regardless
       of the source image. Lets us use `object-position` to crop more
       aggressively off the LEFT side, bringing Keith's head to centre. */
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
  }
  .about-detail-photo img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    /* Pull the crop window's centre to the RIGHT of the source image
       (object-position uses the SOURCE coords, so "75%" means show the
       slice from ~50% to ~100% of the image). This crops off the empty
       left third of the original portrait where Keith's torso/arm lives,
       centring his face. */
    object-position: 70% center !important;
    margin: 0 !important;
  }
  .about-detail-quote-wrap {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .about-detail-quote {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
  }
  .about-detail-quote p {
    font-size: .82rem !important;
    line-height: 1.4 !important;
    margin: 0 0 .5rem !important;
    /* `normal` permite que las palabras largas se rompan si hace falta,
       sin que el texto se corte fuera del viewport. */
    white-space: pre-line !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .about-detail .about-detail-quote .pull-quote-lead,
  .about-detail-quote .pull-quote-lead {
    font-size: clamp(.85rem, 3.8vw, 1.1rem) !important;
    line-height: 1.25 !important;
    display: block !important;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
    /* Centrado horizontal EXPLÍCITO en el span. */
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .about-detail .about-detail-quote .pull-quote-rest,
  .about-detail-quote .pull-quote-rest {
    font-size: .75rem !important;
    line-height: 1.4 !important;
    display: block !important;
    margin-top: .5rem !important;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
    /* Centrado horizontal EXPLÍCITO en el span. */
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .about-detail-quote cite {
    font-size: .8rem !important;
    margin-top: .5rem !important;
    display: block;
  }
  .about-detail-back {
    margin-top: 2rem !important;
  }
  .about-detail-back .btn {
    width: auto !important;
    max-width: 90% !important;
  }
}

/* MOBILE (vertical + landscape): FORZAR centrado + reducción de
   tamaño en TODAS las pull-quotes (home page + detail page). */
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  /* Wrappers: centrados horizontalmente. */
  .about-detail-hero,
  .about-detail-quote-wrap,
  .about-detail-quote,
  .about-detail-photo,
  .about-quote,
  .about-quote-overlay,
  .about .pull-quote {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .about-detail-photo img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* TODOS los pull-quote-lead y -rest: tamaño reducido + centrado
     EXPLÍCITO en cada span para que no se desborden ni se vean
     left-aligned. */
  .pull-quote-lead,
  .about .pull-quote-lead,
  .about-detail-quote .pull-quote-lead {
    font-size: clamp(.9rem, 4vw, 1.3rem) !important;
    line-height: 1.25 !important;
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .pull-quote-rest,
  .about .pull-quote-rest,
  .about-detail-quote .pull-quote-rest {
    font-size: .8rem !important;
    line-height: 1.4 !important;
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: .5rem !important;
    max-width: 100% !important;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .pull-quote cite,
  .about .pull-quote cite,
  .about-detail-quote cite {
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: .65rem !important;
    font-size: .8rem !important;
  }
  .about-detail-quote p,
  .about .pull-quote p,
  .pull-quote p {
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* LANDSCAPE: foto del about-detail (TOP hero photo) reducida 35%. */
@media (orientation: landscape) and (max-height: 900px) {
  .about-detail-photo {
    width: 65% !important;
    max-width: 65% !important;
    margin: 0 auto !important;
  }
  .about-detail-photo img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  /* About-detail HERO LEFT block 20% más grande (eyebrow + display-name
     + headline + stats). */
  .about-detail-hero-left .eyebrow {
    /* 1.5rem → 1.8rem (20% más) */
    font-size: clamp(1.8rem, 3.6vw, 3.84rem) !important;
  }
  .about-detail-hero-left .display-name {
    /* clamp(2.5rem, 6vw, 6rem) → clamp(3rem, 7.2vw, 7.2rem) */
    font-size: clamp(3rem, 7.2vw, 7.2rem) !important;
  }
  .about-detail-headline {
    /* clamp(1rem, 1.5vw, 1.5rem) → clamp(1.2rem, 1.8vw, 1.8rem) */
    font-size: clamp(1.2rem, 1.8vw, 1.8rem) !important;
  }
  .about-detail-stats .stat-value {
    /* clamp(1.6rem, 2.8vw, 2.4rem) → clamp(1.92rem, 3.36vw, 2.88rem) */
    font-size: clamp(1.92rem, 3.36vw, 2.88rem) !important;
  }
  .about-detail-stats .stat-label {
    /* .65rem → .78rem */
    font-size: .78rem !important;
  }
}

/* LANDSCAPE específico: las cajas de texto del pull-quote 30% más
   grandes. Cubre TODOS los breakpoints landscape de phone hasta
   tablet pequeña (max-height: 900px) para garantizar el override. */
@media (orientation: landscape) and (max-height: 900px) {
  /* Super-specific selectors with section + parent context to defeat
     any other rule on the page. */
  html body .about .pull-quote-lead,
  html body .about-detail .about-detail-quote .pull-quote-lead,
  html body .about-detail-quote .pull-quote-lead,
  html body .about .pull-quote .pull-quote-lead,
  html body .pull-quote-lead {
    font-size: clamp(1.17rem, 3vw, 1.7rem) !important;
    line-height: 1.25 !important;
  }
  html body .about .pull-quote-rest,
  html body .about-detail .about-detail-quote .pull-quote-rest,
  html body .about-detail-quote .pull-quote-rest,
  html body .about .pull-quote .pull-quote-rest,
  html body .pull-quote-rest {
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
  }
  html body .about .pull-quote cite,
  html body .about-detail .about-detail-quote cite,
  html body .about-detail-quote cite,
  html body .pull-quote cite {
    font-size: 1.05rem !important;
  }
}

/* Services ------------------------------------------------------------- */

/* What Keith Does — 3-column: photo LEFT / text+quote centre / 2×2 cards
   RIGHT. Background is the same gradient as the About section but
   VERTICALLY INVERTED — dark on top, purple on the bottom — so the two
   sections flow into each other smoothly. */
.services {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: linear-gradient(180deg, #0b0b33 0%, #321b7e 100%);
  overflow: hidden;
  /* Override the global 100vh — this section's content is compact, the
     extra vertical space leaves the layout looking empty. A tighter
     min-height keeps everything visually grouped. */
  min-height: clamp(560px, 75vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Narrower container for this section so the 3-column layout doesn't
   stretch to the page edges — keeps photo + text + cards centred as a
   tight group with comfortable margins on both sides. */
.services .container {
  /* 15% wider container so everything inside (photo, text, cards) scales
     up proportionally on desktop. */
  max-width: 1265px;
}
.services-3col {
  display: grid;
  /* Three-column layout: text LEFT, photo CENTRE (focal point), cards
     RIGHT. Photo column is the widest so Keith on the stool dominates
     visually. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
.services-text { text-align: left; }
.services-quote {
  /* No box around the quote — just plain text on the section's background. */
  background: transparent;
  padding: 0;
  margin: 2.3rem 0 0;
  border: none;
  font-family: var(--font-sans);
  /* 15% larger body quote */
  font-size: clamp(1.09rem, 1.27vw, 1.27rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  font-style: normal;
  font-weight: 700;
  max-width: 552px;
  /* Honour authored \n line breaks so the quote reads on four lines. */
  white-space: pre-line;
}
.services-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.services-photo img {
  /* Photo keeps its NATURAL aspect ratio (no stretching). The image
     fills its column width (which is now ~44% of the section), and the
     larger max-height lets it grow tall enough to be a dominant focal
     point. */
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 95vh;
  height: auto;
}
.services-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
  /* 15% larger cluster width */
  max-width: 390px;
  /* Push the cluster to the right edge of the column for a balanced
     composition (photo centre, cards right). */
  margin-left: auto;
}
/* When the detail panel is open, JS sets `hidden` on the cards grid —
   make sure the explicit class rule above is overridden so the cards
   actually disappear (not just stack behind the detail). */
.services-cards[hidden] { display: none; }

/* Service cards — perfect squares, centred. The WHOLE card is a button:
   click or keyboard-activate opens the detail panel. `aspect-ratio: 1/1`
   keeps every card the same square shape regardless of title length. */
.service-card {
  background: linear-gradient(180deg, #2a1564 0%, #1a0f3d 100%);
  color: #fff;
  border-radius: 16px;
  border: 1px solid rgba(242, 0, 129, 0.55);
  /* 15% larger padding so the card matches the larger cluster */
  padding: .98rem .8rem 1.85rem;
  position: relative;
  text-align: center;
  box-shadow: 0 0 18px rgba(242, 0, 129, 0.1);
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Slight rectangle (taller than wide) matching the reference */
  aspect-ratio: 1 / 1.05;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 36px rgba(242, 0, 129, 0.28);
  border-color: var(--pink);
  outline: none;
}
.service-number {
  color: var(--pink);
  font-weight: 700;
  /* 15% larger pink number */
  font-size: 1.09rem;
  margin: 0 0 .63rem;
  font-family: var(--font-sans);
  line-height: 1;
}
.service-title {
  font-family: var(--font-sans);
  font-weight: 700;
  /* 15% larger white title */
  font-size: .94rem;
  line-height: 1.2;
  margin: 0;
  color: #fff;
  white-space: normal;
  text-wrap: balance;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .15rem;
}
/* Pink chevron circle anchored to bottom-right — 15% larger */
.service-card-arrow {
  position: absolute;
  bottom: .55rem; right: .55rem;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  line-height: 16px;
  text-align: center;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding-left: 1px;
  transition: transform .2s ease;
}
.service-card:hover .service-card-arrow,
.service-card:focus-visible .service-card-arrow {
  transform: scale(1.1);
}

/* ─── Service detail panel ──────────────────────────────────────────
   Replaces the .services-cards grid in the same column when a user
   clicks a card. JS hides the cards (display: none) so this panel is
   the only thing rendered. */
.services-cards-wrap {
  position: relative;
}
.service-detail {
  background: linear-gradient(180deg, #2a1564 0%, #1a0f3d 100%);
  border: 1px solid rgba(242, 0, 129, 0.55);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.4vw, 2.4rem);
  box-shadow: 0 0 32px rgba(242, 0, 129, 0.22);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Frame is bumped another 20% (was 120%, now 144%). Only the frame
     grows — typography sizes stay the same so the text doesn't scale up
     with the card. The negative left margin keeps the bigger square
     centred on the same axis as the original 2×2 grid — it overflows
     into the centre column (on top of the model photo) by design. */
  width: 144%;
  margin-left: -22%;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 5;
  overflow: hidden;
  animation: service-detail-in .2s ease-out;
}
@keyframes service-detail-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
.service-detail[hidden] { display: none; }
.service-detail-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.service-detail-close:hover,
.service-detail-close:focus-visible {
  background: #ff1a93;
  transform: scale(1.06);
  outline: none;
}
.service-detail-close span { transform: translateY(-1px); }
.service-detail-number {
  font-family: var(--font-sans);
  color: var(--pink);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  margin: 0 0 .75rem;
  /* Equal padding on both sides so the centered text stays visually
     centred — the X button floats on top via absolute positioning and
     doesn't need its own reserved column. */
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}
.service-detail-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  color: #fff;
  line-height: 1.2;
  margin: 0 0 .9rem;
  padding-left: 2.75rem;
  padding-right: 2.75rem;
  /* In the detail popup we collapse the authored \n into spaces — the
     title reads as one continuous sentence here (not stacked words). */
  white-space: normal;
}
.service-detail-divider {
  width: 70%;
  height: 1px;
  background: var(--pink);
  margin: 0 auto 1rem;
  opacity: .85;
}
.service-detail-body {
  font-family: var(--font-sans);
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
  margin: 0;
}

/* Service detail pager — sits OUTSIDE the detail card (below it) so
   the card's interior layout stays clean. JS toggles `hidden` in sync
   with the detail panel. */
.service-detail-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
}
.service-detail-pager[hidden] { display: none; }
.service-detail-nav {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  transition: border-color .15s, color .15s;
}
.service-detail-nav:hover,
.service-detail-nav:focus-visible {
  border-color: var(--pink);
  color: var(--pink);
  outline: none;
}
.service-detail-dots {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.service-detail-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.service-detail-dot:hover { background: rgba(255, 255, 255, 0.55); }
.service-detail-dot.is-active { background: var(--pink); transform: scale(1.4); }

/* Framework cards (wireframe style): icon top-centre, centred title, source, LEARN MORE + pink dot below */
.framework-card {
  /* Solid card colour requested by the design — no gradient. */
  background: #321b7e;
  color: #fff;
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem 2.25rem;
  text-align: center;
  position: relative;
  border: 1px solid rgba(255, 56, 132, 0.32);
  box-shadow: 0 0 24px rgba(255, 56, 132, 0.08);
  display: flex; flex-direction: column;
  align-items: center;
}
/* Icon shows directly with no circular background behind it — the
   uploaded icon graphic carries its own colour (pink/white). */
.framework-icon {
  margin: 0 auto 1.75rem;
  display: flex; align-items: center; justify-content: center;
}
.framework-icon img {
  width: 64px; height: 64px;
  object-fit: contain;
  /* No filter — let the icon's original colours come through. */
}
/* Title: Inter sans, semibold, white — matches reference (was IvyPresto
   serif before which was wrong). !important guards against the global
   font rule that targets every .framework-* element. */
.framework-card .framework-title {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  font-size: clamp(1.3rem, 1.6vw, 1.55rem);
  line-height: 1.2;
  color: #fff;
  margin: 0 0 .85rem;
  letter-spacing: -0.005em;
}
.framework-source {
  font-family: var(--font-sans);
  font-size: .85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1.75rem;
  flex-grow: 1;
  line-height: 1.4;
}
.framework-cta {
  font-family: var(--font-sans);
  color: var(--pink);
  font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin-bottom: .5rem;
}
/* Small circular chevron under the LEARN MORE label (matches reference). */
.framework-cta-arrow {
  width: 24px; height: 24px;
  border: 1px solid rgba(242, 0, 129, 0.6);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: background .15s, transform .15s;
}
.framework-card:hover .framework-cta-arrow,
.framework-card:focus-visible .framework-cta-arrow {
  background: var(--pink); color: #fff; transform: translateX(2px);
}

/* Keynotes ------------------------------------------------------------- */

.keynotes {
  padding: clamp(4rem, 8vw, 6rem) 0;
  text-align: center;
}
/* Larger heading specifically for the keynotes section (overrides the
   global .section-heading defaults). */
.keynotes .section-heading {
  font-size: clamp(1.4rem, 2.8vw, 40px);
  margin-bottom: 2rem;
}
.keynotes .section-heading .pink-italic {
  font-size: clamp(2rem, 4.5vw, 64px);
  line-height: 1;
}
/* Everything inside the keynote box is set in Inter */
.keynote-tabs, .keynote-tab,
.keynote-stage, .keynote-panel,
.keynote-text h3, .keynote-text p,
.keynote-ideal, .keynote-ideal-label, .keynote-ideal li,
.keynote-panel .btn {
  font-family: var(--font-sans);
}
.keynote-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin: 0 0 2rem;
}
.keynote-tab {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: .5rem 1.25rem .5rem 1rem; border-radius: 999px;
  font-size: .75rem; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: .5rem;
}
.keynote-tab::before {
  content: '+';
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pink); color: #fff;
  font-size: .85rem; line-height: 1;
  font-weight: 400;
  flex-shrink: 0;
}
.keynote-tab.is-active { background: #fff; color: var(--bg-deep); border-color: #fff; }
.keynote-tab.is-active::before { background: var(--bg-deep); color: #fff; }

.keynote-stage {
  position: relative;
  padding-right: 2.5rem; /* leaves room for vertical pager */
}
.keynote-panel { display: none; }
@keyframes keynote-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.keynote-panel.is-active {
  display: block;
  animation: keynote-panel-in 0.35s cubic-bezier(.16, 1, .3, 1) both;
  text-align: left;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  /* Default: panel fits exactly inside the keynote-stage column with no
     horizontal overhang. The old `width: 120%; margin-left: -10%` trick
     was overflowing the viewport on common laptop widths (1280–1440px
     Chrome on Windows) — the LEFT 10% bled past the container edge and
     got clipped by the viewport. Only at ultra-wide viewports (≥1500px)
     does the wider-than-column treatment re-engage (see below) where
     there's enough side margin to absorb it. */
  width: 100%;
  margin-left: 0;
  margin-right: auto;
  /* Taller card — extends down to give more breathing room for the
     description / Ideal For list (card view) and the expanded body
     (detail view). */
  min-height: clamp(440px, 55vh, 600px);
  /* Pink outline on every card (matches the reference design). */
  border: 1px solid rgba(242, 0, 129, 0.55);
  box-shadow: 0 0 24px rgba(242, 0, 129, 0.12);
}
/* Ultra-wide viewports (≥1500px) — re-enable the design's "wider than
   the column" treatment now that there's genuinely enough room. */
@media (min-width: 1500px) {
  .keynote-panel.is-active {
    width: 120%;
    margin-left: -10%;
    max-width: 1440px;
  }
}
/* When the Learn More detail view is open, hide the per-card background
   image — the expanded view uses a solid card colour for legibility
   (per design). */
.keynote-panel.is-detail-open.has-bg {
  background-image: none !important;
  background: var(--bg-card);
}
/* Default (closed) state: card view shows the 2-col layout. */
.keynote-panel.is-active .keynote-card-view {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
}
.keynote-card-view[hidden] { display: none !important; }
/* When the editor uploads a per-talk background image, render it full-bleed
   behind the card. The inline style on the element provides the dark overlay
   gradient + image; here we set background-size/position so it covers the
   whole card cleanly. */
.keynote-panel.has-bg {
  background-size: cover;
  /* Anchor to the RIGHT edge at ALL breakpoints — the source photos
     have Keith on the right side of the frame, so `background-position:
     center` was cropping him off on narrower-than-source viewports.
     `right center` keeps Keith fully visible regardless of card width. */
  background-position: right center;
  background-repeat: no-repeat;
}
/* On cards with a per-talk background image, keep the title + description
   white for legibility — but bullets stay pink (per reference). The
   default colours already match, this is just a guard against earlier
   theme tweaks. */
.keynote-panel.has-bg .keynote-text h3 { color: #fff; }
/* The :not() guard prevents this rule from over-writing the pink italic
   "Ideal For" label, which is technically also a <p> direct child of
   .keynote-text and was inheriting white from this selector. */
.keynote-panel.has-bg .keynote-text > p:not(.keynote-ideal-label) {
  color: rgba(255, 255, 255, 0.95);
}
/* Card title — large, white, Inter semibold (matches reference). */
.keynote-text h3 {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 3.4vw, 3.25rem);
  margin: 0 0 1rem;
  font-weight: 600;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.01em;
}
/* Description — pure white (not dimmed), small, with author-supplied
   line breaks preserved. The :not() guard keeps this rule from
   accidentally over-writing the pink italic "Ideal For" label which is
   also a <p> direct child of .keynote-text. */
.keynote-text > p:not(.keynote-ideal-label) {
  color: #fff;
  margin: 0 0 1.75rem;
  font-weight: 400;
  font-size: .98rem;
  line-height: 1.45;
  white-space: pre-line;
}
/* "Ideal For" label — pink, italic, IvyPresto serif (NOT uppercase,
   NOT sans). Selector is intentionally over-specific so it beats the
   global rule at the top of the keynotes block that forces every
   .keynote-* element to Inter. Same display treatment as the labels
   inside the expanded detail view. */
.keynote-text .keynote-ideal-label,
.keynote-panel .keynote-ideal-label {
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-weight: 600;
  color: var(--pink) !important;
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  margin: 1.25rem 0 .65rem;
}
.keynote-ideal { margin: 0 0 1.75rem; list-style: none; padding: 0; }
.keynote-ideal li {
  /* Bullets in white per design — both the text and the • marker. */
  font-family: var(--font-sans);
  font-size: .95rem;
  color: #fff;
  padding-left: 1rem;
  position: relative;
  margin-bottom: .35rem;
  font-weight: 500;
  line-height: 1.4;
}
.keynote-ideal li::before {
  content: '•'; color: #fff; position: absolute; left: 0;
}
/* LEARN MORE pill — add the small "›" chevron after the label so the
   button matches the reference exactly. */
.keynote-text .btn::after {
  content: '›';
  display: inline-block;
  margin-left: .5rem;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1;
  transform: translateY(-1px);
}
.keynote-photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Anchor right so Keith (positioned on the right side of the source
     photos) stays fully visible at every card width. */
  object-position: right center;
  border-radius: var(--radius-sm); max-height: 360px;
}

/* ─── Keynote "Learn More" expanded detail view ────────────────────
   Replaces the card-view (photo + short copy) inside the same panel
   when the editor configured tags / long_description / key_shifts and
   the user clicks the LEARN MORE button. A BACK button at the top-
   right returns the user to the card view. */
.keynote-detail-view {
  position: relative;
  padding: .5rem .25rem 0;
  animation: keynote-detail-in .25s ease-out;
}
.keynote-detail-view[hidden] { display: none; }
@keyframes keynote-detail-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.keynote-back {
  position: absolute;
  top: 0; right: 0;
  background: #fff;
  color: var(--bg-deep);
  border: none;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .06em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: transform .15s ease, background .15s ease;
}
.keynote-back:hover,
.keynote-back:focus-visible {
  background: #ffe6f3;
  transform: translateY(-1px);
  outline: none;
}
.keynote-back span { font-size: 1.05rem; line-height: 1; }
.keynote-detail-tags {
  color: var(--pink);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .02em;
  margin: 0 0 .75rem;
  padding-right: 6rem; /* keep clear of the BACK button */
}
.keynote-detail-title {
  font-family: var(--font-sans);
  color: #fff;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  padding-right: 6rem;
}
.keynote-detail-body {
  color: var(--ink-dim);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0 0 1.75rem;
  max-width: 60rem;
}
.keynote-detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}
/* "Key Shifts" / "Ideal For" column headers inside the expanded detail
   view. Pink IvyPresto serif italic — matches the card-view "Ideal For"
   label and the rest of the site's display headings. !important guards
   against the broad global rules at the top of the keynotes block that
   force Inter on every .keynote-* element. */
.keynote-detail-view .keynote-detail-col-label,
.keynote-panel .keynote-detail-col-label {
  font-family: var(--font-serif) !important;
  font-style: italic;
  color: var(--pink) !important;
  font-weight: 600;
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 .65rem;
}
.keynote-detail-list {
  margin: 0;
  list-style: none;
  padding: 0;
}
.keynote-detail-list li {
  /* White per design (was pink). Matches the Ideal For list on the card view. */
  color: #fff;
  font-size: .92rem;
  line-height: 1.45;
  padding-left: 1rem;
  position: relative;
  margin-bottom: .35rem;
}
.keynote-detail-list li::before {
  content: '•'; color: #fff; position: absolute; left: 0;
}
/* When the panel has a background image, slightly lighten the body text
   so it stays readable over the overlay. */
.keynote-panel.has-bg .keynote-detail-body { color: rgba(255, 255, 255, 0.88); }

@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  .keynote-detail-columns { grid-template-columns: 1fr; gap: 1.5rem; }
  .keynote-detail-tags,
  .keynote-detail-title { padding-right: 4.5rem; }
}

/* Vertical pager on the right side of the keynote box */
.keynote-pager {
  position: absolute;
  /* Default: pager sits just outside the panel's right edge (panel is
     100% wide on most viewports now). */
  right: -2.5rem;
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column;
  align-items: center;
  gap: .75rem;
  z-index: 2;
}
/* Ultra-wide viewports (≥1500px) — when the panel re-engages its
   120%-wider treatment, the pager must sit outside that wider edge. */
@media (min-width: 1500px) {
  .keynote-pager {
    right: calc(-10% - 1.25rem);
  }
}
.keynote-pager-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, color .15s, background .15s;
}
.keynote-pager-arrow:hover,
.keynote-pager-arrow:focus-visible {
  border-color: var(--pink);
  color: var(--pink);
  outline: none;
}
.keynote-pager-arrow svg { width: 14px; height: 14px; display: block; }
.keynote-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none; padding: 0; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
/* Counter and swipe hint only appear on mobile (CSS at the bottom of
   the file kicks in via the mobile media query); hidden by default. */
.keynote-counter, .keynote-swipe-hint { display: none; }
.keynote-dot:hover { background: rgba(255, 255, 255, 0.5); }
.keynote-dot.is-active {
  background: var(--pink);
  transform: scale(1.4);
}

/* Testimonials --------------------------------------------------------- */

.testimonials {
  padding: clamp(4rem, 8vw, 6rem) 0;
  text-align: center;
  /* Same gradient as the "What Keith Does" section above for visual
     continuity (deep navy at the top → purple at the bottom). */
  background: linear-gradient(180deg, #0b0b33 0%, #321b7e 100%);
  position: relative;
  overflow: hidden;
}
/* Larger heading specifically for the testimonials section. */
.testimonials .section-heading {
  font-size: clamp(1.4rem, 2.8vw, 40px);
  margin-bottom: 2.5rem;
}
.testimonials .section-heading .pink-italic {
  font-size: clamp(2.4rem, 5.5vw, 80px);
  line-height: 1;
  margin-top: .25rem;
}

/* ─── Auto-scrolling marquee ────────────────────────────────────────
   The marquee container clips its overflow and the track inside
   slides leftward forever. Cards are duplicated in the template so
   the loop is seamless: translateX(-50%) lines the second copy of
   the cards perfectly on top of where the first copy started. */
.testimonial-marquee {
  position: relative;
  /* Horizontal scroll-snap carousel — same pattern as the Publications
     section: programmatic dot pager + free trackpad swipe + soft right
     fade hinting "more content this way". */
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-top: 2.5rem;
  /* Top padding generous enough to clear the avatar's -11rem overhang
     (190px photo, half ≈ 5.5rem above card top). Bumped from 7rem to
     8rem so the photo never clips against the marquee mask area at
     intermediate viewport widths (≈768–1100px). */
  padding: 8rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
  /* `text-align: center` + inline-flex track is the classic pattern
     for "centre when the content fits, scroll when it overflows":
     - When the track's intrinsic width < marquee width: the inline-flex
       block centres in the marquee like centred text.
     - When the track is wider: it overflows naturally and the scroll
       container kicks in (overflow-x: auto).
     The `.is-centered` class below is a JS-set escape hatch — when the
     track really does fit, JS adds the class and we hard-disable
     scroll-snap so it doesn't pin the first card back to the left edge. */
  text-align: center;
}
.testimonial-marquee.is-centered {
  /* Disable snap so the browser doesn't force-align the first card to
     scrollLeft=0, which was overriding the text-align centering and
     making the track "lean left" even with plenty of empty room. */
  scroll-snap-type: none;
  /* Flex centering as a belt-and-braces second mechanism — works
     alongside text-align: center for the inline-flex track. */
  display: flex;
  justify-content: center;
}
.testimonial-marquee.is-centered .testimonial {
  /* No snap needed on individual cards when the whole track is centred
     and there's nothing to scroll between. */
  scroll-snap-align: none;
}
/* Hide the native scrollbar — the marquee implies horizontal scroll via
   the bigger card sizing + the right-edge fade. */
.testimonial-marquee::-webkit-scrollbar { display: none; }
.testimonial-marquee { scrollbar-width: none; }

.testimonial-track {
  list-style: none;
  /* inline-flex so the text-align: center on the parent .testimonial-marquee
     centres the whole track when it fits within the viewport. (Falls
     back to natural overflow + scroll when the track is wider.) */
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2rem;
  width: max-content;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  margin: 0;
  /* Reset the inherited text-align so card content isn't centre-aligned
     just because the parent uses text-align for layout. */
  text-align: left;
}

.testimonial {
  /* Big cards — only ~3 fit across the viewport initially so each one
     reads comfortably and the 4th lives off-screen to the right. */
  flex: 0 0 clamp(360px, 30vw, 480px);
  /* No min-height: the card hugs its own content (padding + quote +
     name + title) so there's no empty band at the bottom. Each card
     can be a slightly different height depending on the quote length;
     align-items: stretch on the track keeps them visually flush at the
     top via flex defaults. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(180deg, #2a1564 0%, #1a0f3d 100%);
  border: 1px solid rgba(255, 56, 132, 0.32);
  /* Rounded rectangle — soft 24px corners on all four sides. */
  border-radius: 24px;
  padding: 5.5rem 2.5rem 2rem;
  text-align: center;
  position: relative;
  scroll-snap-align: start;
}
.testimonial-photo {
  /* Avatar sits HALF outside the card top — matches the reference where
     the photo sticks well above the dome rather than nestling inside it. */
  width: 190px; height: 190px;
  border-radius: 50%; overflow: hidden;
  margin: -11rem auto 1.5rem;
  border: 4px solid var(--pink);
  aspect-ratio: 1;
  background: var(--bg-deep);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.testimonial-photo img,
.testimonial-photo .placeholder-avatar {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bias the crop toward the upper third of the photo so the subject's
     face stays centred regardless of how the original was framed. */
  object-position: center 22%;
  border-radius: 50%;
}
.testimonial blockquote {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  color: #fff;
  font-style: normal;
  line-height: 1.5;
}
.testimonial-name {
  font-weight: 700;
  color: var(--pink);
  margin: .75rem 0 .35rem;
  font-size: 1.25rem;
}
.testimonial-title {
  font-size: .95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
/* Old carousel arrow buttons retired in favour of the marquee. */
.carousel-prev, .carousel-next { display: none; }

/* Pager (arrows + dots) under the testimonial carousel — same shape
   and behaviour as the Publications pager. */
.testimonials-pager {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem;
  margin-top: 1.75rem;
}
.testimonial-pager-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  transition: border-color .15s, color .15s;
}
.testimonial-pager-arrow:hover { border-color: var(--pink); color: var(--pink); }
.testimonial-dots {
  display: flex; align-items: center; gap: .45rem;
}
.testimonial-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.testimonial-dot:hover { background: rgba(255, 255, 255, 0.55); }
.testimonial-dot.is-active { background: var(--pink); transform: scale(1.4); }

/* Respect prefers-reduced-motion: keep the track static for users who opt out
   (the JS scroll-driven transform is gated on this media query too). */
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { transform: none !important; transition: none; }
}

/* Books ---------------------------------------------------------------- */

.books-hero {
  position: relative;
  /* Full-screen hero — image fills the entire viewport height. */
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  background: #0b0b33; /* fallback while the image loads */
}
.books-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.books-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.books-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  /* Dark on the left so the title is readable → fades to transparent on
     the right so Keith and the book stay clearly visible. */
  background: linear-gradient(90deg,
    rgba(11, 11, 51, 0.85) 0%,
    rgba(11, 11, 51, 0.55) 35%,
    rgba(11, 11, 51, 0.15) 70%,
    rgba(11, 11, 51, 0) 100%);
}
/* Text block anchored on the LEFT side of the banner with its own left
   padding (no .container constraining it to a centred max-width). */
.books-hero-text {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding-left: clamp(1.5rem, 8vw, 7rem);
  padding-right: 1.5rem;
}
.books-hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 60px);
  line-height: 1.05;
  margin: .5rem 0 0;
}
/* "The Books" eyebrow uses the default 30px from .eyebrow */

.book {
  /* TOP + bottom both halved per design. */
  padding: clamp(2rem, 4vw, 3rem) 0;
  position: relative;
  overflow: hidden;
  /* Override the global `main > section { min-height: 100vh }` rule —
     books should be only as tall as the cover + text need, not stretched
     to a full viewport with empty navy filling the gap below. */
  min-height: auto;
}
/* Odd-indexed book (first / "The Trusted Learning Advisor"): same gradient
   as the About section — purple top fading to deep navy bottom. */
.book-left {
  background: linear-gradient(180deg, #321b7e 0%, #0b0b33 100%);
}
/* Even-indexed book (second / "Hidden Value"): inverted — deep navy top
   fading up to purple at the bottom. */
.book-right {
  background: linear-gradient(180deg, #0b0b33 0%, #321b7e 100%);
}
.book-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.book-meta {
  color: var(--pink); font-size: .85rem; font-weight: 500;
  letter-spacing: .04em; margin: 0 0 .85rem;
}
.book-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  margin: 0 0 1.75rem;
  line-height: 1;
}
.book-tagline {
  font-size: 1.15rem; font-weight: 500; margin: 0 0 2rem;
}
.book-description p {
  color: var(--ink-dim);
  /* Clear visible gap between paragraphs — matches the reference where
     each idea reads as its own beat rather than one running block. */
  margin: 0 0 1.5rem;
  font-size: .95rem;
  line-height: 1.55;
}
.book-description p:last-child { margin-bottom: 0; }
.book-ctas { display: flex; gap: .9rem; margin-top: 2.25rem; flex-wrap: wrap; }
.book-cover {
  position: relative;
  /* 25% bigger than before (was 320px max) — gives the cover more visual
     presence and a better balance against the longer text block. */
  max-width: 400px;
  margin: 0 auto;
}
.book-cover img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.book-cover .award-badge {
  position: absolute; bottom: -24px; right: -24px;
  /* Proportional to the larger cover (was 90px). */
  width: 115px; height: auto; box-shadow: none; border-radius: 50%;
  aspect-ratio: 1;
}

/* Frameworks ----------------------------------------------------------- */

/* Frameworks section — dark background matching the rest of the site */
.frameworks {
  /* TOP tight (close to the books above); BOTTOM a bit more generous so
     there's breathing room before Watch/Listen/Read starts. */
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(3.5rem, 7vw, 5rem);
  min-height: auto;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  color: #fff;
}
.frameworks .eyebrow { color: #fff; }
.frameworks .pink-italic { color: var(--pink); }
.frameworks-body {
  max-width: 600px; margin: 1rem auto 2rem;
  color: var(--ink-dim);
}
.framework-wrap { position: relative; margin-top: 2.5rem; }
.framework-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.framework-grid[hidden] { display: none; }
.framework-card { cursor: pointer; }

/* ─── Expanded framework detail view ───────────────────────────────
   Replaces the card grid when a user clicks LEARN MORE / a card.
   Two-column layout: text on the left, diagram/visual on the right,
   BACK button top-right, pager dots at the bottom for moving between
   frameworks without going back to the grid first. */
.framework-detail {
  position: relative;
  background: #321b7e;
  border: 1px solid rgba(242, 0, 129, 0.4);
  border-radius: 24px;
  /* Extra bottom padding reserves space for the absolutely-positioned
     pager so the slide content never overlaps with it. */
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2.5rem, 4vw, 3.5rem) 4.5rem;
  /* Taller panel so the visual + text both have more breathing room. */
  min-height: clamp(560px, 70vh, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  animation: framework-detail-in .25s ease-out;
}
.framework-detail[hidden] { display: none; }
@keyframes framework-detail-in {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: scale(1); }
}

.framework-back {
  position: absolute;
  top: 1rem; right: 1rem;
  background: #fff;
  color: var(--bg-deep);
  border: none;
  border-radius: 999px;
  padding: .4rem .9rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .06em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: transform .15s ease, background .15s ease;
  z-index: 3;
}
.framework-back:hover,
.framework-back:focus-visible {
  background: #ffe6f3; transform: translateY(-1px); outline: none;
}
.framework-back span { font-size: 1.05rem; line-height: 1; }

/* Close X — top-right of the expanded framework panel. Replaces the old
   "BACK" pill (which felt redundant once a Back button sits at the bottom). */
.framework-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  display: inline-grid; place-items: center;
  cursor: pointer;
  z-index: 4;
  padding: 0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.framework-close:hover,
.framework-close:focus-visible {
  background: var(--pink);
  border-color: var(--pink);
  transform: scale(1.05);
  outline: none;
}
.framework-close span {
  font-size: 1.5rem;
  line-height: 1;
  display: block;
  margin-top: -2px; /* visual centring of the × glyph */
}

/* Bottom-of-panel "Back to all frameworks" button — sits BELOW the pager
   inside the framework-detail. The pager already reserves bottom padding
   via `.framework-detail { padding-bottom: 4.5rem }`; we bump that on
   the detail block when the back-bottom is present so the button has its
   own breathing room. */
.framework-back-bottom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  align-self: center;
  margin: 2rem auto 0;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: .65rem 1.4rem;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.framework-back-bottom:hover,
.framework-back-bottom:focus-visible {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  outline: none;
}
.framework-back-bottom span {
  font-size: 1.1rem;
  line-height: 1;
}

/* Slides: one per framework, only the active one is shown. The whole
   text column is left-aligned — overrides `.frameworks { text-align:
   center }` which is the correct treatment for the section heading
   above but wrong inside the detail panel. */
.framework-detail-slide {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-right: 5rem; /* clear of the BACK button */
  text-align: left;
}
.framework-detail-slide.is-active { display: grid; }
.framework-detail-text { text-align: left; }

/* Icon in the top-left of the detail panel. By default it sits with NO
   background (the uploaded icon graphic carries its own colour). Add
   the `.has-light-bg` class via the CMS toggle to wrap it in a small
   white circle — used for the Value Creation Compass per the design. */
.framework-detail-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
.framework-detail-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.framework-detail-icon.has-light-bg {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 8px;
}
.framework-detail-icon.has-light-bg img {
  width: 100%; height: 100%;
}
.framework-detail-eyebrow {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: .02em;
  margin: 0 0 .35rem;
  font-weight: 500;
}
.framework-detail-title {
  font-family: var(--font-sans) !important;
  color: #fff;
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.85rem);
  line-height: 1.05;
  margin: 0 0 .6rem;
  letter-spacing: -0.01em;
}
.framework-detail-source {
  color: var(--pink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 1.5rem;
}
.framework-detail-body p {
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1.15rem;
}
.framework-detail-body p:last-child { margin-bottom: 0; }
.framework-detail-visual {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.framework-detail-visual img {
  max-width: 100%;
  height: auto;
  /* Bigger visual to match the taller panel. */
  max-height: 480px;
  object-fit: contain;
}
/* When the framework has compass-style labels around its visual, give
   the container extra padding so the labels never crowd the image. */
.framework-detail-visual.has-labels {
  padding: 4.5rem 5rem;
}
.framework-detail-visual.has-labels img {
  max-height: 360px;
}
.visual-label {
  position: absolute;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.2;
  text-align: center;
  max-width: 9rem;
  /* Pink ruler line above each label that matches the compass design. */
}
.visual-label::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--pink);
  margin: 0 auto .35rem;
}
.visual-label-top {
  top: 0; left: 50%; transform: translateX(-50%);
}
.visual-label-bottom {
  bottom: 0; left: 50%; transform: translateX(-50%);
}
.visual-label-bottom::before {
  /* Bottom label's line sits below the label (mirror of top). */
  margin: .5rem auto 0;
}
.visual-label-bottom { display: flex; flex-direction: column-reverse; }
.visual-label-left {
  top: 50%; left: 0; transform: translateY(-50%);
}
.visual-label-right {
  top: 50%; right: 0; transform: translateY(-50%);
}

/* Pager (dots + arrows) anchored to the BOTTOM of the detail panel via
   absolute positioning so it always sits flush with the bottom edge —
   the active slide can stay vertically centred in the panel above it. */
.framework-pager {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
}
.framework-pager-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: .9rem; line-height: 1;
  transition: border-color .15s, color .15s;
}
.framework-pager-arrow:hover { border-color: var(--pink); color: var(--pink); }
.framework-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.framework-dot:hover { background: rgba(255, 255, 255, 0.55); }
.framework-dot.is-active { background: var(--pink); transform: scale(1.35); }

/* ─── Entrance animations for the icon and the visual diagram ──────
   Triggered by JS adding the .anim-in class to the active slide. Plays
   on first open AND when switching between slides via the pager. */
.framework-detail-slide [data-anim="icon"] {
  opacity: 0;
  transform: translateY(-12px) scale(.85);
}
.framework-detail-slide [data-anim="visual"] {
  opacity: 0;
  transform: translateX(40px) scale(.96);
}
.framework-detail-slide.anim-in [data-anim="icon"] {
  animation: framework-icon-in .55s .05s cubic-bezier(.34, 1.4, .64, 1) forwards;
}
.framework-detail-slide.anim-in [data-anim="visual"] {
  animation: framework-visual-in .65s .15s cubic-bezier(.22, .9, .3, 1) forwards;
}
.framework-detail-slide.anim-in .framework-detail-title,
.framework-detail-slide.anim-in .framework-detail-source,
.framework-detail-slide.anim-in .framework-detail-body p {
  animation: framework-text-in .55s .12s ease-out backwards;
}
.framework-detail-slide.anim-in .framework-detail-body p:nth-child(2) {
  animation-delay: .2s;
}
@keyframes framework-icon-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes framework-visual-in {
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes framework-text-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: stack the two columns and shrink padding. */
@media (max-width: 760px) {
  .framework-detail-slide {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-right: 0;
  }
  .framework-back { top: .75rem; right: .75rem; }
  .framework-detail { padding-top: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .framework-detail-slide [data-anim] {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
}

/* .framework-card visual treatment shared with .service-card above */

/* Watch listen read ---------------------------------------------------- */

.watch-listen-read {
  position: relative;
  /* Banner-style — full-width image, shorter than the viewport so the
     YouTube card + podcasts grid below stay visible on the same scroll. */
  min-height: clamp(360px, 55vh, 560px);
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  background: #0b0b33; /* fallback while the image loads */
}
.wlr-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.wlr-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Anchor to the right so Keith stays in frame on narrow viewports
     instead of getting cropped off-screen. */
  object-position: right center;
  display: block;
}
.wlr-bg::after {
  content: ''; position: absolute; inset: 0;
  /* Dark on the left so the title is readable → fades to transparent on
     the right so the stage photo of Keith stays clearly visible. */
  background: linear-gradient(90deg,
    rgba(11, 11, 51, 0.88) 0%,
    rgba(11, 11, 51, 0.55) 35%,
    rgba(11, 11, 51, 0.15) 70%,
    rgba(11, 11, 51, 0) 100%);
}
/* Outer container — inherits the site-wide max-width + auto margins so
   its left edge aligns with the YouTube card (also inside .container)
   below the banner. */
.wlr-text-wrap {
  position: relative;
  /* Bumped z-index well above the bg img (z:0) + gradient overlay so the
     text always sits visibly above the banner photo, never behind it. */
  z-index: 5;
  width: 100%;
}
/* Inner text block — kept narrow with its own max-width so lines wrap
   the same way regardless of viewport. */
.wlr-text {
  max-width: 600px;
}
.wlr-text > p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 36rem;
  margin-top: 1.5rem;
}

/* YouTube block -------------------------------------------------------- */

.youtube-block {
  padding: 0 0 1rem;
  /* Override the global 100vh — this card is short content, anything
     taller leaves a huge blank gap before the podcasts section. */
  min-height: auto;
  /* Pull the card UP so its top edge overlaps the bottom of the
     Watch.Listen.Read. banner image above — creates a layered, magazine-
     style transition instead of an abrupt cut. */
  margin-top: -7rem;
  position: relative;
  z-index: 2;
}
/* Slight drop-shadow on the YT card so the overlap reads as a clean
   layered tile rather than a flat splice. */
.youtube-block .yt-grid {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.yt-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 2rem; align-items: center;
  background: var(--bg-card); border-radius: var(--radius);
  padding: 1.5rem;
}
.yt-thumb {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  /* Maintain the 16:9 box so the iframe + overlay both have a host size. */
  aspect-ratio: 16/9;
  background: #0b0b33;
}
.yt-thumb img {
  border-radius: var(--radius-sm); width: 100%; height: 100%;
  aspect-ratio: 16/9; object-fit: cover;
  transition: transform .4s ease;
}
.yt-thumb:hover img { transform: scale(1.04); }
/* Looping muted YouTube iframe sitting BEHIND the overlay. pointer-events
   off so every click goes to the wrapping <a> and opens the full YT page,
   never the embedded player controls. The iframe is scaled up slightly so
   the YT branding / loading frames spill outside the tile's rounded edges. */
.yt-thumb-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 130%; height: 130%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 0;
}
/* The poster sits in the same box; the iframe paints on top once it
   loads. Both share the same rounded clipping container. */
.yt-thumb-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Once the iframe is loaded the poster fades out so the live video reads
     through. JS doesn't manage this — instead the iframe's higher z-index
     (set below) ensures it's the visible layer when present. */
}
.yt-thumb-video[src] { z-index: 2; }
/* Centered "WATCH NOW" pill overlay — visible by default, lights up on hover. */
.yt-thumb-overlay {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(11, 11, 51, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .12em;
  padding: .6rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background .2s, border-color .2s, transform .2s;
  z-index: 4; /* always on top of poster + iframe */
}
.yt-caption { z-index: 4; } /* keep caption legible above the iframe loop */
.yt-thumb:hover .yt-thumb-overlay,
.yt-thumb:focus-visible .yt-thumb-overlay {
  background: var(--pink);
  border-color: var(--pink);
  transform: translate(-50%, -50%) scale(1.05);
}
.yt-thumb-play {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: .55rem;
  padding-left: 1px; /* visual centring of the play glyph */
}
.yt-thumb:hover .yt-thumb-play { background: #fff; color: var(--pink); }
.yt-caption {
  position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
  color: #fff; font-weight: 600; margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.yt-text { padding: 1rem; }
.yt-title { font-family: var(--font-serif); font-size: 2rem; margin: .5rem 0 1rem; }
.yt-handle { color: var(--ink-dim); margin: 0 0 1rem; font-size: .9rem; }
.yt-text > p { color: var(--ink-dim); margin: 0 0 1.5rem; }

/* Podcasts ------------------------------------------------------------- */

.podcasts {
  /* Tight top padding so the section sits flush right under the YouTube
     card — visually attached, no big white gap between them. */
  padding: 1rem 0 clamp(2.5rem, 5vw, 4rem);
  /* Override the global 100vh — the grid is short content, no need to
     pad it out to a full viewport. */
  min-height: auto;
}
.podcasts-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 2rem; gap: 1rem; flex-wrap: wrap;
}
.podcasts-title {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);   /* white — replaced the pink-italic class */
  margin: .25rem 0 0;
}
/* Horizontal scroll-snap carousel (was a wrapping grid — when 4+ cards
   wouldn't fit on one row they'd stack onto a second row, which read as
   "incomplete row" visual noise). Mirrors the Publications carousel:
   scroll-snap on the track, prev/next + dot pager below. */
.podcasts-carousel {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  /* Soft fade on the right hints "more →". */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
}
.podcasts-carousel::-webkit-scrollbar { display: none; }
.podcasts-carousel { scrollbar-width: none; }

.podcast-track {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  width: max-content;
  padding: .5rem clamp(1.5rem, 4vw, 4rem) 1rem;
  margin: 0;
  align-items: stretch;
}
.podcast-card-wrap {
  /* Sized so ~4 cards are visible on a 1440px viewport, snapping to
     start as the user scrolls. */
  flex: 0 0 clamp(260px, 22vw, 320px);
  scroll-snap-align: start;
  display: flex;
}

/* ── Wide viewports (≥1200px) — revert to the ORIGINAL podcast layout ──
   No carousel UI (no scroll, no mask, no pager). Reproduces the exact
   shape the section had before the carousel was introduced: auto-fit
   grid that fits as many ≥220px cards as the row can hold, gap: 1rem.
   Carousel mode only kicks in below 1200px when 4 cards genuinely
   wouldn't fit in a row. */
@media (min-width: 1200px) {
  .podcasts-carousel {
    overflow-x: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 0;
    /* Constrain to the same width the original .container had — keeps
       the cards inside the page's 1240px reading width on wide monitors. */
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
  }
  .podcast-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    width: auto;
    padding: 0;
  }
  .podcast-card-wrap {
    flex: none;
    width: auto;
  }
  .podcasts-pager { display: none; }
}

/* Width-based pager visibility: the pager is HIDDEN only at ≥1200px
   (where the @media (min-width: 1200px) block above also reverts the
   layout to the original auto-fit grid that fits all 4 cards in one
   row — no carousel UI needed). Below 1200px the cards start to scroll
   horizontally so the prev/next + dot pager becomes useful, even on
   desktop with a mouse. Previously this used `(hover: hover) and
   (pointer: fine)` which hid the pager on every laptop regardless of
   window width — per design feedback that was too aggressive. */
@media (max-width: 1199px) {
  .podcasts-pager { display: flex !important; }
}

/* Pager (arrows + dots) — matches the Publications pager. */
.podcasts-pager {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem;
  margin-top: 1.75rem;
}
.podcast-pager-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  transition: border-color .15s, color .15s;
}
.podcast-pager-arrow:hover { border-color: var(--pink); color: var(--pink); }
.podcast-dots {
  display: flex; align-items: center; gap: .45rem;
}
.podcast-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.podcast-dot:hover { background: rgba(255, 255, 255, 0.55); }
.podcast-dot.is-active { background: var(--pink); transform: scale(1.4); }
/* Thumbnail area at the top of each podcast card. Hosts either the
   looping muted YouTube preview iframe or the static thumbnail image. */
.podcast-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0b0b33;
}
.podcast-thumb-video {
  position: absolute;
  top: 50%; left: 50%;
  /* Slightly oversize the iframe so YouTube's branding/letterboxing
     spills out of the visible frame. */
  width: 130%; height: 130%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 0;
}
.podcast-thumb-poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
/* Once the iframe receives `src` (i.e. the section has scrolled into view),
   it paints over the poster as the live video. */
.podcast-thumb-video[src] { z-index: 2; }

.podcast-card {
  background: var(--bg-card); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit;
  /* Flex column so the card fills its scroll-snap wrapper top-to-bottom
     and stays visually flush with siblings of different content heights. */
  display: flex; flex-direction: column;
  width: 100%;
  transition: transform .15s ease;
}
.podcast-card:hover { transform: translateY(-3px); }
.podcast-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.podcast-card-body { padding: 1rem; }
.podcast-show {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 .25rem;
}
.podcast-title { font-family: var(--font-sans); font-weight: 600; margin: 0; font-size: .95rem; }

/* Publications --------------------------------------------------------- */

.publications {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  /* Same gradient as the "What Keith Does" / Testimonials sections —
     deep navy at the top fading up to purple at the bottom. */
  background: linear-gradient(180deg, #0b0b33 0%, #321b7e 100%);
  min-height: auto;
}
.publications-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: .5rem 0 2.5rem;
}

/* ─── Horizontal carousel ───────────────────────────────────────────
   Cards live in a snap-scroll track. Users can swipe / trackpad-scroll
   horizontally; arrows + dots below offer keyboard / desktop nav. */
.publications-carousel {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  /* Soft fade on the right hints "more →". */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 96%, transparent 100%);
}
.publications-carousel::-webkit-scrollbar { display: none; }
.publications-carousel { scrollbar-width: none; }

.publication-track {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  width: max-content;
  padding: .5rem clamp(1.5rem, 4vw, 4rem) 1rem;
  margin: 0;
  align-items: stretch;
}
.publication-card-wrap {
  /* Portrait-orientation cards to match the reference (narrower than the
     previous landscape version so title and "LEARN MORE" stack cleanly). */
  flex: 0 0 clamp(260px, 22vw, 320px);
  scroll-snap-align: start;
  display: flex;
}

.publication-card {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  /* Solid purple — matches the rest of the brand cards. */
  background: #321b7e;
  border-radius: 18px;
  padding: 2rem 1.75rem 2rem;
  border-left: 4px solid var(--pink);
  text-decoration: none;
  color: inherit;
  width: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.publication-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(242, 0, 129, 0.18);
}
.publication-year {
  color: var(--pink); font-weight: 700; font-size: 1rem;
  letter-spacing: .04em; margin: 0 0 1.25rem;
}
.publication-title {
  font-family: var(--font-sans);
  font-size: 1.2rem; font-weight: 700;
  margin: 0 0 1.5rem;
  line-height: 1.2; color: #fff;
  letter-spacing: -0.005em;
}
/* Thin pink rule under the title (matches reference). */
.publication-card::after { content: none; } /* reset any prior decorative ::after */
.publication-title + .publication-venue {
  position: relative;
  padding-top: 1.5rem;
}
.publication-title + .publication-venue::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: var(--pink);
  opacity: .85;
}
.publication-venue {
  font-size: .95rem; color: rgba(255, 255, 255, 0.78);
  margin: 0 0 1.75rem;
  flex-grow: 1;
}
/* LEARN MORE stacked, centered: pink label + filled circle with chevron
   underneath (matches reference). */
.publication-cta {
  color: var(--pink); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; text-decoration: none;
  margin-top: auto;
  display: inline-flex; flex-direction: column; align-items: center;
  gap: .5rem;
}
.publication-cta-arrow {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1rem; line-height: 1;
  letter-spacing: 0;
  font-weight: 600;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.publication-card:hover .publication-cta-arrow {
  background: #fff; color: var(--pink);
  box-shadow: 0 0 0 4px rgba(242, 0, 129, 0.2);
  transform: translateY(-1px);
}
.publication-card:hover .publication-cta-arrow {
  background: var(--pink); color: #fff; transform: translateX(2px);
}

/* Pager (arrows + dots) under the carousel. */
.publications-pager {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem;
  margin-top: 1.75rem;
}
.publication-pager-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  transition: border-color .15s, color .15s;
}
.publication-pager-arrow:hover { border-color: var(--pink); color: var(--pink); }
.publication-dots {
  display: flex; align-items: center; gap: .45rem;
}
.publication-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.publication-dot:hover { background: rgba(255, 255, 255, 0.55); }
.publication-dot.is-active { background: var(--pink); transform: scale(1.4); }

/* Beyond bio ----------------------------------------------------------- */

.beyond-bio {
  position: relative;
  /* Full-screen banner — image occupies the left half, text overlays
     the right half. */
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #0b0b33;
}
/* Full-bleed photo on the LEFT half of the section. Fades out to the
   right (gradient overlay) so the text on the right stays legible. */
.bb-bg {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 55%;
  z-index: 0;
}
.bb-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Anchor the crop to the LEFT edge of the photo so Keith (positioned
     on the left of the original) is always fully visible regardless of
     how tall/narrow the section becomes. */
  object-position: left center;
  display: block;
}
.bb-bg::after {
  content: '';
  position: absolute; inset: 0;
  /* Hard fade from transparent on the left → dark navy on the right edge
     so the photo blends seamlessly into the section's dark background. */
  background: linear-gradient(90deg,
    rgba(11, 11, 51, 0) 0%,
    rgba(11, 11, 51, 0) 55%,
    rgba(11, 11, 51, 0.7) 80%,
    rgba(11, 11, 51, 1) 100%);
}
.bb-text-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.bb-text {
  width: 55%;
  max-width: 640px;
  padding: 3rem 0 3rem 2rem;
}

/* All slides stack in a single grid cell. The cell sizes to the
   TALLEST slide's content (slides 9 and 11 are the longest), so the
   pager below sits at a fixed Y-position regardless of which slide
   is active — no more shifting up and down as the user pages through. */
.bb-facts {
  display: grid;
  grid-template-columns: 1fr;
}
.bb-fact {
  grid-column: 1;
  grid-row: 1;
  /* `visibility: hidden` keeps inactive slides participating in layout
     (so the grid cell can size to the tallest) without showing them or
     letting them catch pointer events. opacity adds a soft fade on the
     active slide. */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.bb-fact.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.bb-fact h3 {
  font-family: var(--font-sans);
  /* 40% larger than before (1.1rem). */
  font-size: 1.55rem;
  margin: 1.75rem 0 .65rem;
  color: var(--pink);
  font-weight: 600;
}
.bb-fact p {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
  /* 40% larger than before (1.25rem). */
  font-size: 1.75rem;
  margin: 0 0 1.5rem;
  color: #fff;
  line-height: 1.35;
}
.bb-teaser {
  color: var(--pink) !important;
  font-style: italic;
  font-weight: 600;
}

/* Pager: prev/next arrows + numbered dots in between. */
.bb-pager {
  display: flex; align-items: center; gap: .75rem;
  margin-top: 2.5rem;
}
.bb-pager-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.85);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.bb-pager-arrow:hover {
  border-color: var(--pink);
  color: var(--pink);
}
.bb-pager-numbers {
  /* Numbered dots are kept in the DOM for keyboard / screen-reader
     access, but visually replaced by the .bb-pager-counter chip — a
     long list of 13 dots was too noisy. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Compact counter chip between the prev/next arrows. */
.bb-pager-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 38px;
  padding: 0 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  gap: .25rem;
}
.bb-pager-counter .pink { color: var(--pink); }
.bb-pager-counter .sep { color: rgba(255, 255, 255, 0.4); }
.bb-pager-counter .total { color: rgba(255, 255, 255, 0.65); }
.bb-pager-dot {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.7);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .82rem;
  transition: background .15s, color .15s, border-color .15s;
}
.bb-pager-dot:hover {
  border-color: var(--pink);
  color: #fff;
}
.bb-pager-dot.is-active {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
}

@media (max-width: 900px) {
  .bb-bg { width: 100%; opacity: .35; }
  .bb-bg::after {
    background: linear-gradient(180deg, rgba(11,11,51,0) 0%, rgba(11,11,51,.85) 60%, rgba(11,11,51,1) 100%);
  }
  .bb-text { width: 100%; max-width: 100%; padding: 4rem 1.25rem; }
}

/* Final CTA ------------------------------------------------------------ */

.final-cta {
  /* Very generous top padding so there's a real gap between this
     section and Beyond the Bio above — also clears room for the
     clouds that float above the photo. */
  padding: clamp(12rem, 20vw, 18rem) 0 clamp(4rem, 8vw, 6rem);
  /* Same gradient as What Keith Does — deep navy top fading up to
     purple at the bottom. The has-bg variant (when a background image
     is uploaded) overrides this with the inline-style url(). */
  background: linear-gradient(180deg, #0b0b33 0%, #321b7e 100%);
  position: relative;
  overflow: hidden;
}
.cta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: center;
}
.cta-body { color: var(--ink-dim); max-width: 36rem; margin: 1.5rem 0; }
.cta-lead { font-weight: 600; margin: 1rem 0; }
.cta-form input, .cta-form textarea {
  width: 100%; padding: .85rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #fff; font-family: inherit; font-size: .95rem;
  margin-bottom: .75rem;
}
.cta-form textarea { border-radius: var(--radius-sm); resize: vertical; min-height: 80px; }
.cta-form input:focus, .cta-form textarea:focus { outline: none; border-color: var(--pink); }
.cta-form input::placeholder, .cta-form textarea::placeholder { color: var(--ink-muted); }
/* Honeypot field — invisible to humans, visible to spam bots that fill
   every input they find. We use absolute positioning + opacity 0 (not
   display: none) because some bots specifically skip display:none fields. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.form-status { font-size: .9rem; margin: .75rem 0 0; min-height: 1.2em; }
.form-status.success { color: var(--pink); }
.form-status.error { color: #ff6464; }
/* Section photo + floating cloud PNGs (no mouse interaction — clouds
   only breathe via the cta-cloud-float keyframe animation). */
.cta-photo {
  position: relative;
  isolation: isolate; /* contain stacking context for absolute clouds */
}
.cta-photo-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 1;
}
/* Light zoom on the photo so Keith + the pink frame stay fully visible
   (feet, head, full frame) — matches the reference proportions. No
   hover transition — the zoom is constant. */
.cta-photo-img {
  width: 100%;
  display: block;
  transform: scale(1.25);
  transform-origin: center center;
}

/* Clouds: absolute-positioned PNGs that float around the photo. Each
   has a slow autonomous breath animation (translateY + rotate) and
   responds to mouse-parallax via the CSS custom props set in JS. */
.cta-cloud {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
  /* Slow breathing animation only — no JS-driven mouse parallax. */
  animation: cta-cloud-float 9s ease-in-out infinite;
}
/* Three clouds straddling the TOP EDGE of the photo (half above the
   frame, half kissing the upper border) — matches reference exactly:
   two big clouds anchoring the corners, one smaller cloud floating
   higher between them. */
.cta-cloud-1 {
  top: -16%;
  /* Pushed further out toward the LEFT edge of the photo. */
  left: -28%;
  width: 67%;
  animation-duration: 11s;
  animation-delay: 0s;
}
.cta-cloud-2 {
  /* Horizontally centered + raised back up to the upper portion of the
     photo. 15% larger than before (50% → 58%); left adjusts to keep it
     centered (left + width = (100 + width)/2). */
  top: 8%;
  left: 21%;
  right: auto;
  width: 58%;
  animation-duration: 13s;
  animation-delay: -3s;
}
.cta-cloud-3 {
  /* Top-right corner, lifted higher above the photo edge. */
  top: -25%;
  right: -15%;
  width: 65%;
  opacity: .85;
  animation-duration: 10s;
  animation-delay: -1.5s;
}
@keyframes cta-cloud-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(8px, -10px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-cloud { animation: none; }
}

/* Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
}
.footer-contact { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-contact li, .footer-legal li { color: var(--ink-muted); font-size: .85rem; }
.footer-contact a { color: var(--pink); text-decoration: none; }
.footer-copyright { color: var(--ink-muted); font-size: .8rem; margin: 0; }
.footer-legal { display: flex; gap: 1rem; }
.footer-legal a {
  font-size: .75rem; letter-spacing: .1em;
  color: var(--ink-muted); text-decoration: none;
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .hero-grid, .about-grid-3, .services-grid, .services-3col, .keynote-panel.is-active,
  .yt-grid, .cta-grid, .book-grid {
    grid-template-columns: 1fr;
  }
  .books-hero-text { max-width: 100%; }
  .keynote-stage { padding-right: 0; }
  .keynote-pager {
    position: static; transform: none;
    flex-direction: row; justify-content: center;
    margin-top: 1rem;
  }
  .nav-toggle { display: inline-block; }
  /* Mobile: less left-padding needed since nav collapses to a hamburger */
  .header-inner {
    padding: 1rem 1rem 1rem clamp(4rem, 18vw, 6rem);
  }
  .primary-nav ul {
    display: none;
    position: absolute; right: 1rem; top: 100%;
    background: var(--bg-deep); padding: 1rem; flex-direction: column;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
  }
  .primary-nav.is-open ul { display: flex; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .services-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .services-cards { grid-template-columns: 1fr; }
  /* On small screens shrink the marquee cards so a couple fit at once
     instead of one giant card hogging the viewport. */
  .testimonial { flex-basis: 78vw; }
}

/* ═══════════════════════════════════════════════════════════════════
   ████  COMPREHENSIVE MOBILE STYLESHEET  ████
   Section-by-section adaptations for phones. The breakpoints below
   layer on top of the per-section rules earlier in the file. Order:
   720px (general phones) → 480px (small phones) → 380px (SE-class).
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tablet & smaller (≤ 1024px) — partial collapse ──────────────── */
@media (max-width: 1024px) {
  /* Override the global 100vh on sections that don't actually need a
     full-screen presence — keeps the page from being inflated with empty
     scroll space on shorter viewports. */
  main > section { min-height: auto; }
  /* Sections that DO benefit from a tall hero stay tall (capped). */
  .hero, .vision, .about, .books-hero,
  .watch-listen-read, .beyond-bio {
    min-height: clamp(560px, 92vh, 900px);
  }
}

/* ─── Phones (≤ 720px) — primary mobile adaptations ───────────────── */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; }

  /* Container tightens so content reaches closer to the edges. */
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* ── Global multi-column grids stack vertically ── */
  .hero-grid,
  .about-grid-3,
  .services-3col,
  .wlr-grid,
  .yt-grid,
  .bb-grid,
  .cta-grid,
  .book-grid,
  .keynote-panel.is-active,
  .keynote-detail-columns,
  .vision-inner,
  .podcasts-head {
    grid-template-columns: 1fr !important;
    display: grid;
  }
  /* Framework detail slides: only the ACTIVE one is displayed on
     mobile. The inactive slides stay `display: none` (from base CSS)
     so tapping a card opens ONLY the selected slide. */
  .framework-detail-slide.is-active {
    grid-template-columns: 1fr !important;
    display: grid;
  }
  .framework-detail-slide:not(.is-active) { display: none; }

  /* ── Typography: trim section headings across the site ── */
  .section-heading { font-size: clamp(1.1rem, 4vw, 1.4rem); }
  .section-heading .pink-italic { font-size: clamp(1.8rem, 8vw, 2.8rem); }

  /* ════════════════ HEADER (Evervault-style unified pill) ════════════════
     One continuous pill containing: brand (left) + CTA + hamburger
     (right). The inline nav list (.primary-nav ul) is hidden in favour
     of the full-screen mobile menu overlay below. */
  .site-header { padding: .75rem 1rem; }
  .header-inner {
    /* COLLAPSED at the top of the page — pill shows ONLY the hamburger
       button (right-aligned). When the user scrolls past the hero, the
       pill expands LEFTWARD to full width, revealing brand text + mail
       icon. Slow, eased transition for a silky, non-abrupt feel. */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .35rem .5rem;
    gap: .6rem;
    max-width: 3.5rem;
    margin-left: auto;
    overflow: hidden;
    /* Smooth, gradual easing — 1.1s with a soft ease-out-cubic curve. */
    transition:
      max-width 1.1s cubic-bezier(.33, 1, .68, 1),
      padding .9s cubic-bezier(.33, 1, .68, 1);
  }
  .site-header.is-scrolled .header-inner {
    max-width: 100%;
    padding: .55rem .65rem .55rem 1.15rem;
    justify-content: space-between;
  }
  /* Mobile: brand TEXT lives inside the pill (left side). HIDDEN at the
     top of the page — appears only after the user scrolls past the
     hero. Typography is Inter Medium. */
  .site-brand {
    display: inline-flex !important;
    align-items: center;
    margin-right: auto;
    transform: none !important;
    letter-spacing: .12em !important;
    opacity: 0;
    pointer-events: none;
    /* Slower fade-in with a delay so the text appears AFTER the pill
       has expanded enough to reveal it — feels less abrupt. */
    transition: opacity .7s ease .35s;
    text-decoration: none !important;
  }
  .site-brand-text {
    font-size: .72rem;
    display: inline;
    font-family: 'Inter', var(--font-sans), sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #fff;
  }
  .site-brand img { display: none; }
  .site-header.is-scrolled .site-brand {
    opacity: 1;
    pointer-events: auto;
  }

  /* CTA mail icon — hidden initially (pill is collapsed). Appears with
     the pill expansion on scroll. */
  .header-cta {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(.7) !important;
    /* Slower, delayed appearance so the mail icon eases in after the
       pill expansion — keeps the choreography smooth. */
    transition:
      opacity .7s ease .45s,
      transform .7s cubic-bezier(.33, 1, .68, 1) .45s !important;
  }
  .site-header.is-scrolled .header-cta {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
  }

  /* Floating logo image — always visible at top-left of the page. */
  .floating-brand-mark {
    display: block !important;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 150;
    pointer-events: auto;
    transition:
      opacity .4s ease,
      transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  .floating-brand-mark img {
    display: block;
    /* 15% smaller than 42px → 36px */
    height: 36px;
    width: auto;
  }
  /* On scroll past hero — floating logo fades + slides up. */
  body.is-scrolled .floating-brand-mark {
    opacity: 0;
    transform: translateY(-12px) scale(.85);
    pointer-events: none;
  }

  /* Desktop inline nav list is hidden on mobile — the overlay takes over. */
  .primary-nav { display: contents; }
  .primary-nav ul#nav-list { display: none !important; }

  /* CTA — icon-only round button on mobile. Pink fill so the mail
     symbol pops against the dark pill. */
  .header-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    max-width: none !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 50% !important;
    background: var(--pink) !important;
    color: #fff !important;
    border: none !important;
  }
  .header-cta:hover,
  .header-cta:focus-visible {
    background: #ff1a93 !important;
  }
  .header-cta-icon { width: 18px; height: 18px; display: block; }
  /* Text label hidden on mobile — the icon (and aria-label) communicate
     the action. */
  .header-cta-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Hamburger button — sits at the right end of the pill. Tight square
     shape so it nests cleanly beside the CTA. */
  .nav-toggle {
    display: inline-flex;
    background: transparent;
    border: none;
    width: 40px; height: 40px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .nav-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  /* ════════════════ HERO — full-bleed banner with caption overlay ═══
     Photo dominates the full viewport; the caption is absolutely
     positioned at the bottom OF the photo so it visibly overlays the
     model's torso area. Top padding reserves the height of the floating
     pill so the photo never sits underneath Keith's head. */
  .hero {
    padding: 0;
    min-height: 100vh;
    height: 100vh;
    position: relative;
    overflow: hidden;
    /* Purple gradient continuing from the photo's own background — so
       the area above the photo (behind the floating pill) blends
       seamlessly instead of becoming a dark band. */
    background: linear-gradient(180deg, #321b7e 0%, #2a1564 100%);
  }
  .hero .container.hero-grid {
    /* The grid container becomes a full-bleed positioning context — no
       padding, no max-width, the photo + caption layer freely inside. */
    display: block;
    padding: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    height: 100%;
    position: relative;
  }
  .hero-photo {
    position: absolute;
    /* Photo sits closer to the pill — tight buffer just below the
       floating header. */
    top: 7rem;
    right: 0; bottom: 0; left: 0;
    margin: 0;
    aspect-ratio: auto;
    max-height: none;
    overflow: hidden;
  }
  .hero-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Full-bleed image: fills the container EDGE-TO-EDGE (no visible
       side cuts). `center top` anchors the top of the image so the
       head is never cropped. */
    object-position: center top;
    max-height: none;
    border-radius: 0;
    display: block;
  }
  /* Gradient overlay covering the lower portion of the photo — makes
     the caption text readable while still letting Keith's face show
     through the upper half. */
  .hero-photo-gradient {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 65%;
    background: linear-gradient(180deg,
      rgba(11, 11, 51, 0) 0%,
      rgba(11, 11, 51, .35) 40%,
      rgba(11, 11, 51, .85) 80%,
      rgba(11, 11, 51, .95) 100%);
    pointer-events: none;
  }
  .hero-copy {
    /* Caption pinned to the bottom of the hero, centered on top of
       the photo. */
    position: absolute;
    left: 0; right: 0; bottom: 2rem;
    padding: 0 1.5rem;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-headline {
    font-size: clamp(2.4rem, 12vw, 3.6rem);
    line-height: .95;
    margin: 0 0 1rem;
    text-align: center;
  }
  .hero-headline .white,
  .hero-headline .pink-italic {
    display: block;
  }
  .hero-subhead {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    margin: .75rem 0 .5rem;
    text-align: center;
  }
  .hero-body {
    font-size: .95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    max-width: 32ch;
    margin: 0 0 1.5rem;
    text-align: center;
  }
  .hero-cta {
    display: inline-block;
    min-height: 44px;
    padding: .85rem 1.75rem;
    align-self: center;
  }

  /* ════════════════ VISION (Explore the vision of Keith) ════════════════
     Mobile composition: BIG title at the top, Keith cutout dominating
     the middle of the screen, video card pulled up so it overlaps the
     lower portion of the cutout (model sits BEHIND the card). */
  .vision {
    padding: 6rem 0 3rem;
    min-height: 100vh;
    align-items: stretch;
    position: relative;
  }
  .vision .eyebrow-large { font-size: 1.15rem; }
  .vision .display-name {
    /* Bigger headline so "Keith" dominates the upper portion. */
    font-size: clamp(4.5rem, 22vw, 7rem);
    line-height: .95;
  }
  .vision-inner {
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
  }
  /* Keith cutout: in-flow but BEHIND the video card via z-index. The
     model is large and centered; the card below will overlap its lower
     half via negative margin. */
  .vision-model {
    position: relative;
    bottom: auto; left: auto;
    transform: none !important;
    height: auto;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    pointer-events: auto;
    z-index: 1;
  }
  .vision-model-inner { height: 55vh; }
  .vision-model-inner img {
    height: 100%; width: auto;
    max-height: 65vh;
  }
  /* Keynote-reel card: pulled UP via negative margin so it visually
     overlaps the lower portion of Keith — the model appears to stand
     behind the card. */
  .vision-card {
    position: relative;
    bottom: auto; right: auto;
    width: calc(100% - 2.5rem);
    max-width: 100%;
    margin: -8rem auto 0;
    aspect-ratio: 16 / 9;
    transform: none !important;
    z-index: 2;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  }
  .vision-card-meta { font-size: .75rem; }
  .vision-card-title { font-size: 1rem; }
  .vision-watch-btn { padding: .45rem .9rem; font-size: .8rem; }

  /* ════════════════ TRUSTED BY (logos) ════════════════ */
  .trusted .section-heading { font-size: clamp(1.4rem, 6vw, 2rem); }
  .logo-grid {
    /* !important needed to beat the `repeat(3, ...) !important` rule
       in the 1100px block above — without it, mobile inherited 3 cols. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem .75rem !important;
  }
  .logo-grid li { min-height: 115px !important; justify-content: center; }
  .logo-grid img { max-height: 88px !important; max-width: 90% !important; }

  /* ════════════════ ABOUT — hero-style banner ════════════════
     Same layout pattern as the Hero: photo fills the upper portion of
     the section, gradient fades the bottom into navy, text content
     overlays only the LOWER half of the photo (sits at the base, not
     over Keith's face). */
  .about {
    position: relative;
    min-height: 100vh;
    padding: 7rem 0 3rem;
    overflow: hidden;
    /* Locked to solid #0b0b33 from 45% onward (right where the photo
       bottom sits) so the photo's ::after gradient endpoint blends
       seamlessly into the section bg below. Previously the gradient
       drifted from #321b7e (purple) → #1a0d4e (bright navy) across the
       full section height, and the photo bottom landed on a mid-purple
       slice that visibly clashed with the photo's navy gradient endpoint
       — creating the "hard line above the stats" the user reported. */
    background: linear-gradient(180deg,
      #321b7e 0%,
      #0b0b33 45%,
      #0b0b33 100%);
  }
  /* Bigger title pair — "About" + "Keith" pop above the photo. */
  .about .eyebrow { font-size: clamp(2.2rem, 7vw, 3rem); }
  .about .display-name { font-size: clamp(4.5rem, 20vw, 6.5rem); line-height: .95; }
  .about-headline {
    font-size: clamp(1.4rem, 5.5vw, 2rem);
    text-align: center;
    /* Push headline + body + button DOWN ~10vh so the block sits lower
     in the section, separated from the stats above. */
    margin-top: 10vh;
  }
  .about-body {
    font-size: .95rem;
    /* Centered on mobile per design. */
    text-align: center;
    /* Flujo fluido — colapsa \n\n del CMS, sin paragraph breaks visuales. */
    white-space: normal !important;
    line-height: 1.45 !important;
  }
  /* Pull-quote CENTERED on mobile — pink lead, white rest AND cite all
     align centered as a tight block. */
  .about .pull-quote { text-align: center !important; }
  .about .pull-quote cite { display: block; text-align: center !important; margin-left: auto; margin-right: auto; }
  /* about-copy is a centered flex-column on mobile — body text, button
     and stats all align to the page center. */
  .about-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* HIGH-SPECIFICITY mobile resets — match the desktop selector
     `.about-grid-3 > .about-copy, .about .about-copy` so the !important
     translateX is properly nullified on mobile. */
  .about-grid-3 > .about-copy,
  .about .about-copy {
    transform: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    z-index: auto !important;
    align-self: auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  .about-grid-3 > .about-quote,
  .about .about-quote {
    transform: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    z-index: auto !important;
    align-self: auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  /* Reset desktop grid layout — mobile uses a simple stacked layout
     with the photo positioned absolutely above and copy/quote in flow
     below. CRITICAL: position must be STATIC so the photo's absolute
     positioning escalates to the .about section (not this container,
     which is pushed down by margin-top). */
  .about-grid-3 {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    position: static !important;
  }
  /* Button centered on page — override desktop's `margin-right: auto`
     which was pushing it to the LEFT. */
  .about-copy .btn {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* About title block pinned to the TOP CENTER of the section, well
     below the floating header pill so it never gets obscured. */
  .about-title-top {
    position: absolute;
    top: 7rem;
    left: 0; right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
  }

  /* Pull-quote overlay — positioned over the LOWER portion of the
     photo (the area covered by the dark gradient). Aligned with the
     new photo position (top 16rem + ~41vh into the photo height). */
  /* Pull-quote overlay: posicionado ABSOLUTAMENTE sobre el TORSO de
     Keith en la foto. La foto está en top: 16rem con height: 60.98vh,
     así que el torso queda alrededor del 30vh de la foto desde su top. */
  .about-quote-overlay {
    position: absolute !important;
    top: calc(16rem + 39vh) !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    z-index: 3 !important;
    padding: 1rem 1.5rem !important;
    text-align: center !important;
    max-width: min(420px, calc(100vw - 2rem)) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    width: auto !important;
    display: block !important;
  }
  .about-quote-overlay .pull-quote,
  .about-quote-overlay .about-quote {
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    display: block !important;
  }
  .about-quote-overlay .pull-quote-lead,
  .about-quote-overlay .pull-quote-rest {
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  .about-quote-overlay cite {
    display: block !important;
    text-align: center !important;
    margin: 1rem auto 0 !important;
  }
  /* Body content (.about-copy) — también centrado con padding lateral
     simétrico para que no se vea pegado a la izquierda. */
  .about-copy {
    padding: 0 1.5rem !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .about-copy > *,
  .about-copy .about-headline,
  .about-copy .about-body {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
  .about-title-top .eyebrow {
    color: #fff;
    margin: 0;
    text-align: center;
  }
  .about-title-top .display-name {
    margin: .25rem 0 0;
    text-align: center;
  }
  /* Photo positioned IMMEDIATELY below the title block. Title sits at
     top: 7rem and is ~8.5rem tall (eyebrow + display-name "Keith"),
     so we anchor the photo at top: 16rem with minimal gap.
     LEFT y RIGHT SIMÉTRICOS para centrado perfecto sin inclinación. */
  .about-photo {
    position: absolute !important;
    top: 16rem !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Another 10% larger: 55.44vh × 1.1 = 60.98vh */
    height: 60.98vh !important;
    width: 100% !important;
    margin: 0 !important;
    /* Centrado en la página (sin desplazamiento horizontal). */
    transform: none !important;
    max-height: none !important;
    opacity: 1;
    z-index: 1 !important;
    pointer-events: none;
    overflow: hidden;
  }
  .about-photo img {
    width: 100% !important;
    height: 100% !important;
    /* `contain` shows the FULL source image — no side cropping, no
       part of Keith ever gets cut off. */
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
    display: block;
  }
  /* Gradient at the BASE of the photo: photo → transparent in the
     upper portion (Keith's face visible) → darkens to deep navy at the
     bottom where text overlays. Final color MUST match the .about
     section background at that y-coordinate (which has faded toward
     #0b0b33 — the section's gradient endpoint). Previously this gradient
     ended at #1a0d4e (a brighter navy), creating a visible hard line
     where the photo container's bottom edge met the darker section bg
     beneath it. */
  .about-photo::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background: linear-gradient(180deg,
      rgba(11, 11, 51, 0) 0%,
      rgba(11, 11, 51, .35) 40%,
      rgba(11, 11, 51, .9) 80%,
      #0b0b33 100%);
    pointer-events: none;
  }
  /* On mobile the .about section uses NORMAL block stacking — reset
     the desktop flex justify-content: space-between so the stats don't
     get flung to the bottom of the 100vh section. */
  .about {
    display: block !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }
  /* Text content sits BELOW the photo (not overlapping). Computed from
     photo's top offset (16rem) + photo height (60.98vh) + small buffer
     (2rem). The section's own padding-top (~6rem) is already part of
     the natural flow position, so the net offset = 16 + 60.98vh + 2
     - 6 = ~12rem + 60.98vh. */
  .about > .container.about-grid-3 {
    position: relative;
    /* z-index must beat .about-photo (z-index:1) so the stats grid that
       sits at the TOP of this container (re-parented by initAboutMobileOrder)
       paints in FRONT of the photo's bottom edge instead of being clipped
       behind it. */
    z-index: 4;
    margin-top: calc(60.98vh + 12rem);
    padding: 0 1.5rem;
  }
  .about > .container.stats {
    position: relative;
    z-index: 4;
  }
  .about > .container.stats {
    /* RESET every desktop-only positioning property so the stats sit
       in normal document flow on mobile (NOT overlapped on the photo). */
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    max-width: none;
    width: auto;
    z-index: 1;
    margin-top: 2rem;
    padding: 0 1.5rem;
    pointer-events: auto;
  }
  /* Stats: 3 equal columns in a single horizontal row — all three
     numbers (25+, 100+, 50+) sit on the same line on mobile. Each
     column shrinks its number/label so everything fits a 360-430px
     viewport without wrapping. */
  .about .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: start;
    gap: .5rem;
    width: 100%;
    /* Stats row pushed down ~5% from its previous position (was -3vh,
       now +2vh) so it sits further from the photo and closer to the
       headline below. */
    margin: 2vh 0 .5rem;
    padding: 0;
    /* CRITICAL: reset the desktop's negative `top` that was pushing
       stats up out of view on mobile. */
    position: static !important;
    top: auto !important;
    transform: none !important;
    max-width: none !important;
  }
  .about .stats .stat {
    width: 100%;
    text-align: center;
    /* Reserve enough vertical room for the number's full glyph height —
       previously the row was sized by `line-height: 1` on .stat-value
       which clipped the top of digits when combined with the parent's
       implicit row-height limit. */
    overflow: visible;
    padding-top: .25rem;
  }
  .about .stats .stat-value {
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    /* Bumped from 1 → 1.25 so digit ascenders (top of "2", "5", "1") are
       no longer clipped by the line box. */
    line-height: 1.25;
    /* Stops the digit baseline from sitting inside a too-tight inline box
       on browsers that round line-height down. */
    padding-top: .15em;
  }
  .about .stats .stat-label {
    font-size: .65rem;
    letter-spacing: .04em;
    line-height: 1.15;
    margin-top: .35rem;
    display: block;
  }
  /* Belt-and-braces: defeat any ancestor `overflow: hidden` that could be
     clipping the top of the digits when stats are re-parented into the
     about-copy column by initAboutMobileOrder(). */
  .about-copy .stats,
  .about-copy .stats .stat,
  .about .stats,
  .about .stats .stat {
    overflow: visible !important;
  }
  /* Quote sits higher up via a more aggressive negative margin. */
  .about-copy .about-quote { margin: -3rem 0 1.5rem; }
  /* Pink lead — tamaño reducido para que las líneas no se desborden
     en mobile vertical. */
  .about .pull-quote-lead {
    font-size: clamp(.9rem, 4vw, 1.25rem) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  /* White rest — smaller and properly wrapped (no awkward "you" alone
     on its line). `white-space: normal` lets the browser wrap naturally
     inside the column width instead of honouring \n from the CMS. */
  .about .pull-quote-rest {
    font-size: .8rem !important;
    line-height: 1.4 !important;
    font-weight: 400;
    white-space: normal !important;
    display: block !important;
    margin-top: .5rem !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }
  .about .pull-quote p {
    font-size: 1rem;
    line-height: 1.45;
    white-space: normal;
    text-wrap: balance;
  }

  /* ════════════════ WHAT KEITH DOES (services) ════════════════ */
  .services .container { max-width: 100%; padding: 0 1.25rem; }
  .services-text { text-align: center; }
  .services .display-name { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  /* Photo: keep its natural aspect ratio (no stretch) by switching to
     contain + width:auto. The image is then sized by max-height. */
  .services-photo { display: flex; justify-content: center; align-items: center; }
  .services-photo img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 55vh !important;
    object-fit: contain !important;
  }
  .services-cards {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    /* Reset desktop's capped width + right-alignment on mobile so the
       cards span the full content area. */
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .service-card {
    aspect-ratio: 1 / 1;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .service-card .service-number { font-size: 2rem; margin: 0 0 .5rem; }
  .service-card .service-title {
    font-size: .95rem;
    line-height: 1.2;
    margin: 0;
    text-align: center;
    width: 100%;
    /* Reset desktop's flex-fill behaviour so the title is a normal block
       on mobile, sitting between the number and the centered card body. */
    flex: 0 0 auto;
    display: block;
    padding: 0;
  }
  /* The detail panel resets to full column width and centres its
     content predictably on mobile. */
  .service-detail {
    width: 100% !important;
    margin-left: 0 !important;
    aspect-ratio: auto;
    text-align: center;
    padding: 1.5rem 1.25rem;
  }
  /* Symmetric padding so the centered text is actually visually centred
     in the card — asymmetric padding-right (to clear the X button) was
     pushing everything left. The X button floats on top via absolute
     positioning and doesn't need its own reserved column. */
  .service-detail-number,
  .service-detail-title,
  .service-detail-body { text-align: center; padding-left: 0; padding-right: 0; }

  /* ════════════════ KEYNOTE SPEAKING ════════════════ */
  /* Bigger section title. */
  .keynotes .section-heading { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
  .keynotes .section-heading .pink-italic { font-size: clamp(2.4rem, 10vw, 3.6rem); }

  /* Tabs are hidden on mobile — visitors navigate purely with the
     big prev/next arrows + swipe gestures on the card. */
  .keynote-tabs { display: none; }

  /* Active card panel: single-column layout (text stacks on top of the
     photo), photo no longer pushes the text into a narrow gutter. */
  .keynote-panel.is-active {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding: 1.75rem 1.25rem !important;
    min-height: auto;
    overflow: hidden !important;   /* safety net so nothing inside the card can overflow the viewport */
    box-sizing: border-box !important;
  }
  /* Stage wrapper must not extend past the viewport either. */
  .keynote-stage { padding-right: 0 !important; max-width: 100% !important; overflow: hidden !important; }
  .keynotes .container { max-width: 100% !important; }
  .keynote-panel.is-active .keynote-card-view {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  /* Background image (the per-talk photo) anchored to the RIGHT side
     of the photo. A darker navy tint sits over the image for STRONG
     contrast with the white text on top. */
  .keynote-panel.has-bg {
    background-blend-mode: multiply;
    /* Reduced from 0.8 → 0.55 so the photo behind shows through more. */
    background-color: rgba(11, 11, 51, 0.55);
    background-position: right center !important;
    position: relative;
  }
  /* Lighter translucent overlay — photo of Keith stays clearly
     visible while still keeping text readable. */
  .keynote-panel.has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(26, 13, 78, 0.2) 0%,
      rgba(11, 11, 51, 0.35) 55%,
      rgba(11, 11, 51, 0.55) 100%);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
  }
  .keynote-panel.has-bg > * {
    position: relative;
    z-index: 1;
  }
  /* Text takes the full width and is centered. */
  .keynote-text {
    width: 100%;
    text-align: center;
  }
  .keynote-text h3 {
    font-size: clamp(1.7rem, 7.5vw, 2.4rem) !important;
    line-height: 1.1;
    text-align: center;
  }
  .keynote-text > p { text-align: center; }
  .keynote-ideal-label { text-align: center; }
  .keynote-ideal {
    text-align: left;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }
  /* CTA centered. */
  .keynote-text .btn { align-self: center; margin: .5rem auto 0; }
  /* Photo: smaller, contained, centered below the text. */
  .keynote-photo {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .keynote-photo img {
    max-height: 220px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
  }

  /* Mobile pager: prev/next arrows become BIG touch-friendly buttons
     on either side, the small dots are hidden (their tap target is too
     small for a finger). A "X of Y" counter sits between the arrows. */
  .keynote-pager {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
    gap: 1rem;
  }
  .keynote-pager-arrow {
    width: 52px;
    height: 52px;
    border-width: 2px;
    flex-shrink: 0;
  }
  .keynote-pager-arrow svg { width: 20px; height: 20px; }
  /* Dots ARE visible on mobile (per user feedback — the X/Y counter alone
     wasn't reading as a "where am I in the carousel" indicator). Bumped
     to 14px tap targets with a bit more breathing room. */
  .keynote-pager .keynote-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 .25rem;
  }
  /* The dots cluster sits AFTER the counter and BEFORE the next-arrow so
     the row reads: [‹] [1 / 4] [• • ● •] [›] */
  .keynote-pager { gap: .75rem; flex-wrap: wrap; }
  /* Counter chip: "1 / 4" — JS keeps it in sync with the active dot. */
  .keynote-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 36px;
    padding: 0 .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: var(--font-sans);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
  }
  .keynote-counter .pink { color: var(--pink); }

  /* Swipe hint removed per design — pager arrows are clear enough. */
  .keynote-swipe-hint { display: none !important; }

  /* Keynote expanded detail view */
  .keynote-detail-view {
    padding: 3rem 0 0; /* reserve room at the top for the BACK button */
  }
  .keynote-detail-title { font-size: clamp(1.6rem, 7vw, 2.2rem); padding-right: 0; text-align: center; }
  .keynote-detail-tags { padding-right: 0; font-size: .8rem; text-align: center; }
  .keynote-detail-body { text-align: center; }
  .keynote-detail-columns { grid-template-columns: 1fr; gap: 1.5rem; }
  .keynote-detail-col-label { text-align: center; }
  /* BACK floats above the tags row — extra top padding on the detail
     view (above) gives it a dedicated lane so nothing overlaps. */
  .keynote-back {
    top: .5rem; right: .5rem;
    padding: .4rem .9rem;
    font-size: .7rem;
    z-index: 5;
  }

  /* ════════════════ TESTIMONIALS ════════════════ */
  .testimonials .section-heading .pink-italic { font-size: clamp(2rem, 9vw, 2.8rem); }
  .testimonial {
    flex-basis: 82vw;
    min-height: auto;
    /* Top padding leaves room for the avatar's negative-margin overhang
       (matches the desktop card shape — photo halfway above the card
       top edge). Bottom padding gives the cite room to breathe. */
    padding: 5.5rem 1.5rem 2rem;
    justify-content: flex-start;
    /* HORIZONTAL centre on snap — without this the carousel snaps each
       card to the LEFT edge of the viewport (scroll-snap-align: start
       from the desktop rule), leaving a visible empty band on the right
       of each card. Centred snap reads as a clean modal-like presentation. */
    scroll-snap-align: center !important;
  }
  /* Side padding equal to half the empty space (= (100vw - 82vw) / 2 = 9vw)
     so the FIRST and LAST cards in the track can also snap to centre
     instead of being pinned to the original 1.5–4rem gutter. */
  .testimonial-marquee {
    scroll-padding: 0 9vw;
  }
  .testimonial-track {
    padding-left: 9vw !important;
    padding-right: 9vw !important;
  }
  /* Avatar overhangs the top of the card — matches the desktop shape.
     Desktop uses photo 190px + margin-top -11rem (≈ -176px) → roughly
     half the circle floats above the card edge. Same proportional
     overhang on mobile: photo 130px → margin-top -7.5rem (-120px), so
     the avatar's vertical centre sits right on the card's top edge. */
  .testimonial-photo {
    width: 130px; height: 130px;
    margin-top: -7.5rem;
  }
  .testimonial blockquote { font-size: 1rem; }
  .testimonial-name { font-size: 1.05rem; }
  .testimonial-title { font-size: .85rem; }

  /* ════════════════ BOOKS HERO ════════════════ */
  .books-hero { min-height: clamp(420px, 65vh, 600px); }
  /* 20% larger headline on mobile */
  .books-hero-headline { font-size: clamp(1.92rem, 8.4vw, 2.88rem); }
  /* 20% larger eyebrow "The Books" on mobile */
  .books-hero .eyebrow { font-size: clamp(1.1rem, 4.5vw, 1.7rem); }
  .books-hero-text { padding: 0 1.5rem; max-width: 100%; }
  .books-hero-bg::after {
    /* Stronger overlay on mobile so text stays readable above the photo. */
    background: linear-gradient(180deg,
      rgba(11, 11, 51, 0.55) 0%,
      rgba(11, 11, 51, 0.85) 70%,
      rgba(11, 11, 51, 1) 100%);
  }

  /* ════════════════ BOOK SECTIONS (per-book) ════════════════ */
  /* Halved per design — tighter gap into the next section on mobile too. */
  .book { padding: 2.5rem 0; }
  .book-grid {
    /* Larger gap between the cover image and the text block. */
    gap: 3rem;
    /* Mobile order: book IMAGE first, then text below — for BOTH books
       regardless of left/right desktop layout. */
    display: flex;
    flex-direction: column;
  }
  .book-cover {
    max-width: 240px;
    margin: 0 auto 1rem;
    order: 1; /* image first */
  }
  .book-copy {
    order: 2; /* text below */
    padding: 0 .25rem;
  }
  .book-cover .award-badge { width: 75px; bottom: -16px; right: -16px; }
  /* Generous spacing inside the copy block too — paragraphs, title and
     buttons each get more room to breathe. */
  .book-title { margin: 0 0 1.25rem; }
  .book-tagline { margin: 0 0 1.5rem; }
  .book-description p { margin: 0 0 1.25rem; }
  .book-ctas { margin-top: 2rem; gap: 1rem; }
  .book-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .book-tagline { font-size: 1rem; }
  .book-description p { font-size: .92rem; }
  .book-ctas .btn { flex: 1 1 auto; text-align: center; }

  /* ════════════════ FRAMEWORKS ════════════════ */
  .frameworks .section-heading .pink-italic { font-size: clamp(2rem, 8vw, 2.6rem); }
  /* Single column on mobile — each card gets full visual presence
     (matches the Evervault reference layout: big icon on top, rich
     text content below). */
  .framework-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .framework-card {
    padding: 0;
    /* All text inside the card center-aligned. */
    text-align: center;
    /* Solid purple background per design. */
    background: #321b7e;
    border: 1px solid rgba(242, 0, 129, .25);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease,
                box-shadow .35s ease;
  }
  .framework-card:hover,
  .framework-card:focus-visible,
  .framework-card:active {
    transform: translateY(-4px);
    border-color: rgba(242, 0, 129, .65);
    box-shadow: 0 14px 38px rgba(242, 0, 129, .22);
  }
  /* Top half — icon area. Background gradient REMOVED per design
     feedback: the previous radial-glow + linear-gradient backdrop was
     rendering as a visible "inner box" inside the card, especially on
     dark mobile screens where the gradient's subtle edge formed a
     rectangle border. Icon now sits directly on the card's purple
     background — no second container, no inner border artefact. */
  .framework-icon {
    width: 100%;
    height: clamp(180px, 32vh, 240px);
    margin: 0;
    padding: 2.5rem 1.5rem;
    display: grid;
    place-items: center;
    background: transparent;
    border-bottom: none;
    filter: none;
    /* Subtle floating animation — the icon breathes softly. */
    animation: framework-icon-float 6s ease-in-out infinite;
  }
  .framework-icon img {
    width: clamp(90px, 22vw, 130px);
    height: clamp(90px, 22vw, 130px);
    filter: drop-shadow(0 8px 24px rgba(242, 0, 129, .4));
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  }
  .framework-card:hover .framework-icon img,
  .framework-card:active .framework-icon img {
    transform: scale(1.08) rotate(-3deg);
  }
  @keyframes framework-icon-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
  /* Bottom half — text content stacked left-aligned. */
  .framework-card .framework-title,
  .framework-card .framework-source,
  .framework-card .framework-cta {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  /* Source — restored to the original light-grey color (was pink). */
  .framework-source {
    color: rgba(255, 255, 255, .7) !important;
    /* 10% larger than before (.85 × 1.1 = .935) */
    font-size: .935rem;
    letter-spacing: .04em;
    margin: 1.5rem 0 .5rem;
    font-weight: 500;
  }
  .framework-card .framework-title {
    /* 10% larger (1.4 × 1.1 = 1.54 min, 1.8 × 1.1 = 1.98 max) */
    font-size: clamp(1.54rem, 6vw, 1.98rem);
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #fff;
  }
  /* CTA: text + arrow INLINE (not stacked). 10% larger text. */
  .framework-cta {
    color: var(--pink);
    font-size: 1.045rem; /* .95 × 1.1 */
    margin: 0;
    padding-bottom: 1.75rem;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: .5rem;
    letter-spacing: .04em;
    text-transform: none;
    font-weight: 600;
    transition: gap .3s ease;
  }
  .framework-card:hover .framework-cta,
  .framework-card:active .framework-cta {
    gap: .85rem;
  }
  .framework-cta-arrow {
    /* Plain arrow (no circle) — sits inline RIGHT NEXT to the text. */
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    color: var(--pink);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
  }
  /* Framework detail popup */
  .framework-detail { padding: 3rem 1.25rem 4rem; min-height: auto; }
  .framework-detail-slide { padding-right: 0; gap: 1.5rem; }
  .framework-detail-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .framework-detail-visual img { max-height: 280px; }
  .framework-back { top: .75rem; right: .75rem; padding: .35rem .8rem; font-size: .7rem; }

  /* ════════════════ WATCH.LISTEN.READ. (banner) ════════════════ */
  .watch-listen-read { min-height: clamp(360px, 55vh, 500px); }
  .wlr-text { max-width: 100%; padding: 0 1.5rem; }
  .wlr-text > p {
    color: rgba(255, 255, 255, 0.9);
    /* Smaller font so the body copy doesn't break awkwardly with single
       orphan words ("learning,") on their own line. Also tighten the
       line-height to keep the paragraph reading as a compact block. */
    font-size: .9rem;
    line-height: 1.4;
  }
  /* On mobile, the photo is landscape and `object-fit: cover` was
     cropping Keith out on the right. Switch object-position so Keith
     (right side of the source photo) stays in frame. */
  .wlr-bg img {
    object-position: 75% center !important;
  }
  /* Switch the gradient from horizontal (left-dark) to VERTICAL
     (bottom-dark) so Keith's silhouette in the background is visible
     across the full mobile width while the text below stays readable. */
  .wlr-bg::after {
    background: linear-gradient(180deg,
      rgba(11, 11, 51, 0.25) 0%,
      rgba(11, 11, 51, 0.55) 50%,
      rgba(11, 11, 51, 0.9) 100%) !important;
  }

  /* ════════════════ YOUTUBE / FUTURE-PREPARE ════════════════ */
  .youtube-block { margin-top: -3rem; padding-bottom: 1rem; }
  .yt-grid { padding: 1rem; gap: 1rem; }
  .yt-title { font-size: 1.5rem; }
  .yt-thumb-overlay { font-size: .75rem; padding: .5rem 1rem; }

  /* ════════════════ PODCASTS ════════════════ */
  .podcasts .container { padding: 0 1.25rem; }
  .podcasts-head {
    gap: 1rem;
    /* Stack title block + button vertically and center the button on
       mobile (desktop has them side-by-side via space-between). */
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .podcasts-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  /* VIEW PLAYLIST button: compact pill, not full width — centered. */
  .podcasts-head .btn {
    width: auto;
    align-self: center;
    padding: .7rem 1.5rem;
    font-size: .8rem;
    margin: .5rem auto 0;
  }
  .podcast-grid { grid-template-columns: 1fr; gap: .75rem; }
  .podcast-card-body { padding: .85rem; }

  /* ════════════════ PUBLICATIONS ════════════════ */
  .publications .container .publications-title,
  .publications-title { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .publication-card-wrap { flex-basis: 78vw; }
  .publication-card { padding: 1.5rem 1.25rem 1.5rem; }
  .publication-title { font-size: 1.05rem; }
  .publication-venue { font-size: .85rem; }
  .publications-pager .publication-pager-arrow { width: 28px; height: 28px; }

  /* ════════════════ BEYOND THE BIO ════════════════
     Mobile layout: PHOTO at the top (prominent), text content below.
     Photo is in normal flow (not absolute) so it owns its full size. */
  .beyond-bio {
    min-height: auto;
    padding: 0 0 3rem;
    display: block;
  }
  .bb-bg {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    opacity: 1 !important;
    margin-bottom: 1.5rem;
  }
  .bb-bg img {
    /* Anchor crop toward the LOWER-LEFT of the photo where Keith's
       face sits (the source photo is a selfie with the canyon behind). */
    object-position: 15% 75% !important;
  }
  /* Subtle gradient at the BOTTOM of the photo so it transitions
     smoothly into the dark section background where the text sits. */
  .bb-bg::after {
    background: linear-gradient(180deg,
      rgba(11, 11, 51, 0) 0%,
      rgba(11, 11, 51, 0) 60%,
      rgba(11, 11, 51, .85) 90%,
      rgba(11, 11, 51, 1) 100%) !important;
  }
  /* Text block sits IN FLOW below the photo. */
  .bb-text-wrap {
    justify-content: flex-start;
    width: 100%;
  }
  .bb-text {
    width: 100%;
    max-width: 100%;
    padding: 0 1.25rem;
  }
  .beyond-bio .section-heading .pink-italic { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .bb-fact p { font-size: 1.15rem; line-height: 1.35; }
  .bb-fact h3 { font-size: 1.1rem; }
  .bb-pager { margin-top: 1.5rem; gap: .35rem; }
  .bb-pager-dot { width: 28px; height: 28px; font-size: .75rem; }
  .bb-pager-arrow { width: 28px; height: 28px; }

  /* ════════════════ FINAL CTA / "Let's Create it. Together." ════════════════ */
  .final-cta { padding: 7rem 0 3rem; }
  .cta-photo { order: -1; max-width: 90%; margin: 0 auto 2rem; }
  .cta-photo-img { transform: scale(1.15); }
  .cta-cloud-1 { width: 70%; left: -10%; top: -18%; }
  .cta-cloud-2 { width: 60%; left: 20%; top: 4%; }
  .cta-cloud-3 { width: 60%; right: -10%; top: -22%; }
  .final-cta .section-heading .white { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .final-cta .section-heading .pink-italic { font-size: clamp(2rem, 9vw, 3rem); }
  .cta-body { font-size: .95rem; }
  .cta-form input,
  .cta-form textarea {
    font-size: 16px; /* iOS keeps zoom off when input is ≥ 16px */
    padding: .9rem 1rem;
  }
  .cta-form .btn { width: 100%; padding: 1rem; font-size: .95rem; }

  /* ════════════════ FOOTER ════════════════ */
  .site-footer { padding: 2rem 1rem; }
  .footer-inner { flex-direction: column; gap: 1rem; text-align: center; }
  .footer-contact, .footer-legal { flex-direction: column; gap: .35rem; align-items: center; }

  /* ── Buttons: enforce 44px minimum tap target ── */
  .btn { min-height: 44px; }
}

/* ─── Small phones (≤ 480px) — iPhone-mini class ─────────────────── */
@media (max-width: 480px) {
  .container { padding-left: 1rem; padding-right: 1rem; }

  /* Services 2×2 grid stays but tighter. */
  .services-cards { gap: .65rem; }
  .service-card { padding: .85rem; }
  .service-card .service-number { font-size: 1.6rem; }
  .service-card .service-title { font-size: .85rem; line-height: 1.15; }

  /* Frameworks: 1 column to give cards more room. */
  .framework-grid { grid-template-columns: 1fr; }

  /* Logos: still 2 columns but smaller. (Per-logo scale applied via
     transform: scale() in the base .logo-grid img rule, not multiplied
     into max-height here, so wide AND tall logos both respond.) */
  .logo-grid img { max-height: 112px; max-width: 90%; }
  .logo-grid li { min-height: 100px; }

  /* Books CTAs stack vertically. */
  .book-ctas { flex-direction: column; align-items: stretch; }
  .book-ctas .btn { width: 100%; }
}

/* ─── iPhone SE & old Androids (≤ 380px) ─────────────────────────── */
@media (max-width: 380px) {
  .hero-headline { font-size: clamp(1.9rem, 11vw, 2.4rem); }
  .vision .display-name { font-size: clamp(2.5rem, 14vw, 3.5rem); }
  .about .display-name { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .btn { padding: .75rem 1rem; font-size: .85rem; }
  .container { padding-left: .875rem; padding-right: .875rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   ████  MOTION & MICROINTERACTIONS  ████
   Evervault-inspired layer that adds life to the site: smooth scroll,
   scroll-triggered reveals, animated gradient meshes, subtle floats,
   tap feedback. Everything respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* Smooth scroll for in-page anchor navigation. */
html { scroll-behavior: smooth; }

/* ── Scroll-triggered reveal ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* ── Animated gradient mesh (REMOVED — user wanted static dark navy bg) ──
   The pink/purple radial-gradient overlay used to pulse here, but it
   made the page bg appear to "fade between colors" as the 24s animation
   cycled. Kept the .container positioning rule below so nested z-index
   still works if we ever re-enable it. */
/* Make sure content inside sections sits ABOVE the mesh background.
   IMPORTANT: don't include `.about-photo` here — that element has its
   OWN position: absolute on desktop (anchored to section bottom) and a
   different absolute on mobile. Overriding it to position: relative
   would break both layouts. The photo already has z-index: 1 in its
   own rules, so it sits above the ::before mesh fine. */
.about > .container,
.services > .container,
.keynotes > .container,
.testimonials > .container,
.frameworks > .container,
.publications > .container,
.final-cta > .container,
.testimonials .testimonial-marquee,
.testimonials .testimonials-pager,
.publications .publications-carousel,
.publications .publications-pager {
  position: relative;
  z-index: 1;
}

/* ── Hero background gradient shifts subtly through purple tones ── */
@keyframes hero-bg-shift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  .hero {
    background: linear-gradient(135deg, #321b7e 0%, #2a1564 50%, #1a0d4e 100%);
    background-size: 200% 200%;
    animation: hero-bg-shift 16s ease-in-out infinite;
  }
}

/* Landscape phones (wide-but-short viewports): force every body paragraph
   to balance its line lengths so we don't get a 50-character first line
   followed by a 4-character orphan. `text-wrap: balance` works in modern
   Chromium/Safari/Firefox; older browsers ignore it gracefully. The
   `pretty` fallback handles widow words elsewhere. */
@media (orientation: landscape) and (max-height: 500px) {
  p, .about-body, .hero-copy p, .services-text p, .keynote-text p,
  .yt-text > p, .book-copy p, .vision-card-text, .podcast-card p,
  .wlr-text p, .bb-fact-body, .pull-quote p, .testimonial p,
  .framework-detail-body p {
    text-wrap: balance;
  }
}

/* ── Subtle perpetual float on cards (mobile only) ──────────────── */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  @keyframes card-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
  }
  .framework-card,
  .publication-card,
  .podcast-card {
    animation: card-float 6s ease-in-out infinite;
  }
  .framework-card:nth-child(2),
  .publication-card-wrap:nth-child(2) .publication-card,
  .podcast-card:nth-child(2) { animation-delay: -1.5s; }
  .framework-card:nth-child(3),
  .publication-card-wrap:nth-child(3) .publication-card,
  .podcast-card:nth-child(3) { animation-delay: -3s; }
  .framework-card:nth-child(4),
  .publication-card-wrap:nth-child(4) .publication-card,
  .podcast-card:nth-child(4) { animation-delay: -4.5s; }
}

/* ── Tap-feedback ripple on buttons & cards ──────────────────────── */
.btn,
.service-card,
.framework-card,
.publication-card,
.keynote-tab,
.podcast-card {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn::after,
.service-card::after,
.framework-card::after,
.publication-card::after,
.keynote-tab::after,
.podcast-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(242, 0, 129, 0.25) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}
.btn:active::after,
.service-card:active::after,
.framework-card:active::after,
.publication-card:active::after,
.keynote-tab:active::after,
.podcast-card:active::after {
  opacity: 1;
  transition: opacity 0.05s ease;
}

/* ── Press effect: button squish on tap ──────────────────────────── */
.btn:active,
.service-card:active,
.framework-card:active,
.keynote-tab:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* ── Pulse glow on the primary CTA button (header + final form) ── */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 0, 129, 0.45), 0 8px 24px rgba(242, 0, 129, 0.35); }
  50%      { box-shadow: 0 0 0 10px rgba(242, 0, 129, 0), 0 8px 24px rgba(242, 0, 129, 0.45); }
}
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  .header-cta { animation: cta-pulse 2.4s ease-in-out infinite; }
  .mobile-menu-cta { animation: cta-pulse 2.4s ease-in-out infinite; }
}

/* ── Page-load entrance — header + hero copy fade in ─────────────── */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header { animation: page-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── Image breathing on the hero photo (mobile only) ──────────────
   Very subtle zoom in/out. Base scale is 0.64 (matches the static
   scale set on .hero-photo img) so the breathing doesn't undo the
   intentional size reduction. */
@media (max-width: 720px), (max-height: 500px) and (orientation: landscape) {
  @keyframes hero-photo-breath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
  }
  .hero-photo img { animation: hero-photo-breath 10s ease-in-out infinite; transform-origin: top center; }
}

/* ── Section heading two-line reveal (stagger) ───────────────────── */
.section-heading.reveal .white { opacity: 0; transform: translateY(15px); transition: opacity .8s cubic-bezier(.16,1,.3,1) .05s, transform .8s cubic-bezier(.16,1,.3,1) .05s; }
.section-heading.reveal .pink-italic { opacity: 0; transform: translateY(20px); transition: opacity .9s cubic-bezier(.16,1,.3,1) .2s, transform .9s cubic-bezier(.16,1,.3,1) .2s; }
.section-heading.reveal.is-revealed .white,
.section-heading.reveal.is-revealed .pink-italic { opacity: 1; transform: translateY(0); }

/* ── Respect motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .section-heading.reveal .white,
  .section-heading.reveal .pink-italic {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .about::before,
  .services::before,
  .keynotes::before,
  .testimonials::before,
  .frameworks::before,
  .publications::before,
  .final-cta::before,
  .hero,
  .framework-card,
  .publication-card,
  .podcast-card,
  .header-cta,
  .mobile-menu-cta,
  .hero-photo img,
  .site-header { animation: none !important; }
  html { scroll-behavior: auto; }
}


/* ═══════════════════════════════════════════════════════════════════
   ████  CUSTOM CURSOR (Evervault-style)  ████
   Two-layer cursor: small pink dot follows the mouse 1:1; outline ring
   trails behind smoothly. Both grow + tint on interactive hover.
   ═══════════════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  /* When the custom cursor is active, hide the native arrow on the
     body AND on every interactive element so there's only one cursor
     visible at any time. */
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: none !important; }
}

/* Outer ring + fuzzy center removed per feedback — read as a gun sight
   and could obscure Keith's face. Only the small pink dot remains. */
.cursor-outline { display: none !important; }

.cursor-dot,
.cursor-outline {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* Initial off-screen position so they don't flash at (0, 0) on load. */
  opacity: 0;
  transition: opacity .2s ease, background-color .2s ease,
              border-color .2s ease, width .25s cubic-bezier(.16, 1, .3, 1),
              height .25s cubic-bezier(.16, 1, .3, 1);
  /* When JS sets `left`/`top` we want the dot itself to render there,
     not at top-left — translate(-50%, -50%) keeps the cursor centred
     on the pointer coordinates. */
  will-change: left, top, transform;
}

/* Show once the user moves the cursor (mouseenter event sets opacity 1). */
body.has-custom-cursor .cursor-dot,
body.has-custom-cursor .cursor-outline { opacity: 1; }

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--pink);
  box-shadow: 0 0 12px rgba(242, 0, 129, 0.45);
}

.cursor-outline {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(242, 0, 129, 0.55);
  background: rgba(242, 0, 129, 0.03);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* HOVER on interactive elements — pink dot grows slightly with a stronger
   glow to signal interactivity. (Outer ring removed; was reading as a
   gun-sight and obscuring faces.) */
body.cursor-on-link .cursor-dot {
  width: 16px;
  height: 16px;
  background: var(--pink);
  box-shadow: 0 0 24px rgba(242, 0, 129, 0.9);
}
body.cursor-on-link .cursor-outline {
  width: 64px;
  height: 64px;
  background: rgba(242, 0, 129, 0.22);
  border-color: var(--pink);
  box-shadow: 0 0 32px rgba(242, 0, 129, 0.35);
}

/* PRESSED state — quick squish on mousedown. */
body.cursor-pressed .cursor-dot { transform: translate(-50%, -50%) scale(0.7); }
body.cursor-pressed .cursor-outline { transform: translate(-50%, -50%) scale(0.85); }

/* Hide on small screens / touch — fall back to the native cursor. */
@media (max-width: 720px), (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-outline { display: none; }
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE (phone rotated horizontally) — STRATEGY:
   KEEP THE VERTICAL MOBILE DESIGN EXACTLY but fix anything that
   breaks because of short viewport height.
   ───────────────────────────────────────────────────────────────────
   The combined media query at `(max-width: 720px), (max-height: 500px)
   and (orientation: landscape)` already replicates the vertical mobile
   styles in landscape. This block ONLY overrides values that depend on
   viewport HEIGHT (vh units, 100vh sections, large absolute `top`
   offsets) that become broken when the viewport is only ~400px tall.
   ═══════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 600px) {

  /* GLOBAL: all sections become content-driven (no forced 100vh).
     This is the BIG simplification — no section tries to fill the
     viewport height. Each one is exactly as tall as it needs.
     EXCLUSIÓN: .about NO está aquí porque su layout landscape requiere
     altura 100vh para distribuir foto + quote en 2 columnas. */
  .hero, .vision, .services, .keynotes, .testimonials, .books,
  .watch-listen-read, .podcasts, .publications, .frameworks,
  .beyond-bio, .final-cta, .books-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 4rem 1.25rem 2.5rem !important;
  }

  /* ── HEADER ── */
  .site-header { padding: .5rem .75rem !important; }
  .nav-toggle { width: 36px !important; height: 36px !important; }
  .header-cta { width: 32px !important; height: 32px !important; min-height: 32px !important; }
  .header-cta-icon { width: 14px !important; height: 14px !important; }
  .floating-brand-mark { top: .55rem !important; left: .85rem !important; }
  .floating-brand-mark img { height: 28px !important; }

  /* Global trim to typography. */
  .display-name { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
  .section-heading { font-size: clamp(1.3rem, 4vw, 1.8rem) !important; }
  .eyebrow { font-size: clamp(.8rem, 2.5vw, .95rem) !important; }

  /* ── HERO: 2-COLUMN — foto LEFT (40%), caption RIGHT (60%).
     Ambas columnas centradas vertical, fila completa = altura
     viewport menos el pill. ── */
  .hero {
    padding: 0 !important;
    min-height: 100vh !important;
    height: 100vh !important;
    position: relative;
  }
  .hero .container.hero-grid {
    display: grid !important;
    /* Foto MÁS GRANDE — columna izquierda 1.3fr / derecha 1fr. */
    grid-template-columns: 1.3fr 1fr !important;
    padding: 3.5rem 2rem 0 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    gap: 2rem !important;
    align-items: stretch !important;
    box-sizing: border-box;
  }
  /* Foto sin frame visible, integrada al gradient morado, ocupando
     toda la altura disponible del hero (igual que desktop). */
  .hero-photo {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: 100% !important;
    /* Altura COMPLETA — la foto se extiende desde arriba hasta el
       borde inferior del hero, igual que en desktop. */
    height: 100% !important;
    max-height: none !important;
    min-height: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: transparent !important;
    align-self: stretch !important;
    display: block;
  }
  .hero-photo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    /* `cover` + zoom adicional con scale para hacer un close-up del
       rostro/pecho de Keith. `object-position: center 15%` ancla la
       cara cerca del top y `transform: scale(1.2)` acerca aún más. */
    object-fit: cover !important;
    object-position: center 15% !important;
    transform: scale(1.2) !important;
    transform-origin: center top !important;
    animation: none !important;
    border-radius: 0 !important;
  }
  .hero-photo-gradient { display: none !important; }
  /* Caption centrado verticalmente, todo el texto centrado. */
  .hero-copy {
    position: relative !important;
    inset: auto !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center !important;
    gap: .65rem;
  }
  .hero-headline {
    font-size: clamp(2.2rem, 7vw, 3.2rem) !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .hero-subhead {
    font-size: .95rem !important;
    margin: .25rem 0 0 !important;
    line-height: 1.3;
    font-weight: 600;
    max-width: 90%;
  }
  .hero-body {
    font-size: .8rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 95%;
  }
  /* Botón compacto, NO de ancho completo. Width auto + auto margins. */
  .hero-cta {
    padding: .7rem 1.6rem !important;
    font-size: .8rem !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: center !important;
    margin: .75rem auto 0 !important;
    display: inline-block !important;
  }

  /* ── VISION: 2-COL — bloque de TÍTULO unificado (centrado) en la
     LEFT, video card en la RIGHT. ── */
  .vision {
    min-height: 100vh !important;
    padding: 4rem 1.5rem 2rem !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 2rem !important;
  }
  /* LEFT: eyebrow + display-name AGRUPADOS y CENTRADOS. */
  .vision-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: .25rem !important;
    width: auto !important;
    flex: 1 1 50%;
    max-width: 50%;
    text-align: center !important;
  }
  .vision .eyebrow {
    /* 30% más grande: 1.1rem → 1.43rem */
    font-size: 1.43rem !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .vision .display-name {
    /* 30% más grande: clamp(2.5,8vw,3.8) → clamp(3.25,10.4vw,4.94) */
    font-size: clamp(3.25rem, 10.4vw, 4.94rem) !important;
    line-height: .9 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .vision-body {
    font-size: .85rem !important;
    line-height: 1.4 !important;
    margin: .5rem 0 0 !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  /* Imagen de Keith (cutout PNG sobre el título) OCULTA en landscape
     — el título queda como protagonista. La foto de FONDO (vision-bg)
     SÍ se mantiene activa para dar contexto visual. */
  .vision-image,
  .vision .vision-photo,
  .vision-cloud,
  .vision-model,
  .vision-model-inner {
    display: none !important;
  }
  /* Vision background: visible y full-bleed con overlay para que el
     título y el video card se lean cómodamente sobre la foto. */
  .vision-bg {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
  }
  .vision-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  .vision-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(11, 11, 51, 0.55) 0%,
      rgba(11, 11, 51, 0.7) 50%,
      rgba(11, 11, 51, 0.85) 100%);
    pointer-events: none;
  }
  /* El contenido (inner + card) por ENCIMA del fondo. */
  .vision-inner, .vision-card {
    position: relative !important;
    z-index: 1 !important;
  }
  /* RIGHT: video card visible, ocupa la mitad derecha. */
  .vision-card, .vision-video {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    flex: 1 1 50%;
    max-width: 50% !important;
  }

  /* ═══════════════════════════════════════════════════════════════
     ABOUT KEITH — landscape REWRITE basado en el DOM REAL.

     A 812×375 / 844×390 / 932×430 el width > 720 → el JS de mobile
     NO ejecuta y la estructura DOM permanece original:
       .about
         > .container.about-grid-3
             > .about-copy       (text content)
             > .about-photo      (image)
             > .about-quote      (pull-quote)
         > .container.stats      (stats numbers)

     Estrategia: el contenedor .about-grid-3 SE CONVIERTE en grid
     2-col directamente: texto LEFT (about-copy + about-quote como
     un bloque) y foto RIGHT. ═══════════════════════════════════════ */
  .about {
    /* Flex column con altura AUTO — la sección se extiende según
       contenido, evitando que el body se recorte. */
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 4rem 1.5rem 2rem !important;
    position: relative;
    overflow: visible !important;
    box-sizing: border-box;
    gap: 1rem;
  }
  /* Título "About Keith" OCULTO en landscape — el foco va a la foto
     + pull-quote lado a lado, sin distracciones. */
  .about-title-top {
    display: none !important;
  }
  /* Photo: columna DERECHA. */
  #about .about-photo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 30% !important;
    flex: 0 0 30% !important;
    height: 100% !important;
    max-height: calc(100vh - 5rem) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 12px !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 2 !important;
    order: 3 !important;
    grid-column: auto !important;
    grid-row: auto !important;
    opacity: 1 !important;
  }
  #about .about-photo img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
  }
  #about .about-photo::after { display: none !important; content: none !important; }
  .about-photo img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
  /* Grid container = ROW 1 del .about flex column. Flex row interno
     con 3 columnas: copy LEFT + quote CENTER + photo RIGHT. */
  section#about > .container.about-grid-3,
  #about > .about-grid-3 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1;
    grid-template-columns: none !important;
  }
  /* Stats DEBAJO de la foto (columna derecha) — no full-width.
     Posicionados con margin-left: auto para alinearse a la derecha
     bajo el área de la foto, dejando espacio libre a la izquierda
     para que el body content del .about-copy se vea sin recortes. */
  #about > .container.stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .35rem !important;
    width: 32% !important;
    max-width: 32% !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    text-align: center !important;
  }
  #about > .container.stats .stat-value { font-size: .95rem !important; line-height: 1 !important; }
  #about > .container.stats .stat-label { font-size: .45rem !important; letter-spacing: .04em !important; margin-top: .1rem !important; line-height: 1.1 !important; }
  .about-copy {
    padding: 0 !important;
    align-items: stretch !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column;
    gap: .55rem;
  }
  /* NO duplicate title via ::before */
  .about-copy::before { content: none !important; display: none !important; }
  .about-headline {
    font-size: 1.05rem !important;
    text-align: left !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #fff !important;
  }
  .about-body {
    font-size: .8rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    text-align: left !important;
    color: rgba(255, 255, 255, .85) !important;
  }
  .about-copy .btn {
    font-size: .72rem !important;
    padding: .5rem 1.1rem !important;
    align-self: flex-start !important;
    margin: .25rem 0 0 !important;
  }
  /* Stats — horizontal row, compact. */
  .about .stats {
    /* Reset the desktop negative `top` that pulls stats UP into the photo
       area — on mobile the layout is different and the negative top was
       clipping the digit tops. */
    top: 0 !important;
    position: static !important;
    margin: 1rem 0 0 !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
    overflow: visible !important;
  }
  .about .stats .stat-value {
    /* Bumped from 1.2rem; line-height: 1 was clipping ascender heights so
       numbers were showing only their lower half. */
    font-size: 1.6rem !important;
    line-height: 1.15 !important;
    overflow: visible !important;
  }
  .about .stats .stat-label { font-size: .6rem !important; letter-spacing: .06em !important; margin-top: .25rem !important; }
  /* Quote overlay HIDDEN — too crowded for the 2-col layout. */
  /* .about-copy VISIBLE en columna IZQUIERDA — sin overflow ni
     max-height, el contenido se muestra completo y la sección se
     extiende hacia abajo si hace falta. */
  #about .about-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    position: relative !important;
    width: 32% !important;
    flex: 1 1 32% !important;
    max-width: 32% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 .25rem !important;
    margin: 0 !important;
    text-align: left !important;
    order: 1 !important;
    transform: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    z-index: 2 !important;
    overflow: visible !important;
    gap: .4rem;
  }
  /* Tipografías compactas + jerárquicas para que TODO quepa y se lea. */
  #about .about-copy .eyebrow {
    font-size: .85rem !important;
    margin: 0 !important;
    font-style: italic;
    font-family: var(--font-serif);
    color: #fff !important;
  }
  #about .about-copy .display-name {
    font-size: 1.8rem !important;
    line-height: .9 !important;
    margin: 0 0 .15rem !important;
    color: var(--pink) !important;
    font-family: var(--font-serif);
    font-style: italic;
  }
  #about .about-copy .about-headline {
    font-size: .82rem !important;
    line-height: 1.2 !important;
    margin: .2rem 0 !important;
    text-align: left !important;
    font-weight: 700;
    color: #fff !important;
  }
  #about .about-copy .about-body {
    font-size: .68rem !important;
    line-height: 1.35 !important;
    margin: 0 0 .5rem !important;
    text-align: left !important;
    color: rgba(255, 255, 255, .8) !important;
  }
  #about .about-copy .btn {
    display: inline-flex !important;
    font-size: .65rem !important;
    padding: .45rem 1rem !important;
    align-self: flex-start !important;
    margin: .25rem 0 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    color: #fff !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap;
  }
  /* Stats compactos dentro de .about-copy. */
  #about .about-copy .stats,
  #about .about-copy > .container.stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .25rem !important;
    width: 100% !important;
    margin: .5rem 0 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
  }
  #about .stats .stat-value { font-size: .9rem !important; line-height: 1 !important; }
  #about .stats .stat-label { font-size: .45rem !important; letter-spacing: .04em !important; }
  /* PULL-QUOTE: columna IZQUIERDA-CENTRAL (entre copy y foto). */
  #about .about-quote-overlay,
  #about .about-quote {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    visibility: visible !important;
    width: 35% !important;
    flex: 1 1 35% !important;
    max-width: 35% !important;
    height: 100% !important;
    max-height: calc(100vh - 5rem) !important;
    padding: .5rem !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 2 !important;
    order: 2 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  #about .pull-quote-lead { font-size: .95rem !important; line-height: 1.2 !important; }
  #about .pull-quote-rest { font-size: .7rem !important; line-height: 1.3 !important; margin-top: .4rem !important; }
  #about .pull-quote cite { font-size: .7rem !important; margin-top: .5rem !important; }
  /* Pull-quote contenido — tipografías legibles. */
  .about .pull-quote {
    text-align: center !important;
    margin: 0 !important;
  }
  .about .pull-quote-lead {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    color: var(--pink) !important;
    font-weight: 700 !important;
    display: block !important;
  }
  .about .pull-quote-rest {
    font-size: .85rem !important;
    line-height: 1.35 !important;
    color: #fff !important;
    display: block !important;
    margin-top: .65rem !important;
  }
  .about .pull-quote cite {
    color: rgba(255, 255, 255, .7) !important;
    font-size: .8rem !important;
    margin-top: .85rem !important;
    display: block !important;
    text-align: center !important;
  }
  /* VISIBLE en landscape: headline, body, button, stats — todos los
     elementos del desktop deben estar presentes. (Las reglas en
     #about con especificidad ID los muestran correctamente.) */

  /* ── SERVICES: HIDE the center photo — the cards + text are enough. ── */
  .services-photo { display: none !important; }
  .services-3col {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
    align-items: center;
  }
  .services .display-name { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; }
  .services-quote { font-size: .8rem !important; margin-top: .65rem !important; }
  .services-cards-wrap, .services-cards { max-width: 100% !important; margin: 0 !important; }
  .services-cards { gap: .65rem !important; }
  .service-card { padding: .85rem !important; }
  .service-card .service-number { font-size: 1rem !important; margin: 0 0 .35rem !important; }
  .service-card .service-title { font-size: .85rem !important; line-height: 1.15; }

  /* ── KEYNOTES ── */
  .keynote-panel { padding: 1.25rem !important; min-height: 0 !important; }
  .keynote-panel.has-bg { padding: 1.25rem !important; }
  .keynote-card-view { display: flex !important; flex-direction: column; gap: .75rem; }
  .keynote-text h3 { font-size: 1.2rem !important; margin: 0 !important; }
  .keynote-text > p { font-size: .8rem !important; line-height: 1.4 !important; }
  .keynote-ideal { font-size: .8rem !important; padding-left: 1rem !important; }
  .keynote-text .btn { padding: .55rem 1.1rem !important; font-size: .75rem !important; }
  .keynote-pager-arrow, .keynote-dot { width: 28px !important; height: 28px !important; }
  .keynote-counter { font-size: .8rem !important; padding: .4rem .85rem !important; }

  /* ── TESTIMONIALS (horizontal scroll keeps working) ── */
  .testimonial-card { padding: 1.25rem 1rem !important; }
  .testimonial-quote { font-size: .85rem !important; line-height: 1.4 !important; }
  .testimonial-author { font-size: .75rem !important; }

  /* ── BOOKS HERO: full-bleed background hero, same as vertical mobile,
     just compressed for short viewport. ── */
  .books-hero {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 4rem 1.5rem 2rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .books-hero-bg::after {
    background: linear-gradient(180deg,
      rgba(11, 11, 51, 0.45) 0%,
      rgba(11, 11, 51, 0.85) 75%,
      rgba(11, 11, 51, 1) 100%) !important;
  }
  .books-hero-text {
    padding: 0 !important;
    max-width: 600px !important;
    text-align: center !important;
    margin: 0 auto;
    z-index: 1;
  }
  .books-hero .eyebrow { font-size: 1rem !important; margin: 0 0 .5rem !important; }
  .books-hero-headline {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  /* ── BOOKS (per book): 2-col — TEXTO LEFT con más aire, PORTADA
     RIGHT bien distribuida. Container amplio para usar el ancho. ── */
  .book {
    padding: 1.5rem 3rem !important;     /* halved vertical */
    min-height: auto !important;         /* was 100vh — that single rule was the biggest cause of the perceived "huge gap" */
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .book .container {
    width: 100% !important;
    /* Container más ancho para dar aire a las cajas. */
    max-width: 1200px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .book-grid {
    display: grid !important;
    /* TEXTO 1fr (espacio amplio para respirar) + PORTADA 180px (chica
       a la derecha) + gap MUCHO más grande para separación visual. */
    grid-template-columns: 1fr 180px !important;
    gap: 5rem !important;
    align-items: center;
    flex-direction: row !important;
    justify-content: center !important;
  }
  .book-cover {
    max-width: 180px !important;
    width: 100% !important;
    margin: 0 auto !important;
    order: 2 !important;
    position: relative;
  }
  .book-cover img { width: 100% !important; height: auto !important; display: block !important; }
  /* AWARD BADGE (sello dorado) — pequeño, esquina inferior-derecha,
     no tapa el libro. */
  .book-cover .award-badge {
    width: 48px !important;
    height: 48px !important;
    bottom: -6px !important;
    right: -6px !important;
    position: absolute;
  }
  .book-copy {
    /* order 1: texto va a la IZQUIERDA (primera columna) */
    order: 1 !important;
    padding: 0 .5rem 0 0 !important;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    text-align: left;
  }
  .book-meta { font-size: .75rem !important; margin: 0 !important; color: var(--pink); font-weight: 500; }
  .book-title {
    font-size: 1.55rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    font-weight: 500;
  }
  .book-tagline {
    font-size: .95rem !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    font-weight: 500;
  }
  .book-description p {
    font-size: .82rem !important;
    line-height: 1.5 !important;
    margin: 0 0 .65rem !important;
  }
  .book-ctas {
    margin-top: 1rem !important;
    gap: .75rem !important;
    flex-wrap: wrap;
  }
  .book-ctas .btn { padding: .6rem 1.25rem !important; font-size: .75rem !important; }

  /* ── WATCH.LISTEN.READ: full-bleed photo BG con texto centrado
     vertical+horizontal (igual que vertical mobile, solo compacto). ── */
  .watch-listen-read {
    min-height: 100vh !important;
    padding: 4rem 1.5rem !important;
    display: flex !important;
    align-items: center;
    position: relative;
  }
  .wlr-bg { opacity: 1 !important; }
  .wlr-bg::after {
    background: linear-gradient(180deg,
      rgba(11, 11, 51, 0.4) 0%,
      rgba(11, 11, 51, 0.65) 50%,
      rgba(11, 11, 51, 0.9) 100%) !important;
  }
  .wlr-text-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .wlr-text {
    padding: 0 !important;
    max-width: 600px !important;
    text-align: center !important;
  }
  .wlr-text .eyebrow {
    font-size: 1rem !important;
    margin: 0 0 .25rem !important;
    text-align: center !important;
  }
  .wlr-text .section-heading {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    line-height: 1.05 !important;
    margin: 0 0 .85rem !important;
    text-align: center !important;
  }
  .wlr-text .section-heading .pink-italic {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
  }
  .wlr-text > p {
    font-size: .85rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    color: #fff !important;
  }

  /* ── PODCASTS ── */
  .podcasts-head { gap: .85rem !important; }
  .podcasts-title { font-size: 1.25rem !important; }
  .podcasts-head .btn { padding: .5rem 1rem !important; font-size: .72rem !important; }
  .podcast-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .75rem !important;
  }
  .podcast-card { padding: .65rem !important; }
  .podcast-title { font-size: .85rem !important; }

  /* ── PUBLICATIONS (horizontal carousel) ── */
  .publication-card { padding: 1.25rem 1rem !important; }
  .publication-title { font-size: 1rem !important; }
  .publication-venue { font-size: .75rem !important; }
  .publications-pager .publication-pager-arrow { width: 28px !important; height: 28px !important; }

  /* ── FRAMEWORKS — 2-col grid (aprovecha el ancho extra) ── */
  .framework-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  .framework-icon {
    height: 100px !important;
    padding: 1rem !important;
  }
  .framework-icon img { width: 56px !important; height: 56px !important; }
  .framework-card .framework-title { font-size: 1rem !important; margin: 0 0 .3rem !important; padding: 0 1rem !important; }
  .framework-source { font-size: .72rem !important; margin: .85rem 0 .25rem !important; padding: 0 1rem !important; }
  .framework-cta { font-size: .75rem !important; padding: 0 1rem 1rem !important; }

  /* ── BEYOND THE BIO: 2-COL — foto IZQUIERDA grande, texto DERECHA
     completo con headline + fact actual + pager. ── */
  .beyond-bio {
    display: flex !important;
    align-items: center;
    min-height: 100vh !important;
    padding: 4rem 1.5rem 2rem !important;
    gap: 1.75rem;
  }
  .bb-bg {
    display: block !important;
    position: relative !important;
    /* FULL FRAME: la foto ocupa TODA la columna izquierda sin franjas
       vacías. Ancho y alto al 100% del viewport disponible. */
    width: 45% !important;
    height: calc(100vh - 6rem) !important;
    aspect-ratio: auto !important;
    opacity: 1 !important;
    flex-shrink: 0;
    margin: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    background: transparent !important;
  }
  .bb-bg img {
    width: 100% !important;
    height: 100% !important;
    /* `cover` rellena TODO el frame sin franjas. `object-position: 25%`
       ancla la foto al lado IZQUIERDO donde está Keith (selfie), así
       su cara queda visible aunque se recorte el paisaje al otro lado. */
    object-fit: cover !important;
    object-position: 25% center !important;
    background: transparent !important;
  }
  .bb-bg::after {
    background: transparent !important;
    content: none !important;
    display: none !important;
  }
  .bb-text-wrap {
    width: 60% !important;
    justify-content: flex-start !important;
  }
  .bb-text {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: .5rem;
  }
  .beyond-bio .eyebrow {
    font-size: 1rem !important;
    margin: 0 !important;
  }
  .beyond-bio .section-heading {
    font-size: clamp(1.5rem, 4.5vw, 2rem) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  .beyond-bio .section-heading .pink-italic {
    font-size: clamp(1.5rem, 4.5vw, 2rem) !important;
  }
  .bb-fact { margin-top: .65rem !important; }
  .bb-fact h3 {
    font-size: 1rem !important;
    margin: 0 0 .35rem !important;
  }
  .bb-fact p {
    font-size: .9rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  .bb-pager {
    margin-top: 1rem !important;
    gap: .4rem !important;
    justify-content: flex-start !important;
  }
  .bb-pager-dot, .bb-pager-arrow {
    width: 28px !important; height: 28px !important;
    font-size: .72rem !important;
  }
  .bb-pager-counter {
    font-size: .82rem !important;
    padding: .3rem .75rem !important;
  }

  /* ── FINAL CTA — espacio TOP extra para que las nubes flotantes
     no choquen con la sección anterior (Beyond the Bio). ── */
  .final-cta { padding-top: 7rem !important; }
  .final-cta .section-heading { font-size: clamp(1.5rem, 4.5vw, 2rem) !important; }
  /* Nubes con su tamaño original (override removido). */
  .cta-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem !important;
  }
  .cta-form .form-field:last-of-type,
  .cta-form .btn,
  .cta-form .form-row {
    grid-column: 1 / -1;
  }
  .cta-form input, .cta-form textarea, .cta-form select {
    padding: .55rem .8rem !important;
    font-size: 15px !important;
  }
  .cta-form textarea { min-height: 80px !important; }
  .cta-form .btn { padding: .65rem 1.25rem !important; font-size: .8rem !important; }

  /* ── FOOTER ── */
  .site-footer { padding: 1.25rem !important; }
  .footer-inner {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 1rem !important;
    justify-content: space-between;
    text-align: left !important;
  }
  .footer-contact, .footer-legal {
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: center !important;
    font-size: .75rem !important;
  }
}




/* ═══════════════════════════════════════════════════════════════════
   ABOUT KEITH — MOBILE LANDSCAPE FINAL OVERRIDE
   ───────────────────────────────────────────────────────────────────
   Este bloque va al FINAL del CSS para máxima prioridad por
   source order. Usa selectores con #about (ID = 100 specificity) +
   !important para ganar a CUALQUIER regla previa.

   Estrategia simple y predecible:
   - .about = flex column con altura 100vh
   - Todos los hijos directos del .about se ponen en una columna
   - Centrado vertical con justify-content: center
   - Foto = max-height controlada + object-fit contain
   - Quote = centrado, sin position absolute
   ═══════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 600px) {

  /* 1. Section .about: flex column, todos los hijos apilan vertical
        pero CENTRADOS dentro del viewport. */
  html body section#about.about {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 4rem 1.5rem 1.5rem !important;
    gap: .75rem !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* 2. about-title-top (creado por JS): forzar a flujo normal arriba,
        NO absoluto. */
  html body section#about > .about-title-top {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  /* Títulos 20% MÁS GRANDES en landscape. */
  html body section#about > .about-title-top .eyebrow {
    font-size: 1.02rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  html body section#about > .about-title-top .display-name {
    font-size: 1.92rem !important;
    margin: 0 !important;
    line-height: .95 !important;
  }

  /* 3. about-grid-3: flex row con foto LEFT + texto/copy RIGHT.
        Toma el espacio principal del viewport. */
  html body section#about > .container.about-grid-3 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1.5rem !important;
    position: relative !important;
    grid-template-columns: none !important;
  }

  /* 4. about-photo: columna IZQUIERDA, posición RELATIVA (no absoluta),
        contained dentro de su flex slot. */
  html body section#about .about-photo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: 40% !important;
    flex: 0 0 40% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transform: none !important;
    opacity: 1 !important;
    z-index: 1 !important;
    order: 1 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  html body section#about .about-photo img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  html body section#about .about-photo::after {
    display: none !important;
    content: none !important;
  }

  /* 5. about-copy: columna DERECHA — body content visible.
        Gap COMPACTO entre elementos para fluidez. */
  html body section#about .about-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    position: relative !important;
    width: 55% !important;
    flex: 1 1 55% !important;
    max-width: 55% !important;
    height: auto !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    transform: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    z-index: 2 !important;
    order: 2 !important;
    overflow: visible !important;
    /* Gap reducido: 0 — el spacing entre elementos lo controla cada
       margin específico, NO el flex gap (que duplica espacios). */
    gap: 0 !important;
  }
  html body section#about .about-copy::before { display: none !important; content: none !important; }
  html body section#about .about-copy .about-headline {
    font-size: .8rem !important;
    line-height: 1.2 !important;
    /* Margin reducido para flujo más compacto. */
    margin: 0 0 .35rem !important;
    text-align: left !important;
    color: #fff !important;
    font-weight: 700 !important;
  }
  html body section#about .about-copy .about-body {
    font-size: .68rem !important;
    /* Line-height reducido para que los párrafos no parezcan
       separados por líneas en blanco. */
    line-height: 1.25 !important;
    margin: 0 0 .5rem !important;
    text-align: left !important;
    color: rgba(255, 255, 255, .8) !important;
    /* Cambio de pre-line a normal — colapsa los \n\n del CMS en un
       solo espacio, eliminando el "paragraph break" visual. */
    white-space: normal !important;
  }
  /* Botón "MORE ABOUT KEITH" — tamaño legible y proporcional. */
  html body section#about .about-copy .btn {
    font-size: .8rem !important;
    padding: .65rem 1.4rem !important;
    align-self: flex-start !important;
    margin: .25rem 0 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    letter-spacing: .08em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    color: #fff !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  /* 6. about-quote en su lugar original (dentro de grid-3) — OCULTO
        en landscape porque ya hay copy en columna derecha. */
  html body section#about > .container.about-grid-3 > .about-quote {
    display: none !important;
  }

  /* 7. about-quote-overlay (creado por JS si width ≤ 720):
        OCULTO en landscape — el copy en la columna derecha sustituye
        al pull-quote. Anula el top: 50vh del mobile portrait. */
  html body section#about > .about-quote-overlay {
    display: none !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* 8. .container.stats: posicionados ABSOLUTAMENTE sobre la foto
        en la columna izquierda, parte inferior. */
  html body section#about > .container.stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: .35rem !important;
    /* Posición absoluta sobre la foto (columna izquierda 40% del width).
       bottom: 1.5rem ancla los stats cerca de la base de la foto. */
    position: absolute !important;
    left: 1.5rem !important;
    right: auto !important;
    top: auto !important;
    bottom: 2rem !important;
    width: calc(40% - 1.5rem) !important;
    max-width: calc(40% - 1.5rem) !important;
    margin: 0 !important;
    padding: 0 .5rem !important;
    transform: none !important;
    text-align: center !important;
    z-index: 5 !important;
    pointer-events: none;
  }
  html body section#about > .container.stats .stat { pointer-events: auto; }
  html body section#about > .container.stats .stat-value {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: #fff !important;
  }
  html body section#about > .container.stats .stat-label {
    font-size: .5rem !important;
    letter-spacing: .08em !important;
    margin-top: .15rem !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-transform: uppercase !important;
  }
}

/* ── In-between zone (1024px tablets/small laptops) ────────────────────
   Below 1100px the desktop pill nav doesn't have room for 7 nav links
   + logo + CTA — items wrap to two lines and crash into the logo. Switch
   to the hamburger menu sooner. Also re-centre the About photo since the
   `transform: scale(1.872)` with top-left origin pushes it off-screen on
   narrower viewports. */
@media (max-width: 1100px) {
  /* Hamburger ON, desktop nav OFF */
  .nav-toggle { display: inline-flex; }
  .primary-nav ul#nav-list { display: none !important; }

  /* Testimonial avatar must stay fully visible at intermediate viewport
     widths (≈768–1100px) — user reports "people getting cut off" at 910.
     Give the marquee extra top room and disable any section-level
     overflow clip so the avatar's negative-margin overhang has somewhere
     to render. */
  .testimonials { overflow: visible !important; }
  .testimonial-marquee {
    padding-top: 9rem !important;
    overflow-y: visible !important;
  }
  .testimonial { padding-top: 6rem !important; }

  /* About photo — scale from centre so it stays visually balanced
     within the section regardless of viewport width. Also nudge the
     image RIGHT (`translateX(8%)`) so Keith's face — which sits in the
     LEFT third of the source portrait — lands on the section's optical
     centre instead of being pulled toward the left column. */
  .about-photo {
    transform-origin: center !important;
    transform: scale(1.3) translateX(8%) !important;
  }
  .about-photo img {
    /* Belt-and-braces: tell the browser to anchor the visible crop to
       the RIGHT side of the source so the right-shift survives even if
       the photo ever uses object-fit: cover. */
    object-position: right center !important;
  }

  /* Trusted-By logos — at this in-between width (≈768–1100px), 4 logos
     across leaves wide-aspect marks (GE HealthCare, BlueCross BlueShield)
     visually cramped against their neighbours. Drop to 3 columns. Row
     gap zero so rows read as a continuous logo wall — column gap
     unchanged. */
  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 clamp(2.5rem, 4vw, 4rem) !important;
  }
  .logo-grid li { min-height: 80px !important; }
  .logo-grid img {
    /* 3-column tablet layout has wider tracks than the 4-up desktop
       grid, so logos can grow even bigger here. Per-logo scale is
       applied via transform: scale() (set on .logo-grid img base rule)
       so the same CMS "Size Scale" multiplier works for both width-
       and height-constrained logos at this breakpoint too. */
    max-height: 240px !important;
    max-width: 95% !important;
  }

  /* Framework grid — at ≈768–1100px the default `minmax(220px, 1fr)` was
     making the 4th card wrap to a second row. Drop the minimum so all
     four cards stay on a single line, with text scaling down to match
     the slimmer card. */
  .framework-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(.75rem, 1.5vw, 1.25rem) !important;
  }
  .framework-card {
    padding: clamp(1rem, 2vw, 1.5rem) clamp(.75rem, 1.5vw, 1.25rem) !important;
  }
  .framework-card .framework-title {
    /* Proportionate text — scales with viewport so a 4-up row of cards at
       910px doesn't break each title onto 4+ lines. */
    font-size: clamp(.95rem, 1.7vw, 1.2rem) !important;
    line-height: 1.2 !important;
  }
  .framework-card .framework-source {
    font-size: clamp(.65rem, 1.2vw, .8rem) !important;
  }
  .framework-card .framework-cta {
    font-size: clamp(.6rem, 1vw, .72rem) !important;
  }
  .framework-card .framework-icon img {
    max-width: clamp(48px, 6vw, 72px) !important;
    height: auto !important;
  }

  /* Keynote card: stack the text + photo vertically so the panel doesn't
     overflow the viewport (was 2-col grid → wider than 1024px containers). */
  .keynote-panel.is-active .keynote-card-view {
    grid-template-columns: 1fr !important;
  }
  /* THE actual bleed culprit: the base rule sets `width: 120%` and
     `margin-left: -10%` on the active card to make it visually extend
     beyond its column on big desktops. On tablets / 1024px laptops that
     pushes 10% of the card off the right edge of the viewport. Reset it. */
  .keynote-panel.is-active {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  /* Same fix for the What Keith Does service-detail popup — base sets
     `width: 144%; margin-left: -22%` to extend over the centre photo
     column on desktop. That same offset blows past the viewport on
     narrower screens. */
  .service-detail {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    aspect-ratio: auto !important;       /* don't force square — would create huge empty area */
    box-sizing: border-box !important;
  }
  /* On tablet/mobile the stage is full-width and the pager flips to a
     horizontal row UNDER the card (see the @media (max-width: 720px)
     block above for the styling). Previously we set
     `.keynote-pager { display: none !important; }` here on the theory
     that the stacked layout had no room — but that swallowed the entire
     mobile navigation too. Now we just reset the stage's right padding
     and let the pager show in flow. */
  .keynote-stage { padding-right: 0 !important; max-width: 100% !important; }
  .keynote-pager {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    flex-direction: row !important;
    justify-content: center !important;
    margin: 1.5rem auto 0 !important;
    display: flex !important;
  }
  /* Keep the photo a reasonable height in stacked mode. */
  .keynote-photo img { max-height: 320px; }
}

/* ── Mobile phones: framework grid stacks to a single column ──
   The 1100px block above forces `repeat(4, 1fr) !important` to keep all 4
   cards on one row at tablet/in-between widths. On actual phones (≤720px)
   that's too cramped — each card needs full-width presence. This block
   reverts to a single-column stack and clears the proportionate-scaling
   overrides so cards render at their natural mobile size. */
@media (max-width: 720px) {
  /* 2-column grid on mobile — matches the "What Keith Does" services
     layout for visual consistency. Cards sit 2-up so all 4 frameworks
     are visible without excessive scrolling. */
  .framework-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
  .framework-card {
    /* Tighter padding than 1-column would have used — 2-up means each
       card is roughly half the viewport width. */
    padding: 1.25rem .85rem !important;
  }
  /* Text scales down so titles + source + CTA fit comfortably inside
     each narrower 2-up card without wrapping awkwardly. */
  .framework-card .framework-title { font-size: 1rem !important; line-height: 1.2 !important; }
  .framework-card .framework-source { font-size: .72rem !important; }
  .framework-card .framework-cta { font-size: .65rem !important; }
  /* Icon sized for the 2-up card — smaller than the full-width version
     would have used but still dominant within the narrower card. */
  .framework-card .framework-icon {
    height: auto !important;
    min-height: 120px;
    padding: 1.5rem .75rem !important;
  }
  .framework-card .framework-icon img {
    max-width: 80px !important;
    width: 80px !important;
    height: 80px !important;
  }
}

/* ── FINAL OVERRIDE: mobile-specific rules that MUST beat earlier
   `!important` declarations later in the file. CSS resolves ties between
   two `!important` rules by source order — the LAST one wins. So this
   block sits at the very bottom to guarantee mobile gets what it needs.

   - Logo grid: stay at 2 columns on phones (the 1100px block above
     forces `repeat(3) !important` which would otherwise leak into the
     ≤720px range).
   - Framework icon size: bigger on mobile per the design pass above. */
@media (max-width: 720px) {
  .logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem .75rem !important;
  }
  .logo-grid li {
    min-height: 115px !important;
    justify-content: center !important;
  }
  .logo-grid img {
    max-height: 88px !important;
    max-width: 90% !important;
  }
}