/* ============================================================
   SPROUTS ACADEMY
   Warm, editorial, human. Built from scratch.

   Type   Cormorant Garamond (display) / DM Sans (text)
   Green  #1E6B3E   Cream #F7F4EF   Ink #1C1C1C
   Gray   #EEEBE4   White #FFFFFF
   ============================================================ */

:root {
  --green:       #1E6B3E;
  --green-deep:  #155230;
  --cream:       #F7F4EF;
  --gray:        #EEEBE4;
  --white:       #FFFFFF;
  --ink:         #1C1C1C;
  --ink-soft:    #54534E;
  --line:        #D8D2C6;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --pad: clamp(1.5rem, 5vw, 5rem);
  --t: 0.2s ease;
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------------- type ---------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.002em;
  color: var(--ink);
}

h1 { font-size: clamp(2.9rem, 6.5vw, 6rem); }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.6rem); }
h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h4 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

p { max-width: 64ch; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}

.lead {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}

em, .italic { font-style: italic; }

/* ---------------- layout ---------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.section--sm { padding-block: clamp(3rem, 6vw, 5rem); }

.bg-cream { background: var(--cream); }
.bg-gray  { background: var(--gray); }
.bg-white { background: var(--white); }
.bg-green { background: var(--green); color: var(--cream); }
.bg-green h1, .bg-green h2, .bg-green h3, .bg-green h4 { color: var(--cream); }
.bg-green .eyebrow { color: #B7D6C1; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}
.tick {
  width: 56px;
  height: 2px;
  background: var(--green);
  border: 0;
}

/* asymmetric editorial splits */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
@media (min-width: 860px) {
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--4-8 { grid-template-columns: 4fr 8fr; }
  .split--6-6 { grid-template-columns: 1fr 1fr; }
  .split.middle { align-items: center; }
  .split.bottom { align-items: end; }
}

.measure { max-width: 58ch; }
.offset-r { margin-left: auto; }

/* ---------------- buttons / links ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { background: var(--green); border-color: var(--green); }

.btn--outline {
  background: transparent;
  color: var(--ink);
}
.btn--outline:hover { background: var(--green); border-color: var(--green); color: var(--cream); }

.btn--ondark {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}
.btn--ondark:hover { background: transparent; color: var(--cream); border-color: var(--cream); }

.link {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--green);
  transition: color var(--t);
}
.link:hover { color: var(--green); }

/* ============================================================
   NAVIGATION  (injected by main.js)
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.nav.scrolled {
  box-shadow: 0 10px 30px -22px rgba(28, 28, 28, 0.55);
  border-bottom-color: transparent;
}
.nav.scrolled .nav__bar { padding-block: 0.65rem; }
.nav.scrolled .nav__logo img { height: 110px; }
@media (max-width: 980px) { .nav.scrolled .nav__logo img { height: 78px; } }
.nav__bar { transition: padding 0.3s ease; }
.nav__bar {
  max-width: 1360px;
  margin-inline: auto;
  padding: 1.1rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__logo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.nav__logo span { color: var(--green); }
/* Stacked brand logo (mark + wordmark) sized for the nav bar. */
.nav__logo img { height: 152px; width: auto; display: block; transition: height var(--t); }
@media (max-width: 980px) { .nav__logo img { height: 96px; } }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 1.15rem);
  margin-left: auto;
}
.nav__links a {
  position: relative;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  padding-block: 0.4rem;
  transition: color var(--t);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--green);
  transition: width var(--t);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { width: 100%; }
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-shrink: 0;
}
.nav__social { display: flex; gap: 0.55rem; }
.nav__social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.nav__social a:hover { color: var(--cream); background: var(--green); border-color: var(--green); }
.nav__social svg { width: 15px; height: 15px; }

.nav__cta {
  padding: 0.7rem 1.4rem;
  transition: background var(--t), border-color var(--t), color var(--t),
              transform 0.25s ease, box-shadow 0.25s ease;
}
.nav__cta:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 26px -8px rgba(30, 107, 62, 0.55);
}

