/* ═══════════════════════════════════════════════════
   THE HOLLYWOOD BLUEPRINT — MENTORSHIP V2
   Premium cinematic + emotional soul redesign.
   Fluid gradient hero. Glassmorphism cards. Motion-driven.
   ═══════════════════════════════════════════════════ */

/* ─── RESET & BASE ─────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Canvas */
  --bg-deep: #06060a;
  --bg-surface: #0b0b10;
  --bg-elevated: #101018;
  --bg-hover: #16161f;
  --bg-card: #0d0d14;

  /* Text */
  --text-primary: #eeeef2;
  --text-secondary: #9090a2;
  --text-tertiary: #3e3e4d;
  --text-accent: #c4b5fd;

  /* Purple accent palette */
  --accent: #a78bfa;
  --accent-dim: #7c5cbf;
  --accent-glow: hsl(263 60% 68% / 0.08);
  --accent-strong: hsl(263 60% 68% / 0.25);
  --accent-border: hsl(263 60% 68% / 0.12);
  --accent-subtle: hsl(263 60% 68% / 0.04);

  /* Type */
  --font-display: 'Anton', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* CSS Springs — matched to site-wide standard */
  --spring-snappy: linear(0, 0.2459, 0.6526, 0.9468, 1.0764, 1.0915, 1.0585, 1.0219, 0.9993, 0.9914, 0.9921, 0.9957, 0.9988, 1.0004, 1);
  --spring-snappy-dur: 450ms;
  --spring-cinematic: 950ms linear(0, 0.1759, 0.5678, 0.9772, 1.2633, 1.371, 1.3217, 1.1819, 1.0267, 0.9123, 0.8634, 0.8753, 0.9246, 0.983, 1.0284, 1.0499, 1.048, 1.0309, 1.009, 0.9912, 0.9819, 0.9816, 0.9875, 0.9956, 1.0026, 1.0065, 1.007, 1.005, 1.002, 0.9993, 0.9977, 1);

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Glassmorphism */
  --glass-bg: hsl(263 30% 15% / 0.08);
  --glass-border: hsl(263 40% 60% / 0.1);
  --glass-blur: blur(20px);

  /* Layout */
  --page-max: 1200px;
  --page-pad: clamp(1.5rem, 5vw, 4rem);
}

html {
  scroll-behavior: smooth;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-deep);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Premium focus-visible ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Skip focus ring for mouse clicks */
:focus:not(:focus-visible) {
  outline: none;
}


/* ─── SHARED: REVEAL ANIMATION ────────────────── */
.js-motion .reveal-up {
  opacity: 0;
  transform: translateY(32px);
}

/* Fail-open: force visible if Motion didn't trigger */
.js-motion .reveal-up.is-visible {
  opacity: 1 !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 1.25rem 0;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease;
  /* Ensure header is never swallowed by section stacking contexts */
  isolation: isolate;
}

.site-header.is-scrolled {
  background: hsl(240 8% 5% / 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0.6rem 0;
  border-bottom: 1px solid hsl(263 30% 50% / 0.06);
}

.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__home {
  font-family: var(--font-display);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--text-primary);
  transition: color 0.3s ease;
}
.site-header__home:hover { color: var(--accent); }

.site-header__nav {
  display: flex;
  gap: 2.25rem;
}

.site-header__nav a {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}
.site-header__nav a:hover,
.site-header__nav a.is-active {
  color: var(--text-primary);
}

.site-header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.site-header__burger span {
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform 0.3s ease;
}


/* ═══════════════════════════════════════════════════
   HERO — FLUID GRADIENT BACKGROUND
   Deep blacks, rich purples, soft white light leaks.
   ═══════════════════════════════════════════════════ */
.hb-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Fluid gradient layers */
.hb-hero__fluid {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hb-hero__fluid-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
  opacity: 0.7;
}

.hb-hero__fluid-layer--1 {
  width: 80vw;
  height: 80vw;
  max-width: 900px;
  max-height: 900px;
  top: -20%;
  left: -15%;
  background: radial-gradient(circle, hsl(270 80% 20% / 0.6) 0%, hsl(280 60% 10% / 0.2) 50%, transparent 70%);
}

.hb-hero__fluid-layer--2 {
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  bottom: -10%;
  right: -10%;
  background: radial-gradient(circle, hsl(250 70% 25% / 0.5) 0%, hsl(260 40% 12% / 0.15) 50%, transparent 70%);
}

.hb-hero__fluid-layer--3 {
  width: 40vw;
  height: 40vw;
  max-width: 500px;
  max-height: 500px;
  top: 30%;
  left: 40%;
  background: radial-gradient(circle, hsl(0 0% 100% / 0.04) 0%, hsl(270 20% 40% / 0.08) 40%, transparent 70%);
}

.hb-hero__fluid-layer--4 {
  width: 30vw;
  height: 30vw;
  max-width: 400px;
  max-height: 400px;
  top: 10%;
  right: 20%;
  background: radial-gradient(circle, hsl(0 0% 100% / 0.03) 0%, transparent 60%);
}

.hb-hero__fluid-noise {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

/* Dark gradient overlay for legibility */
.hb-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, hsl(240 10% 4% / 0.4) 70%),
    linear-gradient(180deg,
      hsl(240 10% 4% / 0.3) 0%,
      transparent 30%,
      transparent 60%,
      hsl(240 10% 4% / 0.6) 85%,
      var(--bg-deep) 100%
    );
  pointer-events: none;
}

.hb-hero__content {
  text-align: center;
  padding: 0 var(--page-pad);
  position: relative;
  z-index: 2;
  max-width: 1000px;
}

/* Eyebrow — above title, premium qualifier */
.hb-hero__eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-top: 0;
  margin-bottom: 1.5rem;
  opacity: 0.85;
  white-space: nowrap;
}

/* Main H1 Hook */
.hb-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-shadow: 0 4px 60px hsl(263 60% 50% / 0.15);
}

.hb-hero__title-accent {
  color: var(--accent);
  display: block;
  margin-top: 0.15em;
}

/* "WORK." — warm champagne shimmer, gentle, every ~9s */
.hb-hero__title-shimmer {
  position: relative;
  display: inline-block;
  color: var(--text-primary);
  background-image: linear-gradient(
    100deg,
    currentColor 0%,
    currentColor 40%,
    #f4d9a3 48%,
    #fff1cf 50%,
    #f4d9a3 52%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroWorkShimmer 9s ease-in-out 2.2s infinite;
}
@keyframes heroWorkShimmer {
  0%   { background-position: 120% 0; }
  12%  { background-position: -20% 0; }
  18%  { background-position: -20% 0; }
  100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hb-hero__title-shimmer {
    animation: none;
    -webkit-text-fill-color: var(--text-primary);
  }
}

/* Sub-brand mark — removed for cleaner hero hierarchy */

/* Authority — two-line credibility, right below headline */
.hb-hero__authority {
  font-size: clamp(1rem, 1.7vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.4;
  color: #dcdce4;
  max-width: 640px;
  margin: 1.25rem auto 0.5rem;
}

/* Supporting line — smaller than subheading, still clearly visible */
.hb-hero__support {
  font-size: clamp(0.875rem, 1.35vw, 1rem);
  font-weight: 400;
  line-height: 1.5;
  color: #c4c4d0;
  letter-spacing: 0.02em;
  max-width: 640px;
  margin: 0.35rem auto 0.5rem;
}
.hb-hero__support-accent {
  color: var(--text-primary);
  font-weight: 500;
}
.js-motion .hb-hero__support { opacity: 0; }

/* Pivot line — transitional bridge below subheader, key emphasis moment */
.hb-hero__pivot {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.85vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.4;
  color: #f2f2f8;
  letter-spacing: -0.005em;
  max-width: 660px;
  margin: 2.75rem auto 1.25rem;
  position: relative;
  padding-top: 1.85rem;
  text-shadow: 0 2px 40px hsl(263 60% 60% / 0.3);
}
.hb-hero__pivot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, hsl(263 60% 70% / 0.85) 50%, transparent 100%);
}
.hb-hero__pivot-accent {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.005em;
}
.js-motion .hb-hero__pivot { opacity: 0; }

/* Tension line — emotional beat, pulled in closer to the CTA */
.hb-hero__tension {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.45vw, 1.0625rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: #b8b8c6;
  letter-spacing: 0.005em;
  max-width: 540px;
  margin: 2rem auto 0.75rem;
  text-align: center;
  opacity: 0.9;
}
.js-motion .hb-hero__tension { opacity: 0; }

/* Nudge line — quiet whisper between tension and CTA */
.hb-hero__nudge {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  font-weight: 400;
  line-height: 1.4;
  color: #9a9aa8;
  letter-spacing: 0.02em;
  max-width: 480px;
  margin: 0 auto 1.25rem;
  text-align: center;
  opacity: 0.75;
}
.js-motion .hb-hero__nudge { opacity: 0; }

