/* ===== FONTS — self-hosted woff2, no CDN ===== */
@font-face {
  font-family: 'Columbia Serial';
  src: url('../fonts/columbia-serial-bold.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto.woff2') format('woff2-variations');
  font-style: normal;
  font-display: swap;
}

/* Columbia Serial carries Latin only, so Hindi and Gujarati headings used to
   drop to whatever system font the browser picked and lost the brand look.
   These two cover the gap: they share one family name with non-overlapping
   unicode-ranges, so the browser reaches for Martel on Devanagari text and
   Rasa on Gujarati text without either page needing its own font stack.
   Both are serifs, so they sit with Columbia Serial rather than against it. */
@font-face {
  font-family: 'Heading Indic';
  src: url('../fonts/martel-bold-devanagari.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}

@font-face {
  font-family: 'Heading Indic';
  src: url('../fonts/rasa-semibold-gujarati.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
  unicode-range: U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}

/* ===== GLOBAL VARIABLES =====
   Palette: #000, #fff, #FBF6EF (warm cream band), #3A1C01 (deep brown,
   the logo's own colour) and #B77423 / #A05C10 (its gold, the darker tone
   used wherever gold has to carry text and meet contrast).
   No box-shadow anywhere. Radius fixed at 5px, border width at 1px.
   Headings: Columbia Serial Bold. Every other element: Roboto.
   Gap tokens keep their old names so all existing classes keep working;
   the values are now fluid clamps in the same rhythm as before
   (~10 / 20 / 40 / 60px), so no layout tightens or loosens. */
:root {
  /* Lets block-size animate to and from auto, which is what makes the
     FAQ panel slide instead of snap. Ignored where unsupported. */
  interpolate-size: allow-keywords;

  --color-main: #3A1C01;
  --color-secondary: #A05C10;
  --color-gold: #B77423;
  --color-section: #FBF6EF;
  --color-white: #FFFFFF;
  --color-black: #000000;

  --font-heading: 'Columbia Serial', 'Heading Indic', serif;
  --font-body: 'Roboto', sans-serif;

  --fs-h1: clamp(1.45rem, 1.1rem + 1.5vw, 2.6rem);
  --fs-h2: clamp(1.3rem, 1.1rem + 0.85vw, 1.85rem);
  --fs-h3: clamp(1.18rem, 1.06rem + 0.5vw, 1.45rem);
  --fs-h4: clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
  --fs-h5: clamp(1.05rem, 1rem + 0.22vw, 1.25rem);
  --fs-h6: clamp(0.98rem, 0.95rem + 0.14vw, 1.1rem);
  --fs-content: clamp(0.875rem, 0.845rem + 0.13vw, 0.95rem);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-medium: 1.4;
  --lh-loose: 1.7;

  --section-padding: clamp(2.5rem, 1.8rem + 3.2vw, 5rem);
  --container-width: 1360px;
  --container-pad: clamp(1rem, 0.7rem + 1.4vw, 2rem);

  --gap-xs: clamp(0.6rem, 0.5rem + 0.4vw, 0.85rem);
  --gap-s: 15px;
  --gap-m: clamp(1.75rem, 1.45rem + 1.3vw, 2.6rem);
  --gap-l: clamp(2.5rem, 2rem + 2vw, 3.75rem);

  --radius: 5px;
  --border-w: 1px;
  --ease: 0.25s ease;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-transform: none;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-content);
  line-height: var(--lh-loose);
  color: var(--color-black);
  background-color: var(--color-white);
  font-synthesis: none;
  /* clip, not hidden: hidden turns body into a scroll container on some
     mobile browsers, which stops the sticky header from sticking. */
  overflow-x: clip;
}

table {
  border-collapse: collapse;
  width: 100%;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-tight);
  color: var(--color-black);
}

/* Inline spans and links inside a heading follow the heading, not body text */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

a {
  text-decoration: none;
  color: inherit;
  font-size: var(--fs-content);
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}

/* Inline links inside body copy carry an underline; colour alone is not enough */
p a:not(.btn) {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

p a:not(.btn):hover {
  color: var(--color-black);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== UTILITIES ===== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  width: 100%;
}

.flex {
  display: flex;
}

.flex-col { display: flex; flex-direction: column; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.gap-s { gap: var(--gap-s); }
.bg-light { background-color: var(--color-section); }
.w-fit { width: fit-content; }
.text-accent { color: var(--color-secondary); }

.gap-xs {
  gap: var(--gap-xs);
}

.gap-s {
  gap: var(--gap-s);
}

.gap-m {
  gap: var(--gap-m);
}

.section {
  padding: var(--section-padding) 0;
}

.btn-group {
  display: flex;
  gap: var(--gap-s);
}

.btn,
.btn-primary,
.btn-outline {
  display: inline-block;
  font-size: var(--fs-content);
  line-height: var(--lh-medium);
  padding: var(--gap-xs) var(--gap-m);
  border: var(--border-w) solid var(--color-main);
  border-radius: var(--radius);
  background-color: var(--color-main);
  color: var(--color-white);
  text-align: center;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.btn:hover,
.btn-primary:hover,
.btn-outline:hover {
  background-color: transparent;
  border-color: var(--color-main);
  color: var(--color-main);
}

/* ----- DARK sections: header bar, footer, dono hero ----- */
header .btn,
footer .btn,
.hero .btn,
.page-hero .btn {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-main);
}

header .btn:hover,
footer .btn:hover,
.hero .btn:hover,
.page-hero .btn:hover {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  height: clamp(500px, 75vh, 650px);
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-black);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5; /* Darker overlay */
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s); /* Standardized gap */
}

.hero-content h1 {
  color: var(--color-white);
  line-height: 1.1;
  margin: 0;
}

.hero-content p {
  color: var(--color-white);
  max-width: 600px;
  margin: 0;
}

/* ===== GRID SECTION ===== */
.grid-section {
  background-color: var(--color-white);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-m);
}

.section-header-content {
  max-width: 700px;
}

@media (max-width: 768px) {
  :root {
    --gap-m: 25px;
    --gap-l: 40px;
    --section-padding: 50px;
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }

  .split-section, .split-section.reverse, .arch-grid, .asym-grid, .exp-list, .info-table {
    flex-direction: column !important;
    display: flex !important;
    grid-template-columns: 1fr !important;
    gap: var(--gap-m) !important;
  }

  .arch-img-large, .asym-item, .asym-item.tall {
    height: 300px !important;
    width: 100% !important;
    position: relative !important;
  }

  .split-img {
    height: 300px !important;
    width: 100% !important;
  }

  .live-video-wrap {
    flex: none !important;
    width: 100% !important;
  }

  .arch-images {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .arch-img-small {
    display: none; /* Removing small images on mobile as requested */
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: 20px !important;
  }

  .card-content {
    padding: 20px !important;
  }

  .arch-content, .split-content {
    padding: 0 !important; /* Removing all padding on mobile as requested */
    gap: 15px !important;
  }

  .asym-overlay {
    padding: 20px !important;
  }

  .exp-item {
    display: flex !important;
    flex-wrap: wrap !important;
    /* The item stacks as a column, so centring put the number and short
       titles in the middle of the box. Stretch keeps every line left-aligned. */
    align-items: stretch !important;
    gap: 15px !important;
    padding-bottom: 25px !important;
  }

  .exp-info {
    display: contents !important;
  }

  .exp-info h3 {
    flex: 1 !important;
    margin: 0 !important;
  }

  .exp-info p {
    width: 100% !important;
    margin: 0 !important;
  }
}

.section-header-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}

