/* =====================================================
   ग्रंथराज भक्तीधाम फाउंडेशन — Main Stylesheet
   ===================================================== */

:root {
  /* रंगसंगती — भगवा, केशरी, सोनेरी, पांढरा, हलका क्रीम */
  --bhagwa: #FF9933;
  --kesari: #E65100;
  --kesari-dark: #B84300;
  --gold: #D4AF37;
  --gold-light: #F4E4BC;
  --cream: #FFF9EE;
  --cream-dark: #FBF0DA;
  --white: #FFFFFF;
  --text-dark: #3B2412;
  --text-muted: #7A5C42;
  --text-on-dark: #FFF6E6;

  --gradient-hero: linear-gradient(135deg, #B84300 0%, #E65100 35%, #FF9933 70%, #D4AF37 100%);
  --gradient-gold: linear-gradient(120deg, var(--gold) 0%, var(--bhagwa) 100%);

  --font-heading: 'Noto Serif Devanagari', 'Noto Sans Devanagari', serif;
  --font-body: 'Noto Sans Devanagari', 'Noto Serif Devanagari', sans-serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 10px rgba(59, 36, 18, 0.08);
  --shadow: 0 10px 30px rgba(184, 67, 0, 0.12);
  --shadow-lg: 0 20px 50px rgba(184, 67, 0, 0.18);

  --container: 1180px;
  --header-h: 82px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--cream);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.35;
  color: var(--kesari-dark);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 90px 0; }
.section-alt { background: var(--cream-dark); }
.section-white { background: var(--white); }

.section-tag {
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--kesari);
  background: var(--gold-light);
  padding: 6px 18px;
  border-radius: 30px;
  font-weight: 600;
  margin-bottom: 16px;
}

.section-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-heading h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  margin-bottom: 14px;
}
.section-heading p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.divider-om {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.divider-om .om-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1;
  margin: 0;
  padding: 0;
  transform: none;
  padding-top: 15px;
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); }

.btn-primary {
  background: var(--gradient-gold);
  color: var(--white);
  box-shadow: var(--shadow);
}
.btn-primary:hover { box-shadow: var(--shadow-lg); }

.btn-outline {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn-outline:hover { background: var(--white); color: var(--kesari); }

.btn-outline-dark {
  background: transparent;
  border-color: var(--kesari);
  color: var(--kesari);
}
.btn-outline-dark:hover { background: var(--kesari); color: var(--white); }

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
  box-shadow: var(--shadow);
}
.btn-whatsapp:hover { box-shadow: var(--shadow-lg); }

.btn-instagram {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  color: var(--white);
  box-shadow: var(--shadow);
}
.btn-instagram:hover { box-shadow: var(--shadow-lg); }

.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 10px 22px; font-size: 0.92rem; }

/* ===================== HEADER ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 249, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 6px 24px rgba(59, 36, 18, 0.12);
  background: rgba(255, 249, 238, 0.98);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--kesari-dark);
}
.logo-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}
.logo-text { max-width: 210px; line-height: 1.25; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  padding: 10px 16px;
  border-radius: 30px;
  font-weight: 600;
  color: var(--text-dark);
  position: relative;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav-link:hover,
.nav-link.active {
  background: var(--gold-light);
  color: var(--kesari-dark);
}

.header-actions { display: flex; align-items: center; gap: 14px; }

.lang-switch {
  display: flex;
  align-items: center;
  background: var(--gold-light);
  border-radius: 30px;
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 30px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.lang-btn.active {
  background: var(--gradient-gold);
  color: var(--white);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.hamburger span {
  width: 26px;
  height: 3px;
  background: var(--kesari-dark);
  border-radius: 3px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===================== HOME HERO ===================== */
.home-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--gradient-hero);
  color: var(--text-on-dark);
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12) 0, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,0.12) 0, transparent 45%);
  animation: heroGlow 8s ease-in-out infinite alternate;
}
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  mix-blend-mode: overlay;
  animation: heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
@keyframes heroGlow {
  from { opacity: 0.7; }
  to { opacity: 1; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 40px 24px;
}
.hero-goshala-img {
  display: block;
  position: relative;
  z-index: 2;
  width: min(58vw, 240px);
  margin: 30px auto 0;
  pointer-events: none;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.35));
  opacity: 0;
  animation: goshalaEnter 1.1s ease 0.4s forwards, goshalaFloat 5s ease-in-out 1.5s infinite;
}
@keyframes goshalaEnter {
  from { opacity: 0; transform: translate(0, 30px) scale(0.9); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes goshalaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (min-width: 1025px) {
  .home-hero {
    justify-content: center;
    gap: 10px;
    padding: 70px 40px 130px;
  }
  .hero-content {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 40px 24px;
  }
  .hero-goshala-img {
    flex: 0 0 46%;
    width: 46%;
    max-width: 640px;
    margin: 0;
  }
  @keyframes goshalaEnter {
    from { opacity: 0; transform: translate(60px, 30px) scale(0.9); }
    to { opacity: 1; transform: translate(0, 0) scale(1); }
  }
}
@media (max-width: 1024px) {
  .home-hero { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-goshala-img { animation: none; opacity: 1; }
}
.hero-sloka {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  color: var(--gold-light);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
  animation: heroFadeUp 0.9s ease both;
}
.hero-content h1 {
  animation: heroFadeUp 0.9s ease 0.15s both;
  color: var(--white);
  font-size: clamp(1.5rem, 6vw, 3.4rem);
  line-height: 1.25;
  margin-bottom: 14px;
}
.hero-address {
  font-size: 1.1rem;
  color: var(--gold-light);
  margin-bottom: 22px;
  line-height: 1.6;
  animation: heroFadeUp 0.9s ease 0.3s both;
}
.hero-tagline {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 10px 26px;
  border-radius: 40px;
  margin-bottom: 34px;
  animation: heroFadeUp 0.9s ease 0.45s both, taglinePulse 2.6s ease-in-out 1.4s infinite;
}
@keyframes taglinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.25); }
  50% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}
.hero-buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  animation: heroFadeUp 0.9s ease 0.6s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-img, .home-hero::before, .hero-sloka, .hero-content h1,
  .hero-address, .hero-tagline, .hero-buttons {
    animation: none !important;
  }
}

/* Highlight cards under hero */
.highlight-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: -70px;
  position: relative;
  z-index: 5;
  padding: 0 24px;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
.highlight-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 22px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.highlight-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.8rem;
  color: var(--kesari);
}
.highlight-card h3 { font-size: 1.05rem; }
.highlight-sub { font-size: 0.88rem; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }

.highlight-card--featured {
  position: relative;
  border: 2px solid var(--gold);
  background: linear-gradient(165deg, var(--white) 55%, var(--gold-light) 160%);
  animation: goshalaGlow 2.6s ease-in-out infinite;
}
.highlight-card--featured .highlight-icon {
  background: var(--gradient-gold);
  color: var(--white);
}
.featured-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-gold);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
@keyframes goshalaGlow {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 7px rgba(212,175,55,0.22), var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .highlight-card--featured { animation: none; }
}

/* ===================== INNER PAGE HERO ===================== */
.page-hero {
  background: var(--gradient-hero);
  color: var(--white);
  text-align: center;
  padding: 150px 24px 80px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 15% 30%, rgba(255,255,255,0.14) 0, transparent 40%);
}
.page-hero-inner { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 10px; }
.page-hero .breadcrumb { color: var(--gold-light); font-weight: 600; }
.page-hero .breadcrumb a:hover { text-decoration: underline; }

/* Gallery page hero photo. Scoped to .page-hero-gallery so the shared .page-hero used by the
   other inner pages is unchanged; the warm overlay keeps the white text readable on the bright sky. */
.page-hero-gallery {
  background-color: #6B2E0A;
  background-image:
    linear-gradient(180deg, rgba(60, 24, 4, 0.5) 0%, rgba(60, 24, 4, 0.34) 55%, rgba(60, 24, 4, 0.46) 100%),
    url('../images/gallery-hero.webp');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}
.page-hero-gallery::before {
  background-image: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(40, 14, 0, 0.38) 0, transparent 100%);
}
.page-hero-gallery h1,
.page-hero-gallery .page-hero-inner p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
@media (max-width: 767.98px) {
  /* Narrow screens only show a slice of the wide photo: keep Krishna and the calf, and sit his face
     in the hero's empty top padding so the heading is not printed across it. */
  .page-hero-gallery {
    background-size: cover, auto 120%;
    background-position: center, 12% 100%;
  }
}

/* News & Events page hero photo. Scoped to .page-hero-news so the shared .page-hero used by
   Volunteer / Transparency / Privacy Policy / Terms & Conditions is unchanged. */
.page-hero-news {
  background-color: #5C3210;
  background-image:
    linear-gradient(180deg, rgba(50, 26, 6, 0.52) 0%, rgba(50, 26, 6, 0.32) 55%, rgba(50, 26, 6, 0.48) 100%),
    url('../images/news-events-hero.webp');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.page-hero-news::before {
  background-image: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(35, 16, 0, 0.4) 0, transparent 100%);
}
.page-hero-news h1,
.page-hero-news .page-hero-inner p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
@media (max-width: 767.98px) {
  /* Narrow screens only show a slice of the wide photo: bias toward the temple and the
     decorated cow on the left third rather than the crowd, which reads as a busy blur when small. */
  .page-hero-news {
    background-position: 22% 38%;
  }
}

/* Transparency page hero photo. Scoped to .page-hero-transparency so the shared .page-hero
   used by Volunteer / Privacy Policy / Terms & Conditions is unchanged. */
.page-hero-transparency {
  background-color: #4A2E12;
  background-image:
    linear-gradient(180deg, rgba(58, 34, 10, 0.56) 0%, rgba(58, 34, 10, 0.38) 55%, rgba(58, 34, 10, 0.52) 100%),
    url('../images/transparency-hero.webp');
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
.page-hero-transparency::before {
  background-image: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(35, 18, 0, 0.4) 0, transparent 100%);
}
.page-hero-transparency h1,
.page-hero-transparency .page-hero-inner p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
@media (max-width: 767.98px) {
  /* Narrow screens only show a slice of the wide photo: bias toward the ledgers, calculator
     and file records on the left rather than the softer temple/garden middle. */
  .page-hero-transparency {
    background-position: 28% 42%;
  }
}

