/* ==========================================================
   SERENDIB — Premium Sri Lanka Tourism Homepage
   ========================================================== */

:root,
[data-theme="light"] {
  /* Vertical rhythm is deliberately NOT tied to viewport height: 100vh
     differs on every machine (resolution, Windows display scaling, browser
     chrome), which made the same page look differently spaced PC to PC.
     Full-screen elements still use vh; spacing uses px or a tight clamp. */
  --dcard-h: clamp(440px, 56vh, 510px);
  --bg: #f7f4ee;
  --bg-soft: #ede8dc;
  --bg-card: #ffffff;
  --ink: #161714;
  --ink-dim: #3f4039;
  --muted: #74736a;
  --gold: #b38426;
  --gold-soft: #916819;
  --green: #2c4a30;
  --line: rgba(22, 23, 20, 0.11);
  --line-strong: rgba(22, 23, 20, 0.22);
  --nav-bg: rgba(247, 244, 238, 0.10);
  --card-shadow: 0 20px 50px -15px rgba(22, 23, 20, 0.08);
  --card-fade: rgba(255, 255, 255, 0.6);
  --theme-toggle-bg: rgba(22, 23, 20, 0.06);
  --theme-toggle-border: rgba(22, 23, 20, 0.14);
  --theme-toggle-ink: #161714;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0b0c0a;
  --bg-soft: #141613;
  --bg-card: #141613;
  --ink: #f4efe4;
  --ink-dim: #b8b2a3;
  --muted: #7d7768;
  --gold: #c9a24d;
  --gold-soft: #e4c988;
  --green: #3f5942;
  --line: rgba(244, 239, 228, 0.12);
  --line-strong: rgba(244, 239, 228, 0.22);
  --nav-bg: rgba(11, 12, 10, 0.12);
  --card-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7);
  --card-fade: rgba(20, 22, 19, 0.6);
  --theme-toggle-bg: rgba(244, 239, 228, 0.08);
  --theme-toggle-border: rgba(244, 239, 228, 0.16);
  --theme-toggle-ink: #f4efe4;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  color-scheme: dark;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  overflow-x:hidden;
  cursor:none;
}

/* Smooth transition when switching themes */
body, .nav, .nav.is-scrolled, .mobile-menu, .marquee, .intro, .pillar, .destinations, .dcard__inner, .stats, .experience, .exp-panel, .testimonials, .testi, .footer {
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-0.01em;}
em{font-style:italic;color:var(--gold-soft);}
.eyebrow{
  font-size:0.72rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:18px;display:block;
}
.eyebrow--light{color:var(--gold-soft);}
::selection{background:var(--gold);color:#0b0c0a;}

@media (pointer:coarse){ body{cursor:auto;} }

/* ---------- Custom cursor ---------- */
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;transform:translate(-50%,-50%);
}
.cursor{width:6px;height:6px;background:var(--gold-soft);}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(201,162,77,0.55);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s;}
.cursor-ring.is-active{width:64px;height:64px;background:rgba(201,162,77,0.08);border-color:var(--gold-soft);}

[data-theme="light"] .cursor{background:var(--gold);}
[data-theme="light"] .cursor-ring{border-color:rgba(179,132,38,0.55);}
[data-theme="light"] .cursor-ring.is-active{background:rgba(179,132,38,0.12);border-color:var(--gold);}

@media (pointer:coarse){ .cursor,.cursor-ring{display:none;} }

/* ---------- Preloader (Vistra Tours Flight Launch) ---------- */
.preloader{
  position:fixed;inset:0;z-index:10000;
  background:radial-gradient(circle at 50% 48%, #161813 0%, #0d0e0c 60%, #050604 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;
  transition:opacity .65s cubic-bezier(0.25,1,0.5,1), visibility .65s cubic-bezier(0.25,1,0.5,1);
}

[data-theme="light"] .preloader{
  background:radial-gradient(circle at 50% 48%, #ffffff 0%, #f6f2e9 55%, #eae3d3 100%);
}

.preloader__stage{
  display:flex;flex-direction:column;align-items:center;gap:38px;
  width:100%;max-width:520px;
}
.preloader__brand-card{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  width:100%;
}
.preloader__logo-wrap{
  position:relative;width:min(480px,88vw);
  aspect-ratio:538/154;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,0.35));
}
[data-theme="light"] .preloader__logo-wrap{
  filter:drop-shadow(0 12px 26px rgba(13,40,85,0.09));
}

.preloader__logo-base{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  will-change:opacity,filter,transform;
}

/* Dark / Light switching for Preloader Logo */
.preloader__logo-base--dark,
.preloader__plane-img--dark{display:block;}
.preloader__logo-base--light,
.preloader__plane-img--light{display:none;}

[data-theme="light"] .preloader__logo-base--dark,
[data-theme="light"] .preloader__plane-img--dark{display:none;}
[data-theme="light"] .preloader__logo-base--light,
[data-theme="light"] .preloader__plane-img--light{display:block;}

/* Flight airplane in preloader with altitude depth */
.preloader__plane-flight{
  position:absolute;
  left:37.17%;top:8.44%;width:7.2%;height:20.5%;
  pointer-events:none;transform-origin:center center;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.38));
  will-change:left,top,transform;
}
[data-theme="light"] .preloader__plane-flight{
  filter:drop-shadow(0 3px 8px rgba(13,40,85,0.28));
}
.preloader__plane-img{width:100%;height:100%;object-fit:contain;}

/* Realistic engine vapor stream behind aircraft */
.preloader__vapor-stream{
  position:absolute;top:52%;right:88%;
  width:28px;height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, transparent 0%, rgba(201,162,77,0.4) 35%, rgba(255,255,255,0.9) 85%, #ffffff 100%);
  filter:blur(0.5px);
  opacity:0.85;
  transform:translateY(-50%);
  transition:opacity 0.35s ease;
  animation:vaporPulse 1.1s ease-in-out infinite alternate;
}
[data-theme="light"] .preloader__vapor-stream{
  background:linear-gradient(90deg, transparent 0%, rgba(201,162,77,0.18) 35%, rgba(201,162,77,0.55) 75%, rgba(255,255,255,0.92) 100%);
}
@keyframes vaporPulse{
  0%{width:16px;opacity:0.55;}
  100%{width:32px;opacity:1;}
}

