/* ==========================================================================
   ECLIPSE LEARNERS — Website Stylesheet
   Brand system v3.0 · "Master the Test, Eclipse the Rest!"
   --------------------------------------------------------------------------
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Buttons & badges
   06. Cards & feature blocks
   07. Header & navigation
   08. Footer
   09. Home: hero, programs, why, process, stats, testimonials, CTA
   10. Programs page
   11. About page
   12. Contact / form
   13. Animation system
   14. Responsive
   15. Accessibility & print
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS  (lifted verbatim from the brand book)
   ========================================================================== */
:root {
  /* Brand hierarchy — Primary teal canvas, white ink, coral panels */
  --primary:    #025259;  /* Deep Teal — primary canvas  */
  --secondary:  #FFFFFF;  /* White — ink / tertiary      */
  --tertiary:   #FF947A;  /* Soft Coral — secondary/accent */

  /* Surfaces */
  --bg:          #025259;
  --teal-card:   #036068;  /* lifted sub-cards   */
  --teal-deep:   #014650;  /* wells / deep wells */
  --coral-panel: #FF947A;
  --coral-soft:  #FFB79B;
  --coral-deep:  #C75E36;  /* coral-safe accent text  */
  --teal-bright: #5BC4D6;  /* links on teal           */

  /* Borders */
  --border:        rgba(0,0,0,0.10);
  --border-teal:   rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.22);

  /* Foreground on teal */
  --ink-on-teal:      #FFFFFF;
  --ink-on-teal-dim:  rgba(255,255,255,0.74);
  --ink-on-teal-mute: rgba(255,255,255,0.60);

  /* Foreground on coral — teal-deep #014650 (4.9:1 on coral → AA normal),
     not primary #025259 (4.15:1, only AA-large). Brand-compliant and legible. */
  --ink-on-coral:      #014650;
  --ink-on-coral-dim:  #014650;
  --ink-on-coral-mute: rgba(1,70,80,0.70);

  /* Type — Poppins carries everything; Light 300 is the secondary voice */
  --display-font:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --secondary-font:'Poppins', system-ui, sans-serif;  /* Light = secondary   */
  --label-font:    'Poppins', system-ui, sans-serif;

  /* Radius */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.18);
  --shadow:    0 4px 14px rgba(0,0,0,0.22);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.30);

  /* Spacing scale (4/8 rhythm) */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-9: 56px; --space-10: 72px; --space-11: 96px; --space-12: 128px;

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* expressive ease-out */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 600ms;

  /* z-index scale */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 100; --z-overlay: 1000;

  /* ---- NEO-BRUTALIST ACCENT TOKENS (inspired by learnsatmath DNA) ---- */
  /* Hard offset shadows — zero blur, solid offset. The signature "press" look.
     Kept in the brand palette: coral shadow on teal surfaces, teal on coral. */
  --ink: var(--teal-deep);                 /* the "ink" border color          */
  --border-h: 2px;                          /* heavy border width             */
  --shadow-off-sm: 3px 3px 0 0 var(--teal-deep);   /* on teal & light         */
  --shadow-off-md: 5px 5px 0 0 var(--teal-deep);
  --shadow-off-coral: 4px 4px 0 0 var(--primary);  /* teal shadow on coral    */
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body {
  background: var(--bg);
  color: var(--ink-on-teal);
  font-family: var(--display-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-bright); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--teal-bright); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--tertiary); color: var(--primary); }

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }
h2 { letter-spacing: -0.01em; }
.eyebrow {
  font-family: var(--label-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--tertiary);
}
.eyebrow .num { color: var(--ink-on-teal-dim); margin-right: 8px; }

/* Coral-context eyebrow uses teal-deep (CoralDeep fails 1.92:1 on coral) */
.on-coral .eyebrow { color: var(--primary); font-weight: 800; }
.on-coral .eyebrow .num { color: var(--ink-on-coral-mute); }

.display {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
}
.display .em { color: var(--tertiary); }            /* "Eclipse" in coral */
.display .rest { font-weight: 300; }                /* "the Rest" in Light */

h2.section-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.section-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--ink-on-teal-dim);
  font-weight: 400;
  max-width: 56ch;
  margin-top: 14px;
}
.on-coral .section-sub { color: var(--ink-on-coral-dim); }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-on-teal-dim); font-weight: 400; }
.body { font-size: 1rem; color: var(--ink-on-teal-dim); }
.on-coral .body, .on-coral .lead { color: var(--ink-on-coral-dim); }

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: var(--container-narrow); }

main { display: block; }

/* Section wrapper */
.section { padding: var(--space-11) 0; position: relative; }
.section.tight { padding: var(--space-9) 0; }

/* Coral panel — the signature section band */
.panel-coral {
  background: var(--coral-panel);
  color: var(--ink-on-coral);
}
.panel-teal-card { background: var(--teal-card); }
.panel-deep { background: var(--teal-deep); }

