/* ==========================================================================
   public/assets/css/app.css
   Base element styles for the public site. Design tokens come from
   tokens.css; this file only sets base typography and the couple of layout
   primitives Phase 4.1's proof-of-life page needs. The full navbar, footer,
   and hero components arrive with the front-end build phase.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* <html>, not <body>, is the element that actually scrolls — see the
     matching note on body's overflow-x below; both need it, since browsers
     are inconsistent about which one they honor for this. */
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  background: var(--bg-body);
  color: var(--text-primary);
  /* Safety net: the closed mobile nav drawer is `position:fixed` +
     `transform:translateX(100%)` (app.css .site-nav, narrow breakpoint),
     which some browsers still count toward the document's scrollable
     width even though it's off-screen — this stops it (or any other
     decorative bleed element) from ever opening a phantom horizontal
     scrollbar. Nothing here is meant to be reached by scrolling right,
     so clipping it is always correct, never lossy. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}

p { margin: 0 0 var(--space-4); }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { color: var(--brand-solid-hover); text-decoration: underline; }

/* Base icon sizing/color — mirrors admin.css's .icon rule. Without
   fill: currentColor an <svg><use> icon falls back to the SVG spec's
   default black fill and ignores any `color` set on it or an ancestor. */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; }

.container {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -----------------------------------------------------------------------
   Header — a two-tier "topbar + navbar" layout (contact/social/apply strip
   on top, a dark centered menu below) used on every public page. It's
   `position: sticky`, so it sits in normal document flow (no padding-top
   offset needed on .site-main) and stays put once scrolled past.
   ----------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: var(--z-navbar);
  background: transparent;
  border-bottom: none;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5);
  color: var(--brand-text);
  transition: color var(--dur-base) var(--ease-standard);
}
.brand:hover { text-decoration: none; }
.brand-logo { height: 40px; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav > a {
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  position: relative;
  padding: 18px 20px;
  transition: color var(--dur-base) var(--ease-standard);
}
.site-nav > a:hover { color: var(--accent-solid); text-decoration: none; }
.site-nav > a::after {
  content: "";
  position: absolute; left: 0; right: 100%; top: 0;
  height: 3px; background: var(--accent-solid);
  transition: right var(--dur-base) var(--ease-standard);
}
.site-nav > a:hover::after { right: 0; }
.site-nav > a.header-apply-btn,
.site-nav > a.header-apply-btn:hover {
  color: var(--accent-on-solid);
  margin-left: var(--space-2);
}
.header-apply-btn::after { display: none; }
/* The topbar already has its own Apply button; the one riding along in
   .site-nav only reappears inside the mobile off-canvas drawer (display
   flipped back on in the <900px block below). */
.site-nav > a.header-apply-btn { display: none; }

/* A flat nav item with no url of its own (dropdown heading with nothing to
   link to) — matches .site-nav > a's look but skips the hover underline
   since it isn't clickable. */
.nav-heading {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 18px 20px;
  cursor: default;
}

/* Header dropdown (submenu) — CSS-only, no JS needed for a single level */
.nav-dropdown { position: relative; }
/* Matches .site-nav > a exactly (same color/weight/size/padding/hover-underline)
   so a dropdown item looks identical to a plain link apart from its caret —
   previously this fell back to unset defaults (0 padding, ~16px, and a red
   inherited from the generic `a { color }` rule), which read as an
   unintentional, jarring mismatch against the rest of the navbar. */
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 18px 20px;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard);
}
.nav-dropdown-trigger::after {
  content: "";
  position: absolute; left: 0; right: 100%; top: 0;
  height: 3px; background: var(--accent-solid);
  transition: right var(--dur-base) var(--ease-standard);
}
.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--accent-solid); text-decoration: none; }
.nav-dropdown-trigger:hover::after,
.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown:focus-within .nav-dropdown-trigger::after { right: 0; }
.nav-caret { width: 11px; height: 11px; color: rgba(255, 255, 255, .7); transition: transform var(--dur-fast) var(--ease-standard); }
.nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); }

.nav-dropdown-panel {
  position: absolute; top: 100%; left: 0;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--accent-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index: var(--z-dropdown);
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(4px);
}
.nav-dropdown-panel a {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
}
.nav-dropdown-panel a:hover { background: var(--bg-subtle); color: var(--brand-text); text-decoration: none; }

/* -----------------------------------------------------------------------
   Topbar + navbar — contact/social/apply strip on top, a dark centered
   menu below, modeled on the user's own reference site. Nav-link/dropdown/
   nav-user color and the top-accent hover indicator (dark-navbar-appropriate)
   are set directly on their base rules above, since every page uses this
   layout now.
   ----------------------------------------------------------------------- */
.edu-topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 4px rgba(3, 7, 18, .04);
  position: relative;
  z-index: 1;
}
.edu-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: 9px;
}
.edu-topbar .brand { flex: 1 1 0%; min-width: 0; }
/* The logo file is a wide lockup (mark + Arabic + English name baked in),
   not an icon-square — size it by height and let width follow the image's
   own ratio so nothing gets cropped; max-width lets it shrink on narrow
   screens instead of overflowing. */
.edu-topbar .brand-logo { height: 50px; width: auto; max-width: 100%; object-fit: contain; flex-shrink: 0; }
.edu-topbar .brand-text {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: 14px; line-height: 1.3; color: var(--charcoal);
  max-width: 260px;
}
/* The logo's own lockup already spells out "IIUI Schools", so the text
   label is only worth the width on wider screens — narrower than that it
   would either wrap awkwardly next to the logo or crowd the toggle button. */
@media (max-width: 700px) { .edu-topbar .brand-text { display: none; } }

/* .edu-topbar-info-group and .edu-topbar-actions keep their natural size —
   .brand is the one flex item that shrinks/wraps its long institution name,
   so the toggle button never gets squeezed off the edge on narrow screens. */
.edu-topbar-info-group,
.edu-topbar-actions { flex-shrink: 0; }

.edu-topbar-info-group { display: flex; align-items: center; gap: var(--space-6); }
.edu-topbar-info { display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
.edu-topbar-info:hover { text-decoration: none; }
.edu-topbar-info-icon {
  width: 32px; height: 32px; border-radius: var(--radius-circle); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-solid); color: var(--charcoal);
  transition: filter var(--dur-base) var(--ease-standard);
}
.edu-topbar-info-icon .icon { width: 14px; height: 14px; }
.edu-topbar-info:hover .edu-topbar-info-icon { filter: brightness(1.1); }
.edu-topbar-info small { display: block; font-size: 10px; color: var(--text-secondary); }
.edu-topbar-info strong { display: block; font-size: 12.5px; color: var(--text-primary); white-space: nowrap; }

.edu-topbar-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }

.edu-topbar-social { display: flex; align-items: center; gap: 8px; }
.edu-topbar-social a {
  width: 28px; height: 28px; border-radius: var(--radius-circle); color: var(--accent-on-solid);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-standard), filter var(--dur-base) var(--ease-standard);
}
.edu-topbar-social .icon { width: 13px; height: 13px; }
.edu-topbar-social a:hover { transform: translateY(-2px); filter: brightness(1.12); color: var(--accent-on-solid); text-decoration: none; }
.edu-topbar-social a.edu-soc-facebook,
.edu-topbar-social a.edu-soc-instagram,
.edu-topbar-social a.edu-soc-twitter-x,
.edu-topbar-social a.edu-soc-youtube,
.edu-topbar-social a.edu-soc-linkedin { background: var(--accent-solid); }

.edu-apply-btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0;
  background: var(--accent-solid); color: var(--accent-on-solid);
  font-weight: 700; font-size: 13px; padding: 8px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(251, 192, 45, .35);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.edu-apply-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(251, 192, 45, .45); color: var(--accent-on-solid); text-decoration: none; }
.edu-apply-btn .icon { width: 13px; height: 13px; }

.edu-navbar { background: var(--charcoal); }
.edu-navbar-inner { display: flex; justify-content: center; }

@media (max-width: 1180px) {
  .edu-topbar-info-group { display: none; }
}
@media (max-width: 600px) {
  .edu-apply-btn,
  .edu-topbar-social { display: none; }
  .edu-topbar .brand-logo { height: 38px; }
  .edu-topbar-inner { padding-block: 6px; }
}

