/*
Theme Name: Sheoran Modern
Description: Modern block theme for Sheoran International School.
Author: Sheoran School Dev
Version: 3.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Tags: custom-colors, custom-logo, full-site-editing, block-styles
Text Domain: sheoran-modern
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --forest:    #12301F;
  --pine:      #1E5C3B;
  --moss:      #4D8863;
  --sage:      #AECBA8;
  --mint:      #EEF4EA;
  --cream:     #FAF9F3;
  --gold:      #C7972F;
  --gold-dark: #8C6B18;
  --ink:       #182319;
  --ink-soft:  #57685D;
  --line:      #DEE7DA;
  --footer-bg: #0E2417;
  --white:     #ffffff;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  --maxw:   1180px;
  --radius: 14px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 2px 10px rgba(18,48,31,.08);
  --shadow-md: 0 8px 32px rgba(18,48,31,.13);
  --shadow-lg: 0 20px 56px rgba(18,48,31,.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t:    all .3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   WORDPRESS DEFAULT OVERRIDES
   ============================================================ */
/* WordPress auto-injects `margin-block-start` on every non-first child of a
   block with the `is-layout-flow` class (added by default to any core/group
   block that doesn't declare its own layout), to space out stacked content.
   Every wp:group block used as a CSS Grid card container in this theme
   (tile-grid, pillar-grid, policy-cards-grid, feature-items-grid,
   gallery-grid, about-photos-grid) still carries that class even though its
   `display` is overridden to `grid` — so WordPress's rule pushes every card
   except the first one down inside its grid cell, breaking row alignment.
   The grid's own `gap` already spaces the cards correctly, so neutralise it. */
.tile-grid > *,
.pillar-grid > *,
.pillars-grid > *,
.policy-cards-grid > *,
.feature-items-grid > *,
.gallery-grid > *,
.about-photos-grid > * {
  margin-block-start: 0;
}

/* Pages converted from one big Custom HTML block into editable blocks carry
   `legacy-flow` on their top-level groups. Their spacing is designed in this
   stylesheet, so cancel WordPress's automatic block gap inside them. Same
   specificity as WordPress's own rule (loaded earlier), so it wins — while any
   class rule further down this file that sets a margin still applies. */
.legacy-flow > *,
.legacy-flow :where(.is-layout-flow) > * {
  margin-block-start: 0;
}
.legacy-flow .wp-block-image { margin: 0; }
.legacy-flow .wp-block-list { margin-top: 0; }
/* WordPress zeroes the bottom margin of the last block in every container
   (`:root :where(.is-layout-flow) > :last-child`, which outranks a single class);
   restore the designed spacing for sections that end a container on these pages. */
.legacy-flow .is-layout-flow > .about-hero-desc:last-child { margin-bottom: 1rem; }
.legacy-flow .is-layout-flow > .features-section:last-child { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.legacy-flow .is-layout-flow > .ls-82fd16:last-child { margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.legacy-flow .is-layout-flow > .policy-card:last-child { margin-bottom: 1.75rem; }
.legacy-flow .is-layout-flow > .section-divider:last-child { margin-bottom: 1.5rem; }
.legacy-flow .is-layout-flow > .team-leader-card:last-child { margin-bottom: 2.5rem; }
.legacy-flow .team-list > .team-leader-card:last-child { margin-bottom: 1.75rem; }

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pine); text-decoration: none; transition: var(--t); }
a:hover { color: var(--forest); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--forest);
}
ul { list-style: none; padding: 0; margin: 0; }
button { cursor: pointer; }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  background: linear-gradient(90deg, #9C7620 0%, #7A5710 100%);
  height: 40px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 400;
}
.announcement-bar .ticker-label {
  background: var(--forest);
  color: var(--white);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.15);
}
.announcement-bar .ticker-wrapper {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-width: 0;
}
.announcement-bar .ticker-content {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
  color: rgba(255,255,255,.93);
  font-size: 0.75rem;
  font-weight: 500;
  padding-left: 1rem;
  animation: ticker 34s linear infinite;
  will-change: transform;
}
.announcement-bar:hover .ticker-content { animation-play-state: paused; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.nlp-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--forest);
  color: rgba(255,255,255,.9) !important;
  padding: 0 14px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-left: 1px solid rgba(255,255,255,.15);
  white-space: nowrap;
  flex-shrink: 0;
  height: 100%;
  text-decoration: none;
  transition: background .22s ease, color .22s ease;
}
.nlp-btn:hover { background: var(--pine); color: #fff !important; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(250,249,243,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 28px rgba(18,48,31,.09);
}
.header-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* --- Brand ------------------------------------------------- */
.header-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity .25s ease;
}
.header-brand:hover { opacity: .85; }
.header-brand img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  transition: width .3s ease, height .3s ease;
}
.site-header.scrolled .header-brand img { width: 42px; height: 42px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-heading);
  font-size: clamp(.82rem, 1.6vw, 1.05rem);
  font-weight: 600;
  color: var(--forest);
  line-height: 1.2;
}
.brand-sub {
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--moss);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 3px;
}
.brand-affil {
  font-size: .55rem;
  color: var(--ink-soft);
  letter-spacing: .03em;
  margin-top: 2px;
}

/* ============================================================
   DESKTOP NAV
   ============================================================ */
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1;
  justify-content: flex-end;
}

/* Top-level list */
.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level links */
.nav-list > li { position: relative; }
.nav-list > li > a.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
  position: relative;
}
.nav-list > li > a.nav-link::after {
  content: '';
  position: absolute;
  left: 0.65rem; right: 0.65rem;
  bottom: 2px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform .25s var(--ease);
  transform-origin: left;
}
.nav-list > li > a.nav-link:hover,
.nav-list > li.active > a.nav-link { color: var(--forest); background: var(--mint); }
.nav-list > li > a.nav-link:hover::after { transform: scaleX(1); }

.drop-arrow {
  opacity: .5;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.nav-list > li.has-drop:hover .drop-arrow { transform: rotate(180deg); }

/* Dropdown */
.nav-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 210px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s var(--ease), visibility .22s;
  z-index: 500;
  list-style: none;
}
.nav-list > li.has-drop:hover .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-drop li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .84rem;
  color: var(--ink-soft);
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.nav-drop li a:hover {
  background: var(--mint);
  color: var(--forest);
  padding-left: 18px;
}

/* Desktop Apply button */
.nav-apply-desk {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--pine);
  color: var(--white);
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(30,92,59,.28);
  transition: background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.nav-apply-desk:hover {
  background: var(--forest);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(18,48,31,.32);
}

/* ============================================================
   HAMBURGER BUTTON
   ============================================================ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  flex-shrink: 0;
  padding: 0;
  transition: border-color .25s ease, background .25s ease;
  z-index: 310;
}
.hamburger:hover { border-color: var(--moss); background: var(--mint); }
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--forest);
  border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s ease;
}
/* Animate to X */
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE BACKDROP
   ============================================================ */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12,26,18,.6);
  z-index: 490;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.nav-backdrop.show {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(340px, 90vw);
  height: 100dvh;
  background: var(--white);
  z-index: 500;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 48px rgba(18,48,31,.22);
  transition: right .38s var(--ease);
  overflow: hidden;
}
.mobile-drawer.is-open { right: 0; }

/* Drawer header bar */
.drawer-header {
  background: var(--forest);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.drawer-brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--white);
}
.drawer-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(.85);
  flex-shrink: 0;
}
.drawer-brand span {
  font-family: var(--font-heading);
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  line-height: 1.25;
}
.drawer-close {
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease;
}
.drawer-close:hover { background: rgba(255,255,255,.22); color: var(--white); }

/* Drawer nav area */
.drawer-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Drawer list */
.drawer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drawer-list > li {
  border-bottom: 1px solid var(--line);
}
/* Plain links */
.drawer-list > li > a {
  display: block;
  padding: .95rem 1.5rem;
  font-size: .94rem;
  font-weight: 600;
  color: var(--ink);
  transition: background .18s ease, color .18s ease;
}
.drawer-list > li > a:hover { background: var(--mint); color: var(--pine); }

/* Submenu toggle button */
.drawer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .95rem 1.5rem;
  font-family: var(--font-body);
  font-size: .94rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  text-align: left;
  transition: background .18s ease, color .18s ease;
}
.drawer-toggle:hover { background: var(--mint); color: var(--pine); }
.drawer-toggle .toggle-icon {
  flex-shrink: 0;
  opacity: .5;
  transition: transform .28s var(--ease);
}
.drawer-item.is-open .drawer-toggle { color: var(--pine); background: var(--mint); }
.drawer-item.is-open .drawer-toggle .toggle-icon { transform: rotate(180deg); opacity: 1; }

/* Submenu list */
.drawer-sub {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  background: rgba(238,244,234,.5);
  transition: max-height .35s ease;
}
.drawer-item.is-open .drawer-sub { max-height: 400px; }
.drawer-sub li { border-top: 1px solid rgba(0,0,0,.05); }
.drawer-sub li a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.5rem .75rem 2.25rem;
  font-size: .86rem;
  color: var(--ink-soft);
  transition: background .18s ease, color .18s ease;
}
.drawer-sub li a::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--moss);
  flex-shrink: 0;
}
.drawer-sub li a:hover { background: var(--mint); color: var(--forest); }

