/* =========================================================
   ISKCON Kamareddy — Sri Krishna Temple, Telangana
   Design system & stylesheet
   Palette: butter cream grounds, royal blue, ISKCON crimson, temple gold
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand */
  --blue:        #23409A;
  --blue-deep:   #16266B;
  --blue-night:  #101636;
  --blue-light:  #3D5FC4;
  --maroon:      #8E1B2E;
  --maroon-deep: #6A1122;
  --gold:        #E0A50F;
  --gold-light:  #F6CE5A;
  --gold-pale:   #FBE7B0;
  --gold-dark:   #A87A05;
  --saffron:     #E2610D;

  /* Grounds */
  --butter:   #FBF1D3;
  --butter-2: #FDF8EA;
  --butter-3: #F5E6BE;
  --white:    #FFFFFF;

  /* Ink */
  --ink:     #16192B;
  --ink-2:   #232741;
  --muted:   #55596B;
  --muted-2: #7A7F92;

  /* Gradients */
  --grad-gold:  linear-gradient(100deg, var(--gold) 0%, var(--gold-light) 45%, #FFE9AE 58%, var(--gold-light) 72%, var(--gold) 100%);
  --grad-blue:  linear-gradient(120deg, var(--blue-deep) 0%, var(--blue) 55%, var(--blue-light) 100%);
  --grad-royal: linear-gradient(103deg, var(--maroon-deep) 0%, #3A1442 42%, var(--blue-deep) 100%);
  --grad-night: linear-gradient(150deg, var(--blue-night) 0%, #1A1F4A 55%, #2B1738 100%);

  /* Type */
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Metrics */
  --top-h: 40px;
  --nav-h: 82px;
  --maxw: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4rem, 8vw, 7rem);
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(22,25,43,.06);
  --sh-sm: 0 4px 16px -6px rgba(22,25,43,.14);
  --sh-md: 0 16px 44px -18px rgba(22,25,43,.30);
  --sh-lg: 0 34px 80px -30px rgba(22,25,43,.42);

  /* Motion */
  --e-out:  cubic-bezier(.22,.85,.3,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
}

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

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

body {
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--butter-2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, iframe, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 4000;
  background: var(--blue); color: #fff;
  padding: 11px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .82rem; font-weight: 600; letter-spacing: .04em;
  transition: top .3s var(--e-out);
}
.skip-link:focus { top: 0; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. SECTION SHELL ---------- */
section { position: relative; padding-block: var(--sec-y); }

.section-label {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--maroon); margin-bottom: .85rem;
}
.section-label::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad-gold);
}
.section-label.centered::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--grad-gold);
}
.section-label.on-dark { color: var(--gold-light); }

.section-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 700; line-height: 1.14;
  letter-spacing: -.012em; color: var(--blue-deep);
}
.section-title span { color: var(--gold-dark); }
.section-title.on-dark { color: #fff; }
.section-title.on-dark span { color: var(--gold-light); }

.section-body {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.82; color: var(--muted);
  max-width: 66ch;
}
.centered-head { text-align: center; }
.centered-head .section-body { margin-inline: auto; }
.centered-head .section-label { margin-inline: auto; }

/* ---------- 4. ORNAMENTS ---------- */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 13px; margin: 1.25rem auto 2.4rem;
}
.ornament.tight { margin: .9rem auto 1.5rem; }
.ornament .rule {
  height: 1.5px; width: clamp(40px, 10vw, 96px); border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament .rule:last-child { background: linear-gradient(270deg, transparent, var(--gold)); }
.ornament .lotus { width: 28px; height: 28px; color: var(--maroon); flex-shrink: 0; }
.ornament.on-dark .rule { background: linear-gradient(90deg, transparent, var(--gold-light)); }
.ornament.on-dark .rule:last-child { background: linear-gradient(270deg, transparent, var(--gold-light)); }
.ornament.on-dark .lotus { color: var(--gold-light); }

/* ---------- 5. BUTTONS ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 30px; border-radius: 999px;
  font-family: var(--f-body); font-size: .84rem; font-weight: 600;
  letter-spacing: .03em; white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--e-out), box-shadow .3s var(--e-out),
              background-position .5s var(--e-out), color .3s var(--e-out);
}
.btn .arrow { transition: transform .3s var(--e-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.985); }

.btn-primary {
  color: #fff; background: var(--grad-blue); background-size: 180% 100%;
  box-shadow: 0 10px 26px -10px rgba(35,64,154,.7);
}
.btn-primary:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 18px 36px -12px rgba(35,64,154,.8); }

.btn-gold {
  color: #2B2000; background: var(--grad-gold); background-size: 180% 100%;
  box-shadow: 0 10px 26px -10px rgba(224,165,15,.75), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 18px 38px -12px rgba(224,165,15,.85); }

.btn-outline {
  color: #fff; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.btn-outline::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff;
  transform: translateY(101%); transition: transform .42s var(--e-out);
}
.btn-outline:hover { color: var(--blue-deep); border-color: #fff; transform: translateY(-3px); }
.btn-outline:hover::before { transform: translateY(0); }

.btn-ink {
  color: #fff; background: var(--grad-night);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 26px -12px rgba(16,22,54,.8);
}
.btn-ink:hover { transform: translateY(-3px); }

/* ---------- 6. REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .85s var(--e-out), transform .85s var(--e-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.from-left  { transform: translateX(-34px); }
.reveal.from-right { transform: translateX(34px); }
.reveal.from-left.in, .reveal.from-right.in { transform: none; }
@media (max-width: 900px) {
  /* horizontal offset on an un-revealed block widens the page */
  .reveal.from-left, .reveal.from-right { transform: translateY(30px); }
}
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; } .d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; } .d6 { transition-delay: .48s; }

