/* ============================================================
   IQRA INTERNATIONAL SCHOOL — stylesheet
   Colour system is derived entirely from images/logo.png:
     #0A3F0B leaves/trunk  #51340C roots/book  #519FC6 stream
     #678638 sapling       #EAA116 sun
   Type is Outfit (display) + Plus Jakarta Sans (body); radii, spacing and
   card treatment follow a flat, tight 10px-radius system.

   1. Tokens          5. Scene 2 — Learning   9. Parent voices
   2. Base / Reset    6. Scene 3 — Mosque    10. Dates & events
   3. Chrome (nav)    7. Scene 4 — Growth    11. Campus gallery
   4. Scene 1 — Hero  8. Programs / CTA / Footer
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* ----------------------------------------------------------------
     BRAND SOURCE — sampled straight out of images/logo.png.
     Every scale below is a lightness ramp on one of these five hues,
     so nothing on the page can drift away from the mark.
     ---------------------------------------------------------------- */
  --logo-green:#0A3F0B;   /* leaves, trunk, children, birds  (53% of the mark) */
  --logo-bark:#51340C;    /* roots and the open book         (22%) */
  --logo-sky:#519FC6;     /* the stream                       (4%) */
  --logo-olive:#678638;   /* the young sapling                (3%) */
  --logo-gold:#EAA116;    /* the sun                          (2%) */

  /* Greens — hue 122, the logo leaf hue. 900 IS the logo green. */
  --green-950:#052306;
  --green-900:#0A3F0B;
  --green-800:#0F5210;
  --green-700:#176E18;
  --green-600:#1C871F;   /* holds white at 4.6:1 as the primary-button gradient start */
  --green-500:#33A336;
  --green-400:#56BD58;
  --green-300:#97D399;
  --green-100:#D7EFD8;
  --green-50:#F0F9F0;

  /* Earth — hue 35, the logo root/bark hue. 700 IS the logo bark. */
  --bark-900:#291C0A;
  --bark-700:#51340C;
  --bark-500:#875A1C;
  --sand-600:#CFA259;
  --sand-400:#E2C598;
  --sand-200:#F1E5D0;
  --beige:#FAF5EB;
  --cream:#FFFDFA;
  --clay:#AE6729;

  /* Water — hue 200, the logo stream hue. 500 IS the logo blue. */
  --sky-700:#256E93;
  --sky-600:#348BB7;
  --sky-500:#519FC6;
  --sky-400:#7FC0E1;
  --sky-300:#A4D2EA;
  --sky-200:#C4E3F3;
  --sky-100:#E5F3FB;

  /* Sun — hue 39. --sun IS the logo gold. */
  --sun:#EAA116;
  --sun-bright:#F7BA45;
  --sun-soft:#F7DEAB;

  /* Sapling — hue 80, the logo olive.
     --lime is this hue pushed to full energy. It is the punchy primary accent
     the layout leans on, and it sits 3 degrees off the logo sapling, so the
     brand hue is doing the work rather than a borrowed one. */
  --olive-600:#678638;
  --olive-400:#8EB356;
  --olive-100:#E8F0DB;
  --lime:#7DB614;
  --lime-dark:#4E6E0C;   /* 5.3:1 on --lime-soft: it carries small label text */
  --lime-soft:#EDF6D9;

  /* Accent set for the photo-led sections — five logo hues, no others.
     These sit behind white copy, so bark and blue run deeper than the raw
     logo values above: at the logo's own lightness, 14px white-at-90% body
     text on them lands near 3.9:1. Deepened, every tile clears AA. The
     untouched logo values stay available as --logo-sky / --logo-bark. */
  --acc-green:#196B1B;
  --acc-bark:#9A5919;
  --acc-gold:#EAA116;
  --acc-blue:#327495;
  --acc-olive:#678638;
  /* Legacy aliases so older markup keeps resolving. */
  --acc-orange:var(--acc-bark);
  --acc-yellow:var(--acc-gold);
  --acc-violet:var(--acc-olive);
  --ink-deep:#291B0A;

  --ink:#0F2410;
  --ink-soft:#3E543B;
  --muted:#5E725A;   /* darkened past the old #6a8177, which sat under AA on --beige */
  --line:rgba(10,63,11,.14);

  --shadow-sm:0 1px 3px rgba(10,63,11,.06);
  --shadow-md:0 6px 20px -8px rgba(10,63,11,.14);
  --shadow-lg:0 16px 40px -18px rgba(10,63,11,.2);
  --shadow-glow:0 18px 40px -18px rgba(35,139,37,.5);

  /* Tight, flat radii. The soft 28/40px frames read editorial; 10px is the
     crisper, more structured feel this layout is after. */
  --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-full:999px;

  --font-display:"Outfit", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap:1240px;
  --pad:clamp(20px, 5vw, 56px);
  --ease-out:cubic-bezier(.22,.9,.28,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base / Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html:not(.no-smooth){scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.12;margin:0;letter-spacing:-.015em}
p{margin:0}
:focus-visible{outline:3px solid var(--green-500);outline-offset:3px;border-radius:6px}
::selection{background:var(--green-300);color:var(--green-900)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(64px,8vw,104px)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.74rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--lime-dark);background:var(--lime-soft);
  border:0;
  padding:9px 18px;border-radius:var(--r-sm);
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--lime-dark)}
.h-xl{font-size:clamp(2.1rem,4.6vw,3.25rem)}
.h-lg{font-size:clamp(1.75rem,3.2vw,2.5rem)}
.h-md{font-size:clamp(1.25rem,1.9vw,1.6rem)}
.lede{font-size:clamp(.97rem,1.15vw,1.06rem);color:var(--ink-soft);max-width:58ch}
.italic-accent{font-family:var(--font-display);font-style:normal;font-weight:700;color:var(--lime-dark)}

/* Buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:var(--r-full);
  font-family:var(--font-display);
  font-weight:600;font-size:.94rem;letter-spacing:.01em;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform .35s var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--lime);color:var(--green-950)}
.btn-primary:hover{background:var(--lime-dark);color:#fff}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--green-900);border:1.5px solid var(--green-100)}
.btn-ghost:hover{background:var(--green-900);border-color:var(--green-900);color:#fff}
/* Starts at --sky-700 rather than --sky-600: white at 15px bold needs 4.5:1 and
   --sky-600 only reaches 3.8:1, so the lighter stop would fail at the gradient's
   top-left corner where the label begins. */
