/* ══════════════════════════════════════════════════════════════════
   SHREE BHAVANI AAKHADA — "AKHADA AT DAWN"
   Single source of truth for theme, tokens and shared components.

   Loaded by: index.html, kusti.html, mallakhamb.html, yoga.html,
              dhanurvidya.html, sankalp.html, privacy-policy.html,
              refund.html

   Brand hues are UNCHANGED: maroon #5E0000, saffron #FF6B00,
   gold #E8B84B. What changed is everything around them.

   HARD RULE: no black anywhere. Not #000, not rgba(0,0,0,…), not
   `black`. Every neutral, every shadow and every scrim carries red
   or amber in it. A shadow on packed earth is red-brown, not grey.
   There is a grep test for this in the plan; keep it passing.

   The ladder is LIGHT and ascends toward white the way a light
   theme should: --surface-0 is the deepest sand (page floor and
   footer), --surface-4 is the lightest (a card floating off the
   page). This is inverted from the previous dark theme, but the
   token NAMES are unchanged, so every rule below still reads
   correctly as "one step up the elevation ladder".
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Brand hues — DO NOT CHANGE ───────────────────────────── */
  --brand-maroon:      #5E0000;
  --brand-maroon-deep: #3A0000;
  --brand-saffron:     #FF6B00;
  --brand-saffron-lt:  #FF8C38;
  --brand-saffron-dk:  #CC5500;
  --brand-gold:        #E8B84B;
  --brand-gold-dk:     #C8941A;

  /* ── Elevation ladder — dawn light on packed earth ──────────
     Deepest sand at the floor, ascending to near-white. Every
     step keeps a red/amber cast; none of them are grey. */
  --surface-0: #EBD4B8;  /* page floor / footer / gallery bed */
  --surface-1: #F9EBD8;  /* base section                      */
  --surface-2: #FDF3E6;  /* raised / alternating section      */
  --surface-3: #FFF9F0;  /* card                              */
  --surface-4: #FFFDF8;  /* card hover / floating panel       */

  /* ── Deep accents — red-brown, never black ────────────────── */
  --deep-1: #8C1A0D;
  --deep-2: #6E1109;
  --deep-3: #4A0D06;     /* the darkest value on the site */

  /* Translucent surfaces. On a light page these tint DOWN, so
     they are maroon-based rather than the old cream-based ones. */
  --glass-1: rgba(94, 0, 0, 0.045);
  --glass-2: rgba(94, 0, 0, 0.075);
  --glass-3: rgba(94, 0, 0, 0.115);

  /* ── Text on light — checked against --surface-0, the WORST
     case, so these hold on every surface in the ladder:
     #3A1410 → 11.3:1 | #7A4A38 → 5.1:1 | #5E0000 → 9.8:1

     NOTE, and this is the easiest way to wreck the redesign:
     saffron on sand is 2.8:1 and gold is ~1.2:1. Both FAIL AA
     even for large text. On a light background saffron and gold
     are FILL colours only — buttons, chips, rules, gradients.
     Brand-coloured *text* uses --brand-maroon or --deep-1.     */
  /* Named rather than written as bare hexes here, because the
     .on-light scope in §2 has to put these values BACK for a light
     card that sits inside a dark section. One source, two readers. */
  --on-light-heading: #3A1410;
  --on-light-body:    #3A1410;
  --on-light-muted:   #7A4A38;

  --text-heading: var(--on-light-heading);
  --text-body:    var(--on-light-body);
  --text-muted:   var(--on-light-muted);
  --text-on-gold: #2A0000;   /* 10.4:1 on gold, 6.7:1 on saffron */

  /* ── Text on dark — for the photographic hero, the footer and
     the maroon panels. Not applied here; see the .on-dark scope
     in §2, which re-points the --text-* tokens above so that
     every existing rule flips without being rewritten. */
  --on-dark-heading: #FFF8F0;   /* 17.9:1 on --deep-3 */
  --on-dark-body:    #F5E4CC;   /*  7.4:1 on --deep-1 */
  --on-dark-muted:   #D8BFA0;   /*  8.8:1 on --deep-3 */

  /* ── Semantic accents ─────────────────────────────────────────
     "Brand-coloured text" and "focus ring" as intent, not as a
     literal hue. On light these resolve to maroon / deep red /
     dark saffron, all of which pass; on dark (.on-dark scope in
     §2) they resolve to gold / saffron, which is what the old
     theme used. Rules say `color: var(--accent-text)` once and
     stay correct in both contexts. */
  --accent-text:   var(--brand-maroon);     /* 9.8:1 worst case */
  --accent-text-2: var(--deep-1);           /* 6.4:1 worst case */
  --focus-ring:    var(--brand-saffron-dk); /* 4.1:1 on cards    */

  /* ── Lines ────────────────────────────────────────────────── */
  --line-subtle: rgba(94, 0, 0, 0.10);
  --line:        rgba(94, 0, 0, 0.17);
  --line-strong: rgba(255, 107, 0, 0.55);

  /* ── Depth cues — maroon-tinted, zero black ───────────────── */
  --lift-1: 0 2px 8px rgba(94, 0, 0, .10);
  --lift-2: 0 12px 32px rgba(94, 0, 0, .16);
  --lift-3: 0 28px 64px rgba(94, 0, 0, .22);
  --glow-saffron: 0 0 40px rgba(255, 107, 0, .22);
  --glow-gold:    0 0 32px rgba(232, 184, 75, .28);
  --ring-saffron: 0 0 0 1px rgba(255, 107, 0, .40);

  /* Scrims for text over photography. Deep maroon, not black —
     this is what keeps the hero legible without breaking the
     no-black rule. */
  --scrim-1: rgba(74, 13, 6, .45);
  --scrim-2: rgba(74, 13, 6, .70);
  --scrim-3: rgba(74, 13, 6, .88);
  --scrim-4: rgba(74, 13, 6, .94);   /* modal backdrops */

  /* ── Geometry ─────────────────────────────────────────────── */
  --r-sm: .5rem;
  --r-md: .85rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-pill: 999px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .18s;
  --dur:      .32s;
  --dur-slow: .6s;

  /* ── 3D stage ─────────────────────────────────────────────── */
  --stage-perspective: 1200px;
  --stage-track: 240vh;

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-deva:    'Noto Serif Devanagari', Georgia, serif;

  /* ── Type scale — one ratio, fluid between 375px and 1440px ──
     Every clamp() below is generated from the same two anchors,
     so the steps stay in proportion at EVERY width rather than
     only at the two ends:

         slope = (max - min) / (1440 - 375)
         vw    = slope * 100
         rem   = min - slope * 375

     Sizes in px at the anchors (375 → 1440):

         xs    12   → 12.8      sm    14 → 15
         base  16   → 17        md    18 → 21
         lg    21   → 27        xl    26 → 34
         2xl   31   → 42        3xl   38 → 53
         4xl   45   → 66

     At 1440 the successive ratios are 1.24, 1.29, 1.26, 1.24,
     1.26, 1.25 — a major third, held consistently. The page used
     to size type ad-hoc per section (a dozen unrelated clamp()
     calls with invented numbers); this replaces guesswork with a
     scale you can reason about.

     Note the small steps barely move (12→12.8) while the large
     ones move a lot (45→66). That is deliberate: captions should
     stay readable at 375px, headlines should exploit a big
     screen. A single uniform multiplier does neither well. */
  --fs-xs:   clamp(0.75rem,   0.732rem + 0.08vw, 0.8rem);
  --fs-sm:   clamp(0.875rem,  0.853rem + 0.09vw, 0.9375rem);
  --fs-base: clamp(1rem,      0.978rem + 0.09vw, 1.0625rem);
  --fs-md:   clamp(1.125rem,  1.06rem  + 0.28vw, 1.3125rem);
  --fs-lg:   clamp(1.3125rem, 1.18rem  + 0.56vw, 1.6875rem);
  --fs-xl:   clamp(1.625rem,  1.449rem + 0.75vw, 2.125rem);
  --fs-2xl:  clamp(1.9375rem, 1.695rem + 1.03vw, 2.625rem);
  --fs-3xl:  clamp(2.375rem,  2.045rem + 1.41vw, 3.3125rem);
  --fs-4xl:  clamp(2.8125rem, 2.35rem  + 1.97vw, 4.125rem);

  /* Line height tightens as size grows — a 66px headline set at
     1.6 looks like a list, not a headline. */
  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --ls-tight: -0.02em;   /* display faces need negative tracking */
  --ls-wide:  0.08em;    /* eyebrow / label caps */

  /* Prose measure. Beyond ~70ch the eye loses the line return. */
  --measure: 68ch;

  /* ── Spacing — 4px steps ──────────────────────────────────────
     Named by their step count, so --space-6 is 6×4 = 24px. The
     ad-hoc margins this replaces used 13 different values between
     16px and 96px with no relationship between them. */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* Section rhythm, fluid on the same 375→1440 anchors.
     56→112px vertical, 20→40px gutter. */
  --section-y: clamp(3.5rem,  2.27rem + 5.26vw, 7rem);
  --section-x: clamp(1.25rem, 0.81rem + 1.88vw, 2.5rem);
}

/* ─────────────────────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  /* Prevent bounce-scroll from exposing background on iOS */
  overscroll-behavior-y: none;
  /* Fix side-scroll on iOS Safari — body alone is not enough */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--surface-1);
  color: var(--text-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Remove 300ms tap delay on mobile */
  touch-action: manipulation;
}

/* Global interactive element improvements for mobile */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Prevent any element from causing horizontal scroll ── */
img, video, iframe, table, pre {
  max-width: 100%;
}
.schedule-table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
section, .section-inner, footer, header {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Active press feedback on mobile for all primary CTAs */
.btn-primary:active,
.btn-gold:active,
.btn-whatsapp:active {
  transform: scale(0.97) !important;
}

/* ── Dark contexts ────────────────────────────────────────────
   Three places on this site are legitimately dark: the hero,
   which is text over akhada photography and needs a scrim to be
   readable at all; the footer; and the maroon CTA panels.

   Rather than rewriting the ~40 rules that reference --text-*,
   this re-points those tokens for the subtree. Custom properties
   inherit, so every descendant rule that already says
   `color: var(--text-body)` flips to the light value on its own.
   Add `.on-dark` to any new dark panel and it just works. */
/* NOTE: `footer` used to be listed here. It is NOT a dark context
   in this theme — the footer body sits on --surface-0 sand, and
   scoping it dark made every .footer-link resolve to #D8BFA0 on
   #FDF3E6, about 1.4:1. Invisible. Only the maroon logo patch at
   the top of the footer is dark, and it now carries .on-dark
   explicitly. Add contexts to this list by what they are PAINTED,
   never by what element they are. */
.on-dark,
.stage-sticky,
.hero {           /* discipline-page hero — photo + maroon scrim */
  --text-heading: var(--on-dark-heading);
  --text-body:    var(--on-dark-body);
  --text-muted:   var(--on-dark-muted);
  --line-subtle:  rgba(255, 220, 170, 0.14);
  --line:         rgba(255, 190, 120, 0.24);
  --glass-1:      rgba(255, 226, 190, 0.07);
  --glass-2:      rgba(255, 226, 190, 0.12);
  --glass-3:      rgba(255, 226, 190, 0.18);
  /* On a dark ground, gold and saffron are the readable accents —
     the reverse of the light page. */
  --accent-text:   var(--brand-gold);
  --accent-text-2: var(--brand-saffron);
  --focus-ring:    var(--brand-saffron);
  color: var(--text-body);
}

/* ── .on-light — the counter-scope, and it fixes a real bug ──
   Custom properties inherit, which is what makes .on-dark elegant:
   set it once on a panel and the whole subtree flips. The cost is
   that it keeps flipping past any LIGHT card nested inside that
   panel — and the site has exactly that shape.

   #admission is a deep maroon section carrying .on-dark, and the
   enrollment form is a --surface-4 (#FFFDF8) card sitting on it.
   Every token inside that card was resolving to the dark-context
   value against a near-white face:

     .field-input  color --text-body  → #F5E4CC on #FFFDF8 ≈  1.1:1
     .field-label  color --accent-text→ gold     on #FFFDF8 ≈  1.7:1
     .adm-disc-name color --text-heading → #FFF8F0 on #FFFDF8 ≈ 1.05:1

   So the name, phone and age a visitor typed into the site's main
   lead form were invisible as they typed them. This scope puts the
   light values back for the card's subtree.

   RULE: .on-dark and .on-light describe what an element is PAINTED,
   not where it sits. Nest them as deep as the paint actually goes. */
.on-light {
  --text-heading: var(--on-light-heading);
  --text-body:    var(--on-light-body);
  --text-muted:   var(--on-light-muted);
  --line-subtle:  rgba(94, 0, 0, 0.10);
  --line:         rgba(94, 0, 0, 0.17);
  --glass-1:      rgba(94, 0, 0, 0.045);
  --glass-2:      rgba(94, 0, 0, 0.075);
  --glass-3:      rgba(94, 0, 0, 0.115);
  --accent-text:   var(--brand-maroon);
  --accent-text-2: var(--deep-1);
  --focus-ring:    var(--brand-saffron-dk);
  color: var(--text-body);
}

::selection { background: var(--brand-saffron); color: var(--text-on-gold); }

:focus-visible {
  outline: 2px solid var(--brand-saffron);
  outline-offset: 3px;
  border-radius: 4px;
}

.font-display, h1, h2, h3, .display-text { font-family: var(--font-display); }
.font-deva { font-family: var(--font-deva); }

h1, h2, h3, .font-display { color: var(--text-heading); }
p, li, td, dd { color: var(--text-body); }

/* ── The scale, applied ──
   Headings take the display face, tight leading and negative
   tracking; body takes the reading leading. Anything in the HTML
   that still carries its own font-size wins over these (they are
   plain element selectors), so this is a safe floor to add now
   and a target to converge on as inline sizes come out. */
h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
h5 { font-size: var(--fs-md);  line-height: var(--lh-snug); }

body { font-size: var(--fs-base); line-height: var(--lh-body); }
p, li, dd { line-height: var(--lh-body); }
small, figcaption, .caption { font-size: var(--fs-sm); }

/* Eyebrow / label caps — the site uses this pattern in ~15 places
   with a hand-typed letter-spacing each time. */
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent-text);
}