/* Ruby diamond 4-point star lens flare */
.preloader__glint{
  position:absolute;left:14.893%;top:23.4%;width:22px;height:22px;
  transform:translate(-50%,-50%) scale(0.3);
  pointer-events:none;
  background:radial-gradient(circle, #ffffff 15%, #ffd166 45%, #e63946 75%, transparent 100%);
  clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  opacity:0;
  transition:transform 0.45s cubic-bezier(0.18,0.89,0.32,1.28), opacity 0.45s ease;
}

.preloader__status{width:min(340px,78vw);display:flex;flex-direction:column;gap:14px;}
.preloader__bar{
  width:100%;height:2px;background:rgba(201,162,77,0.2);
  position:relative;overflow:hidden;border-radius:2px;
}
[data-theme="light"] .preloader__bar{
  background:rgba(13,40,85,0.12);
}
.preloader__bar span{
  position:absolute;left:0;top:0;height:100%;width:0%;
  background:linear-gradient(90deg, #c9a24d 0%, #e63946 70%, #ff5252 100%);
  border-radius:2px;
  box-shadow:0 0 10px rgba(230,57,70,0.5);
}
[data-theme="light"] .preloader__bar span{
  background:linear-gradient(90deg, #b38426 0%, #0d2855 60%, #c92e29 100%);
  box-shadow:0 0 8px rgba(13,40,85,0.3);
}
.preloader__pct-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.72rem;letter-spacing:0.18em;
}
.preloader__callsign{color:var(--gold-soft);font-size:0.68rem;letter-spacing:0.22em;font-weight:600;}
[data-theme="light"] .preloader__callsign{color:#7a6229;}
.preloader__pct-box{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;}
[data-theme="light"] .preloader__pct-box{color:#161714;}

.preloader.is-done{
  opacity:0 !important;visibility:hidden !important;pointer-events:none;
  transition:opacity .65s cubic-bezier(0.25,1,0.5,1), visibility .65s cubic-bezier(0.25,1,0.5,1);
}

/* Supersonic Departure animation when preloader completes */
.preloader.is-done .preloader__plane-flight{
  transform:translate(320px,-110px) scale(1.6) rotate(-16deg) !important;
  opacity:0 !important;
  transition:transform 0.9s cubic-bezier(0.16,1,0.3,1), opacity 0.75s ease-out !important;
}

/* ==========================================================
   VISTRA TOURS BRAND LOGO & HOVER FLIGHT ANIMATION
   ========================================================== */
.vistra-brand{
  display:inline-flex;align-items:center;text-decoration:none;position:relative;
}
.vistra-logo{
  position:relative;display:inline-block;
  width:238px;height:68px;user-select:none;
}
.vistra-logo--mobile{width:224px;height:64px;margin-bottom:14px;}
.vistra-logo--footer{width:252px;height:72px;margin-bottom:10px;}

.vistra-logo__wrap{position:relative;width:100%;height:100%;}
.vistra-logo__base{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity .3s ease;
}

/* Preserve the wordmark and aircraft; overlay the reference tagline and ruby.
   Embed the mask so direct file previews also display the original artwork. */
.vistra-logo__base,
.preloader__logo-base{
  --vistra-wordmark-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%202152%20616%22%3E%0A%20%20%3C!--%20Keep%20the%20wordmark%20and%20aircraft%3B%20omit%20the%20old%20solid%20ruby%20and%20tagline.%20--%3E%0A%20%20%3Cpath%20fill%3D%22white%22%20fill-rule%3D%22evenodd%22%20d%3D%22M0%200H2152V485H0Z%20M338%2094%20395%20166%20338%20237%20282%20166Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  -webkit-mask:var(--vistra-wordmark-mask) center / contain no-repeat;
  mask:var(--vistra-wordmark-mask) center / contain no-repeat;
}
.vistra-logo__wrap::after,
.preloader__logo-wrap::after{
  content:"";
  position:absolute;inset:0;
  background:url("../assets/img/vistra-brand-details.svg?v=59a9de79") center / contain no-repeat;
  pointer-events:none;
}

/* Light / Dark switching for logo */
.vistra-logo__base--dark{display:block;}
.vistra-logo__base--light{display:none;}

[data-theme="light"] .vistra-logo__base--dark{display:none;}
[data-theme="light"] .vistra-logo__base--light{display:block;}

/* When at top of page over dark cinema hero, use white logo for both themes */
[data-theme="light"] .nav:not(.is-scrolled) .vistra-logo__base--dark{display:block;}
[data-theme="light"] .nav:not(.is-scrolled) .vistra-logo__base--light{display:none;}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 5%;transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding:10px 5%;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(26px) saturate(165%);
  backdrop-filter:blur(26px) saturate(165%);
  border-color:var(--line);
}

/* When at top over the hero, keep crisp contrast over the dark photo */
.nav:not(.is-scrolled) .nav__logo{color:#fdf1e1;text-shadow:0 2px 14px rgba(0,0,0,0.7);}
.nav:not(.is-scrolled) .nav__links > a,
.nav:not(.is-scrolled) .nav__group > a{color:#d5cfc2;text-shadow:0 2px 14px rgba(0,0,0,0.7);}
.nav:not(.is-scrolled) .nav__links > a:hover,
.nav:not(.is-scrolled) .nav__group > a:hover{color:#ffffff;}
.nav:not(.is-scrolled) .nav__cta{color:#fdf1e1;border-color:rgba(244,239,228,0.22);text-shadow:0 2px 14px rgba(0,0,0,0.7);}
.nav:not(.is-scrolled) .nav__burger span{background:#fdf1e1;}
.nav:not(.is-scrolled) .theme-toggle{
  background:rgba(11,12,10,0.45);
  backdrop-filter:blur(8px);
  border-color:rgba(244,239,228,0.22);
  color:#fdf1e1;
}

.nav__logo{font-family:var(--serif);font-size:1.35rem;letter-spacing:0.02em;color:var(--ink);transition:color .3s;}
.nav__logo span{color:var(--gold);}
.nav__links{display:flex;gap:40px;}
.nav__links > a,
.nav__group > a{position:relative;font-size:0.85rem;letter-spacing:0.02em;color:var(--ink-dim);transition:color .3s;}
.nav__links > a::after,
.nav__group > a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease);}
.nav__links > a:hover,
.nav__group > a:hover{color:var(--ink);}
.nav__links > a:hover::after,
.nav__group > a:hover::after{width:100%;}

/* ---------- Nav Dropdown Menu System ---------- */
.nav__group{ position:relative; }
.nav__group-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.85rem; color:var(--ink-dim); transition:color .3s;
}
.nav__caret{
  width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .3s var(--ease); opacity:.7;
}
.nav__group:hover .nav__caret{ transform:rotate(225deg) translate(-2px,-2px); }

.nav__group{
  position:relative;
  perspective:1400px;
}
.nav__group::after{
  content:''; position:absolute; top:100%; left:-16px; right:-16px; height:24px;
}

/* Rolled Parchment Container */
.nav__dropdown{
  position:absolute; top:calc(100% + 12px); left:50%;
  transform-origin:top center;
  transform-style:preserve-3d;
  min-width:390px; padding:10px 10px 8px; border-radius:16px;
  background:#131612; /* Deep obsidian luxury dark */
  border:1px solid rgba(201,162,77,0.28);
  box-shadow:0 30px 70px -15px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(-50%) rotateX(-75deg) scaleY(0.2) translateY(-14px);
  transition:opacity .28s ease, transform .28s cubic-bezier(0.4, 0, 0.2, 1), visibility .28s;
  z-index:950;
  overflow:hidden;
}

/* Rolled Scroll Spindle (curled top rod ornament) */
.nav__dropdown::before{
  content:''; position:absolute; top:0; left:16px; right:16px; height:3px;
  background:linear-gradient(90deg, rgba(201,162,77,0.1) 0%, rgba(201,162,77,0.85) 35%, rgba(255,245,215,0.95) 50%, rgba(201,162,77,0.85) 65%, rgba(201,162,77,0.1) 100%);
  border-radius:2px;
  box-shadow:0 1px 8px rgba(201,162,77,0.35);
  z-index:3;
}

/* Unrolling Parchment Sheen */
.nav__dropdown::after{
  content:''; position:absolute; inset:0; border-radius:16px;
  background:linear-gradient(180deg, rgba(201,162,77,0.08) 0%, rgba(201,162,77,0.02) 20%, transparent 40%);
  pointer-events:none; z-index:1;
}

/* Rolled Page Unfolding Animation on Hover */
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown,
.nav__dropdown.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  animation:rollParchmentUnfold 0.48s cubic-bezier(0.16, 1.18, 0.32, 1) forwards;
}

@keyframes rollParchmentUnfold{
  0%{
    opacity:0;
    transform:translateX(-50%) rotateX(-75deg) scaleY(0.2) translateY(-14px);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  55%{
    opacity:0.95;
    transform:translateX(-50%) rotateX(12deg) scaleY(1.04) translateY(2px);
  }
  78%{
    transform:translateX(-50%) rotateX(-5deg) scaleY(0.985) translateY(-1px);
  }
  90%{
    transform:translateX(-50%) rotateX(2deg) scaleY(1.008);
  }
  100%{
    opacity:1;
    transform:translateX(-50%) rotateX(0deg) scaleY(1) translateY(0);
    box-shadow:0 30px 70px -15px rgba(0,0,0,0.78), 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.08);
  }
}

/* Light Theme Rolled Parchment Dropdown */
[data-theme="light"] .nav__dropdown{
  background:#fdfcf9 !important;
  border:1px solid rgba(179,132,38,0.26) !important;
  box-shadow:0 24px 60px -12px rgba(22,23,20,0.16), 0 4px 18px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
[data-theme="light"] .nav__dropdown::before{
  background:linear-gradient(90deg, rgba(179,132,38,0.1) 0%, rgba(179,132,38,0.8) 35%, rgba(255,230,160,0.95) 50%, rgba(179,132,38,0.8) 65%, rgba(179,132,38,0.1) 100%);
  box-shadow:0 1px 8px rgba(179,132,38,0.25);
}
[data-theme="light"] .nav__dropdown::after{
  background:linear-gradient(180deg, rgba(179,132,38,0.06) 0%, rgba(179,132,38,0.01) 20%, transparent 40%) !important;
}

/* Dropdown Header Banner */
.nav__drop-header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 8px 8px; border-bottom:1px solid rgba(244,239,228,0.08);
  margin-bottom:6px;
}
[data-theme="light"] .nav__drop-header{
  border-bottom:1px solid rgba(22,23,20,0.08);
}
.nav__drop-header-tag{
  font-family:var(--sans); font-size:0.68rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:6px;
}
.nav__drop-header-tag::before{
  content:'✦'; font-size:0.65rem; color:var(--gold); opacity:0.85;
}
.nav__drop-header-badge{
  font-family:var(--sans); font-size:0.68rem; font-weight:600;
  padding:2px 8px; border-radius:100px;
  background:rgba(201,162,77,0.12); color:var(--gold);
  border:1px solid rgba(201,162,77,0.2);
}
[data-theme="light"] .nav__drop-header-badge{
  background:rgba(179,132,38,0.1); color:#b38426;
  border-color:rgba(179,132,38,0.2);
}

/* Dropdown Items List */
.nav__drop-list{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:4px;
}

/* Rich Dropdown Item Card */
.nav .nav__dropdown .nav__drop-item,
.nav:not(.is-scrolled) .nav__dropdown .nav__drop-item{
  display:flex !important; align-items:center; gap:12px;
  padding:7px 8px !important; border-radius:10px;
  background:transparent !important;
  border:1px solid transparent;
  text-decoration:none;
  transition:background .22s ease, border-color .22s ease, transform .22s var(--ease);
  position:relative;
}
.nav .nav__dropdown .nav__drop-item::after,
.nav:not(.is-scrolled) .nav__dropdown .nav__drop-item::after{
  display:none !important;
}

/* Cascading Unroll Item Reveal */
.nav__group:hover .nav__drop-item{
  animation:rollItemReveal 0.38s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.nav__drop-item:nth-child(1){ animation-delay:0.04s; }
.nav__drop-item:nth-child(2){ animation-delay:0.08s; }
.nav__drop-item:nth-child(3){ animation-delay:0.12s; }
.nav__drop-item:nth-child(4){ animation-delay:0.16s; }
.nav__drop-item:nth-child(5){ animation-delay:0.20s; }

@keyframes rollItemReveal{
  0%{
    opacity:0;
    transform:translateY(-8px) rotateX(-16deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) rotateX(0deg);
  }
}

/* Thumbnail Wrap */
.nav__drop-thumb-wrap{
  position:relative; flex-shrink:0;
  width:64px; height:46px; border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(201,162,77,0.25);
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
  background:#0c0d0b;
}
[data-theme="light"] .nav__drop-thumb-wrap{
  border-color:rgba(179,132,38,0.22);
  box-shadow:0 2px 6px rgba(22,23,20,0.1);
  background:#f0ede5;
}
.nav__drop-thumb{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1);
  transition:transform .35s var(--ease), filter .35s var(--ease);
}
.nav__drop-thumb-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4) 100%);
  pointer-events:none;
}
.nav__drop-item:hover .nav__drop-thumb{
  transform:scale(1.1);
}

/* Info Column */
.nav__drop-info{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.nav__drop-title-row{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.nav__drop-title{
  font-family:var(--sans); font-size:0.87rem; font-weight:600;
  letter-spacing:0.01em; line-height:1.25;
  color:#f4efe4 !important; /* Page font color in dark mode */
  transition:color .2s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav__drop-arrow{
  font-size:0.85rem; line-height:1; color:var(--gold);
  opacity:0; transform:translateX(-4px);
  transition:opacity .22s ease, transform .22s var(--ease);
}
.nav__drop-sub{
  font-family:var(--sans); font-size:0.73rem; font-weight:400;
  color:#a59f91; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .2s ease;
}

/* Hover States in Dark Mode */
.nav .nav__dropdown .nav__drop-item:hover,
.nav:not(.is-scrolled) .nav__dropdown .nav__drop-item:hover{
  background:rgba(201,162,77,0.11) !important;
  border-color:rgba(201,162,77,0.3) !important;
  transform:translateX(3px);
  padding-left:11px !important;
}
.nav__drop-item:hover .nav__drop-title{
  color:#ffffff !important;
}
.nav__drop-item:hover .nav__drop-arrow{
  opacity:1; transform:translateX(0);
}
.nav__drop-item:hover .nav__drop-sub{
  color:#d4cebe;
}

/* Current Item State in Dark Mode */
.nav .nav__dropdown .nav__drop-item.is-current,
.nav:not(.is-scrolled) .nav__dropdown .nav__drop-item.is-current{
  background:rgba(201,162,77,0.14) !important;
  border-color:rgba(201,162,77,0.45) !important;
}
.nav__drop-item.is-current .nav__drop-title{
  color:var(--gold) !important; font-weight:700;
}
.nav__drop-item.is-current .nav__drop-arrow{
  opacity:1; transform:translateX(0);
}

/* Light Theme Styling — MATCHING PAGE FONT COLOR (#161714) */
[data-theme="light"] .nav .nav__dropdown .nav__drop-title,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown .nav__drop-title{
  color:#161714 !important; /* Authentic Page Ink Color — NOT #0d2855! */
}
[data-theme="light"] .nav .nav__dropdown .nav__drop-sub,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown .nav__drop-sub{
  color:#6b675e !important;
}
[data-theme="light"] .nav .nav__dropdown .nav__drop-item:hover,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown .nav__drop-item:hover{
  background:rgba(179,132,38,0.08) !important;
  border-color:rgba(179,132,38,0.28) !important;
  transform:translateX(3px);
}
[data-theme="light"] .nav__drop-item:hover .nav__drop-title{
  color:#b38426 !important;
}
[data-theme="light"] .nav__drop-item:hover .nav__drop-arrow{
  opacity:1; transform:translateX(0); color:#b38426;
}
[data-theme="light"] .nav__drop-item:hover .nav__drop-sub{
  color:#312f29 !important;
}
[data-theme="light"] .nav .nav__dropdown .nav__drop-item.is-current,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown .nav__drop-item.is-current{
  background:rgba(179,132,38,0.1) !important;
  border-color:rgba(179,132,38,0.4) !important;
}
[data-theme="light"] .nav__drop-item.is-current .nav__drop-title{
  color:#b38426 !important; font-weight:700;
}

/* Dropdown Footer */
.nav__drop-footer{
  position:relative; z-index:2;
  margin-top:6px; padding:7px 8px 3px;
  border-top:1px solid rgba(244,239,228,0.08);
}
[data-theme="light"] .nav__drop-footer{
  border-top:1px solid rgba(22,23,20,0.08);
}
.nav__drop-all{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--sans); font-size:0.77rem; font-weight:600;
  color:var(--gold) !important; text-decoration:none;
  padding:4px 6px; border-radius:6px;
  transition:background .2s ease, color .2s ease, padding-left .2s ease;
}
.nav__drop-all:hover{
  background:rgba(201,162,77,0.12);
  color:#ffffff !important;
  padding-left:10px;
}
[data-theme="light"] .nav__drop-all:hover{
  background:rgba(179,132,38,0.1);
  color:#161714 !important;
}
.nav__drop-all-arrow{
  font-size:0.85rem; transition:transform .2s ease;
}
.nav__drop-all:hover .nav__drop-all-arrow{
  transform:translateX(3px);
}

/* Fallback for simple <a> tags inside .nav__dropdown */
.nav .nav__dropdown > a,
.nav:not(.is-scrolled) .nav__dropdown > a{
  display:block; padding:10px 14px; border-radius:8px;
  font-size:0.86rem; font-weight:500;
  color:#f4efe4 !important; text-decoration:none;
  transition:background .2s, color .2s, padding-left .2s var(--ease);
}
.nav .nav__dropdown > a:hover,
.nav:not(.is-scrolled) .nav__dropdown > a:hover{
  background:rgba(201,162,77,0.16) !important;
  color:#ffffff !important; padding-left:19px;
}
[data-theme="light"] .nav .nav__dropdown > a,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown > a{
  color:#161714 !important;
}
[data-theme="light"] .nav .nav__dropdown > a:hover,
[data-theme="light"] .nav:not(.is-scrolled) .nav__dropdown > a:hover{
  background:rgba(179,132,38,0.08) !important;
  color:#b38426 !important; padding-left:19px;
}

.nav__actions{display:flex;align-items:center;gap:16px;}

/* ---------- Theme Toggle Button ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--theme-toggle-bg);border:1px solid var(--theme-toggle-border);
  border-radius:100px;padding:6px 14px 6px 8px;cursor:pointer;
  color:var(--theme-toggle-ink);font-family:var(--sans);font-size:0.78rem;font-weight:500;letter-spacing:0.03em;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
  user-select:none;
}
.theme-toggle:hover{border-color:var(--gold);background:rgba(201,162,77,0.12);}

.theme-toggle__track{
  width:32px;height:20px;border-radius:20px;
  background:rgba(125,119,104,0.28);position:relative;
  transition:background-color .35s var(--ease);
}
[data-theme="light"] .theme-toggle__track{background:rgba(179,132,38,0.25);}

.theme-toggle__thumb{
  position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--gold);display:flex;align-items:center;justify-content:center;
  color:#0b0c0a;transition:transform .35s cubic-bezier(0.175,0.885,0.32,1.275),background-color .3s;
}
[data-theme="light"] .theme-toggle__thumb{transform:translateX(12px);background:var(--gold);color:#ffffff;}

.theme-icon{position:absolute;inset:0;margin:auto;transition:opacity .25s ease,transform .35s var(--ease);}
.theme-icon--sun{opacity:0;transform:rotate(-90deg) scale(0.6);}
.theme-icon--moon{opacity:1;transform:rotate(0deg) scale(1);}

[data-theme="light"] .theme-icon--sun{opacity:1;transform:rotate(0deg) scale(1);}
[data-theme="light"] .theme-icon--moon{opacity:0;transform:rotate(90deg) scale(0.6);}

.theme-toggle__text{min-width:32px;text-align:left;}

.nav__cta{
  border:1px solid var(--line);padding:11px 24px;border-radius:100px;
  font-size:0.8rem;letter-spacing:0.03em;color:var(--ink);transition:border-color .3s,background .3s;
}
.nav__cta:hover{border-color:var(--gold);background:rgba(201,162,77,0.08);}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;z-index:950;}
.nav__burger span{width:24px;height:1px;background:var(--ink);}

.mobile-menu{
  display:none;
}
@media (max-width:900px){
  .mobile-menu{
    position:fixed;inset:0;background:var(--bg);z-index:890;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:20px;padding:96px 8% 40px;overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-100%);visibility:hidden;pointer-events:none;
    transition:transform .45s var(--ease), visibility .45s;
  }
  .mobile-menu.is-open{
    transform:translateY(0);visibility:visible;pointer-events:auto;
  }
  .mobile-menu a{font-family:var(--serif);font-size:1.8rem;color:var(--ink);text-decoration:none;transition:color .2s;}
  .mobile-menu a:hover{color:var(--gold);}
  .mobile-menu__actions{display:flex;flex-direction:column;gap:18px;width:100%;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
  .theme-toggle--mobile{padding:10px 18px;font-size:0.95rem;width:max-content;}
  .mobile-menu__cta{color:var(--gold) !important;font-family:var(--sans) !important;font-size:1.1rem !important;font-weight:600;}
}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;border-radius:100px;font-size:0.82rem;letter-spacing:0.03em;
  overflow:hidden;isolation:isolate;
}
.btn span{position:relative;z-index:2;}
.btn--gold{background:var(--gold);color:#191305;font-weight:600;}
.btn--gold::before{content:'';position:absolute;inset:0;background:var(--gold-soft);transform:translateY(100%);transition:transform .4s var(--ease);z-index:1;}
.btn--gold:hover::before{transform:translateY(0);}
.btn--ghost{border:1px solid var(--line);color:var(--ink);}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-soft);}
.btn--lg{padding:19px 42px;font-size:0.88rem;}
.arrow{width:16px;height:9px;position:relative;display:inline-block;}
.arrow::before,.arrow::after{content:'';position:absolute;background:currentColor;}
.arrow::before{width:100%;height:1px;top:4px;left:0;}
.arrow::after{width:8px;height:8px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg);right:0;top:0;background:none;}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end;}
.hero__particles{position:absolute;inset:0;z-index:3;pointer-events:none;}
.hero__layers{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;perspective:1000px;}
.hero__layer{position:absolute;inset:-4%;background-size:cover;background-position:center;will-change:transform;}
.hero__gradient{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg, rgba(8,9,7,0.95) 0%, rgba(8,9,7,0.35) 45%, rgba(8,9,7,0.25) 65%, rgba(8,9,7,0.7) 100%),
    linear-gradient(90deg, rgba(8,9,7,0.55) 0%, transparent 40%);
}
.hero__content{position:relative;z-index:5;padding:0 5% 130px;max-width:980px;}
.hero__kicker{font-size:0.8rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:26px;}
.hero__title{font-size:clamp(2.6rem,7vw,5.6rem);color:var(--ink);}
.hero__title .line{display:block;overflow:hidden;}
.hero__title .reveal-line{display:inline-block;transform:translateY(110%);}
.hero__sub{max-width:480px;color:var(--ink-dim);font-size:1.02rem;line-height:1.65;margin:28px 0 40px;}
.hero__actions{display:flex;gap:18px;flex-wrap:wrap;}
.hero__scroll{
  position:absolute;bottom:44px;right:5%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--ink-dim);font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;
}
.hero__scroll-line{width:1px;height:60px;background:var(--line);position:relative;overflow:hidden;}
.hero__scroll-line i{position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--gold);animation:scrollLine 2.2s ease-in-out infinite;}
@keyframes scrollLine{0%{top:-40%;}60%{top:100%;}100%{top:100%;}}
.hero__coords{
  position:absolute;left:5%;bottom:44px;z-index:5;color:var(--muted);font-size:0.68rem;letter-spacing:0.15em;
}
@media (max-width:720px){.hero__coords{display:none;}}

/* reveal-up utility (animated via JS/GSAP) */
.reveal-up{opacity:0;transform:translateY(24px);}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden;background:var(--bg-soft);}
.marquee__track{display:flex;width:max-content;gap:28px;white-space:nowrap;animation:marquee 32s linear infinite;}
.marquee__track span{font-family:var(--serif);font-size:1.5rem;color:var(--muted);}
.marquee__track .dot{color:var(--gold);font-size:1rem;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Intro ---------- */
.intro{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;
  padding:96px 5% 76px;max-width:1440px;margin:0 auto;
}
.intro__sticky{position:sticky;top:140px;align-self:start;height:max-content;}
.intro__sticky h2{font-size:clamp(1.8rem,2.6vw,2.6rem);color:var(--ink);}
.intro__lead{font-size:1.15rem;line-height:1.75;color:var(--ink-dim);max-width:620px;margin-bottom:70px;}
.intro__pillars{display:grid;gap:44px;}
.pillar{border-top:1px solid var(--line);padding-top:26px;display:grid;grid-template-columns:60px 1fr;gap:20px;}
.pillar__num{font-family:var(--serif);color:var(--gold);font-size:1.1rem;}
.pillar h3{font-size:1.25rem;color:var(--ink);margin-bottom:10px;}
.pillar p{color:var(--muted);line-height:1.6;font-size:0.95rem;}

@media (max-width:900px){
  .intro{grid-template-columns:1fr;padding:64px 6% 52px;}
  .intro__sticky{position:static;margin-bottom:50px;}
}

/* ---------- Destinations 3D Gallery ---------- */
.destinations{padding-top:56px;position:relative;}
.destinations__head{padding:0 5% 15px;max-width:900px;}
.destinations__head h2{font-size:clamp(2rem,3.6vw,3.2rem);color:var(--ink);}

.destinations__pin{
  position:relative;height:500vh;
  /* The stage is 100vh and its cards are vertically centred, which is right
     once pinned but leaves a tall gap under the heading beforehand. Pulling
     the pin up closes that gap; the sticky offset (top:0) is unaffected, so
     the pinned composition does not move. */
  /* Mirrors the stage's own centring maths -- (stage height - card height)/2 --
     so the pull matches at every viewport height instead of drifting and
     overlapping the heading on short screens. */
  margin-top:calc(15px - (100vh - var(--dcard-h)) / 2);
  /* Same centring slack sits BELOW the last card once the pin ends, which
     left a tall empty band before the stats rule. Pull 55% of it back.
     Safe because the gallery is pinned by CSS sticky, not a GSAP pin --
     the element's own height is untouched, so the ScrollTrigger range
     ('top top' to 'bottom bottom') and the card timing do not change. */
  margin-bottom:calc((var(--dcard-h) - 100vh) * 0.275);
}
.destinations__stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  perspective:1600px;
}
.dcard{
  position:absolute;inset:0;margin:auto;
  width:min(66vw,980px);height:var(--dcard-h);
  display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;
  opacity:0;
  will-change:transform,opacity;
}
.dcard__inner{
  width:100%;height:100%;border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:1.2fr 1fr;
  background:var(--bg-card);border:1px solid var(--line);
  box-shadow:var(--card-shadow);
}
.dcard__media{position:relative;overflow:hidden;height:100%;}
.dcard__media img{width:100%;height:100%;object-fit:cover;}
.dcard__media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,var(--card-fade));}
.dcard__info{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;position:relative;}
.dcard__num{position:absolute;top:40px;right:48px;font-family:var(--serif);font-size:1rem;color:var(--gold);}
.dcard__tag{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px;}
.dcard__info h3{font-size:clamp(1.6rem,2.2vw,2.1rem);color:var(--ink);margin-bottom:18px;}
.dcard__info p{color:var(--ink-dim);line-height:1.65;margin-bottom:30px;font-size:0.98rem;}
.dcard__link{display:inline-flex;align-items:center;gap:10px;font-size:0.85rem;letter-spacing:0.03em;color:var(--gold-soft);width:max-content;}
.dcard__link .arrow{color:var(--gold-soft);}