.nav__toggle {
  display: none;
  width: 40px; height: 32px;
  background: none; border: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}
.nav__toggle span {
  height: 1.5px; width: 24px;
  background: var(--ink);
  transition: transform var(--t), opacity var(--t);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: clamp(3rem, 7vw, 6rem); }
.hero h1 { max-width: 14ch; }
.hero__sub { max-width: 38ch; }
.hero__sub p { margin-bottom: 2rem; }

.video-ph {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  aspect-ratio: 16 / 7;
  background: var(--gray);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-ph video { width: 100%; height: 100%; object-fit: cover; }
/* Subtle overlay for text contrast once a real video is dropped in. */
.video-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,28,28,0.10) 0%, rgba(28,28,28,0.22) 100%);
  pointer-events: none;
}
.video-ph__note {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Full-bleed feature video (home — stretches across the screen) */
.video-full {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--gray);
  border-block: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.video-full video,
.video-full img { width: 100%; height: 100%; object-fit: cover; }

/* Home photo strip */
.photo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
@media (min-width: 720px) { .photo-row { grid-template-columns: repeat(3, 1fr); } }
.photo-row img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
}
.video-full::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,28,28,0.08) 0%, rgba(28,28,28,0.18) 100%);
  pointer-events: none;
}
@media (max-width: 680px) { .video-full { aspect-ratio: 4 / 3; } }

/* Logo lockup on location cards.
   align-self stops the flex column (align-items: stretch) from
   stretching the image across the card width and distorting it. */
.loc__logo {
  height: 64px;
  width: auto;
  max-width: 200px;
  align-self: flex-start;
  margin-bottom: 1.5rem;
}
.apply-link {
  color: var(--green);
  border-bottom: 1px solid var(--green);
  transition: opacity var(--t);
}
.apply-link:hover { opacity: 0.7; }

/* page header for interior pages */
.page-head { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 3vw, 3rem); }
.page-head .eyebrow { display: block; margin-bottom: 1.25rem; }
.page-head h1 { max-width: 16ch; }
.page-head .lead { margin-top: 1.75rem; max-width: 52ch; }

/* ============================================================
   IMAGE PLACEHOLDERS
   ============================================================ */
.ph {
  background: var(--gray);
  border: 1px dashed var(--line);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--ink-soft);
}
.ph span {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.ph--tall { aspect-ratio: 3 / 4; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1 / 1; }

/* ============================================================
   LOCATION CARDS  (home)
   ============================================================ */
.locs {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 760px) { .locs { grid-template-columns: 1fr 1fr; } }

.loc {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(2rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
}
.loc:hover {
  border-color: var(--green);
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -28px rgba(28, 28, 28, 0.4);
}
.loc__tag {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.25rem;
}
.loc h3 { margin-bottom: 0.75rem; }
.loc p { color: var(--ink-soft); }
.loc__meta {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.9;
}
.loc__meta a:hover { color: var(--green); }

/* ============================================================
   DEVELOPMENT AREAS  (garden / home — editorial, not icon grid)
   ============================================================ */
.areas { display: grid; gap: 0; }
.area {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.area:last-child { border-bottom: 1px solid var(--line); }
.area__label {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--green);
  min-width: 8ch;
}
.area p { color: var(--ink-soft); margin: 0; }

/* ============================================================
   TEAM BIOS  (heart)
   ============================================================ */
/* Two bios side by side (photo on top), zoomed out from the old list */
.bios {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  max-width: 1120px;
  margin-inline: auto;
  align-items: start;
}
@media (min-width: 780px) { .bios { grid-template-columns: 1fr 1fr; } }
.bio { display: flex; flex-direction: column; }
.bio__photo {
  aspect-ratio: 3 / 2;
  width: 100%;
  overflow: hidden;
  background: var(--gray);
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.bio__photo--portrait { aspect-ratio: 3 / 4; }
.bio__photo--portrait img { object-position: center 18%; }
.bio__photo--empty {
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bio__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.96);
  transition: transform 0.5s ease;
}
.bio:hover .bio__photo img { transform: scale(1.03); }
.bio__name { margin-bottom: 0.35rem; font-size: clamp(1.55rem, 2.4vw, 2.1rem); }
.bio__role {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.5;
}
.bio__rule { margin: 1.1rem 0; max-width: 180px; }
.bio__creds {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.bio__text p { color: var(--ink-soft); font-size: 0.98rem; }

/* Pages that opt out of scroll-reveal (content shown immediately) */
.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   PROGRAMS  (stems — magazine listing)
   ============================================================ */
.prog-intro { max-width: 56ch; }
.prog {
  display: block;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}
.prog:last-of-type { border-bottom: 1px solid var(--line); }
/* Full-width program heading, then schedule + description beneath */
.prog__name { margin-bottom: 0.35rem; }
.prog__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--green);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.prog__cols { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 3rem); }
@media (min-width: 820px) { .prog__cols { grid-template-columns: 4fr 8fr; } }
.prog__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 680px) { .prog__photos { grid-template-columns: 1fr 1fr; } }
.prog__photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.prog__time {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  line-height: 1.7;
}
.prog__body p { color: var(--ink-soft); }
.prog__body .todo {
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.8;
}

