/* ============================================================
   NAMMA RAYARA DARSHANAM — Main Theme Stylesheet
   File: /assets/css/style.css
   ------------------------------------------------------------
   Premium devotional design system.
   Palette, radii and shadows are driven by CSS variables —
   change :root to re-theme the entire website.
============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
------------------------------------------------------------ */
:root {
  /* Brand palette */
  --primary:        #6F0D0D;   /* Deep Maroon  */
  --primary-2:      #941919;   /* Temple Red   */
  --secondary:      #D5A021;   /* Royal Gold   */
  --gold-2:         #B77A17;   /* Antique Gold */
  --saffron:        #EA7C18;
  --cream:          #FFF9ED;   /* Ivory        */
  --cream-2:        #F8ECD5;   /* Warm Cream   */
  --navy:           #08182D;
  --white:          #FFFFFF;
  --dark:           #242424;
  --whatsapp:       #1DA851;

  /* Derived tones */
  --primary-soft:   rgba(111, 13, 13, .07);
  --gold-soft:      rgba(213, 160, 33, .14);
  --gold-line:      rgba(183, 122, 23, .45);
  --ink:            #3A2A20;             /* body text on cream */
  --ink-soft:       #6E5A4C;

  /* Type */
  --font-display:   'Cinzel', 'Playfair Display', serif;
  --font-body:      'Poppins', 'Inter', sans-serif;

  /* Shape & elevation */
  --radius:         14px;
  --radius-lg:      22px;
  --shadow-sm:      0 4px 14px rgba(36, 24, 8, .08);
  --shadow-md:      0 10px 32px rgba(36, 24, 8, .12);
  --shadow-gold:    0 8px 28px rgba(183, 122, 23, .28);

  /* Motion */
  --ease:           cubic-bezier(.4, 0, .2, 1);
  --dur:            .35s;
}

/* ------------------------------------------------------------
   2. BASE
------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { color: var(--primary); line-height: 1.25; }

a { color: var(--primary-2); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--gold-2); }

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

::selection { background: var(--secondary); color: var(--primary); }

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

/* ------------------------------------------------------------
   3. SHARED SECTION FRAMEWORK
------------------------------------------------------------ */
.section { padding: 88px 0; }

.section-head { max-width: 720px; margin: 0 auto 48px; }

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--gold-2);
  margin-bottom: 12px;
  position: relative;
  padding: 0 44px;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line));
}
.section-eyebrow::before { left: 0; }
.section-eyebrow::after  { right: 0; transform: scaleX(-1); }
.section-eyebrow-light { color: var(--secondary); }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  margin-bottom: 16px;
}
.section-title-light { color: var(--cream); }

.section-title-sm {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold-soft);
  position: relative;
}
.section-title-sm::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 64px; height: 2px;
  background: linear-gradient(90deg, var(--secondary), transparent);
}

.section-sub { color: var(--ink-soft); font-size: 1.02rem; }

/* Ornamental gold divider (used in menus / sidebars) */
.ornament-divider {
  height: 1px;
  margin: 20px 0;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  position: relative;
}
.ornament-divider::after {
  content: "✦";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--secondary);
  font-size: .7rem;
  background: inherit;
  padding: 0 8px;
}

/* ------------------------------------------------------------
   4. BUTTONS
------------------------------------------------------------ */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .02em; }

.btn-primary-nrd {
  --bs-btn-color: var(--cream);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--cream);
  --bs-btn-hover-bg: var(--primary-2);
  --bs-btn-hover-border-color: var(--primary-2);
  --bs-btn-active-bg: var(--primary-2);
  --bs-btn-active-color: var(--cream);
  padding: .7rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.btn-primary-nrd:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-gold {
  --bs-btn-color: var(--primary);
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-color: var(--primary);
  --bs-btn-hover-bg: #E3B23A;
  --bs-btn-hover-border-color: #E3B23A;
  --bs-btn-active-bg: var(--gold-2);
  --bs-btn-active-color: var(--cream);
  padding: .7rem 1.6rem;
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }

.btn-outline-nrd {
  --bs-btn-color: var(--primary);
  --bs-btn-bg: var(--cream);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--cream);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary-2);
  --bs-btn-active-color: var(--cream);
  padding: .7rem 1.6rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-outline-nrd:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.btn-outline-light-nrd {
  --bs-btn-color: var(--cream);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 249, 237, .6);
  --bs-btn-hover-color: var(--primary);
  --bs-btn-hover-bg: var(--cream);
  --bs-btn-hover-border-color: var(--cream);
  padding: .7rem 1.6rem;
}

.btn-whatsapp {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--whatsapp);
  --bs-btn-border-color: var(--whatsapp);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #178C43;
  --bs-btn-hover-border-color: #178C43;
  --bs-btn-active-bg: #137539;
  --bs-btn-active-color: #fff;
  padding: .7rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-whatsapp:hover { transform: translateY(-2px); }

.btn-book-now {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--cream);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: 1px solid var(--gold-2);
  border-radius: 999px;
  padding: .55rem 1.4rem;
  box-shadow: inset 0 0 0 1px rgba(213, 160, 33, .35), var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-book-now:hover {
  color: var(--cream);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(213, 160, 33, .6), var(--shadow-gold);
}

.req { color: var(--primary-2); }

/* ------------------------------------------------------------
   5. TOP BAR
------------------------------------------------------------ */
.top-bar {
  background: var(--navy);
  color: var(--cream-2);
  font-size: .82rem;
  padding: 8px 0;
}
.top-bar a { color: var(--cream-2); }
.top-bar a:hover { color: var(--secondary); }
.top-bar i { color: var(--secondary); margin-right: 5px; }
.top-bar-tag { color: var(--secondary); font-weight: 500; }

/* ------------------------------------------------------------
   6. HEADER / NAVIGATION
------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--cream);
  border-bottom: 1px solid var(--gold-soft);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 249, 237, .96);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(36, 24, 8, .12);
}

.site-header .navbar { padding: 10px 0; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 1px solid var(--gold-line);
  font-size: 1.3rem;
  flex: 0 0 auto;
}
.brand-mark-sm { width: 38px; height: 38px; font-size: 1.05rem; }
.brand-logo { border-radius: 50%; object-fit: cover; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--primary);
  letter-spacing: .02em;
}
.brand-name-sm { font-family: var(--font-display); font-weight: 700; color: var(--primary); }
.brand-tagline { font-size: .68rem; letter-spacing: .14em; color: var(--gold-2); text-transform: uppercase; }

.navbar-nav .nav-link {
  font-weight: 500;
  font-size: .93rem;
  color: var(--dark);
  padding: .55rem .85rem !important;
  position: relative;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 2px;
  background: var(--secondary);
  transition: width var(--dur) var(--ease), left var(--dur) var(--ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--primary); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { width: 60%; left: 20%; }

/* Custom hamburger */
.menu-toggle {
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  padding: 10px;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: var(--cream);
}
.menu-toggle:focus { box-shadow: 0 0 0 3px var(--gold-soft); }
.menu-toggle-bar {
  width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ------------------------------------------------------------
   7. MOBILE OFFCANVAS MENU
------------------------------------------------------------ */
.mobile-menu {
  --bs-offcanvas-width: 320px;
  background: var(--cream);
  border-left: 3px solid var(--secondary);
}
.mobile-menu .offcanvas-header { border-bottom: 1px solid var(--gold-soft); }

.mobile-nav { margin: 8px 0 0; }
.mobile-nav-link {
  display: block;
  padding: 12px 8px;
  font-weight: 500;
  color: var(--dark);
  border-bottom: 1px dashed var(--gold-soft);
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mobile-nav-link:hover,
.mobile-nav-link.active { color: var(--primary); padding-left: 14px; }

.mobile-contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-weight: 500;
  color: var(--primary);
}
.mobile-contact-link i { color: var(--gold-2); width: 18px; }

/* ------------------------------------------------------------
   8. HERO
------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  color: var(--cream);
  overflow: hidden;
  background: var(--navy);
  padding: 72px 0 96px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 78% 18%, rgba(234, 124, 24, .30), transparent 60%),
    radial-gradient(900px 500px at 12% 82%, rgba(148, 25, 25, .55), transparent 65%),
    linear-gradient(165deg, #12060a 0%, var(--primary) 46%, #3d1010 100%);
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 24, 45, .68) 0%, rgba(8, 24, 45, .32) 55%, rgba(8, 24, 45, .12) 100%);
}
.hero-glow {
  position: absolute;
  top: -180px; right: -120px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 160, 33, .28), transparent 68%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; }

.hero-badge {
  display: inline-block;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--cream);
  background: rgba(213, 160, 33, .16);
  border: 1px solid rgba(213, 160, 33, .5);
  border-radius: 999px;
  padding: 6px 18px;
  margin-bottom: 18px;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  color: var(--cream);
  letter-spacing: .015em;
  margin-bottom: 10px;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .35);
}

.hero-subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  color: var(--secondary);
  margin-bottom: 16px;
}

.hero-description {
  max-width: 560px;
  font-size: 1.02rem;
  color: rgba(255, 249, 237, .88);
  margin-bottom: 22px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 28px;
}
.hero-trust li { font-size: .92rem; font-weight: 500; }
.hero-trust i {
  color: var(--secondary);
  margin-right: 7px;
  font-size: .8rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Floating price card */
.hero-price-card {
  position: relative;
  max-width: 340px;
  margin-left: auto;
  text-align: center;
  background: linear-gradient(170deg, rgba(255, 249, 237, .985), rgba(248, 236, 213, .96));
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .38), inset 0 0 0 4px rgba(213, 160, 33, .12);
  padding: 46px 30px 30px;
}
.hero-price-ornament {
  position: absolute;
  top: -26px; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 2px solid var(--secondary);
  font-size: 1.35rem;
  box-shadow: var(--shadow-gold);
}
.hero-price-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.hero-price-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.3rem;
  color: var(--primary);
  margin-bottom: 4px;
  line-height: 1.1;
}
.hero-price-value span { font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--ink-soft); }
.hero-price-note { font-size: .88rem; color: var(--ink-soft); margin-bottom: 18px; }

/* Layered wave divider — professional smooth curves (v2) */
.hero-temple-silhouette {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 92px;
  z-index: 1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,104 480,30 720,58 C960,86 1200,40 1440,74 L1440,120 L0,120 Z' fill='%23D5A021' fill-opacity='.32'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,76 C200,36 420,98 640,70 C860,42 1040,98 1240,74 C1330,63 1400,58 1440,66 L1440,120 L0,120 Z' fill='%23FFF9ED' fill-opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,58 C180,98 360,26 560,46 C760,66 900,112 1120,86 C1260,70 1360,42 1440,54 L1440,120 L0,120 Z' fill='%23FFF9ED'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}

/* ------------------------------------------------------------
   9. TRUST STRIP
------------------------------------------------------------ */
.trust-strip {
  background: var(--cream);
  padding: 34px 0 46px;
  border-bottom: 1px solid var(--gold-soft);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: .86rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  padding: 18px 10px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.trust-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--gold-line); }
.trust-item i { font-size: 1.45rem; color: var(--primary-2); }

/* ------------------------------------------------------------
   10. ABOUT
------------------------------------------------------------ */
.about-image-frame { position: relative; padding: 16px; }
.about-frame-ornament {
  position: absolute;
  inset: 0;
  border: 2px solid var(--gold-line);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.about-frame-ornament::before,
.about-frame-ornament::after {
  content: "✦";
  position: absolute;
  color: var(--secondary);
  font-size: .95rem;
  background: var(--cream);
  padding: 0 8px;
}
.about-frame-ornament::before { top: -11px; left: 24px; }
.about-frame-ornament::after  { bottom: -11px; right: 24px; }

.about-image-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  align-items: end;
}
.about-image-grid img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}
.about-image-grid img:first-child { aspect-ratio: 5 / 6; }
.about-image-grid img:last-child  { aspect-ratio: 6 / 4.4; }

.about-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.about-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: .84rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--gold-soft);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  padding: 14px 6px;
}
.about-value i { font-size: 1.2rem; color: var(--gold-2); }

/* ------------------------------------------------------------
   11. PACKAGE CARDS
------------------------------------------------------------ */
.packages-section { background: var(--cream-2); }

.package-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 34px 28px 28px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.package-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }

.package-card-featured {
  border: 2px solid var(--secondary);
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(150deg, var(--secondary), var(--gold-2)) border-box;
  box-shadow: var(--shadow-gold);
}

.package-badge {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--primary);
  background: linear-gradient(180deg, #EFC24C, var(--secondary));
  border-radius: 999px;
  padding: 5px 18px;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.package-badge-inline {
  position: static;
  transform: none;
  display: inline-block;
  margin-bottom: 12px;
}

.package-head { padding-bottom: 20px; border-bottom: 1px solid var(--gold-soft); margin-bottom: 20px; }
.package-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: .06em; }
.package-price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--primary-2);
  line-height: 1.05;
  margin: 8px 0 4px;
}
.package-price-note { font-size: .86rem; color: var(--ink-soft); margin-bottom: 0; }

.package-features { flex: 1; margin-bottom: 22px; }
.package-features li {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--gold-soft);
}
.package-features li:last-child { border-bottom: 0; }
.pf-icon {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary-2);
  background: var(--gold-soft);
  font-size: .95rem;
}
.pf-body { display: flex; flex-direction: column; }
.pf-body strong { font-size: .95rem; color: var(--primary); }
.pf-body small { font-size: .84rem; color: var(--ink-soft); line-height: 1.55; }

.package-features-lg li { padding: 14px 0; }

.package-actions { text-align: center; }
.package-details-link {
  display: inline-block;
  margin-top: 14px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gold-2);
}
.package-details-link i { font-size: .78rem; transition: transform var(--dur) var(--ease); }
.package-details-link:hover i { transform: translateX(4px); }

.package-disclaimer { font-size: .84rem; color: var(--ink-soft); max-width: 720px; margin: 36px auto 0; }

/* ------------------------------------------------------------
   12. COMPARISON TABLE
------------------------------------------------------------ */
.comparison-wrap {
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  padding: 8px;
}
.comparison-table { margin-bottom: 0; min-width: 560px; --bs-table-bg: transparent; }
.comparison-table th,
.comparison-table td { padding: 14px 18px; border-color: var(--gold-soft); text-align: center; }
.comparison-table thead th {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--primary);
  border-bottom: 2px solid var(--gold-line);
  vertical-align: bottom;
}
.comparison-table tbody th {
  text-align: left;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  white-space: nowrap;
}
.comparison-table td { font-size: .92rem; color: var(--ink); }
.comparison-table .cmp-featured { background: var(--gold-soft); }
.cmp-badge {
  display: block;
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold-2);
  margin-top: 2px;
}
.cmp-yes { color: #2E8B4A; font-size: 1.1rem; }
.cmp-no  { color: #C4B49B; font-size: 1.1rem; }

/* ------------------------------------------------------------
   13. PLACES
------------------------------------------------------------ */
.place-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.place-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.place-image { display: block; overflow: hidden; aspect-ratio: 10 / 7; }
.place-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.place-card:hover .place-image img { transform: scale(1.06); }

.place-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.place-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.place-desc { font-size: .9rem; color: var(--ink-soft); flex: 1; }
.place-link { font-size: .88rem; font-weight: 600; color: var(--gold-2); margin-top: 6px; }
.place-link i { font-size: .74rem; transition: transform var(--dur) var(--ease); }
.place-link:hover i { transform: translateX(4px); }

.place-mini-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: .92rem;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.place-mini-card:hover { border-color: var(--gold-line); transform: translateY(-2px); color: var(--primary); }
.place-mini-card i { color: var(--primary-2); }

.place-detail-image img { object-fit: cover; box-shadow: var(--shadow-md); }
.place-detail-cta {
  background: var(--cream-2);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
}

/* ------------------------------------------------------------
   14. JOURNEY TIMELINE
------------------------------------------------------------ */
.timeline-section { background: var(--cream-2); }

.journey-timeline {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding-left: 0;
}
.journey-timeline::before {
  content: "";
  position: absolute;
  left: 121px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-line), var(--gold-soft));
}

