/* ══════════════════════════════════════════════════════════════════════
   XS IMPACT - ENHANCEMENT LAYER  v1
   Modular & additive. Pairs with assets/js/enhancements.js.
   ROLLBACK: remove the enhancements.css / enhancements.js tags from the
   page <head>. No existing file depends on this one.

   Notes:
   - .xs-motion is set on <html> by enhancements.js ONLY when JS is running
     AND prefers-reduced-motion is NOT set. Anything gated behind it fails
     safe (fully visible, no motion) for no-JS and reduced-motion users.
   - The site's existing prefers-reduced-motion overrides live inside
     @layer overrides with !important, which also neutralizes everything
     here. Belt and suspenders.
   - Transform/opacity only. Nothing below changes layout on animate.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Shared keyframes ─────────────────────────────────────────────────── */@keyframes xs-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}@keyframes xs-ambient-drift {
  0% {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }

  50% {
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }

  100% {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }
}@keyframes xs-heartbeat {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.035);
    opacity: .8;
  }
}@keyframes xs-menu-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}@keyframes xs-menu-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §9 SCROLL BEHAVIOR - smooth scroll (class set by JS, motion-gated)
   ══════════════════════════════════════════════════════════════════════ */
html.xs-smooth {
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════════════
   §1 HERO - ambient background, staggered intro, parallax
   ══════════════════════════════════════════════════════════════════════ */

/* Ambient layer (div injected by JS as first child of .hero):
   slow-drifting dark radial glow over a faint geometric grid.
   Sits under .hero-content (z2) and .hero-image (later in DOM). */
.xs-hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.xs-hero-ambient::before {
  /* faint geometric mesh - sharp, dark */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212, 175, 55, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 0%, transparent 75%);
}
.xs-hero-ambient::after {
  /* slow-moving dark gold glow */
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 28% 35%, rgba(212, 175, 55, .07) 0%, transparent 42%),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, .03) 0%, transparent 38%);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
.xs-hero-ambient::after {
    animation: xs-ambient-drift 26s ease-in-out infinite;
  }
}

/* Parallax (transform driven by JS; base scale prevents edge gaps) */
.hero .hero-image {
  overflow: hidden;
}
.xs-parallax {
  transform: scale(1.08);
  will-change: transform;
}

/* Headline line-by-line entrance.
   Hidden states ONLY exist under .xs-motion + .xs-hero-split (both set by
   JS after the DOM is rebuilt), so nothing can be stranded invisible. */