/* Proof line — refined credibility moment, replaces the old credits strip */
.hb-hero__proof {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.45;
  color: #f6f6fa;
  letter-spacing: 0;
  max-width: 560px;
  margin: 1rem auto 0;
  text-align: center;
}
.hb-hero__proof-strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Credits line — directly below the "Paul Becker" line, quieter and scannable */
.hb-hero__credits {
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 400;
  line-height: 1.55;
  color: #9a9aa8;
  letter-spacing: 0.015em;
  max-width: 560px;
  margin: 0.5rem auto 0;
  text-align: center;
}
.js-motion .hb-hero__credits { opacity: 0; }
.js-motion .hb-hero__proof { opacity: 0; }

/* Inline logos — removed for cleaner hero */

/* CTA Button */
.hb-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--bg-deep);
  background: var(--accent);
  padding: 0.9rem 1.75rem;
  margin-top: 0;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: gap 0.3s var(--ease-out-expo),
              background 0.3s ease,
              box-shadow 0.3s ease;
}

.hb-hero__cta:hover {
  gap: 1rem;
  background: #b89fff;
  box-shadow: 0 8px 40px hsl(263 60% 60% / 0.25);
}

/* Traveling shimmer on CTA */
.hb-hero__cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsl(0 0% 100% / 0.18) 45%,
    hsl(0 0% 100% / 0.25) 50%,
    hsl(0 0% 100% / 0.18) 55%,
    transparent 100%
  );
  animation: ctaShimmer 4s ease-in-out 3s infinite;
  pointer-events: none;
}

@keyframes ctaShimmer {
  0% { left: -100%; }
  40% { left: 150%; }
  100% { left: 150%; }
}

/* CTA helper — small reassurance line under the button */
/* Shared CTA helper — small reassurance text below any CTA */
.hb-cta-helper,
.hb-hero__cta-helper {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: #8a8a9a;
  letter-spacing: 0.04em;
  text-transform: none;
  text-align: center;
  margin: 0.875rem auto 0;
  max-width: 380px;
}
.js-motion #heroCtaHelper { opacity: 0; }

/* Two-line CTA label — small kicker "Apply Now" + prominent primary "See if You're a Fit" */
.hb-hero__cta-text,
.hb-btn__text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  line-height: 1.05;
  text-align: center;
}
.hb-hero__cta-kicker {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  opacity: 0.7;
  text-transform: uppercase;
  white-space: nowrap;
}
.hb-hero__cta-primary {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
}

.hb-hero__cta-arrow svg {
  display: block;
}

/* Hide hero elements for Motion entrance */
.js-motion .hb-hero__eyebrow { opacity: 0; }
.js-motion .hb-hero__title { opacity: 0; }
.js-motion .hb-hero__authority { opacity: 0; }
.js-motion .hb-hero__cta { opacity: 0; }
.js-motion .hb-hero__video-section { opacity: 0; transform: translateY(30px) scale(0.98); }

/* Scroll hint */
.hb-hero__scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.js-motion .hb-hero__scroll-hint { opacity: 0; }

.hb-hero__scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); }
}


/* ═══════════════════════════════════════════════════
   HERO VIDEO — separated below hero content
   ═══════════════════════════════════════════════════ */
.hb-hero__video-section {
  position: relative;
  z-index: 2;
  padding: clamp(1rem, 2vw, 2rem) var(--page-pad) clamp(2rem, 3vw, 3rem);
  background: var(--bg-deep);
}

.hb-hero__video-inner {
  max-width: 800px;
  margin: 0 auto;
}

.hb-hero__video-wrap {
  position: relative;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 60px hsl(263 60% 50% / 0.15),
    0 0 120px hsl(263 60% 50% / 0.06);
}

.hb-hero__video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* New video section (immediately under hero) */
.hb-video__inner {
  max-width: 920px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
.hb-video__wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 60px hsl(263 60% 50% / 0.18),
    0 0 120px hsl(263 60% 50% / 0.08),
    0 24px 60px -20px rgba(0,0,0,0.6);
  border: 1px solid hsl(263 30% 50% / 0.14);
}
.hb-video__wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ═══════════════════════════════════════════════════
   SHARED SECTION STRUCTURE
   ═══════════════════════════════════════════════════ */
.hb-section {
  padding: clamp(40px, 5vw, 64px) 0;
  position: relative;
  overflow-x: hidden;
}

/* Alternate section surface for rhythm contrast */
.hb-section--surface {
  background: var(--bg-surface);
  border-top: 1px solid hsl(263 30% 50% / 0.06);
  border-bottom: 1px solid hsl(263 30% 50% / 0.06);
}

/* Larger breathing room for editorial-feel sections */
.hb-section--spacious {
  padding: clamp(56px, 7vw, 96px) 0;
}

.hb-section__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}

.hb-section__rule {
  display: block;
  width: 0;
  height: 1px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  will-change: width;
}

.hb-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

.hb-section__heading--left {
  text-align: left;
}

.js-motion .hb-section__heading {
  opacity: 0;
}


/* ═══════════════════════════════════════════════════
   EDITORIAL PROSE
   ═══════════════════════════════════════════════════ */
.hb-prose {
  max-width: 680px;
  margin: 0 auto;
}

.hb-prose--left {
  margin: 0;
}

.hb-prose p {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.hb-prose p:first-child {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  color: var(--text-primary);
  line-height: 1.75;
}

.hb-prose p:last-child {
  margin-bottom: 0;
  color: var(--text-accent);
  font-style: italic;
}


/* ═══════════════════════════════════════════════════
   WHAT THIS IS — STATEMENT BLOCKS
   ═══════════════════════════════════════════════════ */
.hb-what__blocks {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}

.hb-what__block {
  margin-bottom: 1.75rem;
  line-height: 1.85;
}

.hb-what__block:last-child {
  margin-bottom: 0;
}

/* Block 1: lead — slightly larger, medium weight */
.hb-what__block--lead {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.75;
}

/* Block 2: body — standard size */
.hb-what__block--body {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  font-weight: 300;
  color: var(--text-secondary);
}

/* Block 3: beat — lighter, a quiet pause */
.hb-what__block--beat {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  font-weight: 300;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

/* Block 4: emphasis — bold accent with subtle glow */
.hb-what__block--emphasis {
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  font-weight: 600;
  color: var(--text-accent);
  position: relative;
}

.hb-what__block--emphasis::before {
  content: '';
  position: absolute;
  inset: -12px -24px;
  background: radial-gradient(
    ellipse at center,
    hsl(263 60% 60% / 0.08) 0%,
    transparent 70%
  );
  border-radius: 24px;
  z-index: -1;
  pointer-events: none;
}

/* Motion entrance: hidden until triggered */
.js-motion .hb-what__block {
  opacity: 0;
  transform: translateY(24px);
}

/* ═══════════════════════════════════════════════════
   WHAT YOU WALK AWAY WITH — conversion transformation section
   ═══════════════════════════════════════════════════ */
.hb-walkaway {
  text-align: center;
}

.hb-walkaway__intro {
  max-width: 620px;
  margin: 1.25rem auto 2.5rem;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.hb-walkaway__blocks {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  text-align: left;
}

.hb-walkaway__block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  align-items: start;
  padding: clamp(1.25rem, 2vw, 1.5rem) 0;
  border-bottom: 1px solid hsl(263 30% 50% / 0.08);
  position: relative;
}

.hb-walkaway__block:last-child {
  border-bottom: none;
}

.hb-walkaway__num {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  color: var(--accent);
  opacity: 0.55;
  letter-spacing: 0.02em;
  line-height: 1;
  padding-top: 0.3rem;
  min-width: 2.25rem;
}

.hb-walkaway__text {
  display: grid;
  gap: 0.5rem;
}

.hb-walkaway__title {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}

.hb-walkaway__copy {
  font-size: clamp(0.9375rem, 1.3vw, 1rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.005em;
}

.js-motion .hb-walkaway__block {
  opacity: 0;
  transform: translateY(20px);
}

/* Bridge line — transitional phrase between blocks and shift */
.hb-walkaway__bridge {
  max-width: 560px;
  margin: 2.75rem auto 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: #cfcfdb;
  font-style: italic;
  letter-spacing: 0.005em;
  text-align: center;
}

/* Shift section — premium emphasis moment */
.hb-walkaway__shift {
  max-width: 640px;
  margin: 2.25rem auto 0;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, hsl(263 40% 20% / 0.18) 0%, hsl(263 40% 14% / 0.08) 100%);
  border: 1px solid hsl(263 60% 60% / 0.18);
  border-radius: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hb-walkaway__shift::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, hsl(263 60% 60% / 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hb-walkaway__shift-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0 0 0.65rem;
  line-height: 1.1;
  text-shadow: 0 2px 30px hsl(263 60% 60% / 0.25);
  position: relative;
}

.hb-walkaway__shift-body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.45vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  color: #d8d8e2;
  margin: 0;
  letter-spacing: 0.005em;
  position: relative;
}

.hb-walkaway__cta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 600px) {
  .hb-walkaway__block {
    grid-template-columns: auto 1fr;
    gap: 0.875rem;
    padding: 1rem 0;
  }
  .hb-walkaway__num {
    min-width: 1.75rem;
    padding-top: 0.2rem;
  }
  .hb-walkaway__bridge {
    margin-top: 2rem;
  }
  .hb-walkaway__shift {
    margin-top: 1.75rem;
  }
}

/* ═══════════════════════════════════════════════════
   HOW IT WORKS — numbered scannable rows
   ═══════════════════════════════════════════════════ */
.hb-how {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.hb-how__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.hb-how__row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 20% 0%, hsl(263 60% 50% / 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.hb-how__num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--accent);
  letter-spacing: 0.02em;
  line-height: 1;
  padding-top: 0.1rem;
  min-width: 2.25rem;
}

.hb-how__text {
  display: grid;
  gap: 0.35rem;
}

.hb-how__title {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.45vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}

.hb-how__copy {
  font-size: clamp(0.875rem, 1.25vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.js-motion .hb-how__row {
  opacity: 0;
  transform: translateY(24px);
}

/* HOW IT WORKS — intro + foot copy (scannable) */
.hb-how__intro {
  max-width: 620px;
  margin: 0.5rem auto 2.25rem;
  text-align: center;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-secondary);
}

.hb-how__foot {
  max-width: 640px;
  margin: 2.25rem auto 0;
  text-align: center;
  font-size: clamp(0.9rem, 1.1vw, 0.98rem);
  line-height: 1.65;
  color: var(--text-secondary);
  opacity: 0.85;
}

.hb-how-section {
  position: relative;
}

@media (min-width: 720px) {
  .hb-how__row:hover {
    border-color: hsl(263 40% 60% / 0.2);
    transform: translateY(-2px);
    transition: border-color 0.35s ease, transform 0.4s var(--ease-out-expo);
  }
}


/* ═══════════════════════════════════════════════════
   VISUAL BREAK — cinematic full-width cinema moment
   ═══════════════════════════════════════════════════ */
.hb-break {
  position: relative;
  width: 100%;
  height: clamp(320px, 58vh, 640px);
  overflow: hidden;
  margin: 0;
  background: var(--bg-deep);
  isolation: isolate;
}

.hb-break__media {
  position: absolute;
  inset: 0;
  transform: scale(1.06);
  will-change: transform, opacity;
}

.hb-break__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  filter: brightness(0.82) saturate(0.92) contrast(1.06);
}

.hb-break__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 65% at 50% 50%, transparent 35%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(6,6,10,0.55) 0%, rgba(6,6,10,0.05) 18%, rgba(6,6,10,0.05) 82%, rgba(6,6,10,0.7) 100%);
}

