/* ─────────────────────────────────────────
   COMPONENTS — EEST NJT Racing Circuit
   All section & component styles
───────────────────────────────────────── */

/* ═══════════════════════════════════════
/* ═══════════════════════════════════════
   1. HERO SECTION
═══════════════════════════════════════ */
.njt-hero {
  position: relative;
  /* A14 — HERO SHELL RULE (round 2), applied identically to all 9 hero shells.
     A hero that declares a FIXED `height` and centres (or end-aligns) its content
     cannot grow when the content is taller than the box: flex alignment then lets
     the content overflow the PADDING edge upward, straight under the fixed header.
     That is why the breadcrumb painted under the header and was not clickable —
     `elementFromPoint` on the crumb anchor returned `.site-header__*` on 30 of 180
     route×lang×width combos (coaches · sponsors-partners · student-stories ·
     track-info), and coaches at 360 sat at top=14 inside a 64px header band.
     `padding-top` alone does not fix it; the box has to be allowed to GROW.
     Fix = `min-height` instead of `height` + a header-clearing top pad. Visual
     result is identical wherever the content already fitted. */
  min-height: max(600px, 100vh);
  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. */
  overflow: hidden;
  background: var(--black);
  padding-top: calc(var(--header-h, 80px) + 16px);
}
/* Video Background */
.njt-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
}

/* Image Fallback — hidden when video loads, visible as poster fallback */
.njt-hero__bg {
  position: absolute;
  inset: -5%;
  background: center/cover no-repeat;
  z-index: 0;
  animation: kenBurns 20s ease-in-out infinite alternate;
}

/* Cinematic overlay on top of video + fallback */
.njt-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(42,0,24,0.15) 40%, rgba(0,0,0,0.7) 100%),
    radial-gradient(ellipse at 30% 50%, rgba(42,0,24,0.3) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}

@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* Diagonal split clip-path */
.njt-hero {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

.njt-hero__accent-line {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,215,0,0) 0%, rgba(255,215,0,0.8) 50%, rgba(212,0,121,0.6) 100%); /* magenta stop — V3 token sweep (was off-token red) */
  clip-path: polygon(0 calc(100% - 3px), 100% calc(85% - 3px), 100% 85%, 0 100%);
}

.njt-hero__content {
  position: relative;
  z-index: 4;
  /* GOAL-V4 §G1 (operator-reported grid defect): .njt-hero is `display:flex`, so this block
     is a FLEX ITEM. Without an explicit width it shrink-wraps to its widest child — the H1,
     capped at max-width:1000px — so `margin:0 auto` centred a ~1064px box inside the viewport
     and the hero text floated 188–200px right of the 1400 rail every other section sits on
     (index, gallery, about, contact, racing-team; pricing had a page-level patch).
     `width:100%` makes the item fill the flex line so max-width + auto margins resolve against
     the rail, exactly like `.container--wide`. Do not remove. */
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  padding-top: var(--header-h);
}
.njt-hero__tagline {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 6px;
  color: var(--gold);
  margin-bottom: 16px;
  animation: fadeInUp 0.4s ease both;
}

/* GOAL-V4 §G1/§G6 — the hero H1 is now on the SHARED token, not a local clamp.
   Was `clamp(52px, 7vw, 96px)`: 33% larger than the-circuit's flagship H1 (which already
   used --text-display-xl), inverting the site's own hierarchy on five routes. The 88px cap
   lives on --text-display-xl in tokens.css — raise it THERE if a bigger hero is ever wanted.
   `text-wrap: balance` evens the line lengths so the Thai/EN headline stops dropping an
   8-character runt ("Sattahip") onto its own line. */
.njt-hero__title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-style: italic;
  font-size: var(--text-display-xl);
  line-height: var(--lh-display);   /* language-aware leading — tokens.css + §38 (was a flat 1.2) */
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  max-width: 960px;                 /* headline measure only — the RAIL is owned by .njt-hero__content */
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.3);
  animation: fadeInUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

/* GOAL-V4 §G1 — subtitle demoted from "second headline" (up to 26px, 800px wide) to a
   STANDFIRST: one calm 20px deck at a readable 58ch measure. It introduces the CTAs; it
   does not compete with the H1. */
.njt-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin-bottom: 40px;
  max-width: 58ch;
  text-wrap: pretty;
  text-shadow: 0 4px 12px rgba(0,0,0,0.5);
  animation: fadeInUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}
.njt-hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  animation: fadeInUp 0.4s ease 0.45s both;
}

/* ─────────────────────────────────────────
   HERO CHIP ROW — canonical supporting-caption register (GOAL-V4 §G1).
   THE LAW: chips are captions that SUPPORT the CTAs, never peers of them. Before this,
   index shipped a 717×64 chip row against a 427×64 CTA row, so "UNDER CONSTRUCTION" was
   the last thing read before "Book Now" at equal visual weight. Metrics live here (shared
   layer) so every route inherits one hierarchy; page CSS keeps only colour/border deltas.
   The DOM order (chips AFTER the CTA block) is the page owner's edit — this supports it.
   Scoped `.njt-hero .njt-hero__chips` so the canonical wins over later-loading page CSS.
   Mobile deliberately has NO height cap: the fact chip's spec string cannot fit one line
   below 768 and clipping it would be worse than letting it wrap.
───────────────────────────────────────── */
.njt-hero .njt-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  /* Symmetric so the row reads correctly whether the page owner has already moved it BELOW
     the CTA block or not — no gap collapse surprise during the hand-off. */
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  animation: fadeInUp 0.4s ease 0.6s both;
}
@media (min-width: 768px) {
  /* Single-line 44px caption pills — two-thirds the 64px CTA height, so the ranking reads. */
  .njt-hero .njt-hero__chips > * {
    height: 44px;
    max-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .njt-hero .njt-hero__fact-chip {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .njt-hero .njt-hero__status-chip {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* Button Enhancements */
.btn-cta--glow {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-cta--glow:hover {
  /* Gate 1 minor: was skew(-12deg) — the whole CTA system is -15deg (`.btn-cta` at rest
     and on hover, with the +15deg counter-skew on `.btn-cta > *`), so every `--glow` CTA
     straightened by 3deg under the pointer while its own label stayed at 15deg. The
     scale(1.05) is this variant's deliberate substitute for the system's translateY(-1px)
     lift and is left alone. */
  transform: skew(-15deg) scale(1.05);
  box-shadow: 0 0 32px rgba(255, 215, 0, 0.6), 0 0 12px rgba(255, 255, 255, 0.3);
}

.njt-hero__scroll {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  animation: bounce 2s infinite;
  color: white;
  opacity: 0.6;
}
.njt-hero__scroll svg {
  width: 28px;
  height: 28px;
}

/* Cinematic Particles */
.njt-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.njt-hero__particle {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px 2px var(--gold), 0 0 24px 4px rgba(255, 215, 0, 0.4);
  opacity: 0;
  animation: particleFloat 8s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile Adjustments for Hero */
@media (max-width: 991px) {
  .njt-hero--cinematic {
    height: auto;
    min-height: 100vh;
    padding-bottom: 60px;
  }
  .njt-hero__content-wrap {
    padding: var(--header-h) 24px 40px;
  }
  .njt-hero__services {
    flex-direction: column;
    height: auto;
    padding: 0 24px 40px;
    gap: 16px;
  }
  .njt-hero-service {
    height: 100px;
    flex: none !important;
  }
  .njt-hero-service__meta {
    opacity: 1;
    transform: none;
  }
  .njt-hero-service__bg {
    opacity: 0.6;
    filter: grayscale(40%);
  }
}


/* ═══════════════════════════════════════
   2. CINEMATIC STATS HUD
═══════════════════════════════════════ */
.njt-stats--glass-hud {
  position: relative;
  z-index: 10;
  margin-top: -80px; /* Overlap the hero section */
  padding: 0 20px;
  background: transparent;
}

.njt-stats__panel {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  background: rgba(15, 15, 15, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 24px 48px rgba(0, 0, 0, 0.6),
    0 8px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  padding: 48px;
}

/* Internal Dynamic Glow */
.njt-stats__ambient-glow {
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(255,215,0,0.05), transparent 60%),
              radial-gradient(circle at 20% 80%, rgba(212,0,121,0.05), transparent 50%);
  pointer-events: none;
  animation: slowPulse 12s infinite alternate ease-in-out;
}

@keyframes slowPulse {
  0% { transform: scale(1) rotate(0deg); opacity: 0.5; }
  100% { transform: scale(1.1) rotate(10deg); opacity: 1; }
}

.njt-stats__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.njt-stat {
  position: relative;
  padding: 16px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.njt-stat:hover {
  transform: translateY(-8px) scale(1.02);
}

.njt-stat::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 10%;
  height: 80%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.1), transparent);
}

.njt-stat:last-child::after {
  display: none;
}

/* Kinetic Typography */
.njt-stat__data {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--gold);
}

.njt-stat__number {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
}

.njt-stat__suffix {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #fff;
  margin-left: 4px;
}

.njt-stat__label {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-white);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-align: center;
}

.njt-stat__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-white-60);
  text-align: center;
  font-weight: 300;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .njt-stats--glass-hud {
    margin-top: -40px;
  }
  .njt-stats__panel {
    padding: 32px 24px;
  }
  .njt-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .njt-stat::after {
    display: none; /* remove dividers on smaller grids */
  }
}

@media (max-width: 576px) {
  .njt-stats__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ═══════════════════════════════════════
   3. SECTION HEADERS
═══════════════════════════════════════ */
.njt-section {
  padding: var(--section-pad) 24px;
}
.njt-section--dark {
  background: var(--bg-dark);
}
.njt-section--gradient {
  background: var(--bg-gradient-v);
}
/* ─────────────────────────────────────────
   CANONICAL SECTIONHEADER (GOAL-V3 §G1 — the ONE eyebrow/header/title system).
   Replaces the 13 eyebrow dialects + 7 header-block families. Page owners migrate
   their local overlines/kickers to .njt-section__overline (+ modifiers) in Batch C.
───────────────────────────────────────── */
.njt-section__header {
  text-align: center;
  margin-bottom: 56px;
}
/* --left: left-align the whole header block */
.njt-section__header--left { text-align: left; }

/* ─────────────────────────────────────────
   CANONICAL EYEBROW — ONE recipe, two class names (GOAL-V4 §G6).
   Spec: Prompt · 600 · 13px (--text-eyebrow, never fluid) · ls 0.2em · uppercase · gold.
   `.njt-kicker` is the SANCTIONED ALIAS of `.njt-section__overline--lines` (it was a second
   declaration block with identical values except weight 700 — that is a fork, and Gate 1's
   cross-route consistency test counts it as one). Both names now share this single block, so
   an inventory of "eyebrow implementations" returns 1. Page owners migrating a local eyebrow
   pick either class; do not author a third.
   Modifiers: --magenta (bright-magenta ink) · --lines (dash flanks; `.njt-kicker` has them
   built in). Anything else = a new fork; change THIS block instead.
───────────────────────────────────────── */
.njt-section__overline,
.njt-kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-eyebrow);       /* 13px */
  letter-spacing: 0.2em;
  line-height: 1.2;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  position: relative;
}
/* --magenta: swap the gold for the sanctioned bright magenta */
.njt-section__overline--magenta { color: var(--magenta-300); }
/* --lines: dash-flanked decorative rules (adopts the coffee-track kicker treatment sitewide) */
.njt-section__overline--lines::before,
.njt-section__overline--lines::after,
.njt-kicker::before,
.njt-kicker::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,215,0,0.6), transparent);
  vertical-align: middle;
}
.njt-section__overline--lines::before,
.njt-kicker::before {
  margin-right: 12px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.6));
}
.njt-section__overline--lines::after,
.njt-kicker::after { margin-left: 12px; }
.njt-section__header .njt-kicker { margin-bottom: 16px; }

