/* ============================================================
   A Grade Ahead — Site Styles
   Shared across all pages. Keep design tokens in :root.
   ============================================================ */

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --purple-deep: #2D1A6E;
  --purple-mid: #312783;
  --purple-light: #4A3A9F;
  --green-primary: #7AB648;
  --green-dark: #5E9A2F;
  --green-light: #8EC95E;
  --navy: #1B1547;
  --white: #FFFFFF;
  --off-white: #F8F7F4;
  --warm-grey: #F2F0EB;
  --text-dark: #2C2C2C;
  --text-mid: #5A5A5A;
  --text-light: #8A8A8A;
  --font-heading: 'Roboto Condensed', Arial, sans-serif;
  --font-body: 'Roboto Condensed', Arial, sans-serif;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  line-height: 1.6;
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color 0.2s ease; }

/* Inline links inside content areas only — never nav, footer, or buttons */
.entry-content a,
.welcome__text a,
.text-block__content a,
.split-grid__copy p a,
.cta-card p a,
.grade-detail__intro-text a,
.numbered-steps__body a,
.curriculum-list__item p a,
.camp-list__text a,
.process-card__text a,
.section__subtitle a,
.image-break__quote a {
  color: var(--green-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.entry-content a:hover,
.welcome__text a:hover,
.text-block__content a:hover,
.split-grid__copy p a:hover,
.cta-card p a:hover,
.grade-detail__intro-text a:hover,
.numbered-steps__body a:hover,
.curriculum-list__item p a:hover,
.camp-list__text a:hover,
.process-card__text a:hover,
.section__subtitle a:hover,
.image-break__quote a:hover {
  color: var(--purple-deep);
}
button { cursor: pointer; border: none; font-family: var(--font-body); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Wide-edge container: shared by header + hero so the logo and hero copy
   sit on the same left gutter, instead of indented inside a centered 1200px box. */
.header__main > .container,
.utility-bar > .container,
.hero > .container {
  max-width: none;
  width: 100%;
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.4s ease;
}
.header.scrolled {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 20px rgba(0,0,0,0.08);
}
.header.scrolled .utility-bar {
  max-height: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
}
.header.scrolled .header__nav-link { color: var(--purple-deep); }
.header.scrolled .header__nav-link:hover,
.header.scrolled .header__nav-link.current,
.header.scrolled .current-page-ancestor > .header__nav-link { color: var(--green-dark); }
.header.scrolled .header__nav-link.current::after,
.header.scrolled .current-page-ancestor > .header__nav-link::after { width: 100%; }
.header.scrolled .header__toggle span { background: var(--purple-deep); }

.utility-bar {
  background: var(--purple-deep);
  padding: 6px 0;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.5px;
  max-height: 40px;
  opacity: 1;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}
.utility-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.utility-bar__links {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.utility-bar__links a {
  color: rgba(255,255,255,0.8);
}
.utility-bar__links a:hover { color: var(--white); }
.utility-bar__assessment-btn {
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 40px;
  padding: 3px 16px;
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.utility-bar__assessment-btn:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.1);
}

.header__main {
  padding: 16px 0;
  background: rgba(27, 21, 71, 0.50);
  backdrop-filter: blur(8px);
  transition: all 0.4s ease;
}
.header.scrolled .header__main {
  padding: 10px 0;
  background: transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
}
/* Hamburger toggle — Bootstrap-style: hidden on desktop, visible <900px */
.header__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  padding: 8px;
  cursor: pointer;
  border: 0;
}
.header__toggle span {
  width: 24px;
  height: 2px;
  background: var(--white);
  transition: all 0.4s ease;
  border-radius: 2px;
}
.header__toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.header__toggle.is-open span:nth-child(2) { opacity: 0; }
.header__toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.header__logo-img {
  height: 60px;
  width: auto;
  transition: opacity 0.4s ease;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Default (dark/video bg): show light logo, hide dark logo */
.header__logo-img--dark  { display: none; }
.header__logo-img--light { display: block; }

/* Fallback: if no light logo uploaded, filter the dark logo white */
.header__logo-img--filtered { filter: brightness(0) invert(1); }

/* Scrolled (white bg): show dark logo, hide light logo */
.header.scrolled .header__logo-img--dark  { display: block; }
.header.scrolled .header__logo-img--light { display: none; }

/* Primary nav — single <ul> for all viewports (Bootstrap-style).
   On desktop: horizontal row inline. On mobile (<900px): collapses
   into a slide-down panel under the header bar. */
.header__nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}
.header__nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 32px;
}
.header__nav-item { position: relative; }
.header__nav-link {
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 6px 0;
  position: relative;
  transition: color 0.2s ease;
}
.header__nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--green-primary);
  transition: width 0.25s ease;
}
.header__nav-link:hover,
.header__nav-link.current,
.current-page-ancestor > .header__nav-link { color: var(--green-light); }
.header__nav-link:hover::after,
.header__nav-link.current::after,
.current-page-ancestor > .header__nav-link::after { width: 100%; }

/* CTA item — uses .btn-primary, no underline */
.header__nav-item--cta { margin-left: 8px; }
.header__nav-item--cta a {
  padding: 10px 22px;
  font-size: 0.78rem;
}
.header__nav-item--cta a::after { display: none; }

/* Register Now button — sits outside the nav, after it */
.header__register-btn {
  flex-shrink: 0;
  margin-left: 16px;
  padding: 10px 22px;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ===== NAV DROPDOWN ===== */
.header__nav-chevron {
  display: inline-block;
  width: 10px;
  height: 7px;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.header__nav-item--has-dropdown.is-open > .header__nav-link .header__nav-chevron {
  transform: rotate(180deg);
}
.header__dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 901px) {
  .header__nav-item--has-dropdown:hover .header__nav-chevron,
  .header__nav-item--has-dropdown:focus-within .header__nav-chevron {
    transform: rotate(180deg);
  }
  .header__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 200px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.13);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 500;
  }
  /* Invisible bridge fills the gap so hover doesn't drop while mouse crosses it */
  .header__dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }
  .header__nav-item--has-dropdown:hover > .header__dropdown,
  .header__nav-item--has-dropdown:focus-within > .header__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .header__dropdown-link {
    display: block;
    padding: 10px 20px;
    font-size: 0.88rem;
    color: var(--text-dark);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .header__dropdown-link:hover {
    color: var(--green-dark);
    background: var(--warm-grey);
  }
  .header__dropdown-item:first-child .header__dropdown-link { border-radius: 5px 5px 0 0; }
  .header__dropdown-item:last-child  .header__dropdown-link { border-radius: 0 0 5px 5px; }
}
@media (max-width: 900px) {
  .header__nav-item--has-dropdown > .header__nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
  .header__dropdown {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    background: rgba(0,0,0,0.18);
  }
  .header__nav-item--has-dropdown.is-open > .header__dropdown {
    max-height: 420px;
    opacity: 1;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .header__dropdown-link {
    display: block;
    padding: 11px 24px;
    font-size: 0.9rem;
    color: var(--white);
    text-decoration: none;
    text-align: center;
    transition: color 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .header__dropdown-item:last-child .header__dropdown-link { border-bottom: none; }
  .header__dropdown-link:hover { color: var(--green-light); }
  .header__dropdown-link.current {
    color: var(--green-primary);
    font-weight: 700;
  }
}

/* Active parent link when a child page is current */
.header__nav-item--has-dropdown.current-menu-ancestor > .header__nav-link,
.header__nav-item--has-dropdown.current-menu-parent > .header__nav-link {
  color: var(--green-light);
}
.header__nav-item--has-dropdown.current-menu-ancestor > .header__nav-link::after,
.header__nav-item--has-dropdown.current-menu-parent > .header__nav-link::after {
  width: 100%;
}
.header.scrolled .header__nav-item--has-dropdown.current-menu-ancestor > .header__nav-link,
.header.scrolled .header__nav-item--has-dropdown.current-menu-parent > .header__nav-link {
  color: var(--green-dark);
}

/* Desktop: active dropdown link */
@media (min-width: 901px) {
  .header__dropdown-link.current {
    color: var(--green-dark);
    background: var(--warm-grey);
    font-weight: 700;
  }
}

/* ===== BUTTONS ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-primary);
  color: var(--white);
  padding: 12px 28px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(122, 182, 72, 0.3);
}
.btn-primary .arrow { transition: transform 0.3s; }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--purple-deep);
  padding: 12px 28px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid var(--purple-deep);
  transition: all 0.3s ease;
}
.btn-secondary:hover {
  background: var(--purple-deep);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--purple-deep);
  padding: 14px 32px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.btn-ghost-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  padding: 12px 28px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgba(255,255,255,0.5);
  transition: all 0.3s ease;
}
.btn-ghost-white:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.1);
}

/* ===== HERO (full-viewport video bg) ===== */
.hero {
  position: relative;
  z-index: 0; /* creates stacking context — keeps child z-index values scoped inside hero */
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* Top padding offsets the fixed header overlap (~110px) so the content
     reads as visually centered in the area below the header, not in the raw section. */
  padding: 200px 0 90px;
}

/* Video background container */
#hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#hero-video-bg .hero-fallback-img,
#hero-video-bg .hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none !important;
}

/* Dark overlay on video */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(27, 21, 71, 0.55) 0%,
    rgba(27, 21, 71, 0.40) 40%,
    rgba(27, 21, 71, 0.70) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  animation: fadeInUp 1s ease forwards;
}

