/* ========================================
   AIHAR VILLAGE — style.css (Enhanced)
   Rich Indian Temple Theme · Gradient Edition
   ======================================== */

/* Fonts are loaded with <link rel="stylesheet"> in the page <head>.
   A CSS @import here would request them a second time and block
   rendering until the imported sheet arrives — so it is deliberately
   not used.

   Both pages must request exactly this set:

     Yatra+One
     Tiro+Devanagari+Sanskrit          (roman only — no italic is used)
     Hind:wght@400;500;600;700
     Vesper+Libre:wght@400;700;900

   Every weight listed is actually used, and every weight used is listed.
   Getting this wrong is silent: the browser synthesises the missing face
   instead of failing, so text just looks subtly wrong — index.html was
   asking for Hind 300/400/500/600 while the CSS used 700 nineteen times,
   which faux-bolded the whole home page. Hind has no weight above 700,
   so never set font-weight past that on a --font-body element. */

/* ── CSS Variables ── */
:root {
  --saffron:        #E8520A;
  --saffron-light:  #FF7A2F;
  --saffron-glow:   #FFA05C;
  --gold:           #C9941A;
  --gold-light:     #FFD45F;
  --gold-bright:    #FFE896;
  --maroon:         #7B1515;
  --deep-maroon:    #3D0000;
  --midnight:       #1A0000;
  --turmeric:       #E6AA1A;
  --cream:          #FEF5E4;
  --warm-white:     #FDF9F0;
  --amber-light:    #FFF4D9;
  --stone:          #8C6239;
  --temple-dark:    #2C1204;
  --border-gold:    #B8870C;
  --text-dark:      #1E0A00;
  --text-medium:    #5C2E00;
  --text-light:     #8C5A2A;
  --lotus-pink:     #E8536A;
  --peacock:        #1A7B6E;
  --peacock-light:  #26A99A;

  /* ── Gradient tokens ── */
  --grad-fire:    linear-gradient(135deg, #E8520A, #C9941A, #FFD45F);
  --grad-temple:  linear-gradient(160deg, #1A0000 0%, #4A0808 30%, #5C0E0E 55%, #4A0808 80%, #1A0000 100%);
  --grad-warm:    linear-gradient(145deg, #FDF9F0 0%, #FFF4D9 50%, #FEF0D4 100%);
  --grad-amber:   linear-gradient(135deg, #FEF5E4 0%, #FFF8E8 50%, #FFF3D5 100%);
  --grad-border:  linear-gradient(90deg, transparent, var(--gold), var(--saffron), var(--gold), transparent);
  --grad-dawn:    linear-gradient(160deg, #FFE896 0%, #FFD45F 35%, #FFA05C 70%, #FFD45F 100%);
  --grad-ember:   linear-gradient(135deg, #E8520A 0%, #C03800 50%, #7B1515 100%);

  /* ── Button fills ──
     Two families, used everywhere so the buttons read as one system:
     saffron for the primary action, marigold gold for the schemes
     action. Each has a hover variant that gets BRIGHTER while keeping
     the same text colour legible — the old hover faded to yellow under
     gold text, which washed the label out just as you reached for it. */
  /* Deep saffron → sindoor red. The light end is held at #C93E08 rather
     than a brighter orange so the cream label clears 4.5:1 across the
     WHOLE gradient, not just its middle — verified corner by corner. */
  --btn-saffron:       linear-gradient(135deg, #C93E08 0%, #B02506 48%, #7E0F07 100%);
  --btn-saffron-hover: linear-gradient(135deg, #CE420A 0%, #C42E06 48%, #8E1208 100%);
  --btn-gold:          linear-gradient(135deg, #FFE6A0 0%, #F5C02E 48%, #D89E12 100%);
  --btn-gold-hover:    linear-gradient(135deg, #FFF2CE 0%, #FFD558 48%, #EBAD18 100%);
  --btn-ink-light:     #FFF6E4;   /* text on saffron */
  --btn-ink-dark:      #2B0A00;   /* text on gold   */

  --font-heading:    'Yatra One', serif;
  --font-devanagari: 'Tiro Devanagari Sanskrit', serif;
  --font-body:       'Hind', sans-serif;
  --font-accent:     'Vesper Libre', serif;

  --shadow-temple:  0 8px 40px rgba(26,0,0,0.35);
  --shadow-gold:    0 6px 28px rgba(201,148,26,0.4);
  --shadow-warm:    0 4px 20px rgba(61,0,0,0.08);
  --transition:     all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Cultural motifs, drawn once here and reused as backgrounds ──

     --toran-svg   Toran / bandanwar: the mango-leaf and marigold string
                   hung across a doorway at festivals. One 48 px tile =
                   one marigold + one leaf, tiled along an X axis.
     --jhalar-svg  The scalloped valance that hangs from a temple eave,
                   with a drop bead in each arch.
     --lotus-svg   An eight-petal lotus rosette, used on dividers. */
  --toran-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='46' viewBox='0 0 48 46'%3E%3Cpath d='M0 3h48' stroke='%237B1515' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M12 4v9' stroke='%23B8870C' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='19' r='6.4' fill='%23E8520A'/%3E%3Ccircle cx='12' cy='19' r='3.4' fill='%23E6AA1A'/%3E%3Ccircle cx='12' cy='19' r='1.3' fill='%23FFE896'/%3E%3Cpath d='M36 4v6' stroke='%23B8870C' stroke-width='1.3'/%3E%3Cpath d='M36 9c-6 9-6 22 0 31 6-9 6-22 0-31z' fill='%231A7B6E'/%3E%3Cpath d='M36 11v27' stroke='%230E4F46' stroke-width='0.9'/%3E%3C/svg%3E");
  --jhalar-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20'%3E%3Cpath d='M0 0h28v3H0z' fill='%23E8520A'/%3E%3Cpath d='M0 3h28c0 7-6.3 11-14 11S0 10 0 3z' fill='%23C9941A'/%3E%3Ccircle cx='14' cy='16.4' r='2.1' fill='%23E8520A'/%3E%3C/svg%3E");
  --lotus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23C9941A' fill-opacity='.9'%3E%3Cellipse cx='12' cy='6' rx='2.1' ry='5'/%3E%3Cellipse cx='12' cy='18' rx='2.1' ry='5'/%3E%3Cellipse cx='6' cy='12' rx='5' ry='2.1'/%3E%3Cellipse cx='18' cy='12' rx='5' ry='2.1'/%3E%3C/g%3E%3Cg fill='%23E8520A' fill-opacity='.72' transform='rotate(45 12 12)'%3E%3Cellipse cx='12' cy='6.6' rx='1.7' ry='4.2'/%3E%3Cellipse cx='12' cy='17.4' rx='1.7' ry='4.2'/%3E%3Cellipse cx='6.6' cy='12' rx='4.2' ry='1.7'/%3E%3Cellipse cx='17.4' cy='12' rx='4.2' ry='1.7'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23FFD45F'/%3E%3Ccircle cx='12' cy='12' r='1.05' fill='%237B1515'/%3E%3C/svg%3E");
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* ── MOBILE FIX: must be on html AND body to fully prevent
     horizontal scroll on iOS Safari / Android Chrome ── */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background-color: var(--cream);
  color: var(--text-dark);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
  /* Belt-and-braces: stop body expanding past viewport */
  max-width: 100vw;
}

img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--midnight); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--saffron), var(--gold));
  border-radius: 4px;
}

/* ==============================
   DECORATIVE PATTERNS & MOTIFS
   ============================== */

.mandala-bg {
  background-image:
    radial-gradient(ellipse at 15% 50%, rgba(232,82,10,0.05) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 50%, rgba(201,148,26,0.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(201,148,26,0.04) 41%, transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(201,148,26,0.03) 56%, transparent 57%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='2' fill='rgba(201,148,26,0.12)'/%3E%3Ccircle cx='40' cy='40' r='18' stroke='rgba(201,148,26,0.06)' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='40' cy='40' r='30' stroke='rgba(201,148,26,0.04)' stroke-width='0.5' fill='none'/%3E%3Cpath d='M40 10 L42 38 L40 70 L38 38 Z' fill='rgba(201,148,26,0.05)'/%3E%3Cpath d='M10 40 L38 42 L70 40 L38 38 Z' fill='rgba(201,148,26,0.05)'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, auto, 80px 80px;
}

.ornament-border { position: relative; }
.ornament-border::before,
.ornament-border::after {
  content: '';
  display: block;
  height: 4px;
  background: var(--grad-border);
}
.ornament-border::before { margin-bottom: 2px; }
.ornament-border::after  { margin-top: 2px; }

.lotus-divider {
  text-align: center;
  margin: 2rem 0;
  letter-spacing: 0.8em;
  font-size: 1.4rem;
  color: var(--gold);
  opacity: 0.8;
  user-select: none;
}

/* ── Toran / bandanwar — the festive doorway garland ──
   Hung across the top of the hero and the footer, the way a real one is
   strung across a threshold. Purely decorative, so it never takes
   pointer events and is always aria-hidden in the markup. */
.toran {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 46px;
  background-image: var(--toran-svg);
  background-size: 48px 46px;
  background-repeat: repeat-x;
  background-position: center top;
  pointer-events: none;
  user-select: none;
  z-index: 3;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35));
}
/* The two page headers begin at y=0, underneath the fixed navbar, so the
   garland has to hang below the bar to be seen at all. */
#hero .toran,
.page-hero .toran { top: 64px; }

/* Gentle sway, as if in the breeze */
.toran { animation: toran-sway 7s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes toran-sway {
  0%, 100% { transform: rotate(-0.25deg); }
  50%      { transform: rotate(0.25deg); }
}

/* ── Jhalar — the scalloped valance under a temple eave ──
   Replaces the flat gradient rule that used to cap the light sections. */
.jhalar-top { position: relative; }
.jhalar-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20px;
  background-image: var(--jhalar-svg);
  background-size: 28px 20px;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(61,0,0,0.18));
}

/* ── Lotus rosette rule — a divider with a real flower, not a glyph ── */
.lotus-rule {
  display: flex; align-items: center; justify-content: center;
  gap: 0.85rem;
  margin: 1.5rem 0;
  user-select: none;
}
.lotus-rule::before,
.lotus-rule::after {
  content: '';
  flex: 0 1 110px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.lotus-rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.lotus-rule i {
  display: block;
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--lotus-svg) center/contain no-repeat;
  filter: drop-shadow(0 1px 3px rgba(232,82,10,0.3));
}
/* The middle flower leads; the outer two sit slightly back */
.lotus-rule i:nth-child(2) { width: 32px; height: 32px; }
.lotus-rule i:nth-child(1),
.lotus-rule i:nth-child(3) { opacity: 0.72; }
.lotus-rule.on-dark::before { background: linear-gradient(90deg, transparent, rgba(255,212,95,0.6)); }
.lotus-rule.on-dark::after  { background: linear-gradient(90deg, rgba(255,212,95,0.6), transparent); }
/* Left-aligned variant for the column layouts */
.lotus-rule.left { justify-content: flex-start; }
.lotus-rule.left::before { display: none; }
.lotus-rule.left::after { flex: 0 1 90px; }

/* ── Gradient heading underline ── */
.heading-underline {
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}
.heading-underline::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--saffron), var(--gold-light), var(--saffron), transparent);
  border-radius: 2px;
}

/* ── Gradient text utility ── */
.grad-text {
  background: var(--grad-dawn);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==============================
   NAVIGATION
   ============================== */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 2rem;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(26,0,0,0.92) 0%, rgba(44,4,0,0.85) 100%);
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgba(201,148,26,0.2);
  transition: var(--transition);
}
/* Gradient glow accent at bottom of nav */
#navbar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,82,10,0.7), rgba(255,212,95,0.9), rgba(232,82,10,0.7), transparent);
  opacity: 0.5;
  border-radius: 1px;
}
#navbar.scrolled {
  background: linear-gradient(180deg, rgba(26,0,0,0.99) 0%, rgba(44,4,0,0.98) 100%);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 1px 0 rgba(201,148,26,0.2);
}
#navbar.scrolled::after { opacity: 0.8; }

