/* ─────────────────────────────────────────
   LAYOUT — Header, Footer, Mobile Nav
   EEST NJT Racing Circuit v2.0
   Design-spec aligned, dropdown nav, cinematic footer
───────────────────────────────────────── */

/* ── 1. Site Header ── */
/* GOAL-V4 §G1 — HEADER MOVED ONTO THE CONTAINER BOX-MODEL (operator decision).
   The bug: the header put its 32px gutter OUTSIDE the 1400 box (`.site-header{padding:0 32px}`
   + `.site-header__inner{max-width:1400}`) while every section puts it INSIDE
   (`.container--wide{max-width:1400; padding:0 32px}`). Same two numbers, two meanings — so
   logo ink and section text ink never landed on the same rail (20px off at 1440, 32px at
   ≥1464) on all 18 routes. Fix: gutter moves to `__inner`, which is now geometrically
   identical to `.container--wide`. `.site-header` keeps padding:0 so the fixed bar's
   background/scrim still spans edge to edge. Do not put horizontal padding back here. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
  transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.site-header.is-scrolled {
  background: rgba(42,0,24,0.95);
  -webkit-backdrop-filter: var(--blur-chrome);
  backdrop-filter: var(--blur-chrome);
  box-shadow: 0 4px 32px rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* Permanent top scrim for the transparent (pre-scroll) header state — guarantees nav-label
   contrast over bright hero imagery (audit §A LOW). Fades out once the glass bg takes over. */
.site-header::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 160%;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.16) 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.site-header.is-scrolled::before { opacity: 0; }

/* ── Skip link — visually hidden until focused (WCAG 2.4.1). Works for the new .skip-link
   master AND legacy pages still shipping class="sr-only" on the skip link (until chrome sync). ── */
.skip-link {
  position: fixed;
  left: 12px; top: 12px;
  z-index: 1100;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-base, 300ms) var(--ease-out, ease);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
a.sr-only[href="#main-content"]:focus,
a.sr-only[href="#main-content"]:focus-visible {
  position: fixed;
  left: 12px; top: 12px;
  width: auto; height: auto;
  margin: 0; padding: 10px 18px;
  clip: auto; overflow: visible; white-space: nowrap;
  z-index: 1100;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
/* The header's container box — geometrically IDENTICAL to `.container--wide` (tokens.css):
   max-width 1400 + 32px gutter INSIDE the box. This is what puts logo ink on the same
   vertical rail as every section's text ink at every width (HOUSE-RULES §9). */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Logo ── */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.site-header__logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--transition), filter var(--transition);
}
.site-header__logo:hover .site-header__logo-img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.2));
}
.site-header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.site-header__logo-text span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-white);
  letter-spacing: 0.5px;
}
.site-header__logo-text small {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
}

/* ── Desktop Nav ── */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.site-header__nav > li {
  position: relative;
}
.site-header__nav > li > a {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-white-80);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  padding: 8px 12px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition), background var(--transition);
}
.site-header__nav > li > a:hover,
.site-header__nav > li > a.is-active {
  color: var(--gold);
  background: rgba(255,255,255,0.05);
}
.site-header__nav > li > a.is-active {
  background: rgba(255,215,0,0.1);
}
/* Underline indicator */
.site-header__nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transition: width var(--transition);
}
.site-header__nav > li > a:hover::after {
  width: 75%;
}
.site-header__nav > li > a.is-active::after {
  width: 75%;
}
/* Flagship "The Circuit" differentiator — gold text at rest ONLY (audit §A / GOAL-V3 §G3).
   Hover/active still add the underline + bg from the base rules. */
.site-header__nav > li > a.nav-flagship {
  color: var(--gold);
}

