/* ─────────────────────────────────────────
   STUDENT STORIES — Page-Specific Styles
   EEST NJT Racing Circuit
   Sections: Journey Timeline, Parent Grid,
   Transformation Gallery, CTA
───────────────────────────────────────── */

/* ═══════════════════════════════════════
   1. JOURNEY TIMELINE
═══════════════════════════════════════ */
.njt-journey {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--bg-gradient-v);
  overflow: hidden;
}
.njt-journey__container {
  position: relative;
  z-index: 10;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.njt-journey__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 16px;
}
/* Connecting line behind nodes */
.njt-journey__track::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  background: linear-gradient(90deg,
    var(--racing-yellow, #FFD700),
    var(--magenta, #D40079),
    var(--racing-yellow, #FFD700));
  z-index: 0;
  border-radius: 2px;
}
.njt-journey__node {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 12px;
}
.njt-journey__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  /* Opaque. The connector runs edge-to-edge behind this row, and at 50% black the
     line read straight through every disc, so it looked like it cut across each
     icon rather than joining the steps. */
  background: #12030B;
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #FFD700);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.1);
}
.njt-journey__node:hover .njt-journey__icon {
  transform: scale(1.1) translateY(-4px);
  border-color: var(--gold, #FFD700);
  box-shadow: 0 0 32px rgba(255, 215, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.3);
}
.njt-journey__step {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 11px;
  color: var(--gold, #FFD700);
  text-transform: uppercase;
  letter-spacing: 0.12em; /* mono retired → Prompt + tracking (CONVENTIONS #8a) */
  margin-bottom: 8px;
  opacity: 0.7;
}
.njt-journey__name {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-white, #fff);
  margin-bottom: 8px;
}
.njt-journey__desc {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 13px;
  color: var(--text-white-60, rgba(255,255,255,0.6));
  line-height: 1.6;
}
.njt-journey__time {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 11px;
  letter-spacing: 0.06em; /* mono retired → Prompt + tracking keeps the HUD/telemetry feel (CONVENTIONS #8a) */
  color: var(--gold, #FFD700);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 100px;
  padding: 4px 14px;
}

/* Journey responsive */
@media (max-width: 991px) {
  .njt-journey__track {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 24px;
  }
  .njt-journey__track::before {
    display: none;
  }
}
@media (max-width: 576px) {
  .njt-journey__track {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .njt-journey__icon {
    width: 72px;
    height: 72px;
  }
}


/* ═══════════════════════════════════════
   2. PARENT TESTIMONIALS GRID
═══════════════════════════════════════ */
.njt-parents {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: #050505;
  overflow: hidden;
}
.njt-parents__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.njt-parents__glow {
  position: absolute;
  width: 40vw;
  height: 40vw;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.06;
}
.njt-parents__glow--1 {
  top: -10%;
  right: -5%;
  background: var(--gold, #FFD700);
}
.njt-parents__glow--2 {
  bottom: -10%;
  left: -5%;
  background: var(--magenta, #D40079);
}
.njt-parents__container {
  position: relative;
  z-index: 10;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.njt-parents__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.njt-parent-card {
  /* Was a flat 50% grey wash; the plum rake gives the card a surface of its own
     against the near-black section instead of leaning on its 1px border. */
  background: linear-gradient(180deg, rgba(40, 7, 26, 0.72) 0%, rgba(12, 3, 9, 0.72) 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg, 16px);
  padding: 32px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  /* The reviews run one, two and three lines long. Left to flow, each attribution
     sat directly under its own quote — 51px apart across the row, with 84px of
     dead space under the shortest. The column puts every avatar, name and rule on
     the card's foot and moves the slack above them, where it reads as breathing
     room rather than a gap. */
  display: flex;
  flex-direction: column;
}
.njt-parent-card__author { margin-top: auto; }
.njt-parent-card::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  right: 16px;
  font-size: 120px;
  font-family: Georgia, serif;
  color: rgba(255, 215, 0, 0.06);
  line-height: 1;
  pointer-events: none;
}
.njt-parent-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.05);
}
.njt-parent-card__stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.njt-parent-card__star {
  color: var(--gold, #FFD700);
  font-size: 16px;
}
.njt-parent-card__quote {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: 20px;
}
.njt-parent-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.njt-parent-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--magenta-gradient);   /* was a hand-rolled 135deg fork of the token (CONVENTIONS #16) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.njt-parent-card__name {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-white, #fff);
  margin-bottom: 2px;
}
.njt-parent-card__role {
  font-size: 12px;
  /* AA contrast (Gate 2): brightened from 40% white (~3.7:1) to ~7:1 on dark cards */
  color: rgba(255,255,255,0.6);
}

/* Parent grid responsive */
@media (max-width: 991px) {
  .njt-parents__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .njt-parents__grid {
    grid-template-columns: 1fr;
  }
  .njt-parent-card {
    padding: 24px;
  }
}


/* ═══════════════════════════════════════
   3. TRANSFORMATION GALLERY
═══════════════════════════════════════ */
.njt-transform {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--bg-gradient-v);
  overflow: hidden;
}
.njt-transform__container {
  position: relative;
  z-index: 10;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.njt-transform__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.njt-transform-card {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  transition: all 0.4s ease;
}
.njt-transform-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}
.njt-transform-card__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 240px;
  position: relative;
}
.njt-transform-card__side {
  position: relative;
  overflow: hidden;
}
.njt-transform-card__side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.njt-transform-card__label {
  position: absolute;
  bottom: 8px;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 4px;
  z-index: 2;
}
.njt-transform-card__side:first-child .njt-transform-card__label {
  left: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.7);
}
.njt-transform-card__side:last-child .njt-transform-card__label {
  right: 8px;
  background: rgba(255, 215, 0, 0.9);
  color: #000;
  font-weight: 700;
}
/* Divider arrow */
.njt-transform-card__compare::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: var(--gold, #FFD700);
  border-radius: 50%;
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.njt-transform-card__body {
  padding: 24px;
}
.njt-transform-card__name {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-white, #fff);
  margin-bottom: 4px;
}
.njt-transform-card__title {
  font-size: 13px;
  color: var(--gold, #FFD700);
  margin-bottom: 16px;
}
.njt-transform-card__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.njt-transform-stat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 80px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--gold, #FFD700);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}
.njt-transform-stat:nth-child(2) {
  border-color: var(--magenta, #D40079);
}
.njt-transform-stat:nth-child(3) {
  border-color: #fff;
}
.njt-transform-stat__label {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.njt-transform-stat__val {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-white, #fff);
}

/* Transform responsive */
@media (max-width: 991px) {
  .njt-transform__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .njt-transform__grid {
    grid-template-columns: 1fr;
  }
  .njt-transform-card__compare {
    height: 200px;
  }
}


/* ═══════════════════════════════════════
   4. CTA SECTION
═══════════════════════════════════════ */
.njt-stories-cta {
  position: relative;
  padding: 100px 24px;
  background: #050505;
  overflow: hidden;
  text-align: center;
}
.njt-stories-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Checkered fade pattern */
.njt-stories-cta__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(45deg, rgba(255, 215, 0, 0.03) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 215, 0, 0.03) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 215, 0, 0.03) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 215, 0, 0.03) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
  opacity: 0.6;
}
.njt-stories-cta__glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(180px);
  opacity: 0.08;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gold, #FFD700);
}
.njt-stories-cta__content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
}
.njt-stories-cta__overline {
  display: inline-block;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold, #FFD700);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 100px;
  padding: 6px 20px;
  margin-bottom: 24px;
}
.njt-stories-cta__title {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.2;
  color: var(--text-white, #fff);
  margin-bottom: 16px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.njt-stories-cta__desc {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 18px;
  color: var(--text-white-60, rgba(255,255,255,0.6));
  line-height: 1.6;
  margin-bottom: 40px;
}
.njt-stories-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .njt-stories-cta {
    padding: 64px 20px;
  }
  .njt-stories-cta__desc {
    font-size: 16px;
  }
  .njt-stories-cta__buttons {
    flex-direction: column;
    align-items: center;
  }
}


/* ═══════════════════════════════════════
   5. HERO OVERLINE BADGE (page-specific)
═══════════════════════════════════════ */
.njt-hero__overline {
  display: inline-block;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold, #FFD700);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 100px;
  padding: 6px 20px;
  margin-bottom: 16px;
  animation: fadeInUp 0.4s ease both;
}

/* ═══════════════════════════════════════
   6. HERO STATS BAR
═══════════════════════════════════════ */
.njt-hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  animation: fadeInUp 0.4s ease 0.5s both;
}
.njt-hero-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.njt-hero-stat__num {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-weight: 900;
  font-size: 32px;
  color: var(--gold, #FFD700);
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.njt-hero-stat__label {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
  .njt-hero-stats {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
  .njt-hero-stat__num {
    font-size: 24px;
  }
}


/* ═══════════════════════════════════════
   7. BREADCRUMB
═══════════════════════════════════════ */
.njt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  animation: fadeInUp 0.4s ease both;
}
.njt-breadcrumb a,
.njt-breadcrumb span {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: color 0.3s ease;
}
.njt-breadcrumb a:hover {
  color: var(--gold, #FFD700);
}
.njt-breadcrumb__sep {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
}
.njt-breadcrumb__current {
  color: var(--gold, #FFD700) !important;
}


/* ═══════════════════════════════════════
   8. CINEMATIC PARALLAX HERO
   (moved out of the inline <style> block in student-stories.html —
    canonical-spec-v3 "extract inline <style> into css/<page>.css")
═══════════════════════════════════════ */
.ss-hero {
  position: relative;
  min-height: max(620px, 80vh);   /* A14: was `height: 80vh` — hero must be able to grow */
  display: flex;
  align-items: safe center;   /* A14: `safe` — when the content is taller than the hero box, plain `center` overflows the PADDING edge in BOTH directions and puts the breadcrumb under the fixed header. `safe` falls back to start-alignment in exactly that case and never overflows the top. */
  justify-content: center;
  overflow: hidden;
  background: #050505;
  margin-top: calc(var(--header-h, 80px) * -1);
  padding-top: var(--hero-pad-top);
  /* The stats HUD that follows is pulled up 80px to overlap this hero (40px under
     992px), and the hero had no bottom padding at all — so its content ran to the
     section's very edge and the panel covered it. The U13 / R2M record chips were
     hidden outright and the subtitle's last line was clipped by 8px. This reserves
     the overlapped strip plus a 24px gap. */
  padding-bottom: 104px;
  /* A14 — the arithmetic, because it is not obvious. The hero is pulled up by
     `margin-top: -var(--header-h)` so its artwork runs behind the fixed header, so
     content starts at (padding-top − header-h) from the VIEWPORT top, not from the
     section top. A `padding-top: var(--header-h)` therefore puts content at y=0 —
     directly under the header — which is why the breadcrumb was unclickable
     (`elementFromPoint` returned `.site-header__inner`). It has to be header-h TWICE
     plus the gap: once to cancel the negative margin, once to clear the header. */
}
.ss-hero__bg {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-image: url('../assets/04-supporting/young-riders/2026_01_12__18_04_43_615346455_914598368202148_192193461321245774_n.jpg');
  background-size: cover;
  background-position: center 40%;
  filter: contrast(1.1) saturate(1.15);
  opacity: 0.5;
  animation: ss-slowPan 30s infinite alternate ease-in-out;
  z-index: 0;
}
.ss-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.5) 0%, rgba(42, 0, 24, 0.92) 100%),
              linear-gradient(90deg, rgba(42, 0, 24, 0.4) 0%, transparent 50%, rgba(42, 0, 24, 0.4) 100%);
  z-index: 1;
}
.ss-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 1;
}
.ss-hero__glow--gold {
  width: 500px;
  height: 500px;
  top: -150px;
  right: -100px;
  background: rgba(255, 215, 0, 0.12);
  animation: ss-float 18s ease-in-out infinite;
}
.ss-hero__glow--magenta {
  width: 600px;
  height: 600px;
  bottom: -200px;
  left: -150px;
  background: rgba(212, 0, 121, 0.1);
  animation: ss-float 22s ease-in-out infinite reverse;
}
.ss-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.ss-hero__particle {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  background: rgba(255, 215, 0, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 16px rgba(255, 215, 0, 0.4);
  animation: ss-rise 7s linear infinite;
}
.ss-hero__particle:nth-child(2n) {
  width: 2px;
  height: 2px;
  background: rgba(212, 0, 121, 0.6);
  box-shadow: 0 0 8px rgba(212, 0, 121, 0.6);
}
/* Per-instance particle positions (moved off inline style attrs) */
.ss-hero__particle:nth-child(1) { left: 8%;  animation-delay: 0s; }
.ss-hero__particle:nth-child(2) { left: 22%; animation-delay: 1.5s; }
.ss-hero__particle:nth-child(3) { left: 45%; animation-delay: 0.8s; }
.ss-hero__particle:nth-child(4) { left: 65%; animation-delay: 2.5s; }
.ss-hero__particle:nth-child(5) { left: 82%; animation-delay: 1.2s; }
.ss-hero__particle:nth-child(6) { left: 95%; animation-delay: 3s; }
/* Journey ambient orbs (moved off inline style attrs) */
.njt-journey > .glow-orb { top: -100px; left: -100px; }
.njt-journey > .glow-orb--magenta { top: auto; left: auto; bottom: -100px; right: -100px; }
.ss-hero__kinetic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 14vw;
  font-weight: 900;
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 215, 0, 0.04);
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
  animation: ss-breathe 20s ease-in-out infinite;
  -webkit-user-select: none;
  user-select: none;
}
.ss-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 2rem;
  max-width: 1000px;
  width: 100%;
}
/* The shared subtitle (training.css) is capped at 620px with `margin: 0 0 2.5rem`,
   which is right for the training hero because that one is text-align: left — the
   capped box simply hugs the left edge. This hero is centred, so the same box sat
   left inside the 936px content column and its centred text landed on x=642 while
   the breadcrumb, headline and stat row all centred on x=800. Auto inline margins
   put the box back on the content's axis. */