/* ─────────────────────────────────────────
   SECTION-TITLE REGISTERS — the TWO legitimate voices, documented (GOAL-V4 §G6).
   Verifiers: two registers is the SPEC, not a fork. Cite this block. A third register
   (any other family/weight/style combination on a section title) IS a Gate-1 defect.

   1. DISPLAY  — `.njt-section__title--display`
      Prompt 900 · italic · uppercase · ls 0.01em. The brand's shout: hero-adjacent section
      titles, conversion sections, the flagship voice ("Race to Victory"). Ratified
      CONVENTIONS #9(b). Sits on --text-display so it can never out-shout the H1
      (--text-display-xl).
   2. EDITORIAL — `.njt-section__title` (base, no modifier)
      Prompt 600 · roman · sentence case. The insight-cluster / long-read voice: insight,
      student-stories, news, any place the page is arguing rather than selling. Chosen so a
      body of Thai running text is not preceded by an all-caps italic shout every 80px.

   Both use ONE size clamp (--text-display). Register changes voice, never scale — that is
   what keeps 18 routes reading as one institution.
───────────────────────────────────────── */
.njt-section__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-display);       /* clamp(28px, 3vw, 44px) */
  color: var(--text-white);
  line-height: var(--lh-display);        /* language-aware leading — tokens.css + §38 */
}
.njt-section__title--display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ── Composable glass-surface helpers (re-base card classes onto one of these) ── */
.surface-glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: var(--surface-border);
}
.surface-solid {
  background: var(--surface-solid);
  border: var(--surface-border);
}
.surface-feature {
  background: var(--surface-feature);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,215,0,0.15);
}

/* ── Canonical chip — variants --gold / --magenta / --ghost (6px 14px, pill) ── */
.njt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.njt-chip--gold {
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(255,215,0,0.35);
}
.njt-chip--magenta {
  background: rgba(212,0,121,0.15);
  color: var(--magenta-300);
  border: 1px solid rgba(212,0,121,0.4);
}
.njt-chip--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text-white-80);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ── Lucide bullet helper (replaces emoji/dingbat ::before content; HOUSE-RULES §6).
   Inherits colour via currentColor; size via font-size. ── */
.lucide-check {
  display: inline-block;
  width: 1em; height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* ═══════════════════════════════════════
   4. ACTIVITY CARDS
═══════════════════════════════════════ */
.njt-activities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-activity {
  /* Canonical glass surface (identical values to before — now token-driven, SSOT) */
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.njt-activity:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(255,215,0,0.6);
}
.njt-activity__img {
  position: relative;
  height: 240px;
  overflow: hidden;
}
.njt-activity__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.njt-activity:hover .njt-activity__img img {
  transform: scale(1.05);
}
.njt-activity__badge {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  color: white;
  z-index: 2;
}
.njt-activity__body {
  padding: 24px;
}
.njt-activity__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-white);
  margin-bottom: 8px;
}
.njt-activity__desc {
  font-size: 14px;
  color: var(--text-white-60);
  line-height: 1.6;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.njt-activity__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.njt-activity__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.njt-activity__price-num {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold);
  line-height: 1;
}
.njt-activity__price-unit {
  font-size: 13px;
  color: var(--text-white-60);
}
.njt-activity__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--btn-primary-bg);
  color: #000;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  text-decoration: none;
  transform: skew(-15deg); /* unified to the btn-cta system skew (was -12deg) */
  transition: all var(--transition);
}
.njt-activity__cta span,
.njt-activity__cta > * {
  transform: skew(15deg);
}
.njt-activity__cta:hover {
  background: var(--btn-hover-bg);
  color: white;
  box-shadow: var(--shadow-btn-hover);
}

/* ── Secondary Activities ── */
.njt-secondary-activities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: var(--content-w);
  margin: 32px auto 0;
}
.njt-secondary {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  transition: all var(--transition);
}
.njt-secondary:hover {
  border-color: var(--gold-dim);
  background: rgba(255,215,0,0.04);
}
.njt-secondary__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  color: var(--gold);
}
.njt-secondary__info { flex: 1; }
.njt-secondary__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-white);
  margin-bottom: 4px;
}
.njt-secondary__desc {
  font-size: 13px;
  color: var(--text-white-60);
  margin-bottom: 4px;
}
.njt-secondary__price {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
}

/* ── View All Link ── */
.njt-section__view-all {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.njt-view-all-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--gold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap var(--transition);
}
.njt-view-all-link:hover {
  gap: 14px;
}

/* ═══════════════════════════════════════
   5. FEATURES (WHY US) GRID
═══════════════════════════════════════ */
.njt-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-feature {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 32px;
  transition: all var(--transition);
}
.njt-feature:hover {
  border-color: rgba(255,215,0,0.6);
  box-shadow: 0 8px 32px rgba(255,215,0,0.1);
  transform: translateY(-4px);
}
.njt-feature__icon {
  width: 48px; height: 48px;
  color: var(--gold);
  margin-bottom: 16px;
}
.njt-feature__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-white);
  margin-bottom: 8px;
}
.njt-feature__desc {
  font-size: 14px;
  color: var(--text-white-80);
  line-height: 1.6;
}

/* ═══════════════════════════════════════
   6. COACH CARDS
═══════════════════════════════════════ */
.njt-coaches__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-coach {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.njt-coach:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: rgba(255,215,0,0.6);
  box-shadow: 0 8px 32px rgba(255,215,0,0.1);
}
.njt-coach__img {
  height: 320px;
  overflow: hidden;
  position: relative;
}
.njt-coach__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(40%);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.njt-coach:hover .njt-coach__img img {
  filter: grayscale(0);
  transform: scale(1.05);
}
.njt-coach__img::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(26,5,16,0.9));
}
.njt-coach__exp {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(var(--blur-chip));
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  padding: 8px 14px;
  text-align: center;
  z-index: 2;
}
.njt-coach__exp-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
}
.njt-coach__exp-label {
  font-size: 10px;
  color: var(--text-white-60);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.njt-coach__info {
  padding: 24px;
}
.njt-coach__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-white);
  margin-bottom: 4px;
}
.njt-coach__fullname {
  font-size: 13px;
  color: var(--text-white-40);
  margin-bottom: 8px;
}
.njt-coach__title {
  font-size: 14px;
  color: var(--gold);
  line-height: 1.4;
}

/* ═══════════════════════════════════════
   7. TESTIMONIALS
═══════════════════════════════════════ */
.njt-testimonials-carousel {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  min-height: 200px;
  overflow-anchor: none;
}
.njt-testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease; /* entrance ≤400ms */
  pointer-events: none;
}
.njt-testimonial.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.njt-testimonial__quote {
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--text-white-80);
  line-height: 1.7;
  text-align: center;
  position: relative;
  padding: 0 40px;
  margin-bottom: 24px;
}
.njt-testimonial__quote::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 72px;
  color: var(--gold);
  opacity: 0.4;
  position: absolute;
  top: -24px; left: 0;
  line-height: 1;
}
.njt-testimonial__author {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--gold);
}
.njt-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.njt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}
.njt-dot.is-active {
  background: var(--gold);
  width: 28px;
  border-radius: 5px;
}
/* Gate-6: carousel pagers are real <button>s — replace browser-default hover/focus with
   designed states consistent with the gold-accent system. Hover previews the gold it
   will become; focus is the sitewide gold ring (offset preserves the dot's round shape). */
.njt-dot:hover:not(.is-active) {
  background: rgba(255, 215, 0, 0.6);
  transform: scale(1.15);
}
.njt-dot:focus-visible {
  outline: 2px solid var(--racing-yellow);
  outline-offset: 3px;
}

/* ── Trust Logo Ticker ── */
.njt-ticker {
  padding: 32px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 48px;
}
.njt-ticker__label {
  text-align: center;
  font-size: 12px;
  color: var(--text-white-40);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 20px;
}
.njt-ticker__track {
  display: flex;
  width: max-content;
  animation: tickerScroll 30s linear infinite;
}
.njt-ticker__track:hover {
  animation-play-state: paused;
}
.njt-ticker__item {
  flex-shrink: 0;
  padding: 0 32px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════
   8. COFFEE TRACK SPOTLIGHT
═══════════════════════════════════════ */
.njt-coffee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-coffee__content { }
.njt-coffee__overline {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 12px;
}
.njt-coffee__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  color: var(--text-white);
  margin-bottom: 20px;
}
.njt-coffee__desc {
  font-size: 16px;
  color: var(--text-white-80);
  line-height: 1.7;
  margin-bottom: 24px;
}
.njt-coffee__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.njt-coffee__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.njt-coffee__image::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* ═══════════════════════════════════════
   9. LOCATION CTA
═══════════════════════════════════════ */
.njt-location {
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-location__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.njt-location__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 360px;
  background: var(--black-card);
  position: relative;
}
/* CANONICAL MAP PATTERN (R2 P2a): the dark filter belongs ONLY on the map
   iframe/tiles — NEVER on a photographic poster (inverting a real aerial renders
   it as a negative: white palms, pink sky — taste Gate 1, defect #1). Any poster
   fallback layer behind a map gets a dark SCRIM (rgba plum), not --map-filter.
   Page owners with a poster ::before/::after must drop the filter there — see the
   R2 report flags (coffee-track.css:1063, contact.css `.njt-map-premium__visual::after`). */
.njt-location__map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: var(--map-filter); /* iframe only — aligned to the shared token */
}
.njt-location__info { }
.njt-location__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  color: var(--text-white);
  margin-bottom: 24px;
}
.njt-location__detail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.njt-location__detail-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  color: var(--gold);
  margin-top: 2px;
}
.njt-location__detail-text {
  font-size: 15px;
  color: var(--text-white-80);
  line-height: 1.5;
}
.njt-location__detail-text strong {
  color: var(--text-white);
  display: block;
  margin-bottom: 2px;
}
.njt-location__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ═══════════════════════════════════════
   10. FINAL CTA BANNER
═══════════════════════════════════════ */
.njt-final-cta {
  position: relative;
  padding: 100px 24px;
  text-align: center;
  overflow: hidden;
}
.njt-final-cta__bg {
  position: absolute;
  inset: 0;
  background: url('../assets/01-hero/HERO-001_golden-hour-track-panorama.jpg') center/cover no-repeat; /* self-hosted — V3 integrator fix (was external Unsplash, HOUSE-RULES §12) */
  z-index: 1;
}
.njt-final-cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,0,121,0.85) 0%, rgba(42,0,24,0.9) 100%);
}
.njt-final-cta__content {
  position: relative;
  z-index: 2;
}
.njt-final-cta__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 44px;
  color: var(--text-white);
  margin-bottom: 12px;
}
.njt-final-cta__subtitle {
  font-size: 20px;
  color: var(--text-white-80);
  margin-bottom: 36px;
}
.njt-final-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════
   11. MOBILE STICKY CTA
═══════════════════════════════════════ */
.njt-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(42,0,24,0.95);
  backdrop-filter: blur(var(--blur-card));
  padding: 12px 16px;
  border-top: 1px solid rgba(255,215,0,0.2);
  transform: translateY(100%);
  transition: transform var(--transition);
}
.njt-mobile-cta.is-visible {
  transform: translateY(0);
}
.njt-mobile-cta__inner {
  display: flex;
  gap: 10px;
}
.njt-mobile-cta__inner .btn-cta {
  flex: 1;
  justify-content: center;
  font-size: 14px;
  padding: 12px 16px;
}

/* ═══════════════════════════════════════
   12. RESPONSIVE OVERRIDES
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  /* .njt-hero__title font-size override REMOVED (GOAL-V4 §G6): --text-display-xl is a clamp
     and already resolves to 56px here. A hardcoded 52px re-forked the one display clamp. */
  .njt-activities__grid { grid-template-columns: 1fr 1fr; }
  .njt-features__grid { grid-template-columns: 1fr 1fr; }
  .njt-coaches__grid { grid-template-columns: 1fr 1fr; }
  .njt-section__title { font-size: 32px; }
}