/* Constrain prose to a readable measure. */
.prose { max-width: var(--measure); }

/* Tailwind greys → theme equivalents */
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--text-muted); }
.text-gray-700 { color: var(--text-body); }

.gradient-text {
  background: linear-gradient(135deg, var(--brand-saffron-lt), var(--brand-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─────────────────────────────────────────────────────────────
   3. SECTION SURFACES
   Alternating elevation instead of one flat colour.
   ───────────────────────────────────────────────────────────── */
#scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand-saffron), var(--brand-gold));
  z-index: 9999;
  transition: width .1s linear;
}

section { background: var(--surface-1); }

#disciplines    { background: var(--surface-2); }
#why-train      { background: var(--surface-1); }
#vision-mission { background: var(--surface-3); }
#journey        { background: linear-gradient(160deg, var(--surface-1), var(--surface-3)); }
#sankalp        { background: linear-gradient(160deg, var(--surface-0), var(--surface-3)); }
#achievements   { background: var(--surface-2); }
#gallery        {
  background: linear-gradient(160deg, #1C0503 0%, #2E0907 40%, var(--surface-0) 100%);
}
#reels          {
  background: linear-gradient(180deg, #0D0202 0%, #1C0503 60%, #2E0907 100%);
}
#pricing        { background: var(--surface-2); }
#schedule       { background: var(--surface-3); }
#reviews        { background: var(--surface-1); }
#faq            { background: var(--surface-2); }
#contact        { background: var(--surface-3); }
#admission      { background: linear-gradient(160deg, var(--surface-1), var(--surface-4)); border: none; }

/* Generic modifier for a section that should sit one step up the
   elevation ladder without needing its own #id rule. */
.section-raised { background: var(--surface-2); }
.section-sunken { background: var(--surface-0); }

/* ── Section rhythm ──
   tailwind.min.css is a static build, so `py-24` is a hard 96px at
   every width and `px-4` a hard 16px. That is too tall on a 375px
   phone and too tight a gutter on a 1440px desktop — the exact
   "cramped, then wasteful" feel the redesign is meant to fix.

   `section[class*="py-"]` is specificity (0,2,1), which beats
   Tailwind's (0,1,0) `.py-24`, so the fluid rhythm wins WITHOUT
   editing a single class in the HTML. Scoping to elements that
   already opted into a py- utility means the stage track and other
   deliberately unpadded sections are left alone.

   96px flat  →  56px at 375, 112px at 1440.
   16px flat  →  20px at 375,  40px at 1440. */
section[class*="py-"] {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
section[class*="px-"] {
  padding-left: var(--section-x);
  padding-right: var(--section-x);
}

/* ── Section headers ──
   These three classes replace ~40 repeated inline style="" attributes
   that hard-coded #5E0000 / #6B4C3B on every <h2> and lede paragraph. */
.section-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xl);
  color: var(--text-heading);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.section-lede {
  color: var(--text-muted);
  max-width: 62ch; margin: 0 auto;
  font-size: var(--fs-md); line-height: var(--lh-body);
}
/* Mid-page CTA pair, used three times down the homepage. */
.btn-lg { font-size: var(--fs-sm); min-height: 52px; }
.cta-subnote {
  color: var(--text-muted);
  font-size: var(--fs-xs); margin-top: var(--space-2);
}

.section-eyebrow span { color: var(--accent-text-2); }

/* ─────────────────────────────────────────────────────────────
   3b. TEXT ROLE UTILITIES

   Each of these replaces a cluster of identical inline style=""
   attributes. They are deliberately SEMANTIC (t-note, t-hint)
   rather than presentational (text-brown-11px) so that when the
   palette moves again, these follow it.

   The important property they all share: they resolve through
   --text-* / --accent-* tokens, which means every one of them
   flips automatically inside a `.on-dark` subtree. The inline
   styles they replace could not do that — a hard-coded #8B6B5E
   is invisible on maroon, which is exactly the class of bug this
   redesign kept running into.
   ───────────────────────────────────────────────────────────── */

/* Brand-coloured text. Maroon on light, gold on dark. */
.t-accent   { color: var(--accent-text); }
.t-accent-2 { color: var(--accent-text-2); }

/* Small print. */
.t-note { font-size: var(--fs-xs); font-weight: 400; color: var(--text-muted); }
.t-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Emphasised label above a value (pricing rows, contact blocks). */
.t-strong {
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--accent-text);
}

/* Required-field marker.
   Was #FF8C00 — 2.5:1 on a form card, which fails both AA text
   and the 3:1 floor for meaningful non-text indicators. Since the
   asterisk is the ONLY thing marking a field required, it has to
   be legible. --deep-1 is 6.4:1 and still reads as a warning. */
.req { color: var(--deep-1); font-weight: 700; }

/* Disclosure chevron on the FAQ <details>.
   Was #FF6B00 — 2.8:1, below the 3:1 that WCAG 1.4.11 requires
   for a control that communicates open/closed state. */
.disclosure-icon { color: var(--brand-saffron-dk); }

/* Field label — uppercase micro-caps above an input. */
.field-label {
  display: block;
  font-size: clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem); font-weight: 600;
  color: var(--accent-text);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

/* Inline validation message. Hidden until JS reveals it. */
.field-error {
  font-size: var(--fs-xs);
  color: var(--deep-1);
  margin-top: 3px;
  display: none;
}

/* Circular icon chip, gold-on-dark (contact block). */
.icon-circle-gold {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(200, 148, 26, .2);
  border: 1.5px solid rgba(200, 148, 26, .5);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

/* Link on a photographic/dark ground. */
.t-on-photo {
  color: var(--on-dark-heading);
  text-shadow: 0 1px 2px rgba(58, 8, 4, .4);
}

/* Outlined pill chip, used on the dark enquiry panel to list the
   four disciplines. */
.chip-outline {
  font-size: 10px; font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 140, 0, .4);
  color: #FFB347;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Form controls ──
   Seven near-identical inline declarations collapse to this one
   class plus two modifiers. They differed only in whether they
   carried a transition, a background, or -webkit-appearance —
   differences that were almost certainly accidental rather than
   intended, since the fields sit side by side in one form.

   font-size MUST stay at 16px. iOS Safari zooms the viewport when
   a focused input is under 16px, and the page never zooms back
   out. This is the single most common mobile-form bug and the
   only reason this value is not on the type scale. */
.field-input {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 16px;
  color: var(--text-body);
  background: var(--surface-4);
  outline: none;
  font-family: var(--font-body);
  min-height: 48px;   /* ≥44px tap target */
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
}
.field-input:focus {
  border-color: var(--brand-saffron-dk);
  box-shadow: var(--ring-saffron);
}
select.field-input { -webkit-appearance: none; appearance: none; }
.field-input.mb-20 { margin-bottom: var(--space-5); }

/* Admission-modal field group. Those inputs used to carry inline
   onfocus/onblur handlers that re-implemented the focus ring in
   JavaScript — and because an inline style beats a stylesheet, that
   hand-rolled version (hard-coded #FF8C00, and no ring at all on the
   Age field) was overriding the token rule above. Deleting the
   handlers is what restores .field-input:focus. */
.adm-fg { margin-bottom: var(--space-4); }

.field-label-hint {
  font-size: 10px; font-weight: 400;
  color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
}

.section-eyebrow::before { background: linear-gradient(90deg, transparent, var(--brand-saffron)); }
.section-eyebrow::after  { background: linear-gradient(90deg, var(--brand-saffron), transparent); }
.section-divider { background: linear-gradient(90deg, var(--brand-saffron), var(--brand-gold)); }

/* ─────────────────────────────────────────────────────────────
   4. NAVIGATION
   ───────────────────────────────────────────────────────────── */
#main-nav {
  background: rgba(255, 248, 238, .86);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line), 0 8px 32px rgba(94, 0, 0, .10);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ── Dark-hero nav state — transparent over the opening cinematic ── */
#main-nav.nav--hero {
  background: rgba(255, 248, 230, 0.92);
  border-bottom: 1px solid rgba(200, 148, 26, 0.30);
  box-shadow: 0 2px 20px rgba(58, 0, 0, 0.18);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
#main-nav.nav--hero .nav-brand-name { color: var(--brand-maroon); }
#main-nav.nav--hero .nav-brand-sub  { color: var(--text-muted); }
#main-nav.nav--hero .nav-link       { color: var(--text-body); }
#main-nav.nav--hero .nav-link:hover { color: var(--brand-maroon); background: rgba(255, 107, 0, 0.10); }
#main-nav.nav--hero .nav-link::after { background: var(--brand-saffron); }
#main-nav.nav--hero #hamburger-icon rect { fill: var(--brand-maroon); }
#main-nav.nav--hero #close-icon line    { stroke: var(--brand-maroon); }
#main-nav.nav--hero .nav-brand img {
  filter: drop-shadow(0 1px 4px rgba(94, 0, 0, 0.20));
}

.nav-brand-name { color: var(--brand-maroon); }
/* Was --brand-gold, which is ~1.2:1 on the now-light nav. */
.nav-brand-sub  { color: var(--text-muted); }

.nav-link { color: var(--text-body); }
/* Saffron as *text* is only 2.8:1 on light, so hover/current state is
   carried by the maroon-deep colour plus the underline and tint,
   not by saffron text. */
.nav-link:hover { color: var(--brand-maroon); background: rgba(255, 107, 0, .10); }
.nav-link::after { background: var(--brand-saffron); }
.nav-link[aria-current="page"] { color: var(--brand-maroon); font-weight: 700; }

