/* ==========================================================================
   SITI PUJA PASS 2026 — Landing page styles
   Tailwind (CDN) handles layout utilities; this file carries the brand
   system, components and motion.
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */
:root {
  /* Gold leads, blue supports. --blue-ink is the deep decorative accent.
     No red/maroon in the system: validation signals with --blue-deep. */
  --blue: #017DC6;
  --blue-deep: #01598F;
  --blue-light: #2196D9;
  --blue-ink: #01476F;
  --gold: #FFCB2F;
  --gold-soft: #FFD84D;
  --gold-deep: #E0A800;
  --cream: #FCFBF8;
  --cream-warm: #F4F1E9;
  --ink: #1A1A1A;
  --whatsapp: #1FA855;

  --header-h: 118px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ring: 0 0 0 3px rgba(1, 125, 198, .18), 0 0 0 5px rgba(255, 203, 47, .55);
}

/* ---------- 2. Base ------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--cream);
  color: var(--ink);
  /* `hidden` makes the body a scroll container, which switches off every
     position: sticky inside it. `clip` cuts the same overflow without
     creating one — the first line is only there for older browsers. */
  overflow-x: hidden;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

section[id], footer[id], [id="pujas"], [id="book"] { scroll-margin-top: calc(var(--header-h) + 12px); }

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

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

/* Keyboard focus — visible everywhere, never on mouse click */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 10px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 100;
  transform: translate(-50%, -120%);
  background: var(--blue);
  color: var(--gold);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 0 0 12px 12px;
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Shared type ------------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .62);
  margin-bottom: 10px;
}
.eyebrow--light { color: var(--gold); }

.section-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.12;
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
}

.section-lead {
  margin-top: 14px;
  font-size: clamp(.95rem, 1.4vw, 1.0625rem);
  line-height: 1.75;
  color: rgba(26, 26, 26, .78);
  font-weight: 300;
}

/* ---------- 3. Buttons ---------------------------------------------------- */
.btn-gold,
.btn-blue,
.btn-whatsapp,
.btn-outline-blue,
.btn-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), background-color .2s, color .2s;
  will-change: transform;
}

/* One button look across the page: yellow fill, black label. The variant
   classes are kept so the markup and the analytics hooks stay untouched —
   they now differ only in the shadow tint, not the colour. */
.btn-gold,
.btn-blue,
.btn-whatsapp,
.btn-outline-blue,
.btn-ghost {
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--ink);
  border: 0;
  box-shadow: 0 10px 26px -10px rgba(224, 168, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.btn-gold:hover,
.btn-blue:hover,
.btn-whatsapp:hover,
.btn-outline-blue:hover,
.btn-ghost:hover {
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 38px -12px rgba(224, 168, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn-gold:active,
.btn-blue:active,
.btn-whatsapp:active,
.btn-outline-blue:active,
.btn-ghost:active { transform: translateY(0) scale(.99); }

/* Sweeping shine on the primary CTAs */
.shine::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: shine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 62% { left: -60%; }
  100% { left: 130%; }
}

/* ---------- 4. Header: announcement bar + navbar --------------------------- */
#siteHeader { transition: transform .4s var(--ease-out); }

.announce-bar {
  background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 22%, var(--gold-soft) 50%, var(--gold) 78%, var(--gold-deep) 100%);
  color: var(--ink);
  overflow: hidden;
  max-height: 60px;
  opacity: 1;
  transition: max-height .45s var(--ease-out), opacity .3s ease;
  box-shadow: inset 0 -1px 0 rgba(1, 125, 198, .18);
}
.is-scrolled .announce-bar { max-height: 0; opacity: 0; }

.announce-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-ink);
  box-shadow: 0 0 0 0 rgba(1, 71, 111, .6);
  animation: ping 1.9s ease-out infinite;
  flex: none;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(1, 71, 111, .55); }
  70% { box-shadow: 0 0 0 9px rgba(1, 71, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 71, 111, 0); }
}

.announce-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* this pill sits ON the gold announcement bar, so the yellow fill needs a
     dark ring to separate it — without one it disappears into the bar */
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--ink);
  border: 1.5px solid var(--blue-ink);
  box-shadow: 0 2px 6px -1px rgba(1, 71, 111, .45);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  transition: transform .25s var(--ease-out), background-color .25s;
  animation: nudge 2.6s ease-in-out infinite;
}
.announce-cta:hover { background: var(--gold-deep); border-color: var(--ink); transform: translateY(-1px) scale(1.04); animation-play-state: paused; }
.announce-cta svg { transition: transform .25s var(--ease-out); }
.announce-cta:hover svg { transform: translateX(3px); }
@keyframes nudge {
  0%, 88%, 100% { transform: translateY(0); }
  92% { transform: translateY(-2px); }
  96% { transform: translateY(0); }
}

