/* ─────────────────────────────────────────
   CONTACT PAGE — EEST NJT Racing Circuit
   $250K Campaign-Level Execution
───────────────────────────────────────── */

/* ═══════════════════════════════════════
   1. HERO — CONTACT VARIANT
═══════════════════════════════════════ */
.njt-hero--contact {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: calc(var(--header-h, 80px) * -1);
  padding-top: var(--hero-pad-top);
  padding-bottom: 20rem; /* breathing room for cards overlap */
  background: #050505;
}

/* ── Background Layers ── */
.njt-hero--contact .njt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.njt-hero--contact .njt-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  filter: contrast(1.1) saturate(1.1);
}
.njt-hero--contact .njt-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(42,0,24,0.92) 65%, rgba(5,5,5,1) 100%),
    radial-gradient(ellipse at 30% 50%, rgba(212,0,121,0.08) 0%, transparent 60%);
}
.njt-hero--contact .njt-hero__grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,215,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,215,0,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* ── Ambient Lights ── */
.njt-hero--contact .njt-hero__ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.njt-hero--contact .njt-hero__ambient--magenta {
  top: 15%;
  left: 25%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(212,0,121,0.18) 0%, transparent 70%);
  animation: ambientDrift 8s ease-in-out infinite alternate;
}
.njt-hero--contact .njt-hero__ambient--gold {
  bottom: 10%;
  right: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
  animation: ambientDrift 10s ease-in-out 2s infinite alternate-reverse;
}

@keyframes ambientDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -20px) scale(1.05); }
}

/* ── Signal Pulse Ring ── */
.njt-hero--contact .njt-hero__signal-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.njt-hero__signal-ring-circle {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 50%;
  animation: signalPulse 3s ease-out infinite;
}
.njt-hero__signal-ring-circle:nth-child(2) { animation-delay: 1s; }
.njt-hero__signal-ring-circle:nth-child(3) { animation-delay: 2s; }

@keyframes signalPulse {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Speed Lines ── */
.njt-hero--contact .njt-hero__speed-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.njt-hero--contact .njt-hero__speed-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,0,121,0.4), transparent);
  animation: speedLinePass linear infinite;
  opacity: 0;
}
.njt-hero--contact .njt-hero__speed-line:nth-child(1) { top: 18%; animation-duration: 3.2s; animation-delay: 0s; }
.njt-hero--contact .njt-hero__speed-line:nth-child(2) { top: 38%; animation-duration: 2.6s; animation-delay: 0.9s; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.35), transparent); }
.njt-hero--contact .njt-hero__speed-line:nth-child(3) { top: 58%; animation-duration: 3.6s; animation-delay: 1.8s; }
.njt-hero--contact .njt-hero__speed-line:nth-child(4) { top: 75%; animation-duration: 2.9s; animation-delay: 0.5s; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.3), transparent); }

@keyframes speedLinePass {
  0%   { left: -20%; width: 0; opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { width: 30%; }
  90%  { opacity: 0.6; }
  100% { left: 120%; width: 0; opacity: 0; }
}

/* ── Scan Line ── */
.njt-hero--contact .njt-hero__scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 20%, rgba(255,215,0,0.15) 50%, transparent 80%);
  z-index: 1;
  pointer-events: none;
  animation: scanDrop 6s linear infinite;
}

@keyframes scanDrop {
  0%   { top: -2px; opacity: 0; }
  5%   { opacity: 0.8; }
  95%  { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

/* ── Content Container ── */
.njt-hero--contact .njt-hero__container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--max-w, 1400px);
  margin: 0 auto;
  padding: 0 2rem;
}
.njt-hero--contact .njt-hero__content {
  text-align: center;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Overline Kicker ── */
.njt-hero--contact .njt-hero__overline {
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--racing-yellow, #FFD700);
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.4s ease both;
}
.njt-hero--contact .njt-hero__overline::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.35), transparent);
  animation: overlineScan 2.5s ease 0.8s both;
  pointer-events: none;
}
@keyframes overlineScan {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* ── Title ── */
.njt-hero--contact .njt-hero__title {
  font-family: var(--font-display, 'Prompt', sans-serif);
  font-style: italic;
  font-size: var(--text-display-xl);   /* A5 / CONVENTIONS #19 — was clamp(3rem, 6vw, 5.5rem) */
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
  animation: fadeInUp 0.4s ease 0.15s both;
}

/* ── Subtitle ── */
.njt-hero--contact .njt-hero__subtitle {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255,255,255,0.85);
  font-weight: 400;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 2rem;
  animation: fadeInUp 0.4s ease 0.25s both;
}

