/* ============================================================
   Freire Schools — Global Styles
   Source of truth: docs/freire-schools-brand.md
   ============================================================ */

/* ── Brand Fonts ── */
@font-face {
  font-family: 'Brandon Grotesque Black';
  src: url('../assets/fonts/hvd_fonts_-_brandongrotesque-black-webfont.woff2') format('woff2'),
       url('../assets/fonts/hvd_fonts_-_brandongrotesque-black-webfont.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  /* Backstop against the page ever panning sideways on mobile. Anything
     that actually overflows should be fixed at its source (see the nav
     dropdowns and .staff-list) — this only guarantees a stray overflow
     can never turn into a draggable page. */
  overflow-x: hidden;   /* fallback for engines without `clip` */
  overflow-x: clip;     /* `clip` is not scrollable at all, unlike `hidden`,
                           so nothing can pan the page sideways */
  /* iOS Safari can otherwise still rubber-band horizontally past the
     edge; this stops that bounce/scroll chaining explicitly. */
  overscroll-behavior-x: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Design Tokens ── */
:root {
  /* Freire Schools Collaborative (FSNO) */
  --color-fsno-primary:      #4C345B;  /* Deep Purple */
  --color-fsno-secondary:    #E94D52;  /* Coral Red — CTAs, links, interactive */
  --color-fsno-accent:       #EC6F58;  /* Warm Orange — sparingly */

  /* UI Accents — chips, tags, badges, tints only */
  --color-fsno-ui-lavender:  #9270A8;
  --color-fsno-ui-coral:     #F26D73;
  --color-fsno-ui-blush:     #FDE4E0;

  /* School colors */
  --color-fchs-primary:      #163F6A;
  --color-fchs-secondary:    #3BB54A;
  --color-fcms-primary:      #7AB742;
  --color-fcms-secondary:    #163F6A;
  --color-tech-primary:      #8E241D;
  --color-tech-secondary:    #ECC34B;
  --color-fcsw-primary:      #5FB8E7;
  --color-fcsw-primary-alt:  #17214A;
  --color-fcsw-secondary:    #F58221;

  /* Typography — Brandon Grotesque Light & Adele Sans not yet licensed
     for web; Montserrat 300 / Open Sans stand in per brand fallbacks. */
  --font-display: 'Brandon Grotesque Black', 'Montserrat', sans-serif;
  --font-subhead: 'Montserrat', sans-serif;
  --font-body:    'Adele Sans', 'Open Sans', 'Franklin Gothic Book', Calibri, Tahoma, sans-serif;

  /* Off-white surfaces */
  --color-bg-page:           #FAF8FB;  /* subtle purple-tinted off-white — main page bg */
  --color-bg-card:           #F2EDF6;  /* deeper lavender-tinted off-white — cards on page bg */

  --nav-height: 88px;
  --content-max: 1200px;
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Second line of defence against horizontal panning. Must be `clip`,
     not `hidden` — `hidden` would make body a scroll container and break
     the sticky nav. */
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #2b2b2b;
  background: var(--color-bg-page);
}

/* Darkened via --scroll-bg on pages with a scroll-driven effect
   (e.g. Our History's timeline); falls back to the page background
   everywhere else. */
main {
  background: var(--scroll-bg, var(--color-bg-page));
  transition: background-color 0.15s linear;
}

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

h1, h2 {
  font-family: var(--font-display);
  text-transform: uppercase; /* Brandon Grotesque: ALL CAPS only */
  line-height: 1.1;
  margin: 0 0 0.5em;
}

h3, h4 {
  font-family: var(--font-subhead);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5em;
}

a { color: var(--color-fsno-secondary); }

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

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-primary {
  background: var(--color-fsno-secondary);
  color: #fff;
}
.btn-primary:hover { background: #d43c41; }

.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.15); }

/* Outline variant for light backgrounds (.btn-outline assumes a
   colored/photo hero behind it) */
.btn-outline-dark {
  background: transparent;
  color: var(--color-fsno-primary);
  border: 2px solid var(--color-fsno-primary);
}
.btn-outline-dark:hover { background: var(--color-bg-card); }

.back-btn {
  display: inline-block;
  margin-bottom: 24px;
}

.btn-purple {
  background: var(--color-fsno-primary);
  color: #fff;
}
.btn-purple:hover { background: #3a2746; }

.btn-white {
  background: #fff;
  color: var(--color-fsno-secondary);
}
.btn-white:hover { background: rgba(255, 255, 255, 0.85); }

/* ============================================================
   Navigation Bar (global) — white bg, Brandon Grotesque links
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

/* Hamburger — mobile only; the media query below switches it on. Drawn
   from one element: the middle bar is the box itself, the outer two are
   ::before/::after. Open state morphs it into an X. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 10px;
  margin-right: -10px; /* optical: align the bars with the container edge */
  cursor: pointer;
  line-height: 0;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-fsno-primary);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -8px; }
.nav-toggle-bars::after  { top: 8px; }

.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle-bars::after  { transform: translateY(-8px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: none; }
}

.site-nav .nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav-logo img {
  height: 64px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li { position: relative; }

.nav-links > li > a,
.nav-links > li > .nav-toplevel {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--color-fsno-primary);
  text-decoration: none;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-links > li > a:hover,
.nav-links > li > .nav-toplevel:hover {
  color: var(--color-fsno-secondary);
}

/* Enroll — CTA treatment */
.nav-links > li > a.nav-cta {
  background: var(--color-fsno-secondary);
  color: #fff;
  border-radius: 4px;
  padding: 12px 24px;
  margin-left: 8px;
}
.nav-links > li > a.nav-cta:hover { background: #d43c41; }

/* Dropdowns */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10; /* sit above sibling nav links, e.g. when the mobile nav wraps to multiple rows */
  min-width: 320px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-top: 3px solid var(--color-fsno-secondary);
  border-radius: 0 0 6px 6px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-links li:hover > .dropdown-menu,
.nav-links li:focus-within > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  color: var(--color-fsno-primary);
  text-decoration: none;
  padding: 12px 20px;
}

.dropdown-menu a:hover {
  background: var(--color-fsno-ui-blush);
  color: var(--color-fsno-secondary);
}

.dropdown-menu .menu-note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: #5a5a5a;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(76, 52, 91, 0.85) 0%, rgba(76, 52, 91, 0.55) 45%, rgba(76, 52, 91, 0.15) 100%);
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  margin-bottom: 0.25em;
}

.hero .hero-sub {
  font-family: var(--font-subhead);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1rem, 2vw, 1.35rem);
  max-width: 560px;
  margin: 0 0 1.75em;
}

.hero .hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   Mission band
   ============================================================ */
