/* =========================================================================
   MCA Theme — Main Stylesheet
   Mobile-first. Base styles = mobile; media queries layer on larger screens.
   ========================================================================= */

/* ----------------------------------------------------------------- TOKENS */
:root {
  /* Brand Colors */
  --color-purple:        #3B2A6E;
  --color-purple-dark:   #2A1E52;
  --color-purple-light:  #5A4490;
  --color-gold:          #C4A44A;
  --color-white:         #FFFFFF;
  --color-off-white:     #F7F5F2;
  --color-text:          #1A1A2E;
  --color-text-muted:    #5C5C7A;
  --color-border:        #E0DCF0;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;
  --font-ui:      'Inter', system-ui, sans-serif;

  /* Type Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.5rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* Layout */
  --container:        1200px;
  --container-narrow: 800px;
  --radius:           4px;

  --header-height: 80px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
}

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

ul { margin: 0; padding: 0; list-style: none; }

/* Accessibility helpers */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-purple); color: #fff;
  padding: var(--space-xs) var(--space-sm); z-index: 9999;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------- LAYOUT */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-sm);
}
.container--narrow { max-width: var(--container-narrow); }

.site-main { min-height: 50vh; }

/* Shared section headings */
.section-heading {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-purple);
  margin-bottom: var(--space-sm);
}
.section-subhead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 640px;
}
.section-head--center { text-align: center; margin: 0 auto var(--space-lg); }
.section-head--center .section-subhead { margin: 0 auto; }

.accent-underline {
  font-style: italic;
  color: var(--color-gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ----------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid {
  background: var(--color-purple);
  color: var(--color-white);
  border: 2px solid var(--color-purple);
}
.btn--solid:hover { background: var(--color-purple-light); border-color: var(--color-purple-light); }

.btn--outline {
  background: transparent;
  color: var(--color-purple);
  border: 2px solid var(--color-purple);
}
.btn--outline:hover { background: var(--color-purple); color: var(--color-white); }

.btn--pill-outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  text-transform: none;
  font-size: var(--text-base);
  letter-spacing: 0;
  font-family: var(--font-display);
  padding: 0.6em 1.6em;
}
.btn--pill-outline:hover { background: var(--color-white); color: var(--color-purple-dark); }

/* =========================================================================
   SITE HEADER
   ========================================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* Offset the fixed header below the WordPress admin bar when logged in. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Solid state: scrolled, or any non-front page */
.site-header.is-solid,
body.has-solid-header .site-header {
  background: var(--color-purple);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
/* Push interior page content below the fixed header */
body.has-solid-header .site-main { padding-top: var(--header-height); }

/* Taller header + bigger crest/wordmark on desktop to match brand treatment. */
@media (min-width: 1024px) {
  :root { --header-height: 120px; }
  .site-header .site-brand__logo { height: 88px; }
  .site-brand__name { font-size: var(--text-2xl); }
}

.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-white);
}
.site-brand__mark { display: inline-flex; }
.site-brand__logo { display: block; height: auto; }
/* Larger, more prominent crest + wordmark in the site header. */
.site-header .site-brand { gap: var(--space-sm); }
.site-header .site-brand__logo { height: 60px; width: auto; }
.site-brand__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.05;
  color: var(--color-white);
}
.site-brand__name--inline { line-height: 1.1; }
/* Header wordmark: one horizontal line on desktop, icon-only on mobile/tablet. */
.site-brand__name--header { white-space: nowrap; line-height: 1.1; }
@media (max-width: 1023px) {
  .site-header .site-brand__name { display: none; }
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.site-header__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
}
.site-header__link:hover { color: var(--color-gold); }

/* Hide top nav text links on small screens; keep search + hamburger */
.site-header__link { display: none; }

.site-header__search {
  background: none; border: 0; color: var(--color-white);
  padding: var(--space-xs); cursor: pointer; display: inline-flex;
}
.site-header__search:hover { color: var(--color-gold); }

/* Persistent FACTS Family Portal login button */
.site-header__login {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--color-white); border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 999px; padding: .4rem .9rem;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.site-header__login:hover { background: var(--color-white); color: var(--color-purple); border-color: var(--color-white); }
.site-header__login svg { flex-shrink: 0; }

/* =========================================================================
   ASK A QUESTION MODAL (Ask My Content plugin)
   ========================================================================= */
.ask-modal[hidden] { display: none; }
.ask-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 6vh, 5rem) var(--space-sm);
  overflow-y: auto;
}
.ask-modal__backdrop {
  /* Fixed (not absolute) so it always covers the viewport — otherwise a long
     answer scrolls the modal and the backdrop scrolls away, letting the page
     bleed through underneath (notably on mobile). */
  position: fixed;
  inset: 0;
  /* Lighter, elegant veil so the hero remains visible behind. */
  background: rgba(42, 30, 82, .78);
  backdrop-filter: blur(3px);
}
.ask-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  color: var(--color-white);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: start;
  /* Top strip so the corner close button clears the input row. */
  padding-top: 3rem;
  /* Fade/slide in */
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease;
}
.ask-modal.is-open .ask-modal__dialog {
  opacity: 1;
  transform: translateY(0);
}
.ask-modal__close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--color-white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.ask-modal__close:hover { color: var(--color-gold); }
.ask-modal__header { text-align: left; }

/* Two columns on wider screens: title left, input right. */
@media (min-width: 768px) {
  .ask-modal__dialog {
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: var(--space-lg);
    align-items: start;
  }
}
.ask-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-white);
  margin: 0 0 var(--space-xs);
}
.ask-modal__subtitle {
  font-family: var(--font-body);
  color: rgba(255,255,255,.8);
  margin: 0;
}
/* Hide the plugin's floating "How Can We Help?" launcher — the header
   search icon is the entry point now. */
#amc-float { display: none !important; }

/* Custom Ask form: input + Send in a row; the answer box appears only once
   the AI replies, and blends into the panel so the text reads as native. */
.ask-modal__chat { display: flex; flex-direction: column; }
.ask-modal__form {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}
.ask-modal__input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-white);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 14px;
  padding: 1rem 1.25rem;
}
.ask-modal__input::placeholder { color: rgba(255,255,255,.6); }
.ask-modal__input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(196,164,74,.25);
}
.ask-modal__send {
  flex: 0 0 auto;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-purple-dark);
  background: var(--color-gold);
  border: 0;
  border-radius: 14px;
  padding: 0 1.75rem;
  cursor: pointer;
  transition: filter .15s ease;
}
.ask-modal__send:hover { filter: brightness(1.06); }
.ask-modal__send:disabled { opacity: .6; cursor: default; }

/* Answer: hidden until there is content, then a subtle integrated box. */
.ask-modal__answer {
  display: none;
  margin-top: var(--space-md);
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: rgba(255,255,255,.92);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ask-modal__answer.has-content { display: block; }
.ask-modal__answer.is-loading { color: rgba(255,255,255,.6); }
.ask-modal__answer a { color: var(--color-gold); text-decoration: underline; }

/* Structured answer: body text + a prominent "go to the page" pill. */
.ask-modal__answer-text { margin: 0; }
.ask-modal__answer-link {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem .95rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: var(--color-gold);
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.ask-modal__answer-link:hover,
.ask-modal__answer-link:focus { background: rgba(255,255,255,.14); text-decoration: none; }

/* Specific deep links (documents, section anchors) under the page pill. */
.ask-modal__answer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .85rem;
}
.ask-modal__answer-deeplink {
  display: inline-block;
  padding: .35rem .7rem;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  font-size: .92em;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.ask-modal__answer-deeplink:hover,
.ask-modal__answer-deeplink:focus {
  background: rgba(0,0,0,.28);
  border-color: var(--color-gold);
  color: #fff;
  text-decoration: none;
}

/* CTA row under the chat. */
.ask-modal__cta {
  margin-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.ask-modal__cta span { color: rgba(255,255,255,.75); font-size: var(--text-sm); line-height: 1.4; }
.ask-modal__cta-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-purple-dark);
  background: var(--color-gold);
  border-radius: 999px;
  padding: 0.55em 1.25em;
  white-space: nowrap;
  transition: filter .15s ease;
}
.ask-modal__cta-btn:hover { filter: brightness(1.06); }

/* FAQ bubbles live under the header in the left column; click to auto-ask. */
.ask-modal__faqs { margin-top: var(--space-lg); }
.ask-modal__faqs-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: 0 0 var(--space-sm);
}
.ask-modal__faqs-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.ask-faq {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-white);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 0.55em 1.1em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ask-faq:hover {
  background: var(--color-white);
  color: var(--color-purple);
  border-color: var(--color-white);
}

/* ---- Mobile: search box on top, tight answers, compact FAQ chips ---- */
@media (max-width: 767px) {
  .ask-modal {
    padding: 0;
    align-items: stretch;
  }
  /* Near-solid panel so content reads cleanly instead of bleeding over the page. */
  .ask-modal__backdrop {
    background: rgba(42, 30, 82, .97);
    backdrop-filter: blur(6px);
  }
  .ask-modal__dialog {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* fill width, not shrink-wrap to content */
    gap: var(--space-sm);
    min-height: 100%;
    padding: 4.25rem var(--space-sm) var(--space-md); /* top room for the close button */
  }
  /* Input + answers first; popular questions after. */
  .ask-modal__chat  { order: 1; }
  .ask-modal__aside { order: 2; }
  /* Drop the large heading block so the search box sits at the very top. */
  .ask-modal__header { display: none; }
  .ask-modal__answer { margin-top: var(--space-sm); }
  .ask-modal__input { font-size: var(--text-base); }
  /* Popular questions: small, single-line chips right under the input. */
  .ask-modal__faqs { margin-top: var(--space-xs); }
  .ask-modal__faqs-label { margin-bottom: var(--space-xs); }
  .ask-modal__faqs-list { gap: 0.4rem; }
  .ask-faq {
    font-size: var(--text-xs);
    padding: 0.3em 0.85em;
    line-height: 1.3;
    white-space: nowrap;
  }
}

