/* ==========================================================================
   The Digital Chessboard Academy — Premium Chess Academy
   Global stylesheet (design system + all sections)
   --------------------------------------------------------------------------
   Plain CSS, no build step. Edit values in :root to re-theme the whole site.
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens -- */
:root {
  /* Brand palette */
  --navy-900: #0B1E3D;   /* primary dark / midnight */
  --navy-800: #102649;
  --navy-700: #16315C;   /* secondary navy */
  --navy-600: #1f3f73;
  --gold-500: #D4AF37;   /* polished gold accent */
  --gold-600: #C9A24B;   /* muted gold, hover/secondary */
  --gold-300: #E7Cf7e;
  --gold-text: #7E5F10;  /* deep gold for small text on light bg — passes WCAG AA */
  --blue-500: #2E5BA6;   /* cool complementary blue */
  --blue-300: #6F97D6;   /* lighter sky accent */
  --blue-100: #DCE8F7;   /* soft pale blue */
  --ivory:    #F7F5F0;   /* soft warm background */
  --ivory-200:#EFEBE1;   /* slightly deeper ivory for alt sections */
  --white:    #ffffff;

  /* Faint chess-board texture (white & blue) */
  --chess-blue: rgba(46, 91, 166, .045);  /* blue squares on light sections */
  --chess-white: rgba(255, 255, 255, .03); /* white squares on navy sections */
  --chess-size: 92px;

  /* Text */
  --ink:      #0C1B33;   /* near-black navy for headings */
  --body:     #4A5468;   /* warm gray body copy */
  --body-soft:#5E6678;   /* muted secondary text — darkened to pass WCAG AA on light */
  --on-dark:  #EAEFF7;   /* body text on navy */
  --on-dark-soft: #AEBBD0;

  /* UI */
  --line:     #E2DCCD;   /* hairline divider on light */
  --line-dark:rgba(212,175,55,.18);
  --shadow-sm: 0 2px 8px rgba(11,30,61,.06);
  --shadow-md: 0 14px 34px -14px rgba(11,30,61,.20);
  --shadow-lg: 0 30px 60px -22px rgba(11,30,61,.32);
  --shadow-gold: 0 18px 40px -16px rgba(212,175,55,.45);

  /* Type */
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --container: 1200px;
  --container-narrow: 920px;
  --radius:   14px;
  --radius-lg:22px;
  --radius-sm:10px;
  --gap:      clamp(1rem, 2vw, 1.6rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);
  --header-h: 76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  font-family: var(--sans);
  color: var(--body);
  background-color: var(--ivory);
  background-image: conic-gradient(var(--chess-blue) 0 90deg, transparent 0 180deg, var(--chess-blue) 0 270deg, transparent 0);
  background-size: var(--chess-size) var(--chess-size);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: url('../images/cursor/cursor-knight.svg') 6 4, auto;
}

/* Chess-knight cursor everywhere; clickable elements keep the knight (with a
   pointer fallback for browsers without SVG-cursor support); text fields stay text. */
a, button, .btn, [role="button"], summary, label[for], select, .nav-toggle,
.gtile, .tcard__play, .tcard--video, .polaroid, .path__node, .join-video,
.filterbar button, .pricing-toggle button, .hero__dot, .entry {
  cursor: url('../images/cursor/cursor-knight.svg') 6 4, pointer;
}
input, textarea, [contenteditable="true"] { cursor: text; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
input, textarea, select, button { font-family: inherit; }

/* ------------------------------------------------------------ Typography -- */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); line-height: 1.12; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.15rem; }
p  { color: var(--body); }
strong { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
/* Bright gold eyebrow on dark backgrounds (passes AA there); deep gold on light */
.section--navy .eyebrow, .hero .eyebrow, .cta-band .eyebrow, .page-hero .eyebrow { color: var(--gold-300); }
.eyebrow::before {
  content: "";
  width: 28px; height: 1.5px;
  background: var(--gold-500);
  display: inline-block;
}
.eyebrow--center { justify-content: center; }

/* ---------------------------------------------------------------- Layout -- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.section { padding-block: var(--section-y); position: relative; }
.section--alt {
  /* Beige in the middle for section distinction, but the top & bottom edges
     fade back to the ivory of neighbouring sections so there's no hard seam. */
  background-color: var(--ivory);
  background-image:
    conic-gradient(var(--chess-blue) 0 90deg, transparent 0 180deg, var(--chess-blue) 0 270deg, transparent 0),
    linear-gradient(180deg, var(--ivory) 0, var(--ivory-200) 110px, var(--ivory-200) calc(100% - 110px), var(--ivory) 100%);
  background-size: var(--chess-size) var(--chess-size), 100% 100%;
  background-repeat: repeat, no-repeat;
}
.section--navy {
  background-color: var(--navy-900);
  background-image: conic-gradient(var(--chess-white) 0 90deg, transparent 0 180deg, var(--chess-white) 0 270deg, transparent 0);
  background-size: var(--chess-size) var(--chess-size);
  color: var(--on-dark);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy p { color: var(--on-dark-soft); }

.section-head { max-width: 720px; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: .7rem; }
.section-head p { margin-top: 1rem; font-size: 1.06rem; }

/* Decorative gold rule with center diamond (used between/inside sections) */
.rule { display: flex; align-items: center; justify-content: center; gap: .9rem; color: var(--gold-500); }
.rule::before, .rule::after { content: ""; height: 1px; width: min(90px, 18vw); background: linear-gradient(90deg, transparent, var(--gold-500)); }
.rule::after { background: linear-gradient(90deg, var(--gold-500), transparent); }
.rule span { width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold-500); display: inline-block; }

/* --------------------------------------------------------------- Buttons -- */
.btn {
  --btn-bg: var(--gold-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .92rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .01em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--gold-500); color: var(--navy-900); box-shadow: var(--shadow-gold); }