.mission {
  background: var(--color-fsno-primary);
  color: #fff;
  padding: 56px 0 88px;
  text-align: center;
}

.mission h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 800px;
  margin: 0 auto 0.5em;
}

.mission p {
  font-size: 1.15rem;
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
}

.mission-cta {
  margin-top: 32px;
}

/* ============================================================
   Our Impact — three highlight tiles on the lavender card bg
   (same tone as Who We Are's "Message from the CEO" section)
   ============================================================ */
.impact {
  background: var(--color-bg-card);
  color: #2b2b2b;
  padding: 56px 0 88px;
  text-align: center;
}

.impact h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-fsno-primary);
  margin-bottom: 48px;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
}

.impact-tile {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 28px 24px;
}

.impact-chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--color-fsno-secondary);
  border-radius: 999px;
  padding: 4px 16px;
  margin-bottom: 16px;
}

.impact-tile p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #444;
}

.impact-tile a {
  color: var(--color-fsno-secondary);
  font-weight: 600;
}

.impact-actions {
  margin-top: 48px;
}

/* ============================================================
   Photo carousel
   ============================================================ */
/* Continuous marquee: two identical sets scroll left; the loop restarts
   invisibly when the first set has fully passed. Pauses on hover. */
.carousel {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: carousel-scroll 60s linear infinite;
}

.carousel:hover .carousel-track {
  animation-play-state: paused;
}

.carousel-set {
  display: flex;
}

.carousel-set img {
  flex: 0 0 auto;
  width: clamp(240px, 25vw, 400px);
  height: 280px;
  object-fit: cover;
  object-position: center 30%; /* keep faces in frame */
}

@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { animation: none; }
}

/* ============================================================
   Our Schools tiles
   ============================================================ */
.schools {
  padding: 56px 0 88px;
  background: #faf8fb;
  scroll-margin-top: var(--nav-height);
}

.schools h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-fsno-primary);
  text-align: center;
  margin-bottom: 48px;
}

.school-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.school-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.school-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-fsno-primary);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.school-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(76, 52, 91, 0.18);
}

.school-card .card-photo {
  position: relative;
}

.school-card .card-photo > img:first-child {
  height: 260px;
  width: 100%;
  object-fit: cover;
  object-position: center 25%; /* keep faces in frame */
}

/* slight black overlay so the white logo reads over any photo;
   shifts to the school's brand color on hover */
.school-card .card-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  transition: background-color 0.25s ease;
}

.school-card:hover .card-photo::after {
  background: color-mix(in srgb, var(--school-color, var(--color-fsno-primary)) 70%, transparent);
}

.school-card .card-logo {
  position: absolute;
  left: 20px;
  top: 20px;
  height: 56px;
  width: auto;
  max-width: calc(100% - 48px);
  z-index: 1;
}

.school-card .card-body {
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.school-card .grades {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: #fff;
  background: var(--color-fsno-primary);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 12px;
}

.school-card .card-desc {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.5;
  margin: 0 0 16px;
}

.school-card address {
  font-style: normal;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 20px;
  flex: 1;
}

/* Address opens a map; visually identical to the plain text it replaced */
.school-card address a {
  color: inherit;
  text-decoration: none;
}

.school-card .btn {
  align-self: flex-start;
  font-size: 0.8rem;
  padding: 10px 22px;
  background: var(--color-fsno-primary);
  color: #fff;
  transition: filter 0.2s ease;
}
.school-card .btn:hover { filter: brightness(0.78); }

/* ============================================================
   College acceptances
   ============================================================ */
.college {
  padding: 56px 0 88px;
  text-align: center;
  background: #faf8fb;
  --school-primary: var(--color-fsno-primary);
}

.college h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--color-fsno-primary);
  margin-bottom: 24px;
}

.college p {
  max-width: 640px;
  margin: 0 auto 28px;
}

.college-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  list-style: none;
  max-width: 880px;
  margin: 0 auto 16px;
  padding: 0;
}

.college-list li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-fsno-primary);
  background: #fff;
  border: 1px solid #DED7E5;
  border-radius: 999px;
  padding: 8px 18px;
}

/* The college pills are one wrapped block on desktop but a paged carousel
   on mobile, where 17 of them otherwise stack ~900px tall. A single set of
   markup drives both: above 720px the carousel wrappers collapse with
   display: contents, so every <li> becomes a direct flex child of
   .college-carousel and lays out exactly like the original .college-list.
   Selectors are two classes deep to outrank .swipe-carousel, which is
   defined later in this file. */
@media (min-width: 721px) {
  .college .college-carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    max-width: 880px;
    margin: 0 auto 16px;
  }
  .college-carousel .swipe-carousel-viewport,
  .college-carousel .swipe-carousel-track,
  .college-carousel .college-list { display: contents; }
  .college-carousel .swipe-carousel-controls { display: none; }
}

@media (max-width: 720px) {
  .college .college-carousel { max-width: none; margin: 0 auto 8px; }
  /* each slide is its own centred pill block, so drop the list's own
     width cap and bottom margin */
  .college-carousel .college-list { max-width: none; margin: 0; }
}

.stat-grid-college {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.college .btn {
  margin-top: 40px;
}

/* ============================================================
   Enroll / Support CTA split
   ============================================================ */
.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cta-panel {
  position: relative;
  overflow: hidden;
  padding: 72px 64px;
}

.cta-panel-enroll {
  background: var(--color-fsno-secondary);
  color: #fff;
}

.cta-panel-support {
  background: var(--color-bg-card);
  color: #2b2b2b;
}

.cta-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.cta-panel-enroll .cta-eyebrow { color: var(--color-fsno-primary); }
.cta-panel-support .cta-eyebrow { color: var(--color-fsno-secondary); }

.cta-panel h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  max-width: 420px;
  margin: 0 0 16px;
  position: relative;
}

.cta-panel-support h2 { color: var(--color-fsno-primary); }

.cta-panel p {
  max-width: 420px;
  margin: 0 0 28px;
  position: relative;
}

.cta-panel-enroll p { color: rgba(255, 255, 255, 0.9); }
.cta-panel-support p { color: #555; }

.cta-panel .btn { position: relative; }

@media (max-width: 720px) {
  .cta-split { grid-template-columns: 1fr; }
  .cta-panel { padding: 56px 32px; }
}

/* ============================================================
   Footer (global)
   ============================================================ */
.site-footer {
  background: var(--color-fsno-primary);
  color: rgba(255, 255, 255, 0.9);
  padding: 64px 0 32px;
}

.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-logo img { height: 56px; margin-bottom: 20px; }

.site-footer h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}

