/* ─────────────────────────────────────────
   ACTIVITIES PAGE — Component Styles
   EEST NJT Racing Circuit  ·  GOAL-V3 Round 1 (page owner: activities.html)
   All styles extracted from the 6 inline <style> blocks + 77 inline style
   attributes that previously lived in activities.html. Colours mapped to
   tokens.css (no rogue hex); hero renamed .njt-activities-hero (was the local
   .njt-hero-parallax that collided with training's different component).
───────────────────────────────────────── */

/* ═══════════════════════════════════════
   WIDTH NORMALIZATION — every section matches header width (1400px / 32px)
   Reference: css/racing-team.css. container--wide already carries 32px gutters
   (tokens.css); restated here per the mandatory page rule.
═══════════════════════════════════════ */
.njt-activities-page .container.container--wide,
.njt-showroom-section .container.container--wide,
.njt-matrix-section .container.container--wide {
  padding-left: 32px;
  padding-right: 32px;
}

/* ═══════════════════════════════════════
   SECTION 1 — HERO  (page-scoped: .njt-activities-hero)
═══════════════════════════════════════ */
.njt-activities-hero {
  position: relative;
  min-height: max(600px, 80vh);   /* A14: was `height: 80vh` — hero must be able to grow */
  display: flex;
  align-items: safe center;   /* A14: `safe` — when the content is taller than the hero box, plain `center` overflows the PADDING edge in BOTH directions and puts the breadcrumb under the fixed header. `safe` falls back to start-alignment in exactly that case and never overflows the top. */
  justify-content: center;
  overflow: hidden;
  background: var(--racing-plum);
  margin-top: calc(var(--header-h, 80px) * -1);
  padding-top: var(--hero-pad-top);
  /* A14 — the arithmetic, because it is not obvious. The hero is pulled up by
     `margin-top: -var(--header-h)` so its artwork runs behind the fixed header, so
     content starts at (padding-top − header-h) from the VIEWPORT top, not from the
     section top. A `padding-top: var(--header-h)` therefore puts content at y=0 —
     directly under the header — which is why the breadcrumb was unclickable
     (`elementFromPoint` returned `.site-header__inner`). It has to be header-h TWICE
     plus the gap: once to cancel the negative margin, once to clear the header. */
}

.njt-activities-hero__bg {
  position: absolute;
  inset: -10%;
  background-image: url('../assets/01-hero/HERO-004_kids-mini-gp-racing-action.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  mix-blend-mode: luminosity;
  animation: njt-hero-slowPan 30s infinite alternate linear;
  z-index: 0;
}

.njt-activities-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(42,0,24,0.6) 0%, rgba(42,0,24,0.35) 40%, rgba(42,0,24,0.9) 100%),
    linear-gradient(to right, rgba(42,0,24,0.7) 0%, rgba(0,0,0,0.15) 50%, rgba(42,0,24,0.7) 100%);
  z-index: 1;
}

.njt-activities-hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}
.njt-activities-hero__glow--gold {
  width: 500px; height: 500px;
  background: rgba(255,215,0,0.08);
  filter: blur(150px);
  top: -15%; right: -5%;
  animation: njt-hero-float 18s infinite alternate ease-in-out;
}
.njt-activities-hero__glow--magenta {
  width: 600px; height: 600px;
  background: rgba(212,0,121,0.15);
  filter: blur(120px);
  bottom: -20%; left: -10%;
  animation: njt-hero-float 22s infinite alternate-reverse ease-in-out;
}

.njt-activities-hero__particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.njt-activities-hero__particle {
  position: absolute;
  bottom: -10px;
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: njt-hero-particle-rise linear infinite;
}
/* particle placement (was 6 inline style attrs) */
.njt-activities-hero__particle:nth-child(1) { left: 8%;  animation-delay: 0s;   animation-duration: 7s; }
.njt-activities-hero__particle:nth-child(2) { left: 22%; animation-delay: 1.2s; animation-duration: 9s; }
.njt-activities-hero__particle:nth-child(3) { left: 38%; animation-delay: 2.8s; animation-duration: 6.5s; }
.njt-activities-hero__particle:nth-child(4) { left: 55%; animation-delay: 0.8s; animation-duration: 8s; }
.njt-activities-hero__particle:nth-child(5) { left: 72%; animation-delay: 2s;   animation-duration: 10s; }
.njt-activities-hero__particle:nth-child(6) { left: 88%; animation-delay: 3.5s; animation-duration: 7.5s; }