.site-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .45s var(--ease-out), backdrop-filter .45s, border-color .45s, box-shadow .45s, padding .45s;
}
.is-scrolled .site-nav {
  background: rgba(252, 251, 248, .9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: rgba(26, 26, 26, .1);
  box-shadow: 0 12px 34px -22px rgba(0, 0, 0, .45);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  /* gold ring keeps the logo tile readable against the nav */
  box-shadow: 0 0 0 1.5px rgba(255, 203, 47, .6), 0 6px 16px -8px rgba(1, 89, 143, .85);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
a:hover > .brand-mark {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 0 0 1.5px var(--gold), 0 10px 22px -10px rgba(1, 89, 143, .95);
}

.nav-brand-text { color: var(--ink); transition: color .35s; }
.nav-brand-sub { color: rgba(26, 26, 26, .62); transition: color .35s; }
.is-scrolled .nav-brand-text { color: var(--ink); }
.is-scrolled .nav-brand-sub { color: rgba(26, 26, 26, .62); }

.nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 999px;
  transition: color .3s, background-color .3s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease-out);
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.is-scrolled .nav-link { color: var(--ink); }
.is-scrolled .nav-link:hover, .is-scrolled .nav-link.is-active { color: #9A6100; }
.is-scrolled .nav-link::after { background: var(--gold-deep); }

.logo-chip {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 3px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 4px 14px -6px rgba(26, 26, 26, .45);
  overflow: hidden;
  transition: transform .3s var(--ease-out);
}
.logo-chip:hover { transform: translateY(-2px); }
.logo-chip img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.logo-chip--footer { background: rgba(255, 255, 255, .94); }

@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-link { padding-left: 10px; padding-right: 10px; }
}

.nav-toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid rgba(1, 125, 198, .22);
  background: rgba(255, 255, 255, .7);
  transition: background-color .3s, border-color .3s;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.is-scrolled .nav-toggle { background: rgba(26, 26, 26, .06); border-color: rgba(26, 26, 26, .14); }
.is-scrolled .nav-toggle span { background: var(--ink); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  background: rgba(252, 251, 248, .97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-top: 1px solid rgba(26, 26, 26, .1);
  animation: menuIn .32s var(--ease-out);
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.mobile-link {
  display: block;
  padding: 13px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid rgba(26, 26, 26, .09);
  transition: color .25s, padding-left .25s var(--ease-out);
}
.mobile-link:hover, .mobile-link:focus-visible { color: #9A6100; padding-left: 10px; }

/* ---------- 5. Hero -------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + 6px);
  overflow: hidden;
}

/* Split layout: the offer reads on the left, the form waits on the right. */
.hero-stage { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.hero-copy { position: relative; z-index: 4; text-align: center; }
.hero-booking { position: relative; z-index: 4; }

@media (min-width: 1024px) {
  .hero { display: flex; align-items: stretch; }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  .hero-copy { max-width: 620px; text-align: left; }
}

/* On phones the card is pulled up right under the headline so the CTA stays
   as high as possible; the bullets follow it.
   `display: contents` flattens .hero-copy so all of it can be reordered. */
@media (max-width: 1023px) {
  .hero-grid { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .hero-copy { display: contents; }
  .hero-eyebrow { order: 1; }
  .hero-title { order: 2; }
  .hero-sub { order: 3; }
  .hero-booking { order: 4; align-self: stretch; }
  .hero-points { order: 5; align-self: stretch; }
  .hero-proof { order: 6; }
}

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero-bg__pattern {
  position: absolute;
  inset: 0;
  background: url("assets/img/bg.webp") center / cover no-repeat;
  opacity: .08;
}
.hero-bg__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 32%, rgba(255, 255, 255, .85) 0%, rgba(255, 248, 232, .22) 45%, rgba(255, 248, 232, 0) 72%),
    radial-gradient(52% 44% at 4% 66%, rgba(1, 125, 198, .14), transparent 72%),
    radial-gradient(44% 40% at 97% 22%, rgba(1, 125, 198, .11), transparent 70%),
    radial-gradient(45% 40% at 8% 78%, rgba(255, 203, 47, .09), transparent 70%),
    radial-gradient(45% 40% at 92% 74%, rgba(255, 203, 47, .09), transparent 70%),
    linear-gradient(180deg, rgba(255, 248, 232, .12) 0%, rgba(255, 248, 232, .06) 55%, var(--cream) 97%);
}

/* Maa Durga in the hero: the cut-out itself is the ambience — no backdrop panel
   and no wash over it. She is bottom-anchored so the marigolds at her feet run
   into the kash phul band, which draws on top of her (kash-band--hero, z-index 1). */
.hero-bg__deity {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  aspect-ratio: 760 / 856;
  transform: translateX(-50%);
  background: url("assets/img/opt/durga.webp") center bottom / contain no-repeat;
  opacity: .12;
}

@media (min-width: 1024px) {
  /* she sits in the gap between the copy and the booking card */
  .hero-bg__deity { left: 55%; height: 100%; opacity: .1; }
}

/* Toran: one 240px marigold swag tiled across the width, hung just under the
   fixed header so it frames the headline instead of covering it. */
.hero-bg__toran {
  position: absolute;
  top: calc(var(--header-h) - 12px);
  left: 0;
  right: 0;
  height: 128px;
  background: url("assets/img/toran.svg") repeat-x top center;
  background-size: auto 128px;
  opacity: .34;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg__toran { animation: toranSway 9s ease-in-out infinite; transform-origin: top center; }
}
@keyframes toranSway {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* The puja thali — kalash, lotus, diya and marigolds — resting in the kash phul
   at the foot of the hero, on the side the copy leaves open. */
/* Dhakis playing on the copy's side, at full size. Like Maa they sit behind
   everything and run faint, so the copy stays readable over them and the kash
   phul crosses in front. */
.hero-bg__dhaki {
  position: absolute;
  left: clamp(2px, 1.5vw, 34px);
  bottom: 0;
  width: clamp(190px, 23vw, 360px);
  aspect-ratio: 679 / 477;
  background: url("assets/img/opt/dhaki.webp") center bottom / contain no-repeat;
  opacity: .3;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg__dhaki { animation: dhakiBeat 2.6s ease-in-out infinite; }
}

.hero-bg__thali {
  position: absolute;
  /* steps clear of the dhakis, which are wider now */
  left: clamp(150px, 24vw, 400px);
  bottom: 0;
  width: clamp(128px, 15vw, 210px);
  aspect-ratio: 500 / 289;
  background: url("assets/img/lotus.webp") center bottom / contain no-repeat;
  /* above .kash-band--hero (z-index 1) so the warm band does not wash it out */
  z-index: 2;
  opacity: .48;
  filter: drop-shadow(0 10px 18px rgba(120, 74, 6, .22));
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(.4deg); }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(1, 125, 198, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .7);
  box-shadow: 0 8px 22px -14px rgba(26, 26, 26, .6);
}

.hero-title {
  margin-top: 12px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.08;
  font-size: clamp(1.85rem, 3.5vw, 2.9rem);
  text-wrap: balance;
}
.hero-title__accent {
  background: linear-gradient(100deg, #9A6100 8%, #B57200 50%, #9A6100 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

.hero-sub {
  margin-top: 10px;
  font-size: clamp(.95rem, 1.6vw, 1.125rem);
  font-weight: 500;
  color: rgba(26, 26, 26, .82);
}
.hero-sub .dot { color: var(--gold-deep); margin: 0 8px; }


/* Benefit bullets */
.hero-points {
  display: inline-flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 22px;
  text-align: left;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(13.5px, 1.35vw, 15.5px);
  font-weight: 500;
  color: rgba(26, 26, 26, .9);
}
.hero-points__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 6px 14px -8px rgba(1, 89, 143, .95);
}

/* Trust strip under the bullets */
.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 24px;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: rgba(255, 252, 244, .88);
  border: 1px solid rgba(1, 125, 198, .3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: left;
}
.hero-proof__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #ffffff;
  background: var(--blue);
  box-shadow: 0 6px 14px -8px rgba(1, 89, 143, .95);
}
.hero-proof p { display: flex; flex-direction: column; line-height: 1.35; }
/* scoped to the <p> so it never repaints the icon span's gold */
.hero-proof p > span { font-size: 12.5px; font-weight: 500; color: rgba(26, 26, 26, .75); }
.hero-proof .dot { margin: 0 5px; color: var(--gold-deep); }

/* Price + quick booking card */
.price-card {
  position: relative;
  margin: 20px auto 0;
  max-width: 480px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .94) 0%, rgba(255, 248, 232, .9) 100%);
  border: 1px solid rgba(224, 168, 0, .6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px -28px rgba(1, 89, 143, .45), 0 2px 0 rgba(255, 255, 255, .8) inset;
}
.price-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 19px;
  border: 1px dashed rgba(224, 168, 0, .45);
  pointer-events: none;
}

.price-card__label {
  margin-top: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .5);
  text-align: left;
}

.price-card__rule {
  height: 1px;
  margin: 11px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(224, 168, 0, .55), transparent);
}

/* ---------- 6. Forms ------------------------------------------------------- */
.booking-form { text-align: left; }

.field { display: block; }
.field > label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.field .req { color: rgba(26, 26, 26, .55); }

