/* ==========================================================================
   Content sections added between the Figma bands.
   Same tokens as the Figma design: Amita gradient headings, ॐ eyebrows,
   cream / dark backgrounds, gold plaque buttons, 20px cards, numbered lists.
   ========================================================================== */
:root {
  --brown: #4d2513;
  --deep: #6b2500;
  --orange: #e44400;
  --copper: #b46d47;
  --ink: #1c110c;
  --text: #202020;
  --muted: #7e7e7e;
  --link: #7b4d4e;
  --cream: #fbf9f4;
  --cream-2: #fffcf8;
  --card: #fffbf5;
  --card-2: #fff7f2;
  --line: #dfdfdf;
  --line-2: #e3cbbf;
  --dark: #231b18;
  --dark-2: #0e0b0a;
  --dark-3: #201816;
  --dark-line: #3f342f;
  --sand: #f4e6db;
  --f-head: 'Amita', 'Noto Sans Devanagari', serif;
  --f-body: 'Manrope', 'Noto Sans Devanagari', sans-serif;
  --f-label: 'Nacelle', 'Manrope', 'Noto Sans Devanagari', sans-serif;
  --f-eyebrow: 'Archivo', 'Noto Sans Devanagari', sans-serif;
}

.sec { position: relative; padding: 120px 0; background: var(--cream); color: var(--brown); font-family: var(--f-body); overflow: hidden; }
.sec.alt { background: var(--cream-2); }
.sec.parchment { background: var(--cream) url('assets/ee7297e63768-e38.jpg') center / cover no-repeat; }
.sec.dark { background: var(--dark); color: #fff; }
:where(.sec) :where(a) { color: inherit; text-decoration: none; }
:where(.sec) :where(p, h2, h3, h4, ul, ol) { margin: 0; padding: 0; }
:where(.sec) :where(ul, ol) { list-style: none; }
:where(.sec) :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wrap { position: relative; z-index: 1; width: 1400px; margin: 0 auto; }

/* decorative florals from the Figma file */
.decor { position: absolute; z-index: 0; width: 300px; opacity: .3; pointer-events: none; }
.decor.tr { top: 40px; right: 0; transform: rotate(180deg); }
.decor.bl { bottom: 40px; left: 0; }

/* section separator — the vertical-line strip used between Figma sections */
.strip { height: 85px; background: #fff repeating-linear-gradient(90deg, rgba(180, 109, 71, .12) 0 1px, transparent 1px 9.3px); border-top: 1px solid rgba(180, 109, 71, .14); border-bottom: 1px solid rgba(180, 109, 71, .14); }
.strip.dark { background-color: var(--dark); border-color: rgba(244, 230, 219, .08); }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 500 18px/27px var(--f-eyebrow); color: #6e4a3b; }
.eyebrow::before, .eyebrow::after { content: ''; width: 15px; height: 16px; background: url('assets/875b94b1ea.svg') center / contain no-repeat; }
.dark .eyebrow { color: var(--copper); }
.dark .eyebrow::before, .dark .eyebrow::after { filter: brightness(2.4) saturate(.6); }
.eyebrow.plain::before, .eyebrow.plain::after { display: none; }

.h2 { margin-top: 6px !important; font: 700 45px/60px var(--f-head); background: linear-gradient(90deg, #6b2500, #e44400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 4px 2px rgba(0, 0, 0, .06)); }
.dark .h2 { font-size: 40px; line-height: 50px; background: none; -webkit-text-fill-color: #fff; color: #fff; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .04)); }
.h3 { font: 700 24px/34px var(--f-label); color: var(--ink); }
.dark .h3 { color: #fff; }
.lead { font: 400 16px/21px var(--f-body); color: var(--brown); }
.lead.lg { font-size: 18px; line-height: 26px; }
.dark .lead { color: rgba(255, 252, 250, .7); font-size: 18px; line-height: 26px; }
.body { font: 400 16px/26px var(--f-body); color: var(--text); }
.dark .body { color: rgba(255, 255, 255, .72); }
.more-link { font: 700 18px/30px var(--f-label); color: var(--link); white-space: nowrap; transition: opacity .2s ease; }
.more-link:hover { opacity: .7; }
.dark .more-link { color: var(--copper); font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.verse { font: 700 24px/40px var(--f-head); color: var(--deep); }
.dark .verse { color: var(--sand); }

/* section head: [eyebrow + title] [lead] [link] like the Figma sections */
.sec-head { display: grid; grid-template-columns: 470px 1fr auto; column-gap: 40px; align-items: end; margin-bottom: 56px; }
.sec-head .lead { max-width: 460px; padding-bottom: 6px; }
.sec-head .more-link { padding-bottom: 2px; }
.sec-head.center { display: block; text-align: center; }
.sec-head.wide { grid-template-columns: 640px 1fr auto; }
.sec-head.center .lead { margin: 12px auto 0; }

/* gold plaque button from the Figma file */
.plaque { display: inline-flex; align-items: center; justify-content: center; min-width: 219px; height: 50px; padding: 0 40px; background: url('assets/d08aec36fbc8.png') center / 100% 100% no-repeat;
  font: 400 18px/1.2 var(--f-label); color: #0b0603 !important; text-align: center; white-space: nowrap; transition: transform .25s ease, filter .25s ease; }
.plaque:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- cards & lists ---------- */
.card { background: #fff; border-radius: 20px; }
.card-line { background: var(--card); border: 1px solid var(--line); border-radius: 20px; }
.dark .card-line { background: var(--dark-2); border-color: var(--copper); border-radius: 9px; }
.frame { padding: 15px; background: var(--card-2); border: 1px solid var(--line); border-radius: 20px; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.dark .frame { background: var(--dark-2); border-color: var(--copper); border-radius: 12px; }
.dark .frame img { border-radius: 9px; }

.num-list { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.num-list li { display: grid; grid-template-columns: 70px 1fr; align-items: center; min-height: 90px; padding: 14px 28px 14px 0; border-top: 1px solid var(--line); }
.num-list li:first-child { border-top: 0; }
.num-list .n { font: 700 22px/1 var(--f-head); color: #0b0603; text-align: center; }
.num-list b { display: block; font: 600 18px/28px var(--f-body); color: var(--brown); }
.num-list span { display: block; font: 400 16px/24px var(--f-body); color: var(--text); }
.dark .num-list { background: var(--dark); border-color: var(--dark-line); border-radius: 9px; }
.dark .num-list li { border-color: var(--dark-line); }
.dark .num-list .n { color: var(--sand); }
.dark .num-list b { color: #fff; }
.dark .num-list span { color: rgba(255, 255, 255, .62); }

.tag { display: inline-block; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 30px; background: #fff; font: 500 14px/18px var(--f-body); color: var(--brown); }
.dark .tag { background: transparent; border-color: var(--dark-line); color: var(--sand); }
.icon-dot { display: block; width: 50px; height: 50px; }

/* ---------- 01 · mandir ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 96px; }
.stats div { padding: 26px 10px; text-align: center; border-left: 1px solid var(--line-2); }
.stats div:first-child { border-left: 0; }
.stats b { display: block; font: 700 45px/56px var(--f-head); background: linear-gradient(90deg, #6b2500, #e44400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats span { font: 400 16px/22px var(--f-body); color: var(--brown); }
.notice { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -56px auto 96px; width: max-content; padding: 12px 26px; border: 1px dashed var(--copper); border-radius: 40px; background: var(--card); font: 500 16px/22px var(--f-body); color: var(--brown); }
.notice::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(228, 68, 0, .15); }
.about { display: grid; grid-template-columns: 640px 1fr; gap: 80px; align-items: center; }
.about .frame { height: 520px; }
.about .h2 { margin-bottom: 26px !important; }
.about .body + .body { margin-top: 16px; }
.about .btn-row { margin-top: 36px; }
.deities-title { margin: 96px 0 28px; text-align: center; }
.deities { display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px; }
.deity { text-align: center; }
.deity .ph { height: 236px; padding: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: 100px 100px 20px 20px; overflow: hidden; }
.deity img { width: 100%; height: 100%; object-fit: cover; border-radius: 92px 92px 14px 14px; transition: transform .5s ease; }
.deity:hover img { transform: scale(1.05); }
.deity b { display: block; margin-top: 14px; font: 700 20px/28px var(--f-label); color: var(--ink); }

/* ---------- 02 · live darshan ---------- */
.live { display: grid; grid-template-columns: 1fr 440px; gap: 32px; }
.live-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.live-tabs button { height: 46px; padding: 0 22px; border: 1px solid var(--dark-line) !important; border-radius: 9px; font: 400 16px var(--f-body) !important; color: #fff !important; transition: background .2s, border-color .2s; }
.live-tabs button.is-on { border-color: var(--copper) !important; background: rgba(205, 85, 21, .08) !important; }
.live-stage { position: relative; height: 560px; padding: 16px; background: var(--dark-2); border: 1px solid var(--copper); border-radius: 9px; }
.live-pane { position: absolute; inset: 16px; display: none; overflow: hidden; border-radius: 9px; background: var(--dark-3); }
.live-pane.is-on { display: block; }
.live-pane > img { width: 100%; height: 100%; object-fit: cover; }
.live-pane .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 10, .92), rgba(14, 11, 10, .1) 55%); }
.live-pane .cap { position: absolute; left: 32px; right: 32px; bottom: 28px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.live-pane .cap b { display: block; font: 700 28px/38px var(--f-label); color: #fff; }
.live-pane .cap span { font: 400 16px/24px var(--f-body); color: rgba(255, 255, 255, .7); }
.badge-live { position: absolute; top: 24px; left: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 30px; background: rgba(14, 11, 10, .7); font: 600 14px/1 var(--f-body); color: #fff; letter-spacing: .04em; }
.badge-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); } 50% { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); } }
.play { position: absolute; left: 50%; top: 45%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: rgba(255, 251, 245, .14); border: 1px solid rgba(244, 230, 219, .5); backdrop-filter: blur(6px); transition: transform .25s ease, background .25s ease; }
.play::after { content: ''; position: absolute; left: 38px; top: 30px; border-left: 24px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.play:hover { transform: scale(1.06); background: rgba(205, 85, 21, .45); }
.pano { width: 100%; height: 100%; background: #1d1715 url('assets/mandir-360.jpg') no-repeat; cursor: grab; touch-action: none; outline: none; }
.pano.dragging { cursor: grabbing; }
.pano-hint { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 30px; translate: -50% -50%; border-radius: 20px; background: rgba(14, 11, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; transition: opacity .5s ease; }
.pano-hint svg { animation: handSwipe 2.2s ease-in-out infinite; }
.pano-hint span { font: 600 16px/1.3 var(--f-body); color: #fff; }
.pano-hint.gone { opacity: 0; }
@keyframes handSwipe { 0%, 100% { translate: -22px 0; rotate: -8deg; } 25% { translate: 22px 0; rotate: 8deg; } 50% { translate: 0 -14px; rotate: 0deg; } 75% { translate: 0 10px; } }
.pano-zoom { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; }
.pano-zoom button { width: 42px; height: 42px; border-radius: 50%; background: rgba(14, 11, 10, .65) !important; border: 1px solid rgba(244, 230, 219, .35) !important; color: #fff !important; font: 400 22px/1 var(--f-body) !important; transition: background .2s; }
.pano-zoom button:hover { background: rgba(205, 85, 21, .7) !important; }
.ghost-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 1px solid var(--copper); border-radius: 9px; font: 500 16px var(--f-body); color: var(--sand); transition: background .2s; white-space: nowrap; }
.ghost-btn:hover { background: rgba(205, 85, 21, .15); }
.today { padding: 32px; background: var(--dark-2); border: 1px solid var(--copper); border-radius: 9px; }
.today-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.today-head b { font: 700 24px/34px var(--f-label); color: #fff; }
.status { padding: 6px 14px; border-radius: 30px; font: 600 14px/1 var(--f-body); background: rgba(52, 199, 89, .14); color: #6fdc8c; }
.status.closed { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); }
.today-next { margin-bottom: 20px; font: 400 15px/22px var(--f-body); color: rgba(255, 255, 255, .6); }
.today-next strong { color: var(--sand); font-weight: 600; }
.sched li { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--dark-line); font: 400 16px/22px var(--f-body); color: rgba(255, 255, 255, .78); }
.sched li b { font-weight: 600; color: #fff; white-space: nowrap; }
.sched li.is-now { color: var(--sand); }
.sched li.is-now b { color: var(--copper); }

/* ---------- deity sections (hanuman / durga / gauri shankar / navgraha) ---------- */
.deva { display: grid; grid-template-columns: 560px 1fr; gap: 80px; align-items: start; }
.deva.reverse { grid-template-columns: 1fr 560px; }
.deva.reverse .deva-media { order: 2; }
.deva-media { position: sticky; top: 40px; }
.deva-media .frame { height: 700px; }
.deva-media .verse { margin-top: 26px; text-align: center; }
.deva-copy .h2 { margin-bottom: 18px !important; }
.deva-copy .lead { max-width: 560px; margin-bottom: 18px; }
.deva-copy .more-link { display: inline-block; margin-bottom: 36px; }

/* ---------- 04 · hanuman chalisa ---------- */
.chalisa { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: start; }
.chalisa .frame { height: 560px; }
.chalisa-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.chalisa-stats div { padding: 18px 10px; text-align: center; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; }
.chalisa-stats b { display: block; font: 700 30px/40px var(--f-head); color: var(--deep); }
.chalisa-stats span { font: 400 14px/20px var(--f-body); color: var(--brown); }
.chalisa-tip { margin-top: 18px; font: 400 15px/22px var(--f-body); color: var(--brown); text-align: center; }
.scroll-text { position: relative; padding: 48px 56px 40px; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; }
.scroll-text::before { content: ''; position: absolute; left: 50%; top: -1px; width: 160px; height: 3px; margin-left: -80px; background: linear-gradient(90deg, transparent, var(--copper), transparent); }
.st-body { columns: 2; column-gap: 56px; }
.st-body.single { columns: 1; }
.st-body h4 { margin: 0 0 10px; font: 600 16px/24px var(--f-body); color: var(--copper); letter-spacing: .04em; text-align: center; column-span: all; }
.st-body h4:not(:first-child) { margin-top: 22px; }
.st-body p { break-inside: avoid; font: 400 20px/38px var(--f-head); color: var(--brown); }
.st-body .more { display: none; }
.scroll-text.open .st-body .more { display: block; }
.st-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.st-cite { font: 400 15px/22px var(--f-body); color: var(--muted); }
.st-more { display: inline-flex; align-items: center; gap: 8px; font: 700 18px/30px var(--f-label) !important; color: var(--link) !important; }
.st-more::after { content: '↓'; transition: transform .25s ease; }
.scroll-text.open .st-more::after { transform: rotate(180deg); }

/* ---------- 05 · sundar kand ---------- */
.sk { position: relative; }
.sk-slides { position: relative; height: 620px; }
.sk-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 520px 1fr; gap: 72px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.sk-slide.is-on { opacity: 1; visibility: visible; }
.sk-slide .frame { height: 620px; }
.sk-num { font: 700 120px/1 var(--f-head); color: rgba(180, 109, 71, .25); }
.sk-slide .eyebrow { margin-top: -12px; }
.sk-slide h3 { margin: 6px 0 20px; font: 700 40px/54px var(--f-head); color: #fff; }
.sk-slide .body { max-width: 720px; }
.sk-doha { margin-top: 30px; padding: 24px 30px; border-left: 3px solid var(--copper); background: rgba(205, 85, 21, .06); border-radius: 0 12px 12px 0; }
.sk-doha p { font: 700 22px/38px var(--f-head); color: var(--sand); }
.sk-doha span { display: block; margin-top: 8px; font: 400 16px/24px var(--f-body); color: rgba(255, 255, 255, .6); }
.sk-nav { display: flex; align-items: center; gap: 24px; margin-top: 44px; }
.sk-count { font: 400 16px/39px 'Neucha', var(--f-body); letter-spacing: .1em; color: rgba(255, 255, 255, .7); }
.sk-count b { color: #fff; font-weight: 400; }
.sk-bar { flex: 1; height: 1px; background: var(--dark-line); position: relative; }
.sk-bar i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--copper); transition: width .5s ease; }
.arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--dark-line) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 22px !important; color: #fff !important; transition: background .2s, border-color .2s; }
.arrow:hover { background: rgba(205, 85, 21, .2) !important; border-color: var(--copper) !important; }
.sk-close { margin-top: 80px; text-align: center; }
.sk-close .verse { font-size: 30px; line-height: 50px; }
.sk-close .lead { margin: 14px auto 18px; max-width: 760px; }

/* ---------- 09 · bhajan ---------- */
.bhajan { display: grid; grid-template-columns: 440px 1fr; gap: 48px; align-items: start; }
.bh-tabs { display: grid; gap: 14px; }
.bh-tabs button { display: grid; grid-template-columns: 56px 1fr; align-items: center; min-height: 96px; padding: 0 22px 0 6px; text-align: left; background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: 20px; transition: border-color .2s, box-shadow .2s; }
.bh-tabs button.is-on { border-color: var(--copper) !important; box-shadow: 0 10px 30px rgba(107, 37, 0, .08); }
.bh-tabs .n { font: 700 22px var(--f-head); color: #0b0603; text-align: center; }
.bh-tabs strong { display: block; font: 700 20px/28px var(--f-label); color: var(--ink); }
.bh-tabs small { font: 400 14px/20px var(--f-body); color: var(--brown); }
.bh-note { margin-top: 22px; }

/* ---------- 10 · satsang & events ---------- */
.satsang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ss-card { overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 20px; transition: transform .3s ease, box-shadow .3s ease; }
.ss-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(107, 37, 0, .08); }
.ss-card .ph { height: 260px; margin: 16px 16px 0; border-radius: 15px; overflow: hidden; }
.ss-card img { width: 100%; height: 100%; object-fit: cover; }
.ss-card .in { padding: 22px 28px 28px; }
.ss-when { font: 400 18px/30px var(--f-label); color: var(--muted); }
.ss-card .h3 { margin: 2px 0 6px; }
.ss-card .body { min-height: 52px; }
.ss-card .more-link { display: inline-block; margin-top: 14px; color: var(--deep); }
.events-head { display: flex; align-items: end; justify-content: space-between; margin: 100px 0 30px; }
.chips { display: flex; gap: 10px; }
.chips button { height: 42px; padding: 0 20px; border: 1px solid var(--line-2) !important; border-radius: 30px; background: #fff !important; font: 500 15px var(--f-body) !important; color: var(--brown) !important; transition: all .2s; }
.chips button.is-on { background: var(--deep) !important; border-color: var(--deep) !important; color: #fff !important; }
.events { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; }
.ev { display: grid; grid-template-columns: 90px 1fr; gap: 22px; align-items: center; padding: 18px 24px 18px 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.ev[hidden] { display: none; }
.ev-date { height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line-2); }
.ev-date b { font: 700 32px/1 var(--f-head); color: var(--deep); }
.ev-date span { margin-top: 4px; font: 600 14px/1 var(--f-body); color: var(--copper); }
.ev-type { font: 600 13px/18px var(--f-body); color: var(--copper); letter-spacing: .06em; }
.ev b.t { display: block; font: 700 19px/28px var(--f-label); color: var(--ink); }
.ev p { font: 400 15px/22px var(--f-body); color: var(--text); }
.events-note { margin-top: 26px; font: 400 15px/22px var(--f-body); color: var(--brown); }
.events-note a { color: var(--deep); font-weight: 600; text-decoration: underline; }
.diya-box { display: flex; align-items: center; gap: 24px; margin-top: 56px; padding: 26px 32px; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; }
.diya { position: relative; width: 70px; height: 70px; flex: none; border-radius: 50%; background: #faead0; }
.diya img { position: absolute; inset: 10px; width: 50px; }
.diya .flame { position: absolute; left: 50%; top: 2px; width: 14px; height: 22px; margin-left: -7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff4c2, #ffb22e 45%, #ff6a00 80%); opacity: 0; transform: scale(.4); transform-origin: 50% 100%; transition: opacity .4s, transform .4s; }
.diya.lit .flame { opacity: 1; transform: scale(1); animation: flicker 1.2s infinite alternate; }
@keyframes flicker { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.08, .94) rotate(3deg); } }
.diya-box .body { flex: 1; }
.diya-box strong { display: block; font: 700 22px/30px var(--f-label); color: var(--ink); }

/* ---------- 11 · poojas ---------- */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.mode { display: flex; gap: 18px; align-items: center; padding: 26px 28px; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; }
.mode b { display: block; font: 700 22px/30px var(--f-label); color: var(--ink); }
.mode span { font: 400 15px/22px var(--f-body); color: var(--brown); }
.pj { padding: 36px 40px 30px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.pj-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.pj-search { position: relative; width: 460px; }
.pj-search input { width: 100%; height: 52px; padding: 0 20px 0 50px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); font: 400 16px var(--f-body); color: var(--brown); outline: none; }
.pj-search input:focus { border-color: var(--copper); }
.pj-search::before { content: ''; position: absolute; left: 18px; top: 17px; width: 13px; height: 13px; border: 2px solid var(--copper); border-radius: 50%; }
.pj-search::after { content: ''; position: absolute; left: 32px; top: 31px; width: 7px; height: 2px; background: var(--copper); transform: rotate(45deg); }
.pj-legend { display: flex; gap: 28px; font: 600 14px var(--f-body); color: var(--copper); letter-spacing: .04em; }
.pj-list { columns: 2; column-gap: 48px; }
.pj-list li { display: grid; grid-template-columns: 1fr 80px 80px; align-items: center; gap: 8px; padding: 13px 4px; border-bottom: 1px solid #efe6df; break-inside: avoid; font: 400 16px/22px var(--f-body); color: var(--text); }
.pj-list li[hidden] { display: none; }
.pj-list li b { font: 600 16px var(--f-body); color: var(--brown); text-align: right; }
.pj-list li s { color: #c9b9ae; text-decoration: none; }
.pj-head { display: grid; grid-template-columns: 1fr 80px 80px; gap: 8px; padding: 0 4px 10px; font: 600 13px var(--f-body); color: var(--copper); letter-spacing: .05em; }
.pj-head span:not(:first-child) { text-align: right; }
.pj-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.pj-empty { padding: 20px 0; font: 400 16px var(--f-body); color: var(--muted); }
.pj-foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 26px; }
.pj-foot p { max-width: 820px; font: 400 15px/22px var(--f-body); color: var(--brown); }
.pj-foot a.tel { font-weight: 700; color: var(--deep); }

/* ---------- 17 · volunteer ---------- */
.jobs { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 24px; }
.job { display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; padding: 30px 32px; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; }
.job .ev-type { display: block; margin-bottom: 8px; }
.job .h3 + span { font: 400 16px/24px var(--f-body); color: var(--brown); }
.job.mail { background: url('assets/26c78a25b5a9.jpg') center 30% / cover; position: relative; overflow: hidden; color: #fff; border: 0; }
.job.mail::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 17, 12, .9), rgba(28, 17, 12, .35)); }
.job.mail > * { position: relative; }
.job.mail .h3 { color: #fff; }
.job.mail a { font: 700 20px var(--f-label); color: var(--sand); }

/* ---------- 13 · donate ---------- */
.give { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.give-card { display: flex; flex-direction: column; padding: 30px; background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 9px; transition: border-color .25s; }
.give-card:hover { border-color: var(--copper); }
.give-card .ev-type { margin-bottom: 10px; }
.give-card b { font: 700 26px/34px var(--f-label); color: #fff; }
.give-card p { flex: 1; margin: 10px 0 22px !important; font: 400 16px/24px var(--f-body); color: rgba(255, 255, 255, .65); }
.give-card .mono { font: 500 16px/24px var(--f-body); color: var(--sand); word-break: break-all; }
.tiers-wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 32px; margin-top: 32px; }
.tiers-box { padding: 32px; background: var(--dark-2); border: 1px solid var(--copper); border-radius: 9px; }
.tiers-box h3 { font: 700 30px/40px var(--f-head); color: #fff; }
.tiers-box > p { margin: 6px 0 22px !important; font: 400 16px/24px var(--f-body); color: rgba(255, 255, 255, .65); }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tiers div { padding: 18px 6px; text-align: center; border: 1px solid var(--dark-line); border-radius: 9px; }
.tiers div:nth-child(5) { border-color: var(--copper); background: rgba(205, 85, 21, .08); }
.tiers span { display: block; font: 400 14px var(--f-body); color: rgba(255, 255, 255, .6); }
.tiers b { display: block; margin-top: 6px; font: 700 22px var(--f-label); color: #fff; }
.give-notes li { padding: 20px 4px 20px 34px; border-bottom: 1px solid var(--dark-line); position: relative; font: 400 16px/24px var(--f-body); color: rgba(255, 255, 255, .7); }
.give-notes li::before { content: ''; position: absolute; left: 6px; top: 26px; width: 14px; height: 14px; background: url('assets/875b94b1ea.svg') center / contain no-repeat; filter: brightness(2.4) saturate(.6); }
.give-notes li b { color: var(--sand); font-weight: 600; }
.give-notes li a { color: var(--copper); text-decoration: underline; }
.give-legal { margin-top: 36px; padding: 22px 28px; border: 1px dashed rgba(180, 109, 71, .5); border-radius: 9px; font: 400 15px/24px var(--f-body); color: rgba(255, 255, 255, .62); }
.give-legal b { color: var(--sand); }
.dark .btn-row.c { justify-content: center; margin-top: 40px; }

/* ---------- 14 · team ---------- */
.pandits { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pandit { display: grid; grid-template-columns: 260px 1fr; gap: 32px; padding: 20px; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; }
.pandit .ph { position: relative; height: 340px; border-radius: 15px; overflow: hidden; }
.pandit .ph img { width: 100%; height: 100%; object-fit: cover; }
.pandit .yrs { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 251, 245, .92); text-align: center; }
.pandit .yrs b { display: block; font: 700 26px/1 var(--f-head); color: var(--deep); }
.pandit .yrs span { font: 500 13px var(--f-body); color: var(--brown); }
.pandit .in { padding: 16px 12px 12px 0; display: flex; flex-direction: column; }
.pandit .ev-type { margin-bottom: 4px; }
.pandit .body { margin: 10px 0 16px; }
.pandit .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pandit .more-link { margin-top: auto; color: var(--deep); }
.board { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; margin-top: 32px; }
.board-box { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.board-box h3 { margin-bottom: 4px; font: 700 28px/38px var(--f-head); color: var(--deep); }
.board-box > span { font: 400 15px var(--f-body); color: var(--muted); }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.person { text-align: center; padding: 20px 8px; border-radius: 16px; background: var(--card); border: 1px solid #f0e4da; }
.avatar { width: 64px; height: 64px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #6b2500, #e44400); font: 700 20px var(--f-body); color: #fff; }
.person b { display: block; font: 700 18px/24px var(--f-label); color: var(--ink); }
.person span { font: 400 14px/20px var(--f-body); color: var(--brown); }
.board-list li { padding: 14px 0; border-bottom: 1px solid #efe6df; }
.board-list li:last-child { border-bottom: 0; }
.board-list .ev-type { display: block; }
.board-list p { font: 500 17px/26px var(--f-body); color: var(--ink); }
.board-list a { color: var(--deep); font-weight: 600; text-decoration: underline; }

/* ---------- 15 · gurukul ---------- */
.gk { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.gk-card { padding: 40px; background: var(--dark); border-radius: 20px; color: #fff; position: relative; overflow: hidden; }
.gk-card::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 300px; height: 300px; background: url('assets/fc75eb9d3020.webp') center / contain no-repeat; opacity: .12; }
.gk-card .ev-type { color: var(--copper); }
.gk-card h3 { margin: 8px 0 8px; font: 700 34px/46px var(--f-head); color: #fff; }
.gk-card p { font: 400 17px/26px var(--f-body); color: rgba(255, 255, 255, .72); }
.gk-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.gk-price div { padding: 18px 10px; border: 1px solid var(--dark-line); border-radius: 12px; text-align: center; }
.gk-price b { display: block; font: 700 28px var(--f-label); color: var(--sand); }
.gk-price span { font: 400 14px var(--f-body); color: rgba(255, 255, 255, .6); }
.gk-card .mono { position: relative; z-index: 1; display: inline-flex; height: 48px; align-items: center; padding: 0 22px; border: 1px solid var(--copper); border-radius: 9px; color: var(--sand); font: 500 16px var(--f-body); }
.gk-card .mono:hover { background: rgba(205, 85, 21, .15); }
.teachers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.teacher { display: flex; align-items: center; gap: 16px; padding: 22px; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; }
.teacher b { display: block; font: 700 20px/28px var(--f-label); color: var(--ink); }
.teacher span { font: 400 15px var(--f-body); color: var(--brown); }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
.value { position: relative; height: 420px; border-radius: 20px; overflow: hidden; }
.value img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.value:hover img { transform: scale(1.05); }
.value::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 12, 8, .92), rgba(20, 12, 8, .1) 60%); }
.value .in { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 24px; color: #fff; }
.value .in i { font: 400 15px var(--f-body); color: var(--sand); font-style: normal; }
.value .in b { display: block; font: 700 32px/44px var(--f-head); }
.value .in p { font: 400 15px/22px var(--f-body); color: rgba(255, 255, 255, .78); }

/* ---------- 18 · visit ---------- */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.visit-photo { height: 340px; margin-bottom: 32px; }
.hours { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.hours h3, .rules h3, .faq h3 { margin-bottom: 14px; font: 700 28px/38px var(--f-head); color: var(--deep); }
.hours dl { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.hours dt, .hours dd { margin: 0; padding: 14px 0; border-bottom: 1px solid #efe6df; font: 400 17px/24px var(--f-body); }
.hours dt { color: var(--brown); }
.hours dd { color: var(--ink); font-weight: 600; text-align: right; }
.rules { margin-top: 32px; padding: 32px; background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; }
.rules li { padding: 10px 0 10px 30px; position: relative; font: 400 16px/24px var(--f-body); color: var(--text); }
.rules li::before { content: ''; position: absolute; left: 0; top: 14px; width: 15px; height: 16px; background: url('assets/875b94b1ea.svg') center / contain no-repeat; }
.faq { padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.faq details { border-bottom: 1px solid #efe6df; }
.faq details:last-of-type { border-bottom: 0; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font: 600 18px/26px var(--f-body); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--deep); font-size: 20px; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 20px 0; font: 400 16px/26px var(--f-body); color: var(--text); }
.faq details a { color: var(--deep); font-weight: 600; text-decoration: underline; }
.app { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding: 28px 32px; background: var(--dark); border-radius: 20px; color: #fff; }
.app p { font: 400 16px/24px var(--f-body); color: rgba(255, 255, 255, .72); }
.app p b { color: #fff; font: 700 22px/30px var(--f-label); display: block; }
.store { display: flex; gap: 12px; }
.store a { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border: 1px solid var(--dark-line); border-radius: 12px; font: 600 15px var(--f-body); color: #fff; white-space: nowrap; transition: border-color .2s; }
.store a:hover { border-color: var(--copper); }

/* ---------- closing & footer ---------- */
.closing { padding: 130px 0; text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(240, 160, 70, .22), transparent 70%), var(--cream-2); }
.closing .verse { font-size: 46px; line-height: 70px; background: linear-gradient(90deg, #6b2500, #e44400); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .06)); }
.closing .lead { margin: 18px auto 6px; max-width: 760px; font-size: 18px; line-height: 28px; }
.closing cite { display: block; margin-bottom: 36px; font: 400 16px var(--f-body); font-style: normal; color: var(--copper); }

.footer { padding: 90px 0 40px; background: var(--dark); color: rgba(255, 255, 255, .7); font-family: var(--f-body); }
.footer a { color: inherit; text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--sand); }
.f-top { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--dark-line); }
.f-brand img { width: 170px; display: block; margin-bottom: 18px; }
.f-brand b { display: block; font: 700 30px/40px var(--f-head); color: #fff; }
.f-brand span { font: 400 16px var(--f-body); color: var(--copper); }
.social { display: flex; gap: 10px; margin-top: 24px; }
.social a { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--dark-line); border-radius: 30px; font: 500 14px var(--f-body); }
.social a:hover { border-color: var(--copper); }
.footer h4 { margin: 0 0 18px; font: 600 15px var(--f-body); color: var(--copper); letter-spacing: .08em; }
.f-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding: 0; margin: 0; list-style: none; font: 400 16px/24px var(--f-body); }
.f-contact p, .f-time p { margin: 0 0 12px; font: 400 16px/24px var(--f-body); }
.f-time b { display: block; color: #fff; font-weight: 600; }
.f-bottom { padding-top: 28px; font: 400 14px/22px var(--f-body); color: rgba(255, 255, 255, .45); }
.f-bottom p { margin: 0 0 6px; }
.f-bottom .row { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 12px; color: rgba(255, 255, 255, .6); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.pandit .ph.art { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #6b2500, #e44400); }
.pandit .ph.art::before { content: ''; position: absolute; inset: 0; background: url('assets/fc75eb9d3020.webp') center / 140% no-repeat; opacity: .14; }
.pandit .ph.art > span { position: relative; font: 700 130px/1 var(--f-head); color: rgba(255, 251, 245, .92); }

/* YouTube players (load on click) */
.yt { position: relative; margin-top: 22px; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--dark); border: 1px solid var(--line-2); cursor: pointer; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.yt:hover img { transform: scale(1.04); }
.yt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 12, 8, .85), rgba(20, 12, 8, .05) 60%); pointer-events: none; }
.yt .play { z-index: 2; top: 42%; width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(228, 68, 0, .85); border: 0; }
.yt .play::after { left: 30px; top: 22px; border-left-width: 20px; border-top-width: 15px; border-bottom-width: 15px; }
.yt .play:hover { background: #e44400; }
.yt-cap { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 16px; pointer-events: none; }
.yt-cap b { display: block; font: 700 20px/28px var(--f-label); color: #fff; }
.yt-cap span { font: 400 14px/20px var(--f-body); color: rgba(255, 255, 255, .75); }
.yt iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.yt.playing::after, .yt.playing .yt-cap, .yt.playing .play { display: none; }
.bhajan .yt { margin-top: 24px; }

/* ==========================================================================
   Language toggle (हिंदी / EN)
   ========================================================================== */
.lang-toggle { position: fixed; z-index: 100; top: 16px; right: 18px; display: flex; padding: 4px; border-radius: 40px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(180, 109, 71, .35); box-shadow: 0 8px 24px rgba(107, 37, 0, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lang-toggle button { min-width: 56px; height: 34px; padding: 0 14px; border: 0; border-radius: 30px; background: transparent; font: 600 14px/1 'Manrope', 'Noto Sans Devanagari', sans-serif; color: #4d2513; cursor: pointer; transition: background .25s, color .25s; }
.lang-toggle button.is-on { background: linear-gradient(90deg, #6b2500, #e44400); color: #fff; }
html[lang="en"] .st-body p { font-family: 'Manrope', sans-serif; font-weight: 500; font-style: italic; font-size: 18px; }

/* ==========================================================================
   Animations
   ========================================================================== */
/* hero entrance */
@keyframes heroIn { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes navIn { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }
@keyframes kenburns { from { scale: 1; } to { scale: 1.07; } }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(228, 68, 0, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(228, 68, 0, .45)); } }
@keyframes drift { from { translate: -36px 0; } to { translate: 36px 0; } }
@keyframes shine { from { left: -60%; } to { left: 130%; } }
#n918-2093 { animation: kenburns 22s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.hero-anim { opacity: 0; animation: heroIn .9s cubic-bezier(.22, .61, .36, 1) forwards; }
.nav-anim { opacity: 0; animation: navIn .7s ease forwards; }
#n918-2138 { animation: glow 3s ease-in-out infinite; }
#n949-13638 { animation: floaty 5s ease-in-out infinite; }               /* dove */
#n949-13966 { animation: floaty 7s ease-in-out infinite; }               /* Shri Ram with the saffron cloth */

/* scroll reveal inside the Figma bands (uses `translate`, so rotated layers keep their transform) */
.fx { opacity: 0; translate: 0 34px; transition: opacity .9s ease, translate .9s cubic-bezier(.22, .61, .36, 1); }
.fx.fx-in { opacity: 1; translate: 0 0; }

/* AOS-style directional reveals on the home page (individual translate/scale, so hover transforms keep working) */
[data-aos] { opacity: 0; transition: opacity .9s ease, translate 1s cubic-bezier(.22, .61, .36, 1), scale 1s cubic-bezier(.22, .61, .36, 1); }
[data-aos="fade-up"] { translate: 0 80px; }
[data-aos="fade-down"] { translate: 0 -80px; }
[data-aos="fade-right"] { translate: -140px 0; }
[data-aos="fade-left"] { translate: 140px 0; }
[data-aos="zoom-in"] { scale: .82; }
[data-aos].aos-animate { opacity: 1; translate: 0 0; scale: 1; }

/* hover life on Figma cards and photos */
.band .slide > div:first-child { transition: box-shadow .35s ease; }
.band .slide:hover > div:first-child { box-shadow: 0 18px 40px rgba(107, 37, 0, .12); }
.band .slide { transition: left .6s cubic-bezier(.22, .61, .36, 1), translate .35s ease; }
.band .slide:hover { translate: 0 -6px; }
#n949-14370, #n949-14371, #n949-14372, #n949-14382, #n949-14383, #n949-14384, #n949-15448, #n949-15518 { transition: scale .6s ease, filter .6s ease; }
#n949-14370:hover, #n949-14371:hover, #n949-14372:hover, #n949-14382:hover, #n949-14383:hover, #n949-14384:hover, #n949-15448:hover, #n949-15518:hover { scale: 1.025; filter: brightness(1.06); }
.carousel-arrow:hover { scale: 1.08; }

/* shine sweep on the gold plaque buttons */
.btn, .plaque { overflow: hidden; }
.plaque { position: relative; }
.btn::after, .plaque::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-20deg); pointer-events: none; }
.btn:hover::after, .plaque:hover::after { animation: shine .8s ease; }

/* new sections */
.reveal.in .deity, .reveal.in .ss-card, .reveal.in .give-card, .reveal.in .value, .reveal.in .ev, .reveal.in .mode, .reveal.in .job, .reveal.in .person, .reveal.in .teacher { animation: heroIn .8s cubic-bezier(.22, .61, .36, 1) both; }
.reveal.in > :nth-child(2) { animation-delay: .08s; } .reveal.in > :nth-child(3) { animation-delay: .16s; } .reveal.in > :nth-child(4) { animation-delay: .24s; }
.reveal.in > :nth-child(5) { animation-delay: .32s; } .reveal.in > :nth-child(6) { animation-delay: .4s; } .reveal.in > :nth-child(7) { animation-delay: .48s; }
.frame img, .ss-card img, .deva-media img { transition: transform .8s ease; }
.frame:hover img, .ss-card:hover img { transform: scale(1.04); }
.frame { overflow: hidden; }
.stats b { display: block; }
.reveal.in .stats b, .stats.in b { animation: heroIn .9s ease both; }
.sk-slide.is-on .frame { animation: heroIn .8s ease both; }
.sk-slide.is-on h3, .sk-slide.is-on .body, .sk-slide.is-on .sk-doha { animation: heroIn .8s ease both; animation-delay: .15s; }
.num-list li { transition: background .25s ease, padding-left .25s ease; }
.num-list li:hover { background: rgba(228, 68, 0, .04); padding-left: 6px; }
.dark .num-list li:hover { background: rgba(244, 230, 219, .04); }
.closing .verse { animation: floaty 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx, .hero-anim, .nav-anim, [data-aos] { opacity: 1 !important; translate: none !important; scale: none !important; }
}

/* English mode: Figma text boxes were sized for Hindi */
html[lang="en"] .band .t { text-transform: none !important; }
html[lang="en"] .band .t > span { font-size: .92em; }
html[lang="en"] .band img[src$="875b94b1ea.svg"], html[lang="en"] .band img[src$="46976f651e.svg"] { display: none; }

/* 9ef2c461725d.webp is a transparent temple cut-out: show it whole on a warm sky instead of cropping */
#n949-14371 { background: url('assets/9ef2c461725d.webp') center 70% / contain no-repeat, linear-gradient(180deg, #f8c98a 0%, #fbe3c0 55%, #f6d2a3 100%) !important; }
#n949-15850, #n949-15864 { background: linear-gradient(to top, rgba(20, 12, 8, .85) 0%, rgba(20, 12, 8, .25) 45%, rgba(20, 12, 8, 0) 70%), url('assets/9ef2c461725d.webp') center 40% / auto 88% no-repeat, radial-gradient(ellipse at 50% 60%, #6b3a1c, #231b18 75%) !important; }
/* Shri Ram cut-out (portrait, transparent) on a warm sunrise glow */
.about .frame.about-photo { height: 640px; }
.about .frame.about-photo img { object-fit: contain; object-position: 50% 100%; padding: 28px 30px 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, #fff3dc 0%, #fbd9a6 45%, #f2b26a 100%); }
.about .frame.about-photo:hover img { transform: scale(1.03); transform-origin: 50% 100%; }