/* -----------------------------------------------------------------------
   Mobile nav drawer — hamburger toggle, off-canvas .site-nav, backdrop.
   Desktop keeps the plain inline nav; everything below is scoped to the
   <900px breakpoint so it never affects the desktop layout.
   ----------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  z-index: var(--z-modal);
  position: relative;
}
.nav-toggle-bar {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle.is-open .nav-toggle-bar { background: var(--text-primary); }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  z-index: var(--z-backdrop);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 85vw);
    background: var(--bg-surface);
    box-shadow: var(--shadow-xl);
    padding: calc(var(--navbar-h) + var(--space-4)) var(--space-5) var(--space-6);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-standard);
    z-index: var(--z-modal);
  }
  .site-nav.is-open { transform: translateX(0); }

  .nav-backdrop.is-open { display: block; opacity: 1; }

  .site-nav > a,
  .nav-dropdown-trigger {
    color: var(--text-primary) !important;
    width: 100%;
    min-height: var(--touch-target);
    display: flex;
    align-items: center;
    padding-block: 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 16px;
  }
  .site-nav > a::after { display: none; }

  .nav-dropdown { width: 100%; }
  .nav-dropdown-panel {
    position: static;
    opacity: 1; visibility: inherit; transform: none;
    box-shadow: none; border: none; border-radius: 0;
    padding: 0 0 0 var(--space-4);
    display: none;
  }
  .nav-dropdown.is-open .nav-dropdown-panel { display: flex; }
  .nav-dropdown.is-open .nav-caret { transform: rotate(180deg); }
  .nav-dropdown-panel a { min-height: 40px; padding-block: 0; }

  .header-apply-btn {
    display: flex;
    margin: var(--space-4) 0 0;
    justify-content: center;
    width: 100%;
    min-height: var(--touch-target);
  }
  .header-apply-btn::after { display: none; }
}

.site-main {
  min-height: 60vh;
}

/* -----------------------------------------------------------------------
   Footer — 5-column layout (brand/social, Quick Links, Explore, Contact,
   Find Us map) modeled on the user's own reference site: a top accent bar,
   underlined column headings, chevron-prefixed link rows, and icon-badge
   contact rows. Reuses the .edu-soc-* platform colors already defined for
   the topbar's social icons.
   ----------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-inverse);
  color: rgba(255, 255, 255, .7);
  padding-top: var(--space-16);
  font-size: var(--fs-sm);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-solid), var(--accent-solid));
}
.site-footer a { color: rgba(255, 255, 255, .85); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1.3fr;
  gap: var(--space-8);
  padding-bottom: var(--space-10);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand-col { grid-column: 1 / -1; max-width: 460px; }
}
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

.footer-col { display: flex; flex-direction: column; }
.footer-col h4, .footer-col-title {
  color: #fff; font-family: var(--font-display); font-weight: 600; line-height: 1.3;
  font-size: 16px;
  margin: 0 0 var(--space-4);
  position: relative;
  padding-bottom: var(--space-2);
}
.footer-col h4::after, .footer-col-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 32px; height: 3px; border-radius: 2px;
  background: var(--accent-solid);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-4);
}
.footer-brand:hover { text-decoration: none; }
.footer-brand-logo { height: 52px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.footer-brand-text-fallback {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); color: #fff;
}
.footer-motto {
  font-style: italic;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 var(--space-5);
}

.footer-links a {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  transition: color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.footer-links a::before { content: "\203A"; color: var(--accent-solid); font-weight: 700; margin-right: var(--space-2); }
.footer-links a:hover { color: var(--accent-solid); transform: translateX(3px); text-decoration: none; }

.footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.footer-contact li { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; }
.footer-contact a { color: rgba(255, 255, 255, .72); }
.footer-contact a:hover { color: var(--accent-solid); text-decoration: none; }
.fc-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .08);
  color: var(--accent-solid);
  display: flex; align-items: center; justify-content: center;
}
.fc-icon .icon { width: 16px; height: 16px; }

.footer-social { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  padding: 0;
  transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard);
}
.footer-social a:hover { transform: translateY(-2px); filter: brightness(1.12); color: #fff; text-decoration: none; }
.footer-social .icon { width: 16px; height: 16px; }
.footer-social a.edu-soc-facebook  { background: #1877F2; }
.footer-social a.edu-soc-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.footer-social a.edu-soc-twitter-x { background: #000; }
.footer-social a.edu-soc-youtube   { background: #FF0000; }
.footer-social a.edu-soc-linkedin  { background: #0A66C2; }

.footer-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  filter: grayscale(.2);
}
.footer-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: var(--space-4);
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}
.footer-bottom p { margin: 0; }

/* -----------------------------------------------------------------------
   Buttons (public site) — mirrors the admin/auth button spec so the same
   visual language carries across every surface (docs/09-design-components §1).
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 14px;
  letter-spacing: .01em;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
/* Unsized SVGs default to the browser's replaced-element size (300x150),
   which blows buttons like Contact's "Send Message" way out — give every
   .btn icon a sane default; more specific selectors still win over this. */
.btn .icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
/* Primary — Deep Red, white text, hover darkens (mirrors admin's .btn-primary).
   Gradient + a warm glow layered onto the hover shadow gives the button a
   little depth instead of a flat fill — the darker/lighter stops stay close
   enough that it still reads as one solid brand color at a glance. */
.btn-primary { background: linear-gradient(135deg, var(--red-700) 0%, var(--brand-solid) 60%, var(--brand-solid-hover) 100%); color: #fff; }
.btn-primary:hover { background: linear-gradient(135deg, var(--brand-solid) 0%, var(--brand-solid-hover) 60%, var(--red-950) 100%); color: #fff; box-shadow: var(--shadow-md), var(--shadow-glow-brand); }

/* Secondary — Golden Yellow, dark text, hover deepens toward amber. .btn-accent
   is the same treatment under its original name; kept so nothing already
   using it needs to change. */
.btn-accent, .btn-secondary { background: linear-gradient(135deg, var(--yellow-600) 0%, var(--accent-solid) 60%, var(--accent-solid-hover) 100%); color: var(--accent-on-solid); }
.btn-accent:hover, .btn-secondary:hover { background: linear-gradient(135deg, var(--accent-solid) 0%, var(--accent-solid-hover) 60%, var(--yellow-900) 100%); color: var(--accent-on-solid); box-shadow: var(--shadow-md), var(--shadow-glow-accent); }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn-outline-white:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* -----------------------------------------------------------------------
   Hero — Slider hero (docs/09-design-components.md §9, style #1) and its
   no-slides fallback (§9, style #4 "Minimal hero").
   ----------------------------------------------------------------------- */
.hero-slider {
  min-height: min(88vh, 820px);
  height: min(88vh, 820px);
  height: min(88svh, 820px);
}
@media (max-height: 700px) { .hero-slider { min-height: 600px; height: 600px; } }

.hero-slide { position: relative; overflow: hidden; }
.hero-slide-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    100deg,
    rgba(33, 33, 33, calc(0.92 * var(--hero-overlay-alpha, .7))) 0%,
    rgba(33, 33, 33, calc(0.62 * var(--hero-overlay-alpha, .7))) 45%,
    rgba(33, 33, 33, calc(0.25 * var(--hero-overlay-alpha, .7))) 100%
  );
}
.hero-khatam {
  position: absolute; inset: 0;
  opacity: .05;
  background-image:
    repeating-linear-gradient(45deg, rgba(251, 192, 45, .6) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-45deg, rgba(251, 192, 45, .6) 0 1px, transparent 1px 34px);
  pointer-events: none;
}

.hero-slide .container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
/* min-width:0 overrides the flex-item default (min-width:auto), which would
   otherwise refuse to shrink this below its text's min-content width — the
   same fix already applied to .edu-topbar .brand, .contact-info/.contact-form,
   and .apply-form/.apply-docs elsewhere in this file — and is what was
   causing the hero heading to overflow the viewport on narrow screens. */
.hero-content { max-width: 640px; min-width: 0; color: #fff; }
.hero-content--center { margin-inline: auto; text-align: center; }
.hero-content--right { margin-left: auto; text-align: right; }

.hero-eyebrow {
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yellow-300);
  margin: 0 0 var(--space-4);
}
.hero-title {
  font-size: var(--fs-display-1);
  line-height: 1.05;
  letter-spacing: var(--ls-tighter);
  color: #fff;
  margin: 0 0 var(--space-4);
}
.hero-lead {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, .85);
  margin: 0 0 var(--space-6);
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-content--center .hero-actions { justify-content: center; }
.hero-content--right .hero-actions { justify-content: flex-end; }

/* Hero slide text entrance — staggered fade-up, replayed on every slide
   change. Swiper adds/removes .swiper-slide-active on the slide itself, so
   scoping the animation to that ancestor selector (rather than a one-shot
   JS-added class, the .reveal-* pattern used further down the page) is what
   makes it re-trigger each time a slide becomes active again, including on
   loop-around. Hidden by default so there's no flash of static text before
   Swiper's first init tick adds the class to slide one. */
.hero-content .hero-eyebrow,
.hero-content .hero-title,
.hero-content .hero-lead,
.hero-content .hero-actions {
  opacity: 0;
}
.swiper-slide-active .hero-content .hero-eyebrow,
.swiper-slide-active .hero-content .hero-title,
.swiper-slide-active .hero-content .hero-lead,
.swiper-slide-active .hero-content .hero-actions {
  animation: hero-text-in .8s var(--ease-standard) both;
}
.swiper-slide-active .hero-content .hero-eyebrow  { animation-delay: .1s; }
.swiper-slide-active .hero-content .hero-title    { animation-delay: .22s; }
.swiper-slide-active .hero-content .hero-lead     { animation-delay: .38s; }
.swiper-slide-active .hero-content .hero-actions  { animation-delay: .52s; }
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content .hero-eyebrow,
  .hero-content .hero-title,
  .hero-content .hero-lead,
  .hero-content .hero-actions {
    opacity: 1;
    animation: none;
  }
}

/* Swiper chrome, restyled to match the brand instead of Swiper's defaults */
.hero-slider .swiper-pagination-bullet {
  background: rgba(255, 255, 255, .5);
  opacity: 1;
  width: 8px; height: 8px;
}
.hero-slider .swiper-pagination-bullet-active { background: var(--accent-solid); width: 22px; border-radius: 4px; }
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  color: #fff;
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  backdrop-filter: blur(4px);
}
.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after { font-size: 16px; }

/* Dark banner treatment — same charcoal-to-red gradient family as the CTA
   sections (.ps-cta, .admission-cta-section) — applied to every page header
   site-wide, not just the ones with an admin-uploaded photo, so the look is
   consistent whether or not one is set. */
.hero-minimal {
  position: relative;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--red-900) 100%);
  padding-block: var(--space-24);
  overflow: hidden;
  text-align: center;
}
.hero-minimal .container { position: relative; }
.hero-minimal .hero-title { color: #fff; }
.hero-minimal .hero-lead { color: rgba(255, 255, 255, .82); }
.hero-minimal .hero-eyebrow { color: var(--yellow-400); }

/* Optional admin-uploaded banner photo (Settings → General → Page Header
   Background) behind the About/Academics/Admissions/Contact page headers —
   .hero-minimal-bg is only ever rendered by the view when one exists. The
   scrim darkens the photo to the same dark tone the gradient above already
   gives every other header, so text contrast stays consistent either way. */
.hero-minimal-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-minimal-scrim {
  position: absolute; inset: 0;
  background: rgba(33, 33, 33, .68);
}

@media (max-width: 767px) {
  .hero-content { max-width: 100%; }
  .hero-slider .swiper-button-next, .hero-slider .swiper-button-prev { display: none; }
}

/* -----------------------------------------------------------------------
   Generic public-page building blocks (used by Gallery and every content
   listing/detail page that follows it — News, Events, Downloads, ...)
   ----------------------------------------------------------------------- */
.section-block { padding-block: var(--space-16); }
/* Used when a second stacked section follows immediately below (e.g. Leadership's
   Principal message -> Leadership grid) so they don't double up on top padding. */
.section-block--tight { padding-top: 0; }

.empty-block {
  text-align: center;
  padding-block: var(--space-16);
  color: var(--text-secondary);
}

.filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
/* Gallery-specific — Faculty's own department pills stay left-aligned (its
   list also opens with a distinct "All Faculty" count pill, which reads
   better flush-left); Gallery's plain category row reads better centered. */
.filter-pills--center { justify-content: center; }
.filter-pill {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.filter-pill:hover { border-color: var(--red-500); color: var(--brand-text); text-decoration: none; }
.filter-pill.is-active { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; }
.filter-pill-count {
  display: inline-block; margin-left: 4px; padding: 1px 7px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 700;
  background: var(--bg-muted); color: var(--text-muted);
}
.filter-pill.is-active .filter-pill-count { background: rgba(255, 255, 255, .25); color: #fff; }

/* -----------------------------------------------------------------------
   Gallery — public listing
   ----------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}
.gallery-card {
  display: block;
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.gallery-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow-brand); text-decoration: none; }
.gallery-card-cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-muted); }
.gallery-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.gallery-card:hover .gallery-card-cover img { transform: scale(1.06); }
.gallery-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-disabled);
}
.gallery-card-placeholder .icon { width: 32px; height: 32px; }
.gallery-card-count {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(33, 33, 33, .72);
  color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 5px;
}
.gallery-card-count .icon { width: 12px; height: 12px; }
.gallery-card-body { padding: var(--space-4); }
.gallery-card-body h3 { font-size: 16px; margin: 0 0 4px; }
.gallery-card-meta { font-size: 12.5px; color: var(--text-muted); }

/* Gallery — detail page photo grid + lightbox */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.photo-item {
  padding: 0; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-md); overflow: hidden;
  aspect-ratio: 1 / 1;
}
.photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-standard); }
.photo-item:hover img { transform: scale(1.05); }

