/* ============================================================
   The Montessori Collective
   Stylesheet v3 — Option E, "Three Beads"

   Colour, type and proportion follow the frozen identity package.
   Order of the beads is always green → blue → red. Never reordered,
   never a fourth. Deep green or paper carries roughly 70% of every
   surface; the beads share the remaining 30%. Red is reserved for
   the primary action and the third bead — it never fills a large area.
   ============================================================ */

:root {
  /* ---- Ground ---------------------------------------------- */
  --green-deep:   #123A2C;   /* primary surface — nav, hero, panels */
  --green-line:   #2E5646;   /* hairlines on deep green */
  --green-mid:    #5C8676;   /* ghost button border on deep green — lifted from the
                                mockup's #4A7263 to clear 3:1 for a UI boundary. */
  --ink:          #17231D;   /* body text, footer ground */
  --paper:        #F4F1E6;   /* page background */
  --paper-card:   #FFFDF9;   /* cards sitting on paper */
  --rule:         #D8D2C3;   /* hairlines, card borders */
  --rule-soft:    #E2DCCD;   /* lighter internal hairline */
  --muted:        #5A665F;   /* secondary text on paper */
  --muted-label:  #5A665F;   /* uppercase labels on paper — the package's Muted
                                token. The mockup's #6E7A72 reads 3.96:1 on paper
                                and fails AA at label sizes. */
  --muted-green:  #A9BFB5;   /* secondary text on deep green */
  --muted-lede:   #B9CCC2;   /* lede text on deep green */
  --muted-nav:    #CFDDD5;   /* nav links on deep green */
  --label-green:  #7FA391;   /* uppercase labels on deep green */
  --footer-text:  #8C9B93;   /* footer links on ink */
  --footer-label: #8C9B93;   /* footer labels on ink — the mockup's #5E6D65 reads
                                2.97:1 and fails AA, including on the legal links. */
  --footer-line:  #2B3A33;   /* footer hairline */
  --white:        #FFFFFF;

  /* ---- Beads — order is fixed ------------------------------ */
  --bead-green:   #22A657;
  --bead-blue:    #1D6FD0;
  --bead-red:     #E23A22;

  /* Action red: the bead red darkened just enough to clear 4.5:1
     against white text. The bead itself always stays #E23A22. */
  --action:       #D8341C;
  --action-deep:  #B82912;
  --quote-blue-soft: #F2F7FE;   /* quote attribution on bead blue — the mockup's
                                   #BCD8F8 reads 3.38:1 and fails AA. */

  /* ---- Type ------------------------------------------------ */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui:      'Archivo', Helvetica, Arial, sans-serif;

  /* ---- Spacing rhythm -------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;
  --space-8: 104px;

  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(56px, 7vw, 96px);

  /* ---- Layout ---------------------------------------------- */
  --container: 1328px;
  --container-narrow: 760px;
  --container-prose: 680px;

  /* Square by default. The only curves in this system are beads. */
  --radius: 0;
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(18, 58, 44, 0.35);
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
a:hover { color: var(--action-deep); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-6) 0; }

::selection { background: var(--bead-blue); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--paper);
  color: var(--green-deep);
  padding: 12px 20px;
  font: 600 12px/1 var(--ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3 {
  font-family: var(--display);
  color: var(--green-deep);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

h1 {
  font-weight: 300;
  font-size: clamp(2.5rem, 5.1vw, 4.625rem);   /* → 74px */
  line-height: 0.98;
  letter-spacing: -0.035em;
}
h2 {
  font-weight: 300;
  font-size: clamp(1.9rem, 3.1vw, 2.75rem);    /* → 44px */
  line-height: 1.06;
  letter-spacing: -0.03em;
}
h3 {
  font-weight: 400;
  font-size: clamp(1.375rem, 1.4vw, 1.625rem); /* → 26px */
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h4 {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-label);
  margin: 0 0 var(--space-3);
  line-height: 1.4;
}

p { margin: 0 0 var(--space-3); }

p.lede {
  font-family: var(--ui);
  font-size: clamp(1rem, 0.5vw + 0.94rem, 1.125rem);
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: var(--space-4);
  max-width: 52ch;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-label);
  margin: 0 0 var(--space-3);
  display: block;
  line-height: 1.5;
}

.prose { max-width: var(--container-prose); }
.prose p { color: var(--ink); }
.prose p + p { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); padding-left: 0.2em; }
.prose li::marker { color: var(--bead-blue); }
.prose blockquote {
  border-left: 3px solid var(--bead-blue);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--green-deep);
  margin: var(--space-5) 0;
}
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

