/* ═══════════════════════════════════════════════════════════
   BONGA UNIVERSITY — Clean Light-Green Theme
   ═══════════════════════════════════════════════════════════ */

:root {
  --green: #1a7a3a;
  --green-dark: #0e5525;
  --green-light: #e6f5ec;
  --green-soft: #d0edda;
  --green-pale: #f0f9f3;
  --gold: #d4a825;
  --gold-light: #f5e6b8;
  --black: #111111;
  --gray-900: #1a1a1a;
  --gray-700: #444;
  --gray-500: #777;
  --gray-400: #aaa;
  --gray-200: #e5e5e5;
  --gray-100: #f5f5f5;
  --white: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 50px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
  --transition: .3s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--white);
  color: var(--gray-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── Typography ────────────────────────────────────────── */
h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700; line-height: 1.25; }
h3 { font-size: 1.15rem; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 600; }
h5 { font-size: .88rem; font-weight: 600; }
p { font-size: .9rem; line-height: 1.7; color: var(--gray-700); }
a { text-decoration: none; transition: var(--transition); }

/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: .85rem;
  border-radius: var(--radius-pill);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-green {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 10px 28px;
  box-shadow: 0 2px 10px rgba(26,122,58,.3);
}
.btn-green:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(26,122,58,.4);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.4);
  padding: 10px 28px;
}
.btn-outline:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.6);
  color: #fff;
}

.btn-sm { padding: 7px 18px; font-size: .8rem; }

/* ─── Header ────────────────────────────────────────────── */
.site-header {
  background: var(--green-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: box-shadow .3s, background .3s;
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo img { height: 40px; width: auto; border-radius: 8px; }

.logo-text h1 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin: 0;
}

.logo-text small {
  font-size: .62rem;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .06em;
}

/* ─── Desktop Nav ───────────────────────────────────────── */
.desktop-nav { display: flex; align-items: center; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav > li { position: relative; }

.main-nav > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,.8);
  font-size: .8rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all .25s;
  white-space: nowrap;
  text-decoration: none;
}

.main-nav > li > a:hover,
.main-nav > li > a.active,
.has-dropdown.open > a {
  color: #fff;
  background: rgba(255,255,255,.12);
}

.nav-arrow {
  font-size: .55rem;
  transition: transform .25s;
  opacity: .6;
}

.has-dropdown.open > a .nav-arrow {
  transform: rotate(180deg);
}

/* ─── Dropdown Panel ────────────────────────────────────── */
.dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.04);
  padding: 12px 10px;
  min-width: 230px;
  z-index: 200;
  opacity: 0;
  transition: opacity .25s, transform .25s;
}

.has-dropdown.open .dropdown-panel {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dropdown-head {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gray-400);
  padding: 6px 14px 8px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 6px;
}

.dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: .82rem;
  color: var(--gray-700);
  border-radius: 8px;
  font-weight: 500;
  transition: all .2s;
}

.dropdown-panel a i {
  width: 18px;
  text-align: center;
  font-size: .75rem;
  color: var(--green);
  opacity: .7;
}

.dropdown-panel a:hover {
  background: var(--green-pale);
  color: var(--green);
  transform: translateX(3px);
}

.dropdown-panel a:hover i { opacity: 1; }

/* ─── Mega Panel ────────────────────────────────────────── */
.mega-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.04);
  padding: 20px;
  min-width: 560px;
  z-index: 200;
  opacity: 0;
  transition: opacity .25s, transform .25s;
}

.mega-panel.mega-wide { min-width: 640px; }

.has-dropdown.open .mega-panel {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mega-grid { display: grid; gap: 16px; }
.mega-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.mega-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.mega-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 6px;
}

.mega-head i { font-size: .72rem; }

.mega-col a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: .82rem;
  color: var(--gray-700);
  border-radius: 8px;
  font-weight: 500;
  transition: all .2s;
}

.mega-col a i {
  width: 16px;
  text-align: center;
  font-size: .7rem;
  color: var(--green);
  opacity: .5;
}

.mega-col a:hover {
  background: var(--green-pale);
  color: var(--green);
  transform: translateX(3px);
}

.mega-col a:hover i { opacity: 1; }

/* ─── Header Actions ────────────────────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  color: rgba(255,255,255,.75);
  font-size: 1rem;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  transition: all .25s;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
}

/* ─── Hamburger ─────────────────────────────────────────── */
.nav-toggle { display: none; }

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}

.hamburger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: all .3s;
}

/* ─── Search Bar ────────────────────────────────────────── */
.search-bar {
  display: none;
  background: var(--white);
  border-top: 2px solid var(--green);
  padding: 14px 0;
  box-shadow: var(--shadow);
}

.search-bar .container-narrow {
  max-width: 100%;
  padding: 0 24px;
}

.search-bar.show { display: block; }

.search-bar .input-group { max-width: 100%; width: 100%; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.search-bar .input-group input {
  flex: 1;
  min-width: 0;
}

.search-bar input {
  border: 1.5px solid var(--gray-200);
  border-right: none;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding: 12px 20px;
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
  width: 100%;
}
.search-bar input:focus { border-color: var(--green); }
.search-bar .btn-green {
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  padding: 11px 24px;
}

/* ═══════════ MOBILE MENU ══════════════════════════════════ */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  backdrop-filter: blur(4px);
}