.lightbox-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(7, 11, 9, .94);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-content { max-width: 90vw; max-height: 85vh; text-align: center; }
.lightbox-content img { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: var(--radius-md); }
.lightbox-caption { color: rgba(255, 255, 255, .8); font-size: 14px; margin-top: var(--space-3); }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, .1);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, .2); }
.lightbox-close { top: 20px; right: 20px; }
.lightbox-close .icon { width: 22px; height: 22px; }
.lightbox-nav .icon { width: 20px; height: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .lightbox-prev, .lightbox-next { width: 36px; height: 36px; }
  .lightbox-close { top: 10px; right: 10px; }
}

/* -----------------------------------------------------------------------
   News — public listing, cards, and article detail
   ----------------------------------------------------------------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}
.news-card {
  display: block;
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow-brand); text-decoration: none; }
.news-card-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-muted); }
.news-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.news-card:hover .news-card-cover img { transform: scale(1.06); }
.news-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-tint) 0%, var(--accent-tint) 100%);
  color: var(--brand-text);
}
.news-card-placeholder .icon { width: 36px; height: 36px; opacity: .55; }
.news-card-pin {
  position: absolute; top: 10px; right: 10px;
  background: rgba(33, 33, 33, .72);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.news-card-pin .icon { width: 14px; height: 14px; }
.news-card-body { padding: var(--space-4); }
.news-card-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--brand-text); margin-bottom: 6px;
}
.news-card-tag .icon { width: 12px; height: 12px; }
/* News & Events feed — events get the info-blue treatment so the two
   content types are tell-apart-able at a glance, not just by reading the label. */
.news-card-tag--event { color: var(--info-700); }
.news-card-body h3 { font-size: 16px; margin: 0 0 6px; }
.news-card-body p { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 10px; }
.news-card-meta { font-size: 12.5px; color: var(--text-muted); }

/* News — article detail */
.news-article { max-width: 760px; margin-inline: auto; }
.news-article-cover {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: var(--radius-lg); margin-bottom: var(--space-8);
}
.news-article-body { font-size: 16px; line-height: 1.75; color: var(--text-primary); }
.news-article-body p { margin: 0 0 var(--space-5); }
.news-article-body h2 { font-size: 24px; margin: var(--space-8) 0 var(--space-4); }
.news-article-body h3 { font-size: 20px; margin: var(--space-6) 0 var(--space-3); }
.news-article-body h4 { font-size: 17px; margin: var(--space-5) 0 var(--space-3); }
.news-article-body ul, .news-article-body ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.news-article-body li { margin-bottom: 6px; }
.news-article-body blockquote {
  margin: var(--space-6) 0; padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brand-solid); background: var(--bg-subtle);
  color: var(--text-secondary); font-style: italic;
}
.news-article-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-5) 0; }
.news-article-body figure { margin: var(--space-6) 0; }
.news-article-body figcaption { font-size: 13px; color: var(--text-muted); text-align: center; margin-top: 8px; }
.news-article-body table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: 14.5px; }
.news-article-body th, .news-article-body td { padding: 10px 12px; border: 1px solid var(--border-default); text-align: left; }
.news-article-body th { background: var(--bg-subtle); font-weight: 600; }
.news-article-body pre {
  background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4); overflow-x: auto; font-size: 13.5px;
}
.news-article-body code { font-family: var(--font-mono); }
.news-article-body a { color: var(--text-link); text-decoration: underline; }
.news-article-footer {
  margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-default);
  font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px;
}
.news-article-footer .icon { width: 14px; height: 14px; }

/* Pagination (shared shape with the admin table pagination) */
.pagination { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-6); font-size: 13px; color: var(--text-secondary); }
.pagination-links { display: flex; gap: 4px; }
.pagination-links a, .pagination-links span {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; border-radius: var(--radius-sm); text-decoration: none;
  color: var(--text-secondary); font-size: 13px;
}
.pagination-links a:hover { background: var(--bg-muted); }
.pagination-links .is-current { background: var(--brand-solid); color: #fff; font-weight: 600; }

/* -----------------------------------------------------------------------
   Events — public listing, cards, and detail page
   ----------------------------------------------------------------------- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}
.event-card {
  display: block;
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow-accent); text-decoration: none; }
.event-card-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-muted); }
.event-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.event-card:hover .event-card-cover img { transform: scale(1.06); }
.event-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-disabled);
}
.event-card-placeholder .icon { width: 32px; height: 32px; }
.event-date-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  text-align: center;
  line-height: 1.1;
  box-shadow: var(--shadow-md);
}
.event-date-day { display: block; font-size: 18px; font-weight: 700; color: var(--brand-text); }
.event-date-month { display: block; font-size: 11px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.event-status-tag {
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.event-status-cancelled { background: var(--danger-50); color: var(--danger-700); }
.event-status-completed { background: var(--info-50); color: var(--info-700); }
.event-card-body { padding: var(--space-4); }
.event-card-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--brand-text); margin-bottom: 6px;
}
.event-card-body h3 { font-size: 16px; margin: 0 0 6px; }
.event-card-body p { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 10px; }
.event-card-meta { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.event-card-meta .icon { width: 13px; height: 13px; flex-shrink: 0; }

/* Events — detail page facts strip + registration callout */
.event-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin: var(--space-6) 0; padding: var(--space-5);
  background: var(--bg-subtle); border-radius: var(--radius-lg);
}
.event-fact { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.event-fact .icon { width: 18px; height: 18px; color: var(--brand-text); margin-top: 2px; flex-shrink: 0; }
.event-fact strong { display: block; color: var(--text-primary); font-weight: 600; }
.event-fact span { display: block; font-size: 12.5px; }
.event-registration {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
  margin-bottom: var(--space-6); padding: var(--space-5);
  background: var(--brand-tint); border-radius: var(--radius-lg);
}
.event-registration p { margin: 0; font-size: 14px; color: var(--text-primary); font-weight: 500; }

/* Faculty — profile detail page (the directory grid/card styles live with
   their one canonical definition in the "Our Faculty" block below, shared
   with the homepage preview — this used to be a second, conflicting copy). */
.faculty-profile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 640px) { .faculty-profile { grid-template-columns: 1fr; } }
.faculty-profile-photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-disabled);
}
.faculty-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.faculty-profile-photo .icon { width: 64px; height: 64px; }
.faculty-fact {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text-secondary);
  margin-bottom: 10px;
}
.faculty-fact .icon { width: 16px; height: 16px; color: var(--brand-text); flex-shrink: 0; }
.faculty-bio { margin-top: var(--space-5); font-size: 15px; line-height: 1.7; color: var(--text-primary); }
.faculty-bio p { margin: 0 0 var(--space-4); }

/* -----------------------------------------------------------------------
   Leadership page — team grid (links through to the existing Faculty
   profile page, /faculty/{slug}, so no separate detail template exists)
   ----------------------------------------------------------------------- */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 900px) { .leadership-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .leadership-grid { grid-template-columns: 1fr; } }
.leadership-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.leadership-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow-brand); text-decoration: none; }
.leadership-card-photo { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-muted); }
.leadership-card-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.leadership-card:hover .leadership-card-photo img { transform: scale(1.06); }
.leadership-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand-text);
}
.leadership-card-placeholder .icon { width: 48px; height: 48px; }
.leadership-card-body { padding: var(--space-5) var(--space-6) var(--space-6); flex: 1; display: flex; flex-direction: column; }
.leadership-card-body h3 { font-size: var(--fs-h5); margin: 0 0 2px; color: var(--text-primary); }
.leadership-card-role { display: block; font-size: 13.5px; font-weight: 600; color: var(--brand-text); margin-bottom: var(--space-3); }
.leadership-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 var(--space-4); flex: 1; }
.leadership-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--brand-text);
}
.leadership-card-link .icon {
  width: 13px; height: 13px;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.leadership-card:hover .leadership-card-link .icon { transform: translateX(3px); }

/* -----------------------------------------------------------------------
   Departments page — subject-department cards. flex-wrap (not grid) so a
   lone trailing card centers on its own row instead of sitting stuck under
   column 1 — same fix as .ps-icon-grid-items.
   ----------------------------------------------------------------------- */
.department-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6);
  background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}
