/* ══════════════════════════════════════════════════════════
   SSRF — SSRF-style.css
   Palette: Blue Deep Space · Amber Gold · Cream White
   Reference: style.css (SSRA Refined Edition)
   ──────────────────────────────────────────────────────────
   Table of Contents
   1.  Custom Properties
   2.  Reset & Base
   3.  Gold Scrollbar
   4.  Scroll Progress Bar
   5.  Section Name Pill
   6.  Side Section Dots
   7.  Navigation
   8.  Hero
   9.  About Section
   10. Objectives Section
   11. Activities Section
   12. Office Bearers Section  (placeholder — extend as needed)
   13. Footer
   14. Footer Contact
   15. Animations & Utilities
   16. Hamburger / Mobile Nav
   17. Responsive — Tablet  (≤ 960px)
   18. Responsive — Mobile  (≤ 768px)
   19. Responsive — Small   (≤ 600px)
   20. Responsive — Tiny    (≤ 400px)
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,400;1,600&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,600;0,700;1,300;1,600&family=Italiana&family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,200;1,9..40,300&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');


/* ══════════════════════════════════════════════════════════
   1. CUSTOM PROPERTIES
   ══════════════════════════════════════════════════════════ */
:root {
  /* Core Blue Palette */
  --bg-page:        #EEF4FF;
  --bg-surface:     #FFFFFF;
  --bg-mid:         #DCE9FF;
  --bg-dark:        #1A3A6B;
  --blue-deep:      #1A3A6B;
  --blue-mid:       #2E5BAA;
  --blue-light:     #5580CC;
  --blue-accent:    #3b6de8;

  /* Gold Palette */
  --gold:           #C9A227;
  --gold-light:     #F0D98A;
  --gold-pale:      #FBF5DC;
  --gold-dark:      #9B7A0E;
  --gold-glow:      rgba(201,162,39,0.28);

  /* Text */
  --text-body:      #2C3E60;
  --text-muted:     #5A6E93;
  --text-heading:   #1a2d6e;
  --text-dark:      #1a2d6e;

  /* Borders */
  --border:         #BDD0F0;
  --border-strong:  #8AAEE0;
  --border-gold:    rgba(201,162,39,0.22);
  --border-blue:    rgba(59,109,232,0.18);

  /* Glass */
  --glass:          rgba(255,255,255,0.55);
  --glass2:         rgba(255,255,255,0.82);

  /* Shadows */
  --shadow-sm:      0 2px 12px rgba(26,58,107,0.10);
  --shadow-md:      0 8px 32px rgba(26,58,107,0.14);
  --shadow-lg:      0 20px 60px rgba(26,58,107,0.18);
  --shadow-card:    0 4px 20px rgba(59,109,232,0.10), 0 1px 4px rgba(59,109,232,0.06);
  --shadow-gold:    0 4px 20px rgba(201,162,39,0.32);

  /* Radii */
  --r-sm:           6px;
  --r-md:           10px;
  --r-lg:           18px;
  --r-card:         18px;
  --r-pill:         999px;

  /* Easing */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Transitions */
  --transition:     0.3s var(--ease);
  --transition-fast: 0.18s var(--ease);

  /* Typography */
  --font-sans:      'Outfit', sans-serif;
  --font-serif:     'Cormorant Garamond', Georgia, serif;
  --font-display:   'Cinzel', serif;
  --font-title:     'Playfair Display', serif;
  --font-italic:    'DM Serif Display', Georgia, serif;
  --font-dm:        'DM Sans', sans-serif;

  /* Layout */
  --nav-h:          68px;
  --section-pad:    7rem 2rem;
  --section-pad-md: 5.5rem 1.8rem;
  --section-pad-sm: 4rem 1.2rem;
  --section-pad-xs: 3.5rem 1rem;
  --max-w:          1200px;
}


/* ══════════════════════════════════════════════════════════
   2. RESET & BASE
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font-sans);
  background: var(--bg-page);
  color: var(--text-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { text-decoration: none; }

::selection {
  background: rgba(59,109,232,0.15);
  color: var(--blue-deep);
}


/* ══════════════════════════════════════════════════════════
   3. GOLD SCROLLBAR
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar               { width: 5px; }
::-webkit-scrollbar-track         { background: var(--bg-page); }
::-webkit-scrollbar-thumb         {
  background: linear-gradient(to bottom, var(--gold), var(--gold-light), var(--gold));
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover   { background: linear-gradient(to bottom, var(--gold-light), var(--gold)); }
* { scrollbar-width: thin; scrollbar-color: var(--gold) var(--bg-page); }


/* ══════════════════════════════════════════════════════════
   4. SCROLL PROGRESS BAR
   ══════════════════════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--blue-deep)   0%,
    var(--blue-mid)    25%,
    var(--blue-accent) 50%,
    var(--blue-light)  75%,
    var(--gold)        100%
  );
  background-size: 300% 100%;
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow:
    0 0 10px rgba(59,109,232,0.55),
    0 0 4px  rgba(59,109,232,0.35),
    0 0 20px rgba(201,162,39,0.20);
  animation: shimmerBar 3s linear infinite;
}


@keyframes shimmerBar {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}


/* ══════════════════════════════════════════════════════════
   5. SECTION NAME PILL
   ══════════════════════════════════════════════════════════ */

/* Entry: slides up + fades in from below */
@keyframes pillEnter {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.90); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
}

/* Exit: slides down + fades out */
@keyframes pillExit {
  from { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1);    }
  to   { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.92); }
}

/* Ambient glow pulse — GPU-only (opacity + box-shadow opacity via rgba) */
@keyframes pillGlow {
  0%, 100% { box-shadow: 0 4px 22px rgba(26,58,107,0.30), inset 0 1px 0 rgba(240,217,138,0.15); }
  50%       { box-shadow: 0 6px 30px rgba(26,58,107,0.44), 0 0 16px 2px rgba(201,162,39,0.20), inset 0 1px 0 rgba(240,217,138,0.28); }
}