/* ---------- 7. TOP UTILITY BAR ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 1001;
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-inline: var(--pad-x);
  background: var(--grad-royal);
  color: rgba(255,255,255,.9);
  font-size: .76rem;
  transition: transform .45s var(--e-soft);
}
body.scrolled .topbar { transform: translateY(-100%); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); }
.topbar a { display: inline-flex; align-items: center; gap: 7px; padding-block: 6px; transition: color .25s; }
.topbar a:hover { color: var(--gold-light); }
.topbar svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar .sep { width: 1px; height: 16px; background: rgba(255,255,255,.24); }
@media (max-width: 720px) { .topbar .hide-sm { display: none; } }

/* ---------- 8. NAVIGATION ---------- */
.nav {
  position: fixed; inset: var(--top-h) 0 auto 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding-inline: var(--pad-x);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(22,25,43,.09);
  transition: top .45s var(--e-soft), height .35s var(--e-soft), box-shadow .35s var(--e-soft);
}
body.scrolled .nav { top: 0; height: 70px; box-shadow: 0 8px 30px -16px rgba(22,25,43,.35); }

.nav-brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.nav-logo { height: 46px; width: auto; transition: height .35s var(--e-soft); }
body.scrolled .nav-logo { height: 42px; }
.nav-wordmark { display: flex; flex-direction: column; gap: 1px; }
.nav-name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.1;
  letter-spacing: .01em; color: var(--maroon);
}
.nav-tag {
  font-size: .58rem; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--muted-2);
}
@media (max-width: 359px) { .nav-wordmark { display: none; } }

.nav-links { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.75rem); }
.nav-links a {
  position: relative; display: inline-block; padding: 7px 2px;
  font-size: .85rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-2); transition: color .25s var(--e-soft);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 1px; height: 2px; width: 100%;
  border-radius: 2px; background: var(--grad-gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--e-out);
}
.nav-links a:hover, .nav-links a.active { color: var(--maroon); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display: none; }
@media (min-width: 1080px) {
  .nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 26px; border-radius: 999px;
    font-size: .82rem; font-weight: 700; color: #2B2000;
    background: var(--grad-gold); background-size: 180% 100%;
    box-shadow: 0 8px 22px -10px rgba(224,165,15,.8);
    transition: transform .3s var(--e-out), background-position .5s var(--e-out), box-shadow .3s var(--e-out);
  }
  .nav-cta:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 14px 30px -12px rgba(224,165,15,.9); }
}

.hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px; border: 1px solid rgba(22,25,43,.14); background: var(--butter-2);
}
.hamburger span {
  display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--maroon);
  transition: transform .38s var(--e-out), opacity .22s var(--e-out), width .38s var(--e-out);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(16,22,54,.55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .38s var(--e-soft), visibility .38s;
}
.nav-scrim.show { opacity: 1; visibility: visible; }

@media (max-width: 1000px) {
  .hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: 0; z-index: 950;
    width: min(84vw, 340px); height: 100dvh;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.35rem; padding: 5rem 2.2rem;
    background: var(--grad-night);
    box-shadow: -24px 0 70px -30px rgba(0,0,0,.8);
    transform: translateX(102%); transition: transform .48s var(--e-out);
  }
  .nav-links.open { transform: none; }
  .nav-links li { width: 100%; opacity: 0; transform: translateX(20px); transition: opacity .42s var(--e-out), transform .42s var(--e-out); }
  .nav-links.open li { opacity: 1; transform: none; }
  .nav-links.open li:nth-child(1) { transition-delay: .09s; }
  .nav-links.open li:nth-child(2) { transition-delay: .14s; }
  .nav-links.open li:nth-child(3) { transition-delay: .19s; }
  .nav-links.open li:nth-child(4) { transition-delay: .24s; }
  .nav-links.open li:nth-child(5) { transition-delay: .29s; }
  .nav-links.open li:nth-child(6) { transition-delay: .34s; }
  .nav-links.open li:nth-child(7) { transition-delay: .39s; }
  .nav-links a {
    width: 100%; padding: 11px 0; font-size: 1rem; color: rgba(255,255,255,.88);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .nav-links a:hover, .nav-links a.active { color: var(--gold-light); }
  .nav-links a::after { display: none; }
}

/* A <picture> wrapper is a plain box with auto height, so `height:100%` on the
   inner <img> has no definite parent to resolve against and collapses to auto.
   Give the wrapper the container's box wherever the image must fill it. */