.btn-sky{background:linear-gradient(135deg,var(--sky-700),#1E5571);color:#fff;box-shadow:0 18px 40px -18px rgba(37,110,147,.6)}
.btn-sky:hover{box-shadow:0 24px 44px -18px rgba(37,110,147,.75)}
.btn-sky:hover svg{transform:translateX(4px)}
.btn-outline-light{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.btn-outline-light:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* Reveal system */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-40px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.rv-r{opacity:0;transform:translateX(40px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out)}
.rv-s{opacity:0;transform:scale(.92);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out)}
.rv-l.in,.rv-r.in,.rv-s.in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.10s}[data-d="2"]{transition-delay:.20s}
[data-d="3"]{transition-delay:.30s}[data-d="4"]{transition-delay:.40s}
[data-d="5"]{transition-delay:.52s}[data-d="6"]{transition-delay:.64s}

/* ============================================================
   PHOTO SYSTEM
   Every <img> here is a real slot. Drop your own file at the path
   in its src and it takes over; until then the onerror handler
   swaps in a placeholder from images/ so nothing looks broken.
   ============================================================ */

/* A photo sitting on a coloured organic shape (the Edukids treatment). */
.photoshape{position:relative;margin:0;isolation:isolate}
.photoshape .ps-blob{
  position:absolute;inset:12% -6% -4% 6%;z-index:0;
  background:var(--tone,var(--green-300));
  border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;
  animation:blobMorph 14s var(--ease-soft) infinite;
}
.photoshape img{
  position:relative;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:center top;display:block;
}
@keyframes blobMorph{
  0%,100%{border-radius:46% 54% 42% 58% / 52% 44% 56% 48%}
  50%{border-radius:56% 44% 58% 42% / 44% 56% 44% 56%}
}
/* ---------- Hand-drawn doodle accents ---------- */
.doodle{position:absolute;pointer-events:none;z-index:2;color:var(--acc-orange);opacity:.9}
.doodle svg{width:100%;height:auto;overflow:visible}
.doodle.float{animation:bob 6.5s var(--ease-soft) infinite}

/* ---------- Dark stat band (right under the hero) ---------- */
.band{position:relative;z-index:20;margin-top:calc(clamp(40px,6vw,80px) * -1)}
.band-inner{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-radius:var(--r-xl);background:var(--ink-deep);
  box-shadow:0 40px 80px -40px rgba(41,27,10,.65);
}
.band-item{display:flex;align-items:flex-start;gap:16px;padding:30px clamp(20px,2.4vw,34px)}
.band-item+.band-item{border-left:1px solid rgba(255,255,255,.1)}
.band-item i{width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center}
.band-item i svg{width:23px;height:23px}
.band-item b{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,2.8vw,2.3rem);color:#fff;line-height:1}
.band-item span{display:block;margin-top:6px;font-size:.86rem;color:rgba(255,255,255,.62);line-height:1.45}
/* Decorative only — nothing sits on top of these, so they can carry the logo's
   blue at its exact sampled value instead of the deepened --acc-blue. */
.band .doodle{right:2%;top:14%;width:74px;color:var(--sky-500)}
@media (max-width:760px){
  .band-item+.band-item{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .band .doodle{display:none}
}

/* ---------- Colour photo tiles (3-up) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.tile{
  --shot:56%;                       /* how much of the card the photo occupies */
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--tone,var(--acc-green));min-height:clamp(340px,38vw,430px);
  display:flex;flex-direction:column;justify-content:flex-start;
  box-shadow:var(--shadow-md);transition:transform .5s var(--ease-out),box-shadow .5s;
}
.tile:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.tile h3{position:relative;z-index:4;margin:26px 26px 0;color:#fff;font-size:clamp(1.25rem,1.9vw,1.6rem);max-width:11ch;text-shadow:0 2px 12px rgba(0,0,0,.22)}
.tile p{position:relative;z-index:4;margin:9px 26px 0;color:rgba(255,255,255,.9);font-size:.88rem;line-height:1.5;max-width:26ch}
.tile img{
  position:absolute;z-index:2;left:0;right:0;bottom:0;width:100%;height:var(--shot);
  object-fit:cover;object-position:center top;
}
/* Softens the hard line where the colour meets the photograph. */
.tile::after{
  content:"";position:absolute;z-index:3;left:0;right:0;bottom:var(--shot);
  height:64px;pointer-events:none;
  background:linear-gradient(180deg,var(--tone,var(--acc-green)),transparent);
}
.tile .tile-doodle{position:absolute;z-index:1;inset:auto 0 0 0;height:var(--shot);opacity:.35;color:#fff}
.tile .tile-doodle svg{width:100%;height:100%}

/* ---------- Avatar row ---------- */
.avatars{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(18px,2.4vw,32px)}
.avatar{text-align:center}
.avatar-wrap{position:relative;width:min(190px,100%);margin-inline:auto;aspect-ratio:1}
.avatar-wrap .arc{
  position:absolute;inset:0;border-radius:50%;
  border:12px solid var(--tone,var(--acc-yellow));
  border-right-color:transparent;border-bottom-color:transparent;
  transform:rotate(-45deg);transition:transform .6s var(--ease-out);
}
.avatar:hover .arc{transform:rotate(-405deg)}
.avatar-wrap img{
  position:absolute;inset:11%;width:78%;height:78%;border-radius:50%;
  object-fit:cover;background:var(--green-50);box-shadow:var(--shadow-sm);
}
.avatar h3{margin-top:16px;font-size:1.02rem}
.avatar span{display:block;font-size:.83rem;color:var(--muted);margin-top:2px}

/* ---------- Split promo cards ---------- */
.promos{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px}
.promo{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--tone,var(--acc-yellow));padding:32px;
  /* Keeps every line of copy clear of the cut-out photo on the right. */
  padding-right:clamp(160px,47%,300px);
  min-height:clamp(250px,26vw,300px);display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--shadow-md);
}
.promo h3{position:relative;z-index:3;font-size:clamp(1.25rem,2.1vw,1.75rem);max-width:14ch;color:var(--ink-deep)}
.promo p{position:relative;z-index:3;margin-top:10px;font-size:.91rem;line-height:1.55;color:rgba(41,27,10,.76)}
.promo .btn{position:relative;z-index:3;align-self:flex-start;margin-top:22px;background:#fff;color:var(--ink-deep);box-shadow:var(--shadow-sm)}
.promo img{
  position:absolute;right:0;top:0;bottom:0;width:42%;height:100%;
  object-fit:cover;object-position:center;z-index:2;
}
/* Softens the vertical seam where the card colour meets the photograph. */
.promo::after{
  content:"";position:absolute;z-index:2;top:0;bottom:0;left:58%;width:72px;
  background:linear-gradient(90deg,var(--tone,var(--acc-gold)),transparent);
  pointer-events:none;
}
.promo .doodle{left:auto;right:30%;bottom:7%;width:112px;opacity:.22;z-index:1;color:var(--ink-deep)}
@media (max-width:860px){
  .promos{grid-template-columns:1fr}
  .promo{min-height:0}
  .promo .doodle{display:none}
}
@media (max-width:560px){
  /* Side-by-side stops working below this width: the photo becomes a strip
     across the bottom and the copy gets the full card width back. */
  .promo{padding-right:32px;padding-bottom:190px}
  .promo img{left:0;right:0;top:auto;width:100%;height:180px;object-position:center 30%}
  .promo::after{
    z-index:2;left:0;right:0;top:auto;bottom:180px;width:auto;height:60px;
    background:linear-gradient(180deg,var(--tone,var(--acc-gold)),transparent);
  }
}

/* ---------- Empower split (photo + floating stat card) ---------- */
.empower{background:var(--beige);position:relative;overflow:hidden}
.empower-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center}
.empower-art{position:relative;padding-bottom:56px}
.empower-art .photoshape{aspect-ratio:4/5;max-width:400px;margin-inline:auto}
/* The supplied photo is a rectangle, not a cut-out, so it is framed as a card
   and the logo-blue shape sits behind it as a deliberate offset block. */