small, .small { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }
.muted { color: var(--muted); }
.italic { font-style: italic; }

/* ============================================================
   Layout primitives
   ============================================================ */
.wrap        { max-width: var(--container);        margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-prose  { max-width: var(--container-prose);  margin: 0 auto; padding: 0 var(--gutter); }

section { padding: var(--section-y) 0; }
section.tight { padding: clamp(40px, 4.5vw, 64px) 0; }

/* Bordered section rhythm — hairline between sections on paper */
section + section:not(.cream):not(.olive):not(.panel--green):not(.panel--blue) { border-top: 1px solid var(--rule); }

section.cream { background: var(--paper-card); }

/* Deep green panel — the primary surface of the system.
   `.olive` retained as an alias so existing markup keeps working. */
section.olive,
section.panel--green,
.heritage-band {
  background: var(--green-deep);
  color: var(--muted-green);
  border-top: 0;
}
section.olive h1, section.olive h2, section.olive h3,
section.panel--green h1, section.panel--green h2, section.panel--green h3,
.heritage-band h1, .heritage-band h2, .heritage-band h3 { color: var(--paper); }

section.olive h4, section.panel--green h4, .heritage-band h4,
section.olive .eyebrow, section.panel--green .eyebrow, .heritage-band .eyebrow { color: var(--label-green); }

section.olive p, section.panel--green p, .heritage-band p { color: var(--muted-green); }
section.olive .prose p, section.panel--green .prose p, .heritage-band .prose p { color: var(--muted-green); }
section.olive p.lede, section.panel--green p.lede, .heritage-band p.lede { color: var(--muted-lede); }

section.olive a, section.panel--green a, .heritage-band a { color: var(--paper); text-decoration-color: rgba(244,241,230,0.4); }
section.olive a:hover, section.panel--green a:hover, .heritage-band a:hover { color: var(--white); }
section.olive li::marker, section.panel--green li::marker, .heritage-band li::marker { color: var(--bead-green); }
section.olive strong, section.panel--green strong, .heritage-band strong { color: var(--paper); }
section.olive blockquote, section.panel--green blockquote, .heritage-band blockquote { color: var(--paper); border-left-color: var(--bead-green); }
section.olive :focus-visible, section.panel--green :focus-visible, .heritage-band :focus-visible { outline-color: var(--paper); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }

/* ============================================================
   Brand furniture — beads and rules
   ============================================================ */
.beads {
  align-self: flex-start;
  display: flex;
  gap: 9px;                       /* gap = 0.5 × bead diameter */
  align-items: center;
  margin: 0 0 var(--space-4);
  flex-shrink: 0;
}
.beads span,
.beads i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.beads span:nth-child(1), .beads i:nth-child(1) { background: var(--bead-green); }
.beads span:nth-child(2), .beads i:nth-child(2) { background: var(--bead-blue); }
.beads span:nth-child(3), .beads i:nth-child(3) { background: var(--bead-red); }

.beads--lg      { gap: 14px; }
.beads--lg span { width: 28px; height: 28px; }
.beads--sm      { gap: 5px; }
.beads--sm span { width: 10px; height: 10px; }
.beads--xs      { gap: 4px; }
.beads--xs span { width: 8px; height: 8px; }

/* Beads reversed out of a coloured ground (quote panel) */
.beads--reversed span { background: var(--white) !important; }
.beads--reversed span:nth-child(2) { opacity: 0.55; }
.beads--reversed span:nth-child(3) { opacity: 0.28; }

/* Full-bleed three-colour rule band */
.bead-rule {
  display: flex;
  height: 14px;
  width: 100%;
}
.bead-rule span { flex: 1; }
.bead-rule span:nth-child(1) { background: var(--bead-green); }
.bead-rule span:nth-child(2) { background: var(--bead-blue); }
.bead-rule span:nth-child(3) { background: var(--bead-red); }
.bead-rule--thin { height: 6px; }

/* A single bead used as a section/card marker */
.bead-dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bead-green);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}
.bead-dot--green { background: var(--bead-green); }
.bead-dot--blue  { background: var(--bead-blue); }
.bead-dot--red   { background: var(--bead-red); }
.bead-dot--sm { width: 20px; height: 20px; }