.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}
.nav-brand > span:last-child {
  background: linear-gradient(135deg, var(--gold-light), var(--gold-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-brand .om-symbol {
  font-size: 1.8rem;
  color: var(--saffron-light);
  text-shadow: 0 0 10px rgba(232,82,10,0.65), 0 0 24px rgba(232,82,10,0.3);
  animation: om-glow 3s ease-in-out infinite;
}
@keyframes om-glow {
  0%, 100% {
    color: var(--saffron-light);
    text-shadow: 0 0 8px rgba(232,82,10,0.55), 0 0 18px rgba(232,82,10,0.2);
  }
  50% {
    color: var(--gold-light);
    text-shadow: 0 0 18px rgba(255,180,40,0.9), 0 0 36px rgba(232,82,10,0.55), 0 0 60px rgba(201,148,26,0.25);
  }
}

.nav-links {
  display: flex; align-items: center; gap: 2rem;
  list-style: none;
  /* Keep clear of the brand mark on the left */
  margin-left: 2.5rem;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,212,95,0.85);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  transition: var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--saffron-light), var(--gold-light));
  transition: width 0.3s ease;
  border-radius: 1px;
}
.nav-links a:hover { color: var(--gold-bright); }
.nav-links a:hover::after { width: 100%; }

.nav-toggle {
  display: none;
  background: none; border: none;
  cursor: pointer; flex-direction: column; gap: 5px;
  /* The three bars are only 16 px tall together — far too small to tap.
     Pad out to a comfortable 44 px square without moving the bars. */
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  margin-right: -8px;   /* keep the visual edge where it was */
}
.nav-toggle span {
  display: block; width: 25px; height: 2px;
  background: linear-gradient(90deg, var(--saffron-light), var(--gold-light));
  transition: var(--transition);
  border-radius: 1px;
}

/* ── Hamburger → X animation ──
   The bars sit at y = 0, 7 and 14 (2 px tall, 5 px gap), so the outer two
   must travel 7 px to meet in the middle before rotating. */
.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Active nav link ── */
.nav-links a.active {
  color: var(--gold-bright);
}
.nav-links a.active::after {
  width: 100%;
}

/* ── Touch action: faster tap response on buttons & links ── */
a, button, .info-card, .hist-card, .gallery-item {
  touch-action: manipulation;
}

/* ══════════════════════════════════════════════
   TOUCH & SAFE AREAS
   This site is used mainly on phones, so the defaults that only ever
   bite on touch devices are handled here rather than left to chance.
   ══════════════════════════════════════════════ */

/* The grey flash Android paints over every tap fights the warm palette;
   each interactive element already has its own :active / :hover state. */
a, button, [role="button"], .scheme-card, .gallery-item {
  -webkit-tap-highlight-color: rgba(232,82,10,0.18);
}

/* Stop a scroll that reaches the end of the page from chaining into the
   browser's pull-to-refresh mid-read.

   `html` ONLY — never add `body` here. `body` sets `overflow-x: hidden`
   above, which makes its `overflow-y` compute to `auto`, so body is
   itself a scroll container. Its content always fits, so it can never
   scroll, and `contain` then stops the wheel from chaining up to the
   document: the page becomes completely unscrollable by mouse wheel
   while `window.scrollTo()` still works, which makes it look fine to
   any scripted test. */
html { overscroll-behavior-y: contain; }


/* ==============================
   HERO SECTION
   ============================== */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--midnight);
  /* ── Reserved space, top and bottom ──
     The hero was centred edge-to-edge with no padding, so on a laptop-
     height window the tagline landed inside the toran garland (which
     paints above it) and the buttons ran into the "Scroll" cue.
     Top = 64 px navbar + ~50 px garland + air. Bottom = the cue. */
  padding: 128px 1rem 96px;
}

.hero-video-wrap {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-video-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.48) saturate(0.85);
}

/* Multi-layer cinematic gradient overlay */
.hero-video-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(232,82,10,0.2) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(20,0,0,0.7) 100%),
    linear-gradient(180deg,
      rgba(20,0,0,0.5) 0%,
      transparent 22%,
      transparent 65%,
      rgba(20,0,0,0.65) 100%
    );
}

.hero-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 2rem;
  overflow: visible;          /* never clip Devanagari ascenders */
  animation: hero-reveal 1.6s ease-out both;
}

.hero-tagline-top {
  font-family: var(--font-devanagari);
  font-size: 1.1rem;
  color: rgba(255, 212, 95, 0.88);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  animation: fade-up 1s 0.3s ease-out both;
  text-shadow: 0 0 18px rgba(255, 180, 30, 0.35);
}

.hero-title-hindi {
  font-family: var(--font-devanagari);
  font-size: clamp(3rem, 8vw, 7rem);
  background: linear-gradient(160deg, var(--gold-bright) 0%, var(--gold-light) 35%, var(--saffron-glow) 65%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.45;          /* Devanagari matras need room above baseline */
  padding-top: 0.15em;        /* Extra clearance for top vowel marks */
  overflow: visible;          /* Never clip Devanagari ascenders */
  margin-bottom: 0.3rem;
  animation: fade-up 1s 0.5s ease-out both;
}

.hero-title-en {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  animation: fade-up 1s 0.7s ease-out both;
}

.hero-divider {
  width: 120px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--saffron-light), var(--gold-light), var(--saffron-light), transparent);
  margin: 0 auto 1.5rem;
  animation: expand 1s 1s ease-out both;
  filter: drop-shadow(0 0 6px rgba(255,122,47,0.5));
}

.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255,242,205,0.82);
  max-width: 480px;
  margin: 0 auto 2.5rem;
  letter-spacing: 0.03em;
  animation: fade-up 1s 1.1s ease-out both;
}

.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0.9rem 2.5rem;
  background: var(--btn-saffron);
  color: var(--btn-ink-light);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-size: 0.88rem;
  border: 1px solid rgba(255,196,110,0.5);
  border-radius: 6px;
  box-shadow: 0 4px 22px rgba(216,60,10,0.45), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: var(--transition);
  animation: fade-up 1s 1.3s ease-out both;
  position: relative;
  overflow: hidden;
}
.hero-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--btn-saffron-hover);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero-cta:hover::before { opacity: 1; }
.hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 34px rgba(232,82,10,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
  border-color: rgba(255,214,140,0.75);
  color: #FFFDF6;
}
.hero-cta > * { position: relative; z-index: 1; }

/* ── Hero button row: village tour + the schemes shortcut ──
   The schemes page is the practical reason most villagers come here, so
   it gets a full-strength button in the hero rather than only a nav
   link that a phone hides behind the hamburger. */
