/* ============================================================
   NEXT LEVEL TRAINING ACADEMY - shared page CSS.
   Layout + components only. All color/font/radius decisions come
   from system/core.css (structure) + theme.css (this brand) - never
   hardcode a hex or font-family here; use the var() tokens.

   Round 3: bigger properly-proportioned logo, a mobile nav that actually
   opens (round 2 toggled a class with no matching CSS - dead button),
   an explicit tablet tier (768-1023px) instead of jumping straight from
   desktop to phone, and real motion (stagger reveals, count-up stats,
   hero parallax, card hover lift, animated nav underline, drawn dividers).
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 10vh, 120px) 0; position: relative; }
.section--deep { background: var(--bg-deep); }
.section--surface { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Halftone dot texture - the one real decorative asset from their old site
   worth keeping (the "torn edge" mask + stripe pattern read dated; this
   halftone corner accent doesn't). Used sparingly, low-opacity, corners only. */
.texture-dots { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.texture-dots::before {
  content: ''; position: absolute; top: -10%; right: -6%; width: 46%; height: 120%;
  background: url('./dots.png') center/contain no-repeat;
  opacity: 0.16; filter: invert(1); /* source dots are dark ink - invert to read on our dark bg */
}

/* ----- NAV ----- */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: padding .25s var(--ease), background .25s var(--ease);
}
.nav.is-scrolled { padding: 10px var(--gutter); background: color-mix(in srgb, var(--bg) 96%, transparent); }
.nav__logo { display: flex; align-items: center; }
.nav__logo-img { height: 46px; width: auto; display: block; transition: height .25s var(--ease); }
.nav.is-scrolled .nav__logo-img { height: 38px; }
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__link { position: relative; font-family: var(--font-tech); font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); transition: color .15s; padding: 4px 0; }
.nav__link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--accent); transition: width .25s var(--ease); }
.nav__link:hover, .nav__link.is-active { color: var(--fg); }
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }
.nav__cta { display: none; }
@media (min-width: 860px) { .nav__cta { display: inline-flex; } }

.nav__burger { display: none; position: relative; width: 40px; height: 40px; background: none; border: 1px solid var(--border-neutral); border-radius: var(--radius); cursor: pointer; z-index: 110; }
.nav__burger span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--fg); transition: transform .25s var(--ease), opacity .25s var(--ease), top .25s var(--ease); }
.nav__burger span:nth-child(1) { top: 13px; }
.nav__burger span:nth-child(2) { top: 19px; }
.nav__burger span:nth-child(3) { top: 25px; }
.nav__burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 859px) {
  /* backdrop-filter on .nav creates a CSS containing block for fixed-position
     descendants (a known filter/backdrop-filter/transform gotcha) - without
     this, .nav__links below is "fixed" relative to the ~64px nav bar instead
     of the viewport, so the mobile menu only fills the header's own height. */
  .nav { backdrop-filter: none; }
  .nav__links {
    position: fixed; inset: 0; top: 0; z-index: 105;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: var(--bg-deep);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { font-size: 22px; padding: 14px 0; }
  .nav__burger { display: inline-flex; }
}

/* ----- BUTTONS ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; font-family: var(--font-tech); font-size: 12px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1.5px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: transform .18s var(--ease), background .18s, color .18s, border-color .18s, box-shadow .25s;
  white-space: nowrap; position: relative;
}
.btn .ar { transition: transform .18s var(--ease); display: inline-block; }
.btn:hover .ar { transform: translateX(4px); }
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 12px 34px var(--red-glow); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-2px); }
.btn--ink { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 32%, transparent); }
.btn--ink:hover { border-color: var(--accent); color: var(--accent); }
.btn--lg { padding: 18px 32px; font-size: 13px; }
.btn--block { width: 100%; }

/* pulse ring on the primary hero CTA only - subtle, stops after a few beats */
.btn--pulse { animation: btnPulse 2.6s ease-out 1.2s 3; }
@keyframes btnPulse {
  0% { box-shadow: 0 0 0 0 var(--red-glow), var(--shadow-cta); }
  70% { box-shadow: 0 0 0 14px rgba(226,52,42,0), var(--shadow-cta); }
  100% { box-shadow: 0 0 0 0 rgba(226,52,42,0), var(--shadow-cta); }
}

/* ----- HERO ----- */
.hero { position: relative; overflow: hidden; padding: clamp(120px, 20vh, 200px) 0 clamp(80px, 12vh, 120px); background: var(--bg-deep); }
.hero__bg { position: absolute; inset: -10% -5%; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.1) contrast(1.1) brightness(.4); transform: scale(1.08); animation: heroZoom 26s ease-in-out infinite alternate; }
@keyframes heroZoom { from { transform: scale(1.08) translateY(0); } to { transform: scale(1.16) translateY(-1.5%); } }
.hero__ov { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(5,5,6,.95) 30%, rgba(5,5,6,.55) 68%, rgba(5,5,6,.78)); }
.hero__in { position: relative; z-index: 2; max-width: 720px; container-type: inline-size; }
/* Two lines, always, at any screen size - the shared --t-hero token floors at
   56px, too wide for "NEXT LEVEL." to stay on one line under ~360px, so each
   line is its own nowrap block with a lower floor of its own instead of
   relying on natural wrap. */
.hero__title { margin: 18px 0 20px; display: flex; flex-direction: column; font-size: clamp(30px, 13cqw, 100px); }
.hero__line { display: block; white-space: nowrap; }

/* Classic "loading..." indicator standing in for the headline's period: 3
   square blocks (matching the logo's hard geometric edges, not circles)
   drift in a slow, subtle wave - a small lift, not a hop. */
.hero__dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.14em;
  margin-left: 0.08em;
  height: 0.32em;
  vertical-align: -0.02em;
}
.hero__dot {
  display: block;
  width: 0.2em;
  height: 0.2em;
  background: currentColor;
  animation: heroDotBounce 1.7s var(--ease) infinite;
}
.hero__dot:nth-of-type(2) { animation-delay: .22s; }
.hero__dot:nth-of-type(3) { animation-delay: .44s; }
@keyframes heroDotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .55; }
  40%           { transform: translateY(-0.16em); opacity: 1; }
}

/* Dot 1 takes turns: bounce with the other two for most of the cycle,
   go still, spin once clockwise, then drop back into the bounce - never
   bouncing and spinning at the same time. One shared 2.4s timeline split
   across two elements (a single element can't run an independent bounce
   transform and an independent rotate transform together): the outer
   ".hero__dot-spin" is idle at 0deg through the bounce window then turns
   360deg clockwise in the last third, the inner ".hero__dot-shape" bounces
   through the first two-thirds (same shape as heroDotBounce) then holds
   flat while the outer element spins. The chamfered corner is what makes
   the turn actually visible - a plain solid square looks identical at
   every point in a rotation otherwise. */
.hero__dot-spin {
  display: block;
  width: 0.2em;
  height: 0.2em;
  transform-origin: center;
  animation: heroDotSpinTurn 2.4s var(--ease) infinite;
}
.hero__dot-shape {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%, 0 65%);
  animation: heroDotSpinBounce 2.4s var(--ease) infinite;
}
@keyframes heroDotSpinTurn {
  0%, 70%  { transform: rotate(0deg); }
  100%     { transform: rotate(360deg); }
}
@keyframes heroDotSpinBounce {
  0%, 56%, 100% { transform: translateY(0); opacity: .55; }
  28%           { transform: translateY(-0.16em); opacity: 1; }
}
/* Deliberately NOT gated behind prefers-reduced-motion - Rosano's call:
   this is a small decorative flourish, always animate it. Every other
   motion on this page (hero zoom, button pulse, scroll reveals) still
   respects reduced-motion below. */
.hero__lede { max-width: 44ch; margin-bottom: 32px; }
.hero__row { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats { position: relative; display: flex; gap: clamp(28px, 5vw, 64px); margin-top: 64px; flex-wrap: wrap; }
.hero__stat-n { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); color: var(--accent); line-height: 1; }
.hero__stat-l { font-family: var(--font-tech); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-subtle); margin-top: 8px; }

/* ----- SECTION HEAD ----- */
.sec-head { max-width: 640px; margin-bottom: 48px; }
.sec-head .ds-h2 { margin-top: 14px; }
.sec-head--center { margin-inline: auto; text-align: center; }

/* ----- CARDS / GRID ----- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border-neutral); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-6px); border-color: var(--border-accent); }
.card--feat { border-color: var(--accent); }
.card__icon { width: 46px; height: 46px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--accent); font-size: 18px; transition: transform .3s var(--ease); }
.card:hover .card__icon { transform: scale(1.1) rotate(-6deg); }
.card h3 { font-family: var(--font-display); font-size: 21px; text-transform: uppercase; margin: 0 0 10px; }
.card p { color: var(--fg-muted); font-size: 15px; line-height: 1.6; margin: 0; }

/* photo card - a card whose body is an image, used for the gallery strip */
.pcard { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border-neutral); aspect-ratio: 4/5; }
.pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pcard:hover img { transform: scale(1.07); }
.pcard__ov { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,5,6,.88) 100%); }
.pcard__label { position: absolute; left: 16px; bottom: 14px; right: 16px; font-family: var(--font-tech); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-bright); }

/* ----- COACH CARDS (About > coaching staff grid) ----- */
.coach-card__name { margin-top: 16px; font-size: 20px; }
.coach-card__role { margin-top: 4px; }
.coach-card__bio { margin-top: 10px; font-size: 14px; }
/* Koi Lebrane and Troy Adams have no confirmed personal photo on the
   academy's own site either (their listing there uses a generic stock
   shot, not a headshot) - a monogram tile is honest about that instead of
   passing off a stock photo as their portrait. */
.coach-card__mono { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-deep); font-family: var(--font-display); font-size: 56px; color: var(--accent); opacity: .55; }

/* ----- PILLS ----- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; padding: 6px 13px; border: 1px solid var(--border-neutral); border-radius: 999px; color: var(--fg-muted); }
.pill.is-accent { border-color: var(--border-accent); color: var(--accent); }
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

/* ----- CTA BAND ----- */
.ctaband { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 44px var(--gutter); background: var(--accent); border-radius: var(--radius); }
.ctaband__k { font-family: var(--font-tech); font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--on-accent); opacity: .8; position: relative; z-index: 1; }
.ctaband h3 { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 40px); text-transform: uppercase; color: var(--on-accent); margin: 6px 0 0; line-height: .98; }
.ctaband .btn--dark { position: relative; z-index: 1; background: var(--bg); color: var(--accent); border-color: var(--bg); }
.ctaband .btn--dark:hover { background: var(--bg-deep); }

