/* ==========================================================================
   Public marketing website — design system.

   Kept entirely separate from style.css (the authenticated app shell's
   stylesheet) so nothing here can ever regress the internal admin /
   teacher / parent / student portals.

   Bootstrap is used for grid + responsive utilities only. Every visual
   treatment below (colour, type, elevation, components) is custom.

   Contents
     1.  Design tokens
     2.  Base + typography
     3.  Buttons
     4.  Navigation
     5.  Hero
     6.  Section scaffolding
     7.  Statistics panel
     8.  Photography primitives
     9.  Feature cards
     10. Programme cards
     11. News (magazine layout)
     12. Events
     13. Gallery
     14. Testimonials
     15. FAQ / accordion
     16. Call to action
     17. Staff directory
     18. Login hub
     19. Forms + controls
     20. Footer
     21. Motion + accessibility
     22. Responsive refinements
   ========================================================================== */

/* -- 1. Design tokens ----------------------------------------------------- */

:root {
  /* Brand — indigo family, shared with the app shell's --sms-primary. */
  --pub-primary: #4338ca;
  --pub-primary-600: #4f46e5;
  --pub-primary-700: #4338ca;
  --pub-primary-800: #3730a3;
  --pub-primary-900: #312e81;
  --pub-primary-950: #1e1b4b;
  --pub-accent: #f59e0b;
  --pub-accent-600: #d97706;

  /* Neutrals */
  --pub-ink: #0f1225;
  --pub-ink-soft: #2b3050;
  --pub-muted: #6b7280;
  --pub-muted-light: #9ca3af;
  --pub-bg: #ffffff;
  --pub-bg-soft: #f7f8fd;
  --pub-bg-tint: #f1f2fb;
  --pub-border: #e8eaf5;
  --pub-border-strong: #d6d9ec;

  /* Elevation — a deliberate 4-step ramp, not ad-hoc box-shadows. */
  --pub-shadow-xs: 0 1px 2px rgba(15, 18, 37, .05);
  --pub-shadow-sm: 0 4px 12px rgba(15, 18, 37, .06);
  --pub-shadow-md: 0 12px 28px rgba(15, 18, 37, .08);
  --pub-shadow-lg: 0 24px 56px rgba(15, 18, 37, .12);
  --pub-shadow-xl: 0 40px 90px rgba(15, 18, 37, .16);
  --pub-shadow-brand: 0 16px 40px rgba(67, 56, 202, .28);

  /* Radii */
  --pub-radius-sm: .6rem;
  --pub-radius: 1rem;
  --pub-radius-lg: 1.5rem;
  --pub-radius-xl: 2rem;

  /* Spacing rhythm for section padding */
  --pub-section-y: 7rem;
  --pub-section-y-tight: 5rem;

  /* Motion */
  --pub-ease: cubic-bezier(.22, .61, .36, 1);
  --pub-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* -- 2. Base + typography ------------------------------------------------- */

.public-site {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--pub-ink-soft);
  background: var(--pub-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.0125rem;
  line-height: 1.7;
}

.public-site h1,
.public-site h2,
.public-site h3,
.public-site h4,
.public-site h5,
.public-site h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  color: var(--pub-ink);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.18;
}

.public-site h1 { font-size: clamp(2.5rem, 5.2vw, 4.15rem); font-weight: 800; letter-spacing: -.032em; }
.public-site h2 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); letter-spacing: -.028em; }
.public-site h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.public-site h4 { font-size: 1.35rem; }
.public-site h5 { font-size: 1.15rem; }
.public-site h6 { font-size: 1.02rem; letter-spacing: -.012em; }

.public-site p { margin-bottom: 1.15rem; }
.public-site p:last-child { margin-bottom: 0; }
/* Scoped away from .btn: `.public-site a` (0,1,1) would otherwise outrank the
   single-class button colour rules (0,1,0) and repaint every link-styled
   button — which silently turned the hero's outline button indigo-on-indigo. */
.public-site a:not(.btn) { color: var(--pub-primary); text-underline-offset: .18em; }
.public-site section { scroll-margin-top: 96px; }

/* Section label — the small uppercase kicker above each section heading. */
.public-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--pub-primary);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.public-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pub-primary), var(--pub-accent));
}
.public-eyebrow.is-centered::before { display: none; }

.public-section-title { margin: .75rem 0 0; }
.public-section-lead {
  color: var(--pub-muted);
  font-size: 1.075rem;
  max-width: 62ch;
}
.public-section-head { max-width: 46rem; }
.public-section-head.is-centered { margin-inline: auto; text-align: center; }