.hb-break__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.6) 0.5px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.5) 0.5px, transparent 1px),
    radial-gradient(circle at 40% 85%, rgba(255,255,255,0.5) 0.5px, transparent 1px);
  background-size: 3px 3px, 5px 5px, 7px 7px;
}

.js-motion .hb-break__media {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hb-break__media {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════
   MEET PAUL — tightened prose variant
   ═══════════════════════════════════════════════════ */
.hb-prose--tight p {
  margin-bottom: 0.85rem;
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  line-height: 1.55;
}

.hb-prose--tight p:last-child {
  margin-bottom: 0;
}

.hb-prose__emphasis {
  margin-top: 1.1rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-weight: 400;
  letter-spacing: -0.005em;
}


/* ═══════════════════════════════════════════════════
   PAGE-MENTORSHIP — header de-emphasis for focus
   ═══════════════════════════════════════════════════ */
.page-mentorship .site-header__nav a {
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
.page-mentorship .site-header__nav a:hover,
.page-mentorship .site-header__nav a.is-active {
  opacity: 1;
}
.page-mentorship .site-header {
  background: transparent;
}


/* ═══════════════════════════════════════════════════
   WHAT YOU'LL BUILD — DELIVERABLES GRID
   ═══════════════════════════════════════════════════ */
.hb-build {
  background: var(--bg-deep);
}

.hb-build__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
  max-width: 1000px;
  margin: 1.5rem auto 0;
}

.hb-build__card {
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color 0.4s ease, transform var(--spring-snappy-dur) var(--spring-snappy), box-shadow 0.4s ease;
  overflow: hidden;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.hb-build__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 30% 10%, hsl(263 60% 50% / 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.js-motion .hb-build__card {
  opacity: 0;
  transform: translateY(30px);
}

.hb-build__number {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--accent);
  opacity: 0.5;
  line-height: 1;
  flex-shrink: 0;
  min-width: 2rem;
  padding-top: 0.1rem;
}

.hb-build__title {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.hb-build__desc {
  font-size: clamp(0.8125rem, 1.1vw, 0.875rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.hb-build__card:hover {
  border-color: hsl(263 60% 60% / 0.45);
  box-shadow:
    0 12px 50px hsl(263 60% 50% / 0.18),
    0 0 30px hsl(263 60% 60% / 0.12),
    inset 0 0 40px hsl(263 60% 60% / 0.04);
  background: hsl(263 30% 15% / 0.16);
}

/* Build section closing line */
.hb-build__closing {
  text-align: center;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--text-accent);
  font-style: italic;
  max-width: 600px;
  margin: 2.5rem auto 0;
  line-height: 1.7;
}

/* Build card hover — number glow micro-interaction */
.hb-build__card:hover .hb-build__number {
  text-shadow: 0 0 20px hsl(263 60% 60% / 0.4);
  opacity: 0.9;
  transition: text-shadow 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 700px) {
  .hb-build__grid {
    grid-template-columns: 1fr;
  }
}

/* Three-bucket variant of the build grid */
.hb-build__grid--buckets {
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1080px;
}

.hb-build__card--bucket {
  display: block;
  padding: clamp(1.5rem, 2.2vw, 2rem);
}

.hb-build__card--bucket .hb-build__number {
  opacity: 0.7;
  margin-bottom: 0.75rem;
  display: block;
}

.hb-build__card--bucket .hb-build__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.1;
}

.hb-build__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.hb-build__list li {
  font-size: clamp(0.875rem, 1.25vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 1rem;
  position: relative;
}

.hb-build__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

@media (max-width: 820px) {
  .hb-build__grid--buckets {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════
   VIDEO INTRO — "A quick word from Paul"
   ═══════════════════════════════════════════════════ */
.hb-video-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
}

.hb-video-intro__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  line-height: 1.1;
}

.hb-video-intro__sub {
  font-size: clamp(0.875rem, 1.25vw, 0.9375rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════
   RESULTS STRIP — short proof points
   ═══════════════════════════════════════════════════ */
.hb-results {
  padding: clamp(2.5rem, 5vw, 4rem) var(--page-pad);
  border-top: 1px solid hsl(263 40% 30% / 0.12);
  border-bottom: 1px solid hsl(263 40% 30% / 0.12);
}

.hb-results__inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.hb-results__eyebrow {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  opacity: 0.85;
  margin: 0 0 1.5rem;
}

.hb-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2.25rem);
  align-items: center;
}

.hb-results__item {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-primary);
  letter-spacing: 0.005em;
}

@media (max-width: 820px) {
  .hb-results__list {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 480px) {
  .hb-results__list {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
}


/* ═══════════════════════════════════════════════════
   PROBLEM / APPROACH — GLASSMORPHISM CARD GRID
   ═══════════════════════════════════════════════════ */
/* Problem section — slightly elevated surface for contrast */
.hb-problem {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
  border-top: 1px solid hsl(263 30% 50% / 0.08);
  /* No border-bottom — flows into testimonials atmosphere */
}

.hb-problem__sub {
  text-align: center;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  color: var(--text-secondary);
  max-width: 500px;
  margin: -0.75rem auto 2rem;
  line-height: 1.7;
}

.hb-problem__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.hb-problem__card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color 0.4s ease, transform var(--spring-snappy-dur) var(--spring-snappy), box-shadow 0.4s ease;
  overflow: hidden;
}

.hb-problem__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 30% 10%, hsl(263 60% 50% / 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.js-motion .hb-problem__card {
  opacity: 0;
  transform: translateY(30px);
}

.hb-problem__icon {
  color: var(--accent);
  margin-bottom: 1rem;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.hb-problem__card:hover .hb-problem__icon {
  opacity: 1;
}

.hb-problem__card-title {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.hb-problem__card-desc {
  font-size: clamp(0.8125rem, 1.1vw, 0.875rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

.hb-problem__card:hover {
  border-color: hsl(263 60% 60% / 0.35);
  box-shadow:
    0 8px 40px hsl(263 60% 50% / 0.1),
    0 0 20px hsl(263 60% 60% / 0.08),
    inset 0 0 30px hsl(263 60% 60% / 0.03);
  background: hsl(263 30% 15% / 0.14);
}

/* Accent glow on reveal */
.hb-problem__card.is-revealed {
  animation: cardGlowIn 1.2s ease-out forwards;
}

@keyframes cardGlowIn {
  0% { box-shadow: 0 0 0 hsl(263 60% 60% / 0); border-color: hsl(263 60% 60% / 0); }
  40% { box-shadow: 0 0 25px hsl(263 60% 60% / 0.15); border-color: hsl(263 60% 60% / 0.3); }
  100% { box-shadow: 0 0 0 hsl(263 60% 50% / 0); border-color: var(--glass-border); }
}


/* ═══════════════════════════════════════════════════
   SHARED BUTTON
   ═══════════════════════════════════════════════════ */
.hb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 0.9rem 1.75rem;
  border: none;
  cursor: pointer;
  transition: gap 0.3s var(--ease-out-expo),
              background 0.3s ease,
              box-shadow 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease;
}

.hb-btn--primary {
  color: var(--bg-deep);
  background: var(--accent);
  position: relative;
  overflow: hidden;
}

.hb-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    hsl(0 0% 100% / 0.18) 45%,
    hsl(0 0% 100% / 0.25) 50%,
    hsl(0 0% 100% / 0.18) 55%,
    transparent 100%
  );
  animation: ctaShimmer 4s ease-in-out 3s infinite;
  pointer-events: none;
}

.hb-btn--primary:hover {
  gap: 1rem;
  background: #b89fff;
  box-shadow: 0 8px 40px hsl(263 60% 60% / 0.25);
}

.hb-btn--outline {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-border);
}

.hb-btn--outline:hover {
  gap: 1rem;
  border-color: var(--accent);
  background: hsl(263 60% 68% / 0.06);
}

/* Press/active state — tactile feedback */
.hb-hero__cta:active,
.hb-btn:active {
  transform: translateY(0) scale(0.98) !important;
  transition: transform 0.1s ease-out;
}

.hb-btn__arrow svg {
  display: block;
}


/* ═══════════════════════════════════════════════════
   SECTION CTA — Between-section Apply Now buttons
   ═══════════════════════════════════════════════════ */
.hb-section-cta {
  text-align: center;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.hb-section-cta--standalone {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.hb-section-cta--phones {
  position: relative;
  z-index: 2;
  padding: 0 var(--page-pad);
  margin-top: clamp(2rem, 3vw, 3rem);
}


/* ═══════════════════════════════════════════════════
   HERO ACCENT — emphasis animation target
   ═══════════════════════════════════════════════════ */
.hb-hero__title-accent {
  will-change: transform, filter, text-shadow;
}


/* ═══════════════════════════════════════════════════
   PROBLEM SECTION — Scale-in entry
   ═══════════════════════════════════════════════════ */
.js-motion .hb-problem__grid {
  opacity: 0;
  transform: scale(0.97);
  will-change: transform, opacity;
}


/* ═══════════════════════════════════════════════════
   AUTHORITY — CREDITS MARQUEE
   ═══════════════════════════════════════════════════ */
/* Hero credits strip — scrolling trust bar between authority text and CTA */
.hb-hero__credits-strip {
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.hb-authority__wall--inline {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.hb-authority__wall--inline .hb-authority__mask--left {
  background: linear-gradient(to right, var(--bg-deep), transparent);
}

.hb-authority__wall--inline .hb-authority__mask--right {
  background: linear-gradient(to left, var(--bg-deep), transparent);
}

.js-motion .hb-hero__credits-strip { opacity: 0; }

/* Original authority section — hidden since strip is now in hero */
.hb-authority {
  padding: clamp(20px, 3vw, 36px) 0;
}

/* Tight connection: What This Is sits flush above the video */
.hb-what--tight {
  padding-bottom: clamp(16px, 2vw, 24px);
}

.hb-what--tight + .hb-hero__video-section {
  padding-top: 0;
}

.hb-authority__label {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
  margin-bottom: 2.5rem;
}

.hb-authority__wall {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.hb-authority__mask {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 180px;
  z-index: 2;
  pointer-events: none;
}

.hb-authority__mask--left {
  left: 0;
  background: linear-gradient(to right, var(--bg-deep), transparent);
}

.hb-authority__mask--right {
  right: 0;
  background: linear-gradient(to left, var(--bg-deep), transparent);
}

.hb-authority__track {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.hb-authority__credit {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.375rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: 0 1.25rem;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.hb-authority__credit:hover {
  color: var(--text-secondary);
}

.hb-authority__dot {
  width: 3px;
  height: 3px;
  background: var(--accent-dim);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.4;
}

.hb-authority__stats {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.hb-authority__stat {
  text-align: center;
}

.hb-authority__stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-transform: uppercase;
  color: var(--text-accent);
  letter-spacing: 0.02em;
}

.hb-authority__stat-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}


/* ═══════════════════════════════════════════════════
   MEET PAUL — VIDEO FOCAL POINT
   ═══════════════════════════════════════════════════ */
.hb-meet {
  background: var(--bg-surface);
  border-top: 1px solid hsl(263 30% 50% / 0.06);
  border-bottom: 1px solid hsl(263 30% 50% / 0.06);
}

.hb-meet__inner {
  max-width: 900px;
  text-align: center;
}

.hb-meet__video-wrap {
  margin-bottom: 2rem;
}

.hb-meet__video {
  position: relative;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 80px hsl(263 60% 50% / 0.12),
    0 0 200px hsl(263 60% 50% / 0.04);
}

.hb-meet__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hb-meet__unmute {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(15, 15, 20, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(263 40% 60% / 0.2);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
  z-index: 3;
}

.hb-meet__unmute:hover {
  background: rgba(15, 15, 20, 0.9);
  border-color: var(--accent);
}

.hb-meet__unmute.is-unmuted svg line:last-child {
  display: none;
}

.hb-meet__text {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}


/* ═══════════════════════════════════════════════════
   WALK AWAY V2 — FOUR PILLARS, APPLE-QUIET
   Oversized gradient numbers, one-line statements,
   open whitespace. The roadmap below explains the how;
   this only sells the transformation.
   ═══════════════════════════════════════════════════ */
.hb-walkaway__lead {
  text-align: center;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--text-secondary);
  margin: 0.25rem auto clamp(4rem, 8vw, 6.5rem);
}

.hb-walkaway__lead-strong {
  color: var(--text-primary);
  font-weight: 500;
}

.hb-walkaway__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(3.5rem, 7vw, 6rem);
  row-gap: clamp(3.5rem, 7vw, 5.5rem);
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: 1rem;
}

.hb-walkaway__pnum {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 7vw, 5.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 0.9rem;
  background: linear-gradient(180deg, #d3c4ff 0%, hsl(263 60% 62% / 0.75) 55%, hsl(263 60% 50% / 0.12) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  user-select: none;
}

.hb-walkaway__ptitle {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 0.7rem;
}

.hb-walkaway__pcopy {
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 34ch;
}

@media (max-width: 679px) {
  .hb-walkaway__pillars {
    grid-template-columns: 1fr;
    row-gap: 3.25rem;
    max-width: 420px;
  }

  .hb-walkaway__lead {
    margin-bottom: 3.5rem;
  }
}


/* ═══════════════════════════════════════════════════
   HERO V2 — CINEMATIC OPENING FRAME
   Full-bleed photo of Paul at work, slow Ken Burns
   drift, deep gradient scrim, huge Anton headline,
   understated trust strip. Overrides the original
   fluid-gradient hero rules above.
   ═══════════════════════════════════════════════════ */
.hb-hero {
  padding: clamp(5.5rem, 12vh, 8rem) 0 clamp(3rem, 7vh, 5rem);
}

.hb-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-deep);
}

.hb-hero__bg picture,
.hb-hero__bg img,
.hb-hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hb-hero__bg video {
  object-fit: cover;
  object-position: 50% 38%;
  filter: saturate(1.02) contrast(1.03) brightness(1.02);
  pointer-events: none;
}

.hb-hero__bg img {
  object-fit: cover;
  object-position: 45% 32%;
  filter: saturate(0.95) contrast(1.03) brightness(1.04);
  animation: heroDrift 38s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  0%   { transform: scale(1.06) translate(0.6%, 0.4%); }
  100% { transform: scale(1.16) translate(-1.2%, -0.8%); }
}

.hb-hero__bg .hb-hero__fluid-noise {
  z-index: 1;
}

/* Film-trailer scrim: light enough to see the dancers, with a
   focused pool behind the type for contrast */
.hb-hero__overlay {
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, transparent 0%, hsl(240 10% 3% / 0.38) 78%),
    radial-gradient(ellipse 60% 45% at 50% 52%, hsl(240 10% 3% / 0.28), transparent 75%),
    linear-gradient(180deg,
      hsl(240 10% 3% / 0.48) 0%,
      hsl(240 10% 3% / 0.18) 26%,
      hsl(240 10% 3% / 0.2) 55%,
      hsl(240 10% 3% / 0.6) 82%,
      var(--bg-deep) 100%
    );
}

/* Huge, movie-poster headline */
.hb-hero__title {
  font-size: clamp(2.5rem, 7.2vw, 5.5rem);
  line-height: 1.01;
  letter-spacing: 0.005em;
  text-shadow:
    0 2px 24px hsl(240 10% 3% / 0.55),
    0 10px 80px hsl(240 10% 3% / 0.5);
}

.hb-hero__title-em {
  color: var(--accent);
  white-space: nowrap;
  text-shadow:
    0 2px 24px hsl(240 10% 3% / 0.55),
    0 0 56px hsl(263 60% 60% / 0.35);
}

.hb-hero__authority {
  margin-top: 1.75rem;
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-secondary);
  text-shadow: 0 1px 12px hsl(240 10% 3% / 0.6);
}

.hb-hero__authority-strong {
  color: var(--text-primary);
  font-weight: 400;
}

.hb-hero__lede {
  max-width: 620px;
  margin: 1.5rem auto 2.4rem;
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.7;
  color: #b9b9c6;
  text-shadow: 0 1px 12px hsl(240 10% 3% / 0.6);
}

/* Understated trust strip */
.hb-hero__trust {
  margin-top: clamp(2.25rem, 5.5vh, 3.75rem);
  padding-top: 1.4rem;
  position: relative;
}

.hb-hero__trust::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(263 60% 68% / 0.35), transparent);
}

.hb-hero__trust-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #9d9dae;
  margin-bottom: 0.55rem;
}

.hb-hero__trust-dot {
  color: var(--accent);
  opacity: 0.7;
}

.hb-hero__trust-studios {
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: hsl(263 35% 78% / 0.75);
}

.js-motion .hb-hero__trust { opacity: 0; }

/* Fold tuning: keep everything comfortable on shorter viewports */
@media (max-height: 760px) {
  .hb-hero__lede { margin-bottom: 1.8rem; }
  .hb-hero__trust { margin-top: 1.8rem; }
}

@media (max-width: 640px) {
  .hb-hero__bg img {
    object-position: 32% 28%;
  }

  .hb-hero__bg video {
    object-position: 50% 40%;
  }

  .hb-hero__title {
    font-size: clamp(2.35rem, 11.5vw, 3.2rem);
    line-height: 1.04;
  }

  .hb-hero__lede {
    font-size: 0.9375rem;
    max-width: 34ch;
  }

  .hb-hero__trust-line {
    column-gap: 0.55rem;
    letter-spacing: 0.18em;
  }

  .hb-hero__trust-studios {
    font-size: 0.6875rem;
    letter-spacing: 0.17em;
    text-indent: 0.17em;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-hero__bg img {
    animation: none !important;
    transform: scale(1.06);
  }

  .hb-hero__trust {
    opacity: 1 !important;
  }
}


/* ═══════════════════════════════════════════════════
   WHAT YOUR YEAR MIGHT LOOK LIKE — 10-MONTH ROADMAP
   Vertical journey spine with scroll-driven fill and
   lighting nodes, alternating bright cards, bullet-led
   content. Bolder violet, built to feel like a premium
   career roadmap rather than a wall of text.
   ═══════════════════════════════════════════════════ */
.hb-year-section {
  position: relative;
  overflow: hidden;
}

.hb-year__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 38% at 18% 22%, hsl(263 60% 45% / 0.13), transparent 70%),
    radial-gradient(ellipse 50% 34% at 85% 58%, hsl(280 55% 42% / 0.1), transparent 70%),
    radial-gradient(ellipse 70% 30% at 50% 100%, hsl(263 60% 40% / 0.08), transparent 75%);
}

.hb-year-section .hb-section__inner {
  position: relative;
  z-index: 1;
}

.hb-year__intro {
  max-width: 620px;
  margin: 0.5rem auto 1.75rem;
  text-align: center;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ── Journey badge ── */
.hb-year__badge {
  width: fit-content;
  margin: 0 auto clamp(2.75rem, 5vw, 4rem);
  padding: 0.6rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #d9cdff;
  border: 1px solid hsl(263 60% 68% / 0.4);
  border-radius: 100px;
  background: linear-gradient(180deg, hsl(263 60% 50% / 0.16), hsl(263 60% 40% / 0.05));
  box-shadow:
    0 0 30px hsl(263 70% 55% / 0.2),
    inset 0 0 18px hsl(263 60% 55% / 0.08);
}

/* ── Road + spine ── */
.hb-year__road {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 0.5rem 0 0.75rem;
}

.hb-year__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: hsl(263 40% 45% / 0.16);
  border-radius: 2px;
}

.hb-year__spine-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-dim), var(--accent) 55%, #d8caff);
  box-shadow: 0 0 14px hsl(263 60% 68% / 0.65);
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.2s linear;
}

/* ── Stops (alternating) ── */
.hb-year__stop {
  position: relative;
  width: calc(50% - 64px);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hb-year__stop:nth-of-type(odd) {
  margin-right: auto;
}

.hb-year__stop:nth-of-type(even) {
  margin-left: auto;
}

.hb-year__stop:last-of-type {
  margin-bottom: 0.5rem;
}

/* Node on the spine */
.hb-year__node {
  position: absolute;
  top: 10px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid hsl(263 60% 60% / 0.45);
  box-shadow: 0 0 0 6px hsl(263 60% 50% / 0.07);
  z-index: 2;
  transition:
    background 0.45s var(--ease-out-expo),
    border-color 0.45s var(--ease-out-expo),
    box-shadow 0.45s var(--ease-out-expo);
}

.hb-year__stop:nth-of-type(odd) .hb-year__node {
  left: calc(100% + 41px);
}

.hb-year__stop:nth-of-type(even) .hb-year__node {
  right: calc(100% + 41px);
}

.hb-year__node-num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  transition: color 0.45s var(--ease-out-expo);
}

.hb-year__node.is-active {
  background: var(--accent);
  border-color: hsl(263 60% 75% / 0.9);
  box-shadow:
    0 0 22px hsl(263 70% 60% / 0.6),
    0 0 60px hsl(263 60% 55% / 0.28);
}

.hb-year__node.is-active .hb-year__node-num {
  color: #12081f;
}

/* ── Cards ── */
.hb-year__card {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.6rem 1.7rem;
  background: linear-gradient(165deg, #1a1a29 0%, #12121d 60%);
  border: 1px solid hsl(263 55% 62% / 0.28);
  border-radius: 20px;
  box-shadow: 0 14px 44px hsl(0 0% 0% / 0.4);
  transition:
    transform 0.5s var(--ease-out-expo),
    border-color 0.5s var(--ease-out-expo),
    box-shadow 0.5s var(--ease-out-expo);
}

.hb-year__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, hsl(263 60% 68% / 0.75), transparent);
}

.hb-year__card:hover {
  transform: translateY(-4px);
  border-color: hsl(263 60% 66% / 0.55);
  box-shadow:
    0 0 46px hsl(263 70% 52% / 0.22),
    0 20px 55px hsl(0 0% 0% / 0.5);
}

.hb-year__card-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.05rem;
}