/* ----- PRICING ----- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.tier { border: 1px solid var(--border-neutral); border-radius: var(--radius); padding: 30px; background: var(--surface); display: flex; flex-direction: column; transition: transform .3s var(--ease), border-color .3s; }
.tier:hover { transform: translateY(-4px); }
.tier.is-feat { border: 1.5px solid var(--accent); }
.tier__name { font-family: var(--font-tech); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-subtle); }
.tier__price { font-family: var(--font-display); font-size: 50px; color: var(--accent); line-height: .9; margin: 14px 0 4px; }
.tier__price span { font-size: 14px; color: var(--fg-subtle); font-family: var(--font-body); font-weight: 500; }
.tier ul { list-style: none; margin: 18px 0; padding: 0; flex: 1; font-size: 14px; color: var(--fg-muted); }
.tier li { padding: 7px 0 7px 22px; position: relative; }
.tier li::before { content: '-'; position: absolute; left: 2px; color: var(--accent); }
.tier .btn { width: 100%; }
.pricing-note { margin-top: 20px; font-size: 12.5px; color: var(--fg-subtle); }

/* ----- FORM ----- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--fg);
  background: var(--bg-deep); border: 1px solid var(--border-neutral); border-radius: var(--radius);
  padding: 13px 14px; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--red-line); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-subtle); }
.field.has-error input, .field.has-error select { border-color: var(--red); }
.field__err { display: none; font-size: 12px; color: var(--red-soft); margin-top: 6px; }
.field.has-error .field__err { display: block; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--fg-muted); margin-bottom: 14px; line-height: 1.5; }
.check-row input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.form-card { background: var(--surface); border: 1px solid var(--border-neutral); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-card); }
.form-trust { text-align: center; font-size: 12px; color: var(--fg-subtle); margin-top: 14px; }

/* ----- FOOTER ----- */
.footer { padding: 64px 0 32px; border-top: 1px solid var(--border); background: var(--bg-deep); }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.footer__logo-img { height: 40px; width: auto; display: block; margin-bottom: 16px; }
.footer__addr { font-size: 14px; color: var(--fg-muted); line-height: 1.7; max-width: 320px; }
.footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer__col h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 14px; }
.footer__col a { display: block; font-size: 14px; color: var(--fg-muted); margin-bottom: 10px; transition: color .15s; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-subtle); }

/* ----- MOTION ----- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
/* stagger: apply .stagger to a parent, children get an increasing delay */
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

.divider { position: relative; height: 1px; background: var(--border); border: none; margin: 0; overflow: hidden; }
.divider__fill { position: absolute; inset: 0; width: 0; background: var(--accent); transition: width 1.1s var(--ease); }
.divider.is-in .divider__fill { width: 100%; }

.empty-note { font-size: 13px; color: var(--fg-subtle); font-style: normal; padding: 16px 0; }

/* ----- PROGRAM SELECTOR (tabs + panels) ----- */
.ptabs { display: flex; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0; margin-bottom: 44px; }
.ptab {
  font-family: var(--font-tech); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-subtle); background: none; border: none; border-bottom: 2px solid transparent;
  padding: 14px 4px; margin-right: 22px; cursor: pointer; transition: color .2s, border-color .2s;
  display: flex; align-items: center; gap: 8px;
}
.ptab:hover { color: var(--fg-muted); }
.ptab.is-active { color: var(--fg); border-color: var(--accent); }
.ptab__n { font-family: var(--font-display); font-size: 15px; color: var(--fg-subtle); }
.ptab.is-active .ptab__n { color: var(--accent); }

.ppanel { display: none; }
.ppanel.is-active { display: block; animation: panelIn .4s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ptrain { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
@media (max-width: 620px) { .ptrain { grid-template-columns: 1fr; } }
.ptrain li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--fg-muted); line-height: 1.5; padding: 4px 0; }
.ptrain li::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 6px; background: var(--accent); border-radius: 999px; }

/* ----- BOOKING FLOW (free trial: form -> pick a time -> confirmed) ----- */
.fsteps { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.fstep { display: flex; align-items: center; gap: 8px; font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); }
.fstep__dot { width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--border-neutral); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 11px; color: var(--fg-subtle); flex: none; }
.fstep.is-active { color: var(--fg); }
.fstep.is-active .fstep__dot { border-color: var(--accent); color: var(--accent); }
.fstep.is-done .fstep__dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fstep__line { width: 24px; height: 1px; background: var(--border-neutral); flex: none; }

.fpage { display: none; }
.fpage.is-active { display: block; animation: panelIn .4s var(--ease); }

.slotgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 24px; }
@media (max-width: 480px) { .slotgrid { grid-template-columns: 1fr; } }
.slotcard {
  border: 1.5px solid var(--border-neutral); border-radius: var(--radius); background: var(--bg-deep);
  padding: 16px 10px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.slotcard:hover { border-color: var(--border-accent); }
.slotcard.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.slotcard__dow { font-family: var(--font-tech); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle); }
.slotcard.is-on .slotcard__dow { color: var(--accent); }
.slotcard__date { font-family: var(--font-display); font-size: 22px; margin: 4px 0; }
.slotcard__time { font-size: 13px; color: var(--fg-muted); }

/* ----- FULL CALENDAR (free trial step 2: "view more times") ----- */
.cal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-neutral); }
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__navbtn { width: 32px; height: 32px; border-radius: var(--radius); border: 1px solid var(--border-neutral); background: var(--bg-deep); color: var(--fg); cursor: pointer; font-size: 14px; transition: border-color .15s, color .15s; }
.cal__navbtn:hover { border-color: var(--border-accent); color: var(--accent); }
.cal__navbtn:disabled { opacity: .35; cursor: not-allowed; }
.cal__navbtn:disabled:hover { border-color: var(--border-neutral); color: var(--fg); }
.cal__month { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; }
.cal__head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal__head span { text-align: center; font-family: var(--font-tech); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 13px; border-radius: var(--radius); border: 1px solid transparent; background: none; color: var(--fg-subtle);
}
.cal__cell--empty { visibility: hidden; }
.cal__cell--off { color: var(--fg-subtle); opacity: .4; }
.cal__cell--on {
  cursor: pointer; color: var(--fg); border-color: var(--border-neutral); background: var(--bg-deep);
  transition: border-color .15s, background .15s, color .15s;
}
.cal__cell--on:hover { border-color: var(--border-accent); color: var(--accent); }
.cal__cell--on.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 700; }
.cal__key { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: middle; margin-right: 2px; }
.cal__key--on { background: var(--bg-deep); border: 1px solid var(--border-neutral); }
.cal__key--off { background: none; border: 1px solid var(--border-neutral); opacity: .4; }

.confirm-box { background: var(--bg-deep); border: 1px solid var(--border-neutral); border-radius: var(--radius); padding: 22px 24px; margin: 22px 0; }
.confirm-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border-neutral); font-size: 14.5px; }
.confirm-row:last-child { border-bottom: none; }
.confirm-row__k { font-family: var(--font-tech); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); }
.confirm-row__v { color: var(--fg); font-weight: 600; text-align: right; }

.done-badge { width: 64px; height: 64px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 28px; margin-bottom: 20px; }

@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .btn--pulse { animation: none; }
  .ppanel.is-active, .fpage.is-active { animation: none; }
}

/* ---- footer contact line ---------------------------------------------- */
.footer__contact { margin: 10px 0 0; font-size: 14px; }
.footer__contact a { color: var(--accent); text-decoration: none; }
.footer__contact a:hover { text-decoration: underline; }

/* ---- The Next Level Advantage ----------------------------------------- */
.advantage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.advantage__item {
  border: 1px solid var(--border-neutral); border-radius: var(--radius);
  background: var(--surface); padding: 28px 26px 30px;
  transition: transform .3s var(--ease), border-color .3s;
}
.advantage__item:hover { transform: translateY(-4px); border-color: var(--border-accent); }
.advantage__n {
  font-family: var(--font-tech); font-size: 12px; letter-spacing: .12em;
  color: var(--accent); display: block; margin-bottom: 14px;
}
.advantage__item h3 { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; margin: 0 0 10px; }
.advantage__item p { color: var(--fg-muted); font-size: 15px; line-height: 1.65; margin: 0; }
@media (max-width: 900px) { .advantage { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .advantage { grid-template-columns: 1fr; } }

/* ---- Glofox booking portal --------------------------------------------
   The frame is pulled up by --glofox-crop so only the class listing shows.
   Glofox renders its own Classes/Courses/Memberships/Appointments tab bar at
   the top of that page; the owner asked for classes only, with no pricing and
   no private appointments on the public schedule, and those tabs are the way
   in to all three. Cross-origin, so cropping is the only lever we have.
   ---------------------------------------------------------------------- */
.glofox { --glofox-crop: 76px; }
.glofox__frame {
  position: relative; overflow: hidden;
  height: clamp(820px, 96vh, 1260px);
  border: 1px solid var(--border-neutral); border-radius: var(--radius);
  background: #fff;
}
.glofox__loading {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-tech); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: #6b6b76; background: #fff;
}
.glofox__frame iframe {
  position: absolute; top: calc(var(--glofox-crop) * -1); left: 0;
  width: 100%; height: calc(100% + var(--glofox-crop)); border: 0;
}
.glofox__note { margin: 14px 0 0; font-size: 14px; color: var(--fg-subtle); }
.glofox__note a { color: var(--accent); }
@media (max-width: 720px) { .glofox { --glofox-crop: 122px; } }

/* ---- Articles ---------------------------------------------------------- */
.postcard { display: flex; flex-direction: column; gap: 10px; }
.postcard .ds-eyebrow { color: var(--fg-subtle); }
.postcard h3 { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; line-height: 1.2; margin: 0; }
.postcard p { color: var(--fg-muted); font-size: 15px; line-height: 1.6; margin: 0; }

.article { max-width: 720px; margin: 0 auto; }
.article__meta {
  font-family: var(--font-tech); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-subtle); margin: 0 0 18px;
}
.article__body { margin-top: 34px; }
.article__body p { color: var(--fg-muted); font-size: 17px; line-height: 1.75; margin: 0 0 20px; }
.article__body h2 {
  font-family: var(--font-display); font-size: clamp(23px, 3vw, 30px);
  text-transform: uppercase; letter-spacing: var(--ls-display);
  margin: 42px 0 16px; color: var(--fg);
}
.article__body h2:first-child { margin-top: 0; }
.article__body strong { color: var(--fg); }
.article__body a { color: var(--accent); }
.article__body ul { margin: 0 0 20px; padding: 0; list-style: none; }
.article__body ul li {
  color: var(--fg-muted); font-size: 17px; line-height: 1.7;
  padding: 6px 0 6px 22px; position: relative;
}
.article__body ul li::before { content: '-'; position: absolute; left: 2px; color: var(--accent); }
.article__body blockquote {
  margin: 26px 0; padding: 20px 24px;
  border-left: 2px solid var(--accent); background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article__body blockquote p { margin: 0; font-size: 16px; }
.article__nav {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--border-neutral);
}

/* =====================================================================
   LEVEL UP LAYER (2026-09-28 revamp)
   The brand is literally "NXT LVL", so the whole site now plays like a
   game menu: a boot screen on first visit, an XP bar that fills as you
   scroll, "level unlocked" toasts per section, character-select program
   cards, a scroll-unlocked progression path, and a live location HUD.
   Everything below is additive on top of the rules above; the only
   non-red hue is --live (the "open now" dot). Motion is off under
   prefers-reduced-motion except the hero dots (Rosano's call, above).
   ===================================================================== */

::selection { background: var(--accent); color: var(--on-accent); }
html { scrollbar-color: var(--ink-line) var(--bg-deep); }

/* film grain over everything - keeps the flat blacks from looking digital */
body::before {
  content: ''; position: fixed; inset: -50%; z-index: 9000; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}

