/* ============================================================
   uphelplinegov.com — Master Stylesheet
   Brand: red-orange (#FF4D00) primary + warm peach cream + golden accent
   ============================================================ */

:root {
  /* Primary brand = premium orange.
     Variable names kept for backward compatibility across the site. */
  --mf-orange:      #FF4D00;   /* red-orange (primary) */
  --mf-orange-dk:   #B83500;   /* deep burnt red-orange */
  --mf-orange-sf:   #FFE5D6;   /* soft peach tint */
  --mf-orange-soft: #FFE5D6;   /* alias used by animations.css */
  --mf-yellow:      #FFC845;   /* warm golden yellow (accent / CTA) */
  --mf-yellow-dk:   #E0A41B;
  --mf-red:         #C8102E;
  --mf-blue:        #1E5BA8;   /* kept as a contrast accent */
  --mf-blue-dk:     #14437D;
  --mf-green:       #138808;   /* Indian-flag fresh green (secondary accent) */
  --mf-green-dk:    #0B5C04;
  --mf-green-sf:    #E1F4E5;   /* soft mint tint */
  --mf-cream:       #FFF7F2;   /* warm peach cream backdrop */
  --mf-cream-2:     #FFFCF9;
  --mf-ink:         #2A1206;   /* warm dark — red-tinted near-black */
  --mf-grey:        #7A5C4B;   /* warm grey */
  --mf-line:        #FFD0B5;   /* warm peach border */
  --mf-shadow-sm:   0 4px 14px rgba(255, 77, 0, .10);
  --mf-shadow-md:   0 10px 28px rgba(255, 77, 0, .15);
  --mf-shadow-lg:   0 22px 48px rgba(255, 77, 0, .28);
  --mf-radius:      14px;
  --mf-ease:        cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--mf-ink);
  background: #fff;
  line-height: 1.65;
  font-size: clamp(13.5px, 1.4vw, 14.5px);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(1.65rem, 5vw, 3rem); }
h2 { font-size: clamp(1.25rem, 4vw, 2.1rem); }
h3 { font-size: clamp(1.05rem, 2.6vw, 1.4rem); }
h4 { font-size: clamp(0.95rem, 2.2vw, 1.2rem); }
h5 { font-size: clamp(0.9rem, 1.8vw, 1.1rem); }
h6 { font-size: clamp(0.82rem, 1.4vw, 0.92rem); }

.lead { font-size: clamp(0.95rem, 2.1vw, 1.12rem); line-height: 1.6; }
.display-1 { font-size: clamp(2.5rem, 8vw, 5rem); }
.display-4 { font-size: clamp(1.75rem, 5vw, 3rem); }
.display-5 { font-size: clamp(1.5rem, 4.4vw, 2.6rem); }
.display-6 { font-size: clamp(1.3rem, 3.5vw, 2.2rem); }

a { color: var(--mf-orange); text-decoration: none; transition: color .2s; }
a:hover { color: var(--mf-orange-dk); }
img { max-width: 100%; height: auto; }

.page-fade { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Buttons =====
   Primary action = blue (.btn-primary, .btn-outline-primary)
   Donate / Report CTA = vibrant yellow (.btn-donate) — pops against the orange site
*/
.btn-donate {
  background: var(--mf-yellow);
  color: var(--mf-ink);
  font-weight: 700;
  border-radius: 30px;
  padding: 9px 22px;
  border: 0;
  transition: transform .35s var(--mf-ease), box-shadow .35s var(--mf-ease), background .25s, color .25s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(255, 200, 69, .35);
}
.btn-donate:hover, .btn-donate:focus {
  background: var(--mf-yellow-dk);
  color: var(--mf-ink);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 32px rgba(255, 200, 69, .55), 0 0 0 4px rgba(255, 200, 69, .18);
}
.btn-primary {
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  border: 0;
  color: #fff;
  border-radius: 30px;
  padding: 9px 22px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(255, 77, 0, .25);
  transition: transform .35s var(--mf-ease), box-shadow .35s var(--mf-ease), filter .25s;
}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.06);
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 36px rgba(255, 77, 0, .42), 0 0 0 4px rgba(255, 77, 0, .14);
}
.btn-outline-primary {
  color: var(--mf-orange);
  border: 1.5px solid var(--mf-orange);
  border-radius: 30px;
  padding: 9px 22px;
  font-weight: 600;
  transition: all .3s var(--mf-ease);
}
.btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  border-color: var(--mf-orange-dk);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(255, 77, 0, .25);
}

/* ===== Utility top bar ===== */
.utility-bar {
  background: linear-gradient(135deg, var(--mf-orange-dk) 0%, var(--mf-orange) 100%);
  color: #fff;
  padding: 8px 0;
  font-size: 13px;
}
.utility-bar a { color: #fff; }
.utility-bar a:hover { color: var(--mf-yellow); }
.utility-bar i { margin-right: 4px; }

/* ===== Main navbar ===== */
.main-navbar {
  background: #fff;
  box-shadow: var(--mf-shadow-sm);
  padding: 5px 0;
  transition: padding .2s, box-shadow .2s;
}
.main-navbar.scrolled {
  padding: 5px 0;
  box-shadow: var(--mf-shadow-md);
}
.navbar-brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--mf-orange-dk);
}
.brand-tagline {
  font-size: 11px;
  color: var(--mf-grey);
  letter-spacing: .03em;
}
.main-navbar .nav-link {
  color: var(--mf-ink);
  font-weight: 500;
  padding: 8px 14px !important;
  position: relative;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active { color: var(--mf-orange); }
.main-navbar .nav-link.active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--mf-orange);
}
.dropdown-menu { border: 0; box-shadow: var(--mf-shadow-md); border-radius: 8px; padding: 6px; }
.dropdown-item { padding: 8px 14px; border-radius: 6px; font-size: 14px; }
.dropdown-item:hover { background: var(--mf-cream); color: var(--mf-orange); }

.nav-donate-mobile { font-size: 13px; padding: 6px 14px; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 78vh;
  background: linear-gradient(135deg, var(--mf-cream) 0%, var(--mf-orange-sf) 100%);
  padding: 80px 0;
  overflow: hidden;
}
.hero-slim {
  min-height: 38vh;
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  color: #fff;
  padding: 60px 0;
  display: flex;
  align-items: center;
}
.hero-slim h1 { color: #fff; }
.hero-slim .lead { color: rgba(255,255,255,.92); }

/* Hero swiper navigation arrows — smaller, subtler */
.hero-swiper { --swiper-navigation-size: 18px; }
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  opacity: .75;
  transition: opacity .2s, background .2s;
}
.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .55);
}
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after { font-weight: 700; }
@media (max-width: 768px) {
  .hero-swiper { --swiper-navigation-size: 14px; }
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next { width: 28px; height: 28px; }
}
.breadcrumb { background: transparent; }
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb-item.active { color: #fff; }

/* ===== Section utilities ===== */
.section { padding: 80px 0; }
.section-sm { padding: 50px 0; }
.section-cream { background: var(--mf-cream); }
.section-dark { background: var(--mf-ink); color: #fff; }

.eyebrow {
  display: inline-block;
  color: var(--mf-orange);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 8px;
}
.section-heading {
  position: relative;
  margin-bottom: 12px;
}
.section-heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--mf-orange);
  margin-top: 12px;
  border-radius: 3px;
}
.text-center .section-heading::after { margin-left: auto; margin-right: auto; }

/* ===== Focus area cards ===== */
.focus-card {
  display: block;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  padding: 26px 22px;
  height: 100%;
  transition: all .3s;
  color: var(--mf-ink);
}
.focus-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mf-shadow-lg);
  border-color: var(--mf-orange);
  color: var(--mf-ink);
}
.focus-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 14px;
}
.focus-link {
  color: var(--mf-orange);
  font-weight: 600;
  font-size: 14px;
}

/* ===== Campaign cards ===== */
.campaign-card {
  background: #fff;
  border-radius: var(--mf-radius);
  overflow: hidden;
  box-shadow: var(--mf-shadow-sm);
  transition: all .3s;
  display: flex;
  flex-direction: column;
}
.campaign-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--mf-shadow-lg);
}
.campaign-image {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--mf-cream), var(--mf-orange-sf));
}
.campaign-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.campaign-card:hover .campaign-image img { transform: scale(1.05); }
.campaign-emoji {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
}
.campaign-badge {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 11px;
}
.campaign-category {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(255,255,255,.95);
  color: var(--mf-orange-dk);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
}
.campaign-body { flex: 1; display: flex; flex-direction: column; }
.campaign-title { color: var(--mf-ink); margin-bottom: 8px; }
.campaign-summary { flex: 1; }
.campaign-progress .progress { height: 8px; background: var(--mf-cream); border-radius: 4px; }

/* ===== Trustee cards ===== */
.trustee-card {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  padding: 28px 20px;
  transition: all .3s;
}
.trustee-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-md); }
.trustee-avatar {
  width: 90px; height: 90px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
}
.trustee-role { font-weight: 600; color: var(--mf-orange); }
.trustee-bio { color: var(--mf-grey); }

/* ===== Stats / counter band ===== */
.stat-band {
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  color: #fff;
  padding: 60px 0;
  text-align: center;
}
.stat-num {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.stat-label { font-size: 14px; opacity: .9; margin-top: 6px; }

/* ===== CTA bands ===== */
.cta-band {
  background: linear-gradient(135deg, var(--mf-blue), var(--mf-blue-dk));
  color: #fff;
  padding: 70px 0;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band .btn-donate { background: var(--mf-yellow); color: var(--mf-ink); }
.cta-band .btn-donate:hover { background: #fff; }

/* ===== Newsletter band ===== */
.newsletter-band {
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  color: #fff;
}
.newsletter-band h3 { color: #fff; }

/* ===== Footer ===== */
.site-footer {
  background: #1A1410;
  color: #D1C7B8;
}
.footer-heading {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: #D1C7B8; font-size: 14px; }
.footer-links a:hover { color: var(--mf-orange); }
.footer-contact { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.footer-contact li { margin-bottom: 10px; padding-left: 24px; position: relative; line-height: 1.5; }
.footer-contact li i { position: absolute; left: 0; top: 4px; color: var(--mf-orange); }
.footer-contact a { color: #D1C7B8; }
.footer-contact a:hover { color: var(--mf-orange); }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  margin-right: 6px;
  transition: all .2s;
}
.footer-social a:hover { background: var(--mf-orange); transform: translateY(-2px); }
.footer-divider { border-color: rgba(255,255,255,.1); }

/* ===== Sticky donate FAB ===== */
.donate-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--mf-orange);
  color: #fff;
  padding: 12px 22px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  box-shadow: 0 12px 28px rgba(255, 77, 0, .45);
  z-index: 99;
  animation: fabPulse 2.4s infinite;
}
.donate-fab:hover { background: var(--mf-orange-dk); color: #fff; transform: scale(1.05); }
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(255, 77, 0, .45); }
  50%      { box-shadow: 0 12px 28px rgba(255, 77, 0, .45), 0 0 0 12px rgba(255, 77, 0, .14); }
}
@media (max-width: 575.98px) {
  .donate-fab {
    left: 16px; right: 16px; bottom: 16px;
    justify-content: center;
    padding: 14px;
    border-radius: 12px;
  }
  .fab-label { font-size: 15px; }
}

/* ===== Back to top ===== */
.back-to-top {
  position: fixed;
  bottom: 90px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mf-orange);
  color: #fff;
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 98;
  box-shadow: var(--mf-shadow-md);
  transition: all .3s var(--mf-ease);
}
.back-to-top.visible { display: flex; }
.back-to-top:hover { background: var(--mf-orange-dk); transform: translateY(-3px) scale(1.05); }
@media (max-width: 575.98px) { .back-to-top { bottom: 80px; right: 16px; } }

/* ===== Donor wall, gallery, etc utilities ===== */
.gallery-item {
  position: relative;
  border-radius: var(--mf-radius);
  overflow: hidden;
  cursor: pointer;
  height: 240px;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.gallery-item:hover img { transform: scale(1.06); }

.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 2px; background: var(--mf-line);
}
.timeline-item { position: relative; margin-bottom: 30px; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -28px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--mf-orange);
  box-shadow: 0 0 0 4px rgba(255, 77, 0, .18);
}

.credential-card {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  padding: 24px;
  text-align: center;
  height: 100%;
  transition: all .3s;
}
.credential-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-md); }
.credential-card i { font-size: 32px; color: var(--mf-orange); }

/* ============================================================
   Responsive — mobile-first font scaling + spacing
   ============================================================ */

/* Tablet (≤991px) */
@media (max-width: 991.98px) {
  .hero { min-height: 56vh; padding: 50px 0; }
  .hero-slim { min-height: auto; padding: 50px 0; }
  .section { padding: 50px 0; }
  .section-sm { padding: 32px 0; }
  .stat-band, .cta-band { padding: 50px 0; }

  .brand-name { font-size: 15px; }
  .brand-tagline { font-size: 10px; }

  /* Trustees */
  .trustee-avatar { width: 76px; height: 76px; font-size: 22px; }

  /* Stat numbers slightly smaller */
  .stat-num { font-size: clamp(1.6rem, 5.5vw, 2.3rem); }
  .stat-label { font-size: 12px; }

  /* Footer columns */
  .site-footer { padding-top: 40px; padding-bottom: 18px; }
  .footer-heading { margin-bottom: 12px; font-size: 12px; }
  .footer-links a, .footer-contact { font-size: 12.5px; }
}

