/* ==========================================================================
   CK Global Academy — "From Fog to Focus"
   Premium dark editorial theme. Color is restrained on purpose:
   solid brand colors, quiet surfaces, and minimal decorative effects.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

:root {
  /* Brand palette */
  --indigo: #443199;
  --indigo-bright: #8d7ce2;
  --purple: #792ca2;
  --purple-bright: #b764d7;
  --magenta: #c13383;
  --magenta-bright: #e272b0;
  --coral: #e05454;
  --coral-deep: #bb3d46;
  /* Emphasis orange — 9.5:1 on --bg-0, so it stays readable as plain text. */
  --orange: #ff9d4d;
  --orange-deep: #f2792a;

  /* Dark surfaces */
  --bg-0: #0c0818;
  --bg-1: #151026;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.085);
  --surface-accent: rgba(193, 51, 131, 0.12);
  --surface-warm: rgba(224, 84, 84, 0.10);
  --border: rgba(245, 243, 255, 0.11);
  --border-strong: rgba(245, 243, 255, 0.20);
  --line-accent: rgba(193, 51, 131, 0.65);

  /* Text */
  --text-hi: #f7f3ff;
  --text-body: #ded8f2;
  --text-dim: #b7afd5;

  /* Shadows */
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 16px 42px rgba(0, 0, 0, 0.28);
  --container: 1360px;
  --page-gutter: 2rem;
  --font-body: "Manrope", sans-serif;
  --font-heading: "Source Serif 4", serif;
}

* {
  box-sizing: border-box;
}

html {
  /* 17px root — all rem sizes scale up for readability */
  font-size: 106.25%;
  scroll-behavior: smooth;
}

/* When Lenis takes over scrolling, native smooth-scroll must yield */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  background: var(--bg-0);
  color: var(--text-body);
  line-height: 1.65;
  overflow-x: hidden;
}

::selection {
  background: var(--magenta);
  color: var(--bg-0);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(193, 51, 131, 0.36);
  border-radius: 6px;
}

h1, h2, h3, h4 {
  color: var(--text-hi);
}

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(calc(100% - (var(--page-gutter) * 2)), var(--container));
  max-width: var(--container);
  margin: 0 auto;
}

main {
  position: relative;
}

main > section {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  z-index: 100;
  background: rgba(12, 8, 24, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.navbar {
  min-height: 62px;
}

.site-header .navbar {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  font-weight: 800;
  color: var(--text-hi);
  isolation: isolate;
}

.brand-mark {
  width: 58px;
  height: 58px;
  display: block;
  flex: 0 0 58px;
  object-fit: contain;
  border-radius: 14px;
  filter:
    drop-shadow(0 0 16px rgba(226, 114, 176, 0.28))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.36));
}

.brand-text {
  display: grid;
  justify-items: center;
  line-height: 1.05;
  white-space: nowrap;
}

/* Shared wordmark — the same face as the hero lockup (logo-lockup.svg).
   Use .wordmark-name / .wordmark-tag anywhere the brand name appears so
   every instance stays identical. Sizes are set per context. */
.wordmark-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: linear-gradient(100deg, #5f3925 0%, #e1ad75 18%, #fff0c5 43%, #a96e45 66%, #eac69a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .34));
}

.wordmark-tag {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #ff8a76;
}

.brand-text .wordmark-name {
  font-size: clamp(1rem, 1.44vw, 1.24rem);
}

.brand-text .wordmark-tag {
  margin-top: 0.16rem;
  font-size: 0.74rem;
}

.brand:hover .brand-mark {
  filter:
    drop-shadow(0 0 24px rgba(255, 157, 77, 0.34))
    drop-shadow(0 0 18px rgba(226, 114, 176, 0.34))
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.38));
}

.navbar-nav .nav-link {
  color: var(--text-dim);
  font-weight: 600;
  padding-left: 0;
  padding-right: 0;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.active {
  color: var(--text-hi);
}

.nav-cta {
  min-height: 40px;
  padding: 0.62rem 1.15rem;
  font-size: 0.92rem;
}

.nav-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--text-hi);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.button-primary {
  background: var(--coral);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.button-primary:hover {
  transform: translateY(-2px);
  background: var(--coral-deep);
  box-shadow: var(--shadow);
  color: #fff;
}

.button-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text-hi);
}

.button-secondary:hover {
  border-color: var(--magenta);
  color: var(--text-hi);
  transform: translateY(-2px);
}