.mobile-overlay.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 85vw;
  height: 100vh;
  background: var(--white);
  z-index: 2001;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(0,0,0,.2);
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-200);
  background: var(--green-dark);
  flex-shrink: 0;
}

.mobile-menu-header .logo-text h1 { color: #fff; font-size: .95rem; }
.mobile-menu-header .logo-text small { color: var(--gold); }

.mobile-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.15);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background .2s;
}

.mobile-close:hover { background: rgba(255,255,255,.25); }

.mobile-menu-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
}

.mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--gray-700);
  text-decoration: none;
  transition: all .2s;
  border-left: 3px solid transparent;
}

.mobile-link i {
  width: 20px;
  text-align: center;
  font-size: .82rem;
  color: var(--green);
}

.mobile-link:hover,
.mobile-link.active {
  background: var(--green-pale);
  color: var(--green);
  border-left-color: var(--green);
}

/* Mobile accordion group */
.mobile-group {
  border-bottom: 1px solid var(--gray-100);
}

.mobile-group-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 24px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--gray-700);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .2s;
  border-left: 3px solid transparent;
}

.mobile-group-toggle i:first-child {
  width: 20px;
  text-align: center;
  font-size: .82rem;
  color: var(--green);
}

.mobile-group-toggle .fa-chevron-down {
  margin-left: auto;
  font-size: .6rem;
  color: var(--gray-400);
  transition: transform .3s;
}

.mobile-group.open .mobile-group-toggle .fa-chevron-down {
  transform: rotate(180deg);
}

.mobile-group.open .mobile-group-toggle {
  background: var(--green-pale);
  color: var(--green);
  border-left-color: var(--green);
}

.mobile-group-links {
  display: none;
  padding: 4px 0 8px;
  background: var(--gray-100);
}

.mobile-group.open .mobile-group-links {
  display: block;
}

.mobile-group-links a {
  display: block;
  padding: 10px 24px 10px 56px;
  font-size: .82rem;
  color: var(--gray-700);
  text-decoration: none;
  transition: all .2s;
  font-weight: 500;
}

.mobile-group-links a:hover {
  background: var(--green-pale);
  color: var(--green);
  padding-left: 62px;
}

/* Mobile footer socials */
.mobile-menu-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.mobile-socials {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.mobile-socials a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--green-pale);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: all .25s;
}

.mobile-socials a:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
}

/* ─── Mobile Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* ─── Hero Carousel ─────────────────────────────────────── */
.hero-carousel {
  position: relative;
  height: 85vh;
  min-height: 500px;
  max-height: 720px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

/* height:100% is what completes the chain. Without it .carousel-inner,
   .carousel-item and the img all resolve against an auto-height parent, so
   each slide falls back to its intrinsic aspect ratio (~200px tall on a
   390px phone) and leaves the rest of the hero empty. With it, object-fit
   on the img crops to fill whatever height the hero is set to. */
.hero-carousel .carousel.slide { height: 100%; margin: 0; padding: 0; line-height: 0; }
.hero-carousel .carousel-inner { height: 100%; margin: 0; padding: 0; }

.hero-carousel .carousel-item {
  height: 100%;
  line-height: 0;
  font-size: 0;
}

/* Crossfade rather than a horizontal push. Bootstrap's .carousel-fade holds
   both slides on screen during the change (.carousel-item-next / -prev are
   display:block) so they can cross-fade. The duration and easing are set here
   instead of leaving Bootstrap's 0.6s ease, which reads as a jolt next to the
   slow zoom on the image. This selector is deliberately more specific than
   Bootstrap's .carousel-fade .carousel-item, and it also has to beat the
   transition that used to sit on .hero-carousel .carousel-item, because that
   rule redeclared transition-property back to transform and killed the fade. */
.hero-carousel .carousel-fade .carousel-item {
  transition: opacity 1s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}

.hero-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* linear drifts the zoom at a constant rate. The previous ease-in-out
     stalled at both ends of an 8s move, which was longer than the 5s interval
     so the zoom never actually finished. 5.5s is tuned to just outlast the
     interval, so each slide plays its full drift and hands over mid-fade. */
  transition: transform 5.5s linear;
  display: block;
  vertical-align: top;
  border: none;
  margin: 0;
  padding: 0;
}

.hero-carousel .carousel-item.active img {
  transform: scale(1.08);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.15) 100%);
  z-index: 1;
  line-height: 0;
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  padding: 0 8%;
  padding-top: 12vh;
  line-height: 1.6;
}

.hero-text { max-width: 600px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(26,122,58,.25);
  border: 1px solid rgba(26,122,58,.4);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-soft);
  margin-bottom: 18px;
  backdrop-filter: blur(6px);
}

.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-light);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.hero-text h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--white);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}

.hero-text h1 span {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-text p {
  color: rgba(255,255,255,.8);
  font-size: 1rem;
  margin-bottom: 28px;
  max-width: 480px;
  line-height: 1.7;
}

.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 40px;
}

.hero-stat { text-align: center; }

.hero-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  display: block;
  line-height: 1;
}

.hero-stat-label {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 4px;
}

.hero-controls {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  background: transparent;
  cursor: pointer;
  transition: all .3s;
  padding: 0;
}

