@charset "utf-8";
/* ==========================================================================
   ST. THOMAS SCHOOL — COMPONENTS
   Depends on style.css tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER — utility strip + sticky main bar + mega menu
   -------------------------------------------------------------------------- */
.site-header { position: relative; z-index: 900; }

.topbar {
  background: var(--navy-deep);
  color: #c6d6e6;
  font-size: var(--t-xs);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); min-height: 40px; flex-wrap: wrap;
}
.topbar-list { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar-item svg { width: 14px; height: 14px; color: var(--gold-300); flex: none; }
.topbar a:hover { color: #fff; }
.topbar-sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }

.headbar {
  position: sticky; top: 0; z-index: 950;
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.headbar.is-stuck { box-shadow: var(--sh-2); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }

.headbar-in {
  display: flex; align-items: center; gap: var(--s-6);
  min-height: var(--header-h);
}

/* brand lockup */
.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand-crest { width: 52px; height: 52px; flex: none; }
.brand-txt { line-height: 1.05; }
.brand-name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); letter-spacing: -.01em; color: var(--navy);
  display: block;
}
.brand-sub {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--red-700);
}
@media (max-width: 480px) { .brand-crest { width: 44px; height: 44px; } .brand-name { font-size: 1.15rem; } .brand-sub { letter-spacing: .13em; } }

/* primary nav */
.nav { margin-inline: auto; }
.nav-list { display: flex; align-items: center; gap: clamp(4px, 1.1vw, 14px); }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 12px;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink); border-radius: var(--r-sm);
}
.nav-link svg { width: 13px; height: 13px; transition: transform .3s var(--ease); opacity: .6; }
.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .32s var(--ease);
}
.nav-item:hover > .nav-link::after,
.nav-link:focus-visible::after,
.nav-item.is-active > .nav-link::after { transform: scaleX(1); }
.nav-item:hover > .nav-link svg { transform: rotate(180deg); }
.nav-item.is-active > .nav-link { color: var(--brand); }

/* mega panel */
.nav-item { position: relative; }
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%;
  translate: -50% 0;
  width: min(760px, calc(100vw - 48px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: var(--s-6);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.mega.mega-sm { width: min(440px, calc(100vw - 48px)); }
.nav-item:hover > .mega,
.nav-item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; }
.mega::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.mega.mega-sm .mega-grid { grid-template-columns: 1fr; }

.mega-item {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r-md);
  transition: background .22s var(--ease);
}
.mega-item:hover { background: var(--paper-2); }
.mega-ic {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; background: var(--gold-50); color: var(--gold-700);
}
.mega-ic svg { width: 19px; height: 19px; }
.mega-item:nth-child(3n+2) .mega-ic { background: var(--brand-50); color: var(--brand); }
.mega-item:nth-child(3n+3) .mega-ic { background: var(--red-50); color: var(--red-700); }
.mega-t { font-weight: 700; font-size: .9rem; color: var(--ink); line-height: 1.3; }
.mega-d { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.45; margin-top: 2px; }