/* The old botanical ornament slot — reduced to a bead rule.
   The identity carries no illustration. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: var(--space-5) 0;
}
.ornament svg { display: none; }
.ornament::before,
.ornament::after { content: none; }
.ornament::before {
  content: '';
  display: block;
  width: 96px;
  height: 6px;
  background: linear-gradient(to right,
    var(--bead-green) 0 33.333%,
    var(--bead-blue) 33.333% 66.666%,
    var(--bead-red) 66.666% 100%);
}

/* ============================================================
   Invitation bar
   ============================================================ */
.invite-bar {
  background: var(--ink);
  color: var(--muted-green);
  text-align: center;
  padding: 10px var(--gutter);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.invite-bar a { color: var(--paper); text-decoration-color: rgba(244,241,230,0.45); }
.invite-bar a:hover { color: var(--white); }

/* ============================================================
   Header / navigation
   ============================================================ */
.site-header {
  background: var(--green-deep);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.masthead {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  color: var(--paper);
  flex-shrink: 0;
}
.masthead:hover { color: var(--paper); }
.masthead__beads {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.masthead__beads span {
  width: 15px; height: 15px; border-radius: 50%;
  display: block;
}
.masthead__beads span:nth-child(1) { background: var(--bead-green); }
.masthead__beads span:nth-child(2) { background: var(--bead-blue); }
.masthead__beads span:nth-child(3) { background: var(--bead-red); }

.masthead__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
  display: block;
  max-width: 8.5em;
}
.masthead__sub {
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label-green);
  margin-top: 5px;
  display: block;
}
.masthead__tert { display: none; }

/* Below 24px the wordmark drops away — beads alone. */
.masthead--mark-only .masthead__name,
.masthead--mark-only .masthead__sub { display: none; }

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav a {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted-nav);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
.nav a:hover { color: var(--paper); border-bottom-color: var(--bead-green); }
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--bead-red); }

.nav .nav__cta {
  background: var(--action);
  color: var(--white);
  padding: 12px 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 0;
  margin-left: 6px;
}
.nav .nav__cta:hover { background: var(--action-deep); color: var(--white); border-bottom-color: transparent; }
.nav .nav__cta[aria-current="page"] { color: var(--white); border-bottom-color: transparent; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--green-mid);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--paper);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
}
.nav-toggle:hover { background: var(--green-line); }

@media (max-width: 1080px) {
  .nav { gap: 20px; }
  .nav a { font-size: 12.5px; }
}
@media (max-width: 920px) {
  .site-header__inner { position: relative; }
  .nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--green-deep);
    border-top: 1px solid var(--green-line);
    padding: var(--space-2) var(--gutter) var(--space-4);
  }
  .nav.open a {
    padding: 14px 0;
    border-bottom: 1px solid var(--green-line);
    font-size: 15px;
    letter-spacing: 0.02em;
  }
  .nav.open a:hover { border-bottom-color: var(--green-line); }
  .nav.open .nav__cta {
    margin-top: var(--space-4);
    margin-left: 0;
    text-align: center;
    border-bottom: 0;
    font-size: 12px;
    letter-spacing: 0.14em;
  }
  .nav-toggle { display: inline-block; }
}

@media (max-width: 560px) {
  .site-header__inner { gap: var(--space-3); }
  .masthead { gap: 10px; min-width: 0; }
  .masthead__beads span { width: 12px; height: 12px; }
  .masthead__name { font-size: 16px; }
  .masthead__sub { display: none; }
  .nav-toggle { padding: 9px 11px; font-size: 10px; letter-spacing: 0.1em; flex-shrink: 0; }
}