.njt-activities-hero__kinetic {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22vw;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,215,0,0.06);
  background: linear-gradient(180deg, rgba(255,215,0,0.05) 0%, rgba(212,0,121,0.03) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  animation: njt-hero-kinetic-breathe 20s infinite alternate ease-in-out;
}

.njt-activities-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 2rem;
  max-width: 880px;
}

.njt-activities-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.njt-activities-hero__breadcrumb a {
  color: rgba(255,215,0,0.8);
  text-decoration: none;
  transition: color var(--dur-base);
}
.njt-activities-hero__breadcrumb a:hover { color: var(--gold); }
.njt-activities-hero__breadcrumb-sep {
  color: rgba(255,255,255,0.3);
  font-size: 0.75rem;
}
.njt-activities-hero__breadcrumb-current { color: rgba(255,255,255,0.7); }

.njt-activities-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display-xl);   /* A5 / CONVENTIONS #19 — was clamp(3.5rem, 8vw, 6rem) */
  font-weight: 900;
  /* line-height deleted (A30): components.css §38a's `html[lang] h1` net (0,1,2)
     already out-ranks this (0,1,0) rule — the 1.2 here was dead in cascade. */
  margin-bottom: 1.25rem;
  letter-spacing: -0.025em;
  color: var(--text-white);
  text-shadow: 0 4px 20px rgba(0,0,0,0.5), 0 0 40px rgba(255,215,0,0.15);
}

.njt-activities-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255,255,255,0.9);
  font-weight: 400;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 1.75rem;
}

.njt-activities-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,215,0,0.9);
  color: #000;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  animation: njt-hero-badge-pulse 2s ease-in-out infinite;
}
.njt-activities-hero__badge-dot {
  width: 6px; height: 6px;
  background: #000;
  border-radius: 50%;
}

/* Hero CTA pair (§3.1 — was missing) */
.njt-activities-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.njt-activities-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  /* N1 (R2-FIX-SYS): this decoration carried `z-index: 10` — the SAME value as
     `.njt-activities-hero__content` (:137) — and sits later in source order, so it won
     the tie and painted OVER the hero CTA row wherever the two boxes met (they overlap
     by ~10px at 1440×900; more at shorter viewports). Two real consequences, both
     measured, not inferred:
       · contrast — the cue's white/40 glyphs composited INTO the `--outline` button's
         field, holding it at 3.52:1 rest / 2.82:1 hover in EN even after the
         `--btn-media-scrim` floor landed. Same button with the cue hidden: 8.97:1.
       · hit-testing — `elementFromPoint` at the button's centre returned the cue's
         SPAN, not the CTA. An `aria-hidden` decoration was intercepting a booking click.
     3 keeps it above the `__kinetic` watermark (z-index 2) and below the content (10);
     `pointer-events: none` is the part that must never regress. */
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.njt-activities-hero__scroll-text {
  font-family: var(--font-heading);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.njt-activities-hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(255,215,0,0.6), transparent);
  animation: njt-hero-scroll-pulse 2s ease-in-out infinite;
}

.njt-activities-hero__accent-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--magenta) 70%, transparent);
  z-index: 10;
}

@keyframes njt-hero-slowPan {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-2%, 1%); }
}
@keyframes njt-hero-float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -30px) scale(1.1); }
}
@keyframes njt-hero-particle-rise {
  0%   { transform: translateY(0) scale(0); opacity: 0; }
  10%  { opacity: 0.8; transform: translateY(-10vh) scale(1); }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-85vh) scale(0.3); opacity: 0; }
}
@keyframes njt-hero-kinetic-breathe {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%  { transform: translate(-50%, -50%) scale(1.02); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes njt-hero-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255,215,0,0); }
}
@keyframes njt-hero-scroll-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: 0.4; transform: scaleY(0.6); transform-origin: top; }
}