.ss-hero .njt-hero-parallax__subtitle { margin-inline: auto; }
.ss-hero__title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-weight: 900;
  font-style: italic;
  font-size: var(--text-display-xl);   /* A5 / CONVENTIONS #19 — was clamp(2.8rem, 5.5vw, 4.8rem) */
  /* line-height deleted (A30) — components.css §38a governs this h1. */
  color: #fff;
  margin: 0 0 24px;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
.ss-hero__title-accent {
  color: var(--racing-yellow, #FFD700);
  text-shadow: 0 0 40px rgba(255, 215, 0, 0.35), 0 4px 40px rgba(0, 0, 0, 0.6);
}
.ss-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  animation: ss-scrollPulse 2s ease-in-out infinite;
}
.ss-hero__scroll-text {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
.ss-hero__scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.6), transparent);
}
.ss-hero__accent-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--racing-yellow, #FFD700) 30%, var(--magenta, #D40079) 70%, transparent);
  z-index: 10;
}
/* Center the reinstated proof strip inside the centered hero */
/* Both of these are flex rows inside a text-align: center hero, and `text-align`
   does nothing to flex items — so their boxes centred while the links and chips
   inside them packed to flex-start. The breadcrumb was sitting 348px left of the
   headline's axis. The shared .njt-breadcrumb keeps its default elsewhere, where
   the heroes are left-aligned. */