.mega-feature {
  grid-column: 1 / -1; margin-top: var(--s-3);
  position: relative; border-radius: var(--r-md); overflow: hidden;
  min-height: 132px; display: flex; align-items: flex-end;
  padding: var(--s-5);
}
.mega-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega-feature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,29,58,.92), rgba(6,29,58,.34) 70%, rgba(6,29,58,.10));
}
.mega-feature .mf-t { position: relative; z-index: 2; color: #fff; }
.mega-feature .mf-t strong { font-family: var(--f-display); font-size: 1.15rem; display: block; }
.mega-feature .mf-t span { font-size: var(--t-xs); color: #d3e0ec; }

.header-cta { flex: none; display: flex; align-items: center; gap: var(--s-3); }

/* burger */
.burger {
  display: none; width: 46px; height: 46px; flex: none;
  border-radius: var(--r-md); border: 1.5px solid var(--line);
  place-items: center; color: var(--ink);
}
.burger svg { width: 22px; height: 22px; }

@media (max-width: 1080px) {
  .nav, .header-cta .btn { display: none; }
  .burger { display: grid; }
  .headbar-in { justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   OFF-CANVAS MOBILE NAV
   -------------------------------------------------------------------------- */
.offcanvas {
  position: fixed; inset: 0; z-index: 1100;
  visibility: hidden; pointer-events: none;
}
.offcanvas.is-open { visibility: visible; pointer-events: auto; }
.oc-veil {
  position: absolute; inset: 0; background: rgba(6,29,58,.58);
  opacity: 0; transition: opacity .35s var(--ease);
}
.offcanvas.is-open .oc-veil { opacity: 1; }
.oc-panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(400px, 88vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.offcanvas.is-open .oc-panel { transform: none; }
.oc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 2;
}
.oc-close { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); border: 1.5px solid var(--line); }
.oc-close svg { width: 20px; height: 20px; }
.oc-body { padding: var(--s-4) var(--s-6) var(--s-9); }

.oc-acc { border-bottom: 1px solid var(--line-soft); }
.oc-top {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 54px; padding: 6px 0;
  font-weight: 600; font-size: 1.02rem; color: var(--ink); text-align: left;
}
.oc-top svg { width: 18px; height: 18px; color: var(--ink-mute); transition: transform .3s var(--ease); flex: none; }
.oc-top[aria-expanded="true"] svg { transform: rotate(180deg); }
.oc-sub { display: none; padding-bottom: var(--s-4); }
.oc-sub.is-open { display: block; }
.oc-sub a {
  display: block; min-height: 44px; padding: 10px 0 10px var(--s-4);
  font-size: .92rem; color: var(--ink-soft);
  border-left: 2px solid var(--line);
}
.oc-sub a:hover { color: var(--brand); border-color: var(--gold); }
.oc-foot { margin-top: var(--s-7); display: grid; gap: var(--s-3); }
.oc-contact { margin-top: var(--s-7); font-size: var(--t-sm); color: var(--ink-soft); }
.oc-contact a { display: flex; align-items: center; gap: 9px; min-height: 40px; }
.oc-contact svg { width: 15px; height: 15px; color: var(--gold-700); flex: none; }

/* --------------------------------------------------------------------------
   HOME HERO — full-bleed photograph, dissolved into the page on the left
   --------------------------------------------------------------------------
   Reference: models/hero.jpg. The photograph runs edge to edge behind the
   whole section; a left-to-right gradient fades it into the ivory ground so
   the headline sits on clean paper instead of on a boxed image. Below 980px
   the gradient turns vertical, because there is no longer a free left half.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--paper);
}

/* the full-bleed photograph */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;   /* keep faces clear of the veiled left side */
  /* The slow drift scales about the same point the photograph is framed on,
     so the faces stay put instead of sliding out of the visible half. */
  transform-origin: 72% center;
  transition: opacity 1.1s var(--ease);
}

/* the dissolve: paper -> transparent across the middle of the section */
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* solid ivory under the whole of the copy column, then a long dissolve —
       measured so no headline character ever sits below ~92% opacity */
    linear-gradient(90deg,
      rgb(var(--paper-rgb))        0%,
      rgb(var(--paper-rgb))       34%,
      rgba(var(--paper-rgb), .97) 44%,
      rgba(var(--paper-rgb), .82) 54%,
      rgba(var(--paper-rgb), .42) 66%,
      rgba(var(--paper-rgb), .10) 76%,
      rgba(var(--paper-rgb), 0)   84%),
    linear-gradient(to top,
      rgba(var(--paper-rgb), .85)  0%,
      rgba(var(--paper-rgb), 0)   28%);
}

.hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s-8);
  min-height: clamp(500px, 72vh, 740px);
  padding-block: clamp(48px, 6vw, 92px) clamp(86px, 9vw, 132px);
}
.hero-copy { max-width: 620px; }
.hero h1 {
  font-size: var(--t-5xl);
  line-height: 1.03;
  color: var(--navy);
  font-variation-settings: "SOFT" 12, "WONK" 1, "opsz" 60;
  margin-bottom: var(--s-5);
}
.hero h1 .accent { color: var(--school-red); }
.hero .eyebrow { color: var(--school-red); }
.hero-lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }

/* hero meta strip — real facts only, never invented statistics */
.hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.hero-meta div { min-width: 100px; }
.hero-meta dt {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px;
}
.hero-meta dd { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; color: var(--navy); }

/* the navy motto card that floats over the photograph */
.hero-card {
  align-self: end;
  display: flex; align-items: center; gap: var(--s-4);
  max-width: 300px; padding: var(--s-6);
  background: var(--navy); color: #fff;
  border-radius: var(--r-img);
  box-shadow: var(--sh-3);
}
.hero-card svg { width: 40px; height: 40px; flex: none; color: var(--gold-300); }
.hero-card strong {
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.2rem; line-height: 1.22; display: block;
}

/* slide dots */
.hero-dots { display: flex; gap: 9px; margin-top: var(--s-7); }
.hero-dots button {
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand-300);
  transition: all .3s var(--ease);
}
.hero-dots button[aria-current="true"] { background: var(--gold); width: 26px; border-radius: var(--r-pill); }

/* the six-promise strip, overlapping the foot of the hero */
.hero-usp {
  position: relative; z-index: 3;
  margin-top: clamp(-72px, -6vw, -48px);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-img);
  box-shadow: var(--sh-2);
  display: grid; grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
}
.hero-usp div {
  display: grid; justify-items: center; gap: var(--s-3);
  padding: var(--s-6) var(--s-3);
  text-align: center;
  border-left: 1px solid var(--line-soft);
}
.hero-usp div:first-child { border-left: 0; }
.hero-usp svg { width: 30px; height: 30px; }
.hero-usp span {
  font-size: var(--t-sm); font-weight: 700; line-height: 1.3; color: var(--navy);
}
.hero-usp .u1 svg { color: var(--school-red); }
.hero-usp .u2 svg { color: var(--gold-500); }
.hero-usp .u3 svg { color: var(--green-400); }
.hero-usp .u4 svg { color: var(--brand-500); }
.hero-usp .u5 svg { color: var(--navy); }
.hero-usp .u6 svg { color: var(--school-red); }

