/* ============ Design tokens (extracted from live site) ============ */
:root {
  --royal: #3B2A73;
  --royal-rgb: 59, 42, 115;
  --gold: #D9B35A;
  --gold-rgb: 217, 179, 90;
  --temple: #F28C28;
  --temple-rgb: 242, 140, 40;
  --brown: #4A3B2F;
  --brown-rgb: 74, 59, 47;
  --cream: #FAF8F2;
  --white: #ffffff;

  --font-body: 'Poppins', sans-serif;
  --font-heading: 'Tiro Devanagari Hindi', serif;

  --container: 1180px;
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--brown);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--royal); font-weight: 400; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 8px; }
.section-sub {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--temple);
}

/* -- Decorative gold mandala flourishes, cropped into section corners. -- */
.about-section, .gallery-section, .aarti-section, .social-section {
  position: relative;
  overflow: hidden;
}
.corner-ornament {
  position: absolute;
  width: 220px;
  height: 220px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.corner-ornament--bl { bottom: -60px; left: -60px; }
.corner-ornament--tr { top: -60px; right: -60px; }
.corner-ornament--br { bottom: -60px; right: -60px; }
.about-section .container,
.gallery-section .container,
.aarti-section .container,
.social-section .container {
  position: relative;
  z-index: 1;
}

/* -- Repeating gold petal-border divider between sections. Pure CSS tiling,
   so it scales to any width automatically and needs no mobile override. -- */
.section-divider {
  height: 32px;
  background-image: url('../images/pattern-divider.svg');
  background-repeat: repeat-x;
  background-position: center;
  background-size: 56px 32px;
  opacity: 0.92;
}

/* ============ Preloader + hero entrance ============ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 30%, #46337f, var(--royal) 55%, #201638 100%);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
/* Background fades out on .hide; the rings+logo do their own dramatic
   scale-up on .zoom (added first, briefly, before .hide) so the handoff
   reads as flying through the orbit rather than a plain cross-fade. */
.preloader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* -- Om-ring orbit: concentric rings of ॐ glyphs (built by script.js —
   each ring gets its own radius/speed/direction), with the site logo
   zooming into the empty center. Every ring spins via the CW/CCW keyframe
   named in its --dir; each glyph inside runs the OPPOSITE keyframe at the
   same duration so it cancels the ring's spin and stays upright while
   still orbiting (its orbital position comes from the static rotate+
   translate on .om-pos, untouched by the glyph's own counter-animation).
   Sized via vmin so the whole orbit scales with the viewport and fills a
   lot more of small/large screens alike, capped so it never gets absurd
   on huge desktop monitors. -- */
.preloader-inner {
  position: relative;
  width: min(92vmin, 720px);
  height: min(92vmin, 720px);
  transition: transform 0.6s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.55s ease;
}
.preloader.zoom .preloader-inner {
  transform: scale(5.5);
  opacity: 0;
}
.om-orbit { position: absolute; inset: 0; }
.om-ring {
  position: absolute;
  inset: 0;
  animation-name: spinCW;
  animation-duration: var(--dur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.om-ring[data-dir="ccw"] { animation-name: spinCCW; }
.om-pos {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(var(--angle)) translateX(var(--radius));
}
.om-glyph {
  position: absolute;
  top: 0;
  left: 0;
  margin: -0.65em 0 0 -0.55em;
  font-family: var(--font-heading);
  color: var(--gold);
  font-size: var(--glyph-size, 1.15rem);
  text-shadow: 0 0 10px rgba(217, 179, 90, 0.4);
  animation-name: spinCCW;
  animation-duration: var(--dur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.om-ring[data-dir="ccw"] .om-glyph { animation-name: spinCW; }
@keyframes spinCW { to { transform: rotate(360deg); } }
@keyframes spinCCW { to { transform: rotate(-360deg); } }

.preloader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(76px, 13vmin, 128px);
  height: clamp(76px, 13vmin, 128px);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.16), 0 14px 34px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  animation: logoZoomIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s forwards;
}
@keyframes logoZoomIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Hero content stays hidden until body.loaded fires the staggered rise-in. */
.hero-logo, .hero-content h1, .hero-tagline, .hero-actions {
  opacity: 0;
  transform: translateY(26px);
}
body.loaded .hero-logo { animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; }
body.loaded .hero-content h1 { animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards; }
body.loaded .hero-tagline { animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.44s forwards; }
body.loaded .hero-actions { animation: heroRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
  .preloader-inner { transition: none; }
  .preloader.zoom .preloader-inner { transform: none; opacity: 1; }
  .om-ring, .om-glyph { animation: none; }
  .preloader-logo { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .hero-logo, .hero-content h1, .hero-tagline, .hero-actions {
    opacity: 1; transform: none; animation: none;
  }
}

/* ============ Buttons ============ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--temple));
  color: var(--royal);
  box-shadow: 0 8px 24px rgba(var(--temple-rgb), 0.35);
}
.btn-gold:hover { box-shadow: 0 12px 30px rgba(var(--temple-rgb), 0.45); }
.btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.15); }
.btn-dark { color: var(--royal); border-color: rgba(var(--royal-rgb), 0.3); }
.btn-dark:hover { background: rgba(var(--royal-rgb), 0.08); }

/* -- Cursor-tracked hover glow (ported from the 21st.dev hover-glow-button
   demo into vanilla CSS/JS; span.btn-glow position is set by script.js on
   mousemove). Label gets z-index 2 so the glow (z-index 1) never covers it. -- */
.btn-label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; }
.btn-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover .btn-glow { transform: translate(-50%, -50%) scale(1); }
.btn-gold .btn-glow { background: radial-gradient(circle, rgba(255,255,255,0.7) 0%, transparent 70%); }
.btn-outline .btn-glow { background: radial-gradient(circle, rgba(217,179,90,0.55) 0%, transparent 70%); }

/* ============ Header ============ */
/* Two states: at top, header is a full-width transparent bar blended into
   the hero image (light text). Past a scroll threshold it detaches into an
   inset, rounded floating card with a shorter height (dark text). */
:root {
  --header-h: 78px;
  --header-h-scrolled: 58px;
  --header-inset: 22px;
}
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  margin: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    right 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s ease,
    box-shadow 0.4s ease;
}
/* Soft scrim behind the transparent top-state header, independent of
   whatever the hero's own overlay is doing, so header content always
   reads clearly against any photo instead of relying on the hero's own
   darkening — and it fades away once the header floats free on scroll. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
  opacity: 1;
  transition: opacity 0.4s ease;
  z-index: -1;
  pointer-events: none;
}
.site-header.scrolled::before { opacity: 0; }
.site-header.scrolled {
  top: 14px;
  left: var(--header-inset);
  right: var(--header-inset);
  border-radius: 22px;
  background: rgba(250, 248, 242, 0.96);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(var(--brown-rgb), 0.2), inset 0 1px 0 rgba(217, 179, 90, 0.5);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.scrolled .header-inner { height: var(--header-h-scrolled); }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  transition: width 0.45s ease, height 0.45s ease;
}
.site-header.scrolled .brand-logo { width: 38px; height: 38px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.015em;
  color: var(--white);
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}
.site-header.scrolled .brand-text strong { text-shadow: none; }
.brand-text small {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.4s ease;
}
.site-header.scrolled .brand-text strong { color: var(--royal); }
.site-header.scrolled .brand-text small { color: var(--temple); }

.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
  position: relative;
  padding: 6px 0;
  white-space: nowrap;
  transition: color 0.2s ease, text-shadow 0.4s ease;
}
.site-header.scrolled .main-nav a { color: var(--brown); text-shadow: none; }
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--temple);
  border-radius: 2px;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-nav a:hover { color: var(--temple); }
.main-nav a:hover::after { width: 100%; }
.main-nav a.active { color: var(--temple); }
.main-nav a.active::after { width: 100%; }
.main-nav .nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--temple));
  color: var(--royal) !important;
  text-shadow: none;
  padding: 13px 30px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(var(--temple-rgb), 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.main-nav .nav-cta::after { display: none; }
.main-nav .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--temple-rgb), 0.5); }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: none; border: none; cursor: pointer;
  transition: background 0.25s ease;
}
.menu-btn:hover { background: rgba(255,255,255,0.12); }
.site-header.scrolled .menu-btn:hover { background: rgba(var(--brown-rgb), 0.08); }
.menu-btn span { width: 20px; height: 2px; background: var(--white); border-radius: 2px; text-shadow: none; transition: background 0.4s ease; }
.site-header.scrolled .menu-btn span { background: var(--royal); }

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--royal-rgb), 0.82) 0%, rgba(var(--royal-rgb), 0.78) 45%, rgba(var(--brown-rgb), 0.9) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  padding-top: 78px;
}
.hero-logo-wrap {
  position: relative;
  width: 96px; height: 96px;
  margin: 0 auto 24px;
}
.hero-logo-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(217, 179, 90, 0.55);
  animation: heroRingSpin 30s linear infinite;
  pointer-events: none;
}
@keyframes heroRingSpin { to { transform: rotate(360deg); } }
.hero-logo {
  width: 96px; height: 96px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 12px 32px rgba(0,0,0,0.35);
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo-ring { animation: none; }
}
.hero-content h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  margin-bottom: 16px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 4px 20px rgba(0,0,0,0.35);
}
.hero-tagline {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin-bottom: 40px;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0,0,0,0.55), 0 0 24px rgba(0,0,0,0.4);
}
.hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ============ Ticker ============ */
.ticker {
  background: var(--royal);
  color: var(--gold);
  overflow: hidden;
  padding: 14px 0;
}
.ticker-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: tickerScroll 32s linear infinite;
  white-space: nowrap;
}
.ticker-track span {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  position: relative;
  padding-right: 60px;
}
.ticker-track span::after {
  content: '✦';
  position: absolute;
  right: -32px;
  color: var(--temple);
  font-size: 0.8rem;
}
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============ About ============ */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 72px;
}
.about-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(var(--brown-rgb), 0.08);
  border-top: 4px solid var(--temple);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(var(--brown-rgb), 0.14); }