/* Drawer CTA bottom */
.drawer-cta {
  padding: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex-shrink: 0;
  background: var(--cream);
}
.drawer-apply {
  display: block;
  text-align: center;
  background: var(--pine);
  color: var(--white) !important;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: 0 6px 20px rgba(30,92,59,.3);
  transition: background .25s ease, transform .25s var(--ease);
}
.drawer-apply:hover { background: var(--forest); color: var(--white) !important; transform: translateY(-2px); }
.drawer-call {
  display: block;
  text-align: center;
  color: var(--ink-soft);
  font-size: .82rem;
  padding: .5rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: background .2s ease, color .2s ease;
}
.drawer-call:hover { background: var(--mint); color: var(--pine); }

/* ============================================================
   HIDE DRAWER + SHOW HAMBURGER breakpoints
   ============================================================ */
@media (min-width: 1241px) {
  .hamburger { display: none; }
  .mobile-drawer { display: none; }
  .nav-backdrop { display: none; }
}
@media (max-width: 1240px) {
  .hamburger { display: flex; }
  .main-nav { display: none; }
}

/* ============================================================
   ANNOUNCEMENT BAR RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .announcement-bar { height: 36px; }
  .announcement-bar .ticker-label { padding: 0 8px; font-size: .6rem; }
  .announcement-bar .ticker-content { font-size: .7rem; gap: 2rem; padding-left: .75rem; }
  .nlp-btn { padding: 0 10px; font-size: .63rem; }
}
@media (max-width: 420px) {
  .announcement-bar .ticker-label { display: none; }
  .announcement-bar .ticker-content { font-size: .68rem; }
  .nlp-btn { padding: 0 8px; font-size: .6rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.sh-hero-slider-wrap {
  position: relative;
  min-height: clamp(400px, 72vh, 740px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--forest);
}
.sh-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: 0;
}
.sh-hero-slide.active { opacity: 1; }
figure.sh-hero-slide { margin: 0 !important; }
.sh-hero-slider-wrap .sh-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.sh-hero-overlay,
.sh-hero-slider-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(14,36,23,.95) 0%, rgba(14,36,23,.75) 48%, rgba(14,36,23,.35) 100%),
    linear-gradient(0deg, rgba(14,36,23,.55) 0%, transparent 42%);
}
.sh-hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(5rem,12vw,9rem) clamp(1.25rem,5vw,3.5rem) clamp(3rem,8vw,5rem);
  max-width: 700px;
  animation: heroUp .9s var(--ease) both;
}
@keyframes heroUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sh-hero-subtitle {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--sage);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .9rem;
  animation: heroFade .8s .2s var(--ease) both;
}
.sh-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1rem;
  animation: heroFade .8s .35s var(--ease) both;
}
.sh-hero-title span,
.sh-hero-title strong { color: var(--gold); font-weight: inherit; }
.sh-hero-text {
  font-size: clamp(.93rem, 2vw, 1.1rem);
  color: rgba(255,255,255,.85);
  line-height: 1.7;
  max-width: 500px;
  margin-bottom: 2rem;
  animation: heroFade .8s .5s var(--ease) both;
}
.sh-hero-actions {
  display: flex !important;
  gap: .85rem;
  flex-wrap: wrap;
  animation: heroFade .8s .65s var(--ease) both;
}
@keyframes heroFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sh-btn-primary,
.wp-block-button.sh-btn-primary .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--gold);
  color: #2A1F05;
  border-radius: 999px;
  padding: .85rem 1.85rem;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: 0 6px 22px rgba(199,151,47,.4);
  transition: transform .3s var(--ease), box-shadow .3s ease;
  white-space: nowrap;
}
/* On image-block buttons the class sits on the wrapper div — keep the pill on the link only. */
.wp-block-button.sh-btn-primary,
.wp-block-button.sh-btn-outline {
  background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0;
}
.wp-block-button.sh-btn-primary .wp-block-button__link:hover { background: var(--gold); }
.sh-btn-primary:hover,
.wp-block-button.sh-btn-primary .wp-block-button__link:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(199,151,47,.52); color: #2A1F05; }
.sh-btn-outline,
.wp-block-button.sh-btn-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: var(--white);
  border-radius: 999px;
  padding: .85rem 1.85rem;
  font-weight: 600;
  font-size: .9rem;
  border: 2px solid rgba(255,255,255,.42);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--ease);
  white-space: nowrap;
}
.sh-btn-outline:hover,
.wp-block-button.sh-btn-outline .wp-block-button__link:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.82); color: var(--white); transform: translateY(-2px); }

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip { background: var(--forest); position: relative; overflow: hidden; }
.stats-strip::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 200px at 50% 50%, rgba(174,203,168,.08), transparent 70%);
  pointer-events: none;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--maxw);
  margin-inline: auto;
}
.stat-block {
  padding: 2.25rem 1.25rem;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  transition: background .3s ease;
}
.stat-block:hover { background: rgba(255,255,255,.04); }
.stat-block:first-child { border-left: none; }
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem,4vw,2.6rem);
  font-weight: 600; color: var(--sage); display: block; line-height: 1;
  transition: color .3s ease;
}
.stat-block:hover .stat-number { color: var(--gold); }
.stat-block p { margin: 0; }
.stat-label { font-size: .74rem; color: rgba(255,255,255,.7); letter-spacing: .07em; text-transform: uppercase; }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section-wrap {
  background: var(--white);
  padding: clamp(3.5rem,7vw,6.5rem) clamp(1rem,4vw,2rem);
}
.about-columns {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  /* fr units (not %) so the column widths correctly account for `gap` —
     percentage columns that sum to 100% plus a gap overflow the container
     by the gap amount, which cut off the About text at certain widths. */
  grid-template-columns: 0.45fr 0.55fr;
  gap: clamp(2rem,5vw,4.5rem);
  align-items: center;
}
.section-eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pine); margin-bottom: .75rem; display: block;
}
.section-eyebrow--center { text-align: center; }
.about-heading, .section-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem,3.5vw,2.5rem);
  color: var(--forest); line-height: 1.2; margin-bottom: .5rem;
}
.section-heading--center { text-align: center; }
.section-divider {
  width: 52px; height: 4px;
  background: linear-gradient(90deg, var(--pine), var(--gold));
  border-radius: 2px; margin-bottom: 1.5rem;
}
.section-divider--center { margin-inline: auto; }
.about-para { color: var(--ink-soft); line-height: 1.75; margin-bottom: 1rem; font-size: .95rem; }

/* WP button block */
.wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .8rem 1.85rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  cursor: pointer; transition: var(--t); border: 2px solid transparent;
  text-decoration: none; background: var(--pine); color: var(--white);
  box-shadow: 0 4px 16px rgba(30,92,59,.22);
}
.wp-block-button .wp-block-button__link:hover {
  background: var(--forest); color: var(--white);
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(18,48,31,.28);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--white);
  border-color: rgba(255,255,255,.45); box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8);
  color: var(--white); transform: translateY(-2px);
}
.btn-gold { background: var(--gold) !important; color: #2A1F05 !important; border-color: var(--gold) !important; box-shadow: 0 6px 20px rgba(199,151,47,.38) !important; }
.btn-gold:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 30px rgba(199,151,47,.5) !important; }

/* ============================================================
   CAROUSEL
   ============================================================ */
.sh-carousel { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.sh-carousel-track { display: flex; transition: transform .55s var(--ease); }
.sh-carousel-slide { min-width: 100%; flex-shrink: 0; margin: 0 !important; }
.sh-carousel-track > * { margin-block-start: 0 !important; }
.sh-carousel-track > .sh-carousel-slide { flex: 0 0 100%; width: 100%; }

/* Homepage blocks: cancel WordPress's default vertical gap between sibling blocks,
   which otherwise opens white strips between sections and misaligns grid items. */
body.home main.wp-block-group > *,
.sh-hero-slider-wrap > *,
.stats-strip > *, .stats-inner > *, .stat-block > *,
.about-section-wrap > *, .about-columns > *, .about-img-col > *, .sh-carousel > *,
.facilities-section-wrap > *, .facilities-inner > *, .fac-grid > * {
  margin-block-start: 0 !important;
}
.sh-carousel .sh-carousel-slide img { width: 100%; height: clamp(220px,35vw,430px); object-fit: cover; display: block; }
.sh-carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(250,249,243,.92); border: 1px solid var(--line);
  border-radius: 50%; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: background .25s ease, transform .3s var(--ease), color .25s ease;
  z-index: 2; color: var(--forest);
}
.sh-carousel-btn:hover { background: var(--pine); color: var(--white); transform: translateY(-50%) scale(1.1); }
.sh-carousel-btn.prev { left: .75rem; }
.sh-carousel-btn.next { right: .75rem; }
.sh-carousel-dots { position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.sh-carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); border: none; padding: 0; transition: background .3s ease, width .3s var(--ease); }
.sh-carousel-dot.active { background: var(--gold); width: 24px; border-radius: 4px; }

/* ============================================================
   FACILITIES — photo tile grid (site.html style)
   ============================================================ */