.text-link {
  color: var(--magenta-bright);
  font-weight: 700;
  border-bottom: 1px solid rgba(193, 51, 131, 0.5);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.text-link:hover {
  color: var(--text-hi);
  border-color: var(--magenta);
}

/* --------------------------------------------------------------------------
   Shared section chrome
   -------------------------------------------------------------------------- */
.section {
  padding: 6.5rem 0;
}

.section-accent {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-label {
  font-family: 'Great Vibes', cursive;
  font-size: 3rem !important;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--magenta-bright);
  margin-bottom: 0.9rem;
}

.section-heading {
  max-width: 840px;
  margin-bottom: 3rem;
}

.section-heading h2,
.section-copy p {
  margin-bottom: 1rem;
}

/* Emphasis is carried by colour and weight, not a filled pill. A pill on an
   inline phrase splits into ragged blocks whenever the phrase wraps, which it
   did constantly at 27 usages across the page. */
.text-mark {
  color: var(--orange);
  font-weight: 700;
}

/* Any remaining filled span must clone its box on each wrapped line, otherwise
   the padding and radius apply only to the first and last fragment. */
.text-mark-magenta {
  color: var(--text-hi);
  background: var(--magenta);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Same hue as .text-mark, lighter weight — one accent colour, two levels. */
.text-accent {
  color: var(--orange);
}

.text-gradient {
  color: var(--magenta-bright);
}

.lead-copy {
  font-size: 1.16rem;
}

/* --------------------------------------------------------------------------
   SCENE 1 · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  padding: 2.9rem 0 5.2rem;
  overflow: hidden;
  background: var(--bg-0);
}

.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero .container {
  position: relative;
}

.hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

.hero-logo-lockup {
  width: min(100%, 610px);
  max-height: 138px;
  margin: 0 0 1.15rem -0.55rem;
  padding: 0.25rem 0.65rem 0.25rem 0.15rem;
  border: 1px solid rgba(255, 226, 180, .11);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 48%, rgba(255, 157, 77, .12), transparent 34%),
    radial-gradient(circle at 68% 30%, rgba(226, 114, 176, .1), transparent 38%),
    linear-gradient(115deg, rgba(255, 255, 255, .046), rgba(255, 255, 255, .012));
  filter:
    drop-shadow(0 0 24px rgba(226, 114, 176, .18))
    drop-shadow(0 14px 32px rgba(0, 0, 0, .36));
  transform-origin: left center;
  animation: logoReveal .9s ease-out both;
}

.eyebrow {
  font-weight: 700;
  color: var(--text-hi);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}

@keyframes logoReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.97);
    filter: drop-shadow(0 0 0 rgba(226, 114, 176, 0));
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero h1 {
  font-size: clamp(1.92rem, 4vw, 2.88rem);
  margin-bottom: 1.3rem;
  text-wrap: balance;
}

.hero-text {
  font-size: 1.18rem;
  max-width: 36rem;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero-points {
  display: grid;
  gap: 1rem;
}

.hero-point {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
}

.hero-point h3 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
}

.hero-point p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-body);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  text-align: center;
  color: var(--text-dim);
}

.scroll-hint span {
  display: block;
  width: 2px;
  height: 42px;
  margin: 0 auto 0.5rem;
  background: var(--line-accent);
  animation: hint-drop 2.2s ease-in-out infinite;
}

.scroll-hint p {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

@keyframes hint-drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.2; }
}

/* --------------------------------------------------------------------------
   SCENE 2 · The Confusion
   -------------------------------------------------------------------------- */
.scene-confusion {
  background: var(--bg-0);
}

.confusion-pin {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chaos-field {
  position: absolute;
  inset: 0;
}

.chaos-chip {
  position: absolute;
  z-index: 2;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Perimeter placement — the chips orbit the artwork, never sit on it */
/* Ring layout: chips orbit the figure — none in the clipped bottom strip,
   none behind the artwork, none inside the headline zone (bottom center). */
.chaos-chip:nth-of-type(1)  { top: 10%; left: 6%; }
.chaos-chip:nth-of-type(2)  { top: 14%; right: 6%; }
.chaos-chip:nth-of-type(3)  { top: 40%; left: 3%; }
/* Was left 36% — on <=1400px-wide screens its right edge met chip 14. */
.chaos-chip:nth-of-type(4)  { top: 5%;  left: 30%; }
.chaos-chip:nth-of-type(5)  { top: 48%; right: 3%; }
.chaos-chip:nth-of-type(6)  { bottom: 18%; left: 8%; }
.chaos-chip:nth-of-type(7)  { bottom: 30%; right: 8%; }
.chaos-chip:nth-of-type(8)  { bottom: 10%; right: 5%; }
.chaos-chip:nth-of-type(9)  { bottom: 26%; left: 22%; }
/* Was top 26% — within idle-drift range of chip 15 (top 18% left 26%). */
.chaos-chip:nth-of-type(10) { top: 29%; left: 15%; }
.chaos-chip:nth-of-type(11) { top: 58%; left: 13%; }
.chaos-chip:nth-of-type(12) { top: 30%; right: 15%; }
.chaos-chip:nth-of-type(13) { bottom: 44%; left: 5%; }
/* Was right 24% — within idle-drift range of chip 2 (top 14% right 6%). */
.chaos-chip:nth-of-type(14) { top: 6%;  right: 28%; }
.chaos-chip:nth-of-type(15) { top: 18%; left: 26%; }
/* Clear of chip 7 (bottom 30% right 8%) — at 62%/21% the two shared a band on
   the right and collided once the end-state 1.2 scale and idle drift kicked in. */
.chaos-chip:nth-of-type(16) { top: 57%; right: 26%; }

/* Depth tiers — near chips read bigger and brighter, far ones recede.
   Together with the pointer parallax this layers the scene in 3D. */
.chaos-chip:nth-of-type(3n)   { font-size: 0.86rem; opacity: 0.6; }
.chaos-chip:nth-of-type(3n+1) { font-size: 0.96rem; opacity: 0.8; }
.chaos-chip:nth-of-type(3n+2) {
  font-size: 1.06rem;
  opacity: 0.95;
  border-color: var(--border-strong);
  color: var(--text-body);
}

/* The student at the center of the chaos — full uncropped artwork
   (confused-student.webp) with feathered edges, floating over the scene. */
.student-figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1060px, 92vw);
  aspect-ratio: 1500 / 823;
  background: transparent;
}

.student-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("confused-student.webp") center / contain no-repeat;
  animation: student-float 5.5s ease-in-out infinite alternate;
  will-change: transform;
}

.confusion-pin.is-scrubbing .student-figure::after,
.confusion-pin.is-scrubbing .chaos-chip {
  animation-play-state: paused;
}

/* Set by the script when the scene cannot be pinned (tablets, or a desktop
   window too short even for the compact pinned tier). Scoped to >=768px: the
   phone block at the end of this sheet owns the collage below that and these
   higher-specificity rules must not override it. The 16 desktop chip spots
   assume a full-viewport field — in this shorter collage they collide, so the
   collage keeps 8 chips in strict corner rows, like the phone layout. */
@media (min-width: 768px) {
  .confusion-pin.is-static {
    display: block;
    min-height: 0;
    overflow: visible;
    padding: 3rem 0 0;
  }

  .confusion-pin.is-static .chaos-field {
    position: relative;
    inset: auto;
    height: 60vh;
    min-height: 330px;
  }

  .confusion-pin.is-static .student-figure {
    top: 50%;
    width: min(720px, 70vw);
  }

  /* display:block drops the flex centering the pinned layout relied on. */
  .confusion-pin.is-static .confusion-copy {
    margin: 2.25rem auto 0;
  }

  .confusion-pin.is-static .chaos-chip:nth-of-type(n+9) {
    display: none;
  }

  .confusion-pin.is-static .chaos-chip:nth-of-type(3n),
  .confusion-pin.is-static .chaos-chip:nth-of-type(3n+1),
  .confusion-pin.is-static .chaos-chip:nth-of-type(3n+2) {
    font-size: 0.82rem;
    opacity: 0.85;
  }

  /* Two rows above the figure, two below — nothing on the artwork. */
  .confusion-pin.is-static .chaos-chip:nth-of-type(1) { top: 3%;  left: 5%;   right: auto; bottom: auto; }
  .confusion-pin.is-static .chaos-chip:nth-of-type(2) { top: 3%;  right: 5%;  left: auto;  bottom: auto; }
  .confusion-pin.is-static .chaos-chip:nth-of-type(3) { top: 15%; left: 15%;  right: auto; bottom: auto; }
  .confusion-pin.is-static .chaos-chip:nth-of-type(4) { top: 15%; right: 15%; left: auto;  bottom: auto; }
  .confusion-pin.is-static .chaos-chip:nth-of-type(5) { bottom: 15%; left: 8%;   top: auto; right: auto; }
  .confusion-pin.is-static .chaos-chip:nth-of-type(6) { bottom: 15%; right: 8%;  top: auto; left: auto; }
  .confusion-pin.is-static .chaos-chip:nth-of-type(7) { bottom: 3%;  left: 16%;  top: auto; right: auto; }
  .confusion-pin.is-static .chaos-chip:nth-of-type(8) { bottom: 3%;  right: 16%; top: auto; left: auto; }
}

@keyframes student-float {
  from { transform: translateY(-7px); }
  to   { transform: translateY(9px); }
}

@media (prefers-reduced-motion: reduce) {
  .student-figure::after {
    animation: none;
  }
}

.confusion-copy {
  position: relative;
  max-width: 655px;
  text-align: center;
  padding: 0 1.5rem;
  margin-top: 60vh;
}

/* The page-wide 3.75rem cursive label wraps to two lines inside this column
   and makes the copy taller than the space under the boy. The pinned scene
   then stretches past one viewport: the headline sinks below the fold and the
   chip field deforms until bubbles collide. One line at this size keeps the
   whole scene exactly 100vh. */
.confusion-copy .section-label {
  font-size: 1.92rem !important;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

/* Shorter screens (laptops): smaller artwork, copy clear of his feet */
@media (max-height: 850px) {
  .student-figure {
    width: min(780px, 80vw);
    top: 44%;
  }

  .confusion-copy {
    margin-top: 56vh;
  }
}

/* Compact pinned tier: desktops squeezed under ~700px of CSS viewport by
   display scaling and browser chrome. Everything scales down so the pinned
   scene still fits exactly one screen — figure, copy, and chips together;
   full-size chips would collide in a field this short. */
@media (min-width: 992px) and (max-height: 700px) {
  .student-figure {
    width: min(600px, 58vw);
    top: 42%;
  }

  .confusion-copy {
    margin-top: 47vh;
  }

  .confusion-copy .section-label {
    font-size: 1.6rem !important;
  }

  .confusion-copy h2 {
    font-size: clamp(1.12rem, 2.08vw, 1.52rem);
  }

  .confusion-sub {
    font-size: 0.95rem;
  }

  .chaos-chip:nth-of-type(3n)   { font-size: 0.72rem; }
  .chaos-chip:nth-of-type(3n+1) { font-size: 0.8rem; }
  .chaos-chip:nth-of-type(3n+2) { font-size: 0.88rem; }

  /* Ten chips are the most a 500-700px field can hold without collisions
     once the end-state growth and idle drift are budgeted in. */
  .chaos-chip:nth-of-type(9),
  .chaos-chip:nth-of-type(10),
  .chaos-chip:nth-of-type(13),
  .chaos-chip:nth-of-type(14),
  .chaos-chip:nth-of-type(15),
  .chaos-chip:nth-of-type(16) {
    display: none;
  }
}

.confusion-copy h2 {
  font-size: clamp(1.44rem, 2.88vw, 2.08rem);
  text-wrap: balance;
}

/* Centred under the heading. A fixed 14rem left margin only lined up at one
   viewport width and sat off-centre everywhere else. */
.confusion-sub {
  color: var(--orange);
  font-size: 1.1rem;
  margin: 1rem auto 0;
}

.confusion-about {
  padding: 6.5rem 0;
}

/* --------------------------------------------------------------------------
   SCENE 3 · Founder
   -------------------------------------------------------------------------- */
.founder-shell {
  max-width: 1180px;
  margin: 0 auto;
}

.founder-card {
  margin-top: 2rem;
  padding: 2.5rem;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Portrait — the origin of the road */
.founder-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
}

.founder-portrait {
  width: 184px;
  height: 184px;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 4px;
  background: var(--magenta);
  box-shadow: var(--shadow-soft);
}

.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.founder-intro {
  display: grid;
  gap: 1rem;
}

.founder-name {
  margin: 0;
  color: var(--orange);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
}

.founder-intro p {
  max-width: 760px;
  margin: 0;
  color: var(--text-body);
  font-size: 1.04rem;
}

.role-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
  min-width: 240px;
}

.role-grid span {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-body);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Milestone rail: a curvy road snakes through six two-line stops, drawn by
   JS from the live node positions so it stays glued at every viewport. */
.founder-road {
  position: relative;
  margin-top: 2.5rem;
}

.road-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.road-path-base,
.road-path-draw {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.road-path-base {
  stroke: rgba(121, 44, 162, 0.3);
  stroke-dasharray: 3 8;
}

.road-path-draw {
  stroke: var(--magenta);
  filter: drop-shadow(0 0 7px rgba(193, 51, 131, 0.45));
}

.road-rail {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.road-rail .road-stop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
  align-items: center;
}

.road-node {
  grid-row: 1;
  grid-column: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(121, 44, 162, 0.65);
  background: var(--surface);
  transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease, transform 0.3s ease;
}

.road-node.is-lit {
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 0 0 6px rgba(193, 51, 131, 0.16);
  transform: scale(1.12);
}

/* Alternate the node across the centre gutter so the road has to curve. */
.road-rail .road-stop:nth-child(odd) .road-node { justify-self: start; }
.road-rail .road-stop:nth-child(even) .road-node { justify-self: end; }

.road-rail .stop-card {
  grid-row: 1;
  padding: 0.45rem 0;
  background: transparent;
  border: none;
}

.road-rail .road-stop:nth-child(odd) .stop-card {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  padding-right: 0.9rem;
}

.road-rail .road-stop:nth-child(even) .stop-card {
  grid-column: 3;
  justify-self: start;
  text-align: left;
  padding-left: 0.9rem;
}

.road-rail .stop-card p {
  max-width: 46ch;
}

.stop-card {
  padding: 1.15rem 1.2rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(121, 44, 162, 0.42);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.road-stop-featured:hover .stop-card {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

.road-stop-featured {
  position: relative;
  z-index: 1;
  margin-top: 1.75rem;
}

.road-stop-featured .stop-card {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  column-gap: 1.4rem;
  align-items: center;
  background: var(--surface-accent);
  border-color: var(--border-strong);
}

.stop-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--indigo-bright);
  margin-bottom: 0.3rem;
}

.stop-card h3 {
  font-size: 0.98rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
}

.stop-card p {
  margin: 0;
  color: var(--text-body);
  font-size: 0.94rem;
  line-height: 1.58;
}

.road-stop-featured .stop-card h3 {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  margin: 0;
}

.road-stop-featured .stop-card-lead .stop-label {
  margin-bottom: 0.45rem;
}

.road-stop-featured .stop-card p {
  font-size: 1.04rem;
}

/* --------------------------------------------------------------------------
   SCENE 4 · Mission & Vision statements
   -------------------------------------------------------------------------- */
.scene-statement {
  background: var(--bg-0);
}

.statement-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5.5rem 1.5rem;
  max-width: 1150px;
  margin: 0 auto;
}

.mission-counter {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.24rem, 6.4vw, 3.6rem);
  line-height: 1;
  margin: 0.5rem 0 1.5rem;
  color: var(--magenta-bright);
  font-variant-numeric: tabular-nums;
}

