/* ============================================================
   DESIGN TOKENS  →  maps to Astro global.css / tailwind theme
   ============================================================ */
:root{
  /* Color */
  --forest:        #1F3A2E;   /* primary anchor: headers, footer, buttons */
  --forest-deep:   #15281F;   /* hover / darkest ground */
  --forest-mid:    #2E5142;   /* secondary surface on dark */
  --school-green:  #8CB63C;   /* existing brand green, deepened for contrast */
  --school-green-lt:#A8CE5C;
  --cream:         #FAF7F0;   /* page ground */
  --sand:          #EFE7D6;   /* secondary surface */
  --sand-deep:     #E2D6BE;   /* rules, borders */
  --ink:           #22302A;   /* body text */
  --ink-soft:      #4A5A52;   /* secondary text */
  --clay:          #A8503C;   /* LIMITED accent only */
  --white:         #FFFFFF;

  /* Type */
  --display: 'Fraunces', Georgia, serif;
  --body: 'Karla', system-ui, -apple-system, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.1875rem;
  --t-xl:   1.375rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.125rem;
  --t-4xl:  2.75rem;
  --t-5xl:  3.5rem;

  /* Spacing */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;   --s-7: 3rem;   --s-8: 4rem;
  --s-9: 5.5rem; --s-10: 7rem;

  /* Form */
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 3px rgba(31,58,46,.08), 0 6px 20px rgba(31,58,46,.06);
  --maxw: 1140px;
  --measure: 68ch;
  --dur: 220ms;
  --hdr-h: 70px;   /* sticky header height — used to offset in-page anchor jumps */
}

*,*::before,*::after{box-sizing:border-box}
/* The [hidden] attribute must win over component display rules such as
   .btn{display:inline-flex}, otherwise hidden elements still render. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
/* In-page anchors (#calendar, #virtual-tour, #tuition…) must clear the sticky
   header, otherwise the target heading lands underneath it and the jump looks broken. */
section[id], [id]:target{scroll-margin-top:calc(var(--hdr-h) + var(--s-4))}
@media(min-width:1000px){section[id], [id]:target{scroll-margin-top:calc(var(--hdr-h) + var(--s-5))}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:var(--t-base); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); line-height:1.15; margin:0; font-weight:600; letter-spacing:-.01em}
p{margin:0 0 var(--s-4)}
:focus-visible{outline:3px solid var(--clay); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5)}
.measure{max-width:var(--measure)}

.skip{position:absolute; left:-9999px; top:0; background:var(--forest); color:var(--cream);
  padding:var(--s-3) var(--s-5); z-index:200; font-weight:600}
.skip:focus{left:var(--s-4); top:var(--s-4)}

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--body); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:var(--s-3); margin:0 0 var(--s-4);
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--school-green); flex:none}
.on-dark .eyebrow{color:var(--school-green-lt)}
.on-dark .eyebrow::before{background:var(--school-green)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-family:var(--body); font-weight:700; font-size:var(--t-sm);
  padding:.9rem 1.5rem; border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:background var(--dur), color var(--dur), border-color var(--dur);
  min-height:48px; text-align:center; line-height:1.2;
}
.btn-primary{background:var(--forest); color:var(--cream); border-color:var(--forest)}
.btn-primary:hover{background:var(--forest-deep); border-color:var(--forest-deep)}
.btn-secondary{background:transparent; color:var(--forest); border-color:var(--forest)}
.btn-secondary:hover{background:var(--forest); color:var(--cream)}
.on-dark .btn-primary{background:var(--school-green); color:var(--forest-deep); border-color:var(--school-green)}
.on-dark .btn-primary:hover{background:var(--school-green-lt); border-color:var(--school-green-lt)}
.on-dark .btn-secondary{color:var(--cream); border-color:rgba(250,247,240,.5)}
.on-dark .btn-secondary:hover{background:var(--cream); color:var(--forest); border-color:var(--cream)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s-3)}

/* ---------- Announcement ---------- */
.announce{
  background:var(--forest-deep); color:var(--cream);
  font-size:var(--t-sm); text-align:center; padding:var(--s-3) var(--s-5);
}
.announce a{color:var(--school-green-lt); font-weight:700; text-underline-offset:3px}

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:100; background:var(--cream);
  border-bottom:1px solid var(--sand-deep);
}
.hdr-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); padding:var(--s-4) 0}
.brand{display:flex; align-items:center; gap:var(--s-3); text-decoration:none; flex:none}
.brand-mark{width:38px; height:38px; flex:none}
.brand-txt{font-family:var(--display); font-weight:600; font-size:var(--t-base); line-height:1.15; color:var(--forest)}
.brand-txt span{display:block; font-family:var(--body); font-size:var(--t-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:600}

.nav{display:none}
@media(min-width:1000px){
  .nav{display:flex; align-items:center; gap:var(--s-5)}
  .nav a{font-size:var(--t-sm); font-weight:600; text-decoration:none; color:var(--ink);
    padding:var(--s-2) 0; border-bottom:2px solid transparent; transition:border-color var(--dur)}
  .nav a:hover{border-color:var(--school-green)}
}
.hdr-cta{display:flex; align-items:center; gap:var(--s-3)}
.tel-link{display:none; font-weight:700; font-size:var(--t-sm); text-decoration:none; color:var(--forest); white-space:nowrap}
@media(min-width:1200px){.tel-link{display:block}}
.hdr-cta .btn{display:none}
@media(min-width:1000px){.hdr-cta .btn{display:inline-flex}}

.burger{
  display:flex; align-items:center; gap:var(--s-2); background:var(--forest); color:var(--cream);
  border:0; border-radius:var(--radius); padding:.7rem .9rem; font-family:var(--body);
  font-weight:700; font-size:var(--t-sm); cursor:pointer; min-height:44px;
}
@media(min-width:1000px){.burger{display:none}}
.burger-bars{display:grid; gap:3px}
.burger-bars i{display:block; width:16px; height:2px; background:var(--cream)}

.mnav{display:none; border-top:1px solid var(--sand-deep); background:var(--cream); padding:var(--s-4) 0 var(--s-5)}
.mnav[data-open="true"]{display:block}
@media(min-width:1000px){.mnav{display:none !important}}
.mnav a{display:block; padding:var(--s-3) 0; font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--sand-deep)}
.mnav .btn{margin-top:var(--s-4); width:100%}

/* ---------- Hero ---------- */
.hero{padding:var(--s-7) 0 var(--s-8); background:
  linear-gradient(180deg, var(--cream) 0%, var(--sand) 100%)}
.hero-grid{display:grid; gap:var(--s-6); align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr; gap:var(--s-8)}}
.hero h1{font-size:var(--t-4xl); margin-bottom:var(--s-4)}
@media(min-width:900px){.hero h1{font-size:var(--t-5xl)}}
.hero .lede{font-size:var(--t-lg); color:var(--ink-soft); max-width:46ch}
.hero-meta{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin:0 0 var(--s-5);
  font-size:var(--t-sm); font-weight:600; color:var(--forest)}
.hero-meta span{display:flex; align-items:center; gap:var(--s-2)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--school-green); flex:none}

/* Image placeholders — swap for approved photography */
.ph{
  position:relative; background:var(--forest-mid); border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--school-green-lt); font-family:var(--body); font-size:var(--t-xs);
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-align:center;
  padding:var(--s-5); border:1px dashed rgba(168,206,92,.45);
}
.ph-hero{aspect-ratio:4/3}
.ph-wide{aspect-ratio:16/9}
.ph-sq{aspect-ratio:1/1}
.ph-port{aspect-ratio:3/4}

/* ---------- Trust strip ---------- */
.trust{background:var(--forest); color:var(--cream); padding:var(--s-5) 0}
.trust-grid{display:grid; gap:var(--s-4); grid-template-columns:repeat(2,1fr)}
@media(min-width:800px){.trust-grid{grid-template-columns:repeat(4,1fr); gap:var(--s-6)}}
.trust-item strong{display:block; font-family:var(--display); font-size:var(--t-xl); color:var(--white)}
.trust-item span{font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--school-green-lt); font-weight:600}

/* ---------- Sections ---------- */
.sec{padding:var(--s-8) 0}
@media(min-width:900px){.sec{padding:var(--s-9) 0}}
.sec-sand{background:var(--sand)}
.sec-dark{background:var(--forest); color:var(--cream)}
.sec-dark h2,.sec-dark h3{color:var(--white)}
.sec-head{max-width:60ch; margin-bottom:var(--s-6)}
.sec-head h2{font-size:var(--t-3xl); margin-bottom:var(--s-4)}
@media(min-width:900px){.sec-head h2{font-size:var(--t-4xl)}}
.sec-head p{color:var(--ink-soft); font-size:var(--t-lg); margin:0}
.sec-dark .sec-head p{color:rgba(250,247,240,.82)}

/* ---------- Program cards ---------- */
.prog-grid{display:grid; gap:var(--s-5)}
@media(min-width:820px){.prog-grid{grid-template-columns:1fr 1fr; gap:var(--s-6)}}
.prog{background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius-lg);
  padding:var(--s-6); display:flex; flex-direction:column}