/* Emphasised fragment inside a heading. */
.public-title-accent {
  background: linear-gradient(100deg, var(--pub-primary-600), var(--pub-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -- 3. Buttons ----------------------------------------------------------- */

.public-site .btn {
  --bs-btn-focus-box-shadow: none;
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: .7rem;
  padding: .8rem 1.6rem;
  transition: transform .22s var(--pub-ease), box-shadow .22s var(--pub-ease),
              background-color .22s var(--pub-ease), color .22s var(--pub-ease),
              border-color .22s var(--pub-ease);
}
.public-site .btn-lg { padding: .95rem 2rem; font-size: 1.02rem; }
.public-site .btn-sm { padding: .55rem 1.15rem; font-size: .88rem; }

.btn-public-primary {
  background: linear-gradient(135deg, var(--pub-primary-600), var(--pub-primary-800));
  border: none;
  color: #fff;
  box-shadow: var(--pub-shadow-brand);
}
.btn-public-primary:hover,
.btn-public-primary:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(67, 56, 202, .38);
}
.btn-public-primary:active { transform: translateY(-1px); }

/* Light button for use on dark/photographic backgrounds. */
.btn-public-light {
  background: #fff;
  border: none;
  color: var(--pub-primary-800);
  box-shadow: 0 12px 32px rgba(6, 8, 20, .28);
}
.btn-public-light:hover,
.btn-public-light:focus-visible {
  color: var(--pub-primary-900);
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(6, 8, 20, .36);
}

/* Glass outline button — for dark/photographic backgrounds. */
.btn-public-outline {
  border: 1.5px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.btn-public-outline:hover,
.btn-public-outline:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--pub-primary-800);
  transform: translateY(-3px);
}

/* Outline button for use on light backgrounds. */
.btn-public-outline-dark {
  border: 1.5px solid var(--pub-border-strong);
  background: #fff;
  color: var(--pub-ink);
}
.btn-public-outline-dark:hover,
.btn-public-outline-dark:focus-visible {
  border-color: var(--pub-primary);
  color: var(--pub-primary);
  transform: translateY(-3px);
  box-shadow: var(--pub-shadow-md);
}

/* Inline text link with a sliding arrow. */
.public-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
  color: var(--pub-primary);
}
.public-link-arrow i { transition: transform .22s var(--pub-ease); }
.public-link-arrow:hover i,
.public-link-arrow:focus-visible i { transform: translateX(5px); }

/* -- 4. Navigation -------------------------------------------------------- */

.public-navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--pub-ease), box-shadow .3s var(--pub-ease),
              padding .3s var(--pub-ease), border-color .3s var(--pub-ease);
}

/* Pages whose hero sits directly under the navbar get a transparent bar that
   reads as part of the hero, then solidifies on scroll. Pages without a dark
   hero (or once scrolled) always use the solid treatment. */
.public-navbar.is-solid,
body:not(.has-hero-nav) .public-navbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--pub-border);
  box-shadow: var(--pub-shadow-sm);
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.public-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  color: var(--pub-ink);
}
.public-navbar .navbar-brand .public-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: .7rem;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(140deg, var(--pub-primary-600), var(--pub-primary-900));
  box-shadow: var(--pub-shadow-sm);
  flex-shrink: 0;
}
.public-navbar .navbar-brand img { border-radius: .55rem; }

.public-navbar .nav-link {
  position: relative;
  color: var(--pub-ink-soft);
  font-weight: 500;
  font-size: .95rem;
  padding: .5rem .2rem;
  margin-inline: .55rem;
  transition: color .2s var(--pub-ease);
}
/* Animated underline on hover and for the current page. */
.public-navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .1rem;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--pub-ease-out);
}
.public-navbar .nav-link:hover,
.public-navbar .nav-link:focus-visible,
.public-navbar .nav-link.active { color: var(--pub-primary); }
.public-navbar .nav-link:hover::after,
.public-navbar .nav-link:focus-visible::after,
.public-navbar .nav-link.active::after { transform: scaleX(1); }

/* Transparent-over-hero variant: white text until the bar solidifies. */
body.has-hero-nav .public-navbar:not(.is-solid) .navbar-brand,
body.has-hero-nav .public-navbar:not(.is-solid) .nav-link { color: #fff; }
body.has-hero-nav .public-navbar:not(.is-solid) .nav-link:hover,
body.has-hero-nav .public-navbar:not(.is-solid) .nav-link:focus-visible,
body.has-hero-nav .public-navbar:not(.is-solid) .nav-link.active { color: #fff; }
body.has-hero-nav .public-navbar:not(.is-solid) .navbar-brand .public-brand-mark {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
body.has-hero-nav .public-navbar:not(.is-solid) .navbar-toggler {
  border-color: rgba(255, 255, 255, .4);
}
body.has-hero-nav .public-navbar:not(.is-solid) .navbar-toggler-icon {
  filter: invert(1) brightness(2);
}

.public-navbar .navbar-toggler {
  border-radius: .55rem;
  border-color: var(--pub-border-strong);
  padding: .45rem .6rem;
}
.public-navbar .navbar-toggler:focus { box-shadow: none; }

/* The navbar is fixed, so pages that don't open with a hero (privacy, terms,
   and any future text-only page) need their content pushed clear of it.
   Hero pages handle this themselves via the hero's own top padding. */
body:not(.has-hero-nav) #main-content { padding-top: 84px; }

/* -- 5. Hero -------------------------------------------------------------- */

.public-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(140deg, var(--pub-primary-950) 0%, var(--pub-primary-800) 46%, var(--pub-primary-600) 100%);
}

/* Homepage hero — full-bleed, occupies the first screen. */
.public-hero-home {
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding: 9rem 0 12rem;
}

/* Inner-page hero — shorter banner treatment. */
.public-hero-page {
  padding: 11rem 0 6rem;
  text-align: center;
}

/* Photographic layer. The image sits in a pseudo-element so a missing photo
   simply leaves the brand gradient behind it — never a broken <img>. */
.public-hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--hero-photo-url, none);
  background-size: cover;
  background-position: center 28%;
  transform: scale(1.04);
}
/* Scrim: dark on the left where the copy sits, clearing toward the right so
   the photograph stays legible. */