.ss-hero .njt-breadcrumb { justify-content: center; }
.ss-hero .njt-hero-stats { justify-content: center; }
/* HUD overlap halves to 40px here (components.css §2 responsive), so the reserved
   strip follows it down. */
@media (max-width: 991px) {
  .ss-hero { padding-bottom: 64px; }
}

@keyframes ss-slowPan {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1%, 1%); }
}
@keyframes ss-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}
@keyframes ss-rise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}
@keyframes ss-breathe {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.02); }
}
@keyframes ss-scrollPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(4px); }
}
@media (max-width: 768px) {
  .ss-hero { height: 85vh; min-height: 560px; }
  .ss-hero__kinetic { font-size: 22vw; }
  .ss-hero__glow--gold { width: 300px; height: 300px; }
  .ss-hero__glow--magenta { width: 350px; height: 350px; }
}
/* Motion hygiene (contact.css parity) — still the hero, just calmer */
@media (prefers-reduced-motion: reduce) {
  .ss-hero__bg,
  .ss-hero__glow,
  .ss-hero__particle,
  .ss-hero__kinetic,
  .ss-hero__scroll,
  .njt-breadcrumb,
  .njt-hero__overline,
  .njt-hero-stats { animation: none !important; }
  .ss-hero__particles { display: none; }
}