.prog-age{font-family:var(--body); font-size:var(--t-xs); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--clay); margin-bottom:var(--s-2)}
.prog h3{font-size:var(--t-2xl); margin-bottom:var(--s-4)}
.prog .sched{list-style:none; margin:0 0 var(--s-5); padding:var(--s-4) 0 0; border-top:1px solid var(--sand-deep)}
.prog .sched li{display:flex; justify-content:space-between; gap:var(--s-4); padding:var(--s-2) 0;
  font-size:var(--t-sm); border-bottom:1px solid var(--sand)}
.prog .sched li:last-child{border-bottom:0}
.prog .sched b{font-family:var(--display); white-space:nowrap}
.prog .btn{margin-top:auto; align-self:flex-start}

/* ---------- Principles ---------- */
.prin-grid{display:grid; gap:var(--s-5)}
@media(min-width:700px){.prin-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.prin-grid{grid-template-columns:repeat(3,1fr); gap:var(--s-6)}}
.prin{padding-top:var(--s-4); border-top:2px solid var(--school-green)}
.prin h3{font-size:var(--t-xl); margin-bottom:var(--s-3)}
.prin p{font-size:var(--t-sm); color:var(--ink-soft); margin:0}
.sec-dark .prin p{color:rgba(250,247,240,.78)}

/* ============================================================
   SIGNATURE: the day rail — 7:30 a.m. to 6:00 p.m.
   ============================================================ */
.rail{position:relative; margin-top:var(--s-6)}
.rail::before{
  content:""; position:absolute; left:7px; top:12px; bottom:12px; width:2px;
  background:linear-gradient(180deg, var(--school-green), rgba(140,182,60,.25)); border-radius:2px;
}
@media(min-width:760px){.rail::before{left:calc(7.5rem + 7px)}}
.stop{position:relative; display:grid; gap:var(--s-1); padding:0 0 var(--s-6) var(--s-6)}
@media(min-width:760px){
  .stop{grid-template-columns:7.5rem 1fr; gap:var(--s-6); padding-left:0; align-items:start}
  .stop > .stop-body{padding-left:var(--s-6)}
}
.stop:last-child{padding-bottom:0}
.stop-time{
  font-family:var(--display); font-weight:700; font-size:var(--t-base); color:var(--school-green-lt);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
@media(min-width:760px){.stop-time{text-align:right; font-size:var(--t-lg)}}
.stop::after{
  content:""; position:absolute; left:0; top:.55rem; width:16px; height:16px; border-radius:50%;
  background:var(--forest); border:3px solid var(--school-green);
}
@media(min-width:760px){.stop::after{left:7.5rem}}
.stop-body h3{font-size:var(--t-lg); margin-bottom:var(--s-2)}
.stop-body p{font-size:var(--t-sm); color:rgba(250,247,240,.78); margin:0; max-width:56ch}
.stop-tag{display:inline-block; margin-top:var(--s-2); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--forest-deep);
  background:var(--school-green); padding:2px 8px; border-radius:2px}

/* ---------- Split blocks ---------- */
.split{display:grid; gap:var(--s-6); align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr; gap:var(--s-8)}}
.split.flip .split-media{order:-1}
/* Programme room photos: fill the column so the image matches the height of the
   text beside it, rather than floating at its natural aspect ratio. */
@media(min-width:900px){
  .split--match{align-items:stretch}
  .split--match > picture{display:block; height:100%; min-height:100%}
  .split--match > picture img{width:100%; height:100%; object-fit:cover;
    max-height:32rem; border-radius:var(--radius-lg)}
}
@media(max-width:899px){.split.flip .split-media{order:0}}

/* ---------- Staff ---------- */
.staff-grid{display:grid; gap:var(--s-5); grid-template-columns:1fr}
@media(min-width:640px){.staff-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.staff-grid{grid-template-columns:repeat(4,1fr)}}
.staff{background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius-lg); overflow:hidden}
.staff-body{padding:var(--s-5)}
.staff-body h3{font-size:var(--t-lg); margin-bottom:var(--s-1)}
.staff-role{font-size:var(--t-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--clay); margin-bottom:var(--s-3)}
.staff-body p{font-size:var(--t-sm); color:var(--ink-soft); margin:0}

/* ---------- Tuition ---------- */
.tuit{background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius-lg);
  padding:var(--s-6); margin-top:var(--s-6)}
.tuit table{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
/* Narrow phones: let a wide fee table scroll inside its card instead of being
   clipped by the body overflow rule. */
.tuit-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tuit-scroll:focus-visible{outline:3px solid var(--clay); outline-offset:3px; border-radius:4px}
.tuit-scroll table{min-width:22rem}
.tuit caption{text-align:left; font-family:var(--display); font-size:var(--t-xl); font-weight:600;
  margin-bottom:var(--s-4); color:var(--forest)}
.tuit th,.tuit td{text-align:left; padding:var(--s-3) var(--s-2); border-bottom:1px solid var(--sand)}
.tuit thead th{font-family:var(--body); font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid var(--sand-deep)}
.tuit td.num{text-align:right; font-family:var(--display); font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tuit tbody th{font-weight:600; font-family:var(--body)}
.tuit .grp th{background:var(--sand); font-family:var(--body); font-size:var(--t-xs);
  letter-spacing:.09em; text-transform:uppercase; color:var(--forest)}
.tuit-note{font-size:var(--t-sm); color:var(--ink-soft); margin:var(--s-5) 0 0;
  padding-top:var(--s-4); border-top:1px solid var(--sand-deep)}
.plans{display:grid; gap:var(--s-3); margin:var(--s-5) 0 0}
@media(min-width:700px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{border:1px solid var(--sand-deep); border-radius:var(--radius); padding:var(--s-4)}
.plan b{display:block; font-family:var(--display); font-size:var(--t-lg); color:var(--forest)}
.plan span{font-size:var(--t-xs); color:var(--ink-soft)}

/* ---------- Steps ---------- */
.steps{list-style:none; counter-reset:s; padding:0; margin:var(--s-6) 0 0; display:grid; gap:var(--s-5)}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr); gap:var(--s-6)}}
.steps li{counter-increment:s; padding-top:var(--s-4); border-top:2px solid var(--sand-deep)}
.steps li::before{content:counter(s,decimal-leading-zero); display:block;
  font-family:var(--display); font-size:var(--t-xl); font-weight:700; color:var(--school-green);
  margin-bottom:var(--s-2); font-variant-numeric:tabular-nums}
.steps h3{font-size:var(--t-lg); margin-bottom:var(--s-2)}
.steps p{font-size:var(--t-sm); color:var(--ink-soft); margin:0}

/* ---------- FAQ ---------- */
.faq{margin-top:var(--s-6); max-width:80ch}
.faq details{border-bottom:1px solid var(--sand-deep)}
.faq summary{
  cursor:pointer; padding:var(--s-4) var(--s-6) var(--s-4) 0; position:relative;
  font-family:var(--display); font-size:var(--t-lg); font-weight:600; color:var(--forest);
  list-style:none; min-height:48px; display:flex; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:var(--s-2); top:50%; width:11px; height:11px;
  border-right:2px solid var(--school-green); border-bottom:2px solid var(--school-green);
  transform:translateY(-70%) rotate(45deg); transition:transform var(--dur);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 var(--s-6) var(--s-5) 0; font-size:var(--t-sm); color:var(--ink-soft); max-width:70ch}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- Final CTA ---------- */
.final{background:var(--forest-deep); color:var(--cream); padding:var(--s-9) 0}
.final h2{font-size:var(--t-3xl); color:var(--white); margin-bottom:var(--s-4); max-width:28ch}
@media(min-width:900px){.final h2{font-size:var(--t-4xl)}}
.final p{color:rgba(250,247,240,.82); font-size:var(--t-lg); max-width:52ch}

/* ---------- Footer ---------- */
.ftr{background:var(--forest); color:rgba(250,247,240,.85); padding:var(--s-8) 0 var(--s-6);
  font-size:var(--t-sm); border-top:1px solid var(--forest-mid)}
.ftr-grid{display:grid; gap:var(--s-6)}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h3{font-family:var(--body); font-size:var(--t-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--school-green-lt); margin-bottom:var(--s-4)}
.ftr a{color:var(--cream); text-decoration:none; text-underline-offset:3px}
.ftr a:hover{text-decoration:underline}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2)}
.ftr .name{font-family:var(--display); font-size:var(--t-lg); color:var(--white); margin-bottom:var(--s-3)}
.ftr address{font-style:normal; margin-bottom:var(--s-4); line-height:1.7}
.ftr-btm{margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--forest-mid);
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); justify-content:space-between;
  font-size:var(--t-xs); color:rgba(250,247,240,.6)}