.statement-title {
  font-size: clamp(1.2rem, 2.56vw, 1.6rem);
  text-wrap: balance;
}

.mark-coral {
  color: var(--magenta-bright);
}

/* Words are readable by default; the scroll script "arms" the title and
   dims un-lit words only when the scrubbed light-up effect is running. */
.vision-title .vision-word {
  color: var(--text-hi);
  transition: color 0.3s ease;
}

.vision-title.armed .vision-word:not(.lit) {
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   SCENE 5 · The world is open (automatic two-row marquee)
   -------------------------------------------------------------------------- */
.scene-openworld {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.openworld-pin {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  padding: 5rem 0;
  overflow: hidden;
}

.openworld-head {
  max-width: var(--container);
}

.openworld-head h2 {
  max-width: 840px;
  font-size: 2rem;
}

.openworld-copy {
  max-width: 760px;
  margin-top: 1rem;
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.75;
}

.openworld-track {
  --openworld-card-gap: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2.5rem max(var(--page-gutter), calc((100vw - var(--container)) / 2));
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.openworld-lane,
.openworld-group {
  display: flex;
  flex-flow: row nowrap;
  flex: 0 0 auto;
  align-items: stretch;
  gap: var(--openworld-card-gap);
}

.openworld-lane {
  width: max-content;
  animation: openworld-marquee var(--marquee-duration, 64s) linear infinite;
  will-change: transform;
}

.openworld-lane-alt {
  --marquee-duration: 76s;
}

.openworld-track.marquee-parked .openworld-lane {
  animation-play-state: paused;
}

/* One loop travels exactly one card group plus one gap, so the next copy
   lands where the first started and the slide reads as one continuous
   rail. JS sets --marquee-shift to the measured pixel distance and clones
   extra groups on screens wider than one set; the calc() fallback matches
   the two server-rendered groups when JS never runs. */
@keyframes openworld-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--marquee-shift, calc(-50% - var(--openworld-card-gap) / 2)), 0, 0);
  }
}

/* The explicit width alongside flex-basis is load-bearing, not redundant.
   Firefox sizes the max-content width of the lane and its card groups from
   each card's unwrapped paragraph text rather than from flex-basis, which
   inflated a 2228px group to 4799px and left the marquee scrolling through
   ~2600px of dead space. A real width pins the intrinsic contribution.
   Every breakpoint below overrides --path-card-w, never flex-basis. */
.path-card {
  --path-card-w: 256px;
  flex: 0 0 var(--path-card-w);
  width: var(--path-card-w);
  padding: 1.6rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid rgba(193, 51, 131, 0.46);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 272px;
}

.path-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(145deg, rgba(12, 8, 24, 0.68) 0%, rgba(12, 8, 24, 0.54) 34%, rgba(12, 8, 24, 0.24) 56%, rgba(12, 8, 24, 0.08) 100%),
    linear-gradient(180deg, rgba(12, 8, 24, 0.06), rgba(12, 8, 24, 0.38));
  pointer-events: none;
}

.path-bg,
.issue-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.path-bg {
  z-index: 0;
  object-fit: cover;
  object-position: right bottom;
  filter: saturate(1.1) contrast(1.02) brightness(1.29);
  transform: scale(1.03);
  transition: transform 0.7s ease, filter 0.7s ease;
}

.path-index {
  display: none;
}

.path-card h3,
.path-card p {
  position: relative;
  z-index: 2;
  max-width: 100%;
  text-shadow: 0 2px 16px rgba(12, 8, 24, 0.58);
}

.path-card h3 {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0.65rem 0 0.55rem;
}

.path-card p {
  color: rgba(245, 243, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  text-wrap: balance;
}

.path-card-final {
  --path-card-w: 320px;
  background: var(--surface-accent);
  border-color: rgba(193, 51, 131, 0.46);
}

.path-card-final::before {
  background:
    linear-gradient(145deg, rgba(12, 8, 24, 0.68) 0%, rgba(12, 8, 24, 0.54) 36%, rgba(12, 8, 24, 0.22) 60%, rgba(12, 8, 24, 0.06) 100%),
    linear-gradient(180deg, rgba(12, 8, 24, 0.06), rgba(12, 8, 24, 0.38));
}

/* The rail keeps moving for everyone, including visitors who ask for reduced
   motion. Dropping to a single non-repeating strip left the shorter row
   ending mid-screen, and a continuous two-row rail is the intended reading of
   this section. The speed below is deliberately slow to soften that call. */

.path-card-final h3 {
  font-family: var(--font-heading);
  font-size: 1.32rem;
}

.path-card-final p {
  color: var(--text-body);
  margin-bottom: 1.4rem;
}

/* --------------------------------------------------------------------------
   SCENE 6 · Nine challenges
   -------------------------------------------------------------------------- */
.issue-card {
  padding: 1.45rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(68, 49, 153, 0.46);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 272px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.issue-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 8, 24, 0.9) 0%, rgba(12, 8, 24, 0.8) 42%, rgba(12, 8, 24, 0.42) 68%, rgba(12, 8, 24, 0.1) 100%),
    linear-gradient(180deg, rgba(12, 8, 24, 0.08), rgba(12, 8, 24, 0.4));
  pointer-events: none;
}

.issue-bg {
  z-index: 0;
  object-position: center;
  filter: saturate(1.08) contrast(1.02) brightness(1.22);
  transform: scale(1);
  transition: transform 0.7s ease, filter 0.7s ease;
}

.issue-card[data-issue="screen-distraction"] .issue-bg { object-position: 46% center; }
.issue-card[data-issue="ai-careers"] .issue-bg { object-position: 44% center; }
.issue-card[data-issue="difficulty-focusing"] .issue-bg { object-position: 44% center; }
.issue-card[data-issue="anxiety-pressure"] .issue-bg { object-position: 44% center; }
.issue-card[data-issue="constant-comparison"] .issue-bg { object-position: 42% center; }
.issue-card[data-issue="career-confusion"] .issue-bg { object-position: 45% center; }
.issue-card[data-issue="parent-child-conflict"] .issue-bg { object-position: 46% center; }
.issue-card[data-issue="emotional-skills"] .issue-bg { object-position: 46% center; }
.issue-card[data-issue="lack-of-direction"] .issue-bg { object-position: 44% center; }

.issue-card:hover {
  transform: translateY(-4px);
}

.issue-card[data-glow="purple"]:hover,
.issue-card[data-glow="magenta"]:hover,
.issue-card[data-glow="coral"]:hover,
.issue-card[data-glow="indigo"]:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}

.issue-card[data-glow="purple"] {
  border-color: rgba(121, 44, 162, 0.48);
}

.issue-card[data-glow="magenta"] {
  border-color: rgba(193, 51, 131, 0.44);
}

.issue-card[data-glow="coral"] {
  border-color: rgba(224, 84, 84, 0.42);
}

.issue-icon {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  margin-bottom: 1rem;
  color: var(--indigo-bright);
  filter: drop-shadow(0 8px 18px rgba(12, 8, 24, 0.4));
}

.issue-card[data-glow="magenta"] .issue-icon,
.issue-card[data-glow="coral"] .issue-icon,
.issue-card[data-glow="purple"] .issue-icon {
  color: var(--magenta-bright);
}

.issue-card h3 {
  position: relative;
  z-index: 2;
  max-width: 65%;
  font-size: 1.07rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  text-shadow: 0 2px 16px rgba(12, 8, 24, 0.64);
}

.issue-card p {
  position: relative;
  z-index: 2;
  font-size: 0.94rem;
  line-height: 1.42;
  color: rgba(245, 243, 255, 0.9);
  margin: 0;
  max-width: 65%;
  text-shadow: 0 2px 16px rgba(12, 8, 24, 0.86), 0 0 24px rgba(12, 8, 24, 0.62);
}

/* --------------------------------------------------------------------------
   SCENE 7 · Four Pillars (stacked cards)
   -------------------------------------------------------------------------- */
.scene-pillars {
  padding: 6.5rem 0;
  background: var(--bg-0);
}

/* Interactive pillars — four columns; the active one opens wide and
   reveals its artwork and detail. Click/tap or scroll sequence opens panels. */
.pillar-accordion {
  display: flex;
  gap: 1rem;
  height: 448px;
}

/* JS animates explicit measured heights in the portrait scroll flow. Keep
   CSS focused on colour/focus changes there so two height animations never
   compete with each other. */