/* ═══════════════════════════════════════
   9. SUCCESS-STORIES CAROUSEL — page-scoped re-token
   The carousel module lives in css/training.css (owner: training page); it is
   NOT edited here. These overrides are scoped to `.ss-stories` so they touch
   ONLY this page. They convert the Honda-campaign RED accents to the brand
   trio (magenta/gold) and unify the eyebrow + title to this page's system.
   student-stories.css loads AFTER training.css, so equal-specificity rules win.
═══════════════════════════════════════ */
/* Eyebrow: red pill → gold pill (matches .njt-stories-cta__overline — one pill spec on the page) */
.ss-stories .njt-ct-header__overline {
  color: var(--gold, #FFD700);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
}
/* Title: silver gradient → solid white (one title fill on the page) */
.ss-stories .njt-ct-header__title {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}
/* (pruned R2: the glow→magenta, HUD-first-chip→magenta, and progress-fill→gold
   re-token overrides are now identical to training.css's landed re-token — removed
   as redundant. training.css: glow-primary=var(--magenta), hud-stat border-left=
   var(--magenta), progress-bar__fill=var(--gold).) */

/* Progress bars are now <button>s (keyboard focus, a11y) — strip UA button chrome
   so they still render as the thin 4px track bars. */
.ss-stories .njt-progress-bar {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
}
/* Profile-card radius: 24px → --radius-lg (system radius, 16px).
   Base radius lives in training.css:1428 — flagged for the integrator. */
.ss-stories .njt-profile-card { border-radius: var(--radius-lg, 16px); }
/* Edge fade masks so the peeking neighbour cards resolve as an affordance */
.ss-stories .njt-ct-carousel {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
/* Inactive peek opacity raised 0.5 → 0.92 so the ~116px that bleeds into the viewport
   no longer fails contrast — the parked card's author title measured 2.15:1 at 0.5
   (axe, R2 N1); 0.92 clears AA honestly. The scale(0.95) + grayscale media + HUD-stat
   reveal on .is-active still carry the active/inactive distinction. */
/* A19: page override deleted — components.css now ships 0.92 as the canonical
   inactive value for every route, so this fork is redundant by construction. */


/* ═══════════════════════════════════════
   10. GOLD OUTLINE CTA — promoted to css/layout.css (GOAL-V3 R1 integrator, punch 5).
   The `.btn-cta--outline-gold` spec now lives in the global btn system; page copy removed.
═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   11. ACHIEVEMENT-STATS TWEAKS (§2.2)
═══════════════════════════════════════ */
/* Sub-labels: 13px → 12px. NOTE: audit asked for --text-white-40, but that
   fails WCAG AA (~3.6:1) at 12px on the panel — HOUSE-RULES §10 is a hard gate,
   so kept at --text-white-60 (~6.9:1). Prominence reduced via size only. */
#stats .njt-stat__sub { font-size: 12px; }


/* ═══════════════════════════════════════
   12. PARENT / COMMUNITY VOICES — provenance note
═══════════════════════════════════════ */
.njt-parents__source {
  margin: 20px auto 0;
  text-align: center;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 12px;
  color: var(--text-white-60, rgba(255, 255, 255, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.njt-parents__source svg { width: 14px; height: 14px; stroke: var(--gold, #FFD700); }

/* ═══════════════════════════════════════════════════════════════════════════
   GOAL-V4 §G8 — STUDENT STORIES ELEVATION
   The carousel was a verbatim reuse of training's: same cards, same quotes, no
   outcome shape. Each story now carries a RESULT ARC (start → class → result)
   in the page's existing HUD-chip language, plus its own CTA. A mid-page CTA
   strip lands before the timeline so the first action is not five screens down.

   FLAG (operator): the arc's first step is deliberately "trained at EEST NJT",
   not "started at age N / N months of training" — the corpus records no start
   age or training duration for any of the three riders, and V4 may not invent
   one. Supply those two data points and the arc becomes age → months → podium
   with no markup change beyond the two data-th/data-en values.
   ═══════════════════════════════════════════════════════════════════════════ */
.ss-arc {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
}
.ss-arc__step {
  position: relative;
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(var(--blur-chip));
  backdrop-filter: blur(var(--blur-chip));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius, 8px);
}
.ss-arc__step + .ss-arc__step::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: rgba(255, 215, 0, 0.45);
}
.ss-arc__step--result {
  border-color: rgba(255, 215, 0, 0.45);
  background: rgba(255, 215, 0, 0.07);
}
.ss-arc__label {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 215, 0, 0.8);
}
.ss-arc__val {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-white);
}
.ss-arc__step--result .ss-arc__val { color: var(--gold); }

.ss-story__cta { margin-top: 20px; }
.ss-story__cta .btn-cta { justify-content: center; }

/* ── Mid-page CTA strip ── */
.ss-midcta {
  background: var(--black-card);
  border-block: 1px solid rgba(255, 215, 0, 0.18);
  padding: 40px 0;
}
.ss-midcta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-left: 32px;
  padding-right: 32px;
}
.ss-midcta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.25;
  color: var(--text-white);
  margin-top: 8px;
  text-wrap: balance;
}
.ss-midcta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 767px) {
  .ss-arc { flex-direction: column; }
  .ss-arc__step + .ss-arc__step::before { left: 50%; top: -8px; width: 1px; height: 8px; }
  .ss-midcta__inner { flex-direction: column; align-items: flex-start; }
  .ss-midcta__actions { width: 100%; }
  .ss-midcta__actions .btn-cta { flex: 1 1 auto; justify-content: center; }
}

/* .njt-nw promoted to css/components.css (A1, round 2) — page copy removed. */