/* ---------- Hero: video ----------
   Overlay is left-weighted so the video stays visible on the right while the
   text sits on a dark scrim. Worst case (pure white video frame) measures
   9.7:1 for cream text — past WCAG AAA. Mobile switches to a uniform scrim
   because the text spans the full width there. */
.vhero{position:relative; min-height:clamp(440px,68vh,620px); display:flex; align-items:center;
  overflow:hidden; background:var(--forest-deep)}
.vhero video,.vhero .vposter{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vhero .veil{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(21,40,31,.35) 0%, rgba(21,40,31,.15) 40%, rgba(21,40,31,.75) 100%),
  linear-gradient(180deg, rgba(21,40,31,.82) 0%, rgba(21,40,31,.82) 100%)}
@media(min-width:900px){
  .vhero .veil{background:
    linear-gradient(180deg, rgba(21,40,31,.35) 0%, rgba(21,40,31,.15) 40%, rgba(21,40,31,.75) 100%),
    linear-gradient(90deg, rgba(21,40,31,.92) 0%, rgba(21,40,31,.86) 30%,
                          rgba(21,40,31,.55) 58%, rgba(21,40,31,.20) 82%, rgba(21,40,31,.12) 100%)}
}
.vhero-in{position:relative; z-index:2; width:100%; padding:var(--s-6) 0 var(--s-6)}

/* Pull the text stack toward the left edge on wide screens */
.vhero-in .wrap{max-width:1420px}
.vhero-copy{max-width:34rem}
@media(min-width:1500px){.vhero-in .wrap{padding-left:var(--s-8)}}

.vhero .eyebrow{color:var(--school-green-lt); margin-bottom:var(--s-4)}
.vhero .eyebrow::before{background:var(--school-green)}
.vhero h1{color:var(--white); font-size:clamp(2.05rem,5.6vw,3.5rem); margin-bottom:var(--s-5);
  text-shadow:0 2px 20px rgba(21,40,31,.55); letter-spacing:-.015em}
.vhero .lede{color:rgba(255,255,255,.94); font-size:var(--t-lg); max-width:44ch; margin-bottom:var(--s-5);
  text-shadow:0 1px 12px rgba(21,40,31,.5)}
.vhero-meta{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin:0 0 var(--s-5);
  font-size:var(--t-sm); font-weight:600; color:var(--white)}
.vhero-meta span{display:flex; align-items:center; gap:var(--s-2)}
@media (prefers-reduced-motion: reduce){ .vhero video{display:none} }

/* ---------- Memberships ---------- */
.memb{background:var(--white); border-top:1px solid var(--sand-deep); border-bottom:1px solid var(--sand-deep);
  padding:var(--s-6) 0}
.memb-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--s-4) var(--s-6); text-align:center}
.memb-badge{font-family:var(--display); font-size:var(--t-lg); color:var(--forest); font-weight:600}
.memb-badge small{display:block; font-family:var(--body); font-size:var(--t-xs); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-top:var(--s-1)}

/* ---------- Contact form ---------- */
.cform{background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius-lg);
  padding:var(--s-6); margin-top:var(--s-6)}
.fields{display:grid; gap:var(--s-4)}
@media(min-width:700px){.fields .half{grid-column:span 1} .fields{grid-template-columns:1fr 1fr}
  .fields .full{grid-column:1 / -1}}
.field label{display:block; font-size:var(--t-sm); font-weight:700; margin-bottom:var(--s-2); color:var(--forest)}
.field .req{color:var(--clay)}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:var(--t-base); padding:.75rem .85rem;
  border:1px solid var(--sand-deep); border-radius:var(--radius); background:var(--cream); color:var(--ink);
  min-height:48px}
.field textarea{min-height:120px; resize:vertical}
.field .hint{font-size:var(--t-xs); color:var(--ink-soft); margin-top:var(--s-2)}
.cform .privacy{font-size:var(--t-xs); color:var(--ink-soft); margin:var(--s-4) 0 0}
.alt-contact{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); padding-top:var(--s-5);
  border-top:1px solid var(--sand-deep)}

/* ---------- Sticky mobile CTA ---------- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:110; display:flex; gap:var(--s-2);
  padding:var(--s-3) var(--s-4); background:var(--cream);
  border-top:1px solid var(--sand-deep); box-shadow:0 -4px 18px rgba(31,58,46,.1);
}
.sticky .btn{flex:1; padding:.8rem .6rem; font-size:var(--t-sm)}
.sticky .btn-tel{flex:0 0 auto; padding:.8rem 1rem}
@media(min-width:1000px){.sticky{display:none}}
body{padding-bottom:76px}
@media(min-width:1000px){body{padding-bottom:0}}

/* ============================================================
   LANDING PAGE (Fall 2026) — campaign destination
   ============================================================ */
.lp-hdr{position:sticky; top:0; z-index:100; background:var(--cream); border-bottom:1px solid var(--sand-deep)}
.lp-hdr-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-3) 0}
.lp-hdr img{height:38px; width:auto}
.lp-hdr .lp-acts{display:flex; align-items:center; gap:var(--s-3)}
.lp-hdr .lp-acts .btn{padding:.7rem 1.1rem; font-size:var(--t-sm)}
.lp-tel{font-weight:700; font-size:var(--t-sm); text-decoration:none; color:var(--forest); white-space:nowrap}
@media(max-width:560px){.lp-tel{display:none}}

/* Page hero sized to the prepared crops: 1920x720 (8:3) from 768px up, so at
   1920 the desktop file renders 1:1 and is never up-scaled or letterboxed.
   min-height is fixed in advance, so the box reserves its space before the
   image decodes and there is no layout shift. */
.lp-hero{position:relative; overflow:hidden; background:#eef2e9;
  min-height:clamp(340px, 37.5vw, 720px); display:flex; align-items:center}
@media(max-width:767px){
  /* mobile crop is 1080x900 (6:5) */
  .lp-hero{min-height:clamp(440px, 83vw, 620px)}
}
.lp-hero>img,.lp-hero>picture{position:absolute; inset:0; width:100%; height:100%}
.lp-hero>img,.lp-hero>picture img{width:100%; height:100%; object-fit:cover;
  object-position:center center; max-width:none}
/* Heroes framed deliberately: keep the subject centred, never edge-biased. */
.lp-hero--center>picture img,.lp-hero--center>img{object-position:center center}
/* Restrained overlay, sized to the job: measured against each hero photograph,
   an effective alpha of .60 over the copy zone is the minimum that holds white
   text at 4.5:1 (WCAG AA for body-size text). Coverage falls away to .10 on the
   open side of the frame so the photograph still reads. */
.lp-hero .veil{position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(90deg, rgba(17,32,22,.68) 0%, rgba(17,32,22,.63) 46%,
                         rgba(17,32,22,.30) 74%, rgba(17,32,22,.10) 100%),
  linear-gradient(180deg, rgba(17,32,22,.10) 0%, rgba(17,32,22,.06) 55%, rgba(17,32,22,.24) 100%)}
@media(max-width:767px){
  /* narrow screens: copy spans the full width, so the wash must be even */
  .lp-hero .veil{background:
    linear-gradient(180deg, rgba(17,32,22,.64) 0%, rgba(17,32,22,.68) 45%, rgba(17,32,22,.76) 100%)}
}
.lp-hero-in{position:relative; z-index:2; padding:var(--s-7) 0}
.lp-hero h1{color:var(--white); font-size:clamp(1.9rem,5.8vw,3.1rem); max-width:24ch; margin-bottom:var(--s-4)}
.lp-hero .lede{color:rgba(255,255,255,.93); font-size:var(--t-lg); max-width:50ch; margin-bottom:var(--s-5)}
.lp-badge{display:inline-flex; align-items:center; gap:var(--s-2); background:var(--school-green);
  color:var(--forest-deep); font-size:var(--t-xs); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:.4rem .8rem; border-radius:2px; margin-bottom:var(--s-4)}

/* Objection cards */
.obj-grid{display:grid; gap:var(--s-4); margin-top:var(--s-6)}
@media(min-width:760px){.obj-grid{grid-template-columns:1fr 1fr; gap:var(--s-5)}}
.obj{background:var(--white); border:1px solid var(--sand-deep); border-left:3px solid var(--school-green);
  border-radius:var(--radius); padding:var(--s-5)}
.obj h3{font-size:var(--t-lg); margin-bottom:var(--s-2)}
.obj p{font-size:var(--t-sm); color:var(--ink-soft); margin:0}

/* Click-to-load video */
.vidwrap{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--forest-deep);
  aspect-ratio:16/9; margin-top:var(--s-6)}
.vidwrap img,.vidwrap video{width:100%; height:100%; object-fit:cover; display:block}
.vidplay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--s-3); background:rgba(21,40,31,.45); border:0; cursor:pointer;
  color:var(--white); font-family:var(--body); font-weight:700; font-size:var(--t-sm)}
.vidplay:hover{background:rgba(21,40,31,.3)}
.vidplay .tri{width:62px; height:62px; border-radius:50%; background:var(--school-green);
  display:grid; place-items:center}