@media (max-width: 767px) {
  .njt-hero {
    /* N2 fix (two parts): (1) the diagonal clip amputated the stacked CTAs; (2) a FIXED
       85vh height + overflow:hidden still clipped the last CTA because the grown V3 content
       stack (title + subtitle + 2 stacked CTAs + status chips) overflows 85vh at 360.
       height:auto + min-height lets the hero grow to fit its content so nothing is clipped
       (same approach the codebase already uses for .njt-hero--cinematic). Straight bottom
       edge on mobile; the diagonal returns ≥768 (verified clean). */
    height: auto;
    min-height: 85vh;
    clip-path: none;
  }
  .njt-hero__accent-line {
    /* Flatten the accent bar to a straight 3px band so it doesn't cross content diagonally. */
    clip-path: polygon(0 calc(100% - 3px), 100% calc(100% - 3px), 100% 100%, 0 100%);
  }
  /* font-size overrides dropped (GOAL-V4 §G6) — the clamps already floor at 40px / 17px here.
     Only the measure caps stay, so nothing can push past a 360 viewport. */
  .njt-hero__title { max-width: 100%; }
  .njt-hero__subtitle { max-width: 100%; }
  .njt-hero__tagline { font-size: 16px; letter-spacing: 4px; }
  .njt-hero__content { padding: 64px 20px 48px; }
  .njt-hero__ctas {
    flex-direction: column;
    gap: 12px;
  }
  .njt-hero__ctas .btn-cta { justify-content: center; }

  .njt-stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .njt-stat__number { font-size: 40px; }

  .njt-section {
    padding: var(--section-pad-mob) 20px;
  }
  .njt-section__title { font-size: 28px; }
  .njt-section__header { margin-bottom: 36px; }

  .njt-activities__grid { grid-template-columns: 1fr; }
  .njt-secondary-activities { grid-template-columns: 1fr; }
  .njt-features__grid { grid-template-columns: 1fr; }
  .njt-coaches__grid { grid-template-columns: 1fr; }

  .njt-coffee {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .njt-coffee__title { font-size: 28px; }

  .njt-location__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .njt-location__map { height: 240px; }
  .njt-location__title { font-size: 28px; }

  .njt-final-cta { padding: 60px 20px; }
  .njt-final-cta__title { font-size: 28px; }
  .njt-final-cta__subtitle { font-size: 16px; }
  .njt-final-cta__buttons { flex-direction: column; }

  .njt-mobile-cta { display: block; }

  .njt-testimonial__quote {
    font-size: 17px;
    padding: 0 20px;
  }
}

/* ═══════════════════════════════════════
   13. PAGE HERO (sub-pages)
═══════════════════════════════════════ */
.njt-page-hero {
  position: relative;
  min-height: max(360px, 50vh);   /* A14: was `height: 50vh` — see the hero shell rule above */
  display: flex;
  align-items: safe flex-end;   /* A14 — see the hero shell rule */
  overflow: hidden;
  background: var(--black);
  padding-top: calc(var(--header-h, 80px) + 16px);
  padding-bottom: 48px;
}
.njt-page-hero__bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  z-index: 1;
}
.njt-page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,0,24,0.4) 0%, rgba(42,0,24,0.85) 100%);
  z-index: 2;
}
.njt-page-hero__content {
  position: relative;
  z-index: 3;
  /* A13 — this was `--content-w` (1200) + 24px, i.e. a 1200px rail inside a 1400px
     page. Measured 68px inside the header content rail at 1440 and 1920 (the
     operator's original coaches complaint, still shipping). HOUSE-RULES §9: every
     section matches the header — 1400 + 32px. */
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}
.njt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-white-60);
  margin-bottom: 16px;
}
.njt-breadcrumb a {
  color: var(--text-white-60);
  text-decoration: none;
  transition: color var(--transition);
}
.njt-breadcrumb a:hover { color: var(--gold); }
.njt-breadcrumb__sep { color: var(--text-white-40); }
.njt-breadcrumb__current { color: var(--gold); }
.njt-page-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 48px;
  line-height: var(--lh-display);   /* language-aware leading — tokens.css + §38 */
  color: var(--text-white);
  margin-bottom: 12px;
}
.njt-page-hero__subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--gold);
  max-width: 600px;
}
.njt-page-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* ═══════════════════════════════════════
   14. STICKY SUB-NAVIGATION
═══════════════════════════════════════ */
.njt-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 100;
  background: rgba(42,0,24,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.njt-subnav::-webkit-scrollbar { display: none; }
.njt-subnav__list {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: var(--content-w);
  margin: 0 auto;
  list-style: none;
}
.njt-subnav__item a {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-white-60);
  padding: 14px 20px;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all var(--transition);
}
.njt-subnav__item a:hover,
.njt-subnav__item a.is-active {
  color: var(--text-white);
  border-bottom-color: var(--racing-yellow);
}

/* ═══════════════════════════════════════
   15. ACTIVITY DETAIL BLOCK
═══════════════════════════════════════ */
.njt-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-detail--reverse { direction: rtl; }
.njt-detail--reverse > * { direction: ltr; }
.njt-detail__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.njt-detail__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 16/10;
}
.njt-detail__badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  color: white;
  margin-bottom: 12px;
}
.njt-detail__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  color: var(--text-white);
  margin-bottom: 16px;
}
.njt-detail__desc {
  font-size: 16px;
  color: var(--text-white-80);
  line-height: 1.7;
  margin-bottom: 24px;
}
.njt-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.njt-spec {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.njt-spec__icon {
  width: 20px; height: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.njt-spec__label {
  font-size: 12px;
  color: var(--text-white-40);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.njt-spec__value {
  font-size: 14px;
  color: var(--text-white-80);
}

/* ═══════════════════════════════════════
   16. PRICING CARD
═══════════════════════════════════════ */
.njt-pricing-card {
  background: var(--black-card);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 24px;
}
.njt-pricing-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.njt-pricing-card__item:last-child { border-bottom: none; }
.njt-pricing-card__label {
  font-size: 14px;
  color: var(--text-white-80);
}
.njt-pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.njt-pricing-card__amount {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--gold);
  line-height: 1;
}
.njt-pricing-card__unit {
  font-size: 13px;
  color: var(--text-white-60);
}
.njt-pricing-card__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,215,0,0.15);
  color: var(--gold);
  margin-left: 8px;
}
.njt-pricing-card__includes {
  font-size: 13px;
  color: var(--text-white-60);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.njt-pricing-card__cta {
  margin-top: 16px;
}
.njt-pricing-card__cta .btn-cta { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════
   17. PRICING TABLE
═══════════════════════════════════════ */
.njt-pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--black-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.njt-pricing-table thead {
  background: var(--bg-gradient);
}
.njt-pricing-table th {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-white);
  padding: 14px 20px;
  text-align: left;
}
.njt-pricing-table td {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-white-80);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.njt-pricing-table tr:last-child td { border-bottom: none; }
.njt-pricing-table tr:hover td {
  background: rgba(255,215,0,0.03);
}
.njt-pricing-table__price {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
}
.njt-pricing-table__note {
  font-size: 13px;
  color: var(--text-white-40);
}

/* ═══════════════════════════════════════
   18. COMPARISON TABLE
═══════════════════════════════════════ */
.njt-comparison {
  width: 100%;
  border-collapse: collapse;
  max-width: var(--content-w);
  margin: 0 auto;
  background: var(--black-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.njt-comparison thead th {
  background: rgba(212,0,121,0.2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-white);
  padding: 16px 20px;
  text-align: center;
}
.njt-comparison thead th:first-child { text-align: left; }
.njt-comparison td {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text-white-80);
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.njt-comparison td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text-white);
}
.njt-comparison tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

/* ═══════════════════════════════════════
   19. ICON ROW (What's Included)
═══════════════════════════════════════ */
.njt-icon-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: var(--content-w);
  margin: 0 auto;
  text-align: center;
}
.njt-icon-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.njt-icon-row__icon {
  width: 56px; height: 56px;
  color: var(--gold);
}
.njt-icon-row__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-white);
}

/* ═══════════════════════════════════════
   20. TWO-COLUMN CHECKLIST
═══════════════════════════════════════ */
.njt-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-checklist__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-white);
  margin-bottom: 20px;
}
.njt-checklist__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.njt-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-white-80);
  line-height: 1.6;
}
.njt-checklist__icon {
  width: 18px; height: 18px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ═══════════════════════════════════════
   21. CROSS-SELL BANNER
═══════════════════════════════════════ */
.njt-cross-sell {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(212,0,121,0.1);
  border: 1px solid rgba(212,0,121,0.25);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-top: 32px;
  transition: all var(--transition);
}
.njt-cross-sell:hover {
  background: rgba(212,0,121,0.15);
  border-color: rgba(212,0,121,0.4);
}
.njt-cross-sell__icon {
  width: 40px; height: 40px;
  color: var(--gold);
  flex-shrink: 0;
}
.njt-cross-sell__text {
  font-size: 15px;
  color: var(--text-white-80);
}
.njt-cross-sell__text a {
  color: var(--gold);
  text-decoration: none;
}

/* ═══════════════════════════════════════
   22. HORIZONTAL TIMELINE / PATHWAY
═══════════════════════════════════════ */
.njt-pathway {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: var(--content-w);
  margin: 0 auto;
  position: relative;
}
.njt-pathway__step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 16px;
}
.njt-pathway__connector {
  position: absolute;
  top: 28px;
  left: calc(50% + 28px);
  right: calc(-50% + 28px);
  height: 3px;
  background: linear-gradient(90deg, var(--magenta), var(--racing-yellow));
  z-index: 0;
}
.njt-pathway__step:last-child .njt-pathway__connector { display: none; }
.njt-pathway__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: white;
}
.njt-pathway__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-white);
  margin-bottom: 4px;
}
.njt-pathway__age {
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 8px;
}
.njt-pathway__desc {
  font-size: 13px;
  color: var(--text-white-60);
  line-height: 1.5;
}
.njt-pathway__note {
  text-align: center;
  font-size: 13px;
  color: var(--text-white-40);
  margin-top: 32px;
}

/* ═══════════════════════════════════════
   23. COURSE CARDS
═══════════════════════════════════════ */
.njt-courses__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-course-card {
  background: var(--black-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.njt-course-card:hover {
  border-color: rgba(255,215,0,0.3);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(255,215,0,0.1);
}
.njt-course-card__image {
  height: 200px;
  overflow: hidden;
  position: relative;
  background: rgba(212,0,121,0.2);
}
.njt-course-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.njt-course-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: var(--black);
  z-index: 2;
}
.njt-course-card__body { padding: 24px; }
.njt-course-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  color: var(--text-white);
  margin-bottom: 4px;
}
.njt-course-card__subtitle {
  font-size: 14px;
  color: var(--text-white-60);
  margin-bottom: 16px;
}
.njt-course-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.njt-course-card__duration,
.njt-course-card__price-tag {
  font-size: 13px;
  color: var(--text-white-60);
}
.njt-course-card__price {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.njt-course-card__savings {
  font-size: 13px;
  color: var(--racing-yellow);
  font-weight: 600;
}
.njt-course-card__includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.njt-course-card__includes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-white-60);
}
.njt-course-card__includes li::before {
  content: '';
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: var(--gold);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.njt-course-card__cta {
  margin-top: 16px;
}
.njt-course-card__cta .btn-cta { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════
   24. FAQ ACCORDION
═══════════════════════════════════════ */
.njt-faq {
  max-width: 800px;
  margin: 0 auto;
}
.njt-faq__item {
  background: var(--black-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
}
.njt-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-white);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition);
}
.njt-faq__question:hover { color: var(--gold); }
.njt-faq__icon {
  width: 24px; height: 24px;
  color: var(--gold);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.njt-faq__item.is-open .njt-faq__icon {
  transform: rotate(45deg);
}
.njt-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.njt-faq__item.is-open .njt-faq__answer {
  max-height: 500px;
}
.njt-faq__answer-inner {
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--text-white-80);
  line-height: 1.7;
}

