/* =========================================================
   The Educators Haripur — public site
   Design system "Heraldic"  ·  colour "Forest & Ocean"
   See README.md for the measured references and the rules.

   Principles: photographs carry the page, text is short, every section
   has its own colour or texture (no plain white run of sections), and
   anything laid side by side is the same size AND the same shape of
   content — equal boxes holding unequal content still look unequal.
   ========================================================= */

:root{
  /* navy — dark grounds */
  --brand:#0C2340; --brand-deep:#071829; --brand-ink:#FFFFFF;
  /* forest green — accents on light, the campuses section */
  --acc:#14402B; --acc-deep:#0E2E1E;
  /* turquoise — the pop, dark grounds only (never text on paper) */
  --pop:#1FB6A6; --on-pop:#06232B;
  /* the parent portal's own teal, used only inside the phone illustration */
  --portal:#0D9488; --portal-deep:#0F766E;
  /* neutrals, cool-tinted to sit with the navy */
  --ink:#101C24; --body:#4A555C; --soft:#606C75;
  --paper:#F2F5F6; --card:#FFFFFF; --line:#D8E0E3; --mint:#E6F1EC;

  --disp:'Cinzel',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --maxw:1200px; --pad:44px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
section[id],div[id],header[id]{scroll-margin-top:112px}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);
     font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
/* height:auto is load-bearing: every <img> carries width/height attributes for
   layout stability, and without this the attribute height stretches images. */
img{display:block;max-width:100%;height:auto}
a{color:inherit}
/* `hidden` must always win over display rules below. */
[hidden]{display:none!important}

h1,h2,h3{font-family:var(--disp);font-weight:500;color:var(--ink);margin:0;
         text-transform:uppercase;line-height:1.2}
h1{font-size:clamp(2rem,3.9vw,3.2rem);letter-spacing:.07em}
h2{font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:.12em}
h3{font-size:1.02rem;letter-spacing:.1em}
/* Even line lengths, so no heading ends on one lonely word ("…GIRLS AND / BOYS"). */
h1,h2,h3{text-wrap:balance}

.w{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.kick{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.26em;
      text-transform:uppercase;color:var(--acc);display:block}
.hr{width:44px;height:2px;background:var(--acc);margin:18px 0}
.lede{font-size:1.1rem;line-height:1.65;margin:0 0 26px;max-width:46ch}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
     stroke-linecap:round;stroke-linejoin:round}

/* ---------- keyboard access ---------- */
:focus-visible{outline:3px solid var(--pop);outline-offset:3px;border-radius:2px}
.hero :focus-visible,.top :focus-visible,.admit :focus-visible,.board :focus-visible,
.ft :focus-visible,.dark :focus-visible,.deep :focus-visible,
.qbar :focus-visible,.lb :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--brand);color:#fff;
      padding:14px 22px;font-size:.8rem;font-weight:600;letter-spacing:.1em;
      text-transform:uppercase;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
     font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
     padding:0 28px;min-height:52px;transition:background .15s,color .15s,border-color .15s}