.vidplay .tri::after{content:""; width:0; height:0; margin-left:5px;
  border-left:20px solid var(--forest-deep); border-top:13px solid transparent; border-bottom:13px solid transparent}

/* Calendly click-to-load */
.cal{background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius-lg);
  padding:var(--s-6); margin-top:var(--s-6)}
.cal-slot{min-height:0}
.cal-slot[data-loaded="true"]{min-height:680px; margin-top:var(--s-5)}
.cal-fallback{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5);
  padding-top:var(--s-5); border-top:1px solid var(--sand-deep)}
.cal .micro{font-size:var(--t-xs); color:var(--ink-soft); margin:var(--s-4) 0 0}

/* Slim landing footer */
.lp-ftr{background:var(--forest); color:rgba(250,247,240,.85); padding:var(--s-7) 0 var(--s-5); font-size:var(--t-sm)}
.lp-ftr a{color:var(--cream); text-decoration:none}
.lp-ftr a:hover{text-decoration:underline}
.lp-ftr .name{font-family:var(--display); font-size:var(--t-lg); color:var(--white); margin-bottom:var(--s-3)}
.lp-ftr address{font-style:normal; line-height:1.7; margin-bottom:var(--s-4)}
.lp-ftr-btm{margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--forest-mid);
  font-size:var(--t-xs); color:rgba(250,247,240,.6)}

/* ============================================================
   STAFF / TEAM PAGE
   ============================================================ */
.bio{display:grid; gap:var(--s-5); padding:var(--s-7) 0; border-bottom:1px solid var(--sand-deep)}
.bio:last-of-type{border-bottom:0}
@media(min-width:860px){
  .bio{grid-template-columns:300px 1fr; gap:var(--s-8); align-items:start}
  .bio.alt{grid-template-columns:1fr 300px}
  .bio.alt .bio-media{order:2}
}
.bio-media img{border-radius:50%; width:100%; max-width:300px; aspect-ratio:1/1; object-fit:cover;
  box-shadow:var(--shadow)}
.bio-name{font-family:var(--display); font-size:var(--t-2xl); font-weight:600; color:var(--forest);
  margin:0 0 var(--s-1); line-height:1.15}
.bio-role{font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--clay); margin:0 0 var(--s-4)}
.bio-body p{font-size:var(--t-base); color:var(--ink); max-width:66ch}
.bio-body p:last-child{margin-bottom:0}
.creds{list-style:none; margin:0 0 var(--s-4); padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2)}
.creds li{font-size:var(--t-xs); font-weight:700; letter-spacing:.04em; background:var(--sand);
  color:var(--forest); padding:.3rem .65rem; border-radius:2px}

/* Monogram fallback when no headshot exists */
.mono{width:100%; max-width:300px; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--forest-mid), var(--forest) 70%);
  display:grid; place-items:center; box-shadow:var(--shadow)}
.mono span{font-family:var(--display); font-size:clamp(3rem,9vw,4.6rem); font-weight:600;
  color:var(--school-green-lt); letter-spacing:.02em}
.staff .mono{max-width:none; border-radius:0; aspect-ratio:3/4}

/* Montessori reading blocks */
.read h3{font-size:var(--t-xl); margin:var(--s-6) 0 var(--s-3); color:var(--forest)}
.read h3:first-child{margin-top:0}
.read p{max-width:70ch}
.booklist{list-style:none; margin:var(--s-4) 0 0; padding:0; display:grid; gap:var(--s-3)}
.booklist li{font-size:var(--t-sm); padding-left:var(--s-5); position:relative; color:var(--ink-soft)}
.booklist li::before{content:""; position:absolute; left:0; top:.62em; width:10px; height:2px;
  background:var(--school-green)}
.booklist b{color:var(--ink); font-weight:600}

/* Staff card image inside grid cards */
.staff img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}

/* ============================================================
   GALLERY + VIRTUAL TOUR
   ============================================================ */
.gal{display:grid; gap:var(--s-4); margin-top:var(--s-6)}
@media(min-width:640px){.gal{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.gal{grid-template-columns:repeat(3,1fr); gap:var(--s-5)}}
.gal figure{margin:0}
.gal img{border-radius:var(--radius-lg); aspect-ratio:3/2; object-fit:cover; width:100%}
.gal figcaption{font-size:var(--t-xs); color:var(--ink-soft); margin-top:var(--s-2)}

.vtour{background:var(--forest); color:var(--cream); border-radius:var(--radius-lg);
  padding:var(--s-7) var(--s-6); margin-top:var(--s-6); text-align:center}
.vtour h3{font-family:var(--display); font-size:var(--t-2xl); color:var(--white); margin:0 0 var(--s-3)}
.vtour p{color:rgba(250,247,240,.85); max-width:52ch; margin:0 auto var(--s-5)}
.vtour .btn-row{justify-content:center}

/* ============================================================
   ACADEMIC CALENDAR
   ============================================================ */
.cal-wrap{background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius-lg);
  padding:var(--s-5); margin-top:var(--s-6)}
.cal-wrap img{width:100%; height:auto; border-radius:var(--radius); display:block}
.cal-actions{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5);
  padding-top:var(--s-5); border-top:1px solid var(--sand-deep)}

.key-dates{list-style:none; padding:0; margin:var(--s-6) 0 0; display:grid; gap:var(--s-3)}
@media(min-width:760px){.key-dates{grid-template-columns:1fr 1fr; gap:var(--s-4)}}
.key-dates li{display:flex; gap:var(--s-4); align-items:baseline; background:var(--white);
  border:1px solid var(--sand-deep); border-left:3px solid var(--school-green);
  border-radius:var(--radius); padding:var(--s-4)}
.key-dates .kd-when{font-family:var(--display); font-weight:700; color:var(--forest);
  font-size:var(--t-sm); white-space:nowrap; flex:0 0 auto; min-width:9.5rem}
.key-dates .kd-what{font-size:var(--t-sm); color:var(--ink-soft)}
.key-dates li.kd-major{border-left-color:var(--clay); background:rgba(168,80,60,.04)}
.key-dates li.kd-major .kd-what{color:var(--ink); font-weight:600}

/* ============================================================
   MAP (click-to-load: keeps the "no third-party on load" promise)
   ============================================================ */
.mapbox{position:relative; margin-top:var(--s-6); border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--sand-deep); background:var(--sand)}
.mapbox iframe{display:block; width:100%; height:clamp(320px,52vh,480px); border:0}
.map-ph{position:relative; height:clamp(320px,52vh,480px); display:grid; place-items:center;
  text-align:center; padding:var(--s-6);
  background:
    repeating-linear-gradient(0deg, rgba(31,58,46,.055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(31,58,46,.055) 0 1px, transparent 1px 46px),
    var(--sand)}
.map-ph::before{content:""; position:absolute; left:50%; top:50%; width:180px; height:8px;
  transform:translate(-50%,-50%) rotate(-24deg); background:var(--sand-deep); border-radius:4px}
.map-ph::after{content:""; position:absolute; left:50%; top:50%; width:8px; height:220px;
  transform:translate(-50%,-50%) rotate(-24deg); background:var(--sand-deep); border-radius:4px}
.map-ph-in{position:relative; z-index:2; background:var(--cream); border:1px solid var(--sand-deep);
  border-radius:var(--radius-lg); padding:var(--s-5); max-width:34rem; box-shadow:var(--shadow)}
.map-ph-in p{font-size:var(--t-sm); color:var(--ink-soft); margin:0 0 var(--s-4)}
.map-ph-in .btn-row{justify-content:center}
.map-note{font-size:var(--t-xs); color:var(--ink-soft); margin:var(--s-4) 0 0}
.nearby{list-style:none; padding:0; margin:var(--s-5) 0 0; display:grid; gap:var(--s-2)}
.nearby li{font-size:var(--t-sm); color:var(--ink-soft); padding-left:var(--s-5); position:relative}
.nearby li::before{content:""; position:absolute; left:0; top:.58em; width:10px; height:2px;
  background:var(--school-green)}

/* ============================================================
   CAROUSEL  (accessible: buttons, keyboard, dots, no autoplay)
   ============================================================ */
.crsl{position:relative; margin-top:var(--s-5)}
.crsl-label{display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-3)}
.crsl-tag{font-family:var(--body); font-size:var(--t-xs); font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; padding:.28rem .7rem; border-radius:2px}
.crsl-tag.before{background:var(--sand-deep); color:var(--forest)}
.crsl-tag.after{background:var(--school-green); color:var(--forest-deep)}
.crsl-label h3{font-family:var(--display); font-size:var(--t-xl); color:var(--forest); margin:0}
.crsl-stage{position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--forest-deep);
  aspect-ratio:3/2}
.crsl-stage figure{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 320ms ease}
.crsl-stage figure[data-active="true"]{opacity:1}
.crsl-stage img{width:100%; height:100%; object-fit:cover; display:block}
.crsl-cap{position:absolute; left:0; right:0; bottom:0; padding:var(--s-5) var(--s-4) var(--s-3);
  background:linear-gradient(180deg, rgba(21,40,31,0), rgba(21,40,31,.86));
  color:var(--cream); font-size:var(--t-sm); line-height:1.45}