/* ── Quick Action Pills ── */
.njt-hero--contact .njt-hero__quick-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeInUp 0.4s ease 0.4s both;
}
.njt-hero__quick-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 350ms cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
}
.njt-hero__quick-action:hover {
  background: rgba(255,215,0,0.1);
  border-color: rgba(255,215,0,0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4), 0 0 20px rgba(255,215,0,0.15);
  color: var(--racing-yellow, #FFD700);
}
.njt-hero__quick-action svg {
  flex-shrink: 0;
  transition: transform 300ms ease;
}
.njt-hero__quick-action:hover svg {
  transform: scale(1.15);
}
.njt-hero__quick-action--phone {
  border-color: rgba(255,215,0,0.25);
}
.njt-hero__quick-action--phone:hover {
  background: rgba(255,215,0,0.12);
  border-color: rgba(255,215,0,0.5);
}
.njt-hero__quick-action--line {
  border-color: rgba(6,199,85,0.25);
}
.njt-hero__quick-action--line:hover {
  background: rgba(6,199,85,0.1);
  border-color: rgba(6,199,85,0.5);
  color: var(--line-green);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4), 0 0 20px rgba(6,199,85,0.15);
}
.njt-hero__quick-action--map {
  border-color: rgba(212,0,121,0.25);
}
.njt-hero__quick-action--map:hover {
  background: rgba(212,0,121,0.1);
  border-color: rgba(212,0,121,0.5);
  color: #D40079;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4), 0 0 20px rgba(212,0,121,0.15);
}