.hb-year__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #c9b8ff;
  background: hsl(263 60% 68% / 0.12);
  border: 1px solid hsl(263 60% 68% / 0.3);
  box-shadow: 0 0 18px hsl(263 60% 60% / 0.12);
}

.hb-year__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.hb-year__copy {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0.95rem;
}

.hb-year__lead {
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.55;
  color: #d8d5e6;
  margin-bottom: 0.95rem;
}

/* ── Bullets ── */
.hb-year__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-year__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.55;
  color: #c6c4d4;
  margin-bottom: 0.5rem;
}

.hb-year__list li:last-child {
  margin-bottom: 0;
}

.hb-year__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 10px hsl(263 60% 68% / 0.5);
}

@media (min-width: 720px) {
  .hb-year__list--cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
  }

  .hb-year__list--cols li {
    margin-bottom: 0;
  }
}

/* ── Assignment pills ── */
.hb-year__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.hb-year__chip {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d9cdff;
  background: hsl(263 60% 68% / 0.1);
  border: 1px solid hsl(263 60% 68% / 0.3);
  border-radius: 100px;
  padding: 0.32rem 0.75rem;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.hb-year__chip:hover {
  background: hsl(263 60% 68% / 0.18);
  border-color: hsl(263 60% 68% / 0.5);
}

/* ── We Got This lockup ── */
.hb-year__wgt {
  margin: 0.2rem 0 1rem;
}

.hb-year__wgt img {
  width: min(280px, 88%);
  height: auto;
  border-radius: 12px;
  border: 1px solid hsl(280 60% 60% / 0.35);
  box-shadow: 0 0 30px hsl(280 70% 50% / 0.18);
}

/* ── Honest-note callouts ── */
.hb-year__note {
  margin-top: 1rem;
  padding: 0.8rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: #b9b7c8;
  background: hsl(263 30% 14% / 0.45);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent-dim);
  border-radius: 10px;
}

