/* ============================================================
   SANKAT MOCHAN FOUNDATION ONLINE — style.css
   Sankat Mochan Foundation Website | Ganga conservation design system
   ============================================================ */

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Brand Colors */
  --color-primary:    #00A6A6;
  --color-primary-dark: #008080;
  --color-primary-light: #e0f7f7;
  --color-dark:       #0B1F33;
  --color-secondary:  #133B5C;
  --color-accent:     #F4A261;
  --color-accent-dark: #e08040;
  --color-bg-light:   #F8FBFC;
  --color-text:       #1E293B;
  --color-text-muted: #64748B;
  --color-border:     #e2eaf2;
  --color-white:      #ffffff;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-head:    'Plus Jakarta Sans', sans-serif;
  --font-body:    'Hanken Grotesk', sans-serif;
  --font-label:   'Hanken Grotesk', sans-serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.12);
  --shadow-teal: 0 8px 30px rgba(0,166,166,0.25);
  --shadow-amber: 0 8px 30px rgba(244,162,97,0.25);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-med:  0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Navbar height */
  --nav-h: 72px;
  --site-container: 1272px;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
}

html.admin-bar,
body.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

img, svg { display: block; max-width: 100%; }

/* SVG icon system */
.smf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  vertical-align: middle;
  line-height: 0;
}
.smf-icon-svg {
  display: block;
  flex-shrink: 0;
}
.smf-icon--teal { color: var(--color-primary); }
.smf-icon--amber { color: var(--color-accent); }
.smf-icon--white { color: #fff; }
.smf-icon--muted { color: var(--color-text-muted); }
.smf-icon--saffron { color: #E65100; }
.smf-icon--teal .smf-icon-svg,
.smf-icon--amber .smf-icon-svg,
.smf-icon--white .smf-icon-svg,
.smf-icon--muted .smf-icon-svg {
  color: inherit;
}

.pillar-icon,
.program-initiative-icon,
.vol-opt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 1;
  line-height: 0;
}
.pillar-icon .smf-icon-svg,
.program-initiative-icon .smf-icon-svg {
  width: 1.35rem;
  height: 1.35rem;
}
.program-initiative-icon .smf-icon-svg {
  width: 1.2rem;
  height: 1.2rem;
}
.vol-opt-icon .smf-icon-svg {
  width: 2rem;
  height: 2rem;
}
.testi-quote {
  font-size: 0;
  line-height: 0;
}
.testi-quote .smf-icon-svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-primary);
  opacity: 0.35;
}
.donate-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  justify-content: center;
}
.donate-note .smf-icon-svg {
  width: 1rem;
  height: 1rem;
}
.contact-icon .smf-icon-svg,
.news-icon-header .smf-icon-svg {
  width: 22px;
  height: 22px;
}
.news-icon-header {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.news-icon-teal { background: var(--color-primary-light); color: var(--color-primary); }
.news-icon-amber { background: var(--color-accent-light); color: #D66100; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.work-icon-wrap .smf-icon-svg {
  width: 28px !important;
  height: 28px !important;
}
.stat-icon .smf-icon-svg {
  width: 32px !important;
  height: 32px !important;
  color: inherit;
}
.work-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: white;
}
.work-icon-wrap.teal-bg { background: linear-gradient(135deg, var(--color-primary), #40d8d8); }
.work-icon-wrap.amber-bg { background: linear-gradient(135deg, var(--color-accent), #ffc080); }
.mv-card-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--color-primary);
}
.mv-card-icon .smf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.mv-card-icon .smf-icon-svg {
  width: 32px !important;
  height: 32px !important;
  color: inherit;
}
.mv-card.mv-vision .mv-card-icon { color: var(--color-accent); }
.stat-icon {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  color: var(--color-primary);
}
.stat-card:hover .stat-icon { color: var(--color-accent); }
.women-card-top .smf-icon-svg {
  width: 36px;
  height: 36px;
  color: white;
}
.rec-tag-card .smf-icon-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.rec-quote-icon {
  display: none;
}
.play-btn-circle .smf-icon-svg {
  width: 22px;
  height: 22px;
  color: white;
  margin-left: 2px;
}
.toast-icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Real images from official site */
.nav-logo-img {
  height: 54px;
  width: 54px;
  object-fit: cover;
  border-radius: 50%;
}
.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 1s ease-in-out;
}
.hero-slide.active { opacity: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Hero video: full-resolution, no filters/scaling so it stays crisp */
.hero-video-wrap { background: #0b1f33; }
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Only a light bottom fade for text legibility — no see-through haze over the picture */
.hero-slider-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,31,51,0.55) 0%, rgba(11,31,51,0) 22%, rgba(11,31,51,0) 55%, rgba(11,31,51,0.55) 100%);
  z-index: 1;
}
.hero-sound-toggle {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  background: rgba(11,31,51,0.7);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.hero-sound-toggle:hover { background: rgba(11,31,51,0.9); }
@media (max-width: 680px) {
  .hero-sound-toggle .hero-sound-label { display: none; }
}
.hero .hero-container,
.hero .hero-scroll-hint { position: relative; z-index: 2; }
.real-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-img-card .real-photo,
.rec-img-card .real-photo,
.founder-portrait-box .real-photo {
  border-radius: var(--radius-lg);
}
.img-placeholder.has-photo {
  background: var(--color-secondary);
  padding: 0;
}
.img-placeholder.has-photo svg { display: none; }
.gallery-img.has-photo {
  background: none !important;
}
.gallery-img.has-photo .gallery-svg-scene { display: none; }
.gallery-img.has-photo .real-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.gallery-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.gallery-filter-btn {
  padding: 0.55rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: white;
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
  transition: var(--transition-fast);
}
.gallery-filter-btn:hover,
.gallery-filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}
.news-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  margin: -2.2rem -2.2rem 1.25rem -2.2rem;
  width: calc(100% + 4.4rem);
}
.news-card-page.has-image { padding-top: 0; overflow: hidden; }
.board-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: var(--transition-med);
}
.board-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.board-card h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.35rem;
}
.board-card .board-role {
  font-size: 0.8rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.board-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) {
  .board-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .board-grid { grid-template-columns: 1fr; }
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font-label); }
input, select, textarea { font-family: var(--font-body); }

/* Label typography — nav, buttons, badges, filters, form UI */
.nav-links a,
.btn-nav-secondary,
.btn-nav-primary,
.btn-primary-hero,
.btn-secondary-hero,
.filter-btn,
.sg-decade-tab,
.premium-cat-badge,
.news-category-badge,
.badge,
.badge-label,
.trust-label,
.form-input,
.form-select,
.form-textarea,
.form-submit,
.footer-links a,
.footer-col a {
  font-family: var(--font-label);
}

/* ============================================================
   3. LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--site-container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-pad {
  padding: var(--space-2xl) 0;
}

.bg-light { background: var(--color-bg-light); }
.bg-dark-section { background: var(--color-dark); }

.section-header.center {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3.5rem;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
}
.section-eyebrow.light {
  color: var(--color-primary);
  background: rgba(0,166,166,0.15);
}

.section-heading {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.18;
  margin-bottom: 1rem;
}
.section-heading.light { color: var(--color-white); }

.section-sub {
  font-size: 1.08rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.section-sub.light { color: rgba(255,255,255,0.7); }

.text-teal  { color: var(--color-primary); }
.text-amber { color: var(--color-accent); }

.body-text {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: white;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  transition: var(--transition-med);
  box-shadow: var(--shadow-teal);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,166,166,0.35);
  color: white;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: #ffffff;
  color: var(--color-dark);
  border: 1.5px solid rgba(0, 166, 166, 0.35);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  transition: var(--transition-med);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  text-decoration: none;
}
.btn-secondary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 166, 166, 0.18);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: var(--radius-full);
  transition: var(--transition-med);
  text-decoration: none;
}
.btn-outline:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
}

/* ============================================================
   5. NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  transition: background var(--transition-med), box-shadow var(--transition-med);
}

.navbar.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-sm);
}
.navbar.scrolled .nav-links a { color: var(--color-text); }
.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links .current-menu-item > a,
.navbar.scrolled .nav-links .current-menu-ancestor > a,
.navbar.scrolled .nav-links a.active { color: var(--color-primary); }
.navbar.scrolled .logo-main { color: var(--color-dark); }

.nav-container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 2vw, 2rem);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.4rem, 0.8vw, 0.9rem);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 0.55vw, 0.6rem);
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo-img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; }
.logo-main {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(0.82rem, 0.93vw, 0.95rem);
  color: white;
  line-height: 1.15;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.logo-sub {
  font-family: var(--font-label);
  font-size: clamp(0.65rem, 0.7vw, 0.75rem);
  color: var(--color-primary);
  letter-spacing: 0.03em;
  font-weight: 600;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.05rem, 0.2vw, 0.22rem);
  margin: 0 auto;
  flex-shrink: 1;
  min-width: 0;
  padding: 0;
  list-style: none;
}
.nav-links > li {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
.nav-links a {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: clamp(0.75rem, 0.82vw, 0.84rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: rgba(255,255,255,0.9);
  padding: 0.32rem clamp(0.32rem, 0.48vw, 0.58rem);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-links a:hover {
  color: white;
  background: rgba(255,255,255,0.12);
}
/* Current page's menu item: teal pill (moves to whichever page is open) */
.nav-links > .current-menu-item > a,
.nav-links > .current-menu-ancestor > a,
.nav-links > li > a.active,
.navbar.scrolled .nav-links > .current-menu-item > a,
.navbar.scrolled .nav-links > .current-menu-ancestor > a,
.navbar.scrolled .nav-links > li > a.active {
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  box-shadow: inset 0 0 0 1px rgba(0, 166, 166, 0.45);
  padding-left: clamp(0.55rem, 0.7vw, 0.8rem);
  padding-right: clamp(0.55rem, 0.7vw, 0.8rem);
  font-weight: 800;
}
.navbar.scrolled .nav-links a:hover {
  background: rgba(0, 166, 166, 0.08);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.4vw, 0.45rem);
  flex-shrink: 0;
}

.btn-nav-secondary {
  font-size: clamp(0.74rem, 0.8vw, 0.84rem);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  padding: 0.34rem clamp(0.55rem, 0.75vw, 0.9rem);
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255,255,255,0.35);
  transition: var(--transition-fast);
  white-space: nowrap;
}
.btn-nav-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.65);
}
.navbar.scrolled .btn-nav-secondary {
  color: var(--color-text);
  border-color: var(--color-border);
}
.navbar.scrolled .btn-nav-secondary:hover {
  background: var(--color-bg-light);
}

.btn-nav-primary {
  font-size: clamp(0.74rem, 0.8vw, 0.84rem);
  font-weight: 700;
  color: white;
  padding: 0.34rem clamp(0.65rem, 0.85vw, 1.05rem);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), #00c5c5);
  box-shadow: var(--shadow-teal);
  transition: var(--transition-fast);
  white-space: nowrap;
}
.btn-nav-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,166,166,0.4);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: 6px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  border-radius: 2px;
  transition: var(--transition-med);
}
.navbar.scrolled .hamburger span { background: var(--color-dark); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   6. HERO SECTION
   ============================================================ */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(145deg, var(--color-dark) 0%, var(--color-secondary) 55%, #1a5a8a 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
  padding-bottom: 1.5rem;
}

/* Animated background shapes */
.hero-bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: floatShape 8s ease-in-out infinite;
}
.shape-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,166,166,0.18) 0%, transparent 70%);
  top: -100px; left: -100px;
  animation-delay: 0s;
}
.shape-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(244,162,97,0.12) 0%, transparent 70%);
  bottom: -50px; right: 100px;
  animation-delay: 3s;
}
.shape-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,166,166,0.1) 0%, transparent 70%);
  top: 40%; right: -50px;
  animation-delay: 6s;
}

.floating-dots {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

@keyframes floatShape {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.05); }
}

.hero-container {
  max-width: var(--site-container);
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-content {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 1.25rem 2rem 1.6rem;
  background: none;
  border-radius: var(--radius-2xl);
}
.hero-content::before {
  content: "";
  position: absolute;
  inset: -1rem -1.5rem -1rem -1.5rem;
  z-index: -1;
  background: transparent;
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #dffefe;
  background: rgba(0,166,166,0.34);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.28;
  margin-bottom: 0.9rem;
  text-align: center;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.95);
}

.highlight-text {
  color: #38bdf8 !important;
  background: none !important;
  -webkit-text-fill-color: #38bdf8 !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.75), 0 2px 8px rgba(0, 0, 0, 0.95);
}
.highlight-accent {
  color: #facc15 !important;
  background: none !important;
  -webkit-text-fill-color: #facc15 !important;
  text-shadow: 0 0 16px rgba(250, 204, 21, 0.75), 0 2px 8px rgba(0, 0, 0, 0.95);
}

.hero-subtext {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  margin-bottom: 1.8rem;
  max-width: 520px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.btn-primary-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.2rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, #00c5c5 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(0,166,166,0.45);
  transition: var(--transition-med);
}
.btn-primary-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,166,166,0.6);
}

.btn-secondary-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.2rem;
  background: rgba(11, 31, 51, 0.65);
  color: white;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  transition: var(--transition-med);
}
.btn-secondary-hero:hover {
  background: rgba(11, 31, 51, 0.85);
  border-color: rgba(255,255,255,0.7);
  transform: translateY(-2px);
}
.btn-secondary-hero svg { transition: transform var(--transition-fast); }
.btn-secondary-hero:hover svg { transform: translateX(3px); }

.hero-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: white;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.hero-stat span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.04em;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hero-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.15);
}

/* Hero Illustration */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-illustration {
  position: relative;
  width: 420px;
  height: 380px;
}

.illus-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.illus-card-main {
  position: absolute;
  top: 30px;
  left: 20px;
  right: 0;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
}

.illus-river {
  height: 110px;
  background: linear-gradient(180deg, #0b3a5a 0%, #00A6A6 60%, #40d8d8 100%);
  position: relative;
  overflow: hidden;
}

.river-wave {
  position: absolute;
  bottom: 0;
  left: -100%;
  right: -100%;
  height: 40px;
  border-radius: 50%;
}
.wave-1 {
  background: rgba(255,255,255,0.08);
  animation: wave-flow 4s linear infinite;
}
.wave-2 {
  background: rgba(255,255,255,0.05);
  animation: wave-flow 6s linear infinite reverse;
  bottom: 10px;
}
.wave-3 {
  background: rgba(0,166,166,0.2);
  animation: wave-flow 5s linear infinite;
  bottom: 5px;
}
@keyframes wave-flow {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}

.illus-content {
  padding: 1.25rem;
}
.illus-icon-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.illus-icon-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}
.illus-icon-badge.teal { background: rgba(0,166,166,0.25); color: var(--color-primary); }
.illus-icon-badge.amber { background: rgba(244,162,97,0.25); color: var(--color-accent); }

.illus-progress-block { margin-top: 0.5rem; }
.progress-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
}
.progress-bar-wrap {
  height: 7px;
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #40d8d8);
  border-radius: var(--radius-full);
  animation: fill-progress 2s ease-out 1s both;
}
@keyframes fill-progress {
  from { width: 0 !important; }
}
.progress-pct {
  font-size: 0.7rem;
  color: var(--color-primary);
  font-weight: 600;
}

.illus-card-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1rem;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  font-size: 0.8rem;
}
.illus-card-float strong { display: block; font-size: 0.92rem; font-weight: 700; color: var(--color-dark); }
.illus-card-float small { color: var(--color-text-muted); }

.float-1 {
  bottom: 80px;
  left: 0;
  animation: float-card 4s ease-in-out infinite;
}
.float-2 {
  top: 20px;
  right: -10px;
  animation: float-card 4s ease-in-out infinite 2s;
}
@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.illus-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
}
.orb-1 {
  width: 120px; height: 120px;
  background: rgba(0,166,166,0.2);
  bottom: 20px; right: 20px;
}
.orb-2 {
  width: 80px; height: 80px;
  background: rgba(244,162,97,0.2);
  top: 0; left: 10px;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.4);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.scroll-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.4; }
}

/* ============================================================
   7. TRUST STRIP
   ============================================================ */
.trust-strip {
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 52%, var(--color-secondary) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.95rem 0;
  overflow: hidden;
}
.trust-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: nowrap;
}
.trust-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.trust-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  width: 100%;
}
.trust-item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}
.trust-item:hover { opacity: 1; color: var(--color-primary); }
.trust-divider {
  width: 1px;
  height: 18px;
  background: var(--color-border);
}
.trust-marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.trust-marquee-track {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  animation: trust-marquee 34s linear infinite;
}
.trust-marquee-group {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 3rem;
  padding-right: 3rem;
}
.trust-marquee-group span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.trust-marquee-group span::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  vertical-align: middle;
}
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   8. ABOUT SECTION
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