.hero-dot.active {
  background: var(--green);
  border-color: var(--green);
  width: 28px;
  border-radius: 5px;
}

@media (max-width: 768px) {
  /* Fill the visible screen. The sticky .site-header (64px) sits above the
     hero, so it is subtracted; without that the hero alone is a screen tall
     and the bottom of it is always below the fold. dvh follows the real
     visible height as browser chrome collapses, which vh does not, so the vh
     line first is only a fallback for older iOS. min-height is dropped because
     85vh overrode it anyway and forced the hero taller than a short screen. */
  .hero-carousel {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    min-height: 0;
    max-height: none;
    margin: 0; padding: 0; line-height: 0; font-size: 0;
  }
  #heroSlider { margin: 0; padding: 0; line-height: 0; }
  .hero-carousel .carousel.slide { margin: 0; padding: 0; }
  .hero-carousel .carousel-inner { margin: 0; padding: 0; }
  .hero-carousel .carousel-item { line-height: 0; font-size: 0; margin: 0; padding: 0; }
  .hero-carousel .carousel-item img { display: block; border: none; margin: 0; padding: 0; }
  /* Centre the text instead of offsetting it with 10vh of top padding, which
     pushed the block down and clipped it on short screens. The bottom padding
     keeps the copy clear of the slide dots. */
  .hero-content {
    padding: 20px 20px 64px;
    align-items: center;
    justify-content: center;
  }
  .hero-text h1 { font-size: 1.9rem; margin-bottom: 12px; }
  .hero-text p { font-size: .88rem; margin-bottom: 20px; max-width: 100%; }
  .hero-buttons { gap: 10px; }
  .hero-buttons .btn { padding: 9px 20px; font-size: .8rem; }
  .hero-stats { gap: 16px; margin-top: 28px; }
  .hero-stat-num { font-size: 1.3rem; }
  .hero-stat-label { font-size: .6rem; }
  .hero-badge { font-size: .6rem; padding: 4px 12px; margin-bottom: 14px; }
  .hero-controls { bottom: 20px; }
  .quick-links { padding: 8px 0; margin-top: 0; }
}

@media (max-width: 480px) {
  /* No vh floor here on purpose: the hero already fills the screen, and any
     min-height in vh would push it past the fold on a short phone. */
  .hero-text h1 { font-size: 1.6rem; }
  .hero-text p { font-size: .82rem; }
  .hero-buttons .btn { padding: 8px 16px; font-size: .78rem; }
  .hero-stats { gap: 12px; margin-top: 22px; }
  .hero-stat-num { font-size: 1.1rem; }
}

/* Landscape phones have almost no vertical room. The hero is a fixed height
   with overflow:hidden, so without this the buttons and stats are silently
   clipped. Keep the headline, subtext and calls to action; drop the rest.
   The width is 900px so this also covers landscape tablets. */
@media (max-width: 900px) and (max-height: 520px) {
  .hero-badge,
  .hero-stats { display: none; }

  .hero-content { padding: 12px 20px 44px; }
  .hero-text h1 { font-size: 1.5rem; margin-bottom: 8px; }
  .hero-text p { font-size: .82rem; margin-bottom: 14px; }
  .hero-buttons .btn { padding: 8px 18px; font-size: .78rem; }
  .hero-controls { bottom: 12px; }
}

/* ─── Facts Strip ───────────────────────────────────────── */
.facts-strip {
  background: var(--white);
  padding: 0;
  position: relative;
  z-index: 5;
}

.facts-row {
  max-width: 1100px;
  margin: -40px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
  z-index: 5;
}

.fact-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}

.fact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.fact-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green);
  font-size: 1.1rem;
}

.fact-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1;
}

.fact-label {
  font-size: .72rem;
  color: var(--gray-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .facts-row { grid-template-columns: 1fr; margin-top: -30px; }
}

/* ─── Quick Links ───────────────────────────────────────── */
.quick-links {
  background: var(--green-pale);
  padding: 14px 0;
  border-bottom: 1px solid var(--green-soft);
  margin-top: -1px;
}

.quick-links-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-links-title {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green-dark);
  white-space: nowrap;
}

.ql-pill {
  background: var(--green);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.ql-pill:hover {
  background: var(--green-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(26,122,58,.3);
}

@media (max-width: 768px) {
  .quick-links { padding: 10px 0; margin-top: -2px; }
  .quick-links-inner { justify-content: center; gap: 8px; }
}

/* ─── Section Utilities ─────────────────────────────────── */
.section { padding: 64px 0; }

.section-center { text-align: center; }

.section-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--green);
  background: var(--green-pale);
  border: 1px solid var(--green-soft);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.section-subtitle {
  font-size: .9rem;
  color: var(--gray-500);
  max-width: 500px;
  margin: 0 auto;
}

.container-narrow { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ─── Events ────────────────────────────────────────────── */
.events-section { background: var(--white); }

.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.events-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
}

.events-header a {
  font-size: .82rem;
  font-weight: 600;
  color: var(--green);
}

.event-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--gray-200);
  transition: var(--transition);
}

.event-row:last-child { border-bottom: none; }
.event-row:hover { background: var(--green-pale); margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: var(--radius-sm); }

.event-date {
  width: 64px;
  background: var(--green);
  color: #fff;
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 10px 8px;
  flex-shrink: 0;
}

.event-date .month {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .85;
}

.event-date .day {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}

.event-info { flex: 1; min-width: 0; }

.event-info h5 {
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.event-meta {
  font-size: .78rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 4px;
}

.event-desc {
  font-size: .82rem;
  color: var(--gray-500);
  margin-top: 4px;
  line-height: 1.5;
}

.event-badge {
  font-size: .66rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}

.event-badge.upcoming { background: var(--green-pale); color: var(--green); }
.event-badge.ongoing { background: #fef2f2; color: #dc2626; }
.event-badge.completed { background: var(--gray-100); color: var(--gray-500); }

/* ─── President Section ─────────────────────────────────── */
.president-section {
  background: var(--white);
  color: var(--gray-900);
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}

.president-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--green-pale) 0%, var(--white) 50%, var(--green-light) 100%);
}

.president-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.president-text h2 {
  color: var(--gray-900);
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.president-text p {
  color: var(--gray-700);
  line-height: 1.8;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.president-name {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a6d12;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}

.president-role {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  position: relative;
  z-index: 2;
}

.president-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.president-img::before {
  content: '';
  position: absolute;
  width: 330px;
  height: 410px;
  border-radius: 16px;
  border: 2px solid rgba(212,168,37,.75);
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.president-img::after {
  content: '';
  position: absolute;
  width: 350px;
  height: 430px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(212,168,37,.16), rgba(26,122,58,.06));
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.president-img img {
  width: 310px;
  height: 390px;
  object-fit: cover;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.18));
  position: relative;
  z-index: 1;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--gray-700);
}

.check-list i { color: var(--green); font-size: .8rem; }

@media (max-width: 768px) {
  .president-grid { grid-template-columns: 1fr; text-align: center; }
  .president-img { order: -1; margin-bottom: 20px; }
  .president-img img { width: 220px; height: 280px; border-radius: 10px; }
  .president-img::before { width: 235px; height: 295px; border-radius: 12px; }
  .president-img::after { width: 250px; height: 310px; border-radius: 14px; }
  .check-list { justify-items: center; }
}

/* ─── News Section ──────────────────────────────────────── */
.news-section { background: var(--gray-100); }

.news-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.news-featured {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
  grid-row: span 2;
}

.news-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.news-featured-img {
  height: 280px;
  overflow: hidden;
}

.news-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.news-featured:hover .news-featured-img img { transform: scale(1.04); }

.news-featured-body { padding: 24px; }

.news-date-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  color: var(--green);
  background: var(--green-pale);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}

.news-featured-body h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  line-height: 1.3;
}

.news-featured-body h3 a {
  color: var(--gray-900);
  transition: color .2s;
}

.news-featured-body h3 a:hover { color: var(--green); }

.news-featured-body p {
  font-size: .85rem;
  color: var(--gray-500);
  margin-bottom: 12px;
  line-height: 1.6;
}

.news-link {
  font-size: .82rem;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.news-link:hover { gap: 8px; }

/* News side list */
.news-list { display: flex; flex-direction: column; gap: 14px; }

.news-item {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  display: flex;
  gap: 14px;
  padding: 14px;
  transition: var(--transition);
}

.news-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--green-soft);
}

.news-item-img {
  width: 100px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.news-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-item-body { flex: 1; min-width: 0; }

.news-item-body .news-date-badge { font-size: .62rem; padding: 2px 8px; }

.news-item-body h5 {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 4px;
}

.news-item-body h5 a { color: var(--gray-900); }
.news-item-body h5 a:hover { color: var(--green); }

@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-featured { grid-row: span 1; }
}

/* ─── Leadership / Team Cards ───────────────────────────── */
.leadership-section {
  background: url('../img/campus2.jpg') center/cover no-repeat fixed;
  position: relative;
  padding: 64px 0;
}

.leadership-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.75);
}

.leadership-grid {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  position: relative;
  z-index: 1;
}

.leader-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  transition: var(--transition);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.leader-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.leader-img {
  height: 300px;
  overflow: visible;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  padding-top: 24px;
}

.leader-img::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 220px;
  border-radius: 12px;
  border: 2px solid rgba(212,168,37,.35);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.leader-img::after {
  content: '';
  position: absolute;
  width: 196px;
  height: 236px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(212,168,37,.08), rgba(26,122,58,.05));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.leader-img img {
  width: 170px;
  height: 210px;
  object-fit: cover;
  border-radius: 10px;
  border: 4px solid var(--white);
  box-shadow:
    0 0 0 2px rgba(212,168,37,.4),
    0 8px 30px rgba(0,0,0,.18),
    0 0 20px rgba(212,168,37,.08);
  transition: .5s;
  position: relative;
  z-index: 1;
}

.leader-card:hover .leader-img img { transform: scale(1.05); box-shadow: 0 0 0 2px rgba(212,168,37,.6), 0 12px 40px rgba(0,0,0,.22), 0 0 30px rgba(212,168,37,.12); }

.leader-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  display: flex;
  gap: 8px;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
  z-index: 3;
}

.leader-card:hover .leader-overlay { opacity: 1; }

.leader-overlay a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  transition: var(--transition);
}

.leader-overlay a:hover { background: var(--green); }

.leader-info {
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.leader-info h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.leader-info p {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .leadership-grid { grid-template-columns: 1fr; }
  .leader-img { height: 260px; }
  .leader-img img { width: 140px; height: 180px; }
  .leader-img::before { width: 155px; height: 195px; }
  .leader-img::after { width: 170px; height: 210px; }
}

/* ─── Campus Section ────────────────────────────────────── */
.campus-section {
  position: relative;
  height: 80vh;
  min-height: 580px;
  overflow: hidden;
}

/* The slider has to fill the section. Without an explicit height the chain
   section -> slider -> .carousel-inner -> .carousel-item -> img is all
   auto, so the image falls back to its own aspect ratio and ends up
   shorter than the section — which left the overlay (inset:0 on the
   slider) covering only the top of the picture while the text card
   hung below it, off the image. */
#campusSlider,
.campus-section .carousel-inner { height: 100%; }
.campus-section .carousel-item { height: 100%; }
.campus-section .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease-in-out;
}

.campus-section .carousel-item.active img {
  transform: scale(1.06);
}

.campus-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.20) 65%, transparent 100%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.campus-content {
  max-width: 500px;
  margin-left: 8%;
  color: #fff;
  z-index: 2;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  padding: 44px 40px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 50px rgba(0,0,0,.35);
  position: relative;
}

.campus-content::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--green), var(--gold));
  border-radius: 0 0 4px 4px;
}

.campus-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,168,37,.18);
  border: 1px solid rgba(212,168,37,.3);
  border-radius: var(--radius-pill);
  padding: 5px 16px;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold-light);
  margin-bottom: 16px;
}

.campus-content h2 {
  color: #fff;
  margin-bottom: 14px;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

.campus-content p {
  color: rgba(255,255,255,.75);
  margin-bottom: 24px;
  font-size: .9rem;
  line-height: 1.7;
}

.campus-content .btn {
  background: var(--gold);
  color: var(--gray-900);
  font-weight: 700;
}

.campus-content .btn:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212,168,37,.4);
}

.campus-section .carousel-control-prev,
.campus-section .carousel-control-next {
  width: 44px;
  height: 44px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  opacity: 1;
  transition: all .3s;
}

.campus-section .carousel-control-prev:hover,
.campus-section .carousel-control-next:hover {
  background: rgba(255,255,255,.22);
}

.campus-section .carousel-control-prev { left: 20px; }
.campus-section .carousel-control-next { right: 20px; }

.campus-section .carousel-control-prev-icon,
.campus-section .carousel-control-next-icon {
  width: 18px;
  height: 18px;
}

/* Slide dots are the mobile control; the arrows cover that job on desktop. */
.campus-dots { display: none; }

/* ─── Campus Section: mobile ────────────────────────────────
   Desktop is a full-bleed 80vh photo with the copy on the left. On a
   phone that is unusable: the 44px arrows sat on top of the text card,
   and a landscape source photo cover cropped into a tall box zooms in
   so far the subject is lost. Here the photo becomes one tall box and
   the copy floats on it as a translucent panel, so the picture still
   reads above and below the text instead of being covered by it.

   The box is sized from the panel: the panel is roughly 280px, so at
   68svh (capped 560px) a 390px-wide phone keeps ~140px of clear photo
   above and below the text. svh rather than dvh/vh is the height with
   the browser chrome expanded, so nothing is pushed below the fold;
   the vh line is the fallback for browsers without svh. */
@media (max-width: 768px) {
  .campus-section {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  #campusSlider {
    height: 68vh;
    height: 68svh;
    min-height: 400px;
    max-height: 560px;
  }

  /* Bias the crop towards the upper third where faces and buildings
     sit, so cover does not slice through the middle of the subject.
     transform-origin follows it or the slow zoom drifts the framing
     back to the centre. */
  .campus-section .carousel-item img { object-position: center 32%; }
  .campus-section .carousel-item.active img { transform-origin: center 32%; }

  /* Vignette: darkest at the top and bottom edges, where the photo is
     left uncovered and the dots have to stay readable, clearing in the
     middle so the image shows through the glass panel. */
  .campus-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 28%, rgba(0,0,0,.1) 72%, rgba(0,0,0,.5) 100%);
  }

  .campus-content {
    max-width: 460px;
    width: 100%;
    margin: 0;
    padding: 20px 18px;
    text-align: center;
    color: #fff;
    /* Translucent, not solid: the photo has to read through it. The blur
       is kept at 6px rather than the desktop 14px, which is heavy to
       composite over a full-width box on a phone GPU. */
    background: rgba(0,0,0,.34);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius);
    box-shadow: 0 10px 34px rgba(0,0,0,.4);
  }

  .campus-content::before { left: 18px; right: 18px; }
  .campus-content h2 { color: #fff; font-size: 1.2rem; margin-bottom: 10px; }
  .campus-content p { color: rgba(255,255,255,.8); font-size: .84rem; line-height: 1.6; margin-bottom: 18px; }
  .campus-badge { margin-bottom: 12px; }

  /* Dots replace the arrows: 44px arrows cover too much of a 390px-wide
     image, and the side positions collided with the text card. They sit
     on the photo itself, inside the darker bottom of the vignette. */
  .campus-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    bottom: 14px;
    z-index: 3;
  }

  .campus-dots [data-bs-target] {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    opacity: 1;
    text-indent: -9999px;
    transition: all .3s;
  }

  .campus-dots .active {
    width: 22px;
    border-radius: 4px;
    background: var(--gold);
  }

  .campus-section .carousel-control-prev,
  .campus-section .carousel-control-next { display: none; }
}

@media (max-width: 480px) {
  #campusSlider { height: 60vh; height: 60svh; min-height: 360px; max-height: 480px; }
  .campus-content { padding: 18px 16px; }
  .campus-content h2 { font-size: 1.1rem; }
  .campus-overlay { padding: 0 12px; }
}

/* Landscape and other short viewports (rotated phones, short laptop and
   tablet windows). Keyed off height alone, not width: a 932x430 tablet in
   landscape is just as short as an 844x390 phone and the desktop
   80vh/580px floor would push the whole section 200px past the fold. The
   mobile block above stops at 768px, so the desktop section height is still
   in force here and has to be overridden. The panel is tightened to match
   the little vertical room there is. */
@media (max-height: 560px) and (orientation: landscape) {
  .campus-section {
    height: 82vh;
    height: 82svh;
    min-height: 0;
    max-height: 100vh;
  }
  #campusSlider { height: 100%; min-height: 0; max-height: none; }
  .campus-overlay { padding: 0 5%; }
  .campus-content { max-width: 560px; margin: 0; padding: 12px 18px; }
  .campus-content h2 { font-size: 1.05rem; margin-bottom: 6px; }
  .campus-content p { font-size: .78rem; line-height: 1.5; margin-bottom: 12px; }
  .campus-content::before { left: 14px; right: 14px; }
  .campus-badge { margin-bottom: 8px; padding: 4px 12px; }
}

/* ─── Features Section ──────────────────────────────────── */
.features-section { background: var(--green-pale); }

.features-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  border: 1px solid var(--green-soft);
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--green);
}

.feature-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--green);
  font-size: 1.1rem;
  transition: var(--transition);
}

.feature-card:hover .feature-icon {
  background: var(--green);
  color: #fff;
}

.feature-card h5 {
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gray-900);
}

.feature-card p {
  font-size: .8rem;
  color: var(--gray-500);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
}

/* ─── Partners ──────────────────────────────────────────── */
.partners-section {
  background: var(--white);
  overflow: hidden;
}

.logo-track {
  display: flex;
  width: calc(200px * 30);
  animation: scroll 35s linear infinite;
}

.logo-track:hover { animation-play-state: paused; }

.partner-logo {
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
}

.partner-logo img {
  max-height: 50px;
  max-width: 140px;
  filter: grayscale(100%);
  opacity: .4;
  transition: .3s;
}

.partner-logo img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes scroll {
  0% { transform: translateX(calc(-200px * 15)); }
  100% { transform: translateX(0); }
}

/* ─── Footer ────────────────────────────────────────────── */
.site-footer {
  background: var(--green-dark);
  color: #fff;
  padding-top: 48px;
}

.footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-brand p {
  color: rgba(255,255,255,.5);
  font-size: .82rem;
  margin-top: 8px;
}

.footer-brand .tagline {
  color: var(--gold);
  font-weight: 600;
  font-size: .78rem;
}

.footer-col h6 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  padding: 4px 0;
  font-weight: 500;
  transition: color .2s;
}

.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: .82rem;
  transition: .25s;
}

.footer-socials a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.footer-newsletter {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 20px 24px;
  background: rgba(255,255,255,.04);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.08);
}