.mega-menu-toggle {
  background: none; border: 0; cursor: pointer;
  width: 36px; height: 30px;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 0;
}
.mega-menu-toggle span {
  display: block; height: 2px; width: 100%;
  background: var(--color-white); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* =========================================================================
   SECTION 1: HERO
   ========================================================================= */
.hero {
  position: relative;
  /* Slightly less than full height so the quick-links bar peeks in
     under the banner, hinting there's more below. */
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; }

/* Crossfading slideshow */
.hero__slideshow { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  transform: scale(1);
  transition: opacity 1.5s ease-in-out;
  will-change: opacity, transform;
}
/* Outgoing slide stays fully opaque underneath so no background shows
   through during the crossfade. */
.hero__slide.is-prev {
  opacity: 1;
  z-index: 1;
  transition: none;
}
/* Incoming slide fades in on top of the outgoing one. */
.hero__slide.is-active {
  opacity: 1;
  z-index: 2;
}
/* Ken Burns: zoom/pan runs across the slide's entire visible life
   (active + fading out). Declaring the same animation on both states
   keeps it running smoothly instead of snapping back when is-active
   is removed. Duration = interval (3s) + crossfade (1.5s). */
.hero__slide.is-active,
.hero__slide.is-prev {
  animation: hero-kenburns 4.5s ease-out forwards;
}
@keyframes hero-kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide.is-active { animation: none; }
}
.hero__overlay {
  position: absolute; inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(42,30,82,.35) 0%, rgba(42,30,82,.7) 100%);
}
.hero__content {
  position: relative;
  z-index: 4;
  padding-top: calc(var(--header-height) + var(--space-md));
  padding-bottom: var(--space-lg);
}
.hero__headline {
  font-size: var(--text-4xl);
  color: var(--color-white);
  max-width: 14ch;
  margin-bottom: var(--space-sm);
}
.hero__line {
  display: block;
}
.hero__accent {
  display: block;
  font-style: italic;
  color: var(--color-gold);
}
/* Keep the gold accent clause on a single line where there's room. */
@media (min-width: 1024px) {
  .hero__headline { max-width: 24ch; }
  .hero__accent { white-space: nowrap; }
}
.hero__subhead {
  font-size: var(--text-lg);
  max-width: 500px;
  margin-bottom: var(--space-md);
}
/* Role switcher dropdown (purple pill) */
.role-switch {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.role-switch__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-width: 300px;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-white);
  background: var(--color-purple);
  border: 0;
  border-radius: 999px;
  padding: 0.8em 1.6em;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  transition: background-color .2s ease;
}
.role-switch__toggle:hover { background: var(--color-purple-light); }
.role-switch__chevron {
  font-size: var(--text-base);
  transition: transform .25s ease;
}
.role-switch__toggle[aria-expanded="true"] .role-switch__chevron { transform: rotate(180deg); }

.role-switch__menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.5rem);
  min-width: 100%;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 5;
}
.role-switch.is-open .role-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.role-switch__option {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  padding: 0.7em 1.4em;
  cursor: pointer;
}
.role-switch__option:hover,
.role-switch__option[aria-selected="true"] {
  background: var(--color-off-white);
  color: var(--color-purple);
}

/* Scroll cue — invites the user down to the quick-facts buttons */
.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.hero__scroll-cue:hover { color: var(--color-gold); }
.hero__scroll-arrow {
  display: inline-flex;
  animation: hero-bounce 1.8s ease-in-out infinite;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow { animation: none; }
}

/* =========================================================================
   SECTION 2: QUICK LINKS BAR
   ========================================================================= */
.quicklinks { background: var(--color-white); border-bottom: 1px solid var(--color-border); }
/* Offset smooth-scroll target so the fixed header doesn't cover the top. */
#quick-facts { scroll-margin-top: var(--header-height); }
.quicklinks__group[hidden] { display: none; }
/* Eased fade when swapping role groups. */
.quicklinks__group { transition: opacity .3s ease; }
.quicklinks__group.is-fade { opacity: 0; }
/* Small role-specific title above the buttons. */
.quicklinks__title {
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: var(--space-md);
  margin: 0;
}
.quicklinks__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.quicklink {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
}
.quicklink__icon { color: var(--color-purple); display: inline-flex; }
/* Athletics uses the Knights logo image; size it to match the line icons. */
.quicklink__logo { width: 34px; height: 34px; display: block; object-fit: contain; }
.quicklink__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
}
.quicklink__cta {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-purple);
  margin-left: auto;
}
.quicklink:hover .quicklink__cta { color: var(--color-purple-light); }

/* Academics quick-link: a button that opens a small rising choice box. */
.quicklink-wrap { position: relative; display: flex; }
.quicklink--choice {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.quicklink-choices {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  top: calc(100% - var(--space-xs));
  z-index: 30;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(26, 26, 46, 0.16);
  padding: var(--space-sm);
  opacity: 0;
  transform: translateY(0.625rem);
  transition: opacity .2s ease, transform .2s ease;
}
.quicklink-choices[hidden] { display: none; }
.quicklink-wrap.is-open .quicklink-choices { opacity: 1; transform: translateY(0); }
.quicklink-choices__title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs);
}
.quicklink-choices__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  border-radius: var(--radius);
}
.quicklink-choices__item:hover {
  background: var(--color-off-white);
  color: var(--color-purple);
}

/* =========================================================================
   SECTION 3: PARENTS ARE PARTNERS
   ========================================================================= */
.partners { padding: var(--space-lg) 0; background: var(--color-white); }
.partners__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}
.partners__heading { font-size: var(--text-4xl); }
.partners__body { font-size: var(--text-lg); max-width: 46ch; margin-bottom: var(--space-md); }

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-embed--placeholder { background: #000; }
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px; /* optically center the triangle */
  border: 0;
  border-radius: 50%;
  background: rgba(59, 42, 110, 0.85);
  color: var(--color-white);
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.video-play:hover { background: var(--color-purple); transform: scale(1.06); }
.video-embed.is-playing .video-play { opacity: 0; pointer-events: none; }

/* =========================================================================
   SECTION 4: ACADEMICS
   ========================================================================= */
.academics { padding: var(--space-lg) 0; background: var(--color-off-white); }
.academics__head { margin-bottom: var(--space-lg); }
.academics__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.academics__col { text-align: center; }
.academics__col-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}
.academics__col-sub {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.academics__list { margin-bottom: var(--space-md); }
.academics__list li {
  font-weight: 600;
  padding: var(--space-xs) 0;
  border-top: 1px solid var(--color-border);
}
.academics__list li:last-child { border-bottom: 1px solid var(--color-border); }
.academics__note {
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* =========================================================================
   SECTION 5: STUDENT LIFE & CULTURE
   ========================================================================= */
.studentlife { padding: var(--space-lg) 0; background: var(--color-white); }
.studentlife .section-heading { font-size: var(--text-4xl); }
.studentlife__body { font-size: var(--text-lg); max-width: 60ch; }
.studentlife .btn { margin-top: var(--space-sm); }
.studentlife__media { margin-top: var(--space-md); }
.studentlife__img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* =========================================================================
   SECTION 6: PHOTO STRIP
   ========================================================================= */
.photo-strip { width: 100%; height: 220px; overflow: hidden; }
.photo-strip__img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   SECTION 7: IS MCA THE RIGHT FIT?
   ========================================================================= */
.fit { background: var(--color-purple); color: var(--color-white); padding: var(--space-lg) 0; }
.fit__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
}
.fit__heading { color: var(--color-white); font-size: var(--text-4xl); }
.fit__sub { font-weight: 600; }
.fit__bullets { margin: var(--space-sm) 0 var(--space-md); }
.fit__bullets li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: var(--space-xs);
}
.fit__bullets li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--color-gold);
  border-radius: 50%;
}
.fit__body { font-style: italic; }
.fit__img { width: 100%; border-radius: var(--radius); object-fit: cover; }

/* =========================================================================
   SECTION 8: READY TO LEARN MORE?
   ========================================================================= */
.ready { padding: var(--space-lg) 0; background: var(--color-white); text-align: center; }
.ready .section-heading { font-size: var(--text-4xl); }
.ready__sub { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.ready__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}
.ready__link {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  color: var(--color-purple);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.ready__link span { transition: transform .2s ease; }
.ready__link:hover span { transform: translateX(4px); }

/* =========================================================================
   SITE FOOTER
   ========================================================================= */
.site-footer { background: var(--color-purple-dark); color: var(--color-white); }
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm) var(--space-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.site-footer__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.1;
  margin: var(--space-sm) 0;
}
.site-footer__address { font-style: normal; color: rgba(255,255,255,.8); margin-bottom: var(--space-sm); }
.site-footer__phone { font-size: var(--text-sm); color: rgba(255,255,255,.8); margin-bottom: var(--space-xs); }
.site-footer__phone strong { color: var(--color-white); }
.site-footer__login-btn { display: inline-flex; margin-top: var(--space-md); }

.site-footer__columns { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.site-footer__group { margin-bottom: var(--space-sm); }
.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}
.site-footer__group a,
.site-footer__menu a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  line-height: 2;
  white-space: nowrap; /* keep each link label on a single line */
}
.site-footer__group a:hover,
.site-footer__menu a:hover { color: var(--color-white); }

.site-footer__menu { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  text-align: center;
  padding: var(--space-sm);
}
.site-footer__bottom p { margin: 0; font-size: var(--text-xs); color: rgba(255,255,255,.6); }
.site-footer__bottom a { color: inherit; text-decoration: underline; }
.site-footer__bottom a:hover { color: #fff; }

/* ============================== WELCOME MODAL (first-visit tour) ============================== */
.welcome-modal {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-sm);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.welcome-modal[hidden] { display: none; }
.welcome-modal.is-open { opacity: 1; visibility: visible; }
.welcome-modal__backdrop { position: absolute; inset: 0; background: rgba(20,16,40,.55); backdrop-filter: blur(4px); }
.welcome-modal__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  background: var(--color-white); border-radius: calc(var(--radius) * 2);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: 0 24px 60px rgba(20,16,40,.35);
  transform: translateY(12px) scale(.98); transition: transform .25s ease;
}
.welcome-modal.is-open .welcome-modal__dialog { transform: none; }
.welcome-modal__close {
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.9rem; line-height: 1; color: var(--color-text-muted); transition: color .15s ease;
}
.welcome-modal__close:hover { color: var(--color-purple); }
.welcome-modal__head { text-align: center; margin-bottom: var(--space-md); }
.welcome-modal__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-purple); margin: var(--space-xs) 0 .3rem; }
.welcome-modal__sub { color: var(--color-text-muted); font-size: var(--text-sm); }
.welcome-modal__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.welcome-item { display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: .75rem; }
.welcome-item__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--color-purple); color: var(--color-white);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; flex-shrink: 0; margin-top: .15rem;
}
.welcome-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--color-off-white); color: var(--color-purple); flex-shrink: 0;
}
.welcome-item__title { display: block; font-family: var(--font-ui); font-weight: 700; color: var(--color-text); }
.welcome-item__body { display: block; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); margin-top: .1rem; }
.welcome-item__body strong { color: var(--color-purple); }
.welcome-modal__actions { margin-top: var(--space-md); text-align: center; }
.welcome-modal__actions .btn { width: 100%; }
@media (min-width: 560px) {
  .welcome-modal__dialog { padding: var(--space-lg); }
  .welcome-modal__actions .btn { width: auto; }
}
/* Compact layout so the whole tour fits one phone screen (title -> button). */
@media (max-width: 559px) {
  .welcome-modal { padding: var(--space-xs); }
  .welcome-modal__dialog { padding: var(--space-md) var(--space-sm) var(--space-sm); border-radius: calc(var(--radius) * 1.5); }
  .welcome-modal__head { margin-bottom: .7rem; }
  .welcome-modal__title { font-size: var(--text-xl); line-height: 1.15; }
  .welcome-modal__sub { font-size: var(--text-xs); }
  .welcome-modal__list { gap: .65rem; }
  .welcome-item { gap: .55rem; align-items: center; }
  .welcome-item__num { width: 1.25rem; height: 1.25rem; margin-top: 0; }
  .welcome-item__icon { width: 1.9rem; height: 1.9rem; }
  .welcome-item__icon svg { width: 17px; height: 17px; }
  .welcome-item__title { font-size: var(--text-sm); }
  .welcome-item__body { font-size: var(--text-xs); line-height: 1.35; margin-top: .05rem; }
  .welcome-modal__actions { margin-top: .8rem; }
}