@media (max-width: 380px) {
  .masthead__name { font-size: 15px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background: var(--green-deep);
  color: var(--muted-lede);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
  position: relative;
  z-index: 2;
  text-align: left;
}
.hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 7.5vw, 104px);
}
.hero__body > * { margin: 0; }

.hero h1 { color: var(--paper); max-width: 19ch; margin: 0; }
.hero p.lede { color: var(--muted-lede); max-width: 46ch; margin: 0; font-size: clamp(1rem, 0.6vw + 0.95rem, 1.125rem); }
.hero .eyebrow { color: var(--label-green); margin: 0; }

.hero__actions {
  align-self: flex-start;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding-top: var(--space-1);
}

.hero__media {
  position: relative;
  align-self: stretch;
  min-height: 420px;
  min-width: 0;
  background: var(--green-line);
  overflow: hidden;
}
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Single-column hero (inner pages, no media) */
.hero--single .hero__inner { grid-template-columns: minmax(0, 1fr); }
.hero--single .hero__body {
  max-width: none;
  padding: clamp(48px, 5.5vw, 80px) 0 clamp(48px, 5.5vw, 80px);
}
.hero--single h1 { max-width: 20ch; }
.hero--single p.lede { max-width: 56ch; }

/* Retired ornaments from the previous identity. */
.hero__crest, .hero__bg-leaf { display: none !important; }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__body { padding-bottom: clamp(40px, 6vw, 64px); }
  .hero__media { min-height: 280px; order: 2; margin: 0 calc(var(--gutter) * -1); }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 26px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  line-height: 1.2;
  text-align: center;
}

/* Primary — deep green on paper, paper on deep green */
.btn--primary { background: var(--green-deep); color: var(--paper); border-color: var(--green-deep); }
.btn--primary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

section.olive .btn--primary,
section.panel--green .btn--primary,
.heritage-band .btn--primary,
.hero .btn--primary {
  background: var(--paper); color: var(--green-deep); border-color: var(--paper);
}
section.olive .btn--primary:hover,
section.panel--green .btn--primary:hover,
.heritage-band .btn--primary:hover,
.hero .btn--primary:hover { background: var(--white); color: var(--green-deep); border-color: var(--white); }

/* Accent — the action red. The only large use of red in the system. */
.btn--accent { background: var(--action); color: var(--white); border-color: var(--action); }
.btn--accent:hover { background: var(--action-deep); color: var(--white); border-color: var(--action-deep); }
section.olive .btn--accent,
section.panel--green .btn--accent,
.heritage-band .btn--accent,
.hero .btn--accent { background: var(--action); color: var(--white); border-color: var(--action); }

/* Ghost — outline */
.btn--ghost { background: transparent; color: var(--green-deep); border-color: var(--green-deep); }
.btn--ghost:hover { background: var(--green-deep); color: var(--paper); }

section.olive .btn--ghost,
section.panel--green .btn--ghost,
.heritage-band .btn--ghost,
.hero .btn--ghost { color: var(--paper); border-color: var(--green-mid); background: transparent; }
section.olive .btn--ghost:hover,
section.panel--green .btn--ghost:hover,
.heritage-band .btn--ghost:hover,
.hero .btn--ghost:hover { background: var(--paper); color: var(--green-deep); border-color: var(--paper); }

/* Link — a rule under a label, not a button */
.btn--link {
  background: transparent;
  color: var(--green-deep);
  padding: 10px 0;
  border: 0;
  border-bottom: 1.5px solid var(--bead-red);
  letter-spacing: 0.1em;
}
.btn--link:hover { color: var(--action-deep); border-bottom-color: var(--action-deep); background: transparent; }

section.olive .btn--link,
section.panel--green .btn--link,
.heritage-band .btn--link,
.hero .btn--link { color: var(--paper); border-bottom-color: var(--bead-green); }
section.olive .btn--link:hover,
section.panel--green .btn--link:hover,
.heritage-band .btn--link:hover,
.hero .btn--link:hover { color: var(--white); border-bottom-color: var(--white); }

.btn--small { padding: 12px 18px; font-size: 11px; }