.crsl-ctrls{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); margin-top:var(--s-3)}
.crsl-btn{background:var(--cream); border:2px solid var(--forest); color:var(--forest); cursor:pointer;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none;
  transition:background var(--dur), color var(--dur)}
.crsl-btn:hover{background:var(--forest); color:var(--cream)}
.crsl-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}
.crsl-dots{display:flex; gap:var(--s-2); justify-content:center; flex:1}
.crsl-dot{width:11px; height:11px; border-radius:50%; border:2px solid var(--forest);
  background:transparent; cursor:pointer; padding:0}
.crsl-dot[aria-current="true"]{background:var(--forest)}
.crsl-count{font-size:var(--t-xs); font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums;
  min-width:3.2rem; text-align:right}
@media (prefers-reduced-motion: reduce){.crsl-stage figure{transition:none}}

/* Before/After stack */
.ba-grid{display:grid; gap:var(--s-7)}
.ba-note{font-size:var(--t-sm); color:var(--ink-soft); margin:var(--s-5) 0 0;
  padding-top:var(--s-4); border-top:1px solid var(--sand-deep); max-width:72ch}

/* Day / night side-by-side */
.dn{display:grid; gap:var(--s-4); margin-top:var(--s-6)}
@media(min-width:820px){.dn{grid-template-columns:1fr 1fr; gap:var(--s-5)}}
.dn figure{margin:0}
.dn img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius-lg); display:block}
.dn figcaption{display:flex; align-items:center; gap:var(--s-2); margin-top:var(--s-3);
  font-size:var(--t-sm); color:var(--ink-soft)}
.dn figcaption b{font-family:var(--display); color:var(--forest); font-size:var(--t-base)}

/* Photo group rows */
.grp-row{margin-top:var(--s-7)}
.grp-row:first-of-type{margin-top:var(--s-6)}
.grp-head{display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4);
  padding-bottom:var(--s-3); border-bottom:1px solid var(--sand-deep)}
.grp-head h3{font-family:var(--display); font-size:var(--t-xl); color:var(--forest); margin:0}
.grp-head span{font-size:var(--t-xs); color:var(--ink-soft); font-weight:600; letter-spacing:.05em}
.grp-3{display:grid; gap:var(--s-4)}
@media(min-width:700px){.grp-3{grid-template-columns:repeat(3,1fr)}}
.grp-3 figure{margin:0}
.grp-3 img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); display:block}
.grp-3 figcaption{font-size:var(--t-xs); color:var(--ink-soft); margin-top:var(--s-2); line-height:1.5}

/* History */
.hist{border-left:3px solid var(--school-green); padding-left:var(--s-5); margin:var(--s-6) 0 0}
.hist blockquote{margin:0 0 var(--s-4); font-family:var(--display); font-size:var(--t-xl);
  line-height:1.4; color:var(--forest)}
.hist cite{display:block; font-family:var(--body); font-style:normal; font-size:var(--t-sm);
  font-weight:700; color:var(--ink-soft); margin-top:var(--s-3)}
.srcnote{font-size:var(--t-xs); color:var(--ink-soft); margin-top:var(--s-5)}
.srcnote a{color:var(--forest)}


/* ============================================================
   HERO VARIANT: --open
   Lighter full-bleed veil so the photograph reads, with a contained
   scrim panel behind the copy so text contrast never depends on the image.
   Used on Our School while the hero photograph is being reselected.
   ============================================================ */
.lp-hero--open .veil{background:
  linear-gradient(180deg, rgba(21,40,31,.30) 0%, rgba(21,40,31,.10) 45%, rgba(21,40,31,.48) 100%)}
.lp-hero--open .lp-hero-in{padding:var(--s-8) 0}
.lp-hero--open .hero-panel{
  background:rgba(21,40,31,.82);
  border-left:3px solid var(--school-green);
  border-radius:var(--radius-lg);
  padding:var(--s-6);
  max-width:38rem;
  backdrop-filter:blur(2px);
  box-shadow:0 10px 40px rgba(21,40,31,.28);
}
.lp-hero--open .hero-panel h1{margin-bottom:var(--s-5)}
@supports not (backdrop-filter:blur(2px)){
  .lp-hero--open .hero-panel{background:rgba(21,40,31,.90)}
}

/* ============================================================
   TOUR LIGHTBOX  (Calendly, loaded on open only)
   ============================================================ */
.tourlb{position:fixed; inset:0; z-index:400; display:none}
.tourlb[data-open="true"]{display:block}
.tourlb-back{position:absolute; inset:0; background:rgba(21,40,31,.68); backdrop-filter:blur(3px)}
.tourlb-panel{position:absolute; inset:0; margin:auto; background:var(--cream);
  width:min(960px, calc(100% - 2rem)); height:min(760px, calc(100% - 2rem));
  border-radius:var(--radius-lg); box-shadow:0 24px 70px rgba(21,40,31,.4);
  display:flex; flex-direction:column; overflow:hidden}
.tourlb-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--sand-deep); background:var(--cream); flex:none}
.tourlb-head h2{font-family:var(--display); font-size:var(--t-xl); color:var(--forest); margin:0}
.tourlb-head p{font-size:var(--t-xs); color:var(--ink-soft); margin:var(--s-1) 0 0}
.tourlb-close{background:transparent; border:2px solid var(--forest); color:var(--forest); cursor:pointer;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:none;
  transition:background var(--dur), color var(--dur)}
.tourlb-close:hover{background:var(--forest); color:var(--cream)}
.tourlb-close svg{width:16px; height:16px; stroke:currentColor; stroke-width:2.6; fill:none; stroke-linecap:round}
.tourlb-body{flex:1; min-height:0; overflow:auto; position:relative}
.tourlb-cal{min-height:100%; height:100%}
.tourlb-fall{padding:var(--s-6); text-align:center}
.tourlb-fall p{color:var(--ink-soft); font-size:var(--t-sm); max-width:40ch; margin:0 auto var(--s-4)}
.tourlb-load{position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-soft);
  font-size:var(--t-sm); font-weight:600}
body[data-lb="open"]{overflow:hidden}
@media(max-width:560px){
  .tourlb-panel{width:100%; height:100%; border-radius:0}
}

/* ============================================================
   CONTACT: consolidated details card
   ============================================================ */
.cinfo{background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius-lg);
  overflow:hidden; position:sticky; top:calc(64px + var(--s-4))}
@media(max-width:899px){.cinfo{position:static}}
.cinfo-head{background:var(--forest); color:var(--cream); padding:var(--s-5) var(--s-5) var(--s-4)}
.cinfo-head p.name{font-family:var(--display); font-size:var(--t-lg); color:var(--white); margin:0 0 var(--s-2)}
.cinfo-head address{font-style:normal; font-size:var(--t-sm); line-height:1.6; color:rgba(250,247,240,.9); margin:0}
.cinfo-rows{padding:var(--s-2) var(--s-5) var(--s-5)}
.cinfo-row{display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); align-items:baseline;
  padding:var(--s-4) 0; border-bottom:1px solid var(--sand)}
.cinfo-row:last-of-type{border-bottom:0}
.cinfo-row dt{font-size:var(--t-xs); font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); white-space:nowrap}
.cinfo-row dd{margin:0; text-align:right; font-size:var(--t-sm)}
.cinfo-row dd a{font-weight:700; color:var(--forest); text-decoration:none}
.cinfo-row dd a:hover{text-decoration:underline}
.cinfo-row dd .sub{display:block; font-size:var(--t-xs); color:var(--ink-soft); font-weight:400; margin-top:2px}
.cinfo-hours{display:grid; gap:var(--s-2); text-align:right; font-variant-numeric:tabular-nums}
.cinfo-hours span{display:block; font-size:var(--t-sm)}
.cinfo-hours b{font-family:var(--display); color:var(--forest); white-space:nowrap}
.cinfo-acts{padding:0 var(--s-5) var(--s-5); display:grid; gap:var(--s-3)}
.cinfo-acts .btn{width:100%}
.cinfo-social{display:flex; gap:var(--s-4); justify-content:flex-end; padding:0 var(--s-5) var(--s-5);
  font-size:var(--t-sm)}
.cinfo-social a{color:var(--forest); font-weight:600}

/* ============================================================
   SOCIAL BUTTONS
   Brand marks drawn as paths and inked with currentColor so they sit in
   the site palette rather than Meta blue / Instagram gradient.
   ============================================================ */
.soc-row{display:flex; flex-wrap:wrap; gap:var(--s-3); margin:0; padding:0; list-style:none}
.soc{display:inline-flex; align-items:center; gap:var(--s-2); text-decoration:none;
  font-family:var(--body); font-size:var(--t-sm); font-weight:700; line-height:1;
  padding:.6rem .95rem; border-radius:var(--radius); border:2px solid transparent;
  transition:background var(--dur), color var(--dur), border-color var(--dur)}