/* Dropdown chevron */
.dropdown-chevron {
  transition: transform var(--transition);
  opacity: 0.6;
  flex-shrink: 0;
}
.has-dropdown:hover .dropdown-chevron,
.has-dropdown.is-open .dropdown-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ── Dropdown Menu ── */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 200px;
  background: rgba(42,0,24,0.97);
  backdrop-filter: var(--blur-chrome);
  -webkit-backdrop-filter: var(--blur-chrome);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: var(--radius-md);
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,215,0,0.05);
  z-index: 1001;
}
/* Arrow */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: rgba(42,0,24,0.97);
  border-top: 1px solid rgba(255,215,0,0.15);
  border-left: 1px solid rgba(255,215,0,0.15);
}
.has-dropdown:hover > .dropdown-menu,
.has-dropdown.is-open > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-white-80);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.dropdown-menu li a:hover {
  color: var(--gold);
  background: rgba(255,215,0,0.08);
  transform: translateX(4px);
}
.dropdown-menu li a.is-active {
  color: var(--gold);
  background: rgba(255,215,0,0.12);
}
/* Hover bridge — prevents gap between trigger and dropdown */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

/* ── Café nav item icon ── */
.nav-cafe {
  gap: 6px !important;
}
.nav-cafe-icon {
  opacity: 0.7;
  transition: opacity var(--transition);
}
.nav-cafe:hover .nav-cafe-icon {
  opacity: 1;
}

/* ── Header Actions ── */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Language Toggle ── */
.lang-toggle {
  display: flex;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-white-60);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  transition: all var(--transition);
  cursor: pointer;
}
.lang-btn.is-active {
  background: var(--gold);
  color: var(--black);
}
/* Gate-6: the inactive language button had no hover (browser default only). Brighten the
   dimmed label + add a faint fill so it reads interactive but stays distinct from the
   gold-filled active state. focus-visible + active states already defined below. */
.lang-btn:hover:not(.is-active) {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.08);
}

/* ══ CTA Button — Parallelogram System ═══════════════════════════════════════
   HOVER FIELD CONTRACT (A18, round 2). READ THIS BEFORE TOUCHING ANY :hover RULE.

   The hover field is composited from THREE things, in this order:
     ::before  the gold→magenta wash            (--btn-hover-wash,  was a hardcoded 0.62)
     ::after   the gold sheen + 1px backdrop blur (--btn-hover-sheen, was a hardcoded 1)
     the label ink                               (--btn-hover-ink)
   BOTH pseudo-layers LIGHTEN the field. They are legal only under DARK ink.

   Why this is a variable system and not four more :hover::before patches.
   Measured 2026-08-17 on the composited stack (label hidden, hovered, full-viewport
   screenshot, worst pixel inside the parallelogram, 135 buttons / 18 routes):
     baseline                          35 states below 4.5:1, range 1.81–4.36
     ::before disabled                 clears the variants that still ran the wash
     ::after  disabled                 clears the variants whose ::before was already 0
   Neither pseudo-element is "the" culprit — which one fails depends on which patches a
   variant had already collected. `--outline`, `--secondary` and `--outline-gold` had each
   been given a private `:hover::before { opacity: 0 }` in an earlier round and were
   therefore failing on ::after alone (this is the isolation that produced the round-1
   "it's ::after, not ::before" reading, and it is true ONLY on those three). `--glass`
   and the page-level white-ink buttons never got that patch and were failing on ::before.
   The old comments below the :hover rules named ::before as the single cause; that was
   wrong for half the failing set and is corrected here (LESSONS #62).

   THE RULE, and it is one rule: a variant that keeps LIGHT ink must zero BOTH layers.
   Setting the ink and the two washes in the same declaration block makes it impossible
   to change one and forget the other — which is exactly how this survived three rounds.
   If you add a rule that sets `color` on a `.btn-cta`, set the two wash vars with it.
══════════════════════════════════════════════════════════════════════════════ */
.btn-cta {
  --btn-hover-ink: var(--racing-plum);   /* dark ink on the gold/magenta hover field */
  --btn-hover-wash: 0.62;                /* ::before — gold→magenta */
  --btn-hover-sheen: 1;                  /* ::after  — gold sheen */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--btn-primary-bg);
  color: #000;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 24px;
  border-radius: 4px;
  border: 2px solid rgba(255,215,0,0.8);
  text-decoration: none;
  transform: skew(-15deg);
  transition: all var(--transition);
  box-shadow: var(--shadow-btn);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
  isolation: isolate;
}
.btn-cta > * {
  transform: skew(15deg);
  position: relative;
  z-index: 2;
}
.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-hover-bg);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 1;
}
.btn-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(45deg, rgba(255,215,0,0.1), rgba(255,215,0,0.05));
  backdrop-filter: blur(1px);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}