/* Shimmer sweep across pill face */
@keyframes pillShimmer {
  0%   { transform: translateX(-180%) skewX(-18deg); opacity: 0;   }
  15%  { opacity: 0.55; }
  85%  { opacity: 0.55; }
  100% { transform: translateX(260%)  skewX(-18deg); opacity: 0;   }
}

/* Leading indicator dot — breathes with opacity only (GPU) */
@keyframes pillDotBreath {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.35; }
}

#section-pill {
  position: fixed;
  bottom: 2.2rem;
  left: 50%;
  /* hidden state — driven by JS adding/removing .pill-visible */
  transform: translateX(-50%) translateY(20px) scale(0.90);
  opacity: 0;
  pointer-events: none;

  background: linear-gradient(135deg, var(--blue-deep) 0%, #1d4380 60%, #1a3a6b 100%);
  color: var(--gold-light);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 8px 22px 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,39,0.40);
  overflow: hidden;
  z-index: 500;

  box-shadow:
    0 4px 22px rgba(26,58,107,0.30),
    inset 0 1px 0 rgba(240,217,138,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.08);

  /* Transition handles hidden↔visible state changes */
  transition:
    opacity   0.42s var(--ease-out),
    transform 0.42s var(--ease-out);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  will-change: opacity, transform;
}

/* Leading gold indicator dot — inline via ::before */
#section-pill::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -0.5px;
  box-shadow: 0 0 5px rgba(201,162,39,0.65);
  animation: pillDotBreath 2.2s ease-in-out infinite;
}

/* Shimmer sweep — starts fully off-screen left */
#section-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent   0%,
    rgba(240,217,138,0.16) 50%,
    transparent  100%
  );
  transform: translateX(-180%) skewX(-18deg);
  pointer-events: none;
}

/* Visible state */
#section-pill.pill-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: pillGlow 3.5s ease-in-out infinite 0.5s;
  pointer-events: auto;
  cursor: pointer;
}

/* Shimmer fires only when visible */
#section-pill.pill-visible::after {
  animation: pillShimmer 2.8s ease-in-out infinite 0.9s;
}

/* Dismissed — fully hidden, no interaction */
#section-pill.pill-dismissed {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(20px) scale(0.90) !important;
  pointer-events: none !important;
  animation: none !important;
}


/* ══════════════════════════════════════════════════════════
   6. SIDE SECTION DOTS
   ══════════════════════════════════════════════════════════ */

/* Active dot outer ripple — starts from the dot's current rendered size */
@keyframes dotRipple {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0;    }
}

/* Active dot gentle inner breathe — additive on top of CSS scale */
@keyframes dotBreath {
  0%, 100% { box-shadow: 0 0 10px rgba(201,162,39,0.55), 0 0 0 2px rgba(201,162,39,0.16); }
  50%       { box-shadow: 0 0 18px rgba(201,162,39,0.75), 0 0 0 4px rgba(201,162,39,0.24); }
}

/* Tooltip fade-in */
@keyframes tipFadeIn {
  from { opacity: 0; transform: translateY(-50%) translateX(6px);  }
  to   { opacity: 1; transform: translateY(-50%) translateX(0);     }
}

/* ── Container ── */
#section-dots {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 400;
  padding: 10px 6px;
  background: rgba(238,244,255,0.52);
  border-radius: 999px;
  border: 1px solid rgba(189,208,240,0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 20px rgba(26,58,107,0.10),
    inset 0 1px 0 rgba(255,255,255,0.72);
  transition:
    background  0.4s var(--ease),
    box-shadow  0.4s var(--ease);
}

#section-dots:hover {
  background: rgba(238,244,255,0.80);
  box-shadow:
    0 6px 28px rgba(26,58,107,0.16),
    inset 0 1px 0 rgba(255,255,255,0.82);
}

/* ── Dot base ── */
.section-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(138,174,224,0.50);
  border: 1.5px solid rgba(138,174,224,0.40);
  cursor: pointer;
  position: relative;
  /* First dot has no top margin; siblings get spacing via + rule below */
  margin: 0;
  flex-shrink: 0;
  transition:
    background   0.30s var(--ease-out),
    border-color 0.30s var(--ease-out),
    transform    0.38s var(--ease-spring),
    box-shadow   0.30s var(--ease-out);
  will-change: transform, box-shadow;
}

/* ── Connector: thin line between every pair of dots ──
   Uses padding-top on sibling dots + a ::before line inside the gap.
   ::before is safe here — tooltip uses ::before only on :hover,
   which overrides cleanly because it has higher specificity. */
.section-dot + .section-dot {
  margin-top: 14px;
}

.section-dot + .section-dot::before {
  content: '';
  position: absolute;
  top: -11px;        /* sits in the 14px gap above, centred on the 1px line */
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 9px;
  background: linear-gradient(
    to bottom,
    rgba(138,174,224,0.25),
    rgba(138,174,224,0.50)
  );
  pointer-events: none;
  border-radius: 1px;
}

/* ── Ripple ring — sits behind, sized relative to dot ── */
.section-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(201,162,39,0.70);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
}

/* ── Hover ── */
.section-dot:hover {
  background: rgba(201,162,39,0.38);
  border-color: rgba(201,162,39,0.65);
  transform: scale(1.45);
  box-shadow:
    0 0 8px  rgba(201,162,39,0.30),
    0 0 0 3px rgba(201,162,39,0.09);
}

/* ── Active ── */
.section-dot.dot-active {
  background: var(--gold);
  border-color: var(--gold-light);
  /* scale only — no conflict with dotBreath (which animates box-shadow, not transform) */
  transform: scale(1.6);
  animation: dotBreath 2.8s ease-in-out infinite;
}

/* Ripple fires from active dot */
.section-dot.dot-active::after {
  animation: dotRipple 2.0s ease-out infinite;
}

/* ── Tooltip — appears to the left on hover ──
   Overrides the connector ::before because :hover adds specificity  */