.btn .ico{width:18px;height:18px}
.b1{background:var(--acc);color:#fff}
.b1:hover{background:var(--acc-deep)}
.b2{border:1px solid currentColor;color:var(--ink)}
.b2:hover{color:var(--acc)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- announcement ---------- */
.top{background:var(--brand-deep);color:rgba(255,255,255,.82);font-size:.7rem;
     letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:10px 20px}
.top a{color:#fff;font-weight:600;margin-left:14px;text-decoration:none;
       border-bottom:1px solid rgba(255,255,255,.5);display:inline-block;padding:5px 0}

/* ---------- header ---------- */
.hd{background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hd-in{display:flex;align-items:center;gap:34px;max-width:var(--maxw);margin:0 auto;
       padding:10px var(--pad)}
.mk{display:flex;align-items:center;gap:16px;text-decoration:none}
.mk img{height:84px;width:auto}
.mk .campus{font-family:var(--disp);font-size:.84rem;font-weight:600;letter-spacing:.32em;
            text-transform:uppercase;color:var(--ink);padding:10px 0 10px 16px;
            border-left:1px solid var(--line)}
.nv{margin-left:auto;display:flex;gap:28px}
.nv a{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
      text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.nv a:hover{border-color:var(--acc)}
.lg{font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
    background:var(--brand);color:#fff;padding:13px 20px;text-decoration:none;white-space:nowrap}
.lg:hover{background:var(--brand-deep)}

/* ---------- mobile menu (below 980px) ---------- */
.burger{display:none;width:44px;height:44px;padding:11px 9px;background:none;border:0;
        cursor:pointer;flex-direction:column;justify-content:space-between;align-items:stretch}
.burger span{display:block;height:2px;background:var(--ink);transition:transform .18s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mnav{display:none;flex-direction:column;background:var(--card);border-top:1px solid var(--line);
      padding:8px var(--pad) 20px}
.mnav a{display:block;padding:16px 0;min-height:44px;font-size:.78rem;font-weight:600;
        letter-spacing:.15em;text-transform:uppercase;text-decoration:none;color:var(--ink);
        border-bottom:1px solid var(--line)}
.mnav .mnav-cta{margin-top:16px;background:var(--brand);color:#fff;text-align:center;
                padding:16px;border-bottom:0}
body.nav-open{overflow:hidden}

/* ---------- hero ----------
   Photo crossfade behind, text on the LEFT over a side-darkened scrim so it
   stays readable while the right of the photo stays bright. Bottom padding
   leaves room for the four cards that overlap the hero's lower edge. */
/* Height leaves ~110px of the first screen for the four cards below, so they
   are seen on a laptop instead of hiding under the fold (they did at 900px,
   and a 700px-tall window hid them completely). */
.hero{position:relative;overflow:hidden;background:var(--brand-deep);color:#fff;display:flex;align-items:center;
      min-height:clamp(520px,calc(100vh - 146px),820px)}
@supports (height:100svh){ .hero{min-height:clamp(520px,calc(100svh - 146px),820px)} }
.slides,.slides img{position:absolute;inset:0;width:100%;height:100%}
.slides img{object-fit:cover}
.slides .slide{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .slides .base{animation:kb 20s var(--ease) both}
  @keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
  /* 18s cycle: base 0–6s, slide 2 6–12s, slide 3 12–18s, 1s crossfades. */
  .slides .slide{animation:xf 18s linear infinite both}
  .slides .s2{animation-delay:5s}
  .slides .s3{animation-delay:11s}
  @keyframes xf{0%{opacity:0} 6%{opacity:1} 33%{opacity:1} 39%{opacity:0} 100%{opacity:0}}
}
.hero:after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(7,24,41,.9) 0%,rgba(7,24,41,.72) 38%,rgba(7,24,41,.3) 72%,rgba(7,24,41,.18) 100%),
             linear-gradient(0deg,rgba(7,24,41,.55) 0%,rgba(7,24,41,0) 35%)}
.hero-wrap{position:relative;z-index:2;width:100%}
.hero-in{max-width:620px;padding:48px 0 64px}
.badge{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:99px;
       font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;
       text-decoration:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
       backdrop-filter:blur(4px)}
.badge:hover{background:rgba(255,255,255,.18)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 4px rgba(31,182,166,.28)}
.hero h1{color:#fff;margin-top:26px}
.hero .motto{font-family:var(--disp);font-size:.95rem;font-weight:500;letter-spacing:.24em;
             text-transform:uppercase;color:var(--pop);margin:14px 0 0}
.hero .intro{font-size:1.14rem;color:rgba(255,255,255,.9);margin:20px 0 32px;max-width:36ch}
.hero .b1{background:var(--pop);color:var(--on-pop)}
.hero .b1:hover{background:#31C9B8}
.hero .b2{color:#fff;border-color:rgba(255,255,255,.6)}
.hero .b2:hover{color:#fff;border-color:#fff}
/* Short laptop windows: keep the headline on the first screen comfortably. */
@media (min-width:981px) and (max-height:760px){
  .hero-in{padding:32px 0 44px}
  .hero h1{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-top:18px}
}

/* ---------- sections ---------- */
.s{padding:84px 0}
.s--card{background:var(--card)}
/* Texture for light sections: a faint dot grid, so they read as a surface
   rather than an empty white field. */
.dots{background-color:var(--paper);
      background-image:radial-gradient(rgba(20,64,43,.09) 1.2px,transparent 1.5px);background-size:22px 22px}
.hd2{text-align:center;max-width:760px;margin:0 auto 40px}
.hd2 h2{margin-top:12px}
.hd2 .hr{margin:18px auto 0}

/* ---------- at-a-glance cards (overlap the hero's bottom edge) ----------
   Same structure and near-identical text length in all four, so they look
   equal, not just measure equal. */
/* The cards sit in their own row BELOW the hero — not over the photographs
   (tried, and rejected by the school). grid-auto-rows:1fr makes every ROW the
   same height too, so the 2x2 phone layout stays equal. */
.strip{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:18px;margin-bottom:64px}
.fc{background:var(--card);border-top:3px solid var(--pop);padding:24px 22px 26px;
    box-shadow:0 18px 44px rgba(16,28,36,.14);display:flex;flex-direction:column;gap:6px}
.fc .ic{width:46px;height:46px;border-radius:50%;background:var(--mint);color:var(--acc);
        display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.fc b{font-family:var(--disp);font-weight:600;font-size:.92rem;letter-spacing:.08em;
      text-transform:uppercase;color:var(--ink);line-height:1.3}
.fc span{font-size:.9rem;color:var(--body);line-height:1.5}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center}
.about h2{margin-bottom:18px}
.pill{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pill li{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:center;
         padding:16px 0;border-bottom:1px solid var(--line)}
.pill .ic{width:48px;height:48px;border-radius:50%;background:var(--mint);
         color:var(--acc);display:flex;align-items:center;justify-content:center}
.pill b{display:block;font-family:var(--disp);font-weight:500;font-size:.9rem;
        letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pill span{display:block;font-size:.94rem;color:var(--body)}
/* One clean photo. (A layered collage with an overlapping trophies photo and
   an outline frame was tried and removed at the school's request.) */
.about-photo{aspect-ratio:4/5;box-shadow:0 24px 50px rgba(16,28,36,.16)}

/* ---------- campuses: deep green, image tiles ---------- */
.deep{background:var(--acc) linear-gradient(160deg,#10331F 0%,var(--acc) 50%,#0B2618 100%);
      color:rgba(255,255,255,.82)}
.deep h2{color:#fff}
.deep .kick{color:rgba(255,255,255,.78)}   /* turquoise text on green fails contrast */
.deep .hr{background:var(--pop)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tile{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--brand);
      box-shadow:0 24px 50px rgba(0,0,0,.28)}
/* Anchored high: on a phone the tile turns landscape and a centred crop cut
   the boys' faces off. Faces sit in the top third of all three photos. */
.tile img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .9s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .tile:hover img{transform:scale(1.05)} }
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:110px 28px 28px;
  background:linear-gradient(0deg,rgba(7,24,41,.95) 0%,rgba(7,24,41,.72) 45%,rgba(7,24,41,0) 100%)}
.tile .who{display:block;font-size:.64rem;font-weight:600;letter-spacing:.22em;
           text-transform:uppercase;color:var(--pop);margin-bottom:8px}
.tile h3{color:#fff;font-size:1.22rem}

/* ---------- news ---------- */
.news-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:stretch}
.meta{display:block;font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
      color:var(--soft);margin-bottom:10px}
.feat{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;
      box-shadow:0 16px 40px rgba(16,28,36,.08)}
.feat .ph{aspect-ratio:16/10;border:0}
.feat .body{padding:26px 30px 30px;flex:1}
.feat h3{font-size:1.1rem;margin-bottom:10px}
.feat p{margin:0;font-size:.96rem}
/* No board (the current state): the story fills the row, photo beside text. */
.news-grid.single{grid-template-columns:1fr}
.news-grid.single .feat{display:grid;grid-template-columns:1.15fr 1fr}
.news-grid.single .feat .ph{aspect-ratio:auto;height:100%;min-height:340px}
.news-grid.single .feat .body{display:flex;flex-direction:column;justify-content:center;padding:40px 46px}
.news-grid.single .feat h3{font-size:1.28rem;margin-bottom:14px}
.news-grid.single .feat p{font-size:1.02rem}

.board{background:var(--brand);color:rgba(255,255,255,.8);padding:32px 30px;display:flex;flex-direction:column}
.board .kick{color:var(--pop)}
.board h3{color:#fff;font-size:1.05rem;margin:10px 0 18px}
.board .sample-tag{display:block;margin:0 0 16px;font-size:.7rem;font-weight:600;letter-spacing:.06em;
                   color:var(--pop);border:1px dashed rgba(31,182,166,.6);padding:6px 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{font:600 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
      color:rgba(255,255,255,.86);background:transparent;border:1px solid rgba(255,255,255,.3);
      padding:0 16px;min-height:44px}
.chip[aria-pressed="true"]{background:var(--pop);border-color:var(--pop);color:var(--on-pop)}
.board ol{list-style:none;margin:0;padding:0}
.board li{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;
          padding:16px 0;border-top:1px solid rgba(255,255,255,.14);font-size:1rem}
.board .pos{font-family:var(--disp);font-weight:600;font-size:.82rem;letter-spacing:.08em;color:#fff}
.board .pos-1{color:var(--pop)}
.board .nm{color:#fff}
.board .sc{color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}

.news-list{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:28px}
.news-list.single{grid-template-columns:1fr}
.item{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;
      box-shadow:0 16px 40px rgba(16,28,36,.08)}
.item .ph{aspect-ratio:16/9;border:0}
.item .body{padding:22px 26px 26px;flex:1}
.item h3{font-size:.96rem;margin-bottom:8px}
/* Padding grows the tap target past 44px; the negative margin keeps the look. */
.item h3 a{text-decoration:none;display:block;padding:14px 0;margin:-14px 0}
.item h3 a:hover{color:var(--acc)}
.item p{margin:0;font-size:.93rem}
/* Cards lift slightly under a mouse — never on touch, never with reduced motion. */
.feat,.item{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .item:hover,.feat:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(16,28,36,.14)}
}

/* ---------- parent portal (dark section with a phone illustration) ---------- */
.dark{background:var(--brand) linear-gradient(155deg,#10305A 0%,var(--brand) 48%,#081A31 100%);
      color:rgba(255,255,255,.8);overflow:hidden}   /* solid navy underneath as a fallback */
.dark h2{color:#fff}
.dark .kick{color:var(--pop)}
.dark .hr{background:var(--pop)}
/* align-items:start — centred, the text column sat halfway down beside the tall
   phone and the section opened with ~220px of empty navy. */
.portal{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.portal .lede{color:rgba(255,255,255,.9)}
/* Six features in an even 3 × 2 grid (2 × 3 on phones) — a wrapping row left
   one chip alone on the last line. */
.feats{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.feats li{display:flex;align-items:center;gap:10px;padding:11px 16px;color:#fff;font-size:.92rem;
          border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05)}
.feats .ico{color:var(--pop);width:18px;height:18px}
.portal .small{color:rgba(255,255,255,.74);font-size:.94rem;max-width:44ch;margin:0 0 26px}
.portal .b1{background:var(--pop);color:var(--on-pop)}
.portal .b1:hover{background:#31C9B8}

.phone-wrap{position:relative;display:flex;justify-content:center;padding:10px 0}
.phone-wrap:before{content:'';position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(31,182,166,.28) 0%,rgba(31,182,166,0) 62%)}
.phone{position:relative;width:270px;aspect-ratio:9/19;border-radius:46px;background:#070B12;padding:12px;
       box-shadow:0 50px 90px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1)}
.phone:after{content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);
             width:88px;height:24px;border-radius:14px;background:#070B12}
.screen{height:100%;border-radius:35px;overflow:hidden;background:#F3F7F7;display:flex;flex-direction:column;
        color:#1B2A33;font-size:14px;line-height:1.35}
.sc-top{display:flex;align-items:center;gap:10px;padding:52px 16px 12px;background:#fff;border-bottom:1px solid #E3E9EA}
.sc-top img{height:30px;width:auto}
.sc-top b{display:block;font-size:.8rem;font-weight:600}
.sc-top small{font-size:.66rem;color:#56656B}
.sc-hero{margin:14px 14px 10px;padding:16px;border-radius:16px;color:#fff;
         background:linear-gradient(135deg,var(--portal-deep),var(--portal))}
.sc-hero small{font-size:.66rem;opacity:.88}
.sc-hero b{display:block;font-size:1.02rem;margin:3px 0 2px}
.sc-hero span{font-size:.68rem;opacity:.88}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px}
.sc-card{background:#fff;border-radius:14px;padding:12px;border:1px solid #E3E9EA}
.sc-card.wide{grid-column:1/-1}
.sc-card .l{display:block;font-size:.56rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
            color:#56656B;margin-bottom:6px}
.sc-card small{display:block;font-size:.6rem;color:#56656B;margin-top:5px}
.sc-card b{font-size:.92rem}
.ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
      background:conic-gradient(var(--portal) 0 96%,#E3E9EA 0)}
.ring span{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;
           font-size:.7rem;font-weight:600}
.ok{display:inline-block;font-style:normal;font-size:.74rem;font-weight:600;color:var(--portal-deep);
    background:#E1F3F0;padding:4px 10px;border-radius:99px;margin-top:4px}
.sc-tabs{margin-top:auto;display:flex;justify-content:space-around;padding:10px 6px 20px;
         background:#fff;border-top:1px solid #E3E9EA}
.sc-tabs i{font-style:normal;font-size:.56rem;color:#56656B;display:flex;flex-direction:column;
           align-items:center;gap:4px}
.sc-tabs i:before{content:'';width:18px;height:18px;border-radius:6px;background:#D7E0E2}
.sc-tabs i.on{color:var(--portal-deep);font-weight:600}
.sc-tabs i.on:before{background:var(--portal)}

/* ---------- gallery mosaic + viewer ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,215px);gap:12px}
.mosaic .ph{border:0}
.mosaic .ph:first-child{grid-column:span 2;grid-row:span 2}
.zoom{display:block;width:100%;height:100%;position:relative;z-index:2;cursor:zoom-in}
.zoom:focus-visible{outline-offset:-5px}
/* Caption on a dark fade at the foot of each photo, shown on hover/focus. */
.zoom:after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:34px 16px 12px;font-size:.78rem;font-weight:500;letter-spacing:.04em;color:#fff;
  background:linear-gradient(0deg,rgba(7,24,41,.85),rgba(7,24,41,0));opacity:0;transition:opacity .3s}
.zoom:hover:after,.zoom:focus-visible:after{opacity:1}
.mosaic img{transition:transform .9s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .mosaic .ph:hover img{transform:scale(1.05)} }

.lb{border:0;padding:0;margin:0;background:transparent;width:100vw;height:100vh;max-width:none;max-height:none}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb::backdrop{background:rgba(5,10,18,.94)}
.lb figure{margin:0;max-width:min(1100px,86vw)}
.lb img{max-height:78vh;width:auto;margin:0 auto}
.lb figcaption{color:rgba(255,255,255,.86);text-align:center;font-size:.9rem;margin-top:16px}
.lb button{position:fixed;display:grid;place-items:center;width:52px;height:52px;cursor:pointer;
           background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);color:#fff;
           font-size:1.7rem;line-height:1}
.lb button:hover{background:rgba(255,255,255,.18)}
.lb-x{top:18px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}

/* ---------- admissions band, over a darkened photograph ---------- */
.admit{position:relative;overflow:hidden;color:rgba(255,255,255,.88);padding:92px 0;background:var(--acc)}
.admit-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.admit:before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(14,46,30,.95) 0%,rgba(20,64,43,.88) 45%,rgba(20,64,43,.55) 100%)}
.admit .w{position:relative;z-index:2}
.admit .kick{color:rgba(255,255,255,.78)}
.admit .hr{background:var(--pop)}
.admit h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.6rem)}
.admit p{font-size:1.12rem;margin:16px 0 28px;max-width:46ch}
.facts{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.facts li{display:flex;align-items:center;gap:10px;color:#fff;font-size:.96rem;padding:10px 16px;
          background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2)}
.facts .ico{color:var(--pop);width:18px;height:18px}
.admit .b1{background:#fff;color:var(--acc)}
.admit .b1:hover{background:#E6EFEA}
.admit .b2{color:#fff;border-color:rgba(255,255,255,.6)}
.admit .b2:hover{color:#fff;border-color:#fff}

/* ---------- contact ---------- */
/* One heading above both columns, so the details card and the map start on
   the same line and stretch to the same height. */
.ct-hd{margin-bottom:32px}
.ct-hd .hr{margin:18px 0 0}
.ct{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
.ct-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
         box-shadow:0 16px 40px rgba(16,28,36,.06)}
.ct dl{margin:0;display:grid;grid-template-columns:140px 1fr;padding:6px 28px}
.ct-act{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px;padding:20px 28px 28px;border-top:1px solid var(--line)}
.ct-act .btn{flex:1 1 auto}
.ct dt{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);
       padding:16px 0;border-top:1px solid var(--line)}
.ct dd{margin:0;padding:16px 0;border-top:1px solid var(--line);font-size:.98rem}
.ct dt:first-of-type,.ct dt:first-of-type + dd{border-top:0}
.ct dd a{text-decoration:none;border-bottom:1px solid var(--line);display:inline-block;padding:3px 0}
.ct .muted{color:var(--soft);font-size:.9rem}
/* Live map, same height as the details card beside it. The iframe is taller
   than its window and shifted up 120px, which hides Google's place card at
   the top (school name, "No reviews"). The bottom — Google's logo and terms,
   which must stay visible — is not cropped. */
.mapview{position:relative;overflow:hidden;min-height:380px;background:#DDE3E6;
         border:1px solid var(--line);box-shadow:0 16px 40px rgba(16,28,36,.06)}
.mapview .map{position:absolute;left:0;top:-120px;width:100%;height:calc(100% + 120px);border:0;display:block}
/* Half-width card on smaller screens: label above value, so the address and
   hours don't wrap into narrow ragged lines beside a fixed label column. */
@media (max-width:1100px){
  .ct dl{grid-template-columns:1fr}
  .ct dt{padding-bottom:0}
  .ct dd{border-top:0;padding-top:4px}
  .ct dt:first-of-type{border-top:0}
}

/* ---------- footer ---------- */
.ft{background:var(--brand-deep);color:rgba(255,255,255,.6);padding:68px 0 30px;font-size:.9rem}
.ft-in{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:48px}
.ft-brand{display:flex;gap:22px;align-items:flex-start}
/* The lockup's green wordmark disappears on navy, so it sits on a white panel. */
.ft-logo{flex:none;background:#fff;padding:12px 14px;border-radius:4px}
.ft-logo img{height:96px;width:auto}
.ft-brand b{display:block;color:#fff;font-family:var(--disp);font-weight:500;letter-spacing:.1em;
            text-transform:uppercase;font-size:.95rem;margin-bottom:10px}
.ft p{margin:0}
.ft h3{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.2em;
       text-transform:uppercase;color:var(--pop);margin:0 0 18px}
.ft a{display:block;color:rgba(255,255,255,.6);text-decoration:none;margin-bottom:10px}
.ft a:hover{color:#fff}
.ft .bt{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.13);padding-top:24px;
        margin-top:40px;font-size:.76rem;color:rgba(255,255,255,.62)}  /* .4 failed AA at 3.79:1 */

/* ---------- phone quick-action bar (shown below 980px only) ---------- */
.qbar{display:none}

/* ---------- photo slot ---------- */
.ph{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(45deg,#ECEEF0,#ECEEF0 10px,#E3E7EA 10px,#E3E7EA 20px);
    border:1px dashed #BFC8CD}
.ph.has-img{border-style:none;background:var(--brand)}
/* The file-name label is only for an empty slot; once the photo loads it must
   go, or screen readers read "assets/about.jpg" aloud. */
.ph.has-img .lbl{display:none}
.ph img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.ph .lbl{position:absolute;z-index:1;padding:12px 16px;text-align:center;font-size:.74rem;
         font-weight:600;letter-spacing:.04em;color:var(--soft);max-width:92%}

/* ---------- scroll-in reveal: short, quick, starts before it's on screen ---------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .burger span{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nv{gap:20px}
  /* Four cards stay in ONE row down to 981px: a 2x2 grid here pushed the
     second row below the fold on a 1024x768 laptop. */
  .fc{padding:20px 16px 22px}
  .fc b{font-size:.84rem}
}
@media (max-width:980px){
  :root{--pad:22px}
  .nv{display:none}
  /* Header on a phone is logo + burger; Parent Login lives in the menu. */
  .lg{display:none}
  .hd-in{gap:14px;padding-top:8px;padding-bottom:8px}
  .mk img{height:64px}
  .mk .campus{font-size:.74rem;padding-left:12px}
  .burger{display:flex;flex:0 0 44px;margin-left:auto}
  .mnav:not([hidden]){display:flex}
  section[id],div[id],header[id]{scroll-margin-top:92px}

  .s{padding:60px 0}
  .admit{padding:64px 0}
  .hd2{margin-bottom:30px}
  .hero{min-height:clamp(520px,calc(100vh - 150px),760px);align-items:flex-end}
  @supports (height:100svh){ .hero{min-height:clamp(520px,calc(100svh - 150px),760px)} }
  /* On a phone the text sits at the foot of the photo: darken bottom-up. */
  .hero:after{background:linear-gradient(0deg,rgba(7,24,41,.94) 0%,rgba(7,24,41,.7) 45%,rgba(7,24,41,.3) 100%)}
  .hero-in{padding:40px 0 48px}
  .hero .motto{font-size:.8rem;letter-spacing:.18em}
  .strip{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:48px}
  .fc{padding:18px 16px 20px}
  .fc b{font-size:.82rem}
  .fc span{font-size:.84rem}

  .about,.ct,.portal{grid-template-columns:1fr;gap:40px}
  .about-photo{order:-1;aspect-ratio:4/3}
  .tiles{grid-template-columns:1fr;gap:16px}
  .tile{aspect-ratio:16/11}
  .news-grid,.news-list{grid-template-columns:1fr}
  .news-grid.single .feat{display:flex;flex-direction:column}
  .news-grid.single .feat .ph{aspect-ratio:16/10;height:auto;min-height:0}
  .news-grid.single .feat .body{padding:24px 24px 28px}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,27vw,200px);gap:8px}
  .phone{width:260px}

  .ft-in{grid-template-columns:1fr;gap:34px}
  /* Footer links stay block: inline-block let them run together on one line. */
  .ft a{display:block;padding:11px 0;min-height:44px;margin-bottom:0}
  .ct dd a,.top a{display:inline-block;padding:11px 0;min-height:44px}

  /* Quick-action bar: slides in once the hero is off-screen (JS adds .show).
     visibility keeps its links out of the tab order while it is hidden. */
  .qbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--brand-deep);
        border-top:1px solid rgba(255,255,255,.12);padding-bottom:env(safe-area-inset-bottom);
        transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
  .qbar.show{transform:none;visibility:visible;transition:transform .3s var(--ease)}
  body.nav-open .qbar{transform:translateY(110%);visibility:hidden}
  .qbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;
          color:#fff;text-decoration:none;font-size:.7rem;font-weight:600;letter-spacing:.14em;
          text-transform:uppercase;border-left:1px solid rgba(255,255,255,.12)}
  .qbar a:first-child{border-left:0;background:var(--pop);color:var(--on-pop)}
  .qbar .ico{width:18px;height:18px}
  /* room so the bar never covers the footer's last line */
  .ft{padding-bottom:calc(30px + 56px)}
  .lb button{width:46px;height:46px}
  .lb-prev{left:8px} .lb-next{right:8px}
}
@media (max-width:560px){
  h1{font-size:1.75rem;letter-spacing:.05em}
  .hero .intro{font-size:1rem}
  .btns .btn{flex:1 1 auto}
  .ct dl{padding:6px 18px}
  .ct-hd{margin-bottom:24px}
  .feats{grid-template-columns:repeat(2,1fr)}
  .feats li{padding:11px 12px}
  .facts{display:grid}
  /* About on phones: it was the heaviest text on the page (17.6px paragraph,
     list titles wrapping to two lines). Brought in line with News/Contact. */
  .about .lede{font-size:1rem;margin-bottom:22px}
  .pill li{grid-template-columns:38px 1fr;gap:14px;padding:13px 0}
  .pill .ic{width:38px;height:38px}
  .pill .ic .ico{width:17px;height:17px}
  .pill b{font-size:.78rem;letter-spacing:.06em}
  .pill span{font-size:.86rem;line-height:1.5}
  .ft-brand{flex-direction:column}
  .ct-act{padding:18px}
  .mapview{min-height:0;aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){ .qbar,.qbar.show{transition:none} }