#mobile-menu {
  background: rgba(255, 250, 242, .98);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-height: calc(100svh - 68px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav-link { color: var(--text-body); border-bottom-color: var(--line-subtle); }
.mobile-nav-link:hover { color: var(--brand-maroon); background: rgba(255, 107, 0, .10); }

#hamburger-icon rect, #close-icon line { fill: var(--brand-maroon); stroke: var(--brand-maroon); }

/* ─────────────────────────────────────────────────────────────
   5. 3D SCROLL STAGE  —  "the akhada stays visible while scrolling"
   A tall scroll track with a sticky viewport-height stage inside.
   Photo planes sit at different translateZ depths; a single rAF
   loop drives the stage transform from scroll progress.
   ───────────────────────────────────────────────────────────── */
/* The bed behind the photo planes stays deep — the hero is text over
   akhada photography and needs the contrast to be readable. It is
   --deep-3 (red-brown), not black. The page opens into dawn light the
   moment you scroll past it. */
.stage-track {
  position: relative;
  height: var(--stage-track);
  background: var(--deep-3);

  /* The hero element is BOTH .hero-section and .stage-track, and
     .hero-section (in index.html's inline block) is
     `display:flex; flex-direction:column; align-items:center`.
     Inherited into a scroll track, that cross-axis centring sizes
     .stage-sticky to its content — about 1100px — instead of
     letting it fill the viewport, so the stage photos render as a
     narrow column with the bed showing down both sides.
     A scroll track is not a flex container; say so explicitly. */
  display: block;

  /* The same inline .hero-section rule also sets `overflow: hidden`,
     and that one silently destroyed the entire effect.

     `position: sticky` pins to the nearest SCROLLING ancestor, and
     `overflow: hidden` makes an element exactly that — a scroll
     container, even though it has nothing to scroll. So .stage-sticky
     was faithfully sticking to a box that never moves, which on screen
     is indistinguishable from sticky doing nothing at all: the akhada
     slid off the top within the first 100vh and the remaining 140vh of
     track rendered as an empty sand rectangle.

     Nothing is lost by opening it up, because the clipping the hero
     actually needs already happens one level down: .stage-sticky has
     its own `overflow: hidden`, and an element's own overflow does not
     affect its own stickiness — only an ancestor's does. The layers
     bleed to inset:-12% and are still cut off at the viewport edge.

     Do NOT swap this for `overflow: clip` "to be safe" either. Clip
     would also work (it clips without creating a scrollport), but the
     track has exactly one child and that child already clips, so the
     honest value is the one that adds no behaviour. */
  overflow: visible;
}

.stage-sticky {
  position: sticky;
  top: 0;
  width: 100%;               /* belt-and-braces against the above */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Only .stage is a 3D context. Haze / motes / vignette / content are
   siblings in .stage-sticky, so ordinary z-index applies to them —
   mixing flat overlays into a preserve-3d parent makes paint order
   depend on Z position, which is not what we want for the UI chrome. */
.stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: var(--stage-perspective);
  perspective-origin: 50% 45%;
  transform-style: preserve-3d;
}

.stage-layer {
  position: absolute;
  inset: -12%;                 /* bleed, so translateZ never reveals an edge */
  transform-style: preserve-3d;
  will-change: auto;           /* promoted only while in view, see stage.js */
  backface-visibility: hidden;
  pointer-events: none;
}

.stage.is-active .stage-layer { will-change: transform, opacity; }

.stage-layer img,
.stage-layer picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Depth ordering + atmospheric perspective: further layers are
   dimmer and warmer, which is what actually sells the depth.
   Brightness is lifted from the old dusk values — dawn light is
   brighter, and the akhada has to stay *visible*, which was the
   whole point of the request. */
.stage-layer[data-depth="-4"] { filter: brightness(.62) saturate(.70) blur(3px) sepia(.18); }
.stage-layer[data-depth="-2"] { filter: brightness(.78) saturate(.92) blur(1px) sepia(.08); }
.stage-layer[data-depth="0"]  { filter: brightness(1.02) saturate(1.05); }

/* Foreground plane: deliberately NOT a photo. A full-bleed image at
   positive Z would occlude the akhada, which is the one thing that
   must stay visible. A soft ground-shadow reads as depth instead. */
.stage-layer[data-depth="2"] {
  background:
    linear-gradient(180deg, transparent 0%, transparent 62%, var(--scrim-2) 100%),
    radial-gradient(ellipse 55% 26% at 50% 104%, rgba(255, 107, 0, .20) 0%, transparent 70%);
}

/* Warm dawn haze over the whole stage. Maroon scrims, not black —
   the top and bottom bands exist to make the hero copy legible. */
.stage-haze {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 150, 40, .16) 0%, transparent 62%),
    linear-gradient(180deg, var(--scrim-1) 0%, rgba(74, 13, 6, .10) 38%, var(--scrim-3) 100%);
}

/* Vignette keeps the eye on the akhada */
.stage-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 48%, rgba(74, 13, 6, .72) 100%);
}

.stage-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* Bottom padding clears the pinned stats bar + scroll cue. */
  padding: 3.5rem 1.25rem 7rem;
  text-align: center;
}
@media (min-width: 480px) {
  .stage-content { padding: 5rem 1.5rem 9.5rem; }
}

/* Desktop: left-aligned split — content occupies the left 58% so the
   stage photography shows through on the right. */
@media (min-width: 1024px) {
  .stage-content {
    text-align: left;
    padding-left: 4rem;
    padding-right: 48%;
  }
  .stage-content .hero-logo-ring { margin: 0 0 1.25rem; }
  .stage-content .hero-trial-badge { display: inline-flex; }
  .stage-content .hero-sanskrit { text-align: left; }
  .stage-content .hero-actions { justify-content: flex-start; }
  .stage-content .hero-action-primary { align-items: flex-start; }
  .stage-content .hero-pills { justify-content: flex-start; }
  .stage-content .stats-bar { display: none; } /* stats bar stays absolutely positioned */
}

/* Floating dust motes — cheap, adds parallax read without assets */
.stage-motes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 32%, rgba(255, 200, 130, .9), transparent),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(255, 200, 130, .7), transparent),
    radial-gradient(2px   2px   at 84% 62%, rgba(255, 180, 100, .6), transparent),
    radial-gradient(1px   1px   at 34% 78%, rgba(255, 220, 160, .8), transparent),
    radial-gradient(1.5px 1.5px at 52% 52%, rgba(255, 200, 130, .5), transparent);
  animation: moteDrift 26s linear infinite;
}

@keyframes moteDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-3%, -6%, 0); }
}

/* ── Hero copy inside the stage (replaces ~30 inline styles) ── */
.hero-logo-ring { margin: 0 auto 1.25rem; width: fit-content; }
.hero-logo-img {
  height: clamp(88px, 12vw, 140px);
  width: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 6px 24px rgba(74, 13, 6, .70));
}

.hero-trial-badge {
  display: inline-block;
  margin-bottom: .8rem;
  padding: .38rem 1rem;
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
}

.hero-sanskrit {
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 600;
  font-style: italic;
  color: var(--accent-text);
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(58, 8, 4, .78);
  margin-bottom: .9rem;
}

.hero-title {
  font-size: clamp(1.9rem, 6vw, 4.2rem);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.12;
  color: #FFF8F0;
  text-shadow: 0 4px 24px rgba(58, 8, 4, .90), 0 0 80px rgba(255, 107, 0, .18);
  margin-bottom: .75rem;
}

/* Cinematic accent line before headline */
.hero-accent-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  justify-content: center;
}
@media (min-width: 1024px) { .hero-accent-line { justify-content: flex-start; } }
.hero-accent-line::before,
.hero-accent-line::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 75, 0.7));
}
.hero-accent-line::after {
  background: linear-gradient(90deg, rgba(232, 184, 75, 0.7), transparent);
}
.hero-accent-line span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E8B84B;
}

.hero-lede {
  color: var(--text-body);
  font-size: clamp(.9rem, 2vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: .45rem;
  text-shadow: 0 2px 10px rgba(58, 8, 4, .78);
}
.hero-lede strong { color: var(--accent-text); }

.hero-meta {
  color: var(--text-muted);
  font-size: .78rem;
  letter-spacing: .12em;
  margin-bottom: 1.8rem;
  text-shadow: 0 2px 8px rgba(58, 8, 4, .78);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 1.6rem;
}
.hero-action-primary { display: flex; flex-direction: column; align-items: center; }
.hero-action-note {
  color: var(--text-muted);
  font-size: .65rem;
  margin-top: .4rem;
  font-family: var(--font-body);
}
.hero-actions .btn-primary,
.hero-actions .btn-gold { min-height: 52px; font-size: .9rem; }
@media (max-width: 639px) { .hero-action-secondary { display: none; } }

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.hero-pill {
  background: rgba(232, 184, 75, .14);
  border: 1px solid rgba(232, 184, 75, .40);
  color: var(--accent-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .3rem .85rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Scroll cue — sits above the stats bar, not under it */
.stage-cue {
  position: absolute;
  left: 50%;
  bottom: 7.5rem;
  z-index: 11;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: var(--text-muted);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: opacity var(--dur) var(--ease-out);
}
.stage-cue .stage-cue-rail {
  width: 1px; height: 42px;
  background: linear-gradient(180deg, var(--brand-saffron), transparent);
  animation: cueRail 2.2s var(--ease-io) infinite;
}
@keyframes cueRail {
  0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

/* ── Depth-layered section divider (replaces flat SVG waves) ── */
.depth-divider {
  position: relative;
  height: 120px;
  overflow: hidden;
  perspective: 600px;
  background: var(--surface-1);
}
.depth-divider span {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 200px;
  bottom: -120px;
  border-radius: 50% 50% 0 0;
  display: block;
}
.depth-divider span:nth-child(1) { background: rgba(94, 0, 0, .55);  transform: translateZ(-120px) translateY(-26px); }
.depth-divider span:nth-child(2) { background: rgba(94, 0, 0, .75);  transform: translateZ(-60px)  translateY(-14px); }
.depth-divider span:nth-child(3) { background: var(--surface-2);     transform: translateZ(0); }

/* ─────────────────────────────────────────────────────────────
   6. 3D TILT CARDS
   Pointer-driven rotateX/rotateY with a specular gold sheen.
   ───────────────────────────────────────────────────────────── */
.tilt {
  transform-style: preserve-3d;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  position: relative;
}
.tilt.is-tilting { transition: box-shadow var(--dur) var(--ease-out); }

.tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 184, 75, .16) 0%,
    rgba(255, 107, 0, .07) 32%,
    transparent 62%
  );
}
.tilt:hover::after { opacity: 1; }

/* Children that should float above the card face */
.tilt-pop { transform: translateZ(28px); }

/* ─────────────────────────────────────────────────────────────
   7. COMPONENTS
   ───────────────────────────────────────────────────────────── */

/* ── Buttons ──
   .btn-primary uses deep-maroon text on saffron: 6.7:1.
   White on saffron is only 2.9:1 and fails AA. */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-saffron-lt), var(--brand-saffron-dk));
  color: var(--text-on-gold);
  font-weight: 700;
  min-height: 44px;
  box-shadow: 0 4px 20px rgba(255, 107, 0, .35);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn-primary:hover {
  box-shadow: var(--glow-saffron), 0 10px 28px rgba(255, 107, 0, .42);
  transform: translateY(-2px);
}

.btn-gold {
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dk));
  color: var(--text-on-gold);
  font-weight: 700;
  min-height: 44px;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn-gold:hover { box-shadow: var(--glow-gold); transform: translateY(-2px); }

.btn-whatsapp { background: #128C7E; color: #fff; }
.btn-outline  { border-color: var(--line-strong); color: var(--text-heading); }
.btn-outline:hover { background: rgba(255, 107, 0, .1); }

#back-to-top {
  background: linear-gradient(135deg, var(--brand-saffron), var(--brand-saffron-dk));
  color: var(--text-on-gold);
  box-shadow: var(--lift-2);
  min-width: 44px; min-height: 44px;
}

/* ── Programme / discipline cards ──
   display/flex/text-decoration used to live in an inline style="" on
   each of the four <a> tags; authored here so the markup stays clean. */
.prog-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.prog-card:hover {
  background: var(--glass-2);
  border-color: var(--line-strong);
  box-shadow: var(--lift-3), var(--glow-saffron);
}
.prog-card-title-deva { color: var(--accent-text); }
.prog-card-title-en   { color: var(--text-heading); }
.prog-card-desc       { color: var(--text-muted); }
.prog-card-footer     { border-top-color: var(--line-subtle); }