.btn--primary:hover { background: var(--gold-600); transform: translateY(-2px); box-shadow: 0 22px 46px -16px rgba(212,175,55,.6); }
.btn--outline { background: transparent; color: var(--navy-900); border: 1.5px solid var(--navy-700); }
.btn--outline:hover { background: var(--navy-900); color: var(--white); transform: translateY(-2px); }
.btn--ghost-gold { background: transparent; color: var(--gold-500); border: 1.5px solid var(--gold-500); }
.btn--ghost-gold:hover { background: var(--gold-500); color: var(--navy-900); transform: translateY(-2px); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.04rem; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- Header -- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-header.is-scrolled {
  background: rgba(11,30,61,.96);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 24px -12px rgba(0,0,0,.5);
  border-bottom-color: var(--line-dark);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand__mark { width: 42px; height: 42px; flex: none; }
/* When a real logo image is used (images/logo.png/.svg). Replaces both the
   inline SVG mark and the .brand__name text (the wordmark is in the image). */
.brand__logo { height: 52px; width: auto; max-width: 260px; display: block; object-fit: contain; }
.footer-brand .brand__logo { height: 60px; max-width: 280px; }
@media (max-width: 540px) { .brand__logo { height: 42px; } .footer-brand .brand__logo { height: 50px; } }
/* Subtle backdrop so a paper-textured logo reads cleanly on the dark navy
   header. Remove `.brand--card` from the markup once you have a logo
   designed for a dark background. */
.brand--card { background: rgba(255,255,255,.94); padding: 4px 10px; border-radius: 10px; box-shadow: 0 4px 14px -6px rgba(0,0,0,.35); }
.footer-brand .brand--card { background: rgba(255,255,255,.94); }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; color: var(--white); line-height: 1.05; letter-spacing: .01em; }
.brand__name small { display: block; font-family: var(--sans); font-weight: 500; font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-500); margin-top: .3rem; }

.nav { display: flex; align-items: center; gap: clamp(.85rem, 1.7vw, 1.6rem); }
.nav__link { color: var(--on-dark); font-weight: 500; font-size: .96rem; position: relative; padding: .3rem 0; transition: color .2s var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gold-500); transition: width .25s var(--ease); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--gold-500); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav > .btn { display: none; } /* in-nav CTA is for the mobile menu only; desktop uses .btn--header */

.nav-actions { display: flex; align-items: center; gap: .8rem; }

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; color: var(--white); align-items: center; justify-content: center; }
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-open { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }

/* --------------------------------------------------------------- Mobile nav */
@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy-900);
    padding: 1rem clamp(1.1rem, 4vw, 2.2rem) 1.6rem;
    border-bottom: 1px solid var(--line-dark);
    transform: translateY(-130%);
    transition: transform .38s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .nav { transform: translateY(0); }
  .nav__link { padding: .95rem .2rem; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 1.05rem; }
  .nav__link::after { display: none; }
  .nav .btn { display: inline-flex; margin-top: 1.1rem; }
  .nav-actions .btn--header { display: none; } /* CTA moves inside mobile menu */
}

/* ----------------------------------------------------------------- Hero --- */
.hero {
  position: relative;
  min-height: min(94vh, 880px);
  display: flex; align-items: center;
  padding-top: var(--header-h);
  color: var(--on-dark);
  overflow: hidden;
  background: var(--navy-900);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
  transform: scale(1.04);
}
.hero__slide.is-active { opacity: 1; animation: heroZoom 9s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(115deg, rgba(8,21,44,.92) 0%, rgba(11,30,61,.80) 45%, rgba(15,40,80,.52) 100%),
    radial-gradient(120% 90% at 80% 8%, rgba(212,175,55,.12), transparent 58%),
    radial-gradient(90% 80% at 12% 95%, rgba(46,91,166,.22), transparent 55%);
}
.hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 720px; padding-block: clamp(3rem, 7vw, 5rem); }
.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(212,175,55,.12);
  border: 1px solid var(--line-dark);
  color: var(--gold-300);
  padding: .5rem 1rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  margin-bottom: 1.5rem;
}
.hero__badge svg { width: 16px; height: 16px; color: var(--gold-500); }
.hero h1 { color: var(--white); }
.hero h1 .accent { color: var(--gold-500); font-style: italic; }
.hero__sub { margin-top: 1.35rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--on-dark); max-width: 38em; }
.hero__cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__cta .btn--outline { color: var(--white); border-color: rgba(255,255,255,.4); }
.hero__cta .btn--outline:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.hero__dots { margin-top: 2.6rem; display: flex; gap: .5rem; }
.hero__dot { width: 28px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); transition: background .3s; }
.hero__dot.is-active { background: var(--gold-500); }