.about-pillars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.about-right .about-pillars {
  margin: 0;
  max-width: none;
  margin-left: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

/* Make the About (right-side) pillars more compact */
.about-right .pillar {
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  gap: 0.55rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.about-right .pillar:hover {
  transform: translateY(-2px);
  background: #fff;
}
.about-right .pillar-icon {
  font-size: 1.25rem;
}
.about-right .pillar strong {
  font-size: 0.9rem;
}
.about-right .pillar p {
  font-size: 0.8rem;
}

@media (max-width: 1024px) {
  .about-right .about-pillars {
    max-width: 100%;
  }
}

@media (max-width: 820px) {
  .about-right .about-pillars {
    grid-template-columns: 1fr;
  }
}
.pillar {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
  transition: var(--transition-fast);
}
.pillar:hover {
  background: var(--color-primary-light);
  transform: translateX(4px);
}
.pillar-icon { font-size: 1.5rem; line-height: 1; }
.pillar strong { display: block; font-weight: 700; color: var(--color-dark); font-size: 0.95rem; margin-bottom: 0.15rem; }
.pillar p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }

/* About visual */
.about-right {
  display: flex;
  flex-direction: column;
}

.about-visual-stack {
  position: relative;
  width: 100%;
  min-height: 520px;
  margin-bottom: 1rem;
}

.about-visual-stack > .about-img-card {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 0;
  height: 480px;
  min-height: 420px;
  z-index: 1;
}

.about-visual-stack .img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.about-visual-stack .real-photo {
  object-fit: cover;
  object-position: center 35%;
}

.about-img-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.main-card {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 0;
  height: 480px;
  min-height: 420px;
}

.img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.img-overlay-text {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  background: rgba(0,0,0,0.3);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
}

.about-badge-card {
  position: absolute;
  bottom: 20px;
  left: 0;
  z-index: 3;
  background: white;
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  animation: float-card 4s ease-in-out infinite;
}
.badge-number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.badge-label { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 500; }

.about-tag-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}
.tag-green {
  background: #d1fae5;
  color: #065f46;
  top: 10px;
  right: -10px;
  animation: float-card 4s ease-in-out infinite 1s;
}
.tag-amber {
  background: #fef3c7;
  color: #92400e;
}

/* ============================================================
   9. MISSION & VISION
   ============================================================ */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.mv-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 2rem;
  backdrop-filter: blur(10px);
  transition: var(--transition-med);
  z-index: 1;
}

.mv-mission::before, .mv-vision::before, .mv-values::before {
  display: none !important;
}

.mv-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.mv-card-icon {
  width: 60px; height: 60px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.mv-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.8rem;
}
.mv-card p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.mv-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mv-list li {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  padding-left: 1.2rem;
  position: relative;
}
.mv-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* SMF Clean & Premium Mission, Vision & Values Cards without wire lines */
.mission-vision .mv-card {
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(17,45,68,0.95) 0%, rgba(9,28,44,0.98) 100%);
  border: 1px solid rgba(55,209,205,0.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(2,15,28,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform var(--transition-med), border-color var(--transition-med), box-shadow var(--transition-med), background var(--transition-med);
}
.mission-vision .mv-card > * {
  position: relative;
  z-index: 2;
}
.mission-vision .mv-card::before {
  display: none !important;
}
.mission-vision .mv-vision {
  background: linear-gradient(165deg, rgba(24,46,65,0.95) 0%, rgba(9,28,44,0.98) 100%);
  border-color: rgba(239,132,83,0.18);
}
.mission-vision .mv-card:hover {
  transform: translateY(-6px);
  border-color: rgba(55,209,205,0.5);
  background: linear-gradient(165deg, rgba(22,58,86,0.98) 0%, rgba(11,35,55,1) 100%);
  box-shadow: 0 24px 55px rgba(0,0,0,0.4), 0 0 30px rgba(55,209,205,0.12);
}
.mission-vision .mv-vision:hover {
  border-color: rgba(239,132,83,0.5);
  box-shadow: 0 24px 55px rgba(0,0,0,0.4), 0 0 30px rgba(239,132,83,0.12);
}

/* ============================================================
   10. WHAT WE DO
   ============================================================ */
.work-grid {
  display: flex;
  gap: 2rem;
  width: max-content;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  padding: 1rem 0;
}

.work-carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem 0 2rem;
}

.work-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  width: 365px;
  flex-shrink: 0;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-med), border-color var(--transition-med), transform var(--transition-med), box-shadow var(--transition-med);
  cursor: default;
}
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0,166,166,0) 0%, rgba(0,166,166,0.03) 100%);
  opacity: 0;
  transition: opacity var(--transition-med);
}

/* ============================================================
   9. MISSION & VISION
   ============================================================ */
.mv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

.mv-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 2rem;
  backdrop-filter: blur(10px);
  transition: var(--transition-med);
}
.mv-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.mv-card-icon {
  width: 60px; height: 60px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.mv-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.8rem;
}
.mv-card p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.mv-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mv-list li {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  padding-left: 1.2rem;
  position: relative;
}
.mv-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ============================================================
   10. WHAT WE DO
   ============================================================ */
.work-grid {
  display: flex;
  gap: 2rem;
  width: max-content;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  padding: 1rem 0;
}

.work-carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem 0 2rem;
}

.work-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  width: 365px;
  flex-shrink: 0;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  transition: background var(--transition-med), border-color var(--transition-med), transform var(--transition-med), box-shadow var(--transition-med);
  cursor: default;
}
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0,166,166,0) 0%, rgba(0,166,166,0.03) 100%);
  opacity: 0;
  transition: opacity var(--transition-med);
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.featured-card {
  background: linear-gradient(145deg, var(--color-dark) 0%, var(--color-secondary) 100%);
  border-color: transparent;
  box-shadow: var(--shadow-teal);
}
.featured-card h4, .featured-card p { color: white !important; }
.featured-card .card-link { color: var(--color-accent) !important; }
.featured-card .card-link:hover { color: white !important; }

/* Control Buttons styling */
.work-carousel-controls {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.work-control-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--color-border);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  cursor: pointer;
}
.work-control-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: scale(1.08);
  box-shadow: var(--shadow-teal);
}

.featured-badge {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  background: var(--color-accent);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.work-icon-wrap {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.teal-bg { background: linear-gradient(135deg, var(--color-primary), #40d8d8); }
.amber-bg { background: linear-gradient(135deg, var(--color-accent), #ffc080); }

.work-card h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.6rem;
}
.work-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 1.2rem;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  transition: var(--transition-fast);
}
.card-link:hover { gap: 0.6rem; }
.card-link svg { transition: transform var(--transition-fast); }
.card-link:hover svg { transform: translateX(3px); }

/* ============================================================
   11. GANGA CAMPAIGNS
   ============================================================ */
.campaigns-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.campaign-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}
.campaign-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: var(--transition-med);
}
.campaign-item:hover {
  border-color: var(--color-primary);
  transform: translateX(6px);
  background: var(--color-primary-light);
}
.campaign-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.4;
  line-height: 1;
  min-width: 2rem;
}
.campaign-info h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.35rem;
}
.campaign-info p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Campaign visual */
.campaign-visual {
  position: relative;
}

.campaign-map-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.map-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-dark);
}
.map-visual {
  padding: 1.25rem;
  background: var(--color-bg-light);
}
.map-stats-row {
  display: flex;
  padding: 1.1rem;
  gap: 1rem;
  border-top: 1px solid var(--color-border);
}
.map-stat {
  flex: 1;
  text-align: center;
}
.map-stat strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-primary);
}
.map-stat small { font-size: 0.75rem; color: var(--color-text-muted); }

.campaign-badge-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  border: 1px solid var(--color-border);
}
.campaign-badge-card .badge-icon { font-size: 1.5rem; }
.campaign-badge-card strong { display: block; font-weight: 700; font-size: 0.9rem; color: var(--color-dark); }
.campaign-badge-card small { font-size: 0.78rem; color: var(--color-text-muted); }

/* SVG pulse ring animation */
.pulse-ring {
  animation: svg-pulse 2.5s ease-in-out infinite;
}
.pulse-ring-2 {
  animation: svg-pulse 2.5s ease-in-out infinite 0.5s;
}
@keyframes svg-pulse {
  0%, 100% { transform-origin: 200px 70px; transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.4); opacity: 0.1; }
}

/* ============================================================
   12. WOMEN EMPOWERMENT
   ============================================================ */
.women-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.women-card {
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: var(--transition-med);
}
.women-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.women-card-top {
  height: 180px;
  position: relative;
  overflow: hidden;
  background: var(--color-secondary);
}
.women-card-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.women-card:hover .women-card-top img {
  transform: scale(1.06);
}
.women-card-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 31, 51, 0.55), transparent 55%);
  pointer-events: none;
}
.teal-gradient { background: linear-gradient(135deg, var(--color-primary), #40d8d8); }
.amber-gradient { background: linear-gradient(135deg, var(--color-accent), #ffc080); }

.women-card-body { padding: 1.15rem 1.25rem 1.25rem; }
.women-card-body h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.4rem;
}
.women-card-body p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.women-metric {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.05;
}
.women-metric span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

.women-testimonial {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 2.5rem 3rem;
  text-align: center;
}
.women-testimonial blockquote {
  font-size: 1.2rem;
  color: white;
  font-style: italic;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 1.1rem;
  quotes: none;
}
.women-testimonial cite {
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 600;
  font-style: normal;
}

/* ============================================================
   13. PROGRAMS — HACKEREARTH-STYLE SCROLL TABS
   ============================================================ */
#programs {
  background: #f8fafc;
}

.programs-he-wrap {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-top: 2.5rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Vertical rotated tabs (left) */
.programs-he-nav {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 58px;
  flex-shrink: 0;
  flex-grow: 0;
  position: sticky;
  top: 100px;
  z-index: 5;
}

.programs-he-nav .tab-btn {
  height: 128px;
  width: 52px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.programs-he-nav .tab-btn span {
  transform: rotate(-90deg);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #334155;
  display: inline-block;
  transition: color 0.2s ease;
}

.programs-he-nav .tab-btn:hover:not(.active) {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.programs-he-nav .tab-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(0, 166, 166, 0.35);
}

.programs-he-nav .tab-btn.active span {
  color: #ffffff;
  font-weight: 800;
}

/* Stacked content panels (right) */
.programs-he-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.program-scroll-panel {
  scroll-margin-top: 120px;
  min-height: min(85vh, 560px);
  opacity: 1;
  transform: translateY(0);
}

.program-scroll-panel.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* Card: image left, copy right layout */
.program-he-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 2.5rem;
  align-items: center;
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem 2.25rem;
  border: 1px solid #eef2f6;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.program-he-visual {
  background: linear-gradient(145deg, #eef6ff 0%, #f0fdfa 100%);
  border-radius: 14px;
  padding: 1rem;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.program-he-visual img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.program-he-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.program-he-copy .program-panel-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.12em;
  margin-bottom: 0.65rem;
}

.program-he-copy .program-panel-heading {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.program-he-copy .program-panel-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  max-width: 520px;
}

.program-he-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.program-he-highlights li {
  font-size: 0.8rem;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
}

.program-he-highlights strong {
  color: var(--color-primary);
  font-weight: 800;
}

.program-he-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
  background: linear-gradient(135deg, #fde8d8, var(--color-accent));
  border: none;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(244, 162, 97, 0.35);
}

.program-he-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(244, 162, 97, 0.45);
  color: #0f172a;
}

.program-panel-content {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 3.5rem;
  padding: 3.5rem;
  width: 100%;
  align-items: center;
}

.program-panel-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.program-panel-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  display: block;
}

.program-panel-heading {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--color-dark);
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.program-panel-desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.program-initiatives-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  margin-bottom: 2.2rem;
}

.program-initiative-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.program-initiative-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  flex-shrink: 0;
  flex-grow: 1;
  font-size: 1.2rem;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.program-initiative-item:hover .program-initiative-icon {
  transform: scale(1.1);
  background: var(--color-primary);
  color: white;
}

.program-initiative-info h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-dark);
  margin-bottom: 0.25rem;
}

.program-initiative-info p {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.program-initiative-info .metric-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.35rem;
}

.program-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--color-primary);
  color: white !important;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-teal);
  text-decoration: none;
}

.program-panel-cta:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 166, 166, 0.4);
}

.program-panel-visual {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.program-panel-visual img,
.program-panel-visual svg {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1.25;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-slow);
}

.program-panel-content:hover .program-panel-visual img,
.program-panel-content:hover .program-panel-visual svg {
  transform: scale(1.02);
}

/* --- PROGRAMS RESPONSIVE --- */
@media (max-width: 1024px) {
  .program-he-card {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding: 1.75rem;
  }
  .program-he-visual {
    min-height: 240px;
    order: -1;
  }
  .program-he-visual img {
    min-height: 220px;
  }
}

@media (max-width: 768px) {
  .programs-he-wrap {
    flex-direction: column;
    gap: 1rem;
  }
  .programs-he-nav {
    flex-direction: row;
    width: 100%;
    position: sticky;
    top: 72px;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0.5rem 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    scrollbar-width: none;
  }
  .programs-he-nav::-webkit-scrollbar {
    display: none;
  }
  .programs-he-nav .tab-btn {
    height: auto;
    width: auto;
    min-width: auto;
    padding: 0.65rem 1.15rem;
    flex-shrink: 0;
  flex-grow: 1;
  }
  .programs-he-nav .tab-btn span {
    transform: none;
    font-size: 0.75rem;
  }
  /* All four categories visible on phones: 2 x 2 grid instead of a cut-off scrolling row */
  .programs-he-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }
  .programs-he-nav .tab-btn {
    width: 100%;
    min-width: 0;
    padding: 0.6rem 0.5rem;
  }
  .programs-he-stack {
    gap: 2rem;
  }
  .program-scroll-panel {
    scroll-margin-top: 150px;
    opacity: 1;
    transform: none;
  }
  .program-he-card {
    padding: 1.25rem;
  }
}

/* ============================================================
   14. IMPACT STATS
   ============================================================ */
.impact {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #082238 0%, #123d5f 55%, #0b2f4b 100%);
}
.impact-bg { position: absolute; inset: 0; pointer-events: none; }
.impact-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(38,188,185,0.18), transparent 35%),
    radial-gradient(circle at bottom right, rgba(239,132,83,0.16), transparent 35%);
}
.impact-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 90px;
  background: rgba(255,255,255,0.06);
  clip-path: ellipse(60% 55% at 50% 100%);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 920px;
  margin: 0 auto;
}

.stat-card {
  min-height: 180px;
  background: rgba(255,255,255,0.085);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 1.55rem 1.25rem 1.4rem;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0,0,0,0.16);
  transition: var(--transition-med);
}
.stat-card:hover {
  background: rgba(255,255,255,0.13);
  transform: translateY(-8px);
  border-color: rgba(38,188,185,0.45);
  box-shadow: 0 24px 56px rgba(0,0,0,0.22);
}

.stat-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #37d1cd;
  background: rgba(38,188,185,0.12);
  border: 1px solid rgba(38,188,185,0.35);
}
.stat-icon .smf-icon-svg {
  width: 26px;
  height: 26px;
}
.stat-icon svg {
  stroke: currentColor;
  transition: transform var(--transition-fast), stroke var(--transition-fast);
}
.stat-card:hover .stat-icon svg {
  transform: scale(1.1);
  stroke: var(--color-accent);
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.55rem);
  font-weight: 900;
  color: white;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 0.4rem;
}
.stat-plus, .stat-unit {
  font-size: 1.05rem;
  color: #37d1cd;
  margin-left: 0.12rem;
}
.stat-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: 0.45rem;
}
.stat-sub {
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.58);
}
.impact-cta-panel {
  max-width: 900px;
  margin: 3.4rem auto 0;
  padding: 2rem 1.9rem;
  text-align: center;
  border-radius: 16px;
  background: rgba(38,188,185,0.11);
  border: 1px solid rgba(38,188,185,0.25);
}
.impact-cta-panel h3 {
  margin: 0 0 1.45rem;
  color: white;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.6rem);
  line-height: 1.4;
  font-weight: 800;
}
.impact-cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.impact-cta-actions .btn-primary,
.impact-cta-actions .btn-outline {
  min-width: 180px;
  justify-content: center;
}
.impact-cta-actions .btn-outline {
  color: white;
  border-color: rgba(255,255,255,0.45);
  background: transparent;
}
.impact-cta-actions .btn-outline:hover {
  color: #0b2f4b;
  background: white;
  border-color: white;
}
@media (max-width: 575px) {
  .impact-cta-panel {
    padding: 1.65rem 1.2rem;
  }
  .impact-cta-actions .btn-primary,
  .impact-cta-actions .btn-outline {
    width: 100%;
  }
}

/* ============================================================
   15. GALLERY
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1.25rem;
}

.gallery-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-med);
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: transparent;
}
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }

.g-large { grid-column: 1; grid-row: 1 / 3; }
.g-tall  { grid-column: 3; grid-row: 1 / 3; }

.gallery-img {
  display: block;
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.g-large .gallery-img, .g-tall .gallery-img { height: 100%; min-height: 360px; }

.gallery-svg-scene {
  position: absolute;
  inset: 0;
}
.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  opacity: 0;
  transition: var(--transition-med);
}
.gallery-overlay span {
  font-size: 0.88rem;
  font-weight: 600;
  color: white;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* Marathon: its own homepage band (theme teal) */
.marathon-highlight {
  padding: 3rem 0;
  background: var(--color-primary-light);
}
.marathon-highlight-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  border-radius: var(--radius-xl, 20px);
  overflow: hidden;
  background: var(--color-dark);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,166,166,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.marathon-highlight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-teal), var(--shadow-lg); }
.marathon-highlight-media { display: block; min-height: 260px; }
.marathon-highlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marathon-highlight-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  padding: 2rem 2.25rem;
}
.marathon-highlight-badge {
  align-self: flex-start;
  background: rgba(0,166,166,0.2);
  border: 1px solid rgba(0,206,209,0.4);
  color: #64ffda;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
}
.marathon-highlight-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.25;
}
.marathon-highlight-text { color: rgba(255,255,255,0.85); line-height: 1.6; }
.marathon-highlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #00c5c5;
  font-weight: 800;
}
@media (max-width: 760px) {
  .marathon-highlight-card { grid-template-columns: 1fr; }
  .marathon-highlight-media { min-height: 200px; max-height: 240px; }
  .marathon-highlight-copy { padding: 1.5rem 1.25rem; }
}

/* History page: information boxes open their related page on click */
a.about-doc-link-box {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.about-doc-plan-item.about-doc-link-box { display: flex; }
a.about-doc-link-box:hover,
a.about-doc-link-box:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,166,166,0.18);
  border-color: rgba(0,166,166,0.5);
}
.about-doc-link-hint {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary, #00A6A6);
}
.about-doc-alert-card .btn-primary,
.about-doc-awards .btn-outline { margin-top: 1rem; display: inline-flex; }