.empower-art .photoshape img{
  border-radius:var(--r-lg);
  /* The source is a 3:2 landscape being shown in a 4:5 portrait frame, so a
     centre crop cuts the pupil off. She sits left of centre. */
  object-position:22% center;
  box-shadow:var(--shadow-lg);
}
/* Offset up and to the right: that corner is clear of the floating stat card,
   so the block reads as a deliberate accent rather than a stray sliver. */
.empower-art .ps-blob{
  background:var(--sky-500);
  border-radius:var(--r-lg);
  inset:-24px -24px 34% 34%;
  animation:none;
}
.floatstat{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:5;
  width:min(420px,94%);display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:16px;border-radius:22px;background:#fff;box-shadow:var(--shadow-lg);
}
.floatstat div{display:flex;align-items:center;gap:11px}
.floatstat i{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center}
.floatstat i svg{width:17px;height:17px}
.floatstat b{display:block;font-family:var(--font-display);font-size:1.25rem;line-height:1;color:var(--green-800)}
.floatstat span{display:block;font-size:.72rem;color:var(--muted);line-height:1.35;margin-top:3px}
@media (max-width:1000px){.empower-grid{grid-template-columns:1fr}}

/* ---------- Loader ---------- */
#loader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--sky-200),var(--sky-100) 46%,var(--cream));
  transition:opacity .7s ease, visibility .7s;
}
/* pointer-events guards the case where the opacity transition is
   interrupted: the overlay must never keep swallowing clicks. */
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-mark{display:grid;justify-items:center;gap:18px}
.loader-logo{width:112px;height:112px;object-fit:contain;animation:leafPop 1.6s var(--ease-out) infinite alternate}
@keyframes leafPop{from{transform:scale(.9);opacity:.65}to{transform:scale(1);opacity:1}}
.loader-txt{font-family:var(--font-display);font-size:.9rem;letter-spacing:.32em;text-transform:uppercase;color:var(--green-700)}

/* ---------- 3. Chrome: nav + progress vine ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--pad);
  transition:background .45s var(--ease-soft), box-shadow .45s, padding .45s, backdrop-filter .45s;
}
.nav.stuck{background:rgba(255,253,250,.82);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line), 0 10px 30px -22px rgba(10,63,11,.5);padding-block:11px}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:var(--green-900);line-height:1.2}
/* The logo is an illustrative mark with fine roots and birds — it needs room
   to stay legible, so it runs larger than a typical icon-sized brand mark. */
.brand-mark{width:82px;height:82px;flex:none;display:grid;place-items:center;transition:width .45s var(--ease-soft),height .45s var(--ease-soft)}
.brand-mark img{width:100%;height:100%;object-fit:contain}
/* On the dark footer the logo's brown roots vanish, so give it a light tile. */
.footer .brand-mark{width:96px;height:96px;background:#fff;border-radius:22px;padding:9px;box-shadow:0 10px 26px -10px rgba(0,0,0,.55)}
.nav.stuck .brand-mark{width:64px;height:64px}
/* Reclaim nav width before the links are forced to wrap. */
@media (max-width:1180px){.brand-mark{width:64px;height:64px}.brand{font-size:1.05rem}}
@media (max-width:1060px){.nav-cta .btn{padding:11px 18px}}
@media (max-width:560px){.brand-mark{width:60px;height:60px}.nav.stuck .brand-mark{width:52px;height:52px}.footer .brand-mark{width:78px;height:78px}}
.brand small{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--lime-dark);margin-top:1px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  position:relative;padding:9px 12px;border-radius:var(--r-full);
  font-size:.88rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;
  transition:color .3s,background .3s;
}
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;
  background:var(--lime-dark);transform:translateX(-50%);transition:width .35s var(--ease-out);
}
.nav-links a:hover{color:var(--green-800);background:var(--green-50)}
.nav-links a:hover::after,.nav-links a.active::after{width:20px}
.nav-links a.active{color:var(--green-800)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{padding:12px 22px;font-size:.88rem}
.burger{display:none;width:44px;height:44px;border-radius:14px;background:var(--green-50);border:1px solid var(--green-100);place-items:center}
.burger span{display:block;width:19px;height:2px;border-radius:2px;background:var(--green-800);transition:transform .35s var(--ease-out),opacity .25s}
.burger span+span{margin-top:5px}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:0;z-index:890;background:rgba(255,253,250,.97);backdrop-filter:blur(20px);
  display:grid;align-content:center;justify-items:center;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--font-display);font-size:1.75rem;color:var(--green-900);padding:12px 20px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open a:nth-child(1){transition-delay:.06s}.mobile-menu.open a:nth-child(2){transition-delay:.12s}
.mobile-menu.open a:nth-child(3){transition-delay:.18s}.mobile-menu.open a:nth-child(4){transition-delay:.24s}
.mobile-menu.open a:nth-child(5){transition-delay:.30s}.mobile-menu.open a:nth-child(6){transition-delay:.36s}
.mobile-menu.open .btn{transition-delay:.42s;margin-top:18px}