.destinations__progress{
  position:sticky;bottom:36px;left:0;width:100%;display:flex;align-items:center;gap:18px;
  padding:0 5%;z-index:6;pointer-events:none;
}
.destinations__progress-bar{flex:1;height:1px;background:var(--line);position:relative;}
.destinations__progress-bar span{position:absolute;top:0;left:0;height:100%;background:var(--gold);width:0%;}
.destinations__count{font-size:0.75rem;letter-spacing:0.1em;color:var(--muted);white-space:nowrap;}
.destinations__count em{color:var(--gold-soft);font-style:normal;}

@media (max-width:860px){
  .dcard{width:88vw;height:auto;}
  .dcard__inner{grid-template-columns:1fr;}
  .dcard__media{height:220px;}
  .dcard__info{padding:32px 26px;}
  /* Card is height:auto here, so the desktop pull-up (which assumes a
     min(58vh,520px) card) over-pulls and the stats rule rides onto the card. */
  .destinations__pin{height:420vh;margin-bottom:0;}
}

/* ---------- Stats ---------- */
.stats{padding:63px 5%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stats__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;text-align:center;}
.stat__num{font-size:clamp(2.4rem,5vw,4rem);color:var(--gold-soft);margin-bottom:14px;}
.stat p{color:var(--muted);font-size:0.88rem;letter-spacing:0.02em;}
@media (max-width:800px){.stats__grid{grid-template-columns:repeat(2,1fr);row-gap:60px;}}