/* Marathon page builder sections (Marathon Manager → Page Sections Builder) */
.mpb-bg-white { background: #fff; }
.mpb-bg-light { background: var(--color-primary-light); }
.mpb-bg-dark { background: var(--color-dark); color: #fff; }
.mpb-bg-dark .section-title, .mpb-bg-dark .mpb-body, .mpb-bg-dark .mpb-body p { color: #fff; }
.mpb-bg-dark .section-kicker { color: #64ffda; }
.mpb-align-center .mpb-head,
.mpb-align-center .mpb-text-wrap,
.mpb-align-center .mpb-cta { text-align: center; margin-left: auto; margin-right: auto; }
.mpb-head { margin-bottom: 1.75rem; }
.mpb-text-wrap, .mpb-cta { max-width: 860px; }
.mpb-body { color: var(--color-text-muted, #475569); line-height: 1.75; font-size: 1.02rem; }
.mpb-body p { margin: 0 0 1rem; }
.mpb-body--intro { max-width: 860px; margin-bottom: 1.5rem; }
.mpb-align-center .mpb-body--intro { margin-left: auto; margin-right: auto; text-align: center; }
.mpb-body--below { margin-top: 1.25rem; }
.mpb-btn { display: inline-flex; margin-top: 0.75rem; }
.mpb-figure { margin: 0; }
.mpb-figure img { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--radius-lg, 16px); display: block; }
.mpb-figure figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--color-text-muted, #64748b); text-align: center; }
.mpb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.mpb-split--img-right .mpb-split-media { order: 2; }
.mpb-split-media { position: relative; }
.mpb-split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg, 16px); display: block; box-shadow: var(--shadow-lg); }
.mpb-split-caption { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-text-muted, #64748b); }
.mpb-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mpb-gallery-item { padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-lg, 16px); overflow: hidden; aspect-ratio: 4 / 3; }
.mpb-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.mpb-gallery-item:hover img { transform: scale(1.05); }
.mpb-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg, 16px); overflow: hidden; background: #000; max-width: 960px; margin: 0 auto; }
.mpb-video iframe, .mpb-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 768px) {
  .mpb-split { grid-template-columns: minmax(0, 1fr); }
  .mpb-split--img-right .mpb-split-media { order: 0; }
  .mpb-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .mpb-gallery { grid-template-columns: minmax(0, 1fr); } }

/* Gallery pagination (9 photos per page) */
#galleryGrid { grid-template-rows: none; grid-auto-rows: 260px; }
#galleryGrid .gallery-item { aspect-ratio: auto; height: 100%; }
#galleryGrid .gallery-img { height: 100%; }
.gallery-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.25rem;
}
.gallery-pagination[hidden] { display: none; }
.gallery-page-btn {
  min-width: 42px;
  height: 42px;
  padding: 0 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 166, 166, 0.4);
  background: #fff;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.gallery-page-btn:hover:not(:disabled):not(.is-current) { background: var(--color-primary-light); }
.gallery-page-btn.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.gallery-page-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 768px) { #galleryGrid { grid-auto-rows: 220px; } }
@media (max-width: 480px) { #galleryGrid { grid-auto-rows: 240px; } }

/* Gallery tile caption: event name + place/date, always visible */
.gallery-item { position: relative; }
.gallery-tile-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 2.2rem 0.95rem 0.8rem;
  text-align: left;
  color: #fff;
  background: linear-gradient(180deg, rgba(11,31,51,0) 0%, rgba(11,31,51,0.78) 45%, rgba(11,31,51,0.94) 100%);
  pointer-events: none;
}
.gallery-tile-tag {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64ffda;
  background: rgba(0,206,209,0.2);
  border: 1px solid rgba(0,206,209,0.35);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
}
.gallery-tile-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}
.gallery-tile-meta {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 13, 23, 0.9);
}
.gallery-lightbox.is-open {
  display: flex;
}
.gallery-lightbox figure {
  width: min(1100px, 100%);
  margin: 0;
}
.gallery-lightbox img {
  display: block;
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  background: #071523;
}
.gallery-lightbox figcaption {
  color: white;
  text-align: center;
  font-weight: 800;
  margin-top: 1rem;
}
.gallery-lightbox-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.gallery-lightbox-close:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.gallery-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12010;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 13, 23, 0.92);
}
.gallery-video-lightbox.is-open {
  display: flex;
}
.gallery-video-lightbox-inner {
  width: min(960px, 100%);
}
.gallery-video-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
}
.gallery-video-frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.gallery-video-lightbox-title {
  margin: 1rem 0 0;
  text-align: center;
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
}

/* ============================================================
   16. VOLUNTEER CTA
   ============================================================ */
.vol-cta-inner {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.vol-cta-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.vol-cta-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.75rem;
}

.vol-cta-inner > p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  margin-bottom: 3rem;
}

.vol-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: left;
}

.vol-option {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  transition: var(--transition-med);
}
.vol-option:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.vol-option-featured {
  background: linear-gradient(145deg, var(--color-dark), var(--color-secondary));
  border-color: transparent;
}
.vol-option-featured h4, .vol-option-featured p { color: white !important; }
.vol-option-featured > p { color: rgba(255,255,255,0.7) !important; }

.vol-featured-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  background: var(--color-accent);
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vol-opt-icon { font-size: 2rem; margin-bottom: 1rem; }
.vol-option h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}
.vol-option p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ============================================================
   17. DONATE SECTION
   ============================================================ */
.donate {
  position: relative;
  background: white;
  overflow: hidden;
}
.donate-bg-decor {
  display: none;
}
.donate-shape-1 {
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,166,166,0.15) 0%, transparent 70%);
}
.donate-shape-2 {
  position: absolute;
  bottom: -80px; left: -50px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,162,97,0.1) 0%, transparent 70%);
}

.donate-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

.donate .section-eyebrow { background: rgba(0,166,166,0.15); }
.donate .section-heading { color: var(--color-dark); }
.donate .body-text { color: var(--color-text-muted); }

.donate-impact-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 1.8rem 0 2rem;
}
.donate-impact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: #f1f5f9;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.05);
  transition: var(--transition-fast);
}
.donate-impact-item:hover { background: #e2e8f0; }
.impact-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-primary);
  min-width: 80px;
}
.impact-desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.donate-trust {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.donate-card {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--shadow-sm);
}
.donate-card--payment {
  padding: clamp(1.4rem, 3vw, 2rem);
}
.donate-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
}

.donate-card .body-text,
.donate-card p,
.donate-card label {
  color: var(--color-text-muted);
}
.donate-card .donate-bank-note {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-dark);
  background: var(--color-primary-light);
  border: 1px solid rgba(0, 166, 166, 0.2);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}
.donate-card .donate-bank-note strong {
  color: var(--color-primary);
  font-weight: 700;
}

.donate-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.amount-btn {
  padding: 0.7rem 0.5rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-dark);
  transition: var(--transition-fast);
  text-align: center;
}
.amount-btn:hover, .amount-btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.amount-custom {
  grid-column: 1 / -1;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  color: var(--color-dark);
  outline: none;
  transition: var(--transition-fast);
}
.amount-custom:focus { border-color: var(--color-primary); }

.donate-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.form-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.92rem;
  color: var(--color-dark);
  outline: none;
  transition: border-color var(--transition-fast);
  background: white;
}
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,166,166,0.12); }
.form-select { appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--color-text-muted); }
.form-textarea { resize: vertical; min-height: 120px; }

.btn-donate-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.1rem;
  background: linear-gradient(135deg, var(--color-primary), #40d8d8);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition-med);
  box-shadow: var(--shadow-teal);
}
.btn-donate-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,166,166,0.4);
}

.donate-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* ============================================================
   18. TESTIMONIALS
   ============================================================ */
.testimonial-slider {
  overflow: hidden;
  margin-bottom: 1.5rem;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.testimonial-track {
  display: flex;
  gap: 1.5rem;
  transition: transform var(--transition-slow);
}
.testimonial-card {
  min-width: 100%;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 92% 8%, rgba(38,188,185,0.2), transparent 32%),
    linear-gradient(135deg, #0b2135 0%, #113b59 58%, #0a293f 100%);
  border: 1px solid rgba(103,218,214,0.24);
  border-radius: 24px;
  padding: 1.8rem 2.6rem 1.75rem;
  flex-shrink: 0;
  transition: var(--transition-med);
  box-shadow: 0 25px 70px rgba(5,25,42,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.52;
  background: url("data:image/svg+xml,%3Csvg width='980' height='340' viewBox='0 0 980 340' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2337d1cd' stroke-opacity='.2'%3E%3Cpath d='M-40 280C130 116 270 366 430 206S710 18 1030 96' stroke-width='2'/%3E%3Cpath d='M-20 322C150 160 294 396 458 242S742 60 1020 132'/%3E%3Cpath d='M620-40c-54 124-8 198 106 230s170 64 226 166' stroke-width='3' stroke-opacity='.09'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
  pointer-events: none;
}
.testimonial-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2.6rem;
  width: 110px;
  height: 3px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(90deg, var(--color-primary), #67dad6);
  box-shadow: 0 0 24px rgba(55,209,205,0.55);
}
.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(103,218,214,0.45);
  box-shadow: 0 32px 85px rgba(5,25,42,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}

.testi-card-kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  color: #70dbd7;
  font-size: 0.7rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.testi-card-kicker span {
  width: 28px;
  height: 1px;
  background: var(--color-accent);
}
.testi-quote {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(103,218,214,0.24);
  border-radius: 16px;
  background: rgba(38,188,185,0.1);
}
.testimonial-card .testi-quote .smf-icon-svg {
  width: 23px;
  height: 23px;
  color: #67dad6;
  opacity: 1;
}
.testimonial-card p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  font-style: normal;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 860px;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.testi-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--testi-color, #00a6a6), #0b1f33);
  border: 2px solid rgba(255,255,255,0.28);
  color: white;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
.testi-author-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.testi-author-copy strong {
  color: white;
  font-size: 0.94rem;
}
.testi-author-copy span {
  color: rgba(255,255,255,0.58);
  font-size: 0.8rem;
}

.testimonial-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.testi-prev, .testi-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: white;
  color: var(--color-dark);
  cursor: pointer;
  transition: var(--transition-fast);
}
.testi-prev:hover, .testi-next:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.testi-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.testi-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: var(--transition-fast);
}
.testi-dot.active {
  background: var(--color-primary);
  transform: scale(1.2);
}

.contact-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-map-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.contact-map {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}

.contact-map-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contact-icon {
  width: 44px; height: 44px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item strong { display: block; font-weight: 700; font-size: 0.92rem; color: var(--color-dark); margin-bottom: 0.3rem; }
.contact-item p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

.contact-social {
  display: flex;
  gap: 0.75rem;
}
.social-link { width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: var(--transition-fast);
}
.social-link:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}


.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: stretch;
}

.contact-map-wrap {
  width: 100%;
  min-height: 100%;
  display: flex;
}

.contact-map-card {
  width: 100%;
  min-height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  flex-grow: 1;
}

