/* ============================================================
   FORMATIVE MINDS — BRAND DESIGN SYSTEM  ·  "Forest & Brass"
   One token sheet. Load it before any page/agent publishes.
   Premium/heritage register: ONE green (#1E4F2A) as the whole
   green story + warm ivory ground + a single muted brass accent.
   Bright board-yellows (#FFC91A/#E29E29) are reserved for
   kid-facing/energetic contexts — NOT the premium parent brand.
   ============================================================ */

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

:root {
  /* ── THE GREEN (one hue, many shades — this is the whole green story) ── */
  --forest:       #1E4F2A;   /* primary anchor — hero/closer bg + headings (YC's pick) */
  --forest-deep:  #142F1C;   /* darker stop for depth/gradients */
  --forest-line:  #2C5A38;   /* hairline on forest */
  --forest-tint:  #E7EDE7;   /* pale desaturated forest — calm light band */
  --forest-tint2: #DCE4DD;

  /* ── WARM GROUND ── */
  --paper:        #FAF6EC;   /* warm ivory — default page background */
  --white:        #FFFFFF;   /* cards */
  --cream-2:      #F1E7D9;   /* alt warm band */

  /* ── TEXT ── */
  --ink:          #16271A;   /* warm near-black green — primary text on light */
  --ink-soft:     #45524A;   /* muted body text on light */
  --on-dark:      #F6F1E6;   /* warm ivory text on forest */
  --on-dark-soft: #BFC9BE;   /* muted text on forest */

  /* ── THE ACCENT (one, muted — replaces the cheap bright gold) ── */
  --brass:        #B08D4E;   /* antique brass — the pop word, key numbers, CTA */
  --brass-light:  #CBA968;   /* brass on the dark hero (needs to lift) */
  --brass-deep:   #8C6E37;   /* brass as text on light (contrast-safe) */
  --brass-soft:   rgba(176,141,78,.14);

  /* ── NEUTRALS / HAIRLINES ── */
  --sand:         #E3DBCB;   /* warm hairline on light */
  --taupe:        #8A7E6B;   /* warm muted / captions */
  --line-light:   #E3DBCB;

  /* ── RESERVED (kid/energetic register only — do not use on premium pages) ── */
  --kid-gold:     #FFC91A;
  --kid-amber:    #E29E29;

  /* ── TYPE FACES ── */
  --font-serif: 'Instrument Serif', Georgia, serif;        /* editorial italic accents */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;  /* everything */
  /* label face: JetBrains Mono dropped for mobile load speed. Uppercase + wide
     tracking on DM Sans carries the "label" look at zero extra download. */
  --font-mono:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── GEOMETRY ── */
  --maxw: 1120px;
  --radius: 18px;
  --radius-sm: 11px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: clamp(64px, 8.5vw, 108px) 0; }   /* generous whitespace = premium */

/* ============================================================
   TYPE SCALE  (fluid: min, preferred-vw, max)
   ============================================================ */
h1 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(2.7rem, 7vw, 5.4rem);
  letter-spacing: -0.035em; line-height: 0.98;
}
h2 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 16px;
}
h3 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 1.22rem; letter-spacing: -0.015em; line-height: 1.3;
}
.lead { font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.45; max-width: 62ch; }
.sub  {
  color: var(--ink-soft); font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  max-width: 60ch; margin-bottom: clamp(34px, 4vw, 52px);
}
p { max-width: 64ch; }
.small { font-size: 0.9rem; color: var(--taupe); }

/* ============================================================
   EMPHASIS SYSTEM — "calling out the punchline"
   RULE: at most ONE accent move per heading/block.
   .sage = the idea (tonal, deep forest).  .pop = the kicker (brass).
   ============================================================ */
em.sage, .accent-sage {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--forest); font-size: 1.1em; letter-spacing: 0;   /* tonal: dark-green italic */
}
em.pop, .accent-pop {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  color: var(--brass-deep); font-size: 1.1em; letter-spacing: 0;
}
/* refined underline accent — a thin brass rule, NOT a bright swipe */
.mark { background: linear-gradient(transparent 66%, var(--brass-soft) 66%); padding: 0 .06em; }

.eyebrow {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass-deep);
  display: block; margin-bottom: 18px;
}

/* ============================================================
   BRANDMARK
   ============================================================ */
.brandmark {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.24em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 9px; color: var(--ink);
}
.brandmark .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.brand-logo { height: 30px; width: auto; display: block; }
@media (max-width: 680px){ .brand-logo { height: 26px; } }