/* --------------------------------------------------------- Trust counters -- */
.trust {
  position: relative; z-index: 5;
  margin-top: calc(var(--section-y) * -.5);
}
.trust__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem .5rem;
}
.trust__item { text-align: center; padding: .4rem; position: relative; }
.trust__num { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 600; color: var(--navy-900); line-height: 1; }
.trust__num .suffix { color: var(--gold-500); }
.trust__label { margin-top: .5rem; font-size: .8rem; font-weight: 500; letter-spacing: .03em; color: var(--body-soft); text-transform: uppercase; line-height: 1.3; }
@media (max-width: 900px) { .trust__card { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .trust__card { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------- About grid -- */
.about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-media { position: relative; }
.about-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.about-media__frame { position: absolute; inset: 16px -16px -16px 16px; border: 1.5px solid var(--gold-500); border-radius: var(--radius-lg); z-index: -1; }
.about-media__stat {
  position: absolute; left: -10px; bottom: 28px;
  background: var(--navy-900); color: var(--white);
  padding: 1.1rem 1.4rem; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line-dark);
}
.about-media__stat b { font-family: var(--serif); font-size: 1.7rem; color: var(--gold-500); display: block; line-height: 1; }
.about-media__stat span { font-size: .82rem; color: var(--on-dark-soft); }
.about-copy p + p { margin-top: 1.05rem; }
.feature-row { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .feature-row { margin-top: 1.6rem; } }
@media (max-width: 520px) { .feature-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Icon card -- */
.icard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex; gap: 1rem; align-items: flex-start;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.icard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-500); }
.icard__icon {
  flex: none; width: 50px; height: 50px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  color: var(--gold-500);
  border: 1px solid var(--line-dark);
}
.icard__icon svg { width: 24px; height: 24px; }
.icard h3 { margin-bottom: .35rem; font-size: 1.12rem; }
.icard p { font-size: .94rem; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
@media (max-width: 920px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* On navy sections, recolor cards */
.section--navy .icard { background: var(--navy-800); border-color: var(--line-dark); }
.section--navy .icard:hover { border-color: var(--gold-500); box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.section--navy .icard h3 { color: var(--white); }
.section--navy .icard p { color: var(--on-dark-soft); }
.section--navy .icard__icon { background: rgba(212,175,55,.12); }

/* ------------------------------------------------------------- Curriculum -- */
.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 980px) { .levels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .levels { grid-template-columns: 1fr; } }
.level {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.4rem 1.5rem 1.6rem; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.level::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.level:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-500); }
.level:hover::before { transform: scaleX(1); }
.level__num { font-family: var(--serif); font-size: 3.2rem; font-weight: 600; color: var(--ivory-200); line-height: .8; position: absolute; top: .7rem; right: 1rem; transition: color .3s; }
.level:hover .level__num { color: var(--gold-300); }
.level__tag { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); }
.level h3 { margin: .5rem 0 .6rem; }
.level p { font-size: .92rem; }
.level__link { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--navy-700); }
.level__link svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.level__link:hover { color: var(--gold-600); }
.level__link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------- Pricing --- */
.pricing-toggle { display: inline-flex; align-items: center; gap: .9rem; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .4rem; margin: 1.6rem auto 0; }
.pricing-toggle button { padding: .55rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--body-soft); transition: all .25s var(--ease); }
.pricing-toggle button.is-active { background: var(--navy-900); color: var(--white); box-shadow: var(--shadow-sm); }
.pricing-toggle .save-pill { background: rgba(212,175,55,.18); color: var(--gold-600); font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; margin-left: .35rem; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; margin-top: 3rem; }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.plan {
  position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2.2rem 1.8rem 2rem;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.plan--featured {
  border: 1.5px solid var(--gold-500);
  box-shadow: var(--shadow-gold);
  position: relative;
  transform: translateY(-6px);
}
.plan--featured:hover { transform: translateY(-12px); }
.plan__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold-500); color: var(--navy-900);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .38rem 1.05rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(212,175,55,.6);
}
.plan__name { font-family: var(--serif); font-size: 1.45rem; color: var(--ink); }
.plan__desc { font-size: .9rem; margin-top: .3rem; min-height: 2.6em; }
.plan__price { margin: 1.2rem 0 .2rem; display: flex; align-items: baseline; gap: .35rem; }
.plan__price .currency { font-size: 1.3rem; color: var(--navy-700); font-weight: 600; }
.plan__price .amount { font-family: var(--serif); font-size: 3rem; font-weight: 700; color: var(--navy-900); line-height: 1; }
.plan__price .period { color: var(--body-soft); font-size: .92rem; }
.plan__billed { font-size: .82rem; color: var(--body-soft); }
.plan__features { margin: 1.5rem 0; display: grid; gap: .7rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.plan__features li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.plan__features svg { width: 18px; height: 18px; flex: none; color: var(--gold-500); margin-top: .15rem; }
.plan__features li.muted { color: var(--body-soft); opacity: .6; }
.plan__features li.muted svg { color: var(--body-soft); }
.plan .btn { margin-top: auto; }
.plan--featured .btn--outline { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }

/* ----------------------------------------------------- Achievement cards --- */
.spotlight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 940px) { .spotlight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .spotlight-grid { grid-template-columns: 1fr; } }

.trophy {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.trophy::after { /* gold ribbon corner */
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 56px 56px 0; border-style: solid;
  border-color: transparent var(--gold-500) transparent transparent;
  z-index: 3; opacity: .92;
}
.trophy:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: var(--gold-500); }
.trophy__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-800); }
.trophy__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.trophy:hover .trophy__media img { transform: scale(1.05); }
.trophy__cat { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(11,30,61,.85); color: var(--gold-300); border: 1px solid var(--line-dark); font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 999px; text-transform: capitalize; }
.trophy__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.trophy__icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(212,175,55,.14); color: var(--gold-600); display: grid; place-items: center; margin-bottom: .9rem; }
.trophy__icon svg { width: 20px; height: 20px; }
.trophy__headline { font-family: var(--serif); font-size: 1.22rem; color: var(--navy-900); line-height: 1.25; }
.trophy__meta { font-size: .85rem; color: var(--gold-700, var(--gold-600)); font-weight: 600; margin-top: .5rem; }
.trophy__highlights { margin-top: .9rem; display: grid; gap: .45rem; }
.trophy__highlights li { display: flex; gap: .5rem; font-size: .88rem; align-items: flex-start; }
.trophy__highlights svg { width: 15px; height: 15px; color: var(--gold-500); flex: none; margin-top: .2rem; }
.trophy__video { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .86rem; color: var(--navy-700); }
.trophy__video svg { width: 18px; height: 18px; color: var(--gold-500); }
.trophy__video:hover { color: var(--gold-600); }

/* ------------------------------------------------ Achievements filter bar -- */
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.6rem; }
.filterbar button {
  padding: .55rem 1.2rem; border-radius: 999px; font-weight: 600; font-size: .88rem;
  color: var(--body); background: var(--white); border: 1px solid var(--line);
  transition: all .22s var(--ease);
}
.filterbar button:hover { border-color: var(--gold-500); color: var(--navy-900); }
.filterbar button.is-active { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }

/* ----------------------------------------------------------- Testimonials -- */
.tcarousel { position: relative; }
.tcarousel__viewport { overflow: hidden; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tcarousel__viewport.is-dragging { cursor: grabbing; }
.tcarousel__track {
  display: flex; gap: 1.5rem; width: max-content;
  will-change: transform; /* transform is driven by js/testimonials.js */
  padding: 14px 0; /* room for hover elevation/shadow */
}
.tcarousel__loading { text-align: center; color: var(--body-soft); padding: 2rem; }

.tcard {
  flex: 0 0 clamp(290px, 31vw, 360px);
  height: 560px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.tcard::before { /* gold corner accent */
  content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 46px;
  border-top: 2px solid var(--gold-500); border-left: 2px solid var(--gold-500);
  border-top-left-radius: var(--radius-lg); opacity: .5;
  transition: opacity .3s;
}
.tcard:hover { transform: scale(1.045); box-shadow: var(--shadow-lg); border-color: var(--gold-500); z-index: 4; }
.tcard:hover::before { opacity: 1; }

.tcard__stars { display: inline-flex; gap: 2px; color: var(--gold-500); margin-bottom: .9rem; }
.tcard__stars svg { width: 18px; height: 18px; }
.tcard__quotemark { font-family: var(--serif); font-size: 3.2rem; line-height: .4; color: var(--gold-300); height: 26px; display: block; }
.tcard__quote { margin: .4rem 0 1.2rem; color: var(--ink); font-size: .98rem; line-height: 1.6; flex: 1; overflow: hidden; }
.tcard__foot { display: flex; align-items: center; gap: .8rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.tcard__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-500); flex: none; background: var(--ivory-200); }
.tcard__who { min-width: 0; }
.tcard__name { font-weight: 600; color: var(--navy-900); font-size: .96rem; display: flex; align-items: center; gap: .4rem; }
.tcard__loc { font-size: .82rem; color: var(--body-soft); }
.verified { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; color: #2e8b57; }
.verified svg { width: 14px; height: 14px; }

/* Video testimonial variant */
.tcard--video { padding: 0; overflow: hidden; }
.tcard--video .tcard__vidthumb { position: relative; flex: 1; min-height: 0; background: var(--navy-800); overflow: hidden; }
.tcard__chip { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; display: flex; align-items: center; gap: .5rem; }
.tcard__chip-logo { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--navy-900); border: 1px solid var(--gold-500); display: grid; place-items: center; color: var(--gold-500); font-family: var(--serif); font-size: .9rem; }
.tcard__chip-text { min-width: 0; }
.tcard__chip-text b { display: block; color: #fff; font-size: .8rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tcard__chip-text small { display: block; color: var(--on-dark-soft); font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tcard--video .tcard__vidthumb > img { width: 100%; height: 100%; object-fit: cover; }
.tcard--video .tcard__vidthumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,30,61,.05), rgba(11,30,61,.78)); }
.tcard__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--gold-500); color: var(--navy-900);
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .25s var(--ease);
}
.tcard__play svg { width: 26px; height: 26px; margin-left: 3px; }
.tcard--video:hover .tcard__play { transform: translate(-50%, -50%) scale(1.12); }
.tcard__vidmeta { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1rem; z-index: 2; color: var(--white); }
.tcard__vidmeta .tcard__stars { margin-bottom: .3rem; }
.tcard__vidmeta .tcard__name { color: var(--white); }
.tcard__vidmeta .tcard__loc { color: var(--on-dark-soft); }
.tcard__vidbody { padding: 1rem 1.4rem 1.3rem; flex: none; }
.tcard__vidbody .tcard__quote { margin: 0; font-size: .9rem; flex: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tcarousel__nav { display: flex; justify-content: center; gap: .8rem; margin-top: 2rem; }
.tcarousel__nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy-900); display: grid; place-items: center; transition: all .25s var(--ease); }
.tcarousel__nav button:hover { background: var(--navy-900); color: var(--gold-500); border-color: var(--navy-900); transform: translateY(-2px); }
.tcarousel__nav svg { width: 20px; height: 20px; }

.trust-aggregate { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; font-weight: 600; color: var(--navy-900); }
.trust-aggregate .stars { color: var(--gold-500); display: inline-flex; gap: 1px; }
.trust-aggregate .stars svg { width: 18px; height: 18px; }
.section--navy .trust-aggregate { color: var(--white); }

/* --------------------------------------------------------------- Gallery --- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gtile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 1; cursor: pointer; background: var(--navy-800);
  border: 1px solid var(--line);
}
.gtile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gtile:hover img { transform: scale(1.08); }
.gtile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11,30,61,.82)); opacity: 0; transition: opacity .3s; display: flex; align-items: flex-end; padding: 1rem; }
.gtile:hover .gtile__overlay { opacity: 1; }
.gtile__cap { color: var(--white); font-size: .88rem; font-weight: 500; }
.gtile__cap small { display: block; color: var(--gold-300); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .2rem; }
.gtile__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(212,175,55,.92); color: var(--navy-900); display: grid; place-items: center; }
.gtile__play svg { width: 22px; height: 22px; margin-left: 2px; }

/* tall masonry-ish variant for gallery page */
.gtile--wide { grid-column: span 2; aspect-ratio: 2/1; }
@media (max-width: 620px) { .gtile--wide { grid-column: span 2; aspect-ratio: 16/10; } }

/* ------------------------------------------------------------- Initiatives -- */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 920px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-cards { grid-template-columns: 1fr; } }
.statc { text-align: center; padding: 2rem 1.4rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: var(--navy-800); }
.statc__icon { width: 54px; height: 54px; margin: 0 auto .9rem; border-radius: 14px; background: rgba(212,175,55,.12); color: var(--gold-500); display: grid; place-items: center; }
.statc__icon svg { width: 26px; height: 26px; }
.statc b { font-family: var(--serif); font-size: 2rem; color: var(--white); display: block; }
.statc span { display: block; color: var(--gold-300); font-weight: 600; font-size: .95rem; margin: .2rem 0 .4rem; }
.statc p { font-size: .85rem; color: var(--on-dark-soft); }

/* ---------------------------------------------------------- Contact/booking */
.contact-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }
.booking-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.booking-card__head { padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .7rem; }
.booking-card__head svg { width: 22px; height: 22px; color: var(--gold-600); }
.booking-card__head h3 { font-size: 1.2rem; }
.calendly-embed { min-height: 640px; width: 100%; }
.calendly-placeholder { padding: 3rem 1.6rem; text-align: center; color: var(--body-soft); }
.calendly-placeholder svg { width: 46px; height: 46px; color: var(--gold-500); margin: 0 auto 1rem; }