/* ============================================================
   COMMUNITY  (village)
   ============================================================ */
.pullquote {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.18;
  color: var(--ink);
}
.initiatives { display: flex; flex-direction: column; }
.initiative {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .initiative { grid-template-columns: 4fr 8fr; }
}
.initiative:last-child { border-bottom: 1px solid var(--line); }
.initiative h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.initiative__meta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 0.6rem;
}
.initiative p { color: var(--ink-soft); }

/* ============================================================
   ADMISSIONS  (roots)
   ============================================================ */
.prose p { color: var(--ink-soft); margin-bottom: 1.4rem; max-width: 60ch; }
.prose p:last-child { margin-bottom: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

.addr-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 680px) { .addr-pair { grid-template-columns: 1fr 1fr; } }
.addr h4 { font-family: var(--serif); margin-bottom: 0.75rem; }
.addr p { color: var(--ink-soft); line-height: 1.9; }
.addr .when { color: var(--green); }

/* ============================================================
   CONTACT  (bloom)
   ============================================================ */
.contact { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 820px) { .contact { grid-template-columns: 5fr 7fr; } }
.contact__group { margin-bottom: 2.25rem; }
.contact__group h4 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.6rem;
}
.contact__group a, .contact__group p { color: var(--ink); }
.contact__group a:hover { color: var(--green); }
.contact__big a {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
  transition: color var(--t);
}
.contact__big a:hover { color: var(--green); }

/* ============================================================
   POPUP  (injected by main.js)
   ============================================================ */
.pop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(28, 28, 28, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pop.open { opacity: 1; visibility: visible; }
.pop__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: clamp(2.5rem, 5vw, 3.5rem);
  transform: translateY(48px);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pop.open .pop__card { transform: none; }
.pop__close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink-soft);
  display: grid; place-items: center;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pop__close:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.pop__logo { height: 92px; width: auto; margin: 0 auto 1.25rem; display: block; }
.pop__cta { margin-top: 1.75rem; }
.pop__card .eyebrow { display: block; margin-bottom: 1rem; }
.pop__card h3 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin-bottom: 0.6rem; }
.pop__when {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--green);
  margin-bottom: 1.5rem;
}
.pop__addr { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.7; }

/* ============================================================
   FOOTER  (injected by main.js)
   ============================================================ */