/* ============================================================
   HERO  (deep forest + restrained warm glow)
   ============================================================ */
.hero {
  background:
    radial-gradient(820px 380px at 84% -10%, rgba(203,169,104,.10) 0%, transparent 60%),
    radial-gradient(720px 420px at 2% 116%, rgba(20,47,28,.55) 0%, transparent 55%),
    var(--forest);
  color: var(--on-dark);
  padding: clamp(30px, 4vw, 44px) 0 clamp(78px, 9vw, 112px);
}
.hero .brandmark { color: var(--on-dark); margin-bottom: clamp(48px, 7vw, 84px); }
.hero .eyebrow   { color: var(--brass-light); }
.hero h1 { max-width: 17ch; margin-bottom: 24px; }
.hero h1 em.sage { color: var(--on-dark-soft); }   /* tonal light italic on dark */
.hero h1 em.pop  { color: var(--brass-light); }
.hero .lead { color: var(--on-dark-soft); }
.hero .lead strong { color: var(--on-dark); font-weight: 600; }

/* ── chips ── */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.chip {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em;
  background: rgba(246,241,230,.06); border: 1px solid rgba(246,241,230,.20);
  color: var(--on-dark); border-radius: 999px; padding: 9px 15px;
}
.chip.on-light { background: var(--brass-soft); border-color: var(--sand); color: var(--ink-soft); }

/* ============================================================
   BUTTONS   primary = brass (muted), secondary = outline
   ============================================================ */
.btn {
  display: inline-block; font-family: var(--font-sans); font-weight: 600;
  font-size: 1rem; border-radius: var(--radius-sm); padding: 15px 28px;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .14s ease, background .14s ease;
}
.btn-primary { background: var(--forest); color: #FFFFFF; }   /* green button → white text */
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(30,79,42,.28); background: #173F21; }
/* a forest button would vanish on dark bands — flip to ivory bg / forest text there */
.hero .btn-primary, .closer .btn-primary { background: var(--on-dark); color: var(--forest); }
.hero .btn-primary:hover, .closer .btn-primary:hover { background: #FFFFFF; box-shadow: 0 12px 26px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; border-color: var(--on-dark-soft); color: var(--on-dark); }
.btn-ghost:hover { border-color: var(--on-dark); }
.btn-ghost.on-light { border-color: var(--forest); color: var(--forest); }

/* ============================================================
   CARDS + GRID
   ============================================================ */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: 30px; background: var(--white);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: 0 16px 40px rgba(20,47,28,.09); transform: translateY(-2px); }
.card .num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--brass-deep); letter-spacing: .14em; }
.card h3 { margin: 10px 0 8px; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }

/* ============================================================
   BEFORE / AFTER  (two-column contrast block)
   ============================================================ */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .contrast { grid-template-columns: 1fr; } }
.contrast .col { border-radius: var(--radius); padding: 30px; }
.contrast .before { background: var(--white); border: 1px solid var(--sand); }
.contrast .after  { background: var(--forest-tint); border: 1px solid var(--forest-tint2); }
.contrast .tag { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: .16em; text-transform: uppercase; }
.contrast .before .tag { color: var(--taupe); }
.contrast .after  .tag { color: var(--forest); }
.contrast ul { list-style: none; margin-top: 14px; }
.contrast li { padding: 9px 0; border-top: 1px solid rgba(0,0,0,.06); font-size: 0.98rem; }

/* ============================================================
   CLOSER  (deep forest CTA band)
   ============================================================ */
.closer { background: var(--forest-deep); color: var(--on-dark); text-align: center; }
.closer .eyebrow { color: var(--brass-light); margin-bottom: 20px; }
.closer h2 em.pop { color: var(--brass-light); }
.closer .lead { color: var(--on-dark-soft); margin: 0 auto 32px; }

/* ============================================================
   THEME: GREEN ACCENT  (opt-in via <body class="theme-green">)
   Drops the brass/gold accent entirely — monochrome forest + ivory.
   Light surfaces: accent = forest green. Dark surfaces: accent = warm
   ivory (green-on-green would vanish). Emphasis then leans on
   serif-italic FORM + whitespace, not colour pop.
   ============================================================ */