.hero-media picture,
.arch-img picture,
.medallion picture { position: absolute; inset: 0; display: block; }

/* ---------- 9. HERO ---------- */
/* Split layout: the copy and the deities each get their own column, so the
   headline never sits on top of the murtis. */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  padding-top: calc(var(--top-h) + var(--nav-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  background: var(--grad-night);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 12% 78%, rgba(142,27,46,.42), transparent 66%),
    radial-gradient(ellipse 55% 50% at 30% 12%, rgba(35,64,154,.34), transparent 70%);
}

.hero-copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline-end: clamp(1.5rem, 4vw, 3.5rem);
  padding-inline-start: max(var(--pad-x), calc((100vw - var(--maxw)) / 2));
}
.hero-inner { max-width: 34rem; }

.hero-visual { position: relative; overflow: hidden; z-index: 1; }
.hero-visual picture { position: absolute; inset: 0; display: block; }
.hero-visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  animation: kenburns 30s var(--e-soft) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.01); }
  to   { transform: scale(1.08); }
}
/* feather the seam into the copy panel */
.hero-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(16,22,54,.96) 0%, rgba(16,22,54,.55) 14%, rgba(16,22,54,.10) 34%, transparent 55%),
    linear-gradient(180deg, rgba(16,22,54,.30) 0%, transparent 22%, transparent 70%, rgba(16,22,54,.45) 100%);
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  padding: 8px 18px 8px 14px; margin-bottom: 1.4rem; border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(251,231,176,.32);
  font-size: .7rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-pale);
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(246,206,90,.25); animation: pulse 2.4s var(--e-soft) infinite;
}

.hero h1 {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.02em; color: #fff;
}
.hero h1 .gold {
  display: block;
  background: linear-gradient(96deg, var(--gold) 0%, var(--gold-light) 30%, #FFF0C4 52%, var(--gold-light) 72%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.78;
  color: rgba(255,255,255,.8); margin-top: 1.2rem; max-width: 44ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

.hero-card {
  position: absolute; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(5.5rem, 8vw, 6.5rem); z-index: 3;
  width: min(310px, 74%);
  display: flex; gap: 13px; align-items: center;
  padding: 13px; border-radius: var(--r-md);
  background: rgba(255,255,255,.97);
  box-shadow: var(--sh-lg);
  transition: transform .4s var(--e-out);
}
.hero-card:hover { transform: translateY(-4px); }
.hero-card img { width: 72px; height: 86px; object-fit: cover; border-radius: 11px; flex-shrink: 0; }
.hero-card-label { font-size: .58rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--maroon); }
.hero-card-name { font-family: var(--f-display); font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: var(--blue-deep); margin-top: 3px; }
.hero-card-date { font-size: .78rem; color: var(--muted); margin-top: 2px; }

.hero-scroll {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: flex; align-items: center; gap: 12px;
  font-size: .62rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.hero-scroll .track { width: 54px; height: 1.5px; position: relative; overflow: hidden; background: rgba(255,255,255,.22); }
.hero-scroll .track::after {
  content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 100%;
  background: var(--gold-light); animation: scrollDot 2.2s var(--e-soft) infinite;
}
@keyframes scrollDot {
  0%   { transform: translateX(-22px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateX(56px); opacity: 0; }
}

/* Entrance */
.hero-inner > * { opacity: 0; transform: translateY(22px); animation: heroIn 1s var(--e-out) forwards; }
.hero-inner .hero-eyebrow { animation-delay: .16s; }
.hero-inner h1            { animation-delay: .28s; }
.hero-inner .hero-sub     { animation-delay: .44s; }
.hero-inner .hero-ctas    { animation-delay: .58s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Stacked: deities on top at full width, copy beneath — nothing overlaps. */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  .hero-visual { order: -1; aspect-ratio: 1 / 1; max-height: 58svh; }
  .hero-visual img { object-position: 50% 20%; }
  .hero-visual::after {
    background: linear-gradient(180deg, rgba(16,22,54,.20) 0%, transparent 30%, transparent 62%, rgba(16,22,54,.92) 100%);
  }
  .hero-copy {
    padding-inline: var(--pad-x);
    padding-block: clamp(2rem, 7vw, 3rem) clamp(2.5rem, 8vw, 3.5rem);
  }
  .hero-inner { max-width: none; }
  .hero-card { width: min(300px, calc(100% - 2rem)); bottom: clamp(1rem, 3vw, 1.5rem); }
  .hero-scroll { display: none; }
}

/* ---------- 10. TICKER ---------- */
.ticker {
  position: relative; overflow: hidden;
  background: var(--grad-royal);
  padding: 14px 0;
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 110px); z-index: 2; pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--maroon-deep), transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--blue-deep), transparent); }
.ticker-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker-item {
  display: inline-flex; align-items: center; gap: 11px;
  padding-inline: clamp(1.3rem, 2.6vw, 2.3rem);
  font-size: .8rem; font-weight: 500; letter-spacing: .015em;
  color: rgba(255,255,255,.9); white-space: nowrap;
}
.ticker-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold-light); box-shadow: 0 0 0 3px rgba(246,206,90,.22);
  animation: pulse 2.4s var(--e-soft) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ---------- 11. SECTION RHYTHM ---------- */