.section-header h2 {
  margin-bottom: 0;
  color: var(--color-black);
  text-align: left;
}

.section-header p {
  text-align: left;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-m);
}

.card {
  background: var(--color-section); /* Very light brand tint */
  padding: 0; /* Removing padding to allow image to span top */
  display: flex;
  flex-direction: column;
  transition: 0.4s ease;
  border: 1px solid rgba(58,28,1, 0.05);
  overflow: hidden;
}

.card-content {
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  flex-grow: 1;
}

.card:hover {
  transform: translateY(-10px);
}

.card-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.card h3 {
  color: var(--color-black);
  font-size: var(--fs-h3);
  text-align: left;
}

.card p {
  color: var(--color-black);
  text-align: left;
}

.card-link {
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  align-self: flex-start;
}

/* ----- The whole card is the click target -----
   The card's own link is stretched over the full card instead of a second
   wrapper anchor being added, so each card still carries exactly one link
   (which is what a crawler should see) while the entire box is clickable.
   Every card on the site holds at most one link, so nothing gets covered. */
.card {
  position: relative;
}

.card:has(.card-link) {
  cursor: pointer;
}

.card-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The arrow is drawn here rather than typed into the label, so it keeps its
   own box to the right of the text and can move on hover. */
.card-link::after {
  content: '';
  flex: 0 0 auto;
  width: 26px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 5h22M19 1l4 4-4 4' fill='none' stroke='%23A05C10' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--ease);
}

.card:hover .card-link::after,
.card-link:hover::after {
  transform: translateX(5px);
}

/* A visible response to hovering, so the card reads as clickable. */
.card:hover {
  border-color: var(--color-gold);
}

/* ===== HEADER ===== */

/* ===== HEADER MOBILE ===== */

/* ===== DIVERSE SECTION DESIGNS ===== */

/* 1. Split Feature (Liked Style) */
.split-section {
  display: flex;
  align-items: center;
  gap: var(--gap-l);
}

.split-section.reverse { flex-direction: row-reverse; }

.split-img {
  flex: 1;
  height: 500px;
  object-fit: cover;
  border: 1px solid rgba(58,28,1,0.05);
}

.split-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

/* 2. Architectural Grid (Redesign) */
.arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  align-items: center;
}

.arch-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-s);
}

.arch-img-large {
  grid-column: span 2;
  height: 350px;
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(58,28,1,0.05);
}

.arch-img-small {
  height: 300px;
  width: 100%;
  object-fit: cover;
  border: 1px solid rgba(58,28,1,0.05);
}

.arch-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

/* 3. Asymmetrical Grid (Gallery) */
.asym-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap-m);
}

.asym-item {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.asym-item.tall { height: 641px; grid-row: span 2; }

.asym-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s ease;
}

.asym-item:hover .asym-img { transform: scale(1.05); }

.asym-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(58,28,1,0.8) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gap-m);
  color: var(--color-white);
  gap: var(--gap-xs); /* Using gap method */
}

/* 4. Experience List */
.exp-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-l);
}

.exp-item {
  display: flex;
  /* The label sits above the entry, not beside it. Beside it the label was
     a shrinking flex item, so "Day 1" broke onto two lines and
     "Day 3 (Optional)" onto three. */
  flex-direction: column;
  gap: var(--gap-xs);
  padding-bottom: var(--gap-m);
  border-bottom: 1px solid rgba(58,28,1,0.1);
}

.exp-num {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: var(--lh-tight);
  color: var(--color-secondary);
}

.exp-info { display: flex; flex-direction: column; gap: 10px; }

/* ===== SECTION: INFO TABLE (Planning) ===== */
.info-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  border-top: 1px solid rgba(58,28,1,0.1);
  padding-top: var(--gap-m);
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-label {
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

/* Desktop Nav */

/* Desktop Dropdown */

/* Icons */

/* Mobile Menu Buttons */

/* Account / Wishlist / Cart icons — link out to the shop */

/* ===== FOOTER ===== */
footer {
  background-color: var(--color-main);
  color: var(--color-white);
  padding-top: 50px;
  padding-bottom: var(--gap-s);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--gap-l);
}

.footer-logo img {
  width: 160px;
  filter: brightness(0) invert(1);
  margin-bottom: 10px;
}

.footer-title {
  color: var(--color-white);
  font-size: var(--fs-h4);
  margin-bottom: 20px;
  font-weight: var(--fw-semibold);
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-link,
.footer-desc {
  font-size: var(--fs-content);
  color: var(--color-white);
}

.footer-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-link:hover {
  color: var(--color-secondary);
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--color-secondary);
  text-align: center;
}

/* ===== FOOTER NEWSLETTER FORM ===== */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  margin-top: 6px;
}
.newsletter-form input[type="email"] {
  font-family: var(--font-body);
  font-size: var(--fs-content);
  color: var(--color-black);
  border: 1px solid transparent;
  padding: 12px 16px;
  background: rgba(255,255,255,0.95);
}
.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--color-secondary);
}
.newsletter-form .btn {
  align-self: flex-start;
}
.newsletter-form .form-status {
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
}
.newsletter-form .form-status.is-success { color: #a8e0a8; }
.newsletter-form .form-status.is-error { color: #ffb3a3; }

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 1024px) {

  /* Mobile Submenu Fix */

  .hero {
    height: auto;
    padding: 120px 0 80px;
  }

  .hero-content {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }

  .hero-content p {
    max-width: 100%;
  }

  .btn-group {
    flex-direction: row; /* Back to row or stack if narrow */
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-s);
  }

  .section-header-content {
    max-width: 100%;
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-s);
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-m);
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== FAQ SECTION ===== */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-m);
}

