/* =============================================================
   Pardes Editorial Design System
   Adapted from the "Piece by Piece" / Ahavat Yeladim look:
   navy + forest green + gold, Montserrat headlines, Lora serif
   body, Frank Ruhl Libre for Hebrew, three-square eyebrow,
   short green rule, swipeable photo strips, soft editorial flow.
   Self-contained: pages using this file do NOT load the old bundle.
   ============================================================= */

:root {
  --navy: #343e85;
  --navy-deep: #1c2350;
  --green: #10653c;
  --green-deep: #0a4a2b;
  --green-br: #1c8a55;
  --brown: #7a5230;
  --gold: #b88a3a;

  --paper: #ffffff;
  --off: #f6f7fb;          /* cool off-white (navy tint) */
  --cream: #f8f4ed;        /* warm paper, for variety */
  --ink: #23263e;
  --body: #474b63;
  --muted: #7c809a;
  --line: #e7e8f1;
  --navy-tint: #edeefb;
  --green-tint: #e7f1ea;

  --maxw: 1160px;
  --measure: 760px;
  --gut: 24px;
  --radius: 18px;
  --shadow-soft: 0 16px 40px rgba(16, 22, 52, 0.08);
  --shadow-card: 0 6px 18px rgba(16, 22, 52, 0.06);
  --shadow-photo: 0 18px 38px rgba(16, 22, 52, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Light-only site: stops Android Chrome force-darkening forms and cards */
:root { color-scheme: light; }
/* Brand text selection instead of default blue */
::selection { background: #d9eae0; color: var(--green-deep); }
/* Visible keyboard focus, brand colored, only for keyboard users */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px;
}
/* In-page anchor jumps (e.g. "See The Pardes Way") land below the 71px sticky
   header instead of hiding under it. Applies wherever a #fragment points. */
[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: 'Lora', Georgia, serif;
  font-size: 18px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
.mont { font-family: 'Montserrat', Arial, sans-serif; }
.heb { font-family: 'Frank Ruhl Libre', serif; }

a { color: var(--green); text-decoration: none; }
p { margin: 0 0 16px; }

.band { width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.measure { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.sect { padding: 52px 0; }
.center { text-align: center; }
.bg-off { background: var(--off); }
.bg-cream { background: var(--cream); }
.bg-green-tint { background: var(--green-tint); }

/* skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
}
.skip-link:focus { left: 0; }

/* ---- top accent bar (signature) ---- */
.accent {
  height: 4px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--green) 55%, var(--gold) 100%);
}

/* ---- three-square eyebrow (signature) ---- */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--green);
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow .sqs { display: inline-flex; gap: 3px; }
.eyebrow .sqs i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.eyebrow .sqs i:nth-child(1) { background: var(--navy); }
.eyebrow .sqs i:nth-child(2) { background: var(--green); }
.eyebrow .sqs i:nth-child(3) { background: var(--gold); }
.center .eyebrow { justify-content: center; }

/* ---- headings + rule ---- */
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }
h1.sh, h2.sh {
  font-weight: 800;
  color: var(--navy);
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}
h1.sh em, h2.sh em, h1 em {
  font-family: 'Lora', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--green);
}
/* Keep a marked phrase from breaking mid-sentence (e.g. an italic tail). Only
   applies where .nb is added, so long phrases are never forced to overflow. */
.sh .nb { white-space: nowrap; }
.rule { width: 46px; height: 3px; border-radius: 3px; background: var(--green); margin: 18px 0 0; }
.center .rule { margin-left: auto; margin-right: auto; }
.lead { font-size: 19px; color: var(--ink); }
.prose p { font-size: 17.5px; color: var(--body); }
.prose strong { color: var(--ink); }