.pillar-accordion.is-centered-flow .pillar-panel {
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.pillar-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: flex-grow 0.7s cubic-bezier(0.33, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.pillar-panel.active {
  flex-grow: 3.6;
  cursor: default;
  border-color: var(--border-strong);
}

.pillar-panel:focus-visible {
  box-shadow: 0 0 0 3px rgba(193, 51, 131, 0.36);
  outline: none;
}

/* --------------------------------------------------------------------------
   Top edge accent
   Shared by every card that wears a coloured line along its top edge.

   This used to be a flat bar pinned across the top (`inset: 0 0 auto`), which
   a rounded corner has no way to accommodate: on the cards that clip
   (overflow: hidden) the bar stopped dead where the corner arc began, and on
   the ones that do not it shot straight past the corner into open space.
   Either way the colour ended on a hard edge.

   So it is drawn as a stroke of the card's own border-radius instead — the
   ring technique: paint the whole box, then punch out everything inside the
   padding so only the outline survives. A third mask layer fades that outline
   out a little way down each side, so the colour carries through both top
   corners and dissolves into the border rather than stopping against it.

   Per card: --edge-accent is the paint (any colour or gradient),
   --edge-accent-width the stroke, --edge-accent-hold how far the colour stays
   solid, --edge-accent-reach where it has fully gone.
   -------------------------------------------------------------------------- */
.pillar-panel::before,
.webinar-form::before,
.register-invite-card::before,
.register-state::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  padding: var(--edge-accent-width, 2px);
  background: var(--edge-accent, var(--magenta-bright));
  -webkit-mask:
    linear-gradient(180deg, #000 0 var(--edge-accent-hold, 16px), transparent var(--edge-accent-reach, 56px)),
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: source-in, xor, source-over;
  mask:
    linear-gradient(180deg, #000 0 var(--edge-accent-hold, 16px), transparent var(--edge-accent-reach, 56px)),
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: intersect, exclude, add;
}

/* Accent edge for the active pillar */
.pillar-panel::before {
  --edge-accent: var(--indigo-bright);
  --edge-accent-width: 3px;
}

.pillar-panel[data-accent="magenta"]::before,
.pillar-panel[data-accent="coral"]::before,
.pillar-panel[data-accent="purple"]::before {
  --edge-accent: var(--line-accent);
}

.pillar-panel[data-accent="indigo"].active,
.pillar-panel[data-accent="purple"].active,
.pillar-panel[data-accent="magenta"].active,
.pillar-panel[data-accent="coral"].active {
  box-shadow: var(--shadow);
}

/* Artwork stays vivid enough to read, then opens brighter with the panel. */
.pillar-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  filter: grayscale(30%) saturate(1.02) contrast(1.02) brightness(0.9);
  opacity: 0.72;
  transition: filter 0.7s ease, opacity 0.7s ease, transform 0.7s ease;
}

.pillar-panel.active .pillar-bg {
  transform: scale(1);
  filter: saturate(1.1) contrast(1.02) brightness(1.29);
  opacity: 1;
}

.pillar-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12, 8, 24, 0.22) 0%, rgba(12, 8, 24, 0.42) 55%, rgba(12, 8, 24, 0.82) 100%);
  transition: background 0.5s ease;
}

/* Open pillar: image at full screen brightness — the tint only shades
   the base strip so the text over it stays readable */
.pillar-panel.active .pillar-tint {
  background:
    linear-gradient(90deg,
      rgba(7, 5, 16, 0.74) 0%,
      rgba(7, 5, 16, 0.62) 48%,
      rgba(7, 5, 16, 0.22) 76%,
      rgba(7, 5, 16, 0.04) 100%),
    linear-gradient(180deg,
      rgba(12, 8, 24, 0.03) 0%,
      rgba(12, 8, 24, 0.12) 34%,
      rgba(10, 7, 20, 0.72) 66%,
      rgba(7, 5, 16, 0.95) 100%);
}

/* Collapsed state: number + rotated title, like a spine on a shelf */
.pillar-spine {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--text-body);
  transition: opacity 0.35s ease;
}

.pillar-spine i {
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--indigo-bright);
}

.pillar-panel[data-accent="purple"] .pillar-spine i  { color: var(--purple-bright); }
.pillar-panel[data-accent="magenta"] .pillar-spine i,
.pillar-panel[data-accent="coral"] .pillar-spine i,
.pillar-panel[data-accent="purple"] .pillar-spine i {
  color: var(--magenta-bright);
}

.pillar-panel.active .pillar-spine {
  opacity: 0;
}

/* Open state: detail slides up from the base */
.pillar-detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(560px, 92%);
  padding: 1.8rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s ease 0.16s, transform 0.45s ease 0.16s;
}

.pillar-panel.active .pillar-detail {
  opacity: 1;
  transform: none;
}

.pillar-step {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

.pillar-detail h3 {
  font-family: var(--font-heading);
  font-size: 1.28rem;
  margin: 0.4rem 0 0.7rem;
}

.pillar-detail p {
  color: var(--text-body);
  font-size: 1.06rem;
  margin-bottom: 1rem;
}

.pillar-detail ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pillar-detail li {
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: rgba(10, 8, 24, 0.6);
  border: 1px solid var(--border-strong);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-body);
}

.program-block h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.program-note {
  color: var(--text-body);
  font-size: 1rem;
}

.program-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.program-block li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   SCENE 8 · CK Framework
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   SCENE 10 · Book, resources, statement cards
   -------------------------------------------------------------------------- */
.statement-card {
  padding: 2.4rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.statement-card h2 {
  font-size: 1.28rem;
  margin-bottom: 1rem;
}

.statement-card p {
  color: var(--text-body);
  font-size: 1.05rem;
}

/* Re-assert label sizing: .statement-card p outranks .section-label alone. */
.statement-card .section-label {
  font-size: 0.85rem;
  color: var(--magenta-bright);
}

.book-card {
  transform-style: preserve-3d;
  transition: border-color 0.3s ease;
}

.book-card:hover {
  border-color: var(--border-strong);
}

/* --------------------------------------------------------------------------
   Register — the destination
   -------------------------------------------------------------------------- */
.scene-register {
  position: relative;
  overflow: hidden;
}

.scene-register::before {
  content: "";
  position: absolute;
  right: -10%;
  top: 10%;
  width: 60%;
  height: 80%;
  background: var(--surface-warm);
  filter: blur(90px);
  opacity: 0.7;
  pointer-events: none;
}

/* This is useful scheduling information, not a decorative eyebrow. Keep the
   long line in the regular UI typeface and keep weekday + date together. */
.scene-register .webinar-section-label {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5em;
  row-gap: 0.15rem;
  max-width: none;
  margin-bottom: 0.85rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.22rem) !important;
  font-style: normal;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.065em;
  text-transform: uppercase;
}

.scene-register .webinar-label-date {
  white-space: nowrap;
}

.feature-copy h2 {
  font-size: clamp(1.36rem, 2.4vw, 1.84rem);
}

.form-card {
  position: relative;
  display: grid;
  gap: 1.1rem;
  padding: 2rem;
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.052)),
    rgba(18, 14, 35, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 26px 70px rgba(4, 2, 14, 0.46);
  backdrop-filter: blur(18px);
}

.form-card label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-body);
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radius-control);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 8, 24, 0.72);
  color: var(--text-hi);
  font: inherit;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-card input::placeholder {
  color: var(--text-dim);
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--magenta-bright);
  background: rgba(12, 9, 29, 0.95);
  box-shadow: 0 0 0 3px rgba(193, 51, 131, 0.26);
}

.form-card textarea {
  min-height: 118px;
  resize: vertical;
}

.hp-field {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.webinar-form {
  width: min(100%, 620px);
  margin-left: auto;
  gap: 1rem;
  padding: 1.55rem;
  overflow: hidden;
}

.webinar-form::before {
  --edge-accent: linear-gradient(90deg, var(--magenta-bright), var(--coral));
  --edge-accent-width: 3px;
}

.webinar-form-head {
  display: grid;
  gap: 0.28rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.webinar-form-head p,
.webinar-form-head h3,
.webinar-form-head span {
  margin: 0;
}

.webinar-form-head p {
  color: var(--magenta-bright);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.webinar-form-head h3 {
  color: var(--text-hi);
  font-size: 1.08rem;
}

.webinar-form-head span {
  color: var(--text-dim);
  font-size: 0.92rem;
}

.webinar-success h3,
.form-step h3 {
  margin: 0;
  color: var(--text-hi);
  font-size: 0.98rem;
}

.webinar-success p {
  margin: 0;
  color: var(--text-body);
}

.form-step {
  display: grid;
  gap: 1rem;
  min-height: 300px;
  padding: 0;
  border: 0;
  background: transparent;
}

.form-step-label {
  width: max-content;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  background: rgba(193, 51, 131, 0.16);
  color: var(--magenta-bright);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-progress {
  display: grid;
  gap: 0.5rem;
}

.form-progress-text {
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 800;
}

.form-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.form-progress-track span {
  display: block;
  width: 25%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--magenta-bright), var(--coral));
  transition: width 0.25s ease;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.role-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.role-option {
  position: relative;
  min-height: 86px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-control);
  background: rgba(10, 8, 24, 0.56);
  color: var(--text-hi) !important;
  cursor: pointer;
  text-align: center;
}

.role-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-option:has(input:checked) {
  border-color: var(--magenta-bright);
  background: rgba(193, 51, 131, 0.13);
  box-shadow: 0 0 0 3px rgba(193, 51, 131, 0.22);
}

.people-builder {
  display: grid;
  gap: 0.9rem;
}

.people-builder-head,
.person-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.people-builder h4,
.person-card h4 {
  margin: 0;
  color: var(--text-hi);
  font-size: 1rem;
}

.people-list {
  display: grid;
  gap: 0.9rem;
}

.person-card {
  display: grid;
  gap: 0.9rem;
  padding: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-card);
  background: rgba(10, 8, 24, 0.42);
}

.person-remove {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.person-remove:hover,
.person-remove:focus {
  color: var(--magenta-bright);
}

.consent-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 0.7rem !important;
}

.consent-check input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin-top: 0.2rem;
}

.form-errors,
.errorlist {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #ffb7cf;
  font-size: 0.9rem;
}

.form-errors {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 112, 160, 0.35);
  border-radius: var(--radius-control);
  background: rgba(112, 12, 48, 0.24);
}

.form-errors p {
  margin: 0;
}

.wizard-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

.wizard-actions .button {
  width: 100%;
}

.wizard-actions .button:first-child {
  width: auto;
}

.form-note {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin: 0;
}

/* --------------------------------------------------------------------------
   FAQ (Bootstrap accordion, dark)
   -------------------------------------------------------------------------- */
.faq-list {
  max-width: 900px;
}