/* ---------- Scrollytelling experience ---------- */
.experience{display:grid;grid-template-columns:1fr 1fr;max-width:1440px;margin:0 auto;padding:0 5%;}
.experience__sticky{position:relative;}
.experience__media{position:sticky;top:104px;height:clamp(480px,64vh,620px);border-radius:16px;overflow:hidden;}
.exp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease);}
.exp-img.active{opacity:1;}
.experience__frame{position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);}
.experience__panels{padding:60px 0 170px 70px;}
.exp-panel{padding:90px 0;opacity:0.25;transition:opacity .5s var(--ease);border-top:1px solid var(--line);}
.exp-panel:first-of-type{border-top:none;}
.exp-panel.active{opacity:1;}
.exp-panel__num{font-family:var(--serif);color:var(--gold);font-size:1.4rem;display:block;margin-bottom:18px;}
.exp-panel h3{font-size:clamp(1.6rem,2.4vw,2.3rem);color:var(--ink);margin-bottom:20px;}
.exp-panel p{color:var(--ink-dim);line-height:1.75;max-width:480px;font-size:1.02rem;}

@media (max-width:900px){
  .experience{grid-template-columns:1fr;}
  .experience__media{position:static;height:clamp(280px,40vh,380px);margin-bottom:40px;}
  .experience__panels{padding:0 0 60px;}
}