.foot {
  background: var(--ink);
  color: #BDBBB4;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.25rem;
}
.foot a { color: #BDBBB4; transition: color var(--t); }
.foot a:hover { color: var(--cream); }
.foot__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
@media (min-width: 720px) { .foot__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.foot__brand h4 {
  font-family: var(--serif);
  color: var(--cream);
  font-size: 1.7rem;
  margin-bottom: 1.1rem;
}
.foot__brand p { font-size: 0.95rem; line-height: 1.8; margin-bottom: 1.1rem; max-width: 32ch; }
.foot h5 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 1.2rem;
}
.foot ul li { margin-bottom: 0.7rem; font-size: 0.95rem; }
.foot__social { display: flex; gap: 0.6rem; margin-top: 0.5rem; }
.foot__social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(247, 244, 239, 0.2);
  border-radius: 50%;
}
.foot__social a:hover { background: var(--green); border-color: var(--green); color: var(--cream); }
.foot__social svg { width: 16px; height: 16px; }
.foot__bottom {
  border-top: 1px solid rgba(247, 244, 239, 0.14);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.foot__portals { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
/* Block content is shown immediately — the ONLY entrance animation is
   the heading word-pop below. (.reveal is kept as a hook but no longer
   hides content, so nothing fades/slides except heading words.) */
.reveal { opacity: 1; transform: none; }

/* Heading word-pop: each word rises out of a mask, staggered.
   One-shot CSS transition triggered by an IntersectionObserver in
   main.js — no continuous JS, no will-change, so it stays smooth. */
.wsplit .wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.wsplit .wi {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.5s ease;
}
.wsplit.in .wi { transform: none; opacity: 1; }
/* Once risen, drop the mask so descenders (g, p, y) aren't clipped. */
.wsplit.done .wm { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .wsplit .wi { transform: none; opacity: 1; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.001ms !important; }
}

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
@media (max-width: 1140px) { .nav__social { display: none; } }

@media (max-width: 980px) {
  .nav__toggle { display: flex; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 340px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.4rem;
    margin-left: 0;
    padding: 2rem var(--pad);
    background: var(--cream);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }
  .nav__links.open { transform: none; }
  .nav__links a { font-size: 0.95rem; }
}

/* ============================================================
   PREMIUM MOTION LAYER  (driven by js/enhance.js + GSAP)
   ============================================================ */

/* Cards that receive a 3D tilt on mouse move */
.bio, .prog { transition: transform 0.3s ease; transform-style: preserve-3d; }

/* Masked word-rise reveal (used site-wide, like the hero headline).
   No permanent will-change: hundreds of split words each holding a
   compositor layer caused site-wide jank. GSAP manages it per-tween
   and the masks are un-clipped once the animation finishes. */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span { display: inline-block; }
/* Masked block-rise reveal (paragraphs, buttons, images, placeholders) */
.mask-rise { display: block; overflow: hidden; }
.mask-rise.inline { display: inline-block; }

/* Custom cursor (desktop, fine pointer only) — simple 8px dot */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--green);
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
  transition: opacity 0.2s ease;
}
.cursor.is-hidden { opacity: 0; }

@media (hover: hover) and (pointer: fine) {
  body.cursor-on,
  body.cursor-on a,
  body.cursor-on button,
  body.cursor-on .btn,
  body.cursor-on .link,
  body.cursor-on input,
  body.cursor-on select,
  body.cursor-on textarea { cursor: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
  .bio, .prog { transform: none !important; }
}

/* ============================================================
   ADMISSIONS — process steps + FAQ accordion (The Roots)
   ============================================================ */
.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 2.5vw, 3rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) { .step { grid-template-columns: 4fr 8fr; } }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__no {
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.6rem;
}
.step h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.step__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}
.step__body p { color: var(--ink-soft); margin-bottom: 1rem; }
.step__body p:last-child { margin-bottom: 0; }
.step__body a { border-bottom: 1px solid var(--green); }
.step__body a:hover { color: var(--green); }