.hb-year__note--strong {
  color: var(--text-accent);
  font-weight: 500;
  background: hsl(263 45% 22% / 0.28);
  border-left: 3px solid var(--accent);
  box-shadow: inset 0 0 30px hsl(263 60% 40% / 0.1);
}

.hb-year__note--strong strong {
  color: #efe9ff;
  font-weight: 600;
}

.hb-year__card .hb-year__note--strong:not(:last-child) {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* ── Responsive: single column, spine on the left ── */
@media (max-width: 859px) {
  .hb-year__spine {
    left: 22px;
    transform: none;
  }

  .hb-year__stop,
  .hb-year__stop:nth-of-type(odd),
  .hb-year__stop:nth-of-type(even) {
    width: calc(100% - 62px);
    margin-left: 62px;
    margin-right: 0;
  }

  .hb-year__node {
    width: 40px;
    height: 40px;
  }

  .hb-year__stop:nth-of-type(odd) .hb-year__node,
  .hb-year__stop:nth-of-type(even) .hb-year__node {
    left: -60px;
    right: auto;
  }

  .hb-year__node-num {
    font-size: 0.85rem;
  }

  .hb-year__card {
    padding: 1.35rem 1.25rem 1.5rem;
  }

  .hb-year__title {
    font-size: 1.2rem;
  }
}

/* ── Node sparkle: cinematic bloom when a stop lights up ── */
.hb-year__node::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  width: 64px;
  height: 22px;
  transform: translateX(-50%) scaleX(0.35);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, hsl(263 85% 72% / 0.55), hsl(263 70% 60% / 0.12) 55%, transparent 75%);
  filter: blur(3px);
  opacity: 0;
  pointer-events: none;
}