#welcome   { background: var(--butter-2); }
#iskcon    { background: var(--butter); }
#purposes  { background: var(--butter-2); }
#programs  { background: var(--butter); }
#festivals { background: var(--butter-2); }
#gallery   { background: var(--butter); }
#seva      { background: var(--butter-2); }
#visit     { background: var(--butter); }

/* ---------- 12. WELCOME ---------- */
.welcome-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 5.5vw, 5rem); align-items: center;
}

.arch-frame { position: relative; }
.arch-frame::before {
  content: ""; position: absolute; inset: 20px -20px -20px 20px; z-index: 0;
  border: 2px solid var(--gold); border-radius: 999px 999px var(--r-md) var(--r-md);
  opacity: .55;
}
.arch-img {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: 999px 999px var(--r-md) var(--r-md);
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 5;
}
.arch-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--e-out); }
.arch-frame:hover .arch-img img { transform: scale(1.05); }
.arch-frame .corner {
  position: absolute; width: 24px; height: 24px; z-index: 2;
  border-color: var(--maroon); border-style: solid; border-width: 0;
}
.arch-frame .corner.bl { left: -20px; bottom: -20px; border-left-width: 3px; border-bottom-width: 3px; }
.arch-frame .corner.br { right: -20px; bottom: -20px; border-right-width: 3px; border-bottom-width: 3px; }

.welcome-copy .section-body + .section-body { margin-top: .85rem; }

.welcome-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 1.6vw, 1.1rem);
  margin-top: 2.2rem; padding: 1.6rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid rgba(22,25,43,.07);
  box-shadow: var(--sh-sm);
}
.stat { text-align: center; }
.stat-num {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 2.6rem); line-height: 1; color: var(--maroon);
}
.stat-lbl {
  margin-top: .45rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); line-height: 1.5;
}
.welcome-copy .btn { margin-top: 1.9rem; }

@media (max-width: 900px) {
  .welcome-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .arch-frame { max-width: min(420px, calc(100% - 48px)); margin-inline: auto; }
}

/* ---------- 13. ABOUT ISKCON ---------- */
.ai-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem); margin-top: 3rem;
}
.ai-card {
  position: relative; overflow: hidden;
  padding: clamp(1.7rem, 3vw, 2.3rem);
  border-radius: var(--r-md); background: var(--white);
  border: 1px solid rgba(22,25,43,.07);
  box-shadow: var(--sh-xs);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.ai-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--e-out);
}
.ai-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.ai-card:hover::before { transform: scaleX(1); }
.ai-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: 1.1rem; border-radius: 16px;
  color: #fff; background: var(--grad-blue);
  box-shadow: 0 10px 22px -10px rgba(35,64,154,.6);
}
.ai-icon svg { width: 26px; height: 26px; }
.ai-title {
  font-family: var(--f-display); font-weight: 700; font-size: 1.24rem;
  line-height: 1.28; color: var(--blue-deep); margin-bottom: .55rem;
}
.ai-text { font-size: 1rem; line-height: 1.78; color: var(--muted); }

/* ---------- 14. FOUNDER ---------- */
.founder {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grad-royal);
}
.founder::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 50% 65% at 14% 20%, rgba(224,165,15,.16), transparent 62%),
    radial-gradient(ellipse 55% 60% at 90% 88%, rgba(61,95,196,.28), transparent 66%);
}

.founder-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center;
}
.founder-medallion { text-align: center; }

.medallion {
  position: relative;
  width: min(100%, 310px); aspect-ratio: 1; margin-inline: auto;
  border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(246,206,90,.55);
  box-shadow: 0 0 0 10px rgba(255,255,255,.05), 0 30px 70px -26px rgba(0,0,0,.8);
}
.medallion img { width: 100%; height: 100%; object-fit: cover; }
.medallion::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 -60px 60px -50px rgba(0,0,0,.75);
}
.medallion-role {
  margin-top: 1.3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-light);
}
.founder-quote {
  position: relative;
  margin-top: 1.9rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.16);
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.06rem, 1.8vw, 1.24rem); line-height: 1.62;
  color: rgba(255,255,255,.86); max-width: 34ch; margin-inline: auto;
}
.founder-quote .q-mark {
  display: block; font-family: var(--f-display); font-size: 3rem;
  line-height: .4; color: rgba(246,206,90,.55); margin-bottom: .55rem;
}

.founder-text {
  font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 1.86;
  color: rgba(255,255,255,.80); margin-top: 1rem; max-width: 64ch;
}
.founder-text em { color: var(--gold-pale); font-style: italic; }