.facilities-section-wrap { background: var(--mint); padding: clamp(3.5rem,7vw,6.5rem) clamp(1rem,4vw,2rem); }
.facilities-inner { max-width: var(--maxw); margin-inline: auto; }
.fac-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 170px;
  gap: 18px;
  margin-top: 2rem;
}
.fac-tile {
  position: relative;
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.fac-tile:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 34px rgba(18, 48, 31, 0.22);
}
.fac-section-head { text-align: center; margin-bottom: 2rem; position: relative; z-index: 2; }
.fac-bg {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
  background-size: cover;
  background-position: center;
  transition: transform .7s ease;
}
.fac-tile .fac-bg img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.fac-tile:hover .fac-bg { transform: scale(1.09); }
.fac-tile > * { margin-block-start: 0 !important; }
.fac-overlay,
.fac-tile::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fac-1 .fac-overlay, .fac-1::after { background: linear-gradient(165deg, rgba(30,92,59,.5) 0%, rgba(14,36,23,.3) 42%, rgba(14,36,23,.94) 100%); }
.fac-2 .fac-overlay, .fac-2::after { background: linear-gradient(165deg, rgba(77,136,99,.5) 0%, rgba(14,36,23,.28) 42%, rgba(14,36,23,.92) 100%); }
.fac-3 .fac-overlay, .fac-3::after { background: linear-gradient(165deg, rgba(44,107,71,.5) 0%, rgba(14,36,23,.28) 42%, rgba(14,36,23,.92) 100%); }
.fac-4 .fac-overlay, .fac-4::after { background: linear-gradient(165deg, rgba(199,151,47,.48) 0%, rgba(14,36,23,.32) 42%, rgba(14,36,23,.92) 100%); }
.fac-5 .fac-overlay, .fac-5::after { background: linear-gradient(165deg, rgba(77,136,99,.46) 0%, rgba(14,36,23,.3) 42%, rgba(14,36,23,.92) 100%); }
.fac-6 .fac-overlay, .fac-6::after { background: linear-gradient(165deg, rgba(58,122,84,.46) 0%, rgba(14,36,23,.3) 42%, rgba(14,36,23,.92) 100%); }
.fac-icon {
  position: absolute !important;
  margin: 0 !important;
  top: 18px; left: 18px;
  z-index: 2;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.fac-tile h4 {
  position: relative; z-index: 2;
  font-size: 17px;
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  color: #fff;
}
.fac-tile p:not(.fac-icon) {
  position: relative; z-index: 2;
  font-size: 12.5px;
  color: rgba(255,255,255,.85);
  margin: 3px 0 0;
  line-height: 1.4;
}
.fac-1 { grid-column: span 3; grid-row: span 2; }
.fac-2 { grid-column: span 3; }
.fac-3 { grid-column: span 3; }
.fac-4 { grid-column: span 2; }
.fac-5 { grid-column: span 2; }
.fac-6 { grid-column: span 2; }

/* ============================================================
   ADMISSIONS CTA
   ============================================================ */
.admissions-cta {
  background: linear-gradient(135deg, var(--forest) 0%, var(--pine) 60%, var(--moss) 100%);
  padding: clamp(3rem,8vw,5.5rem) clamp(1rem,4vw,2rem);
  position: relative; overflow: hidden; text-align: center;
}
.admissions-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 350px at 10% 30%, rgba(174,203,168,.14), transparent 65%);
  pointer-events: none;
}
.cta-content, .admissions-cta-inner {
  max-width: 680px; margin-inline: auto; position: relative; z-index: 1; text-align: center;
}
.cta-heading, .admissions-cta h2, .admissions-cta-inner h2 {
  font-family: var(--font-heading); font-size: clamp(1.6rem,4vw,2.6rem); color: var(--white); margin-bottom: 1rem;
}
.cta-text, .admissions-cta-inner p {
  color: rgba(255,255,255,.82); font-size: 1.05rem; line-height: 1.68; max-width: 540px; margin: 0 auto 2rem;
}
.cta-btns, .cta-buttons {
  display: flex !important; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 1.5rem;
}

.btn-gold,
.btn-outline-white {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 2rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  line-height: 1.3; cursor: pointer; transition: all .25s var(--ease);
  text-decoration: none !important; border: 2px solid transparent; box-sizing: border-box;
}

.btn-gold {
  background: var(--gold) !important; color: #2A1F05 !important;
  border-color: var(--gold) !important; box-shadow: 0 6px 20px rgba(199,151,47,.38) !important;
}
.btn-gold:hover {
  background: #B28325 !important; border-color: #B28325 !important;
  color: #FFFFFF !important; transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(199,151,47,.5) !important;
}

.btn-outline-white {
  background: transparent !important; color: var(--white) !important;
  border: 2px solid rgba(255,255,255,.6) !important; box-shadow: none !important;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.18) !important; border-color: var(--white) !important;
  color: var(--white) !important; transform: translateY(-3px) !important;
}

/* When btn-gold / btn-outline-white sit on a real wp:button block's outer
   <div class="wp-block-button">, the inner .wp-block-button__link already
   renders its own pill shape (from the base wp:button styles above), so
   giving the outer div a pill too produced a double ring around the button.
   Reset the wrapper and move the colour/border onto the inner link instead. */
.wp-block-button.btn-gold,
.wp-block-button.btn-outline-white {
  background: none !important; padding: 0 !important;
  border: none !important; box-shadow: none !important;
}
.wp-block-button.btn-gold .wp-block-button__link {
  background: var(--gold) !important; color: #2A1F05 !important;
  border-color: var(--gold) !important; box-shadow: 0 6px 20px rgba(199,151,47,.38) !important;
}
.wp-block-button.btn-gold:hover .wp-block-button__link {
  background: #B28325 !important; border-color: #B28325 !important;
  color: #FFFFFF !important; box-shadow: 0 10px 30px rgba(199,151,47,.5) !important;
}
.wp-block-button.btn-outline-white .wp-block-button__link {
  background: transparent !important; color: var(--white) !important;
  border: 2px solid rgba(255,255,255,.6) !important; box-shadow: none !important;
}
.wp-block-button.btn-outline-white:hover .wp-block-button__link {
  background: rgba(255,255,255,.18) !important; border-color: var(--white) !important;
  color: var(--white) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--footer-bg); color: rgba(255,255,255,.75); }
.footer-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3rem,6vw,5rem) clamp(1rem,4vw,2rem) 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.25fr;
  gap: 2.5rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-logo { width: 60px; margin-bottom: .75rem; filter: brightness(0) invert(.88); }
.footer-brand .wp-block-image { margin: 0 0 .5rem; }
.footer-brand-title { font-family: var(--font-heading); font-size: 1rem; color: var(--sage); margin-bottom: 1rem; font-weight: 600; }
.footer-brand-desc { font-size: .84rem; color: rgba(255,255,255,.6); line-height: 1.72; max-width: 260px; }
.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.footer-social a {
  width: 36px; height: 36px; background: rgba(255,255,255,.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: .8rem; text-decoration: none; font-style: normal;
  transition: background .25s ease, transform .3s var(--ease);
}
.footer-social a:hover { background: var(--gold); color: #2A1F05; transform: translateY(-4px); }
.footer-col h4 {
  font-family: var(--font-heading); font-size: .9rem; color: var(--white);
  margin-bottom: 1.1rem; padding-bottom: .5rem; position: relative; font-weight: 600;
}
.footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--gold); border-radius: 1px; }
.footer-col ul li { margin-bottom: .4rem; }
.footer-col ul li a {
  font-size: .84rem; color: rgba(255,255,255,.62);
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  transition: color .25s ease, padding-left .25s ease;
}
.footer-col ul li a::before { content: '›'; color: var(--gold); font-size: 1rem; }
.footer-col ul li a:hover { color: var(--sage); padding-left: 4px; }
.footer-contact-details p { font-size: .84rem; color: rgba(255,255,255,.68); margin-bottom: .65rem; line-height: 1.62; }
.footer-contact-details a { color: var(--gold); word-break: break-word; }
.footer-contact-details a:hover { color: var(--sage); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .75rem; padding: 1.25rem 0 1.75rem;
  font-size: .77rem; color: rgba(255,255,255,.38);
}
.footer-bottom a { color: rgba(255,255,255,.45); }
.footer-bottom a:hover { color: var(--sage); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   OTHER COMPONENTS
   ============================================================ */
.sh-accordion { border-bottom: 1px solid var(--line); }
.sh-accordion:first-of-type { border-top: 1px solid var(--line); }
.sh-accordion-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: none; padding: 1.1rem .5rem; font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--forest); cursor: pointer; text-align: left; transition: color .25s ease; }
.sh-accordion-btn:hover { color: var(--pine); }
.sh-accordion-btn .acc-icon { font-style: normal; font-size: 1.25rem; color: var(--moss); flex-shrink: 0; margin-left: 1rem; transition: transform .35s var(--ease); }
.sh-accordion-btn.active .acc-icon { transform: rotate(45deg); color: var(--gold); }
.sh-accordion-body { max-height: 0; overflow: hidden; transition: max-height .42s ease; }
.sh-accordion-body.open { max-height: 500px; }
.sh-accordion-body p { color: var(--ink-soft); font-size: .9rem; line-height: 1.72; padding: 0 .5rem 1.25rem; }