/* Growing-vine scroll progress */
.vine{position:fixed;right:clamp(10px,2vw,26px);top:22vh;height:56vh;width:26px;z-index:800;pointer-events:none;display:grid;justify-items:center}
.vine-track{position:absolute;inset:0 auto 0 50%;transform:translateX(-50%);width:2px;background:linear-gradient(180deg,transparent,var(--green-100) 12%,var(--green-100) 88%,transparent)}
.vine-fill{position:absolute;top:0;left:50%;transform:translateX(-50%);width:3px;border-radius:3px;height:0;background:linear-gradient(180deg,var(--green-400),var(--green-700))}
.vine-bud{position:absolute;top:0;left:50%;width:15px;height:15px;transform:translate(-50%,-50%)}
.vine-bud svg{width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(23,110,24,.4))}
.vine-scene{position:absolute;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#fff;border:2px solid var(--green-100);transition:background .4s,border-color .4s}
.vine-scene.hit{background:var(--green-500);border-color:var(--green-500)}

/* ---------- Ambient nature layers ---------- */
.leaf-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.leaf{position:absolute;top:-8%;opacity:0;will-change:transform}
.leaf svg{width:100%;height:100%}
@keyframes leafFall{
  0%{opacity:0;transform:translate3d(0,-10vh,0) rotate(0deg)}
  8%{opacity:.85}
  50%{transform:translate3d(58px,45vh,0) rotate(180deg)}
  92%{opacity:.7}
  100%{opacity:0;transform:translate3d(-24px,102vh,0) rotate(400deg)}
}
.bird{position:absolute;pointer-events:none;z-index:5}
.bird svg{width:100%;height:100%;overflow:visible}
.bird .wing{transform-origin:center;animation:flap 1.05s ease-in-out infinite}
.bird .wing-b{animation-delay:.14s}
@keyframes flap{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(.34) translateY(-2px)}}
@keyframes flyAcross{
  0%{transform:translate3d(-16vw,0,0) scale(.7);opacity:0}
  10%{opacity:.9}
  50%{transform:translate3d(46vw,-46px,0) scale(1)}
  90%{opacity:.85}
  100%{transform:translate3d(114vw,-14px,0) scale(.75);opacity:0}
}
.cloud{position:absolute;pointer-events:none;opacity:.9;will-change:transform}
@keyframes drift{from{transform:translateX(-14vw)}to{transform:translateX(114vw)}}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sunPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.09);opacity:.8}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:.9;transform:scale(1.15)}}

/* ---------- 4. Scene 1 — Planting the Future ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:150px;padding-bottom:clamp(60px,10vh,110px);
  overflow:hidden;isolation:isolate;
}
.hero-sky{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 82% at 78% -6%, #FDF0D6 0%, rgba(253,240,214,0) 52%),
    linear-gradient(180deg, var(--sky-300) 0%, var(--sky-200) 26%, var(--sky-100) 48%, var(--beige) 80%, var(--cream) 100%);
}
.sun{position:absolute;top:9%;right:9%;width:clamp(110px,15vw,200px);aspect-ratio:1;z-index:1;pointer-events:none}
.sun-core{position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 38% 34%,#FDEFC9,var(--sun));box-shadow:0 0 60px 18px rgba(234,161,22,.35)}
.sun-halo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(234,161,22,.45),rgba(234,161,22,0) 66%);animation:sunPulse 6.5s var(--ease-soft) infinite}
.sun-ray{position:absolute;left:50%;top:50%;width:2px;height:52%;background:linear-gradient(180deg,rgba(234,161,22,.7),transparent);transform-origin:top center;border-radius:2px}
.sunbeam{
  position:absolute;top:-30%;right:2%;width:60%;height:150%;z-index:1;pointer-events:none;
  background:linear-gradient(197deg, rgba(250,232,190,.55) 0%, rgba(250,232,190,0) 58%);
  filter:blur(14px);mix-blend-mode:soft-light;
  animation:sunPulse 9s var(--ease-soft) infinite;
}
.hills{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none}
.hills svg{width:100%;height:auto;min-height:220px}

.hero-inner{position:relative;z-index:10;width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
.hero-copy{max-width:600px}
.hero h1{margin:22px 0 20px;color:var(--green-900)}
.hero h1 .grow{
  position:relative;display:inline-block;color:var(--lime-dark);
  background:linear-gradient(180deg,transparent 78%, var(--lime) 78%);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,38px);margin-top:40px;padding-top:26px;border-top:1px dashed var(--line)}
.hero-meta div{display:grid;gap:2px}
.hero-meta b{font-family:var(--font-display);font-size:1.55rem;color:var(--green-800);line-height:1}
.hero-meta span{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.hero-art{position:relative;z-index:10}
/* Illustrations live inside a rounded, clipped frame so the artwork edge reads
   as a deliberate card rather than a cut-off rectangle. */
.artframe{position:relative;overflow:hidden;border-radius:var(--r-xl)}
.artframe>svg{display:block;width:100%;height:auto;margin-bottom:-1px}
/* Photographs fill the frame on a fixed 3:2 footprint, so a section's height
   never depends on the aspect ratio of whichever crop is dropped in. Anything
   panoramic sets aspect-ratio:auto on the element itself. */
.artframe>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}
.hero-art .stage{
  width:100%;
  /* Still painted: it is what shows behind a photo that has not decoded yet. */
  background:linear-gradient(180deg,#DFEFF9 0%,#E9F5E9 52%,#F0F9F0 100%);
  box-shadow:var(--shadow-lg);
}
.hero-art .stage::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);
}
.scroll-hint{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;
  display:grid;justify-items:center;gap:9px;color:var(--green-700);
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
}
.scroll-hint .mouse{width:24px;height:38px;border:2px solid var(--green-400);border-radius:14px;position:relative}
.scroll-hint .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:3px;background:var(--green-600);transform:translateX(-50%);animation:wheel 1.8s var(--ease-soft) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* Floating glass note cards */
.note{
  position:absolute;z-index:14;display:flex;align-items:center;gap:11px;
  padding:12px 17px;border-radius:var(--r-full);
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow-md);
  font-size:.83rem;font-weight:700;color:var(--green-900);white-space:nowrap;
}
.note i{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--green-50)}
.note i svg{width:16px;height:16px;color:var(--green-600)}
.note-b i{background:var(--sky-100)}
.note-b i svg{color:var(--sky-700)}
.note-a{top:22px;left:-16px;animation:bob 6s var(--ease-soft) infinite}
.note-b{bottom:22px;right:-16px;animation:bob 7.2s var(--ease-soft) .8s infinite}
@media (max-width:860px){.note-a{left:6px;top:12px}.note-b{right:6px;bottom:12px}}

/* ---------- 5. Scene 2 — Learning Begins ---------- */
.learn{background:linear-gradient(180deg,var(--cream) 0%, #FCF8EE 30%, var(--sand-200) 100%);overflow:hidden}
.learn::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(60% 40% at 12% 8%, rgba(247,222,171,.55), transparent 60%),
    radial-gradient(50% 40% at 88% 22%, rgba(196,227,243,.5), transparent 62%);
}
.sec-head{position:relative;z-index:2;display:grid;gap:18px;justify-items:center;text-align:center;max-width:760px;margin-inline:auto;margin-bottom:clamp(42px,6vw,72px)}
.classroom{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}

/* Alphabet blocks */
.block-stage{
  position:relative;padding:38px clamp(16px,3vw,34px) 0;border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.6));
  border:1px solid #fff;box-shadow:var(--shadow-lg);
  perspective:1000px;
}
.block-word-label{
  display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:22px;
  font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--lime-dark);
}
.block-word-label .pill{padding:5px 13px;border-radius:var(--r-full);background:var(--green-50);border:1px solid var(--green-100);transition:opacity .3s}
/* Widths are percentages of the row so all 9 letters of EDUCATION always fit
   on one line — the blocks never reflow to a second row mid-animation. */