.timeline-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 12px 0;
}
.timeline-time {
  flex: 0 0 92px;
  text-align: right;
  font-weight: 600;
  font-size: .86rem;
  color: var(--primary-2);
  padding-top: 8px;
}
.timeline-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gold-2);
  background: var(--cream);
  border: 2px solid var(--gold-line);
  font-size: .85rem;
}
.timeline-body { display: flex; flex-direction: column; padding-top: 6px; }
.timeline-body strong { font-size: .98rem; color: var(--primary); }
.timeline-body small { font-size: .84rem; color: var(--ink-soft); }
.timeline-tag {
  align-self: flex-start;
  margin-top: 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-2);
  background: var(--gold-soft);
  border-radius: 999px;
  padding: 2px 10px;
}
.timeline-disclaimer { font-size: .84rem; color: var(--ink-soft); margin-top: 24px; }

.journey-timeline-compact { max-width: none; }

/* ------------------------------------------------------------
   15. FACILITIES
------------------------------------------------------------ */
.facility-card {
  height: 100%;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  padding: 34px 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.facility-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-line); }
.facility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px; height: 66px;
  border-radius: 50%;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 1px solid var(--gold-line);
  font-size: 1.5rem;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.facility-title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.facility-desc { font-size: .9rem; color: var(--ink-soft); margin-bottom: 0; }

/* ------------------------------------------------------------
   16. WHY CHOOSE US (dark)
------------------------------------------------------------ */
.why-section {
  position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, #14070a 55%, var(--primary) 130%);
  color: var(--cream);
  overflow: hidden;
}
.why-pattern {
  position: absolute;
  inset: 0;
  opacity: .5;
  background:
    radial-gradient(circle at 12% 20%, rgba(213, 160, 33, .10), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(234, 124, 24, .10), transparent 36%);
  pointer-events: none;
}
.why-section .container { position: relative; z-index: 1; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}
.why-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .92rem;
  font-weight: 500;
  background: rgba(255, 249, 237, .05);
  border: 1px solid rgba(213, 160, 33, .28);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.why-item:hover { background: rgba(213, 160, 33, .1); border-color: rgba(213, 160, 33, .55); }
.why-item i { color: var(--secondary); font-size: 1.15rem; flex: 0 0 auto; }

.counters-row { border-top: 1px solid rgba(213, 160, 33, .25); padding-top: 44px; }
.counter,
.counter-static {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--secondary);
  line-height: 1.05;
  margin-bottom: 4px;
}
.counter::after { content: "+"; font-size: 1.5rem; margin-left: 2px; }
.counter-label { font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 249, 237, .75); margin-bottom: 0; }

/* ------------------------------------------------------------
   17. GALLERY
------------------------------------------------------------ */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 34px;
}
.gallery-filter-btn {
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 7px 20px;
  transition: all var(--dur) var(--ease);
}
.gallery-filter-btn:hover { border-color: var(--gold-line); color: var(--primary); }
.gallery-filter-btn.active {
  color: var(--cream);
  background: var(--primary);
  border-color: var(--primary);
}

.gallery-item.is-hidden { display: none; }

.gallery-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-2);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}
.gallery-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform .55s var(--ease);
}
.gallery-thumb:hover img { transform: scale(1.07); }
.gallery-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 24, 45, .55));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-thumb:hover::after { opacity: 1; }
.gallery-thumb-title {
  position: absolute;
  left: 12px; right: 12px; bottom: 10px;
  z-index: 1;
  font-size: .8rem;
  font-weight: 500;
  color: var(--cream);
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery-thumb:hover .gallery-thumb-title { opacity: 1; transform: none; }

.gallery-modal .modal-content {
  background: var(--navy);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 5;
  filter: invert(1);
  opacity: .9;
}
.gallery-modal-title {
  color: var(--cream-2);
  font-size: .9rem;
  text-align: center;
  padding: 12px;
  margin: 0;
}
.gallery-modal img { max-height: 78vh; object-fit: contain; }

/* ------------------------------------------------------------
   18. TESTIMONIALS
------------------------------------------------------------ */
.testimonials-section { background: var(--cream-2); }

.testimonial-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 26px;
  margin: 0;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 6px; right: 20px;
  font-family: var(--font-display);
  font-size: 4.2rem;
  color: var(--gold-soft);
  line-height: 1;
}
.testimonial-rating { color: var(--secondary); font-size: .85rem; margin-bottom: 12px; }
.testimonial-text { font-size: .94rem; color: var(--ink); flex: 1; }
.testimonial-footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.testimonial-photo { border-radius: 50%; object-fit: cover; }
.testimonial-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--gold-2);
  background: var(--gold-soft);
}
.testimonial-footer span { display: flex; flex-direction: column; line-height: 1.3; }
.testimonial-name { font-style: normal; font-weight: 600; font-size: .94rem; color: var(--primary); }
.testimonial-footer small { font-size: .8rem; color: var(--ink-soft); }

/* ------------------------------------------------------------
   19. BOOKING CTA
------------------------------------------------------------ */
.booking-cta {
  position: relative;
  padding: 84px 0;
  background: linear-gradient(140deg, var(--primary) 0%, #4d0a0a 55%, var(--navy) 130%);
  color: var(--cream);
  overflow: hidden;
}
.booking-cta-pattern {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(213, 160, 33, .05) 0 2px, transparent 2px 26px),
    radial-gradient(720px 320px at 82% 20%, rgba(213, 160, 33, .16), transparent 60%);
  pointer-events: none;
}
.booking-cta .container { position: relative; z-index: 1; }
.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 12px;
}
.cta-sub { max-width: 620px; margin: 0 auto 30px; color: rgba(255, 249, 237, .85); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ------------------------------------------------------------
   20. BOOKING FORM
------------------------------------------------------------ */
.booking-section { background: var(--cream-2); }

.booking-form-card {
  background: var(--white);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), inset 0 0 0 5px rgba(213, 160, 33, .07);
  padding: 42px 38px;
}
.booking-form-head { margin-bottom: 26px; }
.booking-form-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.booking-form-sub { font-size: .92rem; color: var(--ink-soft); margin-bottom: 0; }

.form-label { font-weight: 600; font-size: .88rem; color: var(--primary); margin-bottom: 5px; }
.form-control,
.form-select {
  border: 1px solid #E4D5B8;
  border-radius: 10px;
  background-color: var(--cream);
  padding: .62rem .9rem;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--white);
  border-color: var(--secondary);
  box-shadow: 0 0 0 .2rem var(--gold-soft);
  color: var(--ink);
}
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--secondary); box-shadow: 0 0 0 .2rem var(--gold-soft); }
.form-check-label { font-size: .88rem; }

/* Honeypot — off-screen, still focusable=false via tabindex */
.nrd-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.estimate-box {
  background: var(--gold-soft);
  border: 1px dashed var(--gold-line);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.estimate-line {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
}
.estimate-total { font-size: 1.05rem; color: var(--primary); margin-top: 6px; }
.estimate-total strong { font-family: var(--font-display); font-size: 1.3rem; }
.estimate-note { font-size: .8rem; color: var(--ink-soft); margin-top: 6px; }
.estimate-min-warning { font-size: .82rem; font-weight: 600; color: var(--primary-2); margin-top: 6px; }

/* Booking success state */
.booking-success { padding: 24px 8px 8px; }
.success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 2px solid var(--secondary);
  font-size: 1.9rem;
  margin-bottom: 18px;
  box-shadow: var(--shadow-gold);
}
.success-title { font-family: var(--font-display); font-weight: 700; }
.success-ref-label { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.success-ref {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-2);
  background: var(--gold-soft);
  border: 1px dashed var(--gold-line);
  border-radius: 10px;
  display: inline-block;
  padding: 8px 26px;
  margin-bottom: 14px;
}

/* Booking help sidebar */
.booking-help-card {
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 26px;
}
.bh-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; }
.bh-subtitle { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin-bottom: 12px; }
.bh-steps { padding-left: 18px; font-size: .9rem; color: var(--ink); }
.bh-steps li { margin-bottom: 8px; }
.bh-steps li::marker { color: var(--gold-2); font-weight: 700; }

/* ------------------------------------------------------------
   21. FAQ ACCORDION
------------------------------------------------------------ */
.nrd-accordion {
  --bs-accordion-border-color: var(--gold-soft);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--gold-soft);
  --bs-accordion-active-bg: var(--gold-soft);
  --bs-accordion-active-color: var(--primary);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-bg: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.nrd-accordion .accordion-button {
  font-weight: 600;
  font-size: .96rem;
  padding: 18px 22px;
}
.nrd-accordion .accordion-button:not(.collapsed) { color: var(--primary); }
.nrd-accordion .accordion-body { font-size: .92rem; color: var(--ink-soft); padding: 18px 22px; }
.faq-more-help p { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------
   22. CONTACT
------------------------------------------------------------ */
.contact-list { margin-top: 26px; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; }
.contact-list li > span:last-child { display: flex; flex-direction: column; line-height: 1.5; }
.contact-list strong { color: var(--primary); font-size: .9rem; }
.contact-list a { font-size: .95rem; }
.contact-icon {
  flex: 0 0 46px;
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--primary-2);
  background: var(--gold-soft);
  border: 1px solid var(--gold-soft);
  font-size: 1.05rem;
}
.contact-icon-wa { color: var(--whatsapp); }

.contact-form-card {
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 32px;
}
.contact-form-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin-bottom: 20px; }

.contact-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-map iframe { display: block; width: 100%; min-height: 380px; border: 0; }

.contact-strip { background: var(--cream-2); border-top: 1px solid var(--gold-soft); padding: 48px 0; }
.contact-strip-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.contact-strip-sub { color: var(--ink-soft); }

/* ------------------------------------------------------------
   23. INNER PAGE HERO / BREADCRUMB
------------------------------------------------------------ */
.page-hero {
  position: relative;
  padding: 64px 0 56px;
  background: linear-gradient(150deg, var(--primary) 0%, #4d0a0a 60%, var(--navy) 140%);
  color: var(--cream);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 44px;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C220,40 440,100 700,72 C960,44 1180,96 1440,60 L1440,120 L0,120 Z' fill='%23D5A021' fill-opacity='.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,58 C180,98 400,30 640,52 C880,74 1120,104 1440,58 L1440,120 L0,120 Z' fill='%23FFF9ED'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
}
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  color: var(--cream);
  margin-bottom: 8px;
}
.page-hero-price { font-size: 1.25rem; font-weight: 600; color: var(--secondary); }
.page-hero-price span { display: block; font-size: .84rem; font-weight: 400; color: rgba(255, 249, 237, .8); }
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: var(--secondary); margin-bottom: 0; }
.page-hero .breadcrumb-item a { color: rgba(255, 249, 237, .8); }
.page-hero .breadcrumb-item a:hover { color: var(--secondary); }
.page-hero .breadcrumb-item.active { color: var(--secondary); }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(213, 160, 33, .7); }

/* ------------------------------------------------------------
   24. PACKAGE DETAILS / SIDEBAR / INCLUSIONS
------------------------------------------------------------ */
.package-hero-image img { object-fit: cover; box-shadow: var(--shadow-md); }

.incl-card {
  height: 100%;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-left: 4px solid #2E8B4A;
  border-radius: var(--radius);
  padding: 22px 22px 14px;
  box-shadow: var(--shadow-sm);
}
.excl-card { border-left-color: #C4B49B; }
.incl-title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 14px; }
.incl-title i { margin-right: 8px; }
.incl-card .incl-title i { color: #2E8B4A; }
.excl-card .incl-title i { color: #C4B49B; }
.incl-list li { display: flex; gap: 10px; font-size: .9rem; padding: 5px 0; color: var(--ink); }
.incl-list i { margin-top: 5px; font-size: .74rem; color: #2E8B4A; }
.excl-card .incl-list i { color: #C4B49B; }

.package-sidebar { position: sticky; top: 110px; }
.package-sidebar-card {
  background: var(--white);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md), inset 0 0 0 4px rgba(213, 160, 33, .08);
  padding: 30px 26px;
  margin-bottom: 22px;
}
.ps-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-2);
  text-align: center;
  margin-bottom: 16px;
}
.ps-price span { font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--ink-soft); }
.ps-meta { border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); padding: 14px 0; margin-bottom: 20px; }
.ps-meta li { display: flex; gap: 12px; font-size: .9rem; padding: 6px 0; color: var(--ink); }
.ps-meta i { color: var(--gold-2); margin-top: 5px; }
.ps-disclaimer { font-size: .78rem; color: var(--ink-soft); margin: 14px 0 0; }

.related-package-card {
  text-align: center;
  background: var(--cream-2);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
}
.rp-label { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 6px; }
.rp-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.rp-price { font-size: .92rem; color: var(--ink-soft); margin-bottom: 14px; }

/* ------------------------------------------------------------
   25. LEGAL PAGES
------------------------------------------------------------ */
.legal-content h3 { font-size: 1.15rem; margin: 26px 0 10px; }
.legal-content ul { padding-left: 20px; }
.legal-content li { margin-bottom: 8px; }
.legal-updated { font-size: .82rem; color: var(--ink-soft); margin-top: 34px; border-top: 1px solid var(--gold-soft); padding-top: 14px; }

/* ------------------------------------------------------------
   26. 404
------------------------------------------------------------ */
.error-section { padding: 110px 0; }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
  margin-bottom: 0;
}
.error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  font-size: 1.5rem;
  margin: -28px 0 20px;
  position: relative;
  border: 2px solid var(--secondary);
}

/* ------------------------------------------------------------
   27. FOOTER
------------------------------------------------------------ */
.site-footer {
  background: linear-gradient(165deg, var(--navy) 0%, #0B0F1E 60%, #1f0708 140%);
  color: rgba(255, 249, 237, .8);
  padding: 0 0 26px;
  font-size: .9rem;
}
.footer-ornament {
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--secondary) 25%, var(--gold-2) 50%, var(--secondary) 75%, transparent);
  margin-bottom: 56px;
}
.footer-main { padding-bottom: 42px; }

.footer-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--cream); }
.footer-text { font-size: .88rem; color: rgba(255, 249, 237, .7); }

.footer-heading {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--secondary);
  margin-bottom: 16px;
}
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: rgba(255, 249, 237, .75); font-size: .88rem; }
.footer-links a:hover { color: var(--secondary); }

.footer-contact li { display: flex; gap: 12px; margin-bottom: 12px; }
.footer-contact i { color: var(--secondary); margin-top: 5px; flex: 0 0 16px; }
.footer-contact a { color: rgba(255, 249, 237, .8); }
.footer-contact a:hover { color: var(--secondary); }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--secondary);
  border: 1px solid rgba(213, 160, 33, .4);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--secondary); color: var(--navy); transform: translateY(-2px); }