/* Block that opts into coral foreground tokens */
.on-coral { color: var(--ink-on-coral); }

.section-head { max-width: 760px; margin-bottom: var(--space-8); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   05. BUTTONS & BADGES  (exact brand-book variants)
   ========================================================================== */
.btn {
  font-family: var(--display-font);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: var(--radius-pill);     /* pill — learnsatmath signature   */
  border: var(--border-h) solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: var(--shadow-off-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn .arr { transition: transform var(--dur-fast) var(--ease-out); }
/* The press: shadow collapses + button shifts into the gap on hover/active */
.btn:hover { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--ink); }
.btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--ink); }
.btn:focus-visible { outline-offset: 4px; }

/* Primary — coral CTA (the action color, pops on teal). Text uses teal-deep
   (#014650, 4.9:1 AA-normal on coral) — primary teal is only AA-large here. */
.btn-primary { background: var(--tertiary); color: var(--teal-deep); }
.btn-primary:hover { background: var(--coral-soft); }

/* Teal solid — used on coral surfaces */
.btn-teal { background: var(--primary); color: #fff; }
.btn-teal:hover { background: var(--teal-card); }

/* Light/white surface */
.btn-light { background: #fff; color: var(--primary); }

/* Coral outline (ghost) */
.btn-ghost {
  background: transparent;
  color: var(--ink-on-teal);
  box-shadow: none;
  border-color: rgba(255,255,255,0.5);
}
.btn-ghost:hover { background: rgba(255,255,255,0.06); transform: none; }
.on-coral .btn-ghost { color: var(--primary); border-color: var(--primary); }
.on-coral .btn-ghost:hover { background: rgba(2,82,89,0.08); }

.btn-lg { padding: 16px 32px; font-size: 1.02rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Badges & tags — pill with hard border */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--label-font);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  border: var(--border-h) solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-teal { background: var(--teal-bright); color: var(--primary); }
.badge-white { background: #fff; color: var(--primary); }
.badge-coral { background: var(--tertiary); color: var(--ink); }
.on-coral .badge-coral { background: var(--primary); color: #fff; box-shadow: 2px 2px 0 0 var(--ink); }
.badge-soon {
  background: var(--bg);
  color: var(--ink-on-teal-mute);
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: none;
}

/* "soon" badge variant on teal background */
.on-teal .badge-soon {
  background: rgba(255,255,255,0.06);
  color: var(--ink-on-teal-mute);
  border-color: rgba(255,255,255,0.3);
}

/* ==========================================================================
   06. CARDS & FEATURE BLOCKS  (neo-brutalist: 2px ink border + offset shadow)
   ========================================================================== */
/* White surface card — used on coral panels */
.card {
  background: #fff;
  border: var(--border-h) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--primary);
  box-shadow: var(--shadow-off-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card:hover { box-shadow: 6px 6px 0 0 var(--ink); }

/* Teal sub-card — used on coral panels too */
.card-teal {
  background: var(--teal-card);
  border: var(--border-h) solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--ink-on-teal);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card-teal:hover { transform: translate(-3px, -3px); border-color: var(--tertiary); }

.card .ic, .card-teal .ic {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.card .ic { background: rgba(2,82,89,0.10); color: var(--primary); }
.card-teal .ic { background: rgba(255,255,255,0.10); color: var(--tertiary); }
.card .ic svg, .card-teal .ic svg { width: 23px; height: 23px; }

.card h3, .card-teal h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.card p, .card-teal p { font-size: 0.92rem; color: var(--ink-on-coral-dim); }
.card-teal p { color: var(--ink-on-teal-dim); }

/* ==========================================================================
   07. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(2,82,89,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-teal);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(1,70,80,0.94);
  border-bottom-color: var(--border-strong);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { height: 40px; width: auto; border-radius: 8px; }
/* Stacked wordmark: ECLIPSE over LEARNERS (brand-book lockup) */
.brand .name {
  font-weight: 800; letter-spacing: 0.5px; line-height: 0.92; color: #fff;
  display: flex; flex-direction: column;
}
.brand .name .wm-top { font-size: 1.16rem; }
.brand .name .wm-bottom {
  font-family: var(--secondary-font); font-weight: 300;
  font-size: 0.78rem; letter-spacing: 3px; color: var(--tertiary);
  text-transform: uppercase; margin-top: 1px;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  color: var(--ink-on-teal-dim);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-links a[aria-current="page"] { color: #fff; }
.nav-links a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; width: 18px; margin: 4px auto 0;
  background: var(--tertiary); border-radius: 2px;
}

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 10px 18px; font-size: 0.88rem; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  align-items: center; justify-content: center;
  color: #fff;
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ==========================================================================
   08. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--teal-deep);
  color: var(--ink-on-teal);
  border-top: 1px solid var(--border-teal);
  padding: var(--space-10) 0 var(--space-7);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-teal);
}
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { color: var(--ink-on-teal-dim); font-size: 0.92rem; max-width: 34ch; }
.footer-tagline {
  color: var(--tertiary); font-weight: 600; font-size: 0.95rem; margin-top: 14px;
}
.footer-col h4 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-on-teal-mute); margin-bottom: 16px;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.footer-col a { color: var(--ink-on-teal-dim); font-size: 0.92rem; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--tertiary); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  padding-top: var(--space-6);
  font-size: 0.82rem; color: var(--ink-on-teal-mute); letter-spacing: 0.5px;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: var(--radius);
  border: 1px solid var(--border-teal);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-on-teal-dim); transition: all var(--dur-fast) var(--ease-out);
}
.footer-social a:hover { color: #fff; border-color: var(--tertiary); background: rgba(255,148,122,0.12); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }

/* ==========================================================================
   09. HOME — HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: clamp(70px, 12vh, 130px) 0 var(--space-11);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-9);
  align-items: center;
}
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.hero h1 .em { color: var(--tertiary); }
.hero h1 .rest { font-weight: 300; }
.hero-sub {
  margin-top: 24px;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ink-on-teal-dim);
  max-width: 52ch;
}
.hero-cta { margin-top: 32px; }
.hero-trust {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: center;
}
.hero-trust .stat { display: flex; flex-direction: column; gap: 2px; }
.hero-trust .stat .n { font-size: 1.5rem; font-weight: 800; color: var(--tertiary); letter-spacing: -0.02em; }
.hero-trust .stat .l { font-size: 0.8rem; color: var(--ink-on-teal-mute); letter-spacing: 0.4px; }
.hero-trust .divider { width: 1px; height: 38px; background: var(--border-teal); }

/* Hero eclipse visual */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}
.eclipse {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1;
}
.eclipse svg { width: 100%; height: 100%; overflow: visible; }

/* Hero decorative sticker shapes — drift + parallax (learnsatmath DNA).
   Coral/teal pops on the teal canvas; hard border + offset shadow. Hidden on
   small screens to avoid clutter (see responsive section). */
.hero-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sticker {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border: var(--border-h) solid var(--ink);
  box-shadow: var(--shadow-off-sm);
  will-change: transform;
  animation: drift 4s ease-in-out infinite;
}
.sticker.s-tile   { width: 56px; height: 56px; border-radius: 14px; }
.sticker.s-circle { border-radius: 50%; }
.sticker.s-circle-sm { width: 30px; height: 30px; }
.sticker svg { width: 60%; height: 60%; }
.sticker .glyph { font-family: var(--secondary-font); font-style: italic; font-weight: 700; font-size: 1.4rem; color: var(--ink); }

/* positions */
.sticker.pos-tl { top: 4%;  left: 0%;  animation-delay: -0.5s; }
.sticker.pos-tr { top: 10%; right: 2%; animation-delay: -1.8s; }
.sticker.pos-ml { top: 46%; left: -4%; animation-delay: -1.1s; }
.sticker.pos-bl { bottom: 10%; left: 6%;  animation-delay: -2.4s; }
.sticker.pos-br { bottom: 6%;  right: 8%; animation-delay: -0.9s; }
.sticker.pos-mr { top: 38%; right: -2%; animation-delay: -1.4s; }

/* colors */
.sticker.bg-coral  { background: var(--tertiary); color: var(--ink); }
.sticker.bg-teal   { background: var(--teal-bright); color: var(--ink); }
.sticker.bg-white  { background: #fff; color: var(--primary); }
.sticker.bg-cream  { background: var(--coral-soft); color: var(--ink); }

/* ==========================================================================
   09b. MARQUEE / promo ticker  (seamless, JS-driven cloning)
   ========================================================================== */
.marquee {
  background: var(--coral-panel);
  color: var(--ink-on-coral);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  border-top: var(--border-h) solid var(--ink);
  border-bottom: var(--border-h) solid var(--ink);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 0 14px;
  white-space: nowrap;
}
/* the star separator between items */
.marquee-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  flex-shrink: 0;
  color: var(--teal-deep);   /* 4.9:1 on coral → AA normal */
  font-size: 1.1rem;
  user-select: none;
}
/* one full set of items must be exactly duplicated by JS for the -50% seam */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   09c. PROGRAMS grid
   ========================================================================== */
.program-card {
  background: var(--teal-card);
  border: var(--border-h) solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--ink-on-teal);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-off-sm);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.program-card:hover { border-color: var(--tertiary); box-shadow: 7px 7px 0 0 var(--ink); }
