/* ===========================================================
   Discover Surat — Design System
   Mobile-first. Base styles = phone. min-width queries scale up.
   =========================================================== */

/* Native cross-document view transitions: a smooth cross-fade between
   page navigations in supporting browsers (Chrome/Edge), pure CSS with
   zero JS -- browsers without support just navigate normally, exactly
   like today, so this is purely additive with no fallback to write. */
@media not (prefers-reduced-motion: reduce){
  @view-transition{
    navigation: auto;
  }
  ::view-transition-old(root){
    animation: pageDive-out .45s cubic-bezier(.4,0,.2,1) both;
  }
  ::view-transition-new(root){
    animation: pageDive-in .55s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes pageDive-out{
    to{ opacity:0; transform: scale(.96) translateY(-14px); filter: blur(3px); }
  }
  @keyframes pageDive-in{
    from{ opacity:0; transform: scale(1.035) translateY(14px); filter: blur(5px); }
    to{ opacity:1; transform:none; filter:blur(0); }
  }
}

:root{
  /* Palette: diamond gold + Tapi river teal + festival coral + night ink */
  --gold: #E8A33D;
  --gold-dark: #C8811F;
  --teal: #0B4F6C;
  --teal-dark: #073A50;
  --coral: #FF6B4A;
  --ink: #16121F;
  --ink-soft: #3A3550;
  --paper: #FFFBF4;
  --paper-alt: #FFFFFF;
  --line: #EDE4D3;
  --muted: #786F8C;
  --veg: #2E8B57;
  --nonveg: #C1440E;
  --success: #2E8B57;

  /* --ink-fixed always stays this dark tone, even in dark mode -- for
     sections (footer, strip, media placeholders) that are deliberately
     a dark accent block regardless of theme, as opposed to --ink itself
     which means "current theme's text colour" and swaps to light text
     when dark mode is on. */
  --ink-fixed: #16121F;
  --chip-bg: #F4EEDD;
  --hover-tint: #FFF8EC;
  --header-bg: rgba(255,251,244,.9);
  --note-bg: #FFF3E0;
  --note-border: #F3D9A4;
  --note-ink: #7A5A16;
  --note-ink-strong: #5C4310;

  --chip-veg-bg: #E7F5EC;
  --chip-veg-ink: #2E8B57;
  --chip-nonveg-bg: #FBE7E0;
  --chip-nonveg-ink: #C1440E;
  --chip-gold-bg: #FCEFD8;
  --chip-gold-ink: #C8811F;
  --chip-teal-bg: #E4F0F3;
  --chip-teal-ink: #0B4F6C;
  --chip-coral-bg: #FFE6DF;
  --chip-coral-ink: #C4472F;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(22,18,31,0.06);
  --shadow-md: 0 10px 30px rgba(22,18,31,0.10);
  --shadow-lg: 0 20px 50px rgba(22,18,31,0.16);

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;

  --container: 1180px;
  --header-h: 64px;
}

/* -------- Dark mode -------- */
:root[data-theme="dark"]{
  --ink: #F3EFE6;
  --ink-soft: #CDC6DE;
  --paper: #150F1F;
  --paper-alt: #1E1830;
  --line: #33294A;
  --muted: #9C93B5;

  --chip-bg: #2A2242;
  --hover-tint: #251E3A;
  --header-bg: rgba(21,15,31,.88);
  --note-bg: #3A2C15;
  --note-border: #5C4A22;
  --note-ink: #E8C077;
  --note-ink-strong: #F3D9A4;

  --chip-veg-bg: #163625;
  --chip-veg-ink: #6BD99A;
  --chip-nonveg-bg: #3D2018;
  --chip-nonveg-ink: #F0855A;
  --chip-gold-bg: #3D2E12;
  --chip-gold-ink: #F0B85C;
  --chip-teal-bg: #16323D;
  --chip-teal-ink: #5FC4E8;
  --chip-coral-bg: #3D2018;
  --chip-coral-ink: #FF8A6B;

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.28);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.36);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.46);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink: #F3EFE6;
    --ink-soft: #CDC6DE;
    --paper: #150F1F;
    --paper-alt: #1E1830;
    --line: #33294A;
    --muted: #9C93B5;

    --chip-bg: #2A2242;
    --hover-tint: #251E3A;
    --header-bg: rgba(21,15,31,.88);
    --note-bg: #3A2C15;
    --note-border: #5C4A22;
    --note-ink: #E8C077;
    --note-ink-strong: #F3D9A4;

    --chip-veg-bg: #163625;
    --chip-veg-ink: #6BD99A;
    --chip-nonveg-bg: #3D2018;
    --chip-nonveg-ink: #F0855A;
    --chip-gold-bg: #3D2E12;
    --chip-gold-ink: #F0B85C;
    --chip-teal-bg: #16323D;
    --chip-teal-ink: #5FC4E8;
    --chip-coral-bg: #3D2018;
    --chip-coral-ink: #FF8A6B;

    --shadow-sm: 0 2px 10px rgba(0,0,0,0.28);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.36);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.46);
  }
}
body{ transition: background .25s ease, color .25s ease; }
.card, .site-header, .main-nav, .detail-modal-panel{ transition: background .25s ease, border-color .25s ease; }