/* ---------- Testimonials & Highlights ---------- */
.testimonials{padding:140px 0 160px;position:relative;overflow:hidden;}
.testimonials .eyebrow{padding:0 5%;margin-bottom:12px;}
.highlights__header{
  padding:0 5%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:44px;
  gap:32px;
}
.highlights__header-text h2{
  font-size:clamp(1.8rem,3vw,2.6rem);
  max-width:740px;
  color:var(--ink);
  line-height:1.24;
  margin:0;
}
.highlights__controls{
  display:flex;
  gap:12px;
  flex-shrink:0;
  margin-bottom:6px;
}
.highlights__btn{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg-card);
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .28s var(--ease);
  box-shadow:var(--card-shadow);
}
.highlights__btn:hover{
  border-color:var(--gold);
  background:var(--gold);
  color:#111;
  transform:scale(1.06);
}
[data-theme="light"] .highlights__btn{
  background:#ffffff;
  border-color:rgba(22,23,20,0.15);
  color:#161714;
}
[data-theme="light"] .highlights__btn:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#ffffff;
}

.highlights__slider{
  position:relative;
  overflow:hidden;
  padding:14px 0 32px;
  mask-image:linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
@media (max-width:768px){
  .highlights__header{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:32px;}
  .highlights__slider{mask-image:none;-webkit-mask-image:none;}
}

.testi__track{
  display:flex;
  gap:28px;
  overflow-x:auto;
  padding:0 5% 10px;
  scroll-snap-type:none;
  scrollbar-width:none;
  -ms-overflow-style:none;
  user-select:none;
  cursor:grab;
}
.testi__track::-webkit-scrollbar{display:none;}
.testi__track:active{cursor:grabbing;}
.testi{
  min-width:min(480px,80vw);scroll-snap-align:start;
  background:var(--bg-card);border:1px solid var(--line);box-shadow:var(--card-shadow);border-radius:16px;padding:46px;
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.testi__quote{font-family:var(--serif);font-size:1.3rem;line-height:1.6;color:var(--ink);}
.testi__meta{display:flex;flex-direction:column;gap:4px;}
.testi__name{font-size:0.9rem;color:var(--gold-soft);}
.testi__loc{font-size:0.78rem;color:var(--muted);letter-spacing:0.05em;}

/* ---------- CTA ---------- */
.cta{position:relative;height:clamp(520px,62vh,640px);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cta__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.1);will-change:transform;}
.cta__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,7,0.75),rgba(8,9,7,0.55) 40%,rgba(8,9,7,0.9));}
.cta__content{position:relative;z-index:2;text-align:center;max-width:760px;padding:0 6%;}
.cta__content h2{font-size:clamp(2rem,4vw,3.4rem);color:#f4efe4;margin:24px 0 36px;text-shadow:0 2px 16px rgba(0,0,0,0.35);}

/* ---------- Footer ---------- */
.footer{padding:110px 5% 30px;border-top:1px solid var(--line);}
.footer__top{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.4fr 0.8fr 0.8fr 1.1fr;gap:60px;padding-bottom:80px;}
.footer__brand p{color:var(--muted);line-height:1.7;margin:20px 0 26px;max-width:340px;font-size:0.92rem;}
.footer__social{display:flex;gap:18px;align-items:center;}
/* ---------- social links: brand marks, no labels ---------- */
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-dim); transition:color .3s var(--ease);
}
.social-link__mark{
  width:21px; height:21px; flex:none; fill:currentColor;
  /* Lights up rather than growing -- fill and glow only, no transform, so the
     row never shifts under the cursor. */
  transition:fill .3s var(--ease), filter .35s var(--ease);
}
.social-link:hover .social-link__mark,
.social-link:focus-visible .social-link__mark{
  fill:var(--brand);
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--glow) 75%, transparent))
         drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 40%, transparent));
}