/* one cinematic grade on every photo so 17 shots from different days read as one shoot */
.pcard img, .sel__img, .bento__item img, .phero__bg img, .roster__img img { filter: contrast(1.06) saturate(.92); }

/* ---------- buttons: light sweep + magnetic ---------- */
.btn { overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary.btn--pulse { overflow: visible; }
.btn[data-magnetic] { transition: transform .25s var(--ease), background .18s, color .18s, border-color .18s, box-shadow .25s; }

/* ---------- HUD corner brackets (reused on hero, map, page heroes) ---------- */
.hud { position: absolute; inset: 18px; pointer-events: none; z-index: 3; }
.hud i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--hud-line); }
.hud i:nth-child(1) { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; }
.hud i:nth-child(2) { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; }
.hud i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.hud i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.hud--accent i { border-color: var(--accent); }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-tech); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-muted); padding: 7px 12px; border: 1px solid var(--hud-line);
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent); backdrop-filter: blur(6px);
  border-radius: var(--radius);
}
.tag b { color: var(--fg); font-weight: 400; }

/* live status dot, shared by every live chip */
.ldot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex: none; }
.ldot::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; border: 1.5px solid currentColor; opacity: 0; color: var(--accent); animation: ldotPing 1.8s var(--ease) infinite; }
.is-open .ldot, .ldot.is-open { background: var(--live); box-shadow: 0 0 10px var(--live-glow); }
.is-open .ldot::after, .ldot.is-open::after { color: var(--live); }
@keyframes ldotPing { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }

/* ---------- XP bar + level chip (injected into .nav by site.js) ---------- */
.xp { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; overflow: hidden; }
.xp i { display: block; height: 100%; width: calc(var(--xp, 0) * 100%); background: linear-gradient(90deg, var(--accent), var(--red-soft)); box-shadow: 0 0 12px var(--red-glow); transition: width .12s linear; }
.xp__chip {
  display: none; align-items: center; gap: 8px; margin-left: auto; margin-right: 18px;
  font-family: var(--font-tech); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-subtle);
}
.xp__chip b { color: var(--accent); font-weight: 400; min-width: 2ch; display: inline-block; }
.xp__chip .xp__mini { width: 54px; height: 4px; background: var(--ink-line); border-radius: 2px; overflow: hidden; }
.xp__chip .xp__mini i { display: block; height: 100%; width: calc(var(--xp, 0) * 100%); background: var(--accent); }
@media (min-width: 1180px) { .xp__chip { display: inline-flex; } }
.xp__chip.is-bump b { animation: chipBump .5s var(--ease); }
@keyframes chipBump { 40% { transform: scale(1.5); color: var(--paper-bright); } }

/* ---------- LEVEL UP toast ---------- */
.lvlup {
  position: fixed; left: 20px; bottom: 20px; z-index: 8000; pointer-events: none;
  display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; min-width: 240px;
  background: color-mix(in srgb, var(--bg-deep) 92%, transparent); border: 1px solid var(--border-accent);
  border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  transform: translateY(24px) scale(.96); opacity: 0; transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.lvlup.is-show { transform: none; opacity: 1; }
.lvlup a { pointer-events: auto; color: var(--accent); }
.lvlup__badge {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: 16px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.lvlup.is-show .lvlup__badge { animation: badgeSpin .7s var(--ease); }
@keyframes badgeSpin { from { transform: rotateY(180deg) scale(.4); } to { transform: none; } }
.lvlup__k { font-family: var(--font-tech); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.lvlup__t { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; color: var(--fg); margin-top: 2px; }
.lvlup::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.lvlup.is-show::after { animation: toastTimer 2.6s linear forwards; }
@keyframes toastTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 600px) { .lvlup { left: 12px; right: 12px; bottom: 12px; min-width: 0; } }

/* ---------- BOOT SCREEN (home, first visit per session) ---------- */
.boot {
  position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center;
  background: var(--bg-deep); color: var(--fg);
  clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.7,0,.2,1);
  animation: bootFailsafe 0s 4s forwards; /* if JS never runs, never trap the page */
}
.no-boot .boot { display: none; }
.boot.is-done { clip-path: inset(0 0 100% 0); }
@keyframes bootFailsafe { to { visibility: hidden; opacity: 0; } }
.boot__in { width: min(420px, 78vw); text-align: center; }
.boot__logo { height: 64px; width: auto; margin: 0 auto 34px; opacity: 0; animation: bootLogo .6s var(--ease) .05s forwards; }
@keyframes bootLogo { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.boot__row { display: flex; justify-content: space-between; font-family: var(--font-tech); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 10px; }
.boot__row b { color: var(--fg); font-weight: 400; }
.boot__bar { height: 6px; background: var(--ink-line); border-radius: 2px; overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--red-soft)); box-shadow: 0 0 18px var(--red-glow); }
.boot__segs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 8px; }
.boot__segs span { height: 3px; background: var(--ink-line); transition: background .15s; }
.boot__segs span.is-on { background: var(--accent); }
.boot__up {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(54px, 12vw, 150px); color: var(--accent);
  text-transform: uppercase; letter-spacing: -.01em; opacity: 0; text-shadow: 0 0 60px var(--red-glow);
}
.boot.is-lvlup .boot__up { animation: lvlBurst .75s var(--ease) forwards; }
.boot.is-lvlup .boot__in { transition: opacity .25s; opacity: 0; }
@keyframes lvlBurst { 0% { opacity: 0; transform: scale(.6); filter: blur(12px); } 45% { opacity: 1; transform: scale(1.04); filter: none; } 100% { opacity: 1; transform: scale(1); } }

/* ---------- SPLIT TEXT (hero + page titles) ---------- */
.split .w { display: inline-block; white-space: nowrap; }
.split .c { display: inline-block; opacity: 0; transform: translateY(.55em) rotateX(-70deg); filter: blur(6px); transform-origin: 50% 100%; }
.is-ready .split .c { animation: charIn .8s var(--ease) forwards; animation-delay: calc(var(--ci) * 28ms + 80ms); }
@keyframes charIn { to { opacity: 1; transform: none; filter: none; } }

/* ---------- HERO v2 ---------- */
.hero--lvl { min-height: 100svh; display: flex; align-items: center; padding: clamp(110px, 16vh, 170px) 0 clamp(110px, 14vh, 150px); }
.hero--lvl .hero__ov { background:
  radial-gradient(600px circle at var(--mx, 70%) var(--my, 40%), rgba(226,52,42,.16), transparent 60%),
  linear-gradient(100deg, rgba(5,5,6,.96) 28%, rgba(5,5,6,.6) 64%, rgba(5,5,6,.82)),
  linear-gradient(0deg, var(--bg) 0%, transparent 22%); }
.hero--lvl .hero__in { width: 100%; max-width: var(--container); }
.hero--lvl .hero__title { font-size: clamp(40px, 8.4cqw, 118px); }
.hero--lvl .hero__lede { max-width: 50ch; }
.hero__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--hud-line) 1px, transparent 1px), linear-gradient(90deg, var(--hud-line) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at 75% 45%, #000 0%, transparent 62%); -webkit-mask-image: radial-gradient(ellipse at 75% 45%, #000 0%, transparent 62%); }
.hero__scan { position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(226,52,42,.03) 85%, rgba(226,52,42,.09) 100%); animation: scan 9s linear infinite; }
@keyframes scan { from { transform: translateY(-110%); } to { transform: translateY(420%); } }
.hero__hud-top { position: absolute; top: clamp(84px, 12vh, 110px); right: var(--gutter); z-index: 3; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.hero--lvl .hero__title em { color: var(--accent); text-shadow: 0 0 40px var(--red-glow); }
.is-ready .hero--lvl .hero__title em .c { animation: charIn .8s var(--ease) forwards, chroma 1.1s steps(2) calc(var(--ci) * 28ms + 900ms) 1; }
@keyframes chroma { 0% { text-shadow: -3px 0 rgba(0,200,255,.6), 3px 0 var(--red); } 50% { text-shadow: 2px 0 rgba(0,200,255,.5), -2px 0 var(--red); } 100% { text-shadow: 0 0 40px var(--red-glow); } }
.hero__fade { opacity: 0; transform: translateY(16px); }
.is-ready .hero__fade { animation: fadeUp .9s var(--ease) forwards; animation-delay: var(--d, .6s); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

.hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; max-width: 640px; }
.hstat { position: relative; padding: 14px 16px 16px; border: 1px solid var(--hud-line); border-radius: var(--radius); background: color-mix(in srgb, var(--bg-deep) 55%, transparent); backdrop-filter: blur(6px); }
.hstat__k { display: flex; justify-content: space-between; font-family: var(--font-tech); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-subtle); }
.hstat__k b { color: var(--accent); font-weight: 400; }
.hstat__n { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1; margin: 10px 0 12px; }
.meter { height: 4px; background: var(--ink-line); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--red-soft)); transition: width 1.4s var(--ease); transition-delay: var(--md, 0s); }
@media (max-width: 560px) { .hstats { grid-template-columns: 1fr 1fr; } .hstat:last-child { grid-column: span 2; } }

.scrollcue { position: absolute; left: 50%; bottom: 26px; z-index: 3; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-tech); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-subtle); }
.scrollcue i { width: 1px; height: 38px; background: linear-gradient(var(--accent), transparent); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-height: 700px), (max-width: 600px) { .scrollcue { display: none; } }

/* ---------- TICKER ---------- */
.ticker { position: relative; overflow: hidden; border-block: 1px solid var(--border); background: var(--bg-deep); padding: 18px 0; }
.ticker__row { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ticker__row--rev { animation-direction: reverse; animation-duration: 46s; margin-top: 8px; }
.ticker__row span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-display); font-size: clamp(22px, 3.2vw, 40px); text-transform: uppercase; white-space: nowrap; }
.ticker__row--rev span { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--fg) 34%, transparent); }
.ticker__row span::after { content: ''; width: 12px; height: 12px; background: var(--accent); transform: rotate(45deg); }
.ticker:hover .ticker__row { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- SECTION HEAD v2: level label ---------- */
.lvl-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-tech); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.lvl-label::before { content: attr(data-n); display: grid; place-items: center; width: 30px; height: 30px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0; color: var(--on-accent); background: var(--accent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sec-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sec-head--row > div { max-width: 640px; }

/* ---------- CHARACTER SELECT (program cards) ---------- */
.sel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 1200px; }
@media (max-width: 1080px) { .sel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sel { grid-template-columns: 1fr; } }
.sel__card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 460px; padding: 22px;
  border-radius: var(--radius); overflow: hidden; isolation: isolate; background: var(--bg-deep);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .4s var(--ease);
}
.sel__card.is-tilting { transition: transform .08s linear, box-shadow .4s var(--ease); }
.sel__card::before { /* running border */
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, var(--accent) 82%, var(--red-soft) 88%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s;
}
.sel__card::after { content: ''; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--border-neutral); border-radius: inherit; pointer-events: none; }
.sel__card:hover { box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 40px var(--red-line); }
.sel__card:hover::before { opacity: 1; animation: borderRun 2.4s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes borderRun { to { --ang: 360deg; } }
.sel__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform .8s var(--ease), filter .5s; }
.sel__card:hover .sel__img { transform: scale(1.12); }
.sel__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,6,.25) 0%, rgba(5,5,6,.35) 40%, rgba(5,5,6,.96) 78%); }
.sel__glow { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(226,52,42,.28), transparent 60%); }
.sel__card:hover .sel__glow { opacity: 1; }
.sel__top { position: absolute; top: 18px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-tech); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-muted); }
.sel__num { font-family: var(--font-display); font-size: 13px; color: var(--on-accent); background: var(--accent); padding: 5px 8px; border-radius: 2px; letter-spacing: .04em; }
.sel__name { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 32px); text-transform: uppercase; line-height: .95; margin: 0 0 10px; transform: translateZ(40px); }
.sel__desc { color: var(--fg-muted); font-size: 14.5px; line-height: 1.5; margin: 0 0 16px; }
.sel__stats { display: grid; gap: 8px; margin-bottom: 18px; }
.sel__stat { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; font-family: var(--font-tech); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); }
.sel__go { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-tech); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sel__go .ar { transition: transform .25s var(--ease); }
.sel__card:hover .sel__go .ar { transform: translateX(6px); }
.sel__press { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -80%); font-family: var(--font-display); font-size: 13px; letter-spacing: .24em; color: var(--paper-bright); opacity: 0; padding: 8px 14px; border: 1px solid var(--accent); background: rgba(5,5,6,.6); transition: opacity .3s, transform .4s var(--ease); white-space: nowrap; }
.sel__card:hover .sel__press { opacity: 1; transform: translate(-50%, -100%); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { border-color: transparent; } }