.footer-bottom { border-top: 1px solid rgba(213, 160, 33, .2); padding-top: 20px; }
.footer-legal a { color: rgba(255, 249, 237, .65); font-size: .82rem; }
.footer-legal a:hover { color: var(--secondary); }
.footer-legal .list-inline-item:not(:last-child)::after { content: "·"; color: var(--gold-2); margin-left: 12px; }
.footer-copy { font-size: .82rem; color: rgba(255, 249, 237, .55); }
.footer-dev-credit { font-size: .78rem; }

/* ------------------------------------------------------------
   28. FLOATING CONTACT / MOBILE ACTION BAR
------------------------------------------------------------ */
.floating-whatsapp {
  position: fixed;
  right: 26px; bottom: 26px;
  z-index: 1040;
  width: 58px; height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--whatsapp);
  font-size: 1.7rem;
  box-shadow: 0 10px 28px rgba(29, 168, 81, .45);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.floating-whatsapp:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(29, 168, 81, .55); }

.mobile-action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  display: flex;
  background: var(--white);
  border-top: 1px solid var(--gold-line);
  box-shadow: 0 -6px 24px rgba(36, 24, 8, .14);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--primary);
}
.mab-item i { font-size: 1.1rem; }
.mab-whatsapp { color: var(--whatsapp); }
.mab-book {
  color: var(--cream);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.mab-book:hover { color: var(--cream); }

/* Keep sticky bar from covering footer content on mobile */
@media (max-width: 767.98px) {
  body { padding-bottom: 62px; }
}

/* ------------------------------------------------------------
   29. SECTION WRAPPERS & REMAINING HOOKS
------------------------------------------------------------ */
.about-section      { background: var(--cream); }
.places-section     { background: var(--cream); }
.facilities-section { background: var(--cream); }
.gallery-section    { background: var(--cream); }
.comparison-section { background: var(--cream-2); padding-top: 0; }
.faq-section        { background: var(--cream); }

.gallery-grid { align-items: stretch; }

.top-bar-left,
.top-bar-right { min-width: 0; }

.mobile-menu-footer { padding-top: 12px; }

.package-overview p { color: var(--ink); }

/* ------------------------------------------------------------
   30. SCROLL REVEAL (JS adds .is-visible)
------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* No-JS and reduced motion: always show content, minimize movement */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   31. PROFESSIONAL POLISH & ANIMATIONS  (v2 update)
   ------------------------------------------------------------
   Appended enhancement layer: refined hero motion, premium
   icon badges with hover choreography, button shine, WhatsApp
   pulse. All animations are neutralised automatically by the
   prefers-reduced-motion block in section 30.
============================================================ */

/* ---------- Hero: ambient background motion ---------- */
@keyframes heroBgDrift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
@keyframes heroGlowFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-34px, 28px); }
}
.hero-bg {
  animation: heroBgDrift 24s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-glow { animation: heroGlowFloat 12s ease-in-out infinite; }

/* Extra padding so content clears the taller wave divider */
.hero { padding-bottom: 118px; }

/* ---------- Hero: staggered entrance choreography ---------- */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .reveal {
  opacity: 0;
  transform: none;
  transition: none;
  animation: heroRise .85s cubic-bezier(.22, 1, .36, 1) forwards;
}
.hero .hero-badge       { animation-delay: .05s; }
.hero .hero-title       { animation-delay: .16s; }
.hero .hero-subtitle    { animation-delay: .27s; }
.hero .hero-description { animation-delay: .38s; }
.hero .hero-trust       { animation-delay: .48s; }
.hero .hero-actions     { animation-delay: .58s; }

/* ---------- Hero: price card float + refined hover ---------- */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.hero .hero-price-card {
  animation:
    heroRise .9s .42s cubic-bezier(.22, 1, .36, 1) forwards,
    cardFloat 7s 1.6s ease-in-out infinite;
  transition: box-shadow .5s var(--ease);
}
.hero .hero-price-card:hover {
  box-shadow: 0 26px 60px rgba(111, 13, 13, .28), 0 0 0 1px rgba(213, 160, 33, .35);
}

/* Om ornament: soft radiating glow */
@keyframes omGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213, 160, 33, .45), var(--shadow-gold); }
  50%      { box-shadow: 0 0 0 14px rgba(213, 160, 33, 0), var(--shadow-gold); }
}
.hero-price-ornament { animation: omGlow 3.2s ease-out infinite; }

/* ---------- Hero: trust checks → gold coin icons ---------- */
.hero-trust li { display: inline-flex; align-items: center; }
.hero-trust i {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #E9BE55, var(--gold-2));
  color: var(--primary);
  font-size: .62rem;
  margin-right: 9px;
  box-shadow: 0 3px 8px rgba(213, 160, 33, .38), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ============================================================
   PREMIUM ICON SYSTEM — consistent badges + hover motion
============================================================ */

/* ---------- Trust strip icons ---------- */
.trust-item i {
  width: 58px; height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 2px solid rgba(213, 160, 33, .5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28), 0 6px 16px rgba(111, 13, 13, .16);
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    color .45s var(--ease),
    border-color .45s var(--ease),
    background-color .45s var(--ease);
}
.trust-item:hover i {
  transform: translateY(-5px) scale(1.07);
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55 0%, var(--secondary) 55%, var(--gold-2) 100%);
  border-color: var(--secondary);
  box-shadow: 0 12px 26px rgba(213, 160, 33, .42), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.trust-item span { transition: color .35s var(--ease); }
.trust-item:hover span { color: var(--primary); }

/* ---------- About values ---------- */
.about-value i {
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 2px solid rgba(213, 160, 33, .45);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .25);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.about-value:hover i {
  transform: translateY(-4px) rotate(-6deg) scale(1.06);
  box-shadow: 0 10px 20px rgba(111, 13, 13, .22);
}

/* ---------- Facility icons: ring pulse on card hover ---------- */
.facility-icon {
  border: 2px solid rgba(213, 160, 33, .5);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .28), 0 8px 18px rgba(111, 13, 13, .15);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.facility-card:hover .facility-icon {
  transform: translateY(-6px) scale(1.08);
  border-color: var(--secondary);
  box-shadow: 0 0 0 8px rgba(213, 160, 33, .14), 0 14px 28px rgba(111, 13, 13, .25);
}

/* ---------- Package feature icons (pf-icon) ---------- */
.pf-icon {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.package-features li:hover .pf-icon {
  transform: scale(1.12);
  box-shadow: 0 6px 14px rgba(213, 160, 33, .35);
}

/* ---------- Contact list icons ---------- */
.contact-icon { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.contact-list li:hover .contact-icon {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 18px rgba(111, 13, 13, .22);
}

/* ============================================================
   BUTTON CHOREOGRAPHY — shine sweep + lift
============================================================ */
.btn-gold,
.btn-primary-nrd {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-gold::after,
.btn-primary-nrd::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  transition: left .65s var(--ease);
  z-index: -1;
  pointer-events: none;
}
.btn-primary-nrd::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); }
.btn-gold:hover::after,
.btn-primary-nrd:hover::after { left: 130%; }
.btn-primary-nrd:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(111, 13, 13, .32); }

/* ============================================================
   FLOATING WHATSAPP — radiating pulse ring
============================================================ */
@keyframes waPing {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .48); }
  70%  { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.floating-whatsapp {
  animation: waPing 2.8s ease-out infinite;
  transition: transform .35s var(--ease);
}
.floating-whatsapp:hover { transform: scale(1.1); animation-play-state: paused; }

/* ============================================================
   SECTION EYEBROW — subtle gold shimmer on the divider lines
============================================================ */
.section-eyebrow::before,
.section-eyebrow::after {
  background: linear-gradient(90deg, transparent, var(--secondary), transparent);
}

/* ============================================================
   32. v3 UPDATE — FULL-HEIGHT HERO, ANIMATED WAVES, FLOATING
       ACTION STACK, FOOTER REDESIGN, FACILITIES PAGE
============================================================ */

/* ---------- Hero fills the viewport ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 96px;
  padding-bottom: 150px;
}

/* ---------- ANIMATED WAVES (seamless, 3-speed parallax) ---------- */
/* Each layer is a repeating tile whose start/end slopes match,
   so shifting background-position-x by one tile width loops
   perfectly. Widths differ per layer for a natural parallax. */
/* Single animation drives all three layers with different
   directions & speeds. Each layer shifts by an exact multiple
   of its own tile width (1×1680, 1×1440 reverse, 2×1200), so
   the 24s loop is perfectly seamless. */
@keyframes waveShift {
  from { background-position: 0 bottom, 0 bottom, 0 bottom; }
  to   { background-position: -1680px bottom, 1440px bottom, -2400px bottom; }
}

.hero-temple-silhouette {
  height: 110px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C240,105 480,5 720,55 C960,105 1200,5 1440,55 L1440,120 L0,120 Z' fill='%23D5A021' fill-opacity='.32'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,20 480,120 720,70 C960,20 1200,120 1440,70 L1440,120 L0,120 Z' fill='%23FFF9ED' fill-opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C240,110 480,10 720,60 C960,110 1200,10 1440,60 L1440,120 L0,120 Z' fill='%23FFF9ED'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x, repeat-x;
  background-size: 1680px 100%, 1440px 100%, 1200px 100%;
  background-position: 0 bottom, 0 bottom, 0 bottom;
  animation: waveShift 24s linear infinite;
  will-change: background-position;
}

/* ---------- Hero package list (both packages) ---------- */
.hero-pkg-list { margin: 4px 0 10px; }
.hero-pkg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
}
.hero-pkg-row + .hero-pkg-row { border-top: 1px dashed var(--gold-line); }
.hero-pkg-name {
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-pkg-tag {
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 0 2px 6px rgba(213, 160, 33, .35);
}
.hero-pkg-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary);
  white-space: nowrap;
}
.hero-pkg-price small {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 4px;
}

/* ============================================================
   PROFESSIONAL BUTTON HOVER (v3 fix + upgrade)
   The v2 shine sat behind the button background (z-index:-1);
   it now sweeps above the surface, under a readable veil.
============================================================ */
.btn-gold::after,
.btn-primary-nrd::after {
  z-index: 1;
}
.btn-gold,
.btn-primary-nrd,
.btn-outline-nrd {
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    background-color .35s var(--ease),
    color .35s var(--ease),
    border-color .35s var(--ease);
}
.btn-gold:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 26px rgba(213, 160, 33, .45);
}
.btn-gold:active { transform: translateY(-1px) scale(.99); }
.btn-primary-nrd:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 12px 26px rgba(111, 13, 13, .38);
}
.btn-primary-nrd:active { transform: translateY(-1px) scale(.99); }
.btn-outline-nrd:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(255, 249, 237, .18);
}

/* ============================================================
   FLOATING ACTION STACK (WhatsApp + Call + Back-to-top)
============================================================ */
@keyframes fabIn {
  from { opacity: 0; transform: translateX(28px) scale(.85); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes callRing {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(-14deg); }
  20% { transform: rotate(12deg); }
  30% { transform: rotate(-10deg); }
  40% { transform: rotate(8deg); }
  50% { transform: rotate(0); }
}

.floating-stack {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1040;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}

.fab {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  font-size: 1.35rem;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: fabIn .6s var(--ease) backwards;
}
.fab:hover { transform: translateY(-4px) scale(1.08); color: #fff; }

/* WhatsApp — green with radiating pulse (keeps v2 waPing) */
.fab-whatsapp {
  background: linear-gradient(140deg, #2EE274, #25D366 55%, #1DA851);
  animation: fabIn .6s .1s var(--ease) backwards, waPing 2.8s 1s ease-out infinite;
}
.fab-whatsapp:hover { animation-play-state: running, paused; }

/* Call — maroon with gold ring; icon rings on hover */
.fab-call {
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 2px solid var(--secondary);
  color: var(--secondary);
  animation-delay: .22s;
}
.fab-call:hover { color: var(--secondary); box-shadow: 0 0 0 8px rgba(213, 160, 33, .16), 0 14px 28px rgba(111, 13, 13, .35); }
.fab-call:hover i { animation: callRing 1s ease-in-out; }

/* Hover labels slide out to the left */
.fab-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--navy);
  color: var(--cream);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 13px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}
.fab-label::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--navy);
}
.fab:hover .fab-label { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Back-to-top — gold, appears after scrolling */
.fab-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 1039;
  width: 48px;
  height: 48px;
  font-size: 1rem;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary) 60%, var(--gold-2));
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  animation: none;
}
.fab-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* When the stack is present (desktop), park back-to-top above it */
.floating-stack ~ .fab-top { bottom: 172px; }
.fab-top:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 12px 26px rgba(213, 160, 33, .5); }
.fab-top:hover i { animation: fabArrowNudge .7s ease-in-out infinite; }
@keyframes fabArrowNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ============================================================
   FOOTER v3 — professional redesign
============================================================ */
.site-footer {
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(213, 160, 33, .08), transparent 55%),
    radial-gradient(700px 380px at 8% 100%, rgba(148, 25, 25, .16), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, #050F1D 100%);
}

/* CTA band bridging content and footer */
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(140deg, var(--primary) 0%, var(--primary-2) 60%, #7d1414 100%);
  border: 1px solid rgba(213, 160, 33, .45);
  border-radius: 18px;
  padding: 26px 30px;
  margin-top: -58px;
  margin-bottom: 46px;
  position: relative;
  z-index: 2;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .35);
}
.footer-cta-text { display: flex; align-items: center; gap: 18px; }
.footer-cta-icon {
  flex: 0 0 54px;
  width: 54px; height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}
.footer-cta-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 3px;
}
.footer-cta-sub { font-size: .84rem; color: rgba(255, 249, 237, .78); margin-bottom: 0; }
.footer-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-footer-wa {
  --bs-btn-color: #fff;
  --bs-btn-bg: #1DA851;
  --bs-btn-border-color: #1DA851;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #25D366;
  --bs-btn-hover-border-color: #25D366;
  font-weight: 600;
}
.btn-footer-wa:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37, 211, 102, .35); }

/* Headings get a short gold accent bar */
.footer-heading {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.footer-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--secondary), transparent);
}

/* Links: arrow slides in on hover */
.footer-links li { margin-bottom: 8px; }
.footer-links a {
  position: relative;
  display: inline-block;
  padding-left: 0;
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.footer-links a::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  color: var(--secondary);
  opacity: 0;
  transition: opacity .3s var(--ease), left .3s var(--ease);
}
.footer-links a:hover { color: var(--secondary); padding-left: 14px; }
.footer-links a:hover::before { opacity: 1; left: 0; }

/* Trust badges under the brand text */
.footer-badges { margin: 14px 0 18px; }
.footer-badges li {
  font-size: .82rem;
  color: rgba(255, 249, 237, .75);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.footer-badges i {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .68rem;
  color: var(--secondary);
  background: rgba(213, 160, 33, .14);
  border: 1px solid rgba(213, 160, 33, .35);
}

/* Social icons: fill + lift */
.footer-social a { transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); }
.footer-social a:hover {
  transform: translateY(-4px);
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  color: var(--primary);
  border-color: var(--secondary);
  box-shadow: 0 8px 18px rgba(213, 160, 33, .35);
}

.footer-timing {
  font-size: .84rem;
  color: rgba(255, 249, 237, .78);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 0;
}
.footer-timing i { color: var(--secondary); }