.site-footer address {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.7;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li { margin-bottom: 10px; font-size: 0.95rem; }

.footer-social {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background-color 0.2s ease;
}
.footer-social a:hover { background: var(--color-fsno-secondary); }
.footer-social svg { width: 20px; height: 20px; fill: #fff; }

.footer-search {
  display: flex;
  max-width: 320px;
}

.footer-search input {
  flex: 1;
  border: none;
  border-radius: 4px 0 0 4px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.footer-search button {
  border: none;
  background: var(--color-fsno-secondary);
  color: #fff;
  border-radius: 0 4px 4px 0;
  padding: 10px 16px;
  cursor: pointer;
  font-family: var(--font-subhead);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 24px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  text-align: center;
}

/* Google Translate dropdown, below the footer search — sized to match
   the search box above it (same 320px cap, padding, and radius) */
.footer-translate-heading { margin-top: 28px; }

#google_translate_element { max-width: 320px; }

#google_translate_element select.goog-te-combo {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: none;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

/* "Powered by Google Translate" attribution under the select */
#google_translate_element .goog-te-gadget {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.75rem;
}

/* The widget injects a "translated" banner iframe that pushes the page
   down by setting top on <body>; suppress both */
iframe.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   School pages — shared layout. Each page sets its own school
   colors via --school-primary / --school-secondary on <body>.
   ============================================================ */
.school-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  color: #fff;
  background: var(--school-primary);
}

/* Photo layer: fills the right side of the hero at full color,
   cropped toward the student's face. Wider than the visible area so
   its left edge sits under the solid part of the gradient. */
.school-hero .hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 54%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

/* Soft feather: gradient stays fully solid past the photo's left edge
   (46%) so no hard photo boundary is ever visible, then eases out
   through graduated stops so the fade reads smooth, leaving the right
   ~20% of the hero photo fully unobscured */
.school-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--school-primary) 0%,
    var(--school-primary) 48%,
    color-mix(in srgb, var(--school-primary) 82%, transparent) 56%,
    color-mix(in srgb, var(--school-primary) 55%, transparent) 63%,
    color-mix(in srgb, var(--school-primary) 30%, transparent) 69%,
    color-mix(in srgb, var(--school-primary) 12%, transparent) 74%,
    transparent 80%);
}

.school-hero .container {
  position: relative;
  z-index: 1;
  width: 100%; /* fill the flex parent so copy left-aligns with page content */
}

.school-hero .hero-logo {
  height: 96px;
  width: auto;
  margin-bottom: 24px;
}

.school-hero .hero-meta {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  margin: 0 0 6px;
}

.school-hero .hero-contact {
  font-size: 1rem;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.92);
}
.school-hero .hero-contact a { color: #fff; text-decoration: none; }

.school-hero .contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.school-hero .contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.school-hero .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.school-hero .hero-actions .btn { font-size: 1rem; }

/* ============================================================
   Careers — "Why Work at Freire" 3-column cards
   ============================================================ */
/* Callout: spans the full width of the tile carousel below it */
.career-callout {
  background: var(--color-fsno-secondary);
  color: #fff;
  border-radius: 8px;
  padding: 32px 36px;
  margin: 40px 0 28px;
}
.career-callout h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
  margin: 0 0 10px;
}
.career-callout p { margin: 0; }

/* Tile carousel: no width cap, so it spans the same width as the
   callout box above it (which also has no max-width of its own).
   Needs .swipe-carousel in the selector to beat that class's own
   max-width rule, which appears later in this file. */
.swipe-carousel.career-carousel { max-width: none; }

.career-tile {
  display: flex;
  align-items: stretch;
  gap: 28px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.career-tile-copy { padding: 28px 28px 28px 0; flex: 1; }

.career-tile-copy h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--school-primary);
  font-size: 1.1rem;
  margin: 0 0 12px;
}

.career-tile-copy blockquote.testimonial { margin: 20px 0 0; }

.career-tile-photo {
  width: 320px;
  align-self: stretch;
  flex-shrink: 0;
  object-fit: cover;
}

.career-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 32px 0;
}

@media (max-width: 720px) {
  .career-tile { flex-direction: column; }
  .career-tile-copy { padding: 24px; }
  .career-tile-photo { width: 100%; height: 200px; }
}

/* Teacher Spotlight trigger — opens the same modal pattern used on
   Our People */
.spotlight-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 720px;
  background: #fff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 20px 24px;
  margin: 32px auto;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.2s ease;
}
.spotlight-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }

.spotlight-card img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  flex-shrink: 0;
}

.spotlight-card-text { display: flex; flex-direction: column; gap: 4px; }

.spotlight-eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--color-fsno-secondary);
}

.spotlight-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--school-primary);
}

.spotlight-role { font-size: 0.9rem; color: #555; }

.spotlight-cta {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-fsno-secondary);
  margin-top: 2px;
}

.spotlight-icon {
  width: 84px;
  height: 84px;
  color: var(--school-primary);
  opacity: 0.12;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .spotlight-icon { display: none; }
}

/* FAQ accordions, capped to a readable width */
.faq-heading { text-align: center; }
.faq-list { max-width: 820px; margin: 0 auto; }

/* Refer a Friend: full-width band in a different background so it
   reads as its own section */
.refer-a-friend {
  background: var(--color-bg-card);
  padding: 72px 0;
  scroll-margin-top: var(--nav-height);
}

.refer-a-friend h3 {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 900;
  color: var(--school-primary);
  font-size: 1.2rem;
  margin: 32px 0 12px;
}

.refer-a-friend ul { margin: 0 0 16px; padding-left: 22px; }
.refer-a-friend li { margin-bottom: 6px; }
.refer-a-friend .btn { margin-top: 8px; }

.refer-grid {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 8px;
}

.refer-photo {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 720px) {
  .refer-grid { grid-template-columns: 1fr; }
  .refer-photo { max-height: 240px; }
}

/* --school-btn-text lets pages with a light secondary (e.g. TECH gold)
   use dark button text for contrast */