.faq-list .accordion-item {
  background: rgba(13, 9, 27, 0.94);
  border: 1px solid var(--border);
  border-radius: 14px !important;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.faq-list .accordion-button {
  background: rgba(22, 15, 42, 0.88);
  color: var(--text-hi);
  font-weight: 700;
  /* Question must read larger than the 1.05rem answer below it. */
  font-size: 1.12rem;
  box-shadow: none;
  padding: 0.82rem 1.25rem;
  min-height: 52px;
}

.faq-list .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg, rgba(68, 31, 96, 0.46), rgba(24, 15, 43, 0.96));
  color: var(--magenta-bright);
  box-shadow: inset 0 -1px 0 rgba(193, 51, 131, 0.46);
}

.faq-list .accordion-button::after {
  filter: invert(1) brightness(1.6);
}

.faq-list .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(193, 51, 131, 0.26);
}

.faq-list .accordion-body {
  color: var(--text-body);
  font-size: 1.05rem;
  padding: 0.8rem 1.25rem 1rem;
}

/* --------------------------------------------------------------------------
   Contact + footer
   -------------------------------------------------------------------------- */
.contact-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  padding: 2.2rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.contact-card h3 {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}

.contact-card p {
  margin: 0;
  color: var(--text-hi);
  font-weight: 600;
}

.section-final {
  padding-bottom: 7rem;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-body);
  font-size: 1rem;
}

.footer-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "copyright social links";
  align-items: center;
  gap: 1rem;
}

.footer-shell > p {
  grid-area: copyright;
  justify-self: start;
}

.footer-links {
  grid-area: links;
  display: flex;
  gap: 1.4rem;
  justify-self: end;
}

.footer-links a {
  color: var(--text-dim);
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--text-hi);
}

.footer-socials {
  grid-area: social;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  justify-self: center;
}

.footer-social-icon {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 50%;
  background: rgba(255, 157, 77, 0.04);
}

.footer-social-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.footer-social-icon .social-dot {
  fill: currentColor;
  stroke: none;
}

/* --------------------------------------------------------------------------
   Reveal fallback (IntersectionObserver path, and default for no-JS)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .hero-shell {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Below desktop: single column, the road waving down a narrow left rail. */
  .road-rail .road-stop,
  .road-rail .road-stop:nth-child(even) {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .road-rail .road-stop .road-node,
  .road-rail .road-stop:nth-child(even) .road-node {
    grid-column: 1;
  }

  .road-rail .road-stop:nth-child(odd) .road-node { justify-self: start; }
  .road-rail .road-stop:nth-child(even) .road-node { justify-self: end; }

  .road-rail .road-stop:nth-child(odd) .stop-card,
  .road-rail .road-stop:nth-child(even) .stop-card {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    padding: 0.45rem 0;
  }

  .pillar-accordion {
    height: 400px;
  }

  .navbar-collapse {
    padding: 1rem 0;
  }
}

@media (max-width: 767.98px) {
  .section {
    padding: 4.5rem 0;
  }

  .founder-card {
    padding: 1.5rem;
  }

  .founder-head,
  .road-stop-featured .stop-card {
    grid-template-columns: 1fr;
  }

  /* Phone: narrower rail and tighter type so every stop stays at two lines. */
  .road-rail .road-stop,
  .road-rail .road-stop:nth-child(even) {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .road-rail .stop-card p {
    font-size: 0.85rem;
  }

  .founder-portrait {
    width: 144px;
    height: 144px;
  }

  .chaos-chip {
    font-size: 0.76rem;
  }

  .student-figure {
    width: 94vw;
  }

  /* Pillars stack vertically on phones; tap to open */
  .pillar-accordion {
    flex-direction: column;
    height: auto;
  }

  .pillar-panel {
    flex: none;
    min-height: 72px;
    transition: min-height 0.55s cubic-bezier(0.33, 1, 0.3, 1),
                border-color 0.35s ease;
  }

  .pillar-panel.active {
    min-height: 304px;
  }

  .pillar-spine {
    writing-mode: horizontal-tb;
    transform: none;
    left: 1.3rem;
    bottom: auto;
    top: 1.7rem;
  }

  .contact-card {
    grid-template-columns: 1fr;
  }

  .statement-pin,
  .confusion-pin,
  .openworld-pin {
    min-height: auto;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .confusion-pin {
    min-height: 70vh;
  }
}

/* Portrait tablets use the same one-card-at-a-time reading pattern as phones.
   A four-column accordion is too compressed here, even when its width happens
   to cross the desktop breakpoint. */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1199.98px) {
  .pillar-accordion {
    flex-direction: column;
    height: auto;
  }

  .pillar-panel {
    flex: none;
    min-height: 76px;
  }

  .pillar-spine {
    writing-mode: horizontal-tb;
    transform: none;
    left: 1.4rem;
    bottom: auto;
    top: 1.8rem;
  }

  .pillar-panel:not(.active) .pillar-bg,
  .pillar-panel:not(.active) .pillar-tint {
    display: none;
  }

  .pillar-panel.active {
    min-height: 0;
  }

  .pillar-panel.active .pillar-detail {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: clamp(220px, 31vw, 300px);
    padding: 1.4rem 1.5rem 1.65rem;
  }

  .pillar-panel.active .pillar-tint {
    background: linear-gradient(180deg,
      rgba(12, 8, 24, 0.06) 0%,
      rgba(12, 8, 24, 0.22) 34%,
      rgba(8, 6, 18, 0.82) 58%,
      rgba(7, 5, 16, 0.97) 100%);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: everything readable, nothing moves
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-hint span {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button,
  .issue-card {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Webinar conversion elements
   -------------------------------------------------------------------------- */
/* Announcement bar — always the first thing seen */
.announce-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  background: var(--bg-1);
  color: var(--text-hi);
  font-size: 0.95rem;
  text-align: center;
  border-bottom: 1px solid var(--border-strong);
}

.announce-bar:hover .announce-cta {
  color: #fff;
  border-color: #fff;
}

.announce-cta {
  font-weight: 800;
  color: var(--text-hi);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  margin-left: 0.35rem;
  white-space: nowrap;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(224, 84, 84, 0.52);
  animation: live-pulse 1.6s ease-out infinite;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 84, 84, 0.52); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 84, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 84, 84, 0); }
}

.hero-note {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--magenta-bright);
}

.webinar-bridge {
  margin: 2.5rem 0 0;
  font-size: 1.12rem;
  color: var(--text-body);
}

.funnel-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 2.4rem;
  border-radius: 18px;
  background: var(--surface-accent);
  border: 1px solid var(--border-strong);
}

.funnel-strip h3 {
  font-family: var(--font-heading);
  font-size: 1.16rem;
  margin-bottom: 0.4rem;
}

.funnel-strip p {
  margin: 0;
  max-width: 620px;
}

.framework-band {
  text-align: center;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4.5rem 0;
}

.framework-band h2 {
  /* A transitional band — must stay below real section headings (2rem+). */
  font-size: clamp(1.28rem, 2.08vw, 1.68rem);
  margin-bottom: 0.8rem;
}

.framework-band p {
  margin: 0 auto;
  max-width: 560px;
  color: var(--text-body);
}

.webinar-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
}

.webinar-session-name {
  margin: -0.2rem 0 0.2rem;
  color: var(--text-main);
  font-weight: 800;
}

.webinar-event-time {
  margin: 0 0 1.15rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.webinar-points-heading {
  margin: 1.25rem 0 0.45rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.45;
}

.webinar-points li {
  position: relative;
  padding: 0.45rem 0 0.45rem 2rem;
  font-size: 1.05rem;
}

.webinar-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4 10-10"/></svg>')
    center / 11px no-repeat,
    var(--coral);
}

.webinar-assurance {
  margin: 0;
  font-weight: 700;
  color: var(--magenta-bright);
}

.webinar-qna {
  margin-bottom: 0.55rem;
}

.webinar-card {
  border-color: var(--border-strong);
  background: var(--surface-accent);
}

.form-alt {
  margin: 0;
  font-size: 0.95rem;
  text-align: center;
  color: var(--text-body);
}