.booking-form input[type="text"],
.booking-form input[type="tel"],
.booking-form input[type="email"],
.booking-form input[type="number"],
.booking-form select,
.booking-form textarea {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border-radius: 11px;
  border: 1.5px solid rgba(224, 168, 0, .55);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.booking-form input::placeholder,
.booking-form textarea::placeholder { color: rgba(26, 26, 26, .66); font-weight: 300; }
.booking-form input:hover,
.booking-form select:hover,
.booking-form textarea:hover { border-color: rgba(224, 168, 0, .9); }
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 203, 47, .45);
}
.booking-form input[aria-invalid="true"],
.booking-form select[aria-invalid="true"],
.booking-form textarea[aria-invalid="true"] {
  border-color: var(--blue-deep);
  background: #F2F8FD;
}

/* the native arrow is replaced so selects match the inputs in both themes */
.booking-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2301476F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.booking-form textarea {
  height: auto;
  min-height: 62px;
  padding: 9px 13px;
  line-height: 1.45;
  resize: vertical;
}

.field > label .opt {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(26, 26, 26, .5);
}

/* ---------- Delivery choice ----------------------------------------------- */
.delivery { margin-top: 11px; border: 0; padding: 0; }
.delivery > legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.delivery-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.delivery-opt { position: relative; display: block; cursor: pointer; }
.delivery-opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.delivery-opt__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
  height: 100%;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1.5px solid rgba(224, 168, 0, .55);
  background: rgba(255, 255, 255, .92);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.delivery-opt__title { grid-column: 1; font-size: 13px; font-weight: 700; color: var(--ink); }
.delivery-opt__price {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}
.delivery-opt__meta {
  grid-column: 1 / -1;
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(26, 26, 26, .62);
}
.delivery-opt__price--free { color: var(--whatsapp); }

.delivery-opt:hover .delivery-opt__body { border-color: rgba(224, 168, 0, .95); }
.delivery-opt.is-selected .delivery-opt__body {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 203, 47, .45);
}
/* the real radio is transparent, so focus has to be drawn on the card */
.delivery-opt input:focus-visible + .delivery-opt__body { box-shadow: var(--ring); }

.delivery-panel { margin-top: 10px; display: grid; gap: 10px; }
.delivery-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .delivery-panel:not([hidden]) { animation: panelIn .28s var(--ease-out) both; }
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Order summary -------------------------------------------------- */
.order-summary {
  margin-top: 11px;
  padding: 9px 12px;
  border-radius: 13px;
  border: 1px dashed rgba(224, 168, 0, .6);
  background: rgba(255, 252, 244, .85);
  font-size: 12.5px;
}
.order-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  color: rgba(26, 26, 26, .82);
}
.order-summary > div[hidden] { display: none; }
.order-summary__gst {
  margin-left: 5px;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(26, 26, 26, .55);
}
.order-summary__total {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid rgba(224, 168, 0, .5);
  font-weight: 700;
  color: var(--ink) !important;
}
.order-summary__total strong { font-size: 15px; color: var(--ink); }

.input-prefix {
  display: flex;
  align-items: center;
  border-radius: 12px;
  border: 1.5px solid rgba(224, 168, 0, .55);
  background: rgba(255, 255, 255, .92);
  transition: border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.input-prefix > span {
  padding: 0 10px 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-right: 1px solid rgba(224, 168, 0, .4);
  line-height: 42px;
}
.input-prefix input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 12px !important;
}
.input-prefix:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(255, 203, 47, .45); }
.input-prefix:has(input[aria-invalid="true"]) { border-color: var(--blue-deep); }

.field-error {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #9A6100;
}

/* ---------- 7. Booking section --------------------------------------------- */
.booking-section {
  position: relative;
  isolation: isolate;
  background: var(--cream);
  /* clip, not hidden — see the note on body: the enquiry card sticks inside */
  overflow: hidden;
  overflow: clip;
}
.section-pattern {
  position: absolute;
  inset: 0;
  background: url("assets/img/form-img.webp") center / 640px repeat;
  opacity: .11;
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 78%);
}

.ticket-art {
  filter: drop-shadow(0 34px 44px rgba(1, 89, 143, .3));
  animation: float 8s ease-in-out infinite;
  transition: transform .6s var(--ease-out);
}
.ticket-art:hover { transform: rotate(-3.5deg) scale(1.035); }

.benefit-list { margin-top: 22px; display: grid; gap: 11px; }
.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(26, 26, 26, .85);
}
.benefit-list .bullet {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.counter-row {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(224, 168, 0, .45);
  box-shadow: 0 20px 45px -30px rgba(26, 26, 26, .7);
}
.counter-row > div { text-align: center; }
.counter-row > div + div { border-left: 1px solid rgba(224, 168, 0, .35); }
.counter-row dt {
  order: 2;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .68);
}
.counter-row dd {
  order: 1;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
.counter-row > div { display: flex; flex-direction: column; }

/* Booking card */
.booking-card {
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(170deg, rgba(255, 255, 255, .96), rgba(255, 248, 232, .92));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(224, 168, 0, .55);
  box-shadow: 0 40px 90px -36px rgba(1, 89, 143, .5);
}
.booking-card__head {
  position: relative;
  padding: 22px 24px 20px;
  background: linear-gradient(150deg, var(--blue-light) 0%, var(--blue) 45%, var(--blue-deep) 100%);
  color: var(--cream);
  text-align: center;
  overflow: hidden;
}
.booking-card__head::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.booking-card__head h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  font-weight: 700;
  color: var(--cream);
}
.booking-card__head p { margin-top: 3px; font-size: 12.5px; color: rgba(255, 248, 232, .7); }
.booking-card__body { padding: 22px 22px 24px; display: grid; gap: 14px; }

/* Desktop: the enquiry card follows the reader down the long left column */
@media (min-width: 1024px) {
  .form-sticky {
    position: sticky;
    /* the header is fixed, so clear its measured height */
    top: calc(var(--header-h) + 16px);
    align-self: start;
  }
}

/* Compact enquiry card — title-only head, tighter body, less highlight */
.booking-card {
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(1, 89, 143, .16);
  box-shadow: 0 20px 45px -20px rgba(1, 89, 143, .22), 0 4px 16px -4px rgba(0, 0, 0, .04);
}
.booking-card--compact .booking-card__head {
  padding: 16px 20px 14px;
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-ink) 100%);
}
.booking-card--compact .booking-card__head::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 203, 47, .45), transparent);
}
.booking-card--compact .booking-card__body { padding: 18px 18px 20px; gap: 12px; }
.booking-card--compact .booking-form textarea { min-height: 84px; }