.form-field { margin-bottom: 1.05rem; }
.form-field label { display: block; font-size: .85rem; font-weight: 600; color: var(--navy-900); margin-bottom: .4rem; }
.form-field label .req { color: #c0392b; }
.form-control {
  width: 100%; padding: .8rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--ivory); color: var(--ink);
  font-size: .96rem; transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212,175,55,.18); background: var(--white); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .82rem; color: var(--body-soft); margin-top: .8rem; }
.form-status { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; display: none; }
.form-status.ok { display: block; background: rgba(46,139,87,.12); color: #1f6b43; border: 1px solid rgba(46,139,87,.3); }
.form-status.err { display: block; background: rgba(192,57,43,.1); color: #a93226; border: 1px solid rgba(192,57,43,.3); }

.contact-info { display: grid; gap: 1rem; }
.contact-info__item { display: flex; gap: .9rem; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; transition: border-color .25s, transform .25s; }
.contact-info__item:hover { border-color: var(--gold-500); transform: translateX(4px); }
.contact-info__item .contact-info__icon { width: 44px; height: 44px; border-radius: 12px; flex: none; background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: var(--gold-500); display: grid; place-items: center; }
.contact-info__icon svg { width: 20px; height: 20px; }
.contact-info__item b { display: block; color: var(--navy-900); font-size: .95rem; }
.contact-info__item span { font-size: .9rem; color: var(--body-soft); }

/* ----------------------------------------------------------------- Footer -- */
.site-footer { background: var(--navy-900); color: var(--on-dark-soft); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--line-dark); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand p { font-size: .92rem; max-width: 30ch; color: var(--on-dark-soft); }
.footer-col h5 { color: var(--white); font-family: var(--sans); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.footer-col a { display: block; padding: .35rem 0; font-size: .94rem; color: var(--on-dark-soft); transition: color .2s, padding-left .2s; }
.footer-col a:hover { color: var(--gold-500); padding-left: 5px; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; color: var(--on-dark); transition: all .25s var(--ease); }
.footer-social a:hover { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); transform: translateY(-3px); }
.footer-social svg { width: 19px; height: 19px; }
.footer-bottom { margin-top: 3rem; border-top: 1px solid var(--line-dark); padding: 1.4rem 0; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; font-size: .85rem; }
.footer-bottom a:hover { color: var(--gold-500); }

/* ----------------------------------------------------------- Lightbox/modal */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,14,30,.92); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 4vw; }
.lightbox.is-open { display: flex; animation: fadeIn .3s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox__inner { position: relative; width: min(960px, 100%); max-height: 88vh; }
.lightbox__inner img, .lightbox__inner iframe, .lightbox__inner video { width: 100%; max-height: 88vh; border-radius: var(--radius); display: block; background: #000; aspect-ratio: 16/9; object-fit: contain; }
.lightbox__inner img { aspect-ratio: auto; object-fit: contain; }
.lightbox__close { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--white); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); }
.lightbox__close:hover { background: var(--gold-500); color: var(--navy-900); }
.lightbox__close svg { width: 24px; height: 24px; }
.lightbox__cap { color: var(--on-dark); text-align: center; margin-top: 1rem; font-size: .95rem; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; display: grid; place-items: center; }
.lightbox__nav:hover { background: var(--gold-500); color: var(--navy-900); }
.lightbox__nav svg { width: 26px; height: 26px; }
.lightbox__nav--prev { left: -64px; }
.lightbox__nav--next { right: -64px; }
@media (max-width: 768px) { .lightbox__nav--prev { left: 4px; } .lightbox__nav--next { right: 4px; } }

/* ----------------------------------------------------- Page hero (subpages) */
.page-hero { background-color: var(--navy-900); background-image: conic-gradient(var(--chess-white) 0 90deg, transparent 0 180deg, var(--chess-white) 0 270deg, transparent 0); background-size: var(--chess-size) var(--chess-size); color: var(--on-dark); padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 90% 0%, rgba(212,175,55,.12), transparent 55%), radial-gradient(90% 90% at 5% 100%, rgba(46,91,166,.20), transparent 55%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); max-width: 16ch; }
.page-hero p { margin-top: 1rem; max-width: 56ch; }
.breadcrumb { font-size: .85rem; color: var(--on-dark-soft); margin-bottom: 1rem; display: flex; gap: .5rem; align-items: center; }
.breadcrumb a:hover { color: var(--gold-500); }
.breadcrumb svg { width: 14px; height: 14px; opacity: .6; }

/* ---------------------------------------------------------- Scroll reveal -- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ------------------------------------------------------------ Coach cards -- */
.coaches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 940px) { .coaches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .coaches { grid-template-columns: 1fr; } }
.coach { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.coach:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-500); }
.coach__photo { aspect-ratio: 4/3.4; background: var(--navy-800); overflow: hidden; }
.coach__photo img { width: 100%; height: 100%; object-fit: cover; }
.coach__body { padding: 1.4rem 1.5rem 1.6rem; }
.coach__title-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.coach__name { font-family: var(--serif); font-size: 1.3rem; color: var(--navy-900); }
.coach__fide { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-900); background: var(--gold-500); padding: .2rem .55rem; border-radius: 6px; }
.coach__rating { margin-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--gold-600); display: inline-flex; align-items: center; gap: .4rem; }
.coach__rating svg { width: 16px; height: 16px; }
.coach__bio { margin-top: .8rem; font-size: .92rem; }

/* ---------------------------------------------------------------- CTA band -- */
.cta-band { position: relative; background: linear-gradient(150deg, var(--navy-800), var(--navy-900)); color: var(--on-dark); text-align: center; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 50% -20%, rgba(212,175,55,.16), transparent 60%); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); max-width: 18ch; margin-inline: auto; }
.cta-band p { margin: 1rem auto 0; max-width: 52ch; }

/* --------------------------------------------------------------- Value row -- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 940px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }
.value { text-align: center; padding: 1.8rem 1.3rem; }
.value__icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 16px; background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: var(--gold-500); display: grid; place-items: center; }
.value__icon svg { width: 26px; height: 26px; }
.value h3 { margin-bottom: .4rem; font-size: 1.12rem; }
.value p { font-size: .92rem; }

/* ===================================================== Curriculum PATH ===== */
/* KOC-style connected learning path: chess-piece nodes joined by a flowing line,
   with content alternating above / below each node. */