.public-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(15, 18, 37, .95) 0%, rgba(30, 27, 75, .88) 34%, rgba(49, 46, 129, .58) 62%, rgba(67, 56, 202, .34) 100%),
    linear-gradient(180deg, rgba(15, 18, 37, .55) 0%, transparent 26%, transparent 62%, rgba(15, 18, 37, .5) 100%);
}
.public-hero-page.public-hero-photo::after {
  background: linear-gradient(160deg, rgba(15, 18, 37, .92), rgba(49, 46, 129, .8));
}

/* Ambient light blooms — present with or without a photograph. */
.public-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}
.public-hero-glow-a { width: 460px; height: 460px; top: -140px; right: -80px; background: rgba(99, 102, 241, .34); }
.public-hero-glow-b { width: 380px; height: 380px; bottom: -160px; left: -90px; background: rgba(245, 158, 11, .18); }

.public-hero h1 { color: #fff; margin-bottom: 1.35rem; }
.public-hero .public-hero-lead {
  color: rgba(255, 255, 255, .82);
  font-size: 1.14rem;
  max-width: 34rem;
  margin-bottom: 2.25rem;
}
.public-hero-page .public-hero-lead { margin-inline: auto; }

/* Glass pill above the headline. */
.badge-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 50rem;
  padding: .5rem 1.1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Small trust row under the hero CTAs. */
.public-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2.5rem;
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
}
.public-hero-trust span { display: inline-flex; align-items: center; gap: .5rem; }
.public-hero-trust i { color: var(--pub-accent); }

/* -- 6. Section scaffolding ----------------------------------------------- */

.public-section { padding: var(--pub-section-y) 0; }
.public-section-tight { padding: var(--pub-section-y-tight) 0; }
.public-section-soft { background: var(--pub-bg-soft); }
.public-section-ink { background: var(--pub-ink); color: rgba(255, 255, 255, .78); }
.public-section-ink h2, .public-section-ink h3 { color: #fff; }

/* -- 7. Statistics panel -------------------------------------------------- */

/* Floats up over the hero's lower edge. */
.public-stat-panel {
  position: relative;
  z-index: 4;
  margin-top: -6.5rem;
  background: #fff;
  border-radius: var(--pub-radius-lg);
  box-shadow: var(--pub-shadow-xl);
  padding: .5rem;
  overflow: hidden;
}
.public-stat {
  text-align: center;
  padding: 2.35rem 1.25rem;
  position: relative;
}
/* Hairline separators between stats, never after the last one. */
.public-stat::after {
  content: '';
  position: absolute;
  right: 0;
  top: 26%;
  height: 48%;
  width: 1px;
  background: var(--pub-border);
}
.public-stat-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  border-radius: .9rem;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: var(--pub-primary);
  background: linear-gradient(150deg, rgba(79, 70, 229, .14), rgba(99, 102, 241, .06));
}
.public-stat .stat-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(1.95rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--pub-ink);
  letter-spacing: -.03em;
}
.public-stat .stat-label {
  color: var(--pub-muted);
  font-weight: 500;
  font-size: .92rem;
  margin-top: .3rem;
}

/* -- 8. Photography primitives -------------------------------------------- */

.public-photo { width: 100%; height: 100%; object-fit: cover; display: block; }

.public-photo-frame {
  position: relative;
  border-radius: var(--pub-radius-lg);
  overflow: hidden;
  box-shadow: var(--pub-shadow-lg);
}
.public-photo-frame img { transition: transform .7s var(--pub-ease-out); }
.public-photo-frame:hover img { transform: scale(1.045); }

/* Placeholder used wherever a real photograph isn't available. Deliberately
   designed rather than an empty grey box, so a missing image still looks
   intentional. */
.public-photo-placeholder {
  position: relative;
  border-radius: var(--pub-radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .9);
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .16) 0, transparent 55%),
    linear-gradient(145deg, var(--pub-primary-800), var(--pub-primary-600));
  box-shadow: var(--pub-shadow-md);
}
.public-photo-placeholder i { font-size: 2.6rem; opacity: .85; }
.public-photo-placeholder .label {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  margin-top: .6rem;
}