.btn-school {
  background: var(--school-secondary);
  color: var(--school-btn-text, #fff);
}
.btn-school:hover { filter: brightness(0.85); }

.btn-school-primary {
  background: var(--school-primary);
  color: #fff;
}
.btn-school-primary:hover { filter: brightness(1.25); }

/* About band */
.school-about { padding: 72px 0; }

.school-about h1,
.school-about h2 { color: var(--school-primary); font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* Extra breathing room between the Mission callout and the next
   heading (e.g. Vision) that follows it directly */
.school-mission + h2 { margin-top: 48px; }

/* Same breathing room when a page's h1 is directly followed by its
   first subsection heading, with no lead paragraph in between */
.school-about h1 + h2 { margin-top: 32px; }

/* Accordions live below the photo-spanning grid, capped to the same
   width as the lead paragraphs above them */
.vision-accordions { max-width: 820px; }

/* Tighten the gap between the last Vision accordion and the "Our
   Impact" section that follows it directly on Who We Are */
.vision-section { padding-bottom: 24px; }


/* ============================================================
   Our People — network staff tile grid + bio popup
   ============================================================ */
.people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
  margin: 40px 0 56px;
}

@media (min-width: 560px) { .people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .people-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1150px) { .people-grid { grid-template-columns: repeat(5, 1fr); } }

.people-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.people-tile img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.people-tile:hover img,
.people-tile:focus-visible img {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(76, 52, 91, 0.25);
}

.people-tile:focus-visible { outline: 2px solid var(--school-primary); outline-offset: 4px; }

.people-tile-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  color: var(--school-primary);
  margin-top: 4px;
}

.people-tile-role { font-size: 0.8rem; color: #555; line-height: 1.3; }

/* Section subheads (Network Office Team, Board of Directors):
   smaller than the H1 title, in FSNO red rather than school primary.
   (h2.section-subheading beats ".school-about h2" specificity) */
h2.section-subheading {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-fsno-secondary);
  font-size: 1.4rem;
  margin: 0 0 16px;
}

/* Network office intro spans the full grid width (no lead max-width cap) */
.people-intro { margin-bottom: 12px; }

.board-accordions { margin-bottom: 32px; }

.board-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.board-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid #E7E2EC;
}
.board-list li:last-child { border-bottom: none; }

.board-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  color: var(--school-primary);
}

.board-title { font-size: 0.9rem; color: #555; }

.board-email { font-size: 0.85rem; margin-top: 2px; }
.board-email a { color: var(--color-fsno-secondary); }

.board-notice { margin-top: 8px; }

/* Bio popup */
.people-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.people-modal[hidden] { display: none; }

.people-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 36, 0.6);
}

.people-modal-panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 10px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 40px;
}

.people-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-card);
  color: var(--school-primary);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.people-modal-close:hover { background: var(--color-fsno-ui-blush); }

/* Popup: top row is photo + name/credentials side by side;
   the description sits in a second row spanning the full width */
.people-modal-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.people-modal-top img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.people-modal-info h3 {
  font-family: var(--font-display);
  color: var(--school-primary);
  font-size: 1.25rem;
  margin: 0 0 4px;
}

.people-modal-role {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  color: var(--color-fsno-secondary);
  margin: 0 0 8px;
}

.people-modal-credentials {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

.people-modal-desc { margin-top: 24px; }
.people-modal-desc p { margin: 0 0 14px; }
.people-modal-desc p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .people-modal-top { flex-direction: column; align-items: center; text-align: center; }
  .people-modal-panel { padding: 32px 24px; }
}

.school-about .lead { max-width: 820px; }

.by-the-numbers {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--school-primary);
  font-size: 1.1rem;
  margin: 40px 0 0;
}

/* Vision section: full-width accordions, no sidebar (network-level page) */
/* Message from the CEO */
.ceo-message {
  background: var(--color-bg-card);
  padding: 72px 0;
}

.ceo-message h2 {
  color: var(--school-primary);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 32px;
}

.ceo-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

.ceo-photo {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 8px;
}

.ceo-copy p { max-width: 720px; }

.ceo-signature { margin-top: 24px; }
.ceo-signature img { height: 96px; width: auto; margin-bottom: 6px; }

.ceo-sig-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--school-primary);
  margin: 0;
}

.ceo-sig-name-red { color: var(--color-fsno-secondary); }

.ceo-sig-title {
  font-size: 0.9rem;
  color: #555;
  margin: 2px 0 0;
}

@media (max-width: 720px) {
  .ceo-grid { grid-template-columns: 1fr; }
  .ceo-photo { height: 260px; }
}

/* About copy + mission callout on the left; photo on the right spans
   from the top of the heading to the bottom of the mission box */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 820px) 1fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 36px;
}

.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%; /* keep the flag in frame */
  border-radius: 8px;
}

/* Keeps the photo at its own fixed height instead of stretching to
   match a taller sibling column (e.g. Press Room's press list) */
.about-photo-fixed {
  height: 480px;
  align-self: start;
}

.school-mission {
  background: var(--color-bg-card);
  border-left: 6px solid var(--school-primary);
  border-radius: 8px;
  padding: 28px 32px;
  margin-top: 32px;
}
.school-mission h3 { color: var(--school-primary); font-family: var(--font-display); font-weight: 900; }
.school-mission p { margin: 0; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 40px;
}

.stat-tile {
  text-align: center;
  padding: 24px 20px;
}

.stat-tile + .stat-tile {
  border-left: 2px solid #DED7E5; /* vertical divider */
}

.stat-tile .stat-eyebrow {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--school-secondary);
  margin-bottom: 4px;
}

.stat-tile .stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--school-primary);
}

.stat-tile .stat-label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: #555;
}

.stat-grid-compact { margin-top: 20px; }
.stat-grid-compact .stat-tile { padding: 16px 12px; }
.stat-grid-compact .stat-value { font-size: 2rem; }