.faq-item {
  border-left: 3px solid var(--color-secondary);
  padding-left: var(--gap-s);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-q {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  color: var(--color-black);
  line-height: var(--lh-medium);
}

.faq-a {
  color: var(--color-black);
  line-height: var(--lh-loose);
}

.faq-a strong {
  color: var(--color-black);
  font-weight: var(--fw-semibold);
  opacity: 1;
}

@media (max-width: 768px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
}
/* ===== BREADCRUMB ===== */
.breadcrumb-nav {
  background: var(--color-section);
  border-bottom: 1px solid rgba(58,28,1,0.08);
  padding: 12px 0;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.breadcrumb li:not(:last-child)::after {
  content: '›';
  margin: 0 8px;
}
.breadcrumb a { color: var(--color-secondary); }
.breadcrumb li:last-child {}

/* ===== PAGE HERO (text only — no image) ===== */
.page-hero {
  background: var(--color-main);
  padding: clamp(60px, 8vw, 100px) 0;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}
.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--gap-s);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}
.page-hero-content > h1,
.page-hero-content > p,
.page-hero-content > .hero-tags {
  max-width: 820px;
}
.page-hero h1 { color: var(--color-white); line-height: 1.1; max-width: 100%; }
.page-hero p {
  color: var(--color-white);
  max-width: 100%;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.7;
  margin-top: 0;
}
.legal-page .page-hero p {
  max-width: 100%;
}
.hero-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.hero-tag {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  color: var(--color-white);
  padding: 5px 15px;
  font-size: 0.78rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.4px;
  border-radius: var(--radius);
}

/* ===== QUICK FACTS GRID ===== */
.quick-facts {
  display: grid;
  /* Three per row. auto-fit used to pack all six into one line, which left
     each value squeezed into a narrow column and wrapping onto three lines.
     Tablet drops to two and phone to one via the queries further down. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-s);
}
.fact-card {
  background: var(--color-white);
  border: 1px solid rgba(58,28,1,0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 3px solid var(--color-secondary);
}
.fact-label {
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  letter-spacing: 1px;
  text-transform: uppercase !important;
}
.fact-value {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  color: var(--color-black);
  line-height: 1.3;
}

/* ===== STATS GRID ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap-s);
  text-align: center;
}
.stat-item {
  padding: var(--gap-m) var(--gap-s);
  border: 1px solid rgba(58,28,1,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  background: var(--color-section);
}
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--color-secondary);
  line-height: 1;
}
.stat-label {
  font-size: 0.82rem;
  line-height: 1.4;
}

/* ===== HIGHLIGHT BOX ===== */
.highlight-box {
  background: var(--color-section);
  border-left: 4px solid var(--color-secondary);
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.highlight-box p {
  font-size: 1.05rem;
  line-height: 1.75;
  font-style: italic;
}

/* ===== TIMINGS TABLE ===== */
.timings-table-wrap { overflow-x: auto; }
.timings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.timings-table th {
  background: var(--color-main);
  color: var(--color-white);
  padding: 14px 20px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.timings-table td {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(58,28,1,0.07);
  vertical-align: middle;
}
.timings-table tr:nth-child(even) td { background: var(--color-section); }
.timings-table tr:last-child td { border-bottom: none; }
.t-open  { color: var(--color-black); font-weight: var(--fw-semibold); }
.t-free  { color: var(--color-black); font-weight: var(--fw-semibold); }

/* ===== INFO ROW LIST ===== */
.info-list {
  border: 1px solid rgba(58,28,1,0.08);
  display: flex;
  flex-direction: column;
}
.info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid rgba(58,28,1,0.07);
}
.info-row:last-child { border-bottom: none; }
.info-key {
  background: var(--color-section);
  padding: 13px 20px;
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  font-size: 0.88rem;
  border-right: 1px solid rgba(58,28,1,0.07);
  display: flex;
  align-items: flex-start;
}
.info-val {
  padding: 13px 20px;
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ===== LEGAL PAGE CONTENT (Privacy / Terms / Refund) =====
   Spacing here is controlled entirely by gap on the parent —
   no margins on the child elements — so it stays consistent
   regardless of how many blocks a page has. */
.legal-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}
.legal-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}
.legal-block h2,
.legal-block p,
.legal-block ul {
  margin: 0;
}

/* ===== CONTACT PAGE LAYOUT ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  align-items: center;
}
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== CONTACT FORM ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  max-width: 100%;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
.form-row label {
  font-weight: var(--fw-semibold);
  font-size: 0.88rem;
  color: var(--color-secondary);
}
.form-row input,
.form-row textarea {
  font-family: var(--font-body);
  font-size: var(--fs-content);
  color: var(--color-black);
  border: 1px solid rgba(58,28,1,0.15);
  padding: 13px 16px;
  background: var(--color-section);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
}
.form-row textarea {
  resize: vertical;
  min-height: 140px;
}
.form-row input.is-invalid,
.form-row textarea.is-invalid {
  border-color: #b3261e;
}
.field-error {
  color: #b3261e;
  font-size: 0.82rem;
}
.field-error:empty {
  display: none;
}
/* Honeypot — kept in the tab order out of the way, invisible to real visitors. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form .btn {
  align-self: flex-start;
}
.form-status {
  font-size: 0.9rem;
  font-weight: var(--fw-medium);
}
.form-status.is-success { color: #2a7a2a; }
.form-status.is-error { color: #b3261e; }

/* ===== REACH CARDS ===== */
.reach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gap-m);
}
.reach-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--gap-m);
  border: 1px solid rgba(58,28,1,0.08);
  border-top: 3px solid var(--color-main);
}
.reach-card h4 { color: var(--color-black); margin-bottom: 2px; }

/* ===== COMING SOON ===== */
.coming-soon-wrap {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-m);
}
.coming-soon-wrap h2 { max-width: 100%; }
.coming-soon-wrap > p {
  max-width: 100%;
  line-height: 1.75;
}
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-s);
  width: 100%;
  text-align: left;
}
.chapter-item {
  padding: 16px 20px;
  border: 1px solid rgba(58,28,1,0.08);
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--color-section);
}
.chapter-num {
  font-size: 0.72rem;
  color: var(--color-secondary);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.8px;
  text-transform: uppercase !important;
}
.chapter-name { font-family: var(--font-heading); font-size: 0.92rem; }
.chapter-verses { font-size: 0.78rem; color: #000000; }

/* ===== NEARBY ATTRACTIONS ===== */
.nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap-m);
}
.nearby-card {
  border: 1px solid rgba(58,28,1,0.08);
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.nearby-dist {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--color-secondary);
  color: white;
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  letter-spacing: 0.3px;
}
.nearby-card h3 { padding-right: 70px; }

/* ===== MONTH GRID ===== */
.month-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-s);
}
.month-card {
  padding: 20px;
  border: 1px solid rgba(58,28,1,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.month-name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  color: var(--color-black);
}
.month-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  letter-spacing: 0.4px;
}
.badge-ideal    { background: rgba(42,122,42,0.1);  color: var(--color-black); }
.badge-good     { background: rgba(58,28,1,0.12); color: var(--color-black); }
.badge-hot      { background: rgba(192,57,43,0.1);  color: var(--color-black); }
.badge-festival { background: rgba(58,28,1,0.08);   color: var(--color-black); }

/* ===== RESPONSIVE for new components ===== */
@media (max-width: 768px) {
  .info-row { grid-template-columns: 1fr; }
  .info-key { border-right: none; border-bottom: 1px solid rgba(58,28,1,0.07); }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .timings-table th, .timings-table td { padding: 10px 14px; }
}
@media (max-width: 480px) {
  .quick-facts { grid-template-columns: 1fr; }
  .stat-grid   { grid-template-columns: 1fr 1fr; }
}