/* ============================================================
   FACILITIES PAGE
============================================================ */
.page-hero-sub {
  max-width: 640px;
  font-size: .98rem;
  color: rgba(255, 249, 237, .85);
  margin-bottom: 14px;
}
.facility-card-detailed { text-align: left; }
.facility-card-detailed .facility-icon { margin-bottom: 16px; }
.facility-more {
  font-size: .85rem;
  color: var(--ink-soft);
  border-top: 1px dashed var(--gold-line);
  padding-top: 12px;
  margin-top: 12px;
  margin-bottom: 0;
}
.facilities-note-section { padding-top: 0; }
.facilities-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: .92rem;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.facilities-note i { color: var(--gold-2); font-size: 1.2rem; margin-top: 2px; }
.facilities-note a { color: var(--primary-2); font-weight: 600; }
.facilities-note a:hover { color: var(--gold-2); }

/* ============================================================
   33. v4 UPDATE — SCREEN-FIT HERO, DEVOTIONAL SCENE ANIMATION,
       ALIGNED FLOATING STACK, BADGE ICON, FOOTER REFINEMENT
============================================================ */

/* ---------- Hero fits the first screen (waves at fold) ----------
   118px ≈ top bar + navbar; the hero fills the rest so the
   animated waves sit exactly at the bottom of the viewport.   */
.hero {
  min-height: calc(100vh - 118px);
  min-height: calc(100svh - 118px);
  padding-top: 48px;
  padding-bottom: 132px;
}

/* ============================================================
   DEVOTIONAL SCENE — rays, gopuram silhouettes, rising embers
============================================================ */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Slowly rotating temple-light rays behind the price card */
@keyframes raysSpin { to { transform: rotate(360deg); } }
.hero-rays {
  position: absolute;
  top: -34%;
  right: -14%;
  width: 920px;
  height: 920px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(213, 160, 33, .065) 0deg 7deg,
    transparent 7deg 24deg
  );
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 68%);
          mask: radial-gradient(circle, #000 0%, transparent 68%);
  animation: raysSpin 90s linear infinite;
  will-change: transform;
}

/* Gopuram tower silhouettes rising from behind the waves */
.hero-gopuram {
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}
.hero-gopuram-right {
  right: 3%;
  width: 360px;
  height: 62%;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' preserveAspectRatio='xMidYMax meet'%3E%3Cpath d='M96,18 L104,18 L104,28 L110,28 L110,36 L104,36 L104,44 L100,50 L96,44 L96,36 L90,36 L90,28 L96,28 Z M78,66 L100,50 L122,66 L122,84 L78,84 Z M70,84 L130,84 L130,110 L120,104 L110,110 L100,104 L90,110 L80,104 L70,110 Z M64,110 L136,110 L136,140 L124,133 L112,140 L100,133 L88,140 L76,133 L64,140 Z M56,140 L144,140 L144,174 L130,166 L116,174 L100,166 L84,174 L70,166 L56,174 Z M46,174 L154,174 L154,214 L138,205 L122,214 L100,205 L78,214 L62,205 L46,214 Z M34,214 L166,214 L166,262 L148,252 L130,262 L100,252 L70,262 L52,252 L34,262 Z M20,262 L180,262 L180,300 L20,300 Z' fill='%23180407' fill-opacity='.85'/%3E%3C/svg%3E");
}
.hero-gopuram-left {
  left: 1%;
  width: 220px;
  height: 40%;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300' preserveAspectRatio='xMidYMax meet'%3E%3Cpath d='M96,18 L104,18 L104,28 L110,28 L110,36 L104,36 L104,44 L100,50 L96,44 L96,36 L90,36 L90,28 L96,28 Z M78,66 L100,50 L122,66 L122,84 L78,84 Z M70,84 L130,84 L130,110 L120,104 L110,110 L100,104 L90,110 L80,104 L70,110 Z M64,110 L136,110 L136,140 L124,133 L112,140 L100,133 L88,140 L76,133 L64,140 Z M56,140 L144,140 L144,174 L130,166 L116,174 L100,166 L84,174 L70,166 L56,174 Z M46,174 L154,174 L154,214 L138,205 L122,214 L100,205 L78,214 L62,205 L46,214 Z M34,214 L166,214 L166,262 L148,252 L130,262 L100,252 L70,262 L52,252 L34,262 Z M20,262 L180,262 L180,300 L20,300 Z' fill='%23180407' fill-opacity='.85'/%3E%3C/svg%3E");
}

/* Rising golden aarti embers — seamless upward drift.
   Two layers with different dot offsets, speeds and scale. */
.hero-embers {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(233, 190, 85, .85) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(213, 160, 33, .6) 0 1.6px, transparent 2.6px),
    radial-gradient(circle, rgba(255, 224, 138, .5) 0 1.3px, transparent 2.3px);
  background-size: 260px 600px, 380px 600px, 200px 600px;
  background-repeat: repeat;
  -webkit-mask: linear-gradient(to top, transparent 0%, #000 16%, #000 72%, transparent 100%);
          mask: linear-gradient(to top, transparent 0%, #000 16%, #000 72%, transparent 100%);
  will-change: background-position;
}
@keyframes emberRiseA {
  from { background-position: 30px 40px, 140px 200px, 80px 120px; }
  to   { background-position: 30px -560px, 140px -400px, 80px -480px; }
}
@keyframes emberRiseB {
  from { background-position: 90px 90px, 10px 300px, 160px 30px; }
  to   { background-position: 90px -510px, 10px -300px, 160px -570px; }
}
.hero-embers-a { animation: emberRiseA 22s linear infinite; opacity: .8; }
.hero-embers-b {
  animation: emberRiseB 34s linear infinite;
  opacity: .45;
  transform: scale(1.4);
  transform-origin: bottom;
}

/* ---------- Hero badge: professional animated icon ---------- */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(213, 160, 33, .4); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(213, 160, 33, 0); }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 7px;
}
.hero-badge-icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .74rem;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary) 60%, var(--gold-2));
  box-shadow: 0 3px 8px rgba(213, 160, 33, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
  animation: badgePulse 3s ease-in-out infinite;
}

/* ============================================================
   FLOATING STACK v4 — single column, everything aligned
============================================================ */
.floating-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.fab,
.fab-top {
  width: 52px;
  height: 52px;
  font-size: 1.22rem;
}
/* Back-to-top lives inside the stack now — reset v3's fixed
   positioning and use display toggling for show/hide.        */
.fab-top {
  position: static;
  right: auto;
  bottom: auto;
  display: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  font-size: .95rem;
}
.fab-top.is-shown {
  display: inline-flex;
  animation: fabIn .45s var(--ease);
}
.floating-stack ~ .fab-top { bottom: auto; }

/* ============================================================
   FOOTER v4 — spacing & alignment refinement
============================================================ */
.footer-cta { margin-bottom: 54px; }
.footer-main { padding-bottom: 40px; }
.footer-main > [class*="col-"] { display: flex; flex-direction: column; }

.footer-heading {
  font-size: .95rem;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.footer-links li { margin-bottom: 10px; line-height: 1.5; }
.footer-links a { font-size: .9rem; }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
  font-size: .9rem;
  line-height: 1.55;
}
.footer-contact li i {
  flex: 0 0 20px;
  width: 20px;
  text-align: center;
  margin-top: 4px;
  color: var(--secondary);
}
.footer-contact a { word-break: break-word; }

.footer-text { font-size: .9rem; line-height: 1.7; }
.footer-bottom { padding-top: 22px; }
.footer-legal a { font-size: .84rem; }
.footer-copy { font-size: .84rem; }

/* ============================================================
   34. v5 UPDATE — STACK ALIGNMENT FIX + HERO PHOTO MODE
============================================================ */

/* ---------- FIX: legacy fixed-position WhatsApp rule ----------
   The original `.floating-whatsapp` (section 28) used
   position:fixed + 58px, which pulled the button OUT of the
   flex stack and caused the zig-zag layout. Inside the stack
   it must flow like every other fab.                          */
.floating-stack .floating-whatsapp,
.floating-stack .fab {
  position: static;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: 52px;
  height: 52px;
  font-size: 1.22rem;
  margin: 0;
}
.floating-stack .fab:hover {
  transform: translateY(-4px) scale(1.08);
}
.floating-stack .fab-top { font-size: .95rem; }

/* ============================================================
   HERO PHOTO MODE
   When a background image is uploaded in Admin → Hero Banner,
   the inline style attribute appears on .hero-bg. These rules
   activate automatically in that case:
   - stronger left→right overlay so the heading stays readable
   - focal point tuned to keep the statue/temple visible
   - CSS gopuram silhouettes & rays hidden (the real photo
     replaces them); floating embers stay for the diya effect
   - the existing slow Ken-Burns zoom keeps running
============================================================ */
.hero-bg[style] {
  background-size: cover;
  background-position: center 30%;
}
.hero-bg[style] + .hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 16, 30, .86) 0%, rgba(8, 16, 30, .55) 48%, rgba(8, 16, 30, .22) 100%),
    linear-gradient(0deg, rgba(18, 6, 10, .6) 0%, transparent 38%);
}
.hero-bg[style] ~ .hero-scene .hero-gopuram,
.hero-bg[style] ~ .hero-scene .hero-rays {
  display: none;
}
.hero-bg[style] ~ .hero-scene .hero-embers-a { opacity: .6; }
.hero-bg[style] ~ .hero-scene .hero-embers-b { opacity: .3; }

/* ============================================================
   35. v6 UPDATE — TIMELINE CENTER FIX, COMPARISON REDESIGN,
       FOOTER ANIMATION, LOGO ANIMATION, MOBILE MENU
============================================================ */

/* ---------- 1. JOURNEY TIMELINE — mathematically centered ----------
   The line position is now derived from the same tokens as the
   columns (time width + gap + half the dot), so it passes through
   the exact centre of every dot at every breakpoint.            */
.journey-timeline {
  --tl-time: 92px;
  --tl-gap: 18px;
  --tl-dot: 40px;
}
.journey-timeline::before {
  left: calc(var(--tl-time) + var(--tl-gap) + (var(--tl-dot) / 2));
  transform: translateX(-50%);
}
.timeline-step { gap: var(--tl-gap); }
.timeline-time { flex: 0 0 var(--tl-time); }
.timeline-dot {
  flex: 0 0 var(--tl-dot);
  width: var(--tl-dot);
  height: var(--tl-dot);
  box-shadow: 0 0 0 4px var(--cream-2);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.timeline-step:hover .timeline-dot {
  transform: scale(1.12);
  border-color: var(--secondary);
  box-shadow: 0 0 0 4px var(--cream-2), 0 6px 14px rgba(213, 160, 33, .3);
}

/* ---------- 2. COMPARE OUR PACKAGES — professional card table ---------- */
.comparison-wrap {
  border-radius: 18px;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 18px 44px rgba(36, 24, 8, .1);
  overflow: hidden;
}
.comparison-table { min-width: 620px; }
.comparison-table thead th {
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-2) 100%);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: .98rem;
  letter-spacing: .04em;
  padding: 18px;
  border: 0;
  vertical-align: middle;
}
.comparison-table thead th:first-child {
  text-align: left;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 249, 237, .75);
}
.comparison-table thead th small {
  display: block;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--secondary);
  margin-top: 4px;
}
.comparison-table thead th.cmp-featured {
  background: linear-gradient(160deg, #a86810 0%, var(--gold-2) 45%, var(--secondary) 130%);
  color: #fff;
  position: relative;
}
.comparison-table tbody th {
  text-align: left;
  font-size: .88rem;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
}
.comparison-table tbody tr { transition: background-color .3s var(--ease); }
.comparison-table tbody tr:hover { background: rgba(213, 160, 33, .07); }
.comparison-table tbody tr:nth-child(even) { background: rgba(248, 236, 213, .35); }
.comparison-table tbody tr:nth-child(even):hover { background: rgba(213, 160, 33, .1); }
.comparison-table td.cmp-featured,
.comparison-table .cmp-featured { background: rgba(213, 160, 33, .12); }
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom: 0; }

/* Included / not-included pills */
.comparison-table .cmp-yes,
.comparison-table .cmp-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .8rem;
  transition: transform .3s var(--ease);
}
.comparison-table .cmp-yes {
  color: #1F7A38;
  background: rgba(31, 122, 56, .12);
  border: 1px solid rgba(31, 122, 56, .3);
}
.comparison-table .cmp-no {
  color: #9aa0a6;
  background: rgba(154, 160, 166, .12);
  border: 1px solid rgba(154, 160, 166, .3);
}
.comparison-table tbody tr:hover .cmp-yes { transform: scale(1.18); }

/* ---------- 3. FOOTER — ambient animated background ---------- */
@keyframes footGlowA {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .5; }
  50%      { transform: translate(60px, -34px) scale(1.15); opacity: .8; }
}
@keyframes footGlowB {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .4; }
  50%      { transform: translate(-70px, 28px) scale(1.12); opacity: .7; }
}
.site-footer {
  position: relative;
  overflow: hidden;
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
  z-index: 0;
}
.site-footer::before {
  width: 460px; height: 460px;
  top: -140px; right: -110px;
  background: radial-gradient(circle, rgba(213, 160, 33, .14), transparent 66%);
  animation: footGlowA 16s ease-in-out infinite;
}
.site-footer::after {
  width: 420px; height: 420px;
  bottom: -160px; left: -120px;
  background: radial-gradient(circle, rgba(148, 25, 25, .22), transparent 66%);
  animation: footGlowB 20s ease-in-out infinite;
}
.site-footer > .container,
.site-footer .footer-ornament { position: relative; z-index: 1; }