.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Stat-tile entrance: fade/rise in, staggered, as each tile scrolls
   into view (paired with each page's count-up script). Used by "By
   the Numbers" (Who We Are) and the Mission stat tiles (school pages). */
.stat-grid-4 .stat-tile,
.stat-grid-mission .stat-tile,
.stat-grid-college .stat-tile {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.stat-grid-4 .stat-tile.in-view,
.stat-grid-mission .stat-tile.in-view,
.stat-grid-college .stat-tile.in-view { opacity: 1; transform: translateY(0); }
.stat-grid-4 .stat-tile:nth-child(1),
.stat-grid-mission .stat-tile:nth-child(1),
.stat-grid-college .stat-tile:nth-child(1) { transition-delay: 0s; }
.stat-grid-4 .stat-tile:nth-child(2),
.stat-grid-mission .stat-tile:nth-child(2),
.stat-grid-college .stat-tile:nth-child(2) { transition-delay: 0.12s; }
.stat-grid-4 .stat-tile:nth-child(3),
.stat-grid-mission .stat-tile:nth-child(3),
.stat-grid-college .stat-tile:nth-child(3) { transition-delay: 0.24s; }
.stat-grid-4 .stat-tile:nth-child(4) { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  .stat-grid-4 .stat-tile,
  .stat-grid-mission .stat-tile,
  .stat-grid-college .stat-tile {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Main two-column layout: accordions left 3/4, sticky sidebar right 1/4 */
.school-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 40px;
  align-items: start;
  padding-bottom: 72px;
}

.accordion {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
  overflow: hidden;
}

.accordion summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.1rem;
  color: #fff;
  background: var(--school-primary);
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: filter 0.2s ease;
}
.accordion summary:hover { filter: brightness(1.15); }

/* FCSW: swap the accordion header fill from the dark navy primary to
   the school's orange secondary in dark mode, for better visibility
   against a dark system/browser theme */
@media (prefers-color-scheme: dark) {
  .fcsw-page .accordion summary { background: var(--school-secondary); }
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font-size: 1.5rem; line-height: 1; flex-shrink: 0; padding-left: 16px; }
.accordion[open] summary::after { content: '\2212'; }

.accordion .accordion-body { padding: 28px 28px 32px; }
.accordion .accordion-body > :first-child { margin-top: 0; }

/* Vision accordions (Who We Are): icon + bold lead sentence at the
   top of the body, standing in for the old two-line summary teaser.
   Icon is intentionally large since it's only revealed on expand. */
.accordion-intro {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}
.accordion-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
  flex-shrink: 0;
}
.accordion-lead {
  margin: 0;
  color: var(--school-primary);
}
@media (max-width: 480px) {
  .accordion-intro { align-items: flex-start; }
  .accordion-icon { width: 64px; height: 64px; }
}

.accordion h3 { color: var(--school-primary); font-family: var(--font-display); font-weight: 900; margin-top: 1.5em; }

.col-list {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  gap: 8px 24px;
}
.col-list.cols-2 { grid-template-columns: repeat(2, 1fr); }
.col-list li {
  padding-left: 18px;
  position: relative;
}
.col-list li::before {
  content: '\25C6';
  position: absolute;
  left: 0;
  top: 0.35em;
  font-size: 0.5rem;
  color: var(--school-secondary);
}
.col-list .pn-meeting-note {
  display: block;
  font-size: 0.85em;
  color: var(--color-text-muted, #666);
  margin-top: 2px;
}

/* One tile per grade level in a single row; clicking a tile opens the
   grade's course list in the shared popup (same dialog as Our People) */
.course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 20px 0;
}

.course-grid-5 { grid-template-columns: repeat(5, 1fr); }

.course-tile {
  font: inherit;
  background: var(--color-bg-card);
  border: none;
  border-radius: 6px;
  padding: 22px 14px;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-tile:hover,
.course-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(76, 52, 91, 0.18);
}

.course-tile-grade {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--school-primary);
  font-size: 0.95rem;
}

.course-tile-cta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-fsno-secondary);
}

/* Plain text-link variant of .course-tile (e.g. "Adopted Curriculum
   for Core Subjects" below the grade grid) — opens the same popup
   but reads as a link, not a card. Declared after .course-tile so
   these overrides actually win (equal specificity, source order). */
.course-tile-link {
  display: block;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 4px 0 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-fsno-secondary);
  text-decoration: underline;
}
.course-tile-link:hover,
.course-tile-link:focus-visible {
  transform: none;
  box-shadow: none;
  color: var(--school-primary);
}

/* Course popup content (shares the .people-modal dialog shell) */
.course-modal-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--school-primary);
  font-size: 1.25rem;
  margin: 0 0 16px;
}

/* The grid-based .col-list.cols-2 shares row height across both
   columns, so a long, wrapping item in one column stretches the row
   and leaves a gap beside its shorter neighbor. The course popups
   often have long "X or Y or Z" entries, so switch to a multi-column
   flow here instead, where each item's height is independent. */
#course-modal-body .col-list.cols-2 {
  display: block;
  column-count: 2;
  column-gap: 24px;
}
#course-modal-body .col-list.cols-2 li {
  break-inside: avoid;
  margin-bottom: 8px;
}


/* The photo column is a plain, non-replaced <div> (.testimonial-photo)
   with the <img> absolutely positioned inside it. A replaced element
   (img) always contributes its own intrinsic aspect-ratio height to
   flex/grid track sizing no matter what height/min-height is set on
   it, which kept stretching the row to match the photo instead of the
   quote. A div has no intrinsic size, so the row is sized by the
   quote alone, and the div (which DOES stretch normally) then fills
   that row — the img inside just fills the div. */
.testimonial-figure {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: stretch;
  gap: 20px;
  margin: 24px 0;
}

.testimonial-photo {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.testimonial-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

blockquote.testimonial {
  border-left: 4px solid var(--school-secondary);
  margin: 24px 0;
  padding: 8px 0 8px 24px;
  font-style: italic;
  color: #444;
}

.testimonial-figure blockquote.testimonial { margin: 0; }
blockquote.testimonial cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
}

.cite-name {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--school-primary);
}

.cite-detail {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  text-transform: none;
  font-size: 0.8rem;
  color: #666;
}

.fine-print { font-size: 0.85rem; color: #666; }

.section-divider {
  border: none;
  border-top: 1px solid #DED7E5;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* 501(c)(3)/EIN disclosure (Donate page): promoted from a fine-print
   footnote, since donors look for this to confirm the gift is
   tax-deductible */
.ein-notice {
  margin-top: 20px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-fsno-secondary);
}

/* ============================================================
   Press Room — simple, ever-growing list of press links
   ============================================================ */
.press-list {
  max-width: 820px;
  margin-top: 8px;
}

.press-item {
  padding: 18px 0;
  border-bottom: 1px solid #DED7E5;
}
.press-item:first-child { padding-top: 0; }
.press-item:last-child { border-bottom: none; }

.press-item a {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--school-primary);
  text-decoration: none;
  margin-bottom: 4px;
}
.press-item a:hover { color: var(--color-fsno-secondary); }

.press-source {
  display: block;
  font-size: 0.9rem;
  color: #666;
}

/* Quote pulled into its own drop-shadow tile, set apart from the
   surrounding copy (no border-left accent, unlike the inline
   testimonial style above) */
blockquote.testimonial.quote-tile {
  border-left: 6px solid var(--color-fsno-secondary);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 28px 26px;
  margin: 24px 0;
}

/* Quotes outside an accordion (swipe carousel, split-sections on
   Student Life) read a touch smaller than the accordion-embedded
   testimonials, since they sit in denser, more visual layouts */
blockquote.testimonial.quote-tile,
figure.testimonial-figure.quote-tile blockquote.testimonial {
  font-size: 0.92rem;
}
blockquote.testimonial.quote-tile .cite-name,
figure.testimonial-figure.quote-tile .cite-name { font-size: 0.85rem; }
blockquote.testimonial.quote-tile .cite-detail,
figure.testimonial-figure.quote-tile .cite-detail { font-size: 0.75rem; }

/* Inside a swipe carousel, the slide wrapper controls spacing, so the
   tile's own margin must not add extra space inside the track */