.about-card h3 { font-size: 1.6rem; margin-bottom: 2px; }
.about-en {
  display: block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--temple);
  font-weight: 600;
  margin-bottom: 14px;
}
.about-card p { font-size: 0.95rem; color: var(--brown); opacity: 0.85; }

/* -- Full history narrative, provided by the ashram -- */
.history-block {
  background: var(--white);
  border-radius: var(--radius);
  padding: 44px 48px;
  margin-bottom: 64px;
  box-shadow: 0 10px 30px rgba(var(--brown-rgb), 0.08);
  border-left: 4px solid var(--gold);
}
.history-block h3 { font-size: 1.7rem; margin-bottom: 4px; }
.history-block h3 .about-en { display: inline-block; margin: 0 0 0 12px; font-size: 0.7rem; }
.history-block p {
  font-size: 0.98rem;
  line-height: 1.85;
  color: var(--brown);
  opacity: 0.9;
  margin-top: 18px;
}
/* -- Guru Parampara: one bio block per gaddinashin inside the history card -- */
.guru-parampara {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.guru-bio {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding-top: 26px;
  border-top: 1px dashed rgba(var(--brown-rgb), 0.2);
}
.guru-parampara .guru-bio:first-child { padding-top: 0; border-top: none; }
.guru-bio-img {
  width: 130px;
  height: 160px;
  border-radius: 12px;
  object-fit: cover;
  object-position: top;
  box-shadow: 0 8px 22px rgba(var(--brown-rgb), 0.14);
}
.guru-bio-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.16), rgba(var(--royal-rgb), 0.1));
  border: 1px dashed rgba(var(--gold-rgb), 0.5);
}
.guru-bio--current {
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 30px;
  background: linear-gradient(135deg, rgba(var(--temple-rgb), 0.16), rgba(var(--temple-rgb), 0.05));
  border: 1px solid rgba(var(--temple-rgb), 0.28);
  border-radius: 18px;
  padding: 30px;
  margin: -6px -6px 0;
  border-top: 1px solid rgba(var(--temple-rgb), 0.28);
}
.guru-bio--current + .guru-bio { border-top: 1px dashed rgba(var(--brown-rgb), 0.2); padding-top: 26px; }
.guru-bio-img-frame {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.guru-chakra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(var(--temple-rgb), 0.55);
}
.guru-bio-img--current {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  box-shadow: 0 12px 30px rgba(var(--brown-rgb), 0.28), 0 0 0 6px var(--cream), 0 0 0 8px rgba(var(--temple-rgb), 0.45);
}
.guru-current-badge {
  display: inline-block;
  background: var(--temple);
  color: var(--white);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(var(--temple-rgb), 0.35);
}
.guru-bio-text h4 { font-size: 1.14rem; color: var(--royal); margin-bottom: 2px; }
.guru-bio-text h4 .about-en { display: block; margin: 4px 0 0; font-size: 0.68rem; }
.guru-bio-text p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--brown);
  opacity: 0.9;
  margin-top: 10px;
}
.guru-bio-text details { margin-top: 10px; }
.guru-bio-text summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--royal);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  list-style: none;
}
.guru-bio-text summary::-webkit-details-marker { display: none; }
.guru-bio-text summary::before { content: '+ '; color: var(--temple); }
.guru-bio-text details[open] summary::before { content: '\2212 '; }
.guru-bio-text details p { font-style: italic; }