/* pull quote */
.pull {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(20px, 2.7vw, 26px);
  line-height: 1.42;
  color: var(--navy);
  border-left: 3px solid var(--green);
  padding: 4px 0 4px 22px;
  margin: 24px 0;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-top {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.site-top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 42px; width: auto; }
.brand .bt { display: flex; flex-direction: column; line-height: 1; }
.brand .b1 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--navy);
  font-size: 17px; letter-spacing: -0.01em;
}
.brand .b1 .sl { color: var(--green); }
.brand .b2 {
  font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--muted);
  font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav-group { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink); padding: 10px 12px; border-radius: 10px; transition: color 0.16s;
}
.nav-top:hover, .nav-group:focus-within .nav-top, .nav-group.open .nav-top { color: var(--green); }
.nav-top .caret {
  width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; opacity: 0.55; transition: transform 0.2s;
}
.nav-direct {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink); padding: 10px 12px; transition: color 0.16s;
}
.nav-direct:hover, .nav-direct[aria-current="page"] { color: var(--green); }
.nav-menu {
  position: absolute; top: calc(100% + 7px); left: 0;
  min-width: 232px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-soft); padding: 9px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity 0.16s, transform 0.16s; z-index: 60;
}
.nav-menu::before { content: ''; position: absolute; top: -9px; left: 0; right: 0; height: 9px; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-menu a {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13.5px;
  color: var(--ink); padding: 10px 13px; border-radius: 9px; white-space: nowrap; transition: background 0.14s, color 0.14s;
}
.nav-menu a:hover, .nav-menu a[aria-current="page"] { background: var(--green-tint); color: var(--green-deep); }
.nav .cta {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--green); border: 1.5px solid #cfe0d4; border-radius: 11px; padding: 9px 18px;
  margin-left: 8px; transition: background 0.16s, border-color 0.16s;
}
.nav .cta:hover { background: var(--green-tint); border-color: var(--green); color: var(--green-deep); }

.nav-toggle {
  display: none; background: none; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 8px 14px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--navy); cursor: pointer;
}