/* Default page wrapper */
.page--default { padding: var(--space-lg) 0; }
.page__title { color: var(--color-purple); font-size: var(--text-4xl); }

/* =========================================================================
   RESPONSIVE — TABLET (≥768px)
   ========================================================================= */
@media (min-width: 768px) {
  /* Equal columns regardless of how many links the role has (3 or 4). */
  .quicklinks__inner { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .quicklink { flex-direction: column; align-items: flex-start; gap: var(--space-xs); border-right: 1px solid var(--color-border); padding: var(--space-sm) var(--space-md); }
  .quicklink:last-child { border-right: 0; }
  .quicklink__cta { margin-left: 0; }

  .partners__inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .academics__cols { grid-template-columns: 1fr 1fr; }
  .fit__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-lg); }

  .ready__links { flex-direction: row; justify-content: center; gap: var(--space-lg); }

  .site-footer__inner { grid-template-columns: minmax(220px, 1fr) 3fr; align-items: start; }
  .site-footer__columns { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-lg); }
}

/* =========================================================================
   RESPONSIVE — DESKTOP (≥1024px)
   ========================================================================= */
@media (min-width: 1024px) {
  .site-header__link { display: inline; }

  .hero__headline { font-size: var(--text-5xl); }

  .photo-strip { height: 300px; }

  .site-footer__columns { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   MISSION & VISION PAGE
   ========================================================================= */
.mv-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}
.mv-eyebrow--light { color: rgba(255,255,255,.7); }
.mv-eyebrow--pill {
  display: inline-block;
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  padding: 0.45em 1.3em;
  margin-bottom: var(--space-sm);
}
.mv-h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-purple);
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
}
.mv-h2--light { color: var(--color-white); }

/* Hero */
.mv-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  padding: var(--space-lg) var(--space-sm);
}
.mv-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,30,82,.55), rgba(42,30,82,.75));
}
.mv-hero__content { position: relative; z-index: 1; }
.mv-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.15;
  margin: 0;
  color: var(--color-white);
}

/* Our Mission */
.mv-mission {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-sm);
  align-items: center;
}
.mv-mission__media img,
.mv-vrow__media img {
  width: 100%;
  height: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* What Our Vision Means */
.mv-vision { background: var(--color-off-white); padding: var(--space-xl) 0; }
.mv-vision__title { text-align: center; margin-bottom: var(--space-lg); }
.mv-vrow {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  margin-bottom: var(--space-lg);
}
.mv-vrow:last-child { margin-bottom: 0; }
.mv-vrow__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.mv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--color-purple);
  color: var(--color-white);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.mv-vrow__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-purple);
  margin: 0;
}
.mv-vrow__lead { font-weight: 600; color: var(--color-text); }
.mv-quote {
  border-left: 3px solid var(--color-purple-light);
  padding-left: var(--space-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Partnership with Families */
.mv-partnership {
  background: var(--color-purple);
  color: var(--color-white);
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
}
.mv-partnership__card {
  background: rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--space-lg);
  max-width: var(--container-narrow);
  margin: var(--space-md) auto 0;
  text-align: left;
}
.mv-partnership__lead { font-size: var(--text-lg); }
.mv-partnership__divider { border: 0; border-top: 1px solid rgba(255,255,255,.25); margin: var(--space-md) 0; }
.mv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.mv-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius);
  padding: var(--space-sm);
  min-width: 110px;
  flex: 1;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}
.mv-pill__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: var(--color-white);
}

/* The Outcome */
.mv-outcome {
  text-align: center;
  padding: var(--space-xl) var(--space-sm);
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.mv-outcome__body { color: var(--color-text-muted); }
.mv-outcome__emphasis {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.45;
  color: var(--color-purple);
  margin: var(--space-md) 0;
}
.mv-accent-gold { color: var(--color-gold); }
.mv-accent-purple { color: var(--color-purple-light); }
.mv-outcome__rule { width: 80px; border: 0; border-top: 1px solid var(--color-border); margin: var(--space-md) auto; }
.mv-outcome__closing { font-style: italic; color: var(--color-text-muted); }

/* Desktop layouts */
@media (min-width: 768px) {
  .mv-mission { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .mv-vrow { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .mv-vrow--flip .mv-vrow__media { order: -1; }
  .mv-pills { flex-wrap: nowrap; }
}

/* =========================================================================
   STATEMENT OF FAITH PAGE
   ========================================================================= */
.mv-eyebrow--solid { background: var(--color-purple); border-color: transparent; }

.sof-hero {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  padding: var(--space-lg) var(--space-sm);
}
.sof-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,30,82,.45), rgba(42,30,82,.7));
}
.sof-hero__content { position: relative; z-index: 1; }
.sof-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  margin: 0;
  color: var(--color-white);
}

.sof-intro { text-align: center; padding: var(--space-lg) var(--space-sm) var(--space-md); color: var(--color-text); }

.sof-beliefs { padding-bottom: var(--space-lg); }
.sof-accordion { max-width: 760px; margin: 0 auto; }
.sof-item {
  background: #F5F3FB;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--space-xs);
  overflow: hidden;
}
.sof-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.sof-item__num {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}
.sof-item__heads { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sof-item__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-purple);
}
.sof-item__sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.sof-item__chevron { color: var(--color-purple); transition: transform .25s ease; flex-shrink: 0; }
.sof-item.is-open .sof-item__chevron { transform: rotate(180deg); }
.sof-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.sof-item.is-open .sof-item__panel { max-height: 400px; }
.sof-item__panel-inner {
  margin: 0 var(--space-sm);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
}
.sof-item__panel-inner p { margin: 0; color: var(--color-text); }

.sof-closing { text-align: center; padding: var(--space-md) var(--space-sm) var(--space-xl); color: var(--color-text-muted); }

/* =========================================================================
   CLASSICAL EDUCATION PAGE
   ========================================================================= */
.ce-head--center { text-align: center; max-width: 760px; margin: 0 auto var(--space-lg); }
.ce-subhead { color: var(--color-text-muted); font-size: var(--text-lg); margin: var(--space-xs) 0 0; }
.ce-h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-purple);
  margin: var(--space-lg) 0 var(--space-sm);
}
.ce-lead-text { color: var(--color-text); margin-bottom: var(--space-md); }

/* Intro band */
.ce-intro { background: var(--color-off-white); padding: var(--space-lg) 0; text-align: center; }
.ce-intro__lead {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-purple);
  line-height: 1.3;
  margin-bottom: var(--space-md);
}
.ce-intro p { color: var(--color-text-muted); max-width: 620px; margin: 0 auto; }

/* Worldview */
.ce-worldview { background: var(--color-white); padding: var(--space-xl) 0; }
.ce-worldview__grid { display: grid; gap: var(--space-lg); align-items: start; }
.ce-convictions {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.ce-convictions__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
}
.ce-conviction { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; }
.ce-conviction__num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-purple);
  color: var(--color-white);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Body region */
.ce-body { background: var(--color-off-white); padding: var(--space-xl) 0; }