@media (max-width: 560px) {
  .guru-bio { grid-template-columns: 1fr; }
  .guru-bio-img { width: 100px; height: 124px; }
  .guru-bio--current { justify-items: center; text-align: center; padding: 24px; }
  .guru-bio-img-frame { width: 180px; height: 180px; margin: 0 auto; }
  .guru-bio-img--current { width: 138px; height: 138px; }
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 20px; left: 0; right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.timeline-item { position: relative; z-index: 1; text-align: center; }
.timeline-year {
  min-width: 42px; height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--royal);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 2px var(--royal);
}
.timeline-item h4 { font-size: 1.15rem; margin-bottom: 6px; }
.timeline-item p { font-size: 0.86rem; opacity: 0.8; }

/* ============ Stats ============ */
.stats-section {
  position: relative;
  background: linear-gradient(135deg, var(--royal), #2a1d55);
  padding: 84px 0;
  overflow: hidden;
}
.stats-glow {
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 520px;
  background: radial-gradient(circle, rgba(217, 179, 90, 0.22), transparent 70%);
  pointer-events: none;
}
.stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat {
  padding: 34px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(217, 179, 90, 0.22);
  backdrop-filter: blur(6px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.stat:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(217, 179, 90, 0.5);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}
.stat-icon {
  display: block;
  font-size: 1.9rem;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--gold);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--white); font-size: 0.95rem; font-weight: 500; }