.contact-map {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contact-form-wrap {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  text-align: center;
}
.form-submit .smf-icon,
.form-submit .smf-icon-svg {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   20. FOOTER
   ============================================================ */
.footer {
  background-color: var(--color-dark);
  background-image:
    linear-gradient(90deg, rgba(6,25,42,0.88) 0%, rgba(6,25,42,0.8) 48%, rgba(6,25,42,0.74) 100%),
    url('../images/tulsi-ghat-clean-ai.png');
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
  color: rgba(255,255,255,0.6);
}

.footer-top { padding: 5rem 0 4rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}

.footer-brand-desc {
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 1.25rem 0;
  color: rgba(255,255,255,0.5);
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 0.5rem;
}
.footer-social .social-link {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5);
}
.footer-social .social-link:hover {
  background: rgba(0,166,166,0.2);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.footer-col h5 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1.25rem;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-col ul a {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.45);
  transition: color var(--transition-fast);
}
.footer-col ul a:hover { color: var(--color-primary); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.5rem 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p { font-size: 0.82rem; }
.footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  transition: color var(--transition-fast);
}
.footer-legal a:hover { color: var(--color-primary); }

/* ============================================================
   21. BACK TO TOP
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-teal);
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition-med);
  pointer-events: none;
  z-index: 999;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.back-to-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-3px);
}

/* ============================================================
   22. SCROLL REVEAL ANIMATIONS
   ============================================================ */
[data-reveal],
[data-reveal-right],
[data-reveal-scale],
[data-reveal-fade] {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal] {
  transform: translate3d(0, 40px, 0) scale(0.98);
}

[data-reveal-right] {
  transform: translate3d(42px, 0, 0) scale(0.98);
}

[data-reveal-scale] {
  transform: scale(0.92);
}

[data-reveal-fade] {
  transform: none;
}

[data-reveal].revealed,
[data-reveal-right].revealed,
[data-reveal-scale].revealed,
[data-reveal-fade].revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Staggered children get delay via JS */
[data-reveal].revealed,
[data-reveal-right].revealed,
[data-reveal-scale].revealed,
[data-reveal-fade].revealed {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-right],
  [data-reveal-scale],
  [data-reveal-fade] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   22A. DISTINGUISHED RECOGNITION SECTION
   ============================================================ */
.rec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.rec-badge-card {
  background: white;
  padding: 1.5rem 1.8rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-top: 1.75rem;
  position: relative;
}
.border-left-saffron {
  border-left: 4px solid #E65100;
}
.rec-quote-icon {
  position: absolute;
  top: -14px;
  left: 18px;
  opacity: 0.12;
}
.rec-badge-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}
.rec-visual-stack {
  position: relative;
  width: 100%;
  height: 380px;
}
.rec-img-card {
  position: absolute;
  top: 10px;
  left: 30px;
  width: 82%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.rec-pm-meeting {
  background: linear-gradient(135deg, #0B1F33 0%, #133B5C 100%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rec-tag-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 0.82rem;
  font-weight: 700;
}
.tag-saffron {
  color: #E65100;
  border-left: 3px solid #E65100;
  bottom: 30px;
  right: 0;
}
.tag-teal {
  color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
  top: 40px;
  left: 0;
}

/* ============================================================
   22B. WATER QUALITY DASHBOARD SECTION
   ============================================================ */
.dashboard-grid {
  display: block;
  max-width: 980px;
  margin: 2.5rem auto 0;
}
.dashboard-report-strip {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 2.25rem 0 2rem;
}
.report-pill {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 76px;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 40px rgba(0,0,0,0.12);
}
.report-pill span {
  color: rgba(255,255,255,0.58);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.report-pill strong {
  color: white;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.25;
}
.dash-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
  padding: 2rem 2.25rem;
  color: var(--color-text);
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.chart-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-dark);
  opacity: 1;
  font-family: var(--font-display);
}
.chart-title-dynamic + .chart-title {
  display: none;
}
.chart-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  opacity: 1;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.legend-dot.critical { background: #E63946; }
.legend-dot.moderate { background: #F4A261; }
.legend-dot.safe { background: #00A6A6; }

.chart-container-wrap {
  display: flex;
  gap: 1rem;
  height: 350px;
  position: relative;
  margin-top: 1.25rem;
  padding-top: 0.25rem;
}
.chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  font-size: 0.78rem;
  opacity: 0.68;
  font-family: var(--font-body);
  text-align: right;
  width: 42px;
  padding: 0 0 64px;
  flex: 0 0 42px;
  color: rgba(30,41,59,0.72);
}
.chart-y-axis::after {
  content: "mg/L";
  position: absolute;
  left: 0;
  bottom: 28px;
  width: 42px;
  text-align: right;
  color: rgba(30,41,59,0.5);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.chart-bars-wrap {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
  align-items: flex-end;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  height: 100%;
  position: relative;
  border-bottom: 1.5px solid rgba(15, 23, 42, 0.22);
  padding: 0 0.8rem 64px 1rem;
  /* Subtly draw background grid lines matching the Y-axis intervals */
  background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
  background-size: 100% 20%;
  background-position: 0 0;
}
.safe-limit-line {
  position: absolute;
  bottom: calc(45px + 5%);
  left: 0;
  right: 0;
  border-top: 2px dashed rgba(230, 57, 70, 0.55);
  z-index: 1;
  pointer-events: none;
}
.safe-limit-tag {
  position: absolute;
  bottom: calc(45px + 5% + 4px);
  left: 18px;
  background: rgba(230, 57, 70, 0.95);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.25);
  pointer-events: none;
  max-width: 190px;
  white-space: normal;
  line-height: 1.2;
}

.chart-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}
.bar-val {
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 2px;
  z-index: 2;
  font-family: var(--font-display);
}
.font-critical { color: #D7263D; }
.font-moderate { color: #D66100; }
.font-safe { color: #008f8f; }

.chart-bar {
  width: clamp(20px, 42%, 38px);
  max-width: 32px;
  border-radius: 6px 6px 0 0;
  height: 0;
  transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}
.bar-critical {
  background: linear-gradient(to top, #E65100, #E63946);
}
.bar-moderate {
  background: linear-gradient(to top, #F4A261, #ffc58d);
}
.bar-safe {
  background: linear-gradient(to top, #00A6A6, #73e3df);
}

.bar-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  opacity: 1;
  text-align: center;
  position: absolute;
  bottom: -43px;
  left: 50%;
  transform: translateX(-50%) rotate(-15deg);
  transform-origin: center center;
  white-space: nowrap;
}
.chart-note {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  opacity: 1;
  margin-top: 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding-top: 0.5rem;
}

/* Alert Sidebar */
.alert-sidebar {
  display: none;
  flex-direction: column;
  gap: 1.5rem;
}
.alert-block {
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.alert-dark {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}
.alert-light {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.alert-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}
.text-saffron { color: #F4A261; }
.alert-main-val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.alert-unit {
  font-size: 0.95rem;
  opacity: 0.6;
}
.alert-desc {
  font-size: 0.82rem;
  opacity: 0.6;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.alert-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
}
.critical-pill {
  background: rgba(230, 57, 70, 0.15);
  color: #ff8a8a;
}
.alert-status-dot.pulse {
  width: 6px;
  height: 6px;
  background: #E63946;
  border-radius: 50%;
  animation: alertPulse 1.8s infinite;
}
@keyframes alertPulse {
  0% { transform: scale(0.9); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(0.9); opacity: 1; }
}

.ghat-status-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ghat-status-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.6rem;
}
.ghat-status-list li:last-child {
  border: none;
  padding: 0;
}
.badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-green { background: #e0f7f7; color: var(--color-primary); }
.badge-red { background: #ffebeb; color: #E63946; }
.badge-amber { background: #fdf2e9; color: #F4A261; }

/* ============================================================
   22C. FOUNDER'S TRIBUTE SECTION
   ============================================================ */
.founder-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
}
.founder-quotes {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem 0;
}
.founder-quote-item {
  position: relative;
  padding-left: 2.5rem;
}
.founder-quote-item .quote-symbol {
  position: absolute;
  left: 0;
  top: -10px;
  font-size: 3rem;
  color: var(--color-accent);
  opacity: 0.4;
  font-family: var(--font-display);
  line-height: 1;
}
.founder-quote-item p {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}
.founder-bio {
  border-left: 3px solid var(--color-accent);
  padding-left: 1.25rem;
  margin-top: 2rem;
}
.founder-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.founder-title {
  font-size: 0.82rem;
  opacity: 0.6;
  font-weight: 500;
  line-height: 1.4;
}
.founder-portrait-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.founder-portrait-box {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-lg);
  background: #0B1F33;
  width: 330px;
  height: 400px;
  position: relative;
}
.founder-svg {
  width: 100%;
  height: 100%;
}

/* ===================== NEWS DATES STYLE ===================== */
.news-date {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 0.4rem;
}

.home-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  max-width: 1120px;
  margin: 2.75rem auto 0;
}

.home-news-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}

.home-news-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 166, 166, 0.35);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.1);
}

.home-news-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-primary-light), #fff7ed);
  overflow: hidden;
}

.home-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.home-news-card:hover .home-news-image img {
  transform: scale(1.04);
}

.home-news-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.home-news-content {
  padding: 1.35rem 1.45rem 1.55rem;
}

.home-news-content h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.45;
  margin-bottom: 0.65rem;
}

.home-news-content h4 a {
  color: var(--color-dark);
  text-decoration: none;
}

.home-news-content h4 a:hover {
  color: var(--color-primary);
}

.home-news-content p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.home-news-link {
  color: var(--color-primary);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}

.home-news-link:hover {
  color: var(--color-primary-dark);
}

/* ============================================================
   23. RESPONSIVE
   ============================================================ */

/* ============================================================
   MODALS (DONATE / VOLUNTEER)
   ============================================================ */
.smf-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  padding: 1.25rem;
}
.smf-modal.is-open {
  display: grid;
  place-items: center;
}
.smf-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 31, 51, 0.62);
  backdrop-filter: blur(6px);
}
.smf-modal__panel {
  position: relative;
  width: min(720px, calc(100vw - 2.5rem));
  max-height: min(84vh, 760px);
  overflow: auto;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(226, 234, 242, 0.9);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  padding: 1.25rem 1.25rem 1.5rem;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.smf-modal.is-open .smf-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.smf-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 1px solid #e2eaf2;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #334155;
  transition: var(--transition-fast);
}
.smf-modal__close:hover {
  background: #f8fafc;
  transform: translateY(-1px);
}
.smf-modal__header {
  padding-right: 52px;
  margin-bottom: 1rem;
}
.smf-modal__eyebrow {
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: #00A6A6;
}
.smf-modal__title {
  margin: 0.35rem 0 0.25rem;
  font-size: 1.6rem;
  color: var(--color-dark);
}
.smf-modal__sub {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.smf-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.smf-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.smf-modal__amounts {
  margin-bottom: 0.85rem;
}

@media (max-width: 640px) {
  .smf-modal { padding: 0.85rem; }
  .smf-modal__panel { width: calc(100vw - 1.7rem); padding: 1rem 1rem 1.25rem; }
  .smf-modal__grid { grid-template-columns: 1fr; }
  .donate-payment-wrap { grid-template-columns: 1fr; }
  .donate-qr-panel img { width: min(100%, 230px); }
  .donate-bank-detail-grid { grid-template-columns: 1fr; }
  .donate-left-qr {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .donate-left-qr__image {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* --- Tablet & Mobile (max 1140px) --- */
@media (max-width: 1140px) {
  .hero-container { padding-top: 2rem; }
  .hero-visual { display: none; }
  .hero-heading { font-size: clamp(1.15rem, 4.6vw, 1.5rem); }

  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-right { display: block; }

  .mv-grid { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: 1fr 1fr; }
  .home-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaigns-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .women-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .g-large, .g-tall { grid-column: auto; grid-row: auto; }
  .vol-options { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .donate-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .contact-grid { grid-template-columns: 1fr; }

  /* Mobile navigation drawer */
  .hamburger { display: flex; }
  .nav-actions { display: none; }
  .nav-links {
    display: flex;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1.5rem 2rem;
    gap: 0.25rem;
    box-shadow: var(--shadow-lg);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform var(--transition-med), opacity var(--transition-med);
    pointer-events: none;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    z-index: 998;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  .nav-links > li {
    display: block;
    width: 100%;
  }
  .nav-links a {
    color: var(--color-text) !important;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    width: 100%;
    justify-content: flex-start;
  }
  .nav-links .current-menu-item > a,
  .nav-links .current-menu-ancestor > a,
  .nav-links a.active {
    color: var(--color-primary) !important;
    background: rgba(0, 166, 166, 0.08) !important;
    box-shadow: none !important;
  }

  /* Responsive custom sections */
  .rec-grid { grid-template-columns: 1fr; gap: 3rem; }
  .rec-right { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .dashboard-report-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder-grid { grid-template-columns: 1fr; gap: 3rem; }
  .founder-portrait-wrap { margin-top: 2.5rem; }
}

/* --- Mobile (max 768px) --- */
@media (max-width: 768px) {
  :root { --space-2xl: 4rem; }

  .mv-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .women-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .program-cards { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .home-news-grid { grid-template-columns: 1fr; max-width: 520px; }
  .gallery-img { height: 200px; }
  .donate-amounts { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card { min-width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: 1rem; }
  .hero-stat-divider { display: none; }
  .trust-container { flex-direction: column; align-items: center; }
  .form-row { grid-template-columns: 1fr; }
  .women-testimonial { padding: 1.75rem; }
  .women-testimonial blockquote { font-size: 1rem; }

  /* Mobile custom section overrides */
  .chart-container-wrap { overflow-x: auto; padding-bottom: 10px; }
  .chart-y-axis { flex: 0 0 34px; width: 34px; font-size: 0.72rem; }
  .chart-y-axis::after { width: 34px; }
  .chart-bars-wrap { min-width: 560px; }
  .safe-limit-tag { max-width: 150px; font-size: 0.58rem; }
  .dashboard-report-strip { grid-template-columns: 1fr; }
  .alert-main-val { font-size: 1.5rem; }
}

/* --- Small mobile (max 480px) --- */
@media (max-width: 480px) {
  .women-grid { grid-template-columns: 1fr; }
  .hero-cta-group { flex-direction: column; align-items: center; }
  .hero-cta-group .btn-primary-hero,
  .hero-cta-group .btn-secondary-hero { width: 100%; max-width: 300px; justify-content: center; }
  .tab-nav { flex-wrap: wrap; }
  .donate-amounts { grid-template-columns: 1fr 1fr; }
  .testimonial-card { padding: 1.5rem; }
  .section-pad { padding: 3rem 0; }
}

/* ============================================================
   23. MULTI-PAGE SUBPAGE SPECIFIC STYLES
   ============================================================ */
.about-doc-hero {
  background:
    linear-gradient(105deg, rgba(11,31,51,0.94) 0%, rgba(11,31,51,0.82) 52%, rgba(19,59,92,0.68) 100%),
    url("../images/about-foundation.webp") center/cover no-repeat;
}
.about-doc-badge {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-weight: 700;
}
.about-doc-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.about-doc-hero .light-outline,
.about-doc-mission-card .btn-primary {
  width: max-content;
}
.about-doc-hero .light-outline {
  color: white;
  border-color: rgba(255,255,255,0.5);
}
.about-doc-hero .light-outline:hover {
  background: rgba(255,255,255,0.12);
  color: white;
}
.about-doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 3.5rem;
  align-items: center;
}

.water-quality-hero {
  background: linear-gradient(135deg, #0b1f33 0%, #133b5c 100%);
}

.water-quality-page {
  background: #f4f8fb;
}

.water-quality-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}

.water-quality-alert {
  padding: 1.5rem;
  border-radius: 12px;
  color: white;
  background: linear-gradient(135deg, #e9324f, #f97316);
  box-shadow: 0 18px 40px rgba(233, 50, 79, 0.2);
}

.water-quality-alert span,
.water-quality-alert small {
  display: block;
  font-weight: 700;
  opacity: 0.86;
}

.water-quality-alert strong {
  display: block;
  margin: 0.35rem 0;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1;
}

.water-quality-chart-card {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 12px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.water-quality-chart-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
}

.water-quality-chart-head h3 {
  margin: 0;
  color: var(--color-dark);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: 0.78rem;
  color: var(--color-text-light);
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.3rem;
  border-radius: 50%;
}

.legend-dot.critical { background: #e9324f; }
.legend-dot.moderate { background: #f97316; }
.legend-dot.safe { background: var(--color-primary); }

.water-quality-line-chart {
  padding: 1rem 0 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.water-quality-line-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.wq-grid-line {
  stroke: rgba(15, 23, 42, 0.08);
  stroke-width: 1;
}

.wq-axis-label,
.wq-threshold-label {
  font-family: var(--font-display);
  font-size: 11px;
  fill: #94a3b8;
  font-weight: 700;
}

.wq-threshold-line {
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
}

.wq-threshold-line--safe {
  stroke: rgba(15, 159, 156, 0.55);
}

.wq-threshold-line--moderate {
  stroke: rgba(249, 115, 22, 0.65);
}

.wq-threshold-label {
  fill: #64748b;
  font-size: 10px;
}

.wq-line-area {
  fill: url(#wqAreaGradient);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.wq-line-area.is-drawn {
  opacity: 1;
}

.wq-line-path {
  fill: none;
  stroke: url(#wqLineGradient);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.wq-line-path.is-drawn {
  stroke-dashoffset: 0;
}

.wq-line-point {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.wq-line-point.is-drawn {
  opacity: 1;
}

.wq-line-dot {
  fill: #fff;
  stroke: #e9324f;
  stroke-width: 3;
}

.wq-line-point[data-level="moderate"] .wq-line-dot {
  stroke: #f97316;
}

.wq-line-point[data-level="safe"] .wq-line-dot {
  stroke: var(--color-primary);
}

.wq-line-value {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  fill: #e9324f;
}

.wq-line-ghat {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  fill: var(--color-dark);
}

.wq-line-status {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  fill: #e9324f;
  text-transform: uppercase;
}

.water-quality-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.25rem;
  min-height: 360px;
  align-items: end;
  padding: 1rem 0 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.water-quality-bar-item {
  min-width: 0;
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
}

.water-quality-bar-wrap {
  position: relative;
  width: 44px;
  height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.water-quality-bar {
  width: 100%;
  min-height: 18px;
  border-radius: 9px 9px 0 0;
  box-shadow: 0 12px 24px rgba(233, 50, 79, 0.2);
}

.water-quality-bar.critical { background: linear-gradient(180deg, #e9324f, #ea580c); }
.water-quality-bar.moderate { background: linear-gradient(180deg, #f59e0b, #f97316); }
.water-quality-bar.safe { background: linear-gradient(180deg, #26bcb9, #0f9f9c); }

.water-quality-value {
  position: absolute;
  top: -0.2rem;
  font-weight: 900;
  color: #e9324f;
  font-size: 0.88rem;
}

.water-quality-bar-item strong {
  font-size: 0.86rem;
  color: var(--color-dark);
}

@media (max-width: 900px) {
  .water-quality-summary,
  .water-quality-chart-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .water-quality-alert {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .water-quality-line-chart {
    overflow-x: auto;
  }

  .water-quality-line-svg {
    min-width: 640px;
  }

  .water-quality-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: auto;
  }

  .water-quality-bar-wrap {
    height: 190px;
  }
}
.about-doc-grid--reverse {
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
}
.about-doc-copy .body-text:last-child {
  margin-bottom: 0;
}
.about-doc-photo-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 420px;
  box-shadow: var(--shadow-lg);
  background: var(--color-secondary);
}
.about-doc-photo-card img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.about-doc-photo-card:hover img {
  transform: scale(1.04);
}
.about-doc-photo-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  color: white;
  background: rgba(11,31,51,0.82);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
}
.about-doc-photo-caption strong,
.about-doc-photo-caption span {
  display: block;
}
.about-doc-photo-caption span {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
}
.about-doc-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.about-doc-stat,
.about-doc-work-card,
.about-doc-plan-item {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.about-doc-stat {
  padding: 1.4rem;
  text-align: center;
}
.about-doc-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 0.55rem;
}
.about-doc-stat span {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
.about-doc-card-grid,
.about-doc-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.about-doc-work-card {
  padding: 1.6rem;
  transition: var(--transition-med);
}
.about-doc-work-card:hover,
.about-doc-plan-item:hover {
  transform: translateY(-5px);
  border-color: rgba(0,166,166,0.28);
  box-shadow: var(--shadow-md);
}
.about-doc-work-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 1rem 0 0.55rem;
  color: var(--color-dark);
}
.about-doc-work-card p,
.about-doc-plan-item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}
.body-text.light {
  color: rgba(255,255,255,0.76);
}
.about-doc-alert-card,
.about-doc-mission-card {
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.13);
}
.about-doc-alert-card {
  color: white;
  background: rgba(255,255,255,0.07);
}
.about-doc-alert-card h3,
.about-doc-mission-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
}
.about-doc-alert-card p {
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
}
.about-doc-alert-card ul,
.about-doc-mission-card ul {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
}
.about-doc-alert-card li,
.about-doc-mission-card li {
  position: relative;
  padding-left: 1.2rem;
  line-height: 1.5;
}
.about-doc-alert-card li::before,
.about-doc-mission-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-primary);
}
.about-doc-founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.about-doc-founder-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.2rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.about-doc-founder-card img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.about-doc-founder-card h3 {
  font-family: var(--font-display);
  color: var(--color-dark);
  margin-bottom: 0.45rem;
}
.about-doc-founder-card p {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.58;
  margin: 0;
}
.about-doc-board {
  margin-top: 1.25rem;
}
.about-doc-highlight-panel {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  align-items: center;
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--color-primary-light), #fff 55%, rgba(244,162,97,0.18));
  border: 1px solid rgba(0,166,166,0.16);
  box-shadow: var(--shadow-md);
}
.about-doc-awards {
  display: grid;
  gap: 0.75rem;
}
.about-doc-awards span {
  display: block;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-full);
  background: white;
  color: var(--color-dark);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
.about-doc-mission-card {
  background: white;
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}
.about-doc-mission-card ul {
  margin-bottom: 1.5rem;
}

.donate-payment-wrap {
  display: grid;
  grid-template-columns: minmax(150px, 0.82fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
}

.donate-payment-wrap--bank-only {
  grid-template-columns: 1fr;
}

.donate-left > .body-text {
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0.75rem 0 0;
  max-width: 520px;
}

.donate-left > .section-heading {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.3;
  margin-bottom: 0;
  padding-bottom: 0.15em;
}

.donate-left-qr {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: start;
  margin-top: 1.5rem;
  border-radius: 12px;
}

.donate-left-qr__image {
  width: 100%;
  max-width: 410px;
}

.donate-left-qr img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.donate-left-qr h3 {
  margin: 0 0 0.45rem;
  color: var(--color-dark);
  font-size: 1.25rem;
}

.donate-left-qr p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.donate-qr-panel {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.45rem;
  padding: 0.85rem;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.1);
  text-align: center;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.donate-qr-panel.is-highlighted,
.donate-left-qr.is-highlighted {
  border-color: rgba(0, 166, 166, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 166, 166, 0.12), 0 18px 36px rgba(0, 166, 166, 0.18);
  transform: translateY(-2px);
}

.donate-qr-panel img {
  width: min(100%, 190px);
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 10px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.donate-qr-panel strong {
  font-size: 0.92rem;
  color: var(--color-dark);
}

.donate-qr-panel span {
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.donate-bank-panel {
  display: grid;
  gap: 0.65rem;
}

.donate-bank-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.donate-bank-box {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.donate-bank-row {
  display: grid;
  gap: 0.25rem;
  padding: 0.78rem 0.9rem;
}

.donate-bank-row + .donate-bank-row {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.donate-bank-row span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.donate-bank-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.88rem;
  color: var(--color-dark);
}

@media (max-width: 640px) {
  .donate-bank-detail-grid {
    grid-template-columns: 1fr;
  }
}

.donate-detail-field {
  display: grid;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.donate-detail-field .form-input {
  height: 40px;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-dark);
  background: #f8fafc;
}
.about-doc-plan-grid {
  grid-template-columns: repeat(2, 1fr);
}
.about-doc-plan-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  min-height: 86px;
  padding: 1.15rem 1.25rem;
  transition: var(--transition-med);
}
.about-doc-plan-item .smf-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  box-shadow: inset 0 0 0 1px rgba(0,166,166,0.08);
}
.about-doc-plan-item .smf-icon-svg {
  width: 30px !important;
  height: 30px !important;
  stroke-width: 2.4;
}
.about-doc-plan-item p {
  align-self: center;
}
@media (max-width: 1024px) {
  .about-doc-grid,
  .about-doc-grid--reverse,
  .about-doc-highlight-panel {
    grid-template-columns: 1fr;
  }
  .about-doc-card-grid,
  .about-doc-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-doc-founder-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .about-doc-photo-card,
  .about-doc-photo-card img {
    min-height: 320px;
  }
  .about-doc-card-grid,
  .about-doc-plan-grid,
  .about-doc-stat-row {
    grid-template-columns: 1fr;
  }
  .about-doc-founder-card {
    grid-template-columns: 1fr;
  }
  .about-doc-founder-card img {
    width: 100%;
    height: 240px;
  }
  .about-doc-highlight-panel {
    padding: 1.5rem;
  }
  .about-doc-hero-actions .btn-primary,
  .about-doc-hero-actions .btn-outline {
    width: 100%;
    justify-content: center;
  }
}
.subpage-hero-badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 1rem;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.15);
}

@keyframes heroGradientPan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes heroFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-25px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes heroFloatReverse {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(25px) scale(0.95); }
  100% { transform: translateY(0) scale(1); }
}

.subpage-hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-dark), var(--color-secondary), #0b2f4b, var(--color-dark)) !important;
  background-size: 300% 300% !important;
  animation: heroGradientPan 15s ease infinite;
  color: white;
  padding: 8rem 0 5rem;
  overflow: hidden;
}
.subpage-hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 60%; height: 140%;
  background: radial-gradient(circle, rgba(0,166,166,0.18) 0%, transparent 60%);
  animation: heroFloat 8s ease-in-out infinite;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}
.subpage-hero::after {
  content: '';
  position: absolute;
  bottom: -20%; left: -10%;
  width: 50%; height: 120%;
  background: radial-gradient(circle, rgba(239,132,83,0.12) 0%, transparent 60%);
  animation: heroFloatReverse 10s ease-in-out infinite;
  pointer-events: none;
  border-radius: 50%;
  z-index: 0;
}
.subpage-hero > .container {
  position: relative;
  z-index: 2;
}

.subpage-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.subpage-hero p {
  font-size: 1rem;
  opacity: 0.8;
  max-width: 680px;
  line-height: 1.7;
}
.subpage-hero--has-image {
  background-image: var(--smf-hero-image) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  animation: none !important;
}
.subpage-hero--has-image::before,
.subpage-hero--has-image::after {
  display: none;
}
.subpage-hero__overlay {
  display: none;
}
.subpage-hero--has-image .subpage-hero__overlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(11, 31, 51, var(--smf-hero-overlay, 0.72)),
    rgba(19, 59, 92, calc(var(--smf-hero-overlay, 0.72) * 0.92))
  );
  pointer-events: none;
}
.subpage-hero--center > .container {
  text-align: center;
}
.subpage-hero--center p {
  margin-left: auto;
  margin-right: auto;
}

/* Linear Timeline Panel */
.timeline-wrap {
  position: relative;
  max-width: 800px;
  margin: 4rem auto 0;
  padding-left: 2.5rem;
  border-left: 2px solid var(--color-border);
}
.timeline-item {
  position: relative;
  margin-bottom: 3.5rem;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-badge {
  position: absolute;
  left: calc(-2.5rem - 11px);
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 4px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline-year {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  display: block;
}
.timeline-content {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-med);
}
.timeline-content:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.timeline-content h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}
.timeline-content p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Save Ganga Tech Details */
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.tech-visual svg {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-secondary) 100%);
}

/* Linear Timeline Panel */
.timeline-wrap {
  position: relative;
  max-width: 800px;
  margin: 4rem auto 0;
  padding-left: 2.5rem;
  border-left: 2px solid var(--color-border);
}
.timeline-item {
  position: relative;
  margin-bottom: 3.5rem;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-badge {
  position: absolute;
  left: calc(-2.5rem - 11px);
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 4px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline-year {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  display: block;
}
.timeline-content {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-med);
}
.timeline-content:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}
.timeline-content h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}
.timeline-content p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Save Ganga Tech Details */
.tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.tech-visual svg {
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .tech-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .timeline-wrap { padding-left: 1.75rem; }
  .timeline-badge { left: calc(-1.75rem - 11px); }
}

/* ============================================================
   24. MOTHERS FOR MOTHER LANDING PAGE
   ============================================================ */
.mfm-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 2.5rem) 0 4rem;
  color: white;
  overflow: hidden;
}
.mfm-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mfm-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
/* No tint over the photo — only a light top fade so the white menu stays readable */
.mfm-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 51, 0.7) 0%, rgba(11, 31, 51, 0) 20%);
}
.mfm-hero h1,
.mfm-hero .mfm-hero-subhead {
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.95);
}
.mfm-hero .mfm-hero-subhead { color: #ffffff !important; }
/* Heading + CTAs sit small at the bottom so faces in the photo stay visible */
.mfm-hero { align-items: flex-end; padding-bottom: 2rem; }
.mfm-hero .mfm-hero-content {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mfm-hero .mfm-hero-content h1 {
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 800;
  margin-bottom: 0.9rem;
}
.mfm-hero .mfm-hero-actions { justify-content: center; gap: 0.75rem; margin-bottom: 0; }
.mfm-hero .mfm-hero-actions a { padding: 0.55rem 1.3rem; font-size: 0.9rem; }
.mfm-hero-bg + .mfm-hero-content { z-index: 2; }
.mfm-hero-overlay {
  background:
    linear-gradient(180deg, rgba(11, 31, 51, 0.7) 0%, rgba(11, 31, 51, 0) 20%),
    linear-gradient(0deg, rgba(11, 31, 51, 0.6) 0%, rgba(11, 31, 51, 0) 22%);
}
@media (max-width: 768px) {
  .mfm-hero { padding-bottom: 1.5rem; }
  .mfm-hero .mfm-hero-content h1 { font-size: clamp(1.15rem, 5vw, 1.4rem); }
}
.mfm-navbar:not(.scrolled) .mfm-brand .logo-main { color: #ffffff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.mfm-navbar:not(.scrolled) .mfm-brand .logo-sub { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.mfm-hero .mfm-hero-badge {
  background: rgba(11, 31, 51, 0.72);
}
/* "Main Site" button over the dark hero (before the navbar turns white on scroll) */
.mfm-navbar:not(.scrolled) .mfm-nav-actions .mfm-back-btn {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}
.mfm-navbar:not(.scrolled) .mfm-nav-actions .mfm-back-btn svg { color: #fff !important; }
.mfm-hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
}
.mfm-hero-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  background: rgba(244, 162, 97, 0.18);
  border: 1px solid rgba(244, 162, 97, 0.4);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
}
.mfm-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.12;
  margin-bottom: 1.25rem;
}
.mfm-hero-lead {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  opacity: 0.95;
  max-width: 680px;
  margin-bottom: 2rem;
}
.mfm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.mfm-hero-actions .light-outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: white;
  background: rgba(11, 31, 51, 0.6);
}
.mfm-hero-actions .light-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: white;
}
.mfm-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.mfm-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 800;
  color: var(--color-primary);
}
.mfm-stat span {
  font-size: 0.84rem;
  opacity: 0.85;
}