/* ── Scroll Indicator ── */
.njt-hero--contact .njt-hero__scroll {
  position: absolute;
  bottom: 10rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 10;
  animation: fadeIn 0.4s ease 1s both;
}
.njt-hero__scroll-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 11px;
  position: relative;
}
.njt-hero__scroll-dot {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--racing-yellow, #FFD700);
  border-radius: 50%;
  animation: scrollDot 2s ease-in-out infinite;
}
.njt-hero__scroll-text {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

@keyframes scrollDot {
  0%, 100% { top: 5px; opacity: 1; }
  50%      { top: 18px; opacity: 0.3; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════
   2. CONTACT INFO CARDS — Premium Bento Grid
═══════════════════════════════════════ */
.njt-contact-premium {
  position: relative;
  padding: 3rem 0 4rem;
  background: #050505;
  z-index: 10;
}
.njt-contact-premium__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* ── Card Base ── */
.njt-contact-premium__card {
  background: linear-gradient(135deg, rgba(25,25,25,0.92) 0%, rgba(42,0,24,0.7) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.njt-contact-premium__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFD700, #D40079, transparent);
  opacity: 0;
  transition: opacity 400ms ease;
}
.njt-contact-premium__card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,215,0,0.3);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(255,215,0,0.1);
  background: linear-gradient(135deg, rgba(35,35,35,0.98), rgba(42,0,24,0.85));
}
.njt-contact-premium__card:hover::before {
  opacity: 1;
}

/* ── Icon Container ── */
.njt-contact-premium__icon {
  width: 68px;
  height: 68px;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #FFD700;
  transition: all 400ms ease;
}
.njt-contact-premium__card:hover .njt-contact-premium__icon {
  background: rgba(255,215,0,0.12);
  border-color: rgba(255,215,0,0.4);
  transform: scale(1.08);
  box-shadow: 0 0 24px rgba(255,215,0,0.2);
}

/* ── Typography ── */
.njt-contact-premium__title {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.njt-contact-premium__value {
  font-family: var(--font-body, 'Bai Jamjuree', sans-serif);
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.njt-contact-premium__sublabel {
  font-family: var(--font-heading, 'Prompt', sans-serif);
  font-size: 0.85rem;
  color: #FFD700;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════
   3. CARD COLOR VARIANTS
═══════════════════════════════════════ */

/* ── LINE Card (LINE brand green consolidated to --line-green token) ── */
.njt-contact-premium__card--line {
  border-color: rgba(6, 199, 85, 0.15);
}
.njt-contact-premium__card--line:hover {
  border-color: rgba(6, 199, 85, 0.4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(6,199,85,0.12);
}
.njt-contact-premium__card--line::before {
  background: linear-gradient(90deg, transparent, var(--line-green), var(--line-green), transparent);
}
.njt-contact-premium__icon--line {
  color: var(--line-green);
  background: rgba(6,199,85,0.08);
  border-color: rgba(6,199,85,0.2);
}
.njt-contact-premium__card--line:hover .njt-contact-premium__icon--line {
  background: rgba(6,199,85,0.15);
  border-color: rgba(6,199,85,0.5);
  box-shadow: 0 0 24px rgba(6,199,85,0.25);
}
.njt-contact-premium__btn--line {
  border-color: rgba(6, 199, 85, 0.35) !important;
  background: rgba(6,199,85,0.06) !important;
}

/* ── Facebook Card ── */
.njt-contact-premium__card--fb {
  border-color: rgba(24, 119, 242, 0.15);
}
.njt-contact-premium__card--fb:hover {
  border-color: rgba(24, 119, 242, 0.4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(24,119,242,0.12);
}
.njt-contact-premium__card--fb::before {
  background: linear-gradient(90deg, transparent, #1877f2, #42a5f5, transparent);
}
.njt-contact-premium__icon--fb {
  color: #1877f2;
  background: rgba(24,119,242,0.08);
  border-color: rgba(24,119,242,0.2);
}
.njt-contact-premium__card--fb:hover .njt-contact-premium__icon--fb {
  background: rgba(24,119,242,0.15);
  border-color: rgba(24,119,242,0.5);
  box-shadow: 0 0 24px rgba(24,119,242,0.25);
}
.njt-contact-premium__btn--fb {
  border-color: rgba(24, 119, 242, 0.35) !important;
  background: rgba(24,119,242,0.06) !important;
}

/* ── Hours Card ── */
.njt-contact-premium__card--hours {
  border-color: rgba(212, 0, 121, 0.2);
}
.njt-contact-premium__card--hours:hover {
  border-color: rgba(212, 0, 121, 0.5);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(212,0,121,0.12);
}
.njt-contact-premium__card--hours::before {
  background: linear-gradient(90deg, transparent, #D40079, #FFD700, transparent);
}
.njt-contact-premium__icon--hours {
  color: #D40079;
  background: rgba(212,0,121,0.08);
  border-color: rgba(212,0,121,0.2);
}
.njt-contact-premium__card--hours:hover .njt-contact-premium__icon--hours {
  background: rgba(212,0,121,0.15);
  border-color: rgba(212,0,121,0.5);
  box-shadow: 0 0 24px rgba(212,0,121,0.25);
}

/* ═══════════════════════════════════════
   4. RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 992px) {
  .njt-contact-premium__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .njt-hero--contact {
    min-height: 90vh;
    padding-top: var(--hero-pad-top);
    padding-bottom: 6rem;
  }
  /* A5: mobile font-size override removed — --text-display-xl already clamps to 40px here. */
  .njt-hero--contact .njt-hero__overline {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }
  .njt-hero--contact .njt-hero__quick-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 320px;
  }
  .njt-hero__quick-action {
    justify-content: center;
  }
  .njt-hero--contact .njt-hero__signal-ring {
    width: 200px;
    height: 200px;
  }
  .njt-hero--contact .njt-hero__ambient--magenta {
    width: 250px;
    height: 250px;
  }
  .njt-hero--contact .njt-hero__ambient--gold {
    width: 300px;
    height: 300px;
  }
}
@media (max-width: 576px) {
  .njt-contact-premium__grid {
    grid-template-columns: 1fr;
  }
  .njt-hero--contact {
    padding-bottom: 4rem;
  }
}

/* ═══════════════════════════════════════
   5. REDUCED MOTION
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .njt-hero--contact .njt-hero__speed-line,
  .njt-hero--contact .njt-hero__scanline,
  .njt-hero__signal-ring-circle {
    animation: none !important;
    display: none;
  }
  .njt-hero--contact .njt-hero__ambient {
    animation: none !important;
  }
  .njt-hero--contact .njt-hero__overline::after {
    animation: none;
  }
}

/* ═══════════════════════════════════════
   6. MAP & DIRECTIONS — "RACE CONTROL" HUD
   (extracted from page inline <style>; §6.3)
═══════════════════════════════════════ */
.njt-map-premium {
  position: relative;
  padding: 6rem 0;
  background: #050505;
  color: #fff;
}
.njt-map-premium__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.njt-map-premium__visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-gold);
  background: rgba(20,20,20,0.8);
  box-shadow: 0 0 30px rgba(0,0,0,0.8);
  min-height: 500px;
}
/* Poster fallback — real aerial still behind the iframe so the panel never paints
   black. The poster is a PHOTOGRAPH: dark plum scrim, NEVER the --map-filter invert
   (that recipe is map-TILE only, kept on .njt-map-premium__frame). R2 taste C1 fix. */
.njt-map-premium__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(42, 0, 24, 0.45), rgba(42, 0, 24, 0.55)),
    url('../assets/video-stills/aerial-track/B1-aerial-full-track-sun.jpg') center/cover no-repeat;
  opacity: 0.9;
  z-index: 0;
}
.njt-map-premium__poster-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(5,5,5,0.7);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  pointer-events: none;
}
.njt-map-premium__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,215,0,0.1) 0%, transparent 10%, transparent 90%, rgba(212,0,121,0.1) 100%);
  pointer-events: none;
  z-index: 10;
}
.njt-map-premium__frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 500px;
  border: 0;
  filter: var(--map-filter);
}
.njt-map-premium__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.njt-map-premium__content .njt-section__title {
  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.njt-map-premium__address {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.njt-map-premium__directions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.njt-map-step {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(90deg, rgba(42,0,24,0.4), transparent);
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0;
  transition: all 300ms ease;
}
.njt-map-step:hover {
  background: linear-gradient(90deg, rgba(42,0,24,0.8), rgba(20,20,20,0.4));
  border-color: var(--magenta);
  transform: translateX(10px);
}
.njt-map-step__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--gold);
  font-style: italic;
  line-height: 1;
  opacity: 0.8;
}
.njt-map-step:hover .njt-map-step__num {
  color: var(--magenta);
  opacity: 1;
}
.njt-map-step__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin: 0;
}
.njt-map-premium__cta {
  max-width: max-content;
}
/* Targeting Brackets */
.njt-target-brackets {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 11;
}
.njt-target-brackets::before, .njt-target-brackets::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid var(--gold);
}
.njt-target-brackets::before {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
}
.njt-target-brackets::after {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
}
@media (max-width: 992px) {
  .njt-map-premium__container {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   7. FEATURED COURSES — "PIT WALL" telemetry cards
   (extracted; §6.4 class collision fix: .njt-course-card → .njt-telemetry-card)
═══════════════════════════════════════ */
.njt-featured-courses {
  position: relative;
  padding: 6rem 0;
  background: #050505;
  overflow: hidden;
}
.njt-featured-courses__bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,215,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,215,0,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 1;
}
.njt-featured-courses__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(circle, rgba(212,0,121,0.15) 0%, rgba(255,215,0,0.1) 50%, transparent 100%);
  filter: blur(150px);
  z-index: 2;
  pointer-events: none;
}
.njt-featured-courses__container {
  position: relative;
  z-index: 10;
}
.njt-featured-courses__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.njt-featured-courses__title {
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.njt-featured-courses__intro {
  color: rgba(255,255,255,0.7);
  margin-top: 1rem;
}
.njt-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.njt-telemetry-card {
  background: linear-gradient(135deg, rgba(20,20,20,0.9), rgba(42,0,24,0.6));
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 400ms ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.njt-telemetry-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--magenta), transparent);
  opacity: 0;
  transition: opacity 400ms ease;
}
.njt-telemetry-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,215,0,0.4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(255,215,0,0.1);
  background: linear-gradient(135deg, rgba(30,30,30,0.95), rgba(42,0,24,0.8));
}
.njt-telemetry-card:hover::before {
  opacity: 1;
}
.njt-telemetry-card--featured {
  border-color: rgba(212,0,121,0.3);
  box-shadow: 0 0 20px rgba(212,0,121,0.1);
}
.njt-telemetry-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--magenta);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid currentColor;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.05em;
}
.njt-telemetry-card__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.njt-telemetry-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.njt-telemetry-pill {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold);
  background: rgba(255,215,0,0.05);
  border: 1px solid rgba(255,215,0,0.2);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.08em;
}
.njt-telemetry-pill--magenta {
  color: var(--magenta-300);
  background: rgba(212,0,121,0.08);
  border-color: rgba(212,0,121,0.3);
}
.njt-telemetry-card__desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin-bottom: 1.75rem;
  flex-grow: 1;
}
.njt-telemetry-card__action {
  width: 100%;
  justify-content: center;
}
.njt-telemetry-card__link {
  margin-top: 1rem;
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  transition: color var(--dur-base) var(--ease-out), gap var(--dur-base) var(--ease-out);
}
.njt-telemetry-card__link:hover {
  color: var(--magenta-300);
  gap: 10px;
}
@media (max-width: 992px) {
  .njt-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .njt-featured-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   8. BOOKING FORM — "DIRECT LINE"
   (extracted; §6.5. PROTECT: the input focus treatment below is the
   best in the build — kept byte-for-byte equivalent.)
═══════════════════════════════════════ */
.njt-booking-premium {
  position: relative;
  padding: 8rem 0;
  background: #050505;
  color: #fff;
  overflow: hidden;
}
.njt-booking-premium::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(42,0,24,0.6) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.njt-form-premium {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  background: rgba(20,20,20,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 4rem;
  box-shadow: 0 25px 50px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  z-index: 10;
  transition: all 400ms ease;
}
.njt-form-premium__header {
  text-align: center;
  margin-bottom: 3rem;
}
.njt-form-premium__intro {
  color: rgba(255,255,255,0.6);
}
.njt-form-premium__group {
  margin-bottom: 1.5rem;
}
.njt-form-premium__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}
.njt-form-premium__input,
.njt-form-premium__select,
.njt-form-premium__textarea {
  width: 100%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-bottom: 2px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 1rem;
  transition: all 300ms ease;
}
/* PROTECTED focus treatment — do not weaken (audit §6.5 "excellent focus state") */
.njt-form-premium__input:focus,
.njt-form-premium__select:focus,
.njt-form-premium__textarea:focus {
  outline: none;
  background: rgba(42,0,24,0.4);
  border-color: rgba(255,215,0,0.3);
  border-bottom-color: #D40079;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5), 0 0 15px rgba(212,0,121,0.2);
}
.njt-form-premium__row {
  display: flex;
  gap: 1.5rem;
}
.njt-form-premium__row > * {
  flex: 1;
}
.njt-form-premium__submit-wrap {
  margin-top: 2rem;
}
.njt-form-premium__submit {
  width: 100%;
  justify-content: center;
  transform: none; /* massive form button sits flat (no skew) */
}
/* Demo success card (§6.5 form interception) */
.njt-form-success {
  text-align: center;
  padding: 1rem 0;
  animation: faqFadeIn 400ms ease both;
}
.njt-form-success__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff;
  margin: 0.5rem 0 0.75rem;
}
.njt-form-success__text {
  font-family: var(--font-body);
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 2rem;
}
.njt-form-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
@media (max-width: 768px) {
  .njt-form-premium {
    padding: 2rem;
  }
  .njt-form-premium__row {
    flex-direction: column;
    gap: 0;
  }
  .njt-form-success__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ═══════════════════════════════════════
   9. FAQ — canonical .njt-faq accordion (R3 migration off njt-faq-premium).
   Base + plus→× icon now in components.css §24; button + .is-open driven by
   js/main.js. Page keeps only header-gutter width normalization.
═══════════════════════════════════════ */
/* Width-normalized to the header gutter (1400px / 32px) — HOUSE-RULES §9 */
#faq.njt-section { padding-left: 0; padding-right: 0; }
#faq.njt-section .container.container--wide { padding-left: 32px; padding-right: 32px; }

/* ═══════════════════════════════════════
   10. HOURS LIVE-STATUS BADGE — page-specific COMPACT size override
   Base spec now lives in css/components.css §35 (GOAL-V3 R1 integrator, punch 11).
   Contact renders a slightly tighter badge inside the hours card.
═══════════════════════════════════════ */
.njt-status-badge {
  padding: 4px 12px;
  font-size: 12px;
  margin-bottom: 10px;
}
.njt-status-badge__dot {
  width: 7px;
  height: 7px;
}
.njt-contact-premium__faqlink {
  display: inline-block;
  margin-top: 0.25rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  transition: color var(--dur-base) var(--ease-out);
}
.njt-contact-premium__faqlink:hover { color: var(--magenta-300); }

/* ═══════════════════════════════════════
   11. HOISTED CARD-CTA UTILITY (§6.2 — replaces inline width/glass styles)
═══════════════════════════════════════ */
.njt-contact-premium__cta {
  width: 100%;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.05);
}