/* ═══════════════════════════════════════
   25. NUMBERED STEPS
═══════════════════════════════════════ */
.njt-steps {
  max-width: 700px;
  margin: 0 auto;
}
.njt-step {
  display: flex;
  gap: 24px;
  position: relative;
  padding-bottom: 32px;
}
.njt-step:last-child { padding-bottom: 0; }
.njt-step::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 56px;
  bottom: 0;
  width: 2px;
  background: rgba(212,0,121,0.3);
}
.njt-step:last-child::before { display: none; }
.njt-step__number {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(212,0,121,0.2);
  border: 2px solid var(--magenta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--magenta);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.njt-step__content { flex: 1; padding-top: 8px; }
.njt-step__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-white);
  margin-bottom: 6px;
}
.njt-step__body {
  font-size: 15px;
  color: var(--text-white-80);
  line-height: 1.6;
}

/* ═══════════════════════════════════════
   26. GALLERY GRID
═══════════════════════════════════════ */
.njt-gallery__filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.njt-gallery__filter {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-white-60);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.njt-gallery__filter:hover,
.njt-gallery__filter.is-active {
  background: rgba(255,215,0,0.15);
  border-color: var(--gold);
  color: var(--gold);
}
.njt-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 4/3;
}
.njt-gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.njt-gallery__item:hover img {
  transform: scale(1.05);
}
.njt-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 60%, rgba(0,0,0,0.6));
  opacity: 0;
  transition: opacity var(--transition);
}
.njt-gallery__item:hover::after { opacity: 1; }

/* ═══════════════════════════════════════
   27. CONTACT GRID
═══════════════════════════════════════ */
.njt-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-contact-card {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  transition: all var(--transition);
}
.njt-contact-card:hover {
  border-color: rgba(255,215,0,0.4);
  transform: translateY(-4px);
}
.njt-contact-card__icon {
  width: 48px; height: 48px;
  color: var(--gold);
  margin: 0 auto 16px;
}
.njt-contact-card__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-white);
  margin-bottom: 8px;
}
.njt-contact-card__value {
  font-size: 15px;
  color: var(--text-white-80);
  line-height: 1.5;
}
.njt-contact-card__value a {
  color: var(--gold);
  text-decoration: none;
}

/* ═══════════════════════════════════════
   28. CONTACT FORM
═══════════════════════════════════════ */
.njt-form {
  max-width: 600px;
  margin: 0 auto;
}
.njt-form__group {
  margin-bottom: 20px;
}
.njt-form__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-white-80);
  margin-bottom: 8px;
}
.njt-form__input,
.njt-form__select,
.njt-form__textarea {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--transition);
}
.njt-form__input:focus,
.njt-form__select:focus,
.njt-form__textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.njt-form__textarea { min-height: 120px; resize: vertical; }
.njt-form__submit {
  margin-top: 8px;
}

/* ═══════════════════════════════════════
   29. COACH PROFILE (full page)
═══════════════════════════════════════ */
.njt-coach-profile {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
  max-width: var(--content-w);
  margin: 0 auto 48px;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.njt-coach-profile__image {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.njt-coach-profile__image img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}
.njt-coach-profile__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--text-white);
  margin-bottom: 4px;
}
.njt-coach-profile__fullname {
  font-size: 14px;
  color: var(--text-white-40);
  margin-bottom: 12px;
}
.njt-coach-profile__role {
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 16px;
}
.njt-coach-profile__bio {
  font-size: 15px;
  color: var(--text-white-80);
  line-height: 1.7;
  margin-bottom: 20px;
}
.njt-coach-profile__credentials {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.njt-coach-profile__credentials li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-white-60);
}
.njt-coach-profile__credentials li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--gold);
  -webkit-mask: var(--icon-award) center / contain no-repeat;
  mask: var(--icon-award) center / contain no-repeat;
}

/* ═══════════════════════════════════════
   30. NEWS/EVENT CARDS
═══════════════════════════════════════ */
.njt-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-news-card {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}
.njt-news-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,215,0,0.4);
  box-shadow: 0 8px 32px rgba(255,215,0,0.1);
}
.njt-news-card__image {
  height: 200px;
  overflow: hidden;
  position: relative;
}
.njt-news-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.njt-news-card__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  color: white;
}
.njt-news-card__body { padding: 20px; }
.njt-news-card__date {
  font-size: 12px;
  color: var(--text-white-40);
  margin-bottom: 8px;
}
.njt-news-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--text-white);
  margin-bottom: 8px;
  line-height: 1.4;
}
.njt-news-card__excerpt {
  font-size: 14px;
  color: var(--text-white-60);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════
   31. SPONSOR GRID
═══════════════════════════════════════ */
.njt-sponsors__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-sponsor-card {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 32px;
  text-align: center;
  transition: all var(--transition);
}
.njt-sponsor-card:hover {
  border-color: rgba(255,215,0,0.4);
  transform: translateY(-4px);
}
.njt-sponsor-card__logo {
  height: 60px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
}
.njt-sponsor-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-white);
  margin-bottom: 4px;
}
.njt-sponsor-card__desc {
  font-size: 13px;
  color: var(--text-white-60);
}

/* ═══════════════════════════════════════
   32. TRACK INFO
═══════════════════════════════════════ */
.njt-track-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-track-spec {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
}
.njt-track-spec__value {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.njt-track-spec__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-white-80);
}

/* ═══════════════════════════════════════
   33. CORPORATE PACKAGES
═══════════════════════════════════════ */
.njt-packages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-package-card {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
}
.njt-package-card--featured {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(255,215,0,0.1);
}
.njt-package-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,215,0,0.6);
}
.njt-package-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--text-white);
  margin-bottom: 8px;
}
.njt-package-card__price {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.njt-package-card__unit {
  font-size: 14px;
  color: var(--text-white-60);
  margin-bottom: 20px;
}
.njt-package-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  text-align: left;
}
.njt-package-card__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-white-80);
}
.njt-package-card__features li::before {
  content: '';
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: var(--gold);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* ═══════════════════════════════════════
   SUB-PAGE RESPONSIVE OVERRIDES
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  .njt-page-hero__title { font-size: 36px; }
  .njt-detail { grid-template-columns: 1fr; gap: 32px; }
  .njt-detail--reverse { direction: ltr; }
  .njt-courses__grid { grid-template-columns: 1fr 1fr; }
  .njt-news__grid { grid-template-columns: 1fr 1fr; }
  .njt-contact-cards { grid-template-columns: 1fr 1fr; }
  .njt-sponsors__grid { grid-template-columns: repeat(3, 1fr); }
  .njt-track-specs { grid-template-columns: 1fr 1fr; }
  .njt-packages__grid { grid-template-columns: 1fr 1fr; }
  .njt-coach-profile { grid-template-columns: 200px 1fr; gap: 32px; }
}

@media (max-width: 767px) {
  .njt-page-hero {
    min-height: max(280px, 40vh);   /* A14 */
    padding-bottom: 32px;
  }
  .njt-page-hero__title { font-size: 28px; }
  .njt-page-hero__subtitle { font-size: 15px; }
  .njt-page-hero__ctas { flex-direction: column; }
  .njt-page-hero__ctas .btn-cta { justify-content: center; }

  .njt-detail { grid-template-columns: 1fr; gap: 24px; }
  .njt-detail--reverse { direction: ltr; }
  .njt-detail__title { font-size: 28px; }
  .njt-specs { grid-template-columns: 1fr; }

  .njt-courses__grid { grid-template-columns: 1fr; }
  .njt-course-card__price { font-size: 28px; }

  .njt-pathway { flex-direction: column; gap: 24px; }
  .njt-pathway__connector {
    position: absolute;
    top: 56px;
    left: 28px;
    right: auto;
    width: 2px;
    height: calc(100% - 28px);
  }
  .njt-pathway__step { text-align: left; display: flex; gap: 16px; }
  .njt-pathway__icon { margin: 0; }

  .njt-icon-row { grid-template-columns: 1fr 1fr; gap: 24px; }
  .njt-checklist-grid { grid-template-columns: 1fr; gap: 32px; }
  .njt-comparison { font-size: 12px; }
  .njt-comparison td,
  .njt-comparison thead th { padding: 10px 12px; }

  .njt-gallery__grid { grid-template-columns: 1fr 1fr; }
  .njt-contact-cards { grid-template-columns: 1fr; }
  .njt-news__grid { grid-template-columns: 1fr; }
  .njt-sponsors__grid { grid-template-columns: 1fr 1fr; }
  .njt-track-specs { grid-template-columns: 1fr 1fr; }
  .njt-packages__grid { grid-template-columns: 1fr; }
  .njt-coach-profile { grid-template-columns: 1fr; }
  .njt-coach-profile__image img { aspect-ratio: 16/9; }
}

/* ═══════════════════════════════════════
   34. SAFETY SECTION — Command Center Design
   $250K Campaign-Level Enhancement
═══════════════════════════════════════ */

/* Section wrapper with ambient depth */
.njt-safety {
  position: relative;
  overflow: hidden;
}
.njt-safety::before,
.njt-safety::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
.njt-safety::before {
  top: -200px;
  left: -200px;
  background: rgba(212, 0, 121, 0.08);
}
.njt-safety::after {
  bottom: -200px;
  right: -200px;
  background: rgba(255, 215, 0, 0.06);
}
.njt-safety > .container {
  position: relative;
  z-index: 1;
}

/* Carbon fiber texture overlay */
.njt-safety__texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 1px,
      transparent 1px,
      transparent 3px
    );
  pointer-events: none;
  z-index: 0;
}

/* ── Safety Certification Badge ── */
.njt-safety-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.njt-safety-badge__icon {
  width: 24px;
  height: 24px;
  color: var(--gold);
}
.njt-safety-badge__text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Bento Grid for Safety Pillars ── */
.njt-safety-pillars {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

/* ── Individual Pillar Card ── */
.njt-safety-pillar {
  position: relative;
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.njt-safety-pillar:hover {
  border-color: rgba(212, 0, 121, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(212, 0, 121, 0.1);
}

/* Hero card (first pillar — equipment) */
.njt-safety-pillar--hero {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, rgba(212, 0, 121, 0.12) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(42, 0, 24, 0.4) 100%);
  border-left: 4px solid var(--magenta);
}
.njt-safety-pillar--hero .njt-safety-pillar__icon-wrap {
  width: 72px;
  height: 72px;
  background: rgba(212, 0, 121, 0.15);
  border: 1px solid rgba(212, 0, 121, 0.4);
}

/* Standard cards */
.njt-safety-pillar--standard {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(42, 0, 24, 0.3) 100%);
  border-left: 3px solid rgba(212, 0, 121, 0.5);
}

/* Pillar system code label */
.njt-safety-pillar__sys-code {
  position: absolute;
  right: 20px;
  top: 16px;
  color: rgba(255, 255, 255, 0.08);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 1px;
}

/* Corner accent */
.njt-safety-pillar__corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-top: 1px solid rgba(212, 0, 121, 0.25);
  border-left: 1px solid rgba(212, 0, 121, 0.25);
  pointer-events: none;
}

/* Pillar content layout */
.njt-safety-pillar__header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

/* Icon wrapper */
.njt-safety-pillar__icon-wrap {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(212, 0, 121, 0.1);
  border: 1px solid rgba(212, 0, 121, 0.3);
  border-radius: var(--radius-md);
  color: var(--magenta);
  transition: all 0.4s ease;
}
.njt-safety-pillar:hover .njt-safety-pillar__icon-wrap {
  background: rgba(212, 0, 121, 0.2);
  box-shadow: 0 0 20px rgba(212, 0, 121, 0.3);
}