/* Enquiry form fields — soft, neutral borders instead of prominent gold highlights */
.booking-card .booking-form input[type="text"],
.booking-card .booking-form input[type="tel"],
.booking-card .booking-form input[type="email"],
.booking-card .booking-form textarea {
  border: 1px solid rgba(0, 0, 0, .14);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03) inset;
}
.booking-card .booking-form input:hover,
.booking-card .booking-form textarea:hover {
  border-color: rgba(1, 125, 198, .45);
}
.booking-card .booking-form input:focus,
.booking-card .booking-form textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(1, 125, 198, .16);
}
.booking-card .input-prefix {
  border: 1px solid rgba(0, 0, 0, .14);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03) inset;
}
.booking-card .input-prefix > span {
  border-right: 1px solid rgba(0, 0, 0, .12);
  background: rgba(0, 0, 0, .02);
  color: rgba(26, 26, 26, .7);
}
.booking-card .input-prefix:hover {
  border-color: rgba(1, 125, 198, .45);
}
.booking-card .input-prefix:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(1, 125, 198, .16);
}

/* Enquiry CTA button — sophisticated blue secondary button instead of bright gold highlight */
.booking-card [data-cta="enquiry-form"],
.booking-card .booking-form .btn-blue {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  color: #ffffff;
  border: 1px solid rgba(1, 71, 111, .25);
  box-shadow: 0 6px 16px -6px rgba(1, 89, 143, .42), inset 0 1px 0 rgba(255, 255, 255, .2);
  font-weight: 600;
}
.booking-card [data-cta="enquiry-form"]:hover,
.booking-card .booking-form .btn-blue:hover {
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--blue) 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px -6px rgba(1, 89, 143, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
  transform: translateY(-2px);
}
.booking-card [data-cta="enquiry-form"]:active,
.booking-card .booking-form .btn-blue:active {
  transform: translateY(0);
}
.booking-card .assurance-row svg {
  color: var(--blue-deep);
}
.booking-card .enquiry-alt {
  border-top: 1px solid rgba(0, 0, 0, .08);
}

/* Left column CTA — this section sells here now, not in the card beside it */
.pass-cta {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.pass-cta p { font-size: 12.5px; font-weight: 400; color: rgba(26, 26, 26, .66); }
@media (min-width: 1024px) {
  .pass-cta { align-items: flex-start; text-align: left; }
}

/* Phone / WhatsApp escape hatch under the enquiry form */
.enquiry-alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  padding: 12px 18px 16px;
  border-top: 1px dashed rgba(224, 168, 0, .5);
}
.enquiry-alt a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(1, 125, 198, .35);
  background: rgba(255, 255, 255, .75);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-deep);
  transition: background-color .2s, border-color .2s, transform .2s var(--ease-out);
}
.enquiry-alt a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--cream);
  transform: translateY(-2px);
}

.enquiry-nudge {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: rgba(26, 26, 26, .68);
}
.enquiry-nudge a {
  font-weight: 700;
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: rgba(1, 125, 198, .4);
}
.enquiry-nudge a:hover { color: var(--blue-deep); text-decoration-color: currentColor; }

.assurance-row {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
}
.assurance-row li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(26, 26, 26, .68);
}
.assurance-row svg { color: var(--gold-deep); }

/* ---------- 8. Pandal locations ---------------------------------------------- */
.pandals {
  position: relative;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(255, 203, 47, .28), transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}

.pandal-columns {
  /* explicit, so the numbering never doubles up if Tailwind's preflight is absent */
  list-style: none;
  margin: 0;
  columns: 1;
  column-gap: 30px;
  padding: 26px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(224, 168, 0, .4);
  box-shadow: 0 18px 45px -30px rgba(26, 26, 26, .6);
}
@media (min-width: 640px)  { .pandal-columns { columns: 2; } }
@media (min-width: 1024px) { .pandal-columns { columns: 3; padding: 32px 34px; } }

.pandal-columns li {
  /* keep a row from being split across two columns */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(26, 26, 26, .82);
  border-bottom: 1px solid rgba(224, 168, 0, .22);
}
.pandal-columns li:last-child { border-bottom: 0; }

.pandal-no {
  flex: none;
  min-width: 24px;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}

/* ---------- 8b. Self-pickup centres · 4-across box grid ---------------------- */
.pickups {
  position: relative;
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
}

.pickup-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 520px)  { .pickup-grid { grid-template-columns: repeat(2, 1fr); } }
/* 6 counters land as a clean 3 x 2 block on desktop */
@media (min-width: 1024px) { .pickup-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.pickup-note {
  margin-inline: auto;
  max-width: 640px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(26, 26, 26, .7);
}

.pickup-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(224, 168, 0, .4);
  box-shadow: 0 18px 45px -32px rgba(26, 26, 26, .6);
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.pickup-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  box-shadow: 0 26px 50px -28px rgba(26, 26, 26, .5);
}

.pickup-card__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 13px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold-deep));
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 22px -14px rgba(224, 168, 0, .95);
}

.pickup-card__name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--blue-ink);
}

.pickup-card__venue {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--blue-deep);
}
.pickup-card__area {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(26, 26, 26, .72);
}

.pickup-card__hours {
  display: flex;
  align-items: center;
  gap: 6px;
  /* pin the hours to the bottom so cards of different name lengths still line up */
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-deep);
}
.pickup-card__hours a { color: inherit; text-decoration: none; }
.pickup-card__hours a:hover { text-decoration: underline; }
.pickup-card__hours + .pickup-card__hours { margin-top: 0; padding-top: 7px; }
.pickup-card__clock { flex: none; }

/* ---------- 9. Celebration banner ------------------------------------------ */
.celebration { position: relative; isolation: isolate; overflow: hidden; background: var(--blue-deep); }
.celebration__bg {
  position: absolute;
  inset: 0;
  background: url("assets/img/reds-bg.webp") center / cover no-repeat;
  /* the source artwork is red; rotate it onto the blue side so the banner
     matches the palette instead of reading maroon */
  filter: hue-rotate(185deg) saturate(.5);
  opacity: .85;
}
.celebration__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 62% at 50% 48%, rgba(1, 40, 66, .92) 0%, rgba(1, 40, 66, .78) 55%, rgba(1, 34, 56, .42) 100%);
}
.celebration__lights {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 216, 77, .95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle, rgba(255, 168, 60, .8) 0 1.4px, transparent 2.2px);
  background-size: 68px 68px, 104px 104px;
  background-position: 0 0, 34px 52px;
  opacity: .32;
  animation: twinkle 4.5s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 45%, transparent 60%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 45%, transparent 60%, #000 100%);
}
@keyframes twinkle {
  0%, 100% { opacity: .22; }
  50% { opacity: .45; }
}

.celebration__title {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  color: var(--cream);
  letter-spacing: -.015em;
  line-height: 1.1;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  text-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
.celebration__lead {
  margin-top: 16px;
  font-size: clamp(.95rem, 1.4vw, 1.0625rem);
  line-height: 1.8;
  font-weight: 300;
  color: rgba(255, 248, 232, .82);
}

.celebration__grid {
  margin-top: 44px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .celebration__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .celebration__grid { grid-template-columns: repeat(4, 1fr); } }
.celebration__grid li {
  padding: 26px 22px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255, 248, 232, .07);
  border: 1px solid rgba(255, 203, 47, .26);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .4s var(--ease-out), background-color .4s, border-color .4s;
}
.celebration__grid li:hover {
  transform: translateY(-6px);
  background: rgba(255, 248, 232, .12);
  border-color: rgba(255, 203, 47, .6);
}
.c-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-soft), var(--gold-deep));
  color: var(--ink);
  box-shadow: 0 12px 26px -14px rgba(255, 203, 47, .95);
}
.celebration__grid h3 {
  margin-top: 15px;
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
}
.celebration__grid p { margin-top: 7px; font-size: 13.5px; line-height: 1.65; font-weight: 300; color: rgba(255, 248, 232, .75); }