.soc svg{width:17px; height:17px; flex:none}
.soc span{white-space:nowrap}

/* On light surfaces (contact card) */
.soc{background:var(--cream); color:var(--forest); border-color:var(--sand-deep)}
.soc:hover{background:var(--forest); color:var(--cream); border-color:var(--forest)}

/* On the dark footer */
.ftr .soc{background:transparent; color:var(--cream); border-color:rgba(250,247,240,.34)}
.ftr .soc:hover{background:var(--school-green); color:var(--forest-deep); border-color:var(--school-green)}

/* ============================================================
   MISSION STATEMENT BLOCK
   ============================================================ */
.statement{background:var(--white); border:1px solid var(--sand-deep); border-left:4px solid var(--school-green);
  border-radius:var(--radius-lg); padding:var(--s-6); margin-top:var(--s-5)}
.statement p{font-family:var(--display); font-size:var(--t-xl); line-height:1.45; color:var(--forest);
  margin:0; max-width:60ch}
@media(min-width:900px){.statement p{font-size:var(--t-2xl)}}
.statement .attrib{font-family:var(--body); font-size:var(--t-xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); margin:var(--s-4) 0 0}

/* Values grid — 8 items, scannable */
.vals{display:grid; gap:var(--s-4); margin-top:var(--s-6)}
@media(min-width:640px){.vals{grid-template-columns:1fr 1fr; gap:var(--s-5)}}
@media(min-width:1060px){.vals{grid-template-columns:repeat(4,1fr)}}
.val{padding-top:var(--s-3); border-top:2px solid var(--school-green)}
.val h4{font-family:var(--display); font-size:var(--t-lg); color:var(--forest); margin:0 0 var(--s-2)}
.val p{font-size:var(--t-sm); color:var(--ink-soft); margin:0; line-height:1.55}

/* Curriculum areas — compact definition rows */
.areas{list-style:none; padding:0; margin:var(--s-6) 0 0; display:grid; gap:var(--s-3)}
.areas li{display:grid; gap:var(--s-1); padding:var(--s-4); background:var(--white);
  border:1px solid var(--sand-deep); border-radius:var(--radius)}
@media(min-width:760px){
  .areas li{grid-template-columns:11rem 1fr; gap:var(--s-4); align-items:baseline}
}
.areas b{font-family:var(--display); font-size:var(--t-base); color:var(--forest)}
.areas span{font-size:var(--t-sm); color:var(--ink-soft); line-height:1.55}

/* Sub-heading that reads at section scale but nests correctly as h3 */
.h2-look{font-family:var(--display); font-size:var(--t-3xl); font-weight:600; color:var(--forest);
  margin:0 0 var(--s-4); line-height:1.15; letter-spacing:-.01em}
/* Supporting prose inside a statement block */
.statement-rest{margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--sand)}
.statement-rest p{font-family:var(--body); font-size:var(--t-base); line-height:1.65;
  color:var(--ink); margin:0; max-width:70ch}

/* ============================================================
   CONTACT: form and details card as equal-height, equal-width panels
   ============================================================ */
.contact-grid{display:grid; gap:var(--s-5); align-items:stretch}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1fr; gap:var(--s-6)}}
.contact-grid > *{display:flex; flex-direction:column; min-width:0}

/* left panel: the form */
.contact-grid .cform{margin-top:0; flex:1; display:flex; flex-direction:column}
.contact-grid .cform > form{flex:1 0 auto}
.contact-grid .cform .privacy{margin-top:auto; padding-top:var(--s-4)}

/* right panel: the details card */
.contact-grid .cinfo{position:static; flex:1; display:flex; flex-direction:column}
.contact-grid .cinfo-rows{flex:1; display:flex; flex-direction:column; justify-content:center}
.contact-grid .cinfo-acts{margin-top:auto}

/* keep the form's field grid intact inside the flex column */
.contact-grid .cform .fields{display:grid; gap:var(--s-4)}
@media(min-width:700px){
  .contact-grid .cform .fields{grid-template-columns:1fr 1fr}
  .contact-grid .cform .fields .full{grid-column:1 / -1}
}

/* ============================================================
   SUMMER CAMP
   ============================================================ */
.camp-facts{display:grid; gap:var(--s-4); margin-top:var(--s-6)}
@media(min-width:700px){.camp-facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.camp-facts{grid-template-columns:repeat(4,1fr); gap:var(--s-5)}}
.camp-fact{background:var(--white); border:1px solid var(--sand-deep); border-top:3px solid var(--school-green);
  border-radius:var(--radius); padding:var(--s-5)}
.camp-fact b{display:block; font-family:var(--display); font-size:var(--t-2xl); color:var(--forest);
  line-height:1.1; margin-bottom:var(--s-2)}
.camp-fact span{font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); display:block}
.camp-fact em{display:block; font-style:normal; font-size:var(--t-sm); color:var(--ink-soft); margin-top:var(--s-2)}

/* Weekly themes */
.weeks{width:100%; border-collapse:collapse; margin-top:var(--s-6); font-size:var(--t-sm)}
.weeks caption{text-align:left; font-family:var(--display); font-size:var(--t-xl); color:var(--forest);
  margin-bottom:var(--s-4)}
.weeks th,.weeks td{text-align:left; padding:var(--s-3) var(--s-2); border-bottom:1px solid var(--sand)}
.weeks thead th{font-family:var(--body); font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:2px solid var(--sand-deep); white-space:nowrap}
.weeks tbody th{font-family:var(--display); font-size:var(--t-base); color:var(--forest); font-weight:600}
.weeks td.when{white-space:nowrap; color:var(--ink-soft)}
.weeks td.num{text-align:right; font-family:var(--display); font-weight:600; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.weeks tfoot th,.weeks tfoot td{border-top:2px solid var(--sand-deep); border-bottom:0;
  padding-top:var(--s-4); font-weight:700}
.weeks tfoot th{font-family:var(--body); color:var(--forest)}
@media(max-width:620px){
  .weeks thead{position:absolute; left:-9999px}
  .weeks tbody tr,.weeks tfoot tr{display:grid; grid-template-columns:1fr auto auto; gap:var(--s-2) var(--s-3);
    padding:var(--s-3) 0; border-bottom:1px solid var(--sand); align-items:baseline}
  .weeks tbody th{grid-column:1 / -1; padding:0}
  .weeks td{border:0; padding:0}
  .weeks td.when{grid-column:1}
  .weeks td.num::before{content:attr(data-lbl) "\00a0"; font-family:var(--body); font-weight:400;
    font-size:var(--t-xs); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em}
}

/* Downloadable original documents */
.docs{display:grid; gap:var(--s-5); margin-top:var(--s-6)}
@media(min-width:820px){.docs{grid-template-columns:1fr 1fr}}
.doc{background:var(--white); border:1px solid var(--sand-deep); border-radius:var(--radius-lg);
  padding:var(--s-5)}
.doc img{width:100%; height:auto; border:1px solid var(--sand); border-radius:var(--radius); display:block}
.doc h3{font-family:var(--display); font-size:var(--t-lg); color:var(--forest); margin:var(--s-4) 0 var(--s-2)}
.doc p{font-size:var(--t-sm); color:var(--ink-soft); margin:0 0 var(--s-4)}

/* Four-step flow: 2 x 2 rather than 3 + 1 */
@media(min-width:820px){
  .steps.steps--2up{grid-template-columns:1fr 1fr}
}

/* Contact form status message */
.form-status{grid-column:1 / -1; margin:0; font-size:var(--t-sm); line-height:1.55; min-height:1px}
.form-status[data-state="error"]{color:var(--clay); font-weight:700}
.form-status[data-state="ok"]{color:var(--forest)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--clay)}

/* Payment plans: stated, not itemised */
.plan-note{background:var(--sand); border-left:3px solid var(--school-green);
  border-radius:var(--radius); padding:var(--s-5); margin-top:var(--s-5)}
.plan-note p{margin:0; font-size:var(--t-sm); color:var(--ink); line-height:1.6; max-width:70ch}
.plan-note b{font-family:var(--display); font-size:var(--t-lg); color:var(--forest); display:block;
  margin-bottom:var(--s-2); font-weight:600}

/* ============================================================
   HORIZONTAL PHOTO CAROUSEL
   Native horizontal scrolling with snap points, plus arrow buttons.
   Scroll works without JS; the buttons are an enhancement.
   ============================================================ */
.hcar{margin-top:var(--s-7)}
.hcar:first-of-type{margin-top:var(--s-6)}
.hcar-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-4);
  flex-wrap:wrap; margin-bottom:var(--s-4); padding-bottom:var(--s-3);
  border-bottom:1px solid var(--sand-deep)}
.hcar-head h3{font-family:var(--display); font-size:var(--t-2xl); color:var(--forest); margin:0;
  line-height:1.15}