*,*::before,*::after{ box-sizing: border-box; }
/* NOTE: overflow-x:hidden intentionally lives on body only, not html.
   Setting it on html breaks position:fixed on iOS Safari (the hamburger
   nav panel and toggle button rely on fixed positioning) -- per the CSS
   overflow-propagation spec, body's overflow-x still governs the
   viewport's scrollbar when html's own overflow is left at its default
   'visible', so this still fully suppresses the page-level scrollbar. */
/* overflow-x:clip (not hidden) on html: clips any phantom horizontal
   scroll from off-canvas/fixed elements without creating a scroll
   container on the root element -- unlike overflow-x:hidden here, this
   does not trigger the classic WebKit bug where a non-visible overflow
   on <html> breaks position:fixed descendants on iOS Safari. */
html{ scroll-behavior: smooth; overflow-x: clip; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-head); font-optical-sizing: auto; line-height:1.12; margin:0 0 .5em; font-weight:700; color: var(--ink); letter-spacing:-0.01em; }
h1{ font-weight:600; letter-spacing:-0.02em; }
em, i, .serif-italic{ font-family: var(--font-head); font-style:italic; }
p{ margin:0 0 1em; }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 20px; }
section{ padding: 56px 0; }
.hide-mobile{ display:none; }
.text-center{ text-align:center; }

/* -------- Buttons -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 26px; border-radius: 999px; font-weight:600; font-size:1rem;
  border:2px solid transparent; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--coral); color:#fff; box-shadow: 0 8px 20px rgba(255,107,74,.35); }
.btn-primary:hover{ background:#ff5733; box-shadow: 0 10px 26px rgba(255,107,74,.45); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,.7); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); }
.btn-dark{ background: var(--ink-fixed); color:#fff; }
.btn-whatsapp{ background:#25D366; color:#fff; box-shadow: 0 8px 20px rgba(37,211,102,.4); }
.btn-whatsapp:hover{ background:#1ebe5a; }
.btn-block{ width:100%; }

/* -------- Header -------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  height: var(--header-h);
  display:flex; align-items:center;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-head); font-weight:600; font-size:1.2rem; color: var(--ink); }
.brand .dot{ width:10px; height:10px; border-radius:50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,107,74,.2); }
.brand span.city{ color: var(--teal); font-style:italic; font-weight:600; }

.header-actions{ display:flex; align-items:center; gap:8px; }

.theme-toggle{
  width:44px; height:44px; border-radius: 12px; border:1px solid var(--line); background:var(--paper-alt);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink);
  flex:0 0 auto;
}
.theme-toggle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{
  width:44px; height:44px; border-radius: 12px; border:1px solid var(--line); background:var(--paper-alt);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:20px; height:2px; background: var(--ink); position:relative; transition: .25s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.open span{ background: transparent; }
.nav-toggle.open span::before{ top:0; transform: rotate(45deg); }
.nav-toggle.open span::after{ top:0; transform: rotate(-45deg); }

.main-nav{
  /* Off-canvas slide uses a plain "right" offset rather than transform:
     position:fixed + transform is a known combination that can still
     count toward the document's scrollable overflow even though the
     panel is visually off-screen, producing a phantom horizontal
     scrollbar. Animating "right" instead avoids that entirely. */
  position: fixed; top: var(--header-h); right: -100%; bottom:0; width:100%;
  background: var(--paper);
  transition: right .3s ease; z-index:99; overflow-y:auto;
  padding: 20px;
}
.main-nav.open{ right: 0; }
.main-nav ul{ display:flex; flex-direction:column; gap:4px; }
.main-nav a{
  display:block; padding: 16px 12px; font-size:1.1rem; font-weight:600;
  border-bottom: 1px solid var(--line); color: var(--ink-soft);
}
.main-nav a.active{ color: var(--coral); }
.main-nav .nav-cta{ margin-top: 18px; }