.mfm-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.mfm-intro-visual {
  position: relative;
  padding-bottom: 3.5rem;
}
.mfm-intro-visual > img {
  width: 100%;
  max-height: 520px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  object-position: center 15%;
  display: block;
}
.mfm-president-card {
  position: absolute;
  bottom: 0;
  left: 1rem;
  right: 1rem;
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 12px 36px rgba(11, 31, 51, 0.15);
  border-left: 4px solid var(--color-primary);
  border-top: 1px solid rgba(0,0,0,0.05);
}
.mfm-president-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}
.mfm-president-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-dark);
  margin: 0.25rem 0 0.35rem;
}
.mfm-president-card p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.mfm-functions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.mfm-function-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-med);
}
.mfm-function-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 166, 166, 0.25);
}
.mfm-function-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.mfm-function-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.6rem;
}
.mfm-function-card p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.mfm-mission {
  background: linear-gradient(145deg, var(--color-dark) 0%, #1a3a60 55%, var(--color-secondary) 100%);
  color: white;
}
.mfm-mission-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.mfm-mission .body-text.light {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
}
.mfm-objectives-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.mfm-objectives-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.mfm-objectives-list li > .smf-icon {
  flex: 0 0 24px;
  width: 24px;
  margin-top: 0.15rem;
}
.mfm-objectives-list li > div {
  flex: 1;
  min-width: 0;
}
.mfm-objectives-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.mfm-objectives-list p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.55;
}
.mfm-mission-visual img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
}

.mfm-activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.mfm-activities-journey {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 5rem;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.mfm-activities-journey::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 50%;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent), var(--color-primary));
  transform: translateX(-50%);
  opacity: 0.35;
}
.mfm-activity-card {
  position: relative;
  background: white;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  transition: var(--transition-med);
}
.mfm-activities-journey .mfm-activity-card {
  min-height: 178px;
  padding: 1.45rem 1.55rem;
  box-shadow: 0 18px 42px rgba(11, 31, 51, 0.08);
}
.mfm-activities-journey .mfm-activity-card:nth-child(odd) {
  transform: translateY(1.25rem);
}
.mfm-activities-journey .mfm-activity-card:nth-child(even) {
  transform: translateY(-0.5rem);
}
.mfm-activity-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.mfm-activities-journey .mfm-activity-card:hover {
  transform: translateY(-4px);
}
.mfm-activity-step {
  position: absolute;
  top: 1.35rem;
  z-index: 2;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  border: 4px solid #f6fbfc;
  box-shadow: 0 10px 28px rgba(0, 166, 166, 0.26);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 900;
}
.mfm-activities-journey .mfm-activity-card:nth-child(odd) .mfm-activity-step {
  right: -4.72rem;
}
.mfm-activities-journey .mfm-activity-card:nth-child(even) .mfm-activity-step {
  left: -4.72rem;
}
.mfm-activity-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}
.mfm-activity-card h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.45rem;
}
.mfm-activity-card p {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

.mfm-cta {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 50%, var(--color-accent-light) 100%);
}
.mfm-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  background: white;
  border-radius: var(--radius-xl);
  padding: 2.5rem 3rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}
.mfm-cta-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}
.mfm-cta-text p {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0;
}
.mfm-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
}

/* Page nav chips */
.mfm-page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.mfm-page-nav a {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: var(--transition-fast);
}
.mfm-page-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

/* Partners */
.mfm-partners {
  padding: 1.75rem 0;
  background: white;
  border-bottom: 1px solid var(--color-border);
}
.mfm-partners-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.mfm-partners-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}
.mfm-partner-pill {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-dark);
  background: var(--color-primary-light);
  border: 1px solid rgba(0, 166, 166, 0.15);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
}

/* Impact strip */
.mfm-impact-strip {
  background: linear-gradient(135deg, var(--color-primary), #0d8a8a);
  color: white;
  padding: 2.5rem 0;
}
.mfm-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.mfm-impact-item strong {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
  display: inline;
}
.mfm-impact-item span {
  font-size: 1.5rem;
  font-weight: 800;
}
.mfm-impact-item p {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  opacity: 0.9;
}

/* Quote */
.mfm-quote-block {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 2rem 1rem;
}
.mfm-quote-mark {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-primary);
  opacity: 0.35;
}
.mfm-quote-block p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 600;
  font-style: italic;
  color: var(--color-dark);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.mfm-quote-block footer strong {
  display: block;
  font-size: 1rem;
  color: var(--color-primary);
}
.mfm-quote-block footer span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Events */
.mfm-events-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0 2.5rem;
  flex-wrap: wrap;
}
.mfm-events-tab {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.7rem 1.75rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: white;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-med);
}
.mfm-events-tab.active {
  background: linear-gradient(135deg, var(--color-primary), #40d8d8);
  border-color: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-teal);
}
.mfm-events-panel {
  display: none;
}
.mfm-events-panel.active {
  display: block;
  animation: mfmFadeIn 0.4s ease;
}
@keyframes mfmFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.mfm-events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.mfm-events-grid--featured .mfm-event-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.mfm-event-card {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-med);
}
.mfm-event-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 166, 166, 0.25);
}
.mfm-event-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.mfm-event-card--featured .mfm-event-img {
  aspect-ratio: auto;
  min-height: 280px;
}
.mfm-event-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.mfm-event-card:hover .mfm-event-img img {
  transform: scale(1.05);
}
.mfm-event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
}
.mfm-event-badge.upcoming {
  background: var(--color-primary);
  color: white;
}
.mfm-event-badge.past {
  background: rgba(11, 31, 51, 0.75);
  color: white;
}
.mfm-event-body {
  padding: 1.35rem 1.5rem 1.5rem;
}
.mfm-event-card--featured .mfm-event-body {
  padding: 2rem 2rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mfm-event-body time {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}
.mfm-event-body h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-dark);
  margin: 0.4rem 0 0.65rem;
  line-height: 1.3;
}
.mfm-event-card--featured .mfm-event-body h3 {
  font-size: 1.5rem;
}
.mfm-event-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 0.65rem;
}
.mfm-event-body > p:not(.mfm-event-meta) {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.mfm-event-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  transition: gap var(--transition-fast);
}
.mfm-event-link:hover {
  gap: 0.55rem;
}
.mfm-event-card--compact .mfm-event-body {
  padding: 1.15rem 1.25rem;
}
.mfm-event-card--compact h3 {
  font-size: 1rem;
}

/* Gallery strip */
.mfm-gallery-strip {
  position: relative;
  overflow: hidden;
}
.mfm-gallery-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 1.1rem;
  margin-top: 2.4rem;
}
.mfm-gallery-item {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  min-height: 0;
  background: var(--color-secondary);
  box-shadow: 0 16px 40px rgba(11, 31, 51, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font: inherit;
  text-align: inherit;
}
.mfm-gallery-item:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}
.mfm-gallery-item--featured {
  grid-column: span 2;
  grid-row: span 2;
}
.mfm-gallery-item--wide {
  grid-column: span 2;
}
.mfm-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.mfm-gallery-item:hover img {
  transform: scale(1.08);
}
.mfm-gallery-item figcaption,
.mfm-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4rem 1.1rem 1rem;
  background: linear-gradient(transparent, rgba(11, 31, 51, 0.9));
  color: white;
  text-align: left;
}
.mfm-gallery-item figcaption span,
.mfm-gallery-caption span {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mfm-gallery-item figcaption strong,
.mfm-gallery-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
}
.mfm-gallery-item--featured figcaption strong,
.mfm-gallery-item--featured .mfm-gallery-caption strong {
  font-size: 1.25rem;
}
.mfm-gallery-more {
  margin-top: 2rem;
  font-size: 0.95rem;
}
.mfm-gallery-more .btn-primary {
  min-width: 180px;
  justify-content: center;
}