@media (max-width: 1180px) {
  .hero-card { max-width: 250px; padding: var(--s-5); }
  .hero-usp { grid-template-columns: repeat(3, 1fr); }
  .hero-usp div:nth-child(4) { border-left: 0; }
  .hero-usp div:nth-child(n+4) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 980px) {
  /* no free left half any more — veil the whole photograph from the bottom */
  .hero-media img { object-position: center; transform-origin: center; }
  .hero-veil {
    background:
      linear-gradient(to bottom,
        rgba(var(--paper-rgb), .30)  0%,
        rgba(var(--paper-rgb), .80) 42%,
        rgb(var(--paper-rgb))       72%);
  }
  .hero-in {
    grid-template-columns: 1fr;
    align-items: end;
    min-height: clamp(560px, 86vh, 720px);
    padding-block: clamp(120px, 26vw, 200px) clamp(96px, 12vw, 132px);
  }
  .hero-copy { max-width: none; }
  .hero-card { align-self: start; max-width: none; }
}
@media (max-width: 620px) {
  .hero-usp { grid-template-columns: repeat(2, 1fr); }
  .hero-usp div:nth-child(odd) { border-left: 0; }
  .hero-usp div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .hero-meta { gap: var(--s-5); }
  .hero-card { display: none; }
}

/* --------------------------------------------------------------------------
   THIS WEEK STRIP
   -------------------------------------------------------------------------- */
.week { position: relative; }
.week-carousel { width: 100%; }
.week-rail {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1180px) {
  .week-rail { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .week-rail { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .week-rail { grid-template-columns: 1fr; }
}
.week-day {
  position: relative;
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  display: flex; flex-direction: column;
  min-height: 224px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.week-day:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.week-day.is-today {
  transform: translateY(-10px);
  box-shadow: 0 0 0 3px var(--gold-300), var(--sh-3);
  z-index: 1;
}
.week-day.is-today:hover { transform: translateY(-13px); }

.wd-today-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--gold-300); color: var(--on-gold);
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--sh-1);
}

