/* ==========================================================================
   SA Classes — ENHANCEMENT LAYER  (site.css)
   Loaded AFTER styles.css, so everything here augments/overrides the base
   design system without editing the tested core file. Theme: glassmorphism,
   "anti-gravity" floating motion, richer scroll reveals, a beautiful app-style
   bottom nav, friendlier communications, and search/gallery UI.
   All motion is disabled under prefers-reduced-motion (see bottom of file).
   ========================================================================== */

:root {
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-brd: rgba(255, 255, 255, 0.55);
  --glass-hi: rgba(255, 255, 255, 0.85);
  --glass-blur: 16px;
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
  --grad-red: linear-gradient(135deg, #ff5a4d, var(--brand-red) 55%, #b71c1f);
  --grad-navy: linear-gradient(150deg, #1a1a1a, var(--ink-navy));
}

/* ---------- Scroll progress bar (top of viewport) ---------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--grad-red); z-index: 400; pointer-events: none;
  box-shadow: 0 0 10px rgba(227, 30, 36, .6); transition: width .1s linear;
}

/* ---------- Header: Apple-style "liquid glass" on scroll --------------- */
.site-header {
  transition: height .35s var(--ease-spring), background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
  background: rgba(255, 255, 255, .72);
}
/* On scroll the bar goes transparent and the inner container becomes a
   floating frosted-glass capsule with a glossy highlight + drifting sheen. */
.site-header.is-scrolled {
  height: 70px;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header.is-scrolled .container {
  position: relative;
  width: calc(100% - 32px);
  max-width: 1160px;
  margin: 9px auto 0;
  padding: 9px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  backdrop-filter: blur(22px) saturate(1.9); -webkit-backdrop-filter: blur(22px) saturate(1.9);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow:
    0 12px 36px rgba(16,24,40,.20),
    0 2px 8px rgba(16,24,40,.10),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -10px 22px rgba(255,255,255,.22);
  overflow: hidden;
  transition: background .4s ease, box-shadow .4s ease, padding .35s var(--ease-spring);
}
/* Top specular highlight — the "gloss" */
.site-header.is-scrolled .container::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 48%);
}
/* Light streak that drifts across like liquid */
.site-header.is-scrolled .container::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 40%; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  filter: blur(3px);
  animation: liquidGloss 7s ease-in-out infinite;
}
/* keep header content above the gloss layers */
.site-header.is-scrolled .container > * { position: relative; z-index: 1; }
@keyframes liquidGloss { 0% { left: -45%; } 60%, 100% { left: 135%; } }

.brand__mark { box-shadow: 0 6px 16px rgba(227, 30, 36, .35); transition: transform .4s var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }

/* ---------- Reusable liquid-glass gloss (used on other glass chrome) ---- */
.liquid-glass { position: relative; overflow: hidden; }
.liquid-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%);
}
.liquid-glass::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 45%; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  filter: blur(3px); animation: liquidGloss 9s ease-in-out infinite;
}