/* ===== BREADCRUMB INSIDE DARK HERO (HI pages) ===== */
.page-hero .breadcrumb-nav {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.page-hero .breadcrumb a { color: var(--color-white); }
.page-hero .breadcrumb li:last-child { color: var(--color-white); opacity: 1; }
.page-hero .breadcrumb li:not(:last-child)::after { color: var(--color-white); }

/* ===== CONTENT BODY SPACING — gap method =====
   .container's direct children (section-header, headings, paragraphs,
   grids, tables, whatever a page uses) are spaced by gap on the
   parent, not margin on each child. This is the same pattern as
   .legal-content/.legal-block — one gap value, no per-element margin
   rules to keep in sync, and no double-spacing when gap and margin
   would otherwise stack. Works automatically for any content type,
   including ones with no explicit rule here. */
.section > .container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

/* ===== HERO SUBTITLE (used in HI/GU inner pages) ===== */
.hero-subtitle {
  color: var(--color-white);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.7;
  max-width: 660px;
  margin-top: var(--gap-s);
}

/* ===== SECTION HEADER — standalone h2 variant (no button/content wrapper) ===== */
.section-header > h2 {
  color: var(--color-black);
}
/* When section-header directly wraps h2 (no .section-header-content), it's a block, not the flex row/button layout */
.section-header:has(> h2) {
  display: block;
}

/* ===== INNER PAGE PARAGRAPH SPACING ===== */
.section .container > p {
  line-height: 1.8;
  color: var(--color-black);
}

/* ===== GU NAV — ul/li structure compatibility ===== */

/* ===== TIMINGS TABLE MOBILE ===== */
@media (max-width: 600px) {
  .timings-table th:nth-child(3),
  .timings-table td:nth-child(3) { display: none; }
}

/* ===== SECTION GAPS & ELEMENT SPACING ===== */
.section-header.no-btn {
  display: block;
}
.section-header.no-btn .section-header-content {
  max-width: 100%;
}

/* ===== MOBILE SECTION PADDING ===== */
@media (max-width: 480px) {
  :root { --section-padding: 40px; }
  .page-hero { padding: clamp(50px, 8vw, 80px) 0; }
  .quick-facts { gap: 12px; }
  .fact-card { padding: 16px; }
  .stat-grid { gap: 12px; }
  .stat-item { padding: var(--gap-s); }
  .reach-grid { gap: var(--gap-s); }
  .reach-card { padding: var(--gap-s); }
  .highlight-box { padding: var(--gap-s); }
  .faq-list { gap: var(--gap-s); }
  .exp-list { gap: var(--gap-m); }
}

/* ====== 3000-WORD SEO PAGES FIXES ====== */
.content-article {
    background: #fff;
    padding: 30px;
    border-radius: var(--radius);
    margin-bottom: 40px;
}

.content-article h2 {
    color: var(--color-secondary);
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-section);
}

.content-article h3 {
    color: #000000;
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.content-article h4 {
    color: #000000;
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 10px;
}

.content-article p {
    font-size: 16px;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 20px;
}

.content-article ul, .content-article ol {
    margin-bottom: 25px;
    padding-left: 20px;
}

.content-article li {
    font-size: 16px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 10px;
}

/* Specific Fix for Places to Visit Page */
.attraction-card {
    background: #fff;
    padding: 25px;
    border-radius: var(--radius);
    margin-bottom: 30px;
    border-left: 4px solid var(--color-gold);
}

.attraction-card h3 {
    color: var(--color-secondary);
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 24px;
}

.attraction-card p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: #000000;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}
.data-table th, .data-table td {
    padding: 12px 15px;
    border: 1px solid rgba(58,28,1,0.2);
    text-align: left;
}
.data-table th {
    background-color: var(--color-secondary);
    color: white;
}
/* ===== AD SLOTS ===== */
.ad-slot-section {
  padding: 0;
}

/* If the section immediately above the ad has a background (the
   bg-light class, or an inline style with its own background colour),
   give the ad slot breathing room from it. Otherwise keep top padding at 0.
   (If both sides are coloured, both rules below fire together, so padding
   is added on both sides automatically.) */
.bg-light + .ad-slot-section,
[style*="background"] + .ad-slot-section {
  padding-top: var(--gap-l);
}

/* Same check for the section immediately below the ad. Otherwise keep
   bottom padding at 0. */
.ad-slot-section:has(+ .bg-light),
.ad-slot-section:has(+ [style*="background"]) {
  padding-bottom: var(--gap-l);
}

.ad-slot {
  max-width: var(--container-width);
  min-height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ad-slot ins.adsbygoogle {
  width: 100%;
}

/* Demo-only styling, used to preview where an ad will sit before the real
   AdSense code is dropped in. Harmless to leave in place; only applies when
   .ad-slot-label / .ad-slot-sub markup is actually present in a page. */
.ad-slot:has(.ad-slot-label) {
  flex-direction: column;
  gap: 6px;
  background: repeating-linear-gradient(45deg, #ff0000, #ff0000 10px, #cc0000 10px, #cc0000 20px);
  border: 4px solid #990000;
  border-radius: 6px;
}

.ad-slot-label {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ff0000;
  background: var(--color-white);
  padding: 8px 22px;
  border-radius: 4px;
  border: 3px solid #990000;
}

.ad-slot-sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.6);
  padding: 3px 10px;
  border-radius: 3px;
}

@media (min-width: 768px) {
  .ad-slot { min-height: 250px; }
}

.data-table tr:nth-child(even) {
    background-color: var(--color-section);
}

/* ===== PRODUCT SHOWCASE (shop products embedded on content pages) ===== */
.product-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-s);
}

@media (min-width: 768px) {
  .product-showcase-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (min-width: 1024px) {
  .product-showcase-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
}

.product-showcase-card {
  display: flex;
  flex-direction: column;
  background: var(--color-section);
  border: 1px solid rgba(58,28,1, 0.05);
  text-decoration: none;
  color: var(--color-black);
  transition: 0.3s ease;
}

.product-showcase-card:hover {
  border-color: rgba(58,28,1, 0.15);
}

/* When the surrounding section is bg-light, flip the card to white so it
   still stands out (mirrors the shop page's own white-body / light-card
   contrast, just inverted). */
.bg-light .product-showcase-card {
  background: var(--color-white);
}

.product-showcase-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.product-showcase-info {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-showcase-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  line-height: var(--lh-medium);
  margin: 0;
}

.product-showcase-price {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--color-secondary);
  margin: 0;
}

.product-showcase-footer {
  margin-top: var(--gap-m);
  text-align: center;
}

/* Old full-width product grid is replaced on these pages by the
   lighter-weight floating panel (desktop) and mobile chip banner
   below, both injected by nav.js. */
.shop-products-section { display: none !important; }