/* Feature tiles */
.ce-features { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.ce-feature {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: center;
}
.ce-feature__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-purple);
}
.ce-feature__label { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Purple cards */
.ce-card--purple {
  background: var(--color-purple);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.ce-card--purple p { color: rgba(255,255,255,.9); }
.ce-card__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: var(--space-md) 0 var(--space-sm);
}
.ce-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ce-tag {
  background: var(--color-purple-light);
  color: var(--color-white);
  border-radius: 999px;
  padding: 0.4em 1em;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

/* Trivium accordion tweaks (built on .sof-item) */
.ce-tri-item .sof-item__num { background: var(--color-white); color: var(--color-purple); }
.ce-tri__lead { font-weight: 600; }
.ce-tri__list { list-style: disc; padding-left: 1.4em; margin: 0 0 var(--space-sm); }
.ce-tri__list li { margin-bottom: 2px; }
.ce-tri__note { font-style: italic; color: var(--color-text-muted); margin: 0; }

/* Socratic goals */
.ce-goals { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.ce-goal {
  background: var(--color-purple-dark);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}
.ce-goal__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 2px;
}
.ce-goal__text { color: var(--color-white); font-weight: 600; }

/* Why this matters */
.ce-why { margin-top: var(--space-xl); }
.ce-outcomes { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; max-width: 760px; margin: 0 auto; }
.ce-outcome {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5em 1.2em;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-purple);
}
.ce-closing { text-align: center; font-style: italic; color: var(--color-text-muted); max-width: 620px; margin: 0 auto; }

@media (min-width: 768px) {
  .ce-worldview__grid { grid-template-columns: 1.3fr 1fr; gap: var(--space-xl); }
  .ce-features { grid-template-columns: repeat(3, 1fr); }
  .ce-goals { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   PARENTAL PARTNERSHIP PAGE
   ========================================================================= */
/* Check lists (Service & Goal) */
.pp-checks { display: flex; flex-direction: column; gap: var(--space-sm); }
.pp-checks li { display: flex; align-items: flex-start; gap: var(--space-sm); }
.pp-check { color: var(--color-purple); flex-shrink: 0; display: inline-flex; margin-top: 2px; }

/* Grammar School */
.pp-grammar { background: var(--color-off-white); padding: var(--space-xl) 0; }
.pp-provides { display: grid; gap: var(--space-md); margin-bottom: var(--space-md); }
.pp-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.pp-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-purple);
  margin-bottom: var(--space-sm);
}
.pp-card__icon { color: var(--color-purple); display: inline-flex; }
.pp-bullets { list-style: disc; padding-left: 1.4em; }
.pp-bullets li { margin-bottom: var(--space-xs); }
.pp-note {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.pp-note p:last-child { margin-bottom: 0; }
.pp-link { color: var(--color-purple); font-weight: 600; text-decoration: underline; }
/* Inline button styled as a link (e.g. the video-modal trigger in prose). */
.pp-videolink { display: inline; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* Upper School (dark) */
.pp-upper { background: #1B1626; color: var(--color-white); padding: var(--space-xl) 0; }
.pp-upper .mv-eyebrow--light { color: rgba(255,255,255,.6); }
.pp-upper__card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.pp-upper__card p { color: rgba(255,255,255,.85); }
.pp-upper__label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: var(--space-md) 0 var(--space-sm);
}
.pp-arrows { display: grid; gap: var(--space-xs); }
.pp-arrow { color: var(--color-white); }
.pp-upper__rule { border: 0; border-top: 1px solid rgba(255,255,255,.15); margin: var(--space-md) 0; }

/* The Goal */
.pp-goal { background: var(--color-off-white); padding: var(--space-xl) 0; }
.pp-goal-grid { display: grid; gap: var(--space-sm); max-width: 760px; margin: 0 auto; }
.pp-goal-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
}
/* Linked "Before You Apply" items — each box navigates to its content. */
.pp-goal-item--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pp-goal-item--link:hover { border-color: var(--color-purple); box-shadow: 0 4px 14px rgba(59,42,110,.12); }
.pp-goal-item--link:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 2px; }
.pp-goal-item__arrow { margin-left: auto; color: var(--color-purple); font-weight: 600; transition: transform .15s ease; }
.pp-goal-item--link:hover .pp-goal-item__arrow { transform: translateX(3px); }
/* Offset cross-page anchor jump so the step clears the sticky header. */
#learn-about-mca { scroll-margin-top: calc(var(--header-height) + 1rem); }

@media (min-width: 768px) {
  .pp-provides { grid-template-columns: 1fr 1fr; }
  .pp-arrows { grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
  .pp-goal-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   STAFF & LEADERSHIP DIRECTORY
   ========================================================================= */
.staff { padding: var(--space-xl) var(--space-sm); }
.staff__head { margin-bottom: var(--space-md); }
.staff__empty { text-align: center; color: var(--color-text-muted); }

.staff__search {
  position: relative;
  max-width: 760px;
  margin: 0 auto var(--space-lg);
  color: var(--color-text-muted);
}
.staff__search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); }
#staff-search {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85em 1em 0.85em 2.6em;
}
#staff-search:focus { outline: none; border-color: var(--color-purple-light); box-shadow: 0 0 0 3px rgba(90,68,144,.15); }

.staff__filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: var(--space-sm); }
.staff__filter-btn {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600;
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: var(--color-off-white); color: var(--color-text); border: 1px solid var(--color-border);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.staff__filter-btn:hover { border-color: var(--color-purple-light); }
.staff__filter-btn.is-active { background: var(--color-purple); color: var(--color-white); border-color: var(--color-purple); }

.staff-board { margin-top: var(--space-xl); border-top: 1px solid var(--color-border); padding-top: var(--space-lg); }
.staff-board__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-purple); margin-bottom: var(--space-md); text-align: center; }
.staff-board__groups { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; }
@media (min-width: 700px) { .staff-board__groups { grid-template-columns: repeat(3, 1fr); } }
.staff-board__group-title { font-family: var(--font-ui); font-weight: 700; color: var(--color-purple); font-size: var(--text-base); border-bottom: 2px solid var(--color-purple-light); padding-bottom: .3rem; margin-bottom: .5rem; }
.staff-board__list { list-style: none; margin: 0; padding: 0; }
.staff-board__list li { padding: .35rem 0; color: var(--color-text); font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); }
.staff-board__list li:last-child { border-bottom: 0; }
.staff-board__note { color: var(--color-text-muted); }

.staff-section { margin-bottom: var(--space-lg); }
.staff-section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.staff-section__count {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.1em 0.6em;
}

.staff-grid { display: grid; gap: var(--space-sm); }
.staff-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
}
.staff-card.is-hidden { display: none; }
.staff-card { cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.staff-card:hover { border-color: var(--color-purple-light); box-shadow: 0 6px 18px rgba(20,16,40,.10); transform: translateY(-2px); }
.staff-card:focus-visible { outline: 2px solid var(--color-purple-light); outline-offset: 2px; }
.staff-card__avatar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #EDE9F7;
  color: var(--color-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  overflow: hidden;
}
.staff-card__photo { width: 100%; height: 100%; object-fit: cover; }
.staff-card__info { display: flex; flex-direction: column; min-width: 0; }
.staff-card__name { font-weight: 700; color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-sm); }
.staff-card__role { font-size: var(--text-xs); color: var(--color-text-muted); }

.staff__noresults { text-align: center; color: var(--color-text-muted); padding: var(--space-md) 0; }
.staff__more { text-align: center; margin-top: var(--space-md); }

/* Staff detail modal */
.staff-modal[hidden] { display: none; }
.staff-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-sm);
  opacity: 0; transition: opacity .2s ease;
}
.staff-modal.is-open { opacity: 1; }
.staff-modal__overlay { position: absolute; inset: 0; background: rgba(20,16,40,.6); }
.staff-modal__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 360px;
  background: var(--color-white);
  border-radius: calc(var(--radius) * 3);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align: center;
  box-shadow: 0 24px 60px rgba(20,16,40,.35);
  transform: translateY(10px) scale(.97); transition: transform .2s ease;
}
.staff-modal.is-open .staff-modal__dialog { transform: none; }
.staff-modal__close {
  position: absolute; top: .6rem; right: .6rem;
  background: none; border: 0; cursor: pointer;
  color: var(--color-text-muted); line-height: 0; padding: .3rem;
  border-radius: 50%;
}
.staff-modal__close:hover { color: var(--color-purple); background: #EDE9F7; }
.staff-modal__avatar {
  width: 200px; height: 200px; margin: 0 auto var(--space-sm);
  border-radius: 50%; overflow: hidden;
  background: #EDE9F7; color: var(--color-purple);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 600; font-size: 3.5rem;
}
.staff-modal__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.staff-modal__name { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-purple); margin: 0 0 .35rem; }
.staff-modal__role { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

@media (min-width: 600px)  { .staff-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px)  { .staff-grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   FAQ PAGE
   ========================================================================= */
.faq { padding: var(--space-xl) var(--space-sm) var(--space-lg); }
.faq__head { margin-bottom: var(--space-md); }

.faq__search {
  position: relative;
  max-width: 760px;
  margin: 0 auto var(--space-sm);
  color: var(--color-text-muted);
}
.faq__search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); }
#faq-search {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85em 1em 0.85em 2.6em;
}
#faq-search:focus { outline: none; border-color: var(--color-purple-light); box-shadow: 0 0 0 3px rgba(90,68,144,.15); }

.faq__tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; max-width: 760px; margin: 0 auto var(--space-lg); }
.faq__tab {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-purple);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45em 1.1em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.faq__tab:hover { background: var(--color-off-white); }
.faq__tab.is-active { background: var(--color-purple); color: var(--color-white); border-color: var(--color-purple); }

.faq__results { max-width: 760px; margin: 0 auto; }
.faq-group { margin-bottom: var(--space-lg); }
.faq-group__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.faq-item__q { font-size: var(--text-base); }
.faq-item__a p:last-child { margin-bottom: 0; }
.sof-item.faq-item.is-open .sof-item__panel { max-height: 800px; }

/* Have More Questions form */
.faq-contact { background: var(--color-off-white); padding: var(--space-xl) var(--space-sm); }
.faq-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.faq-contact__form { display: grid; gap: var(--space-sm); }
.faq-contact__fields { display: grid; gap: var(--space-sm); }
.faq-contact__form input,
.faq-contact__form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85em 1em;
}
.faq-contact__form input:focus,
.faq-contact__form textarea:focus { outline: none; border-color: var(--color-purple-light); box-shadow: 0 0 0 3px rgba(90,68,144,.15); }
.faq-contact__submit { justify-self: center; margin-top: var(--space-xs); border: 0; }
.faq-contact__success {
  text-align: center;
  background: #E9F7EE;
  border: 1px solid #BFE6CC;
  color: #1E6B3A;
  border-radius: var(--radius);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .faq-contact__form { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .faq-contact__fields { grid-column: 1; }
  .faq-contact__form textarea { grid-column: 2; grid-row: 1; min-height: 100%; }
  .faq-contact__submit { grid-column: 1 / -1; }
}

/* =========================================================================
   CULTURE PAGE
   ========================================================================= */
.cul-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  padding: var(--space-lg) var(--space-sm);
}
.cul-hero__title { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--color-white); margin: 0 0 var(--space-sm); }
.cul-hero__sub { max-width: 620px; margin: 0 auto; color: rgba(255,255,255,.9); }

.cul-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 var(--space-xs);
}

/* Grammar */
.cul-grammar { background: var(--color-off-white); padding: var(--space-xl) 0; }
.cul-grammar__grid { display: grid; gap: var(--space-lg); align-items: start; }
.cul-card-side {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.cul-card-side__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-purple); margin-bottom: var(--space-sm); }
.cul-pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-sm) 0; }
.cul-pill { background: #EDE9F7; color: var(--color-purple); border-radius: 999px; padding: 0.35em 0.9em; font-family: var(--font-ui); font-size: var(--text-xs); }
.cul-note { font-style: italic; color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

/* Upper */
.cul-upper { padding: var(--space-xl) 0; }
.cul-upper__intro { max-width: 760px; color: var(--color-text); margin-bottom: var(--space-lg); }
.cul-cards { display: grid; gap: var(--space-md); }
.cul-card {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.cul-card__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-purple);
  margin-bottom: var(--space-sm);
}
.cul-card__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-purple); margin: 0 0 2px; }
.cul-card__sub { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-sm); }
.cul-card__body { color: var(--color-text); }
.cul-card__list { list-style: disc; padding-left: 1.3em; margin: 0 0 var(--space-sm); }
.cul-card__list li { margin-bottom: 2px; font-size: var(--text-sm); }
.cul-card__note { font-style: italic; color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }

@media (min-width: 768px) {
  .cul-grammar__grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-xl); }
  .cul-cards { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   EXTRACURRICULARS PAGE
   ========================================================================= */
.ex-philosophy { padding: var(--space-lg) var(--space-sm); }

/* Section heading with icon */
.ex-h { display: flex; align-items: center; gap: var(--space-sm); }
.ex-h--spaced { margin-top: var(--space-lg); }
.ex-h .mv-h2 { margin: 0; }
.ex-h__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: #EDE9F7;
  color: var(--color-purple);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.ex-h__icon--light { background: rgba(255,255,255,.12); color: var(--color-white); }

/* Effort & Character */
.ex-values { background: var(--color-off-white); padding: var(--space-xl) 0; }
.ex-values .mv-eyebrow { margin-top: var(--space-sm); }
.ex-verses { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.ex-verse {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: 0;
}
.ex-verse p { font-style: italic; color: var(--color-text); margin: 0 0 var(--space-xs); }
.ex-verse cite { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); font-style: normal; }

/* Eligibility (dark) */
.ex-eligibility { background: #1B1626; color: var(--color-white); padding: var(--space-xl) 0; }
.ex-elig__label { font-weight: 600; margin: var(--space-md) 0 var(--space-sm); }
.ex-elig__grid { display: grid; gap: var(--space-sm); }
.ex-elig__box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: var(--space-md); }
.ex-elig__box-label { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: var(--space-xs); }
.ex-elig__box-text { color: var(--color-white); }
.ex-elig__note { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: var(--space-md); margin-top: var(--space-sm); color: rgba(255,255,255,.85); }
.ex-elig__warn { display: flex; align-items: flex-start; gap: var(--space-sm); background: rgba(196,164,74,.12); border: 1px solid rgba(196,164,74,.4); border-radius: var(--radius); padding: var(--space-md); margin-top: var(--space-sm); color: var(--color-white); }
.ex-elig__warn-icon { color: var(--color-gold); flex-shrink: 0; }
.ex-elig__foot { font-style: italic; color: rgba(255,255,255,.55); font-size: var(--text-sm); margin-top: var(--space-sm); }

/* Two-column (Parent Partnership / Fees) */
.ex-twocol { display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-sm); }
.ex-col .mv-quote { margin-top: var(--space-sm); }

/* Activities reuse .cul-cards / .cul-card; white cards here */
.ex-activities { background: var(--color-off-white); }
.ex-activities .cul-card { background: var(--color-white); }

@media (min-width: 768px) {
  .ex-verses { grid-template-columns: 1fr 1fr; }
  .ex-elig__grid { grid-template-columns: 1fr 1fr; }
  .ex-twocol { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}

/* =========================================================================
   LOOKING TO APPLY (ADMISSIONS) PAGE
   ========================================================================= */
.ap-steps { background: var(--color-off-white); padding: var(--space-xl) 0; }
.ap-step {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}
.ap-step__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.ap-step__num { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.ap-step__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #EDE9F7; color: var(--color-purple); border-radius: var(--radius); }
.ap-step__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-purple); margin: 0; }

.ap-videos { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.ap-videos__label { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin: var(--space-md) 0 var(--space-xs); }
.ap-step__cta { display: inline-flex; margin-top: var(--space-md); }
.ap-video {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ap-video:hover { border-color: var(--color-purple); box-shadow: 0 4px 14px rgba(59,42,110,.12); }
.ap-video:hover .ap-video__play { background: var(--color-purple-dark); }
.ap-video:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 2px; }
.ap-video__play { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--color-purple); color: var(--color-white); transition: background .15s ease; }
.ap-video__text { display: block; }
.ap-video__label { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; }
.ap-video__desc { display: block; margin: 0; font-size: var(--text-sm); color: var(--color-text); }
.ap-video__grade { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--color-purple); margin-bottom: 4px; }

/* Step 01 — three square action cards */
.ap-actions--squares { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin: var(--space-sm) 0; }
.ap-square {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
  padding: var(--space-md);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ap-square:hover { border-color: var(--color-purple); box-shadow: 0 4px 14px rgba(59,42,110,.12); transform: translateY(-2px); }
.ap-square:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 2px; }
.ap-square__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #EDE9F7; color: var(--color-purple); }
.ap-square__text { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-purple); line-height: 1.2; }
.ap-square__arrow { color: var(--color-purple); font-weight: 600; transition: transform .15s ease; }
.ap-square:hover .ap-square__arrow { transform: translateX(3px); }
@media (min-width: 768px) {
  .ap-actions--squares { grid-template-columns: repeat(3, 1fr); }
  .ap-square { aspect-ratio: 1 / 1; }
}

/* Payment Calendar & Billing Information */
.ap-billing { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); }
.ap-billing__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-purple); margin: 0 0 var(--space-xs); }
.ap-billing__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.ap-billing__list li { display: flex; gap: var(--space-sm); align-items: baseline; font-size: var(--text-sm); color: var(--color-text); }
.ap-billing__when { flex-shrink: 0; min-width: 8.5em; font-family: var(--font-ui); font-weight: 700; color: var(--color-purple); }

/* ===== Admission video popup ===== */
.video-modal[hidden] { display: none; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 5vh, 4rem) var(--space-sm);
}
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(42,30,82,.82); backdrop-filter: blur(4px); }
.video-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow: auto;
  background: linear-gradient(160deg, var(--color-purple-dark) 0%, var(--color-purple) 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-white);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease;
}
.video-modal.is-open .video-modal__dialog { opacity: 1; transform: translateY(0); }
.video-modal__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--color-white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.video-modal__close:hover { color: var(--color-gold); }
.video-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin: 0 2.5rem var(--space-sm) 0;
}
.video-modal__body { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.video-modal__body.has-playlist { grid-template-columns: 1fr; }
.video-modal__player { background: #000; border-radius: 12px; overflow: hidden; }
.video-modal__player video { display: block; width: 100%; max-height: 62vh; background: #000; }
.video-modal__playlist { display: flex; flex-direction: column; gap: .5rem; }
.video-modal__pl-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--color-white);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  padding: .65rem .9rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.video-modal__pl-item:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.video-modal__pl-item.is-active { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-purple-dark); font-weight: 600; }
.video-modal__pl-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
}
.video-modal__pl-item.is-active .video-modal__pl-num { background: rgba(42,30,82,.2); }
@media (min-width: 820px) {
  .video-modal__body.has-playlist { grid-template-columns: 1.7fr 1fr; align-items: start; }
}

.ap-timeline { display: grid; gap: var(--space-sm); }
.ap-time-box { background: var(--color-off-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); }
.ap-time-box__label { display: block; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; }
.ap-time-box__value { font-weight: 600; color: var(--color-text); }
.ap-time-box__note { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }

/* Requirements */
.ap-req { padding: var(--space-xl) var(--space-sm); }
.ap-req__grid { display: grid; gap: var(--space-lg); margin-top: var(--space-md); }

/* Acceptance (dark) */
.ap-accept { background: #1B1626; color: var(--color-white); padding: var(--space-xl) 0; }
.ap-accept__lead { margin: var(--space-sm) 0 var(--space-md); color: rgba(255,255,255,.85); }
.ap-accept__grid { display: grid; gap: var(--space-sm); }
.ap-accept__box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: var(--space-md); }
.ap-accept__num { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-white); display: block; margin-bottom: var(--space-xs); }
.ap-accept__box p { margin: 0; color: rgba(255,255,255,.8); font-size: var(--text-sm); }

/* Tuition */
.ap-tuition { background: var(--color-off-white); padding: var(--space-xl) 0; }
.ap-tuition__year { font-size: var(--text-lg); color: var(--color-text-muted); }
.ap-tuition__grid { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.ap-tuition-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md); }
.ap-tuition-card__title { display: block; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-purple); margin-bottom: var(--space-sm); }
.ap-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-border); }
.ap-row:last-of-type { border-bottom: 0; }
.ap-row--total { font-weight: 700; }
.ap-row__price { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); }
.ap-tuition-card__note { font-style: italic; color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-sm) 0 0; }
.ap-tuition-card__fee { display: inline-block; margin-top: var(--space-sm); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); text-decoration: none; }
.ap-tuition-card__fee:hover { text-decoration: underline; }
.ap-tuition__foot { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-md); }

.ap-info { background: var(--color-white); }

@media (min-width: 768px) {
  .ap-videos { grid-template-columns: 1fr 1fr; }
  .ap-timeline { grid-template-columns: 1fr 1fr; }
  .ap-req__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .ap-accept__grid { grid-template-columns: repeat(3, 1fr); }
  .ap-tuition__grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   APPLY NOW PAGE
   ========================================================================= */
.an-hero {
  background: linear-gradient(160deg, var(--color-purple) 0%, var(--color-purple-light) 100%);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-xl) var(--space-sm);
}
.an-hero__pill { margin-bottom: var(--space-sm); }
.an-hero__title { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--color-white); margin: 0 0 var(--space-sm); }
.an-hero__sub { max-width: 620px; margin: 0 auto; color: rgba(255,255,255,.9); }

.an-before { padding: var(--space-xl) var(--space-sm); }
.an-checks { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }

.an-timeline { background: var(--color-off-white); padding: var(--space-xl) 0; }

.an-how { padding: var(--space-xl) var(--space-sm); }
.an-steps { display: grid; gap: var(--space-sm); margin: var(--space-md) 0; }
.an-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}
.an-step__num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-purple);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}

.an-after { background: var(--color-off-white); padding: var(--space-xl) 0; }
.an-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0; }
.an-tag {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.55em 1.4em;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* Dark CTA */
.an-cta { background: #1B1626; color: var(--color-white); text-align: center; padding: var(--space-xl) var(--space-sm); }
.an-cta__title { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-white); margin: 0 0 var(--space-sm); }
.an-cta__body { color: rgba(255,255,255,.8); margin-bottom: var(--space-md); }
.an-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.an-cta__primary { border: 0; }
.an-cta__secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 0.75em 1.6em;
  transition: background-color .2s ease;
}
.an-cta__secondary:hover { background: rgba(255,255,255,.16); }

@media (min-width: 768px) {
  .an-checks { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   RE-ENROLLMENT PAGE
   ========================================================================= */
.ex-h__icon--warn { background: rgba(196,164,74,.18); color: var(--color-gold); }

.re-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.re-actions__primary { border: 0; }
.re-actions__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  background: #1B1626;
  border-radius: 999px;
  padding: 0.75em 1.6em;
  transition: background-color .2s ease;
}
.re-actions__contact:hover { background: #2A2238; }

.re-notes { background: var(--color-off-white); padding: var(--space-xl) 0; }
.re-notes__list { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }

/* =========================================================================
   ACADEMICS PAGES (Grammar School / Upper School)
   ========================================================================= */
.cul-hero__meta { font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: 0.06em; color: rgba(255,255,255,.85); margin: 0; }
.ac-center { text-align: center; }

.ac-intro { background: var(--color-off-white); padding: var(--space-xl) 0; }

/* Resources card */
.ac-resources {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.ac-resources__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-purple); margin-bottom: var(--space-sm); }
.ac-resources__list { display: flex; flex-direction: column; gap: var(--space-xs); }
.ac-resources__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ac-resources__ext { display: inline-flex; opacity: 0.7; }
.ac-resources__list a:hover { color: var(--color-purple-light); }

/* Core Distinctives mini cards */
.ac-distinctives { padding: var(--space-xl) var(--space-sm); }
.ac-distinctives .mv-h2 { margin-bottom: var(--space-md); }
.ac-mini { display: grid; gap: var(--space-sm); }
.ac-mini__card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}
.ac-mini__icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: #EDE9F7;
  color: var(--color-purple);
  border-radius: var(--radius);
}
.ac-mini__text { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-purple); }