.department-card {
  position: relative; overflow: hidden;
  flex: 1 1 280px;
  min-height: 330px;
  display: flex; flex-direction: column;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (min-width: 701px) { .department-card { max-width: 320px; } }
.department-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-glow-brand); }
.department-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-solid); }
.department-card-icon {
  width: 56px; height: 56px; margin-bottom: var(--space-4); border-radius: var(--radius-md);
  background: var(--brand-tint); display: flex; align-items: center; justify-content: center;
}
.department-card-icon .icon { width: 26px; height: 26px; color: var(--brand-text); }
.department-card h3 { font-size: var(--fs-h5); margin: 0 0 var(--space-2); }
.department-card-desc { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 var(--space-4); flex: 1; }
.department-card-head {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); font-weight: 600;
  margin: 0 0 var(--space-4);
}
.department-card-head .icon { width: 14px; height: 14px; color: var(--brand-text); flex-shrink: 0; }
.department-card-head span { font-weight: 500; color: var(--text-muted); }
.department-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-top: var(--space-4); margin-top: auto; border-top: 1px solid var(--border-subtle);
}
.department-card-count {
  font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-muted);
}
.department-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--brand-text); white-space: nowrap;
}
.department-card-link .icon { width: 13px; height: 13px; transition: transform var(--dur-fast) var(--ease-standard); }
.department-card:hover .department-card-link .icon { transform: translateX(3px); }

.department-card--gold::before { background: var(--accent-solid); }
.department-card--gold .department-card-icon { background: var(--accent-tint); }
.department-card--gold .department-card-icon .icon { color: var(--accent-text); }
.department-card--info::before { background: var(--info-500); }
.department-card--info .department-card-icon { background: var(--info-50); }
.department-card--info .department-card-icon .icon { color: var(--info-700); }
.department-card--success::before { background: var(--success-500); }
.department-card--success .department-card-icon { background: var(--success-50); }
.department-card--success .department-card-icon .icon { color: var(--success-700); }
.department-card--violet::before { background: var(--violet-500); }
.department-card--violet .department-card-icon { background: var(--violet-50); }
.department-card--violet .department-card-icon .icon { color: var(--violet-500); }

/* -----------------------------------------------------------------------
   Homepage — section heading + Testimonials carousel
   ----------------------------------------------------------------------- */
.section-heading { text-align: center; max-width: 640px; margin: 0 auto var(--space-10); }
/* Pill-shaped badge (not plain text) — a small dot marker + tinted capsule
   around each section's overline label, so it reads as a tag rather than a
   caption. The red-to-gold underline moved down to sit under the heading
   itself (h2::after below) instead of the badge. */
.section-heading .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-text);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--radius-pill);
  padding: 7px 18px 7px 14px;
  margin: 0;
}
.section-heading .hero-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-solid);
  flex-shrink: 0;
}
.section-heading h2 { font-size: 30px; margin: var(--space-4) 0 0; text-wrap: balance; }
.section-heading h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: var(--space-3) auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand-solid), var(--accent-solid));
}

/* Dark section — same red-to-charcoal gradient family as .stats-section and
   .admission-cta-section, so the page alternates light/dark for rhythm
   instead of every section sitting on the same pale background. Trimmed
   to a shorter padding-block than the site's default .section-block, and
   its heading sits closer to the cards — this section reads as a compact
   strip of quotes, not a full-height showcase. */
.testimonials-section { padding-block: var(--space-12); background: linear-gradient(135deg, var(--charcoal) 0%, var(--red-900) 100%); }
.testimonials-section .section-heading { margin-bottom: var(--space-8); }
.testimonials-section .section-heading .hero-eyebrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: var(--yellow-300);
}
.testimonials-section .section-heading .hero-eyebrow::before { background: var(--yellow-400); }
.testimonials-section .section-heading h2 { color: #fff; }
.testimonials-slider { padding-bottom: var(--space-8); }
.testimonials-slider .swiper-pagination-bullet { background: rgba(255, 255, 255, .35); opacity: 1; }
.testimonials-slider .swiper-pagination-bullet-active { background: var(--yellow-400); }

/* Fixed min-height (not just height:100%) — Swiper sizes each .swiper-slide
   to its own content by default, so flex stretch alone doesn't equalize
   cards across slides the way it would in a plain wrapping row. A shared
   floor here is what actually makes every card read as the same size. */
.testimonial-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 288px;
  margin: 0;
  padding: var(--space-5);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.testimonial-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); box-shadow: var(--shadow-md); }
.testimonial-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-solid); }
.testimonial-card--gold::before { background: var(--accent-solid); }
.testimonial-card--gold .testimonial-avatar { background: var(--accent-tint); color: var(--accent-text); }
.testimonial-card--info::before { background: var(--info-500); }
.testimonial-card--info .testimonial-avatar { background: var(--info-50); color: var(--info-700); }
.testimonial-card--success::before { background: var(--success-500); }
.testimonial-card--success .testimonial-avatar { background: var(--success-50); color: var(--success-700); }
.testimonial-card--violet::before { background: var(--violet-500); }
.testimonial-card--violet .testimonial-avatar { background: var(--violet-50); color: var(--violet-500); }
/* Clamped to 4 lines so one long story doesn't stretch every card in its
   row to match it — cards stay a consistent, compact height regardless of
   how much a given parent/student wrote. */
.testimonial-quote {
  margin: 0 0 var(--space-3);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.testimonial-rating { display: flex; gap: 2px; margin-bottom: var(--space-3); }
.testimonial-rating .icon { width: 15px; height: 15px; color: var(--warning-500); }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--brand-tint); color: var(--brand-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-name { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.testimonial-role { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* -----------------------------------------------------------------------
   Downloads — public listing
   ----------------------------------------------------------------------- */
.download-list { display: flex; flex-direction: column; gap: var(--space-4); }
.download-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.download-row:hover { box-shadow: var(--shadow-md); border-color: var(--brand-tint-border); }
.download-row-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--brand-tint);
  display: flex; align-items: center; justify-content: center;
}
.download-row-icon .icon { width: 22px; height: 22px; color: var(--brand-text); }
.download-row-body { flex-grow: 1; min-width: 0; }
.download-row-body h3 { font-size: 15.5px; margin: 0 0 4px; }
.download-row-body p { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 6px; }
.download-row-meta { font-size: 12px; color: var(--text-muted); }
.download-row-btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .download-row { flex-wrap: wrap; }
  .download-row-btn { width: 100%; }
}

/* -----------------------------------------------------------------------
   Homepage hero — shown only when no admin Hero Slide is configured.
   A photographic background can replace .home-hero-bg's gradient later
   without touching markup or any other rule in this block.
   ----------------------------------------------------------------------- */
.home-hero {
  position: relative;
  min-height: min(82vh, 760px);
  min-height: min(82svh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.home-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 140% at 85% 15%, rgba(251, 192, 45, .16) 0%, transparent 55%),
    linear-gradient(135deg, var(--charcoal) 0%, var(--red-950) 48%, var(--red-900) 100%);
}
.home-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33, 33, 33, .30) 0%, rgba(33, 33, 33, .70) 100%);
}
.home-hero .hero-khatam { opacity: .07; }

.home-hero-shapes { position: absolute; inset: 0; overflow: hidden; }
.home-hero-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .3;
  animation-name: home-hero-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.home-hero-shape--1 {
  width: 190px; height: 190px; top: 10%; left: 6%;
  background: var(--accent-solid); animation-duration: 9s;
}
.home-hero-shape--2 {
  width: 120px; height: 120px; top: 62%; left: 16%;
  background: var(--red-400); animation-duration: 12s; animation-delay: -4s;
}
.home-hero-shape--3 {
  width: 100px; height: 100px; top: 18%; right: 10%;
  background: var(--yellow-400); border-radius: 28px; transform: rotate(18deg);
  animation-duration: 8s; animation-delay: -1.5s;
}
.home-hero-shape--4 {
  width: 150px; height: 150px; bottom: 8%; right: 14%;
  background: var(--red-300); animation-duration: 11s; animation-delay: -6s;
}
@keyframes home-hero-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-26px) translateX(12px); }
}
.home-hero-shape--3 {
  animation-name: home-hero-float-rotate;
}
@keyframes home-hero-float-rotate {
  0%, 100% { transform: translateY(0) rotate(18deg); }
  50%      { transform: translateY(-18px) rotate(26deg); }
}
@media (max-width: 600px) {
  .home-hero-shape--3, .home-hero-shape--4 { display: none; }
}

.home-hero .container { position: relative; z-index: 1; }
.home-hero-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--yellow-400);
  margin: 0 0 var(--space-5);
}
.home-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 var(--space-8);
  text-wrap: balance;
}
.home-hero-title .line-1 { display: block; font-size: var(--fs-display-2); color: #fff; }
.home-hero-title .line-2 { display: block; font-size: var(--fs-display-1); color: var(--yellow-400); margin-top: 4px; }
.home-hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* -----------------------------------------------------------------------
   Welcome Section — institution introduction + Principal/Owner messages
   ----------------------------------------------------------------------- */
.welcome-section .section-lead { font-size: var(--fs-lead); color: var(--text-secondary); margin-top: var(--space-2); }
.welcome-intro-image {
  display: block;
  width: 100%; max-width: 760px;
  max-height: 380px; object-fit: cover;
  margin: 0 auto var(--space-8);
  border-radius: var(--radius-xl);
}
.welcome-intro {
  max-width: var(--measure);
  margin: 0 auto var(--space-12);
  text-align: center;
  font-size: 16px;
  color: var(--text-secondary);
}
.welcome-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 1040px;
  margin-inline: auto;
}
/* Leadership spotlight card: dark photo panel + white message panel,
   modeled after a split "leader message" layout — one consistent dark
   treatment across every card (not per-person color) reads as a deliberate
   editorial/boardroom style rather than the tinted-card language used for
   the smaller grids elsewhere on the site. */
.welcome-message-card {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.welcome-message-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow-brand); }
/* Zig-zag: every second card mirrors the photo panel to the right instead
   of stacking every card identically — CSS-only, the markup order never
   changes, so this reads correctly whichever card comes first. */
.welcome-message-card:nth-child(even) { flex-direction: row-reverse; }

.welcome-message-side {
  flex: 1 1 260px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: linear-gradient(160deg, var(--charcoal) 0%, var(--red-900) 100%);
}

.welcome-message-photo {
  position: relative;
  width: 148px; height: 148px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
/* Two rings: a slow-spinning gold conic gradient (the decorative accent),
   and a static faint white ring just outside the photo itself. */
.welcome-message-photo::before {
  content: "";
  position: absolute; inset: -9px;
  border-radius: 50%;
  background: conic-gradient(var(--accent-solid) 0deg, transparent 110deg, transparent 250deg, rgba(251, 192, 45, .4) 360deg);
  animation: welcome-ring-spin 7s linear infinite;
}
.welcome-message-photo::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .15);
}
@keyframes welcome-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .welcome-message-photo::before { animation: none; }
}
.welcome-message-photo img,
.welcome-message-photo .icon {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25);
}
.welcome-message-photo img { object-fit: cover; }
.welcome-message-photo .icon { padding: 40px; box-sizing: border-box; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); }