.footer__col h4{font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;}
.footer__col a{display:block;color:var(--ink-dim);font-size:0.92rem;margin-bottom:14px;}
.footer__col a:hover{color:var(--ink);}
.footer__newsletter p{color:var(--muted);font-size:0.88rem;line-height:1.6;margin-bottom:22px;}
.footer__form{display:flex;border-bottom:1px solid var(--line);padding-bottom:12px;}
.footer__form input{background:none;border:0;outline:0;color:var(--ink);font-family:var(--sans);font-size:0.92rem;flex:1;}
.footer__form input::placeholder{color:var(--muted);}
.footer__form button{background:none;border:0;color:var(--gold);cursor:pointer;}
.footer__bottom{
  max-width:1440px;margin:0 auto;padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;color:var(--muted);font-size:0.78rem;letter-spacing:0.04em;
}

@media (max-width:900px){
  .footer__top{grid-template-columns:1fr 1fr;row-gap:50px;}
}

@media (max-width:1000px){
  .nav__links{display:none;}
  .nav__cta{display:none;}
  .nav__burger{display:flex;}
}

/* ==========================================================
   Glass header scrim
   At the top of a page the nav sits directly on a photograph.
   The background stays ~90% transparent, so a soft top-down
   scrim carries text legibility over bright image areas
   instead of an opaque bar.
   ========================================================== */
.nav::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(8,9,7,0.55) 0%, rgba(8,9,7,0.22) 55%, transparent 100%);
  opacity:1;
  transition:opacity .4s var(--ease);
}
.nav.is-scrolled::before{ opacity:0; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  /* No blur support: fall back to a more opaque bar so text stays readable. */
  .nav.is-scrolled{ background:var(--bg); }
}