/* ============================================================
   Split section head — label + heading in a narrow left column
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.split__head { display: flex; flex-direction: column; }
.split__head h2 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.08; margin-bottom: var(--space-3); }
.split__head p { color: var(--muted); margin: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 900px) { .split--even { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Stat band
   ============================================================ */
.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
}
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat__num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--green-deep);
}
.stat__num--word { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.stat__label {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-label);
  line-height: 1.5;
}
section.olive .stat__num, section.panel--green .stat__num { color: var(--paper); }
section.olive .stat__label, section.panel--green .stat__label { color: var(--label-green); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  transition: border-color 200ms ease;
}
.card:hover { border-color: var(--green-mid); }
.card h3 { margin: 0; }
.card .eyebrow { margin: 0 0 var(--space-1); }
.card p { color: var(--muted); font-size: 15px; margin: 0; }
.card p + p { margin-top: var(--space-3); }
.card__icon { display: none; }
.card__cta { margin-top: auto; padding-top: var(--space-3); }

section.olive .card,
section.panel--green .card,
.heritage-band .card {
  background: transparent;
  border-color: var(--green-line);
  padding: 34px;
}
section.olive .card:hover, section.panel--green .card:hover { border-color: var(--muted-green); }
section.olive .card h3, section.panel--green .card h3 { color: var(--paper); }
section.olive .card p, section.panel--green .card p { color: var(--muted-green); }

/* Hairline tile grid — cards separated by a 1px rule, no gaps.
   Reference: 2px gap over a rule-coloured ground. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; } }
.tile {
  background: var(--paper-card);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.tile h3 { margin: 0; color: var(--ink); }
.tile p { color: var(--muted); font-size: 15px; margin: 0; }

section.olive .tiles, section.panel--green .tiles { background: var(--green-line); border-color: var(--green-line); }
section.olive .tile, section.panel--green .tile { background: var(--green-deep); }
section.olive .tile h3, section.panel--green .tile h3 { color: var(--paper); }
section.olive .tile p, section.panel--green .tile p { color: var(--muted-green); }

/* Audience door */
.door {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 40px 32px;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.door:hover { border-color: var(--green-deep); color: var(--ink); background: var(--white); }
.door .eyebrow, .door .door__who { color: var(--muted-label); margin: 0; }
.door h3 { color: var(--green-deep); margin: 0; }
.door p { color: var(--muted); font-size: 15px; margin: 0; }
.door__arrow {
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--action-deep);
}
.door:hover .door__arrow { color: var(--action-deep); }

/* Bead marker at the top of a door / card set */
.door:nth-child(3n+1)::before,
.card--beaded:nth-child(3n+1)::before { background: var(--bead-green); }
.door:nth-child(3n+2)::before,
.card--beaded:nth-child(3n+2)::before { background: var(--bead-blue); }
.door:nth-child(3n+3)::before,
.card--beaded:nth-child(3n+3)::before { background: var(--bead-red); }
.door::before, .card--beaded::before {
  content: '';
  display: block;
  width: 24px; height: 24px;
  border-radius: 50%;
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

/* School card */
.school-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 200ms ease;
}
.school-card:hover { border-color: var(--green-deep); color: var(--ink); }
.school-card__image {
  aspect-ratio: 16 / 10;
  background: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--label-green);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-3);
  overflow: hidden;
}
.school-card__image img { width: 100%; height: 100%; object-fit: cover; }
.school-card__image--empty {
  background: var(--paper-card);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.school-card__body { padding: 28px; display: flex; flex-direction: column; gap: var(--space-3); }
.school-card__location {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-label);
  margin: 0;
}
.school-card h3 { font-size: 1.5rem; margin: 0; }
.school-card__meta { font-size: 14px; color: var(--muted); margin: 0; }

/* Endorsement lockup — a member school setting the Collective beneath its own name */
.endorsement {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   Quote panel — the one full-bleed use of bead blue
   ============================================================ */
.quote-panel {
  background: var(--bead-blue);
  color: var(--white);
  padding: clamp(56px, 6.5vw, 88px) 0;
  border-top: 0;
}
.quote-panel .wrap { display: grid; align-items: stretch; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px, 5vw, 80px); }
.quote-panel__body { justify-content: center; }
.quote-panel--solo .wrap { grid-template-columns: minmax(0, 1fr); max-width: var(--container-narrow); }
@media (max-width: 900px) { .quote-panel .wrap { grid-template-columns: minmax(0, 1fr); } }