/* Volunteer page hero photo. Scoped to .page-hero-volunteer so the shared .page-hero used by
   Privacy Policy / Terms & Conditions is unchanged. */
.page-hero-volunteer {
  background-color: #4A2E10;
  background-image:
    linear-gradient(180deg, rgba(56, 32, 8, 0.55) 0%, rgba(56, 32, 8, 0.36) 55%, rgba(56, 32, 8, 0.5) 100%),
    url('../images/volunteer-hero.webp');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.page-hero-volunteer::before {
  background-image: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(35, 18, 0, 0.4) 0, transparent 100%);
}
.page-hero-volunteer h1,
.page-hero-volunteer .page-hero-inner p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
@media (max-width: 767.98px) {
  /* Narrow screens only show a slice of the wide photo: bias toward the volunteer feeding the
     cow on the left rather than the softer temple/garden middle. */
  .page-hero-volunteer {
    background-position: 26% 42%;
  }
}

/* Privacy Policy page hero photo. Scoped to .page-hero-privacy so the shared .page-hero used
   by Terms & Conditions is unchanged. */
.page-hero-privacy {
  background-color: #4A3010;
  background-image:
    linear-gradient(180deg, rgba(58, 36, 10, 0.55) 0%, rgba(58, 36, 10, 0.36) 55%, rgba(58, 36, 10, 0.5) 100%),
    url('../images/privacy-hero.webp');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.page-hero-privacy::before {
  background-image: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(35, 20, 0, 0.4) 0, transparent 100%);
}
.page-hero-privacy h1,
.page-hero-privacy .page-hero-inner p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
@media (max-width: 767.98px) {
  /* Narrow screens only show a slice of the wide photo: bias toward the security shield/lock
     (the clearest "privacy" visual) rather than the softer temple/garden middle. */
  .page-hero-privacy {
    background-position: 68% 46%;
  }
}

/* Terms & Conditions page hero photo. Scoped to .page-hero-terms; no other page uses the
   plain .page-hero gradient anymore. */
.page-hero-terms {
  background-color: #4A3410;
  background-image:
    linear-gradient(180deg, rgba(58, 40, 10, 0.55) 0%, rgba(58, 40, 10, 0.36) 55%, rgba(58, 40, 10, 0.5) 100%),
    url('../images/terms-hero.webp');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.page-hero-terms::before {
  background-image: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(35, 22, 0, 0.4) 0, transparent 100%);
}
.page-hero-terms h1,
.page-hero-terms .page-hero-inner p { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
@media (max-width: 767.98px) {
  /* Narrow screens only show a slice of the wide photo: bias toward the brass scale of justice
     (the clearest "Terms & Conditions" visual) rather than the softer temple/garden middle. */
  .page-hero-terms {
    background-position: 70% 46%;
  }
}

/* ===================== CARDS (generic) ===================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(212,175,55,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--gradient-gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
}
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 0.97rem; }

/* ===================== INTRO / TEXT SECTIONS ===================== */
.intro-section {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.intro-section p { font-size: 1.08rem; color: var(--text-muted); }

.construction-banner {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-light);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  align-items: stretch;
}
.construction-banner .cb-text {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.construction-banner .cb-text h2 { margin-bottom: 16px; }
.construction-banner .cb-text p { color: var(--text-muted); margin-bottom: 26px; }
.construction-banner .cb-image {
  position: relative;
  min-height: 340px;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  padding: 14px;
}
.cb-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.goseva-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 720px;
  margin: 0 auto;
}
.goseva-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--gold-light);
}

/* ===================== IMAGE PLACEHOLDER SYSTEM ===================== */
.img-ph {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, var(--gold-light), var(--gold-light) 12px, var(--cream-dark) 12px, var(--cream-dark) 24px);
  border: 2px dashed var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-ph::before {
  content: attr(data-label);
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px;
  font-weight: 700;
  color: var(--kesari-dark);
  font-size: 0.95rem;
  background: rgba(255,255,255,0.75);
  border-radius: var(--radius-sm);
}
.img-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}
.img-ph.square { aspect-ratio: 1/1; }
.img-ph.tall { aspect-ratio: 3/4; }
.img-ph.wide { aspect-ratio: 16/9; }

/* ===================== GOAL / MISSION CARDS ===================== */
.goal-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }

/* ===================== VIDEO SECTION ===================== */
.video-wrap {
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
  outline: 1px solid var(--gold-light);
}
.video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: cover;
}

/* ===================== FOUNDER SECTION ===================== */
.founder-wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 50px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 50px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold-light);
}
.founder-wrap .founder-name { font-size: 1.5rem; margin-bottom: 8px; }
.founder-wrap .founder-role { color: var(--kesari); font-weight: 700; margin-bottom: 18px; }
.founder-wrap .founder-note {
  margin-top: 20px;
  font-size: 0.92rem;
  color: var(--text-muted);
  background: var(--cream-dark);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--gold);
}

/* ===================== WORK / SEVA BLOCKS (Page 3) ===================== */
.work-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 70px 0;
  border-bottom: 1px solid rgba(212,175,55,0.25);
}
.work-block:last-child { border-bottom: none; }
.work-block.reverse .work-text { order: 2; }
.work-block.reverse .work-media { order: 1; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.status-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.status-progress { background: #FFE7CE; color: var(--kesari-dark); }
.status-active { background: #DDF3DD; color: #1E7A1E; }
.status-proposed { background: var(--gold-light); color: #8A6D1F; }

.work-text h2 { font-size: 1.8rem; margin-bottom: 14px; }
.work-text p { color: var(--text-muted); margin-bottom: 22px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery-grid .img-ph { min-height: 150px; }
.gallery-grid.span-full { grid-column: 1 / -1; }

.video-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.video-gallery-grid .video-wrap { max-width: none; border-width: 4px; aspect-ratio: 3/4; }

/* ===================== DONATION PAGE ===================== */
.donation-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.donation-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.donation-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.donation-card .card-icon { margin: 0 auto 16px; }
.donation-card h3 { font-size: 1.05rem; }

.cta-banner {
  background: var(--gradient-hero);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta-banner h2 { color: var(--white); margin-bottom: 14px; }
.cta-banner p { color: var(--gold-light); max-width: 560px; margin: 0 auto 30px; }

.editable-note {
  background: var(--cream-dark);
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius);
  padding: 26px 30px;
  color: var(--kesari-dark);
  font-weight: 600;
  text-align: center;
}
.editable-note small {
  display: block;
  margin-top: 8px;
  font-weight: 400;
  color: var(--text-muted);
}

.donation-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.donation-info-grid .img-ph { min-height: 180px; }
.qr-frame {
  background: #10182b;
  border-radius: var(--radius);
  border: 1px solid var(--gold-light);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.qr-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--radius) - 6px);
}

.contact-reminder {
  text-align: center;
  margin-top: 40px;
  font-weight: 700;
  color: var(--kesari-dark);
  background: var(--gold-light);
  padding: 18px 24px;
  border-radius: var(--radius-sm);
}

/* ===================== CONTACT PAGE ===================== */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 60px; }
.contact-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold-light);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.contact-card .card-icon { flex-shrink: 0; }
.contact-card a { font-weight: 700; color: var(--kesari-dark); display: block; margin-top: 4px; }
.contact-card a:hover { text-decoration: underline; }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: start;
}
.contact-form-wrap {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold-light);
}
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--text-dark); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(212,175,55,0.4);
  background: var(--cream);
  font-size: 1rem;
  color: var(--text-dark);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%237A5C42' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--kesari);
  box-shadow: 0 0 0 4px rgba(255,153,51,0.15);
}
.form-note {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}
.form-success {
  display: none;
  background: #DDF3DD;
  color: #1E7A1E;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}
.form-success.show { display: block; }

.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold-light);
}
.map-placeholder {
  aspect-ratio: 16/10;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
  font-weight: 600;
  border: 2px dashed var(--gold);
}
.map-embed {
  aspect-ratio: 16/10;
  position: relative;
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,0.45);
  font-size: 1.7rem;
  transition: transform 0.25s ease;
}
.whatsapp-float .wa-icon { width: 30px; height: 30px; }
.wa-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  fill: currentColor;
  flex-shrink: 0;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ===================== FOOTER (markup rendered by js/footer.js) ===================== */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #2E1A0B 0%, #2A1608 45%, #1F1006 100%);
  color: var(--text-on-dark);
  padding: 72px 0 28px;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--bhagwa) 50%, var(--gold) 80%, transparent 100%);
}
.site-footer [hidden] { display: none !important; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Static fallback shown only if js/footer.js cannot run */
.footer-fallback { text-align: center; padding: 8px 0; }
.footer-fallback p { margin: 0 0 8px; color: rgba(255,246,230,0.8); }
.footer-fallback a { color: var(--gold); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.5fr 1.1fr;
  gap: 48px 52px;
  align-items: start;
}
.footer-col { min-width: 0; }
.footer-col h4 {
  position: relative;
  margin: 0 0 22px;
  padding-bottom: 14px;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-gold);
}