/* Stages + areas */
.ac-stages { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
.ac-stages .mv-h2 { margin-bottom: var(--space-md); }
.ac-stage-grid { display: grid; gap: var(--space-md); }
.ac-areas { background: var(--color-off-white); padding: var(--space-xl) 0; }
.ac-areas .mv-h2 { margin-bottom: var(--space-lg); }
.ac-areas .cul-card,
.ac-stages .cul-card { background: var(--color-white); }

/* Dark sections */
.ac-dark { background: #1B1626; color: var(--color-white); padding: var(--space-xl) 0; }
.ac-dark__box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: var(--space-md); color: rgba(255,255,255,.85); margin-top: var(--space-sm); }
.ac-dark__label { font-weight: 600; margin: var(--space-sm) 0 var(--space-sm); }
.ac-dark__pills { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.ac-dark__pill { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 0.5em 1.2em; font-family: var(--font-ui); font-size: var(--text-sm); }
.ac-dark__note { font-style: italic; color: rgba(255,255,255,.55); font-size: var(--text-sm); margin-top: var(--space-md); text-align: center; }

@media (min-width: 768px) {
  .ac-mini { grid-template-columns: repeat(3, 1fr); }
  .ac-stage-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   RESOURCES (PARENT RESOURCES) PAGE
   ========================================================================= */
.res { padding: var(--space-xl) 0; }
.res__layout { display: grid; gap: var(--space-lg); align-items: start; }

.res__sidebar { display: flex; flex-direction: column; gap: var(--space-xs); }
.res__navgroup { display: flex; flex-direction: column; }
.res__navlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  text-align: left;
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.7em 1em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.res__navlink:hover { background: #EDE9F7; }
.res__navlink.is-active { background: var(--color-purple); color: var(--color-white); border-color: var(--color-purple); }
.res__navchev { display: inline-flex; transition: transform .25s ease; }
.res__navgroup.is-open .res__navchev { transform: rotate(180deg); }

/* Subcategory dropdown */
.res__subnav {
  display: none;
  flex-direction: column;
  margin: 4px 0 0 0.8em;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--color-border);
}
.res__navgroup.is-open .res__subnav { display: flex; }
.res__subnav a {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 0.35em 0.6em;
  border-radius: var(--radius);
  transition: color .15s ease, background-color .15s ease;
}
.res__subnav a:hover { color: var(--color-purple); background: var(--color-off-white); }
.res__subnav a.is-active { color: var(--color-purple); font-weight: 700; text-decoration: underline; }

/* Mobile sticky resources bar — appears after scrolling past the sidebar */
.res__mobilebar { display: none; }
@media (max-width: 959px) {
  .res__mobilebar {
    display: block;
    position: fixed; left: 0; right: 0; top: var(--header-height); z-index: 900;
    transform: translateY(-140%); transition: transform .25s ease;
    background: var(--color-white); box-shadow: 0 6px 16px rgba(20,16,40,.14);
  }
  body.admin-bar .res__mobilebar { top: calc(var(--header-height) + 46px); }
  .res__mobilebar.is-shown { transform: translateY(0); }
  .res__mobilebar-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1.25rem; border: 0; cursor: pointer;
    background: var(--color-purple); color: var(--color-white);
    font-family: var(--font-display); font-size: var(--text-lg);
  }
  .res__mobilebar-chev { display: inline-flex; transition: transform .2s ease; }
  .res__mobilebar.is-open .res__mobilebar-chev { transform: rotate(180deg); }
  .res__mobilebar-panel {
    padding: 0.85rem 1rem 1rem; max-height: 70vh; overflow-y: auto;
    border-bottom: 1px solid var(--color-border);
  }
  .res__mobilebar-panel[hidden] { display: none; }
  .res__mobilebar-search { max-width: none; margin: 0 0 0.85rem; }
  .res__mobilebar-search input {
    width: 100%; font-family: var(--font-body); font-size: var(--text-base);
    color: var(--color-text); background: var(--color-white);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    padding: 0.75em 1em 0.75em 2.6em;
  }
  .res__mobilebar-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
  .res__mobilebar-links > li { display: flex; flex-direction: column; }
  .res__mb-cat {
    width: 100%; text-align: left; padding: 0.8rem 1rem;
    background: var(--color-off-white); border: 0; border-radius: var(--radius);
    font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600;
    color: var(--color-text); cursor: pointer;
  }
  .res__mb-cat.is-active { background: var(--color-purple); color: var(--color-white); }
  .res__mb-sub {
    list-style: none; margin: 4px 0 6px; padding: 0 0 0 0.75rem;
    display: flex; flex-direction: column; gap: 2px;
    border-left: 2px solid var(--color-border);
  }
  .res__mb-subitem {
    width: 100%; text-align: left; padding: 0.55rem 0.9rem;
    background: transparent; border: 0; border-radius: var(--radius);
    font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500;
    color: var(--color-text-muted); cursor: pointer;
  }
  .res__mb-subitem.is-active { color: var(--color-purple); font-weight: 700; text-decoration: underline; }
}

.res-panel__title { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-purple); margin-bottom: var(--space-md); }
.res-group {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-md) 0 var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}
.res-files { display: flex; flex-direction: column; }
.res-files li { border-bottom: 1px solid var(--color-border); }
.res-files a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.6em 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.res-files a:hover { color: var(--color-purple); }
.res-files__icon { color: var(--color-purple); display: inline-flex; flex-shrink: 0; }

.res-note { background: var(--color-off-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); color: var(--color-text-muted); font-size: var(--text-sm); }
.res-outline { list-style: decimal; padding-left: 1.4em; margin-top: var(--space-md); }
.res-outline li { margin-bottom: var(--space-xs); font-family: var(--font-display); color: var(--color-purple); }

/* Offset scroll target so the fixed header doesn't cover group headings. */
.res-group { scroll-margin-top: calc(var(--header-height) + var(--space-sm)); }
@media (max-width: 959px) { .res-group { scroll-margin-top: calc(var(--header-height) + 3.5rem); } }

@media (min-width: 880px) {
  .res__layout { grid-template-columns: 260px 1fr; gap: var(--space-xl); align-items: start; }
  .res__sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    max-height: calc(100vh - var(--header-height) - var(--space-lg));
    overflow-y: auto;
    padding-top: var(--space-xs);
  }
  /* Account for the WordPress admin bar when logged in. */
  body.admin-bar .res__sidebar {
    top: calc(var(--header-height) + 32px + var(--space-md));
    max-height: calc(100vh - var(--header-height) - 32px - var(--space-lg));
  }
}

/* Resources: intro + empty states */
.res-intro { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-sm); }
.res-empty { color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; }

/* Resources: white header + search (Staff Directory style) */
.res-head { padding: var(--space-xl) var(--space-sm) 0; }
.res-head__title { margin-bottom: var(--space-md); }
.res-search {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text-muted);
}
.res-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); }
#res-search {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.85em 1em 0.85em 2.6em;
}
#res-search:focus { outline: none; border-color: var(--color-purple-light); box-shadow: 0 0 0 3px rgba(90,68,144,.15); }
.res { padding-top: var(--space-lg); }
.res-noresults { text-align: center; color: var(--color-text-muted); padding: var(--space-md) 0; }

/* =========================================================================
   CONTACT & DIRECTIONS PAGE
   ========================================================================= */
.ct { padding: var(--space-xl) var(--space-sm); }
.ct-cards { display: grid; gap: var(--space-md); margin-bottom: var(--space-md); }
.ct-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.ct-card__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-purple); margin-bottom: var(--space-sm); }
.ct-row { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-xs) 0; font-size: var(--text-sm); }
.ct-row__icon { color: var(--color-purple); flex-shrink: 0; margin-top: 2px; display: inline-flex; }
.ct-row a { color: var(--color-purple); }
.ct-row a:hover { text-decoration: underline; }

.ct-mini-grid { display: grid; gap: var(--space-md); }
.ct-mini { background: var(--color-off-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-md); }
.ct-mini__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-purple); margin-bottom: var(--space-sm); }
.ct-mini__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-purple); margin: 0 0 var(--space-xs); }
.ct-mini p { font-size: var(--text-sm); color: var(--color-text-muted); }
.ct-mini a { display: block; font-size: var(--text-sm); color: var(--color-purple); }
.ct-mini a:hover { text-decoration: underline; }

.ct-it { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
.ct-it__card { background: transparent; border: 0; padding: 0; max-width: var(--container-narrow); margin: 0 auto; }
.ct-it__note { font-style: italic; color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-sm) 0 0; }

@media (min-width: 768px) {
  .ct-cards { grid-template-columns: 1fr 1fr; }
  .ct-mini-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   PODCAST PAGE
   ========================================================================= */
.pod-overview { padding: var(--space-xl) var(--space-sm) var(--space-md); }
.pod-episodes { padding: var(--space-md) var(--space-sm) var(--space-xl); }
.pod-episodes .ce-head { margin-bottom: var(--space-md); }
.pod-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.pod-ep {
  display: flex;
  gap: var(--space-md);
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.pod-ep__num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-purple);
  color: var(--color-white);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.pod-ep__title { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-xs); }
.pod-ep__title a { color: var(--color-purple); display: inline-flex; align-items: center; gap: 0.4em; }
.pod-ep__title a:hover { color: var(--color-purple-light); }
.pod-ep__play { display: inline-flex; color: var(--color-gold); }
.pod-ep__desc { margin: 0; color: var(--color-text); font-size: var(--text-sm); }

/* =========================================================================
   SENIOR ORALS (SENIOR THESIS SCHEDULE) PAGE
   ========================================================================= */
.so-content { padding: var(--space-xl) var(--space-sm); }
.so-content > h2,
.so-content > h3 { font-family: var(--font-display); color: var(--color-purple); margin: var(--space-md) 0 var(--space-sm); }
.so-content p { max-width: 760px; }
.so-content a { color: var(--color-purple); text-decoration: underline; text-underline-offset: 2px; }
.so-content a:hover { color: var(--color-purple-light); }