.hcar-head p{font-size:var(--t-sm); color:var(--ink-soft); margin:var(--s-2) 0 0; max-width:60ch}
.hcar-ctrls{display:flex; gap:var(--s-2); flex:none}
.hcar-btn{background:var(--cream); border:2px solid var(--forest); color:var(--forest); cursor:pointer;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  transition:background var(--dur), color var(--dur), opacity var(--dur)}
.hcar-btn:hover:not(:disabled){background:var(--forest); color:var(--cream)}
.hcar-btn:disabled{opacity:.32; cursor:default}
.hcar-btn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}

.hcar-track{display:flex; gap:var(--s-4); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding-bottom:var(--s-3); -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--sand-deep) transparent}
.hcar-track::-webkit-scrollbar{height:6px}
.hcar-track::-webkit-scrollbar-thumb{background:var(--sand-deep); border-radius:3px}
.hcar-track::-webkit-scrollbar-track{background:transparent}
.hcar-track:focus-visible{outline:3px solid var(--clay); outline-offset:4px; border-radius:4px}
.hcar-track > figure{flex:0 0 auto; width:clamp(250px, 74vw, 380px); margin:0; scroll-snap-align:start}
@media(min-width:900px){.hcar-track > figure{width:clamp(320px, 32vw, 420px)}}
.hcar-track img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius-lg);
  display:block; background:var(--sand)}
.hcar-track figcaption{font-size:var(--t-sm); color:var(--ink-soft); margin-top:var(--s-3);
  line-height:1.5}
@media (prefers-reduced-motion: reduce){.hcar-track{scroll-behavior:auto}}

/* Awaiting-photos slot */
.hcar-empty{flex:0 0 auto; width:clamp(250px,74vw,380px); aspect-ratio:3/2; border-radius:var(--radius-lg);
  border:2px dashed var(--sand-deep); background:var(--sand); display:grid; place-items:center;
  text-align:center; padding:var(--s-5); scroll-snap-align:start}
@media(min-width:900px){.hcar-empty{width:clamp(320px,32vw,420px)}}
.hcar-empty span{font-family:var(--body); font-size:var(--t-xs); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.6}

/* Portrait originals in a 3:2 carousel slot: anchor the crop higher so the
   building and equipment stay in frame instead of being cut off. */
.hcar-track img.portrait{object-position:center 38%}

/* ============================================================
   OUR SCHOOL HERO
   Same full-bleed banner geometry as every other page hero, so the
   header reads consistently across the site. The only difference is
   the crop anchor: object-position is pinned to the bottom, because
   this photograph has open sky above the building — so whatever the
   band trims vertically comes off the sky, never off the school.
   ============================================================ */
.lp-hero--open .veil{background:
  linear-gradient(180deg, rgba(21,40,31,.58) 0%, rgba(21,40,31,.26) 42%, rgba(21,40,31,.14) 68%,
                          rgba(21,40,31,.34) 100%)}
/* 92% not 100%: a pure bottom anchor spends the crop on parking lot and
   clips the roof ridge on ultrawide screens. */
.lp-hero.lp-hero--open > picture img{object-position:center 92%}
.lp-hero--open .lp-hero-in{padding:var(--s-8) 0}
.lp-hero--open .hero-panel{
  background:rgba(21,40,31,.82);
  border-left:3px solid var(--school-green);
  border-radius:var(--radius-lg);
  padding:var(--s-6);
  max-width:38rem;
  backdrop-filter:blur(2px);
  box-shadow:0 10px 40px rgba(21,40,31,.28);
}
.lp-hero--open .hero-panel h1{margin-bottom:var(--s-5)}
@supports not (backdrop-filter:blur(2px)){
  .lp-hero--open .hero-panel{background:rgba(21,40,31,.90)}
}

/* Ultrawide: a 340-460px band reads as a thin strip on a very wide monitor,
   and the extreme box ratio starts eating into hero subjects. Applied to
   every hero so they stay consistent with one another. */
@media(min-width:1800px){
  .lp-hero{min-height:clamp(500px,16vw,620px)}
}


/* ============ MAPS APP CHOOSER (Get directions, iOS only) ============ */
.mapschoice{position:fixed; inset:0; z-index:200; display:none}
.mapschoice[data-open="true"]{display:block}
.mapschoice-back{position:absolute; inset:0; background:rgba(31,58,46,.55)}
.mapschoice-panel{position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(28rem, 100%); background:var(--cream); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--s-6) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  box-shadow:var(--shadow); text-align:center}
@media(min-width:640px){
  .mapschoice-panel{top:50%; bottom:auto; transform:translate(-50%,-50%);
    border-radius:var(--radius-lg)}
}
.mapschoice-panel h2{font-family:var(--display); font-size:var(--t-2xl); color:var(--forest); margin:0}
.mapschoice-panel p{font-size:var(--t-sm); color:var(--ink-soft); margin:var(--s-2) 0 var(--s-5)}
.mapschoice-acts{display:grid; gap:var(--s-3)}
.mapschoice-acts .btn{width:100%; justify-content:center; min-height:48px}
.mapschoice-cancel{margin-top:var(--s-4); background:none; border:0; color:var(--ink-soft);
  font-family:var(--body); font-size:var(--t-sm); font-weight:600; cursor:pointer;
  min-height:44px; padding:0 var(--s-4)}
.mapschoice-cancel:hover{color:var(--forest)}

/* ============ LIVE SOCIAL FEED BAND ============
   Consent-gated: no Meta code loads until the visitor asks for it. */
.socfeed{padding:var(--s-7) 0; background:var(--sand); border-top:1px solid var(--sand-deep)}

/* Footer variant: sits inside .ftr > .wrap, below the footer columns. */
.socfeed--ftr{padding:var(--s-6) 0 0; background:transparent; border-top:0}
.socfeed-head{max-width:60ch; margin-bottom:var(--s-5)}
.socfeed--ftr .socfeed-head{margin-bottom:var(--s-4)}
.socfeed-head h2{margin:0 0 var(--s-2)}
.socfeed--ftr .socfeed-head h2{color:var(--white); font-size:var(--t-xl); margin-bottom:var(--s-1)}
.socfeed--ftr .socfeed-head p,
.socfeed--ftr .socfeed-note{color:rgba(255,255,255,.72)}
.socfeed--ftr .socfeed-net{color:var(--white)}
.socfeed--ftr .eyebrow{color:var(--leaf)}

.socfeed-grid{display:grid; gap:var(--s-5)}
@media(min-width:820px){.socfeed-grid{grid-template-columns:1fr 1fr}}

.socfeed-panel{background:var(--cream); border:1px solid var(--sand-deep);
  border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column}
.socfeed--ftr .socfeed-panel{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}

.socfeed-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--sand-deep)}
.socfeed--ftr .socfeed-bar{border-bottom-color:rgba(255,255,255,.16)}
.socfeed-net{display:inline-flex; align-items:center; gap:var(--s-2);
  font-weight:700; font-size:var(--t-sm); color:var(--forest)}
.socfeed-net svg{width:20px; height:20px; flex:0 0 20px}
.socfeed-bar a{font-size:var(--t-sm); font-weight:600; white-space:nowrap}
.socfeed--ftr .socfeed-bar a{color:var(--leaf)}

.socfeed-host{padding:var(--s-3)}
.socfeed-host iframe{width:100%; border:0; display:block; border-radius:var(--radius)}

.socfeed-fallback{padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3);
  align-items:flex-start}
.socfeed-fallback p{margin:0; font-size:var(--t-sm); color:var(--ink-soft)}
.socfeed--ftr .socfeed-fallback p{color:rgba(255,255,255,.78)}
.socfeed-fallback .btn{width:100%; justify-content:center; min-height:48px}
@media(min-width:520px){
  .socfeed-fallback{flex-direction:row; flex-wrap:wrap; align-items:center}
  .socfeed-fallback p{flex:1 1 100%}
  .socfeed-fallback .btn{width:auto}
}
.socfeed-panel[data-loaded="true"] .socfeed-fallback{display:none}
.socfeed-note{margin:var(--s-5) auto 0; text-align:center; font-size:var(--t-xs); color:var(--ink-soft); max-width:70ch}

.socfeed-ig{list-style:none; margin:0; padding:0 0 var(--s-2); display:flex;
  gap:var(--s-3); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch}
.socfeed-ig li{flex:0 0 clamp(250px, 76vw, 320px); scroll-snap-align:start}
.socfeed-ig iframe{width:100%; height:560px; border:0; display:block;
  border-radius:var(--radius); background:var(--cream)}
.socfeed-ig:focus-visible{outline:3px solid var(--clay); outline-offset:3px; border-radius:var(--radius)}
@media (prefers-reduced-motion: reduce){.socfeed-ig{scroll-behavior:auto}}

.areas-note{background:var(--sand); border-left:3px solid var(--leaf);
  padding:var(--s-4) var(--s-5); border-radius:0 var(--radius) var(--radius) 0;
  font-size:var(--t-sm); margin-top:var(--s-4)}