@media (max-width: 768px) {
  .njt-activities-hero { height: 70vh; min-height: 480px; }
  .njt-activities-hero__kinetic { font-size: 28vw; }
  /* A5: mobile font-size override removed — --text-display-xl is itself a clamp
     (40px floor at 360). A second clamp here re-forked the one hero clamp. */
  .njt-activities-hero__glow--gold { width: 300px; height: 300px; }
  .njt-activities-hero__glow--magenta { width: 350px; height: 350px; }
  .njt-activities-hero__scroll { display: none; }
  .njt-activities-hero__actions { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════
   SECTION 2 — STICKY QUICK NAV (RACING HUD)
═══════════════════════════════════════ */
.njt-hud-nav {
  position: sticky;
  top: var(--header-h, 80px);
  z-index: 900;
  background: rgba(26,5,16,0.85);           /* plum-tinted chrome (was #0F0F0F) */
  -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);
}

/* ═══════════════════════════════════════
   SECTION 3 — ACTIVITIES SHOWCASE
═══════════════════════════════════════ */
.njt-activities-page {
  background: var(--racing-plum);
  padding: 4rem 0 8rem;
}
.njt-activity-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  padding: 4rem 0;
}
.njt-activity-showcase--reverse { direction: rtl; }
.njt-activity-showcase--reverse > * { direction: ltr; }

.njt-activity-showcase__media {
  position: relative;
  min-width: 0;                 /* let the 1fr grid track shrink below img min-content (no mobile overflow) */
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.05);
}
.njt-activity-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.njt-activity-showcase:hover .njt-activity-showcase__media img { transform: scale(1.05); }