/* ===== PRODUCT FLOATING PANEL (all screen sizes) ===== */
.product-float-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: var(--color-white);
  border: 1px solid rgba(58,28,1, 0.25);
  border-radius: var(--radius);
  z-index: 500;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: block;
}
@media (max-width: 480px) {
  .product-float-panel { width: 280px; bottom: 12px; right: 12px; }
  .product-float-item img { width: 44px; height: 44px; }
  .product-float-item-title { font-size: 12.5px; }
}
.product-float-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* The floating panel is switched off for now. nav.js still builds it, so
   deleting this rule brings it back. */
.product-float-panel,
.product-float-panel.is-visible {
  display: none !important;
}
.product-float-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(58,28,1, 0.15);
}
.product-float-panel-head span {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.product-float-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--color-main);
  padding: 0 4px;
}
.product-float-panel-close:hover { opacity: 1; }
.product-float-items {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-float-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-black);
}
.product-float-item img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.product-float-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.product-float-item-title {
  font-size: 12.5px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-float-item-price {
  font-size: 12.5px;
  color: var(--color-secondary);
  font-weight: 600;
}
.product-float-panel-cta {
  display: block;
  text-align: center;
  padding: 10px;
  margin: 4px 14px 14px;
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* Mobile banner replaced — mobile now uses the same floating panel
   as desktop instead of a separate compact banner. Kept hidden. */
.product-mobile-banner {
  display: none !important;
}
.product-mobile-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(58,28,1, 0.3);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12px;
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;
}
.product-mobile-chip strong { color: var(--color-secondary); }
.product-mobile-banner-all {
  flex-shrink: 0;
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Author byline in the page hero */
.page-hero-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-white);
  max-width: 820px;
}
.page-hero-byline a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }
.page-hero-byline a:hover { color: var(--color-white); }
.page-hero-byline .byline-sep {}

/* ===== FIGURE SECTION SPACING =====
   The section carries no padding of its own, so it never doubles up with
   the padding of a plain white section next to it. Padding is added only
   on a side where the neighbouring block has its own background band
   (the hero, bg-light, or an inline coloured background). The band-above
   / band-below classes are written into the markup because nav.js injects
   an element between the hero and this section at runtime, which breaks
   any adjacent-sibling selector. */
.figure-section { padding: 0; }
.figure-section.band-above { padding-top: var(--section-padding); }
.figure-section.band-below { padding-bottom: var(--section-padding); }

/* ===== PAGE FIGURE (content image + credit) ===== */
.page-figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.page-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--color-section);
}

/* ----- Figure paired beside body copy -----
   The picture floats instead of taking a flex column. Two equal columns
   only work when both run to the same height; where the copy is far longer
   than the picture the row either left a tall gap beside it or stranded the
   picture in the middle. Floating it means the first part of the copy sits
   beside the picture and the rest simply continues underneath at full
   width, which reads correctly at any length. */
.split-section:has(> .page-figure) {
  display: block;
}

.split-section:has(> .page-figure)::after {
  content: '';
  display: table;
  clear: both;
}

.split-section > .page-figure {
  float: left;
  width: 42%;
  margin: 0 var(--gap-m) var(--gap-s) 0;
}

/* The copy must be a plain block for its lines to wrap around the float;
   as a flex container it would sit beside the picture instead. The gap the
   flex column used to provide is restored as margins between children. */
@media (min-width: 769px) {
  .split-section > .page-figure ~ .split-content {
    display: block;
  }
  .split-section > .page-figure ~ .split-content > * + * {
    margin-top: var(--gap-s);
  }
}

@media (max-width: 768px) {
  .split-section > .page-figure {
    float: none;
    width: 100%;
    margin: 0 0 var(--gap-s) 0;
  }
}

/* Running text wraps around the float, but a grid or a table cannot: it
   establishes its own formatting context, so beside the picture it would
   just sit in a narrow column and stay narrow after the picture ended.
   Clearing drops it below the picture where it gets the full width. */
/* Only blocks that genuinely cannot sit beside the float are cleared, and
   nav.js decides which those are by looking at what each one actually is
   (a table or a grid). Clearing every div, as this rule first did, pushed
   ordinary content boxes below the picture too and left the space beside
   its lower half empty. */
@media (min-width: 769px) {
  .split-content > .clears-figure {
    clear: left;
  }
}

/* ----- Short copy: two centred columns instead of a float -----
   The float is right when the copy outruns the picture, but when the copy
   is the shorter of the two it would hug the top and leave the space beside
   the lower half of the picture empty. nav.js measures both and adds
   .is-short to those rows, which puts them back into a centred flex row.
   The class is only ever set above 768px. */
@media (min-width: 769px) {
  .split-section.is-short:has(> .page-figure),
  .split-section.is-cols:has(> .page-figure) {
    display: flex;
    gap: var(--gap-m);
  }

  .split-section.is-short:has(> .page-figure) { align-items: center; }
  .split-section.is-cols:has(> .page-figure) { align-items: flex-start; }

  .split-section.is-short > .page-figure,
  .split-section.is-cols > .page-figure {
    float: none;
    width: auto;
    flex: 0 0 42%;
    min-width: 0;
    margin: 0;
  }

  .split-section.is-short > .split-content,
  .split-section.is-cols > .split-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
    flex: 1 1 auto;
    min-width: 0;
  }

  /* the float-mode spacing and clearing have no job in a flex row */
  .split-section.is-short > .split-content > * + *,
  .split-section.is-cols > .split-content > * + * {
    margin-top: 0;
  }

  .split-section.is-short > .split-content > *,
  .split-section.is-cols > .split-content > * {
    clear: none;
  }
}

.split-section > .page-figure img {
  height: 500px;
  border-radius: 0;
  border: var(--border-w) solid rgba(58,28,1,0.05);
}

@media (max-width: 768px) {
  .split-section > .page-figure img {
    height: 300px !important;
    width: 100% !important;
  }
}

.page-figure figcaption {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #000000;
}
.page-figure figcaption a { color: #000000; text-decoration: underline; text-underline-offset: 2px; }
.page-figure figcaption a:hover { color: var(--color-secondary); }

/* ===== LIVE DARSHAN VIDEO EMBED ===== */
.live-video-wrap {
  position: relative;
  flex: 1;
  aspect-ratio: 16 / 9;
  background: var(--color-main);
}
.live-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.btn-group.amount-group { flex-wrap: wrap; }
.btn-group.amount-group .btn { flex: 1 1 90px; text-align: center; }

#give .contact-grid { align-items: start; }

@media (min-width: 901px) {
  #give .contact-grid > .legal-block:last-child {
    position: sticky;
    top: 110px;
  }
}



/* ============================================================
   DESIGN SYSTEM OVERRIDES — final say
   Header, drawer, dropdown and footer are each declared more than once
   earlier in this file (legacy duplicates from older page templates).
   These closing rules are the single source of truth for the new look,
   so the design no longer depends on which duplicate wins the cascade.
   Nothing below touches .ad-slot / .ad-slot-section — ad geometry and
   the band-aware ad spacing are deliberately left exactly as they were.
   ============================================================ */

/* ---------- Header bar: solid main colour, white content ---------- */