/* Mobile (≤575px) */
@media (max-width: 575.98px) {
  body { font-size: 13.5px; line-height: 1.6; }

  /* Tighter section spacing */
  .section { padding: 40px 0; }
  .section-sm { padding: 24px 0; }
  .hero, .hero-slim { padding: 40px 0; }
  .stat-band, .cta-band { padding: 40px 0; }

  /* Hero swiper text — keep readable */
  .hero h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .hero .lead { font-size: 13.5px; }

  /* Hero slide buttons */
  .hero .btn-lg, .hero-slim .btn-lg { padding: 7px 16px; font-size: 13px; }

  /* Section headings underline closer */
  .section-heading::after { width: 45px; height: 2px; margin-top: 8px; }
  .eyebrow { font-size: 10px; letter-spacing: .12em; }

  /* Cards */
  .focus-card { padding: 20px 16px; }
  .focus-icon { width: 48px; height: 48px; font-size: 20px; }
  .credential-card { padding: 18px 14px; }
  .credential-card i { font-size: 26px; }
  .trustee-card { padding: 20px 14px; }
  .campaign-card { font-size: 12.5px; }
  .campaign-image { height: 170px; }
  .campaign-emoji { font-size: 56px; }
  .campaign-title { font-size: 15px; }

  /* Buttons sized for thumb-tap */
  .btn-donate, .btn-primary, .btn-outline-primary { padding: 7px 14px; font-size: 13px; }
  .btn-lg { padding: 9px 20px !important; font-size: 14px !important; }

  /* Navbar — donate button + brand stay tight */
  .nav-donate-mobile { font-size: 11.5px; padding: 5px 11px; }
  .navbar-brand img { height: 38px; width: 38px; }
  .brand-name { font-size: 14px; }
  .brand-tagline { display: none; }

  /* Utility bar text + icons stay snug */
  .utility-bar { font-size: 11px; padding: 5px 0; }

  /* Pramukh feature cards (home page) */
  .pramukh-feature-img { height: 160px; }
  .pramukh-feature-body { padding: 18px 16px; }
  .pramukh-feature h3 { font-size: 15.5px; }

  /* Form labels + inputs */
  .form-label { font-size: 12.5px; margin-bottom: 4px; }
  .form-control, .form-select { font-size: 13px; }
  .form-control-lg, .form-select-lg { font-size: 14px; padding: 7px 11px; }

  /* Tabs (donate page) */
  .pay-tabs .nav-link { padding: 9px 12px; font-size: 11px; }
  .pay-tabs .nav-link i { font-size: 16px; }
  .pay-content { padding: 20px 14px; }

  /* Tables — make compact */
  .table { font-size: 12px; }

  /* Footer */
  .site-footer { font-size: 12px; }
  .footer-heading { font-size: 11.5px; }
  .footer-social a { width: 32px; height: 32px; }

  /* FAB / back-to-top sizes */
  .donate-fab { padding: 11px; font-size: 13px; }
  .back-to-top { width: 38px; height: 38px; }
}

/* Tiny phones (≤360px) */
@media (max-width: 360px) {
  body { font-size: 13px; }
  .hero h1 { font-size: 1.35rem; }
  .section-heading { font-size: 1.1rem; }
  .pramukh-feature-num { width: 38px; height: 38px; font-size: 16px; }
  .pay-tabs .nav-link span { display: none; }
}

/* ===== Navbar logo + 3-line brand name ===== */
/* Strict 5px top + 5px bottom — no extra vertical space anywhere */
.main-navbar .container { padding-top: 0; padding-bottom: 0; }
.navbar-brand.logo-with-name,
.navbar-brand.logo-only {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 0;          /* kills inline-image baseline gap */
}
/* Circular shield logo — compact, square aspect */
.navbar-brand.logo-with-name img,
.navbar-brand.logo-with-name picture img,
.navbar-brand.logo-only img,
.navbar-brand.logo-only picture img {
  display: block;
  height: 56px !important;
  width: 56px !important;
  max-width: 56px;
  object-fit: contain;
  background: transparent;
  padding: 0;
  margin: 0;
  transition: transform .2s ease;
}

/* Language toggle (English / Hindi) in the utility top bar */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,.30);
  vertical-align: middle;
}
.lang-toggle .lang-btn {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 3px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}
.lang-toggle .lang-btn:hover { color: #fff; }
.lang-toggle .lang-btn.active {
  background: #fff;
  color: #D94E0F;
}

/* ===== Premium mobile language toggle (pill) ===== */
.lang-toggle-mobile {
  background: transparent;
  border: 0 !important;
  padding: 2px;
  box-shadow: none !important;
}
.lang-toggle-mobile .lang-btn {
  color: #7a3c1a;
  font-size: 14px;
  padding: 5px 13px;
  font-weight: 800;
  letter-spacing: .015em;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.lang-toggle-mobile .lang-btn:hover { color: #FF4D00; }
.lang-toggle-mobile .lang-btn.active {
  background: linear-gradient(180deg, #FF6A1A 0%, #FF4D00 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(255,77,0,.40);
}

/* ===== Premium mobile header layout ===== */
@media (max-width: 991.98px) {
  .brand-text-stack { display: none !important; }
  .navbar-brand.logo-with-name img,
  .navbar-brand.logo-with-name picture img {
    height: 56px !important;
    width: 56px !important;
    max-width: 56px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(255,77,0,.20);
    padding: 2px;
  }
  .main-navbar { padding: 8px 0 !important; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
  .main-navbar .container { flex-wrap: nowrap !important; gap: 6px; }

  /* Compact gradient "Report" pill */
  .nav-donate-mobile {
    padding: 7px 13px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #FFB04A 0%, #FF8A2B 100%) !important;
    color: #2A1206 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 6px rgba(255,138,43,.35);
    border: 0 !important;
  }
  .nav-donate-mobile:hover { transform: translateY(-1px); }

  /* Polished hamburger button */
  .navbar-toggler {
    width: 40px; height: 40px;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #FF6A1A 0%, #FF4D00 100%) !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(255,77,0,.30);
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .navbar-toggler .nav-hamburger-icon {
    color: #fff !important;
    font-size: 22px;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand.logo-with-name img,
  .navbar-brand.logo-with-name picture img {
    height: 50px !important;
    width: 50px !important;
    max-width: 50px;
  }
  .lang-toggle-mobile .lang-btn { font-size: 13px; padding: 4px 11px; }
  .nav-donate-mobile { padding: 6px 11px !important; font-size: 12px !important; }
  .navbar-toggler { width: 38px; height: 38px; }
}

/* Google Translate UI removed — using manual translations.js dictionary now. */

/* Brand text next to the circular logo — premium typography */
.brand-text-stack {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
  padding-left: 12px;
  margin-left: 2px;
  border-left: 2px solid var(--mf-line);
  padding-right: 8px;
  width: max-content;
  max-width: none;
  min-width: 0;
  overflow: visible;
}
.brand-text-hi {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.28;          /* enough room for Devanagari ascenders + descenders */
  letter-spacing: -0.005em;
  white-space: nowrap;        /* each <br> line stays on one line */
  overflow: visible;
  width: max-content;
  padding-right: 4px;
  background: linear-gradient(180deg, #FF4D00 0%, #F26522 60%, #D94E0F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.brand-text-en {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2px;
  color: var(--mf-grey);
  margin-top: 2px;
  white-space: normal;
  overflow-wrap: break-word;
}
.navbar-brand.logo-with-name:hover img,
.navbar-brand.logo-only:hover img { transform: scale(1.03); }
.main-navbar.scrolled .navbar-brand img,
.main-navbar.scrolled .navbar-brand picture img { height: 52px !important; max-width: 195px; }

.navbar-brand.logo-with-name { padding: 0; background: transparent; }

/* 3-line brand text — vertically centred, tight line gap */
.brand-text-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* tight stacking, no big gaps */
  gap: 2px;                  /* 50% smaller line gap */
  height: 56px;              /* matches logo */
  line-height: 1;
  font-family: 'Playfair Display', serif;
  color: var(--mf-blue-dk);
  letter-spacing: .01em;
}
.brand-line {
  display: block;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  padding: 0;
}
.brand-line-1 { font-size: 16px; font-weight: 800; color: var(--mf-blue-dk); }
.brand-line-2 { font-size: 14px; font-weight: 700; color: var(--mf-blue); }
.brand-line-3 { font-size: 13px; font-weight: 600; color: var(--mf-yellow-dk); letter-spacing: .03em; }

/* Match logo size when navbar is scrolled (52px) */
.main-navbar.scrolled .brand-text-3 { height: 52px; }
.main-navbar.scrolled .brand-line-1 { font-size: 15px; }
.main-navbar.scrolled .brand-line-2 { font-size: 13px; }
.main-navbar.scrolled .brand-line-3 { font-size: 12px; }

/* Tablet: shrink text slightly */
@media (max-width: 991.98px) {
  .brand-line-1 { font-size: 14px; }
  .brand-line-2 { font-size: 12px; }
  .brand-line-3 { font-size: 11px; }
}

/* Phone: bigger logo (aspect-preserving), hide brand text */
@media (max-width: 575.98px) {
  .navbar-brand.logo-with-name img,
  .navbar-brand.logo-with-name picture img,
  .navbar-brand.logo-only img,
  .navbar-brand.logo-only picture img {
    height: 56px !important;
    width: auto !important;
    max-width: 180px !important;
  }
  .brand-text-3 { display: none; }
}

/* Footer logo — bigger, centred on the brand column */
.footer-logo img,
.footer-logo picture img {
  height: 100px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Admin login screen — logo only, centred */
.login-logo.logo-only-center { display: flex; justify-content: center; align-items: center; }
.login-logo.logo-only-center img { display: block; }

/* Admin sidebar brand — logo only */
.sidebar-brand.sidebar-brand-logo-only { display: flex; justify-content: center; padding: 18px 0; }
.sidebar-brand.sidebar-brand-logo-only img { border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }


/* ============================================================
   Premium polish — pro-quality micro-interactions & animations
   ============================================================ */

/* Smoother focus card — lift + icon scale + accent glow border */
.focus-card {
  position: relative;
  isolation: isolate;
  transition: transform .5s var(--mf-ease), box-shadow .5s var(--mf-ease);
}
.focus-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-yellow) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--mf-ease);
  pointer-events: none;
  z-index: 1;
}
.focus-card:hover { transform: translateY(-6px); box-shadow: var(--mf-shadow-lg); }
.focus-card:hover::before { opacity: 1; }
.focus-card .focus-icon { transition: transform .55s var(--mf-ease); }
.focus-card:hover .focus-icon { transform: scale(1.12) rotate(-3deg); }

/* Credential cards — lift + glow */
.credential-card { transition: transform .45s var(--mf-ease), box-shadow .45s var(--mf-ease), border-color .35s; }
.credential-card:hover { transform: translateY(-6px); box-shadow: var(--mf-shadow-lg); border-color: var(--mf-orange-sf); }
.credential-card i { transition: transform .55s var(--mf-ease), color .25s; }
.credential-card:hover i { transform: scale(1.18) rotate(-4deg); color: var(--mf-orange-dk); }

/* Eyebrow — shimmer accent on hover */
.eyebrow {
  display: inline-block;
  letter-spacing: .15em;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mf-orange);
  position: relative;
  padding-left: 26px;
}
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 18px; height: 2px;
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
  transform: translateY(-50%);
  border-radius: 2px;
}

/* Section heading — gradient underline */
.section-heading {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.section-heading::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mf-orange) 0%, var(--mf-yellow) 100%);
}
.section-heading.d-inline-block::after { left: 50%; transform: translateX(-50%); }

/* Stat numbers — subtle glow + counter polish */
.stat-band { position: relative; overflow: hidden; }
.stat-band::before {
  content: '';
  position: absolute;
  inset: -40% -20%;
  background: radial-gradient(circle at 20% 50%, rgba(255,200,69,.25), transparent 55%),
              radial-gradient(circle at 80% 50%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
  animation: bgDrift 12s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: translate(0,0); }
  to   { transform: translate(-20px, 10px); }
}
.stat-num {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.18);
}

/* Hero swiper — slow Ken Burns on slide images for cinematic feel */
.hero-swiper .swiper-slide {
  background-size: cover !important;
  background-position: center !important;
}
.hero-swiper .swiper-slide-active {
  animation: kenBurns 9s ease-out forwards;
}
@keyframes kenBurns {
  from { background-size: 105% !important; }
  to   { background-size: 115% !important; }
}

/* Navbar — premium feel on scroll: solid background + tighter shadow
   (no backdrop-filter — that breaks fixed-position offcanvas descendants) */
.main-navbar {
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--mf-ease), box-shadow .35s var(--mf-ease), border-color .35s;
}
.main-navbar.scrolled {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--mf-line);
  box-shadow: 0 10px 24px rgba(184, 53, 0, .08);
}
.main-navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s var(--mf-ease);
}
.main-navbar .nav-link:hover::after,
.main-navbar .nav-link.active::after { transform: scaleX(1); }

/* CTA band — premium gradient + soft inner radial highlight */
.cta-band {
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: -50% -10%;
  background: radial-gradient(circle at 30% 30%, rgba(255,200,69,.30), transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(255,255,255,.18), transparent 55%);
  animation: bgDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }

/* Newsletter band — keep gradient consistent with new theme */
.newsletter-band {
  background: linear-gradient(135deg, var(--mf-orange-dk) 0%, var(--mf-orange) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Section-cream — warm tinted background for alternating sections */
.section-cream {
  background: linear-gradient(180deg, var(--mf-cream) 0%, var(--mf-cream-2) 100%);
}

/* Generic premium hover for any .card-style element */
.card-style, .focus-icon {
  transition: transform .45s var(--mf-ease), box-shadow .45s var(--mf-ease);
}

/* Smooth fade-in for AOS-less elements */
img, picture { transition: filter .4s var(--mf-ease); }

/* Reduce motion — honor user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-swiper .swiper-slide-active { animation: none; }
}

/* ============================================================
   Green accent layer — Indian-flag harmony (orange primary + green secondary)
   ============================================================ */

/* Premium verified chip — replaces plain bg-success badge in utility bar */
.chip-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--mf-green) 0%, var(--mf-green-dk) 100%);
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(19, 136, 8, .35), inset 0 0 0 1px rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}
.chip-verified::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: chipShine 4.5s ease-in-out infinite;
}
.chip-verified i { font-size: 12px; }
@keyframes chipShine {
  0%, 60% { transform: translateX(-100%); }
  80%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}

/* Newsletter band — Indian-flag-inspired orange→green gradient */
.newsletter-band {
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 45%, var(--mf-green) 100%);
  position: relative;
  overflow: hidden;
}
.newsletter-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 50%, rgba(255,255,255,.18), transparent 55%);
  pointer-events: none;
}
.newsletter-band > .container { position: relative; z-index: 1; }
.newsletter-band .btn-light {
  background: #fff;
  color: var(--mf-orange-dk);
  border: 0;
  transition: transform .3s var(--mf-ease), box-shadow .3s var(--mf-ease), color .25s;
}
.newsletter-band .btn-light:hover {
  color: var(--mf-green-dk);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* Stat band — add green radial accent alongside the yellow one */
.stat-band::before {
  background: radial-gradient(circle at 18% 50%, rgba(255,200,69,.25), transparent 55%),
              radial-gradient(circle at 82% 50%, rgba(19,136,8,.28), transparent 55%) !important;
}

/* Footer social icons — alternate hover colors (orange / green) */
.footer-social a {
  transition: transform .25s var(--mf-ease), background .25s, color .25s;
}
.footer-social a:nth-of-type(even):hover {
  background: var(--mf-green);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
}
.footer-social a:nth-of-type(odd):hover {
  background: var(--mf-orange);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
}

/* Helpline phone-buttons inside helpline band → green for "available now" feel */
.helpline-cta-green {
  background: linear-gradient(135deg, var(--mf-green) 0%, var(--mf-green-dk) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 30px !important;
  padding: 9px 22px !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 18px rgba(19,136,8,.32) !important;
  transition: transform .35s var(--mf-ease), box-shadow .35s var(--mf-ease), filter .25s !important;
}
.helpline-cta-green:hover {
  filter: brightness(1.08);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 36px rgba(19,136,8,.45), 0 0 0 4px rgba(19,136,8,.14) !important;
  color: #fff !important;
}

/* Trust strip — small "verified" markers (green tick + label) */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 16px 0;
}
.trust-strip .trust-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mf-green-sf);
  color: var(--mf-green-dk);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid rgba(19,136,8,.18);
}
.trust-strip .trust-tag i { color: var(--mf-green); }

/* Bullet-style green checks for any <ul.checks> list (used in mission, schemes etc.) */
ul.checks { list-style: none; padding-left: 0; }
ul.checks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
}
ul.checks li::before {
  content: '\F26B'; /* bootstrap-icons "check-circle-fill" */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0; top: 2px;
  color: var(--mf-green);
  font-size: 16px;
}

/* Alternate section heading underline using orange→green (saffron-green) */
.section-heading.heading-saffron-green::after {
  background: linear-gradient(90deg, var(--mf-orange) 0%, var(--mf-green) 100%);
}

/* Focus-area icons that already use green stay green — make their hover glow green */
.focus-card[data-accent="green"]:hover { box-shadow: 0 22px 48px rgba(19,136,8,.22); }

/* Disaster gallery caption — title appears on hover at the bottom */
.gallery-item { position: relative; height: 200px; }
.gallery-item .gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s var(--mf-ease), transform .35s var(--mf-ease);
  pointer-events: none;
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }
@media (max-width: 575.98px) {
  .gallery-item { height: 150px; }
  .gallery-item .gallery-caption { opacity: 1; transform: none; font-size: 11px; padding: 6px 8px; }
}

/* ============================================================
   PREMIUM HERO — cinematic slider with staggered content reveal
   ============================================================ */

.hero-section {
  position: relative;
  background: #000;
}
.hero-swiper {
  width: 100%;
  height: clamp(640px, 92vh, 960px);
  overflow: hidden;
}
.hero-slide {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden;
}

/* Cinematic dark overlay + warm-orange grade */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 55%, rgba(255,77,0,.18) 100%),
    linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
  z-index: 1;
}

/* Edge vignette — gentle dark fade at all four corners */
.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

.hero-swiper .container { z-index: 3; }
.hero-content { position: relative; z-index: 3; }

/* Ken Burns — slow background pan/zoom on the active slide */
.hero-slide { transition: background-size .8s ease; }
.hero-slide.is-revealed {
  animation: heroKenBurns 9s ease-out forwards;
}
@keyframes heroKenBurns {
  from { background-size: 108% !important; background-position: 48% 52% !important; }
  to   { background-size: 118% !important; background-position: 52% 48% !important; }
}

/* Hero eyebrow — animated accent bar that draws in */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mf-yellow);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(14px);
}
.hero-eyebrow-bar {
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mf-yellow), var(--mf-orange));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255,200,69,.6);
}

/* Hero headline — premium Playfair, large, with refined letter-spacing */
.hero-title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-shadow: 0 6px 30px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(22px);
}

.hero-body {
  font-size: clamp(0.96rem, 1.55vw, 1.18rem);
  line-height: 1.62;
  color: rgba(255,255,255,.92);
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  max-width: 620px;
  opacity: 0;
  transform: translateY(18px);
}

.hero-ctas {
  opacity: 0;
  transform: translateY(18px);
}

/* Hero CTA buttons — bigger, premium */
.hero-cta-primary {
  padding: 12px 28px !important;
  font-size: 16px !important;
  border-radius: 30px !important;
  box-shadow: 0 12px 32px rgba(255,200,69,.45) !important;
}
.hero-cta-primary .hero-cta-arrow {
  display: inline-block;
  transition: transform .35s var(--mf-ease);
}
.hero-cta-primary:hover .hero-cta-arrow { transform: translateX(4px); }
.hero-cta-secondary {
  padding: 12px 26px !important;
  font-size: 15.5px !important;
  border-radius: 30px !important;
  border-width: 1.5px !important;
  backdrop-filter: blur(4px);
  background: rgba(255,255,255,.08);
  transition: all .35s var(--mf-ease);
}
.hero-cta-secondary:hover {
  background: #fff;
  color: var(--mf-orange-dk) !important;
  border-color: #fff !important;
  transform: translateY(-2px);
}

/* Staggered content reveal — fires whenever a slide becomes active */
.hero-slide.is-revealed .hero-eyebrow      { animation: heroRevealUp .9s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.hero-slide.is-revealed .hero-eyebrow-bar  { animation: heroDrawBar 1s cubic-bezier(.2,.7,.2,1) .45s forwards; }
.hero-slide.is-revealed .hero-title        { animation: heroRevealUp 1s cubic-bezier(.2,.7,.2,1) .35s forwards; }
.hero-slide.is-revealed .hero-body         { animation: heroRevealUp 1s cubic-bezier(.2,.7,.2,1) .60s forwards; }
.hero-slide.is-revealed .hero-ctas         { animation: heroRevealUp 1s cubic-bezier(.2,.7,.2,1) .85s forwards; }

@keyframes heroRevealUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroDrawBar {
  to { width: 42px; }
}

/* Custom pagination — pill-style bullets with orange active glow */
.hero-pagination { bottom: 28px !important; z-index: 4 !important; }
.hero-pagination .swiper-pagination-bullet {
  width: 28px;
  height: 4px;
  background: rgba(255,255,255,.4);
  border-radius: 4px;
  opacity: 1;
  transition: all .4s var(--mf-ease);
  margin: 0 4px !important;
}
.hero-pagination .swiper-pagination-bullet-active {
  width: 56px;
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
  box-shadow: 0 0 16px rgba(255,77,0,.6);
}

/* Subtle floating scroll cue at hero bottom */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 600;
  animation: scrollFloat 2.4s ease-in-out infinite;
  transition: color .25s;
}
.hero-scroll-cue:hover { color: var(--mf-yellow); }
.mouse-icon {
  width: 22px;
  height: 36px;
  border: 1.8px solid rgba(255,255,255,.85);
  border-radius: 12px;
  position: relative;
}
.mouse-wheel {
  position: absolute;
  left: 50%; top: 6px;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  background: rgba(255,255,255,.95);
  border-radius: 2px;
  animation: mouseWheelDrop 1.6s ease-in-out infinite;
}
@keyframes scrollFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
@keyframes mouseWheelDrop {
  0%       { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(12px); opacity: 0; }
  60.1%    { transform: translateY(0); opacity: 0; }
  100%     { transform: translateY(0); opacity: 1; }
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero-swiper { height: clamp(480px, 78vh, 620px); }
  .hero-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .hero-body { font-size: 14px; }
  .hero-scroll-cue { bottom: 70px; }
  .hero-pagination { bottom: 24px !important; }
}
@media (max-width: 575.98px) {
  .hero-scroll-cue { display: none; }
  .hero-pagination .swiper-pagination-bullet { width: 20px; }
  .hero-pagination .swiper-pagination-bullet-active { width: 36px; }
}

/* Honor reduced-motion — disable Ken Burns and scroll cue float */
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-revealed { animation: none; }
  .hero-scroll-cue,
  .mouse-wheel { animation: none; }
  .hero-eyebrow,
  .hero-title,
  .hero-body,
  .hero-ctas { opacity: 1; transform: none; animation: none; }
  .hero-eyebrow-bar { width: 42px; animation: none; }
}

/* ============================================================
   Pro-level top-of-page upgrades — scroll progress, live dot,
   refined hero arrows, trust strip
   ============================================================ */

/* Thin scroll-progress bar at the very top of the viewport */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,.06);
  z-index: 1080;
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mf-orange) 0%, var(--mf-yellow) 50%, var(--mf-green) 100%);
  box-shadow: 0 0 12px rgba(255,77,0,.55);
  transition: width .12s linear;
}

/* Pulsing "we're online" dot beside phone number */
.phone-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
  animation: livePulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); transform: scale(.95); }
  70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); transform: scale(.95); }
}

/* Utility-bar social icons — refined pill hover */
.util-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
  transition: background .25s, transform .35s var(--mf-ease), color .25s;
}
.util-social:hover {
  color: var(--mf-orange-dk);
  background: #fff;
  transform: translateY(-2px) scale(1.05);
}

/* Hero arrows — glass morphism, bigger touch target */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.1) !important;
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.22);
  opacity: 1 !important;
  color: #fff;
  transition: background .3s, transform .35s var(--mf-ease), border-color .3s !important;
}
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
  font-size: 18px !important;
  font-weight: 800;
}
.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.5);
  transform: scale(1.08);
}
.hero-swiper .swiper-button-prev { left: 22px !important; }
.hero-swiper .swiper-button-next { right: 22px !important; }
@media (max-width: 575.98px) {
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next { width: 40px !important; height: 40px !important; }
  .hero-swiper .swiper-button-prev::after,
  .hero-swiper .swiper-button-next::after { font-size: 14px !important; }
}

/* Trust strip below hero */
.trust-strip-band {
  background: linear-gradient(180deg, #fff 0%, var(--mf-cream) 100%);
  padding: 32px 0 28px;
  border-bottom: 1px solid var(--mf-line);
  position: relative;
  z-index: 2;
}
.trust-strip-row {
  border-radius: var(--mf-radius);
  background: #fff;
  box-shadow: var(--mf-shadow-md);
  overflow: hidden;
  border: 1px solid var(--mf-line);
}
.trust-cell {
  position: relative;
  border-right: 1px dashed var(--mf-line);
  transition: background .3s;
}
.trust-cell:last-child { border-right: 0; }
@media (max-width: 991.98px) {
  .trust-cell:nth-child(2) { border-right: 0; }
  .trust-cell:nth-child(-n+2) { border-bottom: 1px dashed var(--mf-line); }
}
@media (max-width: 575.98px) {
  .trust-strip-band { padding: 20px 0; }
}
.trust-cell:hover { background: var(--mf-orange-sf); }
.trust-cell-inner {
  padding: 22px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.trust-icon {
  font-size: 28px;
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  color: #fff;
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(255,77,0,.28);
  transition: transform .45s var(--mf-ease), box-shadow .45s var(--mf-ease);
}
.trust-cell:hover .trust-icon {
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 12px 28px rgba(255,77,0,.4);
}
/* Make the green-registered cell pop with green icon */
.trust-cell:nth-child(4) .trust-icon {
  background: linear-gradient(135deg, var(--mf-green) 0%, var(--mf-green-dk) 100%);
  box-shadow: 0 6px 18px rgba(19,136,8,.28);
}
.trust-cell:nth-child(4):hover .trust-icon {
  box-shadow: 0 12px 28px rgba(19,136,8,.4);
}
.trust-text { text-align: left; line-height: 1.1; }
.trust-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--mf-ink);
  line-height: 1;
  margin-bottom: 2px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.trust-num-text { color: var(--mf-green-dk); font-size: clamp(1.4rem, 2.6vw, 1.7rem); }
.trust-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mf-grey);
}

/* Adjust nav active underline so it uses the gradient style consistently */
.main-navbar .nav-link.active::after {
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow)) !important;
}

/* ============================================================
   MOBILE POLISH — comprehensive responsive refinements
   ============================================================ */

/* Prevent horizontal scroll on any phone */
/* Prevent horizontal scroll without making body a scroll container.
   Applying overflow-x to body forces overflow-y to auto and breaks
   touch scrolling on some devices — keep it on <html> only. */
html { overflow-x: hidden; }
body { max-width: 100%; overflow-x: clip; }

/* Reserve space at bottom so sticky FAB doesn't cover content on mobile */
@media (max-width: 575.98px) {
  body { padding-bottom: 80px; }
  .site-footer { padding-bottom: 80px !important; }
}

/* Tame Bootstrap g-5 gutter on mobile — 48px gutter overflows narrow phones */
@media (max-width: 575.98px) {
  .row.g-5,
  .row.gx-5 { --bs-gutter-x: 1rem; }
  .row.g-5,
  .row.gy-5 { --bs-gutter-y: 1rem; }
  .row.g-4,
  .row.gx-4 { --bs-gutter-x: .75rem; }
}

/* Touch-friendly base: phones (≤768px) */
@media (max-width: 768px) {
  /* Hero — shorter on mobile so CTA is reachable */
  .hero-swiper { height: clamp(440px, 70vh, 560px) !important; }

  /* Hero text — tighter sizing for narrow screens */
  .hero-title { font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.15; }
  .hero-body  { font-size: 14px; line-height: 1.55; max-width: 100%; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .18em; margin-bottom: 14px; }
  .hero-eyebrow-bar { width: 0; }
  .hero-slide.is-revealed .hero-eyebrow-bar { animation: heroDrawBarMobile 1s cubic-bezier(.2,.7,.2,1) .45s forwards; }
  @keyframes heroDrawBarMobile { to { width: 28px; } }

  /* Hero CTAs — full-width stacked, big tap target */
  .hero-ctas { gap: 10px !important; }
  .hero-ctas .btn { width: 100%; justify-content: center; min-height: 48px; font-size: 15px !important; padding: 12px 20px !important; }
  .hero-cta-secondary { display: inline-flex; }

  /* Hero arrows — hidden on phone (native swipe is intuitive) */
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next { display: none !important; }

  /* Section padding — reduce vertical space */
  .section { padding: 48px 0; }
  .section-sm { padding: 32px 0; }

  /* Helpline band — buttons get proper tap target, scoped to that band only */
  .helpline-band .helpline-cta-green,
  .helpline-band .btn-donate {
    min-height: 48px;
    padding: 12px 18px !important;
    font-size: 15px;
  }
  .helpline-band .col-md-5 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Trust strip — switch to vertical icon-above-text on phones */
  .trust-strip-band { padding: 24px 0 20px; }
  .trust-cell-inner {
    flex-direction: column;
    gap: 8px;
    padding: 16px 10px;
    text-align: center;
  }
  .trust-icon { width: 44px; height: 44px; font-size: 22px; }
  .trust-text { text-align: center; }
  .trust-num { font-size: 1.5rem; justify-content: center; }
  .trust-num-text { font-size: 1.2rem; }
  .trust-label { font-size: 10.5px; letter-spacing: .06em; }

  /* Stat band — bigger spacing between counters */
  .stat-band { padding: 50px 0; }
  .stat-num { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .stat-label { font-size: 11px; }

  /* Cards & containers — tighter padding */
  .credential-card { padding: 18px; }
  .focus-card { padding: 18px; }

  /* Mission scheme cards (14 scheme tiles) — comfortable on phone */
  .mv-body .row.g-3 .col-6 .d-flex {
    padding: 8px !important;
    gap: 8px !important;
  }
  .mv-body .row.g-3 img { width: 44px !important; height: 44px !important; }
  .mv-body .row.g-3 .small { font-size: 11.5px; line-height: 1.3; }

  /* CTA bands — tighter on phone */
  .cta-band, .newsletter-band { padding: 44px 0; }
  .cta-band h2, .newsletter-band h3 { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }

  /* Newsletter input — full width */
  .newsletter-form .input-group { flex-direction: column; gap: 8px; }
  .newsletter-form .form-control,
  .newsletter-form .btn { width: 100%; border-radius: 30px !important; min-height: 48px; }

  /* Section headings — smaller on phone */
  .section-heading { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }

  /* Eyebrow + heading inside centered section intros — stack vertically */
  .text-center .eyebrow {
    display: block;
    margin-bottom: 8px;
    padding-left: 0;
    padding: 0 22px;
  }
  .text-center .eyebrow::before {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
  }
  .text-center .section-heading.d-inline-block { display: block !important; }

  /* Gallery captions — always visible on phone */
  .gallery-item .gallery-caption { opacity: 1 !important; transform: none !important; }
  .gallery-item { height: 130px; }

  /* Focus area cards — 1 per row OK, but tighten margin */
  .focus-icon { width: 56px; height: 56px; font-size: 26px; }

  /* Footer — tighter spacing */
  .site-footer { padding-top: 40px !important; }
  .footer-logo img {
    height: 80px !important;
    width: 80px !important;
    max-width: 80px !important;
    object-fit: contain;
    background: #fff;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
  }
  /* Mobile-only: brand text shown next to the footer logo */
  .footer-brand-text {
    font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.005em;
  }

  /* FAB and back-to-top — coexist gracefully on phone */
  .donate-fab { font-size: 14px; }
  .back-to-top {
    width: 40px; height: 40px;
    bottom: 76px; right: 14px;
  }
}

/* Small phones (≤575px) — even tighter */
@media (max-width: 575.98px) {
  .hero-swiper { height: clamp(420px, 68vh, 520px) !important; }
  .hero-title { font-size: clamp(1.4rem, 7vw, 1.85rem); }

  /* Trust strip — single column on very small phones for breathing room */
  .trust-strip-row { box-shadow: var(--mf-shadow-sm); }
  .trust-cell { border-right: 0 !important; }
  .trust-cell:not(:last-child) { border-bottom: 1px dashed var(--mf-line); }
  .trust-cell-inner { padding: 14px 12px; }

  /* Section padding — compact */
  .section { padding: 36px 0; }
  .stat-band { padding: 40px 0; }

  /* Helpline band — buttons full width on very small phones (scoped) */
  .helpline-band .helpline-cta-green,
  .helpline-band .btn-donate {
    width: 100%;
    margin-bottom: 8px;
    margin-right: 0 !important;
  }
  /* Hero CTAs already full-width via earlier rule */

  /* Focus area grid — keep 2 columns at this size for better visual density */
  /* (already col-md-6 in markup, which gives 1 col on phone — leave as is) */

  /* Container padding tighter */
  .container { padding-left: 14px !important; padding-right: 14px !important; }

  /* Section headings — center on phone */
  .section-heading.d-inline-block { font-size: 1.4rem; }

  /* Scroll progress bar — slightly thinner */
  .scroll-progress { height: 2px; }
}

/* Tiny phones (≤360px) — last-resort fitting */
@media (max-width: 360px) {
  .hero-title { font-size: 1.35rem !important; line-height: 1.18; }
  .hero-body { font-size: 13px !important; }
  .hero-ctas .btn { font-size: 14px !important; padding: 11px 16px !important; }
  .section-heading { font-size: 1.25rem; }
  .footer-logo img {
    height: 72px !important;
    width: 72px !important;
    max-width: 72px !important;
  }
}

/* Tap target sanity — every link/button hit area should be ≥40px on touch screens */
@media (hover: none) and (pointer: coarse) {
  .btn, button, a.btn, .focus-card, .credential-card { min-height: 44px; }
  .nav-link { padding: 10px 14px !important; }
  .footer-links a { padding: 6px 0; display: inline-block; }
}

/* ============================================================
   Banner-mode hero — when slides are pre-designed banner artwork
   (text/overlay/vignette suppressed so the banner shows clean)
   ============================================================ */

/* When slide content is empty (no eyebrow/title/body/CTAs), drop the dark
   overlay and vignette so the banner artwork shows brightly. */
.hero-slide:not(:has(.hero-eyebrow)):not(:has(.hero-title:not(:empty))) .hero-overlay,
.hero-slide:has(.hero-content:empty) .hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.0) 70%, rgba(0,0,0,.15) 100%);
}
.hero-slide:has(.hero-content:empty) .hero-vignette {
  background: radial-gradient(ellipse at center, transparent 70%, rgba(0,0,0,.18) 100%);
}

/* Hero height tuned to the banner aspect ratio (~2.7:1).
   On wide screens shows banner edge-to-edge with minimal crop. */
.hero-swiper { height: clamp(380px, 56vw, 720px) !important; }
@media (max-width: 768px) {
  .hero-swiper { height: clamp(220px, 56vw, 360px) !important; }
}
@media (max-width: 575.98px) {
  .hero-swiper { height: clamp(180px, 60vw, 280px) !important; }
  .hero-scroll-cue { display: none; }
}

/* Banner background should be CONTAIN on phone (full image visible)
   and COVER on desktop (edge-to-edge).
   Higher-specificity selector beats the earlier `.hero-swiper .swiper-slide` rule. */
.hero-swiper .swiper-slide.hero-slide { background-color: #000; }
@media (max-width: 768px) {
  .hero-swiper .swiper-slide.hero-slide {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  .hero-swiper .swiper-slide-active.hero-slide,
  .hero-swiper .hero-slide.is-revealed {
    animation: none !important;
  }
}

/* ============================================================
   PREMIUM HERO V2 — banner-driven layout with frosted text card
   - Banner image dominant (smaller height, premium aspect)
   - Text card: bottom-left on desktop (frosted glass), stacked
     below banner on mobile (warm cream panel)
   ============================================================ */

/* Hero banner height — taller, premium */
.hero-swiper { height: clamp(480px, 52vw, 640px) !important; }
@media (max-width: 991.98px) {
  .hero-swiper { height: auto !important; min-height: unset !important; }
  .hero-swiper .swiper-slide { height: auto !important; }
}

/* Banner image — cover on desktop (fills container), contain-like on tablet/phone */
.hero-swiper .swiper-slide.hero-slide {
  background-color: var(--mf-ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero card — frosted glass panel that holds the headline + body + CTAs.
   Sits at bottom-left of the slide on desktop, full-width below banner on phone. */
.hero-card {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 16px;
  padding: 22px 26px;
  max-width: 540px;
  margin-bottom: 32px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(255,77,0,.08);
  color: var(--mf-ink);
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(18px);
}
.hero-slide.is-revealed .hero-card {
  animation: heroCardReveal .85s cubic-bezier(.2,.7,.2,1) .3s forwards;
}
@keyframes heroCardReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Reset the overlay to a subtle bottom-left fade so the banner shines */
.hero-slide .hero-overlay {
  background: linear-gradient(120deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.10) 38%, transparent 60%);
}

/* Eyebrow inside card — orange not white now */
.hero-card .hero-eyebrow {
  color: var(--mf-orange);
  font-size: 11.5px;
  letter-spacing: .22em;
  margin-bottom: 10px;
  text-shadow: none;
}
.hero-card .hero-eyebrow-bar {
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
  box-shadow: none;
}

/* Title inside card — premium serif, dark on white */
.hero-card .hero-title {
  color: var(--mf-ink);
  text-shadow: none;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.005em;
  font-weight: 800;
}
.hero-card .hero-body {
  color: var(--mf-grey);
  text-shadow: none;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: none;
}
.hero-card .hero-ctas { gap: 8px !important; }

/* CTAs inside card — primary orange gradient, secondary outline */
.hero-card .hero-cta-primary {
  padding: 10px 22px !important;
  font-size: 14.5px !important;
  box-shadow: 0 8px 20px rgba(255,200,69,.4);
}
.hero-card .hero-cta-secondary {
  padding: 10px 20px !important;
  font-size: 14.5px !important;
  backdrop-filter: none;
  background: transparent;
}

/* Tablet & mobile — stack the card below the banner */
@media (max-width: 991.98px) {
  .hero-section { background: var(--mf-cream); }

  .hero-swiper .swiper-slide.hero-slide {
    display: flex;
    flex-direction: column;
    background-image: none !important; /* moved to ::before for sizing control */
    background-color: transparent;
    position: relative;
  }
  .hero-image-wrap {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 2.6 / 1;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--mf-ink);
    display: block;
  }

  .hero-slide .hero-overlay { display: none; }
  .hero-slide .hero-vignette { display: none; }

  .hero-swiper .container {
    display: block !important;
    padding: 18px 16px 24px !important;
  }
  .hero-card {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-width: 100%;
    margin-bottom: 0;
    padding: 18px 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .hero-card .hero-title { font-size: clamp(1.4rem, 5vw, 1.7rem); }
  .hero-card .hero-body { font-size: 14px; }
  .hero-card .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next { display: none !important; }
  .hero-scroll-cue { display: none !important; }
  .hero-pagination { bottom: auto !important; top: calc(100vw / 2.6 - 24px); }
}

/* Mobile — even tighter */
@media (max-width: 575.98px) {
  .hero-image-wrap { aspect-ratio: 2.3 / 1; }
  .hero-pagination { top: calc(100vw / 2.3 - 22px); }
}

/* The Ken-Burns animation only on the banner-image area (desktop) */
.hero-slide.is-revealed { animation: heroKenBurnsLite 10s ease-out forwards; }
@keyframes heroKenBurnsLite {
  from { background-size: 102%; }
  to   { background-size: 108%; }
}
@media (max-width: 991.98px) {
  .hero-slide.is-revealed { animation: none; }
}

/* ============================================================
   Bare hero slide — banner-only, no text card
   ============================================================ */
.hero-slide-bare .hero-overlay,
.hero-slide-bare .hero-vignette { display: none; }
.hero-slide-bare .container { display: none !important; }

/* Mobile: bare hero shows just the image-wrap with banner; no card means
   the slide collapses to image height naturally */
@media (max-width: 991.98px) {
  .hero-section:has(.hero-slide-bare) { background: var(--mf-ink); }
  .hero-slide-bare {
    display: block !important;
    min-height: 0 !important;
  }
  .hero-slide-bare .hero-image-wrap { aspect-ratio: 2.6 / 1; }
}
@media (max-width: 575.98px) {
  .hero-slide-bare .hero-image-wrap { aspect-ratio: 2.3 / 1; }
}

/* Desktop: bare hero — slide background fills the hero height */
@media (min-width: 992px) {
  .hero-swiper:has(.hero-slide-bare) { height: clamp(440px, 46vw, 620px) !important; }
}

/* ============================================================
   MOBILE HEADER — pro quality
   Bigger logo + premium hamburger + tighter navbar shadow
   ============================================================ */
@media (max-width: 991.98px) {
  .main-navbar {
    padding: 8px 0 !important;
    background: #fff;
    border-bottom: 1px solid rgba(255, 77, 0, .08);
    box-shadow: 0 4px 16px rgba(255, 77, 0, .06);
  }
  .main-navbar.scrolled {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 24px rgba(255, 77, 0, .10);
  }

  /* Tablet logo size — square circular */
  .navbar-brand.logo-with-name img,
  .navbar-brand.logo-with-name picture img {
    height: 56px !important;
    width: 56px !important;
    max-width: 56px !important;
  }
  .main-navbar.scrolled .navbar-brand img,
  .main-navbar.scrolled .navbar-brand picture img {
    height: 52px !important;
    max-width: 200px !important;
  }

  /* Premium hamburger toggle — gradient pill with Bootstrap "list" icon */
  .navbar-toggler {
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    width: 44px;
    height: 40px;
    background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%) !important;
    box-shadow: 0 6px 16px rgba(255, 77, 0, .28);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: transform .3s var(--mf-ease), box-shadow .3s, filter .3s;
  }
  .navbar-toggler:hover { filter: brightness(1.08); }
  .navbar-toggler:focus { box-shadow: 0 6px 16px rgba(255, 77, 0, .28), 0 0 0 4px rgba(255, 77, 0, .22) !important; outline: none; }
  .navbar-toggler:active { transform: scale(.94); }
  /* Hide the default Bootstrap toggler-icon (in case Bootstrap re-renders it) */
  .navbar-toggler-icon { display: none !important; }
  .nav-hamburger-icon {
    color: #fff;
    font-size: 26px;
    line-height: 1;
    margin: 0;
    display: inline-flex;
  }

  /* Mobile Report button — refined sizing for header row */
  .nav-donate-mobile {
    font-size: 13.5px !important;
    padding: 8px 16px !important;
    min-height: 40px !important;
    border-radius: 22px !important;
    font-weight: 700;
    letter-spacing: .01em;
  }

  /* Container alignment on mobile */
  .main-navbar .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 6px;
  }
}

/* Small phone — tighter still but logo stays prominent */
@media (max-width: 575.98px) {
  .main-navbar { padding: 6px 0 !important; }
  .navbar-brand.logo-with-name img,
  .navbar-brand.logo-with-name picture img {
    height: 54px !important;
    width: 54px !important;
    max-width: 54px !important;
  }
  .nav-donate-mobile {
    font-size: 12.5px !important;
    padding: 7px 13px !important;
    min-height: 38px !important;
  }
  .nav-donate-mobile i { margin-right: 2px; }
  .navbar-toggler {
    width: 40px;
    height: 38px;
    padding: 6px 9px !important;
  }
}

/* ============================================================
   Mobile hero arrows — small, subtle, positioned over banner
   (overrides earlier display:none rules)
   ============================================================ */
@media (max-width: 991.98px) {
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .35) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, .3);
    opacity: .9 !important;
    color: #fff;
    /* Center vertically on the banner image area */
    top: calc((100vw / 2.6) / 2 - 16px) !important;
    margin-top: 0 !important;
    transform: none;
    transition: background .25s, opacity .25s, transform .3s var(--mf-ease);
  }
  .hero-swiper .swiper-button-prev { left: 10px !important; }
  .hero-swiper .swiper-button-next { right: 10px !important; }
  .hero-swiper .swiper-button-prev::after,
  .hero-swiper .swiper-button-next::after {
    font-size: 12px !important;
    font-weight: 800;
  }
  .hero-swiper .swiper-button-prev:active,
  .hero-swiper .swiper-button-next:active {
    background: rgba(0, 0, 0, .55) !important;
    transform: scale(.92);
  }
}