/* ==========================================================
   Logo scaling
   The wordmark carries a "DISCOVER BEYOND THE MAP" tagline that
   occupies only ~10% of the artwork's height, so the logo needs
   a generous box for it to stay readable. Native ratio 538:154.
   Sizes step down on narrower viewports without dropping the
   tagline below legibility.
   ========================================================== */
@media (max-width: 1250px){
  .vistra-logo{ width:210px; height:60px; }
}
@media (max-width: 1080px){
  /* Tighten link spacing as well, so the wordmark never touches the menu. */
  .vistra-logo{ width:172px; height:49px; }
  .nav__links{ gap:24px; }
}
@media (max-width: 1000px){
  /* Nav links collapse into the burger here, so the logo gets room back. */
  .vistra-logo{ width:214px; height:61px; }
  .nav{ padding:14px 5%; }
  .nav.is-scrolled{ padding:10px 5%; }
}
@media (max-width: 560px){
  .vistra-logo{ width:180px; height:52px; }
  .vistra-logo--mobile{ width:196px; height:56px; }
  .vistra-logo--footer{ width:214px; height:61px; }
}
@media (max-width: 380px){
  .vistra-logo{ width:158px; height:45px; }
}

/* ==========================================================
   Logo legibility on the glass header
   The nav background is ~90% transparent, so the wordmark can
   land on a photograph at any scroll position. Two safeguards:

   1. While the nav is transparent (over a hero image) the white
      wordmark is used in BOTH themes — the navy one disappears
      against dark photography.
   2. A soft shadow lifts the mark (and its fine red tagline)
      off busy imagery without altering the brand artwork.
   ========================================================== */
.nav:not(.is-scrolled) .vistra-logo__base--dark,
.nav:not(.is-scrolled) .vistra-logo__base--light,