@media (max-width: 880px) {
  /* Full-screen drop-down menu: slides from the top so it can NEVER widen the
     page (a right-edge translateX drawer blew the layout viewport out to 710px
     on real phones and zoomed everything out). Vertical translate is safe. */
  .nav {
    position: fixed; inset: 0; width: 100%; max-width: 100%;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 2px; background: var(--paper); padding: 88px 28px 40px;
    transform: translateY(-100%); transition: transform 0.32s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto; z-index: 45;
  }
  .nav.open { transform: translateY(0); }

  /* groups become tap-to-expand accordions; every link is reachable */
  .nav-group { width: 100%; }
  .nav-top {
    width: 100%; justify-content: space-between; font-size: 19px; padding: 16px 2px;
    border-radius: 0; border-bottom: 1px solid var(--line); color: var(--ink);
  }
  .nav-top .caret { width: 9px; height: 9px; border-right-width: 2px; border-bottom-width: 2px; opacity: 0.5; margin-top: -4px; }
  .nav-group.open .nav-top { color: var(--green); border-bottom-color: transparent; }
  .nav-group.open .nav-top .caret { transform: rotate(-135deg); margin-top: 3px; }
  .nav-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    background: transparent; box-shadow: none; border: 0; border-radius: 0;
    min-width: 0; padding: 2px 0 12px 16px; display: none;
  }
  .nav-menu::before { display: none; }
  .nav-group.open .nav-menu { display: flex; }
  .nav-menu a { font-size: 16px; padding: 11px 2px; border-radius: 0; white-space: normal; color: var(--body); }
  .nav-menu a:hover { background: none; color: var(--green); }
  .nav-direct { width: 100%; font-size: 19px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
  .nav .cta { margin: 20px 0 0; padding: 14px; border: 1.5px solid var(--green); text-align: center; border-radius: 12px; font-size: 17px; }
  /* 44px tap target per Apple HIG so the menu button never feels fiddly */
  .nav-toggle { display: inline-block; position: relative; z-index: 51; padding: 11px 16px; font-size: 14px; }
  .nav-scrim { display: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; background: var(--paper); }
.hero .htext { position: relative; max-width: 820px; margin: 0 auto; padding: 56px var(--gut) 26px; text-align: center; }
.bsd { position: absolute; top: 14px; right: 18px; font-family: 'Frank Ruhl Libre', serif; font-weight: 500; font-size: 15px; color: var(--muted); }
.hero .heb-name { font-family: 'Frank Ruhl Libre', serif; font-weight: 500; font-size: 18px; color: var(--green); margin: 0 0 14px; letter-spacing: 0.02em; }
.hero h1 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--navy);
  font-size: clamp(34px, 5.4vw, 60px); line-height: 1.06; letter-spacing: -0.028em; margin: 0 0 18px;
}
.hero .sub { font-size: 19px; line-height: 1.55; color: var(--body); margin: 0 auto 18px; max-width: 52ch; }
.hero .sub em { font-style: italic; color: var(--green); }
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* ---- swipeable photo strip (rich header imagery) ---- */
.strip-head { display: flex; align-items: center; justify-content: space-between; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.strip-head .e { font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; color: var(--muted); }
.strip-head .e .sw { color: var(--green); }
/* swipe hint sits centered BELOW the photo strip on the hero */
.strip-head--below { justify-content: center; padding-top: 8px; padding-bottom: 22px; }
.pstrip {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 14px var(--gut) 24px; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.pstrip::-webkit-scrollbar { height: 6px; }
.pstrip::-webkit-scrollbar-thumb { background: #cfd2e6; border-radius: 99px; }
/* On touch screens the swipe hint invites the gesture; the raw gray
   scrollbar under the photos reads unfinished, so hide it there. */
@media (pointer: coarse) {
  .pstrip { scrollbar-width: none; }
  .pstrip::-webkit-scrollbar { display: none; }
}
.pstrip .ph {
  flex: 0 0 80%; max-width: 440px; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden;
  scroll-snap-align: center; box-shadow: var(--shadow-photo); position: relative; background: var(--sage, #e8ede5);
}
.pstrip .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pstrip .ph:hover img { transform: scale(1.04); }
.pstrip .ph .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 11px;
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; color: #fff;
  background: linear-gradient(to top, rgba(10, 14, 34, 0.8), transparent);
}

/* =========================================================
   PROOF BAND
   ========================================================= */
.proof { background: var(--navy); color: #fff; }
.proof .wrap { padding: 30px var(--gut); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.proof-item { text-align: center; padding: 14px 16px; border-right: 1px solid rgba(255, 255, 255, 0.14); }
.proof-item:last-child { border-right: none; }
.proof-item b { display: block; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.02em; line-height: 1; color: #fff; margin-bottom: 8px; }
.proof-item b .em { color: #8fe0b4; display: inline; font-size: inherit; letter-spacing: inherit; }
.proof-item > span { display: block; font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #c3c9ef; max-width: 14ch; margin: 0 auto; line-height: 1.35; }

/* =========================================================
   EDITORIAL PILLARS (alternating photo + prose)
   ========================================================= */
.feature { padding: 52px 0; }
.feature-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.feature--reverse .feature-photo { order: 2; }
.feature-photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-soft); position: relative; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-photo .tagchip {
  position: absolute; left: 14px; bottom: 14px; font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  background: rgba(16, 101, 60, 0.92); padding: 7px 13px; border-radius: 9px; backdrop-filter: blur(2px);
}
.feature-text h2 { font-size: clamp(25px, 3.2vw, 34px); }
.feature-text p { font-size: 17.5px; }
.feature-highlight {
  font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--green-deep); font-size: 18px;
  line-height: 1.4; margin-top: 18px; padding-left: 18px; border-left: 3px solid var(--gold);
}

/* =========================================================
   DIVISION CARDS
   ========================================================= */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
.dcard {
  display: block; border-radius: var(--radius); overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-card); color: inherit;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.dcard .img { aspect-ratio: 16/11; background-size: cover; background-position: center; }
.dcard .body { padding: 24px 24px 26px; display: flex; flex-direction: column; }
.dcard .age { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; line-height: 1.45; }
.dcard .age .name { display: block; }
.dcard .age .grades { display: block; font-weight: 600; letter-spacing: 0.08em; }
.dcard h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--navy); font-size: 21px; margin: 0 0 8px; }
.dcard p { font-size: 16px; color: var(--body); margin: 0 0 12px; }
.dcard .go { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--green); margin-top: auto; }

/* =========================================================
   PHOTO MOSAIC (day-in-the-life)
   ========================================================= */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.mosaic .m { border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-card); }
.mosaic .m img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.mosaic .m:hover img { transform: scale(1.05); }
.mosaic .m:nth-child(2), .mosaic .m:nth-child(4) { margin-top: 30px; }

/* =========================================================
   FAQ (clean underline accordion)
   ========================================================= */
.faq { max-width: var(--measure); margin: 36px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--ink); font-size: 17.5px;
  padding: 22px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; transition: color 0.18s;
}
.faq summary:hover { color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 26px; color: var(--muted); flex-shrink: 0; transition: transform 0.3s; }
.faq details[open] summary::after { content: '\2212'; color: var(--green); }
.faq .a { padding: 0 0 22px; }
.faq .a p { font-size: 16.5px; color: var(--body); margin: 0; }
.faq-more { text-align: center; margin-top: 30px; }
.faq-more a { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; }

/* Standalone centered blocks carry their own side gutter so they never run
   flush to the screen edge when placed directly in a section (outside a .wrap).
   When they DO sit inside a padded .wrap, cancel it so the gutter is not doubled. */
.faq, .note, .steps { padding-left: var(--gut); padding-right: var(--gut); }
.wrap .faq, .wrap .note, .wrap .steps { padding-left: 0; padding-right: 0; }

/* =========================================================
   CTA CLOSE
   ========================================================= */
.close { background: var(--green-tint); border-top: 1px solid #d4e6da; text-align: center; }
.close .wrap { max-width: 680px; padding: 56px var(--gut) 60px; }
.close h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--navy); font-size: clamp(27px, 3.8vw, 38px); line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.01em; }
.close p { color: var(--body); font-size: 18px; margin: 0 auto 24px; max-width: 44ch; }