.njt-activity-showcase__content {
  background: rgba(20, 20, 20, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: var(--surface-border);
  border-radius: var(--radius-lg);
  min-width: 0;                 /* let the 1fr grid track shrink (no mobile overflow) */
  padding: 3rem;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  transform: translateZ(0);
}
.njt-activity-showcase--reverse .njt-activity-showcase__content {
  transform: translateX(2rem);
  z-index: 10;
}
.njt-activity-showcase:not(.njt-activity-showcase--reverse) .njt-activity-showcase__content {
  transform: translateX(-2rem);
  z-index: 10;
}

/* ── Badges (token-mapped: gold / magenta-300 / signal-green / white) ── */
.njt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.njt-badge--popular {
  background: rgba(255, 215, 0, 0.15);
  color: var(--gold);
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.njt-badge--kids {
  background: rgba(212, 0, 121, 0.15);
  color: var(--magenta-300);
  border: 1px solid rgba(212, 0, 121, 0.4);
}
/* Drifter: green identity via tint + border (non-text, 3:1 OK); WHITE text —
   --signal-green as small text can't clear AA 4.5:1 (HOUSE-RULES §10 wins). */
.njt-badge--drifter {
  background: rgba(46, 125, 70, 0.22);
  color: var(--text-white);
  border: 1px solid rgba(46, 125, 70, 0.6);
}
.njt-badge--pro {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.njt-activity-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--text-white);
  margin-bottom: 1rem;
  line-height: 1.2;
  font-style: italic;
}
.njt-activity-desc {
  font-family: var(--font-body);
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* ── Telemetry strip (labels raised to --text-micro floor; mono→Prompt+tracking) ── */
.njt-telemetry {
  margin-bottom: 2rem;
  display: flex;
  gap: 0;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border-radius: var(--radius);
  border: 1px solid rgba(255,215,0,0.15);
  overflow: hidden;
}
.njt-telemetry__item {
  flex: 1;
  padding: 0.5rem 0.875rem;
  display: flex;
  flex-direction: column;
}
.njt-telemetry__item + .njt-telemetry__item { border-left: 1px solid rgba(255,255,255,0.08); }
.njt-telemetry__label {
  font-family: var(--font-heading);
  font-size: var(--text-micro);            /* 0.65rem floor (was 0.55rem) */
  color: rgba(255,215,0,0.75);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
}
.njt-telemetry__value {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--text-white);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.njt-telemetry__value--accent { color: var(--gold); }   /* 360° SPIN etc. (was neon green) */

/* ── Pricing box ── */
.njt-pricing-box {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.njt-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.njt-pricing-row:last-child { border-bottom: none; padding-bottom: 0; }
.njt-pricing-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.8);
}
/* PROMO / BEST-VALUE chips now render as SIBLINGS (fix §3.3): keep them compact inline */
.njt-pricing-label .njt-chip {
  padding: 3px 9px;
  font-size: var(--text-micro);
}
.njt-pricing-value {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.njt-pricing-value.discount { color: var(--magenta-300); }   /* was rogue light-magenta hardcode → --magenta-300 */
.njt-pricing-unit {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  font-weight: 400;
  margin-left: 0.25rem;
}

/* full-width CTA inside a showcase card (was inline width:100%) */
.njt-btn-block { width: 100%; justify-content: center; }

/* ── Reveal utility (entrance ≤ --dur-reveal per Gate 6) ── */
.js-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.js-fade-up.is-visible,
.js-reveal-observer.is-visible .js-fade-up {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 992px) {
  .njt-activity-showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3rem 0;
  }
  .njt-activity-showcase--reverse { direction: ltr; }
  .njt-activity-showcase:not(.njt-activity-showcase--reverse) .njt-activity-showcase__content,
  .njt-activity-showcase--reverse .njt-activity-showcase__content {
    transform: translateY(-2rem);
    margin: 0 1rem;
  }
}

/* ═══════════════════════════════════════
   SECTION 4 — BIKE SHOWROOM (full-bleed showcase + thumbnail strip)
═══════════════════════════════════════ */
.njt-showroom { position: relative; }
.njt-showroom__intro { text-align: center; }

.njt-showroom__hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 3rem;
  min-height: 500px;
  background: var(--black-true);
}
.njt-showroom__bg { position: absolute; inset: 0; z-index: 1; }
.njt-showroom__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease, transform 6s ease;
  position: absolute; inset: 0;
}
.njt-showroom__bg img.is-active { opacity: 1; transform: scale(1.03); }

.njt-showroom__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 55%, rgba(0,0,0,0.92) 100%),
    linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%);
}

.njt-showroom__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 4rem;
  margin-left: auto;
  width: 50%;
  min-height: 500px;
}

.njt-showroom__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.5s ease 0.1s;
}
.njt-showroom__badge.is-active { opacity: 1; transform: translateY(0); }
.njt-showroom__badge::before {
  content: '';
  width: 32px; height: 2px;
  background: var(--gold);
}

.njt-showroom__name {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.1;
  margin-bottom: 0.15rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.2s;
}
.njt-showroom__name.is-active { opacity: 1; transform: translateY(0); }

.njt-showroom__cc {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: rgba(255,215,0,0.9);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.5s ease 0.3s;
}
.njt-showroom__cc.is-active { opacity: 1; transform: translateY(0); }

.njt-showroom__desc {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-white);
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 400px;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.5s ease 0.35s;
}
.njt-showroom__desc.is-active { opacity: 1; transform: translateY(0); }

/* Price display — label-first glass pill (redesigned §3.7: period large, ask sub-line) */
.njt-showroom__price-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.5s ease 0.45s;
}
.njt-showroom__price-row.is-active { opacity: 1; transform: translateY(0); }
.njt-showroom__price-pill {
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 14px;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 140px;
}
.njt-showroom__price-period {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-white);
  line-height: 1;
}
.njt-showroom__price-ask {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,215,0,0.85);
  letter-spacing: 0.02em;
}