/* Decorative accent panel behind an image, for two-column sections. */
.public-photo-stack { position: relative; }
.public-photo-stack::before {
  content: '';
  position: absolute;
  inset: auto -1.25rem -1.25rem auto;
  width: 62%;
  height: 62%;
  border-radius: var(--pub-radius-lg);
  background: linear-gradient(140deg, rgba(245, 158, 11, .22), rgba(79, 70, 229, .16));
  z-index: 0;
}
.public-photo-stack > * { position: relative; z-index: 1; }

/* -- 9. Feature cards ----------------------------------------------------- */

.public-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius);
  transition: transform .3s var(--pub-ease), box-shadow .3s var(--pub-ease),
              border-color .3s var(--pub-ease);
}
.public-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--pub-shadow-lg);
}

/* Feature card with a top accent bar that draws in on hover. */
.public-feature-card { padding: 2.15rem 1.9rem; overflow: hidden; }
.public-feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pub-primary-600), var(--pub-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--pub-ease-out);
}
.public-feature-card:hover::before { transform: scaleX(1); }

.public-card-icon {
  width: 58px;
  height: 58px;
  border-radius: .95rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: var(--pub-primary);
  background: linear-gradient(150deg, rgba(79, 70, 229, .13), rgba(99, 102, 241, .05));
  transition: transform .3s var(--pub-ease), background .3s var(--pub-ease), color .3s var(--pub-ease);
}
.public-feature-card:hover .public-card-icon {
  transform: translateY(-3px) rotate(-4deg);
  background: linear-gradient(150deg, var(--pub-primary-600), var(--pub-primary-800));
  color: #fff;
}
.public-card-icon.is-accent {
  color: var(--pub-accent-600);
  background: linear-gradient(150deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .06));
}

/* Value card used for Mission / Vision / Core Values. */
.public-value-card {
  display: flex;
  gap: 1rem;
  padding: 1.35rem 1.4rem;
  border-radius: var(--pub-radius);
  background: #fff;
  border: 1px solid var(--pub-border);
  transition: transform .3s var(--pub-ease), box-shadow .3s var(--pub-ease);
}
.public-value-card:hover { transform: translateX(5px); box-shadow: var(--pub-shadow-md); }
.public-value-card .public-value-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: .7rem;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.05rem;
  background: linear-gradient(145deg, var(--pub-primary-600), var(--pub-primary-800));
}
.public-value-card h6 { margin-bottom: .2rem; }
.public-value-card p { font-size: .92rem; color: var(--pub-muted); margin: 0; }

/* -- 10. Programme cards -------------------------------------------------- */

.public-program-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--pub-radius);
  min-height: 340px;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--pub-shadow-md);
  transition: transform .35s var(--pub-ease), box-shadow .35s var(--pub-ease);
  background: linear-gradient(155deg, var(--pub-primary-800), var(--pub-primary-950));
}
.public-program-card:hover {
  color: #fff;
  transform: translateY(-8px);
  box-shadow: var(--pub-shadow-xl);
}
.public-program-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--pub-ease-out);
}
.public-program-card:hover img { transform: scale(1.09); }
.public-program-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 13, 30, .94) 8%, rgba(11, 13, 30, .55) 42%, rgba(11, 13, 30, .12) 72%);
  transition: opacity .35s var(--pub-ease);
}
.public-program-card:hover::after { opacity: .88; }

.public-program-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 340px;
  padding: 1.75rem;
}
.public-program-age {
  display: inline-block;
  align-self: flex-start;
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50rem;
  padding: .22rem .8rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.public-program-body h5 { color: #fff; margin-bottom: .4rem; }
.public-program-body p {
  color: rgba(255, 255, 255, .74);
  font-size: .92rem;
  margin-bottom: .85rem;
  /* Description reveals on hover on pointer devices; always shown otherwise. */
}
.public-program-more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  font-weight: 600;
  color: #fff;
}
.public-program-more i { transition: transform .25s var(--pub-ease); }
.public-program-card:hover .public-program-more i { transform: translateX(5px); }

/* -- 11. News (magazine layout) ------------------------------------------- */

.public-news-feature {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--pub-radius-lg);
  min-height: 100%;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--pub-shadow-md);
  background: linear-gradient(155deg, var(--pub-primary-800), var(--pub-primary-950));
  transition: transform .35s var(--pub-ease), box-shadow .35s var(--pub-ease);
}
.public-news-feature:hover { color: #fff; transform: translateY(-6px); box-shadow: var(--pub-shadow-xl); }
.public-news-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--pub-ease-out);
}
.public-news-feature:hover img { transform: scale(1.07); }
.public-news-feature::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11, 13, 30, .95) 10%, rgba(11, 13, 30, .5) 48%, rgba(11, 13, 30, .1) 78%);
}
.public-news-feature-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 26rem;
  padding: 2.1rem;
}
.public-news-feature-body h3 { color: #fff; margin-bottom: .6rem; }
.public-news-feature-body p { color: rgba(255, 255, 255, .78); margin-bottom: 1rem; }
.public-news-feature-body .public-link-arrow { color: #fff; }

/* Compact horizontal card for the secondary stories. */
.public-news-item {
  display: flex;
  gap: 1.1rem;
  align-items: stretch;
  padding: .85rem;
  border-radius: var(--pub-radius);
  border: 1px solid var(--pub-border);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--pub-ease), box-shadow .3s var(--pub-ease), border-color .3s var(--pub-ease);
}
.public-news-item:hover {
  color: inherit;
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--pub-shadow-md);
}
.public-news-thumb {
  width: 116px;
  flex-shrink: 0;
  border-radius: .7rem;
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, var(--pub-primary-700), var(--pub-primary-900));
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .8);
  font-size: 1.4rem;
}
.public-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pub-ease-out); }
.public-news-item:hover .public-news-thumb img { transform: scale(1.08); }
.public-news-item h6 { margin-bottom: .25rem; line-height: 1.4; }