.xs-line {
  display: block;
}
.xs-line-inner {
  display: inline-block;
}
.xs-motion .xs-hero.xs-hero-split .xs-line-inner {
  opacity: 0;
  transform: translateY(.55em);
}
.xs-motion .xs-hero.xs-hero-split.xs-hero-live .xs-line-inner {
  /* sharp rise - per-line delay set inline by JS */
  animation: xs-rise .6s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* Subheadline, description, CTA - staggered after the headline */
.xs-motion .xs-hero .hero-subtitle,
.xs-motion .xs-hero .hero-description,
.xs-motion .xs-hero .hero-content>.btn {
  opacity: 0;
}
.xs-motion .xs-hero.xs-hero-live .hero-subtitle {
  animation: xs-rise .55s cubic-bezier(.22, 1, .36, 1) .50s forwards;
}
.xs-motion .xs-hero.xs-hero-live .hero-description {
  animation: xs-rise .55s cubic-bezier(.22, 1, .36, 1) .64s forwards;
}
.xs-motion .xs-hero.xs-hero-live .hero-content>.btn {
  animation: xs-rise .55s cubic-bezier(.22, 1, .36, 1) .78s forwards;
}

/* ══════════════════════════════════════════════════════════════════════
   §2 NAVIGATION - past-hero frosted state, underline hovers, mobile menu
   ══════════════════════════════════════════════════════════════════════ */

/* Deeper frosted-glass state once scrolled past the hero (JS toggles) */
.navbar.xs-past-hero {
  /* Distinctly more glassy than the near-opaque resting state, so the
     shift is visible on every page, not just over the home hero. */
  background-color: rgba(10, 10, 10, .62) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-bottom-color: rgba(212, 175, 55, .35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

/* Underline sweep on desktop nav links.
   Uses ::before - ::after is taken by the dropdown caret. */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
.nav-links>li>a {
    position: relative;
  }
.nav-links>li>a::before {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .55rem;
    height: 2px;
    background: var(--gold-gradient);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
  }
.nav-links>li>a:hover::before,
.nav-links>li.dropdown:hover>a::before {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Hamburger icon rotation (state class set by JS) */
.menu-toggle i {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.menu-toggle.xs-open i {
  transform: rotate(90deg);
}

/* Mobile panel open/close animation. .xs-closing is held by JS for the
   duration of the exit animation before display goes back to none. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
.nav-links.active {
    animation: xs-menu-in .32s cubic-bezier(.22, 1, .36, 1);
  }
.nav-links.xs-closing {
    display: flex;
    animation: xs-menu-out .24s ease forwards;
    pointer-events: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §3 LOGO CAROUSEL - seamless loop polish
   (Infinite loop + edge fade masks already exist in index.css;
    this adds GPU hinting and pause-on-hover.)
   ══════════════════════════════════════════════════════════════════════ */
.logo-carousel-track,
.marquee-track,
.carousel-track {
  will-change: transform;
  backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
.logo-carousel:hover .logo-carousel-track {
    animation-play-state: paused;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §4 X'S FORMULA CARDS - watermark numbers, hover shift
   (Staggered entrance delay is applied inline by JS so it never slows
    down the hover transitions afterwards.)
   ══════════════════════════════════════════════════════════════════════ */
.philosophy-grid .clause-card {
  padding-top: 4.5rem;
  /* restate the existing transition + add background-color */
  transition:
    transform .5s cubic-bezier(.19, 1, .22, 1),
    box-shadow .5s cubic-bezier(.19, 1, .22, 1),
    border-color .5s cubic-bezier(.19, 1, .22, 1),
    background-color .5s ease;
}

/* 01 / 02 / 03 as large faded watermarks behind the card title */
.philosophy-grid .clause-card .clause-number {
  position: absolute;
  top: .75rem;
  right: 1.25rem;
  margin: 0;
  font-size: 8.5rem;
  line-height: 1;
  letter-spacing: -.04em;
  opacity: .16;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.philosophy-grid .clause-card h3,
.philosophy-grid .clause-card p {
  position: relative;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
.philosophy-grid .clause-card:hover {
    background-color: rgba(58, 58, 52, .78);
    /* subtle background shift */
  }
}
@media (max-width: 480px) {
.philosophy-grid .clause-card .clause-number {
    font-size: 6.5rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §5 STAT STRIP - proof points with count-up values
   (Markup lives in index.html; count-up driven by JS.)
   ══════════════════════════════════════════════════════════════════════ */
.stat-strip {
  background-color: var(--bg-deeper);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 4rem var(--section-padding-x);
}
.stat-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
@media (min-width: 900px) {
.stat-strip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.stat-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat-value {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* no width jitter while counting */
  background: var(--gold-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════
   §6 BIO - directional reveals + accent X behind the photo
   (reveal-left/reveal-right classes are applied by JS and re-use the
    site's existing reveal transitions.)
   ══════════════════════════════════════════════════════════════════════ */
.bio-image.xs-bio-accent {
  position: relative;
}
.bio-image.xs-bio-accent::before {
  /* bold outlined X, faded, behind the photo */
  content: "X";
  position: absolute;
  top: 50%;
  left: -2.5rem;
  transform: translateY(-50%);
  font-size: clamp(14rem, 24vw, 24rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(212, 175, 55, .05);
  -webkit-text-stroke: 2px rgba(212, 175, 55, .14);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.bio-image.xs-bio-accent::after {
  /* offset gold frame for visual weight */
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  right: -1.25rem;
  bottom: -1.25rem;
  border: 1px solid rgba(212, 175, 55, .3);
  z-index: 0;
  pointer-events: none;
}
.bio-image.xs-bio-accent picture,
.bio-image.xs-bio-accent img {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
.bio-image.xs-bio-accent::after {
    right: .75rem;
    bottom: -.75rem;
    left: 2rem;
    top: 2rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §8 CTA - heartbeat on the giant X
   (Button hover/fill handled by §10 global button treatment.)
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
.bottom-cta .bg-x {
    animation: xs-heartbeat 6s ease-in-out infinite;
    will-change: transform, opacity;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §9 SCROLL UI - progress bar + back-to-top (elements injected by JS)
   ══════════════════════════════════════════════════════════════════════ */
.xs-progress {
  position: fixed;
  top: 0;
  /* JS pins it to the navbar's bottom edge */
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold-gradient);
  box-shadow: 0 0 10px rgba(212, 175, 55, .45);
  transform: scaleX(0);
  transform-origin: 0 50%;
  /* Above the navbar (100) but BELOW dropdown menus (1000) and the
     urgency banner (1001), so open menus are never striped by the bar. */
  z-index: 101;
  pointer-events: none;
}
.xs-top-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(17, 17, 17, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 175, 55, .5);
  border-radius: 50%;
  color: var(--accent-gold);
  font-size: var(--fs-16);
  cursor: pointer;
  z-index: 95;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1),
    background-color .3s ease, color .3s ease, border-color .3s ease;
}
.xs-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
.xs-top-btn:hover {
    background-color: var(--accent-gold);
    color: #000;
    border-color: var(--accent-gold);
  }
}
@media print {
.xs-progress,
.xs-top-btn {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §10 MICRO-INTERACTIONS - buttons, body links, heading reveals
   ══════════════════════════════════════════════════════════════════════ */

/* Buttons: unified lift/scale + sheen sweep on hover */
.btn {
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -140%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .3) 50%, transparent 80%);
    transform: skewX(-18deg);
    pointer-events: none;
  }
}
@media (hover: hover) and (pointer: fine) {
.btn:hover {
    transform: translateY(-4px) scale(1.03);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.btn:hover::after {
    left: 150%;
    transition: left .55s ease;
  }
}

/* Body-copy links: animated underline sweep (background-image = no CLS) */
main p a:not(.btn),
main cite a,
main blockquote a {
  text-decoration: none;
  background-image: linear-gradient(var(--accent-gold), var(--accent-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size .35s cubic-bezier(.22, 1, .36, 1);
  padding-bottom: 2px;
}
@media (hover: hover) and (pointer: fine) {
main p a:not(.btn):hover,
main cite a:hover,
main blockquote a:hover {
    background-size: 100% 1.5px;
  }
}

/* Heading reveals (class applied by JS only to below-the-fold headings) */
.xs-motion .xs-h {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.xs-motion .xs-h.xs-h-in {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION - final hard stop for everything in this file
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.xs-hero-ambient::after,
.bottom-cta .bg-x,
.xs-line-inner,
.nav-links.active,
.nav-links.xs-closing {
    animation: none !important;
  }
.xs-parallax {
    transform: none !important;
    will-change: auto;
  }
.xs-h,
.xs-line-inner,
.xs-hero .hero-subtitle,
.xs-hero .hero-description,
.xs-hero .hero-content>.btn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   §11 BOOKING PAGE - conversion microcopy styles
   ══════════════════════════════════════════════════════════════════════ */
.xs-form-note {
  margin-top: 1rem;
  font-size: var(--fs-11);
  letter-spacing: .5px;
  line-height: 1.5;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
}
.xs-optional {
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   §12 ACCESSIBILITY - skip-to-content link (visible only on focus)
   ══════════════════════════════════════════════════════════════════════ */
.xs-skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  background: var(--accent-gold);
  color: #000;
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  transition: top .2s ease;
}
.xs-skip-link:focus {
  top: 1rem;
  outline: 2px solid #000;
  outline-offset: 2px;
}
/* ══════════════════════════════════════════════════════════════════════
   §13 BOOKING PAGE, MOBILE - form first, tighter arrival
   Most booking traffic is mobile; the pitch panel was pushing the form
   a full screen down. The form now leads and the pitch follows.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 859px) {

  /* less dead space above the form on arrival */
.hero-book { padding-top: 110px !important; padding-bottom: 50px !important; }
.inquiry-grid { gap: 2.5rem; }
}

/* §13b - mobile form intro (hidden on desktop, where the pitch panel leads) */

/* §11b - step buttons centered (note removed, button is the sole focus) */
.step-actions--next {
  display: flex;
  justify-content: center;
}

/* §11c - Booking steps follow the field rhythm (2026-10-20): the button sits
   one field gap (2rem) below the last item, with no divider, on both steps.
   Step 1 now stacks Continue over the same "Prefer email?" note as step 2,
   so the note stays in place when the visitor moves between steps. */
#step-1 .step-actions,
#step-2 .step-actions { margin-top: 0; padding-top: 0; border-top: 0; }
#step-1 .step-actions.step-actions--next { flex-direction: column; align-items: stretch; }
#leadTimeNote { margin-bottom: 2rem; }

/* §12 - Coming Soon teaser (services/speaking.html). Deliberately quiet:
   muted card, outline badge, text link only, so it never competes with the
   keynote CTAs above it. */

/* §14 - "Pick your keynote" chooser (services/speaking.html and index.html) */
.xs-choose {
  padding: 5rem 1.5rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}
.xs-choose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.xs-choose-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--accent-gold);
  border-radius: 10px;
}
.xs-choose-tag {
  color: var(--accent-gold);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.16em;
}
.xs-choose-title {
  font-size: var(--fs-35);
  font-weight: 900;
  line-height: 1.05;
  margin: 0.75rem 0 0.75rem;
}
.xs-choose-promise {
  font-size: var(--fs-18);
  color: var(--text-main);
  line-height: 1.45;
  margin: 0 0 1rem;
}
.xs-choose-for {
  font-size: var(--fs-14);
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.xs-choose-for strong { color: var(--text-main); }
.xs-choose-label {
  color: var(--accent-gold);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.xs-choose-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.xs-choose-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-14);
  color: var(--text-muted);
  line-height: 1.55;
}
.xs-choose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--accent-gold);
  border-radius: 50%;
}
.xs-choose-list strong { color: var(--text-main); }
.xs-choose-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.xs-choose-more {
  color: var(--accent-gold);
  font-size: var(--fs-14);
  font-weight: 700;
  text-decoration: none;
}
.xs-choose-more:hover,
.xs-choose-more:focus-visible {
  color: var(--accent-gold-hover);
  text-decoration: underline;
}
.xs-choose-help {
  text-align: center;
  margin: 2rem 0 0;
  color: var(--text-muted);
  font-size: var(--fs-14);
}
.xs-choose-help a { color: var(--accent-gold); font-weight: 700; }
.xs-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media (max-width: 860px) {
.xs-choose { padding: 3.5rem 1.25rem 3rem; }
.xs-choose-grid { grid-template-columns: 1fr; }
.xs-choose-card { padding: 1.5rem; }
}
.hero-content .hero-title.xs-hero-title {
  font-size: clamp(1.8rem, 4.05vw, 3.3rem);
  line-height: 1.05;
}
.xs-choose { padding-top: 3.5rem; }
.xs-choose-actions .btn {
  white-space: nowrap;
}
@media (max-width: 860px) {
.xs-choose-actions .btn { width: 100%; text-align: center; white-space: normal; }
}
@media (max-width: 600px) {
.xs-hero-actions .btn { width: 100%; text-align: center; }
}
.hero-content .hero-title.xs-hero-title { font-size: clamp(1.7rem, 3.3vw, 2.9rem); }
@layer overrides {
@media (max-width: 600px) {
.hero-content .hero-title.xs-hero-title { font-size: clamp(1.5rem, 8.4vw, 2.2rem) !important; line-height: 1.08 !important; }
  }
}

/* §15 Combined "The Variable" section (homepage). Reuses the site's existing type sizes:
   title = section h2, lead = .bio-lead (1.35rem), body = .bio-story-content (1.05rem), buttons = default .btn */
.xs-about { padding: var(--section-padding-y) var(--section-padding-x); max-width: 1400px; margin: 0 auto; position: relative; z-index: 10; }
.xs-about-title { text-align: center; font-size: 2.5rem; margin: 0 0 3rem; }
.xs-about-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.xs-about .reel-container { margin: 0; max-width: 100%; aspect-ratio: 16 / 9; }
.xs-about .reel-caption { text-align: left; margin-top: 1rem; }
.xs-about-copy { font-size: 1.05rem; line-height: 1.75; color: var(--text-muted); }
.xs-about-copy .bio-lead { font-size: 1.35rem; line-height: 1.4; color: var(--text-main); margin: 0 0 1.25rem; max-width: none; }
.xs-about-copy p { margin: 0 0 1.25rem; }
.xs-about-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.xs-about-actions .btn { flex: 1 1 auto; text-align: center; }
@media (min-width: 992px) {
.xs-about-grid { grid-template-columns: 1.2fr 1fr; gap: 3rem; }
.xs-about .reel-caption { height: 0; margin: 0.9rem 0 0; overflow: visible; }
}

/* §16 Keynote detail pages: own hero photo, flat layout (no boxed card) */
.xs-kn { padding: var(--section-padding-y) var(--section-padding-x); }
.xs-kn-wrap { max-width: 900px; margin: 0 auto; }
.xs-kn-lead { font-size: var(--fs-20); color: var(--text-main); margin-bottom: 1.5rem; line-height: 1.5; }
.xs-kn-wrap > p { line-height: 1.8; }
.xs-kn-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; }
.xs-kn-more { text-align: center; margin-top: 1.5rem; color: var(--text-muted); }
.xs-kn-more a { color: var(--accent-gold); font-weight: 700; }
.xs-kn-wrap > p:not(.xs-kn-lead):not(.xs-kn-more) { color: var(--text-muted); font-size: var(--fs-18); }

/* §17 Seen and Heard (combined media page) */
.xs-media-block { padding: var(--section-padding-y) var(--section-padding-x); max-width: 1200px; margin: 0 auto; scroll-margin-top: 140px; }
.xs-media-block + .xs-media-block { border-top: 1px solid var(--border-color); }
.xs-media-head { text-align: center; margin-bottom: 2.5rem; }
.xs-media-head h2 { font-size: 2.5rem; margin: 0.5rem 0 0; }
.xs-media-note { color: var(--text-muted); margin: 1rem auto 0; max-width: 620px; }
.xs-media-sub { text-align: center; color: var(--accent-gold); font-size: var(--fs-13); letter-spacing: 2px; text-transform: uppercase; margin: 0 0 1.5rem; }
.xs-media-cta { text-align: center; margin-top: 3rem; }
.xs-media-block .testimonials-grid { padding: 0; background: none; border: 0; }
.xs-media-block .testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); }
.xs-media-head { margin-bottom: 3rem; }
.nav-links a,
.navbar .nav-container ul a { white-space: nowrap; }
#press-kit .xs-media-head { margin-bottom: 6rem; }
.nav-cta { white-space: nowrap; }

/* Desktop nav: tighter link spacing so five items plus the button always fit (base layer wins over components for !important) */
@layer base {
@media (min-width: 1025px) {
.nav-links { gap: 2.5rem !important; } }
@media (min-width: 1025px) and (max-width: 1240px) {
.nav-links { gap: 1rem !important; } }
}

/* Showcase hero: audience photo */
.hero-showcase { background-image: radial-gradient(ellipse 42% 62% at 50% 38%, rgba(26, 26, 26, .78) 0%, rgba(26, 26, 26, .5) 55%, rgba(26, 26, 26, 0) 100%), linear-gradient(to bottom, rgba(26, 26, 26, .6) 0%, rgba(26, 26, 26, .3) 50%, rgba(26, 26, 26, .2) 78%, var(--bg-dark) 100%), var(--hero-img) !important; background-size: cover !important; background-position: var(--hero-pos, center) !important; background-repeat: no-repeat !important; display: flex !important; flex-direction: column; justify-content: center; height: auto !important; min-height: clamp(560px, 72vh, 740px) !important; padding-top: 233px !important; padding-bottom: 60px !important; }
.hero-showcase .hero-content { margin-top: 0; padding-top: 0; width: 100%; }
.hero-img-media { --hero-img: url(../images/backgrounds/media-hero.webp?v=3); --hero-pos: center 10%; --hero-pos-m: 84% center; }
.hero-img-about { --hero-img: url(../images/backgrounds/about-hero.webp); --hero-pos: center 44%; --hero-pos-m: center 30%; }
.hero-img-speaking { --hero-img: url(../images/backgrounds/speaking-hero.webp); --hero-pos: center 15%; }
.hero-img-corporate { --hero-img: url(../images/backgrounds/corporate-hero.webp); --hero-pos: center 30%; }
.hero-img-community { --hero-img: url(../images/backgrounds/community-hero.webp); --hero-pos: 22% 15%; }
.hero-img-advisory { --hero-img: url(../images/backgrounds/advisory-hero.webp); --hero-pos: center; }
.hero-img-coaching { --hero-img: url(../images/backgrounds/coaching-hero.webp); --hero-pos: center 12%; }

/* Keynote and coming-soon page copy blocks */
.xs-kn-h { font-size: var(--fs-13); letter-spacing: 2px; text-transform: uppercase; color: var(--accent-gold); font-weight: 700; margin: 2.5rem 0 1rem; }
.xs-kn-list { padding-left: 1.4rem; margin: 0 0 2rem; color: var(--text-muted); font-size: var(--fs-18); line-height: 1.7; }
.xs-kn-list li { margin-bottom: 0.75rem; padding-left: 0.4rem; }
.xs-kn-list li::marker { color: var(--accent-gold); font-weight: 700; }
.xs-kn-facts { color: var(--text-muted); line-height: 1.9; border-top: 1px solid var(--border-color); padding-top: 1.5rem; }
.xs-kn-facts strong { color: var(--text-main); }
.xs-kn-wrap .gold-quote-block { margin: 2rem 0; }
.xs-fit { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1rem; }
.xs-fit li { border-left: 3px solid var(--accent-gold); padding: 0.25rem 0 0.25rem 1.25rem; color: var(--text-muted); line-height: 1.6; }
.xs-fit strong { display: block; color: var(--text-main); }

/* About video card */
.xs-about-video { position: relative; display: block; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; border: 1px solid rgba(212,175,55,0.35); background: #000; }
.xs-about-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.xs-about-video:hover img { transform: scale(1.03); }
.xs-about-play { position: absolute; inset: 0; margin: auto; width: 80px; height: 80px; border-radius: 50%; background: var(--accent-gold); color: #000; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 0 30px rgba(212,175,55,0.4); }

/* Homepage section rhythm: alternate backgrounds with a gold divider */
.stat-strip + .philosophy-section { background: var(--bg-card) !important; border-top: 1px solid rgba(212,175,55,0.25); border-bottom: 1px solid rgba(212,175,55,0.25); }
.philosophy-section + .testimonials { background: var(--bg-dark) !important; }

/* Site rhythm: alternating section bands (dark, lighter, black CTA) */
.xs-band-alt { background: var(--bg-card) !important; border-top: 1px solid rgba(212,175,55,0.25); border-bottom: 1px solid rgba(212,175,55,0.25); }
.xs-band:not(.xs-band-alt) { background: var(--bg-dark); }
.xs-band + .xs-band .xs-kn-h:first-child { margin-top: 0; }
.xs-band .xs-kn-wrap { max-width: 820px; }

/* X's Formula: always-on card look, hover is a bonus */
.philosophy-header .section-title { background: none !important; -webkit-text-fill-color: var(--accent-gold) !important; color: var(--accent-gold) !important; animation: none !important; }
.philosophy-section .clause-card { background: var(--bg-dark) !important; backdrop-filter: none; border: 1px solid rgba(212,175,55,0.45) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.35); }
.philosophy-section .clause-card::before { transform: scaleX(1) !important; }
.philosophy-section .clause-number { background: var(--gold-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; opacity: .22 !important; }
.philosophy-section .clause-card p { color: #c9c9c4; }
.xs-media-block { max-width: none; padding-left: max(var(--section-padding-x), calc((100% - 1200px) / 2)); padding-right: max(var(--section-padding-x), calc((100% - 1200px) / 2)); }

/* Combined home section: title always sits clear above the video */
.xs-about-title { position: relative; z-index: 2; line-height: 1.2; margin-bottom: 3.5rem; }
.xs-about-grid { position: relative; z-index: 1; margin-top: 0; }

/* Home: title sits directly above the video, left aligned with it */
.xs-about .xs-about-title { text-align: left; font-size: 2rem; margin: 0 0 1.25rem; position: static; }
.xs-about-grid { align-items: center; }
.xs-about-grid { align-items: start; }
.xs-about .xs-about-title { line-height: 1.3; margin-top: 0; }
@media (min-width: 992px) {
.xs-about-copy .bio-lead { margin-top: 0; padding-top: 0.3rem; } }

/* Desktop: title spans the video width; video is vertically centered against the text and buttons */
@media (min-width: 992px) {
.xs-about-grid { align-items: center; }
.xs-about-reel { position: relative; }
.xs-about .xs-about-title { position: absolute; left: 0; bottom: 100%; margin: 0 0 1rem; line-height: 1.1; white-space: nowrap; }
.xs-about-copy .bio-lead { padding-top: 0; }
}
@media (min-width: 992px) {
.xs-about .reel-caption { position: absolute; top: 100%; left: 0; height: auto; margin: 0.9rem 0 0; } }

/* Home combined section, desktop: both columns share the same top and bottom lines */
@media (min-width: 992px) {
.xs-about-grid { align-items: stretch; }
.xs-about-reel { position: relative; display: flex; flex-direction: column; }
.xs-about .xs-about-title { position: static; display: block; margin: 0 0 1rem; line-height: 1.05; white-space: nowrap; }
.xs-about .reel-container { flex: 1 1 auto; aspect-ratio: auto !important; min-height: 340px; height: auto; }
.xs-about .reel-container iframe { width: 100%; height: 100%; }
.xs-about .reel-caption { position: absolute; left: 1.25rem; bottom: 1rem; top: auto; height: auto; margin: 0; z-index: 3; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.9); pointer-events: none; }
.xs-about-copy .bio-lead { margin-top: 0; padding-top: 0; }
}
.xs-about-grid > * { min-width: 0; }
@media (min-width: 992px) {
.xs-about-reel { overflow: visible; }
.xs-about .xs-about-title { overflow: hidden; } }
@media (min-width: 992px) {
.xs-about-grid { grid-template-columns: 1.5fr 1fr; gap: 3rem; } }
@media (min-width: 992px) {
.xs-about-grid { grid-template-columns: 1.25fr 1fr; gap: 3rem; }
.xs-about-copy { font-size: 1rem; line-height: 1.65; }
.xs-about-copy .bio-lead { font-size: 1.25rem; margin-bottom: 1rem; }
.xs-about-copy p { margin-bottom: 1rem; }
.xs-about-actions { margin-top: 1.5rem; }
}

/* Booking: "Book Now." leads the form card on every screen size; steps sit close together */
.funnel-container .step-indicator { justify-content: center; gap: 3.5rem; width: fit-content; margin: 0 auto 2rem; }
.funnel-container .step-indicator .progress-track { left: 16px; right: 16px; top: 15px; }

/* Coming soon teaser: centered in its band, content centered */

/* Booking form: greyed button until complete, red fields when something is missing */
.btn.disabled,
button[aria-disabled="true"] { opacity: .45; filter: grayscale(1); cursor: not-allowed; animation: none !important; }
.xs-missing,
select.xs-missing,
input.xs-missing,
textarea.xs-missing {
  border-color: #ff5a5a !important; box-shadow: 0 0 0 1px rgba(255, 90, 90, .55) !important; background-color: rgba(255, 90, 90, .06) !important; }
/* Open dropdown list: solid dark rows so options stay readable (Windows Chrome/Edge
   paint the list with the select's own see-through background, which turned the
   red "missing" state into white text on pale pink). 2026-10-20 */
.booking-form-native select option,
.booking-form-native select optgroup { background-color: #1a1a1a; color: #ffffff; }
.booking-form-native select option:disabled { color: #999896; }
.xs-missing-note { margin: var(--space-2) 0 0; color: #ff7a7a; font-size: var(--text-sm); font-weight: 700; text-align: center; }

/* Booking: progress line runs from step 1 to the right edge of the card; spacing on the site tokens */
.funnel-container .step-indicator {
  --step-gap: var(--space-6);
  --span-half: calc(var(--step-gap) / 2 + 32px);
  width: calc(50% + var(--span-half) + var(--space-6)); justify-content: flex-start; gap: var(--step-gap);
  margin: 0 0 var(--space-4) calc(50% - var(--span-half)); padding: 0;
}
.funnel-container .step-indicator .progress-track { left: 16px; right: 0; top: 15px; overflow: hidden; }
.funnel-container .step-indicator .progress-fill { max-width: 100%; }
#step-success .success-container { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4) 0 var(--space-2); text-align: center; }
#step-success .success-icon-wrapper { margin: 0; }
#step-success .success-icon { font-size: var(--fs-80); margin: 0; }
#step-success .step-title { margin: 0; font-size: var(--text-2xl); line-height: 1.15; }
#step-success .success-container > p { margin: 0; max-width: 34ch; font-size: var(--text-base); line-height: 1.65; }
#step-success .success-next-steps { width: 100%; max-width: none; margin: 0; padding: var(--space-3); text-align: left; border-radius: 12px; }
#step-success .success-next-steps h4 { margin: 0 0 var(--space-2); text-align: center; font-size: var(--text-sm); letter-spacing: 2px; }
#step-success .success-checklist { display: block; width: 100%; margin: 0; padding: 0; font-size: var(--fs-14); line-height: 1.55; list-style: none; text-align: left; }
#step-success .success-checklist li { position: relative; margin: 0 0 var(--space-2); padding-left: var(--space-4); }
#step-success .success-checklist li:last-child { margin-bottom: 0; }
#step-success .success-checklist .check-icon { position: absolute; left: 0; top: .2rem; width: 1.25rem; margin: 0; text-align: center; }
#step-success .ext-style-98f1ef { width: 100%; flex-direction: column; gap: var(--space-2); }
#step-success .ext-style-98f1ef .btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 480px) {
#step-success .step-title { font-size: var(--text-xl); } }

/* Touch: no double tap delay on buttons and fields (iPad) */
button,
.btn,
select,
input,
textarea,
summary,
a { touch-action: manipulation; }

/* ══════════════════════════════════════════════════════════════════════
   MEDIA PAGE: download center and email gate
   ══════════════════════════════════════════════════════════════════════ */
.dl-group + .dl-group { margin-top: var(--space-8); }
.dl-grid { display: grid; gap: var(--space-3); max-width: 1200px; margin: 0 auto; }
.dl-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-tile { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-card); border: 1px solid var(--border-color); border-top: 3px solid var(--accent-gold); border-radius: 12px; padding: var(--space-3); min-width: 0; }
.dl-preview { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border-radius: 8px; padding: var(--space-2); margin-bottom: var(--space-2); overflow: hidden; }
.dl-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.dl-white { background: #ffffff; }
.dl-black { background: #000000; }
.dl-photo { background: var(--bg-dark); padding: 0; }
.dl-photo img { width: 100%; height: 100%; object-fit: cover; }
.dl-icon { background: var(--bg-dark); color: var(--accent-gold); font-size: var(--text-3xl); }
.dl-title { font-size: var(--text-base); margin: 0 0 var(--space-1); color: var(--text-main); }
.dl-cap { color: var(--text-muted); font-size: var(--fs-14); line-height: 1.5; margin: 0 0 var(--space-2); flex-grow: 1; }
.dl-btn { width: 100%; justify-content: center; text-align: center; }
.dl-meta { color: var(--text-muted); font-size: var(--fs-13); letter-spacing: 1px; margin-top: var(--space-1); }
.dl-bio { align-items: stretch; text-align: left; }
.dl-bio .dl-title { text-align: left; }
.dl-bio-text { color: var(--text-main); line-height: 1.65; margin: 0 0 var(--space-2); flex-grow: 1; }
.dl-basics { max-width: 1200px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-color); border-top: 3px solid var(--accent-gold); border-radius: 12px; padding: var(--space-3); }
.dl-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.dl-swatch { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); background: none; border: 0; color: var(--text-main); cursor: pointer; font-family: inherit; padding: 0; }
.dl-chip { width: 100%; height: 48px; border-radius: 8px; border: 1px solid var(--border-color); display: block; }
.dl-chip-d4af37 { background: #d4af37; }
.dl-chip-f1d570 { background: #f1d570; }
.dl-chip-000000 { background: #000000; }
.dl-chip-1a1a1a { background: #1a1a1a; }
.dl-chip-2c2c2a { background: #2c2c2a; }
.dl-chip-999896 { background: #999896; }
.dl-hex { font-weight: 700; font-size: var(--fs-13); letter-spacing: 1px; }
.dl-sname { color: var(--text-muted); font-size: var(--fs-11); letter-spacing: 1px; text-transform: uppercase; }
.dl-font { text-align: center; color: var(--text-muted); margin: var(--space-3) 0 0; }
.dl-font strong { color: var(--text-main); }
.dl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 1024px) {
.dl-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.dl-grid-4,
.dl-grid-3,
.dl-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
.dl-btn[aria-disabled="true"] { opacity: .45; filter: grayscale(1); cursor: not-allowed; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════
   HOME HERO VIDEO (added only by hero-video.js; otherwise the photo hero stays)
   ══════════════════════════════════════════════════════════════════════ */
.hero-video { display: none; }
.hero.has-video { overflow: visible; }
.hero.has-video .hero-video { display: block; position: absolute; top: var(--xs-nav-h); bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: 0; overflow: hidden; background: #000; }
.hero.has-video .hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .6s ease; }
.hero.has-video .hero-video.is-playing video { opacity: 1; }
.hero.has-video .hero-video::before { content: ""; position: absolute; inset: 0; background: url("../video/hero-poster.jpg") center top / cover no-repeat; }
.hero.has-video .hero-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.85) 100%); }
.hero.has-video .hero-image { display: none; }
.hero.has-video .hero-content { z-index: 2; align-items: center; text-align: center; max-width: 1100px; margin: 0 auto; padding-left: var(--section-padding-x); padding-right: var(--section-padding-x); }
.hero.has-video .hero-subtitle,
.hero.has-video .hero-description,
.hero.has-video .hero-content .btn-primary { margin-left: 0; }
.hero.has-video .xs-hero-actions { justify-content: center; }
/* Gold line is gradient clipped text: a text-shadow paints over the fill and dulls it.
   Keep the gold exact, and lift the title off the video with a drop-shadow on the box instead. */
.hero.has-video .hero-title,
.hero.has-video .hero-title * { text-shadow: none; }
.hero.has-video .hero-title { filter: drop-shadow(0 2px 12px rgba(0,0,0,.5)); }
.hero.has-video .hero-description { text-shadow: 0 2px 20px rgba(0,0,0,.6); }
/* Shorter video hero on tablet and desktop (the photo hero keeps its full height) */
@media (min-width: 768px) {
/* Video fills the screen between the nav bar and the "Organizations served" strip, so the strip is in view. */
.hero.has-video { height: calc(100vh - var(--xs-strip-h, 150px)); min-height: calc(var(--xs-nav-h) + 440px); }
.hero.has-video + .trust-bar { padding: 1.25rem 5% 0; }
.hero.has-video + .trust-bar .logo-carousel { padding: .5rem 0 1rem; }
}
@supports (height: 100svh) {
@media (min-width: 768px) { .hero.has-video { height: calc(100svh - var(--xs-strip-h, 150px)); } }
}
/* The video starts where the nav bar ends, so nothing is hidden behind it. */
.hero.has-video { --xs-nav-h: 173px; padding-top: var(--xs-nav-h); }
@media (max-width: 1024px) { .hero.has-video { --xs-nav-h: 102px; } }
body { overflow-x: clip; }
.hero.has-video .hero-description { color: #e8e8e6; }

/* Hero buttons: same height. The outline button has a 2px border, so give the gold one a matching
   transparent border (gradient painted under it) instead of letting the two differ by 4px. */
.xs-hero-actions .btn { box-sizing: border-box; border: 2px solid transparent; }
.xs-hero-actions .btn-primary { background-origin: border-box; background-clip: border-box; }
.xs-hero-actions .btn-outline { border-color: var(--accent-gold); }

/* ══════════════════════════════════════════════════════════════════════
   BUTTON SYSTEM (one set of rules for every button on the site)
   Type: 14.4px / 700 / 1px tracking / uppercase. Border: 2px on every button
   (transparent on gold ones, so gold and outline are always the same height).
   Sizes: default = 1rem x 2.5rem (58px), .btn-large = 1.25rem x 2.5rem (66px).
   Corners: square. Same on phone and desktop.
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  box-sizing: border-box;
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  border-radius: 0;
  padding: 1rem 2.5rem;
}
.btn.btn-large { padding: 1.25rem 2.5rem; font-size: var(--fs-14); }
.btn-primary { border-color: transparent; background-origin: border-box; background-clip: border-box; }
.btn-outline { border-color: var(--accent-gold); }
.btn.nav-cta { white-space: nowrap; }
.mobile-nav-cta { border-radius: 0; }

/* Proof stats on phones: two across, and an odd last one centered on its own row */
@media (max-width: 899px) {
.stat-strip-grid .stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; max-width: 18rem; }
}
.nav-container > .btn { border-radius: 0; }
/* Phones: slimmer side padding on every button so labels stay on one line (height stays the same) */
@media (max-width: 480px) {
.btn,
.btn.btn-large { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   TESTIMONIALS: two stacked cards, quote and logo alternating sides, random rotation
   ══════════════════════════════════════════════════════════════════════ */
.xs-tr-host { max-width: 1100px; margin: 0 auto; }
.carousel-container.xs-tr-host { -webkit-mask-image: none; mask-image: none; overflow: visible; }
.xs-tr { display: flex; flex-direction: column; gap: var(--space-3); }
.xs-tr-card { display: grid; margin: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-top: 3px solid var(--accent-gold); border-radius: 12px; overflow: hidden; transition: height .45s ease; }
.xs-tr-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: stretch; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.xs-tr-rev .xs-tr-slide { grid-template-columns: 280px minmax(0, 1fr); }
.xs-tr-rev .xs-tr-logo { order: -1; border-left: 0; border-right: 1px solid var(--border-color); }
.xs-tr-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.xs-tr-text { min-width: 0; padding: var(--space-6); align-self: center; }
.xs-tr-quote { margin: 0 0 var(--space-3); color: var(--text-main); font-size: var(--fs-16); line-height: 1.7; }
.xs-tr-author { display: flex; flex-direction: column; gap: 0.25rem; padding-top: var(--space-2); border-top: 1px solid var(--border-color); }
.xs-tr-author strong { color: var(--accent-gold); font-size: var(--fs-14); letter-spacing: 1px; text-transform: uppercase; }
.xs-tr-author span { color: var(--text-muted); font-size: var(--fs-14); line-height: 1.4; }
.xs-tr-logo { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4); border-left: 1px solid var(--border-color); }
.xs-tr-logo img { display: block; max-width: 160px; max-height: 120px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
.xs-tr-logo span { display: block; max-width: 160px; color: var(--text-main); opacity: .9; font-weight: 900; font-size: var(--fs-14); letter-spacing: 2px; text-transform: uppercase; line-height: 1.5; }
@media (max-width: 760px) {
.xs-tr-slide,
.xs-tr-rev .xs-tr-slide { grid-template-columns: minmax(0, 1fr); }
.xs-tr-logo,
.xs-tr-rev .xs-tr-logo { order: -1; border: 0; border-bottom: 1px solid var(--border-color); padding: var(--space-3); }
.xs-tr-text { padding: var(--space-3); }
.xs-tr-logo img { max-width: 120px; max-height: 64px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT PAGE: same pattern as Speaking and Media (centered hero, labeled blocks, alternating bands)
   ══════════════════════════════════════════════════════════════════════ */
.xs-about-video-wrap { max-width: 900px; margin: 0 auto; }
.xs-story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; max-width: 1100px; margin: 0 auto; }
.xs-story-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.xs-story-rev .xs-story-photo { order: -1; }
.xs-story-text p { color: var(--text-muted); font-size: var(--fs-18); line-height: 1.8; margin: 0 0 var(--space-3); }
.xs-story-text p:last-child { margin-bottom: 0; }
.xs-story-photo { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); border-top: 3px solid var(--accent-gold); background: var(--bg-card); position: sticky; top: 140px; }
.xs-story-photo img { display: block; width: 100%; height: auto; }
.xs-pull { text-align: center; padding: var(--section-padding-y) var(--section-padding-x); }
.xs-pull-quote { margin: 0 auto; max-width: 900px; font-size: var(--fs-39); font-weight: 900; line-height: 1.25; color: var(--text-main); }
.xs-pull-by { margin: var(--space-3) 0 0; color: var(--accent-gold); font-size: var(--fs-13); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
@media (max-width: 899px) {
.xs-story,
.xs-story-rev { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.xs-story-photo,
.xs-story-rev .xs-story-photo { order: -1; position: static; max-width: 420px; margin: 0 auto; width: 100%; }
.xs-pull-quote { font-size: var(--fs-25); }
}

/* ---- v45: no small eyebrow labels; About story quotes ---- */
.protocol-hero .hero-subtitle,
.service-card-tag { display: none !important; }

/* ---- v46: Knowledge Base (Book page) organized into groups with scannable answers ---- */
.faq-section .faq-category { margin-bottom: var(--space-6); }
.faq-section .faq-category:last-child { margin-bottom: 0; }
.faq-section .faq-category h3 { margin-bottom: var(--space-3); }
.faq-section .faq-answer { padding: 0 1.5rem 1.5rem; }
.faq-section .faq-answer p { margin: 0 0 var(--space-2); }
.faq-section .faq-answer p:last-child,
.faq-section .faq-answer ul:last-child { margin-bottom: 0; }
.faq-section .faq-answer .faq-lead { color: var(--text-main); font-weight: 700; font-size: inherit; margin-bottom: var(--space-1); }
.faq-section .faq-answer ul.faq-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.faq-section .faq-answer ul.faq-list li { position: relative; padding: 0 0 0 var(--space-4); margin: 0 0 var(--space-1); }
.faq-section .faq-answer ul.faq-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 2px; background: var(--accent-gold); }
.faq-section .faq-answer strong { color: var(--text-main); font-weight: 700; }
.faq-section .faq-answer p + .faq-lead { margin-top: var(--space-3); }

/* ---- v50: Montserrat served from this site (no Google Fonts request) ---- */@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/montserrat-regular.woff2) format("woff2"); }@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-bold.woff2) format("woff2"); }@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/montserrat-black.woff2) format("woff2"); }
.hero-showcase h1,
.hero-showcase .hero-description { filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
.hero-showcase .hero-description { color: var(--text-main); }

/* ---- v55: give the homepage video hero the same brightness/impact as the inner-page heroes ---- */
.hero.has-video .hero-description { color: var(--text-main); filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }

/* ---- v54: About page quote bands between story sections ---- */
.xs-pull-quote.xs-pull-long { font-size: var(--fs-31); }
.xs-pull.xs-band-alt { background: var(--bg-card); }
@media (max-width: 899px) {
.xs-pull-quote.xs-pull-long { font-size: var(--fs-22); } }

/* v56 video carousel */
.xs-vc { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 60px; }
.xs-vc-track { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.xs-vc-track::-webkit-scrollbar { display: none; }
.xs-vc-track > .video-card { flex: 0 0 calc((100% - 3 * var(--space-2)) / 4); scroll-snap-align: start; min-width: 0; }
.xs-vc-btn { position: absolute; top: 32%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent-gold); background: rgba(26,26,26,.85); color: var(--accent-gold); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.xs-vc-btn[hidden] { display: none; }
.xs-vc-prev { left: 0; }
.xs-vc-next { right: 0; }
@media (max-width: 1000px) {
.xs-vc-track > .video-card { flex-basis: calc((100% - var(--space-2)) / 2); } }
@media (max-width: 640px) {
.xs-vc { padding: 0 0 64px; }
.xs-vc-track > .video-card { flex-basis: 85%; }
.xs-vc-btn { top: auto; bottom: 0; transform: none; }
.xs-vc-prev { left: calc(50% - 52px); }
.xs-vc-next { right: auto; left: calc(50% + 8px); } }

/* v65 media hero: keep Xavier in frame on phones */
@media (max-width: 640px) {
.hero-showcase { background-position: var(--hero-pos-m, var(--hero-pos, center)) !important; } }

/* v73 booking page: two columns from 860px (was 1024px) */
@media (min-width: 860px) {
.inquiry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(1.5rem, 4vw, 6rem) !important; align-items: start; }
.inquiry-grid .inquiry-context { padding: clamp(1.5rem, 2.6vw, 2.5rem) !important; }
.inquiry-grid .inquiry-context h1 { font-size: min(3rem, 4.2vw) !important; }
}

/* v75 hero text centered in the visible photo (below the nav): top padding = nav height + bottom padding */
@media (max-width: 1023px) {
.hero-showcase { padding-top: 162px !important; } }

/* v76 booking page: headline and summary above the form on small screens; proof and testimonials under the form */
@media (max-width: 859px) {
.inquiry-grid .inquiry-context { text-align: center; } }
.xs-book-note { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--fs-14); line-height: 1.5; }
.xs-book-mail { color: var(--accent-gold); font-weight: 700; text-decoration: none; }
.xs-book-mail:hover, .xs-book-mail:focus-visible { text-decoration: underline; }
@media (min-width: 860px) {
.hero-book.inquiry-section { padding-top: 130px !important; } }
@media (min-width: 1024px) {
.hero-book.inquiry-section { padding-top: 205px !important; } }

/* v84 footer: contact line along the bottom */
.footer-contact { max-width: 1400px; margin: var(--space-6) auto 0; padding-top: var(--space-3); border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-3); align-items: baseline; font-size: var(--fs-13); letter-spacing: 1px; }
.footer-contact a { color: var(--text-main); }
.footer-contact span { color: var(--text-muted); }
@media (max-width: 480px) {
.footer-contact { margin-left: 1.25rem; margin-right: 1.25rem; } }

/* Balanced line breaks in hero descriptions, no lone last word */
.hero-description { text-wrap: balance; }

/* Video player window (media page): the video sits in the exact center of the browser window */
.xs-vm { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(0,0,0,.94); }
.xs-vm[hidden] { display: none; }
.xs-vm-open { overflow: hidden; }
.xs-vm-frame { position: relative; width: min(1000px, 100%, calc((100vh - 160px) * 16 / 9)); margin: 0 auto; }
.xs-vm-screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--border-color); }
.xs-vm-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xs-vm-close { position: fixed; right: var(--space-4); top: var(--space-4); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--accent-gold); background: rgba(26,26,26,.9); color: var(--accent-gold); cursor: pointer; display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .xs-vm { padding-left: var(--space-2); padding-right: var(--space-2); } .xs-vm-close { right: var(--space-2); top: var(--space-2); } }

/* CONSULTING PAGES: Men's Coaching and Advisory page-specific layouts (xp- shared, cx- coaching, ax- advisory) */
.xp-sec{padding:5.5rem 0}
.xp-sec.xp-deep{background:var(--bg-deeper)}
.xp-sec.xp-card{background:var(--bg-card);border-top:1px solid rgba(212,175,55,.25);border-bottom:1px solid rgba(212,175,55,.25)}
.xp-wrap{max-width:1080px;margin:0 auto;padding:0 5%}
.xp-h{font-size:clamp(1.9rem,4.2vw,3.1rem);font-weight:800;line-height:1.08;letter-spacing:-.01em;color:var(--text-main);margin:0 0 2rem;max-width:18ch}
.xp-h.wide{max-width:26ch}
.xp-p{font-size:var(--fs-18);line-height:1.75;color:#c9c9c4;max-width:62ch;margin:0 0 1.25rem}
.xp-p.big{font-size:var(--fs-22);line-height:1.5;color:var(--text-main)}
.xp-split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.xp-gold{color:var(--accent-gold)}

/* coaching: the gap */
.cx-gap svg{width:100%;height:auto;display:block;margin:1rem 0 3rem;overflow:visible}
.cx-gap svg text{font-family:inherit}
/* The gap closes, the lines merge into one, then it opens again, on a loop. Plays only while on screen. */
.cx-gap .gap-low,.cx-gap .gap-measure,.cx-gap .gap-done{animation-duration:9s;animation-iteration-count:infinite;animation-play-state:paused}
.cx-gap.is-playing .gap-low,.cx-gap.is-playing .gap-measure,.cx-gap.is-playing .gap-done{animation-play-state:running}
.cx-gap .gap-low{animation-name:cx-close;animation-timing-function:cubic-bezier(.65,0,.25,1)}
.cx-gap .gap-measure{animation-name:cx-measure;animation-timing-function:linear}
.cx-gap .gap-done{opacity:0;animation-name:cx-done;animation-timing-function:linear}
@keyframes cx-close{0%,18%{transform:translateY(0)}52%,76%{transform:translateY(-110px)}96%,100%{transform:translateY(0)}}
@keyframes cx-measure{0%,40%{opacity:1}50%,84%{opacity:0}96%,100%{opacity:1}}
@keyframes cx-done{0%,52%{opacity:0}58%,74%{opacity:1}82%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cx-gap .gap-low,.cx-gap .gap-measure,.cx-gap .gap-done{animation:none}}

/* coaching: the question */
.cx-q{font-size:clamp(3.2rem,11vw,8.5rem);font-weight:900;line-height:.95;letter-spacing:-.03em;color:var(--text-main);margin:0}
.cx-q span{color:var(--accent-gold)}

/* coaching: timeline */
.cx-time{list-style:none;margin:3rem 0 0;padding:0}
.cx-time li{display:grid;grid-template-columns:7rem 1fr;gap:0 2.5rem;position:relative;padding-bottom:3rem}
.cx-time li::before{content:"";position:absolute;left:calc(7rem + 1.25rem);top:1rem;bottom:-1rem;width:2px;background:rgba(212,175,55,.45)}
.cx-time li:last-child::before{display:none}
.cx-time li::after{content:"";position:absolute;left:calc(7rem + 1.25rem - 5px);top:.9rem;width:12px;height:12px;border-radius:50%;background:var(--accent-gold)}
.cx-age{font-size:clamp(3rem,6vw,4.5rem);font-weight:900;line-height:.9;color:var(--accent-gold);text-align:right;letter-spacing:-.03em}
.cx-time p{margin:0;max-width:56ch;font-size:var(--fs-18);line-height:1.7;color:#c9c9c4;padding-left:1.25rem}
.cx-time strong{color:var(--text-main)}

/* coaching: fit ledger */
.cx-ledger{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--accent-gold);margin-top:1rem}
.cx-ledger>div{padding:2rem 2.5rem 1rem 0}
.cx-ledger>div+div{padding:2rem 0 1rem 2.5rem;border-left:1px solid var(--border-color)}
.cx-ledger h3{font-size:var(--fs-22);font-weight:800;margin:0 0 1.25rem;color:var(--text-main)}
.cx-ledger .no h3{color:var(--text-muted)}
.cx-ledger p{margin:0;padding:.9rem 0;border-top:1px solid var(--border-color);font-size:var(--fs-16);line-height:1.6;color:#c9c9c4}
.cx-ledger .no p{color:var(--text-muted)}

/* shared: definition rows */
.xp-dl{margin:1rem 0 0;border-top:1px solid var(--border-color)}
.xp-dl div{display:grid;grid-template-columns:minmax(10rem,16rem) 1fr;gap:2rem;padding:1.4rem 0;border-bottom:1px solid var(--border-color)}
.xp-dl dt{font-size:var(--fs-22);font-weight:800;color:var(--text-main)}
.xp-dl dd{margin:0;color:#c9c9c4;font-size:var(--fs-18);line-height:1.6;max-width:56ch}

.xp-close{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;line-height:1.25;max-width:24ch;margin:0;color:var(--text-main)}
.xp-close span{color:var(--text-muted)}

/* advisory: policy vs ramp */
.ax-vs{display:grid;grid-template-columns:1fr 1fr;gap:0}
.ax-vs>div{padding:0 3rem 0 0}
.ax-vs>div+div{padding:0 0 0 3rem;border-left:2px solid var(--accent-gold)}
.ax-vs h3{font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1;margin:0 0 1.25rem;letter-spacing:-.02em}
.ax-vs .pol h3{color:var(--text-muted)}
.ax-vs .pol p{color:var(--text-muted)}
.ax-vs .ramp h3{color:var(--accent-gold)}
.ax-vs p{font-size:var(--fs-20);line-height:1.55;margin:0;max-width:30ch;color:var(--text-main)}

/* advisory: findings log */
.ax-log-box{border:1px solid rgba(212,175,55,.5);background:var(--bg-card)}
.ax-log-title{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.5rem;border-bottom:1px solid rgba(212,175,55,.5);background:var(--bg-black);font-size:var(--fs-14);font-weight:700;color:var(--accent-gold)}
.ax-log-title span:last-child{color:var(--text-muted);font-weight:500}
.ax-log{width:100%;border-collapse:collapse}
.ax-log th{text-align:left;padding:1rem 1.5rem .6rem;font-size:var(--fs-13);font-weight:600;color:var(--text-muted)}
.ax-log td{padding:1.25rem 1.5rem;border-top:1px solid var(--border-color);vertical-align:top;font-size:var(--fs-16);line-height:1.55;color:#c9c9c4}
.ax-log td:first-child{font-weight:800;color:var(--text-main);width:20%}
.ax-log td:last-child{font-weight:900;color:var(--accent-gold);font-size:var(--fs-20);width:18%;line-height:1.25}
.ax-log-note{margin:1rem 0 0;font-size:var(--fs-14);color:var(--text-muted)}

/* advisory: the path of one person's day */
.ax-path{display:grid;grid-template-columns:repeat(3,1fr);gap:0 2.5rem;position:relative;margin-top:3.5rem}
.ax-path::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(to right,var(--accent-gold),rgba(212,175,55,.25))}
.ax-path>div{position:relative;padding-top:2.25rem}
.ax-path>div::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--bg-dark);border:3px solid var(--accent-gold)}
.xp-deep .ax-path>div::before{background:var(--bg-deeper)}
.ax-path h3{font-size:var(--fs-22);font-weight:800;margin:0 0 .75rem;color:var(--text-main)}
.ax-path p{margin:0;color:#c9c9c4;line-height:1.65;font-size:var(--fs-16)}

/* advisory: statement, testimonial, not-list */
.ax-big{font-size:clamp(2rem,5vw,3.6rem);font-weight:900;line-height:1.1;letter-spacing:-.02em;margin:0 0 2rem;max-width:20ch;color:var(--text-main)}
.ax-quote{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:700;line-height:1.35;color:var(--text-main);max-width:30ch;margin:0 0 1.5rem;font-style:italic}
.ax-quote-by{color:var(--accent-gold);font-weight:700;font-size:var(--fs-16)}
.ax-not{margin:1rem 0 0;padding:0;list-style:none}
.ax-not li{display:grid;grid-template-columns:minmax(14rem,1fr) 1.4fr;gap:2rem;align-items:baseline;padding:1.5rem 0;border-top:1px solid var(--border-color)}
.ax-not li:last-child{border-bottom:1px solid var(--border-color)}
.ax-not strong{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:var(--text-main);text-decoration:line-through;text-decoration-color:var(--accent-gold);text-decoration-thickness:4px}
.ax-not span{color:#c9c9c4;font-size:var(--fs-18);line-height:1.55}

@media (max-width:820px){
  .xp-sec{padding:3.5rem 0}
  .xp-split,.cx-ledger,.ax-vs,.ax-not li,.xp-dl div{grid-template-columns:1fr;gap:1rem}
  .cx-ledger>div,.cx-ledger>div+div{padding:1.5rem 0 .5rem;border-left:0}
  .cx-ledger>div+div{border-top:1px solid var(--border-color)}
  .ax-vs>div,.ax-vs>div+div{padding:0 0 2rem;border-left:0}
  .ax-vs>div+div{padding-top:2rem;border-top:2px solid var(--accent-gold)}
  .cx-time li{grid-template-columns:4.5rem 1fr;gap:0 1.5rem}
  .cx-time li::before{left:calc(4.5rem + .75rem)}
  .cx-time li::after{left:calc(4.5rem + .75rem - 5px)}
  .ax-path{grid-template-columns:1fr;gap:2.5rem 0;padding-left:2rem}
  .ax-path::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .ax-path>div{padding-top:0}
  .ax-path>div::before{left:-2rem;top:.15rem}
  .ax-log thead{display:none}
  .ax-log,.ax-log tbody,.ax-log tr,.ax-log td{display:block;width:100%!important}
  .ax-log tr{border-top:1px solid var(--border-color);padding:1rem 0}
  .ax-log td{border:0;padding:.35rem 1.25rem}
  .ax-log td::before{content:attr(data-label);display:block;font-size:var(--fs-13);color:var(--text-muted);font-weight:600}
}

/* COMING SOON for services that are not open yet (Men's Coaching, Advisory).
   The whole page renders blurred and the visitor can scroll through all of it (nothing is clipped).
   A floating "join the waitlist" card (.cs-wait) appears partway down and can be dismissed to keep
   scrolling without joining. The bottom CTA (.cta-wait-form) carries the same join-list action.
   To open a service: remove class "cs-soon" from its <body> and delete the .cs-wait card + data-wait-topic
   attribute from the page. The blur, the card and the lock all turn off. */
.cs-soon .cs-peek{position:relative}
.cs-soon .cs-peek > section{filter:grayscale(1) brightness(.5) blur(16px);pointer-events:none;user-select:none}
.cs-soon .cs-peek::after{content:"";position:absolute;left:0;right:0;bottom:0;height:460px;background:linear-gradient(to bottom,rgba(0,0,0,0),#000 96%);pointer-events:none}

/* Floating waitlist card, centered on screen. It stays pinned (position:fixed) while the
   visitor scrolls through the blurred preview, then unpins itself (see consulting.js) once
   they reach the bottom of .cs-peek, so it never covers the real "Coming soon" CTA. */
.cs-wait{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:min(440px,calc(100% - 2rem));z-index:500;background:rgba(12,12,12,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(212,175,55,.35);border-radius:14px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease}
.cs-wait.is-visible{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.cs-wait-close{position:absolute;top:.5rem;right:.6rem;background:none;border:0;color:var(--text-muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:.5rem}
.cs-wait-close:hover{color:var(--text-main)}
.cs-wait-label{color:var(--accent-gold);font-size:var(--fs-22);font-weight:900;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 .75rem;text-align:center}
.cs-wait-copy{color:var(--text-muted);font-size:var(--fs-16);line-height:1.5;margin:0 0 1.25rem;text-align:center}
.cs-wait-form{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.cs-wait-form input[type=email]{flex:1 1 180px;min-width:0;background:#0000004d;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:.85rem 1rem;color:var(--text-main);font-family:Montserrat,sans-serif;font-size:var(--fs-14)}
.cs-wait-form input[type=email]:focus{outline:none;border-color:var(--accent-gold);box-shadow:0 0 0 3px #d4af3726}
.cs-wait-form button{flex:0 0 auto;white-space:nowrap}
.cs-wait-note{color:var(--text-muted);font-size:var(--fs-13);margin:.85rem 0 0;text-align:center}
.cs-wait[data-state=error] input[type=email]{border-color:#e05d5d}
@media(max-width:600px){.cs-wait{width:calc(100% - 2rem);padding:1.5rem}}

/* Bottom CTA inline waitlist form (replaces the old link-out-to-booking-page button) */
.cta-wait-form{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;max-width:460px;margin:0 auto}
.cta-wait-form input[type=email]{flex:1 1 220px;background:#0000004d;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:1.1rem 1.25rem;color:var(--text-main);font-family:Montserrat,sans-serif;font-size:var(--fs-16)}
.cta-wait-form input[type=email]:focus{outline:none;border-color:var(--accent-gold);box-shadow:0 0 0 3px #d4af3726}
.cta-wait-note{color:var(--text-muted);font-size:var(--fs-13);margin-top:1rem}
.cta-wait-note[data-state=error]{color:#e8847f}

/* ---- v103: Keynote pages (Solve For X, Why Me Became Watch Me), 2026-10-15. Rollback: delete this block. ---- */
.xs-kn-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; position: relative; z-index: 1; }
.xs-strike { position: relative; display: inline-block; color: var(--text-muted); }
.xs-strike::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; top: 50%; height: 0.09em; background: var(--gold-gradient); transform: rotate(-3deg); }
.xs-kn .xs-tr-host { max-width: 1000px; }
.xs-kn-tr .xs-tr-slide { opacity: 1; visibility: visible; }
.xs-kn-list li strong { color: var(--text-main); }
.xs-kn-wrap > p + p:not(.xs-kn-more):not(.xs-kn-facts) { margin-top: 1rem; }

/* ---- v104: Keynote pages, At a Glance, Booking Window, Timeline; home method line. 2026-10-15. Rollback: delete this block. ---- */
.xs-glance .section-title { text-align: center; margin: 0 auto 2.5rem; }
.xs-glance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xs-glance .xs-choose-list { margin-bottom: 0; }
.xs-glance .xs-choose-tag { margin-bottom: 1.25rem; }
.xs-glance-note { max-width: 900px; margin: 1.5rem auto 0; text-align: center; color: var(--text-muted); font-size: var(--fs-14); line-height: 1.6; }
.xs-kn .xs-kn-wrap > p.xs-window-now { font-size: var(--fs-29); font-weight: 900; color: var(--text-main); line-height: 1.2; margin: 0 0 2rem; }
.xs-window-now span { color: var(--accent-gold); }
.xs-window-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.xs-window-steps li { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border-color); border-top: 3px solid var(--accent-gold); border-radius: 10px; }
.xs-window-num { color: var(--accent-gold); font-weight: 900; font-size: var(--fs-22); }
.xs-window-steps strong { color: var(--text-main); text-transform: uppercase; letter-spacing: 1px; font-size: var(--fs-14); }
.xs-window-steps li > span:last-child { color: var(--text-muted); font-size: var(--fs-14); line-height: 1.6; }
.xs-tl { list-style: none; margin: 0; padding: 0 0 0 1.75rem; position: relative; display: flex; flex-direction: column; gap: 2rem; }
.xs-tl::before { content: ""; position: absolute; left: 0.35rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--gold-gradient); transform-origin: top; }
.xs-tl-item { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1.25rem; }
.xs-tl-item::before { content: ""; position: absolute; left: -1.75rem; top: 0.35rem; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-dark); border: 2px solid var(--accent-gold); }
.xs-tl-year { color: var(--accent-gold); font-weight: 900; font-size: var(--fs-22); line-height: 1.1; }
.xs-tl-body strong { color: var(--text-main); font-size: var(--fs-18); text-transform: uppercase; letter-spacing: .5px; }
.xs-tl-date { display: block; color: var(--accent-gold); font-size: var(--fs-11); letter-spacing: 2px; text-transform: uppercase; margin-top: 0.25rem; }
.xs-tl-body p { margin: 0.5rem 0 0; color: var(--text-muted); line-height: 1.65; }
.xs-motion .xs-tl::before { transform: scaleY(0); transition: transform 1.4s cubic-bezier(.19, 1, .22, 1) .2s; }
.xs-motion .xs-tl.active::before { transform: scaleY(1); }
.xs-motion .xs-tl .xs-tl-item:nth-child(2) { transition-delay: .12s; }
.xs-motion .xs-tl .xs-tl-item:nth-child(3) { transition-delay: .24s; }
.xs-motion .xs-tl .xs-tl-item:nth-child(4) { transition-delay: .36s; }
.xs-motion .xs-glance-grid .xs-choose-card:nth-child(2) { transition-delay: .14s; }
.xs-motion .xs-glance-grid .xs-choose-card:nth-child(3) { transition-delay: .28s; }
.xs-motion .xs-window-steps li { transition: transform .3s ease, border-color .3s ease; }
.xs-motion .xs-window-steps li:hover, .xs-motion .xs-glance .xs-choose-card:hover { transform: translateY(-4px); }
.xs-glance .xs-choose-card { transition: transform .3s ease; }
.xs-motion .subpage-hero .italic-accent { background-size: 200% auto; animation: shimmer 6s linear infinite; }
.xs-about-method { border-left: 3px solid var(--accent-gold); padding-left: 1.25rem; }
.xs-about-method strong { color: var(--accent-gold); }
@media (max-width: 900px) {
  .xs-glance-grid, .xs-window-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .xs-tl-item { grid-template-columns: 1fr; gap: 0.25rem; }
  .xs-kn .xs-kn-wrap > p.xs-window-now { font-size: var(--fs-22); }
}
@media (prefers-reduced-motion: reduce) {
  .subpage-hero .italic-accent { animation: none; }
}

/* ---- v105: keynote pages, actions sit under At a Glance. Rollback: delete this block. ---- */
.xs-glance .xs-kn-actions { margin-top: 2.5rem; }
.xs-glance .xs-kn-more { text-align: center; margin-top: 1.5rem; color: var(--text-muted); }
.xs-glance .xs-kn-more a { color: var(--accent-gold); font-weight: 700; }

/* ---- v106: speaking page, stacked coming-soon cards. Rollback: delete this line. ---- */

/* ---- v107: one spacing rhythm for the whole site, matching the homepage. ----
   Every content band keeps 64px (--section-padding-y) between its edge and its content,
   with no extra margins stacked on top. Headings sit 2.5rem above their content, like "What They Say".
   Rollback: delete this block. */
.philosophy-section,
.faq-section,
.xs-choose { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
@media (min-width: 768px) {
  .philosophy-section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
}
.philosophy-header { margin-bottom: 2.5rem; }
.philosophy-header .section-title { margin-bottom: 0; }
.faq-header { margin-bottom: 2.5rem; }
.faq-header .section-title { margin-bottom: 0; }
.xs-glance .section-title { margin-bottom: 2.5rem; }
.xs-kn-wrap > .xs-kn-h:first-child { margin-top: 0; }
.xs-kn-wrap > :last-child,
.xs-kn-wrap > .gold-quote-block:last-child { margin-bottom: 0; }
.xs-media-head h2 { margin-top: 0; }

/* ---- v108: keynote pages, "who it's for / what they leave with" split.
   Replaces the long stacked numbered list + facts paragraph on Solve For X and
   Why Me Became Watch Me with two boxes side by side, matching the brief look
   Xavier wanted. Rollback: delete this block and restore .xs-kn-h/.xs-kn-list/
   .xs-kn-facts in the two keynote pages. Added 2026-10-16. ---- */
.xs-kn-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 0 0 2.5rem;
}
.xs-kn-wrap > .xs-kn-split:first-child { margin-top: 0; }
.xs-kn-split-col { padding: 2.25rem 2rem; }
.xs-kn-split-col h3 {
  font-size: var(--fs-13);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 1.25rem;
}
.xs-kn-split-col ul { list-style: none; margin: 0; padding: 0; }
.xs-kn-split-col li {
  position: relative;
  padding-left: 1.5rem;
  line-height: 1.65;
  font-size: var(--fs-16);
}
.xs-kn-split-col li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.xs-kn-split-fit { background: var(--bg-dark); border: 1px solid var(--accent-gold); }
.xs-kn-split-fit h3 { color: var(--accent-gold); }
.xs-kn-split-fit li { color: var(--text-muted); }
.xs-kn-split-fit li strong { color: var(--text-main); }
.xs-kn-split-fit li::before { color: var(--accent-gold); }
/* .xs-kn-split-gain background and text colours now live in the v140 block below. */
@media (max-width: 760px) {
  .xs-kn-split { grid-template-columns: 1fr; }
}

/* ---- v114: retention audit changes, 2026-10-16. Gold stays the brand color throughout.
   Homepage order: hero, trust bar, stats, reel + short origin, X's Formula, two keynotes,
   testimonials (still grid), how booking works, bottom CTA. Rollback: delete this block. ---- */

/* Body text a step brighter so paragraphs hold up on the dark backgrounds and over video */
:root { --text-muted: #b3b2af; }

/* Hero: a soft dark pool behind the centered text block, on top of the existing video shade */
.hero.has-video .hero-video::after {
  background:
    radial-gradient(ellipse 52% 48% at 50% 50%, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, .85) 100%);
}

/* Hero: one gold button, the reel as a gold text link */
.xs-hero-actions { align-items: center; }
.xs-hero-watch {
  display: inline-flex;
  align-items: center;
  padding: .9rem .75rem;
  color: var(--accent-gold);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.xs-hero-watch:hover,
.xs-hero-watch:focus-visible { color: var(--accent-gold-hover); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 600px) {
  .xs-hero-actions { flex-direction: column; }
  .xs-hero-watch { justify-content: center; }
}

/* Phones: the sticky booking bar waits until the hero has scrolled away (navigation.js toggles the class).
   Inside @layer base on purpose: the bar's own rule is an !important in @layer components, and for !important
   rules the EARLIER layer wins (base beats components beats overrides beats unlayered). */
@layer base {
  @media (max-width: 1024px) {
    html.xs-cta-wait .social-sidebar .mobile-cta-wrapper { display: none !important; }
  }
}

/* Headlines wrap evenly, so no single word ("X?", "stage.") sits alone on a line */
.bottom-cta h2,
.section-title,
.hero-title,
.xs-choose-title,
.bio-lead { text-wrap: balance; }

/* Shared: gold text link, centered section title */
.xs-text-link { color: var(--accent-gold); font-weight: 700; letter-spacing: .5px; text-decoration: none; }
.xs-text-link:hover,
.xs-text-link:focus-visible { color: var(--accent-gold-hover); text-decoration: underline; text-underline-offset: 4px; }
.xs-center-title { text-align: center; font-size: var(--fs-39); margin: 0 auto 2.5rem; }

/* Home: reel + short origin (3 lines instead of 3 paragraphs) */
.xs-about-copy .bio-lead { font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 900; line-height: 1.2; color: var(--text-main); }
.xs-about-points { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.xs-about-points li { position: relative; padding-left: 1.75rem; color: var(--text-main); font-size: var(--fs-18); line-height: 1.55; }
.xs-about-points li::before { content: "\2192"; position: absolute; left: 0; top: 0; color: var(--accent-gold); font-weight: 700; }
.xs-about-copy .xs-about-more { margin: 0; }

/* Home: keynote cards reuse the Speaking page poster cards (keynote-cards.css) */
.xs-home-keynotes .xs-choose-for { margin-bottom: 2rem; }

/* Home: testimonials sit on a full-width alternate band (cards stay dark so they read on it) */
.xs-tr-band .xs-tr-card { background: var(--bg-dark); }

/* Booking: "What happens next" + rotating testimonial under the intro card (under the form on phones) */
.xs-book-assure { padding: clamp(1.5rem, 2.6vw, 2.5rem); background: rgba(10, 10, 10, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .05); border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
.xs-book-assure-title { margin: 0 0 1.25rem; color: var(--accent-gold); font-size: var(--fs-13); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.xs-book-steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.xs-book-steps li { display: flex; gap: 1rem; align-items: flex-start; color: var(--text-muted); font-size: var(--fs-14); line-height: 1.55; }
.xs-book-steps li > span { min-width: 2rem; color: var(--accent-gold); font-size: var(--fs-18); font-weight: 900; line-height: 1.2; }
.xs-book-steps strong { display: block; margin-bottom: .15rem; color: var(--text-main); font-size: var(--fs-14); letter-spacing: 1px; text-transform: uppercase; }
@media (min-width: 860px) {
  .inquiry-grid { row-gap: 1.5rem !important; }
  .inquiry-grid .inquiry-context { grid-column: 1; grid-row: 1; }
  .inquiry-grid .funnel-container { grid-column: 2; grid-row: 1 / span 2; }
  .inquiry-grid .xs-book-after-stack { grid-column: 1; grid-row: 2; }
}

/* v116: testimonial split into its own card, separate from "What happens next" (Xavier's note, 2026-10-20).
   The two cards share a simple flex stack instead of separate grid rows, so the grid keeps its
   original 2-row shape (fixes the big empty gap that appeared when the grid tried to stretch a 3rd row
   to match the tall form in column 2). */
.xs-book-after-stack { display: flex; flex-direction: column; gap: 1.5rem; }
.xs-book-testimonial { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.xs-book-testimonial .xs-book-tr { margin-top: 0; padding-top: 0; border-top: 0; }

/* v114b: phone length. Formula cards and section titles get compact on phones. */
@media (max-width: 760px) {
  .xs-center-title { font-size: 1.85rem; }
}

/* ---- v115: Xavier's corrections, 2026-10-16. Rollback: delete this block. ---- */

/* Home: stat strip is exactly as tall as the trust bar above it.
   hero-video.js already measures the trust bar into --xs-strip-h; without the video the padding below applies. */
.stat-strip { box-sizing: border-box; display: flex; align-items: center; min-height: var(--xs-strip-h, 0px); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.stat-strip-grid { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 899px) {
  .stat-strip { padding-left: 1rem; padding-right: 1rem; }
  .stat-strip-grid { gap: .75rem; }
  .stat-strip-grid .stat-item:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; max-width: none; }
  .stat-value { font-size: min(4.4vw, 1.6rem); }
  .stat-label { font-size: var(--fs-10); letter-spacing: 1px; line-height: 1.35; }
}

/* Booking: one rotating testimonial inside the "What happens next" card */
.xs-book-tr { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color); }
.xs-book-tr.xs-tr-host { max-width: none; }
.xs-book-tr .xs-tr-card { background: transparent; border: 0; border-radius: 0; }
.xs-book-tr .xs-tr-slide,
.xs-book-tr .xs-tr-rev .xs-tr-slide { grid-template-columns: minmax(0, 1fr); }
.xs-book-tr .xs-tr-logo { order: -1; justify-content: flex-start; border: 0; padding: 0 0 1rem; }
.xs-book-tr .xs-tr-logo img { max-width: 110px; max-height: 44px; }
.xs-book-tr .xs-tr-text { padding: 0; align-self: start; }
.xs-book-tr .xs-tr-quote { font-size: var(--fs-14); font-style: italic; }

/* Booking: the homepage video plays behind the form (hero-video.js adds .has-video).
   The booking photo stays underneath as the fallback until the video is playing. */
.hero-book .hero-video { display: none; }
.hero-book.has-video { overflow: hidden; }
.hero-book.has-video .hero-video { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-book.has-video .hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transition: opacity .6s ease; }
.hero-book.has-video .hero-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, .85) 100%); opacity: 0; transition: opacity .6s ease; }
.hero-book.has-video .hero-video.is-playing video,
.hero-book.has-video .hero-video.is-playing::after { opacity: 1; }
.hero-book > .container { position: relative; z-index: 1; }

/* ---- v116: keynote pages simplified (modeled on Cassandra Worthy's keynote pages) and homepage band rhythm.
   Keynote page = hero, one intro section (question + two short paragraphs + photo, then the two boxes and one button),
   the other keynote on a gray band, bottom CTA. Rollback: delete this block. ---- */
.xs-kn-intro { padding: var(--section-padding-y) var(--section-padding-x); background: var(--bg-dark); }
.xs-kn-intro-grid { max-width: 1150px; margin: 0 auto 3rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center; }
.xs-kn-intro-text { text-align: center; }
.xs-kn-q { margin: 0 0 1.5rem; color: var(--text-main); font-size: clamp(1.6rem, 2.6vw, 2.35rem); font-weight: 900; line-height: 1.15; text-transform: uppercase; text-wrap: balance; }
.xs-kn-q-accent { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.xs-kn-intro-text p { max-width: 34rem; margin: 0 auto 1rem; color: var(--text-muted); font-size: var(--fs-16); line-height: 1.7; }
.xs-kn-intro-text p:last-child { margin-bottom: 0; }
.xs-kn-intro-text strong { color: var(--text-main); }
.xs-kn-photo { margin: 0; display: flex; justify-content: center; }
.xs-kn-photo img { display: block; width: 100%; max-width: 460px; height: 520px; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 62%, transparent 100%); }
.xs-kn-photo-portrait img { object-position: 50% 30%; }
.xs-kn-photo-full img { object-position: 50% 20%; }
.xs-kn-intro .xs-kn-split { max-width: 1150px; margin: 0 auto; }
.xs-kn-intro .xs-kn-actions { margin-top: 2.5rem; display: flex; justify-content: center; }
.xs-kn-other .xs-choose-grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (max-width: 860px) {
  .xs-kn-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
  .xs-kn-photo { order: -1; }
  .xs-kn-photo img { height: 340px; max-width: 340px; }
}

/* ---- v117: no still image on refresh (home + booking). The pages load with .has-video already set,
   the hero sits on black, and the video fades in when it starts playing. If the video cannot play,
   hero-video.js removes .has-video and the photo comes back. Rollback: delete this block. ---- */
.hero.has-video .hero-video::before { background: #000; }
.hero-book.has-video { background-image: none !important; background-color: #000; }
.hero-book.has-video .hero-video::after { opacity: 1; }

/* ---- v118: booking testimonial, logo moved from above the quote to the bottom LEFT,
   just before the name and title on the same row (Xavier, Oct 16). Rollback: delete this block. ---- */
.xs-book-tr .xs-tr-slide,
.xs-book-tr .xs-tr-rev .xs-tr-slide { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; }
.xs-book-tr .xs-tr-logo img { max-width: 72px; max-height: 44px; } /* fixed slot: the name never shifts as quotes rotate */
.xs-book-tr .xs-tr-text { display: contents; }
.xs-book-tr .xs-tr-quote { grid-column: 1 / -1; grid-row: 1; }
.xs-book-tr .xs-tr-author { grid-column: 2; grid-row: 2; }
.xs-book-tr .xs-tr-logo,
.xs-book-tr .xs-tr-rev .xs-tr-logo { grid-column: 1; grid-row: 2; order: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-2) 1rem 0 0; border: 0; border-top: 1px solid var(--border-color); }

/* ---- v129: booking left column (Xavier, 2026-10-20). Rollback: delete this block. ----
   1. Testimonial card fits the quote on screen. Every slide sits in one grid cell for the
      crossfade; align-self:start lets each slide keep its own height, so enhancements.js
      (syncHeights) measures the active quote instead of the tallest one.
   2. Even spacing between all four cards on desktop. Row 1 is sized by "Let's Talk" only
      (auto) and row 2 takes the rest of the tall form (1fr), so no extra gap opens under
      "Let's Talk". Column gap matches the 1.5rem gap between the left cards. */
.xs-book-tr .xs-tr-slide { align-self: start; }
@media (min-width: 860px) {
  .inquiry-grid { grid-template-rows: auto 1fr; column-gap: 1.5rem !important; }
  .inquiry-grid .xs-book-after-stack { align-self: start; }
}

/* ---- v130: booking cards share one surface (Xavier, 2026-10-20). Rollback: delete this block. ----
   The form card used a lighter, more see-through glass (rgba(20,20,20,.4), 20px blur, 24px corners)
   than the three cards on the left (rgba(10,10,10,.6), 12px blur, 20px corners), so it read lighter
   over the video. It now uses exactly the same surface as the left cards. */
.inquiry-grid .funnel-container {
  background-color: rgba(10, 10, 10, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
  border-radius: 20px;
}

/* ---- v131: no gold accent bars on rounded cards (Xavier, 2026-10-21). Rollback: delete this block. ----
   The thick gold strip along one edge of a rounded card reads as an AI-template look.
   Cards keep their normal thin border on every side. Straight gold rules on plain text
   (quotes, lists, the About method line) and the gold outline on the keynote poster cards stay. */
.dl-tile,
.dl-basics,
.xs-tr-card,
.xs-story-photo,
.xs-window-steps li { border-top: 1px solid var(--border-color); }
.reel-container { border-top: 0; }
.bio-image img { border-bottom: 0; }
.clause-card:before { display: none; }
.testimonial-static-card { border-left: 0; }

/* ---- v141: keynote pages. Replaces v132-v140; this is the only block for this work.
   v141 is v140 plus a dead-code sweep: the v108 block no longer sets .xs-kn-split-gain
   background or text colours (all four rules were overridden here), and li margin-bottom
   is gone from both blocks since spacing comes from the flex `gap` alone.

   CARD COPY/LAYOUT: the "who it's for" card answers who it is for (three bold label +
   one-line bullets), and .xs-kn-foot under both cards carries the reach line (visible,
   crawlable, no hidden text) plus a dim meta line. v132 used a gold rule and a stacked
   uppercase label and read as a bolted-on appendix (Xavier) -- no rule now, inline
   sentence-case lead-in, narrower measure. The two cards are flex columns whose lists
   stretch, so the shorter gold card spreads its bullets over the same vertical run instead
   of leaving dead space; `gap` is the minimum and space-between hands out the slack, so the
   taller card is unaffected and mobile (stacked, no slack) falls back to the plain gap.

   GOLD CARD: the flat #d4af37 slab read as mustard at that size (Xavier). v135-v137 slid one
   translucent band over a static fill, which Xavier rightly called "a gradient hovering over
   that" -- an overlay reads as glass, not metal. v138/v139 moved the surface instead, with two
   skewed pseudo-element layers on coprime periods, but that loop was NOT actually seamless:
   measured frame-to-frame delta spiked ~45% at the restart, which is the jump Xavier kept
   seeing. v140 drops the custom machinery and uses the site's own shimmer idiom instead --
   the same one .shiny-text has used on the homepage all along, at Xavier's suggestion:

     background-size: 200% auto  +  @keyframes shimmer (200% 0 -> -200% 0)

   That is seamless by construction. With a background image twice the container width, the
   position range maps to a travel of exactly 4x the container, i.e. exactly 2 tile widths, and
   the gradient tiles cleanly because its first and last stops are the same colour (#b88c20).
   It also reuses the global `shimmer` keyframes from index.css rather than defining more.

   TWO CONSTRAINTS IF THIS IS EVER RETUNED:
   1. First and last gradient stops MUST stay identical, or the tile seam becomes visible.
   2. The gradient MUST stay `to right`. At any other angle the tile's left and right edges
      no longer line up and repeating it produces vertical seams. (This is why there is no
      diagonal version -- the diagonal skew from v138/v139 is incompatible with tiling.)

   CONTRAST: the darkest stop sets the worst case. Floor is #b88c20 = 6.81:1 against the #000
   text (--btn-text-on-gold, the token the site already uses on gold buttons). Re-check if
   these stops are ever darkened. Added 2026-10-24.
   Rollback: delete this block and the .xs-kn-foot element from the two keynote pages. ---- */
.xs-kn-split-col { display: flex; flex-direction: column; }
.xs-kn-split-col ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.xs-kn-foot {
  max-width: 58rem;
  margin: 2.5rem auto 0;
  text-align: center;
  text-wrap: pretty;
}
.xs-kn-reach {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-14);
  line-height: 1.8;
}
.xs-kn-reach strong { color: var(--accent-gold); font-weight: 700; }
.xs-kn-meta {
  margin: 1.1rem 0 0;
  color: #787774;
  font-size: var(--fs-13);
  line-height: 1.9;
}
.xs-kn-meta span { margin: 0 .45rem; color: rgba(212, 175, 55, .5); }
@media (max-width: 760px) {
  .xs-kn-foot { margin-top: 2rem; text-align: left; }
}

/* v140: brushed gold using the site's existing shimmer idiom (same as .shiny-text). */
.xs-kn-split-gain {
  background: linear-gradient(to right,
    #b88c20, #c9a32e, #d4af37, #e8cf74, #d4af37, #c9a32e, #b88c20);
  background-size: 200% auto;
}
.xs-kn-split-gain h3,
.xs-kn-split-gain li,
.xs-kn-split-gain li strong,
.xs-kn-split-gain li::before { color: var(--btn-text-on-gold); }
@media (prefers-reduced-motion: no-preference) {
  .xs-kn-split-gain { animation: shimmer 8s linear infinite; }
}

/* ---- v142: newsletter opt-in checkbox on the booking form (Xavier, 2026-10-24).
   Unchecked by default, and styled unlike the uppercase bold field labels above it so
   it reads as an optional choice rather than another required field. Consent evidence
   (the answer plus the exact label text) rides along in the form payload; _worker.js
   already attaches IP, country and timestamp. Needs the higher specificity because
   `.booking-form-native label` forces display:block/uppercase/bold.
   Rollback: delete this block and the .xs-optin group from book.html. ---- */
.booking-form-native .form-group.xs-optin { margin-bottom: 1.5rem; }
.booking-form-native .xs-optin-label {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 0;
  font-size: var(--fs-14);
  font-weight: 400;
  text-transform: none;
  line-height: 1.6;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .2s ease;
}
.booking-form-native .xs-optin-label:hover { color: var(--text-main); }
.booking-form-native .xs-optin-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: .15rem 0 0;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

/* ---- v143: booking form decluttering + footer mailing address (Xavier, 2026-10-25).
   Xavier: the form "seems very cluttered and all over the place". Three structural
   fixes, all subtractive:
   1. The lead-time note was orphaned under Audience Size, two fields from the Event
      Date it describes, so it read as a disclaimer floating near the button. It now
      sits under the date input as .xs-field-note, wired with aria-describedby.
   2. Step 1's note dropped "Reply within one business day": that is a promise about
      submitting, and step 1 only advances a step. The "Prefer email?" escape hatch
      stays, since it is most useful before someone has invested effort.
   3. Step 2 had four stacked blocks after the last field (checkbox, button, a
      two-line note, a privacy line). The note and the privacy line are now one.
   The uppercase is dropped on both notes via --quiet; shouty 11px fine print is
   what made the area feel tight.
   Rollback: delete this block, restore .ext-style-f88f28 on the lead-time note and
   the two original .xs-form-note paragraphs plus .privacy-note in book.html. ---- */
.xs-field-note {
  margin: .5rem 0 0;
  font-size: var(--fs-11);
  line-height: 1.5;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.booking-form-native .form-group .xs-field-note { font-weight: 400; }
.xs-form-note--quiet {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fs-13);
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0;
}
.booking-form-native .form-group.xs-optin { margin-top: 2rem; }

/* Footer mailing address. Deliberately labelled: the registered office is in
   Austin (the registered agent's address) while Xavier is based in San Antonio,
   which is what the bio, the One-Sheet and the homepage schema all say. An
   unlabelled Austin address would read as "Austin speaker". */
.footer-address {
  margin: .5rem 0 0;
  font-size: var(--fs-11);
  line-height: 1.6;
  color: var(--text-muted);
  letter-spacing: .5px;
}