.nav:not(.is-scrolled) .vistra-logo{
  filter:drop-shadow(0 2px 10px rgba(0,0,0,0.78)) drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
[data-theme="dark"] .nav.is-scrolled .vistra-logo{
  filter:drop-shadow(0 1px 6px rgba(0,0,0,0.55));
}

/* ==========================================================
   Intro showcase — vertical destination marquee
   Fills the tall gap beside the sticky intro heading. The
   column is narrow (~550px), so the cards run as compact
   horizontal tiles: four are visible at once instead of the
   one-and-a-bit a full-bleed card would allow.
   ========================================================== */
.intro__showcase{ margin-top:42px; }

.intro__showcase-label{
  font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:18px;
}

.vmarquee{
  position:relative; height:clamp(400px, 44vh, 500px); overflow:hidden;
  /* Fade the ends so cards enter and leave instead of being chopped. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.vmarquee__track{
  display:flex; flex-direction:column; gap:16px;
  will-change:transform;
}
/* Advances one card per step (driven from main.js), rather than gliding
   continuously — the pause lets each destination actually be read. */
.vmarquee__track.is-stepping{
  transition:transform .85s cubic-bezier(.16,1,.3,1);
}

/* Compact tile layout for the cards inside the marquee */
.vmarquee .highlight-card{
  display:grid; grid-template-columns:190px 1fr; align-items:center; gap:22px;
  /* max-width is reset because the shared .highlight-card rule caps the card at
     380px for the old horizontal rail, which left the column half empty. */
  min-width:0; width:100%; max-width:none; padding:14px; flex:0 0 auto;
  background:var(--bg-card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--card-shadow); color:inherit;
  transition:transform .45s var(--ease), border-color .35s;
}
.vmarquee .highlight-card:hover{ transform:translateX(6px); border-color:var(--gold); }
.vmarquee .highlight-card__media{
  aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--bg-soft);
}
.vmarquee .highlight-card__media img{ width:100%; height:100%; object-fit:cover; }
.vmarquee .highlight-card__body{ padding:0 6px 0 0; min-width:0; }
.vmarquee .highlight-card__body h3{
  font-size:1.2rem; line-height:1.25; margin-bottom:8px; color:var(--ink);
}
.vmarquee .highlight-card__body p{
  font-size:0.92rem; line-height:1.55; color:var(--muted); margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.intro__showcase-link{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  font-size:0.84rem; letter-spacing:0.03em; color:var(--gold-soft);
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:border-color .3s, gap .3s var(--ease);
}
.intro__showcase-link:hover{ border-color:var(--gold-soft); gap:16px; }

@media (prefers-reduced-motion: reduce){
  .vmarquee__track{ transition:none; transform:none !important; }
  .vmarquee{ height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; }
}

@media (max-width:900px){
  /* The column is no longer sticky here, so cap the height and keep it tidy. */
  .intro__showcase{ margin-top:34px; }
  .vmarquee{ height:440px; }
}

/* On short viewports the pinned intro column could exceed the screen, leaving
   its lower edge unreachable while stuck. Trim the offset and the marquee. */
@media (min-width:901px) and (max-height:800px){
  .intro__sticky{ top:96px; }
  /* Slimmer tiles so more than one still shows on a short screen. */
  .vmarquee .highlight-card{ grid-template-columns:148px 1fr; gap:16px; padding:10px; }
  .vmarquee .highlight-card__body h3{ font-size:1.04rem; margin-bottom:5px; }
  .vmarquee .highlight-card__body p{ font-size:0.85rem; -webkit-line-clamp:2; }
}

/* ==========================================================
   Home enquiry section
   Replaces the photographic CTA banner. The form runs as a
   single vertical column — every field full width, nothing
   paired side by side — so it reads as one continuous flow.
   ========================================================== */
.home-enquiry{
  padding:clamp(80px,9vw,140px) 5%;
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.home-enquiry__inner{
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(36px,5vw,90px); align-items:start;
}

.home-enquiry__intro{ position:sticky; top:130px; }
.home-enquiry__intro h2{
  font-size:clamp(2rem,3.6vw,3.1rem); color:var(--ink); margin:0 0 20px;
}
.home-enquiry__lead{
  color:var(--ink-dim); line-height:1.75; font-size:1.05rem; max-width:44ch; margin-bottom:38px;
}
.home-enquiry__contact{ list-style:none; display:grid; gap:20px; margin:0; padding:0; }
.home-enquiry__contact li{
  display:grid; gap:5px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.home-enquiry__contact span{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.home-enquiry__contact a{ color:var(--ink); font-size:1rem; transition:color .3s; }
.home-enquiry__contact a:hover{ color:var(--gold-soft); }

.home-enquiry__form{
  padding:clamp(26px,3vw,42px); border-radius:20px;
  background:var(--bg-card); border:1px solid var(--line); box-shadow:var(--card-shadow);
}
.home-enquiry__form h3{ font-size:clamp(1.4rem,2.2vw,1.9rem); color:var(--ink); margin-bottom:10px; }
.home-enquiry__form-lead{ color:var(--muted); font-size:.93rem; margin-bottom:28px; }

/* vertical stack: one field per row, full width */
.home-enquiry__form .field{ display:grid; gap:8px; margin-bottom:18px; }
.home-enquiry__form .field label{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:600;
}
.home-enquiry__form .field .opt{
  text-transform:none; letter-spacing:0; color:var(--muted); font-weight:400;
}
.home-enquiry__form input,
.home-enquiry__form select,
.home-enquiry__form textarea{
  width:100%; padding:14px 16px; border-radius:11px;
  font-family:var(--sans); font-size:.96rem; color:var(--ink);
  background:var(--bg-soft); border:1px solid var(--line); outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.home-enquiry__form input:focus,
.home-enquiry__form select:focus,
.home-enquiry__form textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,77,.16);
}
.home-enquiry__form textarea{ resize:vertical; min-height:110px; }
.home-enquiry__form .field__err{ font-size:.78rem; color:#e0674f; }
.home-enquiry__form .field.has-err input,
.home-enquiry__form .field.has-err textarea{ border-color:#e0674f; }
.home-enquiry__form .btn--full{ width:100%; justify-content:center; margin-top:10px; }
.home-enquiry__form .contact__status{
  margin-top:14px; font-size:.9rem; color:var(--gold-soft); min-height:1.2em;
}

@media (max-width:900px){
  .home-enquiry__inner{ grid-template-columns:1fr; }
  .home-enquiry__intro{ position:static; }
}

/* ==========================================================
   Stat odometer
   Each digit is its own reel of 0-9 that spins and locks into
   place, left to right — a mechanical counter rather than the
   usual number that just races upward and stops.
   ========================================================== */
.stat__num{ --odo-h:1.18em; }

.odo{
  display:inline-flex; align-items:flex-start;
  line-height:var(--odo-h); font-variant-numeric:tabular-nums;
}
.odo__digit{
  display:block; height:var(--odo-h); overflow:hidden;
}
.odo__reel{
  display:block; will-change:transform;
  transform:translate3d(0,0,0);
}
.odo__reel > span{
  display:block; height:var(--odo-h); line-height:var(--odo-h);
}
.odo__static{ display:block; height:var(--odo-h); line-height:var(--odo-h); }

/* The suffix arrives once the last reel has settled. */
.odo__suffix{
  display:block; height:var(--odo-h); line-height:var(--odo-h);
  opacity:0; transform:translate3d(0,.22em,0);
  transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.odo.is-done .odo__suffix{ opacity:1; transform:translate3d(0,0,0); }

/* A single soft sweep of light as the figure locks in. */
.stat__num{ position:relative; }
.stat__num::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  opacity:0; transform:translateX(-60%);
}
.stat__num.is-lit::after{ animation:odoSheen 1.05s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes odoSheen{
  0%  { opacity:0;   transform:translateX(-60%); }
  35% { opacity:.85; }
  100%{ opacity:0;   transform:translateX(60%); }
}

@media (prefers-reduced-motion: reduce){
  .odo__reel{ transition:none !important; }
  .odo__suffix{ opacity:1; transform:none; transition:none; }
  .stat__num.is-lit::after{ animation:none; }
}

/* ==========================================================
   Nav passing over a dark section
   The glass bar is ~90% transparent, so while it crosses a
   photographic band (hero, CTA) the theme's dark ink vanishes.
   [data-nav-dark] sections add .is-on-dark via nav-contrast.js;
   these rules mirror the hero's light-on-photo treatment while
   keeping the glass background and its padding, so the header
   does not change height mid-scroll.
   ========================================================== */
.nav.is-on-dark .nav__logo{ color:#fdf1e1; text-shadow:0 2px 14px rgba(0,0,0,.7); }

.nav.is-on-dark .nav__links > a,
.nav.is-on-dark .nav__group > a,
.nav.is-on-dark .nav__group-link{
  color:#d5cfc2; text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.nav.is-on-dark .nav__links > a:hover,
.nav.is-on-dark .nav__group > a:hover,
.nav.is-on-dark .nav__group-link:hover{ color:#ffffff; }

.nav.is-on-dark .nav__links > a.is-current,
.nav.is-on-dark .nav__group-link.is-current{ color:var(--gold-soft); }

.nav.is-on-dark .nav__cta{
  color:#fdf1e1; border-color:rgba(244,239,228,.4); text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.nav.is-on-dark .nav__cta:hover{ border-color:var(--gold); background:rgba(201,162,77,.14); }

.nav.is-on-dark .nav__burger span{ background:#fdf1e1; }

.nav.is-on-dark .theme-toggle{
  background:rgba(244,239,228,.1); border-color:rgba(244,239,228,.26);
}
.nav.is-on-dark .theme-toggle__text{ color:#fdf1e1; }

/* The navy wordmark disappears on photography — use the white one. */
.nav.is-on-dark .vistra-logo__base--dark,
.nav.is-on-dark .vistra-logo__base--light,
.nav.is-on-dark .vistra-logo{
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.78)) drop-shadow(0 0 2px rgba(0,0,0,.5));
}

/* Restore a readable scrim behind the bar while it is over the photo. */
.nav.is-on-dark::before{ opacity:1; }

/* ==========================================================
   Studio credit — "Design & Built by AivonLabs"
   A slow gold glint travels across the wordmark, and the
   underline draws in on hover. Colours come from the theme
   tokens so it reads in both light and dark.
   ========================================================== */
.footer__bottom .credit{
  display:inline-flex; align-items:baseline; gap:7px;
  color:var(--muted); font-size:0.78rem; letter-spacing:0.04em;
  white-space:nowrap; position:relative; isolation:isolate;
}
.credit__label{ transition:color .35s ease; }

.credit__brand{
  position:relative; font-weight:700; letter-spacing:0.05em;
  color:var(--gold); /* fallback when background-clip:text is unavailable */
}

/* The glint only runs where the text can actually be clipped to a gradient —
   otherwise the fallback colour above stays visible. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .credit__brand{
    background-image:linear-gradient(100deg,
      var(--gold) 0%, var(--gold) 36%,
      #fff6dd 48%, #ffffff 52%,
      var(--gold) 64%, var(--gold) 100%);
    background-size:260% 100%;
    background-position:120% 0;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:creditGlint 7s cubic-bezier(.55,0,.45,1) infinite;
  }
}
@keyframes creditGlint{
  0%,  62% { background-position:120% 0; }
  92%,100% { background-position:-40% 0; }
}

/* Underline draws from the left on hover/focus */
.credit__brand::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.credit:hover .credit__brand::after,
.credit:focus-visible .credit__brand::after{ transform:scaleX(1); }
.credit:hover .credit__label,
.credit:focus-visible .credit__label{ color:var(--ink-dim); }

/* Outbound arrow nudges away on hover */
.credit__arrow{
  width:8px; height:8px; flex:0 0 auto; align-self:center;
  border-right:1.4px solid var(--gold); border-top:1.4px solid var(--gold);
  transform:rotate(45deg); transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.credit:hover .credit__arrow,
.credit:focus-visible .credit__arrow{ transform:rotate(45deg) translate(2px,-2px); }

@media (prefers-reduced-motion: reduce){
  .credit__brand{ animation:none; background-position:0 0; }
  .credit__brand::after, .credit__arrow{ transition:none; }
}

@media (max-width:900px){
  .footer__bottom{ flex-direction:column; align-items:center; gap:14px; text-align:center; }
  .footer__bottom .credit{ order:3; }
}

/* Preloader: progress bar and 0-100 counter removed — the callsign now sits
   centred on its own under the animated wordmark. */
.preloader__status{
  display:flex; justify-content:center; align-items:center;
  width:auto; gap:0;
}
.preloader__status .preloader__callsign{ text-align:center; }