/* ============================================================
   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);
}