.section-dot:hover::before {
  content: attr(title);
  position: absolute;
  right: calc(100% + 11px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: linear-gradient(135deg, var(--blue-deep) 0%, #1d4380 100%);
  color: var(--gold-light);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(201,162,39,0.32);
  box-shadow: 0 3px 14px rgba(26,58,107,0.26);
  opacity: 0;
  animation: tipFadeIn 0.22s var(--ease-out) 0.06s forwards;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* connector height reset — tooltip takes over this slot */
  height: auto;
  width: auto;
  background-clip: unset;
}


/* ══════════════════════════════════════════════════════════
   7. NAVIGATION
   ══════════════════════════════════════════════════════════ */

/* ── Bar ── */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  height: var(--nav-h);
  background: rgba(238,244,255,0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition:
    background   0.4s var(--ease),
    box-shadow   0.4s var(--ease),
    border-color 0.4s var(--ease),
    height       0.35s var(--ease),
    padding      0.35s var(--ease);
}

/* ── Scrolled state ── */
#main-nav.scrolled {
  background: rgba(238,244,255,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
  border-bottom-color: var(--border);
  height: 62px;
}

/* Gradient rule under scrolled nav */
#main-nav.scrolled::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--blue-accent) 30%,
    var(--gold) 60%,
    rgba(201,162,39,0.25) 80%,
    transparent 100%
  );
  opacity: 0.38;
  pointer-events: none;
}

/* ── Brand / Logo ── */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.nav-brand:hover { opacity: 0.80; }

.logo {
  width: 48px; height: 48px;
  display: block;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  border: 1.5px solid rgba(201,162,39,0.55);
  box-shadow: 0 0 14px rgba(201,162,39,0.20), 0 0 0 3px rgba(201,162,39,0.07);
  background: transparent;
  transition: box-shadow var(--transition), transform var(--transition);
}
.nav-brand:hover .logo {
  box-shadow: 0 0 22px rgba(201,162,39,0.40), 0 0 0 4px rgba(201,162,39,0.12);
  transform: rotate(-3deg) scale(1.04);
}

/* Brand text — full (desktop) */
.brand-full {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.brand-line1 {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--blue-deep);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand-line2 {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Brand text — compact (hidden on desktop) */
.brand-short { display: none; }
.brand-short-text {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue-deep);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Desktop nav links ── */
.nav-links {
  display: flex;
  gap: 0.2rem;
  list-style: none;
  align-items: center;
  margin: 0; padding: 0;
}

.nav-links a {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--text-body);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  padding: 0.45rem 0.88rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition:
    color       var(--transition),
    background  var(--transition),
    border-color var(--transition),
    box-shadow  var(--transition);
}

/* Sliding underline */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: calc(100% - 1.6rem);
  height: 1.5px;
  background: linear-gradient(90deg, var(--blue-accent), var(--gold));
  border-radius: 2px;
  transition: transform 0.32s var(--ease-out);
  transform-origin: center;
}

.nav-links a:hover {
  color: var(--blue-deep);
  background: rgba(59,109,232,0.05);
}
.nav-links a.nav-active {
  color: var(--blue-deep);
  background: rgba(59,109,232,0.08);
  border-color: rgba(59,109,232,0.16);
  box-shadow: 0 1px 6px rgba(59,109,232,0.08);
}
.nav-links a:hover::after,
.nav-links a.nav-active::after { transform: translateX(-50%) scaleX(1); }

/* ── CTA pill ── */
.nav-link-cta {
  color: var(--gold-light) !important;
  background: var(--blue-deep) !important;
  border: 1px solid rgba(201,162,39,0.28) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  transition: all 0.3s var(--ease) !important;
}
.nav-link-cta:hover {
  background: var(--blue-mid) !important;
  border-color: rgba(201,162,39,0.55) !important;
  color: var(--gold-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(26,58,107,0.22) !important;
}
.nav-link-cta::after { display: none !important; }

/* ── navFlash (JS scroll-spy) ── */
@keyframes navFlash {
  0%   { background: rgba(59,109,232,0.14); }
  100% { background: rgba(59,109,232,0.08); }
}
.nav-links a.nav-flash { animation: navFlash 0.65s var(--ease-out) forwards; }


/* ══════════════════════════════════════════════════════════
   8. HERO
   ══════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  background: linear-gradient(160deg, #EEF4FF 0%, #DCE9FF 55%, #C8DAFF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 6rem;
  text-align: center;
}

/* Aurora blobs */
.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-pattern::before {
  content: '';
  position: absolute;
  width: 700px; height: 500px;
  top: -120px; left: -180px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(46,91,170,0.22) 0%, transparent 70%);
  filter: blur(80px);
  animation: auroraFloat 14s ease-in-out infinite alternate;
}
.hero-pattern::after {
  content: '';
  position: absolute;
  width: 600px; height: 400px;
  top: 60px; right: -120px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(201,162,39,0.14) 0%, transparent 70%);
  filter: blur(80px);
  animation: auroraFloat 14s ease-in-out infinite alternate;
  animation-delay: -5s;
}

/* Third aurora blob */
.hero::before {
  content: '';
  position: absolute;
  width: 500px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(26,58,107,0.12) 0%,
    rgba(201,162,39,0.07) 50%,
    transparent 70%);
  filter: blur(80px);
  bottom: -50px; left: 30%;
  animation: auroraFloat 14s ease-in-out infinite alternate;
  animation-delay: -9s;
  z-index: 1;
  pointer-events: none;
}

/* Dot-grid overlay */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(201,162,39,0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  z-index: 1;
  pointer-events: none;
}

@keyframes auroraFloat {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  33%  { transform: translate(20px, -15px) scale(1.06) rotate(1deg); }
  66%  { transform: translate(-10px, 20px) scale(0.97) rotate(-0.5deg); }
  100% { transform: translate(30px, 10px) scale(1.10) rotate(1.5deg); }
}

/* Watermark logo */
.hero-logo-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.hero-logo-bg img {
  width: 52%;
  max-width: 660px;
  opacity: 0.045;
  filter: grayscale(20%) drop-shadow(0 0 40px rgba(201,162,39,0.12));
  animation: logoFloat 24s ease-in-out infinite;
  will-change: transform;
}
@keyframes logoFloat {
  0%, 100% { transform: scale(1.00) rotate(0deg); }
  50%       { transform: scale(1.05) rotate(1.2deg); }
}