.hb-year__node.is-active::before {
  animation: nodeGlowPool 1.2s var(--ease-out-expo) forwards;
}

@keyframes nodeGlowPool {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(0.35); }
  40%  { opacity: 0.95; }
  100% { opacity: 0.5; transform: translateX(-50%) scaleX(1); }
}

/* Four tiny particles drifting out from the number */
.hb-year__node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.hb-year__node.is-active::after {
  animation: nodeSpark 0.85s ease-out forwards;
}

@keyframes nodeSpark {
  0% {
    opacity: 0;
    box-shadow:
      0 0 0 0 hsl(263 95% 82%),
      0 0 0 0 hsl(280 90% 80%),
      0 0 0 0 hsl(255 95% 85%),
      0 0 0 0 hsl(268 90% 78%);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    box-shadow:
      -20px -24px 0 0.5px hsl(263 95% 82% / 0),
      21px -18px 0 0.5px hsl(280 90% 80% / 0),
      -16px 20px 0 0.5px hsl(255 95% 85% / 0),
      18px 24px 0 0.5px hsl(268 90% 78% / 0);
  }
}

/* Card answers its node lighting up */
.hb-year__stop.is-lit .hb-year__card {
  border-color: hsl(263 58% 64% / 0.4);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hb-year__card,
  .hb-year__node,
  .hb-year__chip {
    transition: none !important;
  }

  .hb-year__card:hover {
    transform: none;
  }

  .hb-year__spine-fill {
    transition: none !important;
    transform: scaleY(1) !important;
  }

  .hb-year__node::before,
  .hb-year__node::after {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════
   WHY PAUL — QUIET CONVICTION
   No comparison, no cards. A paced editorial statement
   in Paul's voice: generous open, one big reason, calm
   negations, and a close that hands the work back.
   ═══════════════════════════════════════════════════ */
.hb-why__body {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.hb-why__open {
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}

.hb-why__kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.hb-why__statement {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

.hb-why__nots {
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
}

.hb-why__nots p {
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 300;
  line-height: 1.6;
  color: #85859a;
  margin-bottom: 0.4rem;
}

.hb-why__nots p:last-child {
  margin-bottom: 0;
}

.hb-why__is {
  font-size: clamp(1.05rem, 1.5vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.75;
  color: #d8d5e6;
  margin-bottom: clamp(2.25rem, 4vw, 3rem);
}

.hb-why__role {
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: clamp(2.75rem, 5vw, 4rem);
}

.hb-why__close-line {
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto 2rem;
  background: linear-gradient(90deg, transparent, hsl(263 60% 68% / 0.6), transparent);
}

.hb-why__close-yours {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 1.1rem;
}

.hb-why__close-accent {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 400;
  color: var(--accent);
  text-shadow: 0 0 30px hsl(263 60% 60% / 0.3);
}

/* ── Choreography reel — muted autoplay, click to watch with sound ── */
.hb-why__reel {
  width: min(820px, 100%);
  margin: clamp(2.75rem, 5vw, 4rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
}
.hb-why__reel-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 16px;
  overflow: hidden;
  background: #05050a;
  border: 1px solid hsl(263 30% 50% / 0.14);
  box-shadow:
    0 0 60px hsl(263 60% 50% / 0.18),
    0 0 120px hsl(263 60% 50% / 0.08),
    0 24px 60px -20px rgba(0,0,0,0.6);
}
.hb-why__reel-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.hb-why__reel-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  height: 100%;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, hsl(240 20% 3% / 0.12), hsl(240 20% 3% / 0.44));
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.45s ease, background 0.4s ease;
}
.hb-why__reel-play:hover {
  background: linear-gradient(180deg, hsl(240 20% 3% / 0.04), hsl(240 20% 3% / 0.32));
}
.hb-why__reel-play-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  padding-left: 4px; /* optical centering of the triangle */
  border-radius: 50%;
  color: #fff;
  background: hsl(263 60% 60% / 0.22);
  border: 1.5px solid hsl(263 70% 80% / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 34px hsl(263 60% 55% / 0.45);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease;
}
.hb-why__reel-play:hover .hb-why__reel-play-ring {
  transform: scale(1.08);
  background: hsl(263 65% 62% / 0.34);
  box-shadow: 0 0 46px hsl(263 60% 55% / 0.6);
}
.hb-why__reel-play-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #f2eeff;
  text-shadow: 0 1px 18px hsl(263 40% 10% / 0.85);
}
.hb-why__reel.is-playing .hb-why__reel-play {
  opacity: 0;
  pointer-events: none;
}
.hb-why__reel-cap {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: #85859a;
}
@media (prefers-reduced-motion: reduce) {
  .hb-why__reel-play,
  .hb-why__reel-play-ring { transition: none; }
}


/* ═══════════════════════════════════════════════════
   MENTEE VIDEO TESTIMONIALS — "VOICES"
   Two real Instagram reels, phone-framed, click-to-
   play with sound. Ghosted PROOF watermark, ambient
   violet pools, editorial captions under each phone.
   ═══════════════════════════════════════════════════ */
.hb-voices {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 7rem) var(--page-pad) clamp(4.5rem, 7vw, 7.5rem);
  background: #000;
  border-top: 1px solid hsl(263 40% 30% / 0.2);
  border-bottom: 1px solid hsl(263 40% 30% / 0.2);
}

/* ── Atmosphere ── */
.hb-voices__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hb-voices__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.hb-voices__glow--left {
  width: 480px;
  height: 480px;
  left: max(4vw, calc(50% - 620px));
  top: 32%;
  background: radial-gradient(circle, hsl(263 60% 40% / 0.16), transparent 70%);
}

.hb-voices__glow--right {
  width: 520px;
  height: 520px;
  right: max(2vw, calc(50% - 660px));
  top: 44%;
  background: radial-gradient(circle, hsl(280 55% 38% / 0.13), transparent 70%);
}

.hb-voices__glow--floor {
  width: min(900px, 90vw);
  height: 220px;
  left: 50%;
  bottom: -60px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, hsl(263 60% 45% / 0.12), transparent 70%);
}

/* Ghosted editorial watermark behind the phones */
.hb-voices__ghost {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(7rem, 24vw, 20rem);
  letter-spacing: 0.12em;
  line-height: 1;
  color: hsl(263 60% 68% / 0.045);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* ── Header ── */
.hb-voices__header {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: var(--page-max);
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
}

.hb-voices__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.hb-voices__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hb-voices__headline-accent {
  color: var(--accent);
}

.hb-voices__hint {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--text-secondary);
}

/* ── Grid ── */
.hb-voices__grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  max-width: var(--page-max);
  margin: 0 auto;
}

.hb-voices__card {
  margin: 0;
  width: clamp(260px, 80vw, 320px);
}

/* ── Phone frame ── */
.hb-voices__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid hsl(263 40% 40% / 0.18);
  box-shadow:
    0 8px 40px hsl(263 60% 20% / 0.25),
    0 24px 80px hsl(0 0% 0% / 0.55);
  cursor: pointer;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hb-voices__frame--tilt-left { transform: rotate(-1.4deg); }
.hb-voices__frame--tilt-right { transform: rotate(1.6deg); }