/* ---------- PROGRESSION PATH ---------- */
.path { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding-top: 34px; }
.path__track { position: absolute; top: 55px; left: 10%; right: 10%; height: 2px; background: var(--ink-line); }
.path__track i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), var(--red-soft)); box-shadow: 0 0 14px var(--red-glow); }
.path__node { position: relative; text-align: center; }
.path__hex {
  position: relative; z-index: 1; width: 44px; height: 44px; margin: 0 auto 22px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; color: var(--fg-subtle); background: var(--ink-line);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .4s, color .4s, transform .5s var(--ease);
}
.path__hex::before { content: ''; position: absolute; inset: 2px; background: var(--bg); clip-path: inherit; z-index: -1; transition: background .4s; }
.path__node.is-unlocked .path__hex { background: var(--accent); color: var(--on-accent); transform: scale(1.12); }
.path__node.is-unlocked .path__hex::before { background: var(--accent); }
.path__node.is-unlocked .path__hex { animation: nodePop .6s var(--ease); }
@keyframes nodePop { 0% { transform: scale(.8); } 60% { transform: scale(1.3); } 100% { transform: scale(1.12); } }
.path__k { font-family: var(--font-tech); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-subtle); transition: color .4s; }
.path__node.is-unlocked .path__k { color: var(--accent); }
.path__t { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; margin: 6px 0 8px; opacity: .45; transition: opacity .4s; }
.path__node.is-unlocked .path__t { opacity: 1; }
.path__p { font-size: 14px; line-height: 1.55; color: var(--fg-subtle); margin: 0; transition: color .4s; }
.path__node.is-unlocked .path__p { color: var(--fg-muted); }
@media (max-width: 900px) {
  .path { grid-template-columns: 1fr; gap: 26px; padding: 0 0 0 64px; }
  .path__track { top: 6px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; }
  .path__track i { transform-origin: top; transform: scaleY(var(--p, 0)); }
  .path__node { text-align: left; }
  .path__hex { position: absolute; left: -64px; top: -4px; margin: 0; }
}

/* ---------- ACHIEVEMENTS (real coach credentials as unlocked badges) ---------- */
.ach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .ach { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ach { grid-template-columns: 1fr; } }
.ach__item { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid var(--border-neutral); border-radius: var(--radius); background: linear-gradient(160deg, var(--surface), var(--bg-deep)); transition: border-color .3s, transform .3s var(--ease); }
.ach__item:hover { border-color: var(--border-accent); transform: translateY(-4px); }
.ach__item::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent); transform: skewX(-18deg); }
.ach__item.is-in::after { animation: shine 1.2s var(--ease) calc(var(--i, 0) * 120ms + .3s) 1; }
@keyframes shine { to { left: 130%; } }
.ach__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--border-accent); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ach__icon svg { width: 20px; height: 20px; }
.ach__k { font-family: var(--font-tech); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ach__t { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; line-height: 1.15; margin: 4px 0 4px; }
.ach__s { font-size: 13.5px; color: var(--fg-subtle); }

/* ---------- BENTO GALLERY ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
.bento__item { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border-neutral); background: var(--bg-deep); }
.bento__item--tall { grid-row: span 2; }
.bento__item--wide { grid-column: span 2; }
.bento__item img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform .9s var(--ease), filter .5s; }
.bento__item:hover img { transform: scale(1.09); }
.bento__item::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(5,5,6,.9)); }
.bento__item::after { content: ''; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(226,52,42,.08) 0 1px, transparent 1px 4px); opacity: 0; transition: opacity .4s; }
.bento__item:hover::after { opacity: 1; }
.bento__label { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; font-family: var(--font-tech); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-bright); }
.bento__label::before { content: ''; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
.bento .reveal { transform: translateY(24px) scale(.98); }
.bento .reveal.is-in { transform: none; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }
@media (max-width: 520px) { .bento { grid-auto-rows: 150px; } .bento__item--wide { grid-column: span 2; } }

/* ---------- ROSTER (coach player cards) ---------- */
.roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .roster { grid-template-columns: 1fr; } }
.roster__card { position: relative; border: 1px solid var(--border-neutral); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: transform .35s var(--ease), border-color .35s; }
.roster__card:hover { transform: translateY(-6px); border-color: var(--border-accent); }
.roster__img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--ink-lift), var(--bg-deep)); }
.roster__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .7s var(--ease); }
.roster__card:hover .roster__img img { transform: scale(1.06); }
.roster__mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 64px; color: transparent; -webkit-text-stroke: 1.5px var(--accent); letter-spacing: .02em; }
.roster__mono::after { content: ''; position: absolute; inset: 22%; border: 1px dashed var(--border-accent); border-radius: 999px; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.roster__body { padding: 16px 18px 20px; }
.roster__role { font-family: var(--font-tech); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.roster__name { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; margin: 6px 0 6px; }
.roster__note { font-size: 13.5px; line-height: 1.5; color: var(--fg-subtle); margin: 0; }
.roster__lvl { position: absolute; top: 12px; left: 12px; z-index: 2; }

/* ---------- LIVE LOCATION ---------- */
.live { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 960px) { .live { grid-template-columns: 1fr; } }
.live__map { position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-neutral); background: var(--bg-deep); }
.live__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.35) contrast(.92) brightness(.95); }
.live__fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; font-family: var(--font-tech); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); }
.live__ping { position: absolute; left: 50%; top: 50%; z-index: 2; width: 0; height: 0; pointer-events: none; }
.live__ping span { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 999px; border: 1.5px solid var(--accent); opacity: 0; animation: radar 2.8s var(--ease) infinite; }
.live__ping span:nth-child(2) { animation-delay: .9s; }
.live__ping span:nth-child(3) { animation-delay: 1.8s; }
@keyframes radar { 0% { transform: scale(.1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.live__maptag { position: absolute; left: 18px; bottom: 18px; z-index: 3; }
.live__maptop { position: absolute; left: 18px; top: 18px; right: 18px; z-index: 3; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.live__panel { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--border-neutral); border-radius: var(--radius); background: linear-gradient(170deg, var(--surface), var(--bg-deep)); overflow: hidden; }
.live__status { display: flex; align-items: center; gap: 12px; }
.live__status .ldot { width: 12px; height: 12px; }
.live__state { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); text-transform: uppercase; line-height: 1; }
.is-open .live__state { color: var(--fg); }
.live__next { font-family: var(--font-tech); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.live__next b { color: var(--accent); font-weight: 400; }
.live__day { display: grid; gap: 8px; }
.live__day-k { display: flex; justify-content: space-between; font-family: var(--font-tech); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-subtle); }
.live__day .meter { height: 6px; }
.live__day .meter i { transition: width .6s var(--ease); }
.live__hours { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-neutral); }
.live__hours li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-neutral); font-size: 14.5px; color: var(--fg-muted); }
.live__hours li span:first-child { font-family: var(--font-tech); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.live__hours li.is-today { color: var(--fg); }
.live__hours li.is-today span:first-child { color: var(--accent); }
.live__hours li.is-today span:first-child::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--accent); transform: rotate(45deg) translateY(-2px); }
.live__addr { font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.live__addr strong { color: var(--fg); font-weight: 600; }
.live__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.live__btns .btn { padding: 13px 18px; }
.live__clock { font-variant-numeric: tabular-nums; }

/* ---------- ARCADE CTA ---------- */
.arcade { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(44px, 7vw, 90px) var(--gutter); text-align: center; background: radial-gradient(ellipse at 50% 120%, rgba(226,52,42,.55), transparent 60%), var(--bg-deep); border: 1px solid var(--border-accent); }
.arcade::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none; }
.arcade__grid { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--red-line) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--red-line) 1.5px, transparent 1.5px);
  background-size: 60px 60px; transform: perspective(400px) rotateX(62deg); transform-origin: bottom; animation: gridRun 3s linear infinite;
  mask-image: linear-gradient(0deg, #000, transparent); -webkit-mask-image: linear-gradient(0deg, #000, transparent); }
@keyframes gridRun { to { background-position: 0 60px; } }
.arcade > *:not(.arcade__grid) { position: relative; z-index: 1; }
.arcade__k { font-family: var(--font-tech); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); animation: blinkText 1.4s steps(2) infinite; }
@keyframes blinkText { 50% { opacity: .25; } }
.arcade h2 { font-family: var(--font-display); font-size: clamp(36px, 6.4vw, 88px); text-transform: uppercase; line-height: .92; margin: 16px 0 16px; }
.arcade h2 em { font-style: normal; color: var(--accent); }
.arcade p { color: var(--fg-muted); max-width: 52ch; margin: 0 auto 30px; font-size: 17px; line-height: 1.6; }
.arcade__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- INNER PAGE HERO ---------- */
.phero { position: relative; overflow: hidden; padding: clamp(120px, 18vh, 180px) 0 clamp(64px, 9vh, 100px); background: var(--bg-deep); border-bottom: 1px solid var(--border); }
.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; transform: scale(1.06); animation: heroZoom 26s ease-in-out infinite alternate; }
.phero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(5,5,6,.96) 30%, rgba(5,5,6,.55)), linear-gradient(0deg, var(--bg-deep), transparent 40%); }
.phero .container { position: relative; z-index: 2; }
.phero .ds-h1 em { color: var(--accent); }
.crumb { display: inline-flex; gap: 10px; align-items: center; font-family: var(--font-tech); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 18px; }
.crumb a:hover { color: var(--accent); }
.crumb b { color: var(--accent); font-weight: 400; }