/* Header search — compact, grows on focus. Sits between nav and CTA. */
.header-search { position: relative; display: flex; align-items: center; }
.header-search input {
  width: 40px; padding: 9px 14px 9px 38px; border: 1.5px solid var(--border);
  border-radius: 999px; background: rgba(255, 255, 255, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px center no-repeat;
  font-family: var(--font-body); font-size: .92rem; color: var(--ink-navy);
  cursor: pointer; transition: width .35s var(--ease-spring), background-color .2s, box-shadow .2s;
}
.header-search input::placeholder { color: transparent; }
.header-search input:focus,
.header-search input:not(:placeholder-shown) {
  width: 230px; cursor: text; outline: none; background-color: #fff;
  border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(227, 30, 36, .12);
}
.header-search input:focus::placeholder { color: var(--ink-muted); }
@media (min-width: 940px) { .header-search { display: flex; } }

/* Mobile: search lives in the header row (nav is at the bottom) */
@media (max-width: 1024px) {
  .header-search input { width: 100%; cursor: text; background-color: #fff; }
  .header-search input::placeholder { color: var(--ink-muted); }
  .header-search { flex: 1; margin: 0 10px; min-width: 0; }
  .site-header .brand small { display: none; }
  .site-header .brand { font-size: 1.1rem; }
  .site-header .container { gap: 8px; }
}

/* ---------- Glassmorphism enrichment ----------------------------------- */
.glass, .glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  position: relative;
}
.glass-panel { padding: var(--space-3); }
.glass--dark {
  background: rgba(16, 24, 40, .55); border-color: rgba(255, 255, 255, .12);
  color: #E7E9EE; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* subtle moving sheen across glass panels */
.glass::before, .glass-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 60%);
  background-size: 250% 250%; opacity: 0; transition: opacity .3s; animation: sheen 7s linear infinite;
}
.glass:hover::before, .glass-panel:hover::before { opacity: 1; }
@keyframes sheen { 0% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

/* ---------- "Anti-gravity" aurora blobs behind key sections ------------ */
.hero, .page-hero, .section--navy { position: relative; isolation: isolate; }
.hero::before, .page-hero::before, .section--navy::before,
.hero::after, .section--navy::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(60px); opacity: .5; pointer-events: none;
  animation: drift 18s ease-in-out infinite;
}
.hero::before { width: 42vw; height: 42vw; left: -8vw; top: -10vw; background: radial-gradient(circle, rgba(227, 30, 36,.35), transparent 65%); }
.hero::after  { width: 34vw; height: 34vw; right: -6vw; bottom: -14vw; background: radial-gradient(circle, rgba(227, 30, 36,.22), transparent 65%); animation-delay: -6s; }
.page-hero::before { width: 40vw; height: 40vw; right: -10vw; top: -14vw; background: radial-gradient(circle, rgba(227, 30, 36,.20), transparent 65%); }
.section--navy::before { width: 40vw; height: 40vw; left: -8vw; bottom: -16vw; background: radial-gradient(circle, rgba(227, 30, 36,.30), transparent 65%); }
.section--navy::after  { width: 30vw; height: 30vw; right: -6vw; top: -12vw; background: radial-gradient(circle, rgba(255, 138, 115,.22), transparent 65%); animation-delay: -9s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(4vw, 3vw) scale(1.12); }
  66%      { transform: translate(-3vw, 5vw) scale(.95); }
}

/* Floating elements that gently bob (add class .float / .float--slow) */
.float      { animation: bob 6s ease-in-out infinite; }
.float--slow{ animation: bob 9s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Hero art gets a glass card + glow ring around the spinning globe */
.hero__art { border: 1px solid rgba(255, 255, 255, .12); }
.hero__art::before {
  content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .18); animation: spin 40s linear infinite reverse;
}

/* =======================================================================
   Kyndryl-style dark, animated hero (homepage .hero only)
   Near-black hero with a live particle / data-burst <canvas> behind the
   content, soft brand-red + gold glows, and the Pythagorean proof floating on
   frosted "liquid glass". The white glass header floats above it, exactly like
   Kyndryl's white top bar over a black hero. Glass/liquid effects are KEPT.
   ======================================================================= */
.hero {
  background:
    radial-gradient(58% 80% at 78% 24%, rgba(227, 30, 36, .22), transparent 60%),
    radial-gradient(48% 72% at 10% 84%, rgba(245, 166, 35, .13), transparent 60%),
    #070708;
  color: #fff;
}
.hero__fx {                     /* the animated data-burst canvas */
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero h1, .hero h1 * { color: #fff; }
.hero h1 span { color: var(--brand-red); }
.hero .lead { color: rgba(255, 255, 255, .84); }
.hero .eyebrow { color: #fff; background: rgba(227, 30, 36, .9); padding: 5px 12px; border-radius: 999px; }
.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .4); }
.hero .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .10); }
.hero .math-field span { color: rgba(255, 255, 255, .16); opacity: 1; }
/* the aurora blobs would sit behind the opaque hero bg — the canvas replaces
   them here; keep them on .page-hero / .section--navy elsewhere */