.program-card .pc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.program-card .pc-tag {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; color: #fff;
}
.program-card .pc-sub { font-family: var(--secondary-font); font-weight: 300; font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-on-teal-mute); }
.program-card p { color: var(--ink-on-teal-dim); font-size: 0.92rem; margin: 6px 0 20px; }
.program-card .pc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.program-card .pc-link { color: #fff; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 7px; }
.program-card .pc-link .arr { color: var(--tertiary); }
.program-card .pc-link .arr { transition: transform var(--dur-fast) var(--ease-out); }
.program-card:hover .pc-link .arr { transform: translateX(4px); }

/* soon / roadmap variant */
.program-card.soon { background: var(--teal-deep); border-style: dashed; border-color: var(--border-teal); }
.program-card.soon .pc-tag { color: var(--ink-on-teal-mute); }

/* big numeric score flourish in card corner */
.pc-score {
  position: absolute; right: -10px; bottom: -22px;
  font-size: 5.5rem; font-weight: 800; color: rgba(255,255,255,0.04);
  letter-spacing: -0.04em; pointer-events: none;
}

/* ==========================================================================
   09d. WHY / feature blocks  (on coral) — neo-brutalist
   ========================================================================== */
.feature {
  background: #fff;
  border: var(--border-h) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 30px;
  color: var(--primary);
  box-shadow: var(--shadow-off-sm);
  height: 100%;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.feature:hover { box-shadow: 7px 7px 0 0 var(--ink); }
.feature .num {
  font-family: var(--label-font); font-size: 0.78rem; font-weight: 800; letter-spacing: 2px;
  color: var(--primary); opacity: 0.55; margin-bottom: 18px; display: block;
}
.feature .ic {
  width: 52px; height: 52px; border-radius: 14px;
  border: var(--border-h) solid var(--ink);
  background: var(--tertiary); color: var(--ink);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  box-shadow: 2px 2px 0 0 var(--ink);
}
.feature .ic svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 10px; color: var(--primary); }
.feature p { font-size: 0.92rem; color: var(--ink-on-coral-dim); }

/* ==========================================================================
   09e. PROCESS / steps
   ========================================================================== */
.steps { counter-reset: step; display: grid; gap: var(--space-5); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-teal);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.step:hover { border-color: var(--tertiary); background: rgba(255,148,122,0.06); }
.step-num {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--tertiary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem; color: var(--tertiary);
  flex-shrink: 0;
}
.step h3 { font-size: 1.12rem; font-weight: 700; margin-bottom: 6px; }
.step p { color: var(--ink-on-teal-dim); font-size: 0.92rem; }

/* ==========================================================================
   09f. STATS band
   ========================================================================== */
.stats-band { background: var(--teal-deep); border-top: 1px solid var(--border-teal); border-bottom: 1px solid var(--border-teal); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.stat-block { text-align: center; padding: var(--space-6) 0; }
.stat-block .n {
  font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; color: var(--tertiary);
  letter-spacing: -0.03em; line-height: 1;
}
.stat-block .n .suffix { font-size: 0.5em; vertical-align: super; }
.stat-block .l { margin-top: 10px; color: var(--ink-on-teal-dim); font-size: 0.92rem; letter-spacing: 0.3px; }

/* ==========================================================================
   09g. TESTIMONIALS
   ========================================================================== */
.quote-card {
  background: #fff; color: var(--primary);
  border: var(--border-h) solid var(--ink);
  border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-off-sm); height: 100%;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.quote-card:hover { box-shadow: 7px 7px 0 0 var(--ink); }
.quote-card .mark { font-size: 2.4rem; font-weight: 800; color: var(--tertiary); line-height: 0.6; height: 22px; }
.quote-card blockquote { font-size: 1rem; line-height: 1.6; color: var(--primary); margin: 0; }
.quote-card .who { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.quote-card .avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--primary); color: #fff;
  border: var(--border-h) solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; flex-shrink: 0;
}
.quote-card .who-meta .name { font-weight: 800; font-size: 0.92rem; color: var(--primary); }
.quote-card .who-meta .score { font-size: 0.8rem; color: var(--primary); font-weight: 700; letter-spacing: 0.3px; }

/* ==========================================================================
   09h. CTA band
   ========================================================================== */
.cta-band {
  background: var(--coral-panel);
  color: var(--ink-on-coral);
  border: var(--border-h) solid var(--ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-off-md);
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band .eyebrow { color: var(--primary); font-weight: 800; }
.cta-band h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0 16px; color: var(--primary); }
.cta-band p { font-size: 1.05rem; color: var(--ink-on-coral-dim); max-width: 52ch; margin: 0 auto 30px; }
.cta-band .btn-row { justify-content: center; }

/* ==========================================================================
   10. PROGRAMS PAGE
   ========================================================================== */
.page-hero { padding: clamp(56px, 9vh, 96px) 0 var(--space-9); }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: -0.03em; line-height: 1; }
.page-hero h1 .em { color: var(--tertiary); }
.page-hero p { margin-top: 22px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-on-teal-dim); max-width: 60ch; }