.btn-cta:hover {
  transform: skew(-15deg) translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
  /* A11y (Gate 2, D5 → A18): the primary hover field is a light gold→magenta
     gradient; white text failed (1.4:1 on the gold end). Dark ink clears ≥4.5:1
     across it. Variants that need light ink re-declare --btn-hover-ink AND both
     wash vars together — see the contract block above. */
  color: var(--btn-hover-ink);
}
.btn-cta:hover::before {
  /* Was 0.9 — the full-strength magenta corner drove even dark ink below 4.5:1.
     At 0.62 the gold base bleeds through, keeping the wash gold→magenta-tinted
     while dark-ink text clears ≥4.5:1 at BOTH the gold and the magenta ends.
     Value now comes from --btn-hover-wash so a variant can retire the layer. */
  opacity: var(--btn-hover-wash);
}
.btn-cta:hover::after {
  /* NOT a no-op layer. On any variant whose ::before is already 0 this gold sheen
     is the ONLY thing between the label and AA — measured 2.59–4.36:1 on
     --outline / --secondary / --outline-gold before it was retired for them. */
  opacity: var(--btn-hover-sheen);
}
.btn-cta:active {
  transform: skew(-15deg) scale(0.98) translateY(1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}
.btn-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* ── LIGHT-INK VARIANTS ────────────────────────────────────────────────────────
   Every variant below keeps a light label on a DARK translucent hover field, so both
   lightening layers are retired here — ink and washes declared together, per the
   contract above. Before this pairing existed each variant collected the patches
   one at a time and none of them ever got both: measured on the shipped build,
   --outline 2.59–4.36:1, --secondary 2.74:1, --outline-gold 3.58–4.32:1,
   --glass 1.90–2.36:1. The four `:hover::before { opacity: 0 }` one-offs that used
   to live here are gone — the variables replace them. ── */
.btn-cta--outline,
.btn-cta--secondary,
.btn-cta--glass {
  --btn-hover-ink: #fff;
  --btn-hover-wash: 0;
  --btn-hover-sheen: 0;
}
.btn-cta--gold,
.btn-cta--outline-gold {
  --btn-hover-ink: var(--gold);
  --btn-hover-wash: 0;
  --btn-hover-sheen: 0;
}

/* ── N1 · THE FIELD FLOOR (`--btn-media-scrim`) ────────────────────────────────
   The A18 contract above fixed the ink and the two hover washes. It could not fix a
   variant whose own field is see-through sitting on a picture: `--outline`,
   `--secondary` and `--glass` all paint a WHITE wash, so over a hero video or photo
   the field floor is whatever the media happens to show that frame. Measured on the
   composited stack (1440, glyphs+SVG hidden, worst pixel inside the parallelogram):
     track-info hero  `--outline--large`  over the playing video   2.41 rest / 2.64–2.92 hover
     activities hero  `--outline`         over the hero photo      3.34 rest / 2.69–4.23 hover
   A pass that depends on which video frame is on screen, or on which language shifts
   the box onto darker pixels, is not a pass. So every translucent variant now paints
   `var(--btn-media-scrim)` as its BOTTOM background layer — one token, three
   consumers, no per-instance patch. On the dark plum base the layer is invisible.
   (`index.css:42` had already hand-rolled this for one hero glass CTA — that is the
   per-instance version of this rule, kept because it also carries a gold hairline.)
   Every rule below that sets `background` on these variants must keep the scrim as its
   last layer, hover states included — a `background:` without it re-opens the hole. ── */
.btn-cta--outline {
  background: var(--btn-secondary-bg), var(--btn-media-scrim);
  border: 2px solid rgba(255,255,255,0.4);
  color: white;
  backdrop-filter: blur(var(--blur-card));
}
.btn-cta--outline:hover {
  background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), var(--btn-media-scrim);
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 4px 12px rgba(255,255,255,0.15);
}
.btn-cta--gold {
  background: linear-gradient(135deg, rgba(255,215,0,0.05), rgba(255,215,0,0.1));
  color: var(--gold);
  border: 2px solid var(--gold);
}
.btn-cta--gold:hover {
  background: rgba(255,215,0,0.15);
  --btn-hover-ink: #fff;   /* the gold fill lifts on hover; white reads better on it */
  box-shadow: 0 6px 20px rgba(255,215,0,0.3), inset 0 1px 0 rgba(255,215,0,0.2);
}
/* Outline gold — secondary/external CTA; keeps gold text at rest AND on hover.
   Promoted from racing-team.css + student-stories.css (GOAL-V3 R1 integrator, punch 5).
   !important overrides the base .btn-cta gradient/border. */