.sh-fee-table { width: 100%; border-collapse: collapse; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.sh-fee-table th { background: var(--forest); color: var(--white); padding: .9rem 1rem; text-align: left; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }
.sh-fee-table td { padding: .82rem 1rem; border-bottom: 1px solid var(--line); font-size: .875rem; }
.sh-fee-table tr:nth-child(even) td { background: var(--mint); }
.sh-fee-table tr:hover td { background: rgba(199,151,47,.07); }
.sh-fee-table .fee-amount { font-weight: 700; color: var(--forest); }

.testimonial-card { background: var(--cream); border-radius: var(--radius); padding: 2.25rem; border: 1px solid var(--line); border-left: 4px solid var(--gold); transition: transform .35s var(--ease), box-shadow .35s ease; }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.testimonial-card p { font-family: var(--font-heading); font-style: italic; color: var(--forest); font-size: 1.05rem; line-height: 1.6; margin-bottom: 1rem; }

.sh-toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9998; display: flex; flex-direction: column; gap: .65rem; }
.sh-toast { background: var(--cream); border-radius: var(--radius-md); padding: .9rem 1.25rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .65rem; min-width: 260px; max-width: 360px; border-left: 4px solid var(--pine); transform: translateX(120%); transition: transform .4s var(--ease); font-size: .875rem; font-weight: 600; }
.sh-toast.show { transform: translateX(0); }
.sh-toast.error { border-left-color: #ef4444; }
.sh-toast.warning { border-left-color: var(--gold); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sh-spinner { width: 40px; height: 40px; border: 4px solid rgba(30,92,59,.15); border-top-color: var(--pine); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* 1100px — footer 2-col */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* 1000px — tighten nav */
@media (max-width: 1000px) {
  .nav-list > li > a.nav-link { padding: .5rem .45rem; font-size: .8rem; }
  .nav-apply-desk { padding: .5rem 1rem; font-size: .78rem; }
}

/* 900px — tablet / mobile nav kicks in */
@media (max-width: 900px) {
  .header-inner { height: 64px; }
  .about-columns { grid-template-columns: 1fr; }
  .about-img-col { max-width: 520px; margin-inline: auto; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat-block:nth-child(3) { border-left: none; }
  .fac-grid { grid-template-columns: repeat(2, 1fr); }
  .fac-1 { grid-column: span 2; }
  .fac-2, .fac-3, .fac-4, .fac-5, .fac-6 { grid-column: span 1; }
}

/* 768px — mobile */
@media (max-width: 768px) {
  .header-inner { height: 60px; }
  .header-brand img { width: 42px; height: 42px; }
  .brand-sub, .brand-affil { display: none; }
  .brand-name { font-size: .88rem; }

  .sh-hero-slider-wrap { min-height: 340px; }
  .sh-hero-content { padding: 4.5rem 1.25rem 2.5rem; }
  .sh-hero-title { font-size: clamp(1.7rem,6vw,2.3rem); }
  .sh-hero-text { font-size: .9rem; max-width: 100%; }
  .sh-hero-actions { flex-direction: column; align-items: flex-start; gap: .65rem; }
  .sh-btn-primary, .sh-btn-outline { width: 100%; max-width: 320px; justify-content: center; padding: .8rem 1.5rem; }
  .sh-hero-actions .wp-block-button__link { width: 100%; justify-content: center; }

  .stat-block { padding: 1.75rem 1rem; }
  .stat-number { font-size: 1.8rem; }

  .fac-grid { grid-template-columns: 1fr; }
  .fac-tile { grid-column: span 1 !important; grid-row: auto !important; height: 170px; }

  .admissions-cta { padding: 3rem 1.25rem; }
  .cta-btns { flex-direction: column; align-items: center; gap: .75rem; }
  .cta-btns .wp-block-button { width: 100%; max-width: 320px; }
  .cta-btns .wp-block-button__link { width: 100%; justify-content: center; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .sh-fee-table { font-size: .8rem; }
  .sh-fee-table th, .sh-fee-table td { padding: .65rem .75rem; }
}

/* 480px */
@media (max-width: 480px) {
  .header-brand img { width: 36px; height: 36px; }
  .stat-block { padding: 1.4rem .75rem; }
  .stat-number { font-size: 1.55rem; }
  .sh-carousel .sh-carousel-slide img { height: 200px; }
  .sh-btn-primary, .sh-btn-outline { max-width: 100%; }
}

/* 360px */
@media (max-width: 360px) {
  .brand-name { font-size: .8rem; }
  .sh-hero-title { font-size: 1.5rem; }
  .cta-heading { font-size: 1.4rem; }
  .stat-number { font-size: 1.4rem; }
}

/* ============================================================
   WP BLOCK OVERRIDES
   ============================================================ */
.wp-block-group.alignfull { width: 100%; max-width: 100%; }
.wp-block-columns.alignwide { max-width: var(--maxw); margin-inline: auto; }
.wp-block-image img { max-width: 100%; height: auto; }
.entry-content > * + * { margin-top: 1.5rem; }

/* ============================================================
   POPUP NOTIFICATION MODAL
   ============================================================ */
.site-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.site-popup-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.site-popup {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-width: 380px;
  width: 90vw;
  max-height: 85vh;
  background: var(--white);
  border-radius: 16px;
  padding: 14px;
  border-radius: 14px;
  padding: 12px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  transform: scale(.88) translateY(30px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  transform: scale(.88) translateY(25px);
  transition: transform .45s var(--ease), opacity .4s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-popup-overlay.is-visible .site-popup {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.site-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  width: 32px;
  height: 32px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(18, 48, 31, 0.85);
  border: 2px solid rgba(255, 255, 255, .8);
  background: rgba(18, 48, 31, 0.88);
  border: 2px solid rgba(255, 255, 255, .9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: background .25s ease, transform .25s var(--ease);
}
.site-popup-close:hover {
  background: var(--forest);
  transform: rotate(90deg) scale(1.05);
}
.site-popup-link { display: block; line-height: 0; border-radius: 10px; overflow: hidden; }
.site-popup-link {
  display: block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}
.site-popup-img {
  width: 100%;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  border-radius: 8px;
}

/* Responsive popup */
@media (max-width: 520px) {
  .site-popup { max-width: 92vw; border-radius: 14px; padding: 10px; }
  .site-popup-close { top: 4px; right: 4px; width: 28px; height: 28px; }
  .site-popup-close svg { width: 14px; height: 14px; }
  .site-popup { max-width: 330px; width: 88vw; max-height: 80vh; border-radius: 12px; padding: 10px; }
  .site-popup-img { max-height: 65vh; }
  .site-popup-close { top: 4px; right: 4px; width: 26px; height: 26px; }
  .site-popup-close svg { width: 13px; height: 13px; }
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
  transition: transform .3s var(--ease), box-shadow .3s ease, background .3s ease;
  animation: wa-pulse 2.5s ease infinite;
}
.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 10px 32px rgba(37, 211, 102, .55);
  background: #1EB954;
}
.whatsapp-float svg { flex-shrink: 0; }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37, 211, 102, .45); }
  50%      { box-shadow: 0 6px 24px rgba(37, 211, 102, .45), 0 0 0 12px rgba(37, 211, 102, .15); }
}
@media (max-width: 480px) {
  .whatsapp-float { width: 50px; height: 50px; bottom: 1rem; right: 1rem; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ============================================================
   INNER PAGES — MINIMALIST & RESPONSIVE DESIGN
   ============================================================ */
.page-banner {
  background: linear-gradient(135deg, #12301F 0%, #1E5C3B 60%, #4D8863 100%);
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1rem, 4vw, 2rem) clamp(1.75rem, 3vw, 2.25rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-banner .section-eyebrow {
  color: var(--sage);
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.page-banner h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  color: var(--white);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.page-banner-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  max-width: 600px;
  margin: 0 auto 1rem;
  font-weight: 400;
  line-height: 1.6;
}
.page-breadcrumbs {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.page-breadcrumbs a {
  color: var(--gold);
  font-weight: 500;
}
.page-breadcrumbs a:hover {
  color: var(--white);
}

.about-page-wrap {
  padding: clamp(2.75rem, 5vw, 5rem) clamp(1rem, 3.5vw, 1.75rem);
  background: var(--white);
}
.about-page-inner {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Intro Hero Block */
.about-hero-block {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.about-hero-lead {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  color: var(--forest);
  margin-bottom: 1rem;
  font-weight: 600;
}
.about-hero-desc {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.about-badge-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 4px 20px rgba(18, 48, 31, 0.04);
}
.about-badge-card h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--forest);
  margin-bottom: 0.65rem;
}
.about-badge-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* 4 Pillars */
.pillars-section {
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.pillar-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.65rem 1.35rem;
  transition: transform .3s var(--ease), box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.pillar-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(18, 48, 31, 0.08);
}
.pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
}
.pillar-card:nth-child(1) .pillar-icon { background: rgba(199, 151, 47, 0.12); color: var(--gold); }
.pillar-card:nth-child(2) .pillar-icon { background: rgba(30, 92, 59, 0.1); color: var(--pine); }
.pillar-card:nth-child(3) .pillar-icon { background: rgba(77, 136, 99, 0.12); color: var(--moss); }
.pillar-card:nth-child(4) .pillar-icon { background: rgba(18, 48, 31, 0.1); color: var(--forest); }
.pillar-card h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--forest);
  margin-bottom: 0.5rem;
  letter-spacing: 0.03em;
  font-weight: 600;
}
.pillar-card p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink-soft);
  flex: 1;
}

/* Feature Showcase Grid */
.features-section {
  background: var(--mint);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.features-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.feature-item-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 1.65rem;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(18, 48, 31, 0.03);
  transition: transform .25s ease;
}
.feature-item-card:hover {
  transform: translateY(-3px);
}
.feature-item-card h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--forest);
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.feature-item-card p {
  font-size: 0.86rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* Photos Grid */
.about-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.about-photo-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(18, 48, 31, 0.06);
  border: 1px solid var(--line);
  height: 220px;
}
/* The photo may be a plain <img> or a real wp:image block (figure.wp-block-image);
   constrain the figure to fill the box too, then size the img inside it. */
.about-photo-item .wp-block-image { width: 100%; height: 100%; margin: 0; }
.about-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.about-photo-item:hover img {
  transform: scale(1.06);
}

/* Vision & Mission Grid */
.vision-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 1.75rem;
}
.vision-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s ease;
}
.vision-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(18, 48, 31, 0.08);
}
.vision-card--green { border-top: 4px solid var(--pine); }
.vision-card--gold { border-top: 4px solid var(--gold); }
.vision-card-icon {
  font-size: 2.25rem;
  margin-bottom: 0.85rem;
}
.vision-card h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--forest);
  margin-bottom: 0.85rem;
}
.vision-card p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 0.85rem;
}