@media (prefers-reduced-motion: reduce) {
  .live-dot {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile refinements (phones) — compact header, static confusion collage.
   Keep last: these override the desktop scene layouts above.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* Compact sticky header: one-line announce bar + slim navbar */
  .announce-bar {
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
  }

  .announce-sub {
    display: none;
  }

  .announce-cta {
    font-size: 0.82rem;
  }

  .site-header .navbar {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .brand-text .wordmark-name {
    font-size: 0.98rem;
  }

  .brand-text .wordmark-tag {
    font-size: 0.55rem;
  }

  .hero-logo-lockup {
    width: min(100%, 500px);
    max-height: 118px;
    margin-left: -0.35rem;
  }

  /* Confusion scene: no pin animation on phones, so lay it out as a
     static collage block (figure + 8 chips) with the copy in normal flow. */
  .confusion-pin {
    display: block;
    min-height: 0;
    overflow: visible;
    padding: 3rem 0 0;
  }

  .chaos-field {
    position: relative;
    inset: auto;
    height: 420px;
  }

  .student-figure {
    top: 50%;
    width: 94vw;
    max-height: none;
  }

  /* Only 8 chips fit a phone without collisions */
  .chaos-chip:nth-of-type(n+9) {
    display: none;
  }

  /* One compact size for every chip — outranks the desktop depth tiers */
  .chaos-chip:nth-of-type(3n),
  .chaos-chip:nth-of-type(3n+1),
  .chaos-chip:nth-of-type(3n+2) {
    font-size: 0.78rem;
    opacity: 0.85;
  }

  /* Four strict rows, two chips each: two above the figure, two below */
  .chaos-chip:nth-of-type(1) { top: 2%;  left: 3%;   right: auto; bottom: auto; }
  .chaos-chip:nth-of-type(2) { top: 2%;  right: 3%;  left: auto;  bottom: auto; }
  .chaos-chip:nth-of-type(3) { top: 14%; left: 10%;  right: auto; bottom: auto; }
  .chaos-chip:nth-of-type(4) { top: 14%; right: 10%; left: auto;  bottom: auto; }
  .chaos-chip:nth-of-type(5) { bottom: 15%; left: 4%;   top: auto; right: auto; }
  .chaos-chip:nth-of-type(6) { bottom: 15%; right: 4%;  top: auto; left: auto; }
  .chaos-chip:nth-of-type(7) { bottom: 2%;  left: 3%;  top: auto; right: auto; }
  .chaos-chip:nth-of-type(8) { bottom: 2%;  right: 2%; top: auto; left: auto; }

  .confusion-copy {
    margin-top: 2.5rem;
    padding: 0 1.25rem;
  }

  /* Careers marquee: tighter spacing and cards on phones */
  .openworld-track {
    --openworld-card-gap: 0.9rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .path-card {
    --path-card-w: 224px;
  }

  /* Chips drift gently — the pin animation is desktop-only, so this is
     what keeps the collage alive under a thumb */
  .chaos-chip {
    --drift-duration: 6s;
    --drift-delay: 0s;
    animation:
      chip-drift var(--drift-duration) ease-in-out var(--drift-delay) infinite alternate,
      chip-clarity var(--pulse-duration) ease-in-out var(--pulse-delay) infinite;
  }

  .chaos-chip:nth-of-type(2n) {
    --drift-duration: 7.5s;
    --drift-delay: -2.5s;
  }

  .chaos-chip:nth-of-type(3n) {
    --drift-duration: 5.2s;
    --drift-delay: -1.2s;
  }

  /* Pillars: collapsed rows are clean title bars (no sliver of cropped
     art); the active card sizes to its content so nothing clips */
  .pillar-panel:not(.active) .pillar-bg,
  .pillar-panel:not(.active) .pillar-tint {
    display: none;
  }

  .pillar-panel.active {
    min-height: 0;
  }

  .pillar-panel.active .pillar-detail {
    /* relative (not static): stays in flow to size the panel, but keeps
       z-index so the tint cannot paint over the text */
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 190px; /* window of uncovered artwork above the text */
    padding: 1.3rem 1.3rem 1.5rem;
  }

  .pillar-panel.active .pillar-tint {
    background: linear-gradient(180deg,
      rgba(12, 8, 24, 0.06) 0%,
      rgba(12, 8, 24, 0.22) 34%,
      rgba(8, 6, 18, 0.82) 58%,
      rgba(7, 5, 16, 0.97) 100%);
  }

  /* Challenges: nine stacked text cards become a horizontal rail.
     Swipeable by hand; when GSAP pins the section (.gsap-rail) the rail
     rides the page scroll instead, like the careers scene. */
  #challenges .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  #challenges .row > [class*="col-"] {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: center;
  }

  #challenges.gsap-rail {
    overflow: hidden;
    min-height: 100svh;
    padding: 7.5rem 0 1.5rem;
  }

  #challenges.gsap-rail .row {
    overflow-x: visible;
    scroll-snap-type: none;
  }

  #challenges.gsap-rail .section-heading {
    margin-bottom: 1.5rem;
  }

  #challenges.gsap-rail .webinar-bridge {
    margin-top: 1.5rem;
  }

  .webinar-bridge {
    padding: 0 0.25rem;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .chaos-chip {
    animation: none;
  }
}

@keyframes chip-drift {
  from { transform: translate3d(0, -5px, 0); }
  to   { transform: translate3d(0, 7px, 0); }
}

/* --------------------------------------------------------------------------
   Responsive viewport audit
   These rules are intentionally last so scene geometry stays predictable from
   a 320px phone through tablets, short laptops, ultrawides, and 4K displays.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  :root {
    --page-gutter: 1rem;
  }

  .form-grid,
  .role-options {
    grid-template-columns: 1fr;
  }

  .people-builder-head,
  .person-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  html {
    font-size: 100%;
  }

  .hero {
    min-height: auto;
    padding: 4.75rem 0 4.5rem;
  }

  .hero h1 {
    font-size: 1.88rem;
  }

  .hero-text,
  .lead-copy {
    font-size: 1.05rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .button {
    width: 100%;
  }

  .scroll-hint {
    display: none;
  }

  .section,
  .scene-pillars,
  .confusion-about {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .founder-card,
  .form-card,
  .statement-card,
  .issue-card {
    padding: 1.25rem;
  }

  .founder-road {
    gap: 0.75rem;
  }

  .statement-pin {
    padding: 4.25rem 1rem;
  }

  .mission-counter {
    font-size: 2.16rem;
  }

  .statement-title {
    font-size: 1.24rem;
  }

  .openworld-head {
    padding-left: 0;
    padding-right: 0;
  }

  .openworld-track {
    --openworld-card-gap: 0.85rem;
    gap: 0.85rem;
  }

  .path-card,
  .path-card-final {
    --path-card-w: min(84vw, 250px);
    padding: 1.15rem;
  }

  #challenges .row > [class*="col-"] {
    flex-basis: 86%;
    max-width: 86%;
  }

  .pillar-panel.active .pillar-detail {
    margin-top: 160px;
    padding: 1.15rem;
  }

  .contact-card p,
  .contact-card a {
    overflow-wrap: anywhere;
  }

  .footer-shell,
  .footer-links,
  .footer-socials {
    justify-content: center;
    text-align: center;
  }

  .footer-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copyright"
      "social"
      "links";
    justify-items: center;
  }

  .footer-shell > p,
  .footer-links,
  .footer-socials {
    justify-self: center;
  }
}

@media (max-width: 359.98px) {
  :root {
    --page-gutter: 0.75rem;
  }

  .brand {
    gap: 0.55rem;
  }

  .brand-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .brand-text .wordmark-name {
    font-size: 0.84rem;
  }

  .brand-text .wordmark-tag {
    font-size: 0.48rem;
  }

  .hero h1 {
    font-size: 1.64rem;
  }

  .chaos-field {
    height: 360px;
  }

  .chaos-chip:nth-of-type(3),
  .chaos-chip:nth-of-type(4),
  .chaos-chip:nth-of-type(7),
  .chaos-chip:nth-of-type(8) {
    display: none;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .hero {
    min-height: auto;
    padding: 3rem 0 4rem;
  }

  .hero-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-point {
    padding: 1rem;
  }

  .founder-card {
    padding: 2rem;
  }

  .openworld-head {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-height: 699px) and (min-width: 768px) {
  .hero {
    min-height: auto;
    padding: 3.5rem 0 4rem;
  }

  .scroll-hint {
    display: none;
  }

  .openworld-pin {
    min-height: auto;
    padding: 4rem 0;
  }

  .pillar-accordion {
    height: 368px;
  }
}

@media (min-width: 1600px) and (max-width: 1919.98px) {
  :root {
    --container: 1600px;
  }
}

@media (min-width: 1440px) {
  .hero-shell {
    grid-template-columns: minmax(0, 1.35fr) minmax(420px, 0.8fr);
    gap: 5rem;
  }

  .founder-shell {
    max-width: 1280px;
  }

  .path-card {
    --path-card-w: 280px;
  }

  .path-card-final {
    --path-card-w: 344px;
  }
}

@media (min-width: 1920px) {
  :root {
    --container: 1720px;
  }

  html {
    font-size: 112.5%;
  }

  .section,
  .scene-pillars {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .hero-shell {
    grid-template-columns: minmax(0, 1.25fr) minmax(480px, 0.75fr);
    gap: 7rem;
  }

  .hero h1 {
    font-size: 3.52rem;
    max-width: 14ch;
  }

  .hero-points {
    max-width: 620px;
  }

  .founder-shell {
    max-width: 1500px;
  }

  .founder-road {
    gap: 1.25rem;
  }

  .pillar-accordion {
    height: min(544px, 44vh);
  }

  .path-card {
    --path-card-w: 304px;
  }

  .path-card-final {
    --path-card-w: 376px;
  }
}

@media (min-width: 2560px) {
  :root {
    --container: 2600px;
  }

  html {
    font-size: 125%;
  }

  .navbar {
    min-height: 88px;
  }

  .hero {
    min-height: calc(100svh - 88px);
  }

  .hero h1 {
    font-size: 3.84rem;
  }

  .founder-shell {
    max-width: 2000px;
  }

  .founder-card {
    padding: 3rem;
  }

  .path-card {
    --path-card-w: 336px;
  }

  .path-card-final {
    --path-card-w: 416px;
  }
}

/* --------------------------------------------------------------------------
   Production design system pass
   A single rhythm for typography, spacing, cards, controls, and content rails.
   -------------------------------------------------------------------------- */
:root {
  --section-space: 6.5rem;
  --radius-card: 8px;
  --radius-control: 6px;
  --measure: 68ch;
  --sticky-header-height: 94px;
}