/* Pulsing ring */
.hero-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,0.12);
  box-shadow:
    0 0 80px rgba(201,162,39,0.05),
    inset 0 0 80px rgba(201,162,39,0.025);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  animation: ringPulse 8s ease-in-out infinite;
  will-change: transform, opacity;
}
.hero-glow::before {
  content: '';
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,0.06);
}
.hero-glow::after {
  content: '';
  position: absolute;
  inset: 64px;
  border-radius: 50%;
  border: 1px solid rgba(201,162,39,0.04);
  animation: ringPulse 8s ease-in-out infinite reverse;
  animation-delay: -4s;
}
@keyframes ringPulse {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 1;    transform: translate(-50%, -50%) scale(1.035); }
}

/* Main heading */
.hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  color: var(--blue-deep);
  line-height: 1.06;
  max-width: 880px;
  position: relative;
  z-index: 3;
  letter-spacing: 0.01em;
  animation: fadeUp 1s 0.1s var(--ease-out) both;
  text-shadow: 0 2px 20px rgba(26,58,107,0.10);
}
.hero-title em { color: var(--#1a2d6e); font-style: normal; font-size: 0.55em; letter-spacing: 0.02em; vertical-align: middle; }

/* Registration sub-line */
.hero-title-sub {
  font-family: var(--font-serif);
  font-size: clamp(0.66rem, 1.3vw, 0.86rem);
  letter-spacing: 0.06em;
  margin-top: 14px;
  font-style: italic;
  line-height: 1.7;
  position: relative;
  z-index: 3;
  animation: fadeUp 1s 0.28s var(--ease-out) both;
  color: var(--text-muted);
}
.hero-title-sub em { color: var(--#1a2d6e); font-style: italic; }

/* Ornamental divider */
.hero-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2rem auto;
  position: relative;
  z-index: 3;
  animation: fadeUp 1s 0.38s var(--ease-out) both;
  width: 200px;
  justify-content: center;
}
.hero-divider::before {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
  opacity: 0.45;
}
.hero-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--gold));
  opacity: 0.45;
}
.hero-divider span {
  color: var(--gold);
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.80;
  animation: starSpin 12s linear infinite;
  display: inline-block;
}
@keyframes starSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Leadership panel */
.hero-meta {
  display: flex;
  gap: 0;
  align-items: center;
  position: relative;
  z-index: 3;
  animation: fadeUp 1s 0.50s var(--ease-out) both;
  flex-wrap: nowrap;
  justify-content: center;
  background: rgba(255,255,255,0.60);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.80);
  max-width: 520px;
  width: 100%;
}
.hero-meta-item {
  text-align: center;
  padding: 1.4rem 2.4rem;
  transition: background var(--transition);
  flex: 1;
  min-width: 0;
}
.hero-meta-item:hover { background: rgba(201,162,39,0.06); }
.hero-meta-item span {
  display: block;
  font-family: 'Italiana', Georgia, serif;
  font-size: clamp(11px, 1.6vw, 14px);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold-dark);
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.hero-meta-item p {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.55rem);
  color: var(--blue-deep);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
  white-space: nowrap;
}
.hero-meta-sep {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--border-strong), transparent);
  flex-shrink: 0;
}

/* Shared keyframe */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ══════════════════════════════════════════════════════════
   9. ABOUT SECTION
   ══════════════════════════════════════════════════════════ */
.about-section {
  background: linear-gradient(155deg, #EEF4FF 0%, #FFFFFF 55%, #DCE9FF 100%);
  position: relative;
  overflow: hidden;
  border-top: 2px solid #c3d8ff;
  border-bottom: 2px solid #c3d8ff;
  padding: var(--section-pad);
}

/* Noise overlay */
.noise-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.5;
}

/* Decorative grid lines */
.about-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hline {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(59,109,232,0.10), transparent);
}
.hline-1 { top: 25%; }
.hline-2 { top: 70%; }
.vline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(59,109,232,0.08), transparent);
}
.vline-1 { left: 30%; }
.vline-2 { left: 72%; }

/* Ambient orbs */
.about-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 0;
}
.about-orb--a {
  width: 400px; height: 400px;
  top: -80px; right: -100px;
  background: radial-gradient(ellipse, rgba(59,109,232,0.08), transparent);
}
.about-orb--b {
  width: 320px; height: 320px;
  bottom: -60px; left: 5%;
  background: radial-gradient(ellipse, rgba(201,162,39,0.07), transparent);
}

/* Inner wrapper */
.about-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 5rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Left column */
.about-left {
  position: relative;
  padding-left: 1.5rem;
}
.about-left::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--blue-accent), rgba(59,109,232,0.08));
  border-radius: 2px;
}

/* Section tag */
.section-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.4rem;
}
.section-tag--center {
  justify-content: center;
}
.tag-line {
  flex: 1;
  max-width: 40px;
  height: 1px;
  background: linear-gradient(to right, var(--blue-accent), rgba(59,109,232,0.20));
}
.section-tag--center .tag-line { max-width: none; }
.tag-text {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blue-accent);
  white-space: nowrap;
}

/* About heading */
.about-heading {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  color: var(--text-heading);
  line-height: 1.1;
  margin-bottom: 1.6rem;
  letter-spacing: -0.01em;
}
.about-heading em { color: var(--gold); font-style: italic; }

/* ── About heading — Windows style (desktop only) ── */
@media (min-width: 769px) {
  .about-heading {
    font-family: 'Segoe UI', 'Segoe UI Variable', 'Segoe UI Historic',
                 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2.4rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-heading);
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
  }

  /* Line 1 — "Social Science Researchers" — single line, light weight */
  .ah-line1 {
    display: block;
    white-space: nowrap;           /* force single line */
    font-weight: 300;
    font-size: 1em;
    color: var(--text-muted);
    letter-spacing: -0.01em;
  }

  /* Line 2 — "Foundation" — bold, larger, accent colour */
  .ah-line2 {
    display: block;
    font-weight: 700;
    font-size: 1.55em;
    color: var(--blue-deep);
    letter-spacing: -0.035em;
    line-height: 1.05;
  }

  /* Thin accent underline — Windows Fluent focus bar */
  .about-heading::after {
    content: '';
    display: block;
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg, var(--blue-accent), var(--gold));
    border-radius: 2px;
    margin-top: 0.7rem;
  }

  /* "ABOUT US" tag — Windows Fluent label style */
  .about-left .section-tag .tag-text {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--blue-accent);
  }
}