.swipe-slide blockquote.testimonial.quote-tile,
.swipe-slide figure.testimonial-figure.quote-tile { margin: 0; }

/* Same tile treatment, applied to a photo + quote figure; narrower
   than the surrounding copy and centered as a pullout */
figure.testimonial-figure.quote-tile {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 24px 28px;
  max-width: 680px;
  margin: 0 auto 40px;
}
figure.testimonial-figure.quote-tile blockquote.testimonial {
  border-left: none;
  padding: 0;
  margin: 0;
}

/* Centers the Experienceship brochure button and adds extra
   breathing room before the quote tile that follows it */
.brochure-cta {
  text-align: center;
  margin: 32px 0 48px;
}

/* ============================================================
   Split section: photo on one side (fixed height for consistency
   across sections), copy on the other. Alternates sides via
   .split-section-reverse.
   ============================================================ */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin: 48px 0;
}

.split-photo {
  height: 480px;
  width: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 8px;
}

.split-copy h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: normal;
  font-weight: 900;
  color: var(--school-primary);
  font-size: 1.3rem;
  margin: 0 0 12px;
}

.split-copy p { margin: 0 0 20px; }

@media (max-width: 720px) {
  .split-section,
  .split-section-reverse {
    grid-template-columns: 1fr;
  }
  .split-section-reverse .split-photo { order: -1; }
}

/* ============================================================
   Swipe carousel: one item shown at a time, slides between them
   (true horizontal movement, no fade), auto-advances, pauses on
   hover; dots + prev/next for manual navigation. Used for Student
   Life's intro quotes and the Careers "Why Work at Freire" tiles.
   ============================================================ */
.swipe-carousel {
  max-width: 820px;
  margin: 32px auto;
}

/* touch-action: pan-y lets vertical page scrolling pass through
   untouched while JS handles horizontal swipe gestures itself */
.swipe-carousel-viewport { overflow: hidden; touch-action: pan-y; }

/* Each slide is a full-width flex item; sliding the track moves
   between them. The track's height auto-matches its tallest slide,
   so nothing below the carousel shifts as the active item changes. */
.swipe-carousel-track {
  display: flex;
  align-items: stretch;
  transition: transform 0.45s ease;
}

.swipe-slide {
  flex: 0 0 100%;
  min-width: 0;
  /* Inset padding so adjacent slides show a visible gap between them
     mid-transition, instead of appearing to touch */
  padding: 0 14px;
}

@media (prefers-reduced-motion: reduce) {
  .swipe-carousel-track { transition: none; }
}

.swipe-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.swipe-carousel-arrow {
  background: none;
  border: none;
  font-size: 1.6rem;
  font-weight: 900;
  -webkit-text-stroke: 1px currentColor;
  line-height: 1;
  color: var(--school-primary);
  cursor: pointer;
  padding: 4px 8px;
}
.swipe-carousel-arrow:hover { color: var(--color-fsno-secondary); }

.swipe-carousel-dots { display: flex; gap: 8px; }

.swipe-carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: #DED7E5;
  cursor: pointer;
  padding: 0;
}
.swipe-carousel-dot.active { background: var(--school-primary); }

/* Multi-column text flow (not a grid) so a wrapped, multi-line entry
   in one column doesn't force blank space next to shorter entries
   in the same row */
.col-list.cols-3 {
  display: block;
  column-count: 3;
  column-gap: 24px;
}
.col-list.cols-3 li {
  break-inside: avoid;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .col-list.cols-3 { column-count: 2; }
}
@media (max-width: 720px) {
  .col-list.cols-3 { column-count: 1; }
}

/* Funding note: copy on the left, 21st CCLC logo on the right spanning
   the full height of both paragraphs */
.funding-grid {
  display: flex;
  align-items: stretch;
  gap: 28px;
  margin-top: 24px;
}

.funding-grid > div { flex: 1; }
.funding-grid > div > :first-child { margin-top: 0; }
.funding-grid > div > :last-child { margin-bottom: 0; }

.funding-grid img {
  width: 190px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .funding-grid { flex-direction: column; align-items: center; }
}

/* Clubs list with the funding logo as a third column alongside it,
   instead of paired with the fine-print note below (avoids a lonely
   stretch of white space next to a short funding paragraph) */
.clubs-with-logo {
  display: flex;
  align-items: center;
  gap: 32px;
}
.clubs-with-logo .col-list { flex: 1; margin: 16px 0; }
.clubs-with-logo .clubs-logo {
  width: 170px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .clubs-with-logo { flex-direction: column; align-items: center; }
}

/* Impact accordion: stats + button left, grad photo right */
.impact-lower {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 28px;
  align-items: stretch;
  margin-top: 8px;
}

.impact-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 8px;
}

/* Sticky family-resources sidebar */
.school-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  scroll-margin-top: calc(var(--nav-height) + 24px); /* hero Family Resources anchor */
}

/* Desktop: the "Family Resources" summary reads as a plain, static
   heading (no toggle, no arrow) — only on mobile does it become a
   real accordion trigger (see the max-width: 1024px block below) */
.sidebar-accordion summary {
  list-style: none;
  cursor: default;
  pointer-events: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
  color: var(--school-primary);
  margin-bottom: 16px;
}
.sidebar-accordion summary::-webkit-details-marker { display: none; }

.sidebar-buttons { display: flex; flex-direction: column; gap: 10px; }

.sidebar-buttons a {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--school-primary);
  border-radius: 6px;
  padding: 13px 16px;
  transition: filter 0.2s ease;
}
.sidebar-buttons a:hover {
  background: var(--school-secondary);
  color: var(--school-btn-text, #fff);
}

.sidebar-mark {
  display: block;
  width: 50%;
  margin: 28px auto 0;
}

/* Getting Here — SEPTA map */
.school-map { padding: 0 0 72px; }

.school-map h2 {
  color: var(--school-primary);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.school-map p { max-width: 820px; }

.map-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 0 0 20px;
  padding: 0;
}

.map-key li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  color: var(--school-primary);
}

.map-key .key-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.map-key .key-pin {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#septa-map {
  height: 440px;
  border-radius: 8px;
  position: relative;
  z-index: 0; /* keep Leaflet panes under the sticky nav */
}

/* Full staff directory page */
.staff-page { padding: 72px 0; }