/* Desktop nav: white text, underline slides in on hover instead of moving it */

/* Desktop dropdown: bordered white panel, no shadow */

/* Header icons and language pill */

/* ---------- Mobile drawer: same maroon panel as the bar ---------- */

/* ---------- Footer: same treatment as the header ---------- */
footer {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* Wrapped in the desktop query so the mobile stacking defined earlier
   in this file is not overridden. */
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

.footer-title,
.footer-link,
.footer-desc { color: var(--color-white); }

/* Footer links carry the same sliding underline as the header nav */
.footer-link {
  /* inline-flex so the box hugs its text: as a block-level flex item inside
     the <li> it filled the whole column, and the sliding underline is
     painted across the box, so hovering drew a rule right across the
     footer instead of under the words. */
  display: inline-flex;
  align-self: flex-start;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--color-white), var(--color-white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 var(--border-w);
  transition: background-size var(--ease), color var(--ease);
}

.footer-link:hover {
  color: var(--color-white);
  background-size: 100% var(--border-w);
}

.footer-bottom {
  border-top: var(--border-w) solid var(--color-white);
}

.newsletter-form input[type="email"]:focus {
  border-color: var(--color-white);
}

/* ---------- Section header: text fills the row, action sits right ---------- */
/* The 700px cap is gone. The text column simply takes whatever width the
   button leaves, so it stays flush to the button at every screen size
   without a fixed value. min-width:0 lets a long heading wrap instead of
   pushing the button off the row. */
.section-header {
  flex-direction: row;
  /* The button sits centred against the whole text block, not on its
     baseline, so it reads as one row however many lines the intro runs to. */
  align-items: center;
}

.section-header-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
}

/* The button keeps its natural size — never stretched, never squeezed. */
.section-header > .btn {
  flex: 0 0 auto;
}

/* On a phone the two stack: text first, button underneath. */
@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Running text stays black; the main colour is for accents and links only. */
.card p,
.section .container > p,
.faq-q,
.faq-a,
.fact-value,
.month-name,
.product-showcase-title {
  color: var(--color-black);
}


/* ---------- Text colour rule: only #fff or #000, never a tint ----------
   Inside a dark band (the two heroes, an image overlay, the footer) every
   piece of text is solid white. Everywhere else text is solid black.
   No opacity and no rgba tints are used on text anywhere on the site. */
.asym-overlay :is(h1,h2,h3,h4,h5,h6,p,span,li,strong,em,b,small,time,figcaption),
.hero-content :is(h1,h2,h3,h4,h5,h6,p,span,li,strong,em,b,small,time,figcaption),
.page-hero    :is(h1,h2,h3,h4,h5,h6,p,span,li,strong,em,b,small,time,figcaption),
footer        :is(h1,h2,h3,h4,h5,h6,p,span,li,strong,em,b,small,time,figcaption) {
  color: var(--color-white);
}

/* Buttons keep their own colours inside those bands. */
.asym-overlay .btn *,
.hero-content .btn *,
.page-hero .btn *,
footer .btn * {
  color: inherit;
}


/* ----- Card grids: column count follows how much each card holds -----
   auto-fit only knows how wide a card may be, not how much text is in it,
   so a grid of long cards was packing five columns onto a desktop row and
   each card came out a few words wide and enormously tall. nav.js measures
   the text and sets one of these classes. Below 769px the auto-fit rule
   underneath still applies, so the grids collapse on a phone as before. */
@media (min-width: 769px) {
  .grid-cols-1 { grid-template-columns: 1fr; }
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   HEADER + MEGA MENU
   Every earlier header and nav rule was removed and replaced by this
   one block: there were two competing mobile drawers, and a dropdown
   that opened on hover in one rule and on click in another.
   One breakpoint decides the mode. From 1280px the five menus sit in
   the bar with a full-width panel under each; below that the same
   markup becomes a slide-in drawer with accordions. 1280px is the
   width at which five menus, Shop and the three shop icons
   still fit with room to breathe in all three languages.
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-main);
}

header > .container {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  height: 50px;
  width: auto;
  /* The logo artwork is dark; on the brown bar it is flipped to white. */
  filter: brightness(0) invert(1);
}

.header-right {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 22px;
  margin-left: auto;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-icon-link {
  position: relative;
  display: flex;
  color: var(--color-white);
  transition: color var(--ease);
}

.header-icon-link:hover { color: var(--color-section); }

.header-icon-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-main);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 18px;
  text-align: center;
}

.header-right .btn {
  flex-shrink: 0;
  padding: 11px 24px;
  white-space: nowrap;
}

/* ----- Language switcher -----
   A dropdown rather than three visible buttons: the bar at 1280px was
   already carrying five menus, Shop and three shop icons, and
   three more targets in it left nothing any room. Shut, this is one
   globe and two letters. The three links sit in the markup either way,
   which is the half that matters to a crawler — only their visibility
   is toggled. */
.lang-drop {
  position: relative;
  flex-shrink: 0;
}

/* The dropdown shows full names; the abbreviation is for the drawer row. */
.lang-abbr { display: none; }

/* No border, no pill, no fill. Nothing else in this bar is boxed — the
   menus are plain text and the icons are plain glyphs — so an outlined
   button read as something bolted on afterwards. It is now the same
   thing as a menu: white text, a chevron, and the same underline that
   slides in under the others. */
.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs-content);
  line-height: var(--lh-medium);
  color: var(--color-white);
  white-space: nowrap;
  cursor: pointer;
}

.lang-btn svg { flex-shrink: 0; }

.lang-btn svg:last-child { transition: transform var(--ease); }

.lang-drop.is-open .lang-btn svg:last-child { transform: rotate(180deg); }

/* The panel takes the same white-on-gold treatment as the mega menu, so
   the two read as the same kind of thing dropping out of the same bar. */
.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 18px);
  right: 0;
  z-index: 1002;
  min-width: 172px;
  background-color: var(--color-white);
  border: var(--border-w) solid rgba(58, 28, 1, 0.12);
  border-top: 3px solid var(--color-gold);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.lang-drop.is-open .lang-menu { display: block; }

.lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 15px;
  font-size: var(--fs-content);
  line-height: var(--lh-medium);
  color: var(--color-black);
  transition: background-color var(--ease), color var(--ease);
}

.lang-item + .lang-item { border-top: var(--border-w) solid rgba(58, 28, 1, 0.1); }

.lang-item:hover {
  background-color: var(--color-section);
  color: var(--color-secondary);
}

/* A tick, not a highlight: the row you are on is stated, not shouted. */
.lang-item.is-on {
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
}

.lang-item.is-on::after {
  content: '';
  width: 11px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* Top-level entries: a plain link (Shop) or a button that opens a panel. */
.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--fs-content);
  line-height: var(--lh-medium);
  color: var(--color-white);
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}

.nav-link svg {
  flex-shrink: 0;
  transition: transform var(--ease);
}

.nav-item.is-open > .nav-link svg { transform: rotate(180deg); }