.program-detail {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-9);
  align-items: center;
  padding: var(--space-10) 0;
}
.program-detail:nth-child(even) .pd-copy { order: 2; }
.program-detail .pd-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.program-detail .pd-eyebrow .tag {
  background: var(--tertiary); color: var(--primary);
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-weight: 800; font-size: 0.85rem; letter-spacing: 0.5px;
}
.program-detail h2 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); margin-bottom: 16px; }
.program-detail .pd-text { color: var(--ink-on-teal-dim); font-size: 1.02rem; margin-bottom: 22px; }
.program-detail .pd-list { list-style: none; padding: 0; display: grid; gap: 12px; margin-bottom: 28px; }
.program-detail .pd-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-on-teal-dim); font-size: 0.96rem; }
.program-detail .pd-list svg { width: 20px; height: 20px; color: var(--tertiary); flex-shrink: 0; margin-top: 2px; }
/* coral-context program detail uses teal-deep ink (not white) for AA contrast */
.on-coral .program-detail .pd-text,
.on-coral .program-detail .pd-list li { color: var(--ink-on-coral-dim); }

.pd-visual {
  background: var(--teal-card);
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-xl);
  padding: 36px;
  color: var(--ink-on-teal);
  box-shadow: var(--shadow);
}
.pd-visual .pd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.pd-visual .pd-stats .k { font-size: 2rem; font-weight: 800; color: var(--tertiary); letter-spacing: -0.02em; }
.pd-visual .pd-stats .v { font-size: 0.82rem; color: var(--ink-on-teal-dim); }
.pd-visual .pd-weeks { display: grid; gap: 10px; }
.pd-visual .pd-week {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--radius);
  background: rgba(255,255,255,0.04);
  font-size: 0.9rem;
}
.pd-visual .pd-week .wk { font-weight: 800; color: var(--tertiary); width: 60px; flex-shrink: 0; }