.quote-panel__body { display: flex; flex-direction: column; gap: var(--space-4); }
.quote-panel blockquote,
.quote-panel__q {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.875rem, 3.3vw, 2.75rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0;
  padding: 0;
  border: 0;
  text-wrap: pretty;
}
.quote-panel__attr {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quote-blue-soft);
  margin: 0;
}
.quote-panel__media { position: relative; min-height: 340px; align-self: stretch; background: rgba(255,255,255,0.12); overflow: hidden; }
.quote-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-panel a { color: var(--white); }
.quote-panel :focus-visible { outline-color: var(--white); }

/* ============================================================
   Numbered pathway
   ============================================================ */
.steps { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.step__num {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}
.step__num::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
  background: var(--bead-green);
}
.step:nth-child(3n+2) .step__num::before { background: var(--bead-blue); }
.step:nth-child(3n+3) .step__num::before { background: var(--bead-red); }
.step__body { display: flex; flex-direction: column; gap: 6px; }
.step__body strong,
.step__title { font-size: 16px; font-weight: 600; color: var(--ink); }
.step__body p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }

section.olive .steps, section.panel--green .steps { border-top-color: var(--green-line); }
section.olive .step, section.panel--green .step { border-bottom-color: var(--green-line); }
section.olive .step__num, section.panel--green .step__num { color: var(--paper); }
section.olive .step__body strong, section.panel--green .step__body strong { color: var(--paper); }
section.olive .step__body p, section.panel--green .step__body p { color: var(--muted-green); }

/* ============================================================
   Closing panel — centred call to action
   ============================================================ */
.closing { text-align: center; }
.closing .wrap, .closing .wrap-narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.closing h2 {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 24ch;
  margin: 0;
}
.closing p { max-width: 52ch; margin: 0; font-size: 17px; color: var(--muted); }
.closing .beads { margin: 0; }
.closing .hero__actions, .closing .actions { justify-content: center; }

/* ============================================================
   Filter chips
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 0;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--ui);
  text-decoration: none;
}
.chip--active { background: var(--green-deep); color: var(--paper); border-color: var(--green-deep); }

/* ============================================================
   Forms
   ============================================================ */
.form { display: grid; gap: var(--space-4); max-width: 620px; }
.form-row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-label);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  font-family: var(--ui);
  font-size: 16px;
  padding: 14px 16px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--green-deep);
  box-shadow: inset 0 -2px 0 0 var(--bead-blue);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field__hint { font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }

section.olive .field label, section.panel--green .field label { color: var(--label-green); }
section.olive .field input, section.olive .field textarea, section.olive .field select,
section.panel--green .field input, section.panel--green .field textarea, section.panel--green .field select {
  background: var(--green-line); border-color: var(--green-mid); color: var(--paper);
}

/* ============================================================
   Definition list
   ============================================================ */
.deflist { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.deflist > div { padding: var(--space-5) 0; border-bottom: 1px solid var(--rule); }
.deflist dt {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--green-deep);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.deflist dd { margin: 0; color: var(--ink); }
.deflist dd p:last-child { margin-bottom: 0; }
.badge {
  display: inline-block;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--green-deep);
  color: var(--paper);
  border-radius: 0;
  vertical-align: middle;
}
.badge--red { background: var(--action); color: var(--white); }

section.olive .deflist, section.panel--green .deflist { border-top-color: var(--green-line); }
section.olive .deflist > div, section.panel--green .deflist > div { border-bottom-color: var(--green-line); }
section.olive .deflist dt, section.panel--green .deflist dt { color: var(--paper); }
section.olive .deflist dd, section.panel--green .deflist dd { color: var(--muted-green); }

/* ============================================================
   Callouts
   ============================================================ */