.so-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: var(--text-sm);
}
.so-content th,
.so-content td {
  border: 1px solid var(--color-border);
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}
.so-content thead th,
.so-content tr.so-head th {
  background: #E2E0E6;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--color-text);
}
.so-content tr.so-day td {
  background: var(--color-purple);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}
.so-content tr.so-break td {
  background: #EDE7F7;
  font-style: italic;
  font-weight: 600;
}
.so-content td em,
.so-content .so-thesis { font-style: italic; }
.so-content tr.so-day a,
.so-content tr.so-day a:hover { color: var(--color-white); }

/* Past-year collapsible sections */
.so-content details.so-year {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin: var(--space-sm) 0;
  background: var(--color-white);
}
.so-content details.so-year > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85em 1em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-purple);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.so-content details.so-year > summary::-webkit-details-marker { display: none; }
.so-content details.so-year > summary::after {
  content: "\002B"; /* + */
  font-size: 1.1em;
  line-height: 1;
  color: var(--color-purple);
  margin-left: var(--space-sm);
}
.so-content details.so-year[open] > summary::after { content: "\2212"; /* − */ }
.so-content details.so-year[open] > summary { border-bottom: 1px solid var(--color-border); }
.so-content details.so-year > table { margin: 0; }
.so-content details.so-year > table th:first-child,
.so-content details.so-year > table td:first-child { white-space: nowrap; }

/* =========================================================================
   EVENTS PAGE — calendar-category filter bar + per-event tags
   ========================================================================= */
.mca-evt-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-md);
}
/* Specificity via .mca-evt-filter prefix so these beat The Events Calendar's
   own .tribe-common a link styles. */
.mca-evt-filter .mca-evt-filter__btn {
  display: inline-block;
  padding: 0.45em 1em;
  border-radius: 999px;
  border: 1.5px solid #d5cfe4;
  background: #f5f3fa;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mca-evt-filter .mca-evt-filter__btn:hover {
  border-color: var(--color-purple);
  color: var(--color-purple);
  background: var(--color-white);
}
.mca-evt-filter .mca-evt-filter__btn.is-active {
  background: var(--color-purple);
  border-color: var(--color-purple);
  color: var(--color-white);
}
/* Small color cue on each category button (left dot). */
.mca-evt-filter .mca-evt-filter__btn[class*="mca-evt-filter__btn--"]::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  margin-right: 0.45em;
  vertical-align: middle;
}
.mca-evt-filter .mca-evt-filter__btn--schoolwidecalendar::before { background: #6b4bb1; }
.mca-evt-filter .mca-evt-filter__btn--grammarcalendar::before { background: #c9820a; }
.mca-evt-filter .mca-evt-filter__btn--uppercalendar::before { background: #2a6db0; }
.mca-evt-filter .mca-evt-filter__btn--extracurricularcalendar::before { background: #2e7d5b; }

/* Per-event category tags (list view). */
.mca-evt-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0;
}
.mca-evt-cat {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--color-white);
  background: var(--color-purple);
}
.mca-evt-cat--schoolwidecalendar { background: #6b4bb1; }
.mca-evt-cat--grammarcalendar { background: #c9820a; }
.mca-evt-cat--uppercalendar { background: #2a6db0; }
.mca-evt-cat--extracurricularcalendar { background: #2e7d5b; }

/* ----------------------------------------------------- WHY MCA (overview) */
.why-intro { padding-top: var(--space-lg); padding-bottom: var(--space-md); text-align: center; }
.why-intro__lead {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--color-text);
}
.why-cards { padding-bottom: var(--space-xl); }
.why-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.why-card:hover {
  border-color: var(--color-purple);
  box-shadow: 0 12px 30px rgba(26, 26, 46, 0.10);
  transform: translateY(-2px);
}
.why-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-purple);
  margin: 0;
}
.why-card__body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0;
}
.why-card__cta {
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
}
@media (min-width: 700px) {
  .why-cards__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
}
@media (min-width: 1000px) {
  .why-cards__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Why MCA overview: hero CTAs, distinctives, stats, quote, fit ---- */
.why-hero__sub {
  max-width: 34ch; margin: var(--space-sm) auto 0; color: rgba(255,255,255,.9);
  font-size: var(--text-lg); line-height: 1.5;
}
.why-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-md); }
.why-inline-link { color: var(--color-purple); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.why-inline-link:hover { color: var(--color-purple-light); }

.why-distinctives { padding: var(--space-xl) 0; background: var(--color-off-white); }
.why-distinctives__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.why-feat {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 1.5);
  padding: var(--space-md); display: flex; flex-direction: column; gap: .55rem;
}
.why-feat__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  background: var(--color-purple); color: var(--color-white); border-radius: var(--radius);
}
.why-feat__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-purple); margin: 0; }
.why-feat__body { font-size: var(--text-sm); line-height: 1.6; margin: 0; color: var(--color-text); }
.why-feat__link { margin-top: auto; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--color-purple); text-decoration: none; }
.why-feat__link:hover { text-decoration: underline; }

.why-stats { background: var(--color-purple); color: var(--color-white); padding: var(--space-lg) 0; }
.why-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); text-align: center; }
.why-stat { display: flex; flex-direction: column; gap: .3rem; }
.why-stat__num { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1; color: var(--color-white); }
.why-stat__unit { font-size: var(--text-lg); margin-left: .25rem; }
.why-stat__num--todo { color: rgba(255,255,255,.55); }
.why-stat__label { font-size: var(--text-sm); color: rgba(255,255,255,.85); line-height: 1.4; }
.why-stat__label em { color: rgba(255,255,255,.6); font-size: var(--text-xs); }

.why-quote { text-align: center; padding: var(--space-xl) var(--space-sm); }
.why-quote__text { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.4; color: var(--color-purple); margin: 0 auto; max-width: 44ch; font-style: italic; }
.why-voices { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-xl); text-align: left; }
.why-voice { margin: 0; background: var(--color-off-white); border-radius: calc(var(--radius) * 1.5); padding: var(--space-md); }
.why-voice blockquote { margin: 0 0 .5rem; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.45; color: var(--color-text); font-style: italic; }
.why-voice figcaption { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; color: var(--color-purple); }
@media (min-width: 700px) { .why-voices { grid-template-columns: repeat(3, 1fr); } }
.why-quote__cite { margin-top: var(--space-sm); font-family: var(--font-ui); font-weight: 600; color: var(--color-text-muted); }
.why-quote__cite em { font-weight: 400; }

.why-fit { padding: 0 0 var(--space-xl); }
.why-fit__list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.why-fit__item { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--text-lg); line-height: 1.5; }
.why-fit__check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; margin-top: 2px;
  background: var(--color-purple); color: var(--color-white);
}
.why-cta__btns { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.why-explore { padding-top: var(--space-xl); border-top: 1px solid var(--color-border); }

@media (min-width: 700px) {
  .why-distinctives__grid { grid-template-columns: repeat(2, 1fr); }
  .why-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) {
  .why-distinctives__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Academics sub-pages (Graduation Plans, Dual Credit, STEM, Senior Thesis) ---- */
.ac-section { max-width: 860px; margin: 0 auto; padding: var(--space-xl) var(--space-sm); }
.ac-section--tight { padding-top: 0; }
.ac-section .mv-h2 { margin-top: .2rem; }
.ac-section p { line-height: 1.7; margin-bottom: var(--space-sm); }
.ac-lead { font-size: var(--text-lg); line-height: 1.7; color: var(--color-text-muted); margin: 0; }
.ac-note { font-style: italic; color: var(--color-text-muted); border-left: 3px solid var(--color-purple-light); padding-left: var(--space-sm); margin-top: var(--space-sm); }
.ac-table { width: 100%; }
.ac-table td:last-child, .ac-table th:last-child { text-align: left; }
.ac-table__total td { border-top: 2px solid var(--color-purple); }
.ac-table--matrix th[scope="row"] { text-align: left; background: var(--color-off-white); color: var(--color-purple); font-family: var(--font-ui); font-size: var(--text-sm); white-space: nowrap; vertical-align: top; }
.ac-table--matrix td { vertical-align: top; font-size: var(--text-sm); line-height: 1.5; }
.ac-grid2 { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }

.ac-callout { background: var(--color-purple); color: var(--color-white); padding: var(--space-lg) var(--space-sm); }
.ac-callout__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.ac-callout .mv-h2 { margin: 0 0 .3rem; }
.ac-callout p { color: rgba(255,255,255,.85); margin: 0; max-width: 46ch; }

.ac-cta { background: var(--color-off-white); text-align: center; padding: var(--space-xl) var(--space-sm); }
.ac-cta .mv-h2 { margin-top: 0; }
.ac-cta p { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.ac-cta__btns { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

@media (min-width: 700px) {
  .ac-grid2 { grid-template-columns: repeat(2, 1fr); }
}

/* Nested document sub-categories on the Resources page */
.res-group.res-depth-2 {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-purple);
  border-bottom: 0;
  margin: var(--space-sm) 0 var(--space-xs);
  padding-left: var(--space-sm);
}
.res-group.res-depth-3 {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-sm) 0 var(--space-xs);
  padding-left: var(--space-md);
}
.res-group.res-depth-2 + .res-files,
.res-group.res-depth-3 + .res-files { padding-left: var(--space-sm); }

/* =========================================================================
   NEWS & ANNOUNCEMENTS (blog archive + single post)
   ========================================================================= */
.news { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.news__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 640px) { .news__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .news__grid { grid-template-columns: 1fr 1fr 1fr; } }
.news-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.news-card:hover { border-color: var(--color-purple); box-shadow: 0 8px 24px rgba(59,42,110,.12); transform: translateY(-2px); }
.news-card__link { display: flex; flex-direction: column; gap: var(--space-xs); height: 100%; padding: var(--space-md); color: inherit; }
.news-card__meta { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold); }
.news-card__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-purple); margin: 0; line-height: 1.2; }
.news-card__excerpt { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.news-card__more { margin-top: auto; padding-top: var(--space-xs); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); }
.news__empty { color: var(--color-text-muted); }