/* Column 1 — Foundation: logo and name share one horizontal row, sloka / address / phones sit below it */
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}
.footer-logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.footer-logo-img {
  display: block;
  height: 80px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
  transition: transform 0.3s ease;
}
.footer-logo:hover .footer-logo-img { transform: scale(1.04); }
.footer-name {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--gold-light);
  text-shadow: 0 1px 10px rgba(212,175,55,0.22);
  overflow-wrap: break-word;
}
.footer-sloka {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--gold);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.footer-info li,
.footer-contact li a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.footer-info li + li { margin-top: 14px; }
.footer-info .footer-text {
  padding-top: 4px;
  font-size: 0.96rem;
  line-height: 1.65;
  color: rgba(255,246,230,0.8);
}
.footer-phones { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.footer-phones a { color: rgba(255,246,230,0.9); transition: color 0.2s ease; }
.footer-phones a:hover { color: var(--gold); }
.footer-sep { color: rgba(212,175,55,0.55); }

/* Round gold icon badge, shared by address / phone / WhatsApp / Instagram rows */
.footer-ico {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.88rem;
  color: var(--gold);
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.35);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Column 2 — Quick Links (two balanced sub-columns on desktop) */
.footer-links ul { columns: 2; column-gap: 32px; }
.footer-links li { break-inside: avoid; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
  font-size: 0.97rem;
  line-height: 1.5;
  color: rgba(255,246,230,0.82);
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-links a::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
  opacity: 0.8;
}
.footer-links a:hover,
.footer-links a[aria-current="page"] { color: var(--gold); }
.footer-links a:hover { transform: translateX(4px); }

/* Column 3 — Contact */
.footer-contact li + li { margin-top: 12px; }
.footer-contact li a {
  align-items: center;
  color: rgba(255,246,230,0.86);
  transition: color 0.2s ease;
}
.footer-contact .footer-text {
  font-size: 0.97rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.footer-contact li a:hover { color: var(--gold); }
.footer-contact li a:hover .footer-ico {
  background: var(--gold);
  border-color: var(--gold);
  color: #2A1608;
}

/* Bottom bar */
.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
  margin-top: 52px;
  padding-top: 28px;
  border-top: 1px solid rgba(212,175,55,0.28);
}
.footer-copy {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255,246,230,0.72);
  text-align: left;
}
.footer-admin { display: flex; justify-content: center; }
.footer-credit {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: rgba(255,246,230,0.65);
  text-align: right;
}
.footer-credit a {
  color: var(--gold-light);
  font-weight: 600;
  transition: color 0.2s ease;
}
.footer-credit a:hover { color: var(--gold); }

.footer-admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 24px;
  border-radius: 999px;
  border: 1px solid rgba(244,228,188,0.55);
  background: linear-gradient(135deg, #E6C65F 0%, #D4AF37 55%, #B98F1E 100%);
  color: #2A1608;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 16px rgba(212,175,55,0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.footer-admin-btn i { font-size: 0.95rem; }
.footer-admin-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4), 0 0 26px rgba(212,175,55,0.42);
}
.footer-admin-btn:active { transform: translateY(0); }

/* Keep the bottom bar clear of the fixed floating Donate / WhatsApp buttons on wide screens */
@media (min-width: 1200px) {
  .site-footer { padding-bottom: 100px; }
}

/* Tablet / small laptop: brand + contact side by side, Quick Links full width in columns */
@media (max-width: 1099.98px) {
  .site-footer { padding-top: 60px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 40px; }
  .footer-links { order: 3; grid-column: 1 / -1; }
  .footer-contact { order: 2; }
  .footer-links ul { columns: 2; column-gap: 40px; }
  .footer-links li { break-inside: avoid; }
}

/* Small laptops: brand column is narrower here, keep logo + name on one line */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .footer-logo-img { height: 72px; max-width: 110px; }
  .footer-name { font-size: 1.08rem; }
}

/* Bottom bar: copyright | Admin Login | credit on one row only when there is room for all three */
@media (max-width: 1199.98px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    margin-top: 44px;
  }
  .footer-copy, .footer-credit { text-align: center; }
  .footer-bottom .footer-copy { order: 1; }
  .footer-bottom .footer-credit { order: 2; }
  .footer-bottom .footer-admin { order: 3; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .footer-links ul { columns: 3; }
}

/* Small tablets: 2 columns would leave the brand column too narrow for logo + name on one line, so stack like mobile */
@media (max-width: 767.98px) {
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-links, .footer-contact { order: 0; grid-column: auto; }
}

/* Mobile: stacked */
@media (max-width: 575.98px) {
  .site-footer { padding: 52px 0 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .footer-links, .footer-contact { order: 0; grid-column: auto; }
  .footer-links ul { columns: 1; }
  .footer-links a { padding: 9px 0; }
  .footer-contact li + li { margin-top: 10px; }
  .footer-contact li a { min-height: 44px; }
  .footer-brand-row { gap: 14px; margin-bottom: 18px; }
  .footer-logo-img { height: 68px; max-width: 105px; }
  .footer-sloka { font-size: 1.2rem; }
  .footer-name { font-size: 1.12rem; }
  .footer-bottom { margin-top: 40px; padding-top: 24px; }
  .footer-admin-btn { padding: 10px 26px; }
}

/* Narrow phones: keep logo + name side by side, just smaller */
@media (max-width: 374.98px) {
  .footer-brand-row { gap: 10px; }
  .footer-logo-img { height: 52px; max-width: 80px; }
  .footer-name { font-size: 0.97rem; }
}

/* Very narrow phones: the fixed WhatsApp button (above the donate bar) would touch the centred Admin Login pill, so lift the bottom bar clear of it */
@media (max-width: 359.98px) {
  footer.site-footer { padding-bottom: calc(24px + 64px + 72px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-links a,
  .footer-admin-btn,
  .footer-logo-img,
  .footer-ico { transition: none; }
  .footer-links a:hover,
  .footer-logo:hover .footer-logo-img,
  .footer-admin-btn:hover { transform: none; }
}


/* ===================== LEGAL PAGES (Terms & Conditions / Privacy Policy) ===================== */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  margin: 38px 0 12px;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 14px; }
.legal-content ul { list-style: disc; padding-left: 1.5em; margin: 0 0 16px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a {
  color: var(--kesari-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-content a:hover { color: var(--maroon); }
.legal-contact {
  font-style: normal;
  background: var(--white);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}
.legal-contact p { margin-bottom: 0; }
.legal-content a:focus-visible,
.form-note a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}
.form-note a { color: var(--kesari-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ===================== SCROLL REVEAL ===================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .highlight-cards { grid-template-columns: repeat(2, 1fr); }
  .cards-grid, .goal-cards, .donation-cards { grid-template-columns: repeat(2, 1fr); }
  .construction-banner { grid-template-columns: 1fr; }
  .construction-banner .cb-image { min-height: 260px; order: -1; }
  .founder-wrap { grid-template-columns: 1fr; text-align: center; padding: 36px; }
  .founder-wrap .img-ph { max-width: 260px; margin: 0 auto; }
  .work-block { grid-template-columns: 1fr; gap: 30px; padding: 50px 0; }
  .work-block.reverse .work-text,
  .work-block.reverse .work-media { order: 0; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .donation-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 24px 26px;
    gap: 4px;
    box-shadow: 0 14px 24px rgba(59,36,18,0.12);
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    border-bottom: 1px solid rgba(212,175,55,0.3);
  }
  .nav-menu.open { transform: translateY(0); opacity: 1; }
  .nav-link { text-align: center; padding: 14px; }
  .header-actions .btn-primary.btn-sm { display: none; }
  .hamburger { display: flex; }

  .highlight-cards { grid-template-columns: 1fr; margin-top: -40px; }
  .cards-grid, .goal-cards, .donation-cards { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .goseva-gallery { grid-template-columns: 1fr; max-width: 340px; }
  .section { padding: 60px 0; }
  .construction-banner .cb-text { padding: 34px 26px; }
  .hero-buttons .btn { width: 100%; justify-content: center; }

  .logo { gap: 8px; }
  .logo-icon { width: 42px; height: 42px; }
  .logo-text { max-width: 140px; font-size: 0.85rem; }
  .header-actions { gap: 8px; }
  .lang-btn { padding: 5px 10px; font-size: 0.78rem; }

  .home-hero { min-height: 70vh; padding: 40px 0 60px; }
  .hero-content { padding: 0 20px; }
  .hero-sloka { font-size: 1.3rem; margin-bottom: 12px; }
  .hero-address { font-size: 0.95rem; margin-bottom: 16px; }
  .hero-tagline { font-size: 0.85rem; padding: 8px 18px; margin-bottom: 22px; }
}

/* The desktop nav (6 items) needs ~1310px of header room in English (~1120px in
   Marathi) at its original spacing, so below 1280px it reuses the same proven
   mobile dropdown pattern instead of wrapping or overflowing. From 1280px up the
   horizontal bar is kept (see the next block). */
@media (min-width: 769px) and (max-width: 1279.98px) {
  .nav-menu {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    padding: 18px 24px 26px;
    gap: 4px;
    box-shadow: 0 14px 24px rgba(59,36,18,0.12);
    transform: translateY(-130%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    border-bottom: 1px solid rgba(212,175,55,0.3);
  }
  .nav-menu.open { transform: translateY(0); opacity: 1; }
  .nav-link { text-align: center; padding: 14px; }
  .header-actions .btn-primary.btn-sm { display: none; }
  .hamburger { display: flex; }
}

/* Desktop header (>=1280px): keep nav labels on one line. The header container is
   allowed a little more width than the 1180px page column, and link spacing is
   slightly tighter than the original, so all 6 items + logo + language switch +
   Donate button fit in both English and Marathi at every desktop width. */
@media (min-width: 1280px) {
  .site-header .container { max-width: 1340px; }
  .nav-menu { gap: 4px; }
  .nav-link { white-space: nowrap; padding: 10px 11px; }
}
@media (min-width: 1440px) {
  .nav-menu { gap: 6px; }
  .nav-link { padding: 10px 14px; }
}

/* =====================================================
   PREMIUM UPGRADE — extended palette, feature sections,
   donation highlight, gallery lightbox, mobile CTA
   ===================================================== */
:root {
  --krishna-blue: #1B3A6B;
  --krishna-blue-light: #33578F;
  --maroon: #6B1424;
  --maroon-dark: #440C18;
  --goshala-green: #2E7D32;
  --goshala-green-dark: #1B5E20;
  --goshala-green-light: #E9F5EA;
  --gradient-maroon: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 55%, var(--kesari-dark) 100%);
  --gradient-goshala: linear-gradient(135deg, var(--goshala-green-dark) 0%, var(--goshala-green) 60%, #5B9E3F 100%);
  --gradient-blue: linear-gradient(135deg, var(--krishna-blue) 0%, var(--krishna-blue-light) 100%);
}

/* ---------- Ornamental helpers ---------- */
.ornament-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 18px;
  color: var(--gold);
  font-size: 1.3rem;
  opacity: 0.85;
}
.ornament-row .ornament-line {
  width: 46px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--kesari-dark);
  background: var(--gold-light);
  padding: 7px 20px;
  border-radius: 30px;
  margin-bottom: 18px;
}
.eyebrow-tag.tag-blue { color: var(--krishna-blue); background: #E7EDF6; }
.eyebrow-tag.tag-green { color: var(--goshala-green-dark); background: var(--goshala-green-light); }
.eyebrow-tag.tag-maroon { color: var(--maroon); background: #F4E3E6; }

/* ---------- Feature split sections (Bhaktidham / Goshala) ---------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.feature-split.reverse .feature-media { order: 2; }
.feature-split.reverse .feature-text { order: 1; }

.feature-media {
  position: relative;
}
.feature-media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--white);
  outline: 1px solid var(--gold-light);
  aspect-ratio: 4/5;
}
.feature-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.feature-media-frame:hover img { transform: scale(1.05); }
.feature-media-corner {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 3px solid var(--gold);
  z-index: 3;
  pointer-events: none;
}
.feature-media-corner.tl { top: -14px; left: -14px; border-right: none; border-bottom: none; border-top-left-radius: 14px; }
.feature-media-corner.br { bottom: -14px; right: -14px; border-left: none; border-top: none; border-bottom-right-radius: 14px; }
.feature-split.goshala-theme .feature-media-corner { border-color: var(--goshala-green); }

.feature-badge {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 3;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-weight: 700;
  color: var(--kesari-dark);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feature-split.goshala-theme .feature-badge { color: var(--goshala-green-dark); }

.feature-thumb {
  position: absolute;
  top: -26px;
  right: -26px;
  z-index: 4;
  width: 34%;
  max-width: 150px;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-lg);
}
.feature-thumb img { width: 100%; height: 100%; object-fit: cover; }
.feature-split.reverse .feature-thumb { right: auto; left: -26px; }
.feature-split.goshala-theme .feature-thumb { border-color: var(--goshala-green-light); }
@media (max-width: 1024px) {
  .feature-thumb { width: 96px; max-width: 96px; top: -16px; right: 8%; }
  .feature-split.reverse .feature-thumb { left: 8%; }
}
@media (max-width: 480px) {
  .feature-thumb { width: 76px; max-width: 76px; border-width: 4px; }
}

.feature-text h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 18px; }
.feature-text > p { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 26px; }

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
.chip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--gold-light);
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.chip-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.chip-item .chip-icon { font-size: 1.1rem; }
.feature-split.goshala-theme .chip-item { border-color: #C6E6C8; }

.feature-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.btn-goshala {
  background: var(--gradient-goshala);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(46,125,50,0.25);
}
.btn-goshala:hover { box-shadow: 0 16px 40px rgba(46,125,50,0.35); }

/* ---------- Feature seva-cards mini grid (Bhaktidham) ---------- */
.mini-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}
.mini-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  text-align: center;
  border: 1px solid var(--gold-light);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mini-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mini-card .mini-icon { font-size: 1.5rem; margin-bottom: 8px; }
.mini-card h4 { font-size: 0.88rem; color: var(--kesari-dark); font-family: var(--font-body); font-weight: 700; }

/* ---------- Goshala gallery strip ---------- */
.goshala-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 46px;
}
.goshala-strip .strip-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-sm);
  border: 1px solid #C6E6C8;
  cursor: pointer;
  position: relative;
}
.goshala-strip .strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.goshala-strip .strip-item:hover img { transform: scale(1.08); }

/* ---------- Seva overview (आमचे सेवा कार्य) ---------- */
.seva-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.seva-overview-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}
.seva-overview-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.seva-overview-card .card-icon { margin-bottom: 16px; }
.seva-overview-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.seva-overview-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 14px; }
.seva-overview-card .seva-link { font-size: 0.85rem; font-weight: 700; color: var(--kesari); }

/* ---------- Donation highlight section ---------- */
.donation-highlight {
  position: relative;
  background: var(--gradient-maroon);
  border-radius: var(--radius-lg);
  padding: 64px 50px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: var(--white);
}
.donation-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 10% 10%, rgba(212,175,55,0.18) 0, transparent 40%),
                     radial-gradient(circle at 90% 90%, rgba(212,175,55,0.15) 0, transparent 45%);
  pointer-events: none;
}
.donation-highlight-head { text-align: center; max-width: 700px; margin: 0 auto 44px; position: relative; z-index: 2; }
.donation-highlight-head h2 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 14px; }
.donation-highlight-head p { color: var(--gold-light); font-size: 1.05rem; }