.prog-tag {
  background: rgba(255, 107, 0, .12);
  color: var(--accent-text-2);
  border-color: var(--line-strong);
}
.prog-cta {
  background: rgba(255, 107, 0, .14);
  color: var(--accent-text-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.prog-card:hover .prog-cta { background: var(--brand-saffron); color: var(--text-on-gold); }

/* ── Why-train cards ── */
.why-card {
  background: var(--glass-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.why-card:hover {
  background: rgba(255, 107, 0, .08);
  border-color: var(--line-strong);
  box-shadow: var(--lift-2), var(--glow-saffron);
}
/* Typography lives here too, not just colour — these two rules replace
   an inline style="" that was repeated on all 12 <p> tags in the grid. */
.why-card p:first-child {
  font-family: var(--font-display); font-weight: 700;
  font-size: .9rem; color: var(--text-heading);
  margin-bottom: .35rem;
}
.why-card p:last-child {
  font-size: .8rem; line-height: 1.6; color: var(--text-muted);
}
.why-icon { background: linear-gradient(135deg, var(--brand-saffron), var(--brand-saffron-dk)); }

/* ── Vision & Mission ──
   Replaces the inline gradients and hard-coded #5E0000/#C8941A that
   used to sit on every badge, numeral and heading in this section. */
.vm-badge {
  width: 3rem; height: 3rem; flex-shrink: 0;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  background: linear-gradient(135deg, var(--brand-maroon), var(--brand-maroon-deep));
  /* Was var(--text-heading). This badge is always a maroon fill, but
     it sits in a LIGHT card, so that token resolved to the light
     value #3A1410 — dark ink on #5E0000, 1.15:1. The letter was
     invisible. A badge whose paint does not depend on context must
     name its text colour outright rather than inherit a token that
     flips underneath it. */
  color: var(--on-dark-heading);
  border: 1px solid var(--line);
}
/* The ghost variant replaces that maroon fill with a 7.5% maroon tint
   on a sand card, so it needs the opposite: the light-context ink.
   It must re-state the colour because the rule above hard-codes the
   dark-panel value it no longer applies. */
.vm-badge-ghost {
  background: var(--glass-2);
  border-color: var(--line-strong);
  color: var(--text-heading);
}
.vm-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: var(--accent-text);
}
.vm-num {
  width: 1.75rem; height: 1.75rem; flex-shrink: 0;
  margin-top: .125rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  background: var(--brand-gold-dk); color: var(--text-on-gold);
}
.vm-card-vision {
  background: linear-gradient(135deg, var(--surface-3), var(--surface-1));
  border: 1px solid var(--line);
  box-shadow: var(--lift-2);
}
.vm-body { font-size: .875rem; line-height: 1.7; color: var(--text-body); }
#vision-mission .text-gray-700 { color: var(--text-body); }


/* FAQ accessibility — summary must meet 44px touch target on mobile */
details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; }

/* ── Journey ── */
.kicker {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: .5rem;
}
.rule-gold {
  width: 4rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-gold-dk), var(--brand-saffron));
}
.body-copy { font-size: .875rem; line-height: 1.75; color: var(--text-body); }
.body-copy strong { color: var(--text-heading); font-weight: 700; }
.journey-img {
  max-height: 420px; object-position: center;
  border: 4px solid var(--line-strong);
  box-shadow: var(--lift-3);
}
.journey-accent {
  position: absolute; border: 4px solid var(--brand-gold-dk);
  z-index: -1; pointer-events: none;
}
.journey-accent-br { bottom: -1rem; right: -1rem; width: 6rem; height: 6rem; border-radius: var(--r-lg); opacity: .4; }
.journey-accent-tl { top: -1rem; left: -1rem; width: 4rem; height: 4rem; border-radius: var(--r-md); opacity: .3; }
.journey-figure {
  position: relative; height: 400px;
  border-radius: 1rem; overflow: hidden;
  box-shadow: var(--lift-3);
}
.journey-figure img { width: 100%; height: 100%; object-fit: cover; }
/* Tint sits on the wrapper as a pseudo-element instead of an extra
   absolutely-positioned <div> in the markup. */
.journey-figure::after {
  content: ''; position: absolute; inset: 0;
  /* rgba(30,0,0) was the last near-black left in the stylesheets —
     it slips past a `rgba(0,0,0` grep but is black to the eye.
     --deep-3 is the darkest value this palette allows. */
  background: linear-gradient(180deg, rgba(94,0,0,.15), rgba(74,13,6,.55));
}
.timeline-dot {
  width: 12px; height: 12px; flex-shrink: 0;
  margin-top: 4px; border-radius: 50%;
  background: var(--brand-gold-dk);
  border: 3px solid var(--brand-gold);
}
.btn-gold-inline { margin-top: 1.5rem; display: inline-flex; }

/* ─────────────────────────────────────────────────────────────
   GALLERY — masonry + filter chips + dialog lightbox
   Replaces a 13-slide auto-advancing carousel that showed one photo
   at a time and shipped ~90 inline style attributes.
   ───────────────────────────────────────────────────────────── */
.gal-filters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin-bottom: 2rem;
}
.gal-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px;                 /* touch target */
  padding: .5rem 1.1rem;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  color: rgba(245, 222, 184, 0.75);
  background: rgba(255, 220, 160, 0.06);
  border: 1px solid rgba(232, 184, 75, 0.22);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.gal-chip:hover {
  background: rgba(255, 220, 160, 0.12);
  border-color: rgba(232, 184, 75, 0.45);
  color: #FFF8F0;
  box-shadow: 0 0 16px rgba(232, 184, 75, 0.12);
}
.gal-chip.is-active {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.85), rgba(204, 85, 0, 0.85));
  border-color: rgba(255, 107, 0, 0.6);
  color: #FFF8F0;
  box-shadow: 0 4px 18px rgba(255, 107, 0, 0.30);
}
.gal-chip-n {
  font-size: .68rem; font-weight: 700;
  padding: .05rem .4rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
}
.gal-chip.is-active .gal-chip-n { background: rgba(0, 0, 0, 0.20); }

.gal-empty {
  text-align: center; color: var(--text-muted);
  font-size: .9rem; padding: 2rem 0;
}

/* CSS columns beat grid here: the photos are mixed portrait/landscape
   and columns pack them without cropping or fixed row heights. */
.gal-masonry { columns: 3; column-gap: 1rem; }
@media (max-width: 900px) { .gal-masonry { columns: 2; } }
@media (max-width: 520px) { .gal-masonry { columns: 1; } }

.gal-item {
  break-inside: avoid;
  margin: 0 0 1rem;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(42, 4, 4, 0.6);
  border: 1px solid rgba(232, 184, 75, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.gal-item[hidden] { display: none; }
.gal-item:hover {
  border-color: rgba(232, 184, 75, 0.45);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(232, 184, 75, 0.25),
              0 0 30px rgba(232, 184, 75, 0.10);
  transform: translateY(-4px);
}
.gal-tile {
  display: block; width: 100%; padding: 0;
  background: none; border: 0; cursor: pointer;
  position: relative; line-height: 0;
}
.gal-tile img {
  width: 100%; height: auto; display: block;
  transition: transform .55s var(--ease-out);
}
.gal-item:hover .gal-tile img { transform: scale(1.07); }

/* Full hover overlay — discipline label + open icon */
.gal-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 40%,
    rgba(42, 4, 4, 0.82) 100%);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  z-index: 1;
}
.gal-item:hover .gal-tile::before { opacity: 1; }

/* Magnifier affordance so the tile reads as openable. */
.gal-tile::after {
  content: '⤢';
  position: absolute; top: .65rem; right: .65rem;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
  color: #FFF8F0;
  background: rgba(255, 107, 0, 0.80);
  border: 1px solid rgba(232, 184, 75, 0.50);
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  z-index: 2;
}
.gal-item:hover .gal-tile::after,
.gal-tile:focus-visible::after { opacity: 1; transform: scale(1); }
.gal-tile:focus-visible { outline: 3px solid var(--brand-saffron); outline-offset: -3px; }

.gal-item figcaption {
  padding: .65rem .9rem;
  font-size: .72rem; letter-spacing: .06em;
  color: rgba(245, 222, 184, 0.65);
  border-top: 1px solid rgba(232, 184, 75, 0.12);
  background: rgba(28, 5, 3, 0.6);
  font-weight: 500;
  text-transform: uppercase;
}

/* ── Lightbox ── */
.gal-lightbox {
  border: 0; padding: 0; max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%;
  background: transparent; color: var(--text-body);
  overflow: hidden;
}
.gal-lightbox::backdrop { background: var(--scrim-4); backdrop-filter: blur(6px); }
.gal-lightbox[open] {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem;
}
.gal-lightbox-figure {
  margin: 0; max-width: min(1100px, 88vw);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.gal-lightbox-figure img {
  max-width: 100%; max-height: 78vh;
  width: auto; height: auto;
  object-fit: contain; border-radius: var(--r-md);
  box-shadow: var(--lift-3);
}
.gal-lightbox-figure figcaption {
  display: flex; align-items: center; gap: .75rem;
  font-size: .8rem; color: var(--text-muted);
}
.gal-lightbox-count {
  font-variant-numeric: tabular-nums;
  padding: .1rem .5rem; border-radius: var(--r-pill);
  background: var(--glass-2); border: 1px solid var(--line);
}
.gal-nav, .gal-close {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-2);
  border: 1px solid var(--line-strong);
  color: var(--accent-text);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.gal-nav:hover, .gal-close:hover { background: var(--brand-saffron); color: var(--text-on-gold); }
.gal-close {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 1.6rem; line-height: 1; z-index: 2;
}
@media (max-width: 640px) {
  /* Arrows move below the image so they never overlap it. */
  .gal-lightbox[open] { flex-wrap: wrap; align-content: center; }
  .gal-lightbox-figure { order: -1; width: 100%; }
  .gal-lightbox-figure img { max-height: 66vh; }
}

/* ── Achievements ──
   This section previously carried 34 inline style="" attributes, one
   per medal tile, athlete card and medal tag. */
.ach-card {
  background: var(--glass-1);
  border: 1px solid var(--line-strong);
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  box-shadow: var(--lift-2);
}
.ach-head { text-align: center; margin-bottom: 2rem; }
.ach-emoji { font-size: 2.5rem; margin-bottom: .5rem; }
.ach-congrats { font-weight: 700; color: var(--accent-text); margin-bottom: .6rem; line-height: 1.6; }
.ach-congrats-deva { font-family: var(--font-deva); font-size: .95rem; letter-spacing: .02em; }
.ach-congrats-en {
  font-family: var(--font-display); font-size: .7rem;
  letter-spacing: .28em; text-transform: uppercase;
}
.ach-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--text-heading); line-height: 1.3; margin-bottom: .4rem;
  text-shadow: 0 2px 12px rgba(94, 0, 0, .22);
}
.ach-sub {
  font-size: .9rem; font-weight: 500; letter-spacing: .04em;
  color: var(--text-body);
}
.ach-rule {
  width: 60px; height: 1px; margin: 0 auto 2rem;
  background: linear-gradient(90deg, transparent, var(--brand-gold-dk), transparent);
}

.medal-row {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1rem; margin-bottom: 2.5rem;
}
.medal {
  min-width: 90px; padding: 1rem 1.5rem;
  text-align: center; border-radius: var(--r-md);
  border: 1.5px solid;
}
.medal-emoji { font-size: 1.8rem; line-height: 1; }
.medal-n {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.6rem; line-height: 1.2;
}
.medal-label {
  font-size: .65rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-muted);
}
/* Medal metals are material colours, not brand colours, so they stay
   literal — but each is checked against the card surface for AA. */