.staff-layout {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

/* A–Z quick-nav beside the list */
.alpha-nav {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.alpha-nav a,
.alpha-nav span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.5;
  padding: 1px 10px;
  text-align: center;
}

.alpha-nav a {
  color: var(--school-primary);
  text-decoration: none;
  border-radius: 4px;
}
.alpha-nav a:hover {
  background: var(--color-bg-card);
  color: var(--color-fsno-secondary);
}

.alpha-nav span { color: #C6BFCE; } /* letters with no entries */

.staff-entry { scroll-margin-top: calc(var(--nav-height) + 16px); }

.back-to-top {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
  color: var(--school-primary);
  text-decoration: none;
}
.back-to-top:hover { color: var(--color-fsno-secondary); }

.back-to-top-arrow {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  vertical-align: -0.15em;
  margin-right: 2px;
}

/* ============================================================
   Our History — vertical timeline
   ============================================================ */

/* Title + intro stick under the nav so timeline entries scroll
   up and disappear behind them */
.history-sticky-header {
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
  background: var(--scroll-bg, var(--color-bg-page));
  padding: 24px 0 16px;
  margin-bottom: 8px;
}
.history-sticky-header h1 { margin-bottom: 8px; }
.history-sticky-header .lead { margin: 0; }

.timeline {
  position: relative;
  max-width: 900px;
  margin: 40px 0 8px;
}

/* connecting vertical line, centered under the date column */
.timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 79px;
  width: 2px;
  background: #DED7E5;
}

.timeline-entry {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}

.timeline-entry-continued { margin-top: -12px; }

/* Desktop-only scroll reveal: a tile fades in once it scrolls fully
   into view, so the lowest not-yet-fully-visible tile stays faded
   until it clears the viewport edge */
@media (min-width: 641px) {
  .timeline-entry {
    opacity: 0.35;
    transition: opacity 0.5s ease;
  }
  .timeline-entry.in-view { opacity: 1; }
}

/* date marker: same small, uppercase Brandon Grotesque badge look as
   the staff directory's A–Z quick-nav letters */
.timeline-date {
  position: relative;
  justify-self: end;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
  color: #fff;
  background: var(--color-fsno-primary);
  border-radius: 999px;
  padding: 5px 14px;
  white-space: nowrap;
  z-index: 1;
}

.timeline-entry-continued .timeline-date { background: transparent; }

/* tile matches the home page school-card surface (drop shadow,
   no hover animation) */
.timeline-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.timeline-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-fsno-primary);
  font-size: 1.05rem;
  margin: 0 0 10px;
}

.timeline-card p { margin: 0; color: #333; }

@media (max-width: 640px) {
  .timeline::before { left: 20px; }
  .timeline-entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .timeline-date { justify-self: start; margin-left: 40px; }
  .timeline-entry-continued { margin-top: 0; }
}

.staff-page h1 {
  color: var(--school-primary);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 4px;
}

.staff-page .staff-subtitle {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  margin: 0 0 12px;
}

.staff-search {
  max-width: 420px;
  margin-top: 20px;
}

.staff-search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #DED7E5;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.staff-search-input:focus {
  outline: none;
  border-color: var(--school-primary);
}

.staff-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  /* Fixed width (not just a cap) so filtering out entries with the
     search box never shrinks the list and shifts the A–Z nav beside it.
     It may still shrink when the flex row itself doesn't fit (narrow
     phones) — otherwise the A–Z nav is pushed off the right edge and
     the whole page becomes pannable. Filtering never triggers that,
     since it doesn't change the container width. */
  width: min(720px, 100%);
  min-width: 0;
}

.staff-entry {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #E7E2EC; /* faint divider */
}
.staff-entry:last-child { border-bottom: none; }

.staff-entry img {
  width: 110px;
  height: 130px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Long unbroken run-ons like "Coordinator/Behavior Interventionist" set a
   min-content width wider than a narrow phone. `anywhere` (rather than
   `break-word`) is what actually lowers min-content, so the entry can
   shrink to fit instead of widening the page. It still only breaks
   mid-word when there's no other way to fit. */
.staff-entry .staff-name,
.staff-entry .staff-role { overflow-wrap: anywhere; }

.staff-entry .staff-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  color: var(--school-primary);
  margin: 0 0 6px;
}

.staff-entry .staff-role {
  font-family: var(--font-body);
  color: #444;
  line-height: 1.55;
  margin: 0;
}

/* Welcome letter — lives inside the accordion column (.school-main),
   directly above the Academics accordion */
.school-welcome {
  padding: 0;
  margin-top: 48px;
  margin-bottom: 32px;
  background: var(--color-bg-card);
  border-radius: 8px;
  padding: 40px;
}
.school-welcome h2 { color: var(--school-primary); font-size: clamp(1.5rem, 2.5vw, 2rem); }
.school-welcome p { max-width: 720px; }

.welcome-signatures {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 64px;
  max-width: 720px;
  margin-top: 32px;
}
.welcome-sig {
  display: flex;
  align-items: center;
  gap: 14px;
}
.welcome-sig-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.welcome-sig-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--school-primary);
  margin: 0;
}
.welcome-sig-title {
  font-size: 0.9rem;
  color: #555;
  margin: 2px 0 0;
}

/* Staff directory — lives inside the accordion column (.school-main)
   so the Family Resources sidebar stays sticky alongside it until the
   Getting Here section */
.staff-directory { padding: 0; margin-top: 48px; }

.staff-directory-btn { margin-top: 28px; }
.staff-directory h2 { color: var(--school-primary); font-size: clamp(1.5rem, 2.5vw, 2rem); }

.staff-table {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  margin-top: 24px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.staff-table th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  text-align: left;
  color: #fff;
  background: var(--school-primary);
  padding: 12px 20px;
}

.staff-table td {
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}
.staff-table tr:last-child td { border-bottom: none; }