/* ---------- program tabs as a game menu ---------- */
.ptab { position: relative; padding: 14px 16px; margin-right: 6px; border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: var(--radius) var(--radius) 0 0; }
.ptab.is-active { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--border-accent); border-bottom-color: var(--accent); }
.ptab.is-active::before { content: ''; position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; background: var(--accent); transform: translateX(-50%) rotate(45deg); }
.ppanel .pcard { box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.ppanel .pcard::after { content: ''; position: absolute; inset: 14px; border: 1px solid var(--hud-line); pointer-events: none; }

/* ---------- cards: pointer spotlight ---------- */
.card, .advantage__item { position: relative; overflow: hidden; }
.card::before, .advantage__item::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(226,52,42,.12), transparent 60%); }
.card:hover::before, .advantage__item:hover::before { opacity: 1; }
.card > *, .advantage__item > * { position: relative; }

/* ---------- FOOTER v2 ---------- */
.footer { position: relative; overflow: hidden; }
.footer__live { display: inline-flex; margin-top: 16px; }
.footer__mark { font-family: var(--font-display); font-size: clamp(64px, 17vw, 260px); line-height: .8; text-transform: uppercase; text-align: center; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--ink-line); margin: 10px 0 30px; user-select: none; white-space: nowrap; }
.footer__sms { max-width: 60ch; font-size: 12px; line-height: 1.6; color: var(--fg-subtle); margin: 0 0 22px; }
.footer__sms a { color: var(--fg-muted); text-decoration: underline; }

/* ---------- consent block (A2P) ---------- */
.consent { border: 1px solid var(--border-neutral); border-radius: var(--radius); padding: 16px 16px 4px; margin: 6px 0 18px; background: var(--bg-deep); }
.consent__k { font-family: var(--font-tech); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 12px; }
.consent .check-row { font-size: 12.5px; }
.consent .check-row a { color: var(--accent); }
.form-legal { font-size: 12px; line-height: 1.6; color: var(--fg-subtle); margin: 14px 0 0; text-align: center; }
.form-legal a { color: var(--fg-muted); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  body::before, .hero__scan, .ticker__row, .arcade__grid, .arcade__k, .roster__mono::after, .live__ping span, .phero__bg img, .scrollcue i, .ldot::after { animation: none !important; }
  .split .c, .hero__fade { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .sel__card, .sel__card:hover::before { transform: none !important; animation: none !important; }
  .boot { display: none; }
  .lvlup { transition: opacity .2s; transform: none; }
  .meter i { transition: none; }
  .ticker__row { flex-wrap: wrap; width: auto; }
}

/* ---------- Level Up layer: phone tuning ---------- */
@media (max-width: 760px) {
  .hero__hud-top { position: relative; top: auto; right: auto; justify-content: flex-start; padding: 0 var(--gutter); margin-bottom: 18px; order: -1; }
  .hero--lvl { flex-direction: column; align-items: stretch; justify-content: center; }
  .hero__hud-top .tag:last-child { display: none; }
  .hstats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 36px; }
  .hstat:last-child { grid-column: auto; }
  .hstat { padding: 10px 10px 12px; }
  .hstat__k b { display: none; }
  .hero--lvl .hud { inset: 10px; }
  .sel__card { min-height: 380px; }
  .roster { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .roster__body { padding: 12px 12px 14px; }
  .roster__name { font-size: 16px; }
  .roster__note { display: none; }
  .roster__mono { font-size: 44px; }
  .ach { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ach__item { flex-direction: column; gap: 10px; padding: 14px; }
  .ach__t { font-size: 14px; }
  .live__map { min-height: 340px; }
  .nav__cta { padding: 12px 14px; font-size: 11px; }
}
@media (max-width: 400px) { .nav__cta .ar { display: none; } }
@media (max-width: 760px) {
  .nav__cta { min-height: 44px; }
  .nav__burger { width: 44px; height: 44px; }
  .nav__burger span:nth-child(1) { top: 15px; } .nav__burger span:nth-child(2) { top: 21px; } .nav__burger span:nth-child(3) { top: 27px; }
  .nav__burger.is-open span:nth-child(1), .nav__burger.is-open span:nth-child(3) { top: 21px; }
  .field input, .field select, .field textarea { font-size: 16px; } /* under 16px iOS Safari zooms the page on focus */
  .check-row input { width: 22px; height: 22px; margin-top: 0; }
  .pill, .path__k, .ach__k, .roster__role, .consent__k, .hstat__k, .tag, .sel__stat, .live__day-k { font-size: 11.5px; }
  .reveal a[href^="mailto:"], .reveal a[href*="instagram.com"] { display: inline-block; padding: 12px 0; margin: -6px 0; }
  .live__btns .btn { flex: 1 1 auto; min-height: 46px; }
  .ptabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 0; margin-bottom: 32px; }
  .ptab { margin: 0; min-height: 50px; justify-content: flex-start; border: 1px solid var(--border-neutral); border-radius: var(--radius); font-size: 12px; }
  .ptab.is-active { border-color: var(--accent); }
  .ptab.is-active::before { display: none; }
  .phero { padding-top: 96px; }
  .glofox__frame { height: 88svh; }
}

/* =====================================================================
   ROUND 2 (2026-09-29): cleaner, Darting-style structure.
   Owner feedback: headline not premium enough, hero background cluttered,
   wants a gaming banner + digital fractal motion, and a much better live
   location. The hero photo is gone; a canvas "hexaflake" fractal that
   levels up depth by depth replaces it. One centered headline, one
   announcement strip, calm section rhythm with a light paper section.
   ===================================================================== */

/* ---------- announcement strip ---------- */
.annc { position: relative; z-index: 101; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px var(--gutter); background: var(--accent); color: var(--on-accent); font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; text-align: center; overflow: hidden; }
.annc a { text-decoration: underline; text-underline-offset: 3px; }
.annc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-100%); animation: anncSweep 5s var(--ease) 1.5s infinite; pointer-events: none; }
@keyframes anncSweep { 0% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }

/* ---------- HERO v3: fractal canvas + banner headline ---------- */
.hx { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--red) 9%, var(--bg-deep)) 0%, var(--bg-deep) 62%); padding: clamp(96px, 15vh, 150px) 0 clamp(80px, 11vh, 120px); text-align: center; isolation: isolate; }
.hx__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; display: block; }
.hx::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 45% at 50% 46%, rgba(5,5,6,.78), transparent 75%), linear-gradient(0deg, var(--bg) 0%, transparent 18%); }
.hx::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%; z-index: -1; pointer-events: none; opacity: .45;
  background-image: linear-gradient(var(--red-line) 1px, transparent 1px), linear-gradient(90deg, var(--red-line) 1px, transparent 1px); background-size: 70px 70px;
  transform: perspective(360px) rotateX(64deg); transform-origin: bottom; animation: gridRun 2.6s linear infinite;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 90%); mask-image: linear-gradient(0deg, #000 10%, transparent 90%); }
.hx .container { position: relative; display: flex; flex-direction: column; align-items: center; }
.hx__kick { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-tech); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--fg-muted); padding: 8px 16px; border: 1px solid var(--hud-line); border-radius: 999px; background: rgba(5,5,6,.5); backdrop-filter: blur(6px); }
.hx__kick .ldot { width: 7px; height: 7px; }
.hx__title { margin: 30px 0 0; display: flex; flex-direction: column; align-items: center; gap: .08em; font-family: var(--font-display); line-height: .92; text-transform: uppercase; font-weight: 400; }
.hx__l1 { font-size: clamp(22px, 4.6vw, 64px); letter-spacing: .26em; margin-right: -.26em; /* keep tracked text optically centered */
  background: linear-gradient(180deg, var(--paper-bright) 0%, var(--paper-muted) 45%, var(--paper-dim) 55%, var(--paper) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx__l2 { position: relative; display: inline-block; font-size: clamp(46px, 11.5vw, 168px); color: var(--paper-bright); padding: .06em .32em .02em; letter-spacing: -.005em; white-space: nowrap; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.hx__l2 .hero__dots { color: var(--paper-bright); }
.hx__banner { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  background: linear-gradient(180deg, var(--red-lift), var(--red) 55%, var(--red-deep));
  box-shadow: 0 0 80px var(--red-glow);
  transform: scaleX(0); transform-origin: left center; }
.hx__banner::before, .hx__banner::after { content: ''; position: absolute; top: 0; bottom: 0; width: .16em; background: rgba(5,5,6,.35); }
.hx__banner::before { left: 4.5%; transform: skewX(-17deg); }
.hx__banner::after { right: 4.5%; transform: skewX(-17deg); }
.hx__glint { position: absolute; top: -20%; bottom: -20%; width: 22%; left: -30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); }
.hx__chev { position: absolute; top: 50%; width: .42em; height: .42em; border: .07em solid var(--accent); border-left: 0; border-bottom: 0; transform: translateY(-50%) rotate(45deg); opacity: 0; }
.hx__chev--l { left: -.5em; transform: translateY(-50%) rotate(-135deg); }
.hx__chev--r { right: -.5em; }
.is-ready .hx__banner { animation: bannerIn .7s cubic-bezier(.7,0,.2,1) .35s forwards; }
.is-ready .hx__glint { animation: glint 4.5s var(--ease) 1.4s infinite; }
.is-ready .hx__chev { animation: chevIn .5s var(--ease) 1s forwards, chevPulse 2.2s var(--ease) 1.6s infinite; }
@keyframes bannerIn { to { transform: scaleX(1); } }
@keyframes glint { 0% { left: -30%; } 35%, 100% { left: 120%; } }
@keyframes chevIn { to { opacity: 1; } }
@keyframes chevPulse { 50% { opacity: .35; } }
.hx__lede { max-width: 54ch; margin: 30px auto 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--fg-muted); }
.hx__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hx__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 60px; width: min(820px, 100%); border: 1px solid var(--hud-line); border-radius: var(--radius); background: rgba(5,5,6,.55); backdrop-filter: blur(8px); }
.hx__stat { padding: 18px 12px; border-left: 1px solid var(--hud-line); }
.hx__stat:first-child { border-left: 0; }
.hx__stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); color: var(--paper-bright); line-height: 1; }
.hx__stat span { display: block; margin-top: 8px; font-family: var(--font-tech); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-subtle); }
@media (max-width: 640px) { .hx__stats { grid-template-columns: repeat(2, 1fr); } .hx__stat:nth-child(3) { border-left: 0; } .hx__stat:nth-child(n+3) { border-top: 1px solid var(--hud-line); } }

/* ---------- big marquee (Darting-style) ---------- */
.mq { overflow: hidden; background: var(--bg); border-block: 1px solid var(--border); padding: 22px 0; }
.mq__row { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.mq__row span { font-family: var(--font-display); font-size: clamp(34px, 6vw, 84px); text-transform: uppercase; line-height: 1; padding-right: .5em; white-space: nowrap; font-style: italic; }
.mq__row span:nth-child(odd) { color: var(--accent); }
.mq__row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fg) 55%, transparent); }

/* ---------- paper section (light break in the rhythm) ---------- */
.section--paper { background: var(--paper); color: var(--ink); }
.section--paper .ds-h2, .section--paper .path__t { color: var(--ink); }
.section--paper .ds-body, .section--paper .path__p { color: var(--paper-ink-muted); }
.section--paper .path__node.is-unlocked .path__p { color: var(--paper-ink-strong); }
.section--paper .path__k { color: var(--paper-ink-subtle); }
.section--paper .path__track { background: var(--paper-line); }
.section--paper .path__hex { background: var(--paper-line); color: var(--paper-ink-subtle); }
.section--paper .path__hex::before { background: var(--paper); }
.section--paper .path__node.is-unlocked .path__hex::before { background: var(--accent); }
.section--paper .lvl-label { color: var(--accent); }