/* roadmap section */
.roadmap-card {
  background: var(--teal-deep);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 30px;
  text-align: center;
  color: var(--ink-on-teal);
}
.roadmap-card .ic {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,148,122,0.14); color: var(--tertiary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.roadmap-card .ic svg { width: 28px; height: 28px; }
.roadmap-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.roadmap-card p { color: var(--ink-on-teal-dim); font-size: 0.92rem; }

/* ==========================================================================
   11. ABOUT PAGE
   ========================================================================== */
.value-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--ink-on-teal);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.value-card:hover { border-color: var(--tertiary); }
.value-card .ic {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255,148,122,0.14); color: var(--tertiary);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.value-card .ic svg { width: 24px; height: 24px; }
.value-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.value-card p { color: var(--ink-on-teal-dim); font-size: 0.92rem; }

/* mentor grid — bigger cards, photo or initials avatar, score capsules only */
.mentor-card {
  background: var(--teal-card);
  border: var(--border-h) solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  text-align: center;
  color: var(--ink-on-teal);
  box-shadow: var(--shadow-off-sm);
  display: flex; flex-direction: column; align-items: center;
}
.mentor-card .mentor-photo,
.mentor-card .avatar {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 18px;
  object-fit: cover;
  background: var(--teal-deep); color: var(--tertiary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 800;
  border: var(--border-h) solid var(--ink);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.mentor-card h3 { font-size: 1.08rem; margin-bottom: 14px; line-height: 1.2; min-height: 2.6em; display:flex;align-items:center; }
.mentor-card .scores { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.mentor-card .score-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,148,122,0.16); color: var(--tertiary);
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: 0.82rem; font-weight: 700;
  border: 1px solid rgba(255,148,122,0.3);
  width: 100%; justify-content: center;
}
/* on coral sections the card uses white bg + teal text for contrast */
.on-coral .mentor-card { background: #fff; color: var(--primary); border-color: var(--ink); }
.on-coral .mentor-card h3 { color: var(--primary); }
.on-coral .mentor-card .avatar { background: var(--teal-card); }
.on-coral .mentor-card .score-pill { background: rgba(2,82,89,0.08); color: var(--primary); border-color: rgba(2,82,89,0.2); }
/* responsive: 5-across collapses gracefully */
@media (max-width: 1024px) {
  #mentors .grid[style*="repeat(5"] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  #mentors .grid[style*="repeat(5"], #mentors .grid[style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* story split */
.story-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; }
.story-text p { color: var(--ink-on-teal-dim); font-size: 1rem; margin-bottom: 16px; }
.story-visual {
  background: var(--teal-card);
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-xl);
  padding: 40px;
  position: relative;
  overflow: hidden;
}

/* methodology timeline */
.method-timeline { display: grid; gap: 0; position: relative; }
.method-timeline::before {
  content: ""; position: absolute; left: 27px; top: 20px; bottom: 20px; width: 2px;
  background: var(--border-teal);
}
.method-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 24px; padding: 18px 0; align-items: start;
  position: relative;
}
.method-item .dot {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--tertiary);
  display: flex; align-items: center; justify-content: center;
  color: var(--tertiary); z-index: 1; flex-shrink: 0;
}
.method-item .dot svg { width: 24px; height: 24px; }
.method-item h3 { font-size: 1.15rem; margin-bottom: 6px; }
.method-item p { color: var(--ink-on-teal-dim); font-size: 0.92rem; }