body {
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
p {
  letter-spacing: 0;
}

h2 {
  font-size: 2rem;
  text-wrap: balance;
}

.section,
.scene-pillars,
.confusion-about {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

/* Keep the two marquee rails below the sticky navigation with enough room for
   both rows and the section heading. */
.openworld-pin {
  min-height: 100svh;
  justify-content: flex-start;
  gap: 2.25rem;
  padding-top: calc(var(--sticky-header-height) + 1.75rem);
  padding-bottom: 4rem;
}

.section-heading,
.openworld-head {
  text-align: left;
}

.section-heading {
  max-width: 900px;
  margin-bottom: 2.75rem;
}

.section-heading h2,
.feature-copy h2,
.scene-founder > .container > .founder-shell > h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.section-heading > p:not(.section-label),
.feature-copy > p,
.section-copy p,
.confusion-sub {
  max-width: var(--measure);
  font-size: 1rem;
  line-height: 1.75;
}

.section-heading .section-label {
  font-family: 'Great Vibes', cursive;
  margin-bottom: 3.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.founder-shell {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.founder-card,
.hero-point,
.stop-card,
.path-card,
.issue-card,
.pillar-panel,
.statement-card,
.form-card,
.contact-card,
.faq-list .accordion-item,
.funnel-strip {
  border-radius: var(--radius-card) !important;
}

.button,
.nav-toggle,
.form-card input,
.form-card select,
.form-card textarea {
  border-radius: var(--radius-control);
}

.hero-point {
  border-color: rgba(68, 49, 153, 0.5);
}

.hero-point:nth-child(2) {
  border-color: rgba(193, 51, 131, 0.44);
}

.hero-point:nth-child(3) {
  border-color: rgba(224, 84, 84, 0.42);
}

.founder-card {
  border-color: rgba(121, 44, 162, 0.36);
}

.stop-card {
  padding: 1.35rem;
}

.stop-card h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.stop-card p,
.founder-intro p {
  font-size: 0.94rem;
  line-height: 1.7;
}

.path-card {
  padding: 1.3rem;
  min-height: 272px;
}

.path-card h3 {
  font-size: 1.16rem;
}

.path-card p {
  font-size: 0.94rem;
}

.issue-card {
  padding: 1.2rem;
}

.issue-card h3 {
  font-size: 1.02rem;
}

.issue-card p {
  font-size: 0.94rem;
}

.issue-icon {
  width: 26px;
  height: 26px;
  margin-bottom: 0.85rem;
}

.pillar-panel::before {
  content: none;
}

.pillar-panel[data-accent="indigo"] {
  border-color: rgba(68, 49, 153, 0.58);
}

.pillar-panel[data-accent="purple"] {
  border-color: rgba(121, 44, 162, 0.55);
}

.pillar-panel[data-accent="magenta"] {
  border-color: rgba(193, 51, 131, 0.48);
}

.pillar-panel[data-accent="coral"] {
  border-color: rgba(224, 84, 84, 0.46);
}

.pillar-detail h3 {
  font-size: 1.36rem;
  line-height: 1.25;
}

.pillar-detail p {
  font-size: 0.98rem;
  line-height: 1.65;
}

.form-card {
  border-color: rgba(193, 51, 131, 0.42);
  box-shadow: var(--shadow-soft);
}

.form-card input,
.form-card select,
.form-card textarea {
  min-height: 48px;
}

.contact-card {
  border-color: rgba(121, 44, 162, 0.44);
}

.faq-list {
  width: 100%;
  max-width: 1000px;
}

.faq-list .accordion-item {
  border-color: rgba(68, 49, 153, 0.42);
}

.faq-list .accordion-button {
  font-size: 1.05rem;
}

.faq-list .accordion-body {
  width: 100%;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.7;
}

.button:active {
  transform: translateY(0) scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
  .hero-point,
  .stop-card,
  .path-card,
  .issue-card,
  .form-card,
  .contact-card {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  }

  .hero-point:hover,
  .path-card:hover {
    transform: translateY(-3px);
    border-color: var(--magenta-bright);
    box-shadow: var(--shadow-soft);
  }

  .path-card:hover .path-bg {
    transform: scale(1.08);
    filter: saturate(1.1) contrast(1.02) brightness(1.29);
  }

  .issue-card:hover .issue-bg {
    transform: scale(1.025);
    filter: saturate(1.08) contrast(1.02) brightness(1.22);
  }

}

@media (min-width: 992px) {
  .form-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-card.webinar-form,
  .form-card.webinar-success {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-card > .form-note,
  .form-card > .button,
  .form-card > .form-alt {
    grid-column: 1 / -1;
  }
}

/* Webinar wizard: a focused single-column flow inside the wider register area. */
.form-card.webinar-form {
  width: min(100%, 680px);
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem;
  padding: 2rem;
  border-color: rgba(226, 114, 176, 0.34);
  background: rgba(24, 20, 40, 0.97);
  box-shadow: 0 28px 80px rgba(4, 2, 14, 0.42);
  backdrop-filter: none;
}

.webinar-form::before {
  --edge-accent: var(--magenta-bright);
  --edge-accent-width: 2px;
}

.webinar-form-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr);
  align-items: end;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
}

.webinar-form-head > div {
  display: grid;
  gap: 0.35rem;
}

.webinar-form-head h3 {
  font-family: var(--font-heading);
  font-size: 1.32rem;
  line-height: 1.2;
}

.webinar-form-head span {
  line-height: 1.6;
}

.form-progress {
  gap: 0.8rem;
}

.form-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.form-progress-note {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
}

.form-progress-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-progress-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
}

.form-progress-steps li::before,
.form-progress-steps li::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.form-progress-steps li::before { left: 0; }
.form-progress-steps li::after { right: 0; }
.form-progress-steps li:first-child::before,
.form-progress-steps li:last-child::after { content: none; }

.form-progress-steps span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: #181428;
  color: var(--text-dim);
}

.form-progress-steps .is-active,
.form-progress-steps .is-complete {
  color: var(--text-hi);
}

.form-progress-steps .is-active span {
  border-color: var(--magenta-bright);
  background: var(--magenta);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(193, 51, 131, 0.15);
}

.form-progress-steps .is-complete span {
  border-color: rgba(226, 114, 176, 0.65);
  color: var(--magenta-bright);
}

.form-progress-steps .is-complete::before,
.form-progress-steps .is-complete::after,
.form-progress-steps .is-active::before {
  background: rgba(226, 114, 176, 0.55);
}

.form-progress-track {
  height: 3px;
}

.form-step {
  align-content: start;
  min-height: 280px;
  gap: 1.15rem;
  padding: 0.35rem 0 0;
}

.form-step-label {
  padding: 0;
  border-radius: 0;
  background: transparent;
  letter-spacing: 0.08em;
}

.form-step h3 {
  font-size: 1.04rem;
}

.webinar-form .form-grid {
  gap: 1rem 1.15rem;
}

.webinar-form label {
  gap: 0.5rem;
  font-size: 0.84rem;
}

.webinar-form input,
.webinar-form select,
.webinar-form textarea {
  min-height: 52px;
  padding: 0.88rem 1rem;
  border-color: rgba(255, 255, 255, 0.18);
  background: #100d20;
}

.webinar-form input:hover,
.webinar-form select:hover,
.webinar-form textarea:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.webinar-form input::placeholder,
.webinar-form textarea::placeholder {
  color: #8f87aa;
}

.role-option {
  aspect-ratio: 1 / 1;
  min-height: 0;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.18);
  background: #100d20;
  text-align: left;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.role-option > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  filter: saturate(0.88) brightness(0.82);
  transition: transform 0.28s ease, filter 0.28s ease;
}

.role-option-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(16, 13, 32, 0.9) 0%, rgba(16, 13, 32, 0.22) 48%, rgba(16, 13, 32, 0.25) 100%),
    linear-gradient(90deg, rgba(16, 13, 32, 0.66), transparent 72%);
  transition: background 0.2s ease;
}

.role-option-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  align-self: flex-start;
  padding: 1.15rem;
}

.role-option-copy strong {
  color: var(--text-hi);
  font-size: 1.03rem;
  line-height: 1.25;
}