/* buttons */
.btn-fill {
  display: inline-flex; align-items: center; gap: 9px; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 16px; color: #fff; background: var(--green); padding: 15px 30px;
  border-radius: 13px; box-shadow: 0 14px 30px rgba(16, 101, 60, 0.26); transition: transform 0.16s;
}
.btn-fill:hover { transform: translateY(-2px); color: #fff; }
/* Tactile press on touch: buttons respond under the finger */
.btn-fill:active, .btn-outline:active, .nav .cta:active, .cbtn:active { transform: translateY(0) scale(0.985); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 9px; font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 16px; color: var(--navy); background: transparent; padding: 15px 28px;
  border: 2px solid var(--navy); border-radius: 13px; transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.btn-outline:hover { border-color: var(--navy); background: var(--navy-tint); transform: translateY(-2px); }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-foot { background: var(--navy-deep); color: #9aa1cf; }
footer.site-foot .wrap { padding: 40px var(--gut) 44px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.foot-brand .b1 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #fff; font-size: 18px; }
.foot-brand .b1 .sl { color: #8fe0b4; }
.foot-brand .meta { font-family: 'Montserrat', sans-serif; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #7780b4; margin: 6px 0 14px; }
.foot-brand p { font-size: 14px; color: #9aa1cf; line-height: 1.6; margin: 0 0 4px; }
.foot-brand a { color: #bcd9c8; }
.foot-col h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #fff; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; }
.foot-col a { display: block; font-family: 'Montserrat', sans-serif; font-size: 14px; color: #9aa1cf; padding: 5px 0; transition: color 0.16s; }
.foot-col a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 30px; padding-top: 18px; font-family: 'Montserrat', sans-serif; font-size: 11px; line-height: 1.7; color: #838bbf; }

/* =========================================================
   SOFT SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 760px) {
  :root { --gut: 32px; }
  .sect { padding: 66px 0; }
  .pstrip .ph { flex: 0 0 33%; }
}
@media (max-width: 900px) {
  .feature-inner { grid-template-columns: 1fr; gap: 28px; }
  .feature--reverse .feature-photo { order: 0; }
  .cards-3 { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .proof-item:nth-child(2) { border-right: none; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic .m:nth-child(2), .mosaic .m:nth-child(4) { margin-top: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero .htext { padding-top: 40px; }
}

/* =========================================================
   SUBPAGE COMPATIBILITY
   Restyle the existing inner-page building blocks into the
   editorial language. This file loads last, so it wins.
   ========================================================= */
/* Old Caveat eyebrow (.section-label) -> three-square Montserrat eyebrow */
span.section-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
}
span.section-label::before {
  content: '';
  flex: 0 0 30px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 9px;
  background: var(--navy);
  box-shadow: 11px 0 0 0 var(--green), 22px 0 0 0 var(--gold);
}
/* Inner-page hero + headings: editorial type */
.subpage-hero h1 { font-family: 'Montserrat', sans-serif; color: var(--navy); letter-spacing: -0.02em; }
.subpage-hero p { font-family: 'Lora', Georgia, serif; color: var(--body); }
.section-intro h2, .sub-section h2 { font-family: 'Montserrat', sans-serif; color: var(--navy); }
/* Soft, consistent card radius across inner-page components */
.info-card, .highlight, .link-card, .contact-card, .tuition-panel, .scholarship-band, .form-panel { border-radius: 16px; }

/* =========================================================
   MINI CARDS + NOTES (reusable on inner pages)
   ========================================================= */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 36px; }
.minicard { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; box-shadow: var(--shadow-card); }
.minicard .lab { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; display: block; }
.minicard h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--navy); font-size: 20px; margin: 0 0 8px; }
.minicard h3 + p, .minicard p { font-family: 'Lora', Georgia, serif; font-size: 15.5px; color: var(--body); margin: 0 0 8px; line-height: 1.6; }
.minicard p:last-child { margin-bottom: 0; }
.minicard p strong { color: var(--green-deep); }
.minicard a { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: var(--green); }
.minicard a:hover { color: var(--green-deep); text-decoration: underline; }

/* =========================================================
   TUITION TABLES
   ========================================================= */
.tuition-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; box-shadow: var(--shadow-card); }
.tuition-panel h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--navy); font-size: 20px; margin: 0 0 14px; }
.tuition-table { width: 100%; border-collapse: collapse; }
.tuition-table td { padding: 10px 0; font-family: 'Lora', Georgia, serif; font-size: 16px; color: var(--body); border-bottom: 1px solid rgba(0,0,0,0.06); }
.tuition-table td:last-child { text-align: right; font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--navy); }
.tuition-table tr:last-child td { border-bottom: none; }
.tuition-note { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

/* =========================================================
   SCHOLARSHIP BAND
   ========================================================= */
.scholarship { background: var(--green-tint); border: 1px solid #d4e6da; border-radius: 18px; padding: 38px 34px; max-width: var(--measure); margin: 36px auto 0; text-align: center; }
.scholarship h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--navy); font-size: 24px; margin: 0 0 12px; }
.scholarship p { font-family: 'Lora', Georgia, serif; font-size: 17px; color: var(--body); line-height: 1.7; margin: 0 auto 22px; max-width: 60ch; }
.scholarship p strong { color: var(--green-deep); }

/* =========================================================
   NUMBERED STEPS
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: var(--measure); margin: 36px auto 0; }
.step { display: flex; gap: 16px; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.step .no { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--green-tint); color: var(--green); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.step h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--navy); font-size: 17px; margin: 0 0 4px; }
.step p { font-family: 'Lora', Georgia, serif; font-size: 15px; color: var(--body); margin: 0; line-height: 1.55; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }

/* =========================================================
   FORM
   ========================================================= */
.form-panel { max-width: 720px; margin: 36px auto 0; padding: 34px 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-panel label { display: block; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 16px; }
.form-panel input, .form-panel select, .form-panel textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.16); border-radius: 10px; font-size: 16px; font-family: 'Lora', Georgia, serif; color: var(--ink); background: #fff; transition: border-color 0.16s; }
.form-panel input:focus, .form-panel select:focus, .form-panel textarea:focus { outline: none; border-color: var(--green); }
.btn-submit { display: inline-block; background: var(--green); color: #fff; padding: 15px 38px; border: none; border-radius: 13px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; transition: transform 0.16s; box-shadow: 0 12px 26px rgba(16,101,60,0.24); }
.btn-submit:hover { transform: translateY(-2px); }
.btn-submit:disabled { opacity: 0.7; cursor: default; transform: none; }
.form-status { margin-top: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; }
.form-status--ok { color: var(--green-deep); }
.form-status--err { color: #8b2c1a; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* =========================================================
   MAP EMBED + grid alignment
   ========================================================= */
/* 4-up grids keep natural heights; 2-up cards stretch to equal height so a pair lines up */
.cards-4 { align-items: start; }
.cards-2 { align-items: stretch; }
.map-wrap { margin-top: 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.map-wrap iframe { width: 100%; height: 230px; border: 0; display: block; }

/* clickable mini cards (e.g. parent resources) */
a.minicard { display: block; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; }
a.minicard:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
a.minicard .go { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--green); }

/* =========================================================
   HEADER ROBUSTNESS (prevent brand overlapping the toggle)
   min-width:0 lets the brand shrink + wrap instead of pushing
   into the menu button. Bulletproof with or without the bundle.
   ========================================================= */
.site-top .wrap { gap: 14px; }
.site-top .brand { min-width: 0; flex: 0 1 auto; }
.site-top .brand .bt { min-width: 0; }
.site-top .brand .b1 { white-space: normal; }
.site-top .nav-toggle { flex-shrink: 0; }
@media (max-width: 880px) {
  /* cap the brand so the long name wraps and never collides with the Menu button */
  .site-top .brand { max-width: calc(100% - 108px); }
}

.note { max-width: var(--measure); margin: 24px auto 0; font-size: 16px; color: var(--body); text-align: center; line-height: 1.6; }
.note strong { color: var(--green-deep); }
@media (max-width: 900px) { .cards-4 { grid-template-columns: 1fr 1fr; } .cards-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cards-4 { grid-template-columns: 1fr; } }

/* =========================================================
   TEAM / STAFF cards (editorial)
   ========================================================= */
.staff-band + .staff-band { padding-top: 0; }
.staff-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 26px 18px; margin-top: 34px;
}
.staff-grid--lead { grid-template-columns: repeat(auto-fit, minmax(190px, 220px)); justify-content: center; }
.staff-card { text-align: center; }
.staff-card__photo, .staff-card__avatar {
  width: 130px; height: 130px; border-radius: 50%; object-fit: cover; object-position: center 20%;
  margin: 0 auto 14px; display: block; box-shadow: 0 0 0 1px var(--line), var(--shadow-card);
}
.staff-card__avatar {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-tint); color: var(--green-deep);
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: 0.02em;
}
.staff-card__name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 3px; line-height: 1.25; }
.staff-card__role { font-family: 'Lora', serif; font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.4; }
.staff-card__detail { font-family: 'Lora', serif; font-style: italic; font-size: 12.5px; color: var(--green); margin: 4px 0 0; }
.staff-card--has-lightbox { cursor: pointer; }
.staff-card--has-lightbox .staff-card__photo, .staff-card--has-lightbox .staff-card__avatar { transition: transform 0.18s, box-shadow 0.18s; }
.staff-card--has-lightbox:hover .staff-card__photo, .staff-card--has-lightbox:hover .staff-card__avatar { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), var(--shadow-soft); }
.staff-card--has-lightbox:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 14px; }