/* ---------- 4. HEADER LOGO ANIMATION ---------- */
@keyframes brandGlow {
  0%, 88%, 100% { box-shadow: 0 0 0 0 rgba(213, 160, 33, .0); }
  92%           { box-shadow: 0 0 0 8px rgba(213, 160, 33, .22); }
  96%           { box-shadow: 0 0 0 4px rgba(213, 160, 33, .1); }
}
@keyframes brandPop {
  0%   { transform: scale(.6) rotate(-14deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.site-header .brand-mark {
  animation:
    brandPop .7s cubic-bezier(.34, 1.56, .64, 1) both,
    brandGlow 7s 1.4s ease-in-out infinite;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.navbar-brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 0 0 6px rgba(213, 160, 33, .18), 0 8px 18px rgba(111, 13, 13, .3);
}
.navbar-brand .brand-name { transition: letter-spacing .45s var(--ease), color .45s var(--ease); }
.navbar-brand:hover .brand-name { letter-spacing: .06em; color: var(--primary-2); }

/* ---------- 5. MOBILE MENU — professional redesign ---------- */
.mobile-menu {
  max-width: 320px;
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(213, 160, 33, .1), transparent 60%),
    linear-gradient(170deg, var(--cream) 0%, #FFF4DE 100%);
}
.mobile-menu .offcanvas-header {
  background: linear-gradient(140deg, var(--primary) 0%, var(--primary-2) 100%);
  padding: 18px 20px;
}
.mobile-menu .offcanvas-header .brand-name-sm { color: var(--cream); }
.mobile-menu .offcanvas-header .btn-close {
  filter: invert(1) brightness(2);
  opacity: .85;
}
.mobile-menu .offcanvas-body { padding: 18px 16px 20px; }

/* Staggered slide-in when the menu opens */
@keyframes mnlIn {
  from { opacity: 0; transform: translateX(26px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mobile-menu.show .mobile-nav li {
  animation: mnlIn .45s var(--ease) both;
  animation-delay: calc(var(--mi, 1) * 55ms);
}

.mobile-nav li { margin-bottom: 4px; }
.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  transition: background-color .3s var(--ease), color .3s var(--ease), padding-left .3s var(--ease);
}
.mnl-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: .88rem;
  color: var(--gold-2);
  background: rgba(213, 160, 33, .12);
  border: 1px solid rgba(213, 160, 33, .25);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.mnl-text { flex: 1; }
.mnl-arrow {
  font-size: .68rem;
  color: var(--gold-line);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  background: rgba(213, 160, 33, .1);
  color: var(--primary);
}
.mobile-nav-link:hover .mnl-arrow { transform: translateX(3px); color: var(--gold-2); }
.mobile-nav-link.active {
  background: linear-gradient(140deg, var(--primary) 0%, var(--primary-2) 100%);
  color: var(--cream);
  box-shadow: 0 8px 18px rgba(111, 13, 13, .28);
}
.mobile-nav-link.active .mnl-icon {
  background: rgba(255, 249, 237, .16);
  border-color: rgba(213, 160, 33, .5);
  color: var(--secondary);
}
.mobile-nav-link.active .mnl-arrow { color: var(--secondary); }

/* Contact card at the bottom of the menu */
.mobile-contact-card {
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.mobile-contact-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 10px;
}
.mobile-contact-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.mobile-contact-link:hover { color: var(--primary-2); }
.mcl-icon {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .78rem;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
}
.mcl-wa { background: linear-gradient(140deg, #2EE274, #1DA851); color: #fff; }
.mobile-contact-timing {
  font-size: .8rem;
  color: var(--ink-soft);
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mobile-contact-timing i { color: var(--gold-2); }

/* Comparison header badge (e.g. "Most Comfortable") */
.comparison-table thead th .cmp-badge {
  display: block;
  font-family: var(--font-body);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 5px;
  opacity: .95;
}
.comparison-table thead th.cmp-featured .cmp-badge { color: var(--cream); }

/* ============================================================
   36. v7 FIX — SEAMLESS HERO → WAVE → NEXT SECTION
   ------------------------------------------------------------
   Root cause of the visible band/gap: CSS paints the FIRST
   background-image on TOP. The translucent gold layer was
   listed first, so it rendered over the solid cream front
   wave, showing as a tan strip below the curves.
   Correct stacking (top → bottom): solid cream front wave,
   translucent cream mid wave, translucent gold back wave.
   The solid front layer fills flush to the bottom edge, and
   its fill (--cream #FFF9ED) is identical to the trust-strip
   background — a perfectly seamless hand-off.
============================================================ */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-temple-silhouette {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  background-image:
    /* 1 — TOP: solid cream front wave (seals the bottom edge) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C240,110 480,10 720,60 C960,110 1200,10 1440,60 L1440,120 L0,120 Z' fill='%23FFF9ED'/%3E%3C/svg%3E"),
    /* 2 — MID: translucent cream */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,20 480,120 720,70 C960,20 1200,120 1440,70 L1440,120 L0,120 Z' fill='%23FFF9ED' fill-opacity='.5'/%3E%3C/svg%3E"),
    /* 3 — BACK: translucent gold accent */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,52 C240,102 480,2 720,52 C960,102 1200,2 1440,52 L1440,120 L0,120 Z' fill='%23D5A021' fill-opacity='.35'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x, repeat-x;
  background-size: 1200px 100%, 1440px 100%, 1680px 100%;
  background-position: 0 bottom, 0 bottom, 0 bottom;
}

/* Re-map the drift to the new layer order (front fastest,
   mid reverse, gold slowest) — same seamless multiples. */
@keyframes waveShiftV7 {
  from { background-position: 0 bottom, 0 bottom, 0 bottom; }
  to   { background-position: -2400px bottom, 1440px bottom, -1680px bottom; }
}
.hero-temple-silhouette { animation: waveShiftV7 24s linear infinite; }

/* ============================================================
   37. v8 — COMPACT WAVE → NEXT SECTION TRANSITION
   ------------------------------------------------------------
   The cream mass below the wave curves came from two places:
   (1) the wave paths sat HIGH inside the tile, so the solid
       fill under the curve valleys was tall;
   (2) the next section added its own top padding.
   Fix: same wave design, but the curves now ride LOW in the
   tile (only a thin solid band under the valleys), the strip
   is shorter, and the trust section starts immediately.
   Hero height, content, buttons and layout are untouched.
============================================================ */
.hero-temple-silhouette {
  height: 88px;
  background-image:
    /* 1 — TOP: solid cream front wave, riding low */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,78 C240,116 480,42 720,78 C960,116 1200,42 1440,78 L1440,120 L0,120 Z' fill='%23FFF9ED'/%3E%3C/svg%3E"),
    /* 2 — MID: translucent cream */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,88 C240,52 480,120 720,88 C960,52 1200,120 1440,88 L1440,120 L0,120 Z' fill='%23FFF9ED' fill-opacity='.5'/%3E%3C/svg%3E"),
    /* 3 — BACK: translucent gold accent */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,112 480,32 720,70 C960,112 1200,32 1440,70 L1440,120 L0,120 Z' fill='%23D5A021' fill-opacity='.35'/%3E%3C/svg%3E");
}

/* Next section starts immediately after the wave */
.trust-strip { padding-top: 10px; }

/* Compact wave heights across breakpoints (override earlier sets) */
@media (max-width: 991.98px) {
  .hero-temple-silhouette { height: 68px; }
}
@media (max-width: 767.98px) {
  .hero-temple-silhouette { height: 54px; }
}
@media (max-width: 575.98px) {
  .hero-temple-silhouette { height: 44px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .hero-temple-silhouette { height: 36px; }
}

/* ============================================================
   38. v9 — INNER PAGE HERO: DEVOTIONAL ANIMATION SUITE
   ------------------------------------------------------------
   Applies to every inner page banner (About, Packages, Places,
   Facilities, Gallery, FAQs, Contact, legal pages…):
   1. rising golden aarti embers (two parallax layers)
   2. soft temple-glow breathing in the top corner
   3. staggered entrance for title → subtitle → breadcrumb
   4. gold accent bar growing under the title
   5. bottom wave: stacking corrected + gentle drift animation
============================================================ */

/* ---------- 1+2. Embers + breathing glow (no markup needed) ---------- */
@keyframes pageEmbers {
  from { background-position: 20px 100%,  0 100%,  85% -20%; }
  to   { background-position: 20px -220%, 0 -160%, 85% -20%; }
}
@keyframes pageGlowBreathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    /* small embers — faster layer */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='160' viewBox='0 0 90 160'%3E%3Ccircle cx='18' cy='24' r='1.6' fill='%23E9BE55' fill-opacity='.7'/%3E%3Ccircle cx='64' cy='72' r='1.1' fill='%23D5A021' fill-opacity='.55'/%3E%3Ccircle cx='38' cy='126' r='1.4' fill='%23F0CE7A' fill-opacity='.6'/%3E%3C/svg%3E"),
    /* large embers — slower layer */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='220' viewBox='0 0 140 220'%3E%3Ccircle cx='30' cy='40' r='2.4' fill='%23D5A021' fill-opacity='.4'/%3E%3Ccircle cx='104' cy='118' r='1.8' fill='%23E9BE55' fill-opacity='.35'/%3E%3Ccircle cx='62' cy='190' r='2' fill='%23B77A17' fill-opacity='.38'/%3E%3C/svg%3E"),
    /* temple glow — top right, breathes via the second animation */
    radial-gradient(420px 300px at 85% -20%, rgba(213, 160, 33, .22), transparent 70%);
  background-repeat: repeat, repeat, no-repeat;
  background-size: 90px 160px, 140px 220px, auto;
  animation:
    pageEmbers 26s linear infinite,
    pageGlowBreathe 7s ease-in-out infinite;
}

/* Content sits above the ember layer */
.page-hero .container { position: relative; z-index: 1; }

/* ---------- 3. Staggered entrance choreography ---------- */
@keyframes pageRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero .reveal {
  opacity: 0;
  transform: none;
  transition: none;
  animation: pageRise .75s cubic-bezier(.22, 1, .36, 1) forwards;
}
.page-hero .page-hero-title  { animation-delay: .05s; }
.page-hero .page-hero-sub,
.page-hero .page-hero-price  { animation-delay: .18s; }
.page-hero nav[aria-label="breadcrumb"],
.page-hero .breadcrumb       { animation-delay: .3s; }

/* ---------- 4. Gold accent bar under the title ---------- */
@keyframes titleBarGrow {
  from { width: 0; opacity: 0; }
  to   { width: 58px; opacity: 1; }
}
.page-hero-title {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 10px;
}
.page-hero-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 58px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--secondary), #E9BE55 55%, transparent);
  box-shadow: 0 0 10px rgba(213, 160, 33, .5);
  animation: titleBarGrow .8s .45s cubic-bezier(.22, 1, .36, 1) both;
}

/* ---------- 5. Bottom wave: correct stacking + gentle drift ----------
   (Same first-layer-paints-on-top fix as the homepage hero:
    solid cream must be listed FIRST so it seals the edge.)   */
@keyframes pageWaveDrift {
  from { background-position: 0 bottom, 0 bottom; }
  to   { background-position: -2400px bottom, 1680px bottom; }
}
.page-hero::after {
  background-image:
    /* TOP: solid cream — rides low, seals the bottom edge */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,78 C240,116 480,42 720,78 C960,116 1200,42 1440,78 L1440,120 L0,120 Z' fill='%23FFF9ED'/%3E%3C/svg%3E"),
    /* BACK: translucent gold accent */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,68 C240,110 480,30 720,68 C960,110 1200,30 1440,68 L1440,120 L0,120 Z' fill='%23D5A021' fill-opacity='.35'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x;
  background-size: 1200px 100%, 1680px 100%;
  background-position: 0 bottom, 0 bottom;
  animation: pageWaveDrift 26s linear infinite;
}

/* ============================================================
   39. v10 — UNIFORM CENTERED PAGE HERO ON EVERY PAGE
   ------------------------------------------------------------
   All inner pages share one identical banner layout:
   centered title, centered gold divider directly under it,
   centered subtitle and breadcrumb.
============================================================ */
.page-hero,
.page-hero .container {
  text-align: center;
}

/* Gold divider: centered under the title (was pinned left,
   which floated away from centered headings). The grow
   animation now expands symmetrically from the middle. */
@keyframes titleBarGrowCenter {
  from { width: 0; opacity: 0; }
  to   { width: 58px; opacity: 1; }
}
.page-hero-title::after {
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #E9BE55 30%, var(--secondary) 50%, #E9BE55 70%, transparent);
  animation: titleBarGrowCenter .8s .45s cubic-bezier(.22, 1, .36, 1) both;
}

/* Subtitle and breadcrumb sit centered under the divider */
.page-hero-sub {
  margin-left: auto;
  margin-right: auto;
}
.page-hero .breadcrumb {
  justify-content: center;
}
.page-hero .breadcrumb,
.page-hero nav[aria-label="breadcrumb"] {
  display: flex;
  justify-content: center;
}
.page-hero .breadcrumb { display: inline-flex; }

/* v11 — admin-adjusted images crop cleanly inside their frames */
.about-image-grid { overflow: hidden; }
.about-image-grid img { object-fit: cover; }

/* ============================================================
   40. v13 — PRE-FOOTER CTA BAND (own section above the footer)
============================================================ */
.prefooter-cta-section {
  background: var(--cream);
  padding: 10px 0 46px;
}
.prefooter-cta-section .footer-cta {
  margin-top: 0;
  margin-bottom: 0;
}
/* The footer no longer needs to make room for an overlapping band */
.site-footer .footer-main { padding-top: 52px; }

/* ============================================================
   41. v14 — ANIMATED FOOTER BORDER + VISITOR COUNTER
============================================================ */

/* ---------- Footer top border: temple arch + travelling glow ---------- */
.footer-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: auto;
  background: none;
  margin-bottom: 0;
  padding-top: 26px;
}
.fo-line {
  position: relative;
  flex: 1;
  max-width: 320px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(213, 160, 33, .55), transparent);
  overflow: hidden;
}
/* A soft light that travels along each line */
.fo-line::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, #FFE6A8, transparent);
  animation: foSweep 5.5s ease-in-out infinite;
}
.fo-line:last-of-type::after { animation-delay: 2.75s; }
@keyframes foSweep {
  0%   { left: -60px; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Centre lamp medallion — slow breathing halo */
.fo-lamp {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--secondary);
  background: radial-gradient(circle at 34% 28%, #1a3557, var(--navy));
  border: 1px solid rgba(213, 160, 33, .55);
  animation: foLampGlow 4s ease-in-out infinite;
}
@keyframes foLampGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213, 160, 33, .35), inset 0 0 10px rgba(213, 160, 33, .18); }
  50%      { box-shadow: 0 0 0 10px rgba(213, 160, 33, 0),  inset 0 0 18px rgba(213, 160, 33, .34); }
}

/* Repeating temple-arch silhouette band under the ornament */
.footer-arch {
  height: 26px;
  margin: 14px 0 46px;
  opacity: .5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='26' viewBox='0 0 120 26'%3E%3Cpath d='M0,26 L0,18 Q15,18 15,9 Q15,0 30,0 Q45,0 45,9 Q45,18 60,18 Q75,18 75,9 Q75,0 90,0 Q105,0 105,9 Q105,18 120,18 L120,26 Z' fill='none' stroke='%23D5A021' stroke-opacity='.4' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 bottom;
  animation: archDrift 34s linear infinite;
}
@keyframes archDrift {
  from { background-position: 0 bottom; }
  to   { background-position: -1200px bottom; }
}

/* ---------- Website visitor counter ---------- */
.visitor-counter {
  margin-top: 22px;
  padding: 15px 16px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  border: 1px solid rgba(213, 160, 33, .28);
  position: relative;
  overflow: hidden;
}
/* Slow gold sheen crossing the panel */
.visitor-counter::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(213, 160, 33, .12), transparent);
  animation: vcSheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vcSheen {
  0%, 65% { left: -40%; }
  100%    { left: 120%; }
}

.vc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 12px;
}
.vc-grid { display: flex; gap: 10px; }
.vc-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vc-num {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.vc-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  color: rgba(255, 249, 237, .62);
  white-space: nowrap;
}
.vc-live .vc-num { color: var(--secondary); }
.vc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #35D07F;
  box-shadow: 0 0 0 0 rgba(53, 208, 127, .6);
  animation: vcPing 2s ease-out infinite;
}
@keyframes vcPing {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 127, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 127, 0); }
}

/* ============================================================
   42. v15 — RICHER FOOTER BORDER, ANIMATED COUNTER ICONS,
       FOOTER SPACING FIX
============================================================ */

/* ---------- Border: side diyas + layered lamp ---------- */
.footer-ornament { gap: 14px; padding-top: 30px; }
.fo-line { max-width: 260px; height: 1px; background: linear-gradient(90deg, transparent, rgba(213,160,33,.5), rgba(213,160,33,.75), rgba(213,160,33,.5), transparent); }
.fo-line::after { height: 3px; top: -1px; bottom: auto; filter: blur(1px); }

/* Small oil lamps flanking the medallion, flames flickering */
.fo-diya {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .68rem;
  color: #FFC24A;
  background: radial-gradient(circle at 50% 70%, rgba(213,160,33,.28), transparent 70%);
  text-shadow: 0 0 8px rgba(255, 176, 46, .85);
}
.fo-diya i { animation: diyaFlicker 2.6s ease-in-out infinite; transform-origin: 50% 85%; }
.fo-diya-right i { animation-delay: 1.3s; }
@keyframes diyaFlicker {
  0%, 100% { opacity: .75; transform: scale(1) rotate(-2deg); }
  25%      { opacity: 1;   transform: scale(1.14) rotate(2deg); }
  55%      { opacity: .82; transform: scale(.96) rotate(-1deg); }
  75%      { opacity: 1;   transform: scale(1.08) rotate(1deg); }
}