/* Category / meta chips. */
.public-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 50rem;
  padding: .2rem .7rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--pub-bg-tint);
  color: var(--pub-primary);
}
.public-chip-glass {
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
}
.public-meta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--pub-muted);
}

/* -- 12. Events ----------------------------------------------------------- */

.public-events-panel {
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  padding: 1.9rem 1.75rem;
  height: 100%;
  box-shadow: var(--pub-shadow-sm);
}
.public-event-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--pub-border);
}
.public-event-row:first-of-type { padding-top: 0; }
.public-event-row:last-of-type { border-bottom: none; padding-bottom: 0; }

.public-date-badge {
  width: 62px;
  flex-shrink: 0;
  border-radius: .85rem;
  padding: .55rem .25rem;
  text-align: center;
  line-height: 1.1;
  color: #fff;
  background: linear-gradient(150deg, var(--pub-primary-600), var(--pub-primary-800));
  box-shadow: var(--pub-shadow-sm);
}
.public-date-badge.is-accent { background: linear-gradient(150deg, var(--pub-accent), var(--pub-accent-600)); }
.public-date-badge .day { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.35rem; }
.public-date-badge .mon { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; opacity: .92; }

/* -- 13. Gallery ---------------------------------------------------------- */

/* Masonry-style mosaic: a 4-column / 2-row grid where selected tiles span
   extra tracks, giving mixed image sizes without a JS masonry library. */
.public-gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 172px;
  gap: 1rem;
}
.public-gallery-mosaic .tile-wide { grid-column: span 2; }
.public-gallery-mosaic .tile-tall { grid-row: span 2; }
.public-gallery-mosaic .tile-big { grid-column: span 2; grid-row: span 2; }

.public-gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--pub-radius);
  cursor: pointer;
  background: linear-gradient(145deg, var(--pub-primary-700), var(--pub-primary-950));
  box-shadow: var(--pub-shadow-sm);
  transition: box-shadow .3s var(--pub-ease);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .85);
}
.public-gallery-tile:hover { box-shadow: var(--pub-shadow-lg); }
.public-gallery-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--pub-ease-out);
}
.public-gallery-tile:hover img { transform: scale(1.1); }
.public-gallery-tile .public-gallery-fallback { position: relative; z-index: 1; text-align: center; }
.public-gallery-tile .public-gallery-fallback i { font-size: 1.9rem; opacity: .85; }

.public-gallery-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 1.15rem;
  color: #fff;
  font-weight: 600;
  font-size: .93rem;
  background: linear-gradient(0deg, rgba(11, 13, 30, .85) 0%, rgba(11, 13, 30, .1) 55%, transparent 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s var(--pub-ease), transform .3s var(--pub-ease);
}
.public-gallery-tile:hover .public-gallery-caption,
.public-gallery-tile:focus-visible .public-gallery-caption { opacity: 1; transform: translateY(0); }
/* Tiles without a photograph keep their label permanently visible. */
.public-gallery-tile.is-placeholder .public-gallery-caption { opacity: 1; transform: none; background: none; }

/* Simple captioned thumbnail row (homepage teaser). */
.public-gallery-thumb { display: block; text-decoration: none; color: inherit; }
.public-gallery-thumb .public-gallery-tile { aspect-ratio: 4 / 3; }
.public-gallery-thumb .thumb-label {
  display: block;
  margin-top: .7rem;
  text-align: center;
  font-size: .89rem;
  font-weight: 600;
  color: var(--pub-ink);
}

/* -- 14. Testimonials ----------------------------------------------------- */

.public-testimonial {
  position: relative;
  background: #fff;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  padding: 3.25rem 2.5rem 2.5rem;
  box-shadow: var(--pub-shadow-md);
}
/* Oversized decorative quote mark. */
.public-testimonial::before {
  content: '\201C';
  position: absolute;
  top: -.35rem;
  left: 1.9rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 7rem;
  line-height: 1;
  color: var(--pub-primary);
  opacity: .13;
  pointer-events: none;
}
.public-testimonial-quote {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--pub-ink-soft);
  margin-bottom: 1.75rem;
}
.public-testimonial-person { display: flex; align-items: center; gap: .95rem; }
.public-testimonial-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(145deg, var(--pub-primary-600), var(--pub-primary-800));
  box-shadow: var(--pub-shadow-sm);
  flex-shrink: 0;
}
.public-star-rating { color: var(--pub-accent); font-size: .95rem; letter-spacing: .12em; }
.public-star-rating .bi-star { color: var(--pub-border-strong); }