/* Core Team Styles */
.team-leader-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: center;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 20px rgba(18, 48, 31, 0.04);
}
.team-leader-img {
  width: 100%;
  height: 270px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--white);
  box-shadow: 0 4px 14px rgba(18, 48, 31, 0.08);
}
.team-leader-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.team-leader-quote {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--forest);
  margin-bottom: 1rem;
}
.team-leader-quote span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--gold-dark);
  font-weight: 600;
  margin-top: 0.35rem;
}
.team-leader-signoff {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink);
  margin-top: 1rem;
}
.team-leader-card--reverse {
  grid-template-columns: 1fr 240px;
}
.team-leader-card--reverse .team-leader-img {
  order: 2;
}
.team-list .team-leader-card {
  margin-bottom: 1.75rem;
}
.team-leader-info h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  color: var(--forest);
  margin-bottom: 0.2rem;
}
.team-leader-role {
  font-size: 0.8rem;
  color: var(--pine);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
  display: inline-block;
}
.team-leader-msg {
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--ink-soft);
  font-style: italic;
  padding-left: 1rem;
  border-left: 3px solid var(--gold);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.team-member-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(18, 48, 31, 0.04);
  transition: transform .3s var(--ease), box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.team-member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(18, 48, 31, 0.08);
}
.team-member-img {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-member-body {
  padding: 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.team-member-body h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--forest);
  margin-bottom: 0.2rem;
}
.team-member-role {
  font-size: 0.74rem;
  color: var(--pine);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.65rem;
  display: block;
}
.team-member-bio {
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--ink-soft);
  flex: 1;
}

/* School Policies */
.policy-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  margin-bottom: 1.75rem;
  box-shadow: 0 2px 14px rgba(18, 48, 31, 0.04);
}
.policy-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.policy-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.policy-card-header h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--forest);
  margin: 0;
}
.policy-card p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 0.85rem;
}
.policy-card ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 0.85rem;
}
.policy-card ul li {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.policy-card .policy-subhead {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  color: var(--forest);
  margin: 1.35rem 0 0.5rem;
}
.policy-card ol.policy-steps {
  padding-left: 1.35rem;
  margin-bottom: 1rem;
}
.policy-card ol.policy-steps li {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.policy-card ol.policy-steps li::marker {
  color: var(--pine);
  font-weight: 700;
}
.policy-card .policy-note {
  background: var(--mint);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: 1rem 0 0;
}

/* Responsive Overrides across all breakpoints */
@media (max-width: 960px) {
  .about-hero-block { grid-template-columns: 1fr; }
  .pillars-grid, .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .features-2col { grid-template-columns: 1fr; }
  .about-photos-grid { grid-template-columns: repeat(2, 1fr); }
  .vision-grid { grid-template-columns: 1fr; }
  .team-leader-card { grid-template-columns: 1fr; text-align: center; }
  .team-leader-card--reverse .team-leader-img { order: 0; }
  .team-leader-img { max-width: 220px; height: 230px; margin: 0 auto 1.25rem; }
  .team-leader-msg { text-align: left; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pillars-grid, .pillar-grid { grid-template-columns: 1fr; }
  .about-photos-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .team-member-img { height: 160px; }
  .policy-card { padding: 1.25rem; }
  .policy-card-header { flex-direction: row; align-items: center; }
  .policy-card-header h3 { font-size: 1.05rem; }
}




/* ============================================================
   NEW PAGE STYLES — Curriculum, Labs, Calendar, Fee, Circulars
   ============================================================ */

/* --- Lab Tags (Hi-Tech Labs page) --- */
.lab-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
}
/* The tags sit in a block group, so WordPress would give every tag but the first a
   1.5rem top margin — that misaligned the row and stretched the first pill. */
.lab-tags > * { margin-block-start: 0 !important; }
.lab-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.75rem;
  border-radius: 100px;
  background: var(--mint);
  color: var(--forest);
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* --- Info Highlight Box (reusable across pages) --- */
.info-highlight-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--mint);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pine);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.info-highlight-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.1rem;
}
.info-highlight-content h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--forest);
  margin: 0 0 0.5rem;
}
.info-highlight-content p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.7;
}
.info-highlight-content a {
  color: var(--pine);
  text-decoration: underline;
}

/* --- Calendar Table ---
   The exam schedule is now a real wp:table block. The Table block puts its
   className on the outer <figure>, not the <table> itself, so these target
   the plain table produced inside .cal-table-wrap rather than a .cal-table
   class (which the block has no attribute to carry on the <table> tag). */
.cal-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  margin: 1.5rem 0 2rem;
  box-shadow: var(--shadow-sm);
}
.cal-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.cal-table-wrap thead {
  background: var(--forest);
  color: #fff;
}
.cal-table-wrap thead th {
  padding: 0.85rem 1.25rem;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}
.cal-table-wrap tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.cal-table-wrap tbody tr:last-child { border-bottom: none; }
.cal-table-wrap tbody tr:hover { background: var(--mint); }
.cal-table-wrap tbody td {
  padding: 0.8rem 1.25rem;
  color: var(--ink);
}
.cal-table-wrap tbody td:first-child { font-weight: 600; color: var(--forest); }

/* --- Calendar Notice --- */
.calendar-notice {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 2rem 0;
}
.calendar-notice svg { flex-shrink: 0; margin-top: 0.1rem; stroke: var(--moss); }
.calendar-notice a { color: var(--pine); }

/* --- Fee Chart --- */
.fee-chart-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.5rem 0 2.5rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.fee-chart-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 auto;
}
.fee-chart-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  font-style: italic;
  text-align: center;
}

/* --- Circulars List --- */
.circulars-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.circular-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s;
}
.circular-card:hover {
  border-color: var(--moss);
  box-shadow: var(--shadow-md);
}
.circular-card-icon {
  width: 56px;
  height: 56px;
  background: var(--mint);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--pine);
}
.circular-card-body {
  flex: 1;
  min-width: 0;
}
.circular-card-body h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--forest);
  margin: 0 0 0.75rem;
}
.circular-card-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.circular-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.circular-btn-view {
  background: var(--pine);
  color: #fff;
  border: 1.5px solid var(--pine);
}
.circular-btn-view:hover {
  background: var(--forest);
  border-color: var(--forest);
}
.circular-btn-dl {
  background: transparent;
  color: var(--pine);
  border: 1.5px solid var(--pine);
}
.circular-btn-dl:hover {
  background: var(--pine);
  color: #fff;
}

/* Empty state */
.circular-viewer {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 1.5rem 0 1.25rem;
  scroll-margin-top: 110px;
}
.circular-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.25rem;
  background: var(--mint);
  border-bottom: 1px solid var(--line);
}
.circular-viewer-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--forest);
  margin: 0;
}
.circular-viewer-frame {
  display: block;
  width: 100%;
  height: min(80vh, 820px);
  border: 0;
  background: #525659;
}
.circular-viewer-fallback {
  display: none;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--ink-soft);
}
.circular-viewer-fallback p { margin: 0 0 0.85rem; font-size: 0.92rem; }
.circular-viewer.no-inline-pdf .circular-viewer-frame { display: none; }
.circular-viewer.no-inline-pdf .circular-viewer-fallback { display: block; }
.circular-card.is-active {
  border-color: var(--pine);
  box-shadow: 0 0 0 2px rgba(30, 92, 59, 0.15);
}
.circulars-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--ink-soft);
  background: var(--mint);
  border-radius: var(--radius-md);
  border: 1px dashed var(--line);
}
.circulars-empty svg { opacity: 0.4; }
.circulars-empty p { font-size: 0.95rem; margin: 0; }

/* --- Policy tag (curriculum programme labels) --- */
.policy-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.65rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  margin-top: 0.3rem;
}

/* --- Responsive: new pages --- */
@media (max-width: 768px) {
  .cal-table-wrap thead th,
  .cal-table-wrap tbody td { padding: 0.7rem 0.85rem; font-size: 0.85rem; }
  .circular-card { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
  .circular-card-icon { width: 44px; height: 44px; }
  .info-highlight-box { flex-direction: column; gap: 0.75rem; }
  .fee-chart-wrap { padding: 1rem; }
}

@media (max-width: 480px) {
  .circular-btn { font-size: 0.78rem; padding: 0.4rem 0.85rem; }
  .lab-tag { font-size: 0.68rem; }
}

/* ============================================================
   PAGE-SYSTEM UNIFICATION
   Wires up the banner/intro/grid classes used across every
   inner page (Academics, Student Life, Campus, Admissions) so
   the whole site shares one consistent, admin-editable design
   language.
   ============================================================ */

/* Banner wrapper + eyebrow + breadcrumb variants */
.page-banner-inner { max-width: 660px; margin: 0 auto; position: relative; z-index: 1; }
.page-eyebrow {
  color: var(--sage);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  display: inline-block;
}
/* WordPress injects margin-block-start on every non-first child of the
   is-layout-flow banner-inner group; that stacked on top of the eyebrow's
   own margin-bottom to leave an oversized gap before the heading. */
.page-banner-inner h1 { margin-block-start: 0; }
/* The last child's own bottom margin gets trapped inside .page-banner's
   overflow:hidden (which blocks normal margin collapse) and inflates the
   banner's height. WordPress's block-editor pages happen to auto-zero this
   already; raw-HTML banners don't, so set it explicitly for consistency. */
.page-banner-inner > *:last-child { margin-bottom: 0 !important; }
.page-breadcrumbs, .page-breadcrumb {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.page-breadcrumbs a, .page-breadcrumb a { color: var(--gold); font-weight: 500; }
.page-breadcrumbs a:hover, .page-breadcrumb a:hover { color: var(--white); }
.page-breadcrumb span { opacity: 0.75; }

/* Generic section intro (eyebrow + heading + divider + lede paragraph) */
.section-intro-block { margin-bottom: 1.75rem; max-width: 760px; }
.section-intro-block .section-heading { margin: 0.4rem 0 0.75rem; }
.section-intro-block > p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.75; }
/* Centered variant, used in place of an inline style="..." (which fails block
   validation on a wp:group block unless mirrored in its JSON attributes). */
.section-intro-block--center { max-width: 100%; text-align: center; margin-inline: auto; }
.about-page-inner--narrow { max-width: 900px; }
/* Constrained, centered lede paragraph — replaces an inline style="max-width:...;
   margin-inline:auto" on a wp:paragraph block, which fails block validation. */
.section-intro-block--center > p.intro-lede { max-width: 640px; margin-inline: auto; }
.section-intro-block--center > p.intro-lede--narrow { max-width: 620px; }

/* 4-up pillar grid alias (same layout as .pillars-grid) */
.pillars-grid, .pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1.75rem;
}