.block-row{
  position:relative;z-index:2;
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:1.2%;
  min-height:clamp(44px,8vw,56px);transform-style:preserve-3d;
}
.blk{
  --face:#fff;
  width:min(9.6%,54px);flex:none;aspect-ratio:1;border-radius:clamp(9px,1.2vw,14px);
  display:grid;place-items:center;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:clamp(.9rem,2vw,1.65rem);
  color:var(--green-900);background:var(--face);
  box-shadow:
    inset 0 -6px 0 rgba(0,0,0,.09),
    inset 0 2px 0 rgba(255,255,255,.85),
    0 12px 22px -10px rgba(10,63,11,.4);
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.blk::after{content:"";position:absolute;inset:5px;border-radius:inherit;border:1.5px dashed rgba(10,63,11,.13)}
.blk[hidden]{display:none}
.blk.out{opacity:0;transform:translateY(22px) rotateX(-75deg)}
.blk:nth-child(6n+1){--face:#FDF1D2}
.blk:nth-child(6n+2){--face:#DCF2DC}
.blk:nth-child(6n+3){--face:#DCEDF9}
.blk:nth-child(6n+4){--face:#FBE6CF}
.blk:nth-child(6n+5){--face:#F3EBDA}
.blk:nth-child(6n+6){--face:#E8F0DB}

/* -14.5% resolves against the stage width, lifting the desk so its table-top
   line lands just under the blocks — they read as resting on the wood. */
.desk{position:relative;z-index:1;margin-top:-16.5%}
.desk svg{width:100%;height:auto}
.word-dots{display:flex;justify-content:center;gap:8px;margin:20px 0 0}
.word-dots button{width:9px;height:9px;border-radius:50%;background:var(--sand-400);transition:transform .3s,background .3s}
.word-dots button[aria-current="true"]{background:var(--lime);transform:scale(1.45)}

.learn-copy{display:grid;gap:18px}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-full);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font-size:.83rem;font-weight:600;color:var(--ink-soft);
}
/* Chip, mini, timeline, contact and hero-note icons all inherit their stroke
   from `color`, so the logo hue rotation below is a one-line change per family
   instead of an edit to every inline <svg>. */
.chip svg{width:15px;height:15px;color:var(--green-600)}
.chip:nth-child(2) svg{color:var(--sky-700)}
.mini-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:14px}
.mini{
  padding:20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease-out),box-shadow .4s;
}
.mini:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.mini i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--green-50);margin-bottom:12px}
.mini i svg{width:20px;height:20px;color:var(--green-600)}
.mini:nth-child(even) i{background:var(--sky-100)}
.mini:nth-child(even) i svg{color:var(--sky-700)}
.mini h4{font-size:1.02rem;margin-bottom:4px}
.mini p{font-size:.87rem;color:var(--muted);line-height:1.55}

/* ---------- 6. Scene 3 — The Mosque ---------- */
/* The green arrives fast so the white headline never sits on a light background. */
.faith{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(180deg, var(--sand-200) 0%, #B6D8B6 5%, #2E8F30 11%, #1E7A20 18%, #166318 44%, var(--green-900) 100%);
}
.faith .sec-head h2,.faith .sec-head p{color:#fff}
.faith .eyebrow{background:rgba(5,35,6,.45);border-color:rgba(255,255,255,.34);color:#EEFBEE}
.faith .eyebrow .dot{background:var(--sun);box-shadow:0 0 0 4px rgba(234,161,22,.24)}
.faith-glow{position:absolute;left:50%;top:26%;width:min(900px,110vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle, rgba(247,222,171,.34), rgba(247,222,171,0) 62%);pointer-events:none;animation:sunPulse 11s var(--ease-soft) infinite}
.faith-stars{position:absolute;inset:0;pointer-events:none}
.faith-stars span{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--sky-200);animation:twinkle 4s ease-in-out infinite}
.faith-stars span:nth-child(3n){background:var(--sun-soft)}
.mosque-stage{
  z-index:3;margin-top:clamp(20px,4vw,40px);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.16);
}
/* 3:2, the photograph's own ratio. The scene-3 artwork is a 2.31:1 banner, but
   cropping the photo to that would cut either the crescent moon or the child's
   feet, so the section takes the extra height instead. */
.mosque-stage>img{aspect-ratio:3/2}
.faith-cards{position:relative;z-index:4;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:clamp(38px,5vw,64px)}
.fcard{
  padding:26px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px);box-shadow:0 24px 50px -30px rgba(0,0,0,.6);
  transition:transform .45s var(--ease-out),background .45s;
}
.fcard:hover{transform:translateY(-8px);background:rgba(255,255,255,.16)}
.fcard i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.16);margin-bottom:14px}
.fcard i svg{width:22px;height:22px}
.fcard h3{font-size:1.1rem;color:#fff;margin-bottom:6px}
.fcard p{font-size:.9rem;color:rgba(255,255,255,.8);line-height:1.6}

/* ---------- 7. Scene 4 — Growing Together ---------- */
/* Emerges into the light quickly — the dark-ink headline needs a pale backdrop. */
.growth{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#0A3F0B 0%, #166318 3%, #84C886 8%, #D9EFDA 13%, var(--green-50) 30%, var(--cream) 100%);
}
.growth-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.tree-stage{
  background:linear-gradient(180deg,#E6F3FA 0%,#F0F9F0 58%,#E6F5E6 100%);
  box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.75);
}
/* A little taller than the 3:2 default: these are portrait-leaning crops. */
.tree-stage>img{aspect-ratio:5/4}
.growth .sec-head h2{color:var(--green-900)}
.growth-copy{display:grid;gap:20px}
.timeline{display:grid;gap:0;margin-top:8px}
.tl{display:grid;grid-template-columns:34px 1fr;gap:16px;padding-bottom:26px;position:relative}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:16px;top:34px;bottom:-2px;width:2px;background:linear-gradient(180deg,var(--green-300),rgba(151,211,153,.2))}
.tl:last-child::before{display:none}
.tl i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--green-300);box-shadow:var(--shadow-sm);z-index:1}
.tl i svg{width:16px;height:16px;color:var(--green-600)}
/* Seed -> roots -> branches, walked through three logo hues so the stage a
   child is at is readable from the colour alone. */
.tl:nth-child(2) i{border-color:var(--sky-400)}
.tl:nth-child(2) i svg{color:var(--sky-700)}
.tl:nth-child(3) i{border-color:var(--sun)}
.tl:nth-child(3) i svg{color:var(--clay)}
.tl:nth-child(2)::before{background:linear-gradient(180deg,var(--sky-400),rgba(234,161,22,.35))}
.tl h4{font-size:1.06rem;margin-bottom:3px}
.tl p{font-size:.9rem;color:var(--muted);line-height:1.6}
/* ---------- 8. Programs ---------- */
.programs{background:var(--cream);position:relative}
.prog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:20px}
.pcard{
  position:relative;overflow:hidden;padding:30px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s;
}
.pcard::before{
  content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;
  background:var(--tone,var(--green-50));opacity:.85;transition:transform .6s var(--ease-out);
}
.pcard:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg);border-color:var(--green-100)}
.pcard:hover::before{transform:scale(1.35)}
.pcard>*{position:relative}
.pcard i{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-sm);margin-bottom:16px}
.pcard i svg{width:26px;height:26px}
.pcard .age{display:block;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--lime-dark);white-space:nowrap}
.pcard h3{font-size:1.28rem;margin:6px 0 8px}
.pcard p{font-size:.92rem;color:var(--muted);line-height:1.62}
.pcard ul{margin-top:16px;display:grid;gap:8px}
.pcard li{display:flex;gap:9px;align-items:flex-start;font-size:.87rem;color:var(--ink-soft)}
.pcard li svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--green-500)}