.hero__eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-primary);
  margin-bottom: 20px;
}
.hero__title {
  font-family: var(--font-heading);
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.12;
  color: var(--white);
  margin-bottom: 24px;
}
.hero__subtitle {
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
  margin-bottom: 40px;
  max-width: 560px;
  font-weight: 400;
}
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.hero__trust {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__trust-check { color: var(--green-primary); font-weight: 700; }

/* ===== ZIP BAND (find an academy) ===== */
.zip-band {
  background: var(--off-white);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.zip-band::before,
.zip-band::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
}
.zip-band::before {
  top: -180px;
  left: -120px;
  background: radial-gradient(circle, rgba(122,182,72,0.10), transparent 70%);
}
.zip-band::after {
  bottom: -200px;
  right: -120px;
  background: radial-gradient(circle, rgba(45,26,110,0.08), transparent 70%);
}
.zip-band__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.zip-band__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 14px;
}
.zip-band__title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--purple-deep);
  line-height: 1.25;
  margin-bottom: 12px;
}
.zip-band__subtitle {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 32px;
}
.zip-band__form {
  max-width: 540px;
  margin: 0 auto;
}
.zip-band__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
  text-align: left;
}
.zip-band__wrap {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1.5px solid rgba(45,26,110,0.12);
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  box-shadow: 0 10px 30px rgba(45,26,110,0.06);
  transition: all 0.3s ease;
}
.zip-band__wrap:focus-within {
  border-color: var(--green-primary);
  box-shadow: 0 0 0 4px rgba(122,182,72,0.15), 0 10px 30px rgba(45,26,110,0.08);
}
.zip-band__wrap input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 14px 0;
  min-width: 0;
}
.zip-band__wrap input::placeholder { color: var(--text-light); }
.zip-band__wrap button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.zip-band__wrap button:hover {
  background: var(--green-dark);
  transform: rotate(15deg);
  box-shadow: 0 6px 18px rgba(122,182,72,0.4);
}
.zip-band__wrap button svg { width: 20px; height: 20px; }
.zip-band__caption {
  display: block;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-light);
  text-align: left;
  padding-left: 22px;
}

/* ===== SOCIAL PROOF BAR ===== */
.proof-bar {
  background: var(--navy);
  padding: 40px 0;
}
.proof-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.proof-bar__item { position: relative; }
.proof-bar__item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(255,255,255,0.1);
}
.proof-bar__number {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--green-primary);
  line-height: 1;
  margin-bottom: 8px;
}
.proof-bar__label {
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 500;
}

/* ===== SECTION STYLES ===== */
.section { padding: 120px 0; }
.section--grey { background: var(--off-white); }
.section__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-primary);
  margin-bottom: 16px;
}
.section__title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin-bottom: 16px;
  line-height: 1.2;
}
.section__subtitle {
  font-size: 1.1rem;
  color: var(--text-mid);
  max-width: 640px;
  line-height: 1.7;
  font-weight: 400;
}
.section__header {
  text-align: center;
  margin-bottom: 72px;
}
.section__header--flush { margin-bottom: 0; }
.section__header .section__subtitle { margin: 0 auto; }

/* ===== WELCOME ===== */
.welcome { padding: 120px 0; text-align: center; }
.welcome__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.welcome--left { text-align: left; }
.welcome--left .welcome__inner { max-width: none; text-align: left; }
.welcome__title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin-bottom: 24px;
  line-height: 1.3;
}
.welcome__text {
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.8;
  font-weight: 400;
}
.welcome__text p {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0 0 1.2em;
}
.welcome__text p:last-child { margin-bottom: 0; }
.welcome__divider {
  width: 60px;
  height: 2px;
  background: var(--green-primary);
  margin: 40px auto 0;
}

/* ===== IMAGE GALLERY (masonry grid) ===== */
.gallery {
  padding: 0 0 120px;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,21,71,0.8) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gallery__item:hover .gallery__item-overlay { opacity: 1; }
.gallery__item-label {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
}

/* ===== HOW IT WORKS (horizontal journey) ===== */
.steps-journey {
  position: relative;
}
/* Connecting line behind cards */
.steps-journey::before {
  content: '';
  position: absolute;
  top: 140px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(to right, var(--green-primary), var(--purple-light), var(--green-primary));
  opacity: 0.25;
  z-index: 0;
}
.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 1;
}
.step-card {
  text-align: center;
  padding: 0;
  background: transparent;
  position: relative;
}
.step-card__image-wrap {
  width: 200px;
  height: 200px;
  margin: 0 auto 36px;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.step-card:hover .step-card__image-wrap {
  transform: scale(1.05);
}
.step-card__image-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--white);
  box-shadow: 0 12px 40px rgba(45,26,110,0.12);
}
.step-card:hover .step-card__image-circle {
  box-shadow: 0 16px 50px rgba(45,26,110,0.18);
}
.step-card__image-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.step-card:hover .step-card__image-circle img {
  transform: scale(1.1);
}
.step-card__number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 15px rgba(122,182,72,0.4);
  z-index: 2;
  border: 3px solid var(--white);
}
.step-card__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin-bottom: 12px;
}
.step-card__text {
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 400;
  max-width: 320px;
  margin: 0 auto;
}

/* ===== SUBJECTS CARDS ===== */
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.subject-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
}
.subject-card__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.subject-card:hover .subject-card__bg { transform: scale(1.05); }
.subject-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(45,26,110,0.92) 0%, rgba(45,26,110,0.75) 50%, rgba(45,26,110,0.2) 70%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  transition: background 0.3s ease;
}
.subject-card:hover .subject-card__overlay {
  background: linear-gradient(to top, rgba(45,26,110,0.92) 0%, rgba(45,26,110,0.75) 50%, rgba(45,26,110,0.2) 70%, transparent 100%);
}
.subject-card__grade {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-primary);
  margin-bottom: 8px;
}
.subject-card__title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 0;
}
.subject-card__bullets {
  list-style: none;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}
.subject-card:hover .subject-card__bullets { max-height: 200px; opacity: 1; }
.subject-card__bullets li { padding-left: 12px; position: relative; }
.subject-card__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green-primary);
}
.subject-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--green-primary);
  margin-top: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease 0.1s;
}
.subject-card:hover .subject-card__link { opacity: 1; transform: translateY(0); }

/* ===== WHY CHOOSE US (founder-letter style) ===== */
.why-section {
  background: #E8E0F5;
  position: relative;
  overflow: hidden;
  padding: 100px 0 80px;
}
.why-section__frame-top {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, var(--white) 0%, transparent 100%);
  z-index: 2;
}
.why-section__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 3;
  padding: 0 24px;
}
.why-section__title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin-bottom: 8px;
}
.why-section__subtitle {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--purple-mid);
  margin-bottom: 40px;
  font-style: italic;
}
.why-section__text {
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.9;
  font-weight: 400;
  margin-bottom: 24px;
}
.why-section__text-more {
  display: none;
}
.why-section__text-more.visible {
  display: block;
  animation: fadeInUp 0.6s ease forwards;
}
.why-section__divider {
  width: 50px;
  height: 2px;
  background: var(--green-primary);
  margin: 40px auto;
}
.why-section__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 48px 0;
  text-align: left;
}
.why-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.8);
  transition: all 0.3s ease;
}
.why-feature:hover {
  background: rgba(255,255,255,0.95);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(45,26,110,0.08);
}
.why-feature__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.why-feature__content h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin-bottom: 4px;
}
.why-feature__content p {
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.5;
  font-weight: 400;
}
.why-feature__stat {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--green-primary);
  line-height: 1;
  margin-top: 8px;
}

/* ===== FULL-WIDTH IMAGE BREAK (parallax) ===== */
.image-break {
  height: 500px;
  position: relative;
  overflow: hidden;
}
.image-break__img {
  width: 100%;
  height: 160%;
  object-fit: cover;
  position: absolute;
  top: -30%;
  left: 0;
  will-change: transform;
}
.image-break__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45,26,110,0.6), rgba(27,21,71,0.7));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}
.image-break__quote {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  color: var(--white);
  max-width: 700px;
  line-height: 1.4;
  font-style: italic;
}

/* ===== TESTIMONIALS ===== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.testimonial-card {
  padding: 40px 32px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.3s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(45, 26, 110, 0.06);
}
.testimonial-card__quote-mark {
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--green-primary);
  opacity: 0.3;
  line-height: 1;
  margin-bottom: -10px;
}
.testimonial-card__text {
  font-size: 1rem;
  color: var(--text-dark);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 24px;
  font-weight: 400;
}
.testimonial-card__author { display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 600;
  font-size: 0.85rem;
}
.testimonial-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--purple-deep);
}
.testimonial-card__role { font-size: 0.8rem; color: var(--text-light); }
.testimonial-card__tag {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(122,182,72,0.1);
  color: var(--green-dark);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ===== FINAL CTA ===== */
.final-cta {
  background: linear-gradient(135deg, var(--purple-deep) 0%, #1E1252 50%, #150E3A 100%);
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta__bg {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    radial-gradient(circle at 30% 70%, var(--green-primary) 1px, transparent 1px),
    radial-gradient(circle at 70% 30%, var(--green-primary) 1px, transparent 1px);
  background-size: 50px 50px, 70px 70px;
}
.final-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}
.final-cta__title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.2;
}
.final-cta__text {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: 40px;
  font-weight: 400;
}
.final-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.final-cta__reassurance {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

/* ===== FOOTER ===== */
.footer {
  background: var(--navy);
  padding: 80px 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__brand-name {
  margin-bottom: 16px;
}
.footer__brand-name img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
}
.footer__tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
  line-height: 1.6;
}
.footer__contact-line {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
}
.footer__heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 20px;
}
.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__links a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
}
.footer__links a:hover { color: var(--green-primary); }
.footer__bottom {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__copyright {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
}
.footer__socials { display: flex; gap: 16px; }
.footer__socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  transition: all 0.3s;
}
.footer__socials a:hover {
  border-color: var(--green-primary);
  color: var(--green-primary);
  background: rgba(122,182,72,0.1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero__title { font-size: 2.8rem; }
  .subjects-grid { grid-template-columns: repeat(3, 1fr); }
  .steps__grid { gap: 24px; }
  .step-card__image-wrap { width: 160px; height: 160px; }
  .steps-journey::before { top: 110px; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--tall { grid-row: span 1; }
  .header__nav-list { gap: 22px; font-size: 0.85rem; }
}
@media (max-width: 900px) {
  .header__toggle { display: flex; }
  /* Same <ul>, just collapses into a slide-down panel under the header bar */
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--purple-deep);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  }
  .header.nav-open .header__nav { max-height: 80vh; overflow-y: auto; }
  .header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 0;
  }
  .header__nav-item { text-align: center; }
  .header__nav-link {
    display: block;
    padding: 14px 24px;
    font-size: 1rem;
    color: var(--white);
  }
  .header__nav-link::after { display: none; }
  .header.scrolled .header__nav-link { color: var(--white); }
  .header__nav-item--cta { margin: 12px 24px 8px; }
  .header__nav-item--cta a { width: 100%; justify-content: center; }
  .header__register-btn {
    display: none; /* hidden on mobile — shown inside the open nav panel via nav-open state */
  }
  .header.nav-open .header__register-btn {
    display: inline-flex;
    width: calc(100% - 48px);
    margin: 12px 24px 16px;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .section { padding: 80px 0; }
  .section__title { font-size: 2rem; }
  .utility-bar { display: none; }
  .header__logo-img { height: 34px; }
  .hero { min-height: 100vh; align-items: center; padding: 140px 0 60px; }
  .hero__content { padding: 0; }
  .hero__title { font-size: 2.2rem; }
  .hero__subtitle { font-size: 1rem; }
  .hero__ctas { flex-direction: column; align-items: flex-start; }
  .hero__trust { flex-direction: column; gap: 10px; }
  .proof-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .proof-bar__item:nth-child(2)::after { display: none; }
  .proof-bar__number { font-size: 2.2rem; }
  .steps__grid { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto; }
  .steps-journey::before { display: none; }
  .subjects-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .subject-card { aspect-ratio: 4/3; }
  .why-section__title { font-size: 2rem; }
  .why-section__subtitle { font-size: 1.2rem; }
  .why-section__features { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .gallery__grid { grid-template-columns: 1fr; }
  .image-break { height: 350px; }
  .image-break__quote { font-size: 1.4rem; }
  .final-cta { padding: 80px 0; }
  .final-cta__title { font-size: 2rem; }
  .final-cta__buttons { flex-direction: column; align-items: center; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
  .welcome__title { font-size: 1.8rem; }
}
@media (max-width: 480px) {
  .hero__title { font-size: 1.8rem; }
  .proof-bar__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .header__inner { gap: 12px; }
  .step-card__image-wrap { width: 140px; height: 140px; }
}

/* ============================================================
   INNER-PAGE COMPONENTS
   Used on every page except the homepage.
   ============================================================ */

/* ===== PAGE HERO (shorter video-bg hero for inner pages) ===== */
.page-hero {
  position: relative;
  min-height: 55vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 200px 0 100px;
  text-align: center;
}
.page-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__video .hero-fallback-img,
.page-hero__video .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none !important;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(45, 26, 110, 0.88) 0%,
    rgba(49, 39, 131, 0.78) 50%,
    rgba(27, 21, 71, 0.85) 100%
  );
}
.page-hero > .container {
  position: relative;
  z-index: 2;
}
.page-hero__inner {
  max-width: 820px;
  margin: 0 auto;
  animation: fadeInUp 1s ease forwards;
}
.page-hero__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}
.page-hero__breadcrumb a { color: rgba(255,255,255,0.85); }
.page-hero__breadcrumb a:hover { color: var(--green-light); }
.page-hero__breadcrumb-sep { opacity: 0.5; }
.page-hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 18px;
}
.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 22px;
}
.page-hero__title em {
  color: var(--green-light);
  font-style: italic;
  font-weight: 500;
}
.page-hero__subtitle {
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  font-weight: 400;
  max-width: 640px;
  margin: 0 auto;
}

/* Compact variant — solid gradient band, no video, for blog singles */
.page-hero--compact {
  min-height: 0;
  padding: 160px 0 80px;
  background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid) 55%, var(--navy) 100%);
}
.page-hero--compact .page-hero__inner { animation: none; }
.page-hero--compact .page-hero__breadcrumb { margin-top: 40px; }
.page-hero--compact .page-hero__title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
.page-hero--compact .page-hero__subtitle { font-size: 0.9rem; opacity: 0.7; }

/* ===== SPLIT GRID (two-column copy + media) ===== */
.split-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
}
.split-grid--reverse .split-grid__copy { order: 2; }
.split-grid--reverse .split-grid__media { order: 1; }
.split-grid--top { align-items: start; }
.split-grid__copy .section__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green-primary);
  line-height: 1.4;
  margin-bottom: 10px;
}
.split-grid__copy .split-grid__quote {
  font-size: 1.15rem;
  font-style: italic;
  color: var(--purple-deep);
  border-left: 3px solid var(--green-primary);
  padding-left: 18px;
  margin-bottom: 22px;
  line-height: 1.6;
}
.split-grid__copy .split-grid__quote cite {
  display: block;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-top: 10px;
}
.split-grid__caption {
  display: block;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
}
.split-grid__copy h2 {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--purple-deep);
  line-height: 1.2;
  margin-bottom: 22px;
}
.split-grid__copy h2 em {
  color: var(--green-dark);
  font-style: italic;
  font-weight: 500;
}
.split-grid__copy p:not(.section__eyebrow) {
  font-size: 1.02rem;
  color: var(--text-mid);
  line-height: 1.85;
  font-weight: 400;
  margin-bottom: 18px;
}
.split-grid__copy p:not(.section__eyebrow) strong {
  color: var(--purple-deep);
  font-weight: 600;
}
.split-grid__copy a {
  color: var(--green-dark);
  border-bottom: 1px solid rgba(122,182,72,0.4);
  transition: all 0.25s ease;
}
.split-grid__copy a:hover {
  color: var(--purple-deep);
  border-color: var(--purple-deep);
}
.split-grid__copy .btn-primary,
.split-grid__copy .btn-secondary {
  margin-top: 12px;
}
.split-grid__media {
  position: relative;
}
.split-grid__media img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(45,26,110,0.18);
}
.split-grid__media--illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}
.split-grid__media--illustration::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,182,72,0.16), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.split-grid__media--illustration img {
  width: 100%;
  max-width: 440px;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 30px 50px rgba(45,26,110,0.18));
  animation: floatGentle 8s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.split-grid__caption {
  display: block;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
}
@keyframes floatGentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

/* ===== CTA CARD (mid-page action block) ===== */
.cta-card {
  background: linear-gradient(135deg, var(--purple-deep) 0%, #1E1252 50%, var(--purple-mid) 100%);
  border-radius: 28px;
  padding: 64px 56px;
  color: var(--white);
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(45,26,110,0.18);
}
.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 30% 70%, var(--green-primary) 1px, transparent 1px),
    radial-gradient(circle at 70% 30%, var(--green-primary) 1px, transparent 1px);
  background-size: 50px 50px, 70px 70px;
  pointer-events: none;
}
.cta-card__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.cta-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 14px;
}
.cta-card h2 {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 18px;
}
.cta-card h2 em {
  color: var(--green-light);
  font-style: italic;
  font-weight: 500;
}
.cta-card p {
  font-size: 1.02rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
  font-weight: 400;
  margin-bottom: 14px;
}
.cta-card p strong { color: var(--white); font-weight: 500; }
.cta-card p a {
  color: var(--green-light);
  border-bottom: 1px solid rgba(142,201,94,0.4);
  transition: all 0.25s ease;
}
.cta-card p a:hover {
  color: var(--white);
  border-color: var(--white);
}
.cta-card__buttons {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* ===== CONTACT CALLOUT (compact phone/email block) ===== */
.contact-callout {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--white);
  border-radius: 22px;
  padding: 36px 44px;
  border: 1px solid rgba(45,26,110,0.06);
  box-shadow: 0 14px 40px rgba(45,26,110,0.06);
  max-width: 880px;
  margin: 0 auto;
}
.contact-callout__icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 10px 24px rgba(122,182,72,0.3);
}
.contact-callout__icon svg { width: 28px; height: 28px; }
.contact-callout__copy h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin-bottom: 8px;
}
.contact-callout__copy p {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 400;
}
.contact-callout__phone {
  color: var(--purple-deep);
  font-weight: 600;
  border-bottom: 1px solid rgba(45,26,110,0.3);
  transition: all 0.25s ease;
}
.contact-callout__phone:hover {
  color: var(--green-dark);
  border-color: var(--green-dark);
}

/* ===== INNER-PAGE RESPONSIVE ===== */
@media (max-width: 1024px) {
  .split-grid { grid-template-columns: 1fr; gap: 56px; }
  .split-grid--reverse .split-grid__copy { order: 1; }
  .split-grid--reverse .split-grid__media { order: 2; }
  .split-grid__media--illustration { min-height: 320px; }
  .split-grid__media--illustration::before { width: 280px; height: 280px; }
  .cta-card { padding: 48px 40px; }
}
@media (max-width: 768px) {
  .page-hero { padding: 140px 0 70px; min-height: 0; }
  .page-hero__title { font-size: 2rem; }
  .page-hero__subtitle { font-size: 1rem; }
  .split-grid__copy h2 { font-size: 1.8rem; }
  .cta-card { padding: 40px 28px; border-radius: 22px; }
  .cta-card h2 { font-size: 1.6rem; }
  .cta-card__buttons { flex-direction: column; align-items: stretch; }
  .contact-callout { flex-direction: column; text-align: center; padding: 32px 24px; gap: 20px; }
}

/* ============================================================
   TUTORIAL PAGE COMPONENTS
   Used on /online-{math,english,numericals}-tutorials/.
   ============================================================ */

/* ===== TIP LIST (numbered tip cards in a 2-col grid) ===== */
.tip-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
.tip-list__item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px 28px;
  background: var(--white);
  border: 1px solid rgba(45, 26, 110, 0.06);
  border-radius: 16px;
  transition: all 0.3s ease;
}
.tip-list__item:hover {
  border-color: rgba(122, 182, 72, 0.3);
  box-shadow: 0 14px 36px rgba(45, 26, 110, 0.06);
  transform: translateY(-3px);
}
.tip-list__check {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(122,182,72,0.25);
}
.tip-list__check svg { width: 18px; height: 18px; }
.tip-list__item p {
  font-size: 0.96rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 400;
  margin: 0;
}
.tip-list__item p strong {
  color: var(--purple-deep);
  font-weight: 600;
}

/* ===== VIDEO GRID + CARDS ===== */
.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1140px;
  margin: 0 auto;
}
.video-grid--single {
  grid-template-columns: 1fr;
  max-width: 800px;
}
.video-card {
  display: flex;
  flex-direction: column;
}
.video-card__title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.3;
}
.video-card__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(45, 26, 110, 0.15);
  background: var(--purple-deep);
  transition: all 0.4s ease;
}
.video-card__embed:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(45, 26, 110, 0.22);
}
.video-card__embed iframe,
.video-card__embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card__label {
  font-size: 0.9rem;
  color: var(--text-mid);
  margin-bottom: 12px;
  line-height: 1.4;
}
.video-card__meta { margin-top: 12px; }
.video-card__platform {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
}
.video-card__platform--youtube { color: #c00; }
.video-card__platform--vimeo   { color: #1AB7EA; }
.video-card__platform-icon { width: 14px; height: 14px; flex-shrink: 0; }
.video-group { margin-bottom: 60px; }
.video-group:last-child { margin-bottom: 0; }
.video-group__heading {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--purple-mid);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--warm-grey);
  margin-bottom: 24px;
}

/* ===== TUTORIAL RESPONSIVE ===== */
@media (max-width: 768px) {
  .tip-list { grid-template-columns: 1fr; gap: 14px; }
  .tip-list__item { padding: 20px 22px; }
  .video-grid { grid-template-columns: 1fr; gap: 28px; }
  .video-card__title { font-size: 1.2rem; }
}

/* ============================================================
   WP-PREP UTILITY COMPONENTS
   Small classes that replace previously inline style=""
   attributes. Keeps every page free of inline styles so the
   WordPress theme dev can scope cleanly via stylesheet only.
   ============================================================ */

/* Reduced-padding section (used on the "want to speak to someone"
   row in formerly-mathwizard so it sits tighter to the CTA above) */
.section--compact { padding: 60px 0; }
.section--flush-top    { padding-top: 0 !important; }
.section--flush-bottom { padding-bottom: 0 !important; }

/* Centered CTA wrapper that sits below a section's main content
   (replaces several `text-align: center; margin-top: 56px` inlines) */
.section__cta {
  text-align: center;
  margin-top: 56px;
}

/* Author/citation line inside an image-break quote */
.image-break__cite {
  font-size: 0.6em;
  font-style: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 16px;
  display: inline-block;
  font-weight: 400;
}
/* Tighter variant for longer attributions (e.g. founder + role) */
.image-break__cite--tight {
  font-size: 0.55em;
  opacity: 0.7;
  margin-top: 18px;
}

/* ===== GRADE PILLS ===== */
.grade-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.grade-pills__item {
  background: var(--warm-grey);
  color: var(--purple-deep);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid rgba(45, 26, 110, 0.08);
}
.welcome__subheading {
  font-size: 1.15rem;
  color: var(--purple-deep);
  margin: 16px 0 0;
  font-weight: 500;
}

/* ===== NUMBERED STEPS ===== */
.numbered-steps {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}
.numbered-steps__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--white);
  border: 1px solid rgba(45, 26, 110, 0.08);
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: 0 4px 20px rgba(45, 26, 110, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
}
.numbered-steps__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(45, 26, 110, 0.08);
}
.numbered-steps__number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.numbered-steps__body {
  padding-top: 6px;
}
.numbered-steps__title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.numbered-steps__text { margin: 0; }
.numbered-steps__body p {
  margin: 0;
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.7;
}
.numbered-steps__body p + p { margin-top: 12px; }
.numbered-steps__body strong { color: var(--text-dark); font-weight: 600; }
.numbered-steps__body a { color: var(--purple-mid); text-decoration: underline; }
.numbered-steps__body a:hover { color: var(--green-dark); }

/* ===== COMPONENTS LIST ===== */
.components-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
}
.components-list__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
}
.components-list__icon {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(122, 182, 72, 0.25);
}
.components-list__icon svg { width: 44px; height: 44px; }
.components-list__title {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin: 4px 0 12px;
}
.components-list__text,
.components-list__item > div > p {
  margin: 0;
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.7;
}
.components-list__text + .components-list__text,
.components-list__item > div > p + p { margin-top: 10px; }
.components-list__text strong,
.components-list__item > div > p strong { color: var(--text-dark); font-weight: 600; }

/* ===== FAQ ACCORDION ===== */
.faq {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq__item {
  background: var(--white);
  border: 1px solid rgba(45, 26, 110, 0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.faq__item[open] {
  box-shadow: 0 8px 24px rgba(45, 26, 110, 0.08);
  border-color: rgba(122, 182, 72, 0.35);
}
.faq__q {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--purple-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: color 0.2s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { color: var(--green-dark); }
.faq__q::after {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-primary);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.faq__item[open] .faq__q::after { transform: rotate(180deg); }
.faq__a {
  padding: 0 28px 24px;
  color: var(--text-mid);
  line-height: 1.7;
  font-size: 0.98rem;
}
.faq__a p { margin: 0; }
.faq__a p + p { margin-top: 12px; }
.faq__a strong { color: var(--text-dark); font-weight: 600; }

/* Lists inside FAQ answers and general content areas */
.faq__a ol,
.faq__a ul,
.entry-content ol,
.entry-content ul,
.welcome__text ol,
.welcome__text ul,
.grade-detail__intro-text ol,
.grade-detail__intro-text ul,
.numbered-steps__body ol,
.numbered-steps__body ul {
  padding-left: 22px;
  margin: 10px 0 14px;
}
.faq__a ol li,
.faq__a ul li,
.entry-content ol li,
.entry-content ul li,
.welcome__text ol li,
.welcome__text ul li,
.grade-detail__intro-text ol li,
.grade-detail__intro-text ul li,
.numbered-steps__body ol li,
.numbered-steps__body ul li {
  color: var(--text-mid);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 8px;
}
.faq__a ol li:last-child,
.faq__a ul li:last-child,
.entry-content ol li:last-child,
.entry-content ul li:last-child { margin-bottom: 0; }

/* ===== GLOSSARY ===== */
.glossary {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
}
.glossary__item { padding-left: 0; }
.glossary__term {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  padding: 8px 20px;
  border-radius: 999px;
  margin: 0 0 14px;
}
.glossary__def {
  margin: 0;
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.7;
}
.glossary__def + .glossary__def { margin-top: 10px; }
.glossary__def p { margin: 0; }
.glossary__def p + p { margin-top: 10px; }
.glossary__def strong { color: var(--text-dark); font-weight: 600; }
.glossary__def a { color: var(--purple-mid); text-decoration: underline; }
.glossary__def a:hover { color: var(--green-dark); }

/* ===== SCREENS GRID ===== */
.screens-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 40px auto 0;
}
.screens-grid__item {
  background: var(--white);
  border: 1px solid rgba(45, 26, 110, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(45, 26, 110, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.screens-grid__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(45, 26, 110, 0.1);
}
.screens-grid__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== SECTION NOTE ===== */
.section__note {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}

/* ===== RESPONSIVE: new components ===== */
@media (max-width: 768px) {
  .numbered-steps__item {
    grid-template-columns: 48px 1fr;
    gap: 18px;
    padding: 22px 24px;
  }
  .numbered-steps__number {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
  .components-list__item {
    grid-template-columns: 72px 1fr;
    gap: 20px;
  }
  .components-list__icon { width: 72px; height: 72px; }
  .components-list__icon svg { width: 34px; height: 34px; }
  .faq__q { padding: 18px 20px; font-size: 1rem; }
  .faq__a { padding: 0 20px 20px; }
  .screens-grid { grid-template-columns: 1fr; }
  .glossary__term { font-size: 1.1rem; }
}

/* ===== GUTENBERG / PLAIN CONTENT PAGES (privacy, terms, etc.) ===== */
.page-content {
  padding: 60px 0;
}

/* Sensible typography defaults for Gutenberg-authored content */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--purple-deep);
  font-weight: 500;
  line-height: 1.3;
  margin: 1.5em 0 0.5em;
}
.entry-content h1 { font-size: 2rem; }
.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.3rem; }
.entry-content h4 { font-size: 1.1rem; }
.entry-content p {
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 1.2em;
}
.entry-content p:last-child { margin-bottom: 0; }
.entry-content ul,
.entry-content ol {
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}
.entry-content li { margin-bottom: 0.4em; }
.entry-content a { color: var(--purple-mid); text-decoration: underline; }
.entry-content a:hover { color: var(--green-dark); }
.entry-content strong { color: var(--text-dark); font-weight: 700; }
.entry-content hr {
  border: none;
  border-top: 1px solid rgba(45, 26, 110, 0.1);
  margin: 2em 0;
}
.entry-content blockquote {
  border-left: 4px solid var(--green-primary);
  margin: 1.5em 0;
  padding: 0.5em 1.5em;
  color: var(--text-mid);
  font-style: italic;
}

@media (max-width: 768px) {
  .page-content { padding: 40px 0; }
  .entry-content h1 { font-size: 1.6rem; }
  .entry-content h2 { font-size: 1.3rem; }
  .entry-content h3 { font-size: 1.1rem; }
}

/* ===== GROWTH PATH ===== */
.growth-path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
  padding-top: 8px;
}
.growth-path::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, var(--green-primary), var(--green-dark));
  opacity: 0.3;
  z-index: 0;
}
.growth-path__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.growth-path__num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  border: 4px solid var(--white);
  box-shadow: 0 6px 18px rgba(122, 182, 72, 0.3);
}
.growth-path__label {
  background: var(--white);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--purple-deep);
  border: 1px solid rgba(45, 26, 110, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 10px rgba(45, 26, 110, 0.06);
  line-height: 1.3;
}

/* ===== CURRICULUM LIST ===== */
.curriculum-list {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 40px;
  list-style: none;
  padding: 0;
}
.curriculum-list__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
}
.curriculum-list__check {
  width: 24px;
  height: 24px;
  color: var(--green-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.curriculum-list__check svg { width: 100%; height: 100%; }
.curriculum-list__item p {
  margin: 0;
  color: var(--text-dark);
  font-size: 0.98rem;
  line-height: 1.6;
}
.curriculum-list__item p a { color: var(--green-dark); text-decoration: underline; }
.curriculum-list__item p a:hover { color: var(--purple-deep); }

/* ===== SUBJECT CIRCLES ===== */
.subject-circles {
  max-width: 880px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.subject-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s;
}
a.subject-circle:hover { transform: translateY(-4px); }
a.subject-circle:hover .subject-circle__head {
  box-shadow: 0 12px 28px rgba(45, 26, 110, 0.35);
}
a.subject-circle:hover .subject-circle__body {
  box-shadow: 0 10px 26px rgba(45, 26, 110, 0.1);
  border-color: rgba(122, 182, 72, 0.3);
}
.subject-circle__head {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--purple-deep);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px rgba(45, 26, 110, 0.25);
}
.subject-circle__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}
.subject-circle__grade {
  font-size: 0.7rem;
  margin-top: 4px;
  opacity: 0.85;
  letter-spacing: 0.3px;
}
.subject-circle__body {
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(45, 26, 110, 0.08);
  border-radius: 14px;
  padding: 64px 22px 26px;
  margin-top: -54px;
  box-shadow: 0 4px 18px rgba(45, 26, 110, 0.05);
}
.subject-circle__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.subject-circle__list li {
  position: relative;
  padding-left: 16px;
  color: var(--text-dark);
  font-size: 0.92rem;
  line-height: 1.5;
}
.subject-circle__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-primary);
  position: absolute;
  left: 0;
  top: 9px;
}

/* ===== PROGRAM CIRCLES ===== */
.program-circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}
.program-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-mid));
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(45, 26, 110, 0.25);
  transition: transform 0.3s, box-shadow 0.3s;
  text-decoration: none;
}
.program-circle:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(45, 26, 110, 0.35);
}
.program-circle__title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.15;
}
.program-circle__grade {
  font-size: 0.7rem;
  margin-top: 6px;
  opacity: 0.85;
  letter-spacing: 0.3px;
}

/* ===== RESPONSIVE: programs page components ===== */
@media (max-width: 768px) {
  .growth-path { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
  .growth-path::before { display: none; }
  .curriculum-list { grid-template-columns: 1fr; gap: 18px; }
  .text-block__content ul:has(li:nth-child(5)) { grid-template-columns: 1fr; gap: 18px; }
  .program-circle { width: 110px; height: 110px; padding: 10px; }
  .program-circle__title { font-size: 0.95rem; }
}
@media (max-width: 480px) {
  .growth-path { grid-template-columns: 1fr; }
}

/* ===== FORMULA IMAGE ===== */
.formula-image {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.formula-image--large { max-width: 700px; }
.formula-image--medium { max-width: 450px; }
.formula-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ===== GRADE LIST ===== */
.grade-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.grade-list__item { margin: 0; }
.grade-list__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--green-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
  box-shadow: 0 2px 8px rgba(122, 182, 72, 0.2);
}
.grade-list__btn:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(122, 182, 72, 0.35);
}
.grade-list__btn::after {
  content: '›';
  font-size: 1.6rem;
  line-height: 1;
}

/* ===== PROGRAM DETAIL ===== */
.program-detail {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.program-detail__heading {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin: 0 0 28px;
  line-height: 1.3;
}
@media (max-width: 900px) {
  .program-detail { grid-template-columns: 1fr; gap: 40px; }
}

/* ===== FORM CARD ===== */
.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--warm-grey);
  border-radius: 18px;
  padding: 56px 56px 48px;
  box-shadow: 0 8px 28px rgba(45, 26, 110, 0.05);
}
.form-card__header {
  text-align: center;
  margin-bottom: 36px;
}
.form-card__title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--purple-deep);
  line-height: 1.3;
  margin: 0;
}
.form-card__title span { display: block; }
.form-card__description {
  color: var(--text-mid);
  font-size: 0.95rem;
  margin: 12px 0 0;
  line-height: 1.6;
}
.form-card__body {
  margin-top: 8px;
}
.form-card--centered {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== CONTENT BLOCK ===== */
.content-block {
  max-width: 760px;
  margin: 0 auto;
}
.content-block p {
  margin: 0 0 22px;
  color: var(--text-dark);
  font-size: 1.05rem;
  line-height: 1.75;
}
.content-block p:last-child { margin-bottom: 0; }
.content-block p strong { font-weight: 700; color: var(--purple-deep); }
.content-block a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: underline;
}
.content-block a:hover { color: var(--purple-deep); }

/* ===== GRADE NAV ===== */
.grade-nav {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 14px 0;
}
.grade-nav__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.grade-nav__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
}
.grade-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.grade-nav__pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  background: var(--warm-grey);
  color: var(--text-dark);
  border: 1.5px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.grade-nav__pill:hover {
  background: var(--purple-light);
  color: #fff;
}
.grade-nav__pill--active,
.grade-nav__pill.is-active {
  background: var(--purple-deep);
  color: #fff;
  border-color: var(--purple-deep);
}

/* ===== GRADE DETAIL LAYOUT ===== */
.grade-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 960px) {
  .grade-detail-layout { grid-template-columns: 1fr; }
}
.grade-detail-form {
  position: sticky;
  top: 88px;
}
.grade-detail__table {
  margin-top: 48px;
}
.grade-detail__table-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--green-primary);
  margin-bottom: 6px;
}
.grade-detail__table-heading {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin: 0 0 20px;
  line-height: 1.25;
}
.grade-detail__intro {
  max-width: 680px;
}
.grade-detail__intro-heading {
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--purple-deep);
  margin: 0 0 16px;
  line-height: 1.2;
  font-family: var(--font-heading);
}
.grade-detail__intro-text {
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 22px;
}
.grade-detail__objectives {
  max-width: none;
  grid-template-columns: 1fr;
  margin: 0 0 24px;
}
.grade-detail__related {
  font-size: 0.95rem;
  color: var(--text-mid);
  font-style: italic;
  margin: 0;
}
.grade-detail__related a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: underline;
  font-style: italic;
}
.grade-detail__related a:hover { color: var(--purple-deep); }

/* ===== CURRICULUM TABLE ===== */
.curriculum-table-wrap {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.curriculum-table {
  width: 100%;
  border-collapse: collapse;
}
.curriculum-table th {
  background: var(--purple-deep);
  padding: 12px 20px;
  color: var(--off-white);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: left;
  width: 50%;
}
.curriculum-table__month-row { border: none; }
.curriculum-table__month-header {
  background: none;
  color: var(--green-dark);
  padding: 20px 20px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.curriculum-table tbody tr.curriculum-table__month-row:first-child .curriculum-table__month-header {
  border-top: none;
}
.curriculum-table tbody tr:not(.curriculum-table__month-row) {
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: #fff;
}
.curriculum-table td {
  padding: 16px 20px;
  vertical-align: top;
  font-size: 0.95rem;
  line-height: 1.6;
  width: 50%;
}
.curriculum-table__topic {
  font-weight: 600;
  color: var(--purple-deep);
  margin: 0;
}
.curriculum-table__fund {
  font-weight: 700;
  color: var(--green-dark);
  margin: 0 0 5px;
}
.curriculum-table__ex {
  color: var(--text-mid);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.5;
}
.curriculum-table__note {
  font-size: 0.8rem;
  color: var(--text-light);
  font-style: italic;
  margin: 6px 0 0;
}
.curriculum-table--single-col th,
.curriculum-table--single-col td { width: auto; }
@media (max-width: 500px) {
  .curriculum-table td,
  .curriculum-table th { display: block; width: 100%; }
  .curriculum-table thead { display: none; }
  .curriculum-table td { padding: 10px 16px; }
  .curriculum-table td:first-child { padding-bottom: 4px; }
  .curriculum-table td:last-child {
    padding-top: 4px;
    border-top: 1px dashed rgba(0,0,0,0.08);
  }
  .curriculum-table__month-header { display: block; }
}

/* ===== SCIENCE DETAIL LAYOUT ===== */
.science-detail-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) {
  .science-detail-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ===== SCIENCE TABLE ===== */
.science-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-brand);
}
.science-table thead th {
  background: var(--purple-deep);
  color: var(--white);
  padding: 10px 14px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.science-table tbody tr:nth-child(even) { background: var(--warm-grey); }
.science-table__week {
  padding: 12px 8px;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  white-space: nowrap;
  width: 72px;
  vertical-align: middle;
  color: var(--white);
}
.science-table__week--purple { background: var(--purple-mid); }
.science-table__week--green  { background: var(--green-primary); }
.science-table__subject {
  padding: 12px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--purple-mid);
  border-right: 1px solid rgba(0,0,0,0.07);
  width: 138px;
  vertical-align: middle;
}
.science-table__topic {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--text-dark);
  vertical-align: middle;
}
@media (max-width: 560px) {
  .science-table thead { display: none; }
  .science-table tbody tr {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    margin-bottom: 2px;
  }
  .science-table__week {
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .science-table__subject { grid-column: 2; border: none; width: auto; padding-bottom: 4px; }
  .science-table__topic   { grid-column: 2; padding-top: 0; }
}

/* ===== FORM CARD — CENTERED MODIFIER ===== */
.form-card--centered {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== GRADE DETAIL — intro WYSIWYG list styling ===== */
/* Makes <ul> inside grade-detail intro content look like curriculum-list checkmarks */
.grade-detail__intro-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 14px;
}
.grade-detail__intro-content ul li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--text-dark);
  font-size: 0.98rem;
  line-height: 1.6;
}
.grade-detail__intro-content ul li::before {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ab648' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  margin-top: 2px;
  flex-shrink: 0;
}
.grade-detail__intro-content p {
  color: var(--text-dark);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 22px;
}
.grade-detail__intro-content p:last-child { margin-bottom: 0; }

/* ===== CAMP LIST ===== */
.camp-list {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 44px;
}
.camp-list__item {
  padding-left: 20px;
  border-left: 3px solid var(--green-primary);
}
.camp-list__title {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--green-dark);
  font-style: italic;
  margin: 0 0 12px;
  line-height: 1.3;
}
.camp-list__grades {
  color: var(--green-primary);
  font-weight: 600;
  font-style: italic;
  font-size: 1rem;
  margin-left: 8px;
}
.camp-list__text {
  margin: 0;
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.7;
}
.camp-list__text + .camp-list__text { margin-top: 10px; }
.camp-list__text strong { color: var(--text-dark); font-weight: 600; }
.camp-list__title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s, border-bottom-color 0.2s;
}
.camp-list__title-link::after {
  content: ' \2192';
  font-size: 0.8em;
}
.camp-list__title-link:hover {
  color: var(--purple-mid);
  border-bottom-color: var(--purple-mid);
}

/* ===== CAMP SPLIT (intro + purple visual card) ===== */
.camp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.camp-split--reverse { direction: rtl; }
.camp-split--reverse > * { direction: ltr; }
.camp-split__visual {
  position: relative;
  background: linear-gradient(135deg, var(--purple-mid) 0%, var(--purple-deep) 100%);
  border-radius: 20px;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}
.camp-split__visual-img {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 90%;
  object-fit: contain;
  object-position: bottom right;
  pointer-events: none;
}
.camp-split__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  padding: 6px 16px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 10px;
  width: fit-content;
}
.camp-split__copy .section__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-primary);
  margin-bottom: 12px;
}
.camp-split__copy h2 {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--purple-deep);
  line-height: 1.2;
  margin-bottom: 22px;
}
.camp-split__copy p {
  color: var(--text-mid);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.85;
  margin-bottom: 18px;
}
@media (max-width: 900px) {
  .camp-split { grid-template-columns: 1fr; gap: 40px; }
  .camp-split__visual { min-height: 260px; }
  .camp-split__visual-img { height: 75%; }
}

/* ===== CAMP GALLERY (3-image activity photo mosaic) ===== */
.camp-gallery {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 10px;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 48px;
}
.camp-gallery__main {
  grid-row: 1 / 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.camp-gallery__side {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.camp-gallery__side:first-of-type { object-position: center top; }
.camp-gallery__side:last-of-type  { object-position: center bottom; }
@media (max-width: 768px) {
  .camp-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 140px;
  }
  .camp-gallery__main {
    grid-row: auto;
    grid-column: 1 / 3;
  }
}

/* ===== PROCESS GRID (numbered cards — Time Travelers sessions) ===== */
.process-grid {
  max-width: 980px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 32px;
}
.process-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
  background: var(--white);
  border: 1px solid rgba(45, 26, 110, 0.1);
  border-radius: 18px;
  padding: 24px 28px;
  box-shadow: 0 4px 16px rgba(45, 26, 110, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
}
.process-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(45, 26, 110, 0.08);
}
.process-card__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--purple-deep);
  color: var(--white);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.process-card__title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--green-dark);
  margin: 6px 0 8px;
}
.process-card__text {
  margin: 0;
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.6;
}
@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr; }
  .subject-circles { grid-template-columns: 1fr; max-width: 360px; gap: 32px; }
}

/* ===== RESOURCE NOTICE ===== */
.resource-notice {
  background: var(--purple-deep);
  padding: 22px 0;
  text-align: center;
}
.resource-notice__text {
  color: rgba(255,255,255,0.90);
  font-size: 0.98rem;
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto;
}

/* ===== BOOK SHELF ===== */
.book-shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.book-card {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.book-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.12);
}
.book-card__stripe {
  height: 5px;
  background: var(--green-primary);
}
.book-card:nth-child(3n+2) .book-card__stripe { background: var(--purple-mid); }
.book-card:nth-child(3n)   .book-card__stripe { background: var(--green-dark); }
.book-card__cover-wrap {
  padding: 28px 32px 0;
  display: flex;
  justify-content: center;
}
.book-card__cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 3px 8px 8px 3px;
  box-shadow:
    -4px 0 0 0 rgba(0,0,0,0.12),
    4px 8px 20px rgba(0,0,0,0.20),
    1px 2px 4px rgba(0,0,0,0.10);
  display: block;
}
.book-card__body {
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
.book-card__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-light);
}
.book-card__title {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 10px;
}
.book-card__btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--green-primary);
  color: var(--green-primary);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 6px;
  text-decoration: none;
  width: fit-content;
  transition: background 0.2s, color 0.2s;
}
.book-card__btn:hover { background: var(--green-primary); color: var(--white); }
.book-card__btn-icon { width: 11px; height: 11px; flex-shrink: 0; fill: currentColor; }
.book-shelf > .book-card:last-child:nth-child(3n+1) { grid-column: 2; }
@media (max-width: 900px) {
  .book-shelf { grid-template-columns: repeat(2, 1fr); }
  .book-shelf > .book-card:last-child:nth-child(3n+1) { grid-column: auto; }
  .book-shelf > .book-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 340px; margin: 0 auto; width: 100%; }
}
@media (max-width: 520px) {
  .book-shelf { grid-template-columns: 1fr; }
  .book-shelf > .book-card:last-child:nth-child(odd) { max-width: 100%; }
}

/* ===== TEXT BLOCK ===== */
.text-block__inner { max-width: 860px; }
.text-block__inner--center { margin: 0 auto; text-align: center; }
.text-block__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--purple-deep);
  font-weight: 500;
  margin-bottom: 36px;
  line-height: 1.2;
}
.text-block__content { color: var(--text-dark); line-height: 1.8; }
.text-block__content p { margin-bottom: 16px; }
.text-block__content p:last-child { margin-bottom: 0; }
.text-block__content a { color: var(--green-dark); text-decoration: underline; }
.text-block__content strong { color: var(--text-dark); }

/* ul inside text_block → checkmark list */
.text-block__content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.text-block__content ul li {
  padding-left: 38px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%237AB648' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") 0 2px / 24px 24px no-repeat;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-dark);
  text-align: left;
  margin-bottom: 22px;
}
.text-block__content ul li:last-child { margin-bottom: 0; }
.text-block__content ul li p { margin: 0; }
.text-block__content ul li a { display: inline-block; }
/* manual 2-col: add class="list-cols" to <ul> in WYSIWYG text mode */
.text-block__content ul.list-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; margin-bottom: 0; }
.text-block__content ul.list-cols li { margin-bottom: 0; }
/* 5+ items → 2-col grid */
.text-block__content ul:has(li:nth-child(5)) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 40px;
}
.text-block__content ul:has(li:nth-child(5)) li { margin-bottom: 0; }

/* ol keeps standard numbering */
.text-block__content ol { padding-left: 24px; margin-bottom: 16px; }
.text-block__content ol li { margin-bottom: 8px; }

/* ===== COMPARISON BLOCK ===== */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  max-width: 1040px;
  margin: 0 auto;
}
.compare__head {
  text-align: center;
  margin-bottom: 48px;
}
.compare__avatar {
  width: clamp(120px, 14vw, 156px);
  height: clamp(120px, 14vw, 156px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--white);
  box-shadow: 0 0 0 8px var(--white), 0 0 0 10px currentColor;
}
.compare__avatar svg { width: 58%; height: 58%; }
.compare__avatar--them { background: var(--text-light); }
.compare__avatar--us { background: var(--green-primary); }
.compare__label {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
}
.compare__label--them { color: var(--text-light); }
.compare__label--us { color: var(--green-dark); }
.compare__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.compare__item {
  display: flex;
  align-items: center;
  gap: 18px;
}
.compare__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.compare__icon svg { width: 26px; height: 26px; }
.compare__icon--them { background: var(--text-light); }
.compare__icon--us { background: var(--green-primary); }
.compare__text {
  font-weight: 700;
  color: var(--purple-mid);
  line-height: 1.35;
  margin: 0;
}
.compare__col--them .compare__text { color: var(--text-mid); }
@media (max-width: 768px) {
  .compare { grid-template-columns: 1fr; gap: 56px; }
  .compare__head { margin-bottom: 32px; }
}

/* ===== BACK TO TOP ===== */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--purple-mid);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
  z-index: 999;
  cursor: pointer;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--green-primary); }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 768px) {
  .back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
  .back-to-top svg { width: 18px; height: 18px; }
}

/* ===== ACF GOOGLE MAP (interactive map container) ===== */
.acf-map {
  width: 100%;
  height: 480px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(45, 26, 110, 0.18);
}
.acf-map .map-marker { display: none; }
@media (max-width: 720px) { .acf-map { height: 320px; } }

/* Info window popup — all styles are inline in location_directory.php */

/* ===== LOCATIONS MAP (Our Locations page — map placeholder) ===== */
.locations-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple-mid) 0%, var(--purple-deep) 55%, var(--navy) 100%);
  min-height: clamp(300px, 42vw, 460px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  box-shadow: 0 24px 60px rgba(45, 26, 110, 0.22);
}
.locations-map__inner {
  position: relative;
  max-width: 460px;
  color: var(--white);
}
.locations-map__pin {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--green-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 0 0 10px rgba(122, 182, 72, 0.22);
}
.locations-map__pin svg { width: 34px; height: 34px; }
.locations-map__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.locations-map__note {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* ===== LOCATIONS DIRECTORY (Our Locations page — region-grouped list) ===== */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 32px;
}
.locations-group__state {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--purple-deep);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--warm-grey);
}
.locations-group__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.locations-group__item {
  position: relative;
  padding-left: 18px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.locations-group__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-primary);
}
.locations-group__item a { color: var(--text-mid); }
.locations-group__item a:hover { color: var(--green-dark); }
.locations-group__tag {
  color: var(--text-light);
  font-style: italic;
}
@media (max-width: 1100px) { .locations-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .locations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .locations-grid { grid-template-columns: 1fr; } }

/* ===== TESTIMONIAL SLIDER ===== */
.testimonial-slider {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 56px;
}
.testimonial-slider__track {
  position: relative;
  min-height: 320px;
}
.testimonial-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.testimonial-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
}
.testimonial-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(45, 26, 110, 0.1);
  color: var(--purple-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  font-family: var(--font-body);
  z-index: 2;
  box-shadow: 0 4px 14px rgba(45, 26, 110, 0.08);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.testimonial-slider__btn:hover {
  background: var(--green-primary);
  color: var(--white);
  border-color: var(--green-primary);
}
.testimonial-slider__btn--prev { left: 0; }
.testimonial-slider__btn--next { right: 0; }
@media (max-width: 600px) {
  .testimonial-slider { padding: 0 16px; }
  .testimonial-slider__btn { width: 36px; height: 36px; font-size: 1.2rem; }
  .testimonial-slider__btn--prev { left: -8px; }
  .testimonial-slider__btn--next { right: -8px; }
  .testimonial-slider__track { min-height: 380px; }
}
.testimonial-speech { max-width: 760px; margin: 0 auto; position: relative; padding: 60px 40px; }
.testimonial-speech__bubble {
  position: relative;
  background: var(--white);
  border-radius: 28px;
  padding: 56px 48px 48px;
  box-shadow: 0 10px 40px rgba(45, 26, 110, 0.08);
}
.testimonial-speech__bubble::after {
  content: '';
  position: absolute;
  bottom: -22px;
  right: 80px;
  width: 32px;
  height: 32px;
  background: var(--white);
  transform: rotate(45deg);
  box-shadow: 4px 4px 12px rgba(45, 26, 110, 0.04);
}
.testimonial-speech__mark {
  position: absolute;
  color: var(--purple-deep);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4.5rem;
  line-height: 1;
  font-weight: 700;
}
.testimonial-speech__mark--open  { top: 16px;  left: 36px; }
.testimonial-speech__mark--close { bottom: -8px; right: 36px; }
.testimonial-speech__text {
  margin: 0 0 20px;
  color: var(--purple-deep);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
}
.testimonial-speech__author {
  text-align: center;
  font-style: italic;
  color: var(--purple-deep);
  font-size: 0.95rem;
}
@media (max-width: 600px) {
  .testimonial-speech { padding: 40px 12px; }
  .testimonial-speech__bubble { padding: 44px 28px 36px; }
  .testimonial-speech__mark { font-size: 3.5rem; }
}

/* ===== TEAM GRID ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 72px 30px;
  align-items: start;
  margin-top: 72px;
}
.team-card {
  position: relative;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 16px;
  padding: 64px 26px 22px;
  text-align: center;
  background: var(--white);
}
.team-card__avatar {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--white);
  box-shadow: 0 8px 24px rgba(45,26,110,0.18);
  background: linear-gradient(135deg, var(--purple-light), var(--purple-deep));
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-card__initials { font-weight: 700; color: var(--white); font-size: 1.5rem; letter-spacing: 1px; }
.team-card__name { font-weight: 700; font-size: 1.2rem; color: var(--green-dark); margin-bottom: 4px; }
.team-card__role { font-style: italic; color: var(--text-mid); font-size: 0.92rem; }
.team-card__details { display: flex; flex-direction: column-reverse; }
.team-card__summary { list-style: none; display: flex; justify-content: center; cursor: pointer; margin-top: 16px; }
.team-card__summary::-webkit-details-marker { display: none; }
.team-card__chevron {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
  transition: transform 0.3s ease;
}
.team-card__chevron svg { width: 22px; height: 22px; }
.team-card__details[open] .team-card__chevron { transform: rotate(180deg); }
.team-card__body { text-align: left; padding-top: 18px; border-top: 1px solid var(--warm-grey); margin-top: 16px; }
.team-card__body p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.65; margin-bottom: 12px; }
.team-card__body p:last-child { margin-bottom: 0; }
.team-card__body strong { color: var(--purple-deep); }
.team-card__details::details-content { height: 0; overflow: hidden; transition: height 0.35s ease, content-visibility 0.35s; transition-behavior: allow-discrete; }
.team-card__details[open]::details-content { height: auto; }
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 24px; } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* ===== BLOG ARCHIVE (home.php / archive.php) ===== */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}
.blog-main__heading {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--purple-deep);
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--warm-grey);
}
.post-list { display: flex; flex-direction: column; gap: 44px; }
.blog-main__empty { color: var(--grey-mid); font-size: 1rem; padding: 40px 0; }
.post-card__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.25;
  margin-bottom: 16px;
}
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--purple-mid); }
.post-card__body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  align-items: start;
}
.post-card__thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}
.post-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple-mid, #7b4fa6) 100%);
  border-radius: 10px;
}
.post-card__thumb--placeholder svg {
  width: 60%;
  height: auto;
}
.post-card__meta {
  font-weight: 700;
  color: var(--purple-deep);
  font-size: 0.85rem;
  margin-bottom: 10px;
}
.post-card__excerpt {
  color: var(--text-mid);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.post-card__more {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--green-dark);
  border-bottom: 1px solid rgba(122,182,72,0.4);
}
.post-card__more:hover { color: var(--purple-mid); border-color: var(--purple-mid); }
@media (max-width: 560px) { .post-card__body { grid-template-columns: 1fr; } }
.blog-sidebar { display: flex; flex-direction: column; gap: 40px; }
.widget__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--purple-deep);
  margin-bottom: 18px;
}
.widget__search { display: flex; }
.widget__search input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid rgba(0,0,0,0.15);
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.widget__search button {
  width: 46px;
  background: var(--purple-mid);
  color: var(--white);
  border: none;
  border-radius: 0 6px 6px 0;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget__search button:hover { background: var(--green-primary); }
.widget__cats { list-style: none; }
.widget__cat { border-bottom: 1px solid var(--warm-grey); }
.widget__cat a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--text-mid);
  font-size: 0.95rem;
}
.widget__cat a:hover { color: var(--green-dark); }
.widget__cat-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background: var(--green-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget__cat-icon svg { width: 10px; height: 10px; }
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
}
.pagination a, .pagination span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--purple-mid);
  padding: 0 6px;
}
.pagination a:hover { background: var(--warm-grey); }
.pagination .is-current { background: var(--purple-mid); color: var(--white); }
.pagination .pagination__dots { color: var(--text-light); min-width: auto; }
.pagination__next { color: var(--green-dark) !important; padding: 0 16px; }
@media (max-width: 900px) { .blog-layout { grid-template-columns: 1fr; gap: 48px; } }

/* ===== FORM FIELDS (shared — used by comment form, gravity forms, etc.) ===== */
.form-field { margin-bottom: 22px; }
.form-field__label {
  display: block;
  font-size: 0.95rem;
  color: var(--text-dark);
  margin-bottom: 7px;
  font-weight: 600;
}
.form-field__label .req { color: var(--green-dark); margin-left: 2px; }
.form-field__control {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.form-field__control:focus {
  outline: none;
  border-color: var(--green-primary);
  box-shadow: 0 0 0 3px rgba(122,182,72,0.15);
}
.form-field__control::placeholder { color: var(--text-light); }
textarea.form-field__control { min-height: 140px; resize: vertical; }
.form-submit { margin-top: 8px; }

/* ===== BLOG SINGLE (single.php) ===== */
.post-content { color: var(--text-mid); }
.post-content > p { font-size: 1rem; line-height: 1.8; margin-bottom: 20px; }
.post-content a { color: var(--green-dark); border-bottom: 1px solid rgba(122,182,72,0.4); }
.post-content a:hover { color: var(--purple-mid); border-color: var(--purple-mid); }
.post-content h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 36px 0 14px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--warm-grey);
}
.post-content h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--purple-deep);
  margin: 28px 0 12px;
}
.post-content ol,
.post-content ul { margin: 0 0 20px 22px; line-height: 1.7; }
.post-content li { margin-bottom: 10px; }
.post-content img { border-radius: 12px; box-shadow: 0 16px 40px rgba(45,26,110,0.14); }
.post-content .alignright { float: right; max-width: 45%; margin: 6px 0 20px 28px; }
.post-content .alignleft  { float: left;  max-width: 45%; margin: 6px 28px 20px 0; }
.post-content .aligncenter { margin: 24px auto; display: block; }
.post-content__btn { text-align: center; margin: 32px 0; clear: both; }
.post-content__fill {
  list-style: none;
  margin: 0 auto 24px;
  max-width: 420px;
  columns: 2;
  clear: both;
}
.post-content__fill li { margin-bottom: 10px; color: var(--text-dark); }
.post-single__footer { clear: both; margin-top: 40px; }
.post-single__author { font-size: 0.95rem; color: var(--text-mid); margin-bottom: 18px; }
.post-single__author strong { color: var(--purple-deep); }
.post-tags {
  font-size: 0.9rem;
  color: var(--text-mid);
  padding-top: 18px;
  border-top: 1px solid var(--warm-grey);
}
.post-tags strong { color: var(--purple-deep); }
.post-tags a { color: var(--green-dark); border-bottom: 1px solid rgba(122,182,72,0.4); }
.post-tags a:hover { color: var(--purple-mid); border-color: var(--purple-mid); }
/* Prev / Next post navigation */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--warm-grey);
}
.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1.5px solid var(--warm-grey);
  border-radius: 12px;
  transition: all 0.25s ease;
  text-decoration: none;
}
.post-nav__link:hover {
  border-color: var(--green-primary);
  box-shadow: 0 12px 30px rgba(45,26,110,0.08);
  transform: translateY(-2px);
}
.post-nav__link--next { text-align: right; }
.post-nav__dir {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--green-dark);
}
.post-nav__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple-deep);
  line-height: 1.3;
  font-size: 1.02rem;
}
.post-nav__link:hover .post-nav__title { color: var(--green-dark); }
@media (max-width: 560px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__link--next { text-align: left; }
}

/* ===== COMMENTS ===== */
.comments { margin-top: 64px; padding-top: 48px; border-top: 2px solid var(--warm-grey); }
.comments__title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--purple-deep);
  margin-bottom: 32px;
}
.comments__note { font-size: 0.9rem; color: var(--text-light); margin-bottom: 24px; }
.comments__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-mid);
  margin-bottom: 24px;
}
.comments__consent input { margin-top: 4px; flex-shrink: 0; }

/* Comment list */
.comment-list { list-style: none; margin: 0 0 44px; padding: 0; }
.comment-list .children { list-style: none; padding: 0; }
.comment { margin-bottom: 26px; }
.comment:last-child { margin-bottom: 0; }

/* Comment card */
.comment__body { display: flex; gap: 16px; }
.comment__avatar {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  border: 2px solid var(--warm-grey);
  object-fit: cover;
}
.comment__content {
  flex: 1;
  min-width: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--warm-grey);
}
.comment__meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.comment__author { font-family: var(--font-heading); font-weight: 700; color: var(--purple-deep); }
.comment__says { color: var(--text-light); font-size: 0.9rem; }
.comment__date {
  display: block;
  font-size: 0.82rem;
  color: var(--text-light);
  text-decoration: none;
  margin: 3px 0 12px;
}
.comment__date:hover { color: var(--green-dark); }
.comment__text { color: var(--text-mid); line-height: 1.75; font-size: 0.97rem; }
.comment__text p { margin-bottom: 12px; }
.comment__text p:last-child { margin-bottom: 0; }
.comment__moderation { font-size: 0.85rem; color: var(--text-light); font-style: italic; margin: 6px 0; }

/* Reply link */
.comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--green-dark);
  text-decoration: none;
  padding: 5px 12px 5px 10px;
  border: 1.5px solid var(--green-dark);
  border-radius: 4px;
  transition: all 0.2s ease;
}
.comment-reply-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.comment-reply-link:hover { background: var(--green-primary); border-color: var(--green-primary); color: #fff; }

/* Nested replies */
.comment-list .children {
  margin: 20px 0 0;
  padding-left: 32px;
  border-left: 3px solid var(--green-primary);
}

/* Comments pagination */
.comments-pagination { margin-top: 32px; display: flex; gap: 8px; flex-wrap: wrap; }
.comments-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1.5px solid #ddd; border-radius: 6px;
  font-size: 0.9rem; color: var(--purple-deep); text-decoration: none; transition: all 0.2s;
}
.comments-pagination .page-numbers.current,
.comments-pagination .page-numbers:hover { background: var(--purple-deep); border-color: var(--purple-deep); color: #fff; }

/* Comment form area */
#respond { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--warm-grey); }
#respond .comments__title { margin-bottom: 6px; }

/* Cancel reply link */
#cancel-comment-reply-link {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  text-decoration: none;
  padding: 3px 10px;
  border: 1.5px solid #ccc;
  border-radius: 4px;
  vertical-align: middle;
  transition: all 0.2s ease;
}
#cancel-comment-reply-link:hover {
  color: #fff;
  background: var(--text-mid);
  border-color: var(--text-mid);
}

@media (max-width: 560px) {
  .comment__avatar { width: 40px; height: 40px; min-width: 40px; }
  .comment-list .children { padding-left: 18px; }
}

/* ===== ACADEMY HEADER (location single — map + contact card) ===== */
.academy-header {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 1fr auto;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(45,26,110,0.10);
}
.academy-header__map {
  grid-row: 1 / 3;
  background: linear-gradient(135deg, var(--purple-mid) 0%, var(--purple-deep) 60%, var(--navy) 100%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 20px;
  min-height: 300px;
}
.academy-header__map--acf {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.academy-header__acf-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.academy-header__map--image {
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}
.academy-header__map--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.academy-header__map-pin {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 0 0 8px rgba(122,182,72,0.22);
}
.academy-header__map-pin svg { width: 28px; height: 28px; }
.academy-header__map-label { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.academy-header__map-note { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 4px; }
.academy-header__body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.academy-header__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
}
.academy-header__contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.academy-header__contact li { display: flex; align-items: center; gap: 12px; }
.academy-header__contact .academy-header__contact-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: var(--green-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.academy-header__contact-icon svg { width: 18px; height: 18px; }
.academy-header__contact a, .academy-header__contact span { font-weight: 700; color: var(--purple-mid); }
.academy-header__contact a:hover { color: var(--green-dark); }
.academy-header__socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.academy-header__socials-label {
  font-weight: 700;
  color: var(--purple-deep);
  font-size: 0.9rem;
  margin-right: 6px;
}
.academy-header__social {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.academy-header__social:hover { background: var(--purple-mid); transform: translateY(-2px); }
.academy-header__social svg { width: 18px; height: 18px; }
.academy-header__col + .academy-header__col {
  padding-left: 28px;
  border-left: 1px solid rgba(0,0,0,0.08);
}
.academy-header__label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 16px;
}
.academy-header__address {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.academy-header__hours { font-size: 0.9rem; }
.academy-header__hours dt { font-weight: 700; color: var(--text-dark); margin-top: 10px; }
.academy-header__hours dd { color: var(--text-mid); }
.academy-header__hours--empty { color: var(--text-light); }
.academy-header__hours-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.academy-header__hours-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; color: var(--text-mid); line-height: 1.5; }
.academy-header__hours-list li.is-closed { opacity: 0.55; }
.academy-header__hours-day { font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.academy-header__hours-time { text-align: right; }
.academy-header__city { font-size: 0.85rem; color: var(--text-light); }
.academy-header__na { color: var(--text-light); }

/* Contact Us trigger button */
.academy-contact-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 11px 20px;
  background: var(--purple-deep);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  line-height: 1;
}
.academy-contact-trigger svg { width: 14px; height: 14px; flex-shrink: 0; }
.academy-contact-trigger:hover { background: var(--purple-light); transform: translateY(-1px); }

/* Academy contact modal */
.academy-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.academy-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.academy-modal[hidden] { display: none; }
.academy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}
.academy-modal__box {
  position: relative;
  background: #fff;
  border-radius: 10px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.academy-modal.is-open .academy-modal__box {
  transform: translateY(0) scale(1);
}
.academy-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.academy-modal__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--purple-deep);
  margin: 0;
  line-height: 1.3;
}
.academy-modal__close {
  width: 32px; height: 32px; min-width: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--warm-grey);
  border: none;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.2s;
}
.academy-modal__close:hover { background: #ddd; color: var(--text-dark); }
body.academy-modal-open { overflow: hidden; }
.academy-header__zip {
  grid-column: 2;
  background: var(--warm-grey);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 40px;
}
.academy-header__zip-label { font-weight: 700; color: var(--purple-deep); }
.academy-header__zip-form { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.academy-header__zip-form input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.academy-header__zip-form button {
  width: 44px;
  border-radius: 999px;
  background: var(--green-primary);
  color: var(--white);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.academy-header__zip-form button:hover { background: var(--green-dark); }
@media (max-width: 860px) {
  .academy-header { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .academy-header__map { grid-row: auto; min-height: 220px; }
  .academy-header__cols { grid-template-columns: 1fr; gap: 22px; }
  .academy-header__col + .academy-header__col { padding-left: 0; border-left: none; }
  .academy-header__zip { grid-column: 1; padding: 18px 24px; }
}

/* ===== PILLARS (centered 3-up icon + title + text) ===== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.pillars__icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-light), var(--purple-deep));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillars__icon svg { width: 36px; height: 36px; }
.pillars__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.pillars__text { color: var(--text-mid); line-height: 1.6; max-width: 300px; margin: 0 auto; }
@media (max-width: 700px) { .pillars { grid-template-columns: 1fr; gap: 32px; } }

/* ===== SR-ONLY ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ===== TIMELINE (founding-story milestones) ===== */
.timeline {
  position: relative;
  max-width: 720px;
  margin: 48px auto 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--warm-grey);
}
.timeline__lead {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.3rem;
  font-style: italic;
  color: var(--purple-deep);
  line-height: 1.5;
}
.timeline__item {
  position: relative;
  padding: 0 0 40px 44px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-primary);
  box-shadow: 0 0 0 4px rgba(122, 182, 72, 0.2);
}
.timeline__year {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.timeline__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--purple-deep);
  margin-bottom: 10px;
  line-height: 1.25;
}
.timeline__text {
  color: var(--text-mid);
  line-height: 1.8;
  font-size: 1rem;
}
.timeline__close {
  text-align: center;
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--warm-grey);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--purple-deep);
  line-height: 1.7;
}


/* ===== ZIP SEARCH MODAL ===== */
.zip-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.zip-modal.is-open { opacity: 1; visibility: visible; }
.zip-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}
.zip-modal__box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zip-modal.is-open .zip-modal__box { transform: translateY(0) scale(1); }

.zip-modal__state { display: none; }
.zip-modal__state.is-active { display: block; }

.zip-modal__spinner {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  animation: zip-spin 0.8s linear infinite;
}
@keyframes zip-spin { to { transform: rotate(360deg); } }

.zip-modal__icon { margin-bottom: 16px; }
.zip-modal__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--purple-deep);
  margin-bottom: 10px;
}
.zip-modal__text {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 24px;
}
.zip-modal__cta { display: inline-block; }
.zip-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.zip-modal__close:hover { color: var(--text-dark); background: rgba(0,0,0,0.06); }
/* Lock cursor on backdrop while loading so it doesn't look clickable */
.zip-modal--loading .zip-modal__backdrop { cursor: not-allowed; }

/* Error state on ZIP inputs */
.js-zip-form [name="zipcode"].is-error,
.js-zip-form [name="zipcode"].is-error:focus {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229,62,62,.15);
}
.zip-band__error,
.final-cta__zip-error {
  font-size: 0.82rem;
  color: #e53e3e;
  margin-top: 8px;
  display: none;
}
.js-zip-form [name="zipcode"].is-error ~ .zip-band__error,
.js-zip-form [name="zipcode"].is-error ~ * .zip-band__error,
.final-cta__zip-form [name="zipcode"].is-error ~ .final-cta__zip-error { display: block; }

/* Final CTA ZIP form variant */
.final-cta__zip-form { margin-top: 8px; }
.final-cta__zip-wrap {
  display: flex;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.final-cta__zip-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 20px;
  font-size: 1rem;
  color: #fff;
  font-family: var(--font-body);
}
.final-cta__zip-wrap input::placeholder { color: rgba(255,255,255,0.65); }
.final-cta__zip-wrap button {
  flex-shrink: 0;
  background: var(--green-primary);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease;
  border-radius: 0 999px 999px 0;
}
.final-cta__zip-wrap button svg { width: 16px; height: 16px; }
.final-cta__zip-wrap button:hover { background: var(--green-dark); }
.final-cta__zip-error { color: rgba(255,255,255,0.85); }

/* ==========================================================================
   Grade Curriculum — new layouts (curriculum_grade_selector + grade_subjects_tabbed)
   ========================================================================== */

/* Grade nav centred variant (curriculum overview hub) */
.grade-nav--center .grade-nav__inner { justify-content: center; }

/* Subject tab nav + panels */
.subject-tabs { scroll-margin-top: 96px; }
.subject-tabs__nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.subject-tabs__tab {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 40px;
  border-radius: 999px;
  background: var(--white);
  color: var(--purple-mid);
  border: 1px solid rgba(45,26,110,0.15);
  cursor: pointer;
  transition: all 0.25s ease;
}
.subject-tabs__tab:hover { border-color: var(--green-primary); color: var(--green-dark); }
.subject-tabs__tab.is-active {
  background: var(--purple-mid);
  color: var(--white);
  border-color: var(--purple-mid);
}
.grade-list__grades { font-weight: 400; font-size: 0.88em; opacity: 0.82; margin-left: 6px; }
.subject-tabs__panel { display: none; }
.subject-tabs__panel.is-active { display: block; animation: fadeInUp 0.5s ease; }

/* Grade cards grid (curriculum overview subject-card links) */
.grade-cards {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.grade-cards--center {
  grid-template-columns: repeat(auto-fit, minmax(240px, 273px));
  justify-content: center;
}
.grade-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px;
  border: 1px solid rgba(45,26,110,0.12);
  border-radius: 16px;
  background: var(--white);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.grade-card:hover {
  transform: translateY(-3px);
  border-color: var(--green-primary);
  box-shadow: 0 16px 40px rgba(45,26,110,0.10);
}
.grade-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--purple-deep);
  line-height: 1.2;
}
.grade-card:hover .grade-card__title { color: var(--green-dark); }
.grade-card__meta { font-size: 0.88rem; color: var(--text-mid); margin-top: 6px; }
.grade-card__arrow {
  margin-top: auto;
  padding-top: 16px;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
@media (max-width: 900px) { .grade-cards { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .grade-cards { grid-template-columns: 1fr; } }

/* Full-width grade detail (no sidebar form) */
.grade-detail-single .grade-detail__intro {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.grade-detail-single .grade-detail__objectives {
  grid-template-columns: repeat(2,1fr);
  max-width: 720px;
  margin: 4px auto 24px;
  text-align: left;
}
.grade-detail-single .grade-detail__table { margin-top: 56px; }
.grade-detail-single .grade-detail__table-heading { text-align: center; }
@media (max-width: 700px) {
  .grade-detail-single .grade-detail__objectives { grid-template-columns: 1fr; }
}