.role-option-copy small {
  max-width: 13rem;
  color: var(--text-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
}

.role-option-check {
  position: absolute;
  right: 0.85rem;
  top: 0.85rem;
  z-index: 2;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 50%;
  background: rgba(16, 13, 32, 0.68);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.role-option-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.65);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.role-option:hover {
  border-color: rgba(226, 114, 176, 0.7);
  transform: translateY(-2px);
}

.role-option:hover > img {
  filter: saturate(1) brightness(0.92);
  transform: scale(1.035);
}

.role-option:has(input:focus-visible) {
  outline: 3px solid rgba(226, 114, 176, 0.32);
  outline-offset: 2px;
}

.role-option:has(input:checked) {
  border-color: var(--magenta-bright);
  background: rgba(193, 51, 131, 0.15);
  box-shadow: inset 0 0 0 2px rgba(226, 114, 176, 0.34), 0 12px 30px rgba(4, 2, 14, 0.3);
}

.role-option:has(input:checked) > img {
  filter: saturate(1.04) brightness(0.95);
}

.role-option:has(input:checked) .role-option-shade {
  background:
    linear-gradient(180deg, rgba(60, 18, 54, 0.82) 0%, rgba(16, 13, 32, 0.12) 50%, rgba(16, 13, 32, 0.18) 100%),
    linear-gradient(90deg, rgba(16, 13, 32, 0.56), transparent 72%);
}

.role-option:has(input:checked) .role-option-check {
  border-color: var(--magenta-bright);
  background: var(--magenta);
}

.role-option:has(input:checked) .role-option-check::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.wizard-actions {
  grid-template-columns: auto minmax(180px, 1fr);
  padding-top: 0.2rem;
}

.wizard-actions:has(#webinarBack[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.wizard-actions .button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.form-note,
.form-alt {
  text-align: center;
}

@media (max-width: 767.98px) {
  .form-card.webinar-form {
    padding: 1.35rem;
  }

  .webinar-form-head {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .webinar-form-head h3 {
    font-size: 1.16rem;
  }
}

@media (max-width: 575.98px) {
  .form-card.webinar-form {
    gap: 1.1rem;
    padding: 1.15rem;
  }

  .form-progress-steps small {
    font-size: 0.65rem;
  }

  .form-step {
    min-height: 0;
  }

  .role-options {
    grid-template-columns: 1fr;
  }

  .role-option {
    aspect-ratio: 16 / 10;
    min-height: 170px;
  }

  .wizard-actions {
    grid-template-columns: 1fr;
  }

  .wizard-actions .button:first-child {
    width: 100%;
    order: 2;
  }
}

@media (max-width: 991.98px) {
  :root {
    --section-space: 5rem;
    --sticky-header-height: 76px;
  }

  h2,
  .section-heading h2,
  .feature-copy h2,
  .scene-founder > .container > .founder-shell > h2,
  .openworld-head h2 {
    font-size: 1.72rem;
  }
}

@media (max-width: 575.98px) {
  :root {
    --section-space: 4rem;
  }

  h2,
  .section-heading h2,
  .feature-copy h2,
  .scene-founder > .container > .founder-shell > h2,
  .openworld-head h2 {
    font-size: 1.48rem;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .openworld-pin {
    min-height: auto;
    gap: 2rem;
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
  }

  .founder-card,
  .form-card,
  .contact-card {
    padding: 1.25rem;
  }

  .stop-card h3,
  .issue-card h3 {
    font-size: 1.18rem;
  }

  .issue-card h3,
  .issue-card p {
    max-width: 100%;
  }

  .issue-card::before {
    background:
      linear-gradient(90deg, rgba(12, 8, 24, 0.92), rgba(12, 8, 24, 0.72)),
      linear-gradient(180deg, rgba(12, 8, 24, 0.3), rgba(12, 8, 24, 0.58));
  }

  .path-card h3 {
    font-size: 1.04rem;
  }

  .path-card {
    min-height: 240px;
  }
}

@media (max-height: 699px) and (min-width: 768px) {
  .openworld-pin {
    min-height: 100svh;
    gap: 1.5rem;
    padding-top: calc(var(--sticky-header-height) + 1.25rem);
    padding-bottom: 2rem;
  }
}

/* Every question takes a turn at full clarity instead of belonging to a
   permanently bright or dim depth tier. Delays distribute the highlights. */
.chaos-chip {
  --pulse-duration: 12.8s;
  --pulse-delay: 0s;
}

@media (min-width: 768px) {
  .chaos-chip {
    animation: chip-clarity var(--pulse-duration) ease-in-out var(--pulse-delay) infinite;
  }
}

/* Uneven durations and non-sequential offsets keep the questions feeling
   independent. The old 0.4s ladder visibly travelled from the top row to the
   bottom row, which read as blinking rather than ambient thought. */
.chaos-chip:nth-of-type(2n) { --pulse-duration: 14.2s; }
.chaos-chip:nth-of-type(3n) { --pulse-duration: 11.6s; }
.chaos-chip:nth-of-type(5n) { --pulse-duration: 15.1s; }

.chaos-chip:nth-of-type(1)  { --pulse-delay: -0.7s; }
.chaos-chip:nth-of-type(2)  { --pulse-delay: -6.4s; }
.chaos-chip:nth-of-type(3)  { --pulse-delay: -3.2s; }
.chaos-chip:nth-of-type(4)  { --pulse-delay: -9.8s; }
.chaos-chip:nth-of-type(5)  { --pulse-delay: -5.1s; }
.chaos-chip:nth-of-type(6)  { --pulse-delay: -1.9s; }
.chaos-chip:nth-of-type(7)  { --pulse-delay: -8.4s; }
.chaos-chip:nth-of-type(8)  { --pulse-delay: -4s; }
.chaos-chip:nth-of-type(9)  { --pulse-delay: -10.7s; }
.chaos-chip:nth-of-type(10) { --pulse-delay: -2.6s; }
.chaos-chip:nth-of-type(11) { --pulse-delay: -7.3s; }
.chaos-chip:nth-of-type(12) { --pulse-delay: -0.1s; }
.chaos-chip:nth-of-type(13) { --pulse-delay: -5.8s; }
.chaos-chip:nth-of-type(14) { --pulse-delay: -9.1s; }
.chaos-chip:nth-of-type(15) { --pulse-delay: -3.7s; }
.chaos-chip:nth-of-type(16) { --pulse-delay: -11.2s; }

@keyframes chip-clarity {
  0%, 20%, 100% {
    color: #9b94b1;
  }

  42%, 62% {
    color: #f5f3ff;
  }

  82% {
    color: #9b94b1;
  }
}

/* Hidden pillar copy enters from the direction of travel: upward while the
   page moves down, and downward from above while the page moves back up. */
.pillar-accordion.is-reversing .pillar-detail {
  transform: translateY(-20px);
}

.pillar-accordion.is-reversing .pillar-panel.active .pillar-detail {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .chaos-chip {
    animation: none;
  }
}

/* Keep repeated child/family forms in one stable viewport. */
.people-carousel-nav {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0.75rem;
}

.person-nav-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-control);
  background: #100d20;
  color: var(--text-hi);
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.person-nav-button:hover:not(:disabled),
.person-nav-button:focus-visible {
  border-color: var(--magenta-bright);
  background: rgba(193, 51, 131, 0.14);
}

.person-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.people-position {
  color: var(--text-body);
  font-size: 0.86rem;
  font-weight: 800;
  text-align: center;
}

.person-card[hidden],
.person-remove[hidden] {
  display: none !important;
}

@media (max-width: 575.98px) {
  .people-builder-head {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .people-builder-head .button {
    min-height: 44px;
    padding: 0.65rem 0.9rem;
  }
}

/* Wide webinar wizard: use desktop width to reduce vertical travel. */
@media (min-width: 1200px) {
  .webinar-register-row {
    --bs-gutter-x: 2.25rem;
  }

  .form-card.webinar-form {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.55fr);
    gap: 1.15rem 1.75rem;
    padding: 1.5rem 1.75rem;
  }

  .webinar-form-head {
    grid-column: 1;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 0.55rem;
    padding: 0 1.5rem 0 0;
    border-right: 1px solid rgba(255, 255, 255, 0.11);
    border-bottom: 0;
  }

  .webinar-form-head h3 {
    font-size: 1.24rem;
  }

  .form-progress {
    grid-column: 2;
    align-self: center;
  }

  .webinar-form > .form-errors,
  .webinar-form > .form-step,
  .webinar-form > .form-alt,
  .webinar-form > noscript {
    grid-column: 1 / -1;
  }

  .webinar-form > .form-note {
    grid-column: 1;
    align-self: center;
    text-align: left;
  }

  .webinar-form > .wizard-actions {
    grid-column: 2;
    align-self: center;
    padding-top: 0;
  }

  .form-step {
    min-height: 310px;
    gap: 0.85rem;
    padding-top: 0.15rem;
  }

  .form-step[data-step="context"] {
    min-height: 0;
  }

  .webinar-form .form-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
  }

  .form-step[data-step="details"] .form-grid > label:has([name="full_name"]),
  .person-card .form-grid > label:has([data-person-field="full_name"]) {
    grid-column: span 4;
  }

  .form-step[data-step="details"] .form-grid > label:has([name="age"]),
  .person-card .form-grid > label:has([data-person-field="age"]) {
    grid-column: span 2;
  }

  .form-step[data-step="details"] .form-grid > label:has([name="phone"]),
  .form-step[data-step="details"] .form-grid > label:has([name="email"]),
  .person-card .form-grid > label:has([data-person-field="phone"]),
  .person-card .form-grid > label:has([data-person-field="email"]) {
    grid-column: span 3;
  }

  .form-step[data-step="details"] .form-grid > label:has([name="profession"]),
  .form-step[data-step="details"] .form-grid > label:has([name="sector"]) {
    grid-column: span 6;
  }

  .form-step[data-panel="student"] .form-grid > label,
  .person-card .form-grid > label:has([data-family-only]),
  .person-card .form-grid > label:has([data-person-field="relationship"]),
  .person-card .form-grid > label:has([data-person-field="person_type"]),
  .person-card .form-grid > label:has([data-person-field="education_stage"]),
  .person-card .form-grid > label:has([data-person-field="current_standard"]),
  .person-card .form-grid > label:has([data-person-field="stream_group"]),
  .person-card .form-grid > label:has([data-person-field="profession"]),
  .person-card .form-grid > label:has([data-person-field="sector"]) {
    grid-column: span 3;
  }

  .people-builder {
    grid-template-columns: minmax(0, 1fr) minmax(245px, 0.7fr);
    align-items: center;
    gap: 0.8rem 1rem;
  }

  .people-builder-head {
    grid-column: 1;
  }

  .people-carousel-nav {
    grid-column: 2;
  }

  .people-list {
    grid-column: 1 / -1;
  }

  .person-card {
    gap: 0.75rem;
    padding: 0.9rem 1rem;
  }

  .person-card textarea {
    min-height: 82px;
  }

  .webinar-form input,
  .webinar-form select {
    min-height: 48px;
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
  }

  .role-option {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-option,
  .role-option > img,
  .role-option-shade,
  .role-option-check::after {
    transition: none;
  }
}

.scene-register {
  scroll-margin-top: var(--sticky-header-height, 76px);
}

/* --------------------------------------------------------------------------
   Register invitation — the landing page now hands the visitor off to the
   dedicated registration page instead of carrying the wizard itself.
   -------------------------------------------------------------------------- */
.register-invite {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 992px) {
  .register-invite {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 3rem;
  }

  .register-invite-card {
    align-self: center;
  }
}

.register-invite-card {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: 1.75rem;
  border: 1px solid rgba(226, 114, 176, 0.34);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(193, 51, 131, 0.16), rgba(24, 20, 40, 0.96) 55%),
    rgba(24, 20, 40, 0.97);
  box-shadow: 0 28px 80px rgba(4, 2, 14, 0.42);
}

.register-invite-card::before {
  --edge-accent: var(--magenta-bright);
}

.register-invite-eyebrow {
  margin: 0;
  color: var(--magenta-bright);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.register-invite-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.32rem;
  line-height: 1.25;
}

.register-invite-meta {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.register-invite-meta li {
  display: grid;
  grid-template-columns: 3.8rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--text-body);
}

.register-invite-meta span {
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.register-invite-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.9rem;
}

.register-invite-card .button {
  width: 100%;
}

.register-invite-card .form-alt {
  font-size: 0.85rem;
}

@media (max-width: 575.98px) {
  .register-invite-card {
    padding: 1.25rem;
  }
}

.webinar-form input::placeholder,
.webinar-form textarea::placeholder {
  color: #aaa2c1;
  font-weight: 500;
  opacity: 1;
}