.hb-voices__card:hover .hb-voices__frame,
.hb-voices__card.is-playing .hb-voices__frame {
  transform: rotate(0deg) translateY(-4px);
  border-color: hsl(263 60% 60% / 0.35);
  box-shadow:
    0 0 70px hsl(263 70% 55% / 0.32),
    0 0 150px hsl(263 60% 45% / 0.14),
    0 28px 90px hsl(0 0% 0% / 0.65);
}

.hb-voices__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* ── Scrim + duration ── */
.hb-voices__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, hsl(0 0% 0% / 0.22), transparent 30%, transparent 62%, hsl(263 40% 8% / 0.5));
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.hb-voices__duration {
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: hsl(263 30% 10% / 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(263 60% 55% / 0.18);
  border-radius: 100px;
  padding: 0.28rem 0.7rem;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* ── Play button ── */
.hb-voices__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.hb-voices__play-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: hsl(263 30% 10% / 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid hsl(263 60% 62% / 0.45);
  box-shadow:
    0 4px 24px hsl(0 0% 0% / 0.45),
    0 0 40px hsl(263 70% 55% / 0.25);
  transition: transform var(--spring-snappy-dur) var(--spring-snappy);
}

.hb-voices__play-disc svg {
  margin-left: 3px;
  filter: drop-shadow(0 2px 6px hsl(0 0% 0% / 0.4));
}

.hb-voices__play:hover .hb-voices__play-disc {
  transform: scale(1.12);
}

.hb-voices__play-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  border: 1px solid hsl(263 60% 68% / 0.5);
  animation: voicesPulse 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}

@keyframes voicesPulse {
  0%   { transform: scale(1); opacity: 0.9; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

.hb-voices__play-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--text-primary);
  text-shadow: 0 1px 8px hsl(0 0% 0% / 0.6);
}

/* Playing state: chrome fades out, native controls take over */
.hb-voices__card.is-playing .hb-voices__play,
.hb-voices__card.is-playing .hb-voices__scrim,
.hb-voices__card.is-playing .hb-voices__duration {
  opacity: 0;
  pointer-events: none;
}

/* ── Caption ── */
.hb-voices__caption {
  padding: 1.4rem 0.35rem 0;
}

.hb-voices__name-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.hb-voices__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.hb-voices__handle {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.hb-voices__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.hb-voices__chip {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-accent);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border);
  border-radius: 100px;
  padding: 0.32rem 0.75rem;
  white-space: nowrap;
}

.hb-voices__quote {
  margin: 0;
  position: relative;
  padding-left: 0.9rem;
  border-left: 2px solid hsl(263 60% 68% / 0.35);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── Mobile ── */
@media (max-width: 719px) {
  .hb-voices__grid {
    gap: 3.25rem;
  }

  .hb-voices__ghost {
    font-size: 30vw;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hb-voices__frame,
  .hb-voices__frame--tilt-left,
  .hb-voices__frame--tilt-right {
    transform: none !important;
    transition: none !important;
  }

  .hb-voices__play-ring {
    animation: none !important;
    opacity: 0;
  }

  .hb-voices__play-disc {
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════
   SOCIAL PROOF — 3D PHONE GALLERY
   Cinematic stage: huge breathing room, layered
   purple/black atmosphere, oversized phones with
   scroll-driven 3D perspective.
   ═══════════════════════════════════════════════════ */
.hb-phones {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 6vw, 6rem) 0 clamp(3.5rem, 6vw, 6rem);
  background: #000;
  min-height: 500px;
  border-top: 1px solid hsl(263 40% 30% / 0.2);
  border-bottom: 1px solid hsl(263 40% 30% / 0.2);
}

/* ── Layered atmospheric glow ── */
.hb-phones__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hb-phones__glow {
  position: absolute;
  pointer-events: none;
}

.hb-phones__glow--core {
  inset: 10% 15%;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    hsl(263 70% 22% / 0.55) 0%,
    hsl(263 60% 14% / 0.3) 35%,
    transparent 70%
  );
  filter: blur(40px);
}

.hb-phones__glow--wide {
  inset: -10% -5%;
  background: radial-gradient(
    ellipse 100% 60% at 50% 60%,
    hsl(270 50% 12% / 0.4) 0%,
    hsl(260 40% 8% / 0.15) 50%,
    transparent 80%
  );
}

.hb-phones__glow--floor {
  bottom: -5%;
  left: 10%;
  right: 10%;
  height: 40%;
  background: radial-gradient(
    ellipse 90% 100% at 50% 100%,
    hsl(263 60% 18% / 0.45) 0%,
    transparent 70%
  );
  filter: blur(30px);
}

/* ── Header ── */
.hb-phones__header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--page-pad);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hb-phones__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 1.25rem;
  opacity: 1;
}

.hb-phones__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  opacity: 1;
}

.hb-phones__headline-accent {
  color: var(--accent);
}

.hb-phones__hint {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--text-secondary);
  opacity: 1;
}

.js-motion .hb-phones__eyebrow,
.js-motion .hb-phones__headline,
.js-motion .hb-phones__hint,
.js-motion .hb-phones__item {
  opacity: 0;
}

/* ── Track ── */
.hb-phones__track-wrap {
  position: relative;
  z-index: 2;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  cursor: grab;
  padding: 3rem 0;
}

.hb-phones__track-wrap::-webkit-scrollbar {
  display: none;
}

.hb-phones__track {
  display: flex;
  gap: clamp(2rem, 3.5vw, 3.5rem);
  padding: 2rem clamp(3rem, 10vw, 8rem);
  width: max-content;
  will-change: transform;
}

/* ── Individual phone item ── */
.hb-phones__item {
  position: relative;
  flex-shrink: 0;
  width: clamp(260px, 24vw, 340px);
  height: clamp(540px, 50vw, 680px);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  cursor: pointer;
  opacity: 1;
}

.hb-phones__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 28px;
  filter: brightness(0.75) saturate(0.8);
  transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-user-drag: none;
  box-shadow: 0 8px 40px hsl(263 60% 20% / 0.2);
}

/* Spotlight: hovered phone glows, siblings dim */
.hb-phones__track:hover .hb-phones__item {
  opacity: 0.45;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hb-phones__track:hover .hb-phones__item:hover {
  opacity: 1;
}

.hb-phones__item:hover img {
  filter: brightness(1.15) saturate(1.15) contrast(1.05);
  box-shadow:
    0 0 80px hsl(263 70% 55% / 0.4),
    0 0 160px hsl(263 60% 45% / 0.18),
    0 24px 80px hsl(0 0% 0% / 0.6);
  border: 1px solid hsl(263 60% 60% / 0.25);
}

/* ── Label overlay — premium pill ── */
.hb-phones__label {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-primary);
  background: hsl(263 30% 10% / 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  border: 1px solid hsl(263 60% 55% / 0.2);
  box-shadow: 0 4px 20px hsl(263 60% 30% / 0.25);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hb-phones__item:hover .hb-phones__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Keyboard focus ring for accessibility */
.hb-phones__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 28px;
}

.hb-phones__item:focus-visible .hb-phones__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Label text reveal animation ── */
.hb-phones__label[data-revealed] {
  animation: labelReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes labelReveal {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ── Arrow navigation buttons ── */
.hb-phones__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsl(263 30% 10% / 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(263 60% 55% / 0.2);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.hb-phones:hover .hb-phones__arrow {
  opacity: 0.7;
}

.hb-phones__arrow:hover {
  opacity: 1 !important;
  background: hsl(263 30% 15% / 0.9);
  border-color: var(--accent);
}

.hb-phones__arrow--left {
  left: clamp(12px, 3vw, 32px);
}

.hb-phones__arrow--right {
  right: clamp(12px, 3vw, 32px);
}

@media (hover: none) {
  .hb-phones__arrow { display: none; }
}

/* ── Fade edges — wider for cinematic vignette ── */
.hb-phones__track-wrap::before,
.hb-phones__track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 10vw, 180px);
  z-index: 3;
  pointer-events: none;
}

.hb-phones__track-wrap::before {
  left: 0;
  background: linear-gradient(to right, #000 0%, transparent 100%);
}

.hb-phones__track-wrap::after {
  right: 0;
  background: linear-gradient(to left, #000 0%, transparent 100%);
}


/* ═══════════════════════════════════════════════════
   FOR PARENTS — EMOTIONAL CINEMATIC SECTION
   Full-bleed with warm gradient BG, dark overlay,
   glassmorphism text card.
   ═══════════════════════════════════════════════════ */
.hb-parents {
  position: relative;
  padding: clamp(48px, 6vw, 80px) 0;
  overflow: hidden;
}

.hb-parents__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Warm emotional gradient — simulates soft parental support imagery */
.hb-parents__bg-warm {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, hsl(30 40% 18% / 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 70% 60%, hsl(280 30% 15% / 0.4) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 50%, hsl(20 35% 12% / 0.3) 0%, transparent 70%),
    linear-gradient(180deg, hsl(25 20% 10%) 0%, hsl(260 20% 8%) 100%);
}

/* Heavy cinematic dark overlay */
.hb-parents__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      var(--bg-deep) 0%,
      hsl(240 10% 4% / 0.5) 15%,
      hsl(240 10% 4% / 0.4) 50%,
      hsl(240 10% 4% / 0.5) 85%,
      var(--bg-deep) 100%
    );
}

.hb-parents__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  justify-content: center;
}

/* Glassmorphism card — frosted dark glass */
.hb-parents__glass {
  max-width: 680px;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: rgba(15, 15, 20, 0.6);
  border: 1px solid hsl(263 40% 60% / 0.15);
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 0 80px hsl(263 60% 50% / 0.06),
    0 24px 60px hsl(240 10% 4% / 0.4);
}

.hb-parents__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--text-primary);
}