/* Policy card grid: same .policy-card, arranged responsively with a colour accent */
.policy-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.policy-cards-grid .policy-card {
  margin-bottom: 0;
  border-top: 4px solid var(--pine);
}
/* Explicit modifier class instead of an inline `style="grid-column:..."` —
   an inline style attribute on a wp:group block fails block validation. */
.policy-cards-grid .policy-card--span-full { grid-column: 1 / -1; }
/* An odd card left alone on the last row sits centred instead of hugging the left. */
.policy-cards-grid > .policy-card:last-child:nth-child(odd):not(.policy-card--span-full) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 0.75rem);
}
/* Accent colour rotates by position instead of a per-card inline style, since
   an inline `style` attribute on a wp:group block fails block validation in
   the editor (WordPress can't reconstruct it from the block's attributes). */
.policy-cards-grid .policy-card:nth-child(4n+1) { border-top-color: var(--forest); }
.policy-cards-grid .policy-card:nth-child(4n+2) { border-top-color: var(--pine); }
.policy-cards-grid .policy-card:nth-child(4n+3) { border-top-color: var(--moss); }
.policy-cards-grid .policy-card:nth-child(4n+4) { border-top-color: var(--gold); }
/* Explicit overrides for cards whose original design called for a specific
   accent colour that doesn't match their position in the 4-colour rotation. */
.policy-cards-grid .policy-card--forest { border-top-color: var(--forest); }
.policy-cards-grid .policy-card--pine { border-top-color: var(--pine); }
.policy-cards-grid .policy-card--moss { border-top-color: var(--moss); }
.policy-cards-grid .policy-card--gold { border-top-color: var(--gold); }
.policy-card-header, .policy-cards-grid .policy-card-header { flex-wrap: wrap; }
.policy-cards-grid .policy-card-header h3 { flex: 1; min-width: 150px; }
.policy-card-icon, .policy-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
/* Tag badge used inside a light policy-card header (distinct from the dark-banner .policy-tag) */
.policy-cards-grid .policy-tag {
  background: var(--mint);
  color: var(--pine);
  border: 1px solid var(--line);
  margin-top: 0;
}

/* Feature items grid: icon-box + body, used standalone (no mint wrapper) */
.feature-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.feature-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--mint);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-bottom: 0.85rem;
}
.feature-item-body { min-width: 0; }
.feature-item-card:has(.feature-item-icon) {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.feature-item-card:has(.feature-item-icon) .feature-item-icon { margin-bottom: 0; margin-top: 0.1rem; }

/* Admission: documents checklist */
.doc-checklist {
  background: var(--mint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  margin-top: 1.5rem;
}
.doc-checklist-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1.5rem;
}
.doc-checklist-list > * { margin-block-start: 0 !important; }
.doc-checklist-list > .doc-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.1rem;
}
.doc-item > *, .doc-item-body > * { margin-block-start: 0 !important; }
.doc-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.doc-item-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 0.15rem;
}
.doc-item-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.doc-checklist > .doc-checklist-note { margin-top: 1.1rem !important; }
.doc-checklist-note {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 1.1rem 0 0;
}
@media (max-width: 640px) {
  .doc-checklist-list { grid-template-columns: 1fr; }
}

/* Info highlight + calendar notice: allow a per-instance colour override */
.info-highlight-box { border-left-color: var(--hl-color, var(--pine)); }
.calendar-notice {
  background: var(--notice-bg, var(--mint));
  border-color: var(--notice-border, var(--line));
  color: var(--notice-text, var(--ink-soft));
}
/* Modifier classes replacing inline custom-property overrides (which fail
   block validation on a wp:group block unless mirrored in its JSON attributes). */
.info-highlight-box--gold { --hl-color: #C7972F; }
.calendar-notice--amber {
  --notice-bg: #FEF3C7;
  --notice-border: #C7972F;
  --notice-text: #92400E;
}
.calendar-notice--amber svg { stroke: #C7972F; }

/* Image column for .about-hero-block (photo instead of the badge card) */
.about-hero-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  min-height: 300px;
}
.about-hero-media .wp-block-image { width: 100%; height: 100%; margin: 0; }
/* min-height fills the box when the photo is shorter than 300px (narrow
   screens), instead of leaving a blank strip under it; cover crops the sides. */
.about-hero-media img,
.about-hero-media .wp-block-image img { width: 100%; height: 100%; min-height: 298px; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .policy-cards-grid { grid-template-columns: 1fr; }
  .policy-cards-grid > .policy-card:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  .feature-items-grid { grid-template-columns: 1fr; }
  /* .pillars-grid/.pillar-grid are redeclared together above (base rule) after
     the earlier breakpoint at line ~1677, so both need a copy here to win the
     cascade at this later source position. */
  .pillars-grid, .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pillars-grid, .pillar-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TILE GRID — photo tiles for facilities / activities lists
   (reusable version of the homepage .fac-grid, any item count)
   ============================================================ */
.tile-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centres an incomplete last row */
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.tile-grid > .tile-card {
  flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
}
.tile-card {
  position: relative;
  height: 240px;
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.tile-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(18, 48, 31, .22); }
/* .tile-bg is now a real wp:image block (figure.wp-block-image.tile-bg), not a
   CSS background div — positioned as a full-bleed backdrop behind the overlay. */
.tile-card .tile-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}
.tile-card .tile-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}
.tile-card:hover .tile-bg img { transform: scale(1.09); }
.tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, rgba(30,92,59,.32) 0%, rgba(14,36,23,.34) 45%, rgba(14,36,23,.94) 100%);
}
/* .tile-badge and .tile-desc are real wp:paragraph blocks (both render as <p>),
   so each gets its own class rather than relying on a bare `p` selector —
   a bare `.tile-card p` would out-specificity .tile-badge and break it. */
.tile-card .tile-badge {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .35rem;
}
.tile-card h4 { position: relative; z-index: 2; font-size: 1.05rem; font-family: var(--font-heading); font-weight: 600; margin: 0; color: #fff; }
.tile-card .tile-desc { position: relative; z-index: 2; font-size: .8rem; color: rgba(255,255,255,.85); margin: .3rem 0 0; line-height: 1.55; }

/* ============================================================
   FILTERABLE TABS (Gallery categories etc.)
   ============================================================ */
.sh-tab-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 .25rem; }
.sh-tab-btn {
  padding: .5rem 1.15rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: var(--t);
}
.sh-tab-btn:hover { border-color: var(--moss); color: var(--forest); }
.sh-tab-btn.active { background: var(--forest); color: #fff; border-color: var(--forest); }
.sh-tab-content { display: none; }
.sh-tab-content.active { display: block; animation: fadeIn .4s ease; }

/* ============================================================
   GALLERY GRID
   ============================================================ */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* centres an incomplete last row */
  gap: 1rem;
  margin-top: 1.5rem;
}
.gallery-grid > .gallery-item {
  flex: 0 0 calc((100% - 3 * 1rem) / 4);
}
.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.gallery-item .wp-block-image { width: 100%; height: 100%; margin: 0; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); display: block; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item-label {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(14,36,23,.9), transparent);
  color: #fff;
  padding: 1.5rem .8rem .6rem;
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(8px);
  transition: var(--t);
}
.gallery-item:hover .gallery-item-label { opacity: 1; transform: translateY(0); }

@media (max-width: 960px) { .gallery-grid > .gallery-item { flex-basis: calc((100% - 2 * 1rem) / 3); } .tile-grid > .tile-card { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 640px) { .gallery-grid > .gallery-item { flex-basis: calc((100% - 1rem) / 2); } .tile-grid > .tile-card { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 480px) { .gallery-grid { gap: .6rem; } .gallery-grid > .gallery-item { flex-basis: calc((100% - .6rem) / 2); } .tile-grid > .tile-card { flex-basis: 100%; } }

/* ============================================================
   APPLY ONLINE — Contact Form 7 styling
   ============================================================ */
.sh-apply-form-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-md);
  margin-top: 1.75rem;
}
/* CF7 wraps the row's contents in one <p> via wpautop, so the two-column
   split is applied to that <p>, not to .sh-form-row itself. */