.public-carousel-dots { display: flex; gap: .5rem; }
.public-carousel-dot {
  width: 28px; height: 5px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: var(--pub-border-strong);
  transition: background .25s var(--pub-ease), width .25s var(--pub-ease);
}
.public-carousel-dot.active { background: var(--pub-primary); width: 44px; }

/* -- 15. FAQ / accordion -------------------------------------------------- */

.public-site .accordion-item {
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius) !important;
  margin-bottom: .85rem;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .3s var(--pub-ease), border-color .3s var(--pub-ease);
}
.public-site .accordion-item:hover { box-shadow: var(--pub-shadow-sm); }
.public-site .accordion-button {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--pub-ink);
  background: #fff;
  padding: 1.25rem 1.5rem;
}
.public-site .accordion-button:not(.collapsed) {
  color: var(--pub-primary);
  background: var(--pub-bg-soft);
  box-shadow: none;
}
.public-site .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(67, 56, 202, .14); }
.public-site .accordion-button::after {
  width: 1.1rem; height: 1.1rem;
  background-size: 1.1rem;
}
.public-site .accordion-body {
  padding: 0 1.5rem 1.4rem;
  color: var(--pub-muted);
}

/* -- 16. Call to action --------------------------------------------------- */

.public-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--pub-radius-xl);
  padding: clamp(3.25rem, 6vw, 5.5rem) clamp(1.75rem, 5vw, 4rem);
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--pub-primary-900), var(--pub-primary-600));
  box-shadow: var(--pub-shadow-xl);
}
.public-cta img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.public-cta.has-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(30, 27, 75, .94), rgba(67, 56, 202, .82));
}
/* Subtle pattern so the flat-gradient fallback still has texture. */
.public-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .14) 0, transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(245, 158, 11, .2) 0, transparent 48%);
  pointer-events: none;
}
.public-cta.has-photo::before { z-index: 0; }
.public-cta h2 { color: #fff; margin-bottom: 1rem; }
.public-cta p { color: rgba(255, 255, 255, .82); max-width: 40rem; margin-inline: auto; margin-bottom: 2.25rem; }
.public-cta > * { position: relative; z-index: 1; }

/* Full-bleed CTA band (edge to edge, no rounded container). */
.public-cta-fullwidth { border-radius: 0; box-shadow: none; }

/* -- 17. Staff directory -------------------------------------------------- */

.public-staff-card { text-align: center; padding: 2.25rem 1.35rem; }
.public-staff-photo,
.public-staff-photo-placeholder {
  width: 112px; height: 112px;
  border-radius: 50%;
  margin: 0 auto 1.15rem;
  display: grid;
  place-items: center;
  box-shadow: var(--pub-shadow-md);
  transition: transform .3s var(--pub-ease);
}
.public-staff-photo { object-fit: cover; border: 4px solid #fff; }
.public-staff-photo-placeholder {
  font-size: 2.4rem;
  color: #fff;
  background: linear-gradient(145deg, var(--pub-primary-600), var(--pub-primary-800));
  border: 4px solid #fff;
}
.public-card:hover .public-staff-photo,
.public-card:hover .public-staff-photo-placeholder { transform: translateY(-4px) scale(1.04); }
.public-staff-dept-badge {
  display: inline-block;
  margin-top: .55rem;
  padding: .2rem .7rem;
  border-radius: 50rem;
  background: var(--pub-bg-tint);
  color: var(--pub-primary);
  font-size: .71rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* -- 18. Login hub -------------------------------------------------------- */

.public-role-card {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 2.75rem 1.5rem;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius);
  background: #fff;
  height: 100%;
  transition: transform .3s var(--pub-ease), box-shadow .3s var(--pub-ease), border-color .3s var(--pub-ease);
}
.public-role-card:hover {
  color: inherit;
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--pub-shadow-lg);
}
.public-role-card .public-card-icon { width: 76px; height: 76px; font-size: 2rem; margin: 0 auto 1.35rem; }
.public-role-card:hover .public-card-icon {
  background: linear-gradient(150deg, var(--pub-primary-600), var(--pub-primary-800));
  color: #fff;
}

/* -- 19. Forms + controls ------------------------------------------------- */

.public-site .form-control,
.public-site .form-select {
  border: 1.5px solid var(--pub-border);
  border-radius: .7rem;
  padding: .8rem 1.05rem;
  font-size: .96rem;
  background-color: #fff;
  transition: border-color .2s var(--pub-ease), box-shadow .2s var(--pub-ease);
}
.public-site .form-control:focus,
.public-site .form-select:focus {
  border-color: var(--pub-primary);
  box-shadow: 0 0 0 .22rem rgba(67, 56, 202, .12);
}
.public-site .form-control::placeholder { color: var(--pub-muted-light); }
.public-site .form-label { font-weight: 600; font-size: .89rem; color: var(--pub-ink); margin-bottom: .45rem; }
.public-site .input-group .form-control { border-radius: .7rem 0 0 .7rem; }
.public-site .input-group .btn { border-radius: 0 .7rem .7rem 0; }

.public-site .nav-pills .nav-link {
  color: var(--pub-ink);
  font-weight: 600;
  border-radius: 50rem;
  padding: .6rem 1.6rem;
  border: 1.5px solid var(--pub-border);
  background: #fff;
  transition: all .22s var(--pub-ease);
}
.public-site .nav-pills .nav-link:hover { border-color: var(--pub-primary); color: var(--pub-primary); }
.public-site .nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--pub-primary-600), var(--pub-primary-800));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--pub-shadow-brand);
}