.hb-parents__body p {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.hb-parents__body p:last-child {
  margin-bottom: 0;
  color: var(--text-accent);
  font-style: italic;
}

.hb-parents__btn {
  margin-top: 2rem;
}


/* ═══════════════════════════════════════════════════
   FAQ — ACCORDION
   ═══════════════════════════════════════════════════ */
.hb-faq__sub {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
  margin-top: -1.5rem;
  margin-bottom: 3rem;
}

.hb-faq__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hb-faq__item {
  border-bottom: 1px solid hsl(263 30% 50% / 0.06);
}

.hb-faq__item:first-child {
  border-top: 1px solid hsl(263 30% 50% / 0.06);
}

.hb-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.3vw, 0.9375rem);
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  transition: color 0.3s ease;
}

.hb-faq__question::-webkit-details-marker { display: none; }

.hb-faq__question::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.3s var(--ease-out-expo), color 0.3s ease;
}

.hb-faq__item[open] .hb-faq__question::after {
  transform: rotate(45deg);
  color: var(--accent);
}

.hb-faq__item[open] .hb-faq__question {
  color: var(--accent);
}

.hb-faq__answer {
  padding: 0 0 1.5rem 0;
  overflow: hidden;
}

.hb-faq__answer p {
  font-size: clamp(0.8125rem, 1.2vw, 0.875rem);
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.hb-faq__answer p:last-child {
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════ */
.hb-final-cta {
  padding: clamp(48px, 6vw, 80px) 0;
}

.hb-final-cta__inner {
  text-align: center;
  position: relative;
}

.hb-final-cta__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 500px;
  background: radial-gradient(ellipse, hsl(263 60% 50% / 0.08) 0%, transparent 55%);
  pointer-events: none;
  animation: ctaGlowPulse 5s ease-in-out infinite;
}

@keyframes ctaGlowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.hb-final-cta__badge {
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.375rem 0.875rem;
  background: hsl(263 60% 60% / 0.08);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  margin-bottom: 2rem;
}

.hb-final-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.hb-final-cta__rule {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 0 auto 1.5rem;
}

.hb-final-cta__desc {
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto 2.5rem;
}

.hb-final-cta__image {
  max-width: 420px;
  margin: 0 auto 2rem;
}

.hb-final-cta__image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.hb-final-cta__note {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-tertiary);
  margin-top: 1.5rem;
}

/* Hide final CTA elements for JS-powered reveal */
.js-motion .hb-final-cta__image,
.js-motion .hb-final-cta__badge,
.js-motion .hb-final-cta__title,
.js-motion .hb-final-cta__desc,
.js-motion .hb-final-cta .hb-btn,
.js-motion .hb-final-cta__note {
  opacity: 0;
}

.js-motion .hb-final-cta__rule {
  width: 0;
}


/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.footer {
  padding: clamp(3rem, 6vh, 4.5rem) 0 2rem;
  border-top: 1px solid hsl(263 30% 50% / 0.05);
  background: linear-gradient(180deg, hsl(240 8% 6%) 0%, var(--bg-deep) 100%);
}

.footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.footer__brand { text-align: center; }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.5rem;
}

.footer__tagline {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.25rem;
}

.footer__nav a {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}
.footer__nav a:hover { color: var(--text-primary); }

.footer__social {
  display: flex;
  gap: 2rem;
}

.footer__social-link {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  transition: color 0.3s ease;
}
.footer__social-link:hover { color: var(--accent); }

.footer__contact-line {
  padding-top: 1rem;
  border-top: 1px solid hsl(263 30% 50% / 0.04);
  width: 100%;
  text-align: center;
}

.footer__email {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}
.footer__email:hover { color: var(--accent); }

.footer__inquiries {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-left: 0.5rem;
}

.footer__bottom {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-align: center;
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — 768px
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header__nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: hsl(240 8% 5% / 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 0 var(--page-pad);
    gap: 0;
    border-bottom: 1px solid hsl(263 30% 50% / 0.06);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s var(--ease-out-expo),
                opacity 0.35s ease,
                padding 0.35s ease;
  }

  .site-header__nav.is-open {
    max-height: 400px;
    opacity: 1;
    padding: 1.5rem var(--page-pad);
    gap: 0.25rem;
  }

  .site-header__nav a {
    padding: 0.75rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .site-header__burger { display: flex; }

  .hb-problem__grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }

  .hb-authority__stats {
    flex-direction: column;
    gap: 1.5rem;
  }

  .hb-phones__item {
    width: 230px;
    height: 480px;
  }

  /* Better mobile touch targets */
  .hb-hero__cta,
  .hb-btn {
    min-height: 48px;
  }

  .hb-faq__question {
    min-height: 48px;
    padding: 1rem 0;
  }

  .footer__nav {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .footer__nav a {
    padding: 0.5rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .footer__social {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
  }

  .footer__social-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE — 480px
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hb-hero {
    min-height: auto;
    padding: 5.5rem 0 3rem;
  }

  .hb-hero__title {
    font-size: clamp(2.125rem, 9.6vw, 3.125rem);
    line-height: 0.98;
  }

  .hb-hero__eyebrow {
    margin-bottom: 1rem;
    font-size: 0.6875rem;
    letter-spacing: 0.15em;
    white-space: normal;
    text-wrap: balance;
    padding: 0 0.5rem;
  }

  .hb-hero__authority {
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: -0.005em;
    margin: 1.1rem auto 0.4rem;
  }

  .hb-hero__credits-strip {
    display: none;
  }

  .hb-hero__support {
    margin: 0.25rem auto 0.4rem;
  }

  .hb-hero__cta,
  .hb-btn {
    width: 100%;
    justify-content: center;
  }

  .hb-final-cta__title {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }

  .hb-parents__glass {
    padding: 1.5rem;
  }

  .hb-phones__item {
    width: 200px;
    height: 420px;
  }

  .hb-phones__headline {
    font-size: 1.75rem;
  }
}


/* ═══════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .hb-hero__fluid-layer {
    animation: none !important;
  }

  .hb-hero__eyebrow,
  .hb-hero__title,
  .hb-hero__authority,
  .hb-hero__support,
  .hb-hero__pivot,
  .hb-hero__proof,
  .hb-hero__credits,
  .hb-hero__tension,
  .hb-hero__nudge,
  .hb-hero__cta,
  .hb-hero__cta-helper,
  .hb-hero__scroll-hint,
  .hb-hero__video-section,
  .hb-section__heading {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .hb-what__block,
  .hb-problem__card,
  .hb-build__card {
    opacity: 1 !important;
    transform: none !important;
  }

  .hb-problem__grid {
    opacity: 1 !important;
    transform: none !important;
  }

  .hb-authority__track {
    animation: none !important;
  }

  .hb-phones__item {
    opacity: 1 !important;
    transform: none !important;
  }

  .hb-phones__eyebrow,
  .hb-phones__headline,
  .hb-phones__hint {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .hb-final-cta__image,
  .hb-final-cta__badge,
  .hb-final-cta__title,
  .hb-final-cta__desc,
  .hb-final-cta .hb-btn,
  .hb-final-cta__note {
    opacity: 1 !important;
    transform: none !important;
  }

  .hb-final-cta__rule {
    width: 40px !important;
  }

  .hb-final-cta__glow {
    animation: none !important;
  }

  .hb-hero__cta::after,
  .hb-btn--primary::after {
    animation: none !important;
    display: none !important;
  }

  .hb-faq__item {
    opacity: 1 !important;
    transform: none !important;
  }

  @keyframes labelReveal {
    0%, 100% { clip-path: none; }
  }
}


/* ═══════════════════════════════════════════════════
   TOUCH / NO-HOVER
   ═══════════════════════════════════════════════════ */
@media (hover: none) {
  .hb-hero__cta:hover,
  .hb-btn:hover {
    box-shadow: none;
  }

  .hb-problem__card:hover {
    border-color: var(--glass-border);
    box-shadow: none;
  }

  .hb-phones__item:hover img {
    filter: brightness(0.75) saturate(0.8);
  }

  .hb-phones__track:hover .hb-phones__item {
    opacity: 1;
  }

  /* Labels always visible on touch devices */
  .hb-phones__label {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
  }
}