.hero::before, .hero::after { display: none; }
/* Pythagorean proof panel → frosted glass so the particles shimmer through it */
.hero__art {
  background: linear-gradient(150deg, rgba(22, 22, 24, .62), rgba(8, 8, 10, .55));
  backdrop-filter: blur(7px) saturate(1.25); -webkit-backdrop-filter: blur(7px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ---------- Brand logo lockup (header + footer) ------------------------ */
.brand { gap: 0; }
.brand__logo { height: 46px; width: auto; display: block; }
.site-header.is-scrolled .brand__logo { height: 40px; transition: height .35s var(--ease-spring); }
@media (max-width: 1024px) { .brand__logo { height: 40px; } }
/* footer uses the dark-theme (transparent) logo directly on the dark footer */
.footer-brand { display: inline-block; }
.footer-brand .brand__logo { height: 52px; }

/* ---------- Richer scroll reveals (variants + stagger) ----------------- */
.reveal { transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring), filter .7s ease; filter: blur(4px); transition-delay: var(--d, 0s); }
.reveal.in { filter: blur(0); }
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--scale { transform: scale(.92); }
.reveal--left.in, .reveal--right.in, .reveal--scale.in { transform: none; }
/* auto-stagger children of [data-stagger] (JS sets --d) */

/* ---------- Card tilt / magnetic hover --------------------------------- */
.card, .glass-panel { transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-spring); transform-style: preserve-3d; }
[data-tilt] { will-change: transform; }
.card:hover { box-shadow: var(--shadow-lg); }

/* Primary button: animated gradient + shine */
.btn--primary { background: var(--grad-red); background-size: 180% 180%; position: relative; overflow: hidden; }
.btn--primary:hover { background-position: 100% 50%; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn--primary:hover::after { left: 130%; }

/* ---------- App-style bottom tab bar — FLUSH & anchored (phones + tablets) ---
   Anchored to the very bottom edge (no floating gap) so it stays rock-steady
   when the mobile browser's URL bar shows/hides on scroll. Full width, soft
   rounded top, opaque, always visible. */
@media (max-width: 1024px) {
  .bottom-nav {
    left: 0; right: 0; bottom: 0;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);   /* fill + clear the home-indicator area */
    border-radius: 20px 20px 0 0;
    border: 0; border-top: 1px solid var(--border);
    /* opaque enough to stay legible over ANY section (incl. the dark navy hero) */
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 -8px 30px rgba(16, 24, 40, .16), inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: visible;
    z-index: 200;                        /* always above FABs, header and content */
  }
  /* liquid-glass top highlight on the app nav */
  .bottom-nav::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  }
  .bottom-nav a, .bottom-nav .tab-enroll__btn { position: relative; z-index: 1; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom) + 10px); }
  .bottom-nav a { position: relative; transition: color .25s, transform .25s var(--ease-spring); }
  .bottom-nav a svg { transition: transform .25s var(--ease-spring); }
  .bottom-nav a.is-active { transform: translateY(-2px); }
  .bottom-nav a.is-active svg { transform: translateY(-2px) scale(1.12); }
  /* active dot indicator */
  .bottom-nav a.is-active:not(.tab-enroll)::after {
    content: ""; position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%;
    background: var(--brand-red); box-shadow: 0 0 8px rgba(227, 30, 36, .7);
  }
  .bottom-nav a.tab-enroll .tab-enroll__btn {
    top: -24px; background: var(--grad-red);
    box-shadow: 0 10px 24px rgba(227, 30, 36, .5), 0 0 0 0 rgba(227, 30, 36, .5);
    animation: enrollPulse 2.6s ease-out infinite;
  }
  @keyframes enrollPulse {
    0%   { box-shadow: 0 10px 24px rgba(227, 30, 36,.5), 0 0 0 0 rgba(227, 30, 36,.45); }
    70%  { box-shadow: 0 10px 24px rgba(227, 30, 36,.5), 0 0 0 14px rgba(227, 30, 36,0); }
    100% { box-shadow: 0 10px 24px rgba(227, 30, 36,.5), 0 0 0 0 rgba(227, 30, 36,0); }
  }
}