.medal-gold   { background: linear-gradient(135deg, rgba(212,175,55,.2), rgba(212,175,55,.05)); border-color: rgba(212,175,55,.5); }
.medal-gold   .medal-n { color: #F6D860; }
.medal-silver { background: linear-gradient(135deg, rgba(192,192,192,.2), rgba(192,192,192,.05)); border-color: rgba(192,192,192,.5); }
.medal-silver .medal-n { color: #D8D8D8; }
.medal-bronze { background: linear-gradient(135deg, rgba(176,141,87,.2), rgba(176,141,87,.05)); border-color: rgba(176,141,87,.5); }
.medal-bronze .medal-n { color: #D6A97A; }
.medal-total  { background: linear-gradient(135deg, rgba(255,153,51,.2), rgba(255,153,51,.05)); border-color: rgba(255,153,51,.5); }
.medal-total  .medal-n { color: #FF9933; }

.athlete-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.athlete-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.25rem; text-align: center;
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.athlete-card:hover {
  background: var(--glass-2);
  border-color: var(--line-strong);
  box-shadow: var(--lift-2), var(--glow-saffron);
}
.athlete-photo {
  width: 100%; overflow: hidden;
  border-radius: .75rem; margin-bottom: .75rem;
}
.athlete-photo img {
  width: 100%; height: auto; display: block;
  object-fit: cover; object-position: center top;
}
.athlete-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; color: var(--text-heading); margin-bottom: .3rem;
}
.athlete-medals {
  display: flex; gap: .4rem; justify-content: center;
  flex-wrap: wrap; margin-top: .5rem;
}
.mtag {
  border-radius: var(--r-pill); padding: .2rem .6rem;
  font-size: .65rem; font-weight: 600; border: 1px solid;
}
.mtag-gold   { background: rgba(212,175,55,.2); border-color: rgba(212,175,55,.5); color: #F6D860; }
.mtag-silver { background: rgba(192,192,192,.2); border-color: rgba(192,192,192,.5); color: #D8D8D8; }
.mtag-bronze { background: rgba(176,141,87,.2); border-color: rgba(176,141,87,.5); color: #D6A97A; }

/* ── Sankalp ──
   The homepage section used to be a Sanskrit line plus a link. It now
   carries the five pledges, set on a depth-layered backdrop. */
.sankalp-stage {
  background: linear-gradient(160deg, var(--surface-0) 0%, var(--surface-2) 45%, var(--surface-1) 100%);
  perspective: var(--stage-perspective);
}
.sankalp-depth {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.sankalp-plane { position: absolute; border-radius: 50%; }
.sankalp-plane-1 {
  inset: -20% 30% 40% -10%;
  background: radial-gradient(ellipse at center, rgba(200,148,26,.16) 0%, transparent 68%);
  transform: translateZ(-220px) scale(1.18);
}
.sankalp-plane-2 {
  inset: 25% -15% -25% 40%;
  background: radial-gradient(ellipse at center, rgba(255,107,0,.13) 0%, transparent 68%);
  transform: translateZ(-120px) scale(1.1);
}
.sankalp-plane-3 {
  inset: 10% 20% 20% 20%;
  background: radial-gradient(ellipse at center, rgba(232,184,75,.07) 0%, transparent 70%);
  transform: translateZ(-40px) scale(1.03);
}
.sankalp-shloka {
  font-family: var(--font-deva); font-weight: 700;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  color: var(--accent-text);
  text-shadow: 0 2px 18px rgba(58, 8, 4, .60);
  line-height: 1.35; margin-bottom: .35rem;
}
.sankalp-shloka-en {
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 1.25rem;
}
.sankalp-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sankalp-card {
  display: flex; flex-direction: column; gap: .6rem;
  padding: 1.5rem 1.4rem;
  background: var(--glass-1);
  border: 1px solid var(--line-subtle);
  border-top: 3px solid var(--brand-gold);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
  transition: background var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.sankalp-card:hover {
  background: var(--glass-2);
  border-top-color: var(--accent-text-2);
  box-shadow: var(--lift-2), var(--glow-saffron);
}
.sankalp-card p { font-size: .875rem; line-height: 1.7; color: var(--text-body); }
.sankalp-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; color: var(--accent-text);
  letter-spacing: .04em;
}
.sankalp-quote {
  margin-top: 2.5rem; padding: 2.75rem 2rem;
  background: linear-gradient(135deg, var(--surface-3), var(--surface-0));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  text-align: center; position: relative; overflow: hidden;
}
.sankalp-quote::before {
  content: '"'; position: absolute; top: -1.5rem; left: 1.5rem;
  font-family: var(--font-display); font-size: 8rem;
  color: rgba(232, 184, 75, .13); line-height: 1;
}
.sankalp-quote p {
  position: relative; z-index: 1;
  font-size: 1rem; line-height: 1.85;
  color: var(--text-body); font-style: italic;
}
.sankalp-quote cite {
  position: relative; z-index: 1;
  display: block; margin-top: 1.25rem;
  font-family: var(--font-display); font-style: normal;
  font-size: .85rem; color: var(--accent-text); letter-spacing: .06em;
}
@media (max-width: 767px) {
  /* preserve-3d is dropped on small screens; the planes flatten to a
     plain gradient wash so mobile keeps its frame budget. */
  .sankalp-stage { perspective: none; }
  .sankalp-depth { transform-style: flat; }
  .sankalp-plane { transform: none; }
}

/* ── Surface utilities ──
   Real classes for the alternating section rhythm. Sections used to
   carry the colour as an inline style="background:#FFFBF5", which
   inline-wins over every stylesheet and so had to be clawed back with
   !important in a shim stylesheet. A class needs no !important and can
   be re-themed from the token block, so each section converted to one
   of these deleted both an inline style and a shim rule. That process
   finished: the shim (assets/css/legacy-inline.css) had no matching
   selector left and has been removed from the project. */
.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.surface-3 { background: var(--surface-3); }

/* ── Generic light-surface classes remapped ── */
/* This mapped to --glass-1, a 4.5%-alpha maroon wash. That was
   correct on the old dark theme, where a faint light film read as a
   raised card. On sand it is nearly the section colour itself, and
   about twenty cards — the FAQ list, the uniform cards, the contact
   panel — would have lost their edges entirely.
   --surface-4 is the top of the ladder, so a card reads against
   every section below it (sections use --surface-1/2). */
.bg-white, [class*="bg-white"] { background: var(--surface-4); }
.border-orange-100, [class*="border-orange"] { border-color: var(--line); }
.shadow-soft { box-shadow: var(--lift-2); }

/* ── Discipline pills ── */
.pill-malla { background: rgba(255, 107, 0, .12);  color: var(--accent-text); border-color: var(--line-strong); }
.pill-kusti { background: rgba(214, 78, 78, .14);  color: #FF9B9B; border-color: rgba(214, 78, 78, .38); }
.pill-arch  { background: rgba(56, 168, 112, .14); color: #86E3B0; border-color: rgba(56, 168, 112, .38); }
.pill-yoga  { background: rgba(126, 106, 214, .16); color: #C4B4FF; border-color: rgba(126, 106, 214, .40); }

/* ══════════════════════════════════════════════════════════════
   SCHEDULE — Dark Premium Batch Cards (CRO-optimised, mobile-first)
   ══════════════════════════════════════════════════════════════ */

/* Section dark background */
#schedule {
  background: var(--surface-2);
  position: relative;
}
#schedule::before {
  content: none;
}

/* ── Tab bar ─────────────────────────────────────────────── */
.sch-tab-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 2rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0.25rem 1rem 0.5rem;
}
.sch-tab-wrap::-webkit-scrollbar { display: none; }

.sch-tabs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: max-content;
  justify-content: center;
  padding: 0.1rem 0;
}

.sch-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(245,222,184,0.65);
  background: rgba(255,220,160,0.06);
  border: 1px solid rgba(232,184,75,0.18);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, transform 0.18s ease,
              box-shadow 0.22s ease;
}
.sch-tab:hover {
  background: rgba(255,220,160,0.12);
  color: rgba(245,222,184,0.95);
  border-color: rgba(232,184,75,0.35);
  transform: translateY(-1px);
}
.sch-tab:focus-visible { outline: 2px solid var(--brand-saffron); outline-offset: 3px; }
.sch-tab:active { transform: scale(0.96); }
.sch-tab.is-active {
  background: linear-gradient(135deg, #FF8C38, #CC5500);
  border-color: rgba(255,107,0,0.6);
  color: #FFF8F0;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(255,107,0,0.45);
}
.sch-tab-icon { font-size: 1rem; line-height: 1; }

/* ── Batch card grid ─────────────────────────────────────── */
.sch-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.1rem;
}
@media (max-width: 479px) {
  .sch-batch-grid { grid-template-columns: 1fr; gap: 0.85rem; }
}

/* ── Batch card base ─────────────────────────────────────── */
.sch-batch-card {
  position: relative;
  background: rgba(255,226,190,0.04);
  border: 1px solid rgba(232,184,75,0.13);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.04) inset;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.28s cubic-bezier(0.22,1,0.36,1),
              transform 0.3s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.sch-batch-card[hidden] { display: none; }
.sch-batch-card.sch-hiding {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  pointer-events: none;
}
.sch-batch-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(232,184,75,0.32);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4),
              0 0 0 1px rgba(232,184,75,0.2),
              0 0 30px rgba(232,184,75,0.07);
}
.sch-batch-card:active { transform: translateY(-3px) scale(1.005); }

/* Discipline colour top stripe */
.sch-batch-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 1.25rem 1.25rem 0 0;
}
.sch-batch-card[data-sport="mallakhamb"]::before {
  background: linear-gradient(90deg, #FF4500, #FF8C38, #FF4500);
}
.sch-batch-card[data-sport="kusti"]::before {
  background: linear-gradient(90deg, #1565C0, #42A5F5, #1565C0);
}
.sch-batch-card[data-sport="yoga"]::before {
  background: linear-gradient(90deg, #1B5E20, #66BB6A, #1B5E20);
}
.sch-batch-card[data-sport="dhanurvidya"]::before {
  background: linear-gradient(90deg, #B8860B, #FFD770, #B8860B);
}

/* Discipline-tinted background glow in top-left corner */
.sch-batch-card[data-sport="mallakhamb"] { box-shadow: 0 4px 24px rgba(0,0,0,0.32), inset 0 0 60px rgba(255,107,0,0.04); }
.sch-batch-card[data-sport="kusti"]      { box-shadow: 0 4px 24px rgba(0,0,0,0.32), inset 0 0 60px rgba(21,101,192,0.05); }
.sch-batch-card[data-sport="yoga"]       { box-shadow: 0 4px 24px rgba(0,0,0,0.32), inset 0 0 60px rgba(27,94,32,0.05); }
.sch-batch-card[data-sport="dhanurvidya"]{ box-shadow: 0 4px 24px rgba(0,0,0,0.32), inset 0 0 60px rgba(184,134,11,0.05); }

/* Card inner layout */
.sch-card-accent { display: none; } /* replaced by ::before stripe */

.sch-card-inner {
  padding: 1.15rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Top row: discipline pill + batch type */
.sch-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Discipline pills — dark treatment */
.disc-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.pill-malla {
  background: rgba(255,107,0,0.14);
  color: #FF8C38;
  border-color: rgba(255,107,0,0.3);
}
.pill-kusti {
  background: rgba(21,101,192,0.15);
  color: #64B5F6;
  border-color: rgba(21,101,192,0.35);
}
.pill-yoga {
  background: rgba(27,94,32,0.18);
  color: #81C784;
  border-color: rgba(27,94,32,0.4);
}
.pill-arch {
  background: rgba(184,134,11,0.15);
  color: #FFD54F;
  border-color: rgba(184,134,11,0.35);
}

/* Batch type badge */
.sch-batch-type-pill {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255,107,0,0.12);
  border: 1px solid rgba(255,107,0,0.25);
  color: rgba(255,140,56,0.9);
  white-space: nowrap;
  flex-shrink: 0;
}
.sch-batch-type-pill.sch-batch-regular {
  background: rgba(232,184,75,0.1);
  border-color: rgba(232,184,75,0.25);
  color: rgba(232,184,75,0.85);
}

/* ── Time display — the hero element ────────────────────── */
.sch-time-display {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 900;
  color: #FFF8F0;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 0 32px rgba(232,184,75,0.2);
}
.sch-time-display.sch-time-multi {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  gap: 0.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: none;
}
.sch-time-multi span {
  color: rgba(245,222,184,0.85);
  font-weight: 700;
}

/* ── Meta row ────────────────────────────────────────────── */
.sch-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid rgba(232,184,75,0.08);
}
.sch-meta-item {
  font-size: 0.78rem;
  color: rgba(245,222,184,0.55);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── Urgency signal ─────────────────────────────────────── */
.sch-urgency {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FF8C38;
  background: rgba(255,107,0,0.1);
  border: 1px solid rgba(255,107,0,0.22);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  animation: urgencyPulse 2.5s ease-in-out infinite;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* ── CTA Button — full width, shimmer ───────────────────── */
.sch-card-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 1rem;
  min-height: 50px;
  background: linear-gradient(135deg, #FF8C38 0%, #CC5500 100%);
  color: #FFF8F0;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0.85rem;
  box-shadow: 0 4px 20px rgba(204,85,0,0.5);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* Shimmer sweep */
.sch-card-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: schShimmer 2.8s ease-in-out 0.5s infinite;
}
@keyframes schShimmer {
  0%   { left: -80%; }
  100% { left: 140%; }
}
.sch-card-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(204,85,0,0.65);
}
.sch-card-cta:active { transform: scale(0.97); box-shadow: 0 2px 12px rgba(204,85,0,0.5); }

/* ── Count text ─────────────────────────────────────────── */
.sch-count {
  text-align: center;
  font-size: 0.76rem;
  color: rgba(245,222,184,0.45);
  margin-bottom: 1rem;
  min-height: 1.2em;
  letter-spacing: 0.05em;
}

/* ── Notes ──────────────────────────────────────────────── */
.sch-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
}
.sch-note {
  font-size: 0.73rem;
  color: rgba(245,222,184,0.4);
}
.sch-note strong { color: rgba(232,184,75,0.75); font-weight: 700; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sch-batch-card, .sch-tab, .sch-card-cta { transition: none !important; }
  .sch-batch-card:hover, .sch-tab:hover    { transform: none !important; }
  .sch-card-cta::after, .sch-urgency       { animation: none !important; }
}

/* ── FAQ ── */
#faq details {
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
#faq details[open] { background: var(--glass-2); border-color: var(--line-strong); }
#faq summary { color: var(--text-heading); }
#faq p { color: var(--text-muted); }

/* ── Google reviews badge ──
   Was #5E0000 score / #6B4C3B count inline — maroon-on-maroon and
   2.65:1 respectively once the page went dark. */
.grev-score {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-text);
  letter-spacing: .05em;
}
.grev-stars { color: var(--accent-text); font-size: 1.1rem; letter-spacing: .05em; }
.grev-count { font-size: .8rem; color: var(--text-muted); }

/* ── Reviews ── */
.reviews-track > div {
  background: var(--glass-2);
  border-color: var(--line);
  border-radius: var(--r-md);
}

/* ── Forms ── */
.form-input {
  background: var(--glass-2);
  border: 1px solid var(--line);
  color: var(--text-heading);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-input::placeholder { color: var(--text-muted); opacity: .7; }
.form-input:focus {
  border-color: var(--accent-text-2);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, .18);
  outline: none;
}
.form-label { color: var(--accent-text); }

.adm-disc-lbl, .adm-slot-lbl {
  background: var(--glass-1);
  border: 1px solid var(--line);
  color: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.adm-disc-lbl:has(input:checked),
.adm-slot-lbl:has(input:checked) {
  border-color: var(--accent-text-2);
  background: rgba(255, 107, 0, .12);
  color: var(--text-heading);
}

/* 3-step admission form progress labels. admSetStep() toggles
   .is-current / .is-done; all three states are declared here so the
   step indicator can be re-themed without touching the script. */
.adm-step-lbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.adm-step-lbl.is-done    { color: var(--accent-text-2); }
.adm-step-lbl.is-current { color: var(--accent-text); font-weight: 700; }

.adm-disc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.adm-disc-lbl {
  display: block;
  padding: 12px;
  border-radius: var(--r-md);
  text-align: center;
  cursor: pointer;
}
.adm-disc-initial {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-text);
  margin-bottom: 3px;
}
.adm-disc-name  { display: block; font-size: 12px; font-weight: 600; color: var(--text-heading); }
.adm-disc-blurb { display: block; font-size: 10px; color: var(--text-muted); }

/* Batch-slot labels are rendered from JS (ADM_BATCH_MAP) once a
   discipline is picked, so their layout has to live here rather than in
   the template string that builds them. */
.adm-slot-lbl {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.adm-slot-time { display: block; font-size: 12px; font-weight: 500; color: var(--text-heading); }
.adm-slot-days { font-size: 10px; color: var(--text-muted); }

/* The radio itself is hidden visually but NOT removed from the
   accessibility tree — `display:none` would make the batch options
   impossible to reach with a keyboard or screen reader. */
.adm-vh-radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Focus has to be visible on the label, since the input it belongs to
   is the hidden element. */
.adm-slot-lbl:has(.adm-vh-radio:focus-visible),
.adm-disc-lbl:has(input:focus-visible) {
  outline: 3px solid var(--brand-saffron);
  outline-offset: 2px;
}

/* ── Admission form card ──
   These replace ~48 inline style="" attributes on the enrollment
   form. The card is .on-light (see §2): it is a near-white panel
   floating on the deep maroon #admission section, so its subtree
   has to opt back out of the dark token scope. */
.adm-card {
  background: var(--surface-4);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--lift-3);
}

/* The card's own header is maroon, so it carries .on-dark in the
   markup and flips the tokens a second time for its subtree. */
.adm-hero {
  background: linear-gradient(160deg, var(--brand-maroon-deep) 0%, var(--brand-maroon) 60%, var(--deep-1) 100%);
  padding: var(--space-6) 1.75rem;
  position: relative;
  overflow: hidden;
}
.adm-hero-orb {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 0, .15) 0%, transparent 70%);
}
.adm-hero-title {
  position: relative;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--on-dark-heading);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-1);
}
.adm-hero-sub {
  position: relative;
  font-size: 12px;
  color: var(--on-dark-muted);
  margin-bottom: 14px;
}
.adm-chip-row { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }

/* Progress bar. admSetStep() writes .style.width on the fill, so the
   33% start sits here and the inline value it writes at runtime
   correctly outranks it. */
.adm-progress { background: var(--glass-2); height: 3px; }
.adm-progress-fill {
  height: 100%;
  width: 33%;
  background: linear-gradient(90deg, var(--brand-saffron), var(--brand-gold));
  transition: width var(--dur-slow) var(--ease-out);
}
.adm-steps-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 1.75rem;
  background: var(--glass-1);
  border-bottom: 1px solid var(--line);
}
.adm-body { padding: 1.75rem; }

/* admSetStep() toggles .style.display directly and never reads it
   back, so the resting state is safe to keep in CSS. */
.adm-step { display: none; }
.adm-step.active { display: block; }

.adm-step-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  color: var(--accent-text);
  margin-bottom: var(--space-1);
}
.adm-step-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  line-height: 1.6;
}
.adm-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.adm-fg-lg { margin-bottom: var(--space-5); }
.adm-fine {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
}
.field-error.mb-12 { margin-bottom: var(--space-3); }
.field-error.is-consent { margin-top: 6px; margin-left: 28px; }

/* Consent block. Green is the one non-brand hue on the page and it
   is deliberate — it reads as "safe/permission", not as decoration. */
.adm-consent {
  background: #F0FDF4;
  border: 1.5px solid #86EFAC;
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: var(--space-4);
}
.adm-consent-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.adm-consent-box {
  margin-top: 3px;
  width: 18px; height: 18px;
  accent-color: var(--brand-maroon);
  flex-shrink: 0; cursor: pointer;
}
.adm-consent-text { font-size: 11px; color: #1A4731; line-height: 1.6; }
.adm-consent-text a { color: var(--brand-maroon); font-weight: 600; text-decoration: underline; }

.adm-slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: var(--space-4);
}
/* Also emitted by admRenderSlots() as the empty state, so it must be
   a class — the template string that builds it cannot carry tokens. */
.adm-slot-empty {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-4) 0;
}

/* ── Buttons ──
   The :hover rules here replace inline onmouseover/onmouseout
   handlers that wrote element.style.transform / .borderColor. Those
   handlers were not just verbose: an inline style outranks the
   stylesheet, so they made these buttons impossible to re-theme. */
.adm-nav { display: flex; gap: 10px; }
.adm-btn {
  padding: 13px;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  min-height: 48px;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.adm-btn.is-block { width: 100%; padding: 14px; }
.adm-btn.is-grow  { flex: 1; }
.adm-btn-primary {
  background: linear-gradient(135deg, var(--brand-maroon), var(--brand-maroon-deep));
  color: var(--on-dark-heading);
}
.adm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(94, 0, 0, .30); }
/* Saffron is a fill, never a text colour — dark-on-saffron is 6.7:1. */
.adm-btn-submit {
  background: linear-gradient(135deg, var(--brand-saffron-lt), var(--brand-saffron));
  color: var(--text-on-gold);
}
.adm-btn-submit:hover { transform: translateY(-2px); box-shadow: var(--glow-saffron); }
.adm-btn-back {
  flex: 0 0 auto;
  padding: 13px 18px;
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  cursor: pointer;
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.adm-btn-back:hover { border-color: var(--brand-maroon); color: var(--brand-maroon); }

/* ── Step 3: summary, next-steps, network error ── */
.adm-summary {
  background: #FFF3E0;
  border: 1px solid rgba(255, 107, 0, .25);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
}
.adm-summary-title {
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-text-2);
  margin-bottom: 10px;
}
.adm-summary-body { font-size: 13px; color: var(--text-body); line-height: 2; }
.adm-next {
  background: var(--glass-1);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 18px;
}
.adm-next-title { font-size: 12px; color: var(--accent-text); font-weight: 500; margin-bottom: 6px; }
.adm-next-body  { font-size: 12px; color: var(--text-muted); line-height: 1.8; }

.adm-neterr {
  display: none;
  background: #FFF1F1;
  border: 1.5px solid #EF4444;
  border-radius: var(--r-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}
.adm-neterr-title { font-size: 13px; color: #B91C1C; font-weight: 600; margin-bottom: 6px; }
.adm-neterr-sub   { font-size: 11px; color: var(--text-muted); margin-bottom: var(--space-3); }
/* WhatsApp green is light: white on it is 1.98:1. Deep green is 6.3:1. */
.btn-wa-block {
  display: block;
  background: #25D366; color: #063d1e;
  font-weight: 700;
  padding: 11px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: var(--space-2);
}
.adm-btn-retry {
  width: 100%;
  padding: 11px;
  background: var(--brand-maroon);
  color: var(--on-dark-heading);
  border: none;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
}

/* ── Success state — revealed by admSubmit() writing display:block ── */
.adm-success { display: none; text-align: center; padding: var(--space-5) 0; }
.adm-success-icon {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF3E0, rgba(255, 107, 0, .15));
  border: 2px solid rgba(255, 107, 0, .3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-5);
  animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.adm-success-title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 700;
  color: var(--accent-text);
  margin-bottom: var(--space-2);
}
.adm-success-body   { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-5); }
.adm-success-mantra { font-size: 11px; color: var(--text-muted); }

/* Utility: for the two hidden relay <form>s that only carry inputs. */
.is-hidden { display: none; }

/* ── #admission left column ──
   The section is .on-dark, so these name --on-dark-* tokens rather
   than the hard-coded white / #fff they used to carry inline. */
.trial-eyebrow {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: var(--space-2);
}
.trial-h2 {
  font-size: var(--fs-3xl);
  color: var(--on-dark-heading);
  line-height: 1.1;
}
.section-divider.is-left { margin-left: 0; }
.trial-lede {
  color: var(--on-dark-heading);
  text-shadow: 0 1px 3px rgba(58, 8, 4, .45);
}
.trial-hours {
  color: var(--on-dark-body);
  text-shadow: 0 1px 2px rgba(58, 8, 4, .4);
}
/* Three identical chips in the markup, one rule here. */
.trust-chip-dark {
  color: var(--on-dark-heading);
  background: rgba(60, 10, 0, .45);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 200, 100, .25);
}

/* Shared section heading. Three <h2>s carried the same ad-hoc
   clamp(2rem,5vw,3.2rem) inline; --fs-3xl is the equivalent step on
   the type scale, so they now sit on the scale instead of beside it. */
.section-h2 { font-size: var(--fs-3xl); color: var(--accent-text); }

/* ── Contact block ── */
.map-card  { box-shadow: var(--lift-3); }
.map-embed { border: 0; min-height: 300px; display: block; }

/* The left rule is the only thing distinguishing these three cards. */
.contact-card.is-saffron { border-color: var(--brand-saffron); }
.contact-card.is-gold    { border-color: var(--brand-gold-dk); }
.contact-card.is-maroon  { border-color: var(--brand-maroon); }
.t-gold { color: var(--brand-gold-dk); }

/* A long unbroken email address overflows its card on narrow screens. */
.break-anywhere { word-break: break-word; overflow-wrap: anywhere; }

/* ── Social buttons ──
   Brand hues are fixed by the platforms, so these are the one place
   non-palette colour is legitimate. The icon colour is not: an icon
   that carries meaning needs 3:1 per WCAG 1.4.11.
     white on #FF0000  → 4.00:1  ok
     white on #1877F2  → 4.48:1  ok
     white on #25D366  → 1.98:1  FAILS — WhatsApp green is a light hue
   So the WhatsApp glyph is deep green (6.3:1), matching .btn-wa-fill
   and .btn-wa-block, which already had this right. */