/* Featured slide (NSF100, data-active="4") — magenta accents (was solid #D40079) */
.njt-showroom[data-active="4"] .njt-showroom__badge { color: var(--magenta); }
.njt-showroom[data-active="4"] .njt-showroom__badge::before { background: var(--magenta); }
.njt-showroom[data-active="4"] .njt-showroom__cc { color: rgba(212,0,121,0.9); }
.njt-showroom[data-active="4"] .njt-showroom__price-period { color: var(--text-white); }
.njt-showroom[data-active="4"] .njt-showroom__price-ask { color: rgba(212,0,121,0.85); }
.njt-showroom[data-active="4"] .njt-showroom__price-pill {
  border-color: rgba(212,0,121,0.25);
  background: rgba(212,0,121,0.08);
}

/* ── Thumbnail strip ── */
.njt-showroom__strip {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.njt-showroom__strip::-webkit-scrollbar { display: none; }
.njt-showroom__thumb {
  flex-shrink: 0;
  width: calc(20% - 0.6rem);
  min-width: 180px;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid transparent;
  background: rgba(20,20,20,0.8);
  transition: all 0.35s ease;
  position: relative;
  scroll-snap-align: start;
}
.njt-showroom__thumb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.35s ease;
}
.njt-showroom__thumb.is-active {
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 4px 20px rgba(255,215,0,0.15);
}
.njt-showroom__thumb.is-active::after { transform: scaleX(1); }
.njt-showroom__thumb:hover:not(.is-active) {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}
.njt-showroom__thumb--pro.is-active {
  border-color: rgba(212,0,121,0.5);
  box-shadow: 0 4px 20px rgba(212,0,121,0.15);
}
.njt-showroom__thumb--pro::after { background: var(--magenta); }
.njt-showroom__thumb-img {
  width: 100%; height: 100px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.njt-showroom__thumb:hover .njt-showroom__thumb-img { transform: scale(1.05); }
.njt-showroom__thumb-info { padding: 0.75rem 1rem; }
.njt-showroom__thumb-name {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.njt-showroom__thumb-meta {
  font-family: var(--font-heading);
  font-size: var(--text-micro);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}
.njt-showroom__thumb-tag { color: var(--magenta); font-weight: 700; }  /* PRO SPEC (was off-token pink) */

.njt-showroom__progress {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-top: 1rem;
  overflow: hidden;
}
.njt-showroom__progress-fill {
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, var(--gold), var(--magenta));
  border-radius: 2px;
  transition: width 0.5s ease;
}

.njt-showroom__footnote {
  text-align: center;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  margin-top: 2rem;
}
.njt-showroom__cta { text-align: center; margin-top: 2rem; }

@media (max-width: 768px) {
  .njt-showroom__hero { min-height: 560px; border-radius: var(--radius-lg); }
  .njt-showroom__hero::after {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%);
  }
  .njt-showroom__content {
    width: 100%;
    padding: 0 1.75rem 2.5rem;
    justify-content: flex-end;
    min-height: 560px;
  }
  .njt-showroom__name { font-size: 2rem; }
  .njt-showroom__thumb { min-width: 150px; }
  .njt-showroom__thumb-img { height: 80px; }
}