.sh-form-row { margin-bottom: 1.25rem; }
.sh-form-row p { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 0; }
.sh-form-row p > br { display: none; }
.wpcf7-form label { display: block; font-size: .84rem; font-weight: 600; color: var(--forest); margin-bottom: 1.25rem; }
.sh-form-row label { margin-bottom: 0; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  margin-top: .4rem;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--ink);
  background: var(--cream);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form textarea { min-height: 110px; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(30,92,59,.14);
  background: #fff;
}
.wpcf7-form input[type="submit"] {
  background: var(--gold);
  color: #2A1F05;
  font-weight: 700;
  font-size: .92rem;
  border: none;
  padding: .9rem 2.25rem;
  border-radius: 100px;
  cursor: pointer;
  transition: var(--t);
  box-shadow: 0 6px 20px rgba(199,151,47,.38);
}
.wpcf7-form input[type="submit"]:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(199,151,47,.5); }
.wpcf7-form input[type="submit"]:disabled { opacity: .6; cursor: wait; transform: none; }
.wpcf7-form .wpcf7-response-output {
  margin-top: 1.25rem;
  border-radius: var(--radius-sm);
  padding: .85rem 1.1rem;
  font-size: .85rem;
  border: 1px solid var(--line);
}
.wpcf7-form.sent .wpcf7-response-output { border-color: var(--pine); background: var(--mint); color: var(--forest); }
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { border-color: #ef4444; background: #FEF2F2; color: #991B1B; }
.wpcf7-form.invalid .wpcf7-response-output { border-color: var(--gold); background: #FEF3C7; color: #92400E; }
.wpcf7-not-valid-tip { display: block; color: #ef4444; font-size: .76rem; font-weight: 600; margin-top: .3rem; }

@media (max-width: 640px) {
  .sh-form-row p { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   POLICY CARD IMAGE — real photo strip inside a .policy-card,
   used on Academics pages (Curriculum, Labs, Circulars) so each
   programme / lab / activity card carries a real photo, not just
   an icon.
   ============================================================ */
.policy-card-image {
  height: 170px;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.25rem;
  border: 1px solid var(--line);
}
.policy-card-image .wp-block-image { width: 100%; height: 100%; margin: 0; }
.policy-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
  margin-top: 1.75rem;
}
.contact-info-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.75rem; }
.contact-info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
}
.contact-info-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--mint);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  color: var(--pine);
}
.contact-info-item h4 { font-family: var(--font-heading); font-size: 0.98rem; color: var(--forest); margin-bottom: 0.3rem; }
.contact-info-item p, .contact-info-item a { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.contact-info-item > div { min-width: 0; }
.contact-info-item a:hover { color: var(--pine); }
.contact-social-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.25rem; }
.contact-social-row a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mint);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest);
  font-weight: 700;
  font-size: 0.9rem;
  transition: var(--t);
}
.contact-social-row a:hover { background: var(--forest); color: #fff; transform: translateY(-3px); }
.contact-hours-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.contact-hours-table td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.contact-hours-table td:first-child { font-weight: 600; color: var(--forest); }
.contact-hours-table tr:last-child td { border-bottom: none; }
.contact-map-wrap {
  margin-top: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--mint) 0%, var(--cream) 100%);
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}
.contact-map-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}
.contact-map-wrap h4 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--forest); margin-bottom: 0.5rem; }
.contact-map-wrap p { font-size: 0.92rem; color: var(--ink-soft); max-width: 480px; margin: 0 auto; }
.contact-map-btn { display: inline-block; margin-top: 1.5rem; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .contact-info-item { padding: 1rem; gap: 0.75rem; }
  .contact-map-wrap { padding: 2rem 1.25rem; }
}

/* ============================================================
   MANDATORY PUBLIC DISCLOSURE PAGES
   (General Information, Documents & Information, Board Results)
   Built from native blocks so everything is editable in
   Appearance > Editor > Templates.
   ============================================================ */

/* Grid/flex containers: neutralise WordPress's flow-layout
   margin-block-start on children (see note at top of file). */
.mpd-stats > *, .mpd-doc-grid > *, .mpd-toppers > *, .mpd-contact-grid > *,
.mpd-results-split > *, .mpd-doc-top > *, .mpd-contact-card > * { margin-block-start: 0; }
.mpd-stat > *, .mpd-topper > *, .mpd-doc-card > *, .mpd-doc-text > *, .mpd-contact-body > * { margin-block-start: 0; }

/* Sub-navigation pills linking the four disclosure pages */
.mpd-subnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 3rem;
  padding: 0.5rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.mpd-subnav a {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: var(--t);
}
.mpd-subnav a:hover { background: var(--mint); color: var(--forest); }
.mpd-subnav a.is-active { background: var(--forest); color: var(--white); box-shadow: var(--shadow-sm); }

.mpd-section { margin-top: clamp(3rem, 6vw, 4.5rem); }
.mpd-section .section-intro-block--center { margin-bottom: 2rem; }

/* Data tables (core/table block with .mpd-table-wrap) */
.wp-block-table.mpd-table-wrap {
  margin: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.mpd-table-wrap--narrow { max-width: 900px; margin-inline: auto !important; }
.mpd-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 520px; border: none; }
.mpd-table-wrap thead { border: none; }
.mpd-table-wrap thead th {
  background: var(--forest);
  color: var(--white);
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1rem 1.25rem;
  border: none;
  white-space: nowrap;
}
.mpd-table-wrap td { padding: 0.95rem 1.25rem; border: none; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.mpd-table-wrap tbody tr:nth-child(even) td { background: var(--cream); }
.mpd-table-wrap tbody tr:last-child td { border-bottom: none; }
.mpd-table-wrap tbody tr:hover td { background: var(--mint); }
.mpd-table-wrap a { color: var(--pine); font-weight: 500; }
.mpd-table-wrap a:hover { color: var(--gold-dark); }
/* Column modifiers */
.mpd-t-num td:first-child { width: 64px; color: var(--moss); font-weight: 700; }
.mpd-t-label1 td:first-child,
.mpd-t-label2 td:nth-child(2) { font-weight: 600; color: var(--forest); }
.mpd-t-label2 td:nth-child(2) { width: 38%; }
.mpd-t-pass td:last-child { color: var(--pine); font-weight: 700; }

/* Stat tiles */
.mpd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.mpd-stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--pine);
  border-radius: var(--radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.mpd-stat:nth-child(2) { border-top-color: var(--moss); }
.mpd-stat:nth-child(3) { border-top-color: var(--gold); }
.mpd-stat:nth-child(4) { border-top-color: var(--forest); }
.mpd-stat p { margin: 0; }
.mpd-stat .mpd-stat-value {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 600;
  color: var(--forest);
  line-height: 1.1;
}
.mpd-stat .mpd-stat-label {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Quick contact cards */
.mpd-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mpd-contact-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem;
}
.mpd-contact-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.mpd-contact-body { min-width: 0; }
.mpd-contact-card h4 { font-family: var(--font-heading); font-size: 1.05rem; color: var(--forest); margin: 0 0 0.3rem; }
.mpd-contact-card p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.6; word-break: break-word; }
.mpd-contact-card a { color: var(--pine); }
.mpd-contact-card a:hover { color: var(--gold-dark); }

/* Document cards */
.mpd-doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.mpd-doc-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
  transition: var(--t);
}
.mpd-doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--sage); }
.mpd-doc-top { display: flex; gap: 0.9rem; align-items: flex-start; }
.mpd-doc-icon {
  flex-shrink: 0;
  width: 48px; height: 56px;
  border-radius: 8px;
  background: var(--mint);
  color: var(--pine);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
}
.mpd-doc-icon svg { margin-bottom: 2px; }
.mpd-doc-card h3 { font-family: var(--font-heading); font-size: 1.02rem; color: var(--forest); margin: 0 0 0.25rem; line-height: 1.3; }
.mpd-doc-card .mpd-doc-meta { margin: 0; font-size: 0.78rem; color: var(--ink-soft); }
.wp-block-buttons.mpd-doc-actions { display: flex; flex-wrap: nowrap; gap: 0.5rem; margin-top: auto; }
.mpd-doc-actions .wp-block-button { flex: 1; margin: 0; }
.mpd-doc-actions .wp-block-button .wp-block-button__link {
  width: 100%;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--forest);
  box-shadow: none;
}
.mpd-doc-actions .wp-block-button .wp-block-button__link:hover { transform: none; box-shadow: none; }
.mpd-btn--view .wp-block-button__link { background: var(--forest); color: var(--white); }
.mpd-btn--view .wp-block-button__link:hover { background: var(--pine); border-color: var(--pine); color: var(--white); }
.mpd-btn--dl .wp-block-button__link { background: transparent; color: var(--forest); }
.mpd-btn--dl .wp-block-button__link:hover { background: var(--mint); color: var(--forest); }
/* Small icons drawn with CSS so the button text stays plain & editable */
.mpd-doc-actions .wp-block-button__link::before {
  content: '';
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--mpd-ico) center / contain no-repeat;
          mask: var(--mpd-ico) center / contain no-repeat;
}
.mpd-btn--view { --mpd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.mpd-btn--dl { --mpd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); }

/* Image feature frames (core/image block with caption) */
.wp-block-image.mpd-figure {
  margin: 0 auto;
  max-width: 920px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  background: var(--white);
}
.wp-block-image.mpd-figure--narrow { max-width: 820px; }
.wp-block-image.mpd-figure img { display: block; width: 100%; height: auto; }
.wp-block-image.mpd-figure figcaption {
  margin: 0;
  padding: 0.9rem 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: var(--cream);
  border-top: 1px solid var(--line);
  text-align: left;
}