/* Badges */
.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.badge {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  border: 1px solid;
  display: inline-block;
}
.badge--gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 2px 10px rgba(201,162,39,0.32);
}
.badge--outline {
  background: transparent;
  color: var(--blue-deep);
  border-color: var(--border-strong);
}

/* Main card */
.about-main-card {
  background: rgba(255,255,255,0.80);
  border: 1px solid var(--border-blue);
  border-radius: var(--r-card);
  padding: 2.2rem 2.4rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.about-main-card:hover {
  box-shadow: 0 20px 60px rgba(59,109,232,0.14);
  transform: translateY(-4px);
}

/* Blue accent bar on card top */
.about-main-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-accent), var(--gold), transparent);
  opacity: 0.70;
}

.amc-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.amc-shield {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(59,109,232,0.08);
  border: 1px solid rgba(59,109,232,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue-accent);
  transition: background var(--transition), border-color var(--transition);
}
.about-main-card:hover .amc-shield {
  background: rgba(59,109,232,0.14);
  border-color: var(--blue-accent);
}
.amc-abbr {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: 0.14em;
}
.amc-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.amc-body {
  font-size: clamp(0.84rem, 1.3vw, 0.96rem);
  line-height: 1.90;
  color: #2c3e80;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;
}
.amc-body strong { color: var(--blue-deep); font-weight: 600; }

.amc-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(59,109,232,0.18), transparent);
  margin: 1.4rem 0;
}

/* Credentials grid */
.amc-creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 1.4rem;
}
.amc-cred {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.amc-cred-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 4px;
  box-shadow: 0 0 6px rgba(201,162,39,0.50);
}
.amc-cred-name {
  font-family: var(--font-display);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.amc-cred-val {
  font-family: var(--font-sans);
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--blue-deep);
  margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════
   10. OBJECTIVES SECTION
   ══════════════════════════════════════════════════════════ */
.obj-section {
  background: linear-gradient(155deg, #F5F9FF 0%, #EEF4FF 60%, #E3EDFF 100%);
  position: relative;
  overflow: hidden;
  padding: var(--section-pad);
}

.obj-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.obj-orb--a {
  width: 500px; height: 500px;
  top: -100px; left: -120px;
  background: radial-gradient(ellipse, rgba(59,109,232,0.07), transparent);
}
.obj-orb--b {
  width: 400px; height: 400px;
  bottom: -80px; right: 5%;
  background: radial-gradient(ellipse, rgba(201,162,39,0.06), transparent);
}

.obj-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.obj-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.obj-heading {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text-heading);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0.6rem 0 0.8rem;
}
.obj-heading em { color: var(--gold); font-style: italic; }
.obj-subheading {
  font-size: clamp(0.84rem, 1.4vw, 0.98rem);
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

/* Card grid */
.obj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.obj-card {
  background: rgba(255,255,255,0.80);
  border: 1px solid var(--border-blue);
  border-radius: var(--r-card);
  padding: 1.8rem 1.8rem 2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition:
    transform 0.40s var(--ease-out),
    box-shadow 0.40s var(--ease-out),
    border-color 0.3s,
    background 0.3s;
  will-change: transform;
}
.obj-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 56px rgba(59,109,232,0.15);
  background: rgba(255,255,255,0.96);
}
.obj-card--wide { grid-column: 1 / -1; }

/* Color accent bar */
.obj-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.obj-card[data-color="gold"]::before {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
}
.obj-card[data-color="teal"]::before {
  background: linear-gradient(90deg, #0d7bb0, #2ba5c8, #6fd6eb);
}
.obj-card[data-color="violet"]::before {
  background: linear-gradient(90deg, #5b3fa3, #7c5dca, #a98ff0);
}
.obj-card[data-color="coral"]::before {
  background: linear-gradient(90deg, #c44b3a, #e86b55, #f5a090);
}
.obj-card:hover::before { opacity: 1; }

.obj-card-num {
  font-family: var(--font-title);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-muted);
  opacity: 0.60;
}
.obj-card-icon {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-accent);
  transition: transform 0.40s var(--ease-spring), color var(--transition);
}
.obj-card:hover .obj-card-icon { transform: scale(1.15) rotate(-5deg); color: var(--blue-mid); }
.obj-card-icon svg { width: 22px; height: 22px; }

.obj-card-title {
  font-family: var(--font-title);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.obj-card-text {
  font-size: 0.84rem;
  color: #4a5a93;
  line-height: 1.75;
  font-weight: 300;
  flex: 1;
}
.obj-card-line {
  height: 1px;
  background: linear-gradient(to right, rgba(59,109,232,0.20), transparent);
  margin-top: auto;
  padding-top: 0.5rem;
  border: none;
}


/* ══════════════════════════════════════════════════════════
   11. ACTIVITIES SECTION
   ══════════════════════════════════════════════════════════ */
.act-section {
  background: linear-gradient(160deg, #EEF4FF 0%, #F5F9FF 50%, #DCE9FF 100%);
  position: relative;
  overflow: hidden;
  padding: var(--section-pad);
}

.act-orb--a {
  position: absolute;
  width: 500px; height: 500px;
  top: -100px; right: -80px;
  border-radius: 50%;
  filter: blur(100px);
  background: radial-gradient(ellipse, rgba(59,109,232,0.07), transparent);
  pointer-events: none;
  z-index: 0;
}
/* Watermark text */
.act-wm {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(100px, 26vw, 380px);
  font-weight: 700;
  color: rgba(59,107,210,0.045);
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.08em;
  z-index: 0;
}

.act-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.act-header {
  text-align: center;
  margin-bottom: 3rem;
}
.act-heading {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text-heading);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 0.6rem;
}
.act-heading em { color: var(--gold); font-style: italic; }

/* Bento grid */
.act-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

/* Bento card */
.act-bcard {
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--border-blue);
  border-radius: var(--r-card);
  padding: 1.6rem 1.6rem 1.8rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition:
    transform 0.38s var(--ease-out),
    box-shadow 0.38s var(--ease-out),
    border-color 0.3s,
    background 0.3s;
  will-change: transform;
}
.act-bcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(59,109,232,0.14);
  border-color: rgba(59,109,232,0.32);
  background: rgba(255,255,255,0.96);
}

/* Top blue bar on hover */
.act-bcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-accent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.act-bcard:hover::before { transform: scaleX(1); }

.act-bcard-icon {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(59,109,232,0.07);
  border: 1px solid rgba(59,109,232,0.18);
  color: var(--blue-accent);
  flex-shrink: 0;
  transition: background var(--transition), transform 0.38s var(--ease-spring);
}
.act-bcard:hover .act-bcard-icon {
  background: rgba(59,109,232,0.14);
  transform: scale(1.10) rotate(-6deg);
}

.act-bcard-text {
  font-size: 0.87rem;
  line-height: 1.78;
  color: #4a5a93;
  font-weight: 300;
}
.act-bcard-text strong { color: var(--blue-deep); font-weight: 600; }

/* Stagger delays for reveal */
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.30s; }