.welcome-message-badge {
  display: inline-block;
  background: var(--accent-solid);
  color: var(--charcoal);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.welcome-message-name { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 2px; }
.welcome-message-role { font-size: 13px; color: rgba(255, 255, 255, .65); font-weight: 400; margin: 0; }

.welcome-message-main {
  flex: 2 1 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-10) var(--space-8);
}
.welcome-message-quote-mark {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: .6;
  color: var(--brand-solid);
  opacity: .25;
  margin-bottom: var(--space-2);
}
.welcome-message-subtitle {
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text);
  margin: 0 0 var(--space-3);
}
.welcome-message-quote {
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.75;
  color: var(--text-secondary);
}
.welcome-message-footer-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0; }
.welcome-message-footer-role { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0; }

@media (max-width: 700px) {
  .welcome-message-side { max-width: none; }
}

/* -----------------------------------------------------------------------
   Why Choose Us — feature card grid
   ----------------------------------------------------------------------- */
.features-section { background: var(--bg-subtle); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.feature-card {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--accent-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow-brand); border-color: var(--brand-tint-border); }
/* Card + icon backgrounds cycle through the four semantic tints already
   defined in tokens.css, so eight cards read as a lively set instead of one
   colour repeated eight times — no new palette values, just wider use of
   what already exists. The icon circle stays white so it still reads as a
   badge floating on the card rather than disappearing into a same-color fill. */
.feature-card:nth-child(4n+1) { background: var(--brand-tint); border-top-color: var(--brand-solid); }
.feature-card:nth-child(4n+1) .feature-card-icon .icon { color: var(--brand-text); }
.feature-card:nth-child(4n+2) { background: var(--accent-tint); border-top-color: var(--accent-solid); }
.feature-card:nth-child(4n+2) .feature-card-icon .icon { color: var(--yellow-950); }
.feature-card:nth-child(4n+3) { background: var(--info-50); border-top-color: var(--info-500); }
.feature-card:nth-child(4n+3) .feature-card-icon .icon { color: var(--info-700); }
.feature-card:nth-child(4n+4) { background: var(--success-50); border-top-color: var(--success-500); }
.feature-card:nth-child(4n+4) .feature-card-icon .icon { color: var(--success-700); }
.feature-card-icon {
  width: 60px; height: 60px;
  margin: 0 auto var(--space-5);
  border-radius: 50%;
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
}
.feature-card-icon .icon { width: 28px; height: 28px; color: var(--brand-text); }
.feature-card h3 { font-size: 16px; margin: 0 0 8px; }
.feature-card p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }

/* -----------------------------------------------------------------------
   Academic Programs — program card grid
   ----------------------------------------------------------------------- */
/* Plain white — deliberately neutral so it reads as its own band between
   the light-gray Features section above and the dark Admission CTA below,
   AND so all five card tints below (one of which is this same gold) stay
   readable against it instead of one card blending into a matching wash. */
.programs-section { background: var(--bg-surface); }
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}
.program-card {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-top: 3px solid var(--accent-solid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.program-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow-accent); }
/* One tint per academic stage (Play Group -> College) instead of every card
   sitting on the same plain white — the top border and icon swatch pick up
   the matching solid tone so each card reads as one deliberate color, not
   just a tinted background with mismatched accents. */
.programs-grid .program-card:nth-child(5n+1) { background: var(--brand-tint); border-top-color: var(--brand-solid); }
.programs-grid .program-card:nth-child(5n+2) { background: var(--accent-tint); border-top-color: var(--accent-solid); }
.programs-grid .program-card:nth-child(5n+3) { background: var(--info-50); border-top-color: var(--info-500); }
.programs-grid .program-card:nth-child(5n+4) { background: var(--success-50); border-top-color: var(--success-500); }
.programs-grid .program-card:nth-child(5n+5) { background: var(--violet-50); border-top-color: var(--violet-500); }
.program-card-icon {
  width: 60px; height: 60px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-xs);
}
.program-card-icon .icon { width: 28px; height: 28px; color: var(--accent-text); }
.programs-grid .program-card:nth-child(5n+1) .program-card-icon .icon { color: var(--brand-solid); }
.programs-grid .program-card:nth-child(5n+2) .program-card-icon .icon { color: var(--yellow-900); }
.programs-grid .program-card:nth-child(5n+3) .program-card-icon .icon { color: var(--info-500); }
.programs-grid .program-card:nth-child(5n+4) .program-card-icon .icon { color: var(--success-500); }
.programs-grid .program-card:nth-child(5n+5) .program-card-icon .icon { color: var(--violet-500); }
.program-card h3 { font-size: 17px; margin: 0 0 4px; }
.program-card-range {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--brand-text); margin-bottom: var(--space-3);
}
.program-card p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }

/* -----------------------------------------------------------------------
   Facilities — large photo-led cards
   ----------------------------------------------------------------------- */
/* Welcome/Programs/Gallery/News default to the cream body background;
   Features/Testimonials already break that up with --bg-subtle — giving
   Facilities the same tint keeps the whole page alternating cream/grey
   instead of three cream sections running together before the Stats band. */
.facilities-section { background: var(--bg-subtle); }
/* Single-row auto-playing carousel (site.js's Swiper init lives inline in
   home.php, next to the markup, matching the Testimonials slider). Swiper
   sets each .swiper-slide's width from slidesPerView; .facility-card just
   needs to fill that slide and match its neighbours' height. */
.facilities-slider { padding-bottom: var(--space-10); }
.facilities-slider .swiper-slide { height: auto; }
.facilities-slider .swiper-pagination-bullet { background: var(--brand-solid); opacity: .3; }
.facilities-slider .swiper-pagination-bullet-active { opacity: 1; }
.facility-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.facility-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--shadow-glow-brand); }
.facility-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Diagonal brand→accent wash — until a real photo is uploaded, the
     placeholder state still reads as an intentional, on-brand graphic
     rather than an empty tinted box. */
  background: linear-gradient(135deg, var(--brand-tint) 0%, var(--accent-tint) 100%);
}
.facility-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}
.facility-card:hover .facility-card-media img { transform: scale(1.06); }
.facility-card-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.facility-card-placeholder .icon { width: 44px; height: 44px; color: var(--brand-text); }
.facility-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(33, 33, 33, .78) 100%);
}
.facility-card-title {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  color: #fff;
  font-size: 18px;
  margin: 0;
}
.facility-card-desc { padding: var(--space-4); font-size: 13.5px; color: var(--text-secondary); margin: 0; }

/* -----------------------------------------------------------------------
   Statistics — animated counter band
   ----------------------------------------------------------------------- */
.stats-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16);
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--red-900) 100%);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-8);
  text-align: center;
}
.stat-item-icon {
  width: 52px; height: 52px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center;
}
.stat-item-icon .icon { width: 24px; height: 24px; color: var(--yellow-400); }
.stat-item-value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.stat-item-label {
  font-size: 13px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin: 0;
}

/* -----------------------------------------------------------------------
   Admission CTA banner — brand-solid background, matches the Stats
   section's dark treatment for visual continuity between the two.
   ----------------------------------------------------------------------- */
.admission-cta-section {
  background: linear-gradient(120deg, var(--brand-solid) 0%, var(--charcoal) 100%);
  padding-block: var(--space-16);
}
.admission-cta-inner { max-width: 760px; margin-inline: auto; text-align: center; }
.admission-cta-inner h2 { color: #fff; margin-bottom: var(--space-4); }
.admission-cta-inner p { color: rgba(255, 255, 255, .85); font-size: var(--fs-lead); margin-bottom: var(--space-6); }
.admission-cta-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6);
  list-style: none; margin: 0 0 var(--space-8); padding: 0;
}
.admission-cta-badges li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: rgba(255, 255, 255, .92); font-size: 14px; font-weight: 500;
}
.admission-cta-badges .icon { width: 16px; height: 16px; color: var(--accent-solid); flex-shrink: 0; }
.admission-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }

/* -----------------------------------------------------------------------
   Our Faculty — used both for the homepage preview (plain <div> cards,
   4-up) and the full /faculty directory (the same cards as <a> links,
   filterable by department — see .filter-pill-count above).
   ----------------------------------------------------------------------- */
.faculty-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6);
}
.faculty-card {
  display: block;
  flex: 1 1 240px; max-width: 260px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.faculty-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-glow-brand); text-decoration: none; color: inherit; }
.faculty-card-photo {
  width: 140px; height: 140px; margin: 0 auto var(--space-4);
  border-radius: 50%; overflow: hidden;
  background: var(--brand-tint); color: var(--brand-text);
  display: flex; align-items: center; justify-content: center;
}
.faculty-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.faculty-card-photo .icon { width: 56px; height: 56px; }
.faculty-card h3 { font-size: var(--fs-h5); margin: 0 0 2px; }
.faculty-card-role { color: var(--brand-text); font-weight: 600; font-size: 13.5px; margin: 0 0 2px; }
.faculty-card-dept { color: var(--text-secondary); font-size: 13px; margin: 0 0 4px; }
.faculty-card-qualification { color: var(--text-muted); font-size: 12.5px; margin: 0 0 var(--space-3); }
.faculty-card-exp {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--accent-text);
  background: var(--accent-tint); padding: 3px 10px; border-radius: var(--radius-pill);
}

/* -----------------------------------------------------------------------
   Vibrant Campus — text + one photo pulled from the "Campus Life" gallery
   ----------------------------------------------------------------------- */
.campus-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}
@media (max-width: 900px) { .campus-split { grid-template-columns: 1fr; gap: var(--space-6); } }
.campus-split-text p { color: var(--text-secondary); margin-bottom: var(--space-5); }
.campus-highlights {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.campus-highlights li { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; }
.campus-highlights .icon { width: 18px; height: 18px; color: var(--brand-text); flex-shrink: 0; }
.campus-split-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.campus-split-image img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }

/* -----------------------------------------------------------------------
   Latest News preview (homepage) — reuses .news-card from the News module
   ----------------------------------------------------------------------- */