.btn-cta--outline-gold {
  background: linear-gradient(135deg, rgba(255,215,0,0.05), rgba(255,215,0,0.1)) !important;
  border: 2px solid var(--gold) !important;
  color: var(--gold) !important;
}
.btn-cta--outline-gold span { color: var(--gold); }
.btn-cta--outline-gold:hover {
  background: rgba(255,215,0,0.15) !important;
  box-shadow: 0 6px 20px rgba(255,215,0,0.3);
}
.btn-cta--secondary {
  background: var(--btn-secondary-bg), var(--btn-media-scrim);   /* N1 field floor */
  backdrop-filter: blur(var(--blur-card));
  border-color: rgba(255,255,255,0.4);
  color: var(--text-white);
}
.btn-cta--secondary:hover {
  background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), var(--btn-media-scrim);
  border-color: rgba(255,255,255,0.6);
}
.btn-cta--large {
  font-size: 18px;
  padding: 16px 40px;
}
.btn-cta--small {
  padding: 10px 24px;
  font-size: 14px;
}
/* ── Relocated from training.css (GOAL-V3 §G1): these modifiers are used on coffee-track,
   about, coaches & index — pages that do NOT load training.css, so they were silently
   unstyled. Living in the btn system (loaded on every page) fixes that sitewide.
   --massive kept distinct from --large (bigger pad + 12px radius + 700 weight, centered). ── */
.btn-cta--massive {
  padding: 1.25rem 2.5rem;
  border-radius: var(--radius-md);
  gap: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.btn-cta__icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}
.btn-cta--massive:hover .btn-cta__icon { transform: translateX(4px); }
.btn-cta--glass {
  background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), var(--btn-media-scrim);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  transition: all 0.3s ease;
}
.btn-cta--glass:hover {
  background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), var(--btn-media-scrim);
  border-color: rgba(255,255,255,0.3);
  /* A6 sibling: this used to be a bare `translateY(-2px)`, same specificity as
     `.btn-cta:hover` and later in the file — so every glass CTA LOST its
     parallelogram the moment the pointer touched it. Skew restored. */
  transform: skew(-15deg) translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  /* ink/wash come from --btn-hover-* (set on the .btn-cta--glass base rule). */
}

/* ── Hamburger ── */
.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none;
  cursor: pointer;
  padding: 4px;
}
.site-header__burger span {
  display: block;
  width: 100%; height: 2px;
  background: white;
  border-radius: 2px;
  transition: all var(--transition);
}
.site-header__burger.is-active span:nth-child(1) {
  transform: rotate(45deg) translateY(5px);
}
.site-header__burger.is-active span:nth-child(2) {
  opacity: 0;
}
.site-header__burger.is-active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-5px);
}

/* ── Mobile Nav Panel ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  background: linear-gradient(135deg, rgba(42,0,24,0.98) 0%, rgba(21,0,16,0.98) 100%);
  backdrop-filter: var(--blur-chrome);
  -webkit-backdrop-filter: var(--blur-chrome);
  z-index: 999;
  padding: 100px 32px 32px;
  /* Closed: translate off-canvas (root overflow-x:clip prevents any scroll bleed) +
     visibility:hidden so a mid-transition frame can never paint the drawer partially open. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
  overflow-y: auto;
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
  border-left: 1px solid rgba(255,215,0,0.15);
}
.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
.mobile-nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.mobile-nav.is-open ~ .mobile-nav__overlay {
  display: block;
  opacity: 1;
}
.mobile-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav__list a {
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-white-80);
  padding: 16px 16px;
  border-radius: 8px;
  border-bottom: none;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.mobile-nav__list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,215,0,0.15) 0%, transparent 100%);
  transition: width 0.3s ease;
  z-index: 0;
}
.mobile-nav__list a:hover::before,
.mobile-nav__list a.is-active::before {
  width: 100%;
}
.mobile-nav__list a:hover {
  color: var(--gold);
  background: rgba(255,215,0,0.08);
  transform: translateX(4px);
}
.mobile-nav__list a.is-active {
  color: var(--gold);
  background: rgba(255,215,0,0.12);
  border-left: 3px solid var(--gold);
}

/* Mobile Nav — Section Divider & Label */
.mobile-nav__divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 12px 0;
  list-style: none;
}
.mobile-nav__section-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 16px 4px;
  list-style: none;
}