/* ---------- stats band ---------- */
.sband { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.sband__i { padding: 10px 12px; border-left: 1px solid var(--border); }
.sband__i:first-child { border-left: 0; }
.sband__n { font-family: var(--font-display); font-size: clamp(46px, 6.4vw, 96px); line-height: 1; color: var(--accent); }
.sband__l { margin-top: 12px; font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-subtle); }
@media (max-width: 720px) { .sband { grid-template-columns: 1fr 1fr; row-gap: 34px; } .sband__i:nth-child(3) { border-left: 0; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }
.faq__list { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 2px; font-family: var(--font-display); font-size: clamp(16px, 1.5vw, 19px); text-transform: uppercase; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-accent); border-radius: var(--radius); color: var(--accent); font-family: var(--font-body); font-size: 20px; transition: transform .3s var(--ease), background .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); }
.faq details p { margin: 0 0 20px; color: var(--fg-muted); font-size: 15.5px; line-height: 1.65; max-width: 62ch; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- HQ: live location console ---------- */
.hq { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-areas: "map panel" "week week"; gap: 14px; }
@media (max-width: 980px) { .hq { grid-template-columns: 1fr; grid-template-areas: "map" "panel" "week"; } }
.hq__map { grid-area: map; position: relative; min-height: 480px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-neutral); background: var(--bg-deep); }
.hq__radar { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hq__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: .9; filter: invert(.92) hue-rotate(180deg) saturate(.3) contrast(.95) brightness(.9); }
.hq__map::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 120px rgba(5,5,6,.85); z-index: 2; }
.hq__top { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 4; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.hq__bottom { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.hq__beacon { position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none; }
.hq__beacon i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(226,52,42,.25), 0 0 24px var(--red-glow); }
.hq__beacon span { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 999px; border: 1.5px solid var(--accent); opacity: 0; animation: radar 3s var(--ease) infinite; }
.hq__beacon span:nth-of-type(2) { animation-delay: 1s; }
.hq__beacon span:nth-of-type(3) { animation-delay: 2s; }
.hq__beacon b { position: absolute; left: 14px; top: -40px; white-space: nowrap; font-family: var(--font-tech); font-weight: 400; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-bright); background: rgba(5,5,6,.85); border: 1px solid var(--accent); padding: 6px 10px; border-radius: 2px; }
.hq__beacon b::after { content: ''; position: absolute; left: -9px; bottom: -9px; width: 14px; height: 1px; background: var(--accent); transform: rotate(-45deg); }
.hq__open { pointer-events: auto; }
.hq__panel { grid-area: panel; display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--border-neutral); border-radius: var(--radius); background: linear-gradient(170deg, var(--surface), var(--bg-deep)); }
.hq__head { display: flex; align-items: center; gap: 20px; }
.hq__ring { position: relative; width: 132px; height: 132px; flex: none; }
.hq__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hq__ring circle { fill: none; stroke-width: 7; }
.hq__ring-bg { stroke: var(--ink-line); }
.hq__ring-fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 6px var(--red-glow)); }
.is-open .hq__ring-fg { stroke: var(--live); filter: drop-shadow(0 0 6px var(--live-glow)); }
.hq__ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hq__ring-k { font-family: var(--font-tech); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-subtle); }
.hq__ring-t { margin-top: 4px; font-family: var(--font-tech); font-weight: 400; font-size: 21px; letter-spacing: .04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.hq__state { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); text-transform: uppercase; line-height: 1; }
.hq__state .ldot { width: 11px; height: 11px; }
.hq__next { margin-top: 10px; font-family: var(--font-tech); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); line-height: 1.5; }
.hq__next b { color: var(--accent); font-weight: 400; }
.is-open .hq__next b { color: var(--live); }
.hq__addr { padding-top: 18px; border-top: 1px solid var(--border-neutral); font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.hq__addr strong { display: block; color: var(--fg); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 16px; margin-bottom: 4px; }
.hq__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hq__btns .btn { padding: 13px 12px; min-height: 46px; }
.hq__btns .btn:first-child { grid-column: span 2; }
.hq__week { grid-area: week; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--border-neutral); border-radius: var(--radius); background: var(--bg-deep); }
.hq__wk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hq__wk-t { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; }
.hq__wk-legend { display: flex; gap: 16px; font-family: var(--font-tech); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-subtle); }
.hq__wk-legend i { display: inline-block; width: 18px; height: 6px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--accent); }
.hq__wk-legend i.now { width: 2px; height: 12px; background: var(--paper-bright); }
.wk { display: grid; gap: 6px; }
.wk__row { display: grid; grid-template-columns: 54px 1fr 118px; align-items: center; gap: 12px; }
.wk__d { font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-subtle); }
.wk__h { font-size: 13.5px; color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
.wk__track { position: relative; height: 22px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--ink-line) 0 1px, transparent 1px calc(100% / 14)), var(--bg); overflow: hidden; }
.wk__blk { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(226,52,42,.55), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--r, 0) * 70ms); }
.hq__week.is-in .wk__blk { transform: scaleX(1); }
.wk__row.is-today .wk__d, .wk__row.is-today .wk__h { color: var(--fg); }
.wk__row.is-today .wk__d::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--accent); transform: rotate(45deg) translateY(-2px); }
.wk__row.is-today .wk__track { box-shadow: 0 0 0 1px var(--border-accent); }
.wk__now { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--paper-bright); box-shadow: 0 0 10px rgba(255,255,255,.8); z-index: 2; }
.wk__now::after { content: attr(data-t); position: absolute; top: 50%; left: 6px; transform: translateY(-50%); font-family: var(--font-tech); font-size: 10px; letter-spacing: .1em; color: var(--paper-bright); white-space: nowrap; background: rgba(5,5,6,.8); padding: 1px 5px; border-radius: 2px; }
.wk__axis { display: grid; grid-template-columns: 54px 1fr 118px; gap: 12px; margin-top: 8px; }
.wk__axis div { display: flex; justify-content: space-between; font-family: var(--font-tech); font-size: 10px; letter-spacing: .1em; color: var(--fg-subtle); }
.hq__note { margin: 14px 0 0; font-size: 12.5px; color: var(--fg-subtle); }
@media (max-width: 560px) {
  .hq__map { min-height: 340px; }
  .hq__head { gap: 14px; }
  .hq__ring { width: 108px; height: 108px; }
  .hq__ring-t { font-size: 17px; }
  .wk__row, .wk__axis { grid-template-columns: 40px 1fr; }
  .wk__h, .wk__axis > span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .annc::after, .hx::after, .mq__row, .hq__beacon span { animation: none !important; }
  .hx__banner { transform: none !important; animation: none !important; }
  .hx__chev { opacity: 1; animation: none !important; }
  .wk__blk { transform: none; transition: none; }
}
/* round 2 fixes: the pulse CTA needs overflow visible for its ring, so it skips the sweep */
.btn--primary.btn--pulse::after { display: none; }
.hx__l2 { font-size: clamp(46px, 10.5vw, 150px); }
.hx__chev { width: .3em; height: .3em; }
.hx__chev--l { left: -.28em; }
.hx__chev--r { right: -.28em; }
@media (max-width: 900px) { .hx__chev { display: none; } }
.annc a { display: inline-block; padding: 12px 4px; margin: -12px 0; }
.hq__open { min-height: 40px; display: inline-flex; align-items: center; }
@media (max-width: 760px) { .hq__ring-k { font-size: 10.5px; } .wk__axis div { font-size: 11px; } .hq__wk-legend { font-size: 11.5px; } }
@media (max-width: 520px) {
  .bento__item--tall { grid-row: auto; }
  .bento__item--wide { grid-column: span 2; }
  .annc { font-size: 10.5px; letter-spacing: .12em; gap: 8px; padding-block: 8px; }
}

/* =====================================================================
   ROUND 3 (2026-09-29): action reel hero, seamless marquees, Leaflet HQ
   map (Darting's stack), heads-safe photo framing, more white space.
   ===================================================================== */

/* ---------- rhythm: more rest space, one consistent section scale ---------- */
.section { padding-block: clamp(88px, 12vh, 150px); }
.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .ds-h2 { margin-top: 16px; }
.sec-head .ds-body { max-width: 58ch; }
.ds-h2 { line-height: 1.02; text-wrap: balance; }
.lvl-label { font-size: 11.5px; }
.lvl-label::before { width: 26px; height: 26px; font-size: 11px; }
@media (max-width: 760px) { .section { padding-block: 72px; } }

/* ---------- announcement strip = seamless marquee ---------- */
.annc { display: block; padding: 0; text-align: left; }
.annc::after { display: none; }
a.annc { color: var(--on-accent); }
.annc .mqt { padding-block: 10px; }
.annc .mqt__grp span { font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; padding-right: 26px; }
.annc .mqt__grp span::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 26px; background: currentColor; transform: rotate(45deg) translateY(-2px); opacity: .75; }
.annc .mqt__grp b { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- generic seamless marquee: two identical halves, slide exactly one half ---------- */
.mqt { display: flex; width: max-content; animation: mqtSlide var(--dur, 30s) linear infinite; will-change: transform; }
.mqt__grp { display: flex; flex: none; align-items: center; }
.mqt__grp span { white-space: nowrap; }
.mqt--rev { animation-direction: reverse; }
[data-marquee]:hover .mqt { animation-play-state: paused; }
@keyframes mqtSlide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.mq .mqt__grp span { font-family: var(--font-display); font-size: clamp(34px, 6vw, 84px); text-transform: uppercase; line-height: 1; padding-right: .5em; font-style: italic; }
.mq .mqt__grp span:nth-child(odd) { color: var(--accent); }
.mq .mqt__grp span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--fg) 55%, transparent); }
.mq, .annc { overflow: hidden; }

/* ---------- hero: action reel (crossfading, slow push-in) under the fractal ---------- */
.hx { padding-block: clamp(120px, 20vh, 210px) clamp(110px, 17vh, 180px); background: var(--bg-deep); }
.hx__reel { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hx__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 25%); opacity: 0;
  filter: grayscale(.35) contrast(1.1) brightness(.55); transform: scale(1.12);
  animation: reel 24s linear infinite; animation-delay: calc(var(--n) * 6s - 1s); }
.hx__shot:first-child { opacity: 1; }
@keyframes reel {
  0% { opacity: 0; transform: scale(1.14) translate3d(0, 1%, 0); }
  5% { opacity: 1; }
  25% { opacity: 1; }
  31% { opacity: 0; transform: scale(1.02) translate3d(0, -1%, 0); }
  100% { opacity: 0; transform: scale(1.02); }
}
.hx::before { background:
  radial-gradient(ellipse 70% 55% at 50% 48%, rgba(5,5,6,.72), rgba(5,5,6,.35) 70%, transparent),
  linear-gradient(180deg, rgba(5,5,6,.65) 0%, transparent 30%, transparent 62%, var(--bg) 100%),
  linear-gradient(90deg, rgba(226,52,42,.16), transparent 30%, transparent 70%, rgba(226,52,42,.16)); }