/* ---------- 10. Partners ----------------------------------------------------- */
.partners { background: var(--cream); }
.partner-grid {
  margin-top: 40px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .partner-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .partner-grid { grid-template-columns: repeat(7, 1fr); } }

.partner-card {
  display: grid;
  place-items: center;
  padding: 20px 16px;
  min-height: 104px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(224, 168, 0, .3);
  box-shadow: 0 12px 30px -22px rgba(26, 26, 26, .8);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.partner-card:hover {
  transform: translateY(-6px);
  border-color: rgba(224, 168, 0, .8);
  box-shadow: 0 24px 48px -24px rgba(1, 89, 143, .35);
}
.partner-card img {
  max-height: 52px;
  width: auto;
  object-fit: contain;
  filter: saturate(.9);
  opacity: .88;
  transition: filter .35s, opacity .35s, transform .35s var(--ease-out);
}
.partner-card:hover img { filter: saturate(1.05); opacity: 1; transform: scale(1.04); }

/* ---------- 10b. FAQ ---------------------------------------------------------- */
.faq {
  position: relative;
  background:
    radial-gradient(55% 40% at 50% 100%, rgba(1, 125, 198, .1), transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}

.faq-list {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 12px;
}

.faq-item {
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(224, 168, 0, .4);
  box-shadow: 0 16px 40px -32px rgba(26, 26, 26, .7);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.faq-item[open] {
  border-color: rgba(224, 168, 0, .85);
  box-shadow: 0 22px 46px -30px rgba(26, 26, 26, .6);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  list-style: none;
  border-radius: 18px;
}
/* Safari still paints its own triangle without this */
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }
.faq-item > summary:hover { color: var(--blue-deep); }
.faq-item > summary:focus-visible { box-shadow: var(--ring); }

.faq-item__icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 203, 47, .3);
  transition: background-color .25s, transform .3s var(--ease-out);
}
/* a plus that loses its upright stroke when the answer opens */
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--gold-deep);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__icon { background: var(--gold); transform: rotate(180deg); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq-item__answer {
  padding: 0 20px 18px;
  font-size: 13.5px;
  line-height: 1.75;
  font-weight: 300;
  color: rgba(26, 26, 26, .78);
}
.faq-item__answer a {
  font-weight: 600;
  color: var(--blue);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: rgba(1, 125, 198, .4);
}
.faq-item__answer a:hover { color: var(--blue-deep); text-decoration-color: currentColor; }

/* <details> has no height transition to hook into, so the answer fades in
   on open instead; with JS off it simply appears, which is fine */
.faq-item[open] .faq-item__answer { animation: faqIn .32s var(--ease-out); }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 639px) {
  .faq-list { gap: 10px; }
  .faq-item > summary { padding: 15px 15px; font-size: 13.5px; gap: 12px; }
  .faq-item__answer { padding: 0 15px 15px; font-size: 13px; }
}

/* ---------- 11. Scarcity ------------------------------------------------------ */
.scarcity {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(150deg, #FFF9EC 0%, #FFF2D6 55%, #FFEBC2 100%);
}
.scarcity::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/form-img.webp") center / 520px repeat;
  mix-blend-mode: multiply;
  opacity: .16;
}
.scarcity__lotus {
  position: absolute;
  bottom: -12px;
  width: 210px;
  opacity: .9;
  filter: drop-shadow(0 14px 22px rgba(1, 89, 143, .3));
  pointer-events: none;
}
.scarcity__lotus--left { left: -30px; }
.scarcity__lotus--right { right: -30px; transform: scaleX(-1); }
@media (max-width: 1023px) { .scarcity__lotus { width: 130px; opacity: .55; bottom: -20px; } }

.scarcity__title {
  font-family: "Playfair Display", serif;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-size: clamp(2rem, 5vw, 3.2rem);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .3);
}
.scarcity__lead {
  margin-top: 12px;
  font-size: clamp(.95rem, 1.5vw, 1.125rem);
  font-weight: 500;
  color: rgba(26, 26, 26, .72);
}

.countdown {
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(62px, 92px));
  gap: 10px;
  justify-content: center;
}
.countdown > div {
  padding: 12px 6px;
  border-radius: 16px;
  background: linear-gradient(175deg, var(--blue-light), var(--blue-deep));
  box-shadow: 0 16px 34px -20px rgba(1, 89, 143, .95), inset 0 1px 0 rgba(255, 203, 47, .25);
}
.countdown strong {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.countdown span {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 248, 232, .68);
}
.countdown__label {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .6);
}

/* ---------- 12. Footer -------------------------------------------------------- */
.site-footer {
  position: relative;
  isolation: isolate;
  background: var(--blue-ink);
  color: rgba(255, 248, 232, .8);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 0%, rgba(1, 89, 143, .55) 0%, transparent 70%);
  z-index: -1;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-deep), var(--gold), transparent);
}

.footer-title {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 14px;
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
}
.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.footer-text { font-size: 13.5px; line-height: 1.8; font-weight: 300; color: rgba(255, 248, 232, .72); }

.footer-links { display: grid; gap: 9px; }
.footer-links a {
  display: inline-block;
  font-size: 13.5px;
  color: rgba(255, 248, 232, .75);
  transition: color .25s, transform .25s var(--ease-out);
}
.footer-links a:hover { color: var(--gold); transform: translateX(4px); }

.footer-contact { display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 248, 232, .75); }
.footer-contact svg { flex: none; margin-top: 3px; color: var(--gold); }
.footer-contact a { color: rgba(255, 248, 232, .92); transition: color .25s; }
.footer-contact a:hover { color: var(--gold); text-decoration: underline; }
.footer-contact em { font-style: normal; font-size: 12px; color: rgba(255, 248, 232, .55); }

.social-row { margin-top: 18px; display: flex; gap: 10px; }
.social-row a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--gold);
  background: rgba(255, 203, 47, .1);
  border: 1px solid rgba(255, 203, 47, .3);
  transition: transform .3s var(--ease-out), background-color .3s, color .3s;
}
.social-row a:hover { transform: translateY(-3px); background: var(--gold); color: var(--ink); }

.footer-bottom {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 203, 47, .2);
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 248, 232, .7);
  display: grid;
  gap: 4px;
}