@media (max-width: 1024px) {
  .mfm-functions-grid { grid-template-columns: repeat(2, 1fr); }
  .mfm-activities-grid { grid-template-columns: repeat(2, 1fr); }
  .mfm-activities-journey {
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: 1rem;
  }
  .mfm-activities-journey::before {
    left: 22px;
  }
  .mfm-activities-journey .mfm-activity-card,
  .mfm-activities-journey .mfm-activity-card:nth-child(odd),
  .mfm-activities-journey .mfm-activity-card:nth-child(even),
  .mfm-activities-journey .mfm-activity-card:hover {
    transform: none;
  }
  .mfm-activities-journey .mfm-activity-card {
    margin-left: 3rem;
  }
  .mfm-activities-journey .mfm-activity-card:nth-child(odd) .mfm-activity-step,
  .mfm-activities-journey .mfm-activity-card:nth-child(even) .mfm-activity-step {
    left: -4.32rem;
    right: auto;
  }
  .mfm-intro-grid,
  .mfm-mission-grid { grid-template-columns: 1fr; }
  .mfm-mission-visual { order: -1; }
  .mfm-impact-grid { grid-template-columns: repeat(2, 1fr); }
  .mfm-events-grid--featured .mfm-event-card--featured {
    grid-template-columns: 1fr;
  }
  .mfm-gallery-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px;
  }
}
@media (max-width: 768px) {
  .mfm-hero { min-height: 100svh; padding: 6.5rem 0 3rem; }
  .mfm-hero-stats { gap: 1.25rem; }
  .mfm-page-nav { display: none; }
  .mfm-president-card {
    position: static;
    margin-top: 1rem;
  }
  .mfm-functions-grid,
  .mfm-activities-grid { grid-template-columns: 1fr; }
  .mfm-activities-journey {
    gap: 0.95rem;
  }
  .mfm-activities-journey::before {
    display: none;
  }
  .mfm-activities-journey .mfm-activity-card {
    margin-left: 0;
    padding-top: 1.25rem;
  }
  .mfm-activities-journey .mfm-activity-card:nth-child(odd) .mfm-activity-step,
  .mfm-activities-journey .mfm-activity-card:nth-child(even) .mfm-activity-step {
    position: static;
    margin-bottom: 0.85rem;
  }
  .mfm-events-grid { grid-template-columns: 1fr; }
  .mfm-impact-grid { grid-template-columns: 1fr 1fr; }
  .mfm-gallery-row {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .mfm-gallery-item--featured,
  .mfm-gallery-item--wide {
    grid-column: span 1;
    grid-row: span 1;
  }
  .mfm-cta-inner {
    padding: 1.75rem;
    flex-direction: column;
    text-align: center;
  }
  .mfm-cta-actions { justify-content: center; width: 100%; }
}
/* ============================================================ */
/* UPI CHOICE PANEL ADDITIONS */
/* ============================================================ */
.upi-choice-panel {
  display: none;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-color);
  animation: fadeIn 0.3s ease forwards;
}
.upi-choice-panel.is-visible {
  display: block;
}
.upi-choice-panel > span {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.upi-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.upi-choice-grid button {
  background: white;
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  font-weight: 600;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}
.upi-choice-grid button:hover {
  background: var(--color-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   24. BLOG DETAILS (SINGLE POST) PAGE
   ============================================================ */
.blog-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 8rem 0 2rem;
  color: white;
  overflow: hidden;
}
.blog-hero-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.blog-hero-bg-fallback {
  background: linear-gradient(135deg, var(--color-dark), var(--color-primary-dark));
}
.blog-hero-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 50%, rgba(15, 23, 42, 0.3) 100%);
  z-index: 2;
}
.blog-hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
}
.blog-hero-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.blog-hero-date {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.8);
}
.blog-hero-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 2.5rem;
  color: white;
  text-wrap: balance;
}
.blog-hero-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.author-avatar img {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.2);
}
.author-info strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.author-info span {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.blog-single-layout {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Main Content Typography */
.blog-main {
  background: white;
  padding: 3rem 4rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.blog-content {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--color-dark);
}
.blog-content p {
  margin-bottom: 1.8rem;
}
.blog-content h2, .blog-content h3, .blog-content h4 {
  font-family: var(--font-display);
  color: var(--color-dark);
  margin: 3rem 0 1.5rem;
  font-weight: 700;
}
.blog-content h2 { font-size: 2.2rem; }
.blog-content h3 { font-size: 1.75rem; }
.blog-content ul, .blog-content ol {
  margin-bottom: 2rem;
  padding-left: 2rem;
}
.blog-content li {
  margin-bottom: 0.8rem;
}
.blog-content blockquote {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-primary-dark);
  border-left: 4px solid var(--color-primary);
  padding: 1.5rem 2rem;
  background: var(--color-primary-light);
  margin: 2.5rem 0;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 2rem 0;
}
.blog-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.blog-content a:hover {
  color: var(--color-primary-dark);
}

/* Post Footer */
.blog-post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 3rem 0;
}
.blog-tags, .blog-share {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.blog-tag {
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none !important;
  font-weight: 600;
  transition: var(--transition-fast);
}
.blog-tag:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Author Box */
.blog-author-box {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 2rem;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  margin-top: 3rem;
}
.author-box-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box-name {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.author-box-bio {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Sidebar */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  position: sticky;
  top: 100px;
}
.sidebar-widget {
  background: white;
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.widget-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-bg);
  position: relative;
}
.widget-title::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 40px; height: 2px;
  background: var(--color-primary);
}

/* Sidebar Search */
.widget_search .search-form {
  display: flex;
}
.widget_search .search-field {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: none;
}
.widget_search .search-submit {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0 1.25rem;
}

/* Recent Posts Widget */
.widget_recent_entries ul {
  list-style: none;
  padding: 0; margin: 0;
}
.widget_recent_entries li {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.widget_recent_entries li:last-child {
  margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}
.widget_recent_entries a {
  display: flex;
  gap: 1rem;
  text-decoration: none;
  color: var(--color-dark);
}
.widget_recent_entries a:hover .recent-post-title {
  color: var(--color-primary);
}
.recent-post-img, .recent-post-placeholder {
  width: 65px; height: 65px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.recent-post-placeholder {
  background: var(--color-primary-light);
}
.recent-post-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recent-post-title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 0.4rem;
  transition: var(--transition-fast);
}
.recent-post-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Categories Widget */
.widget_categories ul {
  list-style: none; padding: 0; margin: 0;
}
.widget_categories li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--color-border);
}
.widget_categories li:last-child {
  border-bottom: none; padding-bottom: 0;
}
.widget_categories a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-fast);
}
.widget_categories a:hover {
  color: var(--color-primary);
  padding-left: 5px;
}
.cat-count {
  font-size: 0.8rem;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 700;
}

/* CTA Widget */
.widget_cta {
  background: linear-gradient(135deg, var(--color-dark), var(--color-secondary));
  color: white;
  text-align: center;
}
.widget_cta .widget-title {
  border-bottom-color: rgba(255,255,255,0.1);
}
.widget_cta .widget-title::after { background: var(--color-accent); }
.widget_cta p {
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
  .blog-single-layout {
    grid-template-columns: 1fr;
  }
  .blog-main {
    padding: 2.5rem;
  }
  .blog-sidebar {
    position: static;
  }
}
@media (max-width: 768px) {
  .blog-hero { padding: 6rem 0 2rem; }
  .blog-hero-title { font-size: 2.2rem; }
  .blog-main { padding: 1.5rem; border: none; border-radius: 0; box-shadow: none; background: transparent; }
  .blog-author-box { flex-direction: column; align-items: center; text-align: center; }
  .blog-single { padding: 1rem 0 3rem; }
}




/* ============================================================
   25. REFINED BLOG DETAILS PAGE (THEME COLORS)
   ============================================================ */

/* Main wrapper styles */
.blog-single-post {
  background: var(--color-bg-light);
  min-height: 100vh;
  padding-bottom: 4rem;
}

/* --- Hero Section --- */
.premium-post-hero {
  background: linear-gradient(145deg, var(--color-dark) 0%, var(--color-secondary) 55%, #1a5a8a 100%);
  padding: 160px 0 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.premium-post-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle at top right, rgba(0, 166, 166, 0.15) 0%, transparent 50%),
                    radial-gradient(circle at bottom left, rgba(244, 162, 97, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.premium-cat-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-accent);
  border: 1px solid rgba(244, 162, 97, 0.3);
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-full);
}

.premium-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.25;
  max-width: 820px;
  margin: 0 auto 1.5rem;
  color: var(--color-white);
}

.premium-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-body);
}

.premium-hero-meta strong {
  color: var(--color-white);
  font-weight: 700;
}

/* --- Content Layout --- */
.premium-content-section {
  padding: 0 20px 100px;
  max-width: 1280px;
  margin: 0 auto;
}

.premium-content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: start;
  padding-top: 3.5rem;
}

/* --- Left Column: Post Content --- */
.premium-post-content {
  background: transparent;
  margin: 0;
  padding: 0;
}

.premium-featured-image {
  margin: 0 0 2.5rem;
  width: 100%;
  max-width: 100%;
  height: 400px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 10;
}

.premium-featured-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.entry-content {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text);
}

.smf-page-content .entry-content {
  max-width: 820px;
  margin: 0 auto;
}

.entry-content p { margin-bottom: 1.8rem; }
.entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--font-display);
  color: var(--color-dark);
  margin: 2.5rem 0 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.6rem; }
.entry-content a { color: var(--color-primary); text-decoration: none; border-bottom: 1px solid var(--color-primary); transition: 0.3s; }
.entry-content a:hover { color: var(--color-primary-dark); border-bottom-color: var(--color-primary-dark); }
.entry-content ul, .entry-content ol { margin-bottom: 1.8rem; padding-left: 1.5rem; }
.entry-content li { margin-bottom: 0.5rem; }

.entry-content blockquote,
.entry-content .wp-block-quote,
.entry-content .wp-block-quote.is-style-smf-highlight,
.entry-content blockquote.is-style-smf-highlight {
  font-size: 1.25rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-dark);
  border: none;
  border-left: 4px solid var(--color-accent);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  background: var(--color-bg-light);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
}

.entry-content blockquote p,
.entry-content .wp-block-quote p {
  margin: 0 0 0.75rem;
  font-size: inherit;
  font-style: inherit;
  color: inherit;
}

.entry-content blockquote p:last-child,
.entry-content .wp-block-quote p:last-child {
  margin-bottom: 0;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Legacy blockquote without wp-block-quote wrapper */
.entry-content blockquote:not(.wp-block-quote) cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Social Share Block */
.premium-social-share {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.premium-social-share span {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  letter-spacing: 1px;
}
/* Ensure social links are horizontal */
.premium-social-share .social-link {
  display: inline-flex;
  margin-right: 0.5rem;
  align-items: center;
  justify-content: center;
}

/* --- Right Column: Sidebar --- */
.premium-blog-sidebar {
  position: sticky;
  top: 100px;
  margin: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.premium-sidebar-block {
  margin-bottom: 0;
  background: transparent;
  padding: 1.75rem 2rem;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

.premium-sidebar-block:last-child {
  border-bottom: none;
}

.premium-sidebar-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-dark);
  margin: 0 0 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Author Block */
.premium-author-brief {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.premium-author-initials {
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.premium-author-brief h4 {
  margin: 0;
  color: var(--color-dark);
  font-size: 1.1rem;
  font-weight: 700;
}
.premium-author-brief p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.premium-author-desc {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

/* Newsletter */
.premium-newsletter {
  background: var(--color-dark);
  border-color: var(--color-secondary);
  color: var(--color-white);
}
.premium-newsletter h4 {
  color: var(--color-white);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}
.premium-newsletter p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.5rem;
}
.premium-newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.premium-newsletter-form input {
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.premium-newsletter-form input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.premium-newsletter-form button {
  padding: 12px 16px;
  background: var(--color-accent);
  color: var(--color-dark);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}
.premium-newsletter-form button:hover {
  background: var(--color-accent-dark);
}

/* Recent Posts */
.premium-recent-post {
  display: block;
  text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: 0.3s;
}
.premium-recent-post:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.rp-title {
  color: var(--color-dark);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 0.35rem;
  transition: color 0.2s;
}
.premium-recent-post:hover .rp-title { color: var(--color-primary); }
.rp-date {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* Categories List */
.premium-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
  transition: 0.3s;
}
.premium-cat-link:last-child { border-bottom: none; padding-bottom: 0; }
.premium-cat-link:hover { color: var(--color-primary); padding-left: 5px; }
.premium-cat-count {
  background: var(--color-bg-light);
  color: var(--color-text-muted);
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: var(--radius-full);
}
.premium-cat-link:hover .premium-cat-count {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* Tags */
.premium-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.premium-tag {
  display: inline-block;
  text-decoration: none;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
  padding: 6px 14px;
  font-size: 0.8rem;
  border-radius: var(--radius-full);
  transition: 0.3s;
}
.premium-tag:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Search widget fix for light theme */
.premium-sidebar-search-form {
  position: relative;
}
.search-form input.search-field,
.premium-sidebar-search-form input.search-field {
  width: 100%;
  background: var(--color-bg-light) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  padding: 15px 50px 15px 20px !important;
  border-radius: var(--radius-sm) !important;
}
.search-form button,
.premium-sidebar-search-form button {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-primary) !important;
  cursor: pointer;
  padding: 0;
}

.premium-recent-posts-list {
  display: flex;
  flex-direction: column;
}

.premium-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.premium-sidebar-empty {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .premium-content-grid { grid-template-columns: 1fr; }
  .premium-blog-sidebar { position: static; }
}
@media (max-width: 768px) {
  .premium-post-hero { padding: 120px 0 64px; }
  .premium-hero-title { font-size: 1.45rem; }
  .premium-content-grid { padding-top: 2.5rem; }
  .premium-featured-image {
    height: 240px;
  }
  .premium-content-section { padding: 0 20px 80px; }
  .entry-content blockquote,
  .entry-content .wp-block-quote { padding: 1.25rem 1.5rem; font-size: 1.1rem; }
}

/* Force HTML margin to 0 to prevent WP Admin bar from creating a white gap above the transparent header */
html { margin-top: 0 !important; }
body.admin-bar { margin-top: 0 !important; }
#wpadminbar { display: none !important; }

/* --- Responsive Navbar for Medium Desktops & Laptops --- */
@media (min-width: 1141px) and (max-width: 1366px) {
  .nav-container {
    gap: 0.5rem;
    padding: 0 0.85rem;
  }
  .nav-logo-img {
    height: 38px !important;
    width: 38px !important;
  }
  .logo-main {
    font-size: 0.88rem;
  }
  .logo-sub {
    font-size: 0.76rem;
  }
  .nav-links {
    gap: 0.2rem;
  }
  .nav-links a {
    padding: 0.35rem 0.45rem;
    font-size: 0.82rem;
    min-height: 36px;
  }
  .nav-actions {
    gap: 0.4rem;
  }
  .btn-nav-secondary,
  .btn-nav-primary,
  .mfm-back-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
  }
}

/* ============================================================
  SAVE GANGA — SWATCHA GANGA CAMPAIGN PAGE
   ============================================================ */

.sg-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.sg-pillar-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-med);
}
.sg-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(0,166,166,0.35);
}
.sg-pillar-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1rem 0 0.6rem;
  color: var(--color-dark);
}
.sg-pillar-card p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

.sg-roles-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
  position: relative;
}
.sg-role-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: var(--transition-med);
}
.sg-role-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--color-border);
}
.sg-role-card--active::before,
.sg-role-card:hover::before {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.sg-role-card--active {
  border-color: rgba(0,166,166,0.35);
  box-shadow: 0 12px 32px rgba(0,166,166,0.12);
}
.sg-role-period {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}
.sg-role-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: var(--color-dark);
}
.sg-role-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}
.sg-role-note {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: rgba(0,166,166,0.06);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.sg-role-note p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

.sg-decade-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.sg-decade-tab {
  border: 1px solid rgba(11,31,51,0.12);
  background: rgba(255,255,255,0.9);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: 0.2s ease;
}
.sg-decade-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.sg-decade-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  box-shadow: 0 10px 24px rgba(0,166,166,0.22);
}

.sg-chronicle-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(0,166,166,0.08), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(244,162,97,0.08), transparent 24%),
    linear-gradient(180deg, #f7fbfc 0%, #eef5f7 100%);
}
.sg-chronicle-watermark {
  position: absolute;
  inset: 8% 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 11rem);
  font-weight: 900;
  line-height: 1;
  color: rgba(11,31,51,0.04);
  pointer-events: none;
  user-select: none;
}
.sg-chronicle-toolbar {
  position: sticky;
  top: 84px;
  z-index: 30;
  text-align: center;
  margin: 2rem 0 2.5rem;
  padding: 1rem 0 1.25rem;
  background: rgba(247, 251, 252, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(11, 31, 51, 0.06);
}
.sg-chronicle-meta {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  min-height: 1.25rem;
}

.sg-chronicle-rail {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 0 1.5rem;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.sg-chronicle-rail.is-fading {
  opacity: 0.35;
  transform: translateY(8px);
}
.sg-chronicle-node.is-hidden,
.sg-chronicle-era.is-hidden {
  display: none !important;
}

.sg-chronicle-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}
.sg-chronicle-page-btn {
  border: 1px solid rgba(11, 31, 51, 0.12);
  background: #fff;
  color: var(--color-dark);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.25s ease;
}
.sg-chronicle-page-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.sg-chronicle-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sg-chronicle-page-info {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  min-width: 120px;
  text-align: center;
}
.sg-chronicle-rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(0,166,166,0.15), var(--color-primary), rgba(244,162,97,0.55));
  border-radius: 999px;
  z-index: 0;
}

.sg-chronicle-era {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0 1.75rem;
}
.sg-chronicle-era:first-child {
  margin-top: 0;
}
.sg-chronicle-era-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,166,166,0.35), transparent);
}
.sg-chronicle-era-label {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-full);
  background: var(--color-dark);
  color: white;
  box-shadow: 0 12px 28px rgba(11,31,51,0.14);
}
.sg-chronicle-era-label strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.sg-chronicle-era-label span {
  font-size: 0.72rem;
  opacity: 0.78;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sg-chronicle-node {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.75rem;
}
.sg-chronicle-node--left .sg-chronicle-panel { grid-column: 1; grid-row: 1; }
.sg-chronicle-node--left .sg-chronicle-axis { grid-column: 2; grid-row: 1; }
.sg-chronicle-node--right .sg-chronicle-panel { grid-column: 3; grid-row: 1; }
.sg-chronicle-node--right .sg-chronicle-axis { grid-column: 2; grid-row: 1; }

.sg-chronicle-axis {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-top: 0.35rem;
}
.sg-chronicle-year-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
  background: var(--color-primary);
  border: 4px solid #f7fbfc;
  box-shadow: 0 0 0 2px var(--color-primary);
}

.sg-chronicle-panel {
  position: relative;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(11,31,51,0.08);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.5rem 1.45rem;
  box-shadow: 0 16px 40px rgba(11,31,51,0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sg-chronicle-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.25rem;
  right: 1.25rem;
  height: 4px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.sg-chronicle-node--left .sg-chronicle-panel::after,
.sg-chronicle-node--right .sg-chronicle-panel::after {
  content: '';
  position: absolute;
  top: 1.65rem;
  width: 14px;
  height: 14px;
  background: white;
  border-top: 1px solid rgba(11,31,51,0.08);
  border-right: 1px solid rgba(11,31,51,0.08);
  transform: rotate(45deg);
}
.sg-chronicle-node--left .sg-chronicle-panel::after {
  right: -8px;
}
.sg-chronicle-node--right .sg-chronicle-panel::after {
  left: -8px;
  transform: rotate(225deg);
}
.sg-chronicle-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(0,166,166,0.28);
  box-shadow: 0 22px 48px rgba(11,31,51,0.11);
}
.sg-chronicle-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}
.sg-chronicle-year {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-dark);
}
.sg-chronicle-decade-pill {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: rgba(0,166,166,0.1);
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-full);
}
.sg-chronicle-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sg-chronicle-list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.sg-chronicle-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.sg-chronicle-list li:last-child { margin-bottom: 0; }