/* ── Mobile drawer — grouped sections (v3 master mirrors the desktop 5-group IA) ── */
.mobile-nav__groups {
  display: flex;
  flex-direction: column;
}
.mobile-nav__group + .mobile-nav__group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav__group-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 16px 4px;
}
/* Flagship EEST Circuit link in the drawer — gold text at rest (placed after the base
   .mobile-nav__list a rule so it wins without !important) */
.mobile-nav__list a.mobile-nav__flagship {
  color: var(--gold);
}
/* Drawer CTA — full-width (replaces the removed inline style="width:100%..." on the master) */
.mobile-nav__cta .btn-cta {
  width: 100%;
  justify-content: center;
}

/* Mobile Nav — Social Icons */
.mobile-nav__social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav__social a {
  width: 40px; height: 40px;
  background: rgba(42,0,24,0.5);
  border: 1px solid rgba(212,0,121,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
}
.mobile-nav__social a:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
  transform: scale(1.1);
}

/* Mobile Nav — CTA */
.mobile-nav__cta {
  margin-top: 20px;
  padding-top: 16px;
}

/* Mobile Nav — Language Toggle */
.mobile-nav__lang {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}
.mobile-nav__lang .lang-btn {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.mobile-nav__lang .lang-btn.is-active {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}

/* ── 2. Site Footer (Campaign Level) ── */
.site-footer {
  position: relative;
  background: linear-gradient(to bottom, #11000A, var(--racing-plum), #050505);
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  padding: 80px 32px 0; /* gutter 24→32 to match header + container--wide (HOUSE-RULES §9) */
  overflow: hidden;
  color: var(--text-white);
}

/* Cinematic Background Elements */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
  animation: pulseLine 4s infinite alternate;
}

.site-footer__bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.4) 1px, transparent 0);
  background-size: 32px 32px;
  opacity: 0.03;
  pointer-events: none;
}

.site-footer__glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.15;
}

.site-footer__glow--left {
  background: var(--magenta);
  bottom: -200px;
  left: -200px;
}

.site-footer__glow--right {
  background: var(--gold);
  bottom: -200px;
  right: -200px;
}

/* Staggered entrance animation for scroll */
.site-footer__fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* entrance ≤400ms */
}

.site-footer.is-visible .site-footer__fade-up {
  opacity: 1;
  transform: translateY(0);
}

.site-footer__grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  max-width: var(--max-w);
  margin: 0 auto;
}
/* Footer column/group titles — h2 kept for legacy page copies; h3 + group-title are the
   v3 master (h3 to stop the h2s polluting the document outline on every page — audit §B). */