.wd-top {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.wd-dow { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }

.wd-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.wd-tag svg { width: 13px; height: 13px; }
.tag-class   { background: var(--brand-50); color: var(--brand-700); }
.tag-holiday { background: var(--red-50);   color: var(--red-700); }
.tag-exam    { background: var(--gold-50);  color: var(--gold-700); }
.tag-working { background: #e9f3ed;         color: var(--green); }
.tag-break   { background: var(--paper-2);  color: var(--ink-mute); }

.wd-event { font-size: .875rem; line-height: 1.45; font-weight: 600; color: var(--ink); margin-top: auto; }
.wd-none { font-size: var(--t-xs); color: var(--ink-mute); margin-top: auto; font-style: italic; }

/* torn-edge footer, styled after the pricing-card reference: a jagged
   tear separates the white top from a status-tinted footer carrying
   the date, echoing the card model in welcome/models/cards.jpg */
.wd-foot {
  position: relative;
  padding: 22px var(--s-5) var(--s-5);
  text-align: center;
  color: #fff;
  clip-path: polygon(
    0% 0, 6.25% 8px, 12.5% 0, 18.75% 8px, 25% 0, 31.25% 8px, 37.5% 0,
    43.75% 8px, 50% 0, 56.25% 8px, 62.5% 0, 68.75% 8px, 75% 0,
    81.25% 8px, 87.5% 0, 93.75% 8px, 100% 0,
    100% 100%, 0% 100%
  );
}
/* each card in the strip carries its own accent, cycling through 7
   distinct tones so the week reads as varied at a glance, the way the
   pricing-card model uses a different colour per card */
.week-rail > .week-day:nth-child(7n+1) .wd-foot { background: var(--brand); }
.week-rail > .week-day:nth-child(7n+2) .wd-foot { background: var(--brand-500); }
.week-rail > .week-day:nth-child(7n+3) .wd-foot { background: var(--gold-700); }
.week-rail > .week-day:nth-child(7n+4) .wd-foot { background: var(--red); }
.week-rail > .week-day:nth-child(7n+5) .wd-foot { background: var(--green-700); }
.week-rail > .week-day:nth-child(7n+6) .wd-foot { background: var(--red-700); }
.week-rail > .week-day:nth-child(7n+7) .wd-foot { background: var(--ink); }

.wd-num { font-family: var(--f-display); font-size: 2.15rem; font-weight: 600; line-height: 1; }
.wd-mon { display: block; margin-top: 4px; font-size: var(--t-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

.week-day.is-today .wd-foot { padding-top: 26px; }
.week-day.is-today .wd-num { font-size: 2.4rem; }

@media (max-width: 700px) {
  .week-day { min-height: 0; }
  .week-day.is-today, .week-day.is-today:hover { transform: none; }
  .wd-top { padding: var(--s-4) var(--s-4) var(--s-5); }
  .wd-foot { padding: 20px var(--s-4) var(--s-4); }
}

/* --------------------------------------------------------------------------
   NEWS + EVENTS
   -------------------------------------------------------------------------- */
.news-feature {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 430px; display: flex; align-items: flex-end;
}
.news-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-feature .nf-body { position: relative; z-index: 2; padding: var(--s-8); color: #fff; }
.news-feature h3 { color: #fff; font-size: var(--t-2xl); margin-bottom: var(--s-3); }
.news-feature p { color: #cbdae8; font-size: .95rem; max-width: 56ch; }

.date-chip {
  position: absolute; top: var(--s-6); left: var(--s-6); z-index: 3;
  background: var(--gold); color: var(--on-gold);
  border-radius: var(--r-md); padding: 10px 14px; text-align: center;
  box-shadow: var(--sh-2);
}
.date-chip .dc-d { display: block; font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.date-chip .dc-m { display: block; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-top: 3px; }

.news-list { display: grid; gap: var(--s-5); }
.news-row {
  display: grid; grid-template-columns: 108px 1fr; gap: var(--s-5);
  align-items: center;
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--line-soft);
}
.news-row:last-child { border-bottom: 0; padding-bottom: 0; }
.news-row .ph { border-radius: var(--r-img); aspect-ratio: 4/3; }
.news-row :is(h3,h4) { font-size: 1.02rem; margin-bottom: 4px; }
.news-row :is(h3,h4) a:hover { color: var(--brand); }
.news-meta { font-size: var(--t-xs); color: var(--ink-mute); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* events card */
.events-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.activity-list { display: flex; flex-direction: column; gap: var(--s-4); }
.activity-item { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-soft); }
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-item h5 { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.activity-item p { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 2px; }
.event-row {
  display: grid; grid-template-columns: 58px 1fr; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft);
}
.event-row:last-of-type { border-bottom: 0; }
.event-cal {
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  text-align: center; overflow: hidden; align-self: start;
}
.event-cal .ec-m {
  display: block; background: var(--brand); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 0;
}
.event-cal .ec-d { display: block; font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; padding: 5px 0 6px; }
.event-row :is(h3,h4) { font-size: .96rem; line-height: 1.35; }
.event-row .event-meta { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 3px; }

/* --------------------------------------------------------------------------
   VISION / MISSION — ribbon banners, per welcome/models/vision.jpg
   -------------------------------------------------------------------------- */
.vm { position: relative; }

.vm-divider { display: flex; align-items: center; justify-content: center; gap: 10px; margin: var(--s-5) auto; }
.vm-divider span { width: 34px; height: 1px; background: var(--gold-300); }
.vm-divider i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; font-style: normal; }

.vm-ribbons { display: grid; gap: var(--s-10); margin-top: clamp(40px, 6vw, 64px); justify-content: center; }
.vm-ribbons-3 { grid-template-columns: repeat(3, minmax(180px, 210px)); }
.vm-ribbons-4 { grid-template-columns: repeat(4, minmax(180px, 210px)); }

.vm-ribbon {
  position: relative;
  padding: var(--s-7) var(--s-5) 60px;
  text-align: center; color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  min-height: 460px;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .3s var(--ease);
}
.vm-ribbon:hover { transform: translateY(-6px); }
.vm-ribbon:nth-child(odd)  { background: var(--brand); }
.vm-ribbon:nth-child(even) { background: var(--gold-700); }

/* the centre card of the 3-up ribbon (Mission) — same size as the rest, its own colour */
.vm-ribbons-3 .vm-ribbon:nth-child(2) {
  background: var(--gold);
  color: var(--on-gold);
}

/* the 4-up ribbon (about.php) — brighter yellow instead of the dark gold-700 */
.vm-ribbons-4 .vm-ribbon:nth-child(even) {
  background: var(--gold);
  color: var(--on-gold);
}

.vm-ic { width: 60px; height: 60px; margin-bottom: var(--s-5); flex: none; }
.vm-ic svg { width: 100%; height: 100%; stroke-width: 1.4; }
.vm-r-label { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; margin-bottom: var(--s-3); }
.vm-ribbons-3 .vm-r-label { text-transform: uppercase; text-decoration: underline; }
.vm-r-text { font-size: calc(var(--t-base) + .1rem); font-weight: 700; line-height: 1.6; letter-spacing: .015em; opacity: .95; }

@media (max-width: 700px) {
  .vm-ribbons-3, .vm-ribbons-4 { grid-template-columns: repeat(2, minmax(180px, 210px)); }
}
@media (max-width: 460px) {
  .vm-ribbons-3, .vm-ribbons-4 { grid-template-columns: minmax(180px, 210px); margin-inline: auto; }
  .vm-ribbon { min-height: 400px; padding-bottom: 44px; clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%); }
}

/* Serif pull-quote block, reused standalone (e.g. club outcomes) */
.vm-text {
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.25rem, 1.02rem + 1.0vw, 1.95rem);
  line-height: 1.34; color: #fff;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 40;
}

/* core values — a numbered editorial list, not seven identical cards */
.values { counter-reset: v; }
.value-row {
  counter-increment: v;
  display: grid; grid-template-columns: 62px 1fr; gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-5) 0; border-bottom: 1px solid var(--line);
}
.value-row:first-child { border-top: 1px solid var(--line); }
.value-row::before {
  content: "0" counter(v);
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 600;
  color: var(--gold); line-height: 1;
}
.value-row :is(h3,h4) { font-size: var(--t-lg); }
.value-row p { font-size: .93rem; color: var(--ink-soft); margin-top: 4px; grid-column: 1 / -1; }
@media (max-width: 520px) { .value-row { grid-template-columns: 44px 1fr; gap: var(--s-4); } }

/* --------------------------------------------------------------------------
   PRINCIPAL / PRESIDENT MESSAGE
   -------------------------------------------------------------------------- */
.msg-portrait { position: relative; }
.msg-portrait .ph { border-radius: var(--r-img); aspect-ratio: 4/5; }
.msg-portrait::before {
  content: ""; position: absolute; inset: 22px -20px -20px 22px;
  border: 2px solid var(--gold-300); border-radius: var(--r-img);
  z-index: -1;
}
.msg-sign { margin-top: var(--s-6); }
.msg-sign strong { display: block; font-family: var(--f-display); font-size: 1.15rem; }
.msg-sign span { font-size: var(--t-sm); color: var(--gold-700); font-weight: 600; }
.msg-mark { width: 46px; height: 46px; color: var(--gold-300); margin-bottom: var(--s-4); }

/* Leader message cards (President, Principal): the portrait runs the
   full height of the row instead of floating centered against empty
   space, and the letter itself scrolls inside a fixed box so one long
   message can't stretch the whole page. */
.msg-split { align-items: stretch; }
.msg-split .split-media { display: flex; }
.msg-split .msg-portrait {
  position: relative; width: 100%; min-height: 340px;
  border-radius: var(--r-img); overflow: hidden;
}
.msg-split .msg-portrait::before { content: none; }
.msg-split .msg-portrait .ph { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.msg-split .msg-portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,29,58,.9) 0%, rgba(6,29,58,.42) 45%, transparent 70%);
}
.msg-split .msg-sign {
  position: absolute; left: var(--s-6); right: var(--s-6); bottom: var(--s-6);
  margin-top: 0; z-index: 1;
}
.msg-split .msg-sign strong { color: #fff; }
.msg-split .msg-sign span { color: var(--gold-300); }

.msg-scroll {
  max-height: 360px; overflow-y: auto;
  padding-right: var(--s-4); margin-right: calc(var(--s-4) * -1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.msg-scroll::-webkit-scrollbar { width: 6px; }
.msg-scroll::-webkit-scrollbar-track { background: transparent; }
.msg-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-pill); }
@media (max-width: 700px) {
  .msg-split .msg-portrait { min-height: 260px; }
  .msg-scroll { max-height: 280px; }
}

/* --------------------------------------------------------------------------
   LEADERSHIP
   -------------------------------------------------------------------------- */
.lead-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
@media (max-width: 900px) { .lead-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .lead-grid { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; } }

.lead-card { text-align: left; }
.lead-card .ph {
  aspect-ratio: 4/5; border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.14);
  margin-bottom: var(--s-5);
}
.lead-name { font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; color: #fff; line-height: 1.25; }
.lead-role { font-size: var(--t-sm); font-weight: 700; color: var(--gold-300); margin-top: 5px; }
.lead-org  { font-size: var(--t-xs); color: #93a9c2; margin-top: 3px; line-height: 1.45; }

/* --------------------------------------------------------------------------
   TOPPERS
   -------------------------------------------------------------------------- */
.topper-lead { display: grid; grid-template-columns: 300px 1fr; gap: var(--s-8); align-items: center; }
.topper-lead .ph { aspect-ratio: 4/5; border-radius: var(--r-img); }
.topper-score { font-family: var(--f-display); font-size: var(--t-4xl); font-weight: 700; color: var(--gold-700); line-height: 1; }
.topper-others { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-top: var(--s-9); }
.topper-mini { display: flex; gap: var(--s-4); align-items: center; }
.topper-mini .ph { width: 76px; flex: none; aspect-ratio: 1/1; border-radius: var(--r-img); }
.topper-mini strong { display: block; font-size: .95rem; }
.topper-mini span { font-size: var(--t-xs); color: var(--ink-mute); }
@media (max-width: 860px) { .topper-lead { grid-template-columns: 1fr; } .topper-lead .ph { max-width: 280px; } .topper-others { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   CLUBS
   -------------------------------------------------------------------------- */
.club-card { display: block; position: relative; }
.club-card .ph { aspect-ratio: 3/2; border-radius: var(--r-img); margin-bottom: var(--s-4); }
.club-card h3 { font-size: var(--t-lg); }
.club-card h3 span { transition: color .3s var(--ease); }
.club-card:hover h3 span { color: var(--brand); }
.club-card p { font-size: .92rem; color: var(--ink-soft); margin-top: 6px; }
.club-ic {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(253,250,244,.94); color: var(--brand);
  display: grid; place-items: center;
}
.club-ic svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   GALLERY
   -------------------------------------------------------------------------- */
.gal-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); }
.gal-filter {
  min-height: 40px; padding: 0 var(--s-5);
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft);
  transition: all .26s var(--ease);
}
.gal-filter:hover { border-color: var(--gold-300); color: var(--ink); }
.gal-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.gal-grid { columns: 4 220px; column-gap: var(--s-4); }
.gal-item { break-inside: avoid; margin-bottom: var(--s-4); display: block; position: relative; border-radius: var(--r-img); overflow: hidden; }
.gal-item img { width: 100%; transition: transform .6s var(--ease); }
.gal-item:hover img { transform: scale(1.05); }
.gal-cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: var(--s-6) var(--s-4) var(--s-3);
  background: linear-gradient(to top, rgba(6,29,58,.90), transparent);
  color: #fff; font-size: var(--t-xs); font-weight: 600;
  opacity: 0; transition: opacity .3s var(--ease);
}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(6,29,58,.96);
  display: grid; place-items: center; padding: var(--s-6);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb-img { max-width: min(1100px, 92vw); max-height: 78vh; object-fit: contain; border-radius: var(--r-img); }
.lb-cap { color: #cddcea; font-size: var(--t-sm); text-align: center; margin-top: var(--s-4); max-width: 60ch; }
.lb-btn {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
  transition: background .25s var(--ease);
}
.lb-btn:hover { background: rgba(255,255,255,.24); }
.lb-btn svg { width: 24px; height: 24px; }
.lb-prev { left: var(--s-6); top: 50%; translate: 0 -50%; }
.lb-next { right: var(--s-6); top: 50%; translate: 0 -50%; }
.lb-close { top: var(--s-6); right: var(--s-6); }
@media (max-width: 620px) {
  .lb-prev { left: var(--s-3); } .lb-next { right: var(--s-3); }
  .lb-btn { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   INNER PAGE HERO + BREADCRUMBS
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding-block: clamp(48px, 7vw, 92px);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 88% 0%, rgba(240,164,19,.24), transparent 60%);
}
.page-hero img.ph-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .18;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero p { color: #c6d6e6; max-width: 58ch; margin-top: var(--s-4); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: #93a9c2; margin-bottom: var(--s-5); }
.crumbs a:hover { color: var(--gold-300); }
.crumbs svg { width: 13px; height: 13px; opacity: .6; }
.crumbs [aria-current] { color: var(--gold-300); font-weight: 600; }

/* --------------------------------------------------------------------------
   PROSE (long-form policy text from the prospectus)
   -------------------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: var(--t-2xl); margin-top: var(--s-10); }
.prose h3 { font-size: var(--t-xl); margin-top: var(--s-9); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }
.prose ul { display: grid; gap: var(--s-3); }
.prose ul li { position: relative; padding-left: 30px; color: var(--ink-soft); }
.prose ul li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--gold); rotate: 45deg;
}
.prose ol { display: grid; gap: var(--s-3); counter-reset: p; }
.prose ol li { position: relative; padding-left: 38px; color: var(--ink-soft); counter-increment: p; }
.prose ol li::before {
  content: "(" counter(p, lower-alpha) ")";
  position: absolute; left: 0; top: 0;
  font-weight: 700; font-size: var(--t-sm); color: var(--red-700);
}
.prose blockquote {
  border-left: 3px solid var(--gold); padding-left: var(--s-6);
  font-family: var(--f-display); font-size: var(--t-lg); line-height: 1.45; color: var(--ink);
}

/* definition table used for uniform / fees / policy grids */
.dl-table { border-top: 1px solid var(--line); }
.dl-table > div {
  display: grid; grid-template-columns: 210px 1fr; gap: var(--s-5);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft);
}
.dl-table dt { font-weight: 700; font-size: .92rem; color: var(--ink); }
.dl-table dd { font-size: .93rem; color: var(--ink-soft); }
@media (max-width: 620px) { .dl-table > div { grid-template-columns: 1fr; gap: 4px; } }

/* accordion (FAQ) — modern, grand: cards, not a plain list */
.faq-grand { position: relative; overflow: hidden; }
.faq-grand::before {
  content: ""; position: absolute; top: -180px; right: -160px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--gold-50), transparent 72%);
  pointer-events: none; z-index: 0;
}