.timeline {
  margin-top: 2.2rem; padding-left: 1.4rem;
  border-left: 2px solid rgba(255,255,255,.16);
}
.tl-item {
  position: relative;
  display: grid; grid-template-columns: 62px 1fr; gap: 1.1rem; align-items: baseline;
  padding: .58rem 0;
}
.tl-item::before {
  content: ""; position: absolute; left: calc(-1.4rem - 5px); top: 1.2rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 0 4px rgba(246,206,90,.18);
}
.tl-year {
  font-family: var(--f-display); font-size: 1rem; font-weight: 700;
  color: var(--gold-light); letter-spacing: .02em;
}
.tl-text { font-size: .95rem; line-height: 1.66; color: rgba(255,255,255,.74); }
.tl-text em { color: var(--gold-pale); }

@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .medallion { width: min(70vw, 260px); }
}

/* ---------- 15. SEVEN PURPOSES ---------- */
.purpose-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem); margin-top: 3rem;
}
.purpose-card {
  position: relative; overflow: hidden;
  padding: clamp(1.6rem, 2.8vw, 2.1rem) clamp(1.6rem, 2.8vw, 2.1rem) clamp(1.6rem, 2.8vw, 2.1rem) clamp(2rem, 3.2vw, 2.6rem);
  border-radius: var(--r-md); background: var(--white);
  border: 1px solid rgba(22,25,43,.07);
  box-shadow: var(--sh-xs);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.purpose-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--grad-blue);
}
.purpose-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.purpose-num {
  display: block; margin-bottom: .6rem;
  font-family: var(--f-display); font-weight: 700; font-size: 2.1rem; line-height: 1;
  color: var(--gold); opacity: .95;
}
.purpose-text { font-size: 1rem; line-height: 1.78; color: var(--muted); }
@media (min-width: 1000px) { .purpose-card.wide { grid-column: span 3; } }

/* ---------- 16. PROGRAMS ---------- */
.feast-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--r-lg);
  background: var(--grad-night);
  box-shadow: var(--sh-lg);
  margin-top: 2.8rem;
}
.feast-media { position: relative; min-height: 340px; overflow: hidden; }
.feast-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s var(--e-out); }
.feast-card:hover .feast-media img { transform: scale(1.06); }
.feast-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(16,22,54,.05) 0%, rgba(16,22,54,.35) 60%, rgba(16,22,54,.95) 100%);
}
@media (max-width: 860px) {
  .feast-media::after { background: linear-gradient(180deg, rgba(16,22,54,.05) 0%, rgba(16,22,54,.45) 58%, rgba(16,22,54,.95) 100%); }
}
.feast-body {
  padding: clamp(1.9rem, 4vw, 3.2rem);
  display: flex; flex-direction: column; justify-content: center; gap: .9rem;
}
.feast-icon {
  width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center; color: #2B2000;
  background: var(--grad-gold);
  box-shadow: 0 12px 28px -12px rgba(224,165,15,.8);
}
.feast-icon svg { width: 28px; height: 28px; }
.feast-eyebrow {
  font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-light);
}
.feast-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.14; color: #fff;
}
.feast-desc { font-size: 1.02rem; line-height: 1.8; color: rgba(255,255,255,.78); }
.feast-badge {
  align-self: flex-start; margin-top: .4rem;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: #2B2000;
  background: var(--grad-gold);
  box-shadow: 0 10px 24px -12px rgba(224,165,15,.9);
}
.feast-badge svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .feast-card { grid-template-columns: 1fr; }
  .feast-media { min-height: 250px; }
}

.act-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.2rem, 2.6vw, 1.6rem);
}
.act-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border-radius: var(--r-md); background: var(--white);
  border: 1px solid rgba(22,25,43,.07);
  box-shadow: var(--sh-xs);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.act-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.act-icon {
  display: grid; place-items: center;
  width: 50px; height: 50px; margin-bottom: .4rem; border-radius: 14px;
  color: var(--maroon); background: rgba(142,27,46,.09);
  transition: transform .45s var(--e-out);
}
.act-card:hover .act-icon { transform: rotate(-6deg) scale(1.06); }
.act-icon svg { width: 24px; height: 24px; }
.act-title { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; line-height: 1.3; color: var(--blue-deep); }
.act-desc { font-size: .98rem; line-height: 1.74; color: var(--muted); flex: 1; }
.act-meta {
  margin-top: .35rem; padding-top: .75rem;
  border-top: 1px solid rgba(22,25,43,.09);
  font-size: .66rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-dark);
}

/* ---------- 17. MAHA-MANTRA ---------- */
.mantra-band {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center; background: var(--grad-night);
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
.mantra-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 85% at 50% 0%, rgba(142,27,46,.35), transparent 66%),
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(224,165,15,.14), transparent 70%);
}
.mantra-heading {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.16; color: #fff;
}
.mantra-heading span { color: var(--gold-light); }
.mantra-lines {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.4vw, 2.3rem); line-height: 1.75; letter-spacing: .01em;
  color: var(--gold-light);
  text-shadow: 0 2px 30px rgba(224,165,15,.3);
}
.mantra-note {
  font-size: clamp(1rem, 1.4vw, 1.08rem); line-height: 1.86;
  color: rgba(255,255,255,.74); max-width: 62ch; margin: 2rem auto 0;
}