/* Medallion: rotating dashed halo ring behind the Om */
.fo-lamp { position: relative; width: 46px; height: 46px; font-size: 1.1rem; }
.fo-lamp-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(213, 160, 33, .45);
  animation: lampRingSpin 22s linear infinite;
}
@keyframes lampRingSpin { to { transform: rotate(360deg); } }
.fo-lamp i { position: relative; z-index: 1; }

/* ---------- Arch band: brighter, with a slow parallax second layer ---------- */
.footer-arch {
  height: 30px;
  margin: 16px 0 0;
  opacity: .85;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Cpath d='M0,30 L0,20 Q15,20 15,10 Q15,1 30,1 Q45,1 45,10 Q45,20 60,20 Q75,20 75,10 Q75,1 90,1 Q105,1 105,10 Q105,20 120,20 L120,30 Z' fill='none' stroke='%23D5A021' stroke-opacity='.55' stroke-width='1.2'/%3E%3Ccircle cx='30' cy='1' r='1.6' fill='%23E9BE55' fill-opacity='.7'/%3E%3Ccircle cx='90' cy='1' r='1.6' fill='%23E9BE55' fill-opacity='.7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30' viewBox='0 0 200 30'%3E%3Cpath d='M0,30 L0,24 Q25,24 25,14 Q25,6 50,6 Q75,6 75,14 Q75,24 100,24 Q125,24 125,14 Q125,6 150,6 Q175,6 175,14 Q175,24 200,24 L200,30 Z' fill='none' stroke='%23B77A17' stroke-opacity='.3' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x;
  background-size: 120px 100%, 200px 100%;
  background-position: 0 bottom, 0 bottom;
  animation: archDriftV2 40s linear infinite;
}
@keyframes archDriftV2 {
  from { background-position: 0 bottom, 0 bottom; }
  to   { background-position: -1200px bottom, 800px bottom; }
}

/* ---------- Rising temple sparks under the border ---------- */
.footer-petals {
  position: relative;
  height: 0;
  margin: 0;
}
.footer-petals span {
  position: absolute;
  bottom: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #E9BE55;
  opacity: 0;
  animation: petalRise 9s ease-in-out infinite;
}
.footer-petals span:nth-child(1) { left: 14%; animation-delay: 0s;   }
.footer-petals span:nth-child(2) { left: 33%; animation-delay: 1.8s; width: 2px; height: 2px; }
.footer-petals span:nth-child(3) { left: 52%; animation-delay: 3.4s; }
.footer-petals span:nth-child(4) { left: 71%; animation-delay: 5.1s; width: 2px; height: 2px; }
.footer-petals span:nth-child(5) { left: 88%; animation-delay: 6.7s; }
@keyframes petalRise {
  0%   { transform: translateY(0) scale(.6);      opacity: 0; }
  15%  { opacity: .9; }
  70%  { opacity: .5; }
  100% { transform: translateY(-58px) scale(1.1); opacity: 0; }
}

/* ============================================================
   FOOTER SPACING — tightened, even rhythm
============================================================ */
.footer-main { padding-top: 40px; padding-bottom: 34px; }
.site-footer .footer-main { padding-top: 40px; }
.footer-brand-name { line-height: 1.3; }
.footer-text { margin-bottom: 14px; font-size: .86rem; line-height: 1.7; }
.footer-badges { margin: 0 0 16px; }
.footer-badges li { margin-bottom: 6px; }
.footer-heading { margin-bottom: 14px; padding-bottom: 9px; }
.footer-links li { margin-bottom: 6px; }
.footer-links a { font-size: .87rem; }
.footer-contact li { margin-bottom: 10px; align-items: flex-start; }
.footer-timing { margin-top: 0; }
.footer-bottom { padding: 16px 0; }

/* Column 3 (Packages + Timings) — even vertical rhythm */
.footer-main .footer-heading.mt-4 { margin-top: 22px !important; }

/* ============================================================
   VISITOR COUNTER — animated icons + tighter layout
============================================================ */
.visitor-counter { margin-top: 18px; padding: 14px 15px; }
.vc-title { margin-bottom: 12px; }
.vc-title i { animation: vcTitlePulse 3.2s ease-in-out infinite; }
@keyframes vcTitlePulse {
  0%, 100% { opacity: .75; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}

.vc-grid { gap: 8px; }
.vc-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
}
.vc-data { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.vc-icon {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: .76rem;
  color: var(--secondary);
  background: rgba(213, 160, 33, .14);
  border: 1px solid rgba(213, 160, 33, .3);
}
/* Each icon has its own idle motion */
.vc-icon-users i  { animation: vcUsers 3.4s ease-in-out infinite; }
.vc-icon-views i  { animation: vcBlink 4.2s ease-in-out infinite; }
.vc-icon-today    { color: #FFD36A; border-color: rgba(255, 211, 106, .45); background: rgba(255, 211, 106, .16); }
.vc-icon-today i  { animation: vcBolt 2.6s ease-in-out infinite; }

@keyframes vcUsers {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2px) scale(1.1); }
}
@keyframes vcBlink {
  0%, 88%, 100% { transform: scaleY(1); opacity: 1; }
  93%           { transform: scaleY(.15); opacity: .75; }
}
@keyframes vcBolt {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,211,106,0)); }
  45%      { transform: scale(1.16); filter: drop-shadow(0 0 6px rgba(255,211,106,.8)); }
  60%      { transform: scale(.98); }
}
.vc-num { font-size: 1.12rem; }
.vc-label { font-size: .66rem; }

/* ============================================================
   43. v16 — DEVELOPER CREDIT + COUNTER ICON SPACING
============================================================ */

/* ---------- Designed By · Valmiki Web Studio ---------- */
.footer-dev-credit {
  margin-top: 6px;
  font-size: .8rem;
  color: rgba(255, 249, 237, .55);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}
.fdc-label { white-space: nowrap; }
.fdc-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--secondary);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color .3s var(--ease);
}
/* Gold underline that grows on hover */
.fdc-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--secondary), rgba(213, 160, 33, .25));
  transform: scaleX(1);
  transform-origin: left;
  transition: transform .4s var(--ease), background .3s var(--ease);
}
.fdc-link:hover { color: #FFD980; }
.fdc-link:hover::after { background: linear-gradient(90deg, #FFD980, var(--secondary)); }
.fdc-link i {
  font-size: .62rem;
  opacity: .7;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.fdc-link:hover i { transform: translate(2px, -2px); opacity: 1; }

@media (min-width: 992px) {
  .footer-dev-credit { justify-content: flex-end; }
}

/* ---------- Visitor counter: breathing room between items ---------- */
.vc-grid { gap: 16px; }
.vc-item { gap: 11px; }
.vc-item + .vc-item {
  padding-left: 16px;
  border-left: 1px solid rgba(213, 160, 33, .18);
}
.visitor-counter { padding: 15px 17px; }

/* ============================================================
   44. v17 — FOOTER CLEAN-UP
   Fixes: oversized dead space under the border, cramped
   4th column, wrapped counter icons, credit link colour.
============================================================ */

/* ---------- 1. Tighter vertical rhythm ---------- */
.footer-ornament { padding-top: 24px; }
.footer-arch { height: 26px; margin: 12px 0 0; }
.site-footer .footer-main,
.footer-main { padding-top: 30px; padding-bottom: 26px; }
.footer-bottom { margin-top: 4px; padding: 16px 0 6px; }

/* ---------- 2. Visitor counter as a full-width strip ---------- */
.visitor-counter {
  margin: 4px 0 0;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.vc-title {
  margin: 0;
  padding-right: 22px;
  border-right: 1px solid rgba(213, 160, 33, .22);
  flex: 0 0 auto;
}
.vc-grid {
  flex: 1;
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  min-width: 0;
}
.vc-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;      /* icon and numbers stay on one line */
  gap: 12px;
  padding: 0 20px;
  min-width: 0;
}
.vc-item:first-child { padding-left: 0; }
.vc-item + .vc-item {
  padding-left: 20px;
  border-left: 1px solid rgba(213, 160, 33, .18);
  padding-top: 0;
  border-top: 0;
}
.vc-icon { flex: 0 0 34px; width: 34px; height: 34px; font-size: .82rem; }
.vc-data { flex: 1 1 auto; min-width: 0; }
.vc-num { font-size: 1.2rem; }
.vc-label { font-size: .68rem; }

/* ---------- 3. Developer credit — clear gold, no red tint ---------- */
.footer-dev-credit { color: rgba(255, 249, 237, .58); }
.fdc-link,
.footer-dev-credit .fdc-link,
.footer-dev-credit a { color: #E9BE55; }
.fdc-link:hover,
.footer-dev-credit a:hover { color: #FFE7A8; }
.fdc-link::after { background: linear-gradient(90deg, #E9BE55, rgba(233, 190, 85, .2)); }
.fdc-link:hover::after { background: linear-gradient(90deg, #FFE7A8, #E9BE55); }

/* ---------- 4. Column balance ---------- */
.footer-contact li { margin-bottom: 9px; }
.footer-main .footer-heading.mt-4 { margin-top: 20px !important; }

/* ============================================================
   45. v18 — VISITOR STRIP WIDTH, BRAND HOVER FIX,
       PROFESSIONAL MOBILE ACTION BAR
============================================================ */

/* ---------- 1. Visitor strip: centred, not edge-to-edge ---------- */
.visitor-counter {
  max-width: 720px;
  margin: 10px auto 0;
  padding: 14px 22px;
  gap: 0;
  justify-content: center;
}
.vc-title {
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid rgba(213, 160, 33, .22);
}
.vc-grid { flex: 0 1 auto; gap: 0; }
.vc-item {
  flex: 0 0 auto;
  gap: 10px;
  padding: 0 18px;
}
.vc-item:first-child { padding-left: 0; }
.vc-item + .vc-item { padding-left: 18px; }

/* ---------- 2. Brand hover: only the logo reacts ----------
   The letter-spacing change on the brand name re-flowed the
   navbar, which made the menu items jump. The name now keeps
   a fixed footprint and only shifts colour.                */
.navbar-brand:hover .brand-name {
  letter-spacing: normal;
  color: var(--primary-2);
}
.navbar-brand,
.navbar-brand .brand-text { will-change: auto; }
.navbar-brand:hover .brand-mark {
  transform: rotate(-6deg) scale(1.06);
}

/* ============================================================
   3. MOBILE ACTION BAR — premium redesign
============================================================ */
.mobile-action-bar {
  background: linear-gradient(180deg, rgba(255, 253, 248, .97), rgba(255, 249, 237, .99));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(213, 160, 33, .35);
  box-shadow: 0 -8px 28px rgba(36, 24, 8, .16);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0));
  gap: 8px;
}

.mab-item {
  position: relative;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  padding: 9px 4px 8px;
  border-radius: 14px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--primary);
  background: rgba(213, 160, 33, .08);
  border: 1px solid rgba(213, 160, 33, .22);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.mab-item i { font-size: 1.02rem; transition: transform .3s var(--ease); }
.mab-item:active { transform: scale(.95); }

/* Call — maroon with a ringing handset */
.mab-item:not(.mab-whatsapp):not(.mab-book) {
  color: var(--primary);
}
.mab-item:not(.mab-whatsapp):not(.mab-book) i {
  animation: mabRing 3.4s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes mabRing {
  0%, 72%, 100% { transform: rotate(0); }
  76% { transform: rotate(-16deg); }
  80% { transform: rotate(14deg); }
  84% { transform: rotate(-11deg); }
  88% { transform: rotate(8deg); }
  92% { transform: rotate(0); }
}

/* WhatsApp — green tile with a breathing halo */
.mab-whatsapp {
  color: #0F7B3D;
  background: rgba(37, 211, 102, .12);
  border-color: rgba(37, 211, 102, .35);
}
.mab-whatsapp i { animation: mabPop 3s ease-in-out infinite; }
@keyframes mabPop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

/* Book Now — solid gold, the primary action */
.mab-book {
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary) 58%, var(--gold-2));
  border-color: var(--gold-2);
  box-shadow: 0 4px 14px rgba(213, 160, 33, .34);
  font-weight: 700;
}
/* Gold shine sweeping across the primary button */
.mab-book::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg);
  animation: mabShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mabShine {
  0%, 55% { left: -60%; }
  100%    { left: 130%; }
}
.mab-book i { animation: mabPray 4s ease-in-out infinite; }
@keyframes mabPray {
  0%, 88%, 100% { transform: scale(1); }
  94%           { transform: scale(1.16); }
}

/* ============================================================
   46. v19 — NO HOVER LABELS + FLOATING PILL ACTION BAR
============================================================ */

/* ---------- 1. Desktop floating buttons: icon only ---------- */
.fab-label { display: none !important; }
.fab:hover .fab-label { display: none !important; }

/* ============================================================
   2. MOBILE ACTION BAR — floating pill card
============================================================ */
.mobile-action-bar {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
  border: 1px solid rgba(213, 160, 33, .28);
  border-radius: 24px;
  background: rgba(255, 253, 248, .96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 10px 30px rgba(36, 24, 8, .18),
    0 2px 8px rgba(36, 24, 8, .08);
  padding: 9px 8px;
  gap: 2px;
}

.mab-item {
  position: relative;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 2px 7px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-soft);
  overflow: visible;
  transition: color .3s var(--ease);
}

/* Icon sits inside a soft circle that fills on press */
.mab-item i {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  background: transparent;
  transition:
    background-color .35s var(--ease),
    color .35s var(--ease),
    transform .35s var(--ease),
    box-shadow .35s var(--ease);
}

/* Small indicator bar under the active/primary item */
.mab-item::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: currentColor;
  opacity: 0;
  transition: width .35s var(--ease), opacity .35s var(--ease);
}
.mab-item:active { color: var(--primary); }
.mab-item:active i { transform: scale(.9); }
.mab-item:active::before { width: 20px; opacity: .55; }

/* ---- Call ---- */
.mab-item:not(.mab-whatsapp):not(.mab-book) i {
  color: var(--primary);
  background: rgba(111, 13, 13, .09);
  animation: mabRing 3.6s ease-in-out infinite;
  transform-origin: 50% 60%;
}
.mab-item:not(.mab-whatsapp):not(.mab-book):active i {
  background: var(--primary);
  color: #fff;
}

/* ---- WhatsApp ---- */
.mab-whatsapp { color: var(--ink-soft); background: transparent; border: 0; }
.mab-whatsapp i {
  color: #0F7B3D;
  background: rgba(37, 211, 102, .14);
  animation: mabPop 3.2s ease-in-out infinite;
}
.mab-whatsapp:active { color: #0F7B3D; }
.mab-whatsapp:active i { background: #25D366; color: #fff; }

/* ---- Book Now — the highlighted primary action ---- */
.mab-book {
  color: var(--primary);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-weight: 700;
}
.mab-book i {
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary) 60%, var(--gold-2));
  box-shadow: 0 5px 14px rgba(213, 160, 33, .42);
  animation: mabFloat 3.4s ease-in-out infinite;
}
.mab-book::before {
  width: 22px;
  opacity: 1;
  background: linear-gradient(90deg, var(--secondary), var(--gold-2));
}
.mab-book:active i { transform: scale(.92); }
.mab-book::after { display: none; }   /* the old shine sweep is not needed here */

@keyframes mabFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ============================================================
   46. v19 — NO HOVER LABELS + APP-STYLE MOBILE ACTION BAR
============================================================ */

/* ---------- 1. Floating buttons: labels removed ---------- */
.fab-label { display: none !important; }

/* ============================================================
   2. MOBILE ACTION BAR — floating app-style dock
   Rounded card lifted off the edge, circular icon badges,
   labels under them, primary action highlighted.
============================================================ */
.mobile-action-bar {
  left: 12px;
  right: 12px;
  bottom: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
  border: 1px solid rgba(213, 160, 33, .3);
  border-radius: 22px;
  background: rgba(255, 253, 248, .93);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 10px 30px rgba(36, 24, 8, .18),
    0 2px 6px rgba(36, 24, 8, .08);
  padding: 8px 6px;
  gap: 2px;
  overflow: visible;
}

.mab-item {
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px 4px;
  border: 0;
  background: transparent;
  border-radius: 16px;
  font-size: .66rem;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: none;
  overflow: visible;
  transition: color .3s var(--ease);
}

/* Circular icon badge — the element that animates */
.mab-item i {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--ink-soft);
  background: transparent;
  transition:
    background-color .32s var(--ease),
    color .32s var(--ease),
    transform .32s var(--ease),
    box-shadow .32s var(--ease);
}

/* Call */
.mab-item:not(.mab-whatsapp):not(.mab-book) i {
  color: var(--primary);
  background: rgba(111, 13, 13, .09);
  animation: mabRing 3.6s ease-in-out infinite;
}
.mab-item:not(.mab-whatsapp):not(.mab-book) { color: var(--primary); }

/* WhatsApp */
.mab-whatsapp { color: #0F7B3D; background: transparent; border: 0; }
.mab-whatsapp i {
  color: #0F7B3D;
  background: rgba(37, 211, 102, .13);
  animation: mabPop 3.2s ease-in-out infinite;
}

/* Book Now — the primary action, filled badge + lifted pill */
.mab-book {
  color: var(--primary);
  background: linear-gradient(180deg, rgba(213, 160, 33, .16), rgba(213, 160, 33, .08));
  border: 0;
  box-shadow: none;
  font-weight: 700;
}
.mab-book i {
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary) 60%, var(--gold-2));
  box-shadow: 0 6px 16px rgba(213, 160, 33, .45);
  transform: translateY(-3px);
  animation: mabFloat 3.4s ease-in-out infinite;
}
.mab-book::after { display: none; }

@keyframes mabFloat {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(-7px); }
}

/* Press feedback on every tile */
.mab-item:active i { transform: scale(.9); }
.mab-book:active i { transform: translateY(-3px) scale(.92); }

/* Soft dot under the primary label, like an app's active indicator */
.mab-book span { position: relative; }
.mab-book span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 16px;
  height: 3px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--secondary), var(--gold-2));
}