/* FAQ accordion (native details/summary) */
.faq { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.faq__cat {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--green);
  margin: clamp(2rem, 4vw, 3rem) 0 0.25rem;
}
.faq__cat:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.4rem 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] summary { color: var(--green); }
.faq summary:hover { color: var(--green); }
.faq__a { padding: 0 0 1.6rem; max-width: 70ch; }
.faq__a p { color: var(--ink-soft); margin-bottom: 1rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   SLIDESHOW (The Village — swipeable, auto-advancing)
   ============================================================ */
.slideshow {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}
/* Flush variant: sits inside an already-padded .wrap with no extra inset */
.slideshow--flush { max-width: none; margin-inline: 0; padding-inline: 0; }
.slides {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; }
.slide .ph { width: 100%; aspect-ratio: 16 / 9; }
.slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
}
.slideshow__dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1.25rem;
}
.slideshow__dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background var(--t), transform var(--t);
}
.slideshow__dots button.active { background: var(--green); transform: scale(1.35); }

/* ============================================================
   PARENT VOICES (The Bloom — videos + testimonial slideshow)
   ============================================================ */
.video-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}
@media (min-width: 720px) { .video-row { grid-template-columns: repeat(3, 1fr); } }
.video-row .ph { aspect-ratio: 9 / 16; }
.video-row video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
  border-radius: 2px;
  display: block;
}

.tcard {
  background: var(--white);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
}
.tcard__quote {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.35;
  color: var(--ink);
}
/* Preview: clamp to a few lines until expanded via "Read more" */
.tcard__quote.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tcard__more {
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0 0 0.25rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--green);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  cursor: pointer;
  transition: opacity var(--t);
}
.tcard__more:hover { opacity: 0.65; }
.tcard__name {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

/* Multi-card testimonial view: 2-3 boxes visible at once.
   flex-start so expanding one card doesn't stretch the others. */
.slideshow--multi .slides { align-items: flex-start; }
.slideshow--multi .slide { flex: 0 0 86%; }
@media (min-width: 640px)  { .slideshow--multi .slide { flex: 0 0 47%; } }
@media (min-width: 1000px) { .slideshow--multi .slide { flex: 0 0 31.5%; } }

/* ============================================================
   SUBSCRIBE — "Plant yourself here" (links to Cultivated ESP)
   ============================================================ */
.subscribe { max-width: 720px; margin-inline: auto; text-align: center; }
.subscribe h2 { margin: 0.75rem 0 1rem; }
.subscribe .lead { margin: 0 auto 2.25rem; max-width: 52ch; }
.subscribe__form { text-align: left; }
.subscribe__names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.subscribe__email { display: flex; gap: 0.75rem; }
.subscribe input {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 2px;
}
.subscribe input::placeholder { color: #9a968d; }
.subscribe input:focus { outline: none; border-color: var(--green); }
.subscribe__email .btn { flex-shrink: 0; }
.subscribe__label {
  margin: 1.6rem 0 0.85rem;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.subscribe__roles { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.role {
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.role:hover { border-color: var(--green); color: var(--ink); }
.role.sel { background: var(--green); border-color: var(--green); color: var(--cream); }
.subscribe__note {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.subscribe__done { color: var(--green); font-weight: 500; }
@media (max-width: 560px) {
  .subscribe__names { grid-template-columns: 1fr; }
  .subscribe__email { flex-direction: column; }
}

/* ============================================================
   HERO — video background with headline overlaid
   ============================================================ */
.hero--video {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(540px, 82vh, 820px);
  padding-block: clamp(4rem, 9vw, 7rem);
  padding-top: 0;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(18,26,18,0.74) 0%, rgba(18,26,18,0.52) 48%, rgba(18,26,18,0.34) 100%),
    linear-gradient(0deg, rgba(18,26,18,0.50) 0%, rgba(18,26,18,0.10) 55%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero--video .eyebrow { color: #CFE3D2; }
.hero--video h1 { color: var(--cream); text-shadow: 0 1px 24px rgba(0,0,0,0.25); }
.hero--video .lead { color: rgba(247,244,239,0.94); text-shadow: 0 1px 18px rgba(0,0,0,0.3); }
.hero--video .hero__sub { max-width: 40ch; }