/* ==========================================================================
   12. CONTACT / FORM
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-9); align-items: start; }

.form-card {
  background: var(--teal-card);
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px);
  color: var(--ink-on-teal);
  box-shadow: var(--shadow);
}
.form-card h2 { font-size: 1.7rem; margin-bottom: 8px; }
.form-card .form-sub { color: var(--ink-on-teal-dim); font-size: 0.95rem; margin-bottom: 28px; }

.field { margin-bottom: 20px; }
.field label {
  display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.5px;
  color: var(--ink-on-teal-dim); margin-bottom: 8px;
}
.field label .req { color: var(--tertiary); }
.field input, .field textarea, .field select {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--border-teal);
  border-radius: var(--radius);
  color: #fff;
  padding: 13px 15px;
  font-size: 0.96rem;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-on-teal-mute); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--tertiary); background: rgba(255,255,255,0.10);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FF947A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px;
}
.field select option { background: var(--teal-card); color: #fff; }
.field .error { display: none; color: var(--coral-soft); font-size: 0.8rem; margin-top: 6px; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--coral-soft); }
.field.invalid .error { display: block; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-note { font-size: 0.8rem; color: var(--ink-on-teal-mute); margin-top: 18px; text-align: center; }

.form-success {
  display: none; text-align: center; padding: 30px 10px;
}
.form-success.show { display: block; animation: fadeInUp var(--dur) var(--ease-out) both; }
.form-success .check {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px;
  background: rgba(255,148,122,0.16); color: var(--tertiary);
  display: flex; align-items: center; justify-content: center;
}
.form-success .check svg { width: 36px; height: 36px; }
.form-success h3 { font-size: 1.5rem; margin-bottom: 10px; }
.form-success p { color: var(--ink-on-teal-dim); }

/* contact info side */
.contact-info { display: grid; gap: var(--space-5); }
.info-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-teal);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; gap: 16px; align-items: flex-start;
  color: var(--ink-on-teal);
  transition: border-color var(--dur) var(--ease-out);
}
.info-card:hover { border-color: var(--tertiary); }
.info-card .ic {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,148,122,0.14); color: var(--tertiary);
  display: flex; align-items: center; justify-content: center;
}
.info-card .ic svg { width: 22px; height: 22px; }
.info-card .l { font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-on-teal-mute); margin-bottom: 4px; }
.info-card .v { font-size: 1rem; font-weight: 600; color: #fff; }
.info-card .v a { color: #fff; }
.info-card .v a:hover { color: var(--tertiary); }

/* FAQ accordion */
.faq-item {
  border-bottom: 1px solid var(--border-teal);
}
.faq-q {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px;
  font-size: 1.05rem; font-weight: 600; color: #fff;
  transition: color var(--dur-fast);
}
.faq-q:hover { color: var(--tertiary); }
.faq-q .pm { width: 26px; height: 26px; flex-shrink: 0; color: var(--tertiary); transition: transform var(--dur) var(--ease-out); }
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur) var(--ease-out);
}
.faq-a-inner { padding: 0 4px 24px; color: var(--ink-on-teal-dim); font-size: 0.96rem; line-height: 1.65; }

/* ==========================================================================
   13. ANIMATION SYSTEM
   ========================================================================== */
/* Eclipse orbit ring animation */
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-rev { to { transform: rotate(-360deg); } }
@keyframes pulse-ring {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.15; transform: scale(1.06); }
}

/* Hero sticker drift — gentle vertical float + slight rotation (learnsatmath DNA) */
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}

/* scroll-reveal base + variants */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="left"].in, [data-reveal="right"].in, [data-reveal="scale"].in { transform: none; }

/* stagger via inline --i set in JS */
[data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }

/* underline grow on nav (handled by ::after) */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-visual { order: -1; min-height: 360px; }
  .eclipse { width: min(360px, 80%); }
  .program-detail { grid-template-columns: 1fr; gap: var(--space-7); }
  .program-detail:nth-child(even) .pd-copy { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .story-split { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links, .nav-cta .btn:not(.nav-toggle) { display: none; }
  .nav-toggle { display: flex; }

  /* mobile nav drawer */
  .nav-links {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--teal-deep);
    border-bottom: 1px solid var(--border-teal);
    padding: 12px 24px 24px;
    transform: translateY(-120%);
    transition: transform var(--dur) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display: flex; transform: translateY(0); }
  .nav-links a { padding: 15px 8px; border-radius: 0; border-bottom: 1px solid var(--border-teal); font-size: 1rem; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-links .btn { margin-top: 14px; }
}

@media (max-width: 600px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-trust { gap: 20px; }
  .hero-trust .divider { display: none; }
  .hero-shapes { display: none; } /* stickers clutter on small screens */
  .pd-visual .pd-stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  .section { padding: var(--space-9) 0; }
}

@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   15. ACCESSIBILITY & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .sticker { animation: none !important; }
}