/* ---------- Final CTA ---------- */
.cta{
  position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(150deg,var(--green-800) 0%, var(--green-900) 55%, #052306 100%);
}
.cta-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.cta-orb.a{width:min(560px,86vw);aspect-ratio:1;left:-14%;top:-32%;background:radial-gradient(circle,rgba(51,163,54,.4),transparent 66%)}
.cta-orb.b{width:min(620px,92vw);aspect-ratio:1;right:-16%;bottom:-38%;background:radial-gradient(circle,rgba(127,192,225,.3),transparent 66%)}
.cta-inner{position:relative;z-index:3;display:grid;justify-items:center;gap:22px;max-width:900px;margin-inline:auto}
.cta h2{color:#fff;font-size:clamp(2.1rem,5.4vw,4.1rem);line-height:1.06}
.cta h2 em{font-style:normal;color:var(--lime);font-weight:700}
.cta p{color:rgba(255,255,255,.78);max-width:60ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:12px}
.cta .btn-primary{background:linear-gradient(135deg,var(--sun),#F7BA45);color:#241703;box-shadow:0 20px 44px -18px rgba(234,161,22,.7)}
.cta-quote{
  margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--font-display);font-style:normal;font-weight:500;font-size:clamp(1.02rem,1.6vw,1.24rem);color:rgba(255,255,255,.86);
}
.cta-quote span{display:block;margin-top:8px;font-family:var(--font-body);font-style:normal;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-300)}
.cta-ground{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;opacity:.5}
.cta-ground svg{width:100%;height:auto}

/* ---------- Contact + Footer ---------- */
/* The page opens on the logo's sky and closes on it, so the story is bookended
   by water rather than ending on another sand tone. */
.contact{background:linear-gradient(180deg,var(--sky-100) 0%, #EEF6FB 55%, var(--beige) 100%)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.ct-list{display:grid;gap:14px;margin-top:24px}
.ct{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);min-width:0}
.ct i{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--green-50)}
.ct i svg{width:19px;height:19px;color:var(--green-600)}
/* Visit / email / call each take a different logo hue. */
.ct:nth-child(2) i{background:var(--sky-100)}
.ct:nth-child(2) i svg{color:var(--sky-700)}
.ct:nth-child(3) i{background:#FDF1D2}
.ct:nth-child(3) i svg{color:var(--clay)}
.ct b{display:block;font-size:.94rem}
.ct span{font-size:.88rem;color:var(--muted);overflow-wrap:anywhere}
.form{padding:clamp(24px,3vw,36px);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);display:grid;gap:14px}
.field{display:grid;gap:7px}
.field label{font-size:.79rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;min-width:0;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--green-50);
  font:inherit;font-size:.94rem;color:var(--ink);transition:border-color .3s,background .3s,box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-400);background:#fff;box-shadow:0 0 0 4px rgba(86,189,88,.16)}
.field textarea{resize:vertical;min-height:96px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.form .btn{width:100%;margin-top:6px}
.form-note{font-size:.79rem;color:var(--muted);text-align:center}
.form-ok{display:none;padding:14px 16px;border-radius:14px;background:var(--green-50);border:1px solid var(--green-100);color:var(--green-800);font-size:.88rem;font-weight:600}
.form-ok.show{display:block}

.footer{background:var(--green-900);color:rgba(255,255,255,.72);padding-block:clamp(46px,6vw,72px) 26px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.footer .brand{color:#fff}
.footer .brand small{color:var(--green-300)}
.footer h3{font-family:var(--font-display);font-size:1rem;color:#fff;margin:0 0 14px}
.footer li+li{margin-top:9px}
.footer a{font-size:.9rem;transition:color .3s}
.footer a:hover{color:var(--green-300)}
.f-social{display:flex;gap:10px;margin-top:18px}
.f-social a{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .3s,transform .3s}
.f-social a:hover{background:var(--sky-600);transform:translateY(-3px)}
.f-social svg{width:18px;height:18px}
.f-bottom{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.83rem}

/* ---------- 9. Parent voices ---------- */
.voices{background:var(--beige)}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.quote{
  margin:0;padding:30px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;
  transition:transform .4s var(--ease-out),border-color .4s;
}
.quote:hover{transform:translateY(-4px);border-color:var(--lime)}
.stars{display:flex;gap:3px;color:var(--sun)}
.stars svg{width:17px;height:17px}
.quote blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-soft)}
/* The opening mark is decorative, so it is drawn rather than typed — a real
   quote character here would be read out by screen readers. */
.quote blockquote::before{
  content:"";display:block;width:26px;height:20px;margin-bottom:12px;
  background:var(--lime);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V12C0 5 5 0 13 0v5C8 5 6 8 6 12h7v12zm19 0V12C19 5 24 0 32 0v5c-5 0-7 3-7 7h7v12z'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V12C0 5 5 0 13 0v5C8 5 6 8 6 12h7v12zm19 0V12C19 5 24 0 32 0v5c-5 0-7 3-7 7h7v12z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.quote figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:2px}
.quote .who{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--green-900)}
.quote .rel{font-size:.82rem;color:var(--muted)}

/* ---------- 10. Dates & events ---------- */
.dates{background:var(--cream)}
.events{display:grid;gap:14px}
.event{
  display:grid;grid-template-columns:88px 1fr auto;gap:22px;align-items:center;
  padding:22px 24px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);
  transition:border-color .4s,transform .4s var(--ease-out);
}
.event:hover{border-color:var(--lime);transform:translateX(4px)}
.ev-date{
  display:grid;place-items:center;align-content:center;gap:1px;
  width:88px;height:88px;border-radius:var(--r-md);
  background:var(--green-900);color:#fff;
}
.ev-date b{font-family:var(--font-display);font-size:1.9rem;line-height:1;font-weight:700}
.ev-date span{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.ev-tag{
  display:inline-block;margin-bottom:8px;
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime-dark);background:var(--lime-soft);
  padding:5px 11px;border-radius:var(--r-sm);
}
.ev-body h3{font-size:1.18rem;margin-bottom:6px}
.ev-body p{font-size:.9rem;color:var(--muted);line-height:1.55;max-width:60ch}
.ev-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
.ev-meta span{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--ink-soft)}
.ev-meta svg{width:15px;height:15px;flex:none;color:var(--lime-dark)}
.ev-cta{flex:none;padding:12px 22px;font-size:.86rem}
@media (max-width:820px){
  .event{grid-template-columns:64px 1fr;gap:16px;align-items:start}
  .ev-date{width:64px;height:64px}
  .ev-date b{font-size:1.4rem}
  .ev-cta{grid-column:1/-1;justify-self:start;margin-top:4px}
}

/* ---------- 11. Campus gallery ---------- */
.gallery{background:var(--beige)}
/* Five tiles on a 3-column grid: four singles plus one double-width tile fill
   exactly two rows, so the block never leaves a hole on the last row. */
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,19vw,240px);gap:14px}
.gal-item{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);
  background:var(--green-100);
}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.gal-item:hover img{transform:scale(1.06)}
.gal-wide{grid-column:span 2}
.gal-item figcaption{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:26px 18px 14px;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;color:#fff;
  background:linear-gradient(180deg,rgba(4,20,5,0),rgba(4,20,5,.78));
}
@media (max-width:860px){
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .gal-wide{grid-column:span 2}
}
@media (max-width:520px){
  .gal-grid{grid-template-columns:1fr;grid-auto-rows:200px}
  .gal-wide{grid-column:span 1}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:34px;text-align:left}
  .hero{min-height:auto;padding-top:124px}
  .hero-art{max-width:560px;margin-inline:auto;width:100%}
  .classroom,.growth-grid,.contact-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .vine{display:none}
  .scroll-hint{display:none}
}
@media (max-width:1000px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:grid}
  .nav-cta{gap:0}
}
@media (max-width:560px){
  .f-grid{grid-template-columns:1fr;gap:26px}
  .two{grid-template-columns:1fr}
  .hero-meta{gap:20px}
  .note{font-size:.74rem;padding:9px 13px}
  .note i{width:24px;height:24px}
  .block-stage{padding-inline:12px}
}