.hero-actions {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.hero-cta-schemes {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0.9rem 2rem;
  background: var(--btn-gold);
  color: var(--btn-ink-dark);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  border: 1px solid rgba(255,240,190,0.8);
  border-radius: 6px;
  box-shadow: 0 4px 26px rgba(214,158,18,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: var(--transition);
  animation: fade-up 1s 1.45s ease-out both;
  position: relative;
  overflow: hidden;
}
/* A slow gold sheen sweeping across, so the eye lands here */
.hero-cta-schemes::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  animation: sheen 3.6s ease-in-out 2.4s infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%        { left: -60%; }
  45%, 100% { left: 130%; }
}
.hero-cta-schemes:hover {
  transform: translateY(-3px);
  color: var(--btn-ink-dark);
  background: var(--btn-gold-hover);
  box-shadow: 0 10px 34px rgba(240,190,40,0.65), inset 0 1px 0 rgba(255,255,255,0.6);
}
.hero-cta-schemes .hcs-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.hero-cta-schemes .hcs-hi {
  font-family: var(--font-devanagari);
  font-size: 0.82rem;
  font-weight: 400;
  opacity: 0.8;
  letter-spacing: 0.02em;
}
/* In Hindi the second line flips to English, so it wants the Latin face */
html[data-lang="hi"] .hero-cta-schemes .hcs-hi { font-family: var(--font-body); }
/* …and the main line becomes Devanagari */
html[data-lang="hi"] .hero-cta-schemes { font-family: var(--font-devanagari); }
.hero-cta-schemes .hcs-icon { font-size: 1.25rem; line-height: 1; }


.hero-scroll-hint {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,212,95,0.6);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: float 2.5s ease-in-out infinite;
}
.scroll-arrow {
  width: 20px; height: 20px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  opacity: 0.7;
}







/* ==============================
   SECTION BASE
   ============================== */
.section {
  padding: 6rem 1.5rem;
  position: relative;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: 0.75rem;
  display: block;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--deep-maroon);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.section-title.light { color: var(--gold-light); }

.section-lead {
  font-size: 1.05rem;
  color: var(--text-medium);
  max-width: 640px;
  margin-bottom: 3rem;
  line-height: 1.85;
}
.section-lead.light { color: rgba(255,240,200,0.75); }

/* ── Gradient accent bar above light sections ── */
.section-accent-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--saffron), var(--turmeric), var(--gold-light), var(--turmeric), var(--saffron));
}

/* ==============================
   ABOUT SECTION
   ============================== */
#about {
  background: linear-gradient(160deg, var(--warm-white) 0%, #FFF8EC 45%, #FFF2D8 100%);
  position: relative;
}
/* Temple-eave valance instead of a flat rule */
#about::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 20px;
  background-image: var(--jhalar-svg);
  background-size: 28px 20px;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(61,0,0,0.18));
}
/* Radial ambient glow in corners */
#about::after {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  /* ── MOBILE FIX: cap so it doesn't create horizontal overflow ── */
  width: clamp(150px, 40vw, 500px);
  height: clamp(150px, 40vw, 500px);
  background: radial-gradient(circle, rgba(201,148,26,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;   /* phone first; widened at >=901px */
  gap: 2rem;
  align-items: start;
}

.about-text p {
  color: var(--text-medium);
  margin-bottom: 1.2rem;
  font-size: 1.02rem;
  line-height: 1.87;
}

.info-cards {
  display: grid;
  grid-template-columns: 1fr;   /* phone first; 2-up at >=401px */
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ── The four village stats ──
   These used to sit inside the left text column, which left a tall
   empty gap on the right once the map and location card ran out. They
   now span the whole grid as a four-across strip under both columns. */
.about-stats {
  grid-column: 1 / -1;
  /* Columns are inherited from .info-cards (1-up, then 2-up at 401px);
     this strip only goes 4-across at >=901px. The grid's own row gap
     already separates it, so no top margin. */
  margin-top: 0;
}

.info-card {
  background: linear-gradient(145deg, #FFFBF2, #FFF5E0);
  border: 1px solid rgba(201,148,26,0.2);
  padding: 1.25rem;
  border-radius: 6px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(61,0,0,0.05);
}
/* Gradient top accent line */
.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--saffron), var(--gold-light), var(--turmeric));
  border-radius: 6px 6px 0 0;
  transform: scaleX(0.6);
  transform-origin: left;
  transition: transform 0.4s ease;
}
/* Subtle inner glow on hover */
.info-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(232,82,10,0.04), rgba(201,148,26,0.07));
  opacity: 0;
  transition: opacity 0.35s ease;
}
.info-card:hover::before { transform: scaleX(1); }
.info-card:hover::after  { opacity: 1; }
.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 32px rgba(201,148,26,0.28), 0 2px 8px rgba(232,82,10,0.1);
  border-color: rgba(201,148,26,0.35);
}
.info-card-icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.info-card-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
  display: block;
  margin-bottom: 0.25rem;
  position: relative; z-index: 1;
}
.info-card-value {
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--deep-maroon), var(--maroon));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  position: relative; z-index: 1;
}

/* Map embed card */
.map-card {
  border: 2px solid rgba(201,148,26,0.35);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 36px rgba(61,0,0,0.18), 0 2px 0 rgba(201,148,26,0.25);
  position: relative;
}
.map-card::before {
  content: '📍 Aihar on the Map';
  display: block;
  background: linear-gradient(135deg, var(--deep-maroon) 0%, #5C0A0A 100%);
  color: var(--gold-light);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(201,148,26,0.3);
}
.map-card iframe { display: block; width: 100%; border: none; }

/* ── Map facade: what shows before (or instead of) the real embed ── */
.map-facade {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 300px;
  padding: 2rem 1.25rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,82,10,0.1) 0%, transparent 60%),
    linear-gradient(160deg, #FFFBF2 0%, #FFF3DC 100%);
  /* A faint grid, so it reads as "a map goes here" without loading one */
  background-image:
    linear-gradient(rgba(201,148,26,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,148,26,0.09) 1px, transparent 1px),
    linear-gradient(160deg, #FFFBF2 0%, #FFF3DC 100%);
  background-size: 34px 34px, 34px 34px, auto;
}
.mf-pin { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 3px 6px rgba(232,82,10,0.3)); }
.mf-name {
  font-family: var(--font-accent);
  font-size: 1.15rem; font-weight: 700;
  color: var(--deep-maroon);
}
.mf-coords { font-size: 0.8rem; color: var(--text-light); letter-spacing: 0.04em; }
.mf-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin-top: 0.85rem;
}
.mf-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 700;
  color: var(--btn-ink-dark);
  background: var(--btn-gold);
  border: 1px solid rgba(255,240,190,0.8);
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(214,158,18,0.3);
  transition: var(--transition);
}
.mf-btn:hover {
  transform: translateY(-2px);
  background: var(--btn-gold-hover);
  box-shadow: 0 6px 18px rgba(240,190,40,0.45);
}
.mf-primary {
  color: var(--btn-ink-light);
  background: var(--btn-saffron);
  border-color: rgba(255,196,110,0.5);
  box-shadow: 0 2px 12px rgba(216,60,10,0.32);
}
.mf-primary:hover { color: #FFFDF6; background: var(--btn-saffron-hover); }
.mf-note {
  margin-top: 0.6rem;
  font-size: 0.74rem;
  color: var(--text-light);
  opacity: 0.85;
}
/* Once the real map is in, the card header is all the chrome it needs */
.map-card.has-map { min-height: 0; }

/* ==============================
   TEMPLE SECTION
   ============================== */
#temple {
  background: linear-gradient(160deg,
    var(--midnight)  0%,
    #380606          20%,
    #5C0E0E          45%,
    #480A0A          70%,
    var(--midnight)  100%
  );
  position: relative;
  overflow: hidden;
}

/* Warm amber glow rising from bottom */
#temple::before {
  content: '';
  position: absolute;
  bottom: -80px; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 500px;
  background: radial-gradient(ellipse,
    rgba(232,82,10,0.14) 0%,
    rgba(201,148,26,0.08) 35%,
    transparent 65%
  );
  pointer-events: none;
}

#temple::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 2 L58 30 L30 58 L2 30 Z' stroke='rgba(201,148,26,0.055)' stroke-width='0.8' fill='none'/%3E%3Ccircle cx='30' cy='30' r='5' stroke='rgba(201,148,26,0.04)' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  pointer-events: none;
}

.temple-content { position: relative; z-index: 1; }

.temple-grid {
  display: grid;
  grid-template-columns: 1fr;   /* phone first */
  gap: 2.5rem;
  /* `center` left a slab of empty maroon under the shorter column.
     Starting both columns at the top keeps the section tight. */
  align-items: start;
}

.temple-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(232,82,10,0.14), rgba(201,148,26,0.18));
  border: 1px solid rgba(201,148,26,0.4);
  padding: 0.4rem 1rem;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.temple-badge .dot {
  width: 6px; height: 6px;
  background: linear-gradient(135deg, var(--saffron-light), var(--gold-light));
  border-radius: 50%;
  animation: pulse-glow 2s infinite;
}

.temple-desc p {
  color: rgba(255,235,185,0.78);
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.87;
}

.temple-features {
  display: flex; flex-direction: column; gap: 0.8rem;
  margin-top: 2rem;
}
.temple-feat {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(201,148,26,0.06));
  border-left: 3px solid var(--saffron);
  border-radius: 0 6px 6px 0;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.temple-feat::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(232,82,10,0.08), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.temple-feat:hover { transform: translateX(5px); }