.news-card-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text);
}
.news-card-readmore .icon {
  width: 13px; height: 13px;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.news-card:hover .news-card-readmore .icon { transform: translateX(3px); }
.section-cta { text-align: center; margin-top: var(--space-10); }

/* -----------------------------------------------------------------------
   Public form primitives — this is the first form the public site needs
   (the Contact form below); mirrors the admin form spec so the visual
   language matches everywhere (docs/09-design-components §1).
   ----------------------------------------------------------------------- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--space-2); color: var(--text-primary); }
.inp {
  width: 100%; height: 44px; padding: 0 14px; font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--text-primary);
}
textarea.inp { height: auto; }
.inp:focus { outline: none; border-color: var(--red-500); box-shadow: var(--shadow-focus); }
.help { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.field-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.alert-box { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: 14px; margin-bottom: var(--space-5); }
.alert-success { background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-200); }
.alert-error { background: var(--danger-50); color: var(--danger-700); border: 1px solid var(--danger-200); }
.alert-info { background: var(--info-50); color: var(--info-700); border: 1px solid var(--info-200); }

/* -----------------------------------------------------------------------
   Contact section — map, address/phone/email, contact form
   ----------------------------------------------------------------------- */
.contact-alert { max-width: 640px; margin-inline: auto; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
/* Grid items default to min-width:auto, so their content's intrinsic min
   size can force the track wider than its container ("grid blowout") —
   override so they shrink to fit instead. */
.contact-info, .contact-form { min-width: 0; }
.contact-info { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-default);
  aspect-ratio: 4 / 3;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-detail {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--text-secondary);
  padding: var(--space-4);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.contact-detail .icon { width: 18px; height: 18px; color: var(--brand-text); flex-shrink: 0; margin-top: 1px; }
.contact-detail a { color: var(--text-secondary); }
.contact-detail a:hover { color: var(--brand-text); }
.contact-form {
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

/* -----------------------------------------------------------------------
   Admissions — "How It Works" process steps and the online application
   form + documents sidebar on /admissions#apply.
   ----------------------------------------------------------------------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}
.process-step {
  position: relative;
  padding: var(--space-6) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.process-step-no {
  position: absolute; top: var(--space-4); right: var(--space-5);
  font-size: 28px; font-weight: 800; color: var(--border-default);
  line-height: 1;
}
.process-step-icon {
  width: 48px; height: 48px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--brand-tint);
  display: flex; align-items: center; justify-content: center;
}
.process-step-icon .icon { width: 22px; height: 22px; color: var(--brand-text); }
.process-step h3 { font-size: 16px; margin: 0 0 6px; }
.process-step p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }

.apply-section { background: var(--bg-subtle); }
.apply-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 860px) { .apply-grid { grid-template-columns: 1fr; } }
/* Grid items default to min-width:auto, so a long unbroken value (e.g. an
   email in an old-input-repopulated field) can force the track wider than
   its container — same "grid blowout" fix as .contact-info/.contact-form. */
.apply-form, .apply-docs { min-width: 0; }
.apply-form-subhead {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--brand-text);
  margin: var(--space-6) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.apply-form-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.radio-row { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.radio-inline { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-primary); font-weight: 400; }
.radio-inline input[type="radio"] { width: 17px; height: 17px; accent-color: var(--brand-solid); }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-solid); flex-shrink: 0; }

.apply-docs {
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  position: sticky;
  top: calc(var(--navbar-h-scrolled) + var(--space-4));
}
.apply-docs h3 { display: flex; align-items: center; gap: 10px; font-size: 15.5px; margin: 0 0 var(--space-4); }
.apply-docs h3 .icon { width: 20px; height: 20px; color: var(--brand-text); }
.doc-checklist { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.doc-checklist li { position: relative; padding-left: 26px; font-size: 13.5px; color: var(--text-secondary); }
.doc-checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--brand-tint); color: var(--brand-text);
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}

/* -----------------------------------------------------------------------
   Admission Form — multi-step stepper + per-step actions + review summary
   (app/Views/web/pages/admission-form.php). One <form>, one POST — the
   "steps" are just fieldsets shown/hidden by JS; nothing here changes what
   gets submitted.
   ----------------------------------------------------------------------- */
.form-stepper {
  display: flex; align-items: flex-start; justify-content: center;
  max-width: 860px; margin: 0 auto var(--space-10);
}
.form-stepper-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 0 1 160px; text-align: center; }
.form-stepper-circle {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
  background: var(--bg-muted); color: var(--text-muted);
  border: 2px solid var(--border-default);
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.form-stepper-step.is-active .form-stepper-circle { background: var(--brand-solid); border-color: var(--brand-solid); color: #fff; box-shadow: 0 0 0 4px var(--brand-tint); }
.form-stepper-step.is-complete .form-stepper-circle { background: var(--brand-tint); border-color: var(--brand-solid); color: var(--brand-text); }
.form-stepper-label { font-size: 13px; font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.form-stepper-step.is-active .form-stepper-label { color: var(--text-primary); }
.form-stepper-connector { flex: 1 1 auto; height: 2px; background: var(--border-default); margin-top: 22px; min-width: 24px; }
.form-stepper-connector.is-complete { background: var(--brand-solid); }
@media (max-width: 560px) {
  .form-stepper-label { display: none; }
  .form-stepper-circle { width: 34px; height: 34px; font-size: 13px; }
  .form-stepper-connector { margin-top: 16px; }
}

/* Wider + roomier than the base .contact-form card it also carries (720px
   was cramped for a 2-column field-grid on a dedicated application page —
   this is the only form on the site with its own full page, so it can
   afford more breathing room without affecting Contact's shared form). */
.admission-form {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-8);
  box-shadow: var(--shadow-md);
}
@media (max-width: 560px) { .admission-form { padding: var(--space-6) var(--space-5); } }
.admission-form .field { margin-bottom: var(--space-5); }
.admission-form .field-grid { gap: var(--space-5); }
.admission-form .inp { height: 48px; font-size: 15.5px; }
.admission-form .apply-form-subhead { font-size: 13.5px; margin-bottom: var(--space-5); }
.form-step-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.form-step-actions .icon { width: 16px; height: 16px; }
.form-step-actions .btn { min-height: 48px; padding-inline: var(--space-6); }

.review-summary { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-6); }
.review-row {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 14.5px;
}
.review-label { color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.review-value { color: var(--text-primary); text-align: right; }

.apply-docs--inline { position: static; margin-bottom: var(--space-6); padding: var(--space-6); }

/* -----------------------------------------------------------------------
   Anchor targets — the header is fixed (docs' Step 6.12), so a jump to
   #about/#academics/#contact/#apply must not land the section top
   underneath it.
   ----------------------------------------------------------------------- */
#about, #academics, #contact, #apply {
  scroll-margin-top: calc(var(--navbar-h-scrolled) + var(--space-4));
}

/* -----------------------------------------------------------------------
   Scroll-reveal animations — Fade Up / Slide Left / Slide Right / Zoom.
   Elements opt in with one of the four classes below; public/assets/js/
   site.js adds .is-visible via IntersectionObserver the first time each one
   enters the viewport (one-shot, same pattern as the Statistics counter).
   .reveal-stagger staggers its direct children's entrance so a card grid
   doesn't pop in as one flat block.
   ----------------------------------------------------------------------- */
.reveal-fade-up, .reveal-slide-left, .reveal-slide-right, .reveal-zoom {
  opacity: 0;
  transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
  will-change: opacity, transform;
}
.reveal-fade-up { transform: translateY(32px); }
.reveal-slide-left { transform: translateX(-48px); }
.reveal-slide-right { transform: translateX(48px); }
.reveal-zoom { transform: scale(.9); }

.reveal-fade-up.is-visible,
.reveal-slide-left.is-visible,
.reveal-slide-right.is-visible,
.reveal-zoom.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 210ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 280ms; }
.reveal-stagger > *:nth-child(6) { transition-delay: 350ms; }
.reveal-stagger > *:nth-child(7) { transition-delay: 420ms; }
.reveal-stagger > *:nth-child(n+8) { transition-delay: 490ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal-fade-up, .reveal-slide-left, .reveal-slide-right, .reveal-zoom {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -----------------------------------------------------------------------
   Page Sections — the admin "Pages" content-section builder (rich text,
   image+text, icon grid, CTA, stats, FAQ, gallery, testimonials). Every
   section alternates cream/subtle background automatically via
   .ps-section:nth-of-type(even), the same rhythm used on the homepage.
   `ps-` prefix keeps these from ever colliding with a page's own bespoke
   classes (.hero-*, .program-card, etc).
   ----------------------------------------------------------------------- */
.ps-section:nth-of-type(even) { background: var(--bg-subtle); }
.ps-heading { font-size: var(--fs-h2); margin: 0 0 var(--space-3); text-align: center; }
.ps-subheading { text-align: center; color: var(--text-secondary); max-width: var(--measure); margin: 0 auto var(--space-10); }

.ps-rich-text .ps-richtext-body { max-width: var(--measure); margin: 0 auto; font-size: 16px; line-height: 1.75; color: var(--text-primary); }
.ps-rich-text .ps-richtext-body img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
/* Tables (e.g. a grading scale) — display:block + overflow-x lets a wide
   table scroll on narrow screens without needing a wrapper div, which isn't
   available since this markup comes from sanitized admin-authored content. */
.ps-rich-text .ps-richtext-body table {
  display: block; overflow-x: auto; max-width: 100%;
  border-collapse: collapse; margin: var(--space-6) 0; font-size: 14.5px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.ps-rich-text .ps-richtext-body th, .ps-rich-text .ps-richtext-body td {
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: normal;
}
.ps-rich-text .ps-richtext-body thead th { background: var(--brand-tint); color: var(--brand-text); font-weight: 700; border-bottom: 1px solid var(--border-default); }
.ps-rich-text .ps-richtext-body tbody tr:last-child td { border-bottom: none; }
.ps-rich-text .ps-richtext-body tbody tr:nth-child(even) { background: var(--bg-subtle); }

.ps-image-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; }
.ps-image-text-grid--left .ps-image-text-media { order: -1; }
.ps-image-text-media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-xl); display: block; }
.ps-image-text-body h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-4); }
.ps-image-text-body p { font-size: 16px; line-height: 1.75; color: var(--text-secondary); white-space: pre-line; }
/* No image set — collapse the dead second column instead of leaving half
   the section blank; center a comfortable reading-width column instead. */