.site-footer__col h2,
.site-footer__col h3,
.site-footer__group-title {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.site-footer__group + .site-footer__group { margin-top: 24px; }
.site-footer__col h3.is-spaced { margin-top: 24px; }

/* Footer stagger delays as classes (replaces inline style="transition-delay:…" on the master) */
.fade-delay-1 { transition-delay: 0.1s; }
.fade-delay-2 { transition-delay: 0.2s; }
.fade-delay-3 { transition-delay: 0.3s; }
.fade-delay-4 { transition-delay: 0.4s; }
.site-footer__brand {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.site-footer__brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-white);
  margin-bottom: 16px;
}
.site-footer__brand-logo strong {
  font-family: var(--font-heading);
  font-size: 15px;
}
.site-footer__logo-img {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 8px;
  transition: transform var(--transition), filter var(--transition);
}
.site-footer__brand a:hover .site-footer__logo-img {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(255,215,0,0.2));
}
.site-footer__tagline {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}
.site-footer__desc {
  font-size: 14px;
  color: var(--text-white-60);
  line-height: 1.6;
}
.site-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__links a {
  font-size: 14px;
  color: var(--text-white-60);
  text-decoration: none;
  transition: color var(--transition), transform var(--transition);
  display: inline-flex;
  align-items: center;
  position: relative;
}
.site-footer__links a::before {
  content: '\00BB';
  color: var(--gold);
  position: absolute;
  left: -16px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all var(--transition);
}
.site-footer__links a:hover {
  color: var(--gold);
  transform: translateX(16px);
}
.site-footer__links a:hover::before {
  opacity: 1;
  transform: translateX(0);
}
/* Footer link active state */
.site-footer__links a.is-active {
  color: var(--gold);
}
.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-white-60);
  margin-bottom: 16px;
  line-height: 1.6;
  transition: color var(--transition);
  text-decoration: none;
}
a.site-footer__contact-item {
  cursor: pointer;
}
.site-footer__contact-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--gold);
  transition: transform var(--transition), filter var(--transition);
}
.site-footer__contact-item:hover {
  color: white;
}
.site-footer__contact-item:hover svg {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
.site-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.site-footer__social a {
  width: 44px; height: 44px;
  background: rgba(42, 0, 24, 0.5);
  border: 1px solid rgba(212, 0, 121, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.site-footer__social a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
}
.site-footer__social a svg {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
.site-footer__social a:hover {
  transform: scale(1.15) translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
}
.site-footer__social a:hover::before {
  transform: scale(1);
}
.site-footer__social a:hover svg {
  color: var(--black);
}

/* VIP Newsletter Form */
.site-footer__newsletter {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__newsletter p {
  font-size: 13px;
  color: var(--text-white-60);
  margin-bottom: 8px;
}
.newsletter-form {
  display: flex;
  gap: 8px;
  position: relative;
}
.newsletter-form__input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  color: white;
  font-family: var(--font-body);
  font-size: 14px;
  transition: all var(--transition);
  backdrop-filter: blur(var(--blur-chip));
}
.newsletter-form__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15);
}
.newsletter-form__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.newsletter-form__btn {
  background: linear-gradient(135deg, var(--gold), #FFC107);
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  color: black;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2);
}
.newsletter-form__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
  filter: brightness(1.1);
}
/* Inline demo-confirmation shown after a newsletter submit (JS-injected; honest demo state) */
.newsletter-form__confirm {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gold);
}

@keyframes pulseLine {
  0% { opacity: 0.3; }
  100% { opacity: 0.8; }
}

/* ── Footer Bottom Bar ── */
.site-footer__bottom {
  margin-top: 64px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-white-40);
  position: relative;
  z-index: 10;
}
.site-footer__legal {
  display: flex;
  gap: 20px;
}
.site-footer__legal a {
  color: var(--text-white-40);
  text-decoration: none;
}
.site-footer__legal a:hover {
  color: var(--gold);
}

/* ── 3. Responsive ── */
@media (max-width: 1199px) {
  .site-header__nav {
    gap: 2px;
  }
  .site-header__nav > li > a {
    font-size: 12px;
    padding: 8px 8px;
  }
  .site-header__logo-text {
    display: none;
  }
}