.single { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.single__back { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-purple); }
.single__back:hover { color: var(--color-gold); }
.single__back--bottom { margin-top: var(--space-lg); }
.single__meta { display: block; margin-top: var(--space-md); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold); }
.single__title { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--color-purple); margin: var(--space-xs) 0 var(--space-md); line-height: 1.1; }
.single__content { font-size: var(--text-lg); line-height: 1.7; color: var(--color-text); }
.single__content p { margin-bottom: var(--space-sm); }
.single__content h2 { font-family: var(--font-display); color: var(--color-purple); font-size: var(--text-2xl); margin: var(--space-md) 0 var(--space-sm); }
.single__content ul, .single__content ol { padding-left: 1.25rem; margin: var(--space-sm) 0; }
.single__content ul { list-style: disc; }
.single__content ol { list-style: decimal; }
.single__content li { margin-bottom: .4rem; }
.single__content a { color: var(--color-purple); text-decoration: underline; }
.single__content img { border-radius: var(--radius); margin: var(--space-sm) 0; }

/* ============================== Parent Service ============================== */
.svc { padding: 0 var(--space-sm) var(--space-xl); max-width: var(--container); }

/* Two-column layout: opportunities (main) + condensed summary (sidebar). */
.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-lg);
  align-items: start;
  padding-top: var(--space-lg);
}
.svc-main { min-width: 0; }
.svc-main .svc-switch { margin-top: 0; }

.svc-aside {
  position: sticky;
  top: calc(var(--header-height) + var(--space-sm));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.svc-aside__card {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 2);
  padding: var(--space-md);
}
.svc-aside__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-purple);
  margin-bottom: .5rem;
}
.svc-aside__card p { font-size: var(--text-sm); line-height: 1.6; }
.svc-aside__facts { list-style: none; margin: 0 0 .6rem; padding: 0; }
.svc-aside__facts li {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .45rem 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm);
}
.svc-aside__facts li:last-child { border-bottom: 0; }
.svc-aside__fact-val { font-family: var(--font-ui); font-weight: 700; color: var(--color-purple); white-space: nowrap; }
.svc-aside__note { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; margin-top: .2rem; }
.svc-aside__note strong { color: var(--color-purple); }
.svc-aside__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.svc-aside__bullets li { font-size: var(--text-sm); line-height: 1.5; padding-left: 1rem; position: relative; }
.svc-aside__bullets li::before { content: "\2022"; color: var(--color-purple-light); position: absolute; left: 0; }

@media (max-width: 980px) {
  .svc-layout { grid-template-columns: 1fr; gap: var(--space-md); }
  .svc-aside { position: static; order: 2; margin-top: var(--space-md); }
}
.svc__head { margin-bottom: var(--space-lg); }
.svc-hero__cta { margin-top: var(--space-md); }
#service-opportunities { scroll-margin-top: calc(var(--header-height) + var(--space-sm)); }
.svc__intro h2 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-purple); margin: var(--space-lg) 0 var(--space-sm); }
.svc__intro p { margin-bottom: var(--space-sm); line-height: 1.6; }
.svc-table__wrap { overflow-x: auto; margin: var(--space-sm) 0 var(--space-md); }
.svc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.svc-table th, .svc-table td { border: 1px solid var(--color-border); padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; }
.svc-table th { background: var(--color-purple); color: var(--color-white); font-family: var(--font-ui); }
.svc-table tbody tr:nth-child(even) { background: var(--color-off-white); }
.svc-tif { background: var(--color-off-white); border-radius: calc(var(--radius) * 2); padding: var(--space-md); margin-top: var(--space-md); }
.svc-tif__links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }

.svc__opportunities { margin-top: var(--space-xl); }
.svc__opps-title { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-purple); }
.svc__opps-note { color: var(--color-text-muted); font-style: italic; margin-bottom: var(--space-md); }
.svc-group {
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: var(--text-sm); color: var(--color-purple);
  border-bottom: 2px solid var(--color-purple-light); padding-bottom: .4rem;
  margin: var(--space-lg) 0 var(--space-sm);
}
.svc-search { position: relative; max-width: none; margin: 0 0 var(--space-sm); color: var(--color-text-muted); }
.svc-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); }
.svc-search input {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 0.85em 1em 0.85em 2.6em;
}
.svc-search input:focus { outline: none; border-color: var(--color-purple-light); box-shadow: 0 0 0 3px rgba(90,68,144,.15); }
.svc__toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); }
.svc__toggle-all { background: none; border: 0; color: var(--color-purple); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }

.svc-group__count { display: inline-block; background: var(--color-off-white); color: var(--color-purple); border-radius: 999px; font-size: var(--text-xs); padding: 1px 9px; margin-left: .4rem; vertical-align: middle; letter-spacing: 0; }
.svc-groupwrap[hidden] { display: none; }

.svc-list { display: flex; flex-direction: column; gap: 6px; }
.svc-item { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); overflow: hidden; }
.svc-item[hidden] { display: none; }
.svc-item__summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  padding: 0.7rem var(--space-md); -webkit-user-select: none; user-select: none;
  transition: background-color .12s ease;
}
.svc-item__summary::-webkit-details-marker { display: none; }
.svc-item__summary::marker { content: ""; }
.svc-item__summary:hover { background: var(--color-off-white); }
.svc-item__title { font-family: var(--font-ui); font-size: var(--text-base); font-weight: 700; color: var(--color-text); }
.svc-item__when { font-weight: 500; font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }
.svc-item__chev { margin-left: auto; color: var(--color-purple-light); display: inline-flex; flex-shrink: 0; transition: transform .2s ease; }
.svc-item[open] .svc-item__chev { transform: rotate(180deg); }
.svc-item__body { padding: var(--space-sm) var(--space-md) var(--space-md); border-top: 1px solid var(--color-border); }
.svc-item__desc { font-size: var(--text-sm); line-height: 1.55; margin-bottom: .5rem; }
.svc-item__roles { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.svc-item__roles li { font-size: var(--text-sm); color: var(--color-text); padding-left: 1rem; position: relative; }
.svc-item__roles li::before { content: "\2022"; color: var(--color-purple-light); position: absolute; left: 0; }
.svc-item__coord, .svc-item__req { font-size: var(--text-sm); margin-bottom: .3rem; }
.svc-item__coord strong, .svc-item__req strong { color: var(--color-purple); }
.svc-item__link { margin-top: .5rem; }
.svc-noresults { text-align: center; color: var(--color-text-muted); font-style: italic; padding: var(--space-md) 0; }
.svc-empty { color: var(--color-text-muted); font-style: italic; }

/* ---- School toggle (Grammar / Upper) — mirrors staff directory filter ---- */
.svc-switch { margin-top: var(--space-xl); text-align: center; }
.svc-switch__title { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-purple); margin-bottom: var(--space-sm); }
.svc__filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: var(--space-md); }
.svc__filter-btn {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600;
  padding: .5rem 1.3rem; border-radius: 999px; cursor: pointer;
  background: var(--color-off-white); color: var(--color-text); border: 1px solid var(--color-border);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.svc__filter-btn:hover { border-color: var(--color-purple-light); }
.svc__filter-btn.is-active { background: var(--color-purple); color: var(--color-white); border-color: var(--color-purple); }
.svc-panel.is-hidden { display: none; }
.svc-panel__intro { line-height: 1.6; margin-bottom: var(--space-md); }
.svc-signup { background: var(--color-off-white); border-radius: calc(var(--radius) * 2); padding: var(--space-md); margin-top: var(--space-md); }
.svc-signup__links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.svc-grammar-options {
  list-style: none; margin: var(--space-sm) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px;
}
.svc-grammar-options li {
  font-size: var(--text-sm); color: var(--color-text); padding: .4rem .8rem .4rem 1.6rem;
  position: relative; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white);
}
.svc-grammar-options li::before { content: "\2022"; color: var(--color-purple-light); position: absolute; left: .7rem; }

/* ============================== Current Family Guide ============================== */
.cfg { padding: var(--space-xl) var(--space-sm); max-width: 1000px; }
/* Quick links reuse the shared .quicklinks / .quicklink component (see home). */
.cfg-quicklinks { margin-bottom: 0; }
.cfg-switch { text-align: center; margin-bottom: var(--space-lg); }
.cfg__filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.cfg__filter-btn {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600;
  padding: .5rem 1.3rem; border-radius: 999px; cursor: pointer;
  background: var(--color-off-white); color: var(--color-text); border: 1px solid var(--color-border);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cfg__filter-btn:hover { border-color: var(--color-purple-light); }
.cfg__filter-btn.is-active { background: var(--color-purple); color: var(--color-white); border-color: var(--color-purple); }
.cfg-switch__note { color: var(--color-text-muted); font-style: italic; font-size: var(--text-sm); margin-top: var(--space-xs); }
.cfg-panel.is-hidden { display: none; }
.cfg-content { max-width: 720px; margin: 0 auto; }
.cfg-lead {
  font-size: var(--text-lg); line-height: 1.7; color: var(--color-text-muted);
  margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border);
}
.cfg-content h2 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-purple); margin: var(--space-xl) 0 var(--space-sm); }
.cfg-content h2:first-of-type { margin-top: 0; }
.cfg-content h3 { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin: var(--space-md) 0 .4rem; }
.cfg-content p { line-height: 1.7; margin-bottom: var(--space-sm); }
.cfg-list { list-style: none; margin: 0 0 var(--space-sm); padding: 0; }
.cfg-list li { position: relative; padding-left: 1.35rem; line-height: 1.6; margin-bottom: .35rem; }
.cfg-list li::before { content: "\2022"; color: var(--color-purple-light); position: absolute; left: .35rem; font-weight: 700; }
.cfg-content strong { color: var(--color-text); font-weight: 700; }
.cfg-content a { color: var(--color-purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cfg-content a:hover { color: var(--color-purple-light); }

/* ============================== Newsletter ============================== */
.nl { padding: var(--space-xl) var(--space-sm); }
.nl__head { margin-bottom: var(--space-lg); }
.nl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nl-item__link {
  display: flex; align-items: baseline; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-white); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nl-item__link:hover { border-color: var(--color-purple-light); box-shadow: 0 4px 14px rgba(20,16,40,.08); }
.nl-item__date { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; min-width: 6.5rem; }
.nl-item__title { font-family: var(--font-ui); font-weight: 600; color: var(--color-text); flex: 1; }
.nl-item__arrow { color: var(--color-purple-light); font-size: var(--text-lg); }
.nl-empty { text-align: center; color: var(--color-text-muted); font-style: italic; padding: var(--space-lg) 0; }

/* ============================== Giving ============================== */
.giving { padding: var(--space-xl) var(--space-sm); }
.giving__head { margin-bottom: var(--space-lg); }
.giving__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 640px) { .giving__cards { grid-template-columns: 1fr 1fr; } }
.giving__card { border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 2); padding: var(--space-lg); background: var(--color-white); text-align: center; }
.giving__card-title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-purple); margin-bottom: var(--space-sm); }
.giving__card p { color: var(--color-text-muted); margin-bottom: var(--space-md); }