/* ---------- 18. FESTIVALS ---------- */
.festivals-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.7rem); margin-top: 3rem;
}
.festival-card {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(390px, 50vw, 450px);
  display: flex; align-items: flex-end;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform .55s var(--e-out), box-shadow .55s var(--e-out);
}
.festival-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.festival-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--e-out);
}
.festival-card:hover img { transform: scale(1.08); }
.festival-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,22,54,.05) 0%, rgba(16,22,54,.30) 42%, rgba(16,22,54,.94) 100%);
  transition: background .55s var(--e-out);
}
.festival-card:hover::before {
  background: linear-gradient(180deg, rgba(16,22,54,.18) 0%, rgba(16,22,54,.46) 40%, rgba(16,22,54,.97) 100%);
}
.festival-content { padding: clamp(1.4rem, 2.8vw, 2rem); width: 100%; }
.festival-date {
  display: inline-flex; align-items: center;
  padding: 7px 15px; margin-bottom: .8rem; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #2B2000; background: var(--grad-gold);
  box-shadow: 0 6px 16px -8px rgba(224,165,15,.9);
}
.festival-name {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}
.festival-rule {
  display: block; height: 2px; width: 40px; margin: .8rem 0; border-radius: 2px;
  background: var(--gold-light);
  transition: width .55s var(--e-out);
}
.festival-card:hover .festival-rule { width: 70px; }
.festival-tagline { font-size: .96rem; line-height: 1.64; color: rgba(255,255,255,.84); }
@media (hover: hover) and (min-width: 861px) {
  .festival-tagline {
    opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px);
    transition: opacity .45s var(--e-out), max-height .55s var(--e-out), transform .45s var(--e-out);
  }
  .festival-card:hover .festival-tagline { opacity: 1; max-height: 130px; transform: none; }
}

/* ---------- 19. GALLERY ---------- */
/* Masonry via CSS columns: every photo keeps its own aspect ratio and is
   shown uncropped, and the columns pack with no leftover holes. */
.gallery-grid {
  column-count: 4;
  column-gap: clamp(.55rem, 1.2vw, .9rem);
  margin-top: 3rem;
}
.gallery-item {
  position: relative; display: block; width: 100%;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: clamp(.55rem, 1.2vw, .9rem);
  overflow: hidden; cursor: zoom-in;
  border-radius: var(--r-md); box-shadow: var(--sh-xs);
  transition: box-shadow .5s var(--e-out), transform .5s var(--e-out);
}
.gallery-item img { width: 100%; height: auto; display: block; transition: transform 1.1s var(--e-out); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(16,22,54,.6) 100%);
  opacity: 0; transition: opacity .45s var(--e-out);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item .zoom {
  position: absolute; z-index: 2; right: 13px; bottom: 13px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #2B2000;
  background: var(--grad-gold);
  opacity: 0; transform: scale(.6) rotate(-20deg);
  transition: opacity .4s var(--e-out), transform .4s var(--e-out);
}
.gallery-item .zoom svg { width: 17px; height: 17px; }
.gallery-item:hover .zoom { opacity: 1; transform: none; }
@media (max-width: 1100px) { .gallery-grid { column-count: 3; } }
@media (max-width: 760px)  { .gallery-grid { column-count: 2; } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10,13,32,.95); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--e-soft), visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%; max-height: 82vh; width: auto;
  border-radius: var(--r-md);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.95);
  transform: scale(.94); opacity: 0;
  transition: transform .45s var(--e-out), opacity .35s var(--e-out);
}
.lightbox.open img { transform: none; opacity: 1; }
.lb-btn {
  position: absolute; z-index: 2;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  transition: background .25s var(--e-out), color .25s var(--e-out), transform .25s var(--e-out);
}
.lb-btn:hover { background: var(--grad-gold); color: #2B2000; border-color: transparent; transform: scale(1.08); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-close { top: clamp(14px, 3vw, 30px); right: clamp(14px, 3vw, 30px); }
.lb-prev  { left: clamp(10px, 2.5vw, 30px);  top: 50%; margin-top: -25px; }
.lb-next  { right: clamp(10px, 2.5vw, 30px); top: 50%; margin-top: -25px; }
.lb-count {
  position: absolute; bottom: clamp(14px, 3vw, 30px); left: 50%; transform: translateX(-50%);
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.65);
}

/* ---------- 20. GITA VERSE ---------- */
.verse-band {
  position: relative; text-align: center; overflow: hidden;
  background: var(--butter-3);
  padding-block: clamp(3.2rem, 6.5vw, 5rem);
}
.verse-band::before, .verse-band::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: min(66%, 400px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.verse-band::before { top: 24px; }
.verse-band::after  { bottom: 24px; }
.verse-sanskrit {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem); line-height: 1.6; color: var(--maroon);
}
.verse-text {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.6vw, 1.75rem); line-height: 1.6;
  color: var(--blue-deep); max-width: 36ch; margin: 1.2rem auto 0;
  text-wrap: balance;
}
.verse-ref {
  margin-top: 1.2rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark);
}