/* ============================================================
   47. v20 — COMPACT, EDGE-STUCK MOBILE ACTION BAR
   Reverts the floating card to a slim bar that sits flush
   against the bottom of the screen, with smaller icons.
============================================================ */
.mobile-action-bar {
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid rgba(213, 160, 33, .32);
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0));
  gap: 0;
  box-shadow: 0 -4px 18px rgba(36, 24, 8, .14);
}

.mab-item {
  gap: 3px;
  padding: 4px 2px 3px;
  border-radius: 12px;
  font-size: .6rem;
}

/* Smaller circular icon badges */
.mab-item i {
  width: 32px;
  height: 32px;
  font-size: .85rem;
}

/* Primary action: subtler lift so the bar stays slim */
.mab-book i {
  transform: translateY(-2px);
  box-shadow: 0 4px 11px rgba(213, 160, 33, .4);
  animation: mabFloatSm 3.4s ease-in-out infinite;
}
@keyframes mabFloatSm {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(-5px); }
}
.mab-book:active i { transform: translateY(-2px) scale(.92); }
.mab-book span::after { bottom: -4px; width: 14px; height: 2px; }

/* v21 — itemised booking estimate rows */
.estimate-items { margin: 10px 0 8px; padding: 0; }
.estimate-items li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: .86rem;
  color: var(--ink-soft);
  padding: 5px 0;
  border-bottom: 1px dashed var(--gold-line);
}
.estimate-items li:last-child { border-bottom: 0; }
.estimate-items li span:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ============================================================
   48. v28 — ROOM SHARING ALLOCATION (inside the summary box)
   Display-only block; pricing styles are untouched.
============================================================ */
.room-alloc {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--gold-line);
  border-left: 3px solid var(--secondary);
}
.room-alloc.is-complete {
  border-color: rgba(31, 122, 56, .35);
  border-left-color: #1F7A38;
  background: #F4FBF6;
}

.room-alloc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 9px;
}
.room-alloc-title i { color: var(--gold-2); font-size: .82rem; }
.room-alloc.is-complete .room-alloc-title { color: #1F7A38; }
.room-alloc.is-complete .room-alloc-title i { color: #1F7A38; }

.room-alloc-list { margin: 0 0 8px; }
.room-alloc-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .85rem;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px dashed var(--gold-line);
}
.room-alloc-list li:last-child { border-bottom: 0; }
.room-alloc-list li span:first-child { color: var(--ink-soft); }
.room-alloc-list li span:last-child { font-weight: 600; white-space: nowrap; }

/* the Full / Sharing chip */
.room-alloc-list em {
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.room-alloc-list .ra-full em {
  color: #1F7A38;
  background: rgba(31, 122, 56, .12);
  border: 1px solid rgba(31, 122, 56, .28);
}
.room-alloc-list .ra-partial em {
  color: var(--gold-2);
  background: rgba(213, 160, 33, .14);
  border: 1px solid rgba(213, 160, 33, .35);
}
.room-alloc-list .ra-need span:last-child { color: var(--primary-2); }

.room-alloc-summary {
  font-size: .74rem;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.room-alloc-note {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream-2);
  border-radius: 9px;
  padding: 9px 12px;
  margin: 0;
}
.room-alloc-note strong { color: var(--primary); }
.room-alloc.is-complete .room-alloc-note {
  background: rgba(31, 122, 56, .09);
  color: #14622C;
}
.room-alloc.is-complete .room-alloc-note strong { color: #1F7A38; }

@media (max-width: 575.98px) {
  .room-alloc { padding: 11px 12px; }
  .room-alloc-list li { font-size: .8rem; gap: 8px; }
  .room-alloc-list em { margin-left: 6px; padding: 2px 6px; }
  .room-alloc-note { font-size: .78rem; }
}

/* ============================================================
   49. v29 — ROOMS PAGE
============================================================ */

/* ---------- Availability search card ---------- */
.room-search-section { padding-bottom: 0; }
.room-search-card {
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-top: 4px solid var(--secondary);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 16px 40px rgba(36, 24, 8, .1);
  margin-top: -70px;
  position: relative;
  z-index: 3;
}
.room-search-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}
.room-search-title i { color: var(--gold-2); font-size: 1.05rem; }
.room-search-sub { font-size: .9rem; color: var(--ink-soft); margin-bottom: 18px; }
.room-search-card .form-label { font-size: .78rem; font-weight: 600; color: var(--primary); }
.room-search-nights {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gold-2);
  background: rgba(213, 160, 33, .12);
  border: 1px solid rgba(213, 160, 33, .3);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 4px 0 12px;
}
.room-search-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Room type cards ---------- */
.room-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.room-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(36, 24, 8, .14); }
.room-card-media { height: 150px; overflow: hidden; }
.room-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-card-body { padding: 20px 18px 22px; display: flex; flex-direction: column; flex: 1; }
.room-card-icon {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 2px solid rgba(213, 160, 33, .45);
  margin-bottom: 12px;
  transition: transform .4s var(--ease);
}
.room-card:hover .room-card-icon { transform: translateY(-3px) scale(1.06); }
.room-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}
.room-card-rate {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  border-radius: 999px;
  padding: 3px 11px;
  margin-bottom: 10px;
}
.room-card-desc { font-size: .87rem; color: var(--ink-soft); margin-bottom: 10px; }
.room-card-incl {
  font-size: .8rem;
  color: var(--ink);
  border-top: 1px dashed var(--gold-line);
  padding-top: 10px;
  margin: auto 0 0;
}

/* ---------- Pricing / sharing notes ---------- */
.room-notes-section { padding-top: 0; }
.room-note {
  display: flex;
  gap: 16px;
  height: 100%;
  padding: 22px 24px;
  border-radius: var(--radius);
  font-size: .89rem;
  line-height: 1.7;
}
.room-note-gold {
  background: var(--cream-2);
  border: 1px solid var(--gold-line);
  border-left: 4px solid var(--secondary);
  color: var(--ink-soft);
}
.room-note-maroon {
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-2) 100%);
  color: rgba(255, 249, 237, .88);
  border: 1px solid rgba(213, 160, 33, .4);
}
.room-note-icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 1.05rem;
}
.room-note-gold .room-note-icon { color: var(--gold-2); background: rgba(213, 160, 33, .15); }
.room-note-maroon .room-note-icon { color: var(--primary); background: linear-gradient(140deg, #E9BE55, var(--secondary)); }
.room-note-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--primary);
}
.room-note-maroon .room-note-title { color: var(--secondary); }

/* ---------- Facilities grid ---------- */
.room-fac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.room-fac-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.room-fac-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.room-fac-item i {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-size: .92rem;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
}

/* ---------- Important information ---------- */
.room-info-section { background: var(--cream-2); }
.room-info-card {
  display: flex;
  gap: 14px;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.room-info-icon {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  font-size: .95rem;
  color: var(--gold-2);
  background: rgba(213, 160, 33, .14);
  border: 1px solid rgba(213, 160, 33, .3);
}
.room-info-title {
  font-size: .96rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 5px;
}
.room-info-card p { font-size: .86rem; color: var(--ink-soft); line-height: 1.65; }

/* ---------- Support strip ---------- */
.room-support-section { padding-bottom: 0; }
.room-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-left: 4px solid var(--secondary);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}
.room-support-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}
.room-support-text { font-size: .89rem; color: var(--ink-soft); }
.room-support-actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 767.98px) {
  .room-search-card { margin-top: -46px; padding: 20px 16px; border-radius: 14px; }
  .room-search-title { font-size: 1.08rem; }
  .room-search-actions .btn { flex: 1 1 100%; }
  .room-note { padding: 18px; flex-direction: column; gap: 12px; }
  .room-support { padding: 18px; }
  .room-support-actions { width: 100%; }
  .room-support-actions .btn { flex: 1; }
  .room-fac-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .room-fac-item { padding: 12px; font-size: .8rem; gap: 9px; }
  .room-fac-item i { flex-basis: 32px; width: 32px; height: 32px; }
}

/* ============================================================
   50. v30 — HERO ROOMS BOOKING SHORTCUT (inside the price card)
============================================================ */
.hero-rooms {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px dashed var(--gold-line);
  text-align: left;
}
.hero-rooms-icon {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  font-size: .92rem;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border: 1px solid rgba(213, 160, 33, .45);
  transition: transform .4s var(--ease);
}
.hero-rooms:hover .hero-rooms-icon { transform: translateY(-2px) scale(1.06); }
.hero-rooms-text { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.hero-rooms-text strong { font-size: .86rem; font-weight: 700; color: var(--primary); }
.hero-rooms-text small { font-size: .72rem; color: var(--ink-soft); }
.hero-rooms-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--primary);
  background: rgba(213, 160, 33, .16);
  border: 1px solid rgba(213, 160, 33, .45);
  border-radius: 999px;
  padding: 7px 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.hero-rooms-btn i { font-size: .64rem; transition: transform .3s var(--ease); }
.hero-rooms-btn:hover {
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  color: var(--primary);
  transform: translateY(-2px);
}
.hero-rooms-btn:hover i { transform: translateX(3px); }

@media (max-width: 991.98px) {
  .hero-rooms { flex-wrap: wrap; }
  .hero-rooms-btn { flex: 1 1 100%; justify-content: center; margin-top: 4px; }
}
@media (max-width: 575.98px) {
  .hero-rooms { margin-top: 13px; padding-top: 12px; gap: 9px; }
  .hero-rooms-icon { flex-basis: 34px; width: 34px; height: 34px; }
  .hero-rooms-text strong { font-size: .82rem; }
}

/* ============================================================
   51. v31 — HERO ROOMS BLOCK: COLOUR FIX + ANIMATED BUTTON
   The hero sets a light text colour for its own content, which
   the card's children inherit. These rules are scoped inside
   .hero .hero-price-card so the block always reads dark on the
   cream card, whatever the hero styling is.
============================================================ */
.hero .hero-price-card .hero-rooms,
.hero .hero-price-card .hero-rooms * {
  color: var(--ink);
}
.hero .hero-price-card .hero-rooms {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px dashed var(--gold-line);
}
.hero .hero-price-card .hero-rooms-text strong {
  font-size: .87rem;
  font-weight: 700;
  color: var(--primary);
}
.hero .hero-price-card .hero-rooms-text small {
  font-size: .72rem;
  color: var(--ink-soft);
}
.hero .hero-price-card .hero-rooms-icon {
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
}

/* ---------- Professional animated button ---------- */
.hero .hero-price-card .hero-rooms-btn,
.hero-rooms-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55 0%, var(--secondary) 55%, var(--gold-2) 100%);
  border: 1px solid var(--gold-2);
  box-shadow: 0 5px 14px rgba(213, 160, 33, .38);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  animation: roomsBtnGlow 3.6s ease-in-out infinite;
}
.hero .hero-price-card .hero-rooms-btn { color: var(--primary); }

/* light sweep across the button */
.hero-rooms-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-20deg);
  animation: roomsBtnShine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes roomsBtnShine {
  0%, 58% { left: -60%; }
  100%    { left: 130%; }
}
@keyframes roomsBtnGlow {
  0%, 100% { box-shadow: 0 5px 14px rgba(213, 160, 33, .38); }
  50%      { box-shadow: 0 7px 20px rgba(213, 160, 33, .58); }
}

.hero-rooms-btn i {
  font-size: .66rem;
  position: relative;
  z-index: 2;
  animation: roomsArrowNudge 2.4s ease-in-out infinite;
}
@keyframes roomsArrowNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(3px); }
}
.hero-rooms-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 24px rgba(213, 160, 33, .55);
  color: var(--primary);
}
.hero-rooms-btn:active { transform: translateY(-1px) scale(.99); }

/* icon badge gets a soft halo so the block reads as one unit */
.hero .hero-price-card .hero-rooms-icon {
  animation: roomsIconPulse 3.6s ease-in-out infinite;
}
@keyframes roomsIconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213, 160, 33, .35); }
  50%      { box-shadow: 0 0 0 7px rgba(213, 160, 33, 0); }
}

@media (max-width: 991.98px) {
  .hero .hero-price-card .hero-rooms { flex-wrap: wrap; }
  .hero-rooms-btn { flex: 1 1 100%; justify-content: center; margin-top: 6px; }
}