/* visible focus for keyboard users on coral too */
.on-coral :focus-visible { outline-color: var(--primary); }

/* skip link */
.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--tertiary); color: var(--primary);
  padding: 10px 18px; border-radius: var(--radius);
  font-weight: 600; z-index: var(--z-overlay);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* print */
@media print {
  .site-header, .site-footer, .nav-toggle, .hero-shapes, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .panel-coral, .cta-band { background: #fff !important; color: #000 !important; border: 1px solid #ccc; }
}

/* ==========================================================================
   16. CURSOR-FOLLOW GLOW + 3D TILT (Aceternity "GlowingEffect", brand-colored)
   Applied to: program-card, feature, quote-card, mentor-card, value-card,
               card, card-teal, info-card. The glow is a crisp ring on the
   border (a lighter shade of the card's outline color) that rotates to track
   the pointer. The 3D tilt is INSTANT (no transition lag) so it feels snappy.
   The glow never blurs over inner text/buttons — it lives only on the border.
   ========================================================================== */
.tilt, .program-card, .feature, .quote-card, .mentor-card, .value-card, .card, .card-teal, .info-card {
  position: relative;
  transform-style: preserve-3d;
  /* NO transition on transform while hovering -> instant cursor tracking.
     A short transition is re-added on leave via JS (.tilt-leaving) for a
     smooth settle back to flat. */
  transition: box-shadow 0.2s var(--ease-out);
  will-change: transform;
}
/* elevation + tilt applied on hover via JS (adds .is-hovering) — instant */
.is-hovering {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateZ(8px) !important;
  box-shadow: 9px 9px 0 0 var(--ink) !important;
}
/* smooth settle-back only when leaving (JS toggles this class briefly) */
.tilt-leaving {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out) !important;
}

/* the glow layer — a crisp ring masked to the border ONLY (lighter shade of
   the outline color). No blur, no spread onto the card surface. */
.program-card::before, .feature::before, .quote-card::before, .mentor-card::before,
.value-card::before, .card::before, .card-teal::before, .info-card::before, .tilt::before {
  content: "";
  position: absolute;
  inset: -2px;                   /* just outside the border */
  border-radius: inherit;
  padding: 2px;                  /* ring thickness */
  /* lighter coral on teal sections (cards have light/white borders there) */
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    var(--coral-soft) 25deg,
    var(--tertiary) 50deg,
    var(--coral-soft) 75deg,
    transparent 100deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  pointer-events: none;
  z-index: 3;                    /* above content so the ring is visible, but
                                    it is masked to the border only — it never
                                    paints over the card surface/text */
}
.is-hovering::before { opacity: 1; }

/* on coral sections the glow is a lighter teal (cards have ink/teal borders) */
.on-coral .program-card::before, .on-coral .feature::before, .on-coral .quote-card::before,
.on-coral .card::before, .on-coral .tilt::before {
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    var(--teal-bright) 25deg,
    var(--primary) 50deg,
    var(--teal-bright) 75deg,
    transparent 100deg
  );
}

/* keep card content above any pseudo layers */
.program-card > *, .feature > *, .quote-card > *, .mentor-card > *,
.value-card > *, .card > *, .card-teal > *, .info-card > *, .tilt > * {
  position: relative; z-index: 2;
}