.footer-newsletter h6 {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  margin-bottom: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.footer-newsletter form { display: flex; gap: 8px; }

.footer-newsletter input {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  color: #fff;
  font-size: .82rem;
  font-family: inherit;
  outline: none;
}

.footer-newsletter input::placeholder { color: rgba(255,255,255,.3); }
.footer-newsletter input:focus { border-color: var(--green); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-newsletter { max-width: 100%; }
}

/* ─── Back to Top ───────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(26,122,58,.4);
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  z-index: 999;
}

.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--green-dark); transform: translateY(-3px); }

/* ─── Spinner ───────────────────────────────────────────── */
.spinner {
  width: 40px; height: 40px;
  background: var(--green);
  margin: 100px auto;
  border-radius: 50%;
  animation: spin 1.2s infinite ease-in-out;
}

@keyframes spin {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

#spinner { opacity: 0; visibility: hidden; transition: opacity .5s; z-index: 99999; }
#spinner.show { opacity: 1; visibility: visible; }

/* ─── Mobile fixes ──────────────────────────────────────── */
@media (max-width: 768px) {
  .section { padding: 48px 0; }
  .container-narrow { padding: 0 16px; }
  .president-section { padding: 48px 0; }
  .president-text h2 { font-size: 1.4rem; }
  .president-text p { font-size: .85rem; line-height: 1.7; }
  .check-list { grid-template-columns: 1fr; gap: 6px; }
  .check-list li { font-size: .8rem; }
  .event-row { flex-wrap: wrap; gap: 10px; }
  .event-info h5 { font-size: .85rem; }
  .event-meta { font-size: .72rem; }
  .event-desc { font-size: .78rem; }
  .news-featured-img { height: 200px; }
  .news-featured-body { padding: 16px; }
  .news-featured-body h3 { font-size: 1rem; }
  .news-item { padding: 10px; gap: 10px; }
  .news-item-img { width: 80px; height: 64px; }
  .news-item-body h5 { font-size: .78rem; }
  .feature-card { padding: 20px 16px; }
  .feature-card h5 { font-size: .82rem; }
  .feature-card p { font-size: .75rem; }
  .quick-links { padding: 10px 0; margin-top: -1px; }
  .quick-links-title { font-size: .65rem; }
  .ql-pill { font-size: .68rem; padding: 5px 12px; }
}

@media (max-width: 480px) {
  .section { padding: 36px 0; }
  .president-section { padding: 36px 0; }
  .president-grid { gap: 24px; }
  .news-featured-img { height: 180px; }
  .features-section { padding: 36px 0; }
  .leadership-section { padding: 36px 0; }
}

/* ════════════════════════════════════════════════════════════
   INNER PAGES — Consistent Theme
   ════════════════════════════════════════════════════════════ */

/* ─── Page Hero ───────────────────────────────────────────── */
.page-hero {
  position: relative;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  padding: 72px 0 56px;
  text-align: center;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('img/campus1.jpg') center/cover no-repeat;
  opacity: .12;
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero h1 {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}

.page-hero p {
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  margin-bottom: 18px;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.page-breadcrumb li { font-size: .85rem; color: rgba(255,255,255,.7); }
.page-breadcrumb li a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s; }
.page-breadcrumb li a:hover { color: var(--gold); }
.page-breadcrumb li.active { color: var(--gold); font-weight: 600; }
.page-breadcrumb .sep { color: rgba(255,255,255,.4); }

/* ─── Inner Section ───────────────────────────────────────── */
.inner-section { padding: 56px 0; }

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.section-header p {
  color: var(--gray-500);
  font-size: .9rem;
  max-width: 600px;
  margin: 0 auto;
}

.section-header .accent-line {
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--gold));
  border-radius: 2px;
  margin: 12px auto 0;
}

/* ─── Inner Cards ─────────────────────────────────────────── */
.inner-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}

.inner-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.inner-card .card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.inner-card .card-body {
  padding: 20px;
}

.inner-card .card-body h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.inner-card .card-body p {
  font-size: .85rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-bottom: 0;
}

.inner-card .card-body .card-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--green-pale);
  color: var(--green);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.inner-card .card-body .card-date {
  font-size: .75rem;
  color: var(--gray-400);
}

.inner-card .card-body .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  margin-top: 12px;
  transition: gap .2s;
}

.inner-card .card-body .card-link:hover { gap: 10px; }

/* ─── Inner Profile Card (Dean/HOD/Staff) ─────────────────── */
.profile-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}

.profile-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.profile-card .profile-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: top;
}

.profile-card .profile-body {
  padding: 20px;
  text-align: center;
}

.profile-card .profile-body h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.profile-card .profile-body .role {
  font-size: .8rem;
  color: var(--green);
  font-weight: 500;
  margin-bottom: 10px;
}

.profile-card .profile-body .dept {
  font-size: .78rem;
  color: var(--gray-500);
}

/* ─── Inner Content Layout ────────────────────────────────── */
.content-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.content-two-col .col-text h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 16px;
}

.content-two-col .col-text p {
  font-size: .9rem;
  color: var(--gray-500);
  line-height: 1.8;
  margin-bottom: 16px;
}

.content-two-col .col-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.content-two-col .col-img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

/* ─── Stat Boxes (for college/department) ──────────────────── */
.stat-boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0;
}

.stat-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  transition: transform .3s, box-shadow .3s;
}

.stat-box:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.stat-box .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--green-pale);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin: 0 auto 12px;
}

.stat-box h4 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 4px;
}

.stat-box p {
  font-size: .8rem;
  color: var(--gray-500);
  margin-bottom: 0;
}

/* ─── Inner Grid ──────────────────────────────────────────── */
.inner-grid { display: grid; gap: 24px; }
.inner-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.inner-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.inner-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ─── Inner Table ─────────────────────────────────────────── */
.inner-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}

.inner-table thead { background: var(--green-dark); }

.inner-table thead th {
  padding: 14px 18px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .5px;
  border: none;
}

.inner-table tbody td {
  padding: 12px 18px;
  font-size: .85rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
}

.inner-table tbody tr:last-child td { border-bottom: none; }
.inner-table tbody tr:hover { background: var(--green-pale); }

/* ─── Inner List ──────────────────────────────────────────── */
.inner-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inner-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: .88rem;
  color: var(--gray-700);
}

.inner-list li:last-child { border-bottom: none; }

.inner-list li i {
  color: var(--green);
  font-size: .8rem;
  margin-top: 4px;
  flex-shrink: 0;
}