.temple-feat:hover::before { opacity: 1; }
.temple-feat-icon { font-size: 1.3rem; flex-shrink: 0; }
.temple-feat-text strong {
  display: block;
  color: var(--gold-light);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.temple-feat-text span {
  color: rgba(255,235,185,0.6);
  font-size: 0.87rem;
}

.temple-visual-panel { position: relative; }
.temple-stat-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(201,148,26,0.09) 100%);
  border: 1px solid rgba(201,148,26,0.3);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}
.stat-number {
  font-family: var(--font-accent);
  font-size: 4.5rem;
  font-weight: 900;
  background: linear-gradient(160deg, var(--gold-bright) 0%, var(--gold-light) 40%, var(--saffron-glow) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(201,148,26,0.4));
}
.stat-unit {
  font-size: 1.8rem;
  color: var(--saffron-light);
  vertical-align: super;
}
.stat-label {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: rgba(255,235,185,0.6);
  text-transform: uppercase;
  display: block;
  margin-top: 0.5rem;
}
.stat-desc { color: rgba(255,235,185,0.5); font-size: 0.82rem; margin-top: 0.5rem; line-height: 1.6; }
.stat-sub  { font-size: 0.8rem; color: rgba(255,235,185,0.45); margin-top: 0.3rem; }

/* ==============================
   MELA SECTION — Festival
   ============================== */
#mela {
  background: linear-gradient(145deg, var(--warm-white) 0%, #FFF6E5 40%, #FFF9F2 100%);
  position: relative;
  overflow: hidden;
}
#mela::before {
  content: '';
  position: absolute;
  top: -15%; right: -8%;
  width: 700px; height: 700px;
  background: radial-gradient(circle,
    rgba(232,82,10,0.07) 0%,
    rgba(230,170,26,0.05) 30%,
    transparent 62%
  );
  pointer-events: none;
}
#mela::after {
  content: '';
  position: absolute;
  bottom: -8%; left: -4%;
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(26,123,110,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.mela-grid {
  display: grid;
  grid-template-columns: 1fr;   /* phone first */
  gap: 2.5rem;
  align-items: start;
  position: relative; z-index: 1;
}

.festival-timeline {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.festival-timeline::before {
  content: '';
  position: absolute;
  left: 20px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--saffron), var(--turmeric), var(--gold), var(--peacock), var(--saffron));
  opacity: 0.45;
}

.timeline-item {
  display: flex; gap: 1.5rem;
  padding: 1.5rem 0;
  position: relative;
}
.timeline-dot {
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--deep-maroon), #5C0E0E);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  position: relative; z-index: 1;
  transition: var(--transition);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.timeline-item:hover .timeline-dot {
  background: linear-gradient(135deg, var(--saffron), var(--turmeric));
  transform: scale(1.18);
  box-shadow: 0 0 22px rgba(232,82,10,0.55), 0 4px 12px rgba(0,0,0,0.2);
  border-color: var(--gold-light);
}
.timeline-body strong {
  display: block;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--deep-maroon), var(--maroon));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.3rem;
}
.timeline-body p {
  color: var(--text-medium);
  font-size: 0.93rem;
  line-height: 1.72;
}

/* Market info panel */
.market-panel {
  background: linear-gradient(160deg, var(--midnight) 0%, #3A0606 45%, var(--deep-maroon) 100%);
  border-radius: 12px;
  padding: 2rem;
  color: var(--cream);
  box-shadow: var(--shadow-temple);
  border: 1px solid rgba(201,148,26,0.2);
  position: relative;
  overflow: hidden;
}
.market-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--saffron), var(--gold-light), var(--saffron), transparent);
}
.market-panel h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  background: linear-gradient(90deg, var(--gold-light), var(--saffron-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 10px;
}
.market-days {
  display: flex; gap: 1rem;
  margin-bottom: 1.5rem;
}
.day-chip {
  flex: 1;
  background: linear-gradient(135deg, rgba(201,148,26,0.12), rgba(232,82,10,0.16));
  border: 1px solid rgba(201,148,26,0.38);
  border-radius: 8px;
  padding: 1rem 0.5rem;
  text-align: center;
  transition: var(--transition);
}
.day-chip:hover {
  background: linear-gradient(135deg, rgba(201,148,26,0.22), rgba(232,82,10,0.26));
  border-color: rgba(201,148,26,0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(201,148,26,0.2);
}
.day-name {
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--gold-light), var(--saffron-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.day-hindi {
  font-family: var(--font-devanagari);
  font-size: 0.9rem;
  color: rgba(255,235,185,0.6);
}

.market-items {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.market-items li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.93rem;
  color: rgba(255,235,185,0.75);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(201,148,26,0.1);
  transition: var(--transition);
}
.market-items li:hover { color: var(--gold-light); padding-left: 6px; }
.market-items li span.item-icon { font-size: 1.1rem; }

/* ==============================
   HISTORY SECTION
   ============================== */
#history {
  background: linear-gradient(160deg,
    #0E0200 0%,
    #250500 18%,
    var(--maroon) 48%,
    #250500 78%,
    #0E0200 100%
  );
  position: relative;
  overflow: hidden;
}

.history-pattern {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(201,148,26,0.03) 35px, rgba(201,148,26,0.03) 36px),
    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(201,148,26,0.03) 35px, rgba(201,148,26,0.03) 36px);
  pointer-events: none;
}

.timeline-horizontal {
  display: grid;
  grid-template-columns: 1fr;   /* phone first */
  gap: 1.5rem;
  margin-top: 2.5rem;
  position: relative;
  padding-top: 27px; /* pushes cards down so the ::before line at top:28px aligns with dot centres */
}
.timeline-horizontal::before {
  content: '';
  position: absolute;
  top: 28px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--saffron), var(--gold-light), var(--turmeric), var(--saffron), transparent);
  opacity: 0.48;
}

.hist-card {
  position: relative;
  padding: 2rem 1.25rem 1.5rem;
  background: linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(201,148,26,0.07) 100%);
  border: 1px solid rgba(201,148,26,0.2);
  border-radius: 8px;
  transition: var(--transition);
  overflow: hidden;
}
.hist-card::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--gold), var(--saffron-light));
  border-radius: 50%;
  border: 3px solid var(--maroon);
  box-shadow: 0 0 14px rgba(201,148,26,0.75), 0 0 4px rgba(232,82,10,0.5);
  z-index: 1;
}
/* Gradient shimmer overlay */
.hist-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(232,82,10,0.06), rgba(201,148,26,0.09));
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hist-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(201,148,26,0.12) 100%);
  box-shadow: 0 12px 36px rgba(201,148,26,0.25), 0 4px 10px rgba(0,0,0,0.2);
  border-color: rgba(201,148,26,0.48);
}
.hist-card:hover::after { opacity: 1; }
.hist-year {
  font-family: var(--font-accent);
  font-size: 1.6rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.hist-title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  background: linear-gradient(90deg, var(--saffron-light), var(--saffron-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}
.hist-desc {
  font-size: 0.88rem;
  color: rgba(255,235,185,0.62);
  line-height: 1.72;
  position: relative; z-index: 1;
}

/* ==============================
   LANGUAGES PANEL
   Lives inside the About grid. The surrounding Community /
   Demographics section was removed — every figure it showed was
   already stated in About or History.
   ============================== */
.lang-section {
  grid-column: 1 / -1;   /* span the whole .about-grid */
  margin-top: 0;
  padding: 2rem;
  background: linear-gradient(145deg, var(--cream), #FFF8E6);
  border: 1px solid rgba(201,148,26,0.2);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(61,0,0,0.06);
}
.lang-title {
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--deep-maroon), var(--maroon));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.2rem;
}
.lang-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--saffron)   0%,
    var(--turmeric)  40%,
    var(--gold)      79%,
    rgba(201,148,26,0.22) 79%
  );
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 8px rgba(232,82,10,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
  overflow: hidden;
}
.lang-labels {
  display: flex; justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-light);
}

/* ==============================
   GALLERY SECTION
   ============================== */
#gallery {
  background: linear-gradient(145deg, var(--warm-white) 0%, #FFF7E8 55%, #FDF5E0 100%);
  padding: 5rem 1.5rem;
  position: relative;
}
#gallery::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 20px;
  background-image: var(--jhalar-svg);
  background-size: 28px 20px;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(61,0,0,0.18));
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;   /* phone first */
  gap: 1.25rem;
}

.gallery-item {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--midnight), #4A0808);
  /* A hard aspect-ratio clipped the longer captions (the tile has
     overflow:hidden), so the shape is a floor now and the tile grows to
     fit its text. Grid rows still line up because grid items stretch. */
  min-height: 250px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 18px rgba(61,0,0,0.22);
  border: 1px solid rgba(201,148,26,0.15);
}
.gallery-item:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 16px 44px rgba(61,0,0,0.38), 0 0 0 2px rgba(201,148,26,0.3);
}
.gallery-item:hover .gallery-overlay-text {
  color: var(--gold-bright);
  border-color: var(--gold-light);
}