.staff-lightbox { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(16,22,52,0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s ease, visibility 0.28s ease; }
.staff-lightbox--open { opacity: 1; visibility: visible; pointer-events: auto; }
.staff-lightbox__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 460px; background: #fff; border-radius: 18px; padding: 34px 26px; box-shadow: var(--shadow-photo); }
.staff-lightbox__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--off); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; transition: background 0.15s; }
.staff-lightbox__close:hover, .staff-lightbox__close:focus-visible { background: var(--green-tint); color: var(--green-deep); }
.staff-lightbox__photo { width: 248px; height: 248px; object-fit: cover; object-position: center 20%; border-radius: 50%; border: 4px solid var(--green); margin-top: 6px; }
.staff-lightbox__info { text-align: center; margin-top: 20px; }
.staff-lightbox__name { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 23px; color: var(--navy); margin: 0; }
.staff-lightbox__role { font-family: 'Lora', serif; font-size: 16px; color: var(--body); margin: 7px 0 0; }
@media (max-width: 600px) {
  .staff-lightbox { align-items: flex-start; padding-top: 9vh; }
  .staff-lightbox__photo { width: 208px; height: 208px; }
  .staff-lightbox__name { font-size: 21px; }
}

/* =========================================================
   GALLERY (editorial)
   ========================================================= */