.acc { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-9); }
.acc-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.acc-item:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.acc-item:has(.acc-panel.is-open) { border-color: var(--gold-300); box-shadow: var(--sh-3); }

.acc-btn {
  width: 100%; display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-6) var(--s-7);
  text-align: left; font-family: var(--f-display); font-size: var(--t-lg);
  font-weight: 600; color: var(--ink);
}
.acc-num {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--gold-50); color: var(--gold-700);
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.acc-item:has(.acc-panel.is-open) .acc-num { background: var(--gold); color: #fff; }
.acc-q { flex: 1; }
.acc-ic {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--paper-2); color: var(--gold-700);
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.acc-ic svg { width: 18px; height: 18px; }
.acc-item:has(.acc-panel.is-open) .acc-ic { background: var(--gold); color: #fff; transform: rotate(180deg); }

.acc-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .4s var(--ease), opacity .3s ease;
}
.acc-panel > p { overflow: hidden; margin: 0; padding: 0 var(--s-7) var(--s-6); color: var(--ink-soft); }
.acc-panel.is-open { grid-template-rows: 1fr; opacity: 1; }

@media (max-width: 620px) {
  .acc-btn { padding: var(--s-5); gap: var(--s-4); font-size: 1rem; }
  .acc-num { width: 34px; height: 34px; font-size: .88rem; }
  .acc-panel > p { padding: 0 var(--s-5) var(--s-5); }
}

/* document download card */
.doc-card {
  display: flex; align-items: center; gap: var(--s-5);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6);
}
.doc-ic {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-md);
  background: var(--red-50); color: var(--red-700); display: grid; place-items: center;
}
.doc-ic svg { width: 26px; height: 26px; }
.doc-card :is(h3,h4) { font-size: var(--t-lg); }
.doc-card p { font-size: var(--t-sm); color: var(--ink-mute); margin-top: 2px; }
.doc-actions { margin-left: auto; display: flex; gap: var(--s-2); flex: none; }
@media (max-width: 640px) { .doc-card { flex-wrap: wrap; } .doc-actions { margin-left: 0; width: 100%; } }