.gallery-placeholder {
  text-align: center;
  padding: 1.5rem 1.5rem 2.6rem;   /* room for the badge pinned below */
  /* Was 0.5 — too faint to read comfortably on a phone in daylight */
  color: rgba(255,235,185,0.74);
}
.gallery-placeholder .emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.35));
  transition: var(--transition);
}
.gallery-item:hover .gallery-placeholder .emoji {
  transform: scale(1.15) translateY(-3px);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.gallery-placeholder p {
  font-size: 0.85rem;
  line-height: 1.55;
}

/* ── Distance badge ──
   This used to be a full-cover panel revealed on hover, which meant the
   distance was simply never readable on a touch screen. It is now a
   small badge pinned to the bottom of the tile, visible on every device. */
.gallery-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0.75rem 0.85rem;
  pointer-events: none;
}
.gallery-overlay-text {
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.32rem 0.95rem;
  border: 1px solid rgba(201,148,26,0.5);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(26,0,0,0.75), rgba(61,0,0,0.7));
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
/* On hover, hint that the tile opens a map */
.gallery-overlay-text::after {
  content: ' ↗';
  opacity: 0.6;
}

/* ==============================
   FOOTER
   ============================== */
#footer {
  background: linear-gradient(160deg,
    var(--midnight) 0%,
    #220404         25%,
    var(--deep-maroon) 60%,
    #180000         100%
  );
  border-top: 1px solid rgba(201,148,26,0.22);
  padding: 4rem 1.5rem 2rem;
  position: relative;
}
#footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--saffron) 20%,
    var(--gold-light) 50%,
    var(--saffron) 80%,
    transparent
  );
}
#footer::after {
  content: '';
  position: absolute;
  top: 40px; left: 50%;
  transform: translateX(-50%);
  /* ── MOBILE FIX: was 700px — overflows any phone viewport ── */
  width: min(700px, 90vw);
  height: 300px;
  background: radial-gradient(ellipse, rgba(201,148,26,0.07) 0%, transparent 65%);
  pointer-events: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;   /* phone first */
  gap: 2rem;
  margin-bottom: 3rem;
  position: relative; z-index: 1;
}

.footer-brand .brand-name {
  font-family: var(--font-heading);
  font-size: 2rem;
  background: linear-gradient(135deg, var(--gold-light), var(--saffron-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}
.footer-brand .brand-hindi {
  font-family: var(--font-devanagari);
  font-size: 1.5rem;
  color: rgba(255,235,185,0.6);
  display: block;
  margin-bottom: 1rem;
}
.footer-brand p {
  font-size: 0.9rem;
  color: rgba(255,235,185,0.55);
  line-height: 1.72;
}

.footer-col h4 {
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--gold), var(--turmeric));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(201,148,26,0.2);
}
.footer-col ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.footer-col ul li a {
  font-size: 0.9rem;
  color: rgba(255,235,185,0.55);
  transition: var(--transition);
}
.footer-col ul li a:hover { color: var(--gold-light); padding-left: 7px; }

/* The schemes page is the practical reason most people visit, so its
   footer entry is picked out rather than sitting flush with the rest. */
.footer-col ul li a.footer-schemes-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 0.35rem;
  padding: 0.42rem 0.9rem;
  font-weight: 700;
  color: var(--btn-ink-dark);
  background: var(--btn-gold);
  border-radius: 100px;
  box-shadow: 0 2px 12px rgba(214,158,18,0.3);
}
.footer-col ul li a.footer-schemes-link::before { content: '🪔'; font-size: 0.9rem; }
.footer-col ul li a.footer-schemes-link:hover {
  color: var(--btn-ink-dark);
  padding-left: 0.9rem;
  background: var(--btn-gold-hover);
  box-shadow: 0 4px 18px rgba(240,190,40,0.45);
}

.footer-location {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.88rem;
  color: rgba(255,235,185,0.55);
  line-height: 1.62;
}
/* Inline links inside the footer info block need a tappable box too */
.footer-location a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-location a:hover { color: var(--gold-light); }

.footer-bottom {
  border-top: 1px solid rgba(201,148,26,0.1);
  padding-top: 2rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  position: relative; z-index: 1;
}
.footer-bottom p {
  font-size: 0.82rem;
  color: rgba(255,235,185,0.35);
}
.footer-bottom .footer-om {
  font-size: 1.5rem;
  color: var(--saffron-light);
  animation: om-glow 3s ease-in-out infinite;
}

/* ==============================
   DECORATIVE ELEMENTS
   ============================== */

.om-watermark {
  position: absolute;
  /* Was a flat 20rem, which rendered a 388px-wide glyph inside a 320px
     viewport — laid out and painted at 2% opacity for no visible gain.
     Scales with the screen now and never exceeds it. */
  font-size: clamp(7rem, 28vw, 20rem);
  max-width: 100vw;
  opacity: 0.02;
  color: var(--gold);
  font-family: var(--font-devanagari);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.diamond-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin: 2rem 0;
  color: var(--gold);
  opacity: 0.6;
  font-size: 0.7rem;
  letter-spacing: 8px;
}

/* ==============================
   ANIMATIONS
   ============================== */

@keyframes hero-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes expand {
  from { width: 0; opacity: 0; }
  to   { width: 120px; opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-8px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 4px currentColor); }
  50%       { opacity: 1;   filter: drop-shadow(0 0 14px currentColor); }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── IntersectionObserver reveal classes ──
   These start invisible and are switched on by script.js. If the script
   never runs — blocked, failed download, a very old browser — the whole
   page below the hero would otherwise render blank, so the <noscript>
   block in each page head forces them all visible. */
.reveal       { opacity: 0; transform: translateY(30px); transition: opacity 0.72s ease, transform 0.72s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.72s ease, transform 0.72s ease; }
.reveal-left.visible  { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.72s ease, transform 0.72s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ── Staggered children ──
   The reveal is written as one rule that covers EVERY child, with the
   delay layered on separately. The previous version listed
   nth-child(1)…(6) explicitly, so any grid with more than six children
   — the 16 helpline cards on the schemes page, the 7 gallery tiles —
   left the extras stuck at opacity 0 for good. */
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger.visible > * { opacity: 1; transform: none; }

.stagger > *:nth-child(1)  { transition-delay: 0s; }
.stagger > *:nth-child(2)  { transition-delay: 0.07s; }
.stagger > *:nth-child(3)  { transition-delay: 0.14s; }
.stagger > *:nth-child(4)  { transition-delay: 0.21s; }
.stagger > *:nth-child(5)  { transition-delay: 0.28s; }
.stagger > *:nth-child(6)  { transition-delay: 0.35s; }
.stagger > *:nth-child(7)  { transition-delay: 0.42s; }
.stagger > *:nth-child(8)  { transition-delay: 0.49s; }
/* Anything past the ninth shares one delay so long grids don't crawl */
.stagger > *:nth-child(n+9) { transition-delay: 0.56s; }

/* (the mobile-first widening rules live at the end of this file, so
   they are not overridden by component declarations further down) */

/* ── Hamburger breakpoint — 900 px ──────────────────────────────
   Phones and portrait tablets hit this. Nav links collapse, the
   hamburger appears, and the navbar stays a single tight row.
   Raised from 768 px when the sixth item (Schemes) was added — below
   ~900 px the links otherwise ran into the language toggle.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Hide horizontal nav links */
  .nav-links { display: none; }

  /* ── CRITICAL: #navbar carries backdrop-filter, and a backdrop-filter
     makes an element the containing block for its position:fixed
     descendants. The menu panel below therefore resolved top/bottom
     against the 64 px navbar instead of the viewport and collapsed to
     zero height — the whole mobile menu was invisible and unusable.
     Two independent guards: drop the filter while the menu is open,
     and give the panel an explicit viewport height either way. ── */
  body.menu-open #navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, #1A0000 0%, #2C0400 100%);
  }

  .nav-links.open {
    display: flex; flex-direction: column;
    margin-left: 0;                       /* reset the desktop offset */
    position: fixed; top: 64px; left: 0; right: 0;
    height: calc(100dvh - 64px);
    background:
      radial-gradient(ellipse at 50% 0%, rgba(232,82,10,0.16) 0%, transparent 60%),
      linear-gradient(180deg, #1A0000 0%, #2C0400 55%, #1A0000 100%);
    align-items: center; justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem 1.25rem 2.5rem;
    z-index: 999;
    overflow-y: auto;                     /* short/landscape phones */
    overscroll-behavior: contain;
  }
  /* Mango-leaf + marigold toran hung across the top of the menu */
  .nav-links.open::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 46px;
    background-image: var(--toran-svg);
    background-size: 48px 46px;
    background-repeat: repeat-x;
    opacity: 0.9;
    pointer-events: none;
  }
  .nav-links.open li { width: 100%; max-width: 320px; }
  .nav-links.open a {
    font-size: 1.05rem;
    padding: 0.85rem 1.5rem;
    min-height: 52px;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid rgba(201,148,26,0.14);
  }
  .nav-links.open li:last-child a { border-bottom: none; }

  /* Show hamburger */
  .nav-toggle { display: flex; }

  /* Body scroll lock while menu is open */
  body.menu-open { overflow: hidden; }

  /* Tighter navbar padding — gives more room for brand + toggle + pill */
  #navbar { padding: 0 0.9rem; }

  /* Drop the OM decorative icon from the pill — saves ~30px */
  .lbtn-icon { display: none; }

  /* Reduce right gap before hamburger */
  .lang-toggle-btn { margin-left: auto; margin-right: 0.55rem; }
}