@media (max-width: 1023px) {
  .site-header__nav { display: none; }
  .site-header__burger { display: flex; }
  .mobile-nav { display: block; }
  .dropdown-menu { display: none; }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .site-header {
    /* Gutter stays on the container box (see the §1 note) — 16px is the mobile rail. */
    padding: 0;
    height: 64px;
  }
  .site-header__inner { padding: 0 16px; }
  .site-header__logo-img { height: 48px; }
  .site-header__logo-text { display: none; }
  .site-footer__logo-img { height: 64px; }

  .site-footer {
    padding-top: 64px;
  }
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .site-footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    margin-top: 40px;
  }
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-form__btn {
    padding: 12px;
  }
  /* A6 (Gate 10, round 2): this block used to add `transform: skew(0)` to .btn-cta,
     .btn-cta > *, :hover and :active — four declarations that cancelled the brand's
     signature parallelogram on EVERY button on EVERY route below 768px. It was the
     single rule flipping Gate 10 red on mobile. Removed; the base rules in §"CTA
     Button — Parallelogram System" (skew(-15deg) / counter-skew(15deg) on the label)
     now govern at every width. Only the metric overrides stay here.
     Overflow note: skew widens a button's PAINTED box by h·tan15 (~11px at h=40),
     not its layout box. Verified 0 horizontal scroll on 18/18 routes at 360/390
     after the change — the widest full-width CTA still sits inside the 16px rail. */
  .btn-cta,
  .btn-cta--large {
    font-size: 14px;
    padding: 12px 24px;
  }
  .btn-cta--massive {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE HEADER ACTION CLUSTER ≤480 (GOAL-V4 §G7 / C3 — CRITICAL, all 18 routes,
   first screen). The defect: the ≤767 `.btn-cta{padding:12px 24px}` produced a ~70px
   button inside a 64px bar because the Thai label "จองเลย" wrapped to two lines once the
   lang toggle + burger squeezed the flex line — which then pushed the hamburger ~1.3px
   off-canvas at 360/390. Fix is metric, not layout: nowrap the label, put the button on a
   fixed 40px height (still ≥ the 40px touch floor for a header control that sits beside a
   44px-tall lang toggle), tighten the gaps, and drop the logo to 40px.
   Arithmetic at 360: inner = 360 − 32 (16px rail ×2) = 328 available.
     logo 40px tall × (141/56) = 101 · lang toggle ≈ 68 · CTA ≈ 78 · burger 32 · 2 gaps @8 = 16
     → 295 used, 33px of slack. Fits with margin; nothing clips.
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .site-header__logo-img { height: 40px; }
  .site-header__actions { gap: 8px; }

  .site-header__actions .btn-cta {
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1;
    border-width: 1px;
    /* The whole point: one line, always. */
    white-space: nowrap;
    justify-content: center;
    flex-shrink: 0;
  }
  .site-header__actions .btn-cta > span { white-space: nowrap; }

  .lang-toggle { flex-shrink: 0; }
  .lang-btn { padding: 6px 10px; font-size: 11px; }

  .site-header__burger {
    width: 32px; height: 32px;
    flex-shrink: 0;
  }

  /* The drawer CTA is NOT in the bar — it keeps full-width comfort metrics. */
  .mobile-nav__cta .btn-cta { height: auto; padding: 12px 24px; font-size: 14px; }
}

/* Footer Intersection Observer Animation Helper */
.js-footer-observer .site-footer__fade-up {
  opacity: 0;
  transform: translateY(30px);
}
.js-footer-observer.is-visible .site-footer__fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* ── 4. Print ── */
@media print {
  .site-header, .site-footer, .mobile-nav, .mobile-nav__overlay { display: none; }
  body { color: #000; background: #fff; }
}

/* ═══════════════════════════════════════════════
   GLOBAL INTERACTION — Focus / Active / Reduced-Motion
   (Batch 3, Theme E — applies site-wide via layout.css)
═══════════════════════════════════════════════ */

/* Consistent on-brand keyboard focus ring for EVERY interactive element.
   Racing-yellow outline + offset + dark halo so it reads on both dark and light surfaces.
   Mouse users keep component-specific :focus (e.g. gold input borders); only keyboard focus shows this. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
label:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="link"]:focus-visible,
[contenteditable]:focus-visible,
.btn:focus-visible,
.btn-cta:focus-visible,
.site-nav a:focus-visible,
.mobile-nav a:focus-visible,
.site-header__burger:focus-visible,
.lang-btn:focus-visible,
.njt-faq__question:focus-visible,
.testimonials-dot:focus-visible,
.gl-filter-btn:focus-visible,
.gl-lightbox__close:focus-visible,
.gl-lightbox__nav:focus-visible,
.njt-gallery__item:focus-visible {
  outline: 2px solid var(--racing-yellow);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(42, 0, 24, 0.55);
  border-radius: 4px;
}

/* Designed pressed/active feedback for generic controls that lacked one */
a:active,
button:active,
[role="button"]:active,
.lang-btn:active,
.testimonials-dot:active,
.gl-filter-btn:active,
.njt-faq__question:active {
  transform: translateY(1px);
}

/* Global reduced-motion kill-switch — honor user preference on every route */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}