/* Shield icon specific animation */
.njt-safety-pillar--hero .njt-safety-pillar__icon-wrap {
  animation: shieldPulse 3s ease-in-out infinite;
}
@keyframes shieldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 0, 121, 0); }
  50% { box-shadow: 0 0 0 8px rgba(212, 0, 121, 0.1); }
}

.njt-safety-pillar__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}
.njt-safety-pillar__desc {
  color: var(--text-white-60);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Equipment list items */
.njt-safety-pillar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.njt-safety-pillar__list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.njt-safety-pillar.is-visible .njt-safety-pillar__list-item {
  opacity: 1;
  transform: translateX(0);
}
.njt-safety-pillar.is-visible .njt-safety-pillar__list-item:nth-child(1) { transition-delay: 0.1s; }
.njt-safety-pillar.is-visible .njt-safety-pillar__list-item:nth-child(2) { transition-delay: 0.2s; }
.njt-safety-pillar.is-visible .njt-safety-pillar__list-item:nth-child(3) { transition-delay: 0.3s; }
.njt-safety-pillar.is-visible .njt-safety-pillar__list-item:nth-child(4) { transition-delay: 0.4s; }
.njt-safety-pillar.is-visible .njt-safety-pillar__list-item:nth-child(5) { transition-delay: 0.5s; }

.njt-safety-pillar__list-marker {
  color: var(--magenta);
  font-size: 0.7rem;
}

/* Briefing "LIVE" indicator */
.njt-safety-pillar__live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(42, 122, 75, 0.15);
  border: 1px solid rgba(42, 122, 75, 0.4);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--green);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: 12px;
}
.njt-safety-pillar__live-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(42, 122, 75, 0.4); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(42, 122, 75, 0); }
}

/* Speed gauge visual */
.njt-speed-gauge {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.njt-speed-gauge__level {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  cursor: default;
}
.njt-speed-gauge__level:hover {
  border-color: rgba(212, 0, 121, 0.4);
  background: rgba(212, 0, 121, 0.08);
}
.njt-speed-gauge__level-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-white-40);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.njt-speed-gauge__level-bar {
  height: 4px;
  border-radius: 2px;
  margin-top: 6px;
}
.njt-speed-gauge__level--beginner .njt-speed-gauge__level-bar {
  background: linear-gradient(90deg, var(--green), transparent);
  width: 40%;
}
.njt-speed-gauge__level--intermediate .njt-speed-gauge__level-bar {
  background: linear-gradient(90deg, var(--amber), transparent);
  width: 70%;
}
.njt-speed-gauge__level--advanced .njt-speed-gauge__level-bar {
  background: linear-gradient(90deg, var(--magenta), transparent);
  width: 100%;
}
.njt-speed-gauge__level-name {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-white-80);
}

/* ── Pull Quote ── */
.njt-safety-quote {
  text-align: center;
  padding: 40px 32px;
  margin: 48px 0;
  position: relative;
}
.njt-safety-quote::before,
.njt-safety-quote::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.njt-safety-quote::before { top: 0; }
.njt-safety-quote::after { bottom: 0; }
.njt-safety-quote__text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 300;
  font-style: italic;
  color: var(--text-white-80);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 8px;
}
.njt-safety-quote__text em {
  color: var(--gold);
  font-style: normal;
}
.njt-safety-quote__attr {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-white-40);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Safety Stats Bar — Telemetry Dashboard ── */
.njt-safety-stats {
  position: relative;
  background: linear-gradient(135deg, rgba(42, 0, 24, 0.5), rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(16px);
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 0, 121, 0.2);
  border-top: 3px solid var(--magenta);
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.njt-safety-stats__grid-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(212, 0, 121, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 0, 121, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.njt-safety-stats__scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
  animation: scanLine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scanLine {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.njt-safety-stats__items {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.njt-safety-stat {
  text-align: center;
  position: relative;
}
.njt-safety-stat::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
.njt-safety-stat:last-child::after { display: none; }

/* Circular progress ring */
.njt-safety-stat__ring {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 12px;
}
.njt-safety-stat__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.njt-safety-stat__ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 3;
}
.njt-safety-stat__ring-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
}
.njt-safety-stat.is-visible .njt-safety-stat__ring-fill {
  stroke-dashoffset: 0;
}
.njt-safety-stat__number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  line-height: 1;
}
.njt-safety-stat__number-suffix {
  font-size: 1rem;
  font-weight: 400;
}
.njt-safety-stat__label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-white);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ── Safety Protocol Timeline ── */
.njt-safety-timeline {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: var(--content-w);
  margin: 0 auto;
}
.njt-safety-timeline__step {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 12px;
}

/* Connecting line */
.njt-safety-timeline__connector {
  position: absolute;
  top: 28px;
  left: calc(50% + 28px);
  right: calc(-50% + 28px);
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 0;
  overflow: hidden;
}
.njt-safety-timeline__connector-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.njt-safety-timeline.is-visible .njt-safety-timeline__connector-fill {
  transform: scaleX(1);
}
.njt-safety-timeline__step:last-child .njt-safety-timeline__connector { display: none; }

/* Step number badge (hexagonal feel with gradient border) */
.njt-safety-timeline__number {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid rgba(212, 0, 121, 0.4);
  border-radius: 12px;
  transform: rotate(0deg);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--magenta);
  position: relative;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.njt-safety-timeline__step:hover .njt-safety-timeline__number {
  border-color: var(--gold);
  color: var(--gold);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}
/* Checkered flag on last step */
.njt-safety-timeline__step:last-child .njt-safety-timeline__number {
  border-color: rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.6));
}

.njt-safety-timeline__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-white);
  margin-bottom: 6px;
}
.njt-safety-timeline__desc {
  font-size: 0.8rem;
  color: var(--text-white-60);
  line-height: 1.5;
  max-width: 180px;
  margin: 0 auto;
}

/* ── Stagger animation delays for timeline ── */
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(1) { animation: fadeInUp 0.4s ease 0.1s both; }
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(2) { animation: fadeInUp 0.4s ease 0.3s both; }
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(3) { animation: fadeInUp 0.4s ease 0.5s both; }
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(4) { animation: fadeInUp 0.4s ease 0.7s both; }
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(5) { animation: fadeInUp 0.4s ease 0.9s both; }

/* Connector fill delays */
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(1) .njt-safety-timeline__connector-fill { transition-delay: 0.2s; }
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(2) .njt-safety-timeline__connector-fill { transition-delay: 0.5s; }
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(3) .njt-safety-timeline__connector-fill { transition-delay: 0.8s; }
.njt-safety-timeline.is-visible .njt-safety-timeline__step:nth-child(4) .njt-safety-timeline__connector-fill { transition-delay: 1.1s; }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .njt-safety-pillars {
    grid-template-columns: 1fr;
  }
  .njt-safety-pillar--hero {
    grid-row: auto;
  }
  .njt-safety-stats__items {
    grid-template-columns: repeat(2, 1fr);
  }
  .njt-safety-stat::after { display: none; }
}
@media (max-width: 767px) {
  .njt-safety-pillars {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .njt-safety-pillar {
    padding: 24px;
  }
  .njt-safety-pillar__list {
    grid-template-columns: 1fr;
  }
  .njt-safety-stats {
    padding: 32px 20px;
  }
  .njt-safety-stats__items {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }
  .njt-safety-stat__ring {
    width: 80px;
    height: 80px;
  }
  .njt-safety-stat__number {
    font-size: 1.4rem;
  }
  .njt-safety-quote__text {
    font-size: 1.2rem;
  }
  .njt-speed-gauge {
    flex-direction: column;
    gap: 8px;
  }
  /* Timeline goes vertical on mobile */
  .njt-safety-timeline {
    flex-direction: column;
    gap: 0;
  }
  .njt-safety-timeline__step {
    display: flex;
    gap: 16px;
    text-align: left;
    padding: 0 0 24px 0;
  }
  .njt-safety-timeline__number {
    margin: 0;
    flex-shrink: 0;
  }
  .njt-safety-timeline__connector {
    position: absolute;
    top: 56px;
    left: 28px;
    right: auto;
    width: 2px;
    height: calc(100% - 28px);
  }
  .njt-safety-timeline__connector-fill {
    transform-origin: top;
    transform: scaleY(0);
  }
  .njt-safety-timeline.is-visible .njt-safety-timeline__connector-fill {
    transform: scaleY(1);
  }
  .njt-safety-timeline__desc {
    max-width: none;
    margin: 0;
  }
}

/* ═══════════════════════════════════════
   27. FACILITY BENTO GRID
   Cinematic asymmetric layout with
   glass-morphism cards & Ken Burns hover
═══════════════════════════════════════ */

/* --- Section wrapper with ambient depth --- */
.njt-facility-section {
  position: relative;
  overflow: hidden;
}
.njt-facility-section__stripe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 40px,
    rgba(255,215,0,1) 40px,
    rgba(255,215,0,1) 42px
  );
  mix-blend-mode: overlay;
}
.njt-facility-section .glow-orb {
  z-index: 0;
}

/* --- Stat bar --- */
.njt-facility-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.njt-facility-stats__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-white-60);
  letter-spacing: 0.02em;
}
.njt-facility-stats__item svg {
  width: 16px;
  height: 16px;
  color: var(--racing-yellow);
  flex-shrink: 0;
}
.njt-facility-stats__divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,215,0,0.3);
  flex-shrink: 0;
}

/* --- Bento grid: 12-column precision layout --- */
.njt-facility-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}
/* Row 1: Racing Track (7 cols) + Training Area (5 cols) */
.njt-facility-card:nth-child(1) { grid-column: 1 / 8; }
.njt-facility-card:nth-child(2) { grid-column: 8 / 13; }
/* Row 2: Pit Lane (5 cols) + Parking (7 cols) */
.njt-facility-card:nth-child(3) { grid-column: 1 / 6; }
.njt-facility-card:nth-child(4) { grid-column: 6 / 13; }
/* Row 3: Coffee Track (7 cols) + Changing (5 cols) */
.njt-facility-card:nth-child(5) { grid-column: 1 / 8; }
.njt-facility-card:nth-child(6) { grid-column: 8 / 13; }

/* --- Card base --- */
.njt-facility-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,215,0,0.08);
  background: linear-gradient(
    135deg,
    rgba(42,0,24,0.85) 0%,
    rgba(26,5,16,0.95) 100%
  );
  backdrop-filter: blur(var(--blur-card));
  -webkit-backdrop-filter: blur(var(--blur-card));
  transition: all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
  display: flex;
  flex-direction: column;
}

/* Card hover */
.njt-facility-card:hover {
  border-color: rgba(255,215,0,0.3);
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.4),
    0 0 30px rgba(255,215,0,0.08),
    inset 0 1px 0 rgba(255,215,0,0.1);
}

/* Racing stripe accent on hover */
.njt-facility-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, var(--racing-yellow), transparent);
  z-index: 4;
  opacity: 0;
  transition: opacity 0.4s ease, width 0.4s ease;
}
.njt-facility-card:hover::before {
  opacity: 1;
  width: 120px;
}

/* --- Card image area --- */
.njt-facility-card__image {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-height: 200px;
}

.njt-facility-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Ken Burns zoom on hover */
.njt-facility-card:hover .njt-facility-card__image img {
  transform: scale(1.08);
}

/* Cinematic gradient overlay for text readability */
.njt-facility-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 20%,
    rgba(42,0,24,0.3) 50%,
    rgba(42,0,24,0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* --- Category icon badge --- */
.njt-facility-card__icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(42,0,24,0.75);
  backdrop-filter: blur(var(--blur-chip));
  -webkit-backdrop-filter: blur(var(--blur-chip));
  border: 1px solid rgba(255,215,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: all 0.4s ease;
}
.njt-facility-card__icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}
.njt-facility-card__icon--yellow svg {
  color: var(--racing-yellow);
}
.njt-facility-card__icon--magenta svg {
  color: var(--magenta);
}
.njt-facility-card__icon--steel svg {
  color: var(--steel-400);
}
.njt-facility-card:hover .njt-facility-card__icon {
  border-color: rgba(255,215,0,0.35);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 12px rgba(255,215,0,0.12);
}