.hx__fx { opacity: .55; mix-blend-mode: screen; }
.hx__title { margin-top: 34px; }
.hx__lede { margin-top: 34px; }
.hx__row { margin-top: 40px; }
.hx__chev, .hx__stats { display: none !important; }
.hx__reel-tag { position: absolute; right: var(--gutter); bottom: 26px; z-index: 2; display: flex; gap: 6px; }
.hx__reel-tag i { width: 26px; height: 3px; background: rgba(246,245,241,.25); overflow: hidden; position: relative; }
.hx__reel-tag i::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; animation: reelBar 24s linear infinite; animation-delay: calc(var(--n) * 6s - 1s); }
@keyframes reelBar { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 25.1%, 100% { transform: scaleX(0); } }
@media (max-width: 600px) { .hx__reel-tag { display: none; } }

/* ---------- heads-safe framing: every photo carries its own focus point ---------- */
.sel__img, .bento__item img, .roster__img img, .pcard img, .phero__bg img { object-position: var(--pos, 50% 25%); }

/* ---------- HQ: Leaflet map layer ---------- */
.hq__lf { position: absolute; inset: 0; z-index: 1; background: transparent; opacity: 0; transition: opacity .8s var(--ease); }
.hq__map.is-live .hq__lf { opacity: 1; }
.hq__map.is-live .hq__radar, .hq__map.is-live .hq__beacon { opacity: 0; transition: opacity .6s; }
.hq__map.map-failed .hq__lf { display: none; }
.hq__lf .leaflet-tile-pane { filter: invert(.93) hue-rotate(180deg) saturate(.35) brightness(.85) contrast(1.05); }
.hq__lf.leaflet-container { background: var(--bg-deep); font-family: var(--font-body); }
.hq__lf .leaflet-control-zoom { border: 1px solid var(--border-neutral) !important; border-radius: var(--radius); overflow: hidden; margin: 0 16px 64px 0 !important; }
.hq__lf .leaflet-control-zoom a { background: var(--bg-deep); color: var(--fg); border-color: var(--border-neutral); width: 36px; height: 36px; line-height: 34px; }
.hq__lf .leaflet-control-zoom a:hover { background: var(--accent); color: var(--on-accent); }
.hq__lf .leaflet-control-attribution { background: rgba(5,5,6,.7); color: var(--fg-subtle); font-size: 10px; }
.hq__lf .leaflet-control-attribution a { color: var(--fg-muted); }
.hq__map::after { z-index: 2; }
.hq__top, .hq__bottom { z-index: 5; }
.hq__map .hud { z-index: 4; }
.hq-popup .leaflet-popup-content-wrapper { background: var(--bg-deep); color: var(--fg); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.hq-popup .leaflet-popup-tip { background: var(--accent); }
.hq-popup .leaflet-popup-content { margin: 14px 16px; }
.hq-pop { display: grid; gap: 4px; min-width: 190px; }
.hq-pop small { font-family: var(--font-tech); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.hq-pop b { font-family: var(--font-display); font-weight: 400; font-size: 15px; text-transform: uppercase; }
.hq-pop span { font-size: 13px; color: var(--fg-muted); }
.hq-pop a { margin-top: 6px; font-family: var(--font-tech); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent) !important; }

/* the HQ pin: drops in, lands, shock rings, radar sweep */
.hqpin-wrap { background: none; border: 0; }
.hqpin { position: relative; display: block; width: 60px; height: 60px; }
.hqpin__sweep { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(226,52,42,.35), rgba(226,52,42,0) 18%, transparent 100%);
  -webkit-mask: radial-gradient(circle, #000 66%, transparent 67%); mask: radial-gradient(circle, #000 66%, transparent 67%);
  opacity: 0; animation: sweep 3s linear infinite; }
.hqpin__rings i { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; }
.hqpin__drop { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.hqpin__hex { display: grid; place-items: center; width: 40px; height: 44px; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: 13px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 20px var(--red-glow); }
.hqpin__stem { width: 2px; height: 10px; background: var(--paper-bright); }
.hqpin__shadow { position: absolute; left: 50%; top: 50%; width: 16px; height: 6px; margin: -3px 0 0 -8px; border-radius: 50%; background: rgba(0,0,0,.55); }
.hqpin.is-away .hqpin__drop { transform: translate(-50%, -220px); opacity: 0; }
.hqpin.is-landed .hqpin__drop { animation: pinDrop .75s cubic-bezier(.3,1.5,.5,1) forwards; }
.hqpin.is-landed .hqpin__rings i { animation: shock 2.4s var(--ease) .6s infinite; }
.hqpin.is-landed .hqpin__rings i:nth-child(2) { animation-delay: 1.4s; }
.hqpin.is-landed .hqpin__rings i:nth-child(3) { animation-delay: 2.2s; }
.hqpin.is-landed .hqpin__sweep { opacity: 1; transition: opacity .6s .7s; }
@keyframes pinDrop { 0% { transform: translate(-50%, -220px); opacity: 0; } 55% { opacity: 1; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes shock { 0% { transform: scale(.15); opacity: .95; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes sweep { to { transform: rotate(360deg); } }
.hq__recenter { pointer-events: auto; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .hx__shot, .hx__reel-tag i::after { animation: none !important; }
  .hx__shot:first-child { opacity: 1; transform: none; }
}
@media (max-width: 700px) { .hx__shot { object-position: var(--pos-m, var(--pos)); } }
.annc .mqt { padding-block: 13px; }

/* =====================================================================
   ROUND 4 (2026-09-29): nav rebuilt, light/dark mode, pixel hero field,
   Grace N Grind map touches (zoom hint, permanent HQ label).
   ===================================================================== */

/* ---------- NAV: three zones, even rhythm ---------- */
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; height: 78px; padding: 0 var(--gutter); transition: height .25s var(--ease), background .25s var(--ease); }
.nav.is-scrolled { height: 64px; padding: 0 var(--gutter); }
/* 2026-09-30: solid bar, page text was showing through the see-through header while scrolling */
.nav, .nav.is-scrolled { background: var(--bg); backdrop-filter: none; }
.nav__logo { justify-self: start; }
.nav__logo-img { height: 40px; }
.nav.is-scrolled .nav__logo-img { height: 34px; }
.nav__links { justify-self: center; gap: clamp(22px, 2.6vw, 40px); }
.nav__link { font-size: 12.5px; letter-spacing: .14em; padding: 8px 0; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav .nav__cta { display: inline-flex; padding: 12px 20px; font-size: 11.5px; letter-spacing: .14em; box-shadow: none; }
.nav .nav__cta:hover { box-shadow: var(--shadow-cta); }
.nav__cta .ar { display: none; }
@media (max-width: 1100px) { .nav__links { gap: 22px; } .nav__link { font-size: 12px; letter-spacing: .1em; } }
@media (max-width: 859px) {
  .nav { grid-template-columns: 1fr auto; height: 66px; }
  .nav.is-scrolled { height: 60px; }
  .nav__logo-img, .nav.is-scrolled .nav__logo-img { height: 34px; }
  .nav__end { gap: 10px; }
  .nav__link { font-size: 22px; letter-spacing: .08em; }
}
@media (max-width: 560px) { .nav .nav__cta { display: none; } }

/* ---------- theme toggle ---------- */
.tt { position: relative; flex: none; width: 56px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--border-neutral); background: var(--bg-deep); cursor: pointer; transition: border-color .2s, background .3s; }
.tt::after { content: ''; position: absolute; inset: -7px; }
.tt:hover { border-color: var(--border-accent); }
.tt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tt__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .4s cubic-bezier(.5,1.6,.4,1), background .3s; }
html[data-theme="light"] .tt__knob { transform: translateX(24px); box-shadow: 0 2px 6px rgba(20,20,22,.18); }
.tt svg { width: 16px; height: 16px; overflow: visible; }
.tt__core { fill: var(--fg); transition: r .35s; }
.tt__cut { fill: var(--surface); transition: r .35s, cx .35s, cy .35s; }
.tt__rays path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: 0; transform-origin: 12px 12px; transform: rotate(-45deg) scale(.6); transition: opacity .3s, transform .45s var(--ease); }
html[data-theme="light"] .tt__core { r: 4.2; fill: var(--accent); }
html[data-theme="light"] .tt__cut { r: 0; }
html[data-theme="light"] .tt__rays path { opacity: 1; transform: none; }
html.theme-swap, html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after { transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), fill .4s !important; }

/* ---------- light mode touch-ups outside the always-dark photo blocks ---------- */
html[data-theme="light"] .nav { background: var(--bg); }
html[data-theme="light"] .nav__burger span { background: var(--fg); }
html[data-theme="light"] .wk__now { background: var(--fg); box-shadow: none; }
html[data-theme="light"] .hq__map::after { box-shadow: inset 0 0 90px rgba(20,20,22,.16); }
html[data-theme="light"] .hq__lf .leaflet-tile-pane { filter: grayscale(.3) contrast(1.03) brightness(1.02); }
html[data-theme="light"] .hq__lf.leaflet-container { background: var(--bg-deep); }
html[data-theme="light"] .hq__radar { filter: invert(1) hue-rotate(180deg); opacity: .8; }
html[data-theme="light"] body::before { opacity: .035; mix-blend-mode: multiply; }
html[data-theme="light"] .mq .mqt__grp span:nth-child(even) { -webkit-text-stroke-color: color-mix(in srgb, var(--fg) 45%, transparent); }
html[data-theme="light"] .btn--ink { border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
html[data-theme="light"] .footer { background: var(--bg-deep); }

/* ---------- map: Grace N Grind touches ---------- */
.hq__hint { position: absolute; left: 50%; bottom: 64px; z-index: 5; transform: translateX(-50%); padding: 7px 12px; border-radius: 999px; background: rgba(5,5,6,.78); color: var(--paper-bright); font-family: var(--font-tech); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; pointer-events: none; transition: opacity .4s; }
.hq-label.leaflet-tooltip { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 2px; box-shadow: 0 6px 18px rgba(0,0,0,.35); font-family: var(--font-tech); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 9px; }
.hq-label.leaflet-tooltip::before { display: none; }

/* ---------- pixel field sits a touch brighter than the old fractal ---------- */
.hx__fx { opacity: .85; mix-blend-mode: screen; image-rendering: pixelated; }
/* the wordmark PNG is white on transparent: flip it to ink on light grounds */
html[data-theme="light"] :is(.nav__logo-img, .footer__logo-img) { filter: invert(1) brightness(.12); }
.hx__fx { opacity: .72; }
/* always-dark blocks re-resolve their own text colour (body's colour is inherited as a computed value) */
html[data-theme="light"] :is(.hx, .phero, .arcade, .sel__card, .bento__item, .lvlup, .boot, .roster__img, .pcard) { color: var(--fg); }
.hq__map.map-failed .hq__hint { display: none; }
.annc .mqt { padding-block: 15px; }
.nav__logo { padding-block: 5px; }

/* =====================================================================
   ROUND 5 (2026-09-29): mission/vision, how they train, testimonials,
   crossed tape marquees, TARGET LOCKED map, pixel-assemble scroll reveal,
   slot-reel counters, decoding headings.
   ===================================================================== */

/* ---------- crossed tape banners (infinite, seamless, opposite directions) ---------- */
.tapes { position: relative; height: clamp(150px, 16vw, 210px); overflow: hidden; background: var(--bg); display: grid; place-items: center; }
.tape { position: absolute; left: -6%; right: -6%; overflow: hidden; padding-block: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.tape .mqt__grp span { font-family: var(--font-display); font-size: clamp(22px, 3.2vw, 40px); text-transform: uppercase; line-height: 1; padding-right: 30px; white-space: nowrap; display: inline-flex; align-items: center; }
.tape .mqt__grp span::after { content: ''; width: 12px; height: 12px; margin-left: 30px; background: currentColor; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.tape--red { background: var(--accent); color: var(--on-accent); transform: rotate(-3deg); z-index: 2; }
.tape--ink { background: var(--ink); color: var(--paper); transform: rotate(2.5deg); }
.tape--ink .mqt__grp span { -webkit-text-stroke: 0; }
.tape--ink .mqt { animation-direction: reverse; }
html[data-theme="light"] .tape--ink { background: var(--fg); color: var(--bg); }
html[data-theme="light"] .tape { box-shadow: 0 14px 30px rgba(20,20,22,.14); }

/* ---------- mission / vision ---------- */
.mv__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 960px) { .mv__grid { grid-template-columns: 1fr; } }
.mv__big { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5vw, 68px); line-height: .98; text-transform: uppercase; letter-spacing: -.01em; margin: 18px 0 34px; text-wrap: balance; }
.mv__big em { font-style: normal; color: var(--accent); }
.mv__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .mv__cards { grid-template-columns: 1fr; } }
.mv__card { position: relative; padding: 22px 22px 24px; border: 1px solid var(--border-neutral); border-radius: var(--radius); background: var(--surface); }
.mv__card::before { content: ''; position: absolute; left: -1px; top: 18px; width: 3px; height: 28px; background: var(--accent); }
.mv__k { font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.mv__card p { margin: 10px 0 0; color: var(--fg-muted); font-size: 15.5px; line-height: 1.6; }
.mv__attrs { padding: clamp(22px, 3vw, 32px); border: 1px solid var(--border-neutral); border-radius: var(--radius); background: linear-gradient(170deg, var(--surface), var(--bg-deep)); }
.mv__attrs-k { font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 14px; }
.attr { list-style: none; margin: 0; padding: 0; counter-reset: attr; }
.attr li { counter-increment: attr; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--border-neutral); }
.attr li:first-child { border-top: 0; }
.attr li::before { content: counter(attr, decimal-leading-zero); grid-row: span 3; font-family: var(--font-tech); font-size: 12px; color: var(--accent); padding-top: 3px; }
.attr b { font-family: var(--font-display); font-weight: 400; font-size: 17px; text-transform: uppercase; }
.attr span { font-size: 14px; color: var(--fg-subtle); margin-top: 3px; }
.attr__bar { display: block; height: 4px; margin-top: 10px; background: repeating-linear-gradient(90deg, var(--ink-line) 0 10px, transparent 10px 12px); }
.attr__bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 12px); transition: width 1.3s steps(12); transition-delay: var(--md, 0s); }