.path { position: relative; margin-top: 1rem; }
.path__line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.path__track { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.path__step { display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; min-height: 360px; text-align: center; }
.path__node {
  grid-row: 2; justify-self: center;
  position: relative; z-index: 2; /* sit ABOVE the connector line */
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--piece, var(--gold-500)); color: #fff;
  border: 4px solid var(--white);
  box-shadow: 0 14px 30px -12px rgba(11,30,61,.45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.path__step--king .path__node { border-color: var(--gold-500); }
.path__step:hover .path__node { transform: scale(1.09); box-shadow: 0 18px 38px -12px rgba(11,30,61,.55); }
.path__piece { font-size: 2.5rem; line-height: 1; }
.path__content { padding: 0 .7rem; }
.path__step--above .path__content { grid-row: 1; align-self: end; padding-bottom: 1.4rem; }
.path__step--below .path__content { grid-row: 3; align-self: start; padding-top: 1.4rem; }
.path__name { font-family: var(--serif); font-size: 1.5rem; color: var(--accent, var(--gold-600)); display: block; }
.path__level { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--body-soft); margin-top: .25rem; display: block; }
.path__desc { font-size: .9rem; margin: .6rem auto .9rem; max-width: 23ch; }
@media (max-width: 760px) {
  .path__line { display: none; }
  .path__track { grid-template-columns: 1fr; }
  .path__track::before { content: ""; position: absolute; left: 43px; top: 38px; bottom: 38px; width: 2px; background: var(--line); z-index: 0; }
  .path__step { grid-template-rows: none; grid-template-columns: 88px 1fr; min-height: 0; text-align: left; gap: 1.1rem; padding: .6rem 0; align-items: center; }
  .path__node { grid-row: 1; grid-column: 1; }
  .path__step--above .path__content, .path__step--below .path__content { grid-row: 1; grid-column: 2; align-self: center; padding: 0; }
  .path__desc { margin-inline: 0; }
}

/* ===================================================== SKILLS you learn ===== */
.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@media (max-width: 940px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .skills-grid { grid-template-columns: 1fr 1fr; } }
.skill-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem 1.2rem; text-align: center; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.skill-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-500); }
.skill-card__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px; background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); color: var(--gold-500); display: grid; place-items: center; }
.skill-card__icon svg { width: 30px; height: 30px; }
.skill-card h3 { font-size: 1rem; line-height: 1.25; }