@media (max-width: 575.98px) {
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next {
    width: 28px !important;
    height: 28px !important;
    /* Re-center for the tighter 2.3:1 aspect on tiny phones */
    top: calc((100vw / 2.3) / 2 - 14px) !important;
  }
  .hero-swiper .swiper-button-prev::after,
  .hero-swiper .swiper-button-next::after {
    font-size: 11px !important;
  }
  .hero-swiper .swiper-button-prev { left: 8px !important; }
  .hero-swiper .swiper-button-next { right: 8px !important; }
}

/* ============================================================
   Inner-page hero (.hero-slim) — supports per-page disaster background
   via --hero-bg custom property. Falls back to the orange gradient.
   ============================================================ */
.hero-slim {
  position: relative;
  background-image: var(--hero-bg, none),
                    linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  overflow: hidden;
}
.hero-slim::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,77,0,.55) 0%, rgba(184,53,0,.70) 100%),
              linear-gradient(180deg, transparent 30%, rgba(0,0,0,.30) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-slim > .container,
.hero-slim > .container-fluid { position: relative; z-index: 2; }
.hero-slim h1,
.hero-slim .lead,
.hero-slim .breadcrumb { position: relative; z-index: 2; }

/* ============================================================
   PREMIUM HERO-SLIM v2 — pro inner-page hero with cinematic depth
   Used on About, Mission&Vision, Directors, Contact, Events,
   Volunteer, Report, Focus Areas, Gallery, Video Gallery,
   Registrations, etc.
   ============================================================ */

.hero-slim {
  min-height: clamp(220px, 32vw, 320px) !important;
  padding: 80px 0 70px !important;
  background-image: var(--hero-bg, none),
                    linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  background-size: cover, auto !important;
  background-position: center, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  position: relative;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  animation: heroSlimKenBurns 14s ease-out forwards;
}
@keyframes heroSlimKenBurns {
  from { background-size: 108% auto, auto; }
  to   { background-size: 116% auto, auto; }
}

/* Layered gradient overlay — orange tint + cinematic dark bottom + soft vignette */
.hero-slim::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(110deg, rgba(255,77,0,.55) 0%, rgba(184,53,0,.45) 55%, rgba(122,34,0,.65) 100%),
    radial-gradient(ellipse at 30% 30%, transparent 55%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Decorative diagonal accent strip at the bottom */
.hero-slim::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mf-orange) 0%, var(--mf-yellow) 50%, var(--mf-green) 100%);
  z-index: 3;
  box-shadow: 0 0 12px rgba(255, 77, 0, .55);
}

/* Premium content reveal */
.hero-slim h1 {
  color: #fff;
  text-shadow: 0 8px 32px rgba(0,0,0,.45);
  font-size: clamp(1.8rem, 4.2vw, 3rem) !important;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.12;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(22px);
  animation: heroSlimReveal .9s cubic-bezier(.2,.7,.2,1) .25s forwards;
}
.hero-slim .eyebrow,
.hero-slim .hero-slim-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mf-yellow) !important;
  font-size: 12.5px !important;
  font-weight: 800;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  margin-bottom: 14px !important;
  padding-left: 0 !important;
  opacity: 0;
  transform: translateY(14px);
  animation: heroSlimReveal .8s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
.hero-slim .eyebrow::before {
  position: relative;
  left: auto; top: auto;
  transform: none;
  display: inline-block;
  width: 32px;
  height: 2px;
  margin-right: 6px;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--mf-yellow), var(--mf-orange));
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(255, 200, 69, .6);
}
.hero-slim .lead {
  color: rgba(255,255,255,.92);
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  max-width: 640px;
  margin-bottom: 18px !important;
  opacity: 0;
  transform: translateY(18px);
  animation: heroSlimReveal .9s cubic-bezier(.2,.7,.2,1) .4s forwards;
}

@keyframes heroSlimReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Premium breadcrumb — pill chip with subtle backdrop */
.hero-slim .breadcrumb {
  display: inline-flex;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 0 !important;
  opacity: 0;
  transform: translateY(14px);
  animation: heroSlimReveal .9s cubic-bezier(.2,.7,.2,1) .55s forwards;
  border: 1px solid rgba(255,255,255,.12);
}
.hero-slim .breadcrumb-item { font-size: 12.5px; }
.hero-slim .breadcrumb-item a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: color .2s;
}
.hero-slim .breadcrumb-item a:hover { color: var(--mf-yellow); }
.hero-slim .breadcrumb-item.active { color: #fff; font-weight: 600; }
.hero-slim .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.5);
  content: "›";
  padding: 0 6px;
}

/* Mobile tightening */
@media (max-width: 768px) {
  .hero-slim {
    min-height: clamp(180px, 40vw, 240px) !important;
    padding: 56px 0 48px !important;
  }
  .hero-slim h1 { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; }
  .hero-slim .lead { font-size: 14px; }
  .hero-slim .breadcrumb { padding: 5px 12px; }
  .hero-slim .breadcrumb-item { font-size: 11.5px; }
}

@media (max-width: 575.98px) {
  .hero-slim {
    min-height: 170px !important;
    padding: 44px 0 38px !important;
  }
  .hero-slim .eyebrow,
  .hero-slim .hero-slim-eyebrow { font-size: 11px !important; letter-spacing: .18em !important; }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-slim { animation: none; }
  .hero-slim h1,
  .hero-slim .eyebrow,
  .hero-slim .lead,
  .hero-slim .breadcrumb { opacity: 1; transform: none; animation: none; }
}

/* ============================================================
   PREMIUM MOBILE MENU — offcanvas redesign
   ============================================================ */
@media (max-width: 991.98px) {

  .offcanvas.offcanvas-end {
    width: min(86vw, 360px) !important;
    background: linear-gradient(180deg, #fff 0%, var(--mf-cream) 100%);
    box-shadow: -22px 0 48px rgba(255, 77, 0, .18);
    border-left: 1px solid rgba(255, 77, 0, .12);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1) !important;
  }
  .offcanvas-backdrop.show {
    background: rgba(42, 18, 6, .55);
    opacity: 1;
  }
  .offcanvas.offcanvas-end::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mf-orange) 0%, var(--mf-yellow) 50%, var(--mf-green) 100%);
    box-shadow: 0 0 12px rgba(255, 77, 0, .4);
    z-index: 2;
  }

  .offcanvas-header {
    padding: 22px 22px 16px !important;
    border-bottom: 1px solid var(--mf-line);
    background: #fff;
    position: relative;
  }
  .offcanvas-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: -.01em;
  }

  .offcanvas-header .btn-close {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    background-color: var(--mf-orange) !important;
    background-image: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%) !important;
    opacity: 1 !important;
    box-shadow: 0 4px 14px rgba(255, 77, 0, .35);
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    transition: transform .3s var(--mf-ease), box-shadow .3s;
  }
  .offcanvas-header .btn-close::before,
  .offcanvas-header .btn-close::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .offcanvas-header .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .offcanvas-header .btn-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
  .offcanvas-header .btn-close:hover { transform: rotate(90deg) scale(1.05); box-shadow: 0 6px 20px rgba(255, 77, 0, .5); }

  .offcanvas-body {
    padding: 16px 0 22px !important;
    overflow-y: auto;
  }
  .offcanvas-body .navbar-nav {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }

  .offcanvas-body .nav-item {
    border-bottom: 1px solid rgba(255, 77, 0, .07);
    opacity: 0;
    transform: translateX(20px);
    animation: navItemSlide .5s cubic-bezier(.2, .7, .2, 1) forwards;
  }
  .offcanvas-body .nav-item:nth-child(1) { animation-delay: .05s; }
  .offcanvas-body .nav-item:nth-child(2) { animation-delay: .12s; }
  .offcanvas-body .nav-item:nth-child(3) { animation-delay: .19s; }
  .offcanvas-body .nav-item:nth-child(4) { animation-delay: .26s; }
  .offcanvas-body .nav-item:nth-child(5) { animation-delay: .33s; }
  .offcanvas-body .nav-item:nth-child(6) { animation-delay: .40s; }
  @keyframes navItemSlide {
    to { opacity: 1; transform: translateX(0); }
  }

  .offcanvas-body .nav-link {
    padding: 14px 22px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--mf-ink) !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    position: relative;
    transition: padding-left .3s var(--mf-ease), color .25s, background .25s;
  }

  .offcanvas-body .nav-link::before {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--mf-orange-sf);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: "bootstrap-icons" !important;
    font-size: 14px;
    color: var(--mf-orange);
    transition: background .25s, transform .35s var(--mf-ease), color .25s;
  }

  .offcanvas-body .nav-item:nth-child(1) .nav-link::before { content: "\F425"; }
  .offcanvas-body .nav-item:nth-child(2) > .nav-link::before { content: "\F431"; }
  .offcanvas-body .nav-item:nth-child(3) > .nav-link::before { content: "\F586"; }
  .offcanvas-body .nav-item:nth-child(4) .nav-link::before { content: "\F214"; }
  .offcanvas-body .nav-item:nth-child(5) .nav-link::before { content: "\F4DA"; }

  .offcanvas-body .nav-link.active,
  .offcanvas-body .nav-link:hover,
  .offcanvas-body .nav-link:focus {
    color: var(--mf-orange-dk) !important;
    background: linear-gradient(90deg, rgba(255,77,0,.10) 0%, transparent 80%);
    padding-left: 30px !important;
  }
  .offcanvas-body .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 4px;
    background: linear-gradient(180deg, var(--mf-orange), var(--mf-orange-dk));
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 8px rgba(255,77,0,.4);
  }
  .offcanvas-body .nav-link:hover::before,
  .offcanvas-body .nav-link.active::before {
    background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
    color: #fff;
    transform: scale(1.08);
  }

  .offcanvas-body .dropdown-toggle::after {
    margin-left: auto !important;
    border-top-color: var(--mf-orange);
    transition: transform .3s;
  }
  .offcanvas-body .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

  .offcanvas-body .dropdown-menu {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 247, 242, .85) !important;
    padding: 4px 0 !important;
    margin: 0 0 0 24px !important;
    border-left: 3px solid var(--mf-orange-sf);
  }
  .offcanvas-body .dropdown-item {
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    color: var(--mf-grey) !important;
    font-weight: 500;
    border-radius: 0 !important;
    transition: padding-left .25s var(--mf-ease), color .2s, background .2s;
  }
  .offcanvas-body .dropdown-item:hover {
    background: rgba(255, 77, 0, .08) !important;
    color: var(--mf-orange-dk) !important;
    padding-left: 24px !important;
  }
  .offcanvas-body .dropdown-item i { color: var(--mf-orange); margin-right: 8px; }

  .offcanvas-body .nav-item:last-child {
    border-bottom: 0;
    padding: 18px 18px 0;
    margin-top: 6px;
  }
  .offcanvas-body .nav-item:last-child::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mf-orange-sf) 50%, transparent);
    margin-bottom: 18px;
  }
  .offcanvas-body .nav-item:last-child .btn-donate {
    width: 100%;
    justify-content: center;
    padding: 12px 20px !important;
    font-size: 14.5px !important;
    min-height: 48px;
  }

  .offcanvas-body::after {
    content: "Helpline | Awareness | Justice";
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--mf-grey);
    letter-spacing: .12em;
    margin-top: 26px;
    padding: 16px 20px 0;
    border-top: 1px dashed var(--mf-line);
    text-transform: uppercase;
    font-weight: 600;
  }
}

/* ============================================================
   Mobile menu — always-expanded dropdowns (no popup behavior)
   ============================================================ */
@media (max-width: 991.98px) {
  /* Always show dropdown menus inline inside the offcanvas */
  .offcanvas-body .dropdown-menu {
    display: block !important;
    position: static !important;
    float: none !important;
    width: 100%;
    transform: none !important;
  }
  /* Hide the down-caret indicator since they're always open */
  .offcanvas-body .dropdown-toggle::after { display: none !important; }

  /* Dropdown items — refined nested look with icons */
  .offcanvas-body .dropdown-menu {
    margin: 0 0 0 32px !important;
    padding: 4px 0 10px !important;
    border-left: 2px solid var(--mf-orange-sf) !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .offcanvas-body .dropdown-item {
    padding: 8px 14px 8px 16px !important;
    font-size: 13px !important;
    color: var(--mf-grey) !important;
    font-weight: 500;
    display: flex !important;
    align-items: center;
    gap: 8px;
    border-radius: 0 !important;
    position: relative;
    transition: padding-left .25s var(--mf-ease), color .2s, background .2s;
  }
  .offcanvas-body .dropdown-item i {
    color: var(--mf-orange) !important;
    font-size: 14px;
    min-width: 18px;
    margin-right: 0 !important;
  }
  .offcanvas-body .dropdown-item:hover,
  .offcanvas-body .dropdown-item:focus {
    background: rgba(255, 77, 0, .08) !important;
    color: var(--mf-orange-dk) !important;
    padding-left: 22px !important;
  }
  .offcanvas-body .dropdown-item.fw-semibold {
    font-weight: 700 !important;
    color: var(--mf-ink) !important;
  }
  .offcanvas-body .dropdown-divider {
    margin: 4px 0 !important;
    border-color: rgba(255, 77, 0, .12) !important;
  }
}

/* Mobile menu — logo in header */
@media (max-width: 991.98px) {
  .offcanvas-header { gap: 12px; }
  .offcanvas-brand {
    display: inline-flex !important;
    align-items: center;
    text-decoration: none;
    flex: 1;
    min-width: 0;
  }
  .offcanvas-logo {
    height: 48px !important;
    width: auto !important;
    max-width: 180px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(255, 77, 0, .15));
    transition: transform .3s var(--mf-ease);
  }
  .offcanvas-brand:hover .offcanvas-logo { transform: scale(1.03); }
}
@media (max-width: 575.98px) {
  .offcanvas-logo { height: 42px !important; max-width: 150px; }
}

/* ============================================================
   MISSION SNAPSHOT — premium animations & decorative polish
   ============================================================ */
.mission-snapshot {
  position: relative;
  overflow: hidden;
}
.mission-snapshot::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,69,.18) 0%, transparent 70%);
  z-index: 0;
  animation: missionPulse 6s ease-in-out infinite alternate;
}
.mission-snapshot::after {
  content: '';
  position: absolute;
  bottom: -160px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,0,.10) 0%, transparent 70%);
  z-index: 0;
  animation: missionPulse 7s ease-in-out infinite alternate-reverse;
}
@keyframes missionPulse {
  from { transform: scale(.95); opacity: .8; }
  to   { transform: scale(1.08); opacity: 1; }
}
.mission-snapshot .container { position: relative; z-index: 1; }

/* Text column — staggered reveal on scroll-in */
.mission-text .eyebrow,
.mission-text .section-heading,
.mission-text .mission-body,
.mission-text .mission-cta {
  opacity: 0;
  transform: translateY(20px);
}
.mission-text.aos-animate .eyebrow,
.aos-animate .mission-text .eyebrow,
.mission-snapshot[data-revealed] .mission-text .eyebrow {
  animation: missionReveal .8s cubic-bezier(.2,.7,.2,1) .1s forwards;
}
.mission-text.aos-animate .section-heading {
  animation: missionReveal .85s cubic-bezier(.2,.7,.2,1) .25s forwards;
}
.mission-text.aos-animate .mission-body {
  animation: missionReveal .9s cubic-bezier(.2,.7,.2,1) .4s forwards;
}
.mission-text.aos-animate .mission-cta {
  animation: missionReveal .9s cubic-bezier(.2,.7,.2,1) .55s forwards;
}
@keyframes missionReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* CTA arrow nudge on hover */
.mission-cta .mission-cta-arrow {
  display: inline-block;
  transition: transform .35s var(--mf-ease);
  margin-left: 4px;
}
.mission-cta:hover .mission-cta-arrow { transform: translateX(6px); }

/* Image column — floating + glow + decorative shapes */
.mission-visual { position: relative; }
.mission-image-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.mission-image {
  display: block;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(255,77,0,.20), 0 6px 18px rgba(0,0,0,.08) !important;
  position: relative;
  z-index: 2;
  transition: transform .8s var(--mf-ease), box-shadow .5s;
  animation: missionFloat 6s ease-in-out infinite;
}
.mission-image:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 28px 64px rgba(255,77,0,.32), 0 10px 24px rgba(0,0,0,.10) !important;
}
@keyframes missionFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Soft orange glow behind the image */
.mission-glow {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,77,0,.25) 0%, rgba(255,200,69,.18) 100%);
  filter: blur(40px);
  z-index: 1;
  opacity: .9;
  animation: glowShift 8s ease-in-out infinite alternate;
}
@keyframes glowShift {
  from { transform: translate(-12px, 8px) scale(.96); opacity: .7; }
  to   { transform: translate(12px, -8px) scale(1.04); opacity: 1; }
}

/* Decorative shapes around image — orange ring and yellow dot */
.mission-deco {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
}
.mission-deco-1 {
  width: 64px; height: 64px;
  border: 3px solid var(--mf-orange);
  top: -22px;
  right: -22px;
  animation: rotateSlow 14s linear infinite;
  border-style: dashed;
  opacity: .55;
}
.mission-deco-2 {
  width: 28px; height: 28px;
  background: var(--mf-yellow);
  bottom: -8px;
  left: -8px;
  box-shadow: 0 8px 20px rgba(255,200,69,.55);
  animation: dotPulse 3s ease-in-out infinite;
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 20px rgba(255,200,69,.55); }
  50%      { transform: scale(1.15); box-shadow: 0 12px 28px rgba(255,200,69,.75); }
}

/* Mobile — gentler effects, smaller decorations */
@media (max-width: 768px) {
  .mission-snapshot::before,
  .mission-snapshot::after { display: none; }
  .mission-image { animation: none; }
  .mission-deco-1 { width: 44px; height: 44px; top: -14px; right: -14px; border-width: 2px; }
  .mission-deco-2 { width: 20px; height: 20px; bottom: -6px; left: -6px; }
  .mission-glow { filter: blur(28px); }
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mission-image,
  .mission-glow,
  .mission-deco-1,
  .mission-deco-2,
  .mission-snapshot::before,
  .mission-snapshot::after { animation: none; }
  .mission-text .eyebrow,
  .mission-text .section-heading,
  .mission-text .mission-body,
  .mission-text .mission-cta { opacity: 1; transform: none; animation: none; }
}

/* ============================================================
   PREMIUM FOOTER — pro quality with animated accents
   ============================================================ */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #1F1410 0%, #0F0A07 100%);
  color: #D8CBB8;
  overflow: hidden;
  padding-top: 70px !important;
  padding-bottom: 24px !important;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mf-orange) 0%, var(--mf-yellow) 33%, #fff 50%, var(--mf-yellow) 67%, var(--mf-green) 100%);
  background-size: 300% 100%;
  box-shadow: 0 0 18px rgba(255, 77, 0, .5), 0 0 32px rgba(19, 136, 8, .3);
  animation: footerGlow 8s linear infinite;
  z-index: 3;
}
@keyframes footerGlow {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}

.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 77, 0, .08) 0%, transparent 35%),
    radial-gradient(circle at 88% 80%, rgba(19, 136, 8, .06) 0%, transparent 38%),
    radial-gradient(circle at 55% 0%, rgba(255, 200, 69, .05) 0%, transparent 30%);
  pointer-events: none;
  z-index: 0;
}
.site-footer .container { position: relative; z-index: 2; }

.footer-logo img,
.footer-logo picture img {
  height: 96px !important;
  width: 96px !important;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 2px 6px rgba(255, 77, 0, .25);
  animation: footerLogoFloat 6s ease-in-out infinite;
}
@keyframes footerLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.footer-heading {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .14em !important;
  margin-bottom: 22px !important;
  padding-bottom: 12px;
  position: relative;
  display: inline-block;
}
.footer-heading::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
  box-shadow: 0 0 10px rgba(255, 77, 0, .5);
  transition: width .4s var(--mf-ease);
}
.footer-heading:hover::after { width: 56px; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  color: #C9BBA8;
  font-size: 13.5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 0;
  transition: padding-left .3s var(--mf-ease), color .25s;
}
.footer-links a::before {
  content: "\F285";
  font-family: "bootstrap-icons";
  color: var(--mf-orange);
  font-size: 12px;
  width: 0;
  opacity: 0;
  overflow: hidden;
  display: inline-flex;
  transition: width .3s var(--mf-ease), opacity .25s, margin-right .3s var(--mf-ease);
}
.footer-links a:hover {
  color: var(--mf-orange);
  padding-left: 4px;
}
.footer-links a:hover::before {
  width: 14px;
  opacity: 1;
  margin-right: 4px;
}

.footer-contact { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.footer-contact li {
  margin-bottom: 12px;
  padding-left: 30px;
  position: relative;
  line-height: 1.55;
  color: #C9BBA8;
  transition: padding-left .3s var(--mf-ease);
}
.footer-contact li:hover { padding-left: 34px; }
.footer-contact li i {
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255, 77, 0, .15) !important;
  color: var(--mf-orange) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background .25s, color .25s, transform .35s var(--mf-ease);
}
.footer-contact li:hover i {
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%) !important;
  color: #fff !important;
  transform: scale(1.08);
}
.footer-contact a { color: #C9BBA8; text-decoration: none; transition: color .2s; }
.footer-contact a:hover { color: var(--mf-yellow); }

.footer-social { display: inline-flex; gap: 8px; }
.footer-social a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  margin-right: 0 !important;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--mf-ease), box-shadow .35s, color .3s, background .3s !important;
}
.footer-social a i { position: relative; z-index: 1; transition: transform .35s var(--mf-ease); }
.footer-social a:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 10px 24px rgba(255, 77, 0, .35);
}
.footer-social a:hover i { transform: rotate(360deg); }
.footer-social a[aria-label="Facebook"]:hover  { background: #1877F2 !important; }
.footer-social a[aria-label="Instagram"]:hover { background: linear-gradient(135deg,#833AB4,#FD1D1D,#FCB045) !important; }
.footer-social a[aria-label="YouTube"]:hover   { background: #FF0000 !important; }
.footer-social a[aria-label="Twitter"]:hover   { background: #1DA1F2 !important; }
.footer-social a[aria-label="LinkedIn"]:hover  { background: #0A66C2 !important; }

.site-footer p.text-white-50 {
  color: #B8AB97 !important;
  font-size: 13.5px;
  line-height: 1.65;
}

.footer-divider {
  border: 0 !important;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,77,0,.35), rgba(19,136,8,.35), transparent);
  margin: 36px 0 18px !important;
  opacity: 1 !important;
}

.site-footer .row:last-of-type .small {
  color: #9C8F7D !important;
  font-size: 12.5px;
}
.site-footer .text-warning {
  color: var(--mf-yellow) !important;
  transition: color .2s, text-shadow .25s;
}
.site-footer .text-warning:hover {
  color: #fff !important;
  text-shadow: 0 0 12px rgba(255, 200, 69, .6);
}

.site-footer a[href*="GMaxMar"] {
  position: relative;
  font-weight: 600;
  background: linear-gradient(90deg, var(--mf-yellow) 0%, var(--mf-orange) 50%, var(--mf-yellow) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: gmaxShine 3.5s linear infinite;
}
@keyframes gmaxShine {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}
.site-footer a[href*="GMaxMar"]:hover { filter: brightness(1.2); }

@media (max-width: 768px) {
  .site-footer { padding-top: 50px !important; padding-bottom: 20px !important; }
  .footer-logo img,
  .footer-logo picture img { height: 78px !important; animation: none; }
  .footer-heading { font-size: 12px !important; margin-bottom: 16px !important; }
  .footer-social { justify-content: flex-start; flex-wrap: wrap; }
  .footer-social a { width: 36px !important; height: 36px !important; }
  .footer-divider { margin: 24px 0 14px !important; }
}

@media (max-width: 575.98px) {
  .site-footer .row:last-of-type > div { text-align: center !important; }
  .site-footer .row:last-of-type .text-md-end { text-align: center !important; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-logo img,
  .footer-logo picture img,
  .site-footer::before,
  .site-footer a[href*="GMaxMar"] { animation: none; }
}

/* ============================================================
   MOBILE BOTTOM NAV — fixed app-style bar
   ============================================================ */
@media (max-width: 991.98px) {

  /* Hide the floating Report FAB — replaced by bottom nav's Report item */
  .donate-fab { display: none !important; }

  /* Bottom nav container */
  .mobile-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 68px;
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--mf-line);
    box-shadow: 0 -8px 24px rgba(255, 77, 0, .08);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 1050;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* Each nav item */
  .mb-nav-item {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--mf-grey);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 8px 4px;
    position: relative;
    transition: color .25s, transform .35s var(--mf-ease);
  }
  .mb-nav-item i { font-size: 19px; transition: transform .35s var(--mf-ease), color .25s; }
  .mb-nav-item span { font-size: 10.5px; line-height: 1; }

  /* Tap feedback */
  .mb-nav-item:active { transform: scale(.94); }

  /* Active state — orange */
  .mb-nav-item.active {
    color: var(--mf-orange);
  }
  .mb-nav-item.active i {
    color: var(--mf-orange);
    transform: scale(1.1);
  }
  .mb-nav-item.active::before {
    content: '';
    position: absolute;
    left: 22%; right: 22%; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
    border-radius: 0 0 3px 3px;
    box-shadow: 0 4px 10px rgba(255, 77, 0, .35);
  }

  /* Center bubble item — raised orange circle (like "Donate" in screenshot) */
  .mb-nav-center { color: var(--mf-orange); }
  .mb-nav-center .mb-nav-bubble {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(255, 77, 0, .45);
    position: relative;
    top: -16px;
    margin-bottom: -12px;
    border: 4px solid #fff;
    transition: transform .4s var(--mf-ease), box-shadow .4s;
  }
  .mb-nav-center .mb-nav-bubble i {
    color: #fff;
    font-size: 20px;
    transform: none !important;
  }
  .mb-nav-center:hover .mb-nav-bubble,
  .mb-nav-center.active .mb-nav-bubble {
    transform: scale(1.06) rotate(-4deg);
    box-shadow: 0 14px 28px rgba(255, 77, 0, .55);
  }
  .mb-nav-center.active::before { display: none; }
  .mb-nav-center span { color: var(--mf-orange-dk); font-weight: 700; }

  /* Ripple-style pulse on the center bubble (subtle) */
  .mb-nav-center .mb-nav-bubble::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(255, 77, 0, .4);
    animation: mbPulse 2.4s ease-out infinite;
  }
  @keyframes mbPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
  }

  /* Reserve space at the page bottom so content scrolls past the nav */
  body { padding-bottom: 80px !important; }
  .site-footer { padding-bottom: 90px !important; }

  /* Hide back-to-top so it doesn't overlap with bottom nav */
  .back-to-top { bottom: 84px !important; right: 14px !important; width: 38px !important; height: 38px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mb-nav-center .mb-nav-bubble::after { animation: none; }
}

/* ============================================================
   ABOUT PAGE — Mission / Vision / Objectives / Schemes
   ============================================================ */

/* Mission & Vision side-by-side cards */
.mv-card {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  padding: 36px 32px;
  position: relative;
  box-shadow: var(--mf-shadow-sm);
  transition: transform .45s var(--mf-ease), box-shadow .45s var(--mf-ease);
  overflow: hidden;
}
.mv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
}
.mv-card-vision::before {
  background: linear-gradient(90deg, var(--mf-green), var(--mf-orange));
}
.mv-card:hover { transform: translateY(-4px); box-shadow: var(--mf-shadow-lg); }
.mv-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  color: #fff;
  font-size: 24px;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(255, 77, 0, .28);
  transition: transform .5s var(--mf-ease);
}
.mv-card-vision .mv-card-icon {
  background: linear-gradient(135deg, var(--mf-green) 0%, var(--mf-green-dk) 100%);
  box-shadow: 0 8px 20px rgba(19, 136, 8, .28);
}
.mv-card:hover .mv-card-icon { transform: rotate(-6deg) scale(1.08); }
.mv-card .eyebrow { margin-bottom: 8px; }
.mv-card .section-heading { padding-bottom: 12px; margin-bottom: 14px; }
.mv-card .section-heading::after { left: 0; transform: none; }
.mv-card .lead { font-size: 1rem; line-height: 1.6; margin-bottom: 0; }
.mv-rally {
  color: var(--mf-orange-dk);
  background: linear-gradient(90deg, var(--mf-orange-sf), transparent);
  padding: 12px 16px;
  border-left: 3px solid var(--mf-orange);
  border-radius: 0 8px 8px 0;
  margin-bottom: 0;
  font-style: italic;
}
.mv-rally i { color: var(--mf-orange); margin-right: 6px; }

/* Objective numbered cards */
.objective-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  opacity: .85;
}

/* Government scheme chips */
.scheme-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mf-ink);
  line-height: 1.3;
  min-height: 56px;
  transition: transform .35s var(--mf-ease), box-shadow .35s var(--mf-ease), border-color .25s;
}
.scheme-chip i {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--mf-orange-sf);
  color: var(--mf-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background .25s, color .25s, transform .35s var(--mf-ease);
}
.scheme-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255, 77, 0, .15);
  border-color: var(--mf-orange-sf);
}
.scheme-chip:hover i {
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  color: #fff;
  transform: scale(1.08) rotate(-4deg);
}

/* Mobile compact */
@media (max-width: 768px) {
  .mv-card { padding: 26px 22px; }
  .mv-card-icon { width: 48px; height: 48px; font-size: 22px; }
  .scheme-chip { padding: 10px 12px; font-size: 12px; min-height: 50px; }
  .scheme-chip i { width: 28px; height: 28px; font-size: 14px; }
  .objective-num { font-size: 1.8rem; }
}

/* ============================================================
   MEMBERSHIP FORM — premium styling
   ============================================================ */

/* Fee tier strip — quick visual price reference */
.fee-tier-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.fee-tier {
  flex: 1;
  min-width: 130px;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--mf-ease), box-shadow .3s;
}
.fee-tier::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
}
.fee-tier span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mf-grey);
}
.fee-tier strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mf-orange-dk);
  margin-top: 4px;
}
.fee-tier:hover { transform: translateY(-3px); box-shadow: var(--mf-shadow-md); }

/* Membership form container */
.membership-form { display: block; }

.form-section {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  padding: 28px 28px 24px;
  margin-bottom: 22px;
  box-shadow: var(--mf-shadow-sm);
}
.form-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--mf-orange-dk);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px dashed var(--mf-line);
}
.form-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(255, 77, 0, .3);
}

/* Form labels */
.membership-form .form-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--mf-ink);
  margin-bottom: 6px;
}

/* Form inputs */
.membership-form .form-control,
.membership-form .form-select {
  border-radius: 10px;
  border: 1px solid var(--mf-line);
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.membership-form .form-control:focus,
.membership-form .form-select:focus {
  border-color: var(--mf-orange);
  box-shadow: 0 0 0 4px rgba(255, 77, 0, .12);
}
.membership-form .form-select-lg { padding: 12px 16px; font-size: 15px; font-weight: 600; }

/* Fee display — animated reveal */
.fee-display {
  background: linear-gradient(135deg, var(--mf-yellow), #FFB94A);
  border-radius: 12px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-left: 4px solid var(--mf-orange);
  animation: feeFadeIn .5s var(--mf-ease);
  box-shadow: 0 8px 22px rgba(255, 200, 69, .35);
}
@keyframes feeFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fee-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mf-orange-dk);
  letter-spacing: .03em;
}
.fee-amount {
  font-family: 'Playfair Display', serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--mf-orange-dk);
  line-height: 1;
}

/* Location fields fade in when shown */
.location-field {
  animation: locationFadeIn .35s var(--mf-ease);
}
@keyframes locationFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form check (terms) — bigger tap target */
.membership-form .form-check { padding-left: 32px; }
.membership-form .form-check-input {
  width: 18px;
  height: 18px;
  margin-left: -32px;
  margin-top: 1px;
  cursor: pointer;
  border-color: var(--mf-orange);
}
.membership-form .form-check-input:checked {
  background-color: var(--mf-orange);
  border-color: var(--mf-orange);
}
.membership-form .form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(255, 77, 0, .18);
}
.membership-form .form-check-label { font-size: 14px; cursor: pointer; }

/* Alert customization */
.membership-form .alert-warning {
  background: linear-gradient(90deg, #FFF7E0 0%, #FFFCF8 100%);
  border: 1px solid #F4D6BD;
  color: var(--mf-orange-dk);
  border-radius: 12px;
  border-left: 4px solid var(--mf-yellow);
}
.membership-form .alert-warning i { color: var(--mf-orange); }

/* Submit button is already .btn-primary; this gives it a final pulse */
#submitBtn {
  margin-top: 8px;
  padding: 14px 28px !important;
  font-size: 16px !important;
}
#submitBtn:disabled {
  opacity: .75;
  cursor: wait;
  transform: none !important;
}

/* Mobile tightening */
@media (max-width: 768px) {
  .form-section { padding: 20px 18px; }
  .form-section-title { font-size: 1.05rem; gap: 10px; }
  .form-step { width: 28px; height: 28px; font-size: 13px; }
  .fee-tier { min-width: 100px; padding: 10px 8px; }
  .fee-tier strong { font-size: 1.05rem; }
  .fee-amount { font-size: 1.5rem; }
  .fee-display { padding: 12px 16px; }
}
@media (max-width: 575.98px) {
  .fee-tier-strip { flex-direction: column; }
  .fee-tier { min-width: 100%; }
}

/* ============================================================
   MEMBERSHIP v2 — level cards + Sahyog Rashi
   ============================================================ */

/* Old fee-tier strip is hidden — replaced by level cards below */
.fee-tier-strip { display: none !important; }

/* 6-card level picker — responsive */
.level-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 1199.98px) {
  .level-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .level-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
@media (max-width: 575.98px) {
  .level-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Highlight the mentorship card with green tint (no fee badge) */
.level-card[data-level="mentorship"] i { color: var(--mf-green); }
.level-card[data-level="mentorship"].active {
  border-color: var(--mf-green);
  background: linear-gradient(135deg, var(--mf-green-sf) 0%, #fff 60%);
  box-shadow: 0 14px 32px rgba(19,136,8,.22);
}
.level-card[data-level="mentorship"].active i { color: var(--mf-green-dk); }
.level-card[data-level="mentorship"].active::after {
  background: linear-gradient(135deg, var(--mf-green), var(--mf-green-dk));
  box-shadow: 0 4px 10px rgba(19,136,8,.35);
}

.level-card {
  background: #fff;
  border: 2px solid var(--mf-line);
  border-radius: 14px;
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform .35s var(--mf-ease), box-shadow .35s var(--mf-ease), border-color .25s, background .25s;
  position: relative;
  overflow: hidden;
  font: inherit;
}
.level-card i {
  font-size: 26px;
  color: var(--mf-orange);
  transition: transform .4s var(--mf-ease), color .25s;
}
.level-card .level-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mf-ink);
  letter-spacing: -.01em;
  margin-top: 4px;
}
.level-card .level-hint {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mf-grey);
  font-weight: 600;
}
.level-card:hover {
  border-color: var(--mf-orange-sf);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255, 77, 0, .12);
}
.level-card:hover i { transform: scale(1.12); }

.level-card.active {
  border-color: var(--mf-orange);
  background: linear-gradient(135deg, var(--mf-orange-sf) 0%, #fff 60%);
  box-shadow: 0 14px 32px rgba(255, 77, 0, .22);
}
.level-card.active::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mf-orange) 0%, var(--mf-orange-dk) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(255, 77, 0, .35);
}
.level-card.active i { color: var(--mf-orange-dk); transform: scale(1.15); }
.level-card.active .level-name { color: var(--mf-orange-dk); }
@media (max-width: 575.98px) {
  .level-card { padding: 14px 10px; }
  .level-card i { font-size: 22px; }
  .level-card .level-name { font-size: 0.95rem; }
  .level-card .level-hint { font-size: 10px; }
}

/* Sahyog Rashi reveal — soft accent, not loud */
.sahyog-box {
  background: linear-gradient(90deg, var(--mf-orange-sf) 0%, var(--mf-cream) 100%);
  border-left: 4px solid var(--mf-orange);
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 6px;
  animation: sahyogFadeIn .45s var(--mf-ease);
}
@keyframes sahyogFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sahyog-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sahyog-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--mf-orange-dk);
  letter-spacing: .02em;
}
.sahyog-label i { margin-right: 6px; }
.sahyog-amount {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--mf-orange-dk);
  line-height: 1;
}
.sahyog-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--mf-grey);
  line-height: 1.45;
}

/* ============================================================
   MEMBERSHIP — payment box
   ============================================================ */
.payment-box {
  background: linear-gradient(135deg, var(--mf-cream) 0%, #FFFEFA 100%);
  border: 1px solid var(--mf-line);
  border-left: 4px solid var(--mf-orange);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 4px 0 18px;
}
.payment-box-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--mf-orange-dk);
  margin-bottom: 10px;
}
.payment-box-head i { font-size: 1.2rem; }
.payment-mode-badge {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mf-orange-sf);
  color: var(--mf-orange-dk);
  margin-left: auto;
}
.payment-mode-badge.mode-qr       { background: #E1F4E5; color: var(--mf-green-dk); }
.payment-mode-badge.mode-razorpay { background: #DCE8FF; color: var(--mf-blue-dk); }
.payment-mode-badge.mode-offline  { background: #FFEEDD; color: var(--mf-orange-dk); }

/* QR block layout */
.payment-qr-block {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
}
.payment-qr-img {
  flex: 0 0 240px;
  text-align: center;
}
.payment-qr-img img {
  width: 220px;
  height: 220px;
  border-radius: 12px;
  border: 1px solid var(--mf-line);
  background: #fff;
  padding: 8px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 8px 20px rgba(255, 77, 0, .12);
}
.payment-qr-caption {
  font-size: 11.5px;
  color: var(--mf-grey);
  margin: 8px 0 0;
}
.payment-qr-info {
  flex: 1;
  min-width: 240px;
}
.upi-id-text {
  background: #fff;
  border: 1px solid var(--mf-line);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--mf-orange-dk);
}

@media (max-width: 575.98px) {
  .payment-qr-block { gap: 14px; }
  .payment-qr-img { flex-basis: 100%; }
  .payment-qr-img img { width: 180px; height: 180px; }
}

/* Position preview pill — shows the assembled full title */
.position-preview {
  margin-top: 16px;
  background: linear-gradient(135deg, #FFF7E0 0%, var(--mf-cream) 100%);
  border: 1px dashed var(--mf-orange);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  animation: positionPreviewIn .35s var(--mf-ease);
}
@keyframes positionPreviewIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.position-preview-label {
  font-size: 12.5px;
  letter-spacing: .03em;
  font-weight: 600;
  color: var(--mf-orange-dk);
  text-transform: uppercase;
}
.position-preview-label i { margin-right: 6px; }
.position-preview-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mf-ink);
  letter-spacing: -.01em;
}

/* ============================================================
   PAYMENT PAGE — summary + larger payment widget
   ============================================================ */
.payment-summary {
  background: linear-gradient(135deg, var(--mf-cream) 0%, var(--mf-green-sf) 100%);
  border: 1px solid var(--mf-line);
  border-left: 5px solid var(--mf-green);
  border-radius: 14px;
  padding: 22px 26px;
}
.payment-summary-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--mf-green-dk);
  margin-bottom: 8px;
}
.payment-summary-head i { color: var(--mf-green); font-size: 1.3rem; }
.payment-summary-row {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: 10px;
  padding: 10px 14px;
}
.payment-summary-label {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mf-grey);
  font-weight: 700;
  margin-bottom: 2px;
}
.payment-summary-row strong {
  font-size: 14.5px;
  color: var(--mf-ink);
}
.payment-summary-amount {
  background: linear-gradient(135deg, var(--mf-yellow) 0%, #FFB94A 100%);
  border-color: transparent;
}
.payment-summary-amount strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: var(--mf-orange-dk);
}

/* Larger payment box on the payment page */
.payment-box-lg {
  padding: 24px 28px;
  border-radius: 14px;
}
.payment-box-lg .payment-box-head {
  font-size: 1.15rem;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--mf-line);
}

/* ============================================================
   PAYMENT PAGE — method tabs + bank details
   ============================================================ */
.pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.pay-method-btn {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 12px;
  background: #fff;
  border: 2px solid var(--mf-line);
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mf-ink);
  cursor: pointer;
  transition: all .3s var(--mf-ease);
}
.pay-method-btn i {
  font-size: 22px;
  color: var(--mf-orange);
  transition: transform .35s var(--mf-ease);
}
.pay-method-btn:hover {
  border-color: var(--mf-orange-sf);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255,77,0,.10);
}
.pay-method-btn:hover i { transform: scale(1.1); }
.pay-method-btn.active {
  border-color: var(--mf-orange);
  background: linear-gradient(135deg, var(--mf-orange-sf) 0%, #fff 60%);
  box-shadow: 0 10px 22px rgba(255,77,0,.18);
}
.pay-method-btn.active i { color: var(--mf-orange-dk); }
@media (max-width: 575.98px) {
  .pay-method-btn { min-width: calc(50% - 5px); padding: 10px 8px; font-size: 12px; }
  .pay-method-btn i { font-size: 18px; }
}

/* Pay tab body */
.pay-tab[hidden] { display: none !important; }
.pay-tab {
  padding: 16px 0 4px;
  animation: payTabIn .3s var(--mf-ease);
}
@keyframes payTabIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bank transfer details */
.bank-details {
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: 12px;
  padding: 4px 0;
  overflow: hidden;
}
.bank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--mf-line);
  flex-wrap: wrap;
}
.bank-row:last-child { border-bottom: 0; background: linear-gradient(135deg, var(--mf-yellow) 0%, #FFB94A 100%); }
.bank-label {
  flex: 0 0 140px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mf-grey);
}
.bank-row strong {
  flex: 1;
  font-size: 14.5px;
  color: var(--mf-ink);
}
.bank-row code {
  background: var(--mf-cream);
  padding: 3px 10px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  letter-spacing: .05em;
}
.bank-amount {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  color: var(--mf-orange-dk) !important;
}
@media (max-width: 575.98px) {
  .bank-label { flex-basis: 100%; }
}


/* ============================================================
   TEAM / MEMBERS SECTION  (homepage — premium animated)
   ============================================================ */
.team-section { position: relative; overflow: hidden; }
.team-deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.team-deco-1 {
  width: 340px; height: 340px;
  top: -120px; right: -80px;
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
}
.team-deco-2 {
  width: 300px; height: 300px;
  bottom: -120px; left: -90px;
  background: linear-gradient(135deg, var(--mf-yellow), var(--mf-orange));
}

.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 22px 22px;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-shadow-sm);
  transition: transform .4s var(--mf-ease), box-shadow .4s var(--mf-ease), border-color .4s var(--mf-ease);
  overflow: hidden;
  isolation: isolate;
}
/* Rising gradient wash on hover */
.team-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  opacity: 0;
  transform: translateY(40%);
  transition: opacity .45s var(--mf-ease), transform .45s var(--mf-ease);
  z-index: -1;
}
.team-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--mf-shadow-lg);
  border-color: transparent;
}
.team-card:hover::before { opacity: .05; transform: translateY(0); }

/* Avatar + gradient ring */
.team-photo {
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
}
.team-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  padding: 5px;
  opacity: .9;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  transition: transform .6s var(--mf-ease), opacity .4s var(--mf-ease);
}
.team-card:hover .team-ring { transform: rotate(130deg) scale(1.05); opacity: 1; }

.team-img,
.team-avatar {
  width: 164px;
  height: 164px;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(255, 77, 0, .20);
  transition: transform .4s var(--mf-ease);
}
.team-img {
  object-fit: cover;
  object-position: center;
  display: block;
}
.team-avatar {
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 48px;
  letter-spacing: .5px;
  line-height: 1;
  user-select: none;
}
.team-card:hover .team-img,
.team-card:hover .team-avatar { transform: scale(1.05); }

/* Text */
.team-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 700;
  color: var(--mf-ink);
  margin: 0 0 8px;
}
.team-role {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mf-orange-dk);
  background: var(--mf-orange-sf);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.team-parent { font-size: 12.5px; color: var(--mf-grey); margin: 0 0 2px; }
.team-location { font-size: 12.5px; color: var(--mf-grey); margin: 0 0 8px; }
.team-location .bi { color: var(--mf-orange); }
.team-bio { font-size: 13px; line-height: 1.55; color: var(--mf-grey); margin: 4px 0 0; }

/* Social row — reveals on hover */
.team-social {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--mf-ease), transform .4s var(--mf-ease);
}
.team-card:hover .team-social { opacity: 1; transform: translateY(0); }
.team-social-link {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--mf-orange-dk);
  background: var(--mf-orange-sf);
  transition: all .25s var(--mf-ease);
  cursor: pointer;
}
.team-social-link:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(255, 77, 0, .30);
}

@media (max-width: 575.98px) {
  .team-card { padding: 22px 16px 18px; }
  .team-photo { width: 150px; height: 150px; }
  .team-img, .team-avatar { width: 136px; height: 136px; }
  .team-avatar { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-card, .team-card::before, .team-ring, .team-avatar, .team-social { transition: none; }
}

/* ===== Utility-bar Login link ===== */
.util-login {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 3px 12px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  transition: all .25s var(--mf-ease);
}
.util-login:hover {
  color: var(--mf-orange-dk);
  background: #fff;
  border-color: #fff;
}
.util-login .bi { font-size: 13px; }

/* Compact "Report a Complaint" button in the main navbar (desktop) */
.main-navbar .navbar-nav .nav-item .btn-donate {
  font-size: 12px;
  padding: 7px 14px;
  white-space: nowrap;
}
.main-navbar .navbar-nav .nav-item .btn-donate .bi { font-size: 12px; }

/* ============================================================
   PUBLIC MEMBERS PAGE  (members.php)
   ============================================================ */
.members-levelnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.members-levelnav-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--mf-line);
  color: var(--mf-ink);
  font-size: 13px;
  font-weight: 600;
  transition: all .25s var(--mf-ease);
}
.members-levelnav-chip:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--mf-shadow-sm);
}
.members-levelnav-count {
  font-size: 11px;
  background: var(--mf-orange-sf);
  color: var(--mf-orange-dk);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 700;
}
.members-levelnav-chip:hover .members-levelnav-count {
  background: rgba(255,255,255,.25);
  color: #fff;
}

.members-level-block { scroll-margin-top: 90px; }
.members-level-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--mf-line);
}
.members-level-icon {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 24px;
  box-shadow: var(--mf-shadow-sm);
}
.members-level-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 700;
  color: var(--mf-ink);
  margin: 0;
}
.members-level-desc { font-size: 13px; color: var(--mf-grey); margin: 2px 0 0; }
.members-level-badge {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--mf-orange-dk);
  background: var(--mf-orange-sf);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 18px 20px;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  box-shadow: var(--mf-shadow-sm);
  transition: transform .4s var(--mf-ease), box-shadow .4s var(--mf-ease), border-color .4s var(--mf-ease);
  overflow: hidden;
}
.member-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--mf-shadow-lg);
  border-color: transparent;
}
.member-photo {
  position: relative;
  width: 168px; height: 168px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
}
.member-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  padding: 4px;
  opacity: .9;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  transition: transform .6s var(--mf-ease);
}
.member-card:hover .member-ring { transform: rotate(130deg) scale(1.05); }
.member-img,
.member-avatar {
  width: 152px; height: 152px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 6px 18px rgba(255,77,0,.18);
}
.member-avatar {
  display: grid;
  place-items: center;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 46px;
  user-select: none;
}
.member-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mf-ink);
  margin: 0 0 6px;
}
.member-role {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--mf-orange-dk);
  background: var(--mf-orange-sf);
  padding: 3px 11px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.member-area { font-size: 12.5px; color: var(--mf-grey); margin: 0 0 4px; }
.member-area .bi { color: var(--mf-orange); }
.member-id {
  font-size: 11.5px;
  color: var(--mf-green-dk);
  font-weight: 600;
  margin: 0;
}
.member-id .bi { color: var(--mf-green); }

@media (max-width: 575.98px) {
  .members-level-badge { display: none; }
  .member-card { padding: 20px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .member-card, .member-ring, .members-levelnav-chip { transition: none; }
}

/* ============================================================
   NAVBAR — fully responsive fit (expand-xl). Nothing gets cut.
   ============================================================ */
/* Desktop horizontal menu (>=1200px) — keep everything on one line */
@media (min-width: 1200px) {
  .main-navbar .container { flex-wrap: nowrap; }
  .main-navbar .nav-link {
    padding: 8px 10px !important;
    font-size: 14px;
    white-space: nowrap;
  }
  .brand-text-stack {
    max-width: none;
    width: max-content;
    flex-shrink: 0;
    min-width: 0;
    overflow: visible;
  }
  .brand-text-hi  { white-space: nowrap; overflow: visible; font-size: 14px; }
  .brand-text-en  { white-space: nowrap; overflow: visible; font-size: 9px; }
  .navbar-brand.logo-with-name { flex-shrink: 0; min-width: 0; }
  .nav-report-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
/* Tighter range (1200–1399px) — slightly smaller text so nothing overflows */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .main-navbar .nav-link { padding: 8px 7px !important; font-size: 13px; }
  .brand-text-stack { max-width: none; width: max-content; overflow: visible; }
  .brand-text-hi { font-size: 14px; white-space: nowrap; overflow: visible; }
  .brand-text-en { font-size: 9px; white-space: nowrap; overflow: visible; }
  .nav-report-btn { padding: 7px 12px; font-size: 12.5px; }
  .main-navbar .nav-item.ms-xl-3 { margin-left: .35rem !important; }
}

/* Tablet / collapsed range (992–1199px) — hamburger mode, clean bar */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-navbar .container { flex-wrap: nowrap; gap: 8px; }
  /* brand text auto-fits its content; slightly smaller so it never clips */
  .brand-text-stack { max-width: none; width: max-content; overflow: visible; }
  .brand-text-hi { font-size: 14px; white-space: nowrap; overflow: visible; }
  .brand-text-en { font-size: 9px; white-space: nowrap; overflow: visible; }
  .navbar-toggler {
    width: 42px; height: 42px;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #FF6A1A 0%, #FF4D00 100%) !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(255,77,0,.30);
    padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,77,0,.30) !important; }
  .navbar-toggler .nav-hamburger-icon { color: #fff !important; font-size: 22px; }
  .nav-donate-mobile { flex-shrink: 0; white-space: nowrap; }
}

/* "All Members" chip — highlighted active style */
.members-levelnav-chip--all {
  color: #fff;
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  border-color: transparent;
}
.members-levelnav-chip--all .members-levelnav-count {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.members-levelnav-chip--all:hover { color: #fff; transform: translateY(-2px); }

/* Active (selected) filter chip */
.members-levelnav-chip.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  border-color: transparent;
  box-shadow: var(--mf-shadow-sm);
}
.members-levelnav-chip.is-active .members-levelnav-count {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.members-levelnav-chip { cursor: pointer; }

/* ============================================================
   DOCUMENTS / CERTIFICATES SECTION (homepage)
   ============================================================ */
.docs-section { position: relative; }
.doc-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  overflow: hidden;
  box-shadow: var(--mf-shadow-sm);
  transition: transform .4s var(--mf-ease), box-shadow .4s var(--mf-ease), border-color .4s var(--mf-ease);
}
.doc-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--mf-shadow-lg);
  border-color: transparent;
}
/* Documents row — up to 5 across on large screens */
@media (min-width: 992px) {
  .docs-grid > .col-lg { flex: 0 0 auto; width: 20%; }
}
.doc-card-img {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--mf-cream);
}
.doc-card-img img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform .5s var(--mf-ease);
}
.doc-card:hover .doc-card-img img { transform: scale(1.06); }
.doc-card-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(184, 53, 0, .28);
  color: #fff;
  font-size: 1.8rem;
  opacity: 0;
  transition: opacity .35s var(--mf-ease);
}
.doc-card:hover .doc-card-zoom { opacity: 1; }
.doc-card-badge {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--mf-green), var(--mf-green-dk));
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(19,136,8,.35);
}
.doc-card-badge .bi { font-size: 12px; }

@media (max-width: 575.98px) {
  .doc-card-badge { font-size: 10px; padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-card, .doc-card-img img, .doc-card-zoom { transition: none; }
}

/* ============================================================
   HERO — PRO POLISH (banner slides)  [v117]
   ============================================================ */
/* Cinematic depth on banner-only slides — subtle top+bottom fade,
   keeps designed banner readable while adding premium framing. */
.hero-slide-bare::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.22) 100%);
}
/* Soft inner edge vignette for a richer, less flat look */
.hero-slide-bare::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 0 120px rgba(0,0,0,.28);
}

/* Premium pagination bullets */
.hero-pagination .swiper-pagination-bullet {
  width: 10px; height: 10px;
  background: rgba(255,255,255,.55);
  opacity: 1;
  border: 1px solid rgba(255,255,255,.6);
  transition: width .35s var(--mf-ease), background .35s var(--mf-ease);
}
.hero-pagination .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--mf-orange), var(--mf-yellow));
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255,77,0,.5);
}

/* Premium nav arrows — glassy circle, brand hover */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.55);
  color: #fff !important;
  transition: background .3s var(--mf-ease), transform .3s var(--mf-ease), border-color .3s var(--mf-ease);
}
.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
  background: linear-gradient(135deg, var(--mf-orange), var(--mf-orange-dk));
  border-color: transparent;
  transform: scale(1.08);
}
.hero-swiper .swiper-button-prev::after,
.hero-swiper .swiper-button-next::after {
  font-size: 18px !important;
  font-weight: 800;
}

/* Thin brand accent strip at the very bottom of the hero */
.hero-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  z-index: 5;
  background: linear-gradient(90deg, var(--mf-orange) 0%, var(--mf-yellow) 50%, var(--mf-green) 100%);
}

@media (max-width: 575.98px) {
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next { transition: none; }
}