.gallery-filters { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; overflow-x: visible; margin: 0 0 30px; }
.gallery-filter { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13.5px; padding: 9px 20px; border-radius: 100px; background: #fff; border: 1.4px solid #d7e2da; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background 0.18s, color 0.18s, border-color 0.18s; }
.gallery-filter:hover { border-color: var(--green); color: var(--green); }
.gallery-filter--active { background: var(--green); border-color: var(--green); color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item { border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--off); box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery-item__caption { font-family: 'Lora', serif; font-size: 13px; color: var(--body); padding: 9px 13px; }
.gallery-item__thumb { position: relative; }
.gallery-item--video .gallery-item__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(16,22,52,0.55); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background 0.2s; }
.gallery-item--video:hover .gallery-item__play { background: rgba(16,22,52,0.72); }
.gallery-item__play::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; margin-left: 3px; }

.gallery-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(16,22,52,0.93); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease; }
.gallery-lightbox--open { opacity: 1; visibility: visible; pointer-events: auto; }
.gallery-lightbox__inner { position: relative; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; }
.gallery-lightbox__media { display: flex; align-items: center; justify-content: center; }
.gallery-lightbox__inner img, .gallery-lightbox__photo { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; display: block; }
.gallery-lightbox__close { position: absolute; top: -50px; right: -4px; width: 42px; height: 42px; background: none; border: 0; color: #fff; font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
.gallery-lightbox__close:hover { opacity: 0.7; }
.gallery-lightbox__prev, .gallery-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; }
.gallery-lightbox__prev:hover, .gallery-lightbox__next:hover { opacity: 0.7; }
.gallery-lightbox__prev { left: -64px; }
.gallery-lightbox__next { right: -64px; }
.gallery-lightbox__caption { color: #fff; text-align: center; font-family: 'Lora', serif; font-size: 14px; margin-top: 16px; max-width: 600px; }
.gallery-lightbox__video { position: relative; width: 90vw; max-width: 960px; aspect-ratio: 16 / 9; }
.gallery-lightbox__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }

@media (max-width: 880px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-lightbox__prev { left: 6px; }
  .gallery-lightbox__next { right: 6px; }
  .gallery-lightbox__close { top: 10px; right: 10px; }
}

/* =========================================================
   NEWSLETTER archive (editorial)
   ========================================================= */
.newsletter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.newsletter-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  cursor: pointer; box-shadow: var(--shadow-card); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.newsletter-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.newsletter-card:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.newsletter-card__cover { background: var(--off); border-bottom: 1px solid var(--line); }
.newsletter-card__cover img { width: 100%; aspect-ratio: 1100 / 1556; object-fit: cover; object-position: top; display: block; }
.newsletter-card__title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: var(--navy); margin: 13px 15px 3px; }
.newsletter-card__desc { font-family: 'Lora', serif; font-size: 13.5px; color: var(--muted); margin: 0 15px 14px; }

.newsletter-viewer {
  position: fixed; inset: 0; z-index: 9999; background: rgba(16, 22, 52, 0.94);
  display: flex; flex-direction: column; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease;
}
.newsletter-viewer--open { opacity: 1; visibility: visible; pointer-events: auto; }
.newsletter-viewer__inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.newsletter-viewer__close {
  position: absolute; top: 12px; right: 14px; z-index: 2; width: 42px; height: 42px;
  background: rgba(255,255,255,0.12); border: 0; border-radius: 50%; color: #fff; font-size: 26px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.newsletter-viewer__close:hover { background: rgba(255,255,255,0.25); }
.newsletter-viewer__title {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; color: #fff;
  text-align: center; margin: 0; padding: 18px 64px; flex-shrink: 0;
}
.newsletter-viewer__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px 30px; }
.newsletter-viewer__page {
  display: block; width: 100%; max-width: 820px; margin: 0 auto 14px; border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
@media (max-width: 880px) {
  .newsletter-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .newsletter-card__title { font-size: 14.5px; margin: 11px 12px 2px; }
  .newsletter-card__desc { font-size: 12.5px; margin: 0 12px 12px; }
  .newsletter-viewer__scroll { padding: 0 8px 24px; }
}
@media (max-width: 520px) {
  .staff-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 20px 12px; }
  .staff-card__photo, .staff-card__avatar { width: 112px; height: 112px; }
}