.callout {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--bead-green);
  padding: var(--space-5);
  border-radius: 0;
  margin: var(--space-5) 0;
}
.callout h4 { color: var(--muted-label); margin-bottom: var(--space-3); }
.callout p { color: var(--muted); font-size: 15px; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); font-weight: 600; }

.callout + .callout,
.callout-set > *:nth-child(3n+2) .callout { border-left-color: var(--bead-blue); }
.callout + .callout + .callout,
.callout-set > *:nth-child(3n+3) .callout { border-left-color: var(--bead-red); }
.callout + .callout + .callout + .callout { border-left-color: var(--bead-green); }
.callout + .callout + .callout + .callout + .callout { border-left-color: var(--bead-blue); }
.callout + .callout + .callout + .callout + .callout + .callout { border-left-color: var(--bead-red); }

.callout--olive,
.callout--green {
  background: var(--green-deep);
  border-color: var(--green-deep);
  border-left-color: var(--bead-red);
  color: var(--muted-green);
}
.callout--olive h4, .callout--green h4 { color: var(--label-green); }
.callout--olive p, .callout--green p { color: var(--muted-green); }
.callout--olive strong, .callout--green strong { color: var(--paper); }

section.olive .callout, section.panel--green .callout {
  background: transparent;
  border-color: var(--green-line);
  border-left-color: var(--bead-red);
}

/* ============================================================
   Convenor block
   ============================================================ */
.convenor {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 760px) { .convenor { grid-template-columns: minmax(0, 1fr); } }
.convenor__portrait {
  width: 100%;
  aspect-ratio: 5 / 6;
  background: var(--green-deep);
  border: 0;
  border-radius: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
  color: var(--label-green);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  overflow: hidden;
}
.convenor__portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .convenor__portrait { max-width: 240px; } }
.convenor__sig {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--green-deep);
  margin-top: var(--space-4);
  margin-bottom: 4px;
}
.convenor__role {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-label);
  margin: 0;
}

/* ============================================================
   Quiet subordinate note
   ============================================================ */
.quiet-note {
  text-align: center;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--muted);
}
.quiet-note a { font-weight: 500; }

/* ============================================================
   Status pill
   ============================================================ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--muted-label);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  align-self: flex-start;
  width: fit-content;
}
.status-pill--draft::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--bead-red);
  border-radius: 50%;
  flex-shrink: 0;
}
section.olive .status-pill, section.panel--green .status-pill, .hero .status-pill {
  border-color: var(--green-mid); color: var(--label-green);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--footer-text);
  padding: clamp(48px, 5vw, 64px) 0 40px;
  margin-top: 0;
}
.site-footer a { color: var(--footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 3.5vw, 48px);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-grid h4 {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-label);
  margin: 0 0 var(--space-3);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-grid a { font-size: 14px; }

.footer-masthead { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-masthead .masthead { padding: 0; }
.footer-masthead .masthead__name { color: var(--paper); font-size: 18px; }
.footer-masthead .masthead__sub  { color: var(--footer-label); }
.footer-masthead p { color: var(--footer-text); font-size: 14px; margin: 0; max-width: 34ch; }

.footer-base {
  border-top: 1px solid var(--footer-line);
  margin-top: clamp(40px, 4.5vw, 56px);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--footer-label);
  font-size: 12px;
}
.footer-base .legal-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.footer-base a { font-size: 12px; color: var(--footer-label); }
.footer-base a:hover { color: var(--paper); }

/* ============================================================
   Utility
   ============================================================ */
.text-center { text-align: center; }
.text-center .lede, .text-center p.lede { margin-left: auto; margin-right: auto; }
.text-center .beads { justify-content: center; }
.flex { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.divider { border-top: 1px solid var(--rule); margin: var(--space-6) 0; }
.hp { display: none !important; }

/* Honour a reduced-motion preference. */
@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;
  }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  .site-header, .site-footer, .nav-toggle, .invite-bar, .bead-rule { display: none; }
  body { background: #fff; color: #000; }
  .hero, section.olive, section.panel--green, .heritage-band, .quote-panel {
    background: #fff !important; color: #000 !important;
  }
  .hero h1, section.olive h2, .quote-panel__q { color: #000 !important; }
  a { text-decoration: underline; }
}