/* ================================================ WHAT'S INCLUDED cards ===== */
.includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 760px) { .includes-grid { grid-template-columns: 1fr; } }
.include-card { display: flex; gap: 1.1rem; align-items: center; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--gold-500); border-radius: var(--radius); padding: 1.25rem 1.5rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.include-card:hover { transform: translateX(5px); box-shadow: var(--shadow-md); }
.include-card .include-card__icon { width: 54px; height: 54px; flex: none; border-radius: 14px; background: rgba(212,175,55,.12); color: var(--gold-600); display: grid; place-items: center; }
.include-card__icon svg { width: 26px; height: 26px; }
.include-card b { display: block; color: var(--navy-900); font-size: 1.06rem; }
.include-card span { font-size: .9rem; color: var(--body-soft); }
.section--navy .include-card { background: var(--navy-800); border-color: var(--line-dark); border-left-color: var(--gold-500); }
.section--navy .include-card b { color: #fff; }
.section--navy .include-card span { color: var(--on-dark-soft); }

/* ==================================================== JOIN THE ACADEMY ===== */
.join-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.join-grid--spotlight { grid-template-columns: 0.85fr 1.5fr; }
@media (max-width: 900px) { .join-grid, .join-grid--spotlight { grid-template-columns: 1fr; } }
.join-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); cursor: pointer; aspect-ratio: 16/10; background: var(--navy-800); border: 1px solid var(--line-dark); }
.join-video img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.join-video:hover img { transform: scale(1.04); }
.join-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,30,61,.05), rgba(11,30,61,.55)); }
.join-video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 72px; height: 72px; border-radius: 50%; background: var(--gold-500); color: var(--navy-900); display: grid; place-items: center; box-shadow: 0 12px 34px rgba(0,0,0,.45); transition: transform .25s var(--ease); }
.join-video:hover .join-video__play { transform: translate(-50%, -50%) scale(1.12); }
.join-video__play svg { width: 30px; height: 30px; margin-left: 3px; }
.join-video__caption { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 2; color: #fff; }
.join-video__caption b { font-family: var(--serif); font-size: 1.4rem; display: block; }
.join-video__caption span { font-size: .85rem; color: var(--on-dark-soft); }
.benefits-box { background: rgba(212,175,55,.1); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 1.3rem 1.6rem; margin-top: 1.4rem; }
.benefits-box li { display: flex; gap: .7rem; align-items: flex-start; padding: .5rem 0; font-weight: 500; color: var(--ink); font-size: .96rem; }
.benefits-box li svg { width: 20px; height: 20px; flex: none; color: var(--gold-600); margin-top: .1rem; }
.section--navy .benefits-box { background: rgba(212,175,55,.1); }
.section--navy .benefits-box li { color: var(--on-dark); }

/* ================================================= STUDENT SPOTLIGHT polaroid */
.polaroids { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.6rem); justify-content: center; padding: 1rem 0; }
.polaroid { flex: 1 1 0; min-width: 0; max-width: 240px; border-radius: 18px; padding: 1.3rem 1rem 1.4rem; text-align: center; box-shadow: var(--shadow-lg); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.join-grid--spotlight .polaroids { flex-wrap: nowrap; }
@media (max-width: 900px) { .join-grid--spotlight .polaroids { flex-wrap: wrap; } .polaroid { flex-basis: 150px; } }
.polaroid:nth-child(3n+1) { transform: rotate(-4deg); }
.polaroid:nth-child(3n+2) { transform: rotate(2.5deg); }
.polaroid:nth-child(3n+3) { transform: rotate(-2deg); }
.polaroid:hover { transform: rotate(0) translateY(-6px) scale(1.04); z-index: 3; box-shadow: 0 36px 70px -24px rgba(11,30,61,.5); }
.polaroid__photo { width: min(140px, 78%); aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 4px solid rgba(255,255,255,.55); background: var(--navy-800); }
.polaroid__name { font-family: var(--serif); font-size: 1.35rem; }
.polaroid__title { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: .5rem; line-height: 1.4; }
.polaroid--navy { background: var(--navy-700); }
.polaroid--navy .polaroid__name { color: #fff; }
.polaroid--navy .polaroid__title { color: var(--gold-300); }
.polaroid--gold { background: var(--gold-500); }
.polaroid--gold .polaroid__name { color: var(--navy-900); }
.polaroid--gold .polaroid__title { color: var(--navy-800); }
.polaroid--ivory { background: var(--white); border: 1px solid var(--line); }
.polaroid--ivory .polaroid__name { color: var(--navy-900); }
.polaroid--ivory .polaroid__title { color: var(--gold-600); }

/* ============================================ Decorative piece watermarks == */
/* Large, very faint chess pieces floating behind a few sections for flair. */
.has-deco { overflow: hidden; }
.section > .container { position: relative; z-index: 1; }
.section--navy > .tcarousel { position: relative; z-index: 1; }
.deco-piece {
  position: absolute; z-index: 0;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", Georgia, serif;
  line-height: 1; pointer-events: none; user-select: none;
}
.deco-piece--blue { color: var(--blue-500); opacity: .05; }
.deco-piece--light { color: #ffffff; opacity: .035; }
.deco-piece--gold { color: var(--gold-500); opacity: .06; }
@media (prefers-reduced-motion: no-preference) {
  .deco-piece { transition: transform .6s var(--ease); }
}

/* Blue accent on the curriculum connector line */
.path__line path { stroke: var(--blue-500); }

/* Skills icons get a cool blue gradient (a pocket of brightness) */
.skill-card__icon { background: linear-gradient(160deg, var(--blue-500), var(--navy-800)); }
.skill-card:hover .skill-card__icon { background: linear-gradient(160deg, var(--blue-300), var(--blue-500)); }

/* ============================================ Pricing extras (refinement) == */
.pricing-mode { display: inline-flex; gap: .4rem; background: var(--navy-900); border-radius: 999px; padding: .35rem; margin: 0 auto; box-shadow: var(--shadow-sm); }
.pricing-mode button { padding: .62rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--on-dark-soft); transition: all .25s var(--ease); }
.pricing-mode button.is-active { background: var(--gold-500); color: var(--navy-900); box-shadow: 0 6px 16px -8px rgba(212,175,55,.7); }
.pricing-toggles { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-top: 1.6rem; }

.plan__billed { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 1.7rem; }
.amount--text { font-family: var(--serif); font-size: 1.7rem; color: var(--navy-900); font-weight: 700; }
.save-tag { display: inline-block; background: rgba(46,139,87,.15); color: #1f6b43; font-weight: 700; font-size: .76rem; padding: .22rem .6rem; border-radius: 999px; }
.price-pill { display: inline-block; background: var(--navy-900); color: var(--gold-300); font-weight: 600; font-size: .82rem; padding: .3rem .85rem; border-radius: 999px; }
.plan__gift { margin: 0 0 1.1rem; background: rgba(212,175,55,.12); border: 1px dashed var(--gold-500); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .85rem; font-weight: 600; color: var(--navy-900); text-align: center; }
@media (max-width: 940px) { .plan--featured, .plan--featured:hover { transform: none; } }

/* ----------------------------------------------------------- WhatsApp CTAs -- */
.btn--wa { background: #25D366; color: #06351F; }
.btn--wa:hover { background: #20c25c; color: #06351F; transform: translateY(-2px); }
.btn--wa svg { width: 18px; height: 18px; }
.hero__cta .btn--wa { color: #06351F; }
.wa-float {
  position: fixed; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 14px 32px -8px rgba(37,211,102,.65);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37,211,102,.5); animation: waPulse 2.4s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.wa-float:hover { transform: translateY(-3px) scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }

/* ------------------------------------------------------- Membership bonuses -- */
.bonus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 760px) { .bonus-grid { grid-template-columns: 1fr; } }
.bonus-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold-500); border-radius: var(--radius); padding: 1.8rem 1.5rem; text-align: center; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.bonus-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.bonus-card__emoji { font-size: 2.6rem; line-height: 1; }
.bonus-card h3 { font-size: 1.12rem; margin: .8rem 0 .3rem; }
.bonus-card p { font-size: .9rem; }
.bonus-card__worth { display: inline-block; background: rgba(46,139,87,.14); color: #1f6b43; font-weight: 700; font-size: .82rem; padding: .25rem .8rem; border-radius: 999px; margin-top: .9rem; }
.bonus-value { text-align: center; margin-top: 1.8rem; }
.bonus-value strong { display: inline-flex; align-items: center; gap: .5rem; background: linear-gradient(120deg, var(--gold-500), var(--gold-300)); color: var(--navy-900); font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.35rem); padding: .7rem 1.6rem; border-radius: 999px; box-shadow: var(--shadow-gold); }

/* ------------------------------------------------------ Certificates callout -- */
.cert-callout { margin-top: 2.2rem; display: flex; align-items: center; gap: 1.3rem; background: linear-gradient(120deg, var(--navy-800), var(--navy-900)); color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: 1.5rem 1.8rem; }
.cert-callout__icon { width: 60px; height: 60px; flex: none; border-radius: 16px; background: rgba(212,175,55,.14); color: var(--gold-500); display: grid; place-items: center; }
.cert-callout__icon svg { width: 30px; height: 30px; }
.cert-callout h3 { color: #fff; font-size: 1.2rem; margin-bottom: .25rem; }
.cert-callout p { color: var(--on-dark-soft); font-size: .95rem; margin: 0; }
@media (max-width: 560px) { .cert-callout { flex-direction: column; text-align: center; } }

/* ------------------------------------------------- Impact cards (redesign) -- */
.section--navy .stat-cards { gap: clamp(1rem, 2vw, 1.6rem); }
.statc { text-align: center; padding: 2.4rem 1.5rem 2rem; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); position: relative; overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.statc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.statc:hover { transform: translateY(-6px); border-color: var(--gold-500); }
.statc:hover::before { transform: scaleX(1); }
.statc .statc__icon { width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 16px; background: rgba(212,175,55,.13); color: var(--gold-500); display: grid; place-items: center; }
.statc .statc__icon svg { width: 28px; height: 28px; }
.statc b { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 2.4rem); color: #fff; display: block; line-height: 1; }
.statc span { display: block; color: var(--gold-300); font-weight: 600; font-size: .98rem; margin: .5rem 0 .5rem; }
.statc p { font-size: .86rem; color: var(--on-dark-soft); }

/* ------------------------------------------------ Richer review text cards -- */
.tcard__quote { font-size: 1rem; line-height: 1.55; }
.tcard__stars svg { width: 18px; height: 18px; }
.tcard__name { font-size: .98rem; }
.tcard__country { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; font-size: .85rem; font-weight: 600; color: var(--navy-700); }
.tcard__vidmeta .tcard__country { color: #fff; }
.tcard__flag { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; }

/* --------------------------------------- "A sample of one of our classes" --- */
.classes-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
@media (max-width: 760px) { .classes-strip { grid-template-columns: 1fr 1fr; } }
.classes-strip .gtile { aspect-ratio: 16/10; }

/* ===================================================== Blog index ========= */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-500); }
.blog-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--navy-800); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__cat { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700, var(--gold-600)); }
.blog-card__title { font-family: var(--serif); font-size: 1.25rem; color: var(--navy-900); margin: .4rem 0 .5rem; line-height: 1.25; }
.blog-card__excerpt { font-size: .94rem; color: var(--body); flex: 1; }
.blog-card__meta { margin-top: 1rem; font-size: .82rem; color: var(--body-soft); display: flex; gap: .6rem; align-items: center; }
.blog-card__more { margin-top: 1rem; font-weight: 600; font-size: .9rem; color: var(--navy-700); display: inline-flex; align-items: center; gap: .4rem; }
.blog-card__more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.blog-card:hover .blog-card__more svg { transform: translateX(4px); }

/* ===================================================== Blog article ======= */
.post-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-top: 1rem; color: var(--on-dark-soft); font-size: .9rem; align-items: center; }
.post-meta .post-cat { background: rgba(212,175,55,.16); color: var(--gold-300); border: 1px solid var(--line-dark); padding: .2rem .7rem; border-radius: 999px; font-weight: 600; }
.article { max-width: 760px; margin: 0 auto; }
.article > p, .article > ul, .article > ol, .article > blockquote, .article > h2, .article > h3, .article > figure { }
.article p { margin-bottom: 1.15rem; font-size: 1.07rem; line-height: 1.78; color: var(--body); }
.article .article__lead { font-size: 1.22rem; line-height: 1.7; color: var(--ink); margin-bottom: 1.4rem; }
.article h2 { margin: 2.2rem 0 .8rem; font-size: clamp(1.5rem, 2.6vw, 1.95rem); }
.article h3 { margin: 1.6rem 0 .5rem; font-size: 1.25rem; }
.article ul, .article ol { margin: 0 0 1.3rem 1.3rem; display: grid; gap: .55rem; }
.article ul li { list-style: disc; line-height: 1.75; }
.article ol li { list-style: decimal; line-height: 1.75; }
.article li strong, .article p strong { color: var(--navy-900); }
.article a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.article a:hover { color: var(--gold-600); }
.article blockquote { border-left: 3px solid var(--gold-500); padding: .3rem 0 .3rem 1.3rem; margin: 1.6rem 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--navy-900); font-style: italic; }
.article figure { margin: 1.6rem 0; }
.article figure img { width: 100%; border-radius: var(--radius); }
.article figcaption { font-size: .85rem; color: var(--body-soft); margin-top: .5rem; text-align: center; }
.post-cta { margin: 2.4rem 0 0; background: linear-gradient(150deg, var(--navy-800), var(--navy-900)); color: var(--on-dark); border-radius: var(--radius-lg); padding: 1.8rem; text-align: center; }
.post-cta h3 { color: #fff; margin-bottom: .4rem; }
.post-cta p { color: var(--on-dark-soft); margin-bottom: 1.1rem; }
.post-cta .center-actions { margin-top: 0; }
.post-back { display: inline-flex; align-items: center; gap: .4rem; margin-top: 2rem; font-weight: 600; color: var(--navy-700); }
.post-back:hover { color: var(--gold-600); }
.post-back svg { width: 18px; height: 18px; }

/* FAQ accordion */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: .8rem; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.faq__item[open] { border-color: var(--gold-500); box-shadow: var(--shadow-sm); }
.faq__item summary { list-style: none; cursor: pointer; padding: 1.1rem 1.4rem; font-family: var(--serif); font-size: 1.08rem; color: var(--navy-900); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--sans); font-size: 1.6rem; color: var(--gold-600); transition: transform .25s var(--ease); flex: none; line-height: 1; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 1.4rem 1.2rem; color: var(--body); font-size: .98rem; line-height: 1.62; }
.faq__a strong { color: var(--navy-900); }

/* Check-list (about section highlights) */
.check-list { margin: 1.3rem 0 0; display: grid; gap: .6rem; }
.check-list li { display: flex; gap: .65rem; align-items: flex-start; font-weight: 500; color: var(--ink); font-size: .98rem; }
.check-list svg { width: 20px; height: 20px; color: var(--gold-600); flex: none; margin-top: .15rem; }

/* ------------------------------------------------------------------ Utils -- */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.center-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--gold-500); color: var(--navy-900); padding: .7rem 1.2rem; border-radius: 0 0 8px 0; z-index: 999; font-weight: 600; }
.skip-link:focus { left: 0; }

/* Back-to-top button (injected by main.js, shown after scrolling) */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--gold-500); color: var(--navy-900);
  display: grid; place-items: center;
  box-shadow: var(--shadow-gold);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold-600); transform: translateY(-3px); }
.to-top svg { width: 22px; height: 22px; }
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__slide.is-active { animation: none; }
  .tcarousel__track { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* No-JS fallback: show content that JS would reveal */
.no-js .reveal { opacity: 1; transform: none; }