.ps-image-text-grid--no-image { grid-template-columns: 1fr; }
.ps-image-text-grid--no-image .ps-image-text-body { max-width: var(--measure); margin-inline: auto; text-align: center; }
@media (max-width: 767px) {
  .ps-image-text-grid { grid-template-columns: 1fr; }
  .ps-image-text-grid--left .ps-image-text-media { order: 0; }
}

/* flex-wrap (not grid) so a lone card completing an otherwise-full row —
   e.g. Accreditation & Affiliations' 5th card — centers itself on its own
   row instead of sitting stuck under column 1. The max-width cap is
   tablet+-only so mobile's single-column cards stay full-width, unchanged. */
.ps-icon-grid-items {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6);
  background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}
.ps-icon-card {
  position: relative; overflow: hidden;
  flex: 1 1 220px;
  text-align: center; padding: var(--space-8) var(--space-5);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (min-width: 701px) { .ps-icon-card { max-width: 300px; } }
.ps-icon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Colored top rule identifies each card at a glance — a small "badge" cue
   that reads well for accreditation/affiliation-style grids in particular. */
.ps-icon-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-solid); }
.ps-icon-card-icon {
  width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: 50%;
  background: var(--brand-tint); display: flex; align-items: center; justify-content: center;
}
.ps-icon-card-icon .icon { width: 26px; height: 26px; color: var(--brand-text); }
.ps-icon-card h3 { font-size: 16px; margin: 0 0 8px; }
.ps-icon-card p { font-size: 13.5px; color: var(--text-secondary); margin: 0; }

/* Optional per-item color (icon_grid.php, stats.php) — "brand" (default,
   above) needs no override; the rest give a section like Accreditation &
   Affiliations a distinct hue per entry instead of one flat color. */
.ps-icon-card--gold { background: var(--accent-tint); }
.ps-icon-card--gold::before { background: var(--accent-solid); }
.ps-icon-card--gold .ps-icon-card-icon { background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.ps-icon-card--gold .ps-icon-card-icon .icon { color: var(--accent-text); }
.ps-icon-card--info { background: var(--info-50); }
.ps-icon-card--info::before { background: var(--info-500); }
.ps-icon-card--info .ps-icon-card-icon { background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.ps-icon-card--info .ps-icon-card-icon .icon { color: var(--info-700); }
.ps-icon-card--success { background: var(--success-50); }
.ps-icon-card--success::before { background: var(--success-500); }
.ps-icon-card--success .ps-icon-card-icon { background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.ps-icon-card--success .ps-icon-card-icon .icon { color: var(--success-700); }
.ps-icon-card--violet { background: var(--violet-50); }
.ps-icon-card--violet::before { background: var(--violet-500); }
.ps-icon-card--violet .ps-icon-card-icon { background: var(--bg-surface); box-shadow: var(--shadow-xs); }
.ps-icon-card--violet .ps-icon-card-icon .icon { color: var(--violet-500); }

/* .ps-section.ps-cta (two classes, not one) so this always outranks
   .ps-section:nth-of-type(even) above — the CTA's own dark gradient must
   never lose to the automatic zebra background just because it happens to
   land on an even section index (e.g. a 3-section page with no hero-tag
   offset before it). Selector specificity is equal either way; this wins
   the tie by appearing later in the file. */
.ps-section.ps-cta { text-align: center; background: linear-gradient(135deg, var(--charcoal) 0%, var(--red-900) 100%); color: #fff; }
.ps-section.ps-cta .ps-heading, .ps-section.ps-cta p { color: #fff; }
.ps-section.ps-cta p { max-width: var(--measure); margin: 0 auto var(--space-6); opacity: .9; }

.ps-stats-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-6); text-align: center; }
.ps-stat-item {
  padding: var(--space-6) var(--space-4);
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-out);
}
.ps-stat-item:hover { transform: translateY(-3px); }
.ps-stat-item--gold { background: var(--accent-tint); border-color: var(--yellow-200); }
.ps-stat-item--info { background: var(--info-50); border-color: var(--info-200); }
.ps-stat-item--success { background: var(--success-50); border-color: var(--success-200); }
.ps-stat-item--violet { background: var(--violet-50); border-color: rgba(124, 58, 237, .25); }
.ps-stat-value { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--brand-text); margin: 0; }
.ps-stat-value--gold { color: var(--accent-text); }
.ps-stat-value--info { color: var(--info-700); }
.ps-stat-value--success { color: var(--success-700); }
.ps-stat-value--violet { color: var(--violet-500); }
.ps-stat-label { font-size: 13px; font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-secondary); margin: 4px 0 0; }

.ps-faq-list { max-width: var(--measure); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.ps-faq-item { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-5); }
.ps-faq-item summary { cursor: pointer; padding: var(--space-3) 0; font-weight: 600; color: var(--text-primary); list-style: none; }
.ps-faq-item summary::-webkit-details-marker { display: none; }
.ps-faq-item summary::before { content: "+"; display: inline-block; width: 20px; color: var(--brand-text); font-weight: 700; }
.ps-faq-item[open] summary::before { content: "\2212"; }
.ps-faq-item p { padding: 0 0 var(--space-4) 20px; color: var(--text-secondary); margin: 0; }

.ps-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.ps-gallery-item { display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--bg-muted); }
.ps-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); }
.ps-gallery-item:hover img { transform: scale(1.06); }
.ps-gallery-caption { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; text-align: center; }

.ps-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.ps-testimonial-card { padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ps-testimonial-quote { font-family: var(--font-display); font-style: italic; font-size: 15.5px; line-height: 1.7; color: var(--text-primary); margin: 0 0 var(--space-4); }
.ps-testimonial-name { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0; }
.ps-testimonial-role { font-size: 12.5px; color: var(--brand-text); font-weight: 600; margin: 2px 0 0; }

/* -----------------------------------------------------------------------
   Academic Calendar — /academic-calendar. Exam terms + holidays merged
   into one chronological, month-grouped timeline. `.cal-badge` is its own
   small pill (not `.badge`, which only exists in admin.css for the admin
   panel — the public site never loads that stylesheet).
   ----------------------------------------------------------------------- */
.cal-session-banner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  background: var(--brand-tint); border: 1px solid var(--brand-tint-border);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8); font-size: 14px; color: var(--text-primary);
}
.cal-session-banner .icon { width: 18px; height: 18px; color: var(--brand-text); vertical-align: -3px; }
.cal-session-dates { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 13.5px; }

.cal-legend { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: center; margin-bottom: var(--space-10); }
.cal-legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cal-dot--info, .cal-badge--info       { background: var(--info-500); }
.cal-dot--warning, .cal-badge--warning { background: var(--warning-500); }
.cal-dot--danger, .cal-badge--danger   { background: var(--danger-500); }
.cal-dot--success, .cal-badge--success { background: var(--success-500); }
.cal-dot--violet, .cal-badge--violet   { background: var(--violet-500); }
.cal-dot--mute, .cal-badge--mute       { background: var(--text-muted); }

.cal-badge {
  display: inline-block; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: var(--space-2);
}

.cal-timeline { max-width: 820px; margin: 0 auto; }
.cal-month { margin-bottom: var(--space-10); }
.cal-month-heading {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--brand-text); margin: 0 0 var(--space-5);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--border-subtle);
}
.cal-month-items { display: flex; flex-direction: column; gap: var(--space-4); }

.cal-item {
  display: flex; gap: var(--space-5);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-left-width: 4px; border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cal-item:hover { transform: translateX(2px); box-shadow: var(--shadow-md); }
.cal-item--info    { border-left-color: var(--info-500); }
.cal-item--warning  { border-left-color: var(--warning-500); }
.cal-item--danger   { border-left-color: var(--danger-500); }
.cal-item--success  { border-left-color: var(--success-500); }
.cal-item--violet   { border-left-color: var(--violet-500); }
.cal-item--mute     { border-left-color: var(--border-strong); }

.cal-item-date {
  flex-shrink: 0; width: 64px; height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg-subtle); border-radius: var(--radius-md);
}
.cal-item-day { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.cal-item-month { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }

.cal-item-body { min-width: 0; flex-grow: 1; }
.cal-item-body h3 { font-size: 16px; margin: 0 0 4px; }
.cal-item-body p { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 8px; }
.cal-item-range { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-item-range .icon { width: 13px; height: 13px; }

@media (max-width: 560px) {
  .cal-item { flex-direction: column; gap: var(--space-3); }
  .cal-item-date { flex-direction: row; width: auto; height: auto; gap: 6px; padding: 6px 12px; align-self: flex-start; }
  .cal-session-banner { flex-direction: column; align-items: flex-start; }
}

/* -----------------------------------------------------------------------
   Fee Structure — /fee-structure. One table per wing (Primary/Middle/
   Secondary/College), columns are whatever fee heads are actually entered
   for that session — see FeeStructureController.
   ----------------------------------------------------------------------- */
.fee-wing { margin-bottom: var(--space-10); }
.fee-wing-heading {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  color: var(--brand-text); margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--border-subtle);
}
.fee-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.fee-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.fee-table th, .fee-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-subtle); }
.fee-table thead th {
  background: var(--brand-tint); color: var(--brand-text); font-weight: 700;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.fee-table-freq { display: block; font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .75; }
.fee-table-class { font-weight: 600; color: var(--text-primary); }
.fee-table tbody tr:last-child td { border-bottom: none; }
.fee-table tbody tr:nth-child(even) { background: var(--bg-subtle); }
.fee-table-na { color: var(--text-disabled); }

.fee-notes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  margin: var(--space-12) 0 var(--space-4);
}
@media (max-width: 860px) { .fee-notes { grid-template-columns: 1fr; } }
.fee-note { display: flex; gap: var(--space-4); }
.fee-note-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--brand-tint); color: var(--brand-text);
  display: flex; align-items: center; justify-content: center;
}
.fee-note-icon .icon { width: 20px; height: 20px; }
.fee-note h3 { font-size: 15px; margin: 0 0 4px; }
.fee-note p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.6; }

/* -----------------------------------------------------------------------
   Scroll-to-top button — fixed bottom-right, fades in once the visitor has
   scrolled past the fold (site.js toggles .is-visible). Reuses the
   chevron-down icon rotated 180deg rather than adding a new sprite entry.
   ----------------------------------------------------------------------- */
.scroll-top-btn {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 40;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--brand-solid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--brand-solid-hover); }
.scroll-top-btn .icon { width: 20px; height: 20px; transform: rotate(180deg); }
@media (max-width: 600px) {
  .scroll-top-btn { right: var(--space-4); bottom: var(--space-4); width: 40px; height: 40px; }
}

/* -----------------------------------------------------------------------
   WhatsApp chat button — fixed bottom-right, always visible (unlike
   .scroll-top-btn, which only fades in past the fold), stacked directly
   above it. WhatsApp's own brand green is a deliberate exception to the
   site's red/gold palette — visitors recognize it as "this opens chat"
   precisely because it doesn't match the rest of the page.
   ----------------------------------------------------------------------- */
.whatsapp-fab {
  position: fixed;
  right: var(--space-6);
  bottom: calc(var(--space-6) + 44px + var(--space-3));
  z-index: 40;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-standard);
}
.whatsapp-fab:hover { background: #20bd5a; transform: scale(1.06); box-shadow: var(--shadow-lg); text-decoration: none; color: #fff; }
.whatsapp-fab svg { width: 26px; height: 26px; fill: currentColor; }
@media (max-width: 600px) {
  .whatsapp-fab { right: var(--space-4); bottom: calc(var(--space-4) + 40px + var(--space-3)); width: 44px; height: 44px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
}

/* -----------------------------------------------------------------------
   Responsive polish — mobile / tablet / laptop / desktop.
   Kept last so it refines earlier rules without changing desktop layout.
   ----------------------------------------------------------------------- */
img, video, svg, iframe { max-width: 100%; }
img, video { height: auto; }
iframe { border: 0; }
table { max-width: 100%; }
.table-scroll, .fee-table-wrap, .cal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
h1, h2, h3 { overflow-wrap: anywhere; text-wrap: balance; }
p, li { overflow-wrap: break-word; }
.whatsapp-fab, .back-to-top { margin-bottom: env(safe-area-inset-bottom, 0); }

@media (min-width: 701px) and (max-width: 991px) {
  .department-card, .faculty-card { max-width: 300px; }
  .section-block { padding-block: var(--space-12); }
}

@media (max-width: 767px) {
  .section-block { padding-block: var(--space-10); }
  .btn { min-height: 44px; }
  .inp, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea,
  .admission-form input:not([type=checkbox]):not([type=radio]), .admission-form select, .admission-form textarea { font-size: 16px; min-height: 44px; }
  textarea.inp, .field textarea { min-height: 96px; }
  .department-card-link, .news-card-readmore, .footer-links a, .site-footer a { display: inline-flex; align-items: center; min-height: 36px; }
  .welcome-message-badge, .cal-item-month, .cal-badge, .news-card-tag, .event-date-month, .event-card-tag, .fee-table-freq { font-size: 12px; }
  .hero-actions, .admission-cta-actions, .section-cta { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .admission-cta-actions .btn { width: 100%; }
  .testimonial-card { min-height: 0; }
  .stats-grid { gap: var(--space-6); }
  .campus-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .hero-title, .hero-slide h1 { font-size: clamp(26px, 8.5vw, 32px); }
  .stat-item-value { font-size: 32px; }
  .welcome-message-side { padding-inline: var(--space-4); }
}

@media (min-width: 1600px) {
  .container { max-width: 1320px; }
}

@media (hover: none) {
  .welcome-message-card:hover, .feature-card:hover, .program-card:hover, .department-card:hover,
  .faculty-card:hover, .news-card:hover, .testimonial-card:hover, .ps-icon-card:hover { transform: none; }
}

/* -----------------------------------------------------------------------
   UX foundations — keyboard focus, skip link, form + button states,
   selection. One consistent ring/state language across the whole site.
   ----------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--brand-solid); outline-offset: 2px; border-radius: 4px; }
.stats-section :focus-visible, .admission-cta-section :focus-visible, .testimonials-section :focus-visible,
.site-footer :focus-visible, .hero-slide :focus-visible, .hero-minimal :focus-visible { outline-color: var(--yellow-400); }
.inp:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 10000;
  padding: 10px 16px; border-radius: var(--radius-md);
  background: var(--brand-solid); color: #fff; font-weight: 600; font-size: 14px;
  transform: translateY(-160%); transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); color: #fff; }
.site-main:focus { outline: none; }
::selection { background: var(--brand-solid); color: #fff; }

.inp:hover:not(:disabled):not(:focus) { border-color: var(--neutral-500, var(--border-strong)); }
.inp:disabled, .inp[readonly], .btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.inp[aria-invalid="true"], .field.has-error .inp { border-color: var(--danger-500); }
.inp[aria-invalid="true"]:focus, .field.has-error .inp:focus { box-shadow: var(--shadow-focus-danger); }
.field-error { font-size: 12.5px; color: var(--danger-700); margin-top: 4px; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn { transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }

.prose a, .ps-rich-text a, .page-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover, .ps-rich-text a:hover, .page-content a:hover { text-decoration-thickness: 2px; }

@media print {
  .site-header, .site-footer, .whatsapp-fab, .back-to-top, .skip-link, .hero-minimal-bg { display: none !important; }
  body { background: #fff; }
}

/* -----------------------------------------------------------------------
   Logo on dark surfaces — the logo's lettering is black on transparent, so
   on the dark footer it must sit on a white plate to stay legible and keep
   the brand colours (yellow / red / black) intact.
   ----------------------------------------------------------------------- */
.footer-brand-logo { background: #fff; padding: 6px 12px; border-radius: var(--radius-md); box-sizing: content-box; height: 46px; }

/* -----------------------------------------------------------------------
   Gallery viewer — video tiles, counter, loading state, video frame.
   ----------------------------------------------------------------------- */
.photo-item { position: relative; background: var(--bg-muted); }
.photo-item:focus-visible { outline-offset: -3px; }
.photo-item-play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
  pointer-events: none; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.photo-item-play .icon { width: 26px; height: 26px; margin-left: 3px; }
.photo-item.is-video:hover .photo-item-play { transform: scale(1.08); background: var(--brand-solid); }

.lightbox-overlay { flex-direction: column; }
.lightbox-content { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100vw; padding-inline: 64px; }
.lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.lightbox-stage img[hidden], .lightbox-video[hidden], .lightbox-caption[hidden] { display: none; }
.lightbox-video { width: min(88vw, 1100px); aspect-ratio: 16 / 9; }
.lightbox-video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-md); background: #000; }
.lightbox-caption { max-width: 70ch; margin-inline: auto; }
.lightbox-counter { color: rgba(255, 255, 255, .55); font-size: 12.5px; letter-spacing: .06em; margin: var(--space-2) 0 0; font-variant-numeric: tabular-nums; }
.lightbox-spinner {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .2); border-top-color: #fff;
  animation: lightbox-spin .8s linear infinite; opacity: 0; transition: opacity var(--dur-fast);
}
.lightbox-overlay.is-loading .lightbox-spinner { opacity: 1; }
@keyframes lightbox-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .lightbox-content { padding-inline: 8px; } }
@media (prefers-reduced-motion: reduce) { .lightbox-spinner { animation-duration: 2s; } }

/* Text for screen readers and search engines only (section headings that would be redundant visually). */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Breadcrumbs — visible trail that mirrors the BreadcrumbList structured data. */
.breadcrumb-bar { background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.breadcrumb-bar ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 10px 0; gap: 2px 0; }
.breadcrumb-bar li { display: inline-flex; align-items: center; color: var(--text-muted); min-width: 0; }
.breadcrumb-bar li + li::before { content: "\203A"; margin-inline: 8px; color: var(--text-disabled, var(--text-muted)); }
.breadcrumb-bar a { color: var(--text-secondary); }
.breadcrumb-bar a:hover { color: var(--brand-text); }
.breadcrumb-bar li[aria-current] { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }

/* -----------------------------------------------------------------------
   Navigation state — current page, and a drawer that is truly closed.
   ----------------------------------------------------------------------- */
.site-nav > a.is-active,
.nav-dropdown.is-active > .nav-dropdown-trigger { color: var(--accent-solid); }
.site-nav > a.is-active::after,
.nav-dropdown.is-active > .nav-dropdown-trigger::after { right: 0; }
.nav-dropdown-panel a.is-active { color: var(--brand-text); background: var(--brand-tint); font-weight: 700; }

@media (max-width: 900px) {
  /* Closed drawer: off-screen links must not be reachable with Tab or a screen reader. */
  .site-nav {
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-standard), visibility 0s linear var(--dur-slow);
  }
  .site-nav.is-open { visibility: visible; transition-delay: 0s; }
  /* The drawer is light, so the current page uses the brand red (yellow would vanish on white). */
  .site-nav > a.is-active,
  .nav-dropdown.is-active > .nav-dropdown-trigger { color: var(--brand-text); box-shadow: inset 3px 0 0 var(--brand-solid); background: var(--brand-tint); }
}

/* -----------------------------------------------------------------------
   Forms — required markers, optional hints, busy state.
   ----------------------------------------------------------------------- */
.req { color: var(--danger-700); font-weight: 700; margin-left: 2px; }
.optional { font-weight: 400; color: var(--text-muted); font-size: .92em; }
.form-note { font-size: 12.5px; color: var(--text-muted); margin: 0 0 var(--space-4); }
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy::after {
  content: ""; width: 14px; height: 14px; margin-left: 8px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation-duration: 2s; } }

/* -----------------------------------------------------------------------
   QA fixes — contrast and touch-target size (WCAG 2.2 AA: 24px minimum).
   ----------------------------------------------------------------------- */
/* The yellow eyebrow is for dark heroes; on a light section it needs the brand red. */
.section-cta > .hero-eyebrow, .apply-section .hero-eyebrow { color: var(--brand-text); }
.fee-table-freq { opacity: 1; color: var(--text-secondary); }
.breadcrumb-bar a { display: inline-flex; align-items: center; min-height: 24px; }
.fc-icon + a, .contact-detail a { display: inline-block; min-height: 24px; line-height: 24px; }

/* Small inline links: keep the tap/click area at least 24px tall (WCAG 2.2 target size). */
.hero-eyebrow a, .back-link { display: inline-flex; align-items: center; min-height: 24px; }