/* --------------------------------------------------------------------------
   FACULTY DIRECTORY — quiet, no heavy cards
   -------------------------------------------------------------------------- */
.fac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-7) var(--s-5); }
.fac .ph { aspect-ratio: 4/5; border-radius: var(--r-img); margin-bottom: var(--s-3); }
.fac-name { font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; line-height: 1.25; }
.fac-role { font-size: var(--t-xs); color: var(--gold-700); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }
.fac-dept { font-size: var(--t-xs); color: var(--ink-mute); margin-top: 2px; }

/* --------------------------------------------------------------------------
   LEARNING — the school reel beside the list of competitions
   -------------------------------------------------------------------------- */
.learn-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* the reel sits to the right of the copy on wide screens */
.learn-copy  { grid-column: 1; grid-row: 1; }
.learn-media { grid-column: 2; grid-row: 1; align-self: center; }
.video-fig { margin: 0; }
.video-frame {
  position: relative;
  aspect-ratio: 478 / 850;                 /* the source is filmed upright */
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: 0 22px 54px rgba(var(--navy-rgb), .26);
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-cap { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-mute); }

/* the cover, until the film is started */
.video-play {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: var(--s-4); padding: var(--s-7) var(--s-5);
  color: #fff; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(6,29,58,.10) 0%, rgba(6,29,58,.30) 45%, rgba(6,29,58,.80) 100%);
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.video-play-ic {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--gold); color: var(--on-gold);
  display: grid; place-items: center; margin-top: auto;
  box-shadow: 0 10px 26px rgba(6,29,58,.35);
  transition: transform var(--dur) var(--ease);
}
.video-play-ic svg { width: 26px; height: 26px; margin-left: 3px; }
.video-play-txt {
  font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .06em; text-transform: uppercase;
}
.video-play:hover .video-play-ic { transform: scale(1.07); }
.video-frame.is-playing .video-play { opacity: 0; visibility: hidden; }