/* ══════════════════════════════════════════════════════════
   12. OFFICE BEARERS SECTION  (id="office-bearers")
   ══════════════════════════════════════════════════════════ */
/* Placeholder — extend with bearer-card classes if the
   office-bearers section is added to the HTML later.    */
#office-bearers {
  background: linear-gradient(155deg, #EDF4FF 0%, #E3EEFF 100%);
  position: relative;
  padding: var(--section-pad);
}


/* ══════════════════════════════════════════════════════════
   13. FOOTER
   ══════════════════════════════════════════════════════════ */
footer {
  background: linear-gradient(180deg, #EEF4FF 0%, #FFFFFF 55%, #DCE9FF 100%);
  border-top: 2px solid #c3d8ff;
  padding: 4rem 2rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--blue-accent) 30%,
    #93beff 50%,
    var(--blue-accent) 70%,
    transparent 100%);
  opacity: 0.65;
}
footer::after {
  content: 'SSRF';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(80px, 22vw, 380px);
  font-weight: 700;
  color: rgba(59,107,210,0.048);
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.08em;
}

/* Footer inner wrapper keeps all content above the watermark */
footer > * { position: relative; z-index: 1; }

.footer-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.4rem;
}
.footer-logo {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: contain;
  padding: 3px;
  border: 1.5px solid var(--blue-accent);
  box-shadow: 0 0 20px rgba(59,109,232,0.18), 0 4px 12px rgba(59,109,232,0.09);
  transition: transform var(--transition), box-shadow var(--transition);
}
.footer-logo:hover {
  transform: rotate(-5deg) scale(1.05);
  box-shadow: 0 0 30px rgba(59,109,232,0.28), 0 6px 18px rgba(59,109,232,0.15);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: clamp(0.80rem, 2.5vw, 0.98rem);
  letter-spacing: 0.20em;
  color: var(--text-heading);
  font-weight: 600;
  margin-bottom: 0.8rem;
  padding: 0 1rem;
}

.footer-text {
  font-size: clamp(0.74rem, 1.8vw, 0.80rem);
  color: #4a5a99;
  line-height: 1.82;
  max-width: 500px;
  margin: 0 auto 1.5rem;
  padding: 0 0.5rem;
}

.footer-divider {
  width: 48px; height: 1px;
  background: rgba(59,109,232,0.28);
  margin: 1.5rem auto;
}

/* ── Registration badge — modern glass style ── */
.footer-reg-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.8rem;
  padding: 0 1rem;
}

.footer-reg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: clamp(0.64rem, 1.5vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue-deep);
  text-align: center;
  word-break: break-word;
  line-height: 1.6;

  /* Transparent glass card */
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(59, 109, 232, 0.22);
  border-top-color: rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  padding: 10px 24px 10px 18px;

  /* Soft glow */
  box-shadow:
    0 2px 16px rgba(59, 109, 232, 0.10),
    0 1px 3px rgba(59, 109, 232, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
}



/* Subtle shimmer sweep on hover */
.footer-reg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.30) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position 0.55s ease;
  pointer-events: none;
}

.footer-reg:hover::after {
  background-position: -200% 0;
}

/* Hero context: override hero-title-sub muted color for full visibility */
.hero .footer-reg-wrap .footer-reg {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(2);
  -webkit-backdrop-filter: blur(20px) saturate(2);
  border: 1.5px solid rgba(59, 109, 232, 0.35) !important;
  border-top-color: rgba(255, 255, 255, 1) !important;
  color: #1A3A6B !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(0.68rem, 1.5vw, 0.78rem) !important;
  letter-spacing: 0.06em !important;
  font-family: var(--font-sans) !important;
  text-shadow: none !important;
  box-shadow:
    0 4px 28px rgba(26, 58, 107, 0.18),
    0 1px 4px rgba(59, 109, 232, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.hero .footer-reg-wrap .footer-reg::before {
  background: linear-gradient(180deg, var(--blue-accent) 0%, var(--gold) 100%) !important;
  opacity: 1 !important;
}

.footer-copyright {
  margin-top: 1.2rem;
  font-size: clamp(0.64rem, 1.5vw, 0.70rem);
  color: #5a6eaa;
  letter-spacing: 0.04em;
  text-align: center;
  border-top: 1px solid rgba(59,109,232,0.13);
  padding-top: 1.2rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}
#footer-year { font-variant-numeric: tabular-nums; }



/* ══════════════════════════════════════════════════════════
   14. FOOTER CONTACT (Desktop — Single Row)
   ══════════════════════════════════════════════════════════ */
.footer-contact {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  border: 1.5px solid rgba(59,109,232,0.26);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(255,255,255,0.92);
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  box-shadow:
    0 4px 24px rgba(26,58,107,0.11),
    0 1px 4px rgba(59,109,232,0.07),
    inset 0 1px 0 rgba(255,255,255,0.98);
}

.fc-row {
  display: flex;
  flex-direction: column;      /* label stacked above value */
  justify-content: center;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1.1rem 0.85rem 1.1rem;
  border-right: 1px solid rgba(59,109,232,0.14);
  transition: background var(--transition-fast);
  position: relative;
  gap: 0.18rem;
}

.fc-row:last-child { border-right: none; }
.fc-row:hover { background: rgba(220,233,255,0.45); }

/* Gold accent line on hover */
.fc-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--blue-accent), var(--gold-light));
  opacity: 0;
  transition: opacity 0.25s;
  border-radius: 0 0 2px 2px;
}
.fc-row:hover::before { opacity: 1; }