/* ═══════════════════════════════════════
   12. REDUCED MOTION — extracted-section additions
   (the protected hero block above is untouched; this only ADDS coverage)
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .njt-status-badge__dot { animation: none !important; }
  .njt-map-step,
  .njt-telemetry-card,
  .njt-telemetry-card__link {
    transition: none !important;
  }
  .njt-map-step:hover,
  .njt-telemetry-card:hover { transform: none !important; }
  .njt-form-success { animation: none !important; }
}

/* ═══════════════════════════════════════
   13. V4 — DEMO-STATE MICROCOPY ABOVE SUBMIT (G8)
   The Phase-2 disclosure used to arrive only AFTER submit, once the user's
   message had already been discarded. Stating it before the button — with the
   two live channels as real links — turns a dead end into a conversion.
═══════════════════════════════════════ */
.njt-form-premium__demo-note {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-white-70, rgba(255,255,255,0.7));
  text-align: center;
  margin: 0 0 0.5rem;
}
.njt-form-premium__demo-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}
.njt-form-premium__demo-link {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--racing-yellow, #FFD700);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 215, 0, 0.35);
  padding-bottom: 1px;
  transition: border-color var(--dur-base, 240ms) var(--ease-out, ease);
}
.njt-form-premium__demo-link:hover,
.njt-form-premium__demo-link:focus-visible { border-bottom-color: var(--racing-yellow, #FFD700); }
.njt-form-premium__demo-sep { color: var(--text-white-40, rgba(255,255,255,0.4)); }

/* ═══════════════════════════════════════
   14. V4 — 390px HERO: SCROLL CUE vs QUICK-PILL COLLISION (G8)
   Below 576 the three quick-action pills stack vertically and the third one
   lands on top of the absolutely-positioned scroll cue (bottom: 10rem).
   The cue is a decorative affordance on a screen that is already obviously
   scrollable — retire it at that width rather than growing the hero.
═══════════════════════════════════════ */
@media (max-width: 576px) {
  .njt-hero--contact .njt-hero__scroll { display: none; }
  .njt-hero--contact { padding-bottom: 3rem; }
}

/* ═══════════════════════════════════════
   15. V4 — FAQ: CLOSED ANSWERS MUST NOT HOLD FOCUS (axe: aria-hidden-focus)
   Two of the contact answers contain inline links (pricing, corporate events).
   A collapsed max-height still leaves those anchors tabbable inside an
   aria-hidden="true" container — a serious violation and a real keyboard trap.
   visibility:hidden removes them from the focus order; the delay keeps the
   open animation intact, and it flips to visible instantly on open.
═══════════════════════════════════════ */
.njt-faq__answer {
  visibility: hidden;
  transition: max-height 0.3s ease, visibility 0s linear 0.3s;
}
.njt-faq__item.is-open .njt-faq__answer {
  visibility: visible;
  transition: max-height 0.3s ease, visibility 0s linear 0s;
}