.menu-btn,
.close-btn {
  display: none;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--color-white);
  cursor: pointer;
}

.menu-btn svg,
.close-btn svg {
  width: 28px;
  height: 28px;
}

.mobile-icons { display: none; }

/* ----- Panel content, shared by both modes ----- */
.mega { display: none; }

.nav-item.is-open > .mega { display: block; }

.mega-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-medium);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-secondary);
}

.mega-title svg { display: none; }

.mega-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}


.mega-link {
  display: block;
  padding: 7px 0;
  font-size: var(--fs-content);
  line-height: var(--lh-medium);
  color: var(--color-black);
  transition: color var(--ease);
}

/* The drawer keeps roomy tap targets; the bar tightens them below. */

.mega-link:hover,
.mega-link[aria-current="page"] { color: var(--color-secondary); }


/* ---------- Bar mode: 1280px and up ---------- */
@media (min-width: 1280px) {
  .mobile-lang { display: none; }

  .nav-links {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 26px;
  }

  .nav-item {
    display: flex;
    align-items: center;
  }

  /* Sliding underline under the hovered, open or current menu */
  .nav-link {
    background-image: linear-gradient(var(--color-white), var(--color-white));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 var(--border-w);
    transition: background-size var(--ease), color var(--ease);
  }

  .nav-link:hover,
  .nav-item.is-open > .nav-link,
  .nav-item.is-current > .nav-link {
    background-size: 100% var(--border-w);
  }

  /* The language button behaves as one of them. */
  .lang-btn {
    background-image: linear-gradient(var(--color-white), var(--color-white));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 var(--border-w);
    transition: background-size var(--ease);
  }

  .lang-btn:hover,
  .lang-drop.is-open .lang-btn { background-size: 100% var(--border-w); }

  /* The header bar's own container is the panel's positioning box, so a
     panel can be measured against the page's content edges rather than the
     window's. */
  header > .container { position: relative; }

  /* A panel is only as wide as its lists need. Its right edge lines up with
     the content edge of the page, which is where the menus themselves end,
     so two lists make a small panel and five make a wide one instead of
     every menu opening the same full-width sheet with empty space in it. */
  .mega {
    position: absolute;
    top: 100%;
    right: var(--container-pad);
    width: max-content;
    max-width: calc(100% - var(--container-pad) * 2);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--color-white);
    border: var(--border-w) solid rgba(58, 28, 1, 0.12);
    border-top: 3px solid var(--color-gold);
    border-radius: 0 0 var(--radius) var(--radius);
  }

  /* Columns are laid out by the flow, so a panel takes however many its
     menu has without the stylesheet naming a count. Each is given a width
     that suits the link names rather than a share of the window.
     A shade tighter than the page's own rhythm, too: a panel that drops over
     the page is read in a glance, so leading that suits an article just makes
     it taller than it needs to be — but not so tight that it reads as fine
     print. */
  .mega-inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(190px, 17vw, 260px);
    column-gap: var(--gap-m);
    padding-block: 26px 30px;
    width: auto;
  }

  /* Five lists would otherwise run past the page edge on a 1280px screen. */
  .mega-inner.cols-5 {
    grid-auto-columns: clamp(172px, 15vw, 220px);
    column-gap: var(--gap-s);
  }

  /* Column titles are plain headings here; they only toggle in the drawer.
     The hairline under each is what gives the panel its structure now that
     nothing else is drawn in it. */
  .mega-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: var(--border-w) solid rgba(58, 28, 1, 0.14);
    pointer-events: none;
    cursor: default;
  }

  .mega-link { padding: 4px 0; }
}

/* At 1280-1439px the bar was already carrying five menus, Shop, three
   shop icons with little room to spare. The switcher needs
   about 120px, so the gaps and its own padding tighten over that range
   and open back up at 1440px. */
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav-links { gap: 17px; }

  .header-right { gap: 15px; }


  .header-right .btn { padding: 11px 18px; }
}

/* Nothing in the bar may push the page wider than the window. */
@media (min-width: 1280px) {
  header > .container { flex-wrap: nowrap; }

  .nav-links { min-width: 0; }
}

/* ---------- Drawer mode: below 1280px ---------- */
@media (max-width: 1279px) {
  .menu-btn,
  .close-btn { display: block; }

  .desktop-icons,
  .desktop-lang { display: none; }

  .mobile-icons {
    display: block;
    margin-top: var(--gap-m);
  }

  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: min(88vw, 380px);
    padding: 72px 22px 32px;
    overflow-y: auto;
    background: var(--color-main);
    transform: translateX(-100%);
    transition: transform var(--ease);
  }

  .nav-links.active { transform: translateX(0); }

  .close-btn {
    position: absolute;
    top: 18px;
    right: 14px;
  }

  .nav-item { border-bottom: var(--border-w) solid rgba(255,255,255,0.2); }

  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 1.02rem;
  }

  .nav-item.is-open > .nav-link,
  .nav-item.is-current > .nav-link { color: var(--color-section); }

  .nav-item.is-open > .mega { padding-bottom: 10px; }

  .mega .container { padding: 0; }

  .mega-col { border-top: var(--border-w) solid rgba(255,255,255,0.12); }

  .mega-title {
    padding: 13px 0 13px 12px;
    color: var(--color-section);
    cursor: pointer;
  }

  .mega-title svg {
    display: block;
    transition: transform var(--ease);
  }

  .mega-col.is-col-open .mega-title svg { transform: rotate(180deg); }

  .mega-col:not(.is-col-open) .mega-list { display: none; }

  .mega-link {
    padding: 9px 0 9px 24px;
    color: var(--color-white);
  }

  .mega-link:hover,
  .mega-link[aria-current="page"] { color: var(--color-section); }


  /* At the top of the drawer, above the menus: one row, three equal
     segments, the current one filled. Four stacked rows for a choice
     between three things was more furniture than the choice deserved.
     Nothing here can overflow — the segments share the width equally
     and the labels shorten on a narrow phone. */
  .mobile-lang { margin-bottom: var(--gap-s); }

  .mobile-lang .lang-btn { display: none; }

  .mobile-lang .lang-menu {
    display: flex;
    position: static;
    min-width: 0;
    gap: 3px;
    padding: 3px;
    background-color: rgba(255, 255, 255, 0.11);
    border: 0;
    border-radius: 100px;
  }

  .mobile-lang .lang-item {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    gap: 0;
    padding: 9px 4px;
    border-radius: 100px;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--color-white);
    white-space: nowrap;
    overflow: hidden;
  }

  .mobile-lang .lang-item + .lang-item { border-top: 0; }

  .mobile-lang .lang-item:hover {
    background: none;
    color: var(--color-section);
  }

  /* Filled, so no tick is needed to say which one you are on. */
  .mobile-lang .lang-item.is-on {
    background-color: var(--color-white);
    color: var(--color-main);
    font-weight: var(--fw-semibold);
  }

  .mobile-lang .lang-item.is-on::after { display: none; }

  .header-right { gap: 14px; }

  .header-right .btn {
    padding: 10px 18px;
    font-size: 0.9rem;
  }
}