@media (max-width: 1024px) {
  .school-layout { grid-template-columns: 1fr; }
  .school-sidebar {
    position: static;
    /* Family Resources moves ahead of the accordions once the layout stacks */
    order: -1;
    margin-bottom: 24px;
  }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-tile + .stat-tile { border-left: none; border-top: 2px solid #DED7E5; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { height: 260px; }
  .impact-lower { grid-template-columns: 1fr; }
  .impact-photo { height: 240px; }
  /* Mobile: no separate solid-color background — the photo itself
     spans the entire hero (left:0, full width/height), with a flat
     primary-color tint over it for text legibility. Explicitly
     resetting left/right here overrides the desktop rule's
     right-anchored, partial-width positioning. */
  .school-hero .hero-photo {
    left: 0;
    right: auto;
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  .school-hero {
    background: none;
  }
  .school-hero::after {
    background: color-mix(in srgb, var(--school-primary) 65%, transparent);
  }

  /* Family Resources becomes a real collapsible tile: white card with
     a drop shadow, a down arrow that flips when open, and the links
     shown as red text on white with a divider between each */
  .sidebar-accordion {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    overflow: hidden;
  }
  .sidebar-accordion summary {
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
    margin-bottom: 0;
    padding: 18px 20px;
  }
  .sidebar-accordion summary::after {
    content: '\25BC';
    font-size: 0.75rem;
    flex-shrink: 0;
    padding-left: 12px;
    transition: transform 0.2s ease;
  }
  .sidebar-accordion[open] summary::after { transform: rotate(180deg); }

  .sidebar-body { padding: 0 0 8px; }
  .sidebar-buttons { gap: 0; }
  .sidebar-buttons a {
    display: block;
    text-align: left;
    background: #fff;
    color: var(--color-fsno-secondary);
    border-radius: 0;
    border-top: 1px solid #DED7E5;
    padding: 14px 20px;
  }
  .sidebar-buttons a:first-child { border-top: none; }
  .sidebar-buttons a:hover {
    background: #fff;
    color: var(--color-fsno-secondary);
    filter: brightness(0.85);
  }
  .sidebar-mark { display: none; }
}

@media (max-width: 720px) {
  .course-grid,
  .course-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .col-list.cols-2 { grid-template-columns: 1fr; }
  .school-hero .hero-logo { height: 68px; }
  .testimonial-figure { grid-template-columns: 1fr; }
  .testimonial-photo { width: 120px; height: 120px; justify-self: center; }
}

/* ============================================================
   Donate page
   ============================================================ */
/* Photo hero: same treatment as the home hero, with a still image
   standing in for the video layer; crop keeps the graduates' faces
   centered in the visible band */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

/* Hero subline in the body face, standard case (overrides the
   uppercase Montserrat treatment .hero-sub applies) */
.hero-sub.hero-sub-plain {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Embedded Virtuous giving form, on a white card */
.giving-form-embed {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
}

/* The Virtuous embed loads reCAPTCHA v3, whose floating badge sits over
   the page content on phones. Google allows hiding it as long as the
   attribution below the form is shown instead (.recaptcha-notice). */
.grecaptcha-badge { visibility: hidden; }

.recaptcha-notice {
  max-width: 720px;
  margin: 12px auto 0;
  font-size: 0.8rem;
  color: #5a5a5a;
}

.recaptcha-notice a { color: inherit; }

/* Ways to Give accordions sit on the centered lavender band; keep
   their own copy left-aligned */
#ways-to-give .faq-list { text-align: left; }

.ways-contact {
  max-width: 820px;
  margin: 28px auto 0;
}

/* Final CTA band in FSNO red (overrides .mission's purple) */
.mission-red { background: var(--color-fsno-secondary); }

/* Wall of Giving: fully centered section — copy, tier headings, and
   logos are centered; the name lists are centered as blocks but keep
   their bullets on a shared left edge */
#wall-of-giving { text-align: center; }

#wall-of-giving .lead {
  margin-left: auto;
  margin-right: auto;
}

#wall-of-giving .col-list {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Tiers with more than three entries (logos + names) use .cols-3 and
   split the names into three columns. The narrow cap keeps the column
   group tight and visually centered under the tier's logo instead of
   splaying across the full container width. */
#wall-of-giving .col-list.cols-3 {
  width: 100%;
  max-width: 1080px;
  column-gap: 48px;
}

.sponsors-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-fsno-secondary);
  font-size: 1.35rem;
  margin: 8px 0 8px;
}

.sponsor-tier { margin-top: 32px; }

.sponsor-tier h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-fsno-primary);
  font-size: 1.05rem;
  margin: 0 0 10px;
}

.sponsor-tier .tier-amount {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: #666;
}

/* Tier prominence: Scholar largest, stepping down to Friend of
   Freire at the base size */
.sponsor-tier:nth-of-type(1) h4 { font-size: 1.7rem; }
.sponsor-tier:nth-of-type(2) h4 { font-size: 1.55rem; }
.sponsor-tier:nth-of-type(3) h4 { font-size: 1.4rem; }
.sponsor-tier:nth-of-type(4) h4 { font-size: 1.3rem; }
.sponsor-tier:nth-of-type(5) h4 { font-size: 1.2rem; }
.sponsor-tier:nth-of-type(6) h4 { font-size: 1.1rem; }

/* Donor logos shown inside their sponsorship tier; each img carries
   its own height so visually dense and airy logomarks read equally */
.tier-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 48px;
  margin: 8px 0 20px;
}

.tier-logos img { width: auto; max-width: 100%; }

@media (max-width: 720px) {
  /* Logo left, hamburger right, menu in a drop-down drawer. */
  :root {
    /* Matches the mobile nav-inner's actual height (52px logo + 12px
       top/bottom padding) so sticky/scroll-margin offsets that key off
       --nav-height don't leave a gap for content to flash through. */
    --nav-height: 76px;
  }
  .site-nav .nav-inner {
    height: auto;
    padding: 12px 20px;
    gap: 16px;
  }
  .nav-logo img { height: 52px; }
  .nav-toggle { display: block; }

  /* The drawer hangs off the bar itself, so it spans the full width and
     can't overflow the viewport the way a menu anchored to its own link
     could. Menus are display:none when closed, not just transparent —
     a visibility:hidden menu still occupies space and would widen the
     page. */
  .site-nav #primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    border-top: 3px solid var(--color-fsno-secondary);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
  }
  .site-nav.nav-open #primary-nav { display: block; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
  }
  .nav-links > li { position: static; }
  .nav-links > li > a,
  .nav-links > li > .nav-toplevel {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 24px;
  }
  .nav-links > li > a.nav-cta {
    margin: 12px 24px 0;
    width: auto;
    text-align: center;
    border-radius: 4px;
  }

  /* Submenus expand inline and push the rest of the drawer down, rather
     than floating over it. Opened by tapping the parent button, which
     adds .submenu-open in main.js — hover never fires on touch, and iOS
     Safari doesn't focus a tapped <button>, so :focus-within can't do it. */
  .dropdown-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--color-bg-card);
    padding: 4px 0;
  }
  .nav-links li.submenu-open > .dropdown-menu { display: block; }
  .dropdown-menu a { padding-left: 40px; }
  /* 48px between the list and the A–Z nav is too much of a phone's width */
  .staff-layout { gap: 20px; }
  .school-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr; }
  .stat-grid-college { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { min-height: 520px; }
  /* Guarantee breathing room around the hero copy no matter how tall it
     wraps. Without this the gap is only whatever slack is left over after
     min-height, so a long headline (Careers) or a logo + contact block
     (the school pages) leaves the copy jammed against the nav above and
     the section below. 32px matches the Donate hero, which had enough
     slack to land there by accident. Heroes with room to spare are
     unaffected — the centring absorbs the padding. */
  .hero .container,
  .school-hero .container {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .carousel-set img { height: 280px; width: 75vw; }
}