.fc-label {
  color: var(--blue-mid);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.63rem;
  white-space: nowrap;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.80;
}
.fc-label::after { content: ''; }   /* no colon — value is below */

.fc-value {
  color: var(--blue-deep);
  font-size: 0.80rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════
   Responsive: Tablet (769px – 1024px) - 2×2 Grid
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
  .footer-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 720px;
  }
  .fc-row {
    border-right: none;
    border-bottom: 1px solid rgba(59,109,232,0.13);
    padding: 0.90rem 1.2rem;
    align-items: center;
    text-align: center;
  }
  .fc-row:nth-child(odd)          { border-right: 1px solid rgba(59,109,232,0.13); }
  .fc-row:nth-last-child(-n+2)    { border-bottom: none; }
  .fc-row:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: none;
  }
  .fc-row::before { display: none; }
  .fc-label { font-size: 0.62rem; }
  .fc-value  { font-size: 0.79rem; white-space: normal; word-break: break-word; overflow: visible; }
}

/* ══════════════════════════════════════════════════════════
   Responsive: Mobile (≤ 768px) - Two-Column Table Layout
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-contact {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    border: 1.5px solid rgba(59,109,232,0.22);
    border-radius: var(--r-md);
    overflow: hidden;
    background: rgba(255,255,255,0.94);
    box-shadow:
      0 4px 20px rgba(26,58,107,0.10),
      inset 0 1px 0 rgba(255,255,255,0.98);
  }
  .fc-row {
    display: grid;
    grid-template-columns: 148px 1fr;
    align-items: stretch;
    border-right: none;
    border-bottom: 1px solid rgba(59,109,232,0.11);
    min-height: unset;
    padding: 0;
    gap: 0;
    text-align: left;
    background: transparent;
  }
  .fc-row:last-child { border-bottom: none; }
  .fc-row::before { display: none; }

  .fc-label {
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-mid);
    white-space: nowrap;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 0.70rem 0.7rem 0.70rem 1.1rem;
    border-right: 1px solid rgba(59,109,232,0.18);
    line-height: 1.4;
    background: rgba(220,233,255,0.50);
  }
  .fc-label::after { content: ''; margin: 0; }

  .fc-value {
    font-size: 0.80rem;
    font-weight: 500;
    color: var(--blue-deep);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 0.70rem 0.9rem;
    line-height: 1.4;
    background: rgba(255,255,255,0.94);
  }
}

/* ══════════════════════════════════════════════════════════
   15. ANIMATIONS & UTILITIES
   ══════════════════════════════════════════════════════════ */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal utility */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ══════════════════════════════════════════════════════════
   16. HAMBURGER / MOBILE NAV TOGGLE
   ══════════════════════════════════════════════════════════ */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: rgba(238,244,255,0.90);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 7px;
  flex-shrink: 0;
  z-index: 1100;
  transition:
    background   var(--transition),
    border-color var(--transition),
    box-shadow   var(--transition);
}
.nav-toggle:hover {
  background: rgba(220,233,255,0.98);
  border-color: var(--border-strong);
  box-shadow: 0 2px 10px rgba(59,109,232,0.10);
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--blue-deep);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform  0.36s var(--ease-out),
    opacity    0.26s var(--ease),
    width      0.26s var(--ease);
}
.nav-toggle span:nth-child(1) { width: 22px; }
.nav-toggle span:nth-child(2) { width: 15px; align-self: flex-start; }
.nav-toggle span:nth-child(3) { width: 22px; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px)  rotate(45deg);  width: 22px; }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════════════════════════
   17. RESPONSIVE — TABLET  (≤ 960px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .about-section,
  .obj-section,
  .act-section,
  #office-bearers { padding: var(--section-pad-md); }

  /* Nav */
  #main-nav         { padding: 0 1.8rem; }
  .nav-brand .logo  { width: 44px; height: 44px; }
  .nav-links a      { font-size: 0.72rem; padding: 0.40rem 0.75rem; }
  .brand-line1      { font-size: 0.80rem; }
  .brand-line2      { font-size: 0.65rem; }
  .hero-meta-item   { padding: 1.2rem 1.6rem; }
  .hero-meta-sep    { height: 40px; }
  .hero-stat        { padding: 1.2rem 1.4rem; }
  .hero-sep         { height: 38px; }
  .stats-strip-item { min-width: 140px; }

  /* About */
  .about-inner { grid-template-columns: 1fr; gap: 2.8rem; }
  .amc-creds { grid-template-columns: 1fr; gap: 0.7rem; }

  /* Obj */
  .obj-grid { grid-template-columns: repeat(2, 1fr); }

  /* Activities */
  .act-bento-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .hero-meta { max-width: 480px; }
  .hero-meta-item { padding: 1.2rem 1.6rem; }
  .hero-meta-sep { height: 40px; }
}