/* ---------- how they train ---------- */
.train { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .train { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .train { grid-template-columns: 1fr; } }
.train__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; background: var(--ink); }
.train__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 25%); filter: contrast(1.06) saturate(.92); transition: transform .8s var(--ease); }
.train__r:hover .train__img img { transform: scale(1.06); }
.train__n { font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.train__r h3 { font-family: var(--font-display); font-weight: 400; font-size: 19px; text-transform: uppercase; margin: 6px 0 8px; color: var(--ink); }
.train__r p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--paper-ink-muted); }
.train__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.train__tags span { font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border: 1px solid var(--paper-line); border-radius: 999px; color: var(--paper-ink-strong); }

/* ---------- testimonials (portal store only) ---------- */
.testi__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.tcard { position: relative; padding: 26px; border: 1px solid var(--border-neutral); border-radius: var(--radius); background: var(--bg); display: flex; flex-direction: column; gap: 16px; }
.tcard__stars { display: flex; gap: 4px; }
.tcard__stars i { width: 12px; height: 12px; background: var(--accent); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.tcard__q { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--fg); }
.tcard__who { margin-top: auto; font-family: var(--font-tech); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-subtle); }
.tcard__who b { color: var(--fg); font-weight: 400; }

/* ---------- slot-reel counters ---------- */
.sband__n[data-odo] { display: inline-flex; justify-content: center; overflow: hidden; height: 1em; line-height: 1; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; }
.odo__reel { display: flex; flex-direction: column; transform: translateY(0); }
.odo__reel span { height: 1em; display: block; }
.sband__i.is-locked .sband__n { animation: odoPop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes odoPop { 40% { transform: scale(1.18); text-shadow: 0 0 30px var(--red-glow); } }
.sband__xp { display: block; width: min(120px, 70%); height: 4px; margin: 14px auto 0; background: repeating-linear-gradient(90deg, var(--ink-line) 0 8px, transparent 8px 10px); }
.sband__xp i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 10px); transition: width .9s steps(12); }
.sband__i.is-locked .sband__xp i { width: 100%; }

/* ---------- pixel-assemble reveal (scroll-linked) ---------- */
.px-reveal { position: relative; }
.px-reveal > .pxr { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; image-rendering: pixelated; }

/* ---------- decoding headings ---------- */
[data-decode] .dc { color: var(--accent); }

/* ---------- TARGET LOCKED map HUD ---------- */
.lock { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.lock__grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(rgba(226,52,42,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(226,52,42,.16) 1px, transparent 1px); background-size: 40px 40px; transition: opacity .6s; }
.lock__cross i { position: absolute; background: rgba(226,52,42,.55); transition: opacity .5s, transform .8s var(--ease); opacity: 0; }
.lock__cross i:first-child { left: 0; right: 0; top: 50%; height: 1px; transform: scaleX(.2); }
.lock__cross i:last-child { top: 0; bottom: 0; left: 50%; width: 1px; transform: scaleY(.2); }
.lock__box { position: absolute; left: 50%; top: 50%; width: var(--lb, 92%); height: var(--lb, 88%); transform: translate(-50%, -50%) rotate(var(--lr, 0deg)); transition: width 1.6s cubic-bezier(.7,0,.2,1), height 1.6s cubic-bezier(.7,0,.2,1), transform 1.6s cubic-bezier(.7,0,.2,1); }
.lock__box i { position: absolute; width: 28px; height: 28px; border: 0 solid var(--accent); filter: drop-shadow(0 0 6px var(--red-glow)); }
.lock__box i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.lock__box i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.lock__box i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.lock__box i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
.lock__ring { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; transform: scale(2.4); }
.lock__read { position: absolute; left: 16px; top: 64px; display: grid; gap: 4px; padding: 10px 12px; background: rgba(5,5,6,.82); border-left: 2px solid var(--accent); font-family: var(--font-tech); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-muted); font-variant-numeric: tabular-nums; }
.lock__read b { font-weight: 400; color: var(--paper-bright); font-size: 12px; }
.lock__banner { position: absolute; left: 50%; top: calc(50% + 96px); transform: translate(-50%, 10px); padding: 8px 16px; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: opacity .3s, transform .4s var(--ease); }
.lock__again { position: absolute; right: 16px; top: 64px; z-index: 6; cursor: pointer; pointer-events: auto; min-height: 36px; }
/* phases, driven by data-lock on .hq__map */
.hq__map[data-lock="scan"] .lock__grid, .hq__map[data-lock="acquire"] .lock__grid { opacity: 1; }
.hq__map[data-lock="scan"] .lock__read b, .hq__map[data-lock="acquire"] .lock__read b { animation: blinkText .5s steps(2) infinite; }
.hq__map[data-lock="acquire"], .hq__map[data-lock="locked"] { --lb: 150px; --lr: 90deg; }
.hq__map[data-lock="acquire"] .lock__cross i, .hq__map[data-lock="locked"] .lock__cross i { opacity: 1; transform: none; }
.hq__map[data-lock="locked"] .lock__box i { border-color: var(--paper-bright); }
.hq__map[data-lock="locked"] .lock__ring { animation: lockRing .7s var(--ease) forwards; }
.hq__map[data-lock="locked"] .lock__banner { opacity: 1; transform: translate(-50%, 0); animation: lockFlash .9s steps(2) 3; }
.hq__map[data-lock="locked"] .lock__read { border-left-color: var(--live); }
.hq__map[data-lock="locked"] .lock__grid { opacity: 0; }
@keyframes lockRing { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; } 100% { opacity: .9; transform: scale(1); } }
@keyframes lockFlash { 50% { opacity: .35; } }
.hq__radar { transition: transform 1.6s cubic-bezier(.7,0,.2,1); transform-origin: 50% 50%; }
.hq__map[data-lock="acquire"] .hq__radar, .hq__map[data-lock="locked"] .hq__radar { transform: scale(2.2); }
.hq__map::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--paper-bright); opacity: 0; }
.hq__map[data-lock="locked"]::before { animation: lockWhite .45s ease-out; }
@keyframes lockWhite { 0% { opacity: .35; } 100% { opacity: 0; } }
@media (max-width: 560px) { .lock__read { top: 58px; font-size: 10.5px; } .lock__banner { font-size: 13px; top: calc(50% + 86px); } }

@media (prefers-reduced-motion: reduce) {
  .attr__bar i, .sband__xp i { transition: none; }
  .px-reveal > .pxr { display: none; }
}
.tape--ink { background: var(--paper); color: var(--ink); }
html[data-theme="light"] .tape--ink { background: var(--fg); color: var(--bg); }
.lock__again { min-height: 44px; }

/* =====================================================================
   2026-09-30: marquees always move (even with Reduce Motion on), map
   = level-up zoom + clear HQ label, directions buttons gone, address
   is the zoom button.
   ===================================================================== */
.hq-label.leaflet-tooltip { display: grid; gap: 2px; text-align: center; padding: 7px 12px; font-size: 11px; letter-spacing: .12em; }
.hq-label.leaflet-tooltip b { font-family: var(--font-display); font-weight: 400; font-size: 14px; letter-spacing: .08em; }
.lock { transition: opacity .6s var(--ease); }
.hq__map.is-clean .lock { opacity: 0; }
.lock__read [data-lock-zoom] { display: inline-block; color: var(--accent); font-size: 13px; }
.lock__read [data-lock-zoom].is-up { animation: lvlUp .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes lvlUp { 0% { transform: scale(1.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
button.hq__addr { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--border-neutral); padding: 18px 0 0; font: inherit; font-size: 15px; line-height: 1.6; color: var(--fg-muted); cursor: pointer; }
button.hq__addr:hover strong, button.hq__addr:focus-visible strong { color: var(--accent); }
.hq__zoomcue { display: block; margin-top: 10px; font-family: var(--font-tech); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
/* map stays clean: status, hours and the address already sit in the panel beside it */
.hq__map .hq__top, .hq__map .hq__bottom, .hq__map .hq__hint { display: none; }
.lock__read, .lock__again { top: 16px; }
@media (max-width: 560px) { .lock__read { top: 12px; } .lock__again { top: 12px; right: 12px; } }