/* ---------- Communications: friendlier FABs + labels ------------------- */
.fab { transition: transform .25s var(--ease-spring), box-shadow .25s; position: relative; }
.fab:hover { transform: translateY(-3px) scale(1.06); }
.fab--wa::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
/* hover tooltip on desktop */
.fab[data-label]::after {
  content: attr(data-label); position: absolute; right: 62px; top: 50%; transform: translateY(-50%) scale(.9);
  background: var(--ink-navy); color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: 6px 11px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.fab:hover[data-label]::after { opacity: 1; transform: translateY(-50%) scale(1); }
.chat-panel { border: 1px solid rgba(255, 255, 255, .6); }
.chat-head { background: var(--grad-navy); }

/* Contact "cards" of channels (used on contact page) */
.contact-cards { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(3, 1fr); } }
.contact-card {
  display: flex; gap: 14px; align-items: center; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff;
  transition: transform .25s var(--ease-spring), box-shadow .25s, border-color .25s;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-red); }
.contact-card .icon-badge { margin: 0; }

/* ---------- Search page ------------------------------------------------ */
.search-hero form { display: flex; gap: 10px; max-width: 640px; margin-top: var(--space-2); }
.search-hero input[type="search"] {
  flex: 1; padding: 15px 18px; border-radius: 999px; border: 1.5px solid var(--border);
  font-size: 1.05rem; font-family: var(--font-body);
}
.search-hero input[type="search"]:focus { outline: none; border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(227, 30, 36, .12); }
.search-result { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.search-result:hover h3 { color: var(--brand-red); }
.search-result .kind { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-red); }
.search-result mark { background: rgba(227, 30, 36, .16); color: inherit; padding: 0 2px; border-radius: 3px; }

/* ---------- SEO-rich gallery: real tiles, filters, lightbox ------------ */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--space-3); }
.gallery-filters button {
  border: 1.5px solid var(--border); background: #fff; color: var(--ink-charcoal);
  border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .85rem; cursor: pointer;
  font-family: var(--font-body); transition: all .2s;
}
.gallery-filters button:hover { border-color: var(--brand-red); color: var(--brand-red); }
.gallery-filters button.is-active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.gallery-item { cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .5s var(--ease-spring); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .gcap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; text-align: left;
  padding: 22px 12px 10px; font-size: .82rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(16, 24, 40, .82)); color: #fff;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.gallery-item:hover .gcap { opacity: 1; transform: none; }