.stat-label span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.65; margin-top: 4px; }

/* ============ Seva Mandal ============ */
.seva-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.seva-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(var(--brown-rgb), 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.seva-card:hover { transform: translateY(-8px); box-shadow: 0 20px 44px rgba(var(--brown-rgb), 0.16); }
.seva-img { height: 210px; overflow: hidden; }
.seva-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.seva-card:hover .seva-img img { transform: scale(1.08); }
.seva-card h3, .seva-card p, .seva-card a, .seva-en { padding-left: 26px; padding-right: 26px; }
.seva-card h3 { font-size: 1.35rem; margin-top: 22px; margin-bottom: 2px; }
.seva-en { display: block; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--temple); font-weight: 600; margin-bottom: 12px; }
.seva-card p { font-size: 0.92rem; opacity: 0.85; margin-bottom: 18px; }
.seva-card a { display: inline-block; margin-bottom: 26px; font-weight: 600; color: var(--royal); }
.seva-card a:hover { color: var(--temple); }

/* ============ Parv Patrika (Calendar) ============ */
.parv-section { background: var(--white); }
.parv-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: start;
}
/* -- Desk-calendar look: spiral rings punched through the top edge, bold
   month header flanked by prev/next arrows, Monday-first weekday row, and
   real (greyed) adjacent-month day numbers instead of blank cells. -- */