/* -------- Mobile bottom quick-nav -------- */
.bottom-nav{
  position: fixed; left:0; right:0; bottom:0; z-index:98;
  display:flex; justify-content: space-around; align-items:center;
  background: var(--paper-alt); border-top:1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(22,18,31,.08);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.68rem; font-weight:600; color: var(--muted); flex:1; text-align:center; padding:4px 2px;
}
.bottom-nav a svg{ width:22px; height:22px; stroke: var(--muted); fill:none; }
.bottom-nav a.active{ color: var(--coral); }
.bottom-nav a.active svg{ stroke: var(--coral); }

/* -------- WhatsApp floating button -------- */
.wa-float{
  position: fixed; right:16px; bottom:74px; z-index: 97;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(37,211,102,.5);
  animation: pulse 2.4s infinite;
}
.wa-float svg{ width:28px; height:28px; fill:#fff; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.55), 0 10px 24px rgba(37,211,102,.5); }
  70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 10px 24px rgba(37,211,102,.5); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 10px 24px rgba(37,211,102,.5); }
}

/* -------- Surat Explorer checklist -------- */
.explore-check{
  position:absolute; top:8px; right:8px; z-index:2; width:30px; height:30px; border-radius:50%;
  background:rgba(22,18,31,.5); backdrop-filter:blur(2px); border:2px solid rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.explore-check:active{ transform: scale(.9); }
.explore-check svg{
  width:16px; height:16px; fill:none; stroke:#fff; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round; opacity:0; transition: opacity .15s ease;
}
.explore-check.checked{ background: var(--coral); border-color: var(--coral); }
.explore-check.checked svg{ opacity:1; }

.explorer-badge{
  position: fixed; left:16px; bottom:74px; z-index: 97;
  display:flex; align-items:center; gap:7px; border:1px solid var(--line);
  background: var(--paper-alt); border-radius:999px; padding:10px 16px 10px 12px;
  box-shadow: var(--shadow-md); cursor:pointer;
  font-family: var(--font-head); font-weight:700; font-size:.85rem; color: var(--ink);
}
.explorer-badge-icon{ font-size:1.1rem; line-height:1; }

@media (min-width: 1150px){
  .explorer-badge{ bottom:24px; }
}

/* -------- Hero -------- */
.hero{
  position:relative; color:#fff; padding: 64px 0 72px;
  background: linear-gradient(160deg, var(--teal-dark), var(--teal) 55%, var(--gold-dark));
  background-size: cover; background-position: center;
  overflow:hidden;
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: radial-gradient(circle at 80% 0%, rgba(255,255,255,.18), transparent 55%);
}
.hero::before{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:36px; z-index:3;
  /* CSS custom properties can't be substituted inside a url() string, so
     the wave's fill colour (matching --paper, light or dark) is baked as
     a literal hex per theme below rather than using var(). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C240,60 480,0 720,22 C960,44 1200,10 1440,30 L1440,60 L0,60 Z' fill='%23FFFBF4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
}
:root[data-theme="dark"] .hero::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C240,60 480,0 720,22 C960,44 1200,10 1440,30 L1440,60 L0,60 Z' fill='%23150F1F'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C240,60 480,0 720,22 C960,44 1200,10 1440,30 L1440,60 L0,60 Z' fill='%23150F1F'/%3E%3C/svg%3E");
  }
}
.hero .container{ position:relative; z-index:2; }

/* -------- WebGL hero canvas (three-scene.js) --------
   Sits above the flat gradient/photo background and below the radial
   highlight + text, so it reads as depth behind the copy rather than
   competing with it. Left fully transparent (alpha:true renderer) until
   the first frame draws, then fades in -- if the script never runs
   (no WebGL, reduced motion, save-data), the canvas simply stays empty
   and the existing CSS hero background is the whole show. */
.hero-3d-canvas, .cta-3d-canvas{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  display:block; pointer-events:none; opacity:0; transition: opacity 1.1s ease;
}
.hero-3d-canvas.ready, .cta-3d-canvas.ready{ opacity:1; }

/* -------- Site-wide scroll parallax --------
   Generic depth layer: assets/js/3d-effects.js writes --parallax-shift
   on any [data-parallax] element as it crosses the viewport (further
   from centre = bigger shift, capped). Used for whole rows (the GIF
   carousel/track) and decorative background glows -- never on the
   actual heading/paragraph text, so reading the page stays rock-steady
   while everything behind and around it drifts at its own depth. */
[data-parallax]{ transform: translateY(var(--parallax-shift, 0px)); }
.section-glow{
  position:absolute; z-index:0; pointer-events:none;
  width:420px; height:420px; border-radius:50%; filter: blur(30px);
}
@media (prefers-reduced-motion: reduce){
  [data-parallax]{ transform:none !important; }
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3); padding:6px 14px; border-radius:999px; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px;
}
.hero h1{ color:#fff; font-size: clamp(2rem, 7vw, 3.6rem); margin-bottom:.4em; }
.hero h1 .accent-word{ color: var(--gold); font-style:italic; font-weight:500; }
.hero p.lead{ font-size:1.05rem; max-width: 560px; color: rgba(255,255,255,.9); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero-small{ padding: 44px 0 52px; }
.hero-small h1{ font-size: clamp(1.8rem, 6vw, 2.6rem); }

.hero-stats{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin-top:34px; }
.hero-stats .stat{ background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius: var(--radius-md); padding:16px; }
.hero-stats .stat b{ display:block; font-family: var(--font-head); font-size:1.5rem; }
.hero-stats .stat span{ font-size:.78rem; color: rgba(255,255,255,.85); }

/* -------- Section headers -------- */
.section-head{ max-width: 640px; margin: 0 auto 32px; text-align:center; }
.section-head .kicker{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--coral); font-family: var(--font-head); font-style:italic; font-weight:600;
  font-size:1.05rem; letter-spacing:0.01em;
}
.section-head .kicker::before, .section-head .kicker::after{ content:''; width:22px; height:1.5px; background: var(--coral); opacity:.6; display:inline-block; }
.section-head h2{ font-size: clamp(1.6rem, 5vw, 2.3rem); margin-top:.3em; }
.section-head p{ color: var(--muted); }

/* -------- Artistic pull-quote -------- */
.pull-quote{
  position:relative; max-width:640px; margin:0 auto; padding: 8px 20px 8px 44px;
  font-family: var(--font-head); font-style:italic; font-weight:500;
  font-size: clamp(1.15rem, 3.2vw, 1.5rem); line-height:1.5; color: var(--ink-soft);
}
.pull-quote::before{
  content:'\201C'; position:absolute; left:-4px; top:-18px;
  font-family: var(--font-head); font-style:normal; font-weight:700;
  font-size:3.6rem; color: var(--coral); opacity:.5; line-height:1;
}

/* -------- Cards / Grid -------- */
.grid{ display:grid; gap:20px; grid-template-columns: 1fr; }
.card{
  position:relative;
  background: var(--paper-alt); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  border:1px solid var(--line); border-top:3px solid transparent; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--coral); }
/* Pointer-tilt (assets/js/3d-effects.js) sets an inline perspective()
   transform on mousemove -- swap to a near-instant transition while
   actively tracking so it doesn't lag behind the cursor, then fall back
   to the slower, eased transition above once the pointer leaves. */
.card.tilting{ transition: transform .05s linear, box-shadow .25s ease, border-top-color .25s ease; box-shadow: var(--shadow-lg); }
.card-media{
  height:180px; display:flex; align-items:center; justify-content:center; position:relative;
  color:#fff; overflow:hidden;
}
/* Glare sweep that tracks the cursor (--mx/--my set by 3d-effects.js),
   only visible on pointer-fine devices where .tilting is ever applied. */
.card-media::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.45), transparent 60%);
  transition: opacity .3s ease;
}
.card.tilting .card-media::before{ opacity:1; }
.card-media svg{ width:56px; height:56px; opacity:.9; position:relative; z-index:1; }
.card-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
  /* Scaled up 15% so assets/js/3d-effects.js can shift it +/-14px on
     scroll (--parallax-y) as depth without ever exposing an edge. */
  transform: translateY(var(--parallax-y, 0px)) scale(1.15);
}
.card:hover .card-media img{ transform: translateY(var(--parallax-y, 0px)) scale(1.22); }
.card-media .media-tag{
  position:absolute; left:10px; bottom:10px; z-index:2;
  background: rgba(22,18,31,.55); backdrop-filter: blur(2px);
  color:#fff; font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:999px;
  letter-spacing:.02em;
}
.card-body{ padding:20px; }
.card-body h3{ font-size:1.15rem; margin-bottom:.35em; }
.card-body p{ color: var(--muted); font-size:.92rem; margin-bottom:.6em; }
.card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }

.chip{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; font-size:.72rem; font-weight:700; background:var(--chip-bg); color:var(--ink-soft); }
.chip-veg{ background: var(--chip-veg-bg); color: var(--chip-veg-ink); }
.chip-nonveg{ background: var(--chip-nonveg-bg); color: var(--chip-nonveg-ink); }
.chip-gold{ background:var(--chip-gold-bg); color:var(--chip-gold-ink); }
.chip-teal{ background:var(--chip-teal-bg); color:var(--chip-teal-ink); }
.chip-coral{ background:var(--chip-coral-bg); color:var(--chip-coral-ink); }

/* card-media gradient themes */
.grad-teal{ background: linear-gradient(135deg, var(--teal), #14829e); }
.grad-coral{ background: linear-gradient(135deg, var(--coral), #C4472F); }
.grad-gold{ background: linear-gradient(135deg, var(--gold), var(--gold-dark)); }
.grad-ink{ background: linear-gradient(135deg, #322B49, var(--ink-fixed)); }
.grad-sky{ background: linear-gradient(135deg, #4FA6D9, #2E6FA3); }
.grad-green{ background: linear-gradient(135deg, #3FA66B, #2A7A4C); }
.grad-purple{ background: linear-gradient(135deg, #7B5EA7, #4E3A75); }
.grad-rose{ background: linear-gradient(135deg, #E0577A, #A93B5A); }

/* placeholder photo blocks (swap for real images later) */
.ph{
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 10px, transparent 10px 20px);
}
.ph-note{ position:absolute; bottom:8px; right:10px; font-size:.62rem; background:rgba(0,0,0,.35); padding:3px 8px; border-radius:6px; letter-spacing:.03em; }

/* -------- Photo gallery strip -------- */
.gallery-grid{ display:grid; gap:14px; grid-template-columns: repeat(2,1fr); }
.gallery-item{
  position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3;
  box-shadow: var(--shadow-sm);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover; transition: transform .4s ease; display:block;
  transform: translateY(var(--parallax-y, 0px)) scale(1.15);
}
.gallery-item:hover img{ transform: translateY(var(--parallax-y, 0px)) scale(1.24); }
.gallery-item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(15,12,20,.75), rgba(15,12,20,0) 55%);
}
.gallery-item span{
  position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-weight:700;
  font-family: var(--font-head); font-size:.95rem;
}

/* -------- Tables -------- */
.table-wrap{ overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--line); }
table{ width:100%; border-collapse:collapse; min-width:520px; background:var(--paper-alt); }
th,td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; }
thead th{ background: var(--teal); color:#fff; font-family: var(--font-head); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: var(--hover-tint); }

/* -------- Tabs -------- */
.tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:22px; -webkit-overflow-scrolling:touch; }
.tab-btn{
  flex:0 0 auto; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--paper-alt);
  font-weight:700; font-size:.85rem; color: var(--muted); cursor:pointer;
}
.tab-btn.active{ background: var(--teal); border-color: var(--teal); color:#fff; }
.tab-media{ width:100%; height:200px; border-radius: var(--radius-lg); overflow:hidden; margin-bottom:20px; box-shadow: var(--shadow-sm); }
.tab-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation: fadeIn .35s ease; }

/* -------- Timeline (festivals) -------- */
.timeline{ position:relative; padding-left:26px; border-left:3px solid var(--line); display:flex; flex-direction:column; gap:26px; }
.timeline-item{ position:relative; }
.timeline-item::before{
  content:''; position:absolute; left:-33px; top:2px; width:14px; height:14px; border-radius:50%;
  background: var(--coral); border:3px solid #fff; box-shadow:0 0 0 2px var(--coral);
}
.timeline-item .month{ font-weight:700; color: var(--coral); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
.timeline-media{
  width:100%; max-width:420px; height:170px; border-radius: var(--radius-md); overflow:hidden;
  margin: 10px 0 12px; box-shadow: var(--shadow-sm);
}
.timeline-media img{ width:100%; height:100%; object-fit:cover; }

/* -------- Fun fact / stat strip -------- */
.strip{ position:relative; overflow:hidden; background: var(--ink-fixed); color:#fff; border-radius: var(--radius-lg); padding:32px 20px; display:grid; gap:22px; grid-template-columns:1fr; }
.strip > .fact{ position:relative; z-index:1; }
.strip .fact b{ display:block; font-family: var(--font-head); font-size:1.9rem; color: var(--gold); }
.strip .fact span{ font-size:.85rem; color: rgba(255,255,255,.75); }

/* -------- CTA banner -------- */
.cta-banner{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg); padding: 40px 24px; text-align:center;
  background: linear-gradient(135deg, var(--coral), var(--gold-dark));
  color:#fff;
}
/* Keep real content above the floating 3D accent (z-index:0, see
   .cta-3d-canvas above) without needing position on each child by hand. */
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ color:#fff; }
.cta-banner p{ color: rgba(255,255,255,.9); max-width:520px; margin-left:auto; margin-right:auto; }

/* -------- Forms -------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:13px 14px; border-radius: var(--radius-sm); border:1.5px solid var(--line);
  font-family: var(--font-body); font-size:1rem; background:var(--paper-alt); color: var(--ink);
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--teal); }

/* -------- Footer -------- */
.site-footer{ background: var(--ink-fixed); color: rgba(255,255,255,.75); padding: 48px 0 96px; border-top:1px solid rgba(255,255,255,.08); }
.site-footer h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-grid{ display:grid; gap:32px; grid-template-columns: 1fr; margin-bottom:32px; }
.footer-grid a{ display:block; padding:6px 0; font-size:.9rem; color: rgba(255,255,255,.65); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; font-size:.8rem; text-align:center; color: rgba(255,255,255,.5); }

/* -------- Utility -------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.badge-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.note-box{ background:var(--note-bg); border:1px solid var(--note-border); border-radius: var(--radius-md); padding:16px 18px; font-size:.88rem; color:var(--note-ink); }
.note-box b{ color:var(--note-ink-strong); }

@keyframes fadeIn{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }
/* Sections tip up out of a slight 3D fold as they enter (perspective +
   rotateX) instead of a flat fade/slide -- same .reveal/.in classes
   main.js already toggles via IntersectionObserver, just a richer motion. */
.reveal{
  opacity:0; transform: perspective(1000px) translateY(26px) rotateX(-8deg);
  transform-origin: 50% 100%;
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.in{ opacity:1; transform:none; }

/* Staggered cascade: when several .reveal siblings enter the viewport in
   the same tick (a grid of cards, a row of facts), each one's CSS
   transition-delay is offset by its position so they cascade in one
   after another instead of all fading in at once. */
.grid .reveal:nth-child(2), .strip .fact:nth-of-type(2), .gallery-grid .reveal:nth-child(2){ transition-delay: .08s; }
.grid .reveal:nth-child(3), .strip .fact:nth-of-type(3), .gallery-grid .reveal:nth-child(3){ transition-delay: .16s; }
.grid .reveal:nth-child(4), .strip .fact:nth-of-type(4), .gallery-grid .reveal:nth-child(4){ transition-delay: .24s; }
.grid .reveal:nth-child(5){ transition-delay: .32s; }
.grid .reveal:nth-child(6){ transition-delay: .4s; }
.grid .reveal:nth-child(7){ transition-delay: .48s; }
.grid .reveal:nth-child(8){ transition-delay: .56s; }

/* Scroll-aware header: a subtle shadow appears once the page scrolls
   away from the very top, giving the sticky header a sense of depth
   without changing its size (avoids layout jank on scroll). */
.site-header.scrolled{ box-shadow: var(--shadow-sm); }

/* Respect the phone's accessibility setting: cut all decorative motion
   (scroll reveals, hover lifts, the wa-float pulse, gallery zooms) down
   to an instant, functional state instead of animating it. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ===========================================================
   Breakpoints
   =========================================================== */
@media (min-width: 640px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .hero-stats{ grid-template-columns: repeat(4,1fr); }
  .gallery-grid{ grid-template-columns: repeat(4,1fr); }
}

@media (min-width: 900px){
  :root{ --header-h: 76px; }
  .hide-mobile{ display:initial; }

  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
  .footer-grid{ grid-template-columns: repeat(4,1fr); }
  section{ padding: 88px 0; }
  .hero{ padding: 110px 0 120px; }
  .strip{ grid-template-columns: repeat(4,1fr); }
}

/* The full horizontal nav (brand + 8 links + CTA) needs ~1150px to fit
   without wrapping or clipping -- verified by measuring its natural width.
   Below this, the hamburger + bottom-nav (already fully responsive down
   to phone widths) is used instead, all the way up through tablets. */
@media (min-width: 1150px){
  .nav-toggle, .bottom-nav{ display:none; }
  .main-nav{
    position:static; right:auto; top:auto; bottom:auto; width:auto; background:transparent; padding:0; overflow:visible;
  }
  .main-nav ul{ flex-direction:row; align-items:center; gap:2px; flex-wrap:nowrap; }
  .main-nav a{ border-bottom:none; padding:9px 12px; font-size:.88rem; border-radius:999px; white-space:nowrap; }
  .main-nav a:hover, .main-nav a.active{ background:var(--chip-bg); color: var(--ink); }
  .main-nav .nav-cta{ margin-top:0; margin-left:6px; flex:0 0 auto; }
  .main-nav .nav-cta .btn{ padding:9px 16px; font-size:.88rem; white-space:nowrap; }
  .wa-float{ bottom:24px; }
}

@media (min-width: 1280px){
  .hero h1{ max-width:760px; }
}

/* ===========================================================
   Click-to-expand detail modal (used across content cards)
   =========================================================== */
.card-expandable{ cursor:pointer; }
.card-expandable:hover{ box-shadow: var(--shadow-md); }
.card-expandable:focus-visible{ outline:3px solid var(--coral); outline-offset:2px; }
.card-expandable .expand-hint{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-size:.76rem; font-weight:700; color: var(--teal);
}
.card-expandable .expand-hint svg{ width:14px; height:14px; }

body.modal-open{ overflow:hidden; }
.detail-modal{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:flex-end; justify-content:center;
}
.detail-modal.open{ display:flex; }
.detail-modal-backdrop{ position:absolute; inset:0; background:rgba(22,18,31,.62); backdrop-filter: blur(2px); }
.detail-modal-panel{
  position:relative; z-index:2; background:var(--paper-alt); width:100%; max-width:640px;
  max-height:88vh; overflow-y:auto; border-radius: 26px 26px 0 0; padding-bottom:28px;
  animation: modalSlideUp .3s ease;
}
@keyframes modalSlideUp{ from{ transform:translateY(40px); opacity:.3;} to{ transform:none; opacity:1;} }
.detail-modal-close{
  position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%;
  background:rgba(22,18,31,.55); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1; cursor:pointer; backdrop-filter: blur(4px);
}
.modal-share-btn{
  position:absolute; top:14px; right:60px; z-index:3; width:38px; height:38px; border-radius:50%;
  background:rgba(22,18,31,.55); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1; cursor:pointer; backdrop-filter: blur(4px); padding:0;
}
.modal-share-btn:hover{ background:rgba(22,18,31,.75); }
.detail-modal-media{ width:100%; aspect-ratio:16/10; background:var(--ink-fixed); border-radius:26px 26px 0 0; overflow:hidden; }
.detail-modal-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-modal-body{ padding:22px 24px 4px; }
.detail-modal-body h3{ font-family: var(--font-head); font-size:1.5rem; margin-bottom:.3em; }
.detail-modal-body .chip-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.detail-modal-body p{ color: var(--ink-soft); }
.detail-modal-body .tip-box{ background:var(--chip-bg); border-radius: var(--radius-sm); padding:12px 14px; font-size:.88rem; color:var(--ink-soft); margin-top:10px; }
.detail-modal-body .tip-box b{ color: var(--ink); }
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius: var(--radius-md); overflow:hidden; margin:16px 0; background:#000; }
.video-embed iframe{ width:100%; height:100%; border:0; display:block; }

/* Tap-to-load video facade: shows a thumbnail + play button and only
   fetches YouTube's player (heavy) once someone actually wants to watch,
   instead of loading it for every visitor by default. */
.lite-embed{ cursor:pointer; }
.lite-embed img{ width:100%; height:100%; object-fit:cover; display:block; }
.lite-embed-play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  background: rgba(22,18,31,.55); backdrop-filter: blur(2px); border:2px solid rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.lite-embed-play svg{ width:26px; height:26px; fill:#fff; margin-left:3px; }
.lite-embed.loaded .lite-embed-play, .lite-embed.loaded img{ display:none; }

@media (min-width:640px){
  .detail-modal{ align-items:center; padding:20px; }
  .detail-modal-panel{ border-radius: var(--radius-lg); max-height:82vh; }
  .detail-modal-media{ border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ===========================================================
   Video background (home hero)
   =========================================================== */
.video-hero{ position:relative; overflow:hidden; }
/* Fast, reliable static photo -- shown immediately, and stays as the only
   background on phones (no video fetched at all there). On tablet/desktop,
   main.js injects the video iframe on top of this once the page is ready,
   so larger screens still get the motion but nothing is lost if JS or the
   video fails to load. */
.video-hero-fallback{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
.video-hero-bg{
  position:absolute; top:50%; left:50%; z-index:0;
  width:177.78vh; min-width:100%; height:56.25vw; min-height:100%;
  transform:translate(-50%,-50%); pointer-events:none; border:0;
}
.video-hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(160deg, rgba(11,79,108,.85), rgba(11,79,108,.55) 55%, rgba(200,129,31,.7));
}
.video-hero .container{ position:relative; z-index:2; }

/* ===========================================================
   Decorative "sticker" words (light background typography accent)
   =========================================================== */
.sticker-word{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family: var(--font-head); font-style:italic; font-weight:700;
  color: var(--ink); opacity:.05; white-space:nowrap; line-height:1;
  font-size: clamp(2.6rem, 12vw, 6.5rem); letter-spacing:-0.01em;
}

/* ===========================================================
   GIF gallery cards
   =========================================================== */
.gif-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio:4/3;
  box-shadow: var(--shadow-sm); background:var(--ink-fixed);
}
.gif-card iframe{ width:100%; height:100%; border:0; display:block; }
.gif-card .gif-label{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:10px 14px;
  background: linear-gradient(to top, rgba(15,12,20,.85), transparent);
  color:#fff; font-family: var(--font-head); font-weight:700; font-size:.95rem; pointer-events:none;
}

/* ===========================================================
   Swipeable carousel (phone: swipe through one large item at a
   time with a peek of the next; tablet/desktop: reverts to a
   plain grid showing everything at once, no scroll needed)
   =========================================================== */
.carousel{ position:relative; }
.carousel-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track > *{ flex:0 0 80%; scroll-snap-align:start; }
.carousel-arrow{
  display:flex; position:absolute; top:50%; margin-top:-19px; z-index:3;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(22,18,31,.55); backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
.carousel-arrow svg{ width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.carousel-arrow-prev{ left:-8px; }
.carousel-arrow-next{ right:-8px; }
.carousel-dots{ display:flex; justify-content:center; gap:7px; margin-top:14px; }
.carousel-dot{
  width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background: var(--line); transition: background .2s ease, transform .2s ease;
}
.carousel-dot.active{ background: var(--coral); transform:scale(1.25); }

@media (min-width:480px){
  .carousel-track > *{ flex-basis:58%; }
}
@media (min-width:640px){
  .carousel-track{ display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; scroll-snap-type:none; }
  .carousel-track > *{ flex-basis:auto; }
  .carousel-arrow, .carousel-dots{ display:none; }
}

/* ===========================================================
   Interactive attractions map (Leaflet)
   =========================================================== */
.map-container{
  position:relative; height:320px; border-radius: var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--line);
  background: var(--paper-alt);
}
.map-container .leaflet-container{ width:100%; height:100%; font-family: var(--font-body); }
.map-pin span{
  display:block; width:16px; height:16px; border-radius:50% 50% 50% 0;
  transform: rotate(-45deg); border:2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.map-popup{ display:flex; flex-direction:column; gap:4px; min-width:150px; }
.map-popup b{ font-family: var(--font-head); font-size:.95rem; color: var(--ink-fixed); }
.map-popup span{ font-size:.72rem; color: var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.map-popup-btn{
  margin-top:6px; padding:6px 12px; border-radius:999px; border:none; cursor:pointer;
  background: var(--coral); color:#fff; font-weight:700; font-size:.78rem; align-self:flex-start;
}
.map-activate-overlay{
  position:absolute; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background: rgba(22,18,31,.35); backdrop-filter: blur(1px); cursor:pointer;
}
.map-activate-overlay span{
  background:rgba(22,18,31,.75); color:#fff; padding:10px 18px; border-radius:999px;
  font-family: var(--font-head); font-weight:700; font-size:.9rem;
}

@media (min-width:640px){
  .map-container{ height:420px; }
}

/* ===========================================================
   Explorer checklist celebration effects
   =========================================================== */
.confetti-piece{
  position:fixed; z-index:9999; pointer-events:none; border-radius:2px;
  animation: confettiBurst .8s ease-out forwards;
}
@keyframes confettiBurst{
  0%{ transform: translate(0,0) rotate(0deg); opacity:1; }
  100%{ transform: var(--confetti-end) rotate(var(--confetti-spin)); opacity:0; }
}
.milestone-toast{
  position:fixed; left:50%; top:18%; z-index:9999; transform: translate(-50%,-12px);
  background: var(--ink-fixed); color:#fff; padding:12px 22px; border-radius:999px;
  font-family: var(--font-head); font-weight:700; font-size:.95rem;
  box-shadow: var(--shadow-lg); opacity:0; pointer-events:none;
  animation: milestonePop 2.2s ease forwards;
}
@keyframes milestonePop{
  0%{ opacity:0; transform: translate(-50%,-12px) scale(.85); }
  15%{ opacity:1; transform: translate(-50%,0) scale(1); }
  80%{ opacity:1; transform: translate(-50%,0) scale(1); }
  100%{ opacity:0; transform: translate(-50%,-12px) scale(.95); }
}
@media (prefers-reduced-motion: reduce){
  .confetti-piece{ display:none; }
  .milestone-toast{ animation-duration: 1.4s; }
}