/* ═══════════════════════════════════════
   SECTION 5 — COMPARE MATRIX (card shell on the plum canvas)
═══════════════════════════════════════ */
.njt-matrix-section {
  background: var(--racing-plum);               /* was near-black flip → keep the plum canvas */
  padding: 6rem 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.njt-matrix-container { overflow-x: auto; }
.njt-matrix-heading { text-align: center; margin-bottom: 3rem; }
.njt-matrix-card {                              /* standard card shell (§3.8) */
  background: var(--surface-solid);
  border: var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 800px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
}
.njt-matrix { width: 100%; border-collapse: collapse; }
.njt-matrix th,
.njt-matrix td {
  padding: 1.25rem 1.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.njt-matrix th:first-child,
.njt-matrix td:first-child { text-align: left; }
.njt-matrix thead th {
  font-family: var(--font-heading);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 2px solid rgba(255,215,0,0.2);
}
.njt-matrix tbody tr { transition: background var(--dur-base) var(--ease-out); }
.njt-matrix tbody tr:last-child td { border-bottom: none; }
.njt-matrix tbody tr:hover { background: rgba(255,255,255,0.04); }
.njt-matrix td {
  color: rgba(255,255,255,0.85);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* Value cells render at large-text scale (≥18.66px bold). This lets the
   sanctioned --signal-green clear WCAG at the 3:1 large-text threshold
   (it can't reach 4.5:1 as small text) and reads as an authoritative spec table. */
.njt-matrix tbody td:not(:first-child) { font-size: 1.2rem; }
.njt-matrix td:first-child {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0;
}
.njt-matrix-yes { color: var(--signal-green); }              /* was rogue neon green → --signal-green (large-text 3:1) */
.njt-matrix-no  { color: rgba(255,255,255,0.55); font-weight: 500; }
.njt-matrix-high { color: var(--gold); }
.njt-matrix-safe { color: var(--signal-green); }             /* was rogue neon green → --signal-green (large-text 3:1) */
.njt-matrix-max  { color: var(--magenta-300); }              /* was rogue light-magenta hardcode → --magenta-300 */
.njt-matrix-footnote {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}

/* ═══════════════════════════════════════
   SECTION 6 — FINAL CTA (canonical .njt-campaign-cta — shared pattern)
═══════════════════════════════════════ */
/* Campaign CTA de-forked → css/components.css §36 (GOAL-V3 R1 integrator, punch 2). */

/* ═══════════════════════════════════════
   REDUCED MOTION — pause ambient loops (a11y; propagates contact's hygiene)
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .njt-activities-hero__bg,
  .njt-activities-hero__glow,
  .njt-activities-hero__particle,
  .njt-activities-hero__kinetic,
  .njt-activities-hero__badge,
  .njt-activities-hero__scroll-line { animation: none; }
  .js-fade-up { transition: none; }
}

/* .njt-rate + .njt-nw PROMOTED to css/components.css (A1, round 2).
   This file carried a byte-identical 5,173-byte copy (md5 c5ef26b146e36b4321571576459e478b),
   as did the other three page files named in the old header — 20,692 bytes of
   the same component shipped four times. components.css loads on all 18 routes,
   so the copy here was never doing anything the shared file would not. */

/* ═══════════════════════════════════════════════════════════════════════════
   G4 PAGE HOOKS FOR .njt-rate  (activities)
   The pricing boxes, showroom pills and the two footnotes used to end in a
   dead "สอบถาม" string. They now end in a unit + a live enquiry link.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Right-hand cell of a pricing row is now the UNIT, not a dead price token. */
.njt-pricing-value--unit {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: normal;
  text-align: right;
  color: var(--text-white);
  letter-spacing: 0.01em;
}
.njt-pricing-value--unit.discount { color: var(--magenta-300); }

/* Rate block closes the pricing box (inclusions → enquiry → promise). */
.njt-pricing-box .njt-rate {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Showroom: the "ask" line became an anchor — keep the pill's visual weight. */
a.njt-showroom__price-ask {
  border-bottom: none;
  padding-bottom: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 215, 0, 0.9);
}
a.njt-showroom__price-ask svg { width: 13px; height: 13px; }
a.njt-showroom__price-ask:hover { color: #FFE45C; }
.njt-showroom[data-active="4"] a.njt-showroom__price-ask { color: var(--magenta-300); }
.njt-showroom__promise {
  display: block;
  margin-top: 0.75rem;
}

/* Both footnotes are now .njt-rate--inline rows — centre them like the old <p>. */
.njt-showroom__footnote.njt-rate,
.njt-matrix-footnote.njt-rate {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.njt-showroom__footnote.njt-rate { margin-top: 2rem; }
.njt-matrix-footnote.njt-rate { margin-top: 1.25rem; }
.njt-showroom__footnote.njt-rate .njt-rate__unit,
.njt-matrix-footnote.njt-rate .njt-rate__unit { font-size: 15px; }

@media (max-width: 640px) {
  .njt-pricing-row { align-items: flex-start; }
  .njt-pricing-value--unit { text-align: left; }
  .njt-showroom__footnote.njt-rate,
  .njt-matrix-footnote.njt-rate { align-items: center; text-align: center; }
}