/* ---------- 21. SEVA ---------- */
.seva-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem); margin-top: 3rem;
}
.seva-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  border-radius: var(--r-md); background: var(--white);
  border: 1px solid rgba(22,25,43,.07);
  box-shadow: var(--sh-xs);
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.seva-card::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--grad-blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--e-out);
}
.seva-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.seva-card:hover::before { transform: scaleX(1); }
.seva-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: .4rem; border-radius: 16px;
  color: #fff; background: var(--grad-blue);
  box-shadow: 0 10px 22px -10px rgba(35,64,154,.6);
}
.seva-icon svg { width: 25px; height: 25px; }
.seva-title { font-family: var(--f-display); font-weight: 700; font-size: 1.16rem; color: var(--blue-deep); }
.seva-desc { font-size: .99rem; line-height: 1.76; color: var(--muted); flex: 1; }
.seva-link {
  margin-top: .5rem; display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; color: var(--maroon);
}
.seva-link .arrow { transition: transform .3s var(--e-out); }
.seva-card:hover .seva-link .arrow { transform: translateX(5px); }

/* ---------- 22. VISIT ---------- */
.visit-grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 3rem; align-items: stretch;
}
.info-stack { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.4rem); }
.info-card {
  position: relative; overflow: hidden;
  display: flex; gap: 1.15rem; flex: 1;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border-radius: var(--r-md); background: var(--white);
  border: 1px solid rgba(22,25,43,.07);
  box-shadow: var(--sh-xs);
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out);
}
.info-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--grad-gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--e-out);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.info-card:hover::before { transform: scaleY(1); }
.info-icon {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center; color: #fff; background: var(--grad-blue);
  box-shadow: 0 10px 20px -10px rgba(35,64,154,.6);
}
.info-icon svg { width: 23px; height: 23px; }
.info-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--maroon); margin-bottom: .55rem;
}
.info-text { font-size: .97rem; line-height: 1.8; color: var(--muted); }
.info-text a { color: var(--blue); font-weight: 600; border-bottom: 1px solid rgba(35,64,154,.3); transition: color .25s, border-color .25s; }
.info-text a:hover { color: var(--maroon); border-color: var(--maroon); }
.info-text strong { color: var(--ink); font-weight: 700; }

.map-wrap {
  position: relative; overflow: hidden; min-height: 380px;
  border-radius: var(--r-md);
  border: 1px solid rgba(22,25,43,.09);
  box-shadow: var(--sh-sm);
  background: var(--butter-3);
}
.map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; padding: 1.5rem; color: var(--maroon);
}
.map-fallback svg { width: 42px; height: 42px; margin-bottom: .3rem; }
.map-fallback-name { font-family: var(--f-display); font-size: 1.25rem; font-weight: 700; color: var(--blue-deep); }
.map-fallback-addr { font-size: .9rem; color: var(--muted); }
.map-wrap iframe { z-index: 1; }
.map-cta { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 900px) {
  .visit-grid { grid-template-columns: 1fr; }
  .map-wrap { min-height: 330px; }
}

/* ---------- 23. FOOTER ---------- */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--grad-night);
  color: rgba(255,255,255,.68);
  padding: clamp(3.2rem, 6.5vw, 5rem) var(--pad-x) 0;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 65% 55% at 16% 0%, rgba(142,27,46,.28), transparent 62%);
}
.footer-top-rule { height: 3px; background: var(--grad-gold); }