/* --- Card content --- */
.njt-facility-card__content {
  padding: 24px;
  position: relative;
  z-index: 2;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.njt-facility-card__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
  line-height: 1.3;
}
.njt-facility-card--hero .njt-facility-card__title {
  font-size: 1.35rem;
}

.njt-facility-card__description {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-white-60);
  margin: 0;
  line-height: 1.6;
}

/* --- Staggered scroll reveal --- */
.njt-facility-grid .njt-facility-card:nth-child(1) { transition-delay: 0.0s; }
.njt-facility-grid .njt-facility-card:nth-child(2) { transition-delay: 0.1s; }
.njt-facility-grid .njt-facility-card:nth-child(3) { transition-delay: 0.15s; }
.njt-facility-grid .njt-facility-card:nth-child(4) { transition-delay: 0.2s; }
.njt-facility-grid .njt-facility-card:nth-child(5) { transition-delay: 0.25s; }
.njt-facility-grid .njt-facility-card:nth-child(6) { transition-delay: 0.3s; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .njt-facility-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .njt-facility-card:nth-child(1),
  .njt-facility-card:nth-child(2),
  .njt-facility-card:nth-child(3),
  .njt-facility-card:nth-child(4),
  .njt-facility-card:nth-child(5),
  .njt-facility-card:nth-child(6) {
    grid-column: span 1;
  }
  /* Hero cards span full width on tablet */
  .njt-facility-card--hero {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .njt-facility-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .njt-facility-card:nth-child(n) {
    grid-column: 1 / -1;
  }
  .njt-facility-card__image {
    min-height: 180px;
  }
  .njt-facility-card__content {
    padding: 20px;
  }
  .njt-facility-stats {
    gap: 6px;
  }
  .njt-facility-stats__item {
    font-size: 0.78rem;
  }
}

/* ═══════════════════════════════════════
   35. LIVE STATUS BADGE (open / closed)
   Consolidated from coffee-track.css + contact.css (GOAL-V3 R1 integrator, punch 11).
   Base sizing = coffee-track (facility page); contact.css keeps a compact size override.
   @keyframes pulse + --green-bg live in tokens.css (global).
═══════════════════════════════════════ */
.njt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
/* CONVENTIONS #8: neon #4ADE80 could not pass AA as small (13px) badge text on this
   build's surfaces. Sanctioned treatment = green as a SOLID tint with WHITE text inside
   (surface-independent 5.07:1). The rogue #F87171 "closed" state maps to the brand magenta
   tint + white text (5.15:1), matching the V3 precedent that off-token reds → --magenta.
   Both use --text-white ink; the pill colour carries the open/closed signal. */
.njt-status-badge--open {
  background: var(--signal-green);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.njt-status-badge--closed {
  background: var(--magenta);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.njt-status-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-white);
  animation: pulse 2s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .njt-status-badge__dot { animation: none !important; }
}

/* ═══════════════════════════════════════
   36. CAMPAIGN CTA (final "Race to Victory" conversion band)
   De-forked from index / about / training / coaches / activities page CSS
   (GOAL-V3 R1 integrator, punch 2 — Gate-1 consistency). Canonical = the
   token-pure activities/coaches spec (--blur-chrome, --surface-border,
   --font-display, --text-white-* tokens). Panel targets BOTH markup variants:
   `__panel` (coaches/activities/index/about) and a scoped `.glass-panel`
   (training/index/about). Pages keep ONLY genuine overrides (e.g. training's
   fallback still). Keyframes are canonical (njt-cta-*).
═══════════════════════════════════════ */
.njt-campaign-cta {
  position: relative;
  padding: var(--section-pad) 2rem;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--racing-plum);
  overflow: hidden;
}
.njt-campaign-cta__bg { position: absolute; inset: 0; z-index: 0; }
.njt-campaign-cta__bg-video {
  position: absolute; inset: -5%;
  width: 110%; height: 110%;
  object-fit: cover;
  opacity: 0.34;
  mix-blend-mode: luminosity;
  animation: njt-cta-zoom 22s infinite alternate ease-in-out;
}
.njt-campaign-cta__bg-image {
  position: absolute; inset: -5%;
  background: url('../assets/01-hero/HERO-001_golden-hour-track-panorama.jpg') center/cover;
  opacity: 0.3;
  mix-blend-mode: luminosity;
  display: none; /* fallback — hidden when video loads */
}
.njt-campaign-cta__bg-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(42,0,24,0.80) 0%, rgba(42,0,24,0.30) 50%, rgba(42,0,24,0.74) 100%),
    linear-gradient(to right, rgba(42,0,24,0.55) 0%, rgba(42,0,24,0.18) 50%, rgba(42,0,24,0.55) 100%);
}
.njt-campaign-cta__glow {
  position: absolute; width: 58vw; height: 58vw;
  border-radius: 50%; filter: blur(150px);
  z-index: 1; mix-blend-mode: screen; pointer-events: none;
}
.njt-campaign-cta__glow--1 { background: var(--magenta); opacity: 0.24; top: -20%; left: -10%; animation: njt-cta-drift 16s infinite alternate ease-in-out; }
.njt-campaign-cta__glow--2 { background: var(--gold); opacity: 0.19; bottom: -20%; right: -10%; animation: njt-cta-drift 20s infinite alternate-reverse ease-in-out; }
.njt-campaign-cta__kinetic-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 11vw, 15rem);
  font-weight: 900; font-style: italic;
  line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,215,0,0.12);
  white-space: nowrap;
  z-index: 2; pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
.njt-campaign-cta__container { position: relative; z-index: 10; width: 100%; max-width: 900px; }
.njt-campaign-cta__panel,
.njt-campaign-cta .glass-panel {
  background: linear-gradient(135deg, rgba(42,0,24,0.6), rgba(0,0,0,0.4));
  -webkit-backdrop-filter: var(--blur-chrome);
  backdrop-filter: var(--blur-chrome);
  border: var(--surface-border);
  border-radius: var(--radius-lg);
  padding: 4rem 3rem;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.njt-campaign-cta__panel::before,
.njt-campaign-cta .glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--magenta), transparent);
  opacity: 0.9;
}
.njt-campaign-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.05);
  border: var(--surface-border);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 1.75rem;
}
.njt-campaign-cta__badge-dot {
  width: 8px; height: 8px;
  background: var(--signal-green);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(46, 125, 70, 0.8);
  animation: njt-cta-pulse 2s infinite;
}
.njt-campaign-cta__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: var(--lh-display); /* language-aware leading — tokens.css + §38 (was 1.15 → 1.2 → token) */
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gold) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.njt-campaign-cta__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text-white-80);
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.65;
}
.njt-campaign-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.njt-campaign-cta__benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  border-top: var(--surface-border);
  padding-top: 2rem;
}
.njt-campaign-cta__benefit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-white-60);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
}
.njt-campaign-cta__benefit svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }

@keyframes njt-cta-zoom  { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes njt-cta-drift { 0% { transform: translate(0,0); } 100% { transform: translate(10%,10%); } }
@keyframes njt-cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,125,70,0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(46,125,70,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,125,70,0); }
}
@media (max-width: 768px) {
  .njt-campaign-cta { padding: 4rem 1rem; min-height: auto; }
  .njt-campaign-cta__panel,
  .njt-campaign-cta .glass-panel { padding: 3rem 1.5rem; }
  .njt-campaign-cta__actions { flex-direction: column; gap: 1rem; }
  .njt-campaign-cta__actions .btn-cta { width: 100%; justify-content: center; }
  .njt-campaign-cta__title { font-size: 2rem; }
  .njt-campaign-cta__kinetic-text { font-size: clamp(3rem, 12vw, 8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .njt-campaign-cta__bg-video,
  .njt-campaign-cta__glow--1,
  .njt-campaign-cta__glow--2,
  .njt-campaign-cta__badge-dot { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOAL-V3 R2 — SHARED-CORE CONSOLIDATION (canonical additions).
   Additive only: page CSS still carries its own copies (which load later and
   harmlessly win on their own page). Page owners DELETE their clones and switch
   to these canonicals in the page-group rounds that follow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 37. Canonical eyebrow MODIFIERS (extend §CANONICAL SECTIONHEADER).
   Lets page owners retire the ≥13 eyebrow clones onto .njt-section__overline
   while keeping the canonical 13px / 0.2em / uppercase geometry (CONVENTIONS #9b).
   Only the axis that actually varied gets a modifier — NOT size (one size). ── */
.njt-section__overline--soft  { font-weight: 400; }                 /* insight / ct-header / hero 400-weight clones */
.njt-section__overline--white { color: var(--text-white); }          /* about-story / ct-header white clones */
.njt-section__overline--plain { text-transform: none; }              /* ct-header no-uppercase clone */

/* ══ 38. DISPLAY LEADING — ONE MECHANISM, SITEWIDE AUTHORITY ═══════════════════
   Operator directive 2026-08-17: "typography need enhance line height for both
   title of Thai & English language." Rebuilt from the old flat `1.2` floor.

   WHAT CHANGED AND WHY IT IS BUILT LIKE THIS
   The previous version of this block set a flat `line-height: 1.2` on five shared
   classes and its own comment conceded it "does NOT reach page-scoped hero titles"
   — page CSS loads after components.css and a page rule of equal specificity wins.
   That is LESSONS #68 exactly: a defect whose scope is *every route* had no owner,
   so it survived three rounds. The census that replaced the guesswork found **~50
   distinct display-scale heading classes across the 18 routes sitting at exactly
   1.2**, plus 8 numeral/stat classes at 1.00–1.10 (V4R1-3's "chip/value residue").
   Every one of those collides in Thai: measured Thai display ink is 1.357 em, so a
   1.2 em line box overlaps the next line by 0.157 em. See tokens.css for the
   measurement and the two-value rationale.

   MECHANISM
   1. The VALUE lives on `--lh-display` / `--lh-value` in tokens.css and changes
      with `html[lang]`. Thai gets its leading, Latin gets its own. One declaration
      per component, two correct results.
   2. The SELECTORS below are prefixed `html[lang]` purely to raise specificity. That
      is what gives this block authority over a single-class page rule that loads
      later — the fix the old block could not deliver. `html[lang]` also documents
      that these values are language-dependent.
      THE ARITHMETIC (corrected 2026-08-17, A28 — the previous comment said "(0,1,1)"
      for everything, which is true of neither row type and is how the hotel hole went
      unnoticed):
        `html[lang] .some-class`                → (0,2,1)   type+attr+class
        `html[lang] h1, html[lang] h2`          → (0,1,2)   type+attr+type
        `html[lang] .page-scope .some-class`    → (0,3,1)   (the §38b rows)
      So a page rule of ONE class (0,1,0) loses to both nets, and a page rule of TWO
      classes (0,2,0) BEATS the h1/h2 net (0,1,2) while losing to the class rows
      (0,2,1). That two-class-vs-h1 case is exactly the hole `.njt-hero-parallax--hotel
      .hero-title` fell through: it out-ranked the generic net and rendered 1.2 in both
      languages. Fixed by deleting the page hardcode, not by adding a §38b row — if you
      find another, prefer the deletion; a §38b row is the last resort.
   3. `html[lang] h1, html[lang] h2` is the generic net: on this build **every** h1
      and h2 is a display heading (measured: only 4 h1/h2 instances sitewide render
      below 24px, at 360). h3 is deliberately NOT in the net — 37 h3 variants are
      sub-24px card titles whose 1.3–1.4 leading is already correct and would be
      *tightened* by the Latin display value. The handful of display-scale h3/span
      /div classes are therefore named explicitly.

   FOR PAGE OWNERS
   Deleting your own `line-height` hardcode on any selector named here is a NO-OP —
   this block already governs it. Please do delete it; each deletion lets a line come
   out of this block. Do NOT add a new heading line-height in a page file.
   Rows marked (0,2,1) exist only because a page rule out-specifies the generic net.
══════════════════════════════════════════════════════════════════════════════ */

/* ── 38a. Display register — headings. (0,1,1) ── */
html[lang] h1,
html[lang] h2,
html[lang] .njt-hero__title,
html[lang] .njt-page-hero__title,
html[lang] .njt-section__title,
html[lang] .njt-section__title--display,
html[lang] .njt-campaign-cta__title,
html[lang] .njt-ct-header__title,
html[lang] .njt-journey__name,
html[lang] .njt-showroom__name,          /* activities.css 1.10 */
html[lang] .njt-special-card__name,      /* coffee-track.css 1.10 */
html[lang] .njt-activity-card__title,
html[lang] .njt-coach-card__name,
html[lang] .coach-profile__name,
html[lang] .njt-official-site-banner__heading,
html[lang] .insight-subscribe__title,
html[lang] .njt-bento-card__title,
html[lang] .tc-standards__title,
html[lang] .spec-card__value,
html[lang] .vspec__story-line { line-height: var(--lh-display); }
/* .spec-card__value is a NUMERAL slot by name but renders a wrapping Thai phrase
   ("ขึ้น-ลงสไตล์ยุโรป", 2 lines at 360) — measured ink 1.393 em, the site's worst
   case. It sits in the display register, not the value register. */

/* ── 38b. Page rules that out-specify 38a. These rows are (0,3,1). ── */
html[lang] .coaches-hero .njt-page-hero__title { line-height: var(--lh-display); }  /* coaches.css 1.05 */
/* The racing-team h1 is the team's Latin wordmark in BOTH locales — the Thai
   payload is the same "EEST NJT PTT Lubricants Racing Team" string — so it never
   sets Thai ink and the 1.40 TH display leading buys nothing here. At 88px over
   three lines that leading opened ~106px gaps; 0.95 sets it as one block. Verified
   no Thai glyphs render in this slot before tightening. */
html[lang] .njt-hero--racing-team .njt-hero__title { line-height: 0.95; }  /* racing-team.css 0.95 */

/* ── 38c. Numeral / stat lockup register. Latin sets solid, Thai cannot. (0,1,1)
   These are the 8 "chip/value residues" carried since V3 N5/D2 plus the two
   siblings the census surfaced. ── */
html[lang] .tc-hud__value,               /* the-circuit.css 1.00 — renders "2.63กม." */
html[lang] .tc-build__status-lg,         /* the-circuit.css 1.05 — "อยู่ระหว่างก่อสร้าง" */
html[lang] .njt-stat__number,            /* corporate-events.css 1.00 — "ฟรี" */
html[lang] .track-hero__stat-value,      /* track-info.css 1.00 — "ขึ้น-ลง", wraps to 2 lines */
html[lang] .vspec__cine-num--text,       /* track-info.css 1.10 — 80px, 2 Thai lines */
html[lang] .njt-new-track__spec-value,   /* track-info.css 1.00 */
html[lang] .ops-panel__hours,            /* track-info.css 1.05 */
html[lang] .njt-menu-item__price,        /* coffee-track.css 1.00 — "50 บาท" */
html[lang] .about-timeline__year--magenta, /* about.css 1.00 */
html[lang] .njt-hero__price-card-period,  /* pricing.css 1.10 — "ต่อ 10 นาที" */
html[lang] .njt-track-layout__highlight-value  /* pricing.css 1.00 — "ยุโรป"/"แอสฟัลต์"/"กันชน" (A29) */ { line-height: var(--lh-value); }

/* ── 38d. LATIN-ONLY SLOTS — the measured exemption list. ────────────────────────
   A re-verify that greps for "display-scale line-height below the token" returns ~38
   hits and every one of them is legitimate. Measured on the shipped build, 18 routes,
   lang=th, 390 and 1440 (`sys-lead.mjs` census): EVERY sub-token display element is a
   Latin numeral, a Latin unit or an aria-hidden decorative glyph. Exactly TWO carried
   Thai and both are now governed above (§38a `.vspec__story-line`, §38c
   `.njt-track-layout__highlight-value`).

   The list, so the next verifier can diff instead of re-deriving it:
     0.85  .about-drop-cap · .njt-honours__figure · .njt-honours__plus
           .njt-honours__figure · .njt-honours__plus · .njt-rider-card__plate-number
     0.90  .coaches-hero__kinetic · .rt-proof__pos · .vspec__cine-num
     1.00  .njt-coaches-cinematic__watermark · .njt-campaign-cta__kinetic-text
           .about-stats__num · .about-lineage__year · .about-timeline__year
           .njt-mission-pullquote__glyph · .njt-protocol-card__bg-num
           .njt-activities-hero__kinetic · .njt-hero-parallax--coffee__kinetic
           .njt-special-card__price · .njt-menu-mark__ghost · .njt-coffee-cta__kinetic
           .njt-map-step__num · .ce-hero__kinetic · .hotel-score__value
           .insight-date-badge__day · .njt-hero__kinetic · .njt-hero__stat-number
           .rt-proof__plate · .njt-latest-highlight__position · .sp-hero-parallax__kinetic
           .sp-stat-card__number · .njt-partner-card-v2__bg-mark · .njt-hero-stat__num
           .vspec__stat-num · .ti-cta__kinetic

   THE INVARIANT, and it is the only thing that matters here: these are solid-set
   because their content is Latin. The moment one of them is given a `data-th` that
   contains a Thai codepoint it must move into §38c. Adding a Thai string to a slot on
   this list is the defect — the line-height is not. */

/* ── 39. Canonical PATHWAY = .njt-journey (blessed from student-stories — the
   audit's candidate canonical icon-connector). Ported verbatim so owners of the
   other two pathway builds (njt-pathway-cinematic, njt-motogp-pathway) migrate. ── */
.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;
}
.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;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  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;
  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;
  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;
}
@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; }
}

/* ── 40. Canonical STICKY SUB-NAV = .njt-hud-nav (blessed from activities;
   pricing's njt-pricing-nav migrates onto this). ── */
.njt-hud-nav {
  position: sticky;
  top: var(--header-h, 80px);
  z-index: 900;
  background: rgba(26,5,16,0.85);
  -webkit-backdrop-filter: var(--blur-chrome);
  backdrop-filter: var(--blur-chrome);
  border-bottom: 1px solid rgba(255,215,0,0.2);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.njt-hud-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.njt-hud-nav__inner::-webkit-scrollbar { display: none; }
.njt-hud-nav__link {
  flex: 1;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.25rem 1.5rem;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.njt-hud-nav__link:hover { color: var(--text-white); background: rgba(255,215,0,0.05); }
.njt-hud-nav__link.is-active { color: var(--gold); }
.njt-hud-nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
  transform-origin: left;
}
.njt-hud-nav__link.is-active::after { transform: scaleX(1); box-shadow: 0 -2px 10px rgba(255,215,0,0.5); }

/* ── 41. Canonical TESTIMONIAL = .njt-campaign-testimonials (blessed from
   training — the "campaign block" family). Base ported so coaches' carousel and
   coffee-track's grid-card variants migrate onto ONE component (G7). ── */
.njt-campaign-testimonials {
  position: relative;
  padding: var(--section-pad, 80px) 0;
  background: var(--racing-plum, #2A0018);
  overflow: hidden;
  color: #fff;
}
.njt-campaign-testimonials__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.njt-campaign-testimonials__glow {
  position: absolute;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.1;
  mix-blend-mode: screen;
  transition: background 1s ease, transform 1s ease;
}
.njt-campaign-testimonials__glow--primary { top: -10%; left: -10%; background: var(--magenta, #D40079); }
.njt-campaign-testimonials__glow--secondary { bottom: -10%; right: -10%; background: var(--racing-yellow, #FFD700); opacity: 0.05; }
.njt-campaign-testimonials__container { position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.njt-ct-header { text-align: center; margin-bottom: 4rem; }
.njt-ct-header__overline {
  display: inline-block;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  color: var(--gold, #FFD700);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  background: rgba(212,0,121,0.12);
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-pill, 50px);
  border: 1px solid rgba(212,0,121,0.4);
}
.njt-ct-header__title {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  font-style: italic;
  line-height: var(--lh-display);   /* language-aware leading — tokens.css + §38 */
  background: linear-gradient(180deg, #FFFFFF 0%, var(--gold, #FFD700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.njt-ct-carousel {
  position: relative;
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2rem;
  cursor: grab;
  overflow-anchor: none;
}
.njt-ct-carousel::-webkit-scrollbar { display: none; }
.njt-ct-carousel:active { cursor: grabbing; }
.njt-profile-card {
  flex: 0 0 100%;
  max-width: 1000px;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  background: rgba(15, 15, 15, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  margin: 0 auto;
  transform: scale(0.95);
  /* A19 — CANONICAL VALUE, and components.css is the owner of it.
     The off-slide cards carry real running text (name, role, quote). Dimming the
     whole card dims the TEXT: axe measured 1.92:1 and 2.69:1 at the 0.35 index fork
     and 2.15:1 at this 0.5 value. Only student-stories ever got the patch, as a page
     override, so the class stayed open on index + training. Depth now comes from
     `scale()` and the shadow — the opacity step is cosmetic and 0.92 keeps it legible.
     Do NOT re-lower this, and do NOT re-fork it in a page file. */
  opacity: 0.92;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
}
.njt-profile-card.is-active { transform: scale(1); opacity: 1; }
.njt-profile-media { position: relative; min-height: 400px; border-right: 1px solid rgba(255,255,255,0.05); }
.njt-profile-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.1);
  transition: filter 0.5s ease;
}
.njt-profile-card.is-active .njt-profile-media img { filter: grayscale(0%) contrast(1.1); }
.njt-profile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 0%, rgba(15,15,15,0.9) 100%),
              linear-gradient(to top, rgba(15,15,15,0.8) 0%, transparent 40%);
}
.njt-profile-hud { position: absolute; bottom: 2rem; left: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.njt-hud-stat {
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(var(--blur-chip));
  backdrop-filter: blur(var(--blur-chip));
  border-left: 3px solid var(--magenta, #D40079);
  padding: 0.5rem 1rem;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  transform: translateX(-20px);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.njt-hud-stat:nth-child(2) { transition-delay: 0.1s; border-color: var(--racing-yellow, #FFD700); }
.njt-hud-stat:nth-child(3) { transition-delay: 0.2s; border-color: #fff; }
.njt-profile-card.is-active .njt-hud-stat { transform: translateX(0); opacity: 1; }
.njt-hud-stat__label { font-size: 0.7rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.njt-hud-stat__val { font-size: 1rem; font-weight: 700; color: #fff; }
.njt-profile-content { padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; position: relative; }
.njt-profile-content::before {
  content: '\201C';
  position: absolute;
  top: -2rem;
  left: 1rem;
  font-size: 20rem;
  font-family: var(--font-display, 'Prompt', sans-serif);
  line-height: 1;
  color: rgba(255,255,255,0.03);
  z-index: 0;
  pointer-events: none;
}
.njt-quote-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  font-weight: 500;
}
.njt-quote-highlight {
  background: linear-gradient(90deg, var(--gold, #FFD700), var(--magenta, #D40079));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.njt-profile-author { position: relative; z-index: 1; }
.njt-profile-author__name { font-family: var(--font-heading, 'Prompt', sans-serif); font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.njt-profile-author__title { font-size: 0.875rem; color: rgba(255,255,255,0.5); }
.njt-progress-nav { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 3rem; max-width: 400px; margin-left: auto; margin-right: auto; }
.njt-progress-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; cursor: pointer; position: relative; }
.njt-progress-bar__fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--gold, #FFD700); width: 0%; transition: width 0.1s linear; }
.njt-progress-bar.is-active .njt-progress-bar__fill { width: 100%; transition: width 5s linear; }
@media (max-width: 992px) {
  .njt-campaign-testimonials .njt-profile-card { grid-template-columns: 1fr; }
  .njt-campaign-testimonials .njt-profile-media { min-height: 250px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .njt-campaign-testimonials .njt-profile-overlay { background: linear-gradient(to top, rgba(15,15,15,0.95) 0%, transparent 60%); }
  .njt-campaign-testimonials .njt-profile-content { padding: 2rem; }
  .njt-campaign-testimonials .njt-quote-text { font-size: 1.125rem; }
}


/* ══ 40. NJT RATE — promoted from 4 page files (A1, round 2) ═════════════════
   Was shipped byte-identically in pricing.css · training.css · activities.css ·
   corporate-events.css (md5 c5ef26b146e36b4321571576459e478b, 5,173 B each). The old header in
   those files said "PROMOTE TO css/components.css NEXT CYCLE"; this is that cycle.
   43 instances across 18 routes now resolve here. `.njt-nw` travels with it (it was
   also copied into coaches.css + student-stories.css).
   Page files may still add PAGE HOOKS for .njt-rate (a size or alignment tweak on a
   page-owned container) — they must not restate the component.
══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   NJT RATE — the "no printed number" price device            (GOAL-V4 §G4)

   ⚠ PROMOTE TO css/components.css NEXT CYCLE. This block is byte-identical in
     css/pricing.css · css/training.css · css/activities.css ·
     css/corporate-events.css. It is duplicated only because V4-C may not edit
     shared files this round. Delete the four copies when it lands centrally.

   Contract — an absence gets STRUCTURE, never repetition:
     1. the UNIT is the fact          (.njt-rate__unit — prominent element)
     2. INCLUSIONS do the anchoring   (.njt-rate__incl — optional, inside the slot)
     3. the ENQUIRY is a LIVE LINK    (.njt-rate__link — never a dead text node)
     4. the RESPONSE PROMISE reassures(.njt-rate__promise)

   Markup:
     <div class="njt-rate">
       <span class="njt-rate__unit" data-th="ต่อ 10 นาที" data-en="per 10 min">ต่อ 10 นาที</span>
       <span class="njt-rate__incl" data-th="รวมรถ ชุด หมวก โค้ช" data-en="Kart, gear, helmet &amp; marshal included">รวมรถ ชุด หมวก โค้ช</span>
       <a class="njt-rate__link" href="contact.html?inquiry=rate&amp;item=go-kart">
         <span data-th="เช็กเรทล่าสุด" data-en="Ask for today's rate">เช็กเรทล่าสุด</span>
         <svg class="lucide-arrow-right" …/>
       </a>
       <span class="njt-rate__promise" data-th="ตอบไวทุกวัน 10:00–20:00" data-en="Fast replies daily 10:00–20:00">ตอบไวทุกวัน 10:00–20:00</span>
     </div>

   Modifiers: --inline (tight table cell) · --center · --lg (hero/feature slot)
              --compact (drops the promise line to a tooltip-free micro line)
   Note: never put data-th/data-en on .njt-rate itself — the i18n engine lets
   nested pairs own themselves, and a parent pair would flatten the children.
   ═══════════════════════════════════════════════════════════════════════════ */
.njt-rate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.njt-rate__unit {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-weight: 700;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--text-white, #fff);
}
.njt-rate__incl {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: var(--text-small, 13px);
  line-height: 1.4;
  color: var(--text-white-80, rgba(255,255,255,0.8));
}
.njt-rate__incl::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 3px;
  background-color: var(--gold, #FFD700);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.njt-rate__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--gold, #FFD700);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.35);
  transition: color var(--dur-base, 300ms) var(--ease-out, ease),
              border-color var(--dur-base, 300ms) var(--ease-out, ease);
}
.njt-rate__link svg {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform var(--dur-base, 300ms) var(--ease-out, ease);
}
.njt-rate__link:hover {
  color: #FFE45C;
  border-bottom-color: var(--gold, #FFD700);
}
.njt-rate__link:hover svg { transform: translateX(3px); }
.njt-rate__link:focus-visible {
  outline: 2px solid var(--gold, #FFD700);
  outline-offset: 3px;
  border-radius: 2px;
}
.njt-rate__promise {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-white-60, rgba(255,255,255,0.6));
}

/* ── Modifier: --inline — one baseline row, for table cells and spec rows ── */
.njt-rate--inline {
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.njt-rate--inline .njt-rate__unit { font-size: 15px; }
.njt-rate--inline .njt-rate__link { font-size: 13px; }
.njt-rate--inline .njt-rate__promise { flex-basis: 100%; }

/* ── Modifier: --center ── */
.njt-rate--center { align-items: center; text-align: center; }
.njt-rate--center .njt-rate__incl { text-align: left; }

/* ── Modifier: --lg — hero / feature price slot ── */
.njt-rate--lg { gap: 8px; }
.njt-rate--lg .njt-rate__unit { font-size: clamp(20px, 1.9vw, 26px); }
.njt-rate--lg .njt-rate__link { font-size: 15px; }

/* ── Modifier: --compact — drops the promise to micro scale in dense grids ── */
.njt-rate--compact { gap: 4px; }
.njt-rate--compact .njt-rate__unit { font-size: 16px; }
.njt-rate--compact .njt-rate__promise { font-size: 11px; }

@media (max-width: 480px) {
  .njt-rate--inline { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .njt-rate__link, .njt-rate__link svg { transition: none; }
  .njt-rate__link:hover svg { transform: none; }
}

/* Shared Thai display-break helper (GOAL-V4 §G6 — keeps compounds off the
   line break). Duplicated with .njt-rate; promote together. */
.njt-nw { white-space: nowrap; }


/* ══ 41. VENUE PROOF RAIL — ONE component, two consumers (A2, round 2) ════════
   V4 shipped this band THREE times: `.njt-proof` (index, since retired — index.css
   carries zero `.njt-proof*` rules, verified by grep), `.njt-venue-proof` (index)
   and `.njt-venue-proof` (track-info). The last two are the same component carrying almost
   the same content (Somkiat Chantra · Honda Racing Thailand · NSF100 Audition Camp):
   a 4-up 1px-gutter grid of dark cells, each cell name + note. They had drifted on
   nine values — padding 22/20 vs 26/22, gap 8 vs 10, name 16 vs 17px, radius md vs
   lg, border alpha .08 vs .09, hover tint on one only. That is LESSONS #69 exactly:
   two parallel route owners solving one new problem twice.

   Collapsed here onto track-info's (newer) metrics. Both class prefixes are kept as
   SELECTOR ALIASES because renaming them is an HTML edit and `js/`+`css/` were the
   only files this owner could touch. Whoever next opens index.html / track-info.html
   should rename `.njt-venue-proof*` → `.njt-venue-proof*` and delete the alias half of each
   selector below; nothing else has to change.
      · `__tag`  is a ti-only chip (kept — index simply omits it)
      · `__head/__heading/__sub` is ti's local header; index uses the canonical
        `.njt-section__header` + `.njt-section__title--display` instead.
      · `__rails` is index-only decorative texture.
══════════════════════════════════════════════════════════════════════════════ */.njt-venue-proof {
  position: relative;
  padding: var(--section-pad) 0;
  background:
    radial-gradient(ellipse 60% 70% at 78% 22%, rgba(212,0,121,0.16) 0%, transparent 62%),
    linear-gradient(180deg, #0A0006 0%, var(--racing-plum) 58%, #0A0006 100%);
  border-top: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  isolation: isolate;
}
.njt-venue-proof .container.container--wide {
  padding-left: 32px;   /* HOUSE-RULES §9 — match the 1400 header rail */
  padding-right: 32px;
}
.njt-venue-proof .container { position: relative; z-index: 1; }

/* index-only decorative start-grid rails */
.njt-venue-proof__rails {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 96px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
}

/* headers — index uses the canonical section header, track-info a local one */
.njt-venue-proof .njt-section__header { margin-bottom: 32px; }
/* No hard measure cap: the TH string is 37 chars and a 24ch cap dropped a 1-syllable
   runt ("นี้") onto its own line. The 1400 rail is the measure; balance evens the wrap. */
.njt-venue-proof__title { max-width: 44ch; text-wrap: balance; }
.njt-venue-proof__head { max-width: 760px; margin: 0 0 44px; }
.njt-venue-proof__heading {
  font-size: var(--text-display);
  color: #fff;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 12px 0 16px;
}
.njt-venue-proof__sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-white-80);
  max-width: 58ch;
  margin: 0;
}

/* the rail itself */.njt-venue-proof__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Count-tolerant (R2-FLAG request R1, landed by R2-SWEEP round 2): both consumers
     dropped from 4 to 3 items for Gate-5 reasons (the NSF100 tile is the circuit's own
     product, removed on index.html and track-info.html). A hard repeat(4) painted a
     visible empty cell at >=1025px. auto-fit keeps 4-up when there are 4. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.njt-venue-proof__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px;
  background: rgba(10,0,6,0.62);
  transition: background var(--dur-base, 0.3s) var(--ease-out);
}
.njt-venue-proof__item:hover { background: rgba(42,0,24,0.72); }
.njt-venue-proof__tag {
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.njt-venue-proof__name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: var(--lh-heading);
  color: #fff;
}
.njt-venue-proof__note {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-white-60);
}
@media (max-width: 1024px) {
  .njt-venue-proof__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .njt-venue-proof { padding: var(--section-pad-mob) 0; }
.njt-venue-proof__list { grid-template-columns: 1fr; }
}


/* ══ 42. HONOURS BOARD — ONE component, two consumers (A3, round 2) ═══════════
   V4 shipped this twice: `.njt-honours` (about.css) and `.njt-honours`
   (racing-team.css). Same panel, same figure lockup, same award item — drifted on
   nine values: figure clamp 64/8vw/108 vs 60/7vw/96, `--racing-yellow` vs `--gold`
   (the same #FFD700 through two token names), panel padding, meta 22 vs 21px, award
   padding-left 18 vs 22px, award title 16 vs 17px, and one of the two had lost its
   box-shadow. LESSONS #69 again.

   The SHARED CORE lives here on both prefixes; each page file keeps only its LAYOUT
   delta (about = headline row + 3-up list; racing-team = 2-col figure|award). As with
   §41 the aliases exist because the class rename is an HTML edit and this owner could
   only touch css/ and js/ — rename `.njt-honours*` → `.njt-honours*` (or a neutral
   `.njt-honours*`) whenever those two files are next open, then drop the alias halves.
══════════════════════════════════════════════════════════════════════════════ */.njt-honours {
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(212,0,121,0.14), rgba(10,0,6,0.7));
  border: 1px solid rgba(212,0,121,0.32);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}
.njt-honours__figure {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(64px, 8vw, 108px);
  line-height: 0.85;          /* §38d: Latin numeral slot ("10+") */
  letter-spacing: -0.03em;
  color: var(--racing-yellow);
  text-shadow: 0 8px 40px rgba(255,215,0,0.2);
}
.njt-honours__plus { font-size: 0.5em; vertical-align: super; }
.njt-honours__figure-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.njt-honours__figure-meta strong {
  font-family: var(--font-heading);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  color: #fff;
  line-height: var(--lh-heading);
}
.njt-honours__figure-meta span {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-white-80);
  max-width: 54ch;
}
.njt-honours__item,
.njt-honours__award {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 18px;
  border-left: 2px solid rgba(255,215,0,0.45);
}
.njt-honours__item-year,
.njt-honours__award-year {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--racing-yellow);
}
.njt-honours__item strong,
.njt-honours__award strong {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: var(--lh-heading);
  color: #fff;
}
.njt-honours__item span:not(.njt-honours__item-year),
.njt-honours__award span:not(.njt-honours__award-year) {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-white-60);
}
@media (max-width: 1024px) {
  .njt-honours { grid-template-columns: 1fr; }
  .njt-honours__award { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid rgba(255,215,0,0.35); }
}
@media (max-width: 600px) {
  .njt-honours__figure-wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
}