.calendar-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  padding: 40px 30px 30px;
  box-shadow: 0 16px 40px rgba(var(--brown-rgb), 0.12);
  border-right: 10px solid var(--brown);
}
.calendar-rings {
  position: absolute;
  top: 0; left: 0; right: 10px;
  height: 0;
  display: flex;
  justify-content: space-evenly;
  padding: 0 20px;
  transform: translateY(-50%);
  pointer-events: none;
}
.calendar-rings .ring {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid rgba(74, 59, 47, 0.4);
  background: var(--cream);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.calendar-title { text-align: center; }
.calendar-title h3 {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brown);
  line-height: 1.1;
}
.calendar-title span { display: block; font-size: 0.95rem; font-weight: 600; color: var(--temple); margin-top: 2px; }
.calendar-nav {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--brown-rgb), 0.2);
  background: var(--cream);
  color: var(--brown);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.calendar-nav:hover { background: var(--temple); border-color: var(--temple); color: var(--white); }
.calendar-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.calendar-nav:disabled:hover { background: var(--cream); border-color: rgba(var(--brown-rgb), 0.2); color: var(--brown); }
.calendar-weekdays, .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.calendar-weekdays span { font-size: 0.72rem; font-weight: 700; color: var(--brown); opacity: 0.45; padding-bottom: 12px; }
.calendar-days button {
  position: relative;
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brown);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.calendar-days button:hover { background: rgba(var(--temple-rgb), 0.12); }
.calendar-days button.pad { color: var(--brown); opacity: 0.28; font-weight: 400; cursor: default; }
.calendar-days button.pad:hover { background: transparent; }
.calendar-days button.has-event::after {
  content: '';
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--temple);
}
.calendar-days button.has-event { color: var(--temple); font-weight: 700; }
.calendar-days button.selected { background: var(--royal); color: var(--gold); font-weight: 700; }
.calendar-days button.selected::after { background: var(--gold); }
.calendar-days .empty { visibility: hidden; }

.event-card {
  background: var(--royal);
  color: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: 0 14px 34px rgba(var(--royal-rgb), 0.28);
}
.event-label {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 14px;
}
.event-time { color: var(--gold); font-weight: 600; margin-bottom: 4px; }
.event-place { opacity: 0.8; font-size: 0.9rem; margin-bottom: 18px; }

.event-list { margin-bottom: 22px; display: flex; flex-direction: column; gap: 16px; }
.event-item { display: flex; gap: 14px; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.event-item:last-child { border-bottom: none; padding-bottom: 0; }
.event-item-date { flex: none; min-width: 76px; color: var(--gold); font-weight: 700; font-size: 0.95rem; }
.event-item-desc { font-size: 1.05rem; opacity: 0.94; line-height: 1.5; }
.event-empty { opacity: 0.85; font-size: 0.95rem; line-height: 1.6; }

/* ============ Gallery ============ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.gallery-more { text-align: center; margin-top: 40px; }

/* -- Hover swipe: the visible photo (a) slides out left while the next
   photo (b) slides in from the right, and reverses on mouse-leave. If a
   tile has no second photo, give both img.gallery-img-a/b the same src —
   it still swipes, just replaying the same frame, so every tile behaves
   consistently. -- */
.gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.gallery-img-a { transform: translateX(0); z-index: 2; }
.gallery-img-b { transform: translateX(100%); z-index: 1; }
.gallery-item:hover .gallery-img-a { transform: translateX(-100%); }
.gallery-item:hover .gallery-img-b { transform: translateX(0); }

/* ============ Aarti ============ */
.aarti-section { background: var(--white); }
.aarti-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: center;
}
.aarti-img { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 34px rgba(var(--brown-rgb), 0.15); }
.aarti-img img { width: 100%; height: 420px; object-fit: cover; }
.aarti-img-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(var(--royal-rgb),0.85), transparent);
  padding: 24px;
  color: var(--white);
  display: flex; flex-direction: column; gap: 2px;
}
.aarti-img-caption span { color: var(--gold); font-size: 0.85rem; }