/* ---------- 13. Mobile sticky CTA ---------------------------------------------- */
.mobile-cta {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px;
  background: rgba(1, 89, 143, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 203, 47, .35);
  box-shadow: 0 20px 45px -18px rgba(0, 0, 0, .8);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .45s var(--ease-out), opacity .3s;
}
.mobile-cta.is-visible { transform: translateY(0); opacity: 1; }
.mobile-cta__price { display: flex; flex-direction: column; line-height: 1.15; padding-left: 4px; }
.mobile-cta__price s { font-size: 11px; color: rgba(255, 248, 232, .55); }
.mobile-cta__price strong { font-size: 18px; font-weight: 800; color: #ffffff; font-family: "Playfair Display", serif; }
.mobile-cta__price em { font-size: 9.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 248, 232, .55); }
.mobile-cta [data-cta="sticky-whatsapp"],
.mobile-cta .btn-whatsapp {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--cream);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 203, 47, .25);
  box-shadow: none;
  transition: transform .25s var(--ease-out), background .25s, color .25s;
}
.mobile-cta [data-cta="sticky-whatsapp"]:hover,
.mobile-cta .btn-whatsapp:hover {
  transform: translateY(-2px);
  background: var(--gold);
  color: var(--ink);
}

/* ---------- 14. Scroll reveal --------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal="left"] { transform: translateX(-38px); }
[data-reveal="right"] { transform: translateX(38px); }
[data-reveal="zoom"] { transform: scale(.96) translateY(18px); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- 15. Auto booking popup ---------------------------------------------- */
body.has-popup { overflow: hidden; }

.popup {
  position: fixed;
  inset: 0;
  /* above the sticky header (z-50) and the skip link (100) */
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
}
.popup[hidden] { display: none; }

.popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 71, 111, .62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .28s var(--ease-out);
}
.popup.is-open .popup__backdrop { opacity: 1; }

.popup__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: min(88vh, 820px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 26px 22px 24px;
  border-radius: 26px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .98) 0%, rgba(255, 248, 232, .97) 100%);
  border: 1px solid rgba(224, 168, 0, .6);
  box-shadow: 0 40px 90px -30px rgba(1, 89, 143, .6);
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity .28s var(--ease-out), transform .32s var(--ease-out);
}
.popup.is-open .popup__dialog { opacity: 1; transform: none; }
.popup__dialog:focus { outline: none; }

.popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(224, 168, 0, .5);
  color: rgba(26, 26, 26, .7);
  transition: background-color .2s, color .2s, transform .2s var(--ease-out);
}
.popup__close:hover { background: var(--gold); color: var(--ink); transform: rotate(90deg); }

.popup__head { text-align: center; padding: 0 26px 4px; }
.popup__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.popup__title {
  margin-top: 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ink);
}
.popup__lead {
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 300;
  color: rgba(26, 26, 26, .74);
}

.popup__body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(224, 168, 0, .5);
}

@media (max-width: 639px) {
  .popup { padding: 12px; }
  .popup__dialog { max-height: 92vh; padding: 22px 16px 18px; border-radius: 20px; }
  .popup__head { padding: 0 22px 2px; }
  .popup__lead { font-size: 12.5px; }
}

/* ---------- 16. Motion & print preferences --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ticket-art:hover { transform: none; }
}

@media print {
  #siteHeader, .mobile-cta { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   17 · MOBILE REFINEMENTS
   Phones get a tighter vertical rhythm (so the CTA sits as high as possible)
   and horizontal card layouts (so secondary sections stop eating scroll).
   ========================================================================== */
@media (max-width: 1023px) {
  /* extend the footer itself so the sticky bar never covers the last line
     (padding on <body> would paint a cream strip below the blue footer) */
  .site-footer > div { padding-bottom: 96px; }

  /* --- Hero: tighten every gap between the headline and the CTA --- */
  .hero { padding-top: calc(var(--header-h) + 2px); }
  .hero > .hero-stage { padding-top: 46px; }
  .hero-grid { gap: 4px; }

  .hero-eyebrow { gap: 7px; padding: 6px 15px; font-size: 10.5px; letter-spacing: .15em; }
  .hero-title { margin-top: 10px; font-size: clamp(1.6rem, 7.3vw, 2.15rem); }
  .hero-sub { margin-top: 8px; font-size: clamp(12px, 3.4vw, 13.5px); text-wrap: balance; }
  .hero-sub .dot { margin: 0 5px; }

  /* two bullets per row so they cost one line, not three */
  .hero-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin-top: 16px;
    width: 100%;
  }
  .hero-points li { align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.3; }
  .hero-points li:last-child { grid-column: 1 / -1; }
  .hero-points__icon { width: 22px; height: 22px; border-radius: 7px; }
  .hero-points__icon svg { width: 12px; height: 12px; }

  /* the proof strip reads better below the card on a phone */
  .hero-proof {
    margin: 16px auto 0;
    padding: 8px 14px 8px 10px;
    gap: 9px;
  }
  .hero-proof__icon { width: 28px; height: 28px; border-radius: 8px; }
  .hero-proof p > span { font-size: 11.5px; }

  .hero-bg__deity { display: none !important; }
  .hero-bg__toran { top: calc(var(--header-h) - 8px); height: 84px; background-size: auto 84px; }
  .hero-bg__dhaki { width: 190px; opacity: .26; }
  .hero-bg__thali { left: 2px; width: 116px; opacity: .5; }

  .price-card { margin-top: 12px; padding: 14px 13px 14px; border-radius: 20px; }
  .price-card::before { inset: 5px; border-radius: 15px; }
  .price-card__label { font-size: 10px; }
  .price-card__rule { margin: 10px 0; }
  .booking-form input[type="text"],
  .booking-form input[type="tel"],
  .booking-form input[type="email"],
  .booking-form select { height: 42px; }
  .booking-form textarea { min-height: 58px; }
  .delivery { margin-top: 10px; }
  .delivery-options { gap: 7px; }
  .delivery-opt__body { padding: 8px 10px; }
  .delivery-opt__title { font-size: 12.5px; }
  .delivery-opt__meta { font-size: 10px; }
  .order-summary { margin-top: 10px; padding: 8px 11px; font-size: 12px; }
  .input-prefix > span { line-height: 40px; }
  .field > label { margin-bottom: 4px; }
  .total-line { margin-top: 8px; font-size: 12.5px; }
  .form-note { margin-top: 8px; font-size: 11px; }

  /* --- Counters: uniform labels, no uneven second lines --- */
  .counter-row { margin-top: 22px; padding: 14px 6px; }
  .counter-row dt { font-size: 9.5px; letter-spacing: .06em; }
  .counter-row dd { font-size: 1.45rem; }

  .countdown { grid-template-columns: repeat(4, 1fr); gap: 7px; max-width: 330px; }
  .countdown > div { padding: 10px 4px; border-radius: 13px; }

  .partner-card { min-height: 86px; padding: 16px 12px; }
  .partner-card img { max-height: 40px; }

  .section-title, .celebration__title, .scarcity__title { text-wrap: balance; }
}