.lightbox { position: fixed; inset: 0; z-index: 350; background: rgba(10, 14, 26, .88); backdrop-filter: blur(6px); display: none; place-items: center; padding: 20px; }
.lightbox.open { display: grid; }
.lightbox figure { max-width: 900px; width: 100%; margin: 0; }
.lightbox img { width: 100%; max-height: 74vh; object-fit: contain; border-radius: 12px; }
.lightbox figcaption { color: #E7E9EE; margin-top: 14px; text-align: center; }
.lightbox figcaption h3 { color: #fff; }
.lightbox figcaption .gtags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.lightbox .gtags span { background: rgba(255, 255, 255, .14); color: #fff; font-size: .72rem; padding: 3px 10px; border-radius: 999px; }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(255, 255, 255, .12); border: none; color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__nav.prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav.next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__nav:hover, .lightbox__close:hover { background: var(--brand-red); }

/* ---------- Custom math cursor: animate the float-up + drift ----------- */
.cursor-glyph { transition: opacity .7s ease, transform .7s var(--ease-spring); text-shadow: 0 2px 8px rgba(0, 0, 0, .12); }

/* ---------- AEO "Quick answer" box (answer-first, speakable) ------------ */
.quick-answer { border-left: 4px solid var(--brand-red); background: var(--surface-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 20px; margin-bottom: var(--space-3); }
.quick-answer__label { display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-red); margin-bottom: 4px; }
.quick-answer p { margin: 0; font-size: 1.08rem; color: var(--ink-navy); font-weight: 500; }

/* ---------- Internal-linking hub --------------------------------------- */
.linkhub { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 680px) { .linkhub { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .linkhub { grid-template-columns: repeat(5, 1fr); } }
.linkhub__col h4 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.linkhub__col a { display: block; color: var(--ink-charcoal); font-size: .92rem; padding: 4px 0; transition: color .15s, padding-left .15s; }
.linkhub__col a:hover { color: var(--brand-red); padding-left: 3px; }

/* ---------- Course detail: visual + body copy -------------------------- */
.course-visual { position: relative; height: 220px; border-radius: var(--radius); overflow: hidden;
  background: var(--grad-navy); display: grid; place-items: center; }
.course-visual .math-field span { color: #fff; opacity: .16; font-size: 2.6rem; }
.course-visual__badge { position: relative; z-index: 1; color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: 1.1rem; letter-spacing: .02em; background: rgba(255,255,255,.12);
  padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }
.course-body p { color: var(--ink-charcoal); }
.course-body h3 { margin-top: var(--space-3); }
.course-body ul.course-topics { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.course-body ul.course-topics li { position: relative; padding-left: 26px; color: var(--ink-charcoal); }
.course-body ul.course-topics li::before { content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--brand-red); font-weight: 800; }

/* ---------- Clickable feature cards ------------------------------------ */
.card--link { display: block; color: inherit; }
.card--link h3 { color: var(--ink-navy); }
.card--link .card__more { display: inline-block; margin-top: 12px; color: var(--brand-red); font-weight: 700; font-size: .9rem; transition: transform .2s; }
.card--link:hover .card__more { transform: translateX(4px); }
.card--link:hover h3 { color: var(--brand-red); }

/* ---------- Mega footer (full sitemap, like a large services site) ----- */
.footer-mega { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-mega { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-mega { grid-template-columns: 1.8fr 1fr 1fr 1.4fr; } }
.footer-cols { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 680px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .footer-cols { grid-template-columns: repeat(5, 1fr); } }
.footer-col h4 { color: #fff; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: #b6bdcb; font-size: .92rem; transition: color .2s, padding-left .2s; }
.footer-col a:hover { color: var(--star-gold); padding-left: 3px; }
.footer-guarantee { display: inline-flex; align-items: center; gap: 8px; color: var(--star-gold); font-weight: 600; font-size: .9rem; margin: 14px 0; }
.footer-guarantee svg { width: 18px; height: 18px; flex: none; }
.footer-contact h4 { color: #fff; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.footer-contact .fc-row { display: flex; gap: 11px; align-items: flex-start; color: #cdd3e0; font-size: .92rem; margin-bottom: 12px; }
.footer-contact a.fc-row:hover { color: #fff; }
.footer-contact .fc-row svg { width: 18px; height: 18px; flex: none; color: var(--star-gold); margin-top: 2px; }
.footer-contact .fc-row em { color: #8b93a7; font-style: normal; font-size: .82rem; }

/* ---------- Legal pages + cookie declaration --------------------------- */
.legal h2 { margin-top: var(--space-4); font-size: 1.4rem; }
.legal h3 { margin-top: var(--space-3); }
.legal p, .legal li { color: var(--ink-charcoal); }
.legal .legal-list { list-style: disc; padding-left: 22px; display: grid; gap: 6px; margin: 8px 0 var(--space-2); }
.cookie-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: 10px; }
.cookie-table th, .cookie-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cookie-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
.cookie-table code { background: var(--surface-light); padding: 1px 6px; border-radius: 5px; font-size: .82rem; }
.cd-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.cd-on { background: rgba(34,197,94,.14); color: #0a7a48; }
.cd-off { background: rgba(102,112,133,.14); color: var(--ink-muted); }

/* ---------- Cookie consent — compact bottom-left card ------------------ */
.cookie-consent { position: fixed; left: 0; bottom: 0; z-index: 360; width: 100%; max-width: 330px;
  transform: translateY(150%); transition: transform .45s var(--ease-spring); pointer-events: none; }
.cookie-consent.open { transform: translateY(0); pointer-events: auto; }
.cc-inner { position: relative; margin: 14px; padding: 12px 14px; background: rgba(255,255,255,.98);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.cc-close { position: absolute; top: 5px; right: 8px; background: none; border: none; font-size: 1.15rem; line-height: 1;
  color: var(--ink-muted); cursor: pointer; padding: 0 4px; }
.cc-close:hover { color: var(--ink-navy); }
.cc-text { margin: 0 14px 10px 0; font-size: .78rem; line-height: 1.5; color: var(--ink-charcoal); }
.cc-actions { display: flex; gap: 10px; align-items: center; }
.cc-actions .btn { font-size: .8rem; padding: 6px 16px; }
.cc-reject { background: none; border: none; color: var(--ink-muted); text-decoration: underline; cursor: pointer; font-size: .78rem; font-family: var(--font-body); padding: 0; }
.cc-reject:hover { color: var(--brand-red); }
/* Keep the little card clear of the mobile bottom nav */
@media (max-width: 1024px) { .cookie-consent { bottom: calc(60px + env(safe-area-inset-bottom) + 12px); max-width: 420px; } }

/* ---------- Footer admin gear ------------------------------------------ */
.footer-bottom__right { display: inline-flex; align-items: center; gap: 12px; }
.admin-gear { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #b6bdcb; background: rgba(255, 255, 255, .06); transition: transform .5s var(--ease-spring), color .2s, background .2s; }
.admin-gear svg { width: 17px; height: 17px; }
.admin-gear:hover { color: #fff; background: rgba(255, 255, 255, .14); transform: rotate(90deg); }

/* ---------- Pythagorean theorem proof animation (hero) ----------------- */
.pyth { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.pyth text { font-family: var(--font-display); font-weight: 700; fill: #fff; }
.pyth-lbl { font-size: 19px; text-anchor: middle; dominant-baseline: middle; }
.pyth-eq  { font-size: 21px; text-anchor: middle; letter-spacing: .5px; }
.pyth-sq  { stroke-width: 2.5; stroke-linejoin: round; }
.pyth-a   { fill: rgba(227, 30, 36, .45); stroke: #ffb4a8; }
.pyth-b   { fill: rgba(34, 197, 94, .42);  stroke: #86efac; }
.pyth-c   { fill: rgba(245, 180, 0, .5);   stroke: #ffe08a; }
.pyth-tri { fill: rgba(255, 255, 255, .06); stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 320; }
.pyth-ra  { fill: none; stroke: #fff; stroke-width: 2; }
.pyth-ga, .pyth-gb, .pyth-gc, .pyth-eq { transform-box: fill-box; transform-origin: center; opacity: 0; }
.pyth-tri, .pyth-ra { opacity: 0; }
.pyth-tri { animation: pyth-tri 13s ease-in-out infinite; }
.pyth-ra  { animation: pyth-ra 13s ease-in-out infinite; }
.pyth-ga  { animation: pyth-a 13s ease-in-out infinite; }
.pyth-gb  { animation: pyth-b 13s ease-in-out infinite; }
.pyth-gc  { animation: pyth-c 13s ease-in-out infinite; }
.pyth-eq  { animation: pyth-eq 13s ease-in-out infinite; }
@keyframes pyth-tri {
  0% { stroke-dashoffset: 320; opacity: 0; } 4% { opacity: 1; } 13% { stroke-dashoffset: 0; }
  90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes pyth-ra { 0%,10% { opacity: 0; } 15% { opacity: .85; } 90% { opacity: .85; } 100% { opacity: 0; } }
@keyframes pyth-a {
  0%,16% { opacity: 0; transform: scale(.5); } 24% { opacity: 1; transform: scale(1.06); } 28% { transform: scale(1); }
  47% { opacity: 1; } 52% { opacity: .65; } 58% { opacity: 1; }
  90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); }
}
@keyframes pyth-b {
  0%,24% { opacity: 0; transform: scale(.5); } 32% { opacity: 1; transform: scale(1.06); } 36% { transform: scale(1); }
  47% { opacity: 1; } 52% { opacity: .65; } 58% { opacity: 1; }
  90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); }
}
@keyframes pyth-c {
  0%,52% { opacity: 0; transform: scale(.5); } 62% { opacity: 1; transform: scale(1.09); } 67% { transform: scale(1); }
  90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); }
}
@keyframes pyth-eq {
  0%,68% { opacity: 0; transform: scale(.9); } 76% { opacity: 1; transform: scale(1); } 92% { opacity: 1; } 100% { opacity: 0; }
}

/* ---------- Small flourishes ------------------------------------------- */
/* Logo Red + Gold on black: gold stat numbers (pencil-ferrule gold) pop on the
   near-black stats band; red is the primary action/nav accent. */
.stat__num { color: var(--brand-gold); text-shadow: 0 4px 24px rgba(245, 166, 35, .35); }
.nav-links a.is-active::after { background: var(--brand-red); }
.eyebrow { color: var(--brand-red); }
.section--navy .eyebrow { color: var(--brand-gold); }
.badge { background: rgba(227, 30, 36, .1); color: var(--brand-red); }

/* ---------- Reduced motion: kill all the new motion too ---------------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .glass::before, .glass-panel::before,
  .hero::before, .hero::after, .page-hero::before,
  .section--navy::before, .section--navy::after,
  .float, .float--slow, .fab--wa::before,
  .bottom-nav a.tab-enroll .tab-enroll__btn, .hero__art::before,
  .site-header.is-scrolled .container::after, .liquid-glass::after,
  .pyth [class^="pyth-"], .pyth * { animation: none !important; }
  .reveal { filter: none; }
  /* show the finished proof statically when motion is reduced */
  .pyth .pyth-ga, .pyth .pyth-gb, .pyth .pyth-gc, .pyth .pyth-tri, .pyth .pyth-ra, .pyth .pyth-eq {
    opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important;
  }
}

/* =======================================================================
   Responsive navigation — ONE source of truth (overrides earlier 940px rules)
   Phones AND tablets (<=1024px): app-style 5-tab bottom nav, no top nav.
   Desktop (>=1025px): classic top navigation, no bottom nav.
   ======================================================================= */
@media (max-width: 1024px) {
  .nav-links, .header-cta { display: none !important; }
  .bottom-nav { display: flex !important; }
  .fab-stack { bottom: calc(60px + env(safe-area-inset-bottom) + 18px); }
  /* keep the animated hero art a comfortable size on phones/tablets */
  .hero__art { min-height: 240px; max-height: 44vh; }
}
@media (min-width: 1025px) {
  .bottom-nav { display: none !important; }
  .fab-stack { bottom: 20px; }
  .nav-links, .header-cta { display: flex; }
}

/* ---------- Locations hub (/locations.php) ----------------------------- */
.loc-card { display: flex; flex-direction: column; gap: 12px; }
.loc-card__head { display: flex; align-items: center; gap: 12px; color: var(--ink-navy); }
.loc-card__head small { display: block; color: var(--ink-muted); font-weight: 600; font-size: .78rem; }
.loc-flag { font-size: 1.9rem; line-height: 1; }
.loc-regions summary {
  cursor: pointer; font-weight: 600; color: var(--brand-red); list-style: none;
  padding: 8px 0; border-top: 1px solid var(--border); user-select: none;
}
.loc-regions summary::-webkit-details-marker { display: none; }
.loc-regions .loc-chevron { transition: transform .25s ease; display: inline-block; }
.loc-regions[open] .loc-chevron { transform: rotate(180deg); }
.loc-regions ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.loc-regions a { color: var(--ink-charcoal); font-size: .9rem; }
.loc-regions a:hover { color: var(--brand-red); }
.loc-card .card__more { margin-top: auto; }

/* ---------- Footer "Countries We Serve" (expandable) ------------------- */
.footer-col--countries { min-width: 210px; }
.footer-countries { list-style: none; margin: 0; padding: 0; }
.footer-countries > li { margin: 0 0 2px; }
.footer-countries details > summary {
  cursor: pointer; list-style: none; padding: 5px 0; color: inherit; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.footer-countries details > summary::-webkit-details-marker { display: none; }
.footer-countries details > summary::after { content: "＋"; margin-left: auto; opacity: .6; }
.footer-countries details[open] > summary::after { content: "－"; }
.footer-countries details ul { list-style: none; margin: 2px 0 8px; padding: 0 0 0 26px; }
.footer-countries details ul li { margin: 2px 0; }
.footer-countries .fc-flag { font-size: 1.05rem; }

/* ---------- Booking slot picker (/book.php) ---------------------------- */
.book-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px; margin-top: 14px; }
.book-day { border: 1px solid var(--border); border-radius: 14px; padding: 12px; }
.book-day__label { font-family: var(--font-display); font-weight: 700; color: var(--ink-navy); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.book-day__label span { font-weight: 600; color: var(--ink-muted); font-size: .82rem; }
.book-day__times { display: grid; gap: 6px; }
.book-slot { border: 1.5px solid var(--border); background: #fff; color: var(--ink-navy); border-radius: 999px; padding: 8px 10px; font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s; font-family: var(--font-body); }
.book-slot:hover { border-color: var(--brand-red); color: var(--brand-red); }
.book-slot.is-selected { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }

/* ---------- Announcement bar (top of every page) ----------------------- */
.announcement-bar { background: linear-gradient(90deg, var(--brand-red), #b71c1f); color: #fff; text-align: center; font-weight: 600; font-size: .92rem; padding: 9px 0; position: relative; z-index: 130; }
.announcement-bar__dot { color: var(--brand-gold); margin-right: 6px; }

/* ---------- Courses: client-side tabs + featured highlight ------------- */
.course-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.course-tab { border: 1.5px solid var(--border); background: #fff; color: var(--ink-navy); border-radius: 999px; padding: 9px 18px; font-weight: 600; font-family: var(--font-display); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.course-tab:hover { border-color: var(--brand-red); color: var(--brand-red); }
.course-tab.is-active { background: var(--brand-red); border-color: var(--brand-red); color: #fff; }
.course-card--hidden { display: none !important; }

.featured-highlight { position: relative; overflow: hidden; background: linear-gradient(120deg, #141414 0%, #2a0b0c 100%); color: #fff; border-radius: 20px; padding: 26px 30px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; box-shadow: var(--shadow-lg); margin-bottom: 28px; }
.featured-highlight::before { content: ""; position: absolute; width: 320px; height: 320px; right: -80px; top: -120px; background: radial-gradient(circle, rgba(227,30,36,.35), transparent 60%); pointer-events: none; }
.featured-highlight__tag { display: inline-block; background: var(--brand-gold); color: #111; font-weight: 800; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.featured-highlight h3 { color: #fff; margin: 10px 0 4px; }
.featured-highlight p { color: rgba(255,255,255,.85); margin: 0; max-width: 640px; }
.featured-highlight__body { position: relative; z-index: 1; }
.featured-highlight .btn { position: relative; z-index: 1; }

/* link-styled button (used in courses empty state) */
.linklike { background: none; border: none; color: var(--brand-red); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }