/* ==========================================================================
   Foundations First Education — shared stylesheet
   Matched to the live site's type system (Poppins throughout,
   body copy set in Poppins Light), flat black/off-white palette
   with lime + tan accents.
   ========================================================================== */

/* Italic weights 300-600 are loaded deliberately: without them the browser
   falls back to the nearest available italic face (700) and renders every
   italic word bold. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root{
  --ink: #000000;
  --bg: #F5F5F5;
  --white: #FFFFFF;
  --lime: #BADA55;
  --tan: #896749;
  --tan-dark: #6E4F37;
  /* Slate — deep desaturated green-grey. Section backgrounds (Innovative
     Approach, booking) and the Academic Success accent. */
  --slate: #2E3630;
  --slate-dark: #232922;
  --slate-tint: #EDEFEC;
  --deep-green: #2E3630; /* legacy alias — prefer --slate */
  --line: rgba(0,0,0,0.16);
  --muted: rgba(0,0,0,0.62);

  --radius-pill: 100px;
  --radius-sm: 4px;

  --max-width: 1180px;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Poppins', Arial, Helvetica, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

/* ---------- Reveal-on-scroll utilities ----------------------------------
   Add a class to any element; no per-page code required.
     .reveal          fade + rise into place
     .reveal--fade    fade only, stays put
     .reveal--left    drift in from the left
     .reveal--right   drift in from the right
     .reveal--slow    longer duration, for large headlines
     .reveal-group    cascade the element's direct children
     data-delay="1-6" hold an element back a beat
   The hidden start state applies only when .js-anim is set by script, so a
   JS failure or an old browser just renders the finished page.            */
.js-anim .reveal,
.js-anim .reveal-group > *{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s cubic-bezier(.22,.61,.36,1),
              transform .65s cubic-bezier(.22,.61,.36,1);
}
.js-anim .reveal.is-in,
.js-anim .reveal-group.is-in > *{ opacity: 1; transform: none; }

.js-anim .reveal--fade{ transform: none; }
.js-anim .reveal--left{ transform: translateX(-22px); }
.js-anim .reveal--right{ transform: translateX(22px); }
.js-anim .reveal--slow{ transition-duration: .9s; }

.js-anim [data-delay="1"]{ transition-delay: .08s; }
.js-anim [data-delay="2"]{ transition-delay: .16s; }
.js-anim [data-delay="3"]{ transition-delay: .24s; }
.js-anim [data-delay="4"]{ transition-delay: .32s; }
.js-anim [data-delay="5"]{ transition-delay: .40s; }
.js-anim [data-delay="6"]{ transition-delay: .48s; }

.js-anim .reveal-group.is-in > *:nth-child(1){ transition-delay: .00s; }
.js-anim .reveal-group.is-in > *:nth-child(2){ transition-delay: .08s; }
.js-anim .reveal-group.is-in > *:nth-child(3){ transition-delay: .16s; }
.js-anim .reveal-group.is-in > *:nth-child(4){ transition-delay: .24s; }
.js-anim .reveal-group.is-in > *:nth-child(5){ transition-delay: .32s; }
.js-anim .reveal-group.is-in > *:nth-child(6){ transition-delay: .40s; }

@media (prefers-reduced-motion: reduce){
  .js-anim .reveal,
  .js-anim .reveal-group > *{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Respect OS-level reduced-motion preference: disable transitions,
   animations, and smooth scrolling (incl. the sticky-stack easing). */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: -0.16px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

h1, h2, h3, h4{
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1{ font-size: clamp(2.4rem, 5vw, 3.5rem); }
h2{ font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
h3{ font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.35; }

p{ margin: 0 0 1em; color: var(--ink); }
p.muted{ color: var(--muted); }

a{ color: var(--ink); text-decoration: none; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 620px){
  .container{ padding: 0 24px; }
  .nav{ padding: 20px 24px; }
}

.section{ padding: 100px 0; }
.section--tight{ padding: 64px 0; }
.section--dark{ background: var(--ink); color: var(--bg); }
.section--dark h2, .section--dark h3{ color: var(--bg); }
.section--dark p{ color: rgba(245,245,245,0.82); }

.eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .76rem;
  color: var(--tan-dark);
  margin-bottom: 18px;
}
.section--dark .eyebrow{ color: var(--lime); }

.section-head{
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-head.text-center{ text-align: center; margin-left: auto; margin-right: auto; }
.section-head p{ font-size: 1.08rem; }

/* Flat, left-aligned header variant (matches "Innovative Approach" style) */
.section-head--flat{ max-width: none; margin: 0 0 56px; text-align: left; }
.section-head--flat p{ max-width: 640px; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.98rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: opacity .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover{ opacity: 0.82; }

.btn--primary{ background: var(--ink); color: var(--bg); }
.btn--outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--white{ background: var(--white); color: var(--ink); border-color: var(--white); }

/* on dark/photo backgrounds, invert to off-white */
.section--dark .btn--primary, .on-dark .btn--primary{ background: var(--bg); color: var(--ink); }
.section--dark .btn--outline, .on-dark .btn--outline{ background: transparent; border-color: var(--bg); color: var(--bg); }

.btn--tan{ background: var(--tan); color: var(--bg); border-radius: var(--radius-sm); }
.btn--tan:hover{ background: var(--tan-dark); opacity: 1; }

.btn--block{ width: 100%; }
.btn-row{ display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Header / Nav ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav{
  max-width: var(--max-width);
  margin: 0 auto;
  /* horizontal padding matches .container so the logo/nav line up
     with the hero and every content section below it */
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.2;
}
.brand-mark{ width: 34px; height: 34px; flex-shrink: 0; }
.brand small{
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tan);
}

.nav-links{
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{
  border-bottom-color: var(--tan);
}

/* --- dropdown submenus ------------------------------------------------- */
.nav-links li.has-menu{ position: relative; }
.nav-links li.has-menu > a{ padding-right: 15px; }
/* caret */
.nav-links li.has-menu > a::after{
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  width: 6px; height: 6px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-links li.has-menu:hover > a::after,
.nav-links li.has-menu:focus-within > a::after{ opacity: 1; transform: rotate(225deg); margin-top: -1px; }

.nav-sub{
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 216px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 250;
}
/* :focus-within keeps it open for keyboard users, not just mouse */
.nav-links li.has-menu:hover > .nav-sub,
.nav-links li.has-menu:focus-within > .nav-sub{
  opacity: 1; visibility: visible; transform: none;
}
.nav-sub li{ width: 100%; margin: 0; }
.nav-sub a{
  display: block;
  padding: 9px 18px;
  font-size: 0.9rem;
  white-space: nowrap;
  border-bottom: none;
}
.nav-sub a:hover{ background: var(--bg); border-bottom-color: transparent; }

.nav-cta{ display: flex; align-items: center; gap: 18px; }

.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  /* meets the 44x44px minimum touch-target guideline */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nav-toggle span{
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--ink);
  border-radius: 2px;
}

/* Two labels on the header CTA: the full phrase on wide screens, "Book" once
   the header runs out of room. Without this the button overlapped the
   wordmark on phones. */
.cta-short{ display: none; }

@media (max-width: 880px){
  .nav-toggle{ display: block; }
  .nav-links{
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 18px;
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav-links.open{ display: flex; }
  .nav-links li{ width: 100%; }
  .nav-links a{ display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-cta .btn{ padding: 10px 16px; font-size: 0.88rem; }

  /* In the mobile drawer, submenus sit open and indented — no hover to rely
     on, and no extra tap needed to reach a subject page. */
  .nav-sub{
    position: static;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 6px 16px;
  }
  .nav-sub a{ padding: 10px 0; font-size: 0.9rem; color: var(--muted); border-bottom: 1px solid var(--line); }
  .nav-links li.has-menu > a::after{ display: none; }
}

/* Anchor targets clear the sticky header when jumped to */
section[id]{ scroll-margin-top: 96px; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: 72px 0;
  background: var(--bg);
  overflow: hidden;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
}
.hero-copy .eyebrow{ margin-bottom: 20px; }
.hero h1{ color: var(--ink); font-size: clamp(1.85rem, 2.6vw, 2.5rem); margin-bottom: 24px; letter-spacing: -0.02em; line-height: 1.2; }
.hero h1 .hl{ color: var(--tan-dark); }
.hero p.lede{ font-size: 1.15rem; margin-bottom: 36px; max-width: 46ch; line-height: 1.65; color: var(--muted); }

.hero-photo{ position: relative; padding: 22px 0 0 30px; }
.hero-photo::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: -14px; bottom: -14px;
  background: linear-gradient(135deg, var(--lime), var(--tan));
  border-radius: 28px;
  z-index: 0;
}
.hero-photo img{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: 24px;
}

@media (max-width: 880px){
  .hero{ padding: 48px 0; }
  .hero-grid{ grid-template-columns: 1fr; gap: 36px; }
  .hero-photo{ max-width: 320px; margin: 0 auto; padding: 18px 0 0 24px; order: -1; }
}

/* ---------- Hero (full-bleed variant, mockup) ---------- */
.hero--fullbleed{
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 100px 0;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
/* Photo is brightened slightly overall, then the scrim is graded so the
   left (text) side stays dark enough for contrast while the right side —
   where the Jenga tower sits and no text overlaps — reads much brighter. */
.hero--fullbleed{ filter: none; }
.hero--fullbleed::after{
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: brightness(1.28) saturate(1.05);
  -webkit-backdrop-filter: brightness(1.28) saturate(1.05);
  /* mask keeps the brightening subtle on the left, strong on the right */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 42%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 42%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 100%);
  pointer-events: none;
  z-index: 0;
}
.hero--fullbleed::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* darker over the copy on the left, clearing toward the right */
  background: linear-gradient(to right, rgba(8,10,8,0.78) 0%, rgba(8,10,8,0.74) 44%, rgba(8,10,8,0.42) 74%, rgba(8,10,8,0.30) 100%);
}
/* The hero is display:flex, so .container would otherwise shrink-wrap to
   its content and get re-centered by margin:0 auto — pushing the copy
   inward. width:100% makes it fill to its 1180px max-width so the hero
   text lines up with every section below. */
.hero--fullbleed .container{ position: relative; z-index: 2; width: 100%; }
.hero--fullbleed .hero-copy{ max-width: 760px; margin: 0; text-align: left; }
.hero--fullbleed .eyebrow{ color: rgba(245,245,245,0.85); margin-bottom: 20px; }
.hero--fullbleed h1{ color: #F5F5F5; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.hero--fullbleed h1 .hl{ color: var(--lime); }
.hero--fullbleed p.lede{ color: rgba(245,245,245,0.88); font-size: 1.15rem; margin: 0 0 28px; max-width: 52ch; }
.hero-subjects{
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .76rem;
  color: rgba(245,245,245,0.8);
  margin: 0 0 32px;
}
.hero-subjects a{ color: inherit; }
.hero-subjects a:hover{ text-decoration: underline; }
.hero--fullbleed .hero-subjects{ margin-bottom: 44px; }
.hero--fullbleed .btn-row{ justify-content: flex-start; }
@media (max-width: 620px){
  .hero--fullbleed{ min-height: 480px; padding: 64px 0; }
}

/* ---------- Founder strip ---------- */
.founder-strip{ padding: 64px 0; background: var(--bg); }
.founder-strip-card{ background: var(--white); border-radius: 20px; padding: 48px 56px; }
/* Text column is capped near its natural measure and the pair is centred in
   the card, so the two columns sit close together instead of being pushed to
   opposite edges by a wide 1fr. */
.founder-strip-inner{
  display: grid;
  grid-template-columns: minmax(0, 46ch) 300px;
  justify-content: center;
  align-items: center;
  gap: 48px;
}
.founder-strip-inner picture{ display: block; width: 100%; }
.founder-strip-photo{ width: 100%; height: auto; object-fit: contain; border-radius: 16px; display: block; }
.founder-strip-inner .eyebrow{ margin-bottom: 14px; }
/* Semantic h1 on About, sized to match the h2 rhythm of the rest of the site. */
.about-h1{ font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 20px; }

.founder-strip-inner h2,
.founder-strip-inner h3{ margin: 0 0 20px; font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-family: var(--font-head); line-height: 1.1; }
.founder-strip-inner p{ margin: 0 0 24px; max-width: 46ch; }
.founder-strip-inner .btn{ margin-top: 4px; }
@media (max-width: 760px){
  .founder-strip{ padding: 48px 0; }
  .founder-strip-card{ padding: 40px 28px; }
  .founder-strip-inner{ grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .founder-strip-inner p{ margin: 0 auto 24px; }
  .founder-strip-inner picture{ max-width: 300px; margin: 0 auto; order: -1; }
  .founder-strip-photo{ max-width: 300px; margin: 0 auto; }
}

/* ---------- Narrow phones: keep brand, CTA and menu on one line ---------- */
@media (max-width: 600px){
  .nav{ padding: 14px 18px; gap: 10px; }
  .brand{ font-size: 0.98rem; gap: 8px; min-width: 0; }
  .brand span{ white-space: nowrap; }
  .brand-mark{ width: 28px; height: 28px; }
  .brand small{ font-size: 0.56rem; letter-spacing: .1em; }
  .nav-cta{ gap: 6px; flex-shrink: 0; }
  .nav-cta .btn{ padding: 9px 15px; font-size: 0.85rem; }
  /* scoped to the header — in-page CTAs keep the full label */
  .nav-cta .cta-full{ display: none; }
  .nav-cta .cta-short{ display: inline; }
}
@media (max-width: 380px){
  .brand span{ font-size: 0.9rem; }
  .brand small{ display: none; }
}

/* ---------- Page header (inner pages) ---------- */
.page-header{
  padding: 72px 0 60px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* Subject page headers: title left, progress callout in the space at right */
.page-header-split{
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 56px;
}
.page-header-split .sliding-note h2{ font-size: 1.05rem; margin: 0 0 10px; }
.page-header-split .sliding-note h3{ font-size: 1.05rem; }
.page-header-split .sliding-note p{ font-size: 0.93rem; }
@media (max-width: 880px){
  .page-header-split{ grid-template-columns: 1fr; gap: 32px; align-items: start; }
}

.page-header .back-link{ margin: 0 0 18px; font-size: 0.9rem; font-weight: 500; }
.page-header .back-link a{ color: var(--muted); }
.page-header .back-link a:hover{ color: var(--ink); }
.page-header h1{ margin-bottom: 16px; }
.page-header p{ color: var(--muted); max-width: 640px; font-size: 1.08rem; }

/* ---------- Plain stacked layout (Innovative Approach style) ---------- */
.flat-split{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}
@media (max-width: 880px){ .flat-split{ grid-template-columns: 1fr; gap: 40px; } }

.flat-list{ display: flex; flex-direction: column; gap: 40px; }
.flat-item h3{ margin-bottom: 12px; }
.flat-item p{ color: var(--muted); }

/* ---------- Innovative Approach: black panel + sticky card stack + portrait image ---------- */
.approach-split{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}
.approach-split-text{
  background: var(--slate);
  padding: 100px 60px 160px max(60px, calc((100vw - 1180px) / 2 + 40px));
}
.approach-split-text h2{ color: #F5F5F5; margin-bottom: 20px; max-width: 34ch; }
.approach-split-text > p.muted{ color: rgba(245,245,245,0.78); max-width: 60ch; margin-bottom: 8px; }
.approach-split-text > p.muted strong{ color: var(--lime); font-weight: 600; }

/* --- Innovative Approach: click-to-expand items ----------------------
   Collapsed:  [green circle icon]  Title                        ↗
   Expanded:   [green circle icon]  ┌ card: Title  ↙ / body ────┐
   The row's own title + arrow hide while open; the card's take over. */
.ax-list{ display: flex; flex-direction: column; gap: 10px; max-width: 60ch; margin-top: 32px; }

.ax-item{
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 20px;
}

.ax-icon-btn{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--lime);
  color: #FFFFFF;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .18s ease;
}
.ax-icon-btn svg{ width: 30px; height: 30px; }
.ax-icon-btn:hover{ transform: scale(1.05); }
.ax-icon-btn:focus-visible{ outline: 2px solid var(--bg); outline-offset: 3px; }

.ax-titlebtn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 64px;
  /* right padding matches .ax-card-head so the collapsed arrow and the
     open card's arrow sit on the same vertical line */
  padding: 0 26px 0 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-head);
}
.ax-title{
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: #F5F5F5;
  transition: color .18s ease;
}
.ax-titlebtn:hover .ax-title{ color: var(--lime); }
.ax-arrow{ width: 26px; height: 26px; color: var(--lime); flex-shrink: 0; }
.ax-arrow svg{ width: 100%; height: 100%; }
.ax-item.is-open .ax-titlebtn{ display: none; }

.ax-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.ax-item.is-open .ax-panel{ grid-template-rows: 1fr; }
.ax-panel-inner{ overflow: hidden; }

.ax-card{
  background: #F5F5F5;
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.45);
  overflow: hidden;
}
.ax-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 26px 18px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-head);
}
.ax-card-head h3{ margin: 0; font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
.ax-card-arrow{
  width: 26px; height: 26px; color: var(--lime); flex-shrink: 0;
  transform: rotate(180deg);
}
.ax-card-arrow svg{ width: 100%; height: 100%; }
.ax-card-body{ padding: 20px 26px 26px; }
.ax-card-body p{ margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.6; }

@media (max-width: 900px){
  .ax-item{ grid-template-columns: 52px 1fr; gap: 14px; }
  .ax-icon-btn{ width: 52px; height: 52px; }
  .ax-icon-btn svg{ width: 24px; height: 24px; }
  .ax-titlebtn{ min-height: 52px; }
}

/* Light-background variant (mathematics: five strands).
   Slate circles with white glyphs, dark text, white expanded card. */
.ax-list--light{ max-width: none; }
.ax-list--light .ax-icon-btn{ background: var(--slate); color: #FFFFFF; }
.ax-list--light .ax-icon-btn:hover{ background: var(--slate-dark); }
.ax-list--light .ax-icon-btn:focus-visible{ outline-color: var(--ink); }
.ax-list--light .ax-title{ color: var(--ink); }
.ax-list--light .ax-titlebtn:hover .ax-title{ color: var(--slate); opacity: 0.75; }
.ax-list--light .ax-arrow{ color: var(--slate); }
/* Constrain the shared column, not the two children separately — a `ch`
   value computes against each element's own font, so capping them
   individually can't guarantee the same right edge. One parent box does. */
.ax-list--light .ax-item > div:last-child{ max-width: 72ch; }
.ax-list--light .ax-card{
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}
.ax-list--light .ax-card-arrow{ color: var(--slate); }

.approach-split-image{
  position: relative;
  background-size: cover;
  background-position: center;
  filter: brightness(1.15) saturate(1.3);
}
.approach-split-image::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20,14,8,0.15);
}
@media (max-width: 900px){
  .approach-split{ grid-template-columns: 1fr; }
  .approach-split-image{ min-height: 280px; }
  .approach-split-text{ padding: 56px 28px 90px; }
}

/* ---------- Grid (Subjects Offered etc.) ---------- */
.grid{ display: grid; gap: 40px; }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
  .grid--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .grid--4, .grid--3, .grid--2{ grid-template-columns: 1fr; }
}

.subject-item{ display: block; border-top: 3px solid var(--accent, var(--tan)); padding-top: 20px; }
.subject-item[data-accent="literacy"]{ --accent: var(--tan); }
.subject-item[data-accent="math"]{ --accent: var(--lime); }
.subject-item[data-accent="science"]{ --accent: #000; }
.subject-item[data-accent="success"]{ --accent: var(--slate); }
.subject-item h3{ margin-bottom: 10px; }
.subject-item p{ color: var(--muted); font-size: 0.98rem; }
.subject-item--link{ transition: opacity .15s ease; }
.subject-item--link:hover{ opacity: 0.72; }
.subject-item-link{
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--tan-dark);
}

/* Subjects section: books photo behind an off-white scrim, so the photo
   reads as texture and all existing text/card colors keep their contrast. */
.subjects-section{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Subjects Offered (home page only) — tinted card + icon badge variant */
.subject-card{
  display: block;
  border-radius: 16px;
  padding: 28px 24px 26px;
  border-top: 4px solid var(--accent, var(--tan));
  background: var(--accent-tint, var(--white));
  transition: opacity .15s ease;
}
.subject-card:hover{ opacity: 0.86; }
.subject-card h3{ margin-bottom: 10px; }
.subject-card p{ color: var(--muted); font-size: 0.98rem; }
.subject-card[data-accent="literacy"]{ --accent: var(--tan); --accent-tint: #F8F0ED; }
.subject-card[data-accent="math"]{ --accent: var(--lime); --accent-tint: #F5FBE6; }
.subject-card[data-accent="science"]{ --accent: #6BA0C7; --accent-tint: #F0F6F9; }
.subject-card[data-accent="success"]{ --accent: var(--slate); --accent-tint: var(--slate-tint); }
.subject-card-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent, var(--tan));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
/* All four subject glyphs are white for visual consistency. These icons are
   decorative — each sits beside a text heading that carries the meaning —
   so the WCAG non-text contrast minimum doesn't apply to them. */
.subject-card-icon svg{ width: 24px; height: 24px; }

/* "Why One Tutor" tinted callout (subjects.html) */
.callout-tan{ background: var(--tan-dark); border-radius: 20px; padding: 56px; }
.callout-tan .eyebrow{ color: var(--lime); }
.callout-tan h2, .callout-tan h3{ color: var(--bg); }
.callout-tan p, .callout-tan p.muted{ color: rgba(245,245,245,0.82); }
.callout-icon{ width: 40px; height: 40px; color: var(--bg); margin-bottom: 16px; }
.callout-icon svg{ width: 100%; height: 100%; }

/* generic flat card (used sparingly, e.g. FAQ / pricing) */
.card{
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.card h3{ margin-bottom: 10px; }
.card p{ color: var(--muted); margin-bottom: 0; font-size: 0.98rem; }

/* ---------- FAQ Accordion (home page) ---------- */
.faq-list{ border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-question-wrap{ margin: 0; }
.faq-question{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-head);
}
.faq-question:hover .faq-q-text{ opacity: 0.72; }
.faq-q-text{ font-size: 1.05rem; font-weight: 600; color: var(--ink); transition: opacity .15s ease; }
.faq-icon{ position: relative; flex-shrink: 0; width: 20px; height: 20px; }
.faq-icon::before, .faq-icon::after{
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform .25s ease, background .25s ease, opacity .25s ease;
}
.faq-icon::before{ top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.faq-icon::after{ left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.faq-item.is-open .faq-icon::before{ background: var(--lime); }
.faq-item.is-open .faq-icon::after{ opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq-answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-item.is-open .faq-answer{ grid-template-rows: 1fr; }
.faq-answer-inner{ overflow: hidden; }
.faq-answer p{ color: var(--muted); font-size: 0.98rem; margin: 0; padding-bottom: 24px; }
.faq-answer a{ text-decoration: underline; }

/* ---------- Two column split (About) ---------- */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px){ .split{ grid-template-columns: 1fr; } }
/* Pricing: copy left, single-session card right */
.split--price{ grid-template-columns: 1fr 420px; align-items: start; }
@media (max-width: 880px){ .split--price{ grid-template-columns: 1fr; } }
.split-art{ width: 100%; }
.split-art picture{ display: block; width: 100%; }
.split-art img{ width: 100%; height: auto; border-radius: 16px; display: block; }

/* ---------- Stats strip ---------- */
.stat-band{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
}
@media (max-width: 700px){ .stat-band{ grid-template-columns: repeat(2,1fr); } }
.stat-band strong{
  display: block;
  font-family: var(--font-head);
  font-size: 1.6rem;
  color: var(--lime);
  margin-bottom: 4px;
}
.stat-band span{ font-size: 0.9rem; color: rgba(245,245,245,0.8); }

.consultation-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px){
  .consultation-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Forms ---------- */
.form-panel{
  background: var(--white);
  padding: 44px;
}
.on-dark .form-panel{ background: var(--bg); }
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-grid .full{ grid-column: 1 / -1; }
@media (max-width: 620px){ .form-grid{ grid-template-columns: 1fr; } }

.field{ display: flex; flex-direction: column; gap: 8px; }
.field label{ font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; color: var(--ink); }
.field .hint{ font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea{
  font-family: var(--font-body);
  font-size: 0.96rem;
  padding: 13px 14px;
  border-radius: 0;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* Visible keyboard focus for every interactive element (never removed) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.chip:focus-visible, .faq-question:focus-visible, .nav-toggle:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark a:focus-visible, .on-dark .btn:focus-visible,
.section--dark a:focus-visible, .section--dark .btn:focus-visible,
.hero--fullbleed a:focus-visible, .hero--fullbleed .btn:focus-visible{
  outline-color: var(--bg);
}
.checkbox-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 480px){ .checkbox-grid{ grid-template-columns: 1fr; } }
.checkbox-item{ display: flex; align-items: center; gap: 10px; font-size: 0.94rem; }
.checkbox-item input{ width: 17px; height: 17px; accent-color: var(--tan); }

/* Guardian-consent checkbox: multi-line, so align to the first line and
   keep the box from being squeezed by the wrapping text. */
.checkbox-item--consent{ align-items: flex-start; line-height: 1.5; }
.checkbox-item--consent input{ flex-shrink: 0; margin-top: 3px; }
.checkbox-item--consent a{ text-decoration: underline; font-weight: 600; }

.form-note{ font-size: 0.85rem; color: var(--muted); margin-top: 18px; }

/* Form submission status / error message */
.form-status{
  margin: 18px 0 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--tan-dark);
  line-height: 1.5;
}
.form-status a{ text-decoration: underline; color: inherit; }
.form-status--error{ color: #B3261E; }
/* Post-submit "book a time" call to action */
.form-next{ display: block; margin-top: 18px; font-weight: 400; color: var(--muted); }
.form-next .btn{ display: inline-flex; margin-top: 10px; text-decoration: none; color: var(--bg); }
/* Sets waitlist expectations before the call, so a "no opening right now"
   conversation isn't a surprise. Deliberately quieter than the CTA above it. */
.form-fineprint{ display: block; margin-top: 18px; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }

/* About page: supporting card tucked under the portrait in the left column. */
.about-aside{ margin-top: 28px; }
.about-aside h2{ font-size: 1.15rem; margin: 0 0 12px; font-family: var(--font-head); }
.about-aside .body-list li{ font-size: 0.92rem; }

/* Screen-reader-only text (visible to assistive tech, hidden visually) */
/* Low-emphasis footer utility line (existing-client tier change). */
.footer-note{ font-size: 0.85rem; opacity: 0.75; margin-top: 6px; }

/* Caveat under the science "additional courses" grid. */
.course-caveat{ margin: 28px 0 0; max-width: 74ch; font-size: 0.95rem; }

/* ---------- Legal pages (privacy, accessibility) ---------- */
/* Children are capped at a readable measure but stay left-aligned, so the
   body lines up with the h1 in the page header above instead of being
   centred independently of it. */
.legal-body > *{ max-width: 72ch; }
.legal-body h2{
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  margin: 44px 0 14px;
  line-height: 1.25;
}
.legal-body h2:first-child{ margin-top: 0; }
.legal-body p,
.legal-body .body-list{ margin-bottom: 16px; }
.legal-body .body-list li{ margin-bottom: 8px; }
.legal-body code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 4px;
}

.skip-link{
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus{ top: 0; }

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Pricing ---------- */
.price-card{
  border-top: 3px solid var(--ink);
  padding: 32px 0;
  display: flex;
  flex-direction: column;
}
.price-card.featured{ border-top-color: var(--tan); }
.price-card.featured .eyebrow{ color: var(--tan-dark); }
.price-amount{ font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; margin: 8px 0 4px; }
.price-amount span{ font-size: 1rem; font-family: var(--font-body); color: var(--muted); font-weight: 400; }
.price-freq{ font-size: 0.9rem; color: var(--muted); margin-bottom: 4px; }
.price-save{ display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--tan-dark); background: var(--tan-light, #F3ECE3); padding: 3px 10px; border-radius: var(--radius-pill); margin: 6px 0 0; }
.price-monthly{ font-size: 0.95rem; color: var(--ink); font-weight: 600; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); }
.price-monthly span{ display: block; font-weight: 400; color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.price-list{ list-style: none; padding: 0; margin: 22px 0; text-align: left; flex-grow: 1; }
.price-list li{ padding: 10px 0; font-size: 0.95rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.price-list li:first-child{ border-top: 1px solid var(--line); }

.sliding-note{ border-left: 3px solid var(--tan); padding-left: 28px; }
/* Slate-accented variant */
.sliding-note--slate{ border-left-color: var(--slate); }
.sliding-note--slate h3,
.sliding-note--slate h2{ color: var(--slate); }
/* Lime-accented variant. The rule stays on the border only — lime on the
   off-white background is about 1.5:1, far too low for heading text. */
.sliding-note--lime{ border-left-color: var(--lime); }

/* ---------- Literacy "why early matters" stat callout ---------- */
.stat-callout{
  background: var(--slate);
  border-radius: 16px;
  padding: 30px 32px;
  margin-top: 32px;
}
.stat-callout > h3{
  color: var(--lime);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.stat-callout-item{
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  align-items: center;
  margin: 0;
}
.stat-callout-item + .stat-callout-item{
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(245,245,245,0.14);
}
.stat-callout-item figcaption p{
  color: rgba(245,245,245,0.82);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0 0 6px;
}
.stat-callout-item figcaption strong{ color: #F5F5F5; font-weight: 600; }
.stat-callout-item em{ font-style: italic; }
.stat-source{ font-size: 0.8rem !important; color: rgba(245,245,245,0.55) !important; margin-bottom: 0 !important; }
.stat-source a{ color: var(--lime); text-decoration: underline; }

@media (max-width: 620px){
  .stat-callout-item{ grid-template-columns: 1fr; gap: 16px; }
}

/* Portrait variant: the stat callout sits in the space beside the
   "Learning progressions" copy, so the two figures stack vertically
   instead of running side by side. */
.progressions-split{
  grid-template-columns: 1.1fr 0.9fr;
  align-items: start;
  gap: 48px;
  margin-bottom: 56px;
}
/* Copy stays anchored to the top of the row; the callout drops to sit on the
   baseline of the row so its bottom edge lines up with the last paragraph.
   Set per-item rather than align-items:end so that if the callout ever grows
   taller than the copy, the heading still starts at the top. */
.progressions-split > .section-head{ align-self: start; }
.progressions-split > .stat-callout{ align-self: end; }
.progressions-split .section-head{ margin-bottom: 0; }
.progressions-split .section-head p{ max-width: none !important; }

.stat-callout--tall{ margin-top: 0; padding: 30px 30px 26px; }
.stat-callout--tall .stat-callout-inner{ display: block; }
.stat-callout--tall .stat-callout-item{ grid-template-columns: 92px 1fr; gap: 18px; }  /* 92px matches the fixed width of .stat-ring / .stat-people */
.stat-callout--tall .stat-callout-item + .stat-callout-item{
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(245,245,245,0.14);
}
.stat-callout--tall .stat-callout-note{ margin-top: 22px; padding-top: 20px; font-size: 0.9rem; }
@media (max-width: 880px){
  .progressions-split{ grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
}

/* Full-width variant: two stats side by side (mathematics page) */
.stat-callout--wide{ margin-top: 56px; padding: 34px 38px; }
.stat-callout-note{
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(245,245,245,0.14);
  color: rgba(245,245,245,0.82);
  font-size: 0.95rem;
  line-height: 1.6;
}
.stat-callout--wide .stat-callout-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}
.stat-callout--wide .stat-callout-item + .stat-callout-item{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
@media (max-width: 780px){
  .stat-callout--wide .stat-callout-inner{ grid-template-columns: 1fr; gap: 28px; }
  .stat-callout--wide .stat-callout-item + .stat-callout-item{
    padding-top: 26px;
    border-top: 1px solid rgba(245,245,245,0.14);
  }
}

/* --- animated progress ring --- */
.stat-ring{ position: relative; width: 92px; margin: 0; }
.stat-ring svg{ width: 100%; height: auto; display: block; }
.stat-ring-track{ stroke: rgba(245,245,245,0.15); }
.stat-ring-fill{
  stroke: var(--lime);
  stroke-dasharray: 339.29;      /* 2 * pi * r, r = 54 */
  stroke-dashoffset: 339.29;     /* fully hidden until revealed */
  transition: stroke-dashoffset 1.4s cubic-bezier(.25,.8,.3,1);
}
/* --ring-offset is set per figure: 339.29 * (1 - percent) */
.stat-viz.is-visible .stat-ring-fill{ stroke-dashoffset: var(--ring-offset, 234.11); }
.stat-ring-label{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; color: #F5F5F5;
}
.stat-num{ font-size: 1.5rem; line-height: 1; }
.stat-pct{ font-size: 0.85rem; margin-top: 1px; }

/* --- 10-figure pictogram --- */
.stat-people{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 92px;
  margin: 0;
}
.pf{
  display: block;
  aspect-ratio: 3 / 4;
  background: rgba(245,245,245,0.28);
  transition: background .45s ease;
  /* simple standing figure, drawn with a mask so it stays crisp at any size */
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Ccircle cx='15' cy='7' r='6'/%3E%3Crect x='4' y='15' width='22' height='13' rx='3'/%3E%3Crect x='7' y='27' width='7' height='13' rx='2.5'/%3E%3Crect x='16' y='27' width='7' height='13' rx='2.5'/%3E%3C/svg%3E");
  mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Ccircle cx='15' cy='7' r='6'/%3E%3Crect x='4' y='15' width='22' height='13' rx='3'/%3E%3Crect x='7' y='27' width='7' height='13' rx='2.5'/%3E%3Crect x='16' y='27' width='7' height='13' rx='2.5'/%3E%3C/svg%3E");
}
.stat-viz.is-visible .pf.is-on{ background: var(--lime); }
/* stagger the fill so the nine read as a count */
.stat-viz.is-visible .pf:nth-child(1){ transition-delay: .05s }
.stat-viz.is-visible .pf:nth-child(2){ transition-delay: .10s }
.stat-viz.is-visible .pf:nth-child(3){ transition-delay: .15s }
.stat-viz.is-visible .pf:nth-child(4){ transition-delay: .20s }
.stat-viz.is-visible .pf:nth-child(5){ transition-delay: .25s }
.stat-viz.is-visible .pf:nth-child(6){ transition-delay: .30s }
.stat-viz.is-visible .pf:nth-child(7){ transition-delay: .35s }
.stat-viz.is-visible .pf:nth-child(8){ transition-delay: .40s }
.stat-viz.is-visible .pf:nth-child(9){ transition-delay: .45s }

/* ---------- RAND reading-comprehension heuristic figure ---------- */
.rand-figure{ margin: 72px 0 0; }
.rand-grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}
.rand-circle svg{ width: 100%; height: auto; display: block; }

.rand-col-head{
  font-size: 1.05rem;
  color: var(--tan-dark);
  margin: 0 0 14px;
}
.rand-col h4{
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}
.rand-col ul{
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.rand-col li{
  position: relative;
  padding-left: 16px;
  margin-bottom: 5px;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}
.rand-col li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tan);
}
.rand-col hr{
  border: none;
  border-top: 1px dotted var(--line);
  margin: 26px 0 24px;
}

.rand-figure figcaption{
  margin-top: 32px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 78ch;
}
.rand-figure figcaption a{ text-decoration: underline; }

@media (max-width: 900px){
  .rand-grid{ grid-template-columns: 1fr; gap: 32px; }
  .rand-circle{ order: -1; max-width: 380px; margin: 0 auto; }
}

/* ---------- Body bullet list (prose sections) ---------- */
.body-list{
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
}
.body-list li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.6;
}
.body-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tan);
}
/* inside a callout: smaller, and inherits the callout's accent */
.body-list--tight{ margin: 14px 0; }
.body-list--tight li{ font-size: 0.93rem; margin-bottom: 7px; padding-left: 20px; }
.sliding-note--slate .body-list li::before{ background: var(--slate); }

/* ---------- Course lists (science) ---------- */
.course-lists{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
@media (max-width: 780px){ .course-lists{ grid-template-columns: 1fr; gap: 32px; } }

.course-col h3{
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tan-dark);
  margin: 0 0 18px;
}
.course-col ul{ list-style: none; padding: 0; margin: 0; }
.course-col li{
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
}
.course-col li:first-child{ border-top: 1px solid var(--line); }

/* Writing stages (literacy) — 3-column, no grade numbering */
.writing-stage{ border-top: 3px solid var(--tan); padding-top: 20px; }
.writing-stage h3{ margin-bottom: 10px; }

/* ---------- Rate table ---------- */
.table-wrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rate-table{ width: 100%; border-collapse: collapse; min-width: 520px; background: var(--white); }
.rate-table th, .rate-table td{ padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.95rem; white-space: nowrap; }
.rate-table thead th{ font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--white); background: var(--ink); }
.rate-table tbody tr:last-child td{ border-bottom: none; }
.rate-table tbody tr:hover{ background: var(--bg); }
.rate-table td:first-child, .rate-table th:first-child{ font-weight: 600; }

/* ---------- Blog ---------- */
.post-card{ display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 22px; }
.post-tag{ font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tan-dark); margin-bottom: 10px; }
.post-card h3{ margin-bottom: 10px; }
.post-card p{ color: var(--muted); font-size: 0.96rem; }
.post-meta{ font-size: 0.82rem; color: var(--muted); margin-top: auto; padding-top: 16px; }

/* Blog: coming-soon state */
.blog-empty{
  max-width: 62ch;
  padding: 48px 0 8px;
  border-top: 1px solid var(--line);
}
.blog-empty h2{ margin-bottom: 16px; }
.blog-empty p{ font-size: 1.05rem; }
.blog-empty a{ text-decoration: underline; }

.blog-filter{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.chip{
  border: 1.5px solid var(--ink);
  background: transparent;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.chip.is-active{ background: var(--ink); color: var(--bg); }

.subscribe-band{
  background: var(--ink);
  padding: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.subscribe-band h3{ color: var(--bg); margin-bottom: 8px; }
.subscribe-band p{ color: rgba(245,245,245,0.8); margin: 0; }
.subscribe-form{ display: flex; gap: 12px; flex-wrap: wrap; }
.subscribe-form input{
  padding: 14px 18px; border: none; min-width: 260px;
  font-family: var(--font-body);
}

/* ---------- About page ---------- */
.credential-list{ list-style: none; padding: 0; margin: 22px 0; }
.credential-list li{
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--muted);
}
.credential-list li svg{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 3px; color: var(--tan); }
.credential-list--wide{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
@media (max-width: 620px){ .credential-list--wide{ grid-template-columns: 1fr; } }

/* About: education + applied-background callouts below the story */
.about-callouts .sliding-note h2{ font-size: 1.15rem; margin: 0 0 12px; font-family: var(--font-head); }
.about-callouts{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
@media (max-width: 880px){ .about-callouts{ grid-template-columns: 1fr; gap: 32px; } }

.pull-quote{
  font-family: var(--font-head);
  font-weight: 600;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  border-left: 3px solid var(--lime);
  padding-left: 26px;
  margin: 40px 0;
}

.value-row{ display: flex; gap: 24px; align-items: flex-start; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.value-row:last-child{ border-bottom: none; }
.value-num{ font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--tan); flex-shrink: 0; width: 44px; }

.testimonial-wrap{ max-width: 640px; margin: 0 auto; }
.testimonial-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.testimonial-card .quote{
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 20px;
  flex-grow: 1;
}
.testimonial-card .attribution{ font-size: 0.9rem; color: var(--muted); font-weight: 600; margin: 0; }
.testimonial-card .attribution span{ font-weight: 400; color: var(--muted); }
.star-rating{ display: flex; gap: 3px; margin-bottom: 16px; }
.star-rating svg{ width: 18px; height: 18px; fill: var(--tan-dark); }

/* ---------- CTA band ---------- */
.cta-band{ text-align: left; }
.cta-band h2{ margin-bottom: 14px; }
.cta-band p{ color: var(--muted); margin-bottom: 28px; max-width: 520px; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--bg); padding: 72px 0 30px; border-top: 1px solid var(--line); }
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }

.footer-grid h4{
  font-family: var(--font-body); font-weight: 700; font-size: 0.82rem;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px; color: var(--ink);
}
.footer-brand{ margin-bottom: 16px; }
.footer-brand span{ font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.footer-grid ul{ list-style: none; padding: 0; margin: 0; }
.footer-grid li{ margin-bottom: 12px; }
.footer-grid a{ color: var(--ink); font-size: 0.94rem; }
.footer-grid a:hover{ color: var(--tan); }
.footer-social{ display: flex; gap: 16px; margin-top: 18px; }
.footer-social a{ width: 20px; height: 20px; }
.footer-social svg{ width: 100%; height: 100%; color: var(--ink); }
.footer-social a:hover svg{ color: var(--tan); }

.footer-bottom{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  padding-top: 26px;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer-bottom a{ color: var(--muted); }
.footer-bottom a:hover{ color: var(--tan); }

/* ---------- Utility ---------- */
.mt-0{ margin-top: 0; }
.text-center{ text-align: center; }
.tag-badge{
  display: inline-block;
  background: var(--white);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  margin: 0 8px 8px 0;
}