/* ---------- Mobile ---------- */
@media (max-width:1000px){
  /* .rv-l / .rv-r slide in from the sides to match the two-column layouts, but
     those collapse to one column at this width. The 40px sideways offset then
     has nothing to justify it and pushes the document past the viewport, so the
     page can be dragged sideways before the reveal fires. Go vertical instead. */
  .rv-l,.rv-r{transform:translateY(28px)}
}
@media (max-width:560px){
  .hero{padding-top:104px}
  /* Full-width buttons: a 44px-tall target spanning the column is far easier to
     hit than two pill buttons wrapping mid-row. */
  .hero-actions{gap:10px}
  .hero-actions .btn,.cta-actions .btn{width:100%}
  .cta-actions{gap:10px}
  /* Three stats in one tidy row rather than a 2-then-1 flex wrap. */
  .hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px;padding-top:20px}
  .hero-meta b{font-size:1.1rem;white-space:nowrap}
  .hero-meta span{font-size:.66rem;letter-spacing:.05em}
  /* Events: the date block and copy read better stacked than side by side. */
  .event{padding:18px}
  .ev-body h3{font-size:1.06rem}
  .quote{padding:24px}
  .form{padding:20px}
  .fcard,.mini,.pcard{padding:22px}
  .band-item{padding:22px 20px}
  .gal-item figcaption{padding:22px 14px 12px;font-size:.85rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv,.rv-l,.rv-r,.rv-s{opacity:1!important;transform:none!important}
  .leaf-field,.bird,.cloud{display:none}
}
@media print{.nav,.vine,.leaf-field,.bird{display:none}}

/* ============================================================
   12. PROSPECTUS COMPONENTS
   Everything below carries the content that used to live only in
   the printed handbook: the sub-page headers, the zone cards, the
   rotation timetable, the pillar list and the leadership profiles.
   All of it leans on the same tokens as the rest of the sheet.
   ============================================================ */

/* ---------- Sub-page header ----------
   A short cousin of the hero: same sky, no 100svh, no scene props. */
.page-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(150px,17vw,196px);padding-bottom:clamp(52px,7vw,82px);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 82% -10%, #FDF0D6 0%, rgba(253,240,214,0) 54%),
    linear-gradient(180deg, var(--sky-200) 0%, var(--sky-100) 34%, var(--beige) 76%, var(--cream) 100%);
}
.page-hero>.wrap{position:relative;z-index:2}
.page-hero h1{color:var(--green-900);margin:18px 0 16px;max-width:20ch}
.page-hero .lede{max-width:62ch}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);margin-bottom:20px}
.crumb a{color:var(--green-700);font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;opacity:.5}
/* The header carries a wide photograph under the copy on the longer pages. */
.page-hero .ph-shot{
  margin-top:clamp(30px,4vw,46px);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.page-hero .ph-shot img{display:block;width:100%;height:clamp(220px,32vw,420px);object-fit:cover}

/* ---------- Fact strip ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.fact{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px;box-shadow:var(--shadow-sm);
}
.fact b{display:block;font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2rem);color:var(--green-800);line-height:1}
.fact span{display:block;margin-top:7px;font-size:.83rem;line-height:1.5;color:var(--muted)}

/* ---------- Generic photo/copy split ----------
   .flip swaps the visual to the right on wide screens. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.6vw,64px);align-items:center}
.split.flip .split-art{order:2}
.split-art{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--green-50)}
.split-art img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split-art.tall img{aspect-ratio:3/4}
.split-copy h2,.split-copy h3{margin-bottom:14px}
.split-copy .lede+.lede{margin-top:14px}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split.flip .split-art{order:0}
}

/* ---------- Zone cards (photo on top, checklist under) ---------- */
.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px}
.zonecard{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);transition:transform .5s var(--ease-out),box-shadow .5s;
}
.zonecard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.zonecard img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--green-50)}
.zonecard .zc-body{padding:22px}
.zonecard h3{font-size:1.14rem;color:var(--green-900)}
.zonecard .zc-tag{
  display:inline-block;margin-bottom:9px;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--lime-dark);
}
.zonecard ul{margin-top:14px;display:grid;gap:8px}
.zonecard li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;line-height:1.55;color:var(--ink-soft)}
.zonecard li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:50%;
  background:var(--green-400);
}