.theme-green {
  --brass:       #1E4F2A;             /* accent + primary button on light */
  --brass-deep:  #1E4F2A;             /* accent text on light (eyebrow, em.pop, card num) */
  --brass-light: #F0E9D8;             /* accent on DARK surfaces = warm ivory (no gold) */
  --brass-soft:  rgba(30,79,42,.10);  /* faint green highlighter + chip tint */
}
.theme-green .btn-primary       { color: var(--on-dark); }   /* ivory text on the green button */
.theme-green .btn-primary:hover { background: #173F21; box-shadow: 0 12px 26px rgba(30,79,42,.28); }

/* ============================================================
   AIRY / PHOTO-LED PAGE COMPONENTS  ("bright premium" register)
   The Learning Lab feel: sticky nav + hamburger, photo-led hero,
   proof row, photo-top cards, testimonial, sticky mobile action bar.
   Pair with a white page ground: set `body { background: var(--white); }`
   on the page (it's a page choice, not a component).
   ============================================================ */

/* sticky nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.86);
       backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line-light); }
.nav .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.nav .links { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav a:not(.btn) { color: var(--ink); }
.nav a:not(.btn):hover { color: var(--brass-deep); }
.nav .btn { padding: 10px 20px; }

/* mobile menu: CSS-only (checkbox toggles, no JS) */
.nav-toggle { display: none; }
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
@media (max-width: 680px){
  .burger { display: flex; }
  .nav .links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line-light);
    padding: 8px 0 14px; box-shadow: 0 16px 30px rgba(20,47,28,.08);
  }
  .nav-toggle:checked ~ .wrap .links { display: flex; }
  .nav .links a:not(.btn) { padding: 13px 24px; width: 100%; }
  .nav .links .btn { margin: 10px 24px 0; text-align: center; }
  .nav-toggle:checked ~ .wrap .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .wrap .burger span:nth-child(2){ opacity: 0; }
  .nav-toggle:checked ~ .wrap .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* photo placeholder — stands in for REAL photography */
.ph { position: relative; background: linear-gradient(135deg, var(--forest-tint) 0%, var(--cream-2) 100%);
      border-radius: var(--radius); overflow: hidden; }
.ph::after { content: attr(data-label); position: absolute; inset: 0; display: flex;
      align-items: center; justify-content: center; text-align: center; padding: 20px;
      font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }

/* photo-led hero */
.phero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; padding: clamp(48px,6vw,84px) 0; }
.phero h1 { color: var(--ink); }
.phero .ph { aspect-ratio: 4/5; min-height: 360px; }
@media (max-width: 880px){
  .phero { grid-template-columns: 1fr; padding-top: clamp(24px,5vw,44px); }
  .phero .ph { order: -1; aspect-ratio: 16/11; min-height: 200px; }   /* image-first on mobile */
}
@media (max-width: 680px){ .phero .btn-ghost { display: none; } }      /* one CTA; sticky bar carries the rest */

/* proof row */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
@media (max-width: 680px){ .stats { grid-template-columns: repeat(2,1fr); } }
.stat { padding: 30px 16px; text-align: center; }
.stat .n { font-size: clamp(2rem,3.4vw,2.8rem); font-weight: 700; color: var(--forest); letter-spacing: -0.02em; line-height: 1; }
.stat .l { margin-top: 8px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }

/* programme cards with photo tops */
.pcard { background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.pcard:hover { box-shadow: 0 16px 40px rgba(20,47,28,.09); transform: translateY(-2px); }
.pcard .ph { border-radius: 0; aspect-ratio: 3/2; }
.pcard .body { padding: 24px 26px 28px; }
.pcard h3 { margin-bottom: 6px; }
.pcard p { color: var(--ink-soft); font-size: .96rem; }

/* testimonial */
.quote { max-width: 60ch; margin: 0 auto; text-align: center; }
.quote p { font-size: clamp(1.4rem,2.6vw,2rem); line-height: 1.4; letter-spacing: -0.01em; max-width: none; margin: 0 auto 22px; }
.quote .who { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }

/* sticky bottom action bar — mobile only (the #1 mobile conversion lever) */
.mobile-cta { display: none; }
@media (max-width: 680px){
  .mobile-cta { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.93); backdrop-filter: saturate(140%) blur(12px); border-top: 1px solid var(--line-light); }
  .mobile-cta .btn { flex: 1; text-align: center; padding: 14px 12px; }
  body:has(.mobile-cta) { padding-bottom: 84px; }   /* clear the fixed bar (only when the bar is present) */
}