.purpose-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.purpose-cards.cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1024px) { .purpose-cards.cols-6 { grid-template-columns: repeat(3, 1fr); } }
.purpose-card {
  position: relative;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: var(--radius);
  padding: 22px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--white);
}
.purpose-card:hover { background: rgba(255,255,255,0.14); transform: translateY(-4px); }
.purpose-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.purpose-card.active::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--maroon-dark);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.purpose-card.active {
  background: var(--gradient-gold);
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(212,175,55,0.35);
  color: var(--maroon-dark);
}
.purpose-card .purpose-icon { font-size: 1.7rem; margin-bottom: 10px; }
.purpose-card h4 { font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: inherit; line-height: 1.4; }

.amount-block { position: relative; z-index: 2; text-align: center; margin-bottom: 40px; }
.amount-block > p { color: var(--gold-light); font-weight: 700; margin-bottom: 18px; }
.amount-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}
.amount-chip {
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: var(--white);
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.25s ease;
}
.amount-chip:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.amount-chip.active {
  background: var(--gradient-gold);
  border-color: var(--gold);
  color: var(--maroon-dark);
  box-shadow: 0 8px 22px rgba(212,175,55,0.4);
}
.amount-custom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 30px;
  padding: 6px 8px 6px 20px;
  margin-top: 4px;
}
.amount-custom span { color: var(--gold-light); font-weight: 700; }
.amount-custom input {
  background: transparent;
  border: none;
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  width: 130px;
  padding: 8px 6px;
}
.amount-custom input:focus { outline: none; }
.amount-custom input::placeholder { color: rgba(255,255,255,0.55); }

.donate-cta-wrap { position: relative; z-index: 2; text-align: center; margin-bottom: 8px; }
.btn-donate-glow {
  background: var(--gradient-gold);
  color: var(--maroon-dark);
  font-size: 1.15rem;
  padding: 18px 52px;
  border-radius: 50px;
  font-weight: 800;
  box-shadow: 0 0 0 0 rgba(212,175,55,0.55), var(--shadow-lg);
  animation: donateGlow 2.4s ease-in-out infinite;
}
@keyframes donateGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.45), var(--shadow-lg); }
  50% { box-shadow: 0 0 0 14px rgba(212,175,55,0), var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-donate-glow { animation: none; }
}
.donate-helper-text {
  color: rgba(255,246,230,0.75);
  font-size: 0.86rem;
  max-width: 480px;
  margin: 16px auto 0;
}

.trust-badges {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(255,255,255,0.06);
  padding: 8px 16px;
  border-radius: 30px;
}

/* ---------- QR / UPI premium panel ---------- */
.pay-panel {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold-light);
  align-items: center;
}
.pay-panel .qr-frame { background: var(--krishna-blue); }
.upi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 14px;
}
.upi-row .upi-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.upi-row .upi-value { font-weight: 800; color: var(--kesari-dark); font-size: 1.05rem; letter-spacing: 0.02em; }
.copy-btn {
  border: 1.5px solid var(--gold);
  background: var(--white);
  color: var(--kesari-dark);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 8px 16px;
  border-radius: 30px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.copy-btn:hover { background: var(--gradient-gold); color: var(--white); }
.copy-btn.copied { background: #DDF3DD; border-color: #1E7A1E; color: #1E7A1E; }
.bank-detail-box {
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  color: var(--text-dark);
  font-size: 0.95rem;
  line-height: 1.9;
}
.bank-detail-box strong { color: var(--kesari-dark); }

/* ---------- Emotional donation banner (before footer) ---------- */
.emotional-cta {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--white);
}
.emotional-cta .ec-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.emotional-cta .ec-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,10,5,0.55) 0%, rgba(20,10,5,0.78) 60%, rgba(20,10,5,0.92) 100%);
}
.emotional-cta .ec-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 60px 24px;
}
.emotional-cta .ornament-row { color: var(--gold); }
.emotional-cta h2 {
  color: var(--white);
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  margin-bottom: 18px;
}
.emotional-cta p {
  color: var(--gold-light);
  font-size: 1.1rem;
  margin-bottom: 34px;
  line-height: 1.7;
}
.emotional-cta .hero-buttons { justify-content: center; }

/* ---------- Mobile sticky donate bar ---------- */
.mobile-donate-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998;
  background: var(--gradient-gold);
  box-shadow: 0 -6px 20px rgba(59,36,18,0.25);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  text-align: center;
}
.mobile-donate-bar a {
  display: block;
  color: var(--white);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}
body.hide-mobile-donate .mobile-donate-bar { display: none !important; }

/* ---------- Lightbox ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(20,10,5,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  border: 4px solid var(--white);
}
.lightbox-close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-trigger { cursor: zoom-in; }

/* ===================== RESPONSIVE — premium components ===================== */
@media (max-width: 1024px) {
  .feature-split { grid-template-columns: 1fr; gap: 34px; }
  .feature-split.reverse .feature-media,
  .feature-split.reverse .feature-text { order: 0; }
  .feature-media-frame { aspect-ratio: 16/10; max-width: 560px; margin: 0 auto; }
  .mini-cards { grid-template-columns: repeat(3, 1fr); }
  .goshala-strip { grid-template-columns: repeat(4, 1fr); }
  .seva-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .purpose-cards { grid-template-columns: repeat(3, 1fr); }
  .pay-panel { grid-template-columns: 220px 1fr; padding: 30px; }
}