.social-ig { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); color: #fff; }
.social-yt { background: #FF0000; color: #fff; }
.social-fb { background: #1877F2; color: #fff; }
.social-wa { background: #25D366; color: #063d1e; }

/* ── Modals ── */
.modal-overlay { background: var(--scrim-3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-panel {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
}

.quiz-opt {
  background: var(--glass-1);
  border: 1px solid var(--line);
  color: var(--text-heading);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.quiz-opt:hover, .quiz-opt.selected {
  background: rgba(255, 107, 0, .13);
  border-color: var(--accent-text-2);
  color: var(--accent-text-2);
  transform: translateY(-1px);
}
.quiz-step p { color: var(--text-body); }
#quiz-result-text { color: var(--text-body); }

/* Quiz contact-capture step. Kept deliberately short — two fields —
   because every extra field costs completions, and the phone number
   is the only channel the akhada actually calls back on. */
.quiz-form { margin-top: 1.1rem; text-align: left; }
.quiz-field { display: block; margin-bottom: .85rem; }
.quiz-flabel {
  display: block; margin-bottom: .3rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.quiz-field input {
  width: 100%; min-height: 48px;
  padding: .7rem .9rem;
  font-family: var(--font-body); font-size: .88rem;
  color: var(--text-heading);
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.quiz-field input::placeholder { color: var(--text-muted); opacity: .75; }
.quiz-field input:focus-visible {
  outline: 3px solid var(--brand-saffron); outline-offset: 1px;
  border-color: var(--accent-text-2);
}
.quiz-error {
  margin: 0 0 .7rem; font-size: .76rem; font-weight: 600;
  color: #FF9B9B;                       /* 6.4:1 on the modal surface */
}
.quiz-submit {
  width: 100%; min-height: 52px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-on-gold);
  background: linear-gradient(135deg, var(--brand-saffron), var(--brand-saffron-dk));
  border: none; border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 107, 0, .3);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.quiz-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--glow-saffron), 0 6px 20px rgba(255,107,0,.36); }
.quiz-submit:disabled { opacity: .65; cursor: default; }
.quiz-submit:focus-visible { outline: 3px solid var(--brand-gold); outline-offset: 2px; }
.quiz-skip {
  display: block; width: 100%; min-height: 44px;
  margin-top: .5rem; padding: .5rem;
  background: none; border: none;
  font-size: .74rem; color: var(--text-muted);
  text-decoration: underline; cursor: pointer;
}
.quiz-skip:hover { color: var(--text-body); }

/* ── Admission modal ──
   Shares the quiz's field primitives (.quiz-field / .quiz-submit) rather
   than defining a parallel set, so the two dialogs can't drift apart. */
.adm-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(94vw, 26rem);
  max-height: min(90dvh, 44rem);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-3), var(--surface-1));
  box-shadow: var(--lift-3);
  color: var(--text-body);
  overflow-y: auto;
  overflow-x: hidden;
}
.adm-modal::backdrop { background: var(--scrim-3); backdrop-filter: blur(5px); }

.adm-modal-dismiss { margin: 0; }
.adm-modal-x {
  position: absolute; top: .6rem; right: .7rem;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1;
  color: var(--text-muted);
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}
.adm-modal-x:hover { color: var(--text-heading); background: var(--glass-2); }
.adm-modal-x:focus-visible { outline: 3px solid var(--brand-saffron); outline-offset: 2px; }

.adm-modal-head {
  padding: 1.6rem 1.5rem 1rem;
  border-bottom: 1px solid var(--line-subtle);
}
.adm-modal-kicker {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: .35rem;
}
.adm-modal-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; color: var(--text-heading); margin: 0 0 .3rem;
}
.adm-modal-sub { font-size: .78rem; color: var(--text-muted); margin: 0; }

.adm-modal-form { padding: 1.25rem 1.5rem 1.5rem; }
.adm-modal-form .quiz-field select {
  width: 100%; min-height: 48px;
  padding: .7rem .9rem;
  font-family: var(--font-body); font-size: .88rem;
  color: var(--text-heading);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.adm-modal-form .quiz-field select:focus-visible {
  outline: 3px solid var(--brand-saffron); outline-offset: 1px;
}
.adm-modal-long {
  display: block; margin-top: .75rem; text-align: center;
  font-size: .74rem; color: var(--text-muted); text-decoration: underline;
}
.adm-modal-long:hover { color: var(--accent-text); }

.adm-modal-done { padding: 2rem 1.5rem 1.75rem; text-align: center; }
.adm-modal-tick {
  width: 3.25rem; height: 3.25rem; margin: 0 auto .9rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--text-on-gold);
  background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dk));
  border-radius: 50%;
}
.adm-modal-donetitle {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.15rem; color: var(--text-heading); margin-bottom: .4rem;
}
.adm-modal-donetext { font-size: .82rem; line-height: 1.6; color: var(--text-body); }

.toast-success { background: linear-gradient(135deg, #0D4A2F, #0A3520); color: #fff; }

/* ── Hero / stats bar ── */
.hero-section {
  background: linear-gradient(165deg, var(--surface-0) 0%, var(--surface-2) 58%, var(--surface-4) 100%);
}
.hero-overlay {
  background: radial-gradient(ellipse at 30% 45%, rgba(255, 107, 0, .10) 0%, rgba(74, 13, 6, .80) 100%);
}

.stats-bar {
  background: linear-gradient(90deg, rgba(42, 4, 4, 0.97), rgba(74, 13, 6, 0.97));
  border-top: 1px solid rgba(232, 184, 75, 0.35);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.3);
}
.stat-item {
  position: relative;
}
.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(232, 184, 75, 0.20);
}
.stat-num {
  color: #E8B84B;
  font-family: 'Cinzel', serif;
  text-shadow: 0 0 20px rgba(232, 184, 75, 0.40);
}
.stat-lbl { color: rgba(245, 222, 184, 0.55); letter-spacing: 0.18em; }

.scroll-indicator span, .scroll-indicator svg { color: var(--text-muted); opacity: .65; }

/* ── Gallery carousel (pre-existing) ── */
#gc-stage   { background: var(--surface-0); }
#gc-counter { color: var(--text-muted); }

/* ── Legacy modals ── */
#quiz-modal {
  background: var(--surface-3);
  border: 1px solid var(--line);
  box-shadow: var(--lift-3);
}
#phone-modal       { background: var(--scrim-3); }
#gas-success-modal { background: var(--scrim-4); }

/* ── Phone modal, de-Tailwinded ──
   These four replace bg-black/60, bg-white, text-gray-400 and a
   text-white-on-#25D366 button. tailwind.min.css is a static build,
   so each of those was a literal value with no token behind it. */
.modal-scrim { background: var(--scrim-2); }

.phone-modal-panel {
  background: var(--surface-3);
  border: 1px solid var(--line);
  box-shadow: var(--lift-3);
  animation: zoomIn .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.phone-modal-x { color: var(--text-muted); }
.phone-modal-x:hover { color: var(--brand-maroon); }

/* WhatsApp green is a light hue: white on it is 1.98:1, which is
   worse than any other contrast on the page. Deep green is 6.3:1
   and matches .btn-whatsapp, which already had this right. */
.btn-wa-fill { background: #25D366; color: #063d1e; }

/* Its sibling "Call" button carried `text-white` plus an inline
   background. Pure white is the one neutral this palette does not
   use — --on-dark-heading is the warm equivalent, and on maroon it
   is 12.6:1, so nothing is lost by matching the rest of the site. */
.btn-call-fill { background: var(--brand-maroon); color: var(--on-dark-heading); }
#gas-success-modal > div {
  background: var(--surface-3);
  border: 1px solid var(--line);
  box-shadow: var(--lift-3);
}
.quiz-emoji { filter: none; }

/* ── Hero badge ── */
.hero-trial-badge {
  background: rgba(255, 107, 0, .13);
  border: 1px solid var(--line-strong);
  color: var(--accent-text-2);
}

/* ── Footer ── */
footer { background: var(--surface-0); border-top: 2px solid var(--brand-saffron); }

.site-footer {
  background: var(--surface-0);
  border-top: 3px solid;
  border-image: linear-gradient(90deg,
    var(--brand-maroon), var(--brand-gold-dk), var(--brand-saffron)) 1;
}

/* The one genuinely dark block in the footer. Carries .on-dark in
   the markup, so the gold motto and the muted "Established 2023"
   line resolve against maroon rather than against sand. */
.footer-crest {
  background: var(--brand-maroon);
  padding: 2.25rem 1.5rem;
  text-align: center;
  border-bottom: 2px solid rgba(200, 148, 26, .3);
}
.footer-crest img { height: 72px; width: auto; margin: 0 auto; display: block; object-fit: contain; }
.footer-motto {
  font-family: var(--font-deva);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-gold);
  margin-top: var(--space-3);
  line-height: var(--lh-body);
}
.footer-est {
  color: var(--on-dark-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  margin-top: var(--space-1);
}
.footer-heading { color: var(--accent-text); }
.footer-link { color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }
.footer-link:hover { color: var(--accent-text-2); }

.footer-bottom { border-top: 1px solid var(--line-subtle); }
.footer-bottom-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  color: var(--text-muted);   /* #7A4A38 on #EBD4B8 = 5.11:1 */
  text-align: center;
}
.footer-legal { display: flex; gap: 1.25rem; }
.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-legal a:hover,
.footer-legal a:focus-visible { color: var(--accent-text); }

/* ── Map ── */
#contact iframe {
  filter: invert(.9) hue-rotate(180deg) saturate(.8);
  border-radius: var(--r-md);
}

/* ── Floating action buttons ──
   The three FABs each carried a ~10-declaration inline style plus an
   onmouseover/onmouseout pair that wrote element.style.transform. Two
   reasons that had to go beyond verbosity:

   1. An inline style outranks every stylesheet, so the JS hover made
      these three buttons the only un-themeable controls on the site.
   2. #back-to-top was an actual bug. It carried `opacity:0` inline
      while the stylesheet had a `#back-to-top.visible { opacity:1 }`
      rule — which inline styles beat, so the class could never show
      the button. The scroll handler worked around it by writing
      .style.opacity directly on every scroll event, which left the
      .visible rule as dead code. With the inline style gone the class
      works, and the handler is one classList.toggle.

   Shared geometry lives on .fab; each button adds only its paint. */
.fab {
  position: fixed;
  bottom: 1.5rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 240, 220, 0.28);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.fab:hover { transform: scale(1.06); }

/* Green is fixed by the platform. The label is NOT: white on #25D366
   is 1.98:1, so the text and glyph are deep green (6.3:1), matching
   .btn-wa-fill and .btn-wa-block elsewhere in this file. */
.fab-wa {
  left: 1rem;
  background: #25D366;
  color: #063d1e;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
}
.fab-trial {
  right: 1rem;
  background: linear-gradient(135deg, var(--brand-saffron-lt), var(--brand-saffron));
  color: var(--text-on-gold);
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.45);
}
.fab svg { flex-shrink: 0; }

/* Two JS width-listeners used to toggle .style.display on these
   labels on every resize event. A media query does the same job with
   no script, no listener, and no inline style to fight later. */
.fab-label-desktop { display: none; }
.fab-label-mobile  { display: inline; }
@media (min-width: 768px) {
  .fab-label-desktop { display: inline; }
  .fab-label-mobile  { display: none; }
}

/* ── Reviews CTA pill ── */
.reviews-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface-4);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.65rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
  box-shadow: var(--lift-1);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.reviews-cta:hover,
.reviews-cta:focus-visible { box-shadow: var(--lift-2); }

/* ─────────────────────────────────────────────────────────────
   8. REVEAL (reuses the existing IntersectionObserver)
   ───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1),
              transform 0.5s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* ── CRO micro-interactions ─────────────────────────────────── */
/* Pulse on primary CTA to draw attention (subtle, once) */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(255,107,0,0.35); }
  50%       { box-shadow: 0 4px 36px rgba(255,107,0,0.6), 0 0 0 6px rgba(255,107,0,0.08); }
}
.btn-primary {
  animation: ctaPulse 3s ease-in-out 2s infinite;
}
/* Stop pulsing after user interacts */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary { animation: none; }
}