/* ── Mobile layout — 600 px ── */
@media (max-width: 600px) {
  .section { padding: 3.5rem 1.1rem; }

  /* ── Readability on a phone ──
     Much of this site is read by older villagers on a small screen, so
     the body copy stops shrinking below roughly 15 px and the line
     height opens up. Devanagari in particular needs the extra leading. */
  .about-text p,
  .temple-desc p,
  .section-lead,
  .timeline-body p,
  .hist-desc,
  .reach-card p,
  .footer-brand p { font-size: 0.95rem; line-height: 1.85; }

  .band-lead, .band-points li { font-size: 0.95rem; }
  .temple-feat-text span,
  .bc-label { font-size: 0.86rem; }
  .footer-col ul li a { font-size: 0.95rem; padding: 0.2rem 0; }

  /* Comfortable tap targets on every footer / list link */
  .footer-col ul { gap: 0.35rem; }
  .footer-col ul li a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Hero — dvh keeps the phone's collapsing URL bar from cropping it */
  #hero { min-height: 100dvh; }
  .hero-content { padding: 1.25rem; }
  .hero-actions { gap: 0.7rem; }
  .hero-cta, .hero-cta-schemes { width: 100%; justify-content: center; }
  .hero-cta-schemes { padding: 0.85rem 1.5rem; }
  .hero-tagline-top {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
  }
  .hero-subtitle br { display: none; }
  .hero-subtitle { font-size: 0.95rem; margin-bottom: 2rem; }
  .hero-cta { padding: 0.85rem 1.75rem; font-size: 0.82rem; }
  .hero-scroll-hint { bottom: 1.25rem; }

  /* About */

  /* Map embed */
  .map-card iframe { height: 240px; }

  .hist-card::before { left: 50%; top: -6px; transform: translateX(-50%); }


  /* Language labels */
  .lang-labels { flex-direction: column; gap: 0.3rem; }

  /* Gallery */

  /* Mela */
  .market-days { flex-direction: column; }

  /* Footer */
  .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; }

  /* Hero title */
  .hero-title-hindi { font-size: clamp(2.5rem, 10vw, 4rem); }

  /* Temple stat card */
  .temple-stat-card { padding: 1.75rem 1.25rem; }
  .stat-number { font-size: 3.5rem; }

  /* Section title */
  .section-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}


/* ══════════════════════════════════════════════
   MOBILE OVERFLOW — Section containment fixes
   Clips any decorative absolute/pseudo elements
   that extend past section boundaries on mobile.
   ══════════════════════════════════════════════ */

/* All sections that use position:absolute decorations must clip their
   own overflow.

   This says `overflow: hidden`, not `overflow-x: hidden`, deliberately.
   Per spec, setting one axis to anything other than `visible` computes
   the OTHER axis from `visible` to `auto` — so `overflow-x: hidden`
   quietly turned these sections into vertical scroll containers, and a
   decorative glow hanging a few pixels below a section's bottom edge was
   enough to give it its own inner scrollbar, separate from the page's.
   Keep any new decoration inside its section's box regardless. */
#about,
#temple,
#history,
#mela,
#schemes-band,
#reach,
#gallery,
#footer {
  overflow: hidden;
}

/* OM watermarks are large text — cap them */
.om-watermark {
  max-width: 100%;
  overflow: hidden;
}

/* Awadhi spirit section uses an inline grid-template-columns:1fr 1fr
   that doesn't respond to media queries — override it here */
@media (max-width: 768px) {
  /* Collapse the two-column Awadhi Spirit layout to single column */
  #history .awadh-grid,
  #history [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
}

/* ══════════════════════════════════════════════
   LANGUAGE TOGGLE — Sacred Script Button
   A pill toggle in the navbar switching
   between English (A) and Hindi (अ)
   ══════════════════════════════════════════════ */

/* ── Button wrapper ── */
.lang-toggle-btn {
  /* The ::after tooltip below is absolutely positioned; without this the
     nearest positioned ancestor is #navbar and the tooltip drifted to the
     far corner of the bar instead of sitting under the pill. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  outline: none;
  /* Push right, leave breathing room before hamburger */
  margin-left: auto;
  margin-right: 1.25rem;
}

/* On mobile, tighten the gap since hamburger appears — handled in 768px block above */

/* ── ॐ decorative icon left of the pill ── */
.lbtn-icon {
  font-family: var(--font-devanagari);
  font-size: 1.1rem;
  line-height: 1;
  /* Shares the same glowing animation as .nav-brand .om-symbol */
  color: var(--saffron-light);
  text-shadow: 0 0 10px rgba(232,82,10,0.55), 0 0 22px rgba(232,82,10,0.2);
  animation: om-glow 3s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
  display: inline;
}
/* The @media rule that hides this sits EARLIER in the file, so at equal
   specificity the unconditional `display: inline` above was winning and
   the icon stayed on phones — crowding the bar next to the brand's own
   ॐ. Repeat the hide here, after the declaration it has to beat. */
@media (max-width: 900px) {
  .lbtn-icon { display: none; }
}

/* ── The pill track ── */
.lbtn-track {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px;
  /* Matches the navbar dark glass aesthetic */
  background: linear-gradient(135deg, rgba(20,0,0,0.92), rgba(44,4,0,0.9));
  border: 1.5px solid rgba(201,148,26,0.45);
  border-radius: 100px;
  /* 3px padding each side + two 34px labels = 74px total */
  padding: 3px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle top-edge highlight (like polished metal) */
.lbtn-track::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  border-radius: 100px 100px 0 0;
  pointer-events: none;
}

/* Hover glow — matches nav link hover */
.lang-toggle-btn:hover .lbtn-track {
  border-color: rgba(201,148,26,0.85);
  box-shadow: 0 0 16px rgba(201,148,26,0.22), 0 0 6px rgba(232,82,10,0.18);
}
.lang-toggle-btn:focus-visible .lbtn-track {
  box-shadow: 0 0 0 2px rgba(232,82,10,0.55), 0 0 14px rgba(201,148,26,0.22);
}

/* ── Gliding saffron pill (the active indicator) ── */
.lbtn-slider {
  position: absolute;
  top: 3px;
  left: 3px;                    /* EN position by default */
  height: calc(100% - 6px);    /* 32 - 6 = 26px */
  width: 34px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--saffron), var(--turmeric), var(--gold-light));
  box-shadow: 0 0 10px rgba(232,82,10,0.5), 0 0 4px rgba(201,148,26,0.35);
  transition: left 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

/* ── Script labels (A  and  अ) ── */
.lbtn-opt {
  position: relative;
  z-index: 2;
  width: 34px;
  text-align: center;
  font-weight: 700;
  /* Dim gold when inactive */
  color: rgba(255,212,95,0.38);
  transition: color 0.3s ease;
  user-select: none;
  line-height: 1;
}
/* Latin "A" — uses accent serif */
.lbtn-en {
  font-family: var(--font-accent);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
/* Devanagari "अ" — uses Devanagari font for correct rendering */
.lbtn-hi {
  font-family: var(--font-devanagari);
  font-size: 0.95rem;
}

/* ──────────────────────────────────────
   STATE: English active  (default)
   Slider sits over "A" (left side)
   ────────────────────────────────────── */
html:not([data-lang="hi"]) .lbtn-slider {
  left: 3px;
}
html:not([data-lang="hi"]) .lbtn-en {
  color: var(--midnight);   /* dark text on bright pill */
  font-weight: 900;
}

/* ──────────────────────────────────────
   STATE: Hindi active
   Slider slides over "अ" (right side)
   ────────────────────────────────────── */
html[data-lang="hi"] .lbtn-slider {
  left: 37px;   /* 3px padding + 34px EN width */
}
html[data-lang="hi"] .lbtn-hi {
  color: var(--midnight);   /* dark text on bright pill */
  font-weight: 900;
}

/* ── Tooltip-style lang label (visible on hover, desktop only) ── */
.lang-toggle-btn::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: rgba(255,212,95,0.75);
  background: linear-gradient(135deg, rgba(26,0,0,0.95), rgba(44,4,0,0.95));
  border: 1px solid rgba(201,148,26,0.3);
  border-radius: 6px;
  padding: 4px 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200;
}
.lang-toggle-btn:hover::after {
  opacity: 1;
  transform: translateY(0);
}
/* Don't show tooltip on touch/mobile */
@media (max-width: 900px) {
  .lang-toggle-btn::after { display: none; }
}

/* ── Extra-small phones (< 400px) ── */
@media (max-width: 400px) {
  #navbar { padding: 0 0.75rem; }
  .nav-brand { font-size: 1.15rem; gap: 6px; }
  .nav-brand .om-symbol { font-size: 1.3rem; }

  .section { padding: 2.75rem 0.9rem; }

  .hero-title-hindi { font-size: clamp(2rem, 12vw, 3rem); }
  .hero-title-en    { font-size: clamp(1rem, 5vw, 1.6rem); }
  .hero-tagline-top { letter-spacing: 0.1em; }
  .hero-cta         { padding: 0.75rem 1.3rem; width: 100%; justify-content: center; }


  .temple-stat-card { padding: 1.25rem 1rem; }
  .stat-number      { font-size: 3rem; }

  .gallery-item { min-height: 210px; }

  .section-title { font-size: clamp(1.4rem, 8vw, 2rem); }

  .footer-grid { gap: 2rem; }
  .footer-bottom p { font-size: 0.75rem; }
}



[data-i18n] {
  transition: opacity 0.15s ease;
}
[data-i18n].lang-switching {
  opacity: 0;
}


/* ══════════════════════════════════════════════
   HOME — GOVERNMENT SCHEMES CALL-OUT BAND
   ══════════════════════════════════════════════ */