.footer-grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.6vw, 3.2rem);
  padding-bottom: 2.6rem;
}
.footer-logo { height: 86px; width: auto; }
.footer-tagline { margin-top: 1rem; font-size: .97rem; line-height: 1.78; color: rgba(255,255,255,.66); max-width: 40ch; }
.footer-mantra {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--f-display); font-size: .95rem; line-height: 1.95;
  color: var(--gold-light);
}
.footer-heading {
  font-size: .74rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: #fff;
  margin-bottom: 1.05rem; padding-bottom: .65rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-links li + li { margin-top: .6rem; }
.footer-links a {
  position: relative; display: inline-block; padding-block: 4px; font-size: .93rem;
  color: rgba(255,255,255,.64);
  transition: color .28s var(--e-out), padding-left .28s var(--e-out);
}
.footer-links a::before {
  content: "\203A"; position: absolute; left: 0; opacity: 0;
  color: var(--gold-light); transition: opacity .28s var(--e-out);
}
.footer-links a:hover { color: var(--gold-light); padding-left: 14px; }
.footer-links a:hover::before { opacity: 1; }

.footer-bottom {
  max-width: var(--maxw); margin-inline: auto;
  padding: 1.6rem 0 1.9rem; text-align: center;
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-maha {
  font-family: var(--f-display); font-size: 1rem; font-weight: 700;
  letter-spacing: .08em; color: var(--gold-light); margin-bottom: .5rem;
}
.footer-copy { font-size: .8rem; color: rgba(255,255,255,.48); }
.footer-credit { margin-top: .5rem; font-size: .7rem; color: rgba(255,255,255,.34); }
.footer-credit a { border-bottom: 1px solid rgba(255,255,255,.2); }
.footer-credit a:hover { color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 24. FLOATING / MISC ---------- */
.wa-float {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 1200;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, #34C95A, #1EA34A);
  box-shadow: 0 12px 30px -8px rgba(30,163,74,.6);
  transition: transform .35s var(--e-out);
  animation: waPulse 3s var(--e-soft) infinite;
}
.wa-float:hover { transform: scale(1.1) rotate(-6deg); animation-play-state: paused; }
.wa-float svg { width: 29px; height: 29px; }
@keyframes waPulse {
  0%   { box-shadow: 0 12px 30px -8px rgba(30,163,74,.6), 0 0 0 0 rgba(52,201,90,.5); }
  70%  { box-shadow: 0 12px 30px -8px rgba(30,163,74,.6), 0 0 0 16px rgba(52,201,90,0); }
  100% { box-shadow: 0 12px 30px -8px rgba(30,163,74,.6), 0 0 0 0 rgba(52,201,90,0); }
}

.progress {
  position: fixed; top: 0; left: 0; z-index: 1500;
  height: 3px; width: 0%;
  background: var(--grad-gold);
  transition: width .12s linear;
}

/* ---------- 27. REFRESH — OCT 2026 ---------- */
/* Hero: a faint gold lotus mandala turning slowly behind the headline */
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: clamp(420px, 46vw, 660px); aspect-ratio: 1;
  left: clamp(-260px, -14vw, -120px); bottom: clamp(-300px, -18vw, -140px);
  background: url("../images/mandala.svg") center / contain no-repeat;
  opacity: .11;
  animation: mandalaSpin 140s linear infinite;
}
@keyframes mandalaSpin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .hero-copy::before { width: 420px; left: auto; right: -170px; bottom: -190px; opacity: .09; }
}

a.hero-card { color: inherit; text-decoration: none; }
.hero-card img { box-shadow: 0 6px 16px -8px rgba(22,25,43,.5); }
.hero-card-countdown {
  display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #2B2000; background: var(--grad-gold);
}
.hero-card-countdown:empty { display: none; }

/* Festivals: BBT paintings in a thin gold mount */
.festival-card { box-shadow: var(--sh-md); }
.festival-card picture { position: absolute; inset: 0; z-index: -2; display: block; }
.festival-card::after {
  content: ""; position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  border: 1px solid rgba(246,206,90,.42);
  border-radius: calc(var(--r-lg) - 8px);
  transition: inset .55s var(--e-out), border-color .55s var(--e-out);
}
.festival-card:hover::after { inset: 14px; border-color: rgba(246,206,90,.85); }
.festival-content { position: relative; z-index: 1; }

.festival-flag {
  position: absolute; top: 24px; left: 24px; z-index: 2;
  display: none; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(142,27,46,.92);
  box-shadow: 0 8px 22px -10px rgba(106,17,34,.9);
  backdrop-filter: blur(4px);
}
.festival-flag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-light); box-shadow: 0 0 0 3px rgba(246,206,90,.28);
  animation: pulse 2.4s var(--e-soft) infinite;
}
.festival-card.is-next .festival-flag { display: inline-flex; }
.festival-card.is-next { box-shadow: 0 0 0 2px var(--gold), var(--sh-lg); }
.festival-card.is-next .festival-tagline { opacity: 1; max-height: 130px; transform: none; }

.festival-countdown {
  display: block; margin-top: .85rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-light);
}
.festival-countdown:empty { display: none; }

.festival-credit {
  margin-top: 2.4rem; text-align: center;
  font-size: .78rem; color: var(--muted-2);
}
.festival-credit a { color: var(--maroon); border-bottom: 1px solid rgba(142,27,46,.25); }
.festival-credit a:hover { border-bottom-color: var(--maroon); }

/* Gallery: an even grid that ends flush. Six portraits span two rows and
   three landscapes span two columns; that assignment was checked to pack
   with no holes at 4, 3 and 2 columns — re-check it if photos change. */
.gallery-grid {
  column-count: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15.5vw, 215px);
  grid-auto-flow: dense;
  gap: clamp(.55rem, 1.2vw, .9rem);
}
.gallery-item { margin-bottom: 0; height: 100%; }
.gallery-item.g-tall { grid-row: span 2; }
.gallery-item.g-wide { grid-column: span 2; }
/* wide tiles show a thin band of a 4:3 photo — keep the band up on the faces */
.gallery-item.g-wide img { object-position: 50% 15%; }
.gallery-item.g-wide.pos-mid img { object-position: 50% 45%; }
.gallery-item picture { position: absolute; inset: 0; display: block; }
.gallery-item img { height: 100%; object-fit: cover; }
@media (max-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 22vw, 220px); }
}
@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 40vw, 200px); }
}

/* Welcome: on phones the centred arch had no width and collapsed to nothing */
@media (max-width: 900px) {
  .arch-frame { width: 100%; }
}

/* ---------- 25. MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-inner > * { opacity: 1 !important; transform: none !important; }
  .festival-tagline { opacity: 1 !important; max-height: none !important; transform: none !important; }
}

/* ---------- 26. PRINT ---------- */
@media print {
  .topbar, .nav, .hamburger, .wa-float, .hero-scroll, .ticker, .lightbox, .progress, .nav-scrim, .hero-card { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; padding: 2rem 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
}