.learn-copy .section-head { max-width: 62ch; margin-bottom: var(--s-5); }
.learn-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-7); margin-top: var(--s-7);
}
.learn-list li {
  display: flex; gap: var(--s-3); align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.learn-no {
  font-family: var(--f-display); font-weight: 600; color: var(--gold-700);
  font-size: .9rem; min-width: 2.1em; flex: none;
}

@media (max-width: 960px) {
  .learn-in { grid-template-columns: 1fr; }
  .learn-copy, .learn-media { grid-column: auto; grid-row: auto; }
  .learn-media { justify-self: center; width: min(100%, 320px); }
  .learn-list { gap: 0 var(--s-5); }
}
@media (max-width: 560px) {
  .learn-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--brand); color: #fff; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 82% 20%, rgba(240,164,19,.30), transparent 62%);
}
.cta-in {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
  padding-block: clamp(44px, 6vw, 76px);
}
.cta-in h2 { color: #fff; max-width: 20ch; }
.cta-in p { color: #bacfe4; margin-top: var(--s-3); max-width: 52ch; }

/* Admission CTA — copy, the children cut-out bleeding off the lower edge, points */
.cta-adm { --cta-adm-pad: clamp(40px, 5vw, 68px); }
.cta-adm-in {
  position: relative; z-index: 2;
  /* wider than the page rule, with a tighter side gutter, so the band's three
     parts sit closer to the edges */
  max-width: 1600px; padding-inline: clamp(16px, 2.2vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
  padding-block: var(--cta-adm-pad);
}
.cta-adm-copy h2 { color: #fff; max-width: 18ch; }
.cta-adm-copy p { color: #bacfe4; margin-top: var(--s-3); max-width: 46ch; }
.cta-adm-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* the cut-out fills the height of the band and stands on its lower edge; it is
   allowed past its column into the gaps, since its margins are transparent */
.cta-adm-art { position: relative; align-self: stretch; margin-block: calc(var(--cta-adm-pad) * -1); }
.cta-adm-art::before {
  content: ""; position: absolute; inset: 0 0 0 -24%;
  background: radial-gradient(56% 60% at 55% 68%, rgba(255,255,255,.16), transparent 70%);
}
/* anchored to the right edge of its column, so any width it takes beyond the
   column runs left into the gap and never over the points list */
.cta-adm-art img {
  position: absolute; right: 0; bottom: 0; display: block;
  width: auto; max-width: 124%; height: 100%;
  object-fit: contain; object-position: 100% 100%;
}

.cta-adm-points { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.cta-adm-points li { display: flex; align-items: center; gap: var(--s-3); color: #fff; font-weight: 600; }
.cta-adm-ic {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: rgba(240,164,19,.16); color: var(--gold-300);
  display: grid; place-items: center;
}
.cta-adm-ic svg { width: 20px; height: 20px; }

@media (max-width: 1080px) {
  .cta-adm-in { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 56px); }
  .cta-adm-copy   { grid-area: 1 / 1; }
  .cta-adm-points { grid-area: 1 / 2; }
  .cta-adm-art    {
    grid-area: 2 / 1 / 3 / -1; align-self: end; justify-self: center;
    width: min(100%, 460px); margin-top: var(--s-6); margin-bottom: calc(var(--cta-adm-pad) * -1);
  }
  .cta-adm-art img { position: static; width: 100%; max-width: 100%; height: auto; }
}
@media (max-width: 620px) {
  .cta-adm-in { grid-template-columns: 1fr; }
  .cta-adm-copy   { grid-area: 1 / 1; }
  .cta-adm-points { grid-area: 2 / 1; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .cta-adm-art    { grid-area: 3 / 1; margin-top: var(--s-2); }
  .cta-adm-points li { font-size: .9rem; }
  .cta-adm-actions .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-row { display: flex; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line-soft); }
.contact-row:last-child { border-bottom: 0; }
.contact-ic {
  width: 44px; height: 44px; flex: none; border-radius: 13px;
  background: var(--gold-50); color: var(--gold-700); display: grid; place-items: center;
}
.contact-ic svg { width: 20px; height: 20px; }
.contact-row :is(h3,h4) { font-size: 1rem; margin-bottom: 3px; }
.contact-row a, .contact-row p { font-size: .95rem; color: var(--ink-soft); display: block; }
.contact-row a:hover { color: var(--brand); }

.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 40px); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.form-2 .field + .field { margin-top: 0; }
@media (max-width: 560px) { .form-2 { grid-template-columns: 1fr; } }

.map-embed { border-radius: var(--r-img); overflow: hidden; border: 1px solid var(--line); }
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: #a7bcd6; position: relative; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-8); padding-block: clamp(48px, 6vw, 80px); }
@media (max-width: 980px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; gap: var(--s-7); } }

.foot-brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.foot-brand img { width: 56px; height: 56px; }
.foot-brand strong { font-family: var(--f-display); font-size: 1.25rem; color: #fff; display: block; line-height: 1.15; }
.foot-brand span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8095b0; }
.foot-about { font-size: .92rem; line-height: 1.65; max-width: 40ch; }

.foot-h {
  font-family: var(--f-body); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  margin-bottom: var(--s-5); position: relative; padding-bottom: var(--s-3);
}
.foot-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--gold); }

.foot-links { display: grid; gap: 11px; }
.foot-links a { font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; transition: color .25s var(--ease); }
.foot-links a::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--gold); rotate: 45deg; flex: none; opacity: .6; transition: opacity .25s var(--ease); }
.foot-links a:hover { color: #fff; }
.foot-links a:hover::before { opacity: 1; }

.foot-contact { display: grid; gap: var(--s-4); }
.foot-contact div { display: flex; gap: 11px; font-size: .92rem; line-height: 1.55; }
.foot-contact svg { width: 16px; height: 16px; color: var(--gold); flex: none; margin-top: 3px; }
.foot-contact a:hover { color: #fff; }

.foot-bar {
  border-top: 1px solid rgba(255,255,255,.10);
  padding-block: var(--s-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; font-size: var(--t-xs);
}
.foot-bar a:hover { color: #fff; }
.foot-credit { color: #8095b0; }
.foot-credit strong { color: var(--gold-300); font-weight: 700; }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 800;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: var(--on-gold);
  display: grid; place-items: center; box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: all .3s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 21px; height: 21px; }

/* --------------------------------------------------------------------------
   EMPTY STATE — shown instead of inventing content
   -------------------------------------------------------------------------- */
.empty {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-9) var(--s-6);
  text-align: center; color: var(--ink-mute);
}
.empty svg { width: 34px; height: 34px; margin: 0 auto var(--s-4); color: var(--line); }
.empty p { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   SCHOOL MANAGEMENT — coverflow carousel
   The active portrait is sharp and centred; its neighbours sit behind it,
   scaled down, blurred and dimmed, so the eye is never in doubt about which
   person is being named underneath.
   -------------------------------------------------------------------------- */
.mgmt { background: var(--navy-deep); color: #b9cee6; }
.mgmt h2 { color: #fff; }
.mgmt .eyebrow.is-light { color: var(--gold-300); }

.mgmt-head { text-align: center; max-width: 62ch; margin-inline: auto; }
.mgmt-head .eyebrow { justify-content: center; }
.mgmt-lede { margin-top: var(--s-5); color: #b9cee6; }

.mgmt-carousel { margin-top: clamp(34px, 5vw, 58px); }

.mgmt-stage {
  position: relative;
  height: 512px;
  margin-inline: auto;
  max-width: 100%;
}

.mgmt-card {
  position: absolute; top: 0; left: 50%;
  width: 290px; margin-left: -145px;
  text-align: center;
  transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
  will-change: transform, opacity, filter;
}
/* Before the script runs, the first card is the one on show. */
.mgmt-card + .mgmt-card { opacity: 0; }
.js-mgmt .mgmt-card { opacity: 1; }

.mgmt-ph {
  aspect-ratio: 4/5;
  border-radius: var(--r-img);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 24px 54px rgba(0, 0, 0, .45);
}
.mgmt-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mgmt-name { font-family: var(--f-display); font-size: 1.18rem; font-weight: 600;
             color: #fff; line-height: 1.25; margin-top: var(--s-5); }
.mgmt-role { color: var(--gold-300); font-weight: 700; font-size: var(--t-sm); margin-top: 5px; }
.mgmt-org  { color: #9db4d0; font-size: var(--t-xs); line-height: 1.55; margin-top: 7px; }

/* A neighbour is a button-like target: clicking it brings it to the centre. */
.mgmt-card[data-off="0"] { cursor: default; }
.mgmt-card:not([data-off="0"]) { cursor: pointer; }

.mgmt-nav {
  display: flex; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-7);
}
.mgmt-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .20);
  color: #fff;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.mgmt-btn:hover { background: rgba(255, 255, 255, .18); border-color: var(--gold-300); }
.mgmt-btn svg { width: 19px; height: 19px; }

.mgmt-dots { display: flex; justify-content: center; gap: 9px; margin-top: var(--s-5); }
.mgmt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  transition: background .25s var(--ease), width .25s var(--ease);
}
.mgmt-dot[aria-current="true"] { background: var(--gold-300); width: 22px; border-radius: 4px; }

@media (max-width: 900px) {
  .mgmt-stage { height: 486px; }
  .mgmt-card  { width: 262px; margin-left: -131px; }
}
@media (max-width: 560px) {
  .mgmt-stage { height: 452px; }
  .mgmt-card  { width: 224px; margin-left: -112px; }
  .mgmt-btn   { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .mgmt-card { transition: none; }
}