/* Topper cards */
.mpd-toppers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mpd-topper {
  text-align: center;
  background: linear-gradient(160deg, var(--mint) 0%, var(--white) 70%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.25rem;
}
.mpd-topper--first { border-color: var(--gold); box-shadow: 0 10px 30px rgba(199,151,47,.18); }
.mpd-topper .mpd-topper-rank {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-dark);
  background: rgba(199,151,47,.14);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin: 0 0 0.75rem;
}
.mpd-topper h3 { font-family: var(--font-heading); font-size: 1.2rem; color: var(--forest); margin: 0 0 0.25rem; }
.mpd-topper .mpd-topper-score { margin: 0; font-family: var(--font-heading); font-size: 2.2rem; font-weight: 600; color: var(--pine); line-height: 1.1; }
.mpd-topper .mpd-topper-subjects { margin: 0.5rem 0 0; font-size: 0.84rem; color: var(--ink-soft); }

/* Two results tables side by side */
.mpd-results-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.mpd-results-split .mpd-table-wrap table { min-width: 440px; }
.mpd-results-col > * { margin-block-start: 0; }
.mpd-results-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--forest);
  margin: 0 0 1rem;
}
.mpd-results-title::after {
  content: '100%';
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  background: var(--gold); color: #2A1F05;
  padding: 0.25rem 0.6rem; border-radius: 999px;
}

/* YouTube embed block */
.wp-block-embed.mpd-video {
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--forest);
}

.mpd-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 960px) {
  .mpd-doc-grid { grid-template-columns: 1fr 1fr; }
  .mpd-stats { grid-template-columns: 1fr 1fr; }
  .mpd-contact-grid { grid-template-columns: 1fr; }
  .mpd-results-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mpd-subnav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; border-radius: var(--radius); width: 100%; padding: 0.4rem; }
  .mpd-subnav a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.9rem; padding: 0.45rem 0.5rem; border-radius: var(--radius-md); font-size: 0.78rem; line-height: 1.3; white-space: normal; }
  .mpd-doc-grid { grid-template-columns: 1fr; }
  .mpd-toppers { grid-template-columns: 1fr; }
  .mpd-table-wrap td, .mpd-table-wrap thead th { padding: 0.8rem 0.9rem; }
}

/* ============================================================
   THE THINK TANKS — leadership profiles (native blocks)
   ============================================================ */
.tt-group { display: grid; gap: 1.75rem; }
.tt-group > *, .tt-card > *, .tt-body > * { margin-block-start: 0; }
.tt-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: start;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.tt-card--reverse { grid-template-columns: 1fr 280px; }
.tt-card--reverse .tt-photo { order: 2; }
.tt-photo {
  position: sticky;
  top: 110px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 4px solid var(--white);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  background: var(--mint);
}
.tt-photo .wp-block-image { margin: 0; width: 100%; height: 100%; }
.tt-photo .wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tt-body h3.tt-name { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.6vw, 1.75rem); color: var(--forest); margin: 0 0 0.3rem; }
.tt-body .tt-role {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--mint);
  color: var(--pine);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tt-body .tt-quote {
  margin: 0 0 1.1rem;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--gold);
  background: var(--white);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--forest);
}
.tt-body .tt-text { margin: 0 0 0.9rem; font-size: 0.93rem; line-height: 1.78; color: var(--ink-soft); }
.tt-body .tt-signoff { margin: 1.1rem 0 0; font-size: 0.9rem; line-height: 1.7; color: var(--forest); }

@media (max-width: 860px) {
  .tt-card, .tt-card--reverse { grid-template-columns: 1fr; }
  .tt-card--reverse .tt-photo { order: 0; }
  .tt-photo { position: static; max-width: 260px; width: 100%; margin-inline: auto; }
  .tt-body { text-align: left; }
  .tt-body h3.tt-name, .tt-body > .tt-role { text-align: center; }
  .tt-body > .tt-role { display: table; margin-inline: auto; }
}

/* ============================================================
   INCLUSIVE EDUCATION (native blocks)
   ============================================================ */
.ie-therapy-list, .ie-therapy-grid { display: grid; gap: 1.25rem; }
.ie-therapy-list { gap: 1.5rem; }
.ie-therapy-grid { grid-template-columns: repeat(3, 1fr); }
.ie-therapy-list > *, .ie-therapy-grid > *, .ie-therapy > *, .ie-therapy-head > *, .ie-therapy-title > * { margin-block-start: 0; }
.ie-therapy {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--pine);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.ie-therapy-grid .ie-therapy:nth-child(1) { border-top-color: var(--moss); }
.ie-therapy-grid .ie-therapy:nth-child(2) { border-top-color: var(--gold); }
.ie-therapy-grid .ie-therapy:nth-child(3) { border-top-color: var(--forest); }
.ie-therapy--wide { background: linear-gradient(160deg, var(--mint) 0%, var(--white) 55%); }
.ie-therapy-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.ie-therapy-head .ie-therapy-icon {
  flex-shrink: 0;
  width: 52px; height: 52px;
  margin: 0;
  border-radius: 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.ie-therapy-title .ie-therapy-num {
  margin: 0 0 0.1rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-dark);
}
.ie-therapy-title h3 { margin: 0; font-family: var(--font-heading); font-size: 1.25rem; color: var(--forest); line-height: 1.25; }
.ie-therapy p { font-size: 0.92rem; line-height: 1.75; color: var(--ink-soft); margin: 0 0 0.8rem; }
.ie-therapy p.ie-list-label { color: var(--forest); margin-top: 1.25rem; }
.ie-therapy ul.ie-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}
.ie-list li {
  position: relative;
  margin: 0;
  padding: 0.85rem 1rem 0.85rem 2.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.ie-list li::before {
  content: '';
  position: absolute;
  left: 1rem; top: 1.25rem;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.ie-list li strong { color: var(--forest); }

@media (max-width: 960px) {
  .ie-therapy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ie-therapy ul.ie-list { grid-template-columns: 1fr; }
}


/* ============================================================
   Styles that were inline `style=""` attributes before the About,
   Vision & Mission, Core Team, School Policies and Contact pages were
   converted to editable blocks (block markup can't carry raw inline styles).
   ============================================================ */
.ls-1c685d { max-width:880px !important; }
.ls-1f8cb3 { margin-bottom:0.6rem !important; }
.ls-23a321 { font-size:0.75rem !important; color:var(--ink-soft) !important; text-transform:uppercase !important; letter-spacing:0.06em !important; }
.ls-31c395 { font-size:2rem !important; margin-bottom:0.75rem !important; display:inline-block !important; }
.ls-37d174 { color:var(--ink-soft) !important; font-size:1.05rem !important; line-height:1.8 !important; }
.ls-6d5673 { width:100% !important; }
.ls-82fd16 { margin-bottom: clamp(3.5rem, 6vw, 5.5rem) !important; }
.ls-9590f7 { margin-bottom:1rem !important; }
.ls-bb6c07 { text-align:center !important; max-width:650px !important; margin:3.5rem auto 2rem !important; }
.ls-c168f9 { border-top:1px solid var(--line) !important; padding-top:1rem !important; display:flex !important; gap:1.5rem !important; }
.ls-c1b93b { text-align:center !important; max-width:650px !important; margin:0 auto 2rem !important; }
.ls-c4aa46 { text-align:center !important; max-width:650px !important; margin:0 auto 2.5rem !important; }
.ls-cc3a9d { text-align:center !important; max-width:760px !important; margin:0 auto 3.5rem !important; }
.ls-df8585 { color:var(--ink-soft) !important; font-size:0.95rem !important; }
.ls-ee2736 { margin-bottom: 4rem !important; }

/* ============================================================
   FORM STYLE PROTECTION
   Page-builder plugins (Elementor "Site Settings", Essential Addons, WPForms…)
   inject global input/button styles on every page — white backgrounds, no
   borders, italic buttons. Re-assert the theme's form design with enough
   specificity (body + wrapper + form) and !important to always win.
   ============================================================ */
body .sh-apply-form-wrap .wpcf7-form input[type="text"],
body .sh-apply-form-wrap .wpcf7-form input[type="email"],
body .sh-apply-form-wrap .wpcf7-form input[type="tel"],
body .sh-apply-form-wrap .wpcf7-form input[type="number"],
body .sh-apply-form-wrap .wpcf7-form input[type="date"],
body .sh-apply-form-wrap .wpcf7-form select,
body .sh-apply-form-wrap .wpcf7-form textarea {
  width: 100% !important;
  margin-top: .4rem !important;
  padding: .75rem 1rem !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--cream) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0;
  box-sizing: border-box !important;
}
body .sh-apply-form-wrap .wpcf7-form textarea { min-height: 110px !important; }
body .sh-apply-form-wrap .wpcf7-form input:focus,
body .sh-apply-form-wrap .wpcf7-form select:focus,
body .sh-apply-form-wrap .wpcf7-form textarea:focus {
  outline: none !important;
  border-color: var(--pine) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(30,92,59,.14) !important;
}
body .sh-apply-form-wrap .wpcf7-form ::placeholder { color: #8a968e !important; opacity: 1; font-style: normal !important; }
body .sh-apply-form-wrap .wpcf7-form label {
  color: var(--forest) !important;
  font-family: var(--font-body) !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
body .sh-apply-form-wrap .wpcf7-form input[type="submit"] {
  background: var(--gold) !important;
  background-image: none !important;
  color: #2A1F05 !important;
  border: none !important;
  border-radius: 100px !important;
  padding: .9rem 2.25rem !important;
  font-family: var(--font-body) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: 0 6px 20px rgba(199,151,47,.38) !important;
  cursor: pointer;
}
body .sh-apply-form-wrap .wpcf7-form input[type="submit"]:hover,
body .sh-apply-form-wrap .wpcf7-form input[type="submit"]:focus {
  background: #B28325 !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(199,151,47,.5) !important;
}
body .sh-apply-form-wrap {
  background: #fff !important;
  border: 1px solid var(--line) !important;
}