.sg-chronicle-node[data-decade="1970"] .sg-chronicle-panel::before {
  background: linear-gradient(90deg, #5b6ee1, #7c8df0);
}
.sg-chronicle-node[data-decade="1980"] .sg-chronicle-panel::before {
  background: linear-gradient(90deg, var(--color-primary), #4fd1c5);
}
.sg-chronicle-node[data-decade="1990"] .sg-chronicle-panel::before {
  background: linear-gradient(90deg, #0f766e, var(--color-primary));
}
.sg-chronicle-node[data-decade="2000"] .sg-chronicle-panel::before {
  background: linear-gradient(90deg, var(--color-accent), #fbbf77);
}

.sg-tech-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}
.sg-tech-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.65rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.sg-tech-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.sg-tech-highlight {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  background: rgba(0,166,166,0.07);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,166,166,0.15);
}
.sg-tech-highlight p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.sg-lab-strip {
  background: linear-gradient(135deg, #0b1f33, #133b5c);
  padding: 3.5rem 0;
  color: white;
}
.sg-lab-strip-inner {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2.5rem;
  align-items: center;
}
.sg-lab-strip-copy h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0.5rem 0 0.75rem;
}
.sg-lab-strip-copy p {
  margin: 0;
  opacity: 0.82;
  line-height: 1.7;
  font-size: 0.95rem;
}
.sg-lab-strip-stat {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}
.sg-lab-strip-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  color: #ff6b6b;
  margin-bottom: 0.35rem;
}
.sg-lab-strip-stat span {
  display: block;
  font-size: 0.82rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.sg-lab-strip-stat em {
  display: block;
  font-size: 0.72rem;
  font-style: normal;
  opacity: 0.6;
}

.sg-governance-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.sg-governance-panel h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-dark);
}
.sg-governance-panel ul {
  margin: 0 0 1.25rem;
  padding-left: 1.15rem;
}
.sg-governance-panel li {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 0.5rem;
}
.sg-governance-note {
  padding: 1rem 1.15rem;
  background: rgba(244,162,97,0.1);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.sg-ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.sg-ref-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.sg-ref-card h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(0,166,166,0.2);
  color: var(--color-dark);
}
.sg-ref-list { margin: 0; }
.sg-ref-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
}
.sg-ref-row:last-child { border-bottom: none; }
.sg-ref-row dt {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-primary);
}
.sg-ref-row dd {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.sg-partners-strip { border-top: 1px solid var(--color-border); }
.sg-partners-highlight {
  background: linear-gradient(135deg, #0b1f33, #133b5c);
  border-top: none;
  border-bottom: none;
  color: white;
}
.sg-partners-highlight-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  position: relative;
  overflow: hidden;
}
.sg-partners-highlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.sg-partners-highlight-head {
  text-align: center;
  margin-bottom: 1.75rem;
}
.sg-partners-highlight-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: white;
  margin: 0.65rem 0 0;
}
.sg-partner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
.sg-partner-tags span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  color: white;
  opacity: 1;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.sg-partner-tags span:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  background: rgba(0,166,166,0.18);
  box-shadow: 0 8px 20px rgba(0,166,166,0.2);
}

@media (max-width: 1024px) {
  .sg-pillar-grid,
  .sg-roles-track { grid-template-columns: repeat(2, 1fr); }
  .sg-lab-strip-inner { grid-template-columns: 1fr; }
  .sg-ref-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sg-pillar-grid,
  .sg-roles-track { grid-template-columns: 1fr; }
  .sg-chronicle-rail::before { left: 28px; transform: none; }
  .sg-chronicle-node,
  .sg-chronicle-node--left,
  .sg-chronicle-node--right {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 0.85rem;
  }
  .sg-chronicle-node--left .sg-chronicle-panel,
  .sg-chronicle-node--right .sg-chronicle-panel {
    grid-column: 2;
    grid-row: 1;
  }
  .sg-chronicle-node--left .sg-chronicle-axis,
  .sg-chronicle-node--right .sg-chronicle-axis {
    grid-column: 1;
    grid-row: 1;
  }
  .sg-chronicle-node--left .sg-chronicle-panel::after,
  .sg-chronicle-node--right .sg-chronicle-panel::after {
    left: -8px;
    right: auto;
    transform: rotate(225deg);
  }
  .sg-chronicle-year-badge {
    width: 16px;
    height: 16px;
  }
  .sg-partners-highlight-card {
    padding: 1.75rem 1.25rem;
  }
  .sg-ref-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ===================== PAGINATION ===================== */
.smf-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 4rem;
  font-family: var(--font-display);
}

.smf-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: white;
  color: var(--color-dark);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.1);
  transition: var(--transition-fast);
}

.smf-pagination a.page-numbers:hover {
  background: var(--color-light);
  border-color: rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

.smf-pagination .page-numbers.current {
  background: var(--color-teal);
  color: white;
  border-color: var(--color-teal);
}

.smf-pagination .page-numbers.dots {
  background: transparent;
  border: none;
  font-weight: 800;
  color: var(--color-text-light);
}

.smf-pagination .next.page-numbers {
  padding: 0 20px;
}

body.dark-mode .smf-pagination .page-numbers {
  background: rgba(255,255,255,0.05);
  color: white;
  border-color: rgba(255,255,255,0.1);
}

body.dark-mode .smf-pagination a.page-numbers:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

body.dark-mode .smf-pagination .page-numbers.current {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: white;
}

/* Force current pagination styles */
.smf-pagination a.page-numbers.current,
.smf-pagination span.page-numbers.current,
.smf-pagination .page-numbers.current {
  background-color: var(--color-teal) !important;
  color: #ffffff !important;
  border-color: var(--color-teal) !important;
}

/* Event Modal Styles */
.smf-modal {
  display: none; 
  position: fixed; 
  z-index: 99999; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
  background-color: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.smf-modal.show,
.smf-modal.is-open {
  display: flex;
  opacity: 1;
}

.smf-modal-content {
  background-color: #fff;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  border-radius: 16px;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.smf-modal.show .smf-modal-content {
  transform: translateY(0) scale(1);
}

.smf-modal-close {
  color: white;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  background: rgba(0,0,0,0.6);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.smf-modal-close:hover {
  background: var(--color-teal);
  transform: rotate(90deg);
}

.smf-modal-body {
  display: flex;
  flex-direction: column;
}

.smf-modal-gallery {
  position: relative;
  width: 100%;
}

.smf-modal-gallery img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.smf-modal-info {
  padding: 40px;
  background: #fff;
}

.smf-modal-info h3 {
  margin-top: 0;
  font-size: 2rem;
  color: var(--color-dark);
  margin-bottom: 15px;
}

.smf-modal-info p {
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1.6;
}

.smf-btn-outline {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 24px;
  border: 2px solid var(--color-teal);
  color: var(--color-teal);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
}

.smf-btn-outline:hover {
  background: var(--color-teal);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,168,150,0.3);
}

body.dark-mode .smf-modal-content {
  background-color: var(--color-dark);
}
body.dark-mode .smf-modal-info {
  background-color: var(--color-dark);
}
body.dark-mode .smf-modal-info h3 {
  color: white;
}
body.dark-mode .smf-modal-info p {
  color: rgba(255,255,255,0.8);
}

/* Force button styles */
button.smf-btn-outline,
a.smf-btn-outline,
.smf-btn-outline {
  background-color: transparent !important;
  color: var(--color-teal) !important;
  border: 2px solid var(--color-teal) !important;
}

button.smf-btn-outline:hover,
a.smf-btn-outline:hover,
.smf-btn-outline:hover {
  background-color: var(--color-teal) !important;
  color: #ffffff !important;
}

/* Safe Explore Button Styles */
button.smf-explore-btn,
a.smf-explore-btn,
.smf-explore-btn {
  display: inline-block !important;
  margin-top: 15px !important;
  padding: 10px 24px !important;
  border: 2px solid var(--color-teal) !important;
  color: var(--color-teal) !important;
  border-radius: 50px !important;
  background-color: transparent !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

button.smf-explore-btn:hover,
a.smf-explore-btn:hover,
.smf-explore-btn:hover {
  background-color: var(--color-teal) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0,168,150,0.3) !important;
}

/* Safe Explore Button Styles Hardcoded Colors */
button.smf-explore-btn,
a.smf-explore-btn,
.smf-explore-btn {
  display: inline-block !important;
  margin-top: 15px !important;
  padding: 10px 24px !important;
  border: 2px solid #00a896 !important;
  color: #00a896 !important;
  border-radius: 50px !important;
  background-color: transparent !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

button.smf-explore-btn:hover,
a.smf-explore-btn:hover,
.smf-explore-btn:hover {
  background-color: #00a896 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0,168,150,0.3) !important;
}

/* Modal Gallery Thumbnails */
.smf-modal-thumbnails {
  display: flex;
  gap: 12px;
  padding: 15px 20px;
  overflow-x: auto;
  justify-content: center;
  background: #f4f6f8;
  border-bottom: 1px solid #e1e5eb;
}

.smf-modal-thumbnail {
  width: 90px;
  height: 65px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 3px solid transparent;
  opacity: 0.5;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.smf-modal-thumbnail:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.smf-modal-thumbnail.active {
  border-color: #00a896 !important;
  opacity: 1;
  transform: scale(1.05);
}

/* Full Width Gallery Modal Overrides */
.smf-modal-content {
  max-width: 1200px !important;
  width: 95% !important;
  background: #000 !important; /* Dark background for gallery */
  border-radius: 8px !important;
}

.smf-modal-gallery img#modal-event-main-img {
  height: 75vh !important;
  max-height: 800px !important;
  width: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

.smf-modal-thumbnails {
  background: #111 !important;
  border-top: 1px solid #333 !important;
  border-bottom: none !important;
}

.smf-modal-close {
  top: 20px !important;
  right: 20px !important;
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

.smf-modal-close:hover {
  background: var(--color-teal) !important;
}

/* Bento Grid Modal Styles */
.bento-modal-content {
  width: 95vw !important;
  max-width: 1400px !important;
  height: 90vh !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden !important; /* No vertical scroll */
  padding: 0 !important;
}

.smf-bento-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.smf-bento-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}

.smf-bento-grid img:hover {
  transform: scale(1.02);
  z-index: 2;
  position: relative;
}

/* 1st image large left */
.smf-bento-grid img:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

/* 2nd image top right */
.smf-bento-grid img:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

/* 3rd image bottom right */
.smf-bento-grid img:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .smf-bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
  .smf-bento-grid img:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .smf-bento-grid img:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .smf-bento-grid img:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .bento-modal-content {
    height: 85vh !important;
  }
}

/* Premium Bento Modal UI Enhancements */
.bento-modal-content {
  width: 85vw !important; /* Slightly smaller for premium look */
  max-width: 1400px !important;
  height: 85vh !important;
  background: rgba(15, 15, 15, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  padding: 25px !important;
  overflow: hidden !important;
}

.smf-modal-close {
  position: fixed !important;
  top: 25px !important;
  right: 30px !important;
  width: 50px !important;
  height: 50px !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

.smf-modal-close:hover {
  background: #ff4757 !important;
  border-color: #ff4757 !important;
  transform: rotate(90deg) scale(1.15) !important;
  box-shadow: 0 10px 25px rgba(255, 71, 87, 0.4) !important;
}

.smf-bento-grid {
  gap: 20px !important; /* Slightly larger gap */
}

.smf-bento-grid img {
  border-radius: 14px !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
}

/* Dynamic Multi-Image Bento Grid Update */
.bento-modal-content {
  overflow-y: auto !important; /* Enable scrolling for multiple images */
  scrollbar-width: none !important; /* Hide scrollbar for clean UI (Firefox) */
}
.bento-modal-content::-webkit-scrollbar {
  display: none !important; /* Hide scrollbar for clean UI (Webkit) */
}

.smf-bento-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  grid-auto-rows: 300px !important;
  grid-auto-flow: dense !important;
  height: auto !important;
  min-height: 100% !important;
}

/* Reset any previous strict nth-child limits */
.smf-bento-grid img {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}

/* Create an infinite repeating Bento pattern for N images */
/* 1st image large */
.smf-bento-grid img:nth-child(5n + 1) {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}
/* 4th image wide */
.smf-bento-grid img:nth-child(5n + 4) {
  grid-column: span 2 !important;
  grid-row: span 1 !important;
}

/* Mobile Fallback */
@media (max-width: 768px) {
  .smf-bento-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 250px !important;
  }
  .smf-bento-grid img {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* Adaptive Bento Grid - Fills ALL space dynamically */
.smf-bento-grid {
  display: grid !important;
  gap: 15px !important;
  width: 100% !important;
  height: 100% !important; /* Fill modal */
}

/* 1 Image */
.smf-bento-grid.grid-count-1 {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}
.grid-count-1 img { grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; }

/* 2 Images */
.smf-bento-grid.grid-count-2 {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr !important;
}
.grid-count-2 img:nth-child(1) { grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; }
.grid-count-2 img:nth-child(2) { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }

/* 3 Images */
.smf-bento-grid.grid-count-3 {
  grid-template-columns: 2fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
}
.grid-count-3 img:nth-child(1) { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; }
.grid-count-3 img:nth-child(2) { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
.grid-count-3 img:nth-child(3) { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }

/* 4 Images */
.smf-bento-grid.grid-count-4 {
  grid-template-columns: 2fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
}
.grid-count-4 img:nth-child(1) { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; }
.grid-count-4 img:nth-child(2) { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
.grid-count-4 img:nth-child(3) { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
.grid-count-4 img:nth-child(4) { grid-column: 2 / 4 !important; grid-row: 2 / 3 !important; }

/* 5 Images */
.smf-bento-grid.grid-count-5 {
  grid-template-columns: 2fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
}
.grid-count-5 img:nth-child(1) { grid-column: 1 / 2 !important; grid-row: 1 / 3 !important; }
.grid-count-5 img:nth-child(2) { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
.grid-count-5 img:nth-child(3) { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
.grid-count-5 img:nth-child(4) { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; }
.grid-count-5 img:nth-child(5) { grid-column: 3 / 4 !important; grid-row: 2 / 3 !important; }

/* 6+ Images (Fallback to auto grid) */
.smf-bento-grid.grid-count-many {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  grid-auto-rows: 250px !important;
  height: auto !important; /* Allow scroll */
}
.grid-count-many img {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
}

/* Base image rules */
.smf-bento-grid img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Save Ganga Page - Improve Acronyms & Players Readability */
.sg-ref-row dt {
  color: #008778 !important; /* Slightly darker teal for better contrast */
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

.sg-ref-row dd {
  color: #2c3e50 !important; /* Dark slate grey for maximum readability */
  font-weight: 500 !important;
  font-size: 1rem !important;
}

.sg-ref-card {
  border: 1px solid #cbd5e1 !important; /* More visible border */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

body.dark-mode .sg-ref-row dt {
  color: #20c997 !important; /* Brighter teal for dark mode */
}

body.dark-mode .sg-ref-row dd {
  color: #f8f9fa !important; /* Almost white for dark mode */
}

/* Dropdown Menu Styles */
.nav-links .has-dropdown,
.nav-links .menu-item-has-children {
  position: relative;
}

.nav-links .has-dropdown > a::after,
.nav-links .menu-item-has-children > a::after {
  content: '';
  width: 0;
  height: 0;
  margin-top: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.72;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-links .has-dropdown:hover > a::after,
.nav-links .menu-item-has-children:hover > a::after,
.nav-links .has-dropdown:focus-within > a::after,
.nav-links .menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-links .has-dropdown::before,
.nav-links .menu-item-has-children::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.nav-links .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #fff;
  width: max-content;
  min-width: 160px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 200;
  list-style: none;
  margin: 0;
}

.nav-links .has-dropdown:hover .sub-menu,
.nav-links .menu-item-has-children:hover .sub-menu,
.nav-links .has-dropdown:focus-within .sub-menu,
.nav-links .menu-item-has-children:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-links .sub-menu li {
  display: block;
  width: 100%;
}

.nav-links .sub-menu a {
  display: block;
  text-align: left;
  padding: 0.72rem 1rem;
  color: var(--color-text, #333);
  font-size: 0.92rem;
  font-weight: 600;
  min-height: auto;
  min-width: 132px;
  border-radius: 8px;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.nav-links .sub-menu a::after {
  display: none;
}

.nav-links .sub-menu a:hover,
.nav-links .sub-menu a.active,
.nav-links .sub-menu .current-menu-item > a {
  background: rgba(0,166,166,0.08);
  color: var(--color-primary, #00A6A6);
  box-shadow: none;
}

.navbar.scrolled .nav-links .sub-menu a {
  color: var(--color-text, #333);
}

.navbar.scrolled .nav-links .sub-menu a:hover,
.navbar.scrolled .nav-links .sub-menu a.active,
.navbar.scrolled .nav-links .sub-menu .current-menu-item > a {
  color: var(--color-primary, #00A6A6);
}

@media (max-width: 1080px) {
  .nav-links .has-dropdown::before,
  .nav-links .menu-item-has-children::before {
    display: none;
  }

  .nav-links .sub-menu {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    background: transparent;
    border: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 0.15rem 0 0.35rem 0.85rem;
    margin: 0;
  }

  .nav-links .sub-menu:not(.is-open) {
    display: none;
  }

  .nav-links .sub-menu.is-open {
    display: block;
    border-left: 2px solid rgba(0, 166, 166, 0.25);
    margin-left: 0.35rem;
  }

  .nav-links .sub-menu a {
    padding: 0.68rem 0.9rem;
    font-size: 0.92rem;
    color: var(--color-text) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nav-links .has-dropdown > a::after,
  .nav-links .menu-item-has-children > a::after {
    margin-left: auto;
  }

  .nav-links .has-dropdown.is-open > a::after,
  .nav-links .menu-item-has-children.is-open > a::after {
    transform: rotate(180deg);
  }
}

/* ===================== EVENT DETAIL PAGE ===================== */
.smf-event-detail {
  background: var(--color-bg-light);
}

.smf-event-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.smf-event-breadcrumb a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.smf-event-breadcrumb a:hover {
  color: var(--color-accent);
}

.smf-event-detail-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
}

.smf-event-detail-location {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.smf-event-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.5rem;
  align-items: start;
}

.smf-event-detail-overview {
  margin-bottom: 2rem;
  padding-bottom: 0.25rem;
}

.smf-event-detail-sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
}

.smf-event-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.35rem;
  padding: 0.72rem 1.1rem;
  border: 1px solid rgba(0, 166, 166, 0.22);
  border-radius: var(--radius-full);
  background: rgba(0, 166, 166, 0.08);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  transition: var(--transition-fast);
}

.smf-event-back-link:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.smf-event-detail-gallery {
  margin-bottom: 2.5rem;
}

.smf-event-overview-text {
  max-width: 760px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.smf-event-overview-text p {
  margin: 0;
}

.smf-event-section-title {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  margin-bottom: 1rem;
}

.smf-event-gallery-grid {
  min-height: 420px;
  height: auto !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.smf-event-gallery-grid img {
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.smf-event-gallery-grid img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.smf-event-detail-overview .entry-content p,
.smf-event-overview-text p {
  margin-bottom: 0;
}

.smf-event-gallery-grid {
  margin-top: 0;
}

.smf-event-detail-actions {
  margin-top: 1rem;
}

.smf-event-sidebar-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.smf-event-sidebar-card h3 {
  font-family: var(--font-head);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.smf-event-sidebar-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.smf-event-sidebar-card li {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}

.smf-event-sidebar-card li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.smf-event-sidebar-card li strong {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.smf-event-recent-link {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}

.smf-event-recent-link:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.smf-event-recent-link strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.smf-event-recent-link span {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.smf-event-recent-link:hover strong {
  color: var(--color-teal);
}

.smf-event-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 20, 32, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.smf-event-lightbox[hidden] {
  display: none !important;
}

.smf-event-lightbox img {
  max-width: min(1100px, 100%);
  max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.smf-event-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 992px) {
  .smf-event-detail-grid {
    grid-template-columns: 1fr;
  }
  .smf-event-detail-sidebar {
    position: static;
  }
}

/* ============================================================
   MFM (MOTHERS FOR MOTHER) SUB-SITE COMPONENT STYLES
   ============================================================ */
.mfm-navbar .mfm-brand .mfm-logo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: contain;
  background: #ffffff;
  padding: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  border: 1px solid rgba(0, 166, 166, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.mfm-navbar .mfm-brand:hover .mfm-logo-img {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(0, 166, 166, 0.3);
}

.mfm-navbar .mfm-brand .logo-main {
  color: var(--color-primary);
  font-weight: 800;
}

.mfm-navbar .mfm-brand .logo-sub {
  color: var(--color-text-muted);
}

.mfm-nav-actions .mfm-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(11, 31, 51, 0.07);
  border: 1px solid rgba(11, 31, 51, 0.2);
  color: #0b1f33 !important;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
  text-decoration: none;
}

.mfm-nav-actions .mfm-back-btn:hover,
.mfm-nav-actions .mfm-back-btn:focus,
.mfm-nav-actions .mfm-back-btn:active {
  background: #e2f1f1 !important;
  color: #0b1f33 !important;
  border-color: rgba(0, 166, 166, 0.6) !important;
  box-shadow: 0 2px 8px rgba(0, 166, 166, 0.2);
}
.mfm-nav-actions .mfm-back-btn:hover svg,
.mfm-nav-actions .mfm-back-btn:focus svg,
.mfm-nav-actions .mfm-back-btn:active svg {
  color: #008080 !important;
}

.mfm-gallery-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 166, 166, 0.35);
}

.mfm-gallery-card-img:hover .mfm-gallery-zoom-overlay {
  opacity: 1;
}

.mfm-gallery-card-img:hover img {
  transform: scale(1.04);
}

.mfm-purpose-card:hover,
.mfm-pillar-card:hover,
.mfm-value-card:hover,
.mfm-work-card:hover,
.mfm-event-pillar:hover,
.mfm-program-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 166, 166, 0.35);
}

.mfm-subsite-body .page-banner {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.mfm-tab-btn.active {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

@media (max-width: 768px) {
  .mfm-hero-stats {
    gap: 1.25rem;
  }
  .mfm-intro-grid,
  .mfm-split-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .mfm-president-card {
    position: static;
    margin-top: 1rem;
  }
}

/* ============================================================
   DONOR CATEGORY NAVIGATOR & DONATE CARD ENHANCEMENTS
   ============================================================ */
.donate-donor-type-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.75rem;
}
.donor-switch-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.donor-switch-pills {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 166, 166, 0.08);
  border: 1px solid rgba(0, 166, 166, 0.2);
  border-radius: 9999px;
  padding: 5px;
  gap: 6px;
}
.donor-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-dark);
  text-decoration: none;
  transition: var(--transition-fast);
}
.donor-pill:hover,
.donor-pill.is-active {
  background: white;
  color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(0, 166, 166, 0.16);
}
.pill-flag {
  font-size: 1.1rem;
  line-height: 1;
}

.donate-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.donate-card-head h3 {
  margin-bottom: 0 !important;
}
.donate-currency-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 9999px;
  background: rgba(0, 166, 166, 0.12);
  color: var(--color-primary);
  border: 1px solid rgba(0, 166, 166, 0.25);
}
.donate-intl-prompt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #334155;
  background: #f0fdfa;
  border: 1px dashed rgba(0, 166, 166, 0.4);
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
}
.donate-intl-globe {
  font-size: 1.15rem;
  line-height: 1;
}
.donate-intl-prompt a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: underline;
  transition: color var(--transition-fast);
}
.donate-intl-prompt a:hover {
  color: #007777;
}

/* ============================================================
   FCRA & INTERNATIONAL DONATIONS SECTION
   ============================================================ */
.fcra-section {
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 5rem 0;
  overflow: hidden;
}
.fcra-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.fcra-shape-1 {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 166, 166, 0.07) 0%, transparent 70%);
  border-radius: 50%;
}
.fcra-shape-2 {
  position: absolute;
  bottom: -150px;
  left: -100px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(14, 116, 144, 0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.fcra-section .container {
  position: relative;
  z-index: 1;
}

.fcra-header {
  max-width: 860px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.fcra-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin-top: 1rem;
}
.fcra-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.fcra-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.05rem;
  border-radius: 9999px;
  background: white;
  border: 1px solid rgba(0, 166, 166, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
}
.fcra-badge-icon {
  font-size: 1rem;
  line-height: 1;
}

.fcra-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
}

.fcra-card {
  position: relative;
  background: white;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
  padding: clamp(1.4rem, 3vw, 2.25rem);
}
.fcra-card--bank::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #00a6a6 0%, #0284c7 100%);
  border-radius: 20px 20px 0 0;
}
.fcra-card-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.fcra-bank-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.fcra-bank-logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #002b49 0%, #004b7a 100%);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(0, 43, 73, 0.25);
  flex-shrink: 0;
}
.fcra-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.2rem;
}
.fcra-card-subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}
.fcra-status-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
  white-space: nowrap;
}
.fcra-card-intro {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #64748b;
  margin-bottom: 1.25rem;
}

.fcra-bank-table {
  display: grid;
  gap: 0.6rem;
}
.fcra-bank-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.05);
  transition: var(--transition-fast);
}
.fcra-bank-row:hover {
  background: #f1f5f9;
  border-color: rgba(0, 166, 166, 0.25);
}
.fcra-bank-row--highlight {
  background: #f0fdf4 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}
.fcra-bank-row--swift {
  background: #f0fdfa !important;
  border-color: rgba(0, 166, 166, 0.4) !important;
}
.fcra-bank-meta {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.fcra-bank-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.fcra-bank-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  word-break: break-word;
}
.fcra-bank-val--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.04em;
}
.fcra-text-teal {
  color: #008080 !important;
  font-weight: 800;
  font-size: 1.05rem;
}
.fcra-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.75rem;
  border-radius: 6px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.16);
  color: #475569;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.fcra-copy-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.fcra-copy-btn.is-copied {
  background: #10b981 !important;
  color: white !important;
  border-color: #10b981 !important;
}

.fcra-card-actions {
  margin-top: 1.25rem;
}
.btn-copy-all-fcra {
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 12px;
  background: #0b1f33;
  color: white;
  border: none;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: var(--transition-med);
  box-shadow: 0 4px 14px rgba(11, 31, 51, 0.2);
}
.btn-copy-all-fcra:hover {
  background: var(--color-primary);
  box-shadow: 0 6px 20px rgba(0, 166, 166, 0.35);
  transform: translateY(-2px);
}
.btn-copy-all-fcra.is-copied {
  background: #10b981 !important;
  color: white !important;
}

/* Right Column: Notices & Guidance */
.fcra-info-col {
  display: grid;
  gap: 1.5rem;
}
.fcra-notice-card {
  background: white;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 1.6rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.fcra-notice-card--warning {
  background: #fffbeb;
  border-color: rgba(245, 158, 11, 0.35);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.fcra-notice-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.fcra-notice-body h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 0.4rem;
}
.fcra-notice-body p {
  font-size: 0.86rem;
  line-height: 1.58;
  color: #78350f;
  margin: 0;
}

.fcra-guide-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}
.fcra-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.15rem;
}
.fcra-steps-list li {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
}
.fcra-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 166, 166, 0.12);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--color-primary);
  margin-top: 0.1rem;
}
.fcra-step-content strong {
  display: block;
  font-size: 0.92rem;
  color: #0f172a;
  margin-bottom: 0.25rem;
}
.fcra-step-content p {
  font-size: 0.84rem;
  line-height: 1.52;
  color: #64748b;
  margin: 0;
}
.fcra-step-content code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.fcra-notice-card--contact {
  background: linear-gradient(135deg, #0b2238 0%, #103452 100%);
  color: white;
  border: 1px solid rgba(0, 166, 166, 0.35);
  box-shadow: 0 12px 32px rgba(11, 34, 56, 0.25);
}
.fcra-notice-card--contact h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.45rem;
}
.fcra-notice-card--contact p {
  font-size: 0.86rem;
  color: #94a3b8;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}
.fcra-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.btn-fcra-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #00a6a6 0%, #2dd4bf 100%);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 166, 166, 0.3);
  transition: var(--transition-med);
}
.btn-fcra-email:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 166, 166, 0.45);
  color: white;
}
.fcra-direct-contact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: #cbd5e1;
}
.fcra-direct-contact strong {
  color: #38bdf8;
  font-weight: 700;
}

@media (max-width: 991px) {
  .fcra-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}
@media (max-width: 640px) {
  .fcra-bank-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .fcra-copy-btn {
    align-self: flex-end;
  }
  .donate-donor-type-switch {
    flex-direction: column;
    gap: 0.6rem;
  }
  .donor-switch-pills {
    width: 100%;
    flex-direction: column;
    border-radius: var(--radius-lg);
  }
  .donor-pill {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   24. MARATHON (RUN FOR CLEAN GANGA) PAGE STYLES
   ============================================================ */
.smf-marathon-page {
  background: #f8fafc;
}

/* Marathon Hero */
.marathon-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 4rem) 1.5rem 5rem;
  background: #0b1f33;
}
.marathon-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.marathon-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.65) saturate(1.2);
  transform: scale(1.04);
}
.marathon-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,31,51,0.85) 0%, rgba(11,31,51,0.65) 50%, rgba(11,31,51,0.95) 100%);
  backdrop-filter: blur(2px);
}
.marathon-hero-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
.marathon-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.2rem;
  border-radius: var(--radius-full);
  background: rgba(0, 166, 166, 0.25);
  border: 1px solid rgba(0, 225, 225, 0.45);
  color: #a5f3fc;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.marathon-badge-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 12px #22d3ee;
  animation: pulse-dot 2s infinite ease-in-out;
}
.marathon-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 4.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 24px rgba(0,0,0,0.7);
}
.highlight-cyan {
  background: linear-gradient(135deg, #38bdf8 0%, #2dd4bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.marathon-hero-subtitle {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  max-width: 780px;
  margin: 0 auto 2.5rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.marathon-hero-subtitle strong {
  color: #38bdf8;
}

/* Marathon Stats Banner */
.marathon-stats-banner {
  background: linear-gradient(180deg, #0b1f33 0%, #0d2238 100%);
  padding: 0 1.5rem 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.marathon-stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1.25rem 2rem;
  border-radius: var(--radius-xl);
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  max-width: 840px;
  margin: 0 auto;
}
.mstat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mstat-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  color: #38bdf8;
  line-height: 1.1;
}
.mstat-lbl {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.25rem;
}
.mstat-divider {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,0.2);
}
.marathon-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* Leader Spotlight Section */
.marathon-leader-section {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
}
.marathon-leader-grid {
  display: grid;
  grid-template-columns: minmax(380px, 520px) 1fr;
  gap: 3.5rem;
  align-items: center;
}
.marathon-leader-photo-wrap {
  position: relative;
}
.marathon-photo-frame {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11,31,51,0.22);
  border: 4px solid #ffffff;
  background: #0b1f33;
}
.marathon-leader-img {
  width: 100%;
  height: 520px;
  display: block;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
}
.marathon-photo-frame:hover .marathon-leader-img {
  transform: scale(1.02);
}
.marathon-photo-tag {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(180deg, transparent 0%, rgba(11,31,51,0.95) 60%);
  color: #ffffff;
}
.marathon-photo-tag strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
}
.marathon-photo-tag span {
  font-size: 0.82rem;
  color: #38bdf8;
  display: block;
  margin-top: 0.2rem;
}
.marathon-quote-box {
  position: relative;
  padding: 1.5rem 1.8rem 1.5rem 3.5rem;
  background: #f0fdfa;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: 1.5rem 0 1.8rem;
}
.marathon-quote-box .quote-icon {
  position: absolute;
  top: 1.2rem;
  left: 1rem;
  color: var(--color-primary);
  opacity: 0.4;
}
.marathon-quote-box p {
  font-size: 1.05rem;
  font-style: italic;
  color: #0f172a;
  line-height: 1.7;
}
.leader-body-text {
  font-size: 1.02rem;
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: 2rem;
}
.leader-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.pillar-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.pillar-icon {
  font-size: 1.8rem;
  line-height: 1;
}
.pillar-item strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-dark);
  margin-bottom: 0.3rem;
}
.pillar-item p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Event Highlights Cards */
.marathon-gallery-section {
  background: #f1f5f9;
}
.section-header-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}
.section-kicker {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.text-cyan {
  color: #38bdf8 !important;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.25;
  margin-bottom: 1rem;
}
.section-desc {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.marathon-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
}
.mhighlight-card {
  background: #0b1f33;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 3px solid #ffffff;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
}
.mhighlight-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(11,31,51,0.18);
}
.mhighlight-img-box {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  background: #0b1f33;
}
.mhighlight-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}
.mhighlight-card:hover .mhighlight-img-box img {
  transform: scale(1.06);
}
.mhighlight-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(11,31,51,0.85);
  backdrop-filter: blur(6px);
  color: #38bdf8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mhighlight-body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mhighlight-title {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.6rem;
}
.mhighlight-desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Marathon Videos Section */
.marathon-videos-section {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border);
}
.marathon-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 2rem;
}
.mvideo-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mvideo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}
.mvideo-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.mvideo-player-wrap iframe,
.mvideo-player-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.mvideo-body {
  padding: 1.25rem 1.5rem;
}
.mvideo-title {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.35rem;
}
.mvideo-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Sponsors Section */
.marathon-sponsors-section {
  background: #ffffff;
}
.title-sponsor-card {
  position: relative;
  background: linear-gradient(135deg, #0b1f33 0%, #133b5c 100%);
  border-radius: var(--radius-xl);
  padding: 2.5rem 3rem;
  color: #ffffff;
  margin-bottom: 3rem;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(11,31,51,0.16);
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.title-sponsor-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
}
.title-sponsor-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: center;
}
.ts-logo-box {
  background: rgba(255,255,255,0.1);
  border: 2px dashed rgba(255,255,255,0.3);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
}
.ts-brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.ts-info h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.75rem;
}
.ts-info p {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
}
.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.sponsor-card {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.sponsor-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
.sponsor-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  background: rgba(0, 166, 166, 0.1);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.8rem;
}
.sponsor-name {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: 0.35rem;
}
.sponsor-role {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 0.65rem;
}
.sponsor-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Route & Timeline Section */
.marathon-route-section {
  background: #f1f5f9;
}
.marathon-route-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: flex-start;
}
.route-lead {
  font-size: 1.08rem;
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 2.2rem;
}
.route-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  padding-left: 0.5rem;
}
.route-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  position: relative;
}
.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 166, 166, 0.35);
}
.route-step strong {
  display: block;
  font-size: 1.05rem;
  color: var(--color-dark);
  margin-bottom: 0.25rem;
}
.route-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}
.race-features-card {
  background: #ffffff;
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
}
.race-features-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid #f1f5f9;
}
.race-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.race-feature-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.rf-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.race-feature-list strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-dark);
  margin-bottom: 0.2rem;
}
.race-feature-list p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
}

/* Call to Action Box */
.marathon-cta-section {
  background: #0b1f33;
  color: #ffffff;
}
.marathon-cta-box {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.marathon-cta-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.marathon-cta-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.marathon-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Responsive queries for Marathon */
@media (max-width: 991px) {
  .marathon-leader-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .marathon-route-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .title-sponsor-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .marathon-stats-strip {
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.25rem 1rem;
  }
  .mstat-divider {
    display: none;
  }
  .mstat-card {
    flex: 1 1 40%;
  }
  .leader-pillars {
    grid-template-columns: 1fr;
  }
  .title-sponsor-card {
    padding: 2rem 1.5rem;
  }
}