@media (max-width: 420px) {
  /* Three full names in a 280px row is too tight to read; EN / हिं / ગુ
     says the same thing and the filled segment shows which is on. */
  .mobile-lang .lang-full { display: none; }

  .mobile-lang .lang-abbr { display: block; }

  .logo img { height: 42px; }

  .header-right { gap: 10px; }

  .header-right .btn {
    padding: 9px 13px;
    font-size: 0.82rem;
  }
}


@media (min-width: 1025px) {
  .mobile-lang {
    display: none;
  }
}

.coming-soon-wrap h1 { max-width: 620px; }

.section .container > p:first-child { margin-top: 0; }

.section .container > p + p { margin-top: var(--gap-s); }

.section .container > .section-header + p { margin-top: 0; }

.section .container > .highlight-box,
.section .container > .timings-table-wrap,
.section .container > .info-list,
.section .container > .reach-grid,
.section .container > .stat-grid,
.section .container > .quick-facts,
.section .container > .faq-list,
.section .container > .nearby-grid,
.section .container > .month-grid,
.section .container > .exp-list,
.section .container > .coming-soon-wrap { margin-top: var(--gap-m); }

.section .container > h2,
.section .container > h3 { margin-top: var(--gap-m); }

.section .container > h3 + p,
.section .container > h2 + p { margin-top: var(--gap-s); }

/* The count badge is hidden while it reads 0; wishlist.js and the side
   cart toggle .is-empty. This lived beside the old header icon rules in
   woocommerce.css and is kept here with the new header styles. */
.header-icon-count.is-empty {
  opacity: 0;
}

/* Drawer: smooth open/close for menus and their columns */
@media (max-width: 1279px) {
  .mega { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease, padding .35s ease; }
  .mega > .container { overflow: hidden; min-height: 0; }
  .nav-item.is-open > .mega { grid-template-rows: 1fr; }
  .mega-col:not(.is-col-open) .mega-list,
  .mega-list { display: flex; max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .mega-col.is-col-open .mega-list { max-height: 1600px; }
}

/* ----- Ad box -----
   Until AdSense puts something in a slot, the slot takes no space (it keeps
   its width, which AdSense needs). As soon as anything shows inside it — a
   normal ad, or the content AdSense drops into an "unfill-optimized" slot —
   the slot becomes a tinted box with an "Advertisement" title above it.
   The box lines up with the page content on every screen; nav.js asks
   AdSense for ads sized to the box (data-full-width-responsive="false"). */
.ad-slot { min-height: 0; flex-direction: column; gap: 6px; width: 100%; align-self: stretch; box-sizing: border-box; margin: 0; padding: 0; overflow: visible; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-slot:has(ins > *) {
  position: relative;
  margin-top: calc(var(--gap-l) + 22px);
  padding: 12px;
  background: var(--color-section);
  border: 1px solid rgba(58,28,1,0.10);
  border-radius: var(--radius);
}
.bg-light .ad-slot:has(ins > *),
[style*="background"] .ad-slot:has(ins > *) { background: #FFFDF9; }
.ad-slot:has(ins > *)::before {
  content: "Advertisement";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(58,28,1,0.55);
}
.ad-slot ins.adsbygoogle { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; overflow: hidden !important; }


/* Auto ads that AdSense places by itself get the same title and box. */
.google-auto-placed:has(ins > *) {
  position: relative;
  box-sizing: border-box;
  max-width: var(--container-width);
  margin: calc(var(--gap-l) + 22px) auto var(--gap-l) !important;
  padding: 12px !important;
  background: var(--color-section);
  border: 1px solid rgba(58,28,1,0.10);
  border-radius: var(--radius);
}
.google-auto-placed:has(ins > *)::before {
  content: "Advertisement";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(58,28,1,0.55);
}
.google-auto-placed ins.adsbygoogle { max-width: 100% !important; overflow: hidden !important; }
/* AdSense always draws its own auto ads at full screen width on phones, so
   there the box spans the screen too and the ad stays inside it. */
@media (max-width: 767px) {
  .google-auto-placed:has(ins > *) {
    width: 100vw !important;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 12px 0 !important;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* ============================================================
   HEADER: no empty-bar flash + "Buy Dwarka Guide" menu link
   ============================================================ */
/* Hold the bar's height before nav.js fills it, so the page never jumps. */
header:empty { min-height: 90px; }

.nav-guide {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: var(--fs-content);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-medium);
  white-space: nowrap;
  color: #E7B46A;
}
.nav-guide span {
  background: linear-gradient(90deg, #E7B46A 0%, #E7B46A 35%, #FFF3DC 50%, #E7B46A 65%, #E7B46A 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: guideShine 2.8s linear infinite;
}
.nav-guide svg { flex-shrink: 0; animation: guideBook 2.8s ease-in-out infinite; }
.nav-guide:hover { color: var(--color-white); }
.nav-guide:hover span { -webkit-text-fill-color: var(--color-white); }

@keyframes guideShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.nav-guide-price {
  padding: 2px 8px;
  border-radius: 999px;
  background: #E7B46A;
  color: var(--color-main);
  font-style: normal;
  font-size: 0.8em;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  animation: guideDot 1.8s ease-in-out infinite;
}
@keyframes guideDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,180,106,0.7); }
  70% { box-shadow: 0 0 0 7px rgba(231,180,106,0); }
}
@keyframes guideBook {
  0%, 70%, 100% { transform: rotate(0); }
  78% { transform: rotate(-12deg); }
  86% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-guide span, .nav-guide svg, .nav-guide-price { animation: none; }
}

/* Contact Us: button in the bar on desktop, a drawer item below 1280px. */
.nav-contact-item { display: none; }

@media (min-width: 1280px) and (max-width: 1439px) {
  .nav-guide svg { display: none; }
}

@media (max-width: 1279px) {
  .header-right .header-contact { display: none; }
  .nav-contact-item { display: block; }
  .nav-contact-item .nav-link[aria-current="page"] { color: var(--color-section); }

  .nav-guide { padding: 15px 0; font-size: 1.02rem; }
}

/* ----- Dwarka Yatra Guide popup (nav.js, after a little scroll) ----- */
.guide-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 10, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.guide-popup.is-open { opacity: 1; visibility: visible; }
.guide-popup-box {
  position: relative;
  width: min(420px, 88vw, calc((100vh - 32px) * 0.8));
  transform: translateY(24px) scale(0.94);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.guide-popup.is-open .guide-popup-box { transform: none; }
.guide-popup-link { display: block; }
.guide-popup-link img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.guide-popup-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--color-main);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--ease);
}
.guide-popup-close:hover { transform: rotate(90deg); }
.guide-popup-close svg { display: block; width: 100%; height: 100%; }
@media (max-width: 480px) {
  .guide-popup-close { top: -12px; right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-popup, .guide-popup-box { transition: opacity 0.2s ease, visibility 0.2s ease; transform: none; }
}