#schemes-band {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 1.5rem;
  background: var(--grad-temple);
  border-top: 1px solid rgba(201,148,26,0.22);
  border-bottom: 1px solid rgba(201,148,26,0.22);
}
#schemes-band::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 12% 25%, rgba(232,82,10,0.15) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 78%, rgba(201,148,26,0.12) 0%, transparent 55%);
  pointer-events: none;
}
#schemes-band > .container { position: relative; z-index: 1; }

.schemes-band-grid {
  display: grid;
  grid-template-columns: 1fr;   /* phone first */
  gap: 2.5rem;
  align-items: center;
}

.band-lead {
  color: rgba(255,235,185,0.72);
  font-size: 0.98rem;
  line-height: 1.9;
  margin-bottom: 1.5rem;
}

.band-points {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.7rem;
  margin-bottom: 2rem;
}
.band-points li {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.93rem;
  color: rgba(255,235,185,0.82);
}
.bp-tick {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  /* 700, not 900 — this inherits --font-body (Hind), which has no
     weight above 700, so 900 only ever produced synthetic bold */
  font-size: 0.68rem; font-weight: 700;
  color: var(--midnight);
  background: linear-gradient(135deg, var(--gold-light), var(--turmeric));
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(201,148,26,0.4);
}

.band-cta { animation: none; }
.band-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: rgba(255,235,185,0.5);
  letter-spacing: 0.03em;
}

/* Category tile mosaic */
.band-cards {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;   /* phone first; 2-up at >=401px */
  gap: 0.65rem;
}
/* Each <li> is the grid cell; the <a> inside fills it completely */
.band-cards > li { display: flex; }
.band-cards > li > .band-card { flex: 1; }
/* Each tile is a link straight into that category on the schemes page */
.band-card {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(135deg, rgba(232,82,10,0.1), rgba(201,148,26,0.09));
  border: 1px solid rgba(201,148,26,0.28);
  border-radius: 10px;
  transition: var(--transition);
  cursor: pointer;
  min-height: 68px;
}
.band-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-light);
  background: linear-gradient(135deg, rgba(232,82,10,0.22), rgba(201,148,26,0.2));
  box-shadow: 0 8px 26px rgba(0,0,0,0.34);
}
.band-card:hover .bc-label { color: var(--gold-bright); }
.band-card:hover .bc-icon  { transform: scale(1.12); }
.bc-icon {
  font-size: 1.5rem; flex-shrink: 0; line-height: 1;
  transition: transform 0.3s ease;
}
/* Arrow slides in on hover to signal "this goes somewhere" */
.bc-go {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--gold-light);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.band-card:hover .bc-go,
.band-card:focus-visible .bc-go { opacity: 1; transform: none; }
/* Touch screens have no hover, so keep the affordance permanently on */
@media (hover: none) {
  .bc-go { opacity: 0.55; transform: none; }
}
.bc-label {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(255,235,185,0.85);
}
.bc-label em {
  font-style: normal;
  font-family: var(--font-devanagari);
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255,212,95,0.6);
}

@media (max-width: 600px) {
  #schemes-band { padding: 3.5rem 1.1rem; }
  .band-card { padding: 0.85rem 0.9rem; gap: 0.6rem; }
  .bc-icon { font-size: 1.25rem; }
  .bc-label { font-size: 0.78rem; }
  .bc-label em { font-size: 0.7rem; }
}

/* ══════════════════════════════════════════════
   HOME — HOW TO REACH
   ══════════════════════════════════════════════ */
#reach {
  background: linear-gradient(150deg, var(--cream) 0%, #FFF6E2 60%, var(--amber-light) 100%);
  padding: 5rem 1.5rem;
}

.reach-grid {
  display: grid;
  grid-template-columns: 1fr;   /* phone first; auto-fit takes over at >=601px */
  gap: 1.4rem;
}

.reach-card {
  padding: 1.75rem 1.6rem;
  background: var(--grad-warm);
  border: 1px solid rgba(201,148,26,0.28);
  border-radius: 10px;
  box-shadow: var(--shadow-warm);
  transition: var(--transition);
}
.reach-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,148,26,0.62);
  box-shadow: 0 12px 32px rgba(61,0,0,0.14);
}
.reach-icon {
  display: block;
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: 0.9rem;
  filter: drop-shadow(0 3px 6px rgba(232,82,10,0.22));
}
.reach-card h3 {
  font-family: var(--font-accent);
  font-size: 1.05rem;
  color: var(--deep-maroon);
  margin-bottom: 0.6rem;
}
.reach-card p {
  font-size: 0.89rem;
  line-height: 1.8;
  color: var(--text-medium);
}