@media (max-width: 639px) {
  .pandal-columns { padding: 18px 16px; }
  .pandal-columns li { padding: 7px 0; font-size: 13.5px; }

  .pickup-grid { gap: 12px; }
  .pickup-card { padding: 18px 16px 16px; border-radius: 16px; }
  .pickup-card__no { width: 30px; height: 30px; margin-bottom: 10px; font-size: 11.5px; }
  .pickup-card__name { font-size: 1rem; }
  .pickup-card__venue { font-size: 12px; }
  .pickup-card__area { font-size: 12.5px; }
  .pickup-card__hours { padding-top: 10px; font-size: 11.5px; }

  .pass-cta .btn-gold { width: 100%; }
  .enquiry-alt { padding: 12px 14px 16px; }
  .booking-card--compact .booking-card__body { padding: 18px 15px 18px; }

  .celebration__grid { margin-top: 32px; gap: 12px; }
  .celebration__grid li {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    align-items: center;
    text-align: left;
    padding: 17px 16px;
  }
  .c-icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .celebration__grid h3 { grid-column: 2; margin-top: 0; font-size: 1.05rem; }
  .celebration__grid p { grid-column: 2; margin-top: 3px; font-size: 12.5px; line-height: 1.55; }
}

/* ==========================================================================
   18 · BENGALIANA — kash phul, dhaki and alpona
   ========================================================================== */

/* --- Kash phul (kans grass) ------------------------------------------- */
.kash-band {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  pointer-events: none;
}
.kash-band--hero {
  height: 215px;
  z-index: 1;
  /* the plume barbs are white, and the foot of the hero is near-white cream —
     this warm horizon sits behind them so they actually read */
  background: linear-gradient(to top,
    rgba(255, 203, 47, .24) 0%,
    rgba(255, 203, 47, .10) 42%,
    rgba(255, 203, 47, 0) 78%);
}
/* a touch more definition than the strip needs, for the same reason */
.kash-band--hero .kash-stalk { stroke: rgba(140, 102, 18, .55); }
.kash-band--hero .kash-band__back { opacity: .62; }
.kash-band--hero .kash-band__front { filter: drop-shadow(0 4px 6px rgba(1, 89, 143, .22)); }
.kash-band--strip { height: 150px; z-index: 0; opacity: .8; }

.kash-stalk {
  fill: none;
  stroke: rgba(163, 122, 32, .38);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.kash-barb {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: .7;
  stroke-linecap: round;
}
.kash-barb--1 { opacity: .95; stroke-width: .75; }
.kash-barb--2 { opacity: .7;  stroke-width: .6; }
.kash-barb--3 { opacity: .45; stroke-width: .9; }

.kash-band__back { opacity: .5; }
.kash-band__front { opacity: 1; filter: drop-shadow(0 3px 5px rgba(1, 125, 198, .18)); }

/* each plume sways from its own base */
.kash-band .sway {
  transform-origin: 0 0;
  animation-name: kashSway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes kashSway {
  0%, 100% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2.8deg); }
}

/* --- Alpona ornament --------------------------------------------------- */
.alpona {
  display: flex;
  justify-content: center;
  color: var(--gold-deep);
}
.alpona svg { width: min(300px, 78%); height: auto; }
.alpona--inline { margin-top: 26px; opacity: .8; }
@media (min-width: 1024px) { .alpona--inline { justify-content: flex-start; } }

/* --- Bengaliana band --------------------------------------------------- */
.bengaliana {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 54px 16px 66px;
  text-align: center;
  background:
    radial-gradient(70% 100% at 50% 100%, rgba(255, 203, 47, .45) 0%, transparent 68%),
    linear-gradient(180deg, var(--cream-warm) 0%, #FCEAC4 60%, var(--cream-warm) 100%);
  border-top: 1px solid rgba(224, 168, 0, .3);
  border-bottom: 1px solid rgba(224, 168, 0, .3);
}
.bengaliana__inner { position: relative; z-index: 2; }

.dhaki {
  width: min(250px, 64vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 16px 22px rgba(1, 89, 143, .28));
  animation: dhakiBeat 2.6s ease-in-out infinite;
}
@keyframes dhakiBeat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(-1.1deg); }
  60% { transform: translateY(-2px) rotate(1.1deg); }
}

.bengaliana__bn {
  margin-top: 14px;
  font-family: "Noto Serif Bengali", "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 5.2vw, 2.9rem);
  line-height: 1.45;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .5);
}
.bengaliana .alpona { margin-top: 6px; }
.bengaliana__en {
  margin-top: 8px;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(26, 26, 26, .78);
}

@media (max-width: 639px) {
  .bengaliana { padding: 40px 16px 52px; }
  .kash-band--hero { height: 150px; }
  .kash-band--strip { height: 118px; }
  .dhaki { width: min(200px, 56vw); }
}

@media (prefers-reduced-motion: reduce) {
  .dhaki, .kash-band .sway { animation: none !important; }
}


/* ==========================================================================
   19 · HERO BACKDROP
   The ground glow and the kash phul rising from the foot, so the offer and
   the form are the only things competing for attention.
   ========================================================================== */

.hero-bg__glow {
  background:
    radial-gradient(62% 55% at 34% 30%, rgba(255, 255, 255, .94) 0%, rgba(255, 248, 232, .55) 44%, rgba(255, 248, 232, 0) 72%),
    radial-gradient(42% 50% at 0% 72%, rgba(1, 71, 111, .3), transparent 70%),
    radial-gradient(40% 46% at 100% 62%, rgba(255, 203, 47, .34), transparent 70%),
    radial-gradient(78% 46% at 50% 106%, rgba(255, 203, 47, .45), transparent 70%),
    linear-gradient(180deg, rgba(1, 125, 198, .16) 0%, rgba(255, 248, 232, .05) 24%, rgba(255, 248, 232, .04) 64%, var(--cream) 99%);
}



@media (min-width: 1024px) {
  .hero { padding-top: calc(var(--header-h) + 2px); }
  .hero > .hero-stage {
    --stage-pb: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 72px;
    padding-bottom: var(--stage-pb);
  }
}

@media (min-width: 1280px) {
  .hero { min-height: 760px; }
  .hero > .hero-stage { padding-top: 88px; }
}

@media (max-width: 1023px) {
  .hero-bg__glow { background-position: center; }
}

/* ==========================================================================
   20 · BACKGROUND MUSIC DOCK
   Sits bottom-left, clear of the mobile sticky CTA which owns the bottom
   strip. Below the popup (120) and the header (50), above page content.
   ========================================================================== */
.music-dock {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 44;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: rgba(252, 251, 248, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(224, 168, 0, .55);
  box-shadow: 0 12px 30px -14px rgba(26, 26, 26, .55);
}

.music-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow: 0 4px 12px -5px rgba(224, 168, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .2s var(--ease-out), filter .2s;
}
.music-btn:hover { transform: scale(1.06); }
.music-btn:active { transform: scale(.96); }
.music-btn--mute {
  width: 30px;
  height: 30px;
  background: transparent;
  box-shadow: none;
  color: rgba(26, 26, 26, .68);
}
.music-btn--mute:hover { color: var(--ink); }

/* one icon per state — JS flips a class on the dock, CSS picks the glyph */
.music-ico--pause,
.music-ico--off { display: none; }
.music-dock.is-playing .music-ico--play { display: none; }
.music-dock.is-playing .music-ico--pause { display: block; }
.music-dock.is-muted .music-ico--on { display: none; }
.music-dock.is-muted .music-ico--off { display: block; }
.music-dock.is-muted .music-btn--mute { color: var(--blue-deep); }

/* a quiet pulse while the track is actually playing */
.music-dock.is-playing .music-btn--play {
  animation: musicPulse 2.4s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 4px 12px -5px rgba(224, 168, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .6); }
  50% { box-shadow: 0 4px 18px -4px rgba(224, 168, 0, 1), inset 0 1px 0 rgba(255, 255, 255, .7); }
}