/* touch / coarse pointers: skip the 3D tilt, keep the glow + elevation */
@media (hover: none) {
  .is-hovering { transform: translateZ(0) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .is-hovering { transform: none !important; }
  .tilt::before, .program-card::before, .feature::before, .quote-card::before,
  .mentor-card::before, .value-card::before, .card::before, .card-teal::before,
  .info-card::before { display: none; }
}

/* ==========================================================================
   17. GHOST BUTTON — interactive wipe-in (Aceternity InteractiveHoverButton)
   Applied ONLY to .btn-ghost. On hover the label slides right & fades while a
   filled panel (coral on teal sections, teal on coral) wipes in from the left
   carrying label + arrow. Solid buttons keep their original press-down only.
   ========================================================================== */
.btn-ghost { position: relative; overflow: hidden; }
.btn-ghost .ih-text {
  display: inline-block;
  position: relative;
  z-index: 2;
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.btn-ghost .ih-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  opacity: 0;
  transform: translateX(-110%);
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
  background: var(--tertiary);
  color: var(--teal-deep);
}
/* on coral sections the ghost wipe is teal */
.on-coral .btn-ghost .ih-panel { background: var(--primary); color: #fff; }
.btn-ghost .ih-panel .ih-text-2 { white-space: nowrap; }
.btn-ghost:hover .ih-text { transform: translateX(140%); opacity: 0; }
.btn-ghost:hover .ih-panel { transform: translateX(0); opacity: 1; }
/* ghost hover no longer changes bg (the wipe panel handles the fill) */
.btn-ghost:hover { background: transparent; transform: none; }

/* ==========================================================================
   18. HERO highlight bar — slanted coral behind the Eclipse wordmark + "the Rest"
   ========================================================================== */
.hl-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  padding: 0.06em 0.26em 0.10em;
  transform: rotate(-1.4deg);
  white-space: nowrap;          /* keep "the Rest" on one line */
}
.hl-mark::before {
  content: "";
  position: absolute;
  left: -2%; right: -2%; top: 10%; bottom: 8%;
  background: var(--tertiary);
  transform: skewX(-8deg);
  z-index: 0;
  border-radius: 4px;
}
.hl-mark > * { position: relative; z-index: 1; }
/* the Eclipse wordmark PNG sized to match the headline */
.wordmark-inline {
  height: 0.82em;
  width: auto;
  vertical-align: baseline;
  display: inline-block;
}
.hl-mark .rest { font-weight: 300; }   /* "the Rest" stays in Poppins Light */

/* ==========================================================================
   19. SAT PROGRAM ROWS (Programs page) — title + coral-tick bullets + image card
   The image card uses the same tilt + border-glow as other cards, but the glow
   is a masked border ring only — it never blurs the image inside.
   ========================================================================== */
.prog-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--border-teal);
}
.prog-row:last-child { border-bottom: none; }
/* alternation is driven by an explicit .row-flip class so it works across
   separate <section> elements (not just within one parent). */
.prog-row.row-flip .prog-copy { order: 2; }
/* the old nth-child rule is kept as a fallback but the explicit class wins */
.prog-row:nth-child(even) .prog-copy { order: 2; }

.prog-copy { max-width: 56ch; }
.prog-copy .active-badge { margin-bottom: 14px; }
.prog-copy h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.1;
}
.prog-copy .prog-desc {
  color: var(--ink-on-teal-dim);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 18px;
}
/* centered variant — for the Free SAT One-Shot Batch (title, image, desc, btn all centered) */
.prog-row.prog-center {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}
.prog-row.prog-center .prog-copy { max-width: 760px; }
.prog-row.prog-center .prog-copy .active-badge { display: none; }   /* no badge for this one */
.prog-row.prog-center .prog-desc { margin-top: 24px; }
.prog-row.prog-center .img-card { max-width: 460px; }
.prog-row.prog-center .btn { margin-top: 8px; }
}
/* coral tick bullet list */
.prog-ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 11px;
}
.prog-ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink-on-teal-dim);
  font-size: 0.96rem;
  line-height: 1.5;
}
.prog-ticks svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--tertiary);          /* coral ticks on teal sections */
}
/* teal ticks on coral sections (IELTS combo sits on the coral band) */
.on-coral .prog-ticks svg { color: var(--primary); }
.on-coral .prog-ticks li { color: var(--ink-on-coral-dim); }
.on-coral .prog-copy .prog-desc { color: var(--ink-on-coral-dim); }
.on-coral .prog-copy h3 { color: var(--primary); }

/* image card — same tilt + border glow as other cards; image sits above the
   (masked, border-only) glow layer so it is never blurred. */
.img-card {
  position: relative;
  border: var(--border-h) solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-off-sm);
  transform-style: preserve-3d;
  transition: box-shadow 0.2s var(--ease-out);
  will-change: transform;
  background: var(--teal-card);
}
.img-card img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;                    /* above the glow ring */
}
/* glow ring — masked to border only, never touches the image */
.img-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    var(--coral-soft) 25deg,
    var(--tertiary) 50deg,
    var(--coral-soft) 75deg,
    transparent 100deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
.img-card.is-hovering::before { opacity: 1; }
/* on coral sections the glow ring uses teal (lighter shade of the ink border) */
.on-coral .img-card::before {
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    var(--teal-bright) 25deg,
    var(--primary) 50deg,
    var(--teal-bright) 75deg,
    transparent 100deg
  );
}
.img-card.is-hovering {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(8px) !important;
  box-shadow: 9px 9px 0 0 var(--ink) !important;
}
.img-card.tilt-leaving {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out) !important;
}
@media (max-width: 1024px) {
  .prog-row { grid-template-columns: 1fr; gap: var(--space-7); }
  .prog-row:nth-child(even) .prog-copy { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .img-card.is-hovering { transform: none !important; }
  .img-card::before { display: none; }
}