/* ---------- Numbered pillar list ---------- */
.pillars{display:grid;gap:12px}
.pillar{
  display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;
  padding:18px 22px;border-radius:var(--r-lg);
  background:var(--tone,var(--green-900));color:#fff;
  transition:transform .4s var(--ease-out);
}
.pillar:hover{transform:translateX(6px)}
.pillar b{
  display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-md);
  background:rgba(255,255,255,.16);font-family:var(--font-display);font-size:1.5rem;
}
.pillar h3{font-size:1.1rem;color:#fff;margin-bottom:3px}
.pillar p{font-size:.88rem;color:rgba(255,255,255,.82);line-height:1.5}

/* ---------- Two-column comparison ---------- */
.compare{
  overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;box-shadow:var(--shadow-sm);
}
.compare-row{display:grid;grid-template-columns:1fr 48px 1fr;align-items:center;gap:10px;padding:15px 20px}
.compare-row+.compare-row{border-top:1px solid var(--line)}
.compare-head{background:var(--green-900)}
.compare-row span{font-size:.92rem;color:var(--ink-soft)}
.compare-row.compare-head span{color:#fff;font-family:var(--font-display);font-weight:600}
.compare-row .was{color:var(--muted)}
.compare-row .now{font-weight:600;color:var(--green-800)}
.compare-row .arrow{display:grid;place-items:center;color:var(--green-400)}
.compare-row .arrow svg{width:20px;height:20px}
@media (max-width:560px){
  .compare-row{grid-template-columns:1fr;gap:4px;padding:14px 18px}
  .compare-row .arrow{justify-items:start;transform:rotate(90deg) translateX(2px);transform-origin:left center;height:18px}
}

/* ---------- Daily rotation timetable ---------- */
.dayline{display:grid;gap:16px}
.dayitem{
  display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;
  padding:16px;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.dayitem img{width:132px;height:132px;border-radius:var(--r-md);object-fit:cover;background:var(--green-50)}
.dayitem .time{
  display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:var(--r-full);
  background:var(--lime-soft);color:var(--lime-dark);
  font-size:.74rem;font-weight:800;letter-spacing:.06em;
}
.dayitem h3{margin:11px 0 5px;font-size:1.12rem}
.dayitem p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.dayitem .step{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-400)}
@media (max-width:620px){
  .dayitem{grid-template-columns:1fr}
  .dayitem img{width:100%;height:180px}
}

/* ---------- We are not / we are ---------- */
.claims{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.claim{padding:28px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.claim.yes{background:var(--green-900);border-color:var(--green-900)}
.claim h3{display:flex;align-items:center;gap:11px;font-size:1.16rem;margin-bottom:16px}
.claim.yes h3{color:#fff}
.claim h3 i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none}
.claim.no h3 i{background:#F6DEE3;color:#9A2B41}
.claim.yes h3 i{background:var(--lime);color:var(--green-950)}
.claim h3 svg{width:17px;height:17px}
.claim li{padding:9px 0;font-size:.95rem;color:var(--ink-soft);border-bottom:1px dashed var(--line)}
.claim li:last-child{border-bottom:0}
.claim.yes li{color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.16)}
.claim .tagrow{margin-top:18px}

/* ---------- Pill tags ---------- */
.tagrow{display:flex;flex-wrap:wrap;gap:9px}
.tagrow span{
  padding:8px 16px;border-radius:var(--r-full);
  background:var(--green-50);border:1px solid var(--green-100);
  font-size:.82rem;font-weight:600;color:var(--green-800);
}
.claim.yes .tagrow span{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.22);color:#EAF7EA}

/* ---------- Leadership profile ---------- */
.leaders{display:grid;gap:clamp(30px,5vw,64px)}
.leader{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(26px,4vw,52px);align-items:start}
.leader.flip .leader-art{order:2}
.leader-art{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--green-50)}
.leader-art img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.leader .role{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lime-dark)}
.leader h3{margin:9px 0 6px;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.leader .sub{font-size:.95rem;color:var(--muted);margin-bottom:18px}
.leader p+p{margin-top:12px}
.leader .lede{max-width:none}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-top:24px}
.cols h4{
  font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--lime-dark);margin-bottom:11px;
}
.cols li{display:flex;gap:9px;align-items:flex-start;font-size:.89rem;line-height:1.55;color:var(--ink-soft);padding:5px 0}
.cols li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--green-400)}
@media (max-width:860px){
  .leader{grid-template-columns:1fr}
  .leader.flip .leader-art{order:0}
  .leader-art img{aspect-ratio:4/3;object-position:center 22%}
}

/* ---------- Icon + label grid (facilities, values, habits) ---------- */
.iconrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.iconrow div{
  display:grid;justify-items:center;gap:11px;text-align:center;
  padding:22px 14px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.iconrow i{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-md);background:var(--green-50)}
.iconrow i svg{width:23px;height:23px;color:var(--green-700)}
.iconrow b{font-family:var(--font-display);font-size:.98rem;color:var(--green-900);font-weight:600}
.iconrow small{font-size:.8rem;line-height:1.5;color:var(--muted)}
/* On the dark sections the same grid inverts. */
.on-dark .iconrow div{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none}
.on-dark .iconrow i{background:rgba(255,255,255,.14)}
.on-dark .iconrow i svg{color:#EAF7EA}
.on-dark .iconrow b{color:#fff}
.on-dark .iconrow small{color:rgba(255,255,255,.72)}

/* ---------- Captioned photo strip ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.strip figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--green-50);box-shadow:var(--shadow-sm)}
.strip img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s var(--ease-out)}
.strip figure:hover img{transform:scale(1.06)}
.strip figcaption{
  padding:11px 12px;font-family:var(--font-display);font-weight:600;
  font-size:.8rem;color:var(--green-900);background:#fff;text-align:center;
}

/* ---------- Pull quote band ---------- */
.pullquote{
  position:relative;margin-inline:auto;max-width:56ch;text-align:center;
  font-family:var(--font-display);font-size:clamp(1.15rem,2.1vw,1.6rem);
  line-height:1.5;color:var(--green-900);
}
.pullquote cite{
  display:block;margin-top:16px;font-family:var(--font-body);font-style:normal;
  font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.on-dark .pullquote{color:#fff}
.on-dark .pullquote cite{color:rgba(255,255,255,.7)}

/* ---------- Dark utility section ---------- */
.on-dark{background:var(--green-900);color:#fff}
.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .lede,.on-dark p{color:rgba(255,255,255,.8)}
.on-dark .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#EAF7EA}
.on-dark .eyebrow .dot{background:var(--lime)}

/* ---------- Ribbon of short phrases ---------- */
.ribbon{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 26px;
  padding:20px var(--pad);background:var(--green-950);
  font-family:var(--font-display);font-weight:600;font-size:.86rem;letter-spacing:.08em;
  text-transform:uppercase;color:#CFEACF;text-align:center;
}

/* ---------- Campus contact cards ---------- */
.campuses{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.campus{
  overflow:hidden;border-radius:var(--r-lg);background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.campus img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--green-50)}
.campus .cp-body{padding:24px}
.campus h3{font-size:1.16rem;margin-bottom:5px}
.campus .cp-note{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lime-dark)}
.campus ul{margin-top:16px;display:grid;gap:10px}
.campus li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft)}
.campus li svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--green-600)}
.campus a{color:var(--green-800);font-weight:600}
.campus a:hover{text-decoration:underline}
/* A panoramic source in a split needs a wider window than the 4/3 default. */
.split-art.wide img{aspect-ratio:2/1}