/* ══════════════════════════════════════════════════════════
   18. RESPONSIVE — MOBILE  (≤ 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --nav-h: 60px; }

  #main-nav { padding: 0 1.2rem; height: 60px; }
  #main-nav.scrolled { height: 60px; padding: 0 1.2rem; }
  .nav-brand .logo { width: 42px; height: 42px; }
  .nav-brand .brand-full  { display: flex; flex-direction: column; justify-content: center; }
  .nav-brand .brand-short { display: none; }
  .brand-line1 { font-size: 0.64rem; letter-spacing: 0.06em; }
  .brand-line2 { font-size: 0.54rem; letter-spacing: 0.03em; }
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 60px;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(238,244,255,0.99);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(26,58,107,0.12);
    padding: 0.4rem 0 0.8rem;
    z-index: 999;
  }
  .nav-links.open {
    display: flex;
    animation: fadeDown 0.25s var(--ease-out) both;
  }

  .nav-links li { width: 100%; border-bottom: 1px solid rgba(59,109,232,0.07); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links li a {
    display: flex;
    align-items: center;
    padding: 0.82rem 1.6rem;
    font-size: 0.74rem;
    letter-spacing: 0.10em;
    border-radius: 0;
    color: var(--text-body) !important;
    background: none   !important;
    border: none       !important;
    box-shadow: none   !important;
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  .nav-links a::after { display: none !important; }
  .nav-links a:hover { background: rgba(59,109,232,0.06) !important; color: var(--blue-deep) !important; }
  .nav-links a.nav-active {
    background: rgba(59,109,232,0.08) !important;
    color: var(--blue-deep) !important;
    border-left: 3px solid var(--blue-accent) !important;
    padding-left: calc(1.6rem - 3px) !important;
  }
  .nav-link-cta {
    background: none   !important;
    color: var(--blue-deep) !important;
    border: none       !important;
    box-shadow: none   !important;
    font-weight: 600   !important;
  }
  .nav-link-cta:hover { background: rgba(59,109,232,0.06) !important; transform: none !important; }

  #section-dots, #section-pill, .hero-scroll-hint { display: none; }

  /* Hero */
  .hero { padding: 6rem 1.2rem 3.5rem; min-height: calc(100vh - var(--nav-h)); }
  .hero-logo-bg img { width: 88%; }
  .hero-glow { width: 400px; height: 400px; }
  .hero-title { font-size: clamp(2rem, 7vw, 3.4rem); }
  .hero-title em { display: none; }
  .hero-meta {
    width: 100%;
    flex-wrap: wrap;
    border-radius: var(--r-md);
    gap: 0;
    max-width: 100%;
  }
  .hero-meta-item {
    flex: 1 1 45%;
    min-width: 0;
    padding: 1rem 0.9rem;
    border-bottom: 1px solid var(--border);
  }
  .hero-meta-item:last-child { border-bottom: none; }
  .hero-meta-sep { display: none; }

  /* About */
  .about-section,
  .obj-section,
  .act-section,
  #office-bearers { padding: var(--section-pad-sm); }
  .about-inner { grid-template-columns: 1fr; gap: 2rem; }
  .about-left { padding-left: 1rem; }
  .amc-creds { grid-template-columns: 1fr 1fr; gap: 0.8rem; }

  /* Obj */
  .obj-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Activities */
  .act-bento-grid { grid-template-columns: 1fr; }

  /* ── Footer ── */
  footer {
    padding: 3rem 1.2rem 2.5rem;
    text-align: center;
  }
  .footer-logo-wrap  { justify-content: center; }
  .footer-brand      { font-size: 0.83rem; letter-spacing: 0.12em; }
  .footer-text       { text-align: center; font-size: 0.77rem; max-width: 100%; margin-bottom: 1.2rem; }
  .footer-divider    { margin: 1.2rem auto; }
  .footer-reg        { font-size: 0.62rem; padding: 4px 12px; }
  .footer-copyright  { font-size: 0.68rem; max-width: 100%; }
  footer::after      { font-size: 22vw; }
}


/* ══════════════════════════════════════════════════════════
   19. RESPONSIVE — SMALL MOBILE  (≤ 600px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .nav-brand .logo { width: 40px; height: 40px; }
  .brand-line1 { font-size: 0.60rem; letter-spacing: 0.04em; }
  .brand-line2 { font-size: 0.50rem; }
  .nav-links li a  { font-size: 0.72rem; padding: 0.78rem 1.4rem; }

  .hero { padding: 5.5rem 1rem 3rem; }
  .hero-title { font-size: clamp(1.85rem, 8vw, 2.8rem); }
  .hero-glow { width: 280px; height: 280px; }

  .about-section,
  .obj-section,
  .act-section,
  #office-bearers { padding: var(--section-pad-xs); }

  .about-heading { font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  .about-left { padding-left: 0.8rem; }
  .amc-creds { grid-template-columns: 1fr; }

  .obj-grid { grid-template-columns: 1fr; }
  .obj-heading { font-size: clamp(1.6rem, 7vw, 2.4rem); }

  .act-heading { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .act-bcard { padding: 1.3rem 1.3rem 1.5rem; }

  footer { padding: 2.5rem 1rem 2rem; }
  footer::after { font-size: 28vw; }
  .footer-brand { font-size: 0.78rem; letter-spacing: 0.10em; }
  .footer-text  { font-size: 0.74rem; }
  .footer-copyright { font-size: 0.64rem; }
  .footer-reg { font-size: 0.62rem; padding: 5px 12px; }
  .footer-reg-wrap { padding: 0 0.5rem; }
  .footer-contact { max-width: 320px; }
  .fc-row { grid-template-columns: 136px 1fr; }
  .fc-label { font-size: 0.52rem; letter-spacing: 0.07em; padding: 0.65rem 0.6rem 0.65rem 1rem; }
  .fc-value { font-size: 0.76rem; padding: 0.65rem 0.8rem; }
}


/* ══════════════════════════════════════════════════════════
   20. RESPONSIVE — TINY  (≤ 400px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .nav-brand .logo { height: 38px; width: 38px; }
  .brand-line1     { font-size: 0.56rem; }
  .brand-line2     { display: none; }
  .nav-toggle      { width: 36px; height: 36px; }

  .hero { padding: 5rem 0.8rem 2.8rem; }
  .hero-title { font-size: clamp(1.65rem, 9vw, 2.4rem); }

  .about-section,
  .obj-section,
  .act-section { padding: 3rem 0.8rem; }

  .obj-grid { grid-template-columns: 1fr; }
  .act-bento-grid { grid-template-columns: 1fr; }
}