/* ─────────────────────────────────────────────────────────────
   9. RESPONSIVE — mobile drops true 3D for parallax-lite
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --stage-track: 190vh; }

  /* preserve-3d is expensive and composites poorly on low-end
     Android. stage.js detects this and switches to translateY. */
  .stage { perspective: none; transform-style: flat; }
  .stage-layer { transform-style: flat; }
  .stage-layer[data-depth="-4"],
  .stage-layer[data-depth="-2"] { display: none; }  /* 2 layers only */
  .stage-motes { display: none; }

  .tilt::after { display: none; }
  .depth-divider { height: 72px; perspective: none; }
}

/* Touch devices: no hover tilt, and tap targets stay ≥44px */
@media (hover: none) {
  .tilt::after { display: none; }
  .btn-primary, .btn-gold, .btn-outline, .btn-whatsapp,
  .quiz-opt, .nav-link, .mobile-nav-link, .prog-cta {
    min-height: 44px;
  }
}

/* ─────────────────────────────────────────────────────────────
   10. REDUCED MOTION — the stage becomes a static composition
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .stage-track { height: 100vh; }
  .stage { perspective: none; transform-style: flat; }
  .stage-layer { transform: none !important; }
  .stage-layer[data-depth="-4"],
  .stage-layer[data-depth="-2"] { display: none; }
  .stage-motes, .stage-cue { display: none; }

  .reveal { opacity: 1; transform: none; will-change: auto; }
  .tilt { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   11. HERO TRUST BADGE + 3-STEP JOURNEY
   ───────────────────────────────────────────────────────────── */

/* ── Google trust badge ─────────────────────────────────── */
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 248, 240, 0.10);
  border: 1px solid rgba(232, 184, 75, 0.22);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.75rem;
  font-family: var(--font-body);
  color: #F5E4CC;
  margin-top: 1.1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-trust-badge .htb-stars {
  color: #FBBC05;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
}
.hero-trust-badge .htb-score {
  font-weight: 700;
  color: #FFF8F0;
}
.hero-trust-badge .htb-sep {
  opacity: 0.4;
  margin: 0 0.15rem;
}
.hero-trust-badge .htb-loc {
  opacity: 0.7;
}

/* ── 3-step journey ─────────────────────────────────────── */
.hero-steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.hero-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-step-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 107, 0, 0.20);
  border: 1px solid rgba(255, 107, 0, 0.45);
  color: #FF8C38;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero-step-txt {
  font-size: 0.72rem;
  font-family: var(--font-body);
  color: rgba(245, 228, 204, 0.75);
  white-space: nowrap;
}
.hero-step-arrow {
  color: rgba(232, 184, 75, 0.45);
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   12. STICKY MOBILE BOTTOM CTA BAR
   ───────────────────────────────────────────────────────────── */
.sticky-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: linear-gradient(90deg, #1C0703 0%, #2A0803 100%);
  border-top: 1px solid rgba(232, 184, 75, 0.25);
  padding: 0.65rem 1rem;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
}
.sticky-cta-bar.is-hidden {
  transform: translateY(100%);
  pointer-events: none;
}
.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 480px;
  margin: 0 auto;
}
.sticky-cta-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.sticky-cta-stars {
  color: #FBBC05;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.sticky-cta-label {
  font-size: 0.68rem;
  color: rgba(245, 228, 204, 0.65);
  font-family: var(--font-body);
}
.sticky-cta-btn {
  background: linear-gradient(135deg, #FF8C38 0%, #CC5500 100%);
  color: #FFF8F0;
  font-size: 0.78rem;
  font-weight: 800;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border-radius: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(204, 85, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.sticky-cta-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(204, 85, 0, 0.4);
}
@media (max-width: 767px) {
  .sticky-cta-bar {
    display: block;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* push page content above the bar height (~72px + safe area) */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────────────────────
   13. GURU / COACH PROFILE SECTION
   ───────────────────────────────────────────────────────────── */
#guru-team {
  background:
    radial-gradient(ellipse at 10% 50%, rgba(232,184,75,0.06) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--bg2) 100%);
  position: relative;
}
#guru-team::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,184,75,0.25), transparent);
}
.guru-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.guru-card {
  background: var(--glass-1);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.guru-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--lift-2);
}
.guru-card-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: top;
  background: var(--surface-2);
}
.guru-card-photo-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  background: linear-gradient(135deg, rgba(94,0,0,0.3), rgba(232,184,75,0.15));
}
.guru-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.guru-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
}
.guru-card-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-gold-dk);
}
.guru-card-bio {
  font-size: 0.83rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0.25rem 0 0;
}
.guru-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.guru-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(232,184,75,0.12);
  color: var(--brand-gold-dk);
  border: 1px solid rgba(232,184,75,0.22);
}

/* ─────────────────────────────────────────────────────────────
   14. AGE-GROUP FILTER IN DISCIPLINES
   ───────────────────────────────────────────────────────────── */
.age-filter-wrap {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.age-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-body);
  border: 1px solid var(--line);
  background: var(--glass-1);
  color: var(--text-body);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 44px;
}
.age-tab:hover {
  background: var(--glass-2);
  border-color: var(--brand-gold-dk);
}
.age-tab.is-active {
  background: linear-gradient(135deg, var(--brand-maroon), #3D0000);
  border-color: var(--brand-gold-dk);
  color: var(--on-dark-heading);
  box-shadow: 0 4px 16px rgba(94,0,0,0.35);
}
.prog-card[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════
   §15  TRANSITIONS.DEV MICRO-INTERACTIONS
   Spinning counter · Sliding tabs pill · Success check · Stagger reveal · Confetti
════════════════════════════════════════════════════════════ */

/* ── 15a. Spinning reel counter ─────────────────────────── */
:root {
  --reel-dur: 1400ms;
  --reel-cell: 2.5rem;          /* matches .stat-num font-size */
  --reel-spin-blur: 3px;
  --reel-stagger: 90ms;
  --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.t-reel {
  display: inline-flex;
  align-items: center;
  height: var(--reel-cell);
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: 1;
}
.t-reel-sep {
  display: inline-block;
  font-size: inherit;
}
.t-reel-col {
  position: relative;
  height: var(--reel-cell);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.t-reel-strip {
  display: flex;
  flex-direction: column;
  will-change: transform, filter;
}
.t-reel-digit {
  height: var(--reel-cell);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .t-reel-strip { transition: none !important; filter: none !important; }
}

/* ── 15b. Sliding tabs pill ─────────────────────────────── */
.age-filter-wrap {
  position: relative;  /* pill is positioned relative to this */
}
.t-age-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  width: 0;
  background: var(--brand-maroon);
  border-radius: 48px;
  pointer-events: none;
  z-index: 0;
  transition:
    transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    width     250ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, width;
}
/* Lift tab text above the sliding pill */
.age-tab {
  position: relative;
  z-index: 1;
}
/* Active tab: text turns white (pill behind it is maroon) */
.age-tab.is-active {
  color: #fff !important;
  background: transparent !important;
}

/* ── 15c. Success check animation ───────────────────────── */
:root {
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 30px;
  --check-blur-dur: 500ms;
  --check-blur-from: 8px;
  --check-path-dur: 600ms;
  --check-path-delay: 100ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
}
.t-success-check {
  display: block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-out)  forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-out)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)  forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)  forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-out) var(--check-path-delay) forwards;
}
@keyframes t-check-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur   { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob    { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw   { to   { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1 !important; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ── 15d. Stagger text reveal (hero headline) ───────────── */
:root {
  --stagger-dur: 650ms;
  --stagger-distance: 14px;
  --stagger-blur: 4px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: 80ms; }
.t-stagger-line--3 { transition-delay: 160ms; }
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── 15e. Confetti canvas ───────────────────────────────── */
#confetti-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
}


/* ══════════════════════════════════════════════════════════════════════
   §16. MOBILE PERFORMANCE — disable GPU-hungry effects on small screens
   Affects: aurora orbs, stage motes, backdrop-filters, continuous anims
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Kill aurora — 4× blur(90px) layers on a phone GPU = guaranteed jank */
  .aurora-orb { display: none !important; }
  .hero-aurora { display: none !important; }

  /* Stage motes are decorative — remove on mobile */
  .stage-motes { display: none !important; }

  /* Replace backdrop-filter with a solid background on mobile.
     backdrop-filter triggers a new stacking context + compositing layer
     which is expensive on low-RAM devices. */
  #main-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 248, 238, 0.98) !important;
  }
  #main-nav.nav--hero {
    background: rgba(255, 248, 230, 0.97) !important;
    border-bottom: 1px solid rgba(200, 148, 26, 0.30) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Logo stays dark-on-cream on mobile (no invert needed) */
  #main-nav.nav--hero .nav-brand img {
    filter: none !important;
  }
  /* Hamburger icon visible on cream background */
  #main-nav.nav--hero #hamburger-icon rect { fill: var(--brand-maroon) !important; }
  #main-nav.nav--hero #close-icon line    { stroke: var(--brand-maroon) !important; }
  #mobile-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 250, 242, 0.99) !important;
  }

  /* Static hero on mobile — stage.js does not run, so layers stack.
     Show only the subject (depth=0) plane; hide far/mid layers. */
  .stage-layer[data-depth="-4"],
  .stage-layer[data-depth="-2"] {
    display: none !important;
  }
  .stage-layer[data-depth="0"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* Disable tilt cards on mobile — no hover on touch */
  .tilt { transform: none !important; }

  /* Kill will-change hints (they pre-allocate GPU layers unnecessarily) */
  * { will-change: auto !important; }

  /* Stop continuous hero badge shimmer animation on mobile */
  .hero-trial-badge::after { animation: none !important; }
}

@media (max-width: 767px) and (prefers-reduced-data: reduce) {
  /* Extremely low-end: hide all decorative images */
  .stage-layer[data-depth="2"] { display: none !important; }
}

@media print {
  body { background: #FFFCF7; color: #2A0A06; }
  .stage-track { height: auto; }
  #main-nav, #back-to-top, .stage-cue, .modal-overlay { display: none; }
}

/* ══════════════════════════════════════════════
   §17 ACHIEVEMENTS — dark cards matching pricing
══════════════════════════════════════════════ */
.ach-dark-card {
  background: #111113;
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--brand-saffron);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  max-width: 820px;
  margin: 0 auto;
}

.ach-dark-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}

.ach-dark-emoji {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.ach-dark-congrats {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.3rem;
}
.ach-dark-congrats span[lang] {
  font-family: var(--font-deva);
  text-transform: none;
  letter-spacing: 0;
  color: var(--brand-saffron);
  font-size: 0.85rem;
}

.ach-dark-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  color: #fff;
  margin: 0 0 0.2rem;
}

.ach-dark-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
}

/* Medal tally row */
.ach-medal-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.ach-medal {
  flex: 1 1 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 1rem 0.5rem;
  min-width: 70px;
}

.ach-medal--gold   { border-top: 2px solid #E8B84B; }
.ach-medal--silver { border-top: 2px solid #b0b0b8; }
.ach-medal--bronze { border-top: 2px solid #cd7f32; }
.ach-medal--total  { border-top: 2px solid var(--brand-saffron); }

.ach-medal-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-family: var(--font-display);
}
.ach-medal--gold   .ach-medal-num { color: #E8B84B; }
.ach-medal--silver .ach-medal-num { color: #c8c8d4; }
.ach-medal--bronze .ach-medal-num { color: #cd9a5a; }
.ach-medal--total  .ach-medal-num { color: var(--brand-saffron); }

.ach-medal-icon { font-size: 1.3rem; }
.ach-medal-lbl  {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* Divider */
.ach-rule {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 0 0 1.75rem;
}

/* Athletes row */
.ach-athlete-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ach-athlete {
  flex: 1 1 200px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}

.ach-athlete-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

.ach-athlete-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.ach-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  letter-spacing: 0.03em;
}
.ach-tag--gold   { background: rgba(232,184,75,0.15); color: #E8B84B; border: 1px solid rgba(232,184,75,0.3); }
.ach-tag--silver { background: rgba(192,192,210,0.12); color: #c8c8d4; border: 1px solid rgba(192,192,210,0.25); }
.ach-tag--bronze { background: rgba(205,127,50,0.15); color: #cd9a5a; border: 1px solid rgba(205,127,50,0.3); }

/* Legacy .ach-card — hide any remaining old markup */
.ach-card .athlete-photo,
.athlete-photo { display: none !important; }