.aarti-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.aarti-tabs button {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--royal-rgb), 0.25);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--brown);
  cursor: pointer;
  transition: all 0.2s ease;
}
.aarti-tabs button.active, .aarti-tabs button:hover {
  background: var(--royal);
  border-color: var(--royal);
  color: var(--gold);
}
.aarti-content h3 { font-size: 1.8rem; margin-bottom: 4px; }
.aarti-time { display: inline-block; color: var(--temple); font-weight: 600; margin-bottom: 16px; }
.aarti-content > p { opacity: 0.85; margin-bottom: 20px; }
.aarti-content blockquote {
  border-left: 3px solid var(--gold);
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--royal);
  background: var(--cream);
  border-radius: 0 8px 8px 0;
  margin-bottom: 28px;
}
.aarti-actions { display: flex; gap: 16px; }
.aarti-actions .btn-outline { color: var(--royal); border-color: rgba(var(--royal-rgb), 0.3); }
.aarti-actions .btn-outline:hover { background: rgba(var(--royal-rgb), 0.08); }

/* ============ Social ============ */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 640px;
  margin: 0 auto;
}
.social-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  box-shadow: 0 10px 30px rgba(var(--brown-rgb), 0.08);
  transition: transform 0.3s ease;
}
.social-card:hover { transform: translateY(-8px); }
.social-card img { width: 100%; height: 160px; object-fit: cover; }
.social-card h3 { margin: 20px 0 6px; }
.social-card p { padding: 0 20px 26px; font-size: 0.9rem; opacity: 0.8; }

/* ============ Contact ============ */
.contact-section { background: var(--royal); }
.contact-section .section-head h2 { color: var(--white); }
.contact-section .section-sub { color: var(--gold); max-width: 520px; }
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
}
.contact-info { color: var(--white); }
.contact-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.contact-icon { font-size: 1.3rem; }
.contact-row p { opacity: 0.9; }
.contact-map {
  margin-top: 30px;
  height: 200px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.15) contrast(1.05);
}
.contact-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.contact-form h3 { margin-bottom: 20px; }
.contact-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--brown); margin-bottom: 16px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(var(--brown-rgb), 0.18);
  font-family: var(--font-body);
  font-size: 0.92rem;
  resize: vertical;
  background: var(--cream);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--temple); }
.contact-form .btn { width: 100%; margin-top: 6px; border: none; }

/* ============ Footer ============ */
.site-footer { background: var(--brown); color: rgba(255,255,255,0.85); padding: 72px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img { width: 54px; height: 54px; border-radius: 50%; margin-bottom: 14px; }
.footer-brand strong { display: block; font-family: var(--font-heading); font-size: 1.3rem; color: var(--gold); margin-bottom: 10px; }
.footer-brand p { font-size: 0.88rem; opacity: 0.75; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  transition: background 0.2s ease;
}
.footer-social a:hover { background: var(--temple); }
.footer-col h4 { color: var(--white); font-size: 1.05rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; font-size: 0.9rem; opacity: 0.8; }
.footer-col ul a:hover { color: var(--gold); }
.footer-newsletter p { font-size: 0.88rem; opacity: 0.75; margin-bottom: 16px; }
.footer-newsletter form { display: flex; gap: 8px; }
.footer-newsletter input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.footer-newsletter button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--temple);
  color: var(--white);
  cursor: pointer;
  font-size: 1rem;
}
.footer-bottom { text-align: center; padding: 24px 0; font-size: 0.82rem; opacity: 0.6; }

/* ============ Scroll reveal ============ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .about-grid, .seva-grid, .social-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .timeline::before { display: none; }
  .parv-grid, .aarti-wrap, .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}

/* Nav switches to the hamburger/dropdown well before the desktop links
   would run out of room and wrap (which broke the pill-shaped CTA button). */
@media (max-width: 940px) {
  .main-nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px 30px;
    gap: 4px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
    transform: translateY(-140%);
    transition: transform 0.3s ease, top 0.4s ease;
  }
  .site-header.scrolled .main-nav { top: calc(14px + var(--header-h-scrolled) + 10px); }
  .main-nav.open { transform: translateY(0); }
  .main-nav a, .site-header.scrolled .main-nav a {
    color: var(--brown);
    padding: 12px 0;
    border-bottom: 1px solid rgba(var(--brown-rgb), 0.08);
  }
  .nav-cta { text-align: center; margin-top: 10px; }
  .menu-btn { display: flex; }
}

@media (max-width: 720px) {
  .about-grid, .seva-grid, .social-grid, .gallery-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .calendar-days button { font-size: 0.72rem; }
  .history-block { padding: 30px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}