/* ============================================================
   52. v32 — HERO ROOMS BLOCK LAYOUT FIX
   The card is narrow, so a single flex row squeezed the text
   column to almost zero width (one word per line) and the
   button overlapped it. A 2-row grid keeps the icon + text on
   the first row and gives the button its own full-width row.
============================================================ */
.hero .hero-price-card .hero-rooms,
.hero-rooms {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon text"
    "btn  btn";
  align-items: center;
  gap: 11px 12px;
  text-align: left;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px dashed var(--gold-line);
}
.hero .hero-price-card .hero-rooms-icon,
.hero-rooms-icon { grid-area: icon; flex: none; }

.hero .hero-price-card .hero-rooms-text,
.hero-rooms-text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.hero .hero-price-card .hero-rooms-text strong {
  font-size: .88rem;
  line-height: 1.35;
  white-space: normal;
}
.hero .hero-price-card .hero-rooms-text small {
  font-size: .72rem;
  line-height: 1.4;
  white-space: normal;
}

.hero .hero-price-card .hero-rooms-btn,
.hero-rooms-btn {
  grid-area: btn;
  width: 100%;
  justify-content: center;
  margin-top: 2px;
  padding: 10px 14px;
  font-size: .78rem;
  white-space: normal;
}

@media (max-width: 575.98px) {
  .hero .hero-price-card .hero-rooms,
  .hero-rooms { gap: 9px 10px; margin-top: 13px; padding-top: 12px; }
  .hero .hero-price-card .hero-rooms-text strong { font-size: .84rem; }
  .hero .hero-price-card .hero-rooms-btn { font-size: .74rem; padding: 9px 12px; }
}

/* ============================================================
   53. v33 — HERO ROOMS ICON COLOUR FIX
   The v31 rule `.hero-rooms *{ color: var(--ink) }` also hit the
   <i> inside the maroon badge and painted it dark. A direct rule
   on the icon element wins over that inherited/universal one.
============================================================ */
.hero .hero-price-card .hero-rooms-icon,
.hero .hero-price-card .hero-rooms-icon i,
.hero-rooms-icon i {
  color: #FFF9ED;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* ============================================================
   54. v36 — REVIEWS PAGE (ratings, photos, videos, lightbox)
============================================================ */

/* ---------- Rating summary ---------- */
.review-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 30px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 26px;
}
.rs-score { text-align: center; padding-right: 28px; border-right: 1px dashed var(--gold-line); }
.rs-avg {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}
.rs-stars { display: block; color: var(--secondary); font-size: .95rem; margin: 8px 0 4px; letter-spacing: 2px; }
.rs-stars i { animation: rsStarPop .5s var(--ease) backwards; }
.rs-stars i:nth-child(1) { animation-delay: .05s; }
.rs-stars i:nth-child(2) { animation-delay: .12s; }
.rs-stars i:nth-child(3) { animation-delay: .19s; }
.rs-stars i:nth-child(4) { animation-delay: .26s; }
.rs-stars i:nth-child(5) { animation-delay: .33s; }
@keyframes rsStarPop { from { opacity: 0; transform: scale(.4) rotate(-25deg); } to { opacity: 1; transform: none; } }
.rs-count { font-size: .78rem; color: var(--ink-soft); }

.rs-bars { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rs-bar-row { display: flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--ink-soft); }
.rs-bar-label { flex: 0 0 34px; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--ink); }
.rs-bar-label i { font-size: .6rem; color: var(--secondary); }
.rs-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.rs-bar-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #E9BE55, var(--secondary));
  animation: rsBarGrow 1.1s .3s var(--ease) forwards;
}
@keyframes rsBarGrow { to { width: var(--w); } }
.rs-bar-count { flex: 0 0 26px; text-align: right; font-weight: 600; color: var(--ink); }

.rs-media { display: flex; gap: 14px; padding-left: 28px; border-left: 1px dashed var(--gold-line); }
.rs-media-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 68px; padding: 12px 10px;
  border-radius: 12px; background: var(--cream-2);
}
.rs-media-item i { color: var(--gold-2); font-size: .95rem; margin-bottom: 3px; }
.rs-media-item strong { font-size: 1.15rem; color: var(--primary); line-height: 1; }
.rs-media-item small { font-size: .68rem; color: var(--ink-soft); }

/* ---------- Filters ---------- */
.review-filters { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 26px; }
.review-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  color: var(--primary);
  background: var(--white);
  border: 1px solid var(--gold-line);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review-filter i { font-size: .72rem; color: var(--gold-2); transition: color .3s var(--ease); }
.review-filter:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.review-filter.is-active {
  color: var(--cream);
  background: linear-gradient(140deg, var(--primary) 0%, var(--primary-2) 100%);
  border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(111, 13, 13, .28);
}
.review-filter.is-active i { color: var(--secondary); }

/* ---------- Cards ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
  align-items: start;
}
.review-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gold-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .35s var(--ease);
  animation: reviewIn .6s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reviewIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.review-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(36, 24, 8, .15); }
.review-card.is-hidden { display: none; }
.review-card.is-featured { border-color: var(--secondary); box-shadow: 0 10px 26px rgba(213, 160, 33, .22); }

/* media */
.review-media { position: relative; }
.review-media button {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; overflow: hidden;
}
.review-media img {
  width: 100%; height: 200px; object-fit: cover; display: block;
  transition: transform .6s var(--ease), filter .4s var(--ease);
}
.review-card:hover .review-media img { transform: scale(1.06); }
.review-video-bg {
  display: block; height: 200px;
  background: radial-gradient(circle at 50% 40%, var(--primary-2), var(--primary) 70%);
}
.review-play {
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  animation: playPulse 2.4s ease-out infinite;
  transition: transform .35s var(--ease);
}
@keyframes playPulse {
  0%   { box-shadow: 0 0 0 0 rgba(213, 160, 33, .6), 0 8px 22px rgba(0, 0, 0, .35); }
  70%  { box-shadow: 0 0 0 18px rgba(213, 160, 33, 0), 0 8px 22px rgba(0, 0, 0, .35); }
  100% { box-shadow: 0 0 0 0 rgba(213, 160, 33, 0), 0 8px 22px rgba(0, 0, 0, .35); }
}
.review-media button:hover .review-play { transform: translate(-50%, -50%) scale(1.12); }
.review-media-tag {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream);
  background: rgba(20, 8, 12, .6);
  backdrop-filter: blur(6px);
}
.review-media-tag i { font-size: .6rem; color: var(--secondary); }

/* body */
.review-body { position: relative; padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.review-featured-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.review-rating { color: var(--secondary); font-size: .88rem; letter-spacing: 2px; margin-bottom: 10px; }
.review-text { font-size: .9rem; line-height: 1.75; color: var(--ink-soft); margin-bottom: 16px; }
.review-foot {
  display: flex; align-items: center; gap: 11px;
  margin-top: auto; padding-top: 14px;
  border-top: 1px dashed var(--gold-line);
}
.review-avatar {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold-line);
}
.review-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--secondary);
  background: radial-gradient(circle at 32% 28%, var(--primary-2), var(--primary));
  border-color: rgba(213, 160, 33, .5);
}
.review-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; flex: 1; }
.review-who cite { font-style: normal; font-weight: 700; font-size: .9rem; color: var(--primary); }
.review-who small { font-size: .74rem; color: var(--ink-soft); }
.review-quote { color: var(--gold-line); font-size: 1.3rem; }

.review-empty-filter { text-align: center; color: var(--ink-soft); padding: 30px 0 0; }

/* ---------- Share your review ---------- */
.review-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-top: 30px; padding: 22px 26px;
  background: var(--cream-2);
  border: 1px dashed var(--gold-line);
  border-radius: var(--radius);
  font-size: .92rem; color: var(--ink);
}

/* ---------- Lightbox ---------- */
.review-lightbox {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(12, 6, 10, .88);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.review-lightbox.is-open { opacity: 1; }
.review-lightbox-inner {
  width: min(900px, 100%);
  transform: scale(.94);
  transition: transform .35s var(--ease);
}
.review-lightbox.is-open .review-lightbox-inner { transform: scale(1); }
.review-lightbox-inner img,
.review-lightbox-inner video {
  width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: 12px; display: block;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.review-lightbox-inner iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: 12px; display: block;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.review-lightbox-close {
  position: absolute; top: 18px; right: 20px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(213, 160, 33, .5);
  font-size: 1.05rem; color: var(--cream);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.review-lightbox-close:hover { background: rgba(213, 160, 33, .3); transform: rotate(90deg); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .review-summary { grid-template-columns: auto 1fr; gap: 20px; padding: 20px; }
  .rs-media { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 14px; border-top: 1px dashed var(--gold-line); justify-content: center; }
}
@media (max-width: 575.98px) {
  .review-summary { grid-template-columns: 1fr; text-align: center; }
  .rs-score { padding-right: 0; border-right: 0; padding-bottom: 14px; border-bottom: 1px dashed var(--gold-line); }
  .rs-avg { font-size: 2.4rem; }
  .review-grid { grid-template-columns: 1fr; gap: 16px; }
  .review-media img, .review-video-bg { height: 180px; }
  .review-cta { flex-direction: column; text-align: center; }
  .review-cta .btn { width: 100%; }
  .review-lightbox { padding: 14px; }
  .review-lightbox-close { top: 10px; right: 12px; width: 38px; height: 38px; }
}

/* ============================================================
   55. v40 — ALBUM GALLERY (chips, grid, lightbox)
============================================================ */
.album-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.album-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  font-size: .84rem; font-weight: 600;
  color: var(--primary); background: var(--white);
  border: 1px solid var(--gold-line); cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.album-chip i { font-size: .74rem; color: var(--gold-2); transition: color .3s var(--ease); }
.album-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.album-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; color: var(--primary);
  background: rgba(213, 160, 33, .2);
}
.album-chip.is-active {
  color: var(--cream);
  background: linear-gradient(140deg, var(--primary) 0%, var(--primary-2) 100%);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(111, 13, 13, .3);
}
.album-chip.is-active i { color: var(--secondary); }
.album-chip.is-active .album-count { color: var(--primary); background: var(--secondary); }

.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.album-photo {
  position: relative; display: block; padding: 0; border: 0;
  border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer;
  background: var(--cream-2); box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  animation: albumIn .55s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes albumIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: none; } }
.album-photo.is-hidden { display: none; }
.album-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.album-photo:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(36, 24, 8, .18); }
.album-photo-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--cream);
  background: linear-gradient(180deg, rgba(20, 8, 12, .1), rgba(20, 8, 12, .72));
  opacity: 0; transition: opacity .4s var(--ease); padding: 16px; text-align: center;
}
.album-photo:hover .album-photo-overlay { opacity: 1; }
.album-photo-overlay i {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1rem; color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  transform: scale(.7); transition: transform .4s var(--ease);
}
.album-photo:hover .album-photo-overlay i { transform: scale(1); }
.album-photo-overlay em { font-style: normal; font-size: .82rem; font-weight: 600; }

.gal-lightbox {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 70px; background: rgba(10, 5, 9, .93);
  backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s var(--ease);
}
.gal-lightbox.is-open { opacity: 1; }
.gal-lb-figure { margin: 0; max-width: min(1100px, 100%); transform: scale(.95); transition: transform .35s var(--ease); }
.gal-lightbox.is-open .gal-lb-figure { transform: scale(1); }
.gal-lb-figure img {
  display: block; max-width: 100%; max-height: 76vh; object-fit: contain;
  border-radius: 10px; box-shadow: 0 26px 70px rgba(0, 0, 0, .6);
  -webkit-user-drag: none; user-select: none;
}
.gal-lb-figure figcaption {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; color: rgba(255, 249, 237, .85); font-size: .9rem; text-align: center;
}
.gal-lb-counter {
  font-size: .78rem; font-weight: 700; color: var(--secondary);
  background: rgba(213, 160, 33, .16); border: 1px solid rgba(213, 160, 33, .35);
  border-radius: 999px; padding: 3px 12px;
}
.gal-lb-close, .gal-lb-nav {
  position: absolute; width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(213, 160, 33, .45);
  color: var(--cream); background: rgba(255, 255, 255, .08);
  font-size: 1.05rem; cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.gal-lb-close { top: 20px; right: 22px; }
.gal-lb-close:hover { background: rgba(213, 160, 33, .32); transform: rotate(90deg); }
.gal-lb-nav { top: 50%; transform: translateY(-50%); }
.gal-lb-prev { left: 18px; }
.gal-lb-next { right: 18px; }
.gal-lb-nav:hover { background: linear-gradient(140deg, #E9BE55, var(--secondary)); color: var(--primary); transform: translateY(-50%) scale(1.08); }
.gal-lb-protect {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0; padding: 7px 16px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; color: rgba(255, 249, 237, .8);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.gal-lb-protect i { color: var(--secondary); font-size: .7rem; }

@media (max-width: 767.98px) {
  .album-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .album-chip { font-size: .76rem; padding: 7px 13px; }
  .gal-lightbox { padding: 60px 12px 70px; }
  .gal-lb-nav { width: 40px; height: 40px; font-size: .9rem; }
  .gal-lb-prev { left: 8px; }
  .gal-lb-next { right: 8px; }
  .gal-lb-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .gal-lb-figure img { max-height: 64vh; }
}

/* ============================================================
   56. v42 — ADMIN-BUILT PAGE SECTIONS
============================================================ */
.page-sections { padding-top: 0; }
.ps-block + .ps-block { margin-top: 46px; }

.ps-heading {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 700;
  color: var(--primary);
  padding-left: 16px;
  margin-bottom: 14px;
}
.ps-heading::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, var(--secondary), var(--gold-2));
}
.ps-body {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.ps-points { margin: 4px 0 0; }
.ps-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .92rem;
  color: var(--ink);
  padding: 7px 0;
}
.ps-points i {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: .62rem;
  color: var(--primary);
  background: linear-gradient(140deg, #E9BE55, var(--secondary));
  margin-top: 2px;
  box-shadow: 0 2px 6px rgba(213, 160, 33, .35);
}

/* image + text splits */
.ps-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.ps-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold-soft);
}
.ps-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-image_top .ps-media { margin-bottom: 20px; }

@media (max-width: 767.98px) {
  .ps-block + .ps-block { margin-top: 32px; }
  .ps-split { grid-template-columns: 1fr; gap: 18px; }
  .ps-image_left .ps-media, .ps-image_right .ps-media { order: -1; }
  .ps-body { font-size: .9rem; }
}

/* ============================================================
   57. v44 — ROOMS PAGE VERTICAL RHYTHM
   Some sections used the default 88px padding on both sides
   while their neighbours had it zeroed, so the gaps alternated
   between 88px and 176px. Every section now contributes half
   the gap, making each junction an identical 88px (64px on
   phones).
============================================================ */
.room-search-section  { padding: 88px 0 44px; }
.room-types-section   { padding: 44px 0; }
.room-notes-section   { padding: 44px 0; }
.room-fac-section     { padding: 44px 0; }
.room-info-section    { padding: 44px 0; }
.room-support-section { padding: 44px 0; }
.room-faq-section     { padding: 44px 0 56px; }

/* Section headings sit a little closer to their content here */
.room-types-section .section-head,
.room-fac-section .section-head,
.room-info-section .section-head,
.room-faq-section .section-head { margin-bottom: 34px; }

@media (max-width: 767.98px) {
  .room-search-section  { padding: 56px 0 32px; }
  .room-types-section,
  .room-notes-section,
  .room-fac-section,
  .room-info-section,
  .room-support-section { padding: 32px 0; }
  .room-faq-section     { padding: 32px 0 40px; }
  .room-types-section .section-head,
  .room-fac-section .section-head,
  .room-info-section .section-head,
  .room-faq-section .section-head { margin-bottom: 24px; }
}