.reach-card-map {
  background: linear-gradient(145deg, var(--deep-maroon), #5C0A0A);
  border-color: rgba(201,148,26,0.35);
}
.reach-card-map h3 {
  background: linear-gradient(90deg, var(--gold-light), var(--saffron-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.reach-card-map p { color: rgba(255,235,185,0.72); }
.reach-map-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--btn-ink-dark);
  background: var(--btn-gold);
  border-radius: 100px;
  transition: var(--transition);
}
.reach-map-link:hover {
  background: var(--btn-gold-hover);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  #reach { padding: 3.5rem 1.1rem; }
}

/* The stagger helper only has delays for six children; the reach and
   band grids stay within that, so no extra rules are needed here. */

/* ══════════════════════════════════════════════
   ACCESSIBILITY & SHARED UI
   Added in v2.3 — used by index.html and schemes.html
   ══════════════════════════════════════════════ */

/* ── Skip link — first tab stop on every page ── */
.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: 2000;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 600;
  color: var(--btn-ink-dark);
  background: var(--btn-gold);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  transition: top 0.25s ease;
}
.skip-link:focus { top: 0; outline: 2px solid var(--saffron); outline-offset: 2px; }

/* ── Screen-reader-only text ── */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Visible focus ring for keyboard users everywhere ──
   Uses :focus-visible so mouse clicks stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.scheme-card:focus-visible,
.gallery-item:focus-visible {
  outline: 3px solid var(--saffron-light);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On the dark sections a gold ring reads better than saffron */
#temple a:focus-visible,
#history a:focus-visible,
#footer a:focus-visible,
#navbar a:focus-visible,
.helpline-section a:focus-visible {
  outline-color: var(--gold-light);
}

/* ── Reading progress bar (top of page) ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 1001;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--saffron), var(--gold-light), var(--turmeric));
  box-shadow: 0 0 10px rgba(232,82,10,0.6);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ── Back-to-top button ── */
.back-to-top {
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 900;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  color: var(--gold-light);
  background: linear-gradient(135deg, rgba(26,0,0,0.95), rgba(61,0,0,0.92));
  border: 1px solid rgba(201,148,26,0.45);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.32s ease, transform 0.32s ease, background 0.32s ease;
}
/* display:flex above beats the UA's [hidden] rule, so the button stayed
   in the layout at opacity 0 and swallowed every tap in the bottom-right
   corner of the page. Restore [hidden] explicitly. */
.back-to-top[hidden] { display: none; }
.back-to-top.is-visible { opacity: 1; transform: none; }
.back-to-top:hover {
  background: linear-gradient(135deg, var(--saffron), var(--maroon));
  color: var(--gold-bright);
  border-color: var(--gold-light);
}
@media (max-width: 600px) {
  .back-to-top { right: 0.9rem; bottom: 0.9rem; width: 42px; height: 42px; }
}

/* ── Nav: brand as a link, and the Schemes call-to-action ── */
a.nav-brand { color: inherit; }
a.nav-brand:hover .om-symbol { filter: brightness(1.2); }

.nav-links .nav-cta {
  padding: 0.45rem 1.15rem;
  color: var(--midnight);
  background: var(--btn-gold);
  border-radius: 100px;
  font-weight: 700;   /* Hind tops out at 700 */
  box-shadow: 0 2px 14px rgba(214,158,18,0.45);
  animation: cta-breathe 3.4s ease-in-out infinite;
}
@keyframes cta-breathe {
  0%, 100% { box-shadow: 0 2px 14px rgba(201,148,26,0.4); }
  50%      { box-shadow: 0 2px 22px rgba(232,82,10,0.75), 0 0 0 3px rgba(255,212,95,0.16); }
}
.nav-links .nav-cta:hover {
  color: var(--btn-ink-dark);
  background: var(--btn-gold-hover);
  box-shadow: 0 4px 22px rgba(240,190,40,0.6);
}
/* The CTA carries its own fill, so suppress the underline sweep */
.nav-links .nav-cta::after { display: none; }

/* ══════════════════════════════════════════════
   ALWAYS-VISIBLE SCHEMES SHORTCUT (phones)
   Below the hamburger breakpoint the nav list is hidden, which used to
   take the Schemes call-to-action with it — the single most useful page
   on the site became invisible on the device most villagers use. This
   pill lives outside the collapsible list and is shown only there.
   ══════════════════════════════════════════════ */
.nav-schemes-pill {
  display: none;               /* desktop uses the in-list .nav-cta */
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.42rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;   /* Hind tops out at 700 */
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--btn-ink-dark);
  background: var(--btn-gold);
  border: 1px solid rgba(255,240,190,0.7);
  border-radius: 100px;
  box-shadow: 0 2px 14px rgba(214,158,18,0.45);
  animation: cta-breathe 3.4s ease-in-out infinite;
}
.nav-schemes-pill .nsp-icon { font-size: 0.95rem; line-height: 1; }
.nav-schemes-pill:active { transform: scale(0.97); }

/* On the schemes page itself the pill is a "you are here" marker, so it
   stops competing for attention. */
.nav-schemes-pill.is-current {
  animation: none;
  color: var(--gold-light);
  background: linear-gradient(135deg, rgba(232,82,10,0.18), rgba(201,148,26,0.16));
  border-color: rgba(201,148,26,0.5);
  box-shadow: none;
}

@media (max-width: 900px) {
  .nav-schemes-pill { display: inline-flex; }
  /* The pill now claims the auto margin, so the toggle just spaces itself */
  .lang-toggle-btn { margin-left: 0.55rem; }
  .nav-links.open .nav-cta { padding: 0.85rem 1.9rem; }
}

/* Very small phones: drop the word, keep the unmistakable pill */
@media (max-width: 370px) {
  .nav-schemes-pill { padding: 0.42rem 0.6rem; }
  .nav-schemes-pill .nsp-text { display: none; }
  .nav-schemes-pill .nsp-icon { font-size: 1.05rem; }
}

/* ── Section lead used on both pages ── */
.section-lead.light { color: rgba(255,235,185,0.72); }

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST

   Every layout grid above is declared single-column, because that is
   what the overwhelming majority of this site's visitors get. The rules
   below only ever ADD columns as the screen grows; a phone never parses
   a desktop grid and then overrides it.

   Three widening steps:
     >= 401px   small card grids go two-up
     >= 601px   wide card grids go two-up
     >= 901px   full desktop layout (also where the nav expands)
   ══════════════════════════════════════════════ */

/* ── >= 401px — roomy enough to pair the small cards ── */
@media (min-width: 401px) {
  .info-cards,
  .band-cards  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { gap: 3rem; }
}

/* ── >= 601px — large phones landscape, small tablets ── */
@media (min-width: 601px) {
  .timeline-horizontal { grid-template-columns: repeat(2, 1fr); }
  .band-cards          { gap: 0.9rem; }
  .gallery-grid        { grid-template-columns: repeat(2, 1fr); }
  .footer-grid         { grid-template-columns: repeat(2, 1fr); }
  .footer-brand        { grid-column: 1 / -1; }
  .reach-grid          { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* ── >= 901px — the full desktop layout ── */
@media (min-width: 901px) {
  .about-grid        { grid-template-columns: 1fr 1fr;      gap: 4rem; }
  .temple-grid       { grid-template-columns: 1fr 1.1fr;    gap: 4rem; }
  .mela-grid         { grid-template-columns: 1.2fr 1fr;    gap: 5rem; }
  .schemes-band-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; }

  .about-stats         { grid-template-columns: repeat(4, 1fr); }
  .timeline-horizontal { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; }
  .gallery-grid        { grid-template-columns: repeat(3, 1fr); }
  .footer-grid         { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
  .footer-brand        { grid-column: auto; }
}

/* The connector line only makes sense once the cards sit in one row */
@media (max-width: 900px) {
  .timeline-horizontal::before { display: none; }
}


/* ══════════════════════════════════════════════
   SAFE AREAS — notched / gesture-bar phones

   Placed last on purpose. Several of these selectors get a shorthand
   "padding" or "bottom" further up the file (the mobile navbar, the
   back-to-top button, the footer), and a shorthand later in the cascade
   wipes a longhand set earlier — so an earlier safe-area rule silently
   does nothing on exactly the phones it exists for.

   env() resolves to 0 on screens without a notch or home indicator, so
   max() keeps the normal spacing everywhere else.
   ══════════════════════════════════════════════ */
#navbar {
  padding-left:  max(0.9rem, env(safe-area-inset-left));
  padding-right: max(0.9rem, env(safe-area-inset-right));
}
@media (min-width: 901px) {
  #navbar {
    padding-left:  max(2rem, env(safe-area-inset-left));
    padding-right: max(2rem, env(safe-area-inset-right));
  }
}
.back-to-top {
  right:  max(0.9rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
}
@media (min-width: 601px) {
  .back-to-top { right: max(1.25rem, env(safe-area-inset-right));
                 bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}
#footer  { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
.nav-links.open { padding-bottom: max(2.5rem, env(safe-area-inset-bottom)); }

/* Left/right insets only bite in landscape, where the notch eats into
   the side of the viewport (~44px — more than any of our padding).
   Scoped to landscape so portrait spacing, which is the common case, is
   left exactly as the responsive rules set it. */
@media (orientation: landscape) {
  .section, .page-hero, .schemes-section, #footer {
    padding-left:  max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
  .filter-bar {
    padding-left:  max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}
.scheme-dialog  { padding-bottom: env(safe-area-inset-bottom); }

/* ══════════════════════════════════════════════
   SHORT SCREENS & LANDSCAPE

   Height-driven, so these must sit AFTER the width-driven mobile
   rules — a phone in landscape matches both, and at equal specificity
   the later block wins. Placed here for that reason.
   ══════════════════════════════════════════════ */

/* ── Short viewports ──
   A 1366×768 browser window leaves only ~657 px of page. With the navbar,
   the garland and the scroll cue all claiming space, the hero has to give
   some back rather than overflow. Keyed off height, not width, so it also
   catches landscape phones. */
@media (max-height: 780px) {
  #hero { padding: 116px 1rem 80px; }
  .hero-tagline-top { font-size: 0.95rem; letter-spacing: 0.25em; margin-bottom: 0.5rem; }
  .hero-title-hindi { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 0.1rem; }
  .hero-title-en    { font-size: clamp(1.2rem, 2.5vw, 1.9rem); margin-bottom: 0.9rem; }
  .hero-divider     { margin-bottom: 1rem; }
  .hero-subtitle    { margin-bottom: 1.6rem; }
  .hero-content     { padding: 1rem; }
}

/* Below this height the cue has nowhere left to go and would sit on top
   of the buttons. It is purely decorative, so drop it.
   NOTE: this must come AFTER .hero-scroll-hint's own `display: flex`,
   or the later rule wins at equal specificity and the hide never takes. */
@media (max-height: 620px) {
  .hero-scroll-hint { display: none; }
  #hero { padding-bottom: 48px; }
}

/* ── Short screens: iPhone SE (568px) and phones held landscape ──
   The hero has a fixed navbar and a garland above it and only ~500px of
   usable height. Everything shrinks a step further so the two buttons —
   the whole point of the screen — stay above the fold. */
@media (max-height: 620px) {
  #hero { padding-top: 92px; }
  .toran { height: 30px; background-size: 32px 30px; }
  #hero .toran, .page-hero .toran { top: 64px; }

  .hero-tagline-top { font-size: 0.72rem; letter-spacing: 0.16em; margin-bottom: 0.35rem; }
  .hero-title-hindi { font-size: clamp(2rem, 7vh, 3.2rem); line-height: 1.3; }
  .hero-title-en    { font-size: clamp(0.95rem, 3vh, 1.4rem); letter-spacing: 0.16em; margin-bottom: 0.5rem; }
  .hero-divider     { margin-bottom: 0.7rem; }
  .hero-subtitle    { font-size: 0.88rem; line-height: 1.55; margin-bottom: 1rem; max-width: 34rem; }
  .hero-actions     { gap: 0.5rem; }
  .hero-cta, .hero-cta-schemes { padding: 0.6rem 1.2rem; }
  .hero-cta-schemes .hcs-hi { display: none; }   /* one line is enough here */
}

/* Landscape phones: two buttons side by side rather than stacked */
@media (max-height: 500px) and (orientation: landscape) {
  #hero { padding-top: 84px; padding-bottom: 32px; }
  .hero-actions { flex-wrap: nowrap; }
  .hero-cta, .hero-cta-schemes { width: auto; }
  .hero-subtitle { display: none; }   /* the title and buttons carry it */

  /* The panel is only calc(100dvh - 64px) tall here — about 256px on a
     phone turned sideways. Six links have to fit in that without
     scrolling, because the last of them is Schemes. */
  .nav-links.open {
    justify-content: flex-start;
    gap: 0;
    padding: 0.5rem 1.25rem max(0.75rem, env(safe-area-inset-bottom));
  }
  .nav-links.open a { min-height: 36px; padding: 0.3rem 1.5rem; font-size: 0.92rem; }
  .nav-links.open::before { display: none; }   /* no room for the garland */
}

/* ══════════════════════════════════════════════
   REDUCED MOTION
   Honour the OS "reduce motion" setting: keep the
   layout and colour, drop the movement.
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal-on-scroll elements must not be left invisible */
  .reveal, .reveal-left, .reveal-right,
  .stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-scroll-hint,
  .scroll-arrow,
  .nav-brand .om-symbol,
  .lbtn-icon,
  .toran,
  .nav-links .nav-cta,
  .nav-schemes-pill,
  .hero-cta-schemes::after,
  .lang-bar::after { animation: none !important; }

  /* The sheen would otherwise freeze mid-button */
  .hero-cta-schemes::after { display: none; }

  .back-to-top { transition: opacity 0.01ms !important; }
}

/* ══════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════ */
@media print {
  #navbar, .skip-link, .scroll-progress, .back-to-top,
  .hero-scroll-hint, .om-watermark, .lang-toggle-btn,
  .toran, .nav-schemes-pill { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }

  #hero { min-height: auto; page-break-after: avoid; }
  .hero-video-wrap { display: none; }

  .section { padding: 1.5rem 0 !important; page-break-inside: avoid; }

  /* Gradient text is invisible on paper — force solid ink */
  .section-title, .page-title, .hist-year,
  .stat-number, .brand-name, .hs-num, .hc-num, .dlg-title {
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
    background: none !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
    word-break: break-all;
  }
}