.public-site .pagination .page-link {
  border: none;
  color: var(--pub-ink);
  font-weight: 600;
  border-radius: .6rem;
  margin: 0 .18rem;
  padding: .55rem .95rem;
}
.public-site .pagination .page-link:hover { background: var(--pub-bg-tint); color: var(--pub-primary); }
.public-site .pagination .page-item.active .page-link {
  background: linear-gradient(135deg, var(--pub-primary-600), var(--pub-primary-800));
  color: #fff;
}

/* Bootstrap's default primary is its own blue — realign the handful of
   utility classes the content pages use to this site's indigo. */
.public-site .text-primary { color: var(--pub-primary) !important; }
.public-site .text-muted { color: var(--pub-muted) !important; }
.public-site .badge.text-bg-primary {
  background: linear-gradient(135deg, var(--pub-primary-600), var(--pub-primary-800)) !important;
  color: #fff;
  font-weight: 600;
  border-radius: 50rem;
  padding: .35rem .75rem;
}

/* Checklist / numbered-step list used on the academics and admissions pages. */
.public-checklist { list-style: none; margin: 0; padding: 0; }
.public-checklist li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .7rem 0;
  border-bottom: 1px solid var(--pub-border);
}
.public-checklist li:last-child { border-bottom: none; }
.public-checklist .public-checklist-mark {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--pub-primary);
  background: var(--pub-bg-tint);
}
.public-checklist.is-numbered .public-checklist-mark {
  color: #fff;
  background: linear-gradient(145deg, var(--pub-primary-600), var(--pub-primary-800));
}

/* -- 20. Footer ----------------------------------------------------------- */

.public-footer {
  position: relative;
  background: var(--pub-ink);
  color: rgba(255, 255, 255, .62);
  overflow: hidden;
}
.public-footer::before {
  content: '';
  position: absolute;
  top: -220px; right: -140px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, .28) 0, transparent 68%);
  pointer-events: none;
}
.public-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  margin-bottom: 1.1rem;
}
.public-footer-brand .public-brand-mark {
  width: 46px; height: 46px;
  border-radius: .75rem;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: #fff;
  background: linear-gradient(140deg, var(--pub-primary-600), var(--pub-primary-900));
}
.public-footer-brand span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  letter-spacing: -.02em;
}
.public-footer h6 {
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.public-footer-links { margin: 0; padding: 0; list-style: none; }
.public-footer-links li { margin-bottom: .62rem; font-size: .93rem; }
.public-footer-links a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  transition: color .2s var(--pub-ease), padding-left .2s var(--pub-ease);
}
.public-footer-links a:hover { color: #fff; padding-left: 4px; }
.public-footer-contact li {
  display: flex;
  gap: .65rem;
  margin-bottom: .85rem;
  font-size: .92rem;
  line-height: 1.55;
}
.public-footer-contact i { color: var(--pub-primary-600); margin-top: .2rem; flex-shrink: 0; }

.public-social-icon {
  width: 40px; height: 40px;
  border-radius: .7rem;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  text-decoration: none;
  transition: all .25s var(--pub-ease);
}
.public-social-icon:hover {
  color: #fff;
  background: linear-gradient(140deg, var(--pub-primary-600), var(--pub-primary-800));
  border-color: transparent;
  transform: translateY(-3px);
}
.public-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: .87rem;
  color: rgba(255, 255, 255, .5);
}
.public-footer-bottom a { color: rgba(255, 255, 255, .5); text-decoration: none; }
.public-footer-bottom a:hover { color: #fff; }

/* -- 21. Motion + accessibility ------------------------------------------- */

/* Scroll reveal — progressively enhanced. Without JS (or without
   IntersectionObserver) everything is shown immediately by public.js. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--pub-ease-out), transform .75s var(--pub-ease-out);
}
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
/* Stagger children within a row. */
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }

.public-site a:focus-visible,
.public-site button:focus-visible,
.public-site input:focus-visible,
.public-site select:focus-visible,
.public-site textarea:focus-visible,
.public-site [tabindex]:focus-visible {
  outline: 3px solid var(--pub-primary);
  outline-offset: 3px;
  border-radius: .35rem;
}
/* Focus rings need to be visible against dark photographic backdrops too. */
.public-hero a:focus-visible,
.public-cta a:focus-visible,
.public-footer a:focus-visible,
.public-program-card:focus-visible,
.public-news-feature:focus-visible { outline-color: #fff; }

.public-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: .8rem 1.4rem;
  background: var(--pub-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 .6rem 0;
}
.public-skip-link:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .public-site *,
  .public-site *::before,
  .public-site *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll { opacity: 1; transform: none; }
  .public-card:hover,
  .public-program-card:hover,
  .public-news-feature:hover,
  .public-news-item:hover,
  .public-value-card:hover,
  .public-role-card:hover,
  .btn-public-primary:hover,
  .btn-public-light:hover,
  .btn-public-outline:hover,
  .btn-public-outline-dark:hover,
  .public-social-icon:hover { transform: none; }
  .public-program-card:hover img,
  .public-news-feature:hover img,
  .public-news-item:hover .public-news-thumb img,
  .public-gallery-tile:hover img,
  .public-photo-frame:hover img { transform: none; }
  .public-feature-card:hover .public-card-icon { transform: none; }
}

/* -- 22. Responsive refinements ------------------------------------------- */

/* Tablet — the layout re-flows rather than simply stacking. */
@media (max-width: 991.98px) {
  :root { --pub-section-y: 5rem; --pub-section-y-tight: 4rem; }

  .public-navbar .navbar-collapse {
    background: #fff;
    border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow-lg);
    padding: 1rem;
    margin-top: .85rem;
  }
  /* The open mobile menu is always a light panel, even over the hero. */
  body.has-hero-nav .public-navbar:not(.is-solid) .navbar-collapse .nav-link { color: var(--pub-ink-soft); }
  body.has-hero-nav .public-navbar:not(.is-solid) .navbar-collapse .nav-link.active { color: var(--pub-primary); }
  .public-navbar .nav-link { margin-inline: 0; padding: .6rem .25rem; }
  .public-navbar .nav-link::after { display: none; }

  .public-hero-home { min-height: auto; padding: 7.5rem 0 10rem; text-align: center; }
  .public-hero .public-hero-lead { margin-inline: auto; }
  .public-hero-home .d-flex { justify-content: center; }
  .public-hero-trust { justify-content: center; }
  /* Centre the scrim when the copy is centred. */
  .public-hero-home.public-hero-photo::after {
    background:
      linear-gradient(180deg, rgba(15, 18, 37, .82) 0%, rgba(30, 27, 75, .86) 55%, rgba(15, 18, 37, .92) 100%);
  }
  .public-hero-page { padding: 8.5rem 0 4.5rem; }

  .public-stat-panel { margin-top: -5rem; }
  .public-stat { padding: 1.75rem 1rem; }
  /* Two-up on tablet: clear the separator on every 2nd cell. */
  .public-stat:nth-child(2n)::after { display: none; }

  .public-gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .public-gallery-mosaic .tile-big { grid-column: span 2; grid-row: span 2; }
  .public-gallery-mosaic .tile-tall { grid-row: span 1; }

  .public-news-feature-body { min-height: 21rem; padding: 1.6rem; }
  .public-testimonial { padding: 2.75rem 1.85rem 2rem; }
}

/* Mobile */
@media (max-width: 575.98px) {
  :root { --pub-section-y: 3.75rem; --pub-section-y-tight: 3rem; }

  .public-site { font-size: .98rem; }
  .public-hero-home { padding: 6.5rem 0 8.5rem; }
  .public-hero .public-hero-lead { font-size: 1.02rem; }
  .public-hero-trust { flex-direction: column; gap: .6rem; align-items: center; }

  /* Stats become a single column with horizontal rules instead of verticals. */
  .public-stat-panel { margin-top: -4rem; padding: .25rem; }
  .public-stat { padding: 1.35rem 1rem; display: flex; align-items: center; gap: 1rem; text-align: left; }
  .public-stat-icon { margin: 0; width: 46px; height: 46px; font-size: 1.15rem; }
  .public-stat .stat-number { font-size: 1.6rem; }
  .public-stat .stat-label { margin-top: 0; font-size: .86rem; }
  .public-stat::after { top: auto; bottom: 0; right: 1rem; left: 1rem; width: auto; height: 1px; }
  .public-stat:last-child::after { display: none; }

  .public-feature-card { padding: 1.65rem 1.4rem; }
  .public-program-card,
  .public-program-body { min-height: 270px; }

  /* Secondary news cards stack their thumbnail above the text. */
  .public-news-item { flex-direction: column; gap: .85rem; }
  .public-news-thumb { width: 100%; height: 170px; }

  .public-gallery-mosaic { grid-auto-rows: 128px; gap: .7rem; }
  .public-testimonial { padding: 2.5rem 1.4rem 1.75rem; }
  .public-testimonial::before { font-size: 5rem; left: 1.1rem; }
  .public-testimonial-quote { font-size: 1rem; }
  .public-events-panel { padding: 1.5rem 1.25rem; }
}