.music-vol { display: flex; align-items: center; }
.music-vol input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 74px;
  height: 4px;
  border-radius: 999px;
  background: rgba(26, 26, 26, .18);
  cursor: pointer;
}
.music-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold-deep);
  border: 2px solid var(--cream);
  box-shadow: 0 1px 4px rgba(26, 26, 26, .35);
}
.music-vol input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold-deep);
  border: 2px solid var(--cream);
  box-shadow: 0 1px 4px rgba(26, 26, 26, .35);
}
.music-btn:focus-visible,
.music-vol input[type="range"]:focus-visible {
  outline: 2px solid var(--blue-deep);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  /* clear the sticky booking bar, which lives on the bottom strip */
  .music-dock { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 400px) {
  /* on the narrowest phones the mute button carries the sound control */
  .music-vol { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .music-dock.is-playing .music-btn--play { animation: none; }
  .music-btn { transition: none; }
}

@media print { .music-dock { display: none !important; } }

/* ==========================================================================
   21 · THANK-YOU PAGE
   Standalone confirmation at thank-you.html. Deliberately quiet: one card,
   no navigation, nothing competing with the order details.
   ========================================================================== */
.ty-body {
  min-height: 100vh;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(255, 203, 47, .30), transparent 68%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}

.ty-header { border-bottom: 1px solid rgba(224, 168, 0, .32); }
.ty-back {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-deep);
  white-space: nowrap;
}
.ty-back:hover { text-decoration: underline; }

.ty-card {
  position: relative;
  padding: 44px 26px 30px;
  border-radius: 26px;
  text-align: center;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(224, 168, 0, .45);
  box-shadow: 0 26px 60px -34px rgba(26, 26, 26, .6);
}

.ty-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow: 0 12px 28px -12px rgba(224, 168, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .65);
}

.ty-title {
  margin-top: 16px;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ty-lead {
  margin-top: 10px;
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(26, 26, 26, .74);
}

.ty-order {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--cream-warm);
  border: 1px dashed rgba(224, 168, 0, .8);
}
.ty-order span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .55);
}
.ty-order strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--blue-deep);
}

.ty-summary {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .ty-summary { grid-template-columns: repeat(3, 1fr); } }
.ty-summary li {
  padding: 11px 10px;
  border-radius: 14px;
  background: var(--cream-warm);
}
.ty-summary span {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .55);
}
.ty-summary strong {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

/* --- the delivery-specific blocks --------------------------------------- */
.ty-block {
  margin-top: 24px;
  padding: 20px 18px;
  border-radius: 20px;
  text-align: left;
  background: linear-gradient(170deg, rgba(255, 248, 232, .95), rgba(255, 255, 255, .85));
  border: 1px solid rgba(1, 125, 198, .22);
}
.ty-block__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.ty-rows { margin: 14px 0 0; }
.ty-rows > div {
  display: grid;
  gap: 2px;
  padding: 11px 0;
  border-top: 1px solid rgba(26, 26, 26, .09);
}
.ty-rows > div:first-child { border-top: 0; padding-top: 4px; }
@media (min-width: 560px) {
  .ty-rows > div { grid-template-columns: 150px 1fr; gap: 14px; align-items: baseline; }
}
.ty-rows dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(26, 26, 26, .55);
}
.ty-rows dd { margin: 0; }
.ty-rows dd strong {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.ty-venue,
.ty-area,
.ty-phone { display: block; margin-top: 3px; line-height: 1.55; }
.ty-venue { font-size: 13px; font-weight: 600; color: var(--blue-deep); }
.ty-area { font-size: 13px; font-weight: 300; color: rgba(26, 26, 26, .72); }
.ty-phone { font-size: 13px; font-weight: 600; color: var(--gold-deep); }
.ty-phone a { color: inherit; }
.ty-phone a:hover { text-decoration: underline; }

.ty-courier-line {
  margin-top: 12px;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}
.ty-courier-line strong { font-weight: 700; }

.ty-note {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(26, 26, 26, .66);
}

.ty-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
@media (min-width: 480px) { .ty-actions { flex-direction: row; } }

.ty-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(26, 26, 26, .62);
}
.ty-foot a { color: var(--blue-deep); font-weight: 600; }
.ty-foot a:hover { text-decoration: underline; }

@media (max-width: 559px) {
  .ty-card { padding: 34px 18px 24px; border-radius: 22px; }
  .ty-block { padding: 16px 14px; }
}

/* ---------------------------------------------------------------------------
   Consent + honeypot
   The consent box is required by the booking API, which refuses a submission
   without it and writes a consent record from it. The honeypot must be
   reachable by a bot and invisible to a person — so it is moved off-screen
   rather than display:none, which some bots skip.
   --------------------------------------------------------------------------- */
.consent-row {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin-top: .7rem;
  font-size: .8rem;
  line-height: 1.35;
  cursor: pointer;
}

.consent-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: .1rem;
  accent-color: #017DC6;
  cursor: pointer;
}

.consent-row input[type="checkbox"]:focus-visible {
  outline: 2px solid #017DC6;
  outline-offset: 2px;
}

/* the reassurance line under the button: icon and text on one compact row */
.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(26, 26, 26, .62);
}
.form-note svg { flex: 0 0 auto; color: var(--gold-deep); }

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   Payment-failed notice
   Shown when the visitor returns from a gateway that refused the payment. It
   covers the page on purpose: this is the one message they must not scroll past.
   --------------------------------------------------------------------------- */
.pay-failed {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(20, 16, 8, .62);
  backdrop-filter: blur(4px);
}

.pay-failed__card {
  max-width: 26rem;
  width: 100%;
  background: #fff;
  border-radius: 18px;
  padding: 1.75rem 1.6rem;
  text-align: center;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45);
}

.pay-failed__card h2 {
  margin: 0 0 .6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #B3261E;
}

.pay-failed__card p {
  margin: 0 0 1.25rem;
  font-size: .95rem;
  line-height: 1.55;
  color: #4A4438;
}

.pay-failed__card .btn-gold {
  width: 100%;
  height: 3rem;
}

/* On a phone the floating audio player owns the bottom-left corner, so the
   thali moves across to the other side. */
@media (max-width: 639px) {
  .hero-bg__dhaki { width: 165px; opacity: .2; }
  .hero-bg__thali { left: auto; right: 4px; width: 112px; }
}