/* ─── Filter Bar ──────────────────────────────────────────── */
.filter-bar {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 16px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.filter-bar select,
.filter-bar input {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: .85rem;
  font-family: inherit;
  color: var(--gray-700);
  background: var(--white);
  outline: none;
  transition: border-color .2s;
}

.filter-bar select:focus,
.filter-bar input:focus { border-color: var(--green); }

/* ─── Tabs (for announcements) ────────────────────────────── */
.inner-tabs {
  display: flex;
  gap: 4px;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 28px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.inner-tabs .tab {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray-500);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}

.inner-tabs .tab.active,
.inner-tabs .tab:hover {
  background: var(--green);
  color: var(--white);
}

/* ─── Pagination ──────────────────────────────────────────── */
.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.pagination-wrap .page-link {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin: 0 3px;
  padding: 8px 14px;
  font-size: .82rem;
  color: var(--gray-600);
  background: var(--white);
  transition: all .2s;
  text-decoration: none;
}

.pagination-wrap .page-link:hover,
.pagination-wrap .page-link.active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

/* ─── Info Box ────────────────────────────────────────────── */
.info-box {
  background: var(--green-pale);
  border-radius: var(--radius-lg);
  padding: 24px;
  border-left: 4px solid var(--green);
  margin-bottom: 24px;
}

.info-box h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--green-dark);
  margin-bottom: 8px;
}

.info-box p {
  font-size: .85rem;
  color: var(--gray-600);
  margin-bottom: 0;
  line-height: 1.7;
}

/* ─── Sidebar ─────────────────────────────────────────────── */
.sidebar-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
  overflow: hidden;
  margin-bottom: 24px;
}

.sidebar-card .card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  padding: 16px 20px;
  border-bottom: 2px solid var(--green);
  margin-bottom: 0;
}

.sidebar-card .list-group-item {
  border: none;
  padding: 12px 20px;
  font-size: .85rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  transition: background .2s;
}

.sidebar-card .list-group-item:last-child { border-bottom: none; }
.sidebar-card .list-group-item:hover { background: var(--green-pale); }

/* ─── CTA Box ─────────────────────────────────────────────── */
.cta-box {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  border-radius: var(--radius-lg);
  padding: 32px;
  color: var(--white);
  text-align: center;
}

.cta-box h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.cta-box p {
  font-size: .88rem;
  opacity: .85;
  margin-bottom: 20px;
}

.cta-box .btn-gold {
  background: var(--gold);
  color: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 28px;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s;
}

.cta-box .btn-gold:hover {
  background: var(--gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212,168,37,.3);
}

/* ─── Gallery (Photo/Video) ───────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.gallery-item img,
.gallery-item iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s;
}

.gallery-item:hover img,
.gallery-item:hover iframe { transform: scale(1.06); }

.gallery-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.gallery-item:hover .overlay { opacity: 1; }

.gallery-item .overlay span {
  color: var(--white);
  font-size: .85rem;
  font-weight: 500;
}

/* ─── Form (Contact/Feedback) ─────────────────────────────── */
.inner-form .form-control {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: .88rem;
  font-family: inherit;
  color: var(--gray-800);
  transition: border-color .2s;
}

.inner-form .form-control:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26,122,58,.1);
}

.inner-form .form-label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--gray-700);
  margin-bottom: 6px;
}

/* ─── Timeline ────────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 28px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--green);
}

.timeline-item {
  position: relative;
  padding-bottom: 28px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--green);
}

.timeline-item h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 4px;
}

.timeline-item .year {
  font-size: .75rem;
  color: var(--green);
  font-weight: 600;
  margin-bottom: 6px;
}

.timeline-item p {
  font-size: .85rem;
  color: var(--gray-500);
  line-height: 1.7;
}

/* ─── 404 Page ────────────────────────────────────────────── */
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}

.error-page .error-code {
  font-size: 6rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  margin-bottom: 16px;
  font-family: var(--font-heading);
}

.error-page h2 {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 12px;
}

.error-page p {
  font-size: .9rem;
  color: var(--gray-500);
  margin-bottom: 28px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Two-column page layout: main content + sidebar ────────── */
.page-cols {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Small two-up list, used for tick lists such as "what we do". */
.tick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.tick-grid > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Label / value rows in a sidebar card, e.g. Quick Facts. */
.fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--gray-100);
}

.fact-row:last-child { border-bottom: 0; }

.fact-key {
  font-size: .85rem;
  color: var(--gray-500);
  flex: 0 0 auto;
}

.fact-val {
  font-weight: 600;
  font-size: .85rem;
  text-align: right;
  min-width: 0;
}

/* ─── Inner Page Responsive ───────────────────────────────── */
@media (max-width: 768px) {
  .page-cols { grid-template-columns: 1fr; gap: 28px; }
  .tick-grid { grid-template-columns: 1fr; }
  .page-hero { padding: 56px 0 40px; }
  .page-hero h1 { font-size: 1.5rem; }
  .page-hero p { font-size: .85rem; }
  .inner-section { padding: 40px 0; }
  .section-header { margin-bottom: 28px; }
  .section-header h2 { font-size: 1.3rem; }
  .content-two-col { grid-template-columns: 1fr; gap: 24px; }
  .stat-boxes { grid-template-columns: 1fr; gap: 16px; }
  .inner-grid.cols-3,
  .inner-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .inner-tabs { flex-wrap: wrap; justify-content: center; }
  .error-page .error-code { font-size: 4rem; }
}

@media (max-width: 480px) {
  .page-hero { padding: 48px 0 32px; }
  .page-hero h1 { font-size: 1.3rem; }
  .inner-grid.cols-2,
  .inner-grid.cols-3,
  .inner-grid.cols-4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .inner-table thead th,
  .inner-table tbody td { padding: 10px 12px; font-size: .78rem; }
  .fact-row { padding: 10px 14px; }
}