/* ---------- Single-photo looping slideshow ---------- */
.slideshow{margin:0}
.slideshow-frame{position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--sand)}
.slideshow-slide{margin:0}
.slideshow-slide img{width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover}
@media(min-width:900px){
  /* give the room galleries more presence beside the text column */
  .split .slideshow{width:100%}
  .slideshow-slide img{aspect-ratio:4/3}
}
@media(min-width:1200px){.slideshow-slide img{aspect-ratio:3/2}}
.slideshow-slide figcaption{padding:var(--s-3) var(--s-4); font-size:var(--t-sm);
  color:var(--ink-soft); background:var(--cream)}
/* Without JS every photo stays visible and readable, stacked. */
.slideshow:not([data-ready]) .slideshow-btn,
.slideshow:not([data-ready]) .slideshow-count{display:none}
.slideshow:not([data-ready]) .slideshow-slide + .slideshow-slide{margin-top:var(--s-3)}

.slideshow-btn{position:absolute; top:38%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--forest);
  display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:background var(--dur)}
.slideshow-btn:hover{background:#fff}
.slideshow-btn:focus-visible{outline:3px solid var(--clay); outline-offset:2px}
.slideshow-btn svg{width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.slideshow-prev{left:var(--s-3)}
.slideshow-next{right:var(--s-3)}
.slideshow-count{position:absolute; right:var(--s-3); bottom:calc(var(--s-3) + 3.1rem);
  margin:0; padding:.22rem .6rem; border-radius:99px; font-size:var(--t-xs); font-weight:700;
  background:rgba(31,58,46,.72); color:#fff}
.slideshow:focus-visible{outline:3px solid var(--clay); outline-offset:4px; border-radius:var(--radius-lg)}
@media(min-width:900px){.slideshow-btn{width:48px; height:48px}}

/* Photo-tour groups that scroll sideways */
.grp-scroll .hcar-track{gap:var(--s-3)}
.grp-scroll .hcar-track figure{flex:0 0 78%}
@media(min-width:700px){.grp-scroll .hcar-track figure{flex:0 0 360px}}
.grp-pending{font-size:var(--t-sm); color:var(--ink-soft); font-style:italic;
  padding:var(--s-5); background:var(--sand); border-radius:var(--radius)}

/* ---------- Footer: follow row + watermark ---------- */
.sec-tight{padding-top:var(--s-5); padding-bottom:var(--s-5)}

/* Follow icons: one horizontal row, centred, evenly spaced.
   Overrides the .ftr ul grid rule that otherwise stacks them. */
.ftr .socfeed-follow,
.socfeed-follow{list-style:none; margin:var(--s-5) auto 0; padding:0;
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:var(--s-3);
  justify-content:center; align-items:stretch; max-width:44rem}
.socfeed-follow li{flex:1 1 0; min-width:0}
.socfeed-follow .soc{width:100%; justify-content:center; white-space:nowrap}
@media(max-width:520px){
  .socfeed-follow{gap:var(--s-2)}
  .socfeed-follow .soc{padding:.6rem .5rem; font-size:var(--t-xs)}
  .socfeed-follow .soc svg{width:15px; height:15px}
}

/* Full-colour mark, sitting just above the legal bar */
.ftr-mark{margin:var(--s-6) 0 var(--s-5); text-align:center}
.ftr-mark img{width:180px; height:auto; margin:0 auto; display:block}
@media(min-width:700px){.ftr-mark img{width:215px}}


/* The --open hero uses a light veil because it carries its own dark panel.
   Our School is framed like the other headers, so give it the standard
   forest veil. Two classes here beats the single-class --open rule. */
.lp-hero--open.lp-hero--center .veil{background:
  linear-gradient(180deg, rgba(21,40,31,.72) 0%, rgba(21,40,31,.60) 40%, rgba(21,40,31,.92) 100%)}


/* ===== UNIFIED HERO TYPE =====
   One eyebrow / h1 / lede / button treatment shared by the video hero on the
   homepage and the image heroes on every interior page, so the header block
   reads identically site-wide. */
.vhero .eyebrow,
.lp-hero .eyebrow{
  color:var(--school-green-lt);
  font-family:var(--body);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 var(--s-3);
}
.vhero h1,
.lp-hero h1{
  font-family:var(--display);
  font-size:var(--t-4xl);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--white);
  max-width:20ch;
  margin:0 0 var(--s-4);
  text-wrap:balance;
}
.vhero .lede,
.lp-hero .lede{
  font-family:var(--body);
  font-size:var(--t-lg);
  line-height:1.55;
  color:rgba(255,255,255,.93);
  max-width:48ch;
  margin:0 0 var(--s-5);
}
.vhero .btn-row,
.lp-hero .btn-row{display:flex; flex-wrap:wrap; gap:var(--s-3); margin:0}
.vhero .btn-row .btn,
.lp-hero .btn-row .btn{min-height:48px; font-size:var(--t-sm); font-weight:700}
@media(max-width:479px){
  .vhero .btn-row .btn,
  .lp-hero .btn-row .btn{flex:1 1 100%; justify-content:center}
}
/* the panel variant is retired; keep the selector inert if any markup lingers */
.lp-hero .hero-panel{background:none; padding:0; border-radius:0; box-shadow:none}

/* Accessible visually-hidden utility. Keeps slideshow announcements available
   to screen readers without displaying the generated "Photo x of y" text. */
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Downloadable school document previews */
.doc-preview{margin-top:var(--s-6)}
.doc-preview figure{margin:0}
.doc-preview figcaption{font-size:var(--t-xs); color:var(--ink-soft); margin-top:var(--s-3); line-height:1.5}
.doc-preview--portrait img{max-width:720px; margin-inline:auto; box-shadow:0 10px 30px rgba(31,58,46,.10)}
.doc-preview .cal-actions{justify-content:flex-start}

/* Keep hidden anti-spam fields out of the visual layout. */
.hp-field{position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important}
button[aria-busy="true"]{opacity:.72; cursor:wait}


/* Document actions retained without embedding the full pricing PDF on the page. */
.doc-actions-only{
  margin-top:var(--s-5);
  padding-top:var(--s-5);
  border-top:1px solid var(--sand-deep);
}




/* Version 1.3: final founding-story layout */
.founding-story{
  background:var(--sand, #f7f2e8);
}
.founding-story__intro{
  max-width:760px;
  margin:0 auto var(--s-8);
  text-align:center;
}
.founding-story__intro h2{
  margin:.25rem 0 .8rem;
  color:var(--green);
  font-family:var(--serif);
  font-size:clamp(2.1rem,4vw,3.4rem);
}
.founding-story__intro p:last-child{
  margin:0 auto;
  color:var(--ink-soft);
  font-size:clamp(1rem,1.8vw,1.18rem);
  line-height:1.7;
}
.founding-story__list{
  display:grid;
  gap:var(--s-5);
}
.founding-story__card{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:var(--s-5);
  align-items:center;
  padding:1rem;
  border:1.5px solid var(--green);
  border-radius:28px;
  background:rgba(255,255,255,.38);
  box-shadow:0 12px 30px rgba(31,58,46,.05);
}
.founding-story__card--reverse{
  grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);
}
.founding-story__card--reverse .founding-story__media{
  order:2;
}
.founding-story__card--reverse .founding-story__content{
  order:1;
}
.founding-story__media{
  overflow:hidden;
  border-radius:20px;
  aspect-ratio:16/9;
  background:#eee8dc;
}
.founding-story__media picture,
.founding-story__media img{
  display:block;
  width:100%;
  height:100%;
}
.founding-story__media img{
  object-fit:cover;
  object-position:center;
}
.founding-story__media--ribbon img{
  object-position:center 17%;
}
.founding-story__content{
  padding:clamp(.4rem,1.5vw,1.25rem);
}
.founding-story__sprout{
  display:block;
  margin-bottom:.15rem;
  color:var(--lime, #7fbb2b);
  font-size:1.55rem;
  line-height:1;
}
.founding-story__content h3{
  position:relative;
  margin:.1rem 0 1.3rem;
  color:var(--green);
  font-family:var(--serif);
  font-size:clamp(1.65rem,3vw,2.45rem);
  line-height:1.12;
}
.founding-story__content h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.65rem;
  width:48px;
  height:2px;
  border-radius:999px;
  background:var(--lime, #7fbb2b);
}
.founding-story__content p{
  margin:.8rem 0 0;
  color:var(--ink);
  line-height:1.7;
}
@media (max-width:860px){
  .founding-story__card,
  .founding-story__card--reverse{
    grid-template-columns:1fr;
  }
  .founding-story__card--reverse .founding-story__media,
  .founding-story__card--reverse .founding-story__content{
    order:initial;
  }
}
@media (max-width:560px){
  .founding-story__card{
    padding:.75rem;
    border-radius:22px;
  }
  .founding-story__media{
    border-radius:16px;
    aspect-ratio:4/3;
  }
  .founding-story__media--ribbon img{
    object-position:center 14%;
  }
  .founding-story__content{
    padding:.35rem .3rem .75rem;
  }
}

/* v1.3.1 uses page-local critical CSS in our-school.html to guarantee the approved two-column layout. */