@media (max-width: 768px) {
  .donation-highlight { padding: 44px 22px; border-radius: var(--radius); }
  .purpose-cards { grid-template-columns: repeat(2, 1fr); }
  .amount-chip { padding: 10px 18px; font-size: 0.92rem; }
  .btn-donate-glow { width: 100%; justify-content: center; padding: 16px 30px; }
  .mini-cards { grid-template-columns: repeat(2, 1fr); }
  .goshala-strip { grid-template-columns: repeat(2, 1fr); }
  .seva-overview-grid { grid-template-columns: 1fr; }
  .pay-panel { grid-template-columns: 1fr; text-align: center; }
  .pay-panel .qr-frame { max-width: 220px; margin: 0 auto; }
  .upi-row { flex-direction: column; text-align: center; }
  .emotional-cta { min-height: 50vh; }
  .mobile-donate-bar { display: block; }
  /* Keep the last footer lines (legal links, Admin Login) clear of the fixed donate bar. */
  .site-footer { padding-bottom: calc(24px + 64px + env(safe-area-inset-bottom)); }
  body:not(.hide-mobile-donate) .whatsapp-float { bottom: 84px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.1rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  body { padding-bottom: 0; }
}

@media (max-width: 480px) {
  .purpose-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .purpose-card { padding: 16px 10px; }
  .purpose-card .purpose-icon { font-size: 1.4rem; }
  .purpose-card h4 { font-size: 0.78rem; }
  .amount-chips { gap: 8px; }
  .amount-chip { padding: 9px 16px; font-size: 0.86rem; }
  .amount-custom { padding: 5px 6px 5px 16px; }
  .amount-custom input { width: 100px; }
  .mini-cards { grid-template-columns: repeat(2, 1fr); }
  .goshala-strip { grid-template-columns: repeat(2, 1fr); }
  .chip-item { font-size: 0.85rem; padding: 8px 14px; }
  .feature-text h2 { font-size: 1.5rem; }
  .donation-highlight-head p { font-size: 0.95rem; }
}

@media (max-width: 375px) {
  .purpose-cards { grid-template-columns: 1fr 1fr; }
  .amount-chips { justify-content: space-between; }
  .amount-chip { padding: 8px 12px; font-size: 0.8rem; }
}

/* =====================================================
   CINEMATIC UPGRADE — hero motion, decorative motifs,
   divine intro, flow journey, parallax, masonry gallery,
   image-tiles, floating CTA, transparent header
   ===================================================== */

/* ---------- Transparent header over hero (home page only) ---------- */
body.home-page .site-header {
  position: fixed;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
body.home-page .site-header .logo-text,
body.home-page .site-header .nav-link {
  color: var(--text-on-dark);
}
body.home-page .site-header .nav-link:hover,
body.home-page .site-header .nav-link.active {
  background: rgba(255,255,255,0.16);
  color: var(--white);
}
body.home-page .site-header .lang-switch { background: rgba(255,255,255,0.16); }
body.home-page .site-header .lang-btn { color: rgba(255,246,230,0.85); }
body.home-page .site-header .hamburger span { background: var(--white); }
body.home-page .site-header.scrolled {
  position: sticky;
  background: rgba(255, 249, 238, 0.96);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(212,175,55,0.25);
  box-shadow: 0 6px 24px rgba(59,36,18,0.12);
}
body.home-page .site-header.scrolled .logo-text,
body.home-page .site-header.scrolled .nav-link { color: var(--text-dark); }
body.home-page .site-header.scrolled .nav-link:hover,
body.home-page .site-header.scrolled .nav-link.active { background: var(--gold-light); color: var(--kesari-dark); }
body.home-page .site-header.scrolled .lang-switch { background: var(--gold-light); }
body.home-page .site-header.scrolled .lang-btn { color: var(--text-muted); }
body.home-page .site-header.scrolled .hamburger span { background: var(--kesari-dark); }
@media (max-width: 768px) {
  body.home-page .site-header .nav-menu { background: var(--cream); }
  body.home-page .site-header .nav-menu .nav-link { color: var(--text-dark); }
}

/* ---------- Cinematic hero ---------- */
.home-hero { min-height: 100vh; }
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 0%, rgba(20,10,5,0.35) 75%, rgba(20,10,5,0.6) 100%);
  pointer-events: none;
}
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-particles span {
  position: absolute;
  bottom: -20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,120,0.95) 0%, rgba(255,214,120,0) 70%);
  box-shadow: 0 0 10px 2px rgba(255,214,120,0.6);
  animation: particleRise linear infinite;
}
@keyframes particleRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { transform: translateY(-105vh) translateX(var(--drift, 20px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-particles { display: none; }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-light);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  animation: heroFadeUp 0.9s ease both;
}
.scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,246,230,0.8);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  animation: heroFadeUp 0.9s ease 0.8s both;
}
.scroll-indicator .chevron {
  width: 22px;
  height: 22px;
  border-right: 2px solid var(--gold-light);
  border-bottom: 2px solid var(--gold-light);
  transform: rotate(45deg);
  animation: chevronBounce 1.8s ease-in-out infinite;
}
@keyframes chevronBounce {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 0.5; }
  50% { transform: rotate(45deg) translate(5px,5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-indicator .chevron { animation: none; } }
.hero-buttons.hero-buttons-3 { gap: 14px; }
.hero-buttons.hero-buttons-3 .btn { font-size: 0.94rem; padding: 13px 26px; }

/* ---------- Decorative motifs ---------- */
.motif-accent {
  position: absolute;
  font-size: 2.4rem;
  opacity: 0.14;
  color: var(--gold);
  pointer-events: none;
  user-select: none;
}
.divine-frame {
  position: relative;
}
.divine-frame::before,
.divine-frame::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  border: 3px solid var(--gold);
  z-index: 3;
  pointer-events: none;
}
.divine-frame::before { top: -18px; left: -18px; border-right: none; border-bottom: none; }
.divine-frame::after { bottom: -18px; right: -18px; border-left: none; border-top: none; }
.divine-frame .divine-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 8px solid var(--white);
  outline: 1px solid var(--gold);
}
.divine-frame .divine-media img {
  width: 100%;
  display: block;
  transition: transform 0.7s ease;
}
.divine-frame:hover .divine-media img { transform: scale(1.04); }

/* ---------- Divine Introduction section ---------- */
.divine-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.divine-intro-text .sanskrit-line {
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: 1.2rem;
  margin-bottom: 14px;
  letter-spacing: 0.03em;
}
.divine-intro-text h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 20px; }
.divine-intro-text p { color: var(--text-muted); font-size: 1.06rem; margin-bottom: 16px; }
.divine-intro-decor {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  font-size: 1.6rem;
  color: var(--gold);
  opacity: 0.75;
}

/* ---------- Where your contribution helps — flow journey ---------- */
.flow-journey {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}
.flow-node {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 0 10px;
}
.flow-node .flow-icon {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  margin: 0 auto 14px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
}
.flow-node h4 { font-size: 0.95rem; margin-bottom: 6px; font-family: var(--font-body); color: var(--kesari-dark); }
.flow-node p { font-size: 0.82rem; color: var(--text-muted); }
.flow-node::after {
  content: "";
  position: absolute;
  top: 39px;
  left: calc(50% + 39px);
  width: calc(100% - 78px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 8px, transparent 8px, transparent 16px);
  z-index: 1;
}
.flow-node:last-child::after { display: none; }
@media (max-width: 768px) {
  .flow-journey { flex-direction: column; align-items: center; gap: 34px; }
  .flow-node::after {
    top: auto;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 24px;
    background: repeating-linear-gradient(180deg, var(--gold) 0, var(--gold) 6px, transparent 6px, transparent 12px);
  }
}

/* ---------- Parallax devotional break ---------- */
.parallax-break {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(180deg, rgba(20,10,5,0.55), rgba(20,10,5,0.7)), url("../images/goshala.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}
@media (max-width: 900px) {
  .parallax-break { background-attachment: scroll; }
}
.parallax-break h2 {
  color: var(--gold-light);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  letter-spacing: 0.03em;
  padding: 0 24px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ---------- Large image tiles (सेवेचे विविध आयाम) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tile-grid .tile-item.tile-wide { grid-column: span 2; }
.img-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold-light);
  display: block;
}
.img-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.img-tile .tile-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--gold-light), var(--gold-light) 12px, var(--cream-dark) 12px, var(--cream-dark) 24px);
  font-size: 2.4rem;
}
.img-tile .tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,10,5,0.82) 100%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0.92;
  transition: opacity 0.3s ease;
}
.img-tile:hover img { transform: scale(1.08); }
.img-tile .tile-title { color: var(--white); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; }
.img-tile .tile-sub { color: var(--gold-light); font-size: 0.82rem; margin-top: 4px; display: block; }

/* ---------- Annadan tile — full-bleed photo with graceful fallback ---------- */
.img-tile.annadan-tile .tile-fallback {
  background: linear-gradient(160deg, #E8722C 0%, #B84300 100%);
  font-size: 2.6rem;
}
.img-tile.annadan-tile .tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.img-tile.annadan-tile:hover .tile-photo { transform: scale(1.08); }
.img-tile.annadan-tile .tile-overlay {
  background: linear-gradient(to top, rgba(40,20,5,0.90) 0%, rgba(40,20,5,0.45) 45%, rgba(40,20,5,0.05) 75%);
  transition: background 0.4s ease;
}
.img-tile.annadan-tile:hover .tile-overlay {
  background: linear-gradient(to top, rgba(40,20,5,0.96) 0%, rgba(40,20,5,0.6) 50%, rgba(40,20,5,0.1) 80%);
}

/* ---------- Photo story (alternating) ---------- */
.photo-story-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.photo-story-block + .photo-story-block { margin-top: 60px; }
.photo-story-block.reverse .ps-media { order: 2; }
.photo-story-block.reverse .ps-text { order: 1; }
.ps-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold-light);
  aspect-ratio: 4/3;
}
.ps-media img { width: 100%; height: 100%; object-fit: cover; }
.ps-text h3 { font-size: 1.35rem; margin-bottom: 12px; }
.ps-text p { color: var(--text-muted); }

/* ---------- Full, uncropped poster (एक पवित्र प्रारंभ) ---------- */
.ps-media.full-poster {
  aspect-ratio: auto;
  height: auto;
  overflow: visible;
  background: var(--cream-dark);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 14px;
}
.ps-media.full-poster img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 20px;
  box-shadow: 0 4px 18px rgba(59,36,18,0.18);
  outline: 1px solid var(--gold);
}
.ps-text .ps-decor {
  display: inline-flex;
  gap: 10px;
  font-size: 1.3rem;
  color: var(--gold);
  opacity: 0.8;
  margin-bottom: 6px;
}

/* ---------- Masonry gallery ---------- */
.masonry-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.masonry-filter button {
  border: 1.5px solid var(--gold-light);
  background: var(--white);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 9px 20px;
  border-radius: 30px;
  transition: all 0.2s ease;
}
.masonry-filter button:hover { border-color: var(--gold); color: var(--kesari-dark); }
.masonry-filter button.active {
  background: var(--gradient-gold);
  border-color: var(--gold);
  color: var(--white);
}
.masonry-grid {
  columns: 4 220px;
  column-gap: 18px;
}
.masonry-grid .masonry-item {
  break-inside: avoid;
  margin-bottom: 18px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold-light);
  position: relative;
  display: block;
}
.masonry-grid .masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}
.masonry-grid .masonry-item:hover img { transform: scale(1.06); }
.masonry-grid .masonry-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(20,10,5,0.85), transparent);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 26px 14px 10px;
}
.masonry-grid .masonry-item.hidden { display: none; }

/* ---------- Desktop floating donate CTA ---------- */
.floating-donate-desktop {
  display: none;
}
@media (min-width: 769px) {
  .floating-donate-desktop {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 24px;
    bottom: 26px;
    z-index: 998;
    background: var(--gradient-gold);
    color: var(--white);
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 50px;
    box-shadow: var(--shadow-lg);
    animation: donatePulse 2.6s ease-in-out infinite;
  }
  .floating-donate-desktop:hover { transform: translateY(-3px); }
}
@keyframes donatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.45), var(--shadow-lg); }
  50% { box-shadow: 0 0 0 10px rgba(212,175,55,0), var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) { .floating-donate-desktop { animation: none; } }

/* ---------- Gold shine sweep on primary donate CTA ---------- */
.btn-donate-glow { position: relative; overflow: hidden; }
.btn-donate-glow::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: shineSweep 3.2s ease-in-out infinite;
}
@keyframes shineSweep {
  0% { left: -60%; }
  40%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) { .btn-donate-glow::before { animation: none; } }

/* ---------- Responsive — cinematic components ---------- */
@media (max-width: 1024px) {
  .divine-intro { grid-template-columns: 1fr; gap: 34px; }
  .divine-frame .divine-media { max-width: 480px; margin: 0 auto; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .tile-grid .tile-item.tile-wide { grid-column: span 2; }
  .photo-story-block { grid-template-columns: 1fr; gap: 26px; }
  .photo-story-block.reverse .ps-media,
  .photo-story-block.reverse .ps-text { order: 0; }
  .masonry-grid { columns: 3 180px; }
}
@media (max-width: 768px) {
  .home-hero { min-height: 100svh; }
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .tile-grid .tile-item.tile-wide { grid-column: span 2; aspect-ratio: 16/9; }
  .masonry-grid { columns: 2 150px; }
  .hero-buttons.hero-buttons-3 { flex-direction: column; }
  .hero-buttons.hero-buttons-3 .btn { width: 100%; }
  .parallax-break { min-height: 34vh; }
}
@media (max-width: 480px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile-grid .tile-item.tile-wide { grid-column: span 1; aspect-ratio: 4/3; }
  .masonry-grid { columns: 2 130px; column-gap: 10px; }
  .masonry-grid .masonry-item { margin-bottom: 10px; }
  .flow-node .flow-icon { width: 64px; height: 64px; font-size: 1.5rem; }
}

/* =====================================================
   ABOUT PAGE UPGRADE — cinematic inner hero, collage,
   arch frame, values rows, vision/mission, radial layout
   ===================================================== */

/* ---------- Cinematic inner page hero ---------- */
.page-hero-cinematic {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--white);
  padding: 150px 24px 74px;
}
.page-hero-cinematic .ph-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.page-hero-cinematic .ph-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--maroon-dark) 0%, var(--krishna-blue) 55%, var(--maroon) 100%);
  opacity: 0.9;
}
.page-hero-cinematic .ph-content { position: relative; z-index: 3; max-width: 760px; }
.page-hero-cinematic .breadcrumb { color: var(--gold-light); font-weight: 600; margin-bottom: 16px; }
.page-hero-cinematic .breadcrumb a:hover { text-decoration: underline; }
.page-hero-cinematic h1 { color: var(--white); font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: 10px; }
.page-hero-cinematic .ph-sub {
  font-family: var(--font-heading);
  color: var(--gold-light);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  margin-bottom: 16px;
}
.page-hero-cinematic .ph-tagline {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 9px 24px;
  border-radius: 40px;
  margin-top: 6px;
  font-size: 0.92rem;
}

/* ---------- Image collage (Foundation intro story) ---------- */
.collage-wrap {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
  padding: 10px 30px 40px 6px;
}
.collage-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 8px solid var(--white);
  outline: 1px solid var(--gold);
  aspect-ratio: 4/5;
  position: relative;
  z-index: 2;
}
.collage-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.collage-wrap:hover .collage-main img { transform: scale(1.04); }
.collage-accent {
  position: absolute;
  bottom: 4px;
  left: -6px;
  width: 48%;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid var(--white);
  box-shadow: var(--shadow-lg);
  z-index: 3;
}
.collage-accent img { width: 100%; height: 100%; object-fit: cover; }
.collage-wrap::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 0;
  width: 84px;
  height: 84px;
  border: 3px solid var(--gold);
  border-left: none;
  border-bottom: none;
  z-index: 1;
}
.story-highlight { color: var(--kesari-dark); font-weight: 700; }

/* ---------- Temple-arch image frame ---------- */
.feature-media-frame.arch-frame {
  
  aspect-ratio: 4/6;
}

/* ---------- Connected purpose flow (आमचा संकल्प) ---------- */
.purpose-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
}
.purpose-flow .flow-node .flow-icon { background: var(--white); }

/* ---------- Vision & Mission split ---------- */
.vm-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.vm-panel { padding: 54px 44px; position: relative; overflow: hidden; }
.vm-panel .vm-icon { position: absolute; top: 22px; right: 26px; font-size: 2.2rem; opacity: 0.22; }
.vm-panel h3 { font-size: 1.5rem; margin-bottom: 16px; }
.vm-panel p { font-size: 1rem; margin-bottom: 14px; }
.vm-panel ul { margin-top: 6px; }
.vm-panel li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 0.96rem; }
.vm-panel li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); }
.vm-panel.vision { background: var(--gradient-blue); color: var(--white); }
.vm-panel.vision h3 { color: var(--gold-light); }
.vm-panel.vision p { color: rgba(255,255,255,0.85); }
.vm-panel.mission { background: var(--cream); }
.vm-panel.mission h3 { color: var(--kesari-dark); }
.vm-panel.mission p { color: var(--text-muted); }
.vm-panel.mission li { color: var(--text-dark); }

/* ---------- Core values — vertical rows ---------- */
.value-row-list { max-width: 840px; margin: 0 auto; }
.value-row {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(212,175,55,0.25);
  transition: background 0.25s ease, transform 0.25s ease;
}
.value-row:first-child { border-top: 1px solid rgba(212,175,55,0.25); }
.value-row:hover { background: var(--cream-dark); transform: translateX(10px); }
.value-row .value-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--gradient-gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.value-row h4 { font-size: 1.12rem; margin-bottom: 4px; }
.value-row p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

/* ---------- Radial purpose layout (सेवेचा उद्देश) ---------- */
.radial-purpose {
  position: relative;
  max-width: 560px;
  margin: 60px auto 0;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
}
.radial-center {
  width: 42%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--white);
  outline: 3px solid var(--gold);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.radial-center img { width: 100%; height: 100%; object-fit: cover; }
.radial-point {
  position: absolute;
  text-align: center;
  width: 132px;
}
.radial-point .rp-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin: 0 auto 8px;
  box-shadow: var(--shadow-sm);
}
.radial-point h4 { font-size: 0.9rem; font-family: var(--font-body); font-weight: 700; color: var(--kesari-dark); }
.radial-point.rp-top { top: -8%; left: 50%; transform: translateX(-50%); }
.radial-point.rp-bottom { bottom: -8%; left: 50%; transform: translateX(-50%); }
.radial-point.rp-left { left: -6%; top: 50%; transform: translateY(-50%); }
.radial-point.rp-right { right: -6%; top: 50%; transform: translateY(-50%); }
.radial-purpose::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px dashed rgba(212,175,55,0.4);
  border-radius: 50%;
  z-index: 1;
}

/* ---------- Purpose cards 2-col modifier (donation connect) ---------- */
.purpose-cards.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin: 0 auto 36px; }

/* ---------- Responsive — About page components ---------- */
@media (max-width: 1024px) {
  .vm-split { grid-template-columns: 1fr; }
  .radial-purpose { margin-top: 80px; }
}
@media (max-width: 900px) {
  .purpose-flow { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .page-hero-cinematic { min-height: 50vh; padding: 130px 20px 56px; }
  .collage-wrap { max-width: 320px; padding: 10px 24px 34px 4px; }
  .vm-panel { padding: 38px 26px; }
  .value-row { gap: 16px; padding: 18px 14px; }
  .value-row:hover { transform: none; }
  .radial-purpose {
    display: block;
    aspect-ratio: auto;
    max-width: 320px;
    margin: 40px auto 0;
    text-align: center;
  }
  .radial-purpose::before { display: none; }
  .radial-center { width: 62%; margin: 0 auto 28px; }
  .radial-point {
    position: static;
    display: inline-block;
    width: 44%;
    margin: 0 3% 24px;
    transform: none !important;
  }
}
@media (max-width: 480px) {
  .purpose-cards.cols-2 { grid-template-columns: 1fr; }
}

/* =====================================================
   WORK PAGE UPGRADE — dark devotional showcase, mosaic
   grid, mini connector flow, quote banner, small modifiers
   ===================================================== */

/* ---------- Goshala-themed CTA banner modifier ---------- */
.cta-banner.goshala-cta { background: var(--gradient-goshala); }
.cta-banner.goshala-cta p { color: rgba(255,255,255,0.88); }

/* ---------- Second feature accent thumb (triple-image composition) ---------- */
.feature-thumb.thumb-2 {
  top: auto;
  right: auto;
  bottom: -22px;
  left: -22px;
  width: 30%;
  max-width: 128px;
}
.feature-split.reverse .feature-thumb.thumb-2 { left: auto; right: -22px; }
@media (max-width: 1024px) {
  .feature-thumb.thumb-2 { bottom: -14px; left: 8%; width: 84px; max-width: 84px; }
  .feature-split.reverse .feature-thumb.thumb-2 { left: auto; right: 8%; }
}
@media (max-width: 480px) {
  .feature-thumb.thumb-2 { width: 64px; max-width: 64px; border-width: 4px; }
}

/* ---------- Dark devotional showcase (धर्मप्रसार व आध्यात्मिक कार्य) ---------- */
.dharma-showcase {
  background: var(--gradient-maroon);
  position: relative;
  overflow: hidden;
  color: var(--text-on-dark);
}
.dharma-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12% 15%, rgba(212,175,55,0.14) 0, transparent 40%),
                     radial-gradient(circle at 88% 85%, rgba(212,175,55,0.12) 0, transparent 45%);
  pointer-events: none;
}
.dharma-showcase .container { position: relative; z-index: 2; }
.dharma-showcase .section-heading h2 { color: var(--white); }
.dharma-showcase .section-heading p { color: var(--gold-light); }
.dharma-showcase .divider-om { box-shadow: 0 0 0 6px rgba(212,175,55,0.15); }
.dharma-motifs {
  display: flex;
  justify-content: center;
  gap: 22px;
  font-size: 1.6rem;
  opacity: 0.7;
  margin-bottom: 14px;
}
.dharma-central {
  max-width: 640px;
  margin: 0 auto 40px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  border: 6px solid rgba(255,255,255,0.15);
  outline: 1px solid var(--gold);
  aspect-ratio: 16/9;
}
.dharma-central img { width: 100%; height: 100%; object-fit: cover; }
.dharma-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.dharma-strip .strip-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1/1;
  border: 2px solid rgba(212,175,55,0.4);
  box-shadow: 0 10px 26px rgba(0,0,0,0.3);
  display: block;
}
.dharma-strip .strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.dharma-strip .strip-item:hover img { transform: scale(1.08); }
.dharma-showcase p.dharma-copy { max-width: 760px; margin: 0 auto 40px; text-align: center; color: rgba(255,246,230,0.85); font-size: 1.05rem; }

/* ---------- Mosaic grid (कार्याची क्षणचित्रे) ---------- */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 130px;
  gap: 16px;
}
.mosaic-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold-light);
  position: relative;
  display: block;
  cursor: zoom-in;
}
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
.mosaic-item:hover img { transform: scale(1.07); }
.mosaic-item .masonry-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(20,10,5,0.85), transparent);
  color: var(--white); font-size: 0.8rem; font-weight: 600;
  padding: 24px 12px 8px;
}
.mosaic-item.m-large { grid-column: span 2; grid-row: span 2; }
.mosaic-item.m-wide { grid-column: span 2; grid-row: span 1; }
.mosaic-item.m-tall { grid-column: span 1; grid-row: span 2; }
.mosaic-item.m-small { grid-column: span 1; grid-row: span 1; }

/* ---------- Mini connector flow (आपले सहकार्य सेवेशी कसे जोडले जाते?) ---------- */
.mini-flow { max-width: 640px; margin: 0 auto; text-align: center; }
.mini-flow .mf-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 2px solid var(--gold);
  border-radius: 40px;
  padding: 14px 30px;
  font-weight: 700;
  color: var(--kesari-dark);
  box-shadow: var(--shadow-sm);
}
.mini-flow .mf-arrow { font-size: 1.6rem; color: var(--gold); margin: 10px 0; line-height: 1; }
.mini-flow .mf-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background: var(--cream-dark);
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  padding: 20px;
}
.mini-flow .mf-box span {
  background: var(--white);
  border: 1px solid var(--gold-light);
  border-radius: 30px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-dark);
}

/* ---------- Minimal quote banner (image-based quote) ---------- */
.quote-banner {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.quote-banner .qb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-banner .qb-overlay { position: absolute; inset: 0; background: rgba(20,10,5,0.68); }
.quote-banner .qb-content { position: relative; z-index: 2; max-width: 640px; padding: 40px 24px; }
.quote-banner h2 {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--white);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.6;
}
.quote-banner .qb-mark { font-size: 2.4rem; color: var(--gold); opacity: 0.7; line-height: 1; margin-bottom: 6px; }

/* ---------- Responsive — work page components ---------- */
@media (max-width: 1024px) {
  .dharma-strip { grid-template-columns: repeat(3, 1fr); max-width: 480px; }
  .mosaic-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 110px; }
  .mosaic-item.m-large { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 768px) {
  .dharma-central { max-width: 100%; }
  .dharma-strip { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .mosaic-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 10px; }
  .mosaic-item.m-large { grid-column: span 2; grid-row: span 2; }
  .mosaic-item.m-wide { grid-column: span 2; grid-row: span 1; }
  .mosaic-item.m-tall { grid-column: span 1; grid-row: span 2; }
  .mini-flow .mf-node { padding: 12px 22px; font-size: 0.92rem; }
  .quote-banner { min-height: 34vh; }
}

/* ---------- Annadan Seva — full, uncropped image ---------- */
.annadan-image-wrap {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(98,57,10,0.16), 0 0 46px rgba(212,175,55,0.22);
  border: 1px solid rgba(212,164,55,0.35);
}
.annadan-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.6s ease;
}
.annadan-image-wrap:hover img { transform: scale(1.02); }
.annadan-decor {
  position: absolute;
  bottom: -18px;
  right: 26px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  box-shadow: var(--shadow);
}
@media (max-width: 768px) {
  .annadan-image-wrap { border-radius: 20px; }
  .annadan-decor { width: 40px; height: 40px; font-size: 1.1rem; bottom: -14px; right: 18px; }
}

/* =====================================================
   DONATION PAGE — cinematic hero (scoped to .donation-hero
   only; the shared .page-hero used on other pages is
   untouched)
   ===================================================== */
.donation-hero {
  position: relative;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: 106px 24px 40px;
}
.donation-hero-bg {
  position: absolute;
  inset: -3%;
  background-image: url('../images/vanprastha.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -3;
  transform: scaleX(-1);
  animation: donationHeroZoom 18s ease-in-out infinite alternate;
}
@keyframes donationHeroZoom {
  0% { transform: scaleX(-1) scale(1); }
  100% { transform: scaleX(-1) scale(1.05); }
}
.donation-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    90deg,
    rgba(120, 45, 0, 0.62),
    rgba(210, 95, 0, 0.42),
    rgba(120, 45, 0, 0.58)
  );
}
.donation-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at center,
    rgba(40, 15, 0, 0.38) 0%,
    rgba(40, 15, 0, 0.12) 35%,
    transparent 65%
  );
}
.donation-hero-light {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  top: -10%;
  left: 10%;
  background: radial-gradient(circle, rgba(255,203,85,0.22), transparent 68%);
  filter: blur(10px);
  z-index: -1;
  animation: divineLightMove 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes divineLightMove {
  from { transform: translate(-10%, -5%); }
  to { transform: translate(15%, 8%); }
}
.donation-hero-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.donation-particle {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  background: rgba(255, 224, 145, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 190, 70, 0.65);
  animation: donationParticleFloat linear infinite;
}
.donation-particle.petal {
  width: 8px;
  height: 8px;
  border-radius: 60% 0 60% 0;
  background: rgba(255, 200, 150, 0.7);
  box-shadow: 0 0 10px rgba(255, 170, 90, 0.5);
}
@keyframes donationParticleFloat {
  0% { transform: translateY(40px) scale(0.7); opacity: 0; }
  25% { opacity: 0.8; }
  75% { opacity: 0.5; }
  100% { transform: translateY(-180px) scale(1.2); opacity: 0; }
}
.donation-hero-feather {
  position: absolute;
  top: 12%;
  right: 4%;
  font-size: 5rem;
  opacity: 0.14;
  color: var(--gold-light);
  z-index: -1;
  pointer-events: none;
  transform: rotate(12deg);
}
.donation-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.donation-hero .breadcrumb {
  color: var(--gold-light);
  font-weight: 600;
}
.donation-hero .breadcrumb a:hover { text-decoration: underline; }
.donation-hero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin: 0;
  font-weight: 700;
  text-shadow: 0 3px 18px rgba(0,0,0,0.30);
}
.donation-hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 16px 0;
}
.donation-hero-divider .dh-line {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
.donation-hero-divider svg { width: 22px; height: 22px; opacity: 0.9; }

/* Curved wave transition into the cream section below */
.donation-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: 4;
  line-height: 0;
  pointer-events: none;
}
.donation-hero-wave svg {
  display: block;
  width: 100%;
  height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .donation-hero-bg,
  .donation-particle,
  .donation-hero-light {
    animation: none !important;
  }
}

@media (max-width: 992px) {
  .donation-hero { min-height: 360px; padding: 96px 24px 40px; }
  .donation-hero-light { width: 340px; height: 340px; }
  .donation-hero-feather { font-size: 3.6rem; }
  .donation-hero-wave svg { height: 34px; }
}
@media (max-width: 576px) {
  .donation-hero {
    min-height: 300px;
    height: auto;
    padding: 55px 20px 45px;
  }
  .donation-hero h1 {
    font-size: clamp(2rem, 8vw, 2.7rem);
    line-height: 1.2;
    margin-bottom: 0;
    text-align: center;
  }
  .donation-hero .breadcrumb {
    font-size: 16px;
    margin-bottom: 12px;
  }
  .donation-hero-feather { display: none; }
  .donation-hero-light { width: 220px; height: 220px; }
  .donation-hero-wave svg { height: 28px; }
}

/* ---------- Larger Om circle + lotus divider, scoped to donation "Join Us" intro ---------- */
.divider-om.divider-om-lg { width: 84px; height: 84px; margin-bottom: 14px; }
.divider-om.divider-om-lg .om-icon { font-size: 2.4rem; }
.donation-intro-section { padding-top: 54px; }
@media (max-width: 576px) {
  .donation-intro-section { padding-top: 40px; }
}
@media (max-width: 576px) {
  .divider-om.divider-om-lg { width: 76px; height: 76px; }
  .divider-om.divider-om-lg .om-icon { font-size: 2.1rem; }
}
.donation-intro-text {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.9;
  color: var(--text-muted);
  padding: 0 8px;
}

/* =====================================================
   CONTACT PAGE — cinematic hero (scoped to .contact-hero
   only; visually consistent with .donation-hero)
   ===================================================== */
.contact-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: 106px 24px 46px;
}
.contact-hero-bg {
  position: absolute;
  inset: -3%;
  z-index: -4;
  background-image: url('../images/contact-temple-hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: contactHeroZoom 18s ease-in-out infinite alternate;
}
@keyframes contactHeroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.contact-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(
    90deg,
    rgba(92, 30, 0, 0.65) 0%,
    rgba(190, 67, 0, 0.46) 30%,
    rgba(184, 70, 0, 0.38) 55%,
    rgba(80, 27, 0, 0.62) 100%
  );
}
.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(
    ellipse at center,
    rgba(45, 15, 0, 0.45) 0%,
    rgba(45, 15, 0, 0.18) 35%,
    transparent 65%
  );
}
.contact-divine-light {
  position: absolute;
  left: 5%;
  top: 10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,205,90,0.24), rgba(255,174,45,0.08) 40%, transparent 70%);
  filter: blur(12px);
  z-index: -1;
  animation: contactDivineGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes contactDivineGlow {
  from { transform: translate(-3%, -2%) scale(0.95); opacity: 0.65; }
  to { transform: translate(5%, 3%) scale(1.08); opacity: 1; }
}
.contact-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.contact-particle {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 218, 130, 0.75);
  box-shadow: 0 0 10px rgba(255, 190, 80, 0.65);
  animation: contactParticleFloat linear infinite;
}
.contact-particle.petal {
  width: 8px;
  height: 8px;
  border-radius: 60% 0 60% 0;
  background: rgba(255, 200, 150, 0.7);
  box-shadow: 0 0 10px rgba(255, 170, 90, 0.5);
}
@keyframes contactParticleFloat {
  0% { transform: translateY(40px) scale(0.7); opacity: 0; }
  25% { opacity: 0.7; }
  75% { opacity: 0.45; }
  100% { transform: translateY(-160px) scale(1.1); opacity: 0; }
}
.contact-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.contact-hero .breadcrumb {
  color: var(--gold-light);
  font-weight: 600;
  font-size: 0.95rem;
}
.contact-hero .breadcrumb a:hover { text-decoration: underline; }
.contact-hero h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin: 0;
  font-weight: 700;
  text-shadow: 0 3px 18px rgba(0,0,0,0.35);
}
.contact-hero p:not(.breadcrumb) {
  color: var(--gold-light);
  font-weight: 600;
  margin-top: 8px;
  text-shadow: 0 3px 18px rgba(0,0,0,0.35);
}
.contact-hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 0;
}
.contact-hero-divider .ch-line {
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #F4D58A, transparent);
}
.contact-hero-divider svg { width: 20px; height: 20px; opacity: 0.9; color: #F4D58A; }

/* Curved wave transition — same shallow style as the Donation hero */
.contact-hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: 4;
  line-height: 0;
  pointer-events: none;
}
.contact-hero-wave svg {
  display: block;
  width: 100%;
  height: 38px;
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-bg,
  .contact-particle,
  .contact-divine-light {
    animation: none !important;
  }
}

@media (max-width: 992px) {
  .contact-hero { min-height: 350px; padding: 96px 24px 42px; }
  .contact-divine-light { width: 320px; height: 320px; }
  .contact-hero-wave svg { height: 32px; }
}
@media (max-width: 576px) {
  .contact-hero {
    min-height: 290px;
    padding: 45px 18px;
    padding-top: 90px;
  }
  .contact-hero-bg { background-position: center center; }
  .contact-hero h1 {
    font-size: clamp(1.9rem, 7vw, 2.5rem);
    line-height: 1.25;
  }
  .contact-divine-light { width: 220px; height: 220px; }
  .contact-hero-wave svg { height: 26px; }
}

/* =====================================================
   NEW PUBLIC PAGES — Transparency / Volunteer / News &
   Events / Gallery (additive only; nothing above is
   modified by this block)
   ===================================================== */

/* ---------- Filter tabs (Gallery, News & Events) ---------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.filter-tab {
  border: 1.5px solid var(--gold-light); background: var(--white); color: var(--text-dark);
  padding: 9px 20px; border-radius: 30px; font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: all 0.2s ease;
}
.filter-tab:hover { border-color: var(--gold); }
.filter-tab.active { background: var(--gradient-gold); color: var(--white); border-color: transparent; }

/* ---------- Simple data table (Transparency) ---------- */
.data-table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--gold-light); }
table.data-table { width: 100%; border-collapse: collapse; background: var(--white); }
table.data-table th, table.data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--gold-light); font-size: 0.92rem; }
table.data-table th { background: var(--cream-dark); color: var(--kesari-dark); font-weight: 700; }
table.data-table tr:last-child td { border-bottom: none; }

.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bar-row .bar-label { flex: 0 0 180px; font-weight: 600; font-size: 0.88rem; }
.bar-track { flex: 1; height: 10px; background: var(--cream-dark); border-radius: 10px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--gradient-gold); border-radius: 10px; }
.bar-row .bar-value { flex: 0 0 auto; font-weight: 700; font-size: 0.86rem; color: var(--kesari-dark); white-space: nowrap; }

.stat-tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin-bottom: 40px; }
.stat-tile {
  background: var(--white); border: 1px solid var(--gold-light); border-radius: var(--radius);
  padding: 24px 18px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat-tile .stat-tile-value { font-size: 1.7rem; font-weight: 800; color: var(--kesari-dark); font-family: var(--font-heading); }
.stat-tile .stat-tile-label { font-size: 0.86rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; }

.doc-list { display: grid; gap: 14px; }
.doc-card {
  display: flex; align-items: center; gap: 16px; background: var(--white); border: 1px solid var(--gold-light);
  border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.doc-card .doc-icon { font-size: 1.6rem; }
.doc-card .doc-meta { flex: 1; min-width: 200px; }
.doc-card .doc-meta h4 { margin-bottom: 2px; font-size: 1rem; }
.doc-card .doc-meta p { color: var(--text-muted); font-size: 0.85rem; margin: 0; }

.empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.7; }

/* ---------- Volunteer page ---------- */
.timing-table-wrap { max-width: 760px; margin: 0 auto 20px; }
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.activity-card {
  background: var(--white); border: 1px solid var(--gold-light); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.activity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.activity-card .activity-img { width: 100%; height: 150px; object-fit: cover; background: var(--gold-light); }
.activity-card .activity-body { padding: 16px 18px; }
.activity-card h4 { font-size: 1.02rem; margin-bottom: 6px; }
.activity-card p { font-size: 0.86rem; color: var(--text-muted); margin: 0; }

/* ---------- News & Events cards ---------- */
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.event-card {
  background: var(--white); border: 1px solid var(--gold-light); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column;
}
.event-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.event-card .event-img { width: 100%; height: 180px; object-fit: cover; background: var(--gold-light); }
.event-card .event-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.event-card .event-badge {
  align-self: flex-start; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--gold-light); color: var(--kesari-dark); padding: 4px 12px; border-radius: 20px; margin-bottom: 10px;
}
.event-card .event-date { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.event-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.event-card p { font-size: 0.88rem; color: var(--text-muted); flex: 1; }
.event-card .event-link { margin-top: 12px; font-weight: 700; color: var(--kesari-dark); }

/* ---------- Gallery masonry-ish grid ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.gallery-tile {
  position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  box-shadow: var(--shadow-sm); border: 1px solid var(--gold-light); aspect-ratio: 4/3; background: var(--gold-light);
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-tile:hover img { transform: scale(1.08); }
.gallery-tile .gallery-tile-overlay {
  position: absolute; inset: 0; background: linear-gradient(to top, rgba(59,36,18,0.75), transparent 55%);
  display: flex; align-items: flex-end; padding: 12px; opacity: 0; transition: opacity 0.25s ease;
}
.gallery-tile:hover .gallery-tile-overlay { opacity: 1; }
.gallery-tile .gallery-tile-overlay span { color: var(--white); font-weight: 600; font-size: 0.85rem; }
.gallery-tile .play-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--kesari-dark);
}

/* ---------- Lightbox / video modal ---------- */
.gbf-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,10,5,0.85); z-index: 3000; display: none;
  align-items: center; justify-content: center; padding: 20px;
}
.gbf-modal-backdrop.open { display: flex; }
.gbf-modal-box { position: relative; max-width: 900px; width: 100%; max-height: 88vh; }
.gbf-modal-box img { width: 100%; max-height: 88vh; object-fit: contain; border-radius: 10px; }
.gbf-modal-box .gbf-video-frame { width: 100%; aspect-ratio: 16/9; border-radius: 10px; border: none; }
.gbf-modal-close {
  position: absolute; top: -42px; right: 0; background: none; border: none; color: var(--white);
  font-size: 1.8rem; cursor: pointer; line-height: 1;
}
.gbf-modal-caption { color: var(--gold-light); text-align: center; margin-top: 10px; font-size: 0.9rem; }
.gbf-modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none;
  color: var(--white); width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem; cursor: pointer;
}
.gbf-modal-nav.prev { left: -56px; } .gbf-modal-nav.next { right: -56px; }
@media (max-width: 767.98px) { .gbf-modal-nav.prev { left: 4px; } .gbf-modal-nav.next { right: 4px; } }

/* ---------- Before / After rescue story ---------- */
.rescue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }
.rescue-card { background: var(--white); border: 1px solid var(--gold-light); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; }
.rescue-compare { display: grid; grid-template-columns: 1fr 1fr; }
.rescue-compare figure { margin: 0; position: relative; aspect-ratio: 1/1; }
.rescue-compare img { width: 100%; height: 100%; object-fit: cover; }
.rescue-compare figcaption {
  position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.55); color: var(--white);
  font-size: 0.7rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; text-transform: uppercase;
}
.rescue-card .rescue-body { padding: 16px 18px; }
.rescue-card h4 { font-size: 1rem; margin-bottom: 4px; }
.rescue-card p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

@media (max-width: 576px) {
  .bar-row { flex-wrap: wrap; }
  .bar-row .bar-label { flex: 1 1 100%; }
  .gbf-modal-nav { display: none; }
}