/* =========================================
   CAMEL EXPEDITION — Core Design System
   Ultra-Luxury Himalayan Expedition Brand
   ========================================= */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Jost:wght@200;300;400;500;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Color Palette */
  --himalayan-white: #F5F2ED;
  --warm-white: #FAFAF8;
  --desert-sand: #C8B89A;
  --sand-light: #E8DDD0;
  --sand-dark: #A89070;
  --charcoal: #1C1C1C;
  --charcoal-mid: #2E2E2E;
  --charcoal-soft: #3D3D3D;
  --deep-blue: #1A2A3A;
  --deep-blue-mid: #243245;
  --slate-blue: #3A4A5A;
  --antique-gold: #B8963E;
  --gold-light: #D4AF7A;
  --gold-dark: #8B6914;
  --text-primary: #1C1C1C;
  --text-secondary: #5C5C5C;
  --text-light: #8A8A8A;
  --text-muted: #ABABAB;
  --border-light: rgba(200,184,154,0.25);
  --border-mid: rgba(184,150,62,0.3);

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans: 'Jost', 'Helvetica Neue', sans-serif;

  /* Spacing */
  --section-pad: 120px;
  --section-pad-sm: 80px;
  --container-max: 1400px;
  --container-narrow: 900px;
  --container-mid: 1100px;

  /* Transitions */
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--text-primary);
  background-color: var(--warm-white);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  text-decoration: none;
  color: inherit;
}

ul { list-style: none; }

/* --- Typography Scale --- */
.t-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--antique-gold);
}

.t-display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 6.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.t-heading-xl {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.t-heading-lg {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.15;
}

.t-heading-md {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw, 2.2rem);
  line-height: 1.2;
}

.t-heading-sm {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.5vw, 1.6rem);
  line-height: 1.3;
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.t-body-md {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-secondary);
}

/* --- Layout --- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
}

.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 48px;
}

.container--mid {
  max-width: var(--container-mid);
  margin: 0 auto;
  padding: 0 48px;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* guarantees clear space between logo / links / CTA. Without this, once the
     three groups outgrow the viewport the CTA rode straight over "Contact". */
  gap: 30px;
  transition: all 0.5s var(--transition-smooth);
}

.nav.scrolled {
  padding: 18px 48px;
  background: rgba(28, 28, 28, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(184,150,62,0.15);
}

/* Brand logo image (text kept in markup for SEO / screen readers) */
.nav__logo {
  display: block;
  flex-shrink: 0;
  width: 158px;
  height: 46px;
  background: url('../assets/logo-t.png') no-repeat left center;
  background-size: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.nav__logo-name,
.nav__logo-sub {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
  min-width: 0;
}

.nav__link {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,237,0.8);
  transition: color 0.3s ease;
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--antique-gold);
  transition: width 0.3s var(--transition-smooth);
}

.nav__link:hover { color: var(--himalayan-white); }
.nav__link:hover::after { width: 100%; }
.nav__link.active { color: var(--antique-gold); }
.nav__link.active::after { width: 100%; }

/* --- Nav Dropdown (About Us) --- */
.nav__item--has-dropdown { position: relative; }

.nav__link--dropdown {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,237,0.8);
}
.nav__link--dropdown .nav__caret {
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.3s var(--transition-smooth);
}
.nav__item--has-dropdown:hover .nav__link--dropdown,
.nav__item--has-dropdown:focus-within .nav__link--dropdown { color: var(--himalayan-white); }
.nav__item--has-dropdown:hover .nav__caret,
.nav__item--has-dropdown:focus-within .nav__caret { transform: rotate(-135deg) translateY(-2px); }

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 232px;
  padding: 12px 0;
  margin-top: 18px;
  background: rgba(20,20,20,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(184,150,62,0.22);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.32s var(--transition-smooth), transform 0.32s var(--transition-smooth);
  z-index: 1001;
}
/* invisible hover bridge so the menu doesn't close in the gap */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -18px; left: 0; right: 0; height: 18px;
}
.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown-link {
  display: block;
  padding: 11px 26px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(245,242,237,0.72);
  white-space: nowrap;
  transition: color 0.28s ease, padding 0.28s var(--transition-smooth), background 0.28s ease;
}
.nav__dropdown-link:hover {
  color: var(--antique-gold);
  padding-left: 32px;
  background: rgba(184,150,62,0.06);
}

/* =========================================
   PACKAGES SIDE TAB (right edge, desktop)
   ========================================= */
.pkg-tab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 980;
  display: flex;
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  background: var(--antique-gold);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 22px 13px;
  text-decoration: none;
  box-shadow: -6px 0 22px rgba(0,0,0,0.18);
  transition: background 0.3s ease, padding 0.35s var(--transition-smooth);
}
.pkg-tab:hover { background: var(--gold-light); padding-left: 19px; }
.pkg-tab i { font-size: 0.85rem; transform: rotate(90deg); }
@media (max-width: 992px) { .pkg-tab { display: none; } }

/* =========================================
   WHATSAPP LEAD POPUP (timed, site-wide)
   ========================================= */
.wa-pop-overlay {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20,20,20,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.wa-pop-overlay.open { opacity: 1; visibility: visible; }

.wa-pop {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--warm-white);
  border-top: 3px solid var(--antique-gold);
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
  padding: 48px 52px 40px;
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition: transform 0.55s var(--transition-slow), opacity 0.55s ease;
}
.wa-pop-overlay.open .wa-pop { transform: translateY(0) scale(1); opacity: 1; }

.wa-pop__close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-size: 1.4rem;
  line-height: 1;
  transition: color 0.3s ease, transform 0.3s ease;
}
.wa-pop__close:hover { color: var(--charcoal); transform: rotate(90deg); }

.wa-pop__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--border-mid);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--antique-gold);
  margin-bottom: 22px;
}
.wa-pop__badge i { color: #25D366; font-size: 0.9rem; }

.wa-pop__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.1rem;
  line-height: 1.15;
  color: var(--charcoal);
  margin-bottom: 12px;
}
.wa-pop__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 30px;
  max-width: 90%;
}

.wa-pop__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.wa-pop__field { display: flex; flex-direction: column; }
.wa-pop__label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 10px;
}
.wa-pop__label span { color: var(--antique-gold); }
.wa-pop__input,
.wa-pop__select,
.wa-pop__textarea {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--himalayan-white);
  border: 1px solid var(--border-light);
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.wa-pop__input::placeholder,
.wa-pop__textarea::placeholder { color: var(--text-muted); }
.wa-pop__input:focus,
.wa-pop__select:focus,
.wa-pop__textarea:focus { border-color: var(--antique-gold); background: var(--warm-white); }
.wa-pop__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23B8963E' stroke-width='1.4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.wa-pop__row--single { grid-template-columns: 1fr; }
.wa-pop__hint {
  font-style: normal;
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--text-light);
  margin-left: 6px;
}

/* Interest chips — multi-select. Replaced a single <select>, which allowed only
   one choice and reads badly on mobile. */
.wa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.wa-chips.is-invalid {
  border-color: rgba(184,68,68,0.55);
  background: rgba(184,68,68,0.05);
}
.wa-chip {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--himalayan-white);
  border: 1px solid var(--border-light);
  padding: 9px 15px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.2s ease;
}
.wa-chip:hover {
  border-color: var(--antique-gold);
  color: var(--charcoal);
}
.wa-chip:focus-visible {
  outline: 2px solid var(--antique-gold);
  outline-offset: 2px;
}
.wa-chip.is-on {
  background: var(--antique-gold);
  border-color: var(--antique-gold);
  color: var(--charcoal);
  font-weight: 400;
}
.wa-chip.is-on::before {
  content: '✓';
  margin-right: 7px;
  font-size: 0.7rem;
  font-weight: 600;
}

.wa-pop__textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.wa-pop__msg { margin-bottom: 30px; }

.wa-pop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.wa-pop__expert { display: flex; align-items: center; gap: 12px; }
.wa-pop__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--antique-gold);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.wa-pop__expert-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--charcoal);
  display: block;
}
.wa-pop__expert-sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.72rem;
  color: var(--text-light);
}
.wa-pop__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #25D366;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 16px 30px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.wa-pop__btn i { font-size: 1.15rem; }
.wa-pop__btn:hover { background: #1da851; transform: translateY(-2px); }
.wa-pop__note {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.72rem;
  color: var(--text-light);
  text-align: right;
  margin-top: 16px;
}

/* ============================================================
   SOFT CARD — the non-blocking repeat prompt.

   Shown ~8 min after the modal was dismissed, instead of re-opening a dialog
   at someone who already said no. Bottom-LEFT on purpose: the WhatsApp FAB and
   the back-to-top button both live bottom-right. Never locks scroll.
   ============================================================ */
.wa-soft {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 985;                /* under the nav (1000), over page content */
  width: min(340px, calc(100vw - 48px));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 16px 16px;
  background: var(--warm-white);
  border: 1px solid var(--border-light);
  border-left: 3px solid #25D366;
  box-shadow: 0 18px 44px rgba(28,28,28,0.20);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.55s var(--transition-smooth), opacity 0.45s ease;
}
.wa-soft.is-in { transform: translateY(0); opacity: 1; }

.wa-soft__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  font-size: 1rem;
}
.wa-soft__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.wa-soft__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--charcoal);
}
.wa-soft__text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.wa-soft__cta {
  align-self: center;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: #25D366;
  padding: 9px 16px;
  transition: background 0.3s ease;
}
.wa-soft__cta:hover { background: #1da851; }
.wa-soft__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  transition: color 0.25s ease;
}
.wa-soft__close:hover { color: var(--charcoal); }

@media (max-width: 620px) {
  /* full width, but lifted clear of the WhatsApp FAB (bottom:32px, 52px tall)
     and the back-to-top button that share the bottom-right corner */
  .wa-soft { left: 12px; right: 12px; bottom: 96px; width: auto; }
  .wa-soft__cta { padding: 9px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-soft { transition: opacity 0.3s ease; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-pop { transition: opacity 0.3s ease; transform: none; }
  .wa-pop-overlay.open .wa-pop { transform: none; }
}
@media (max-width: 620px) {
  .wa-pop { padding: 40px 26px 32px; }
  .wa-pop__title { font-size: 1.7rem; }
  .wa-pop__sub { max-width: 100%; }
  .wa-pop__row { grid-template-columns: 1fr; gap: 18px; }
  .wa-pop__foot { flex-direction: column; align-items: stretch; }
  .wa-pop__btn { justify-content: center; }
  .wa-pop__note { text-align: center; }
}

.nav__cta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--antique-gold);
  padding: 10px 24px;
  transition: all 0.3s ease;
  border: 1px solid var(--antique-gold);
  flex-shrink: 0;
  white-space: nowrap;
}

.nav__cta:hover {
  background: transparent;
  color: var(--antique-gold);
}

/* Mobile Menu Toggle */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav__toggle span {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--himalayan-white);
  transition: all 0.3s ease;
}

.nav__toggle.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav__toggle.open span:nth-child(2) { opacity: 0; }
.nav__toggle.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Nav */
/* Ten links at the old 2.5rem/40px-gap needed ~880px of height — taller than a
   phone viewport — and with justify-content:center the overflow was clipped off
   the TOP, hiding Home and Experiences. Now it starts below the nav bar, sizes
   the links to fit, and scrolls if a short viewport still runs out of room. */
.nav__mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--charcoal);
  z-index: 999;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 86px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav__mobile.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.nav__mobile-link {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.32rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--himalayan-white);
  /* padding, not gap, so the whole row is a 44px+ tap target */
  padding: 15px 8px;
  border-bottom: 1px solid rgba(245,242,237,0.07);
  transition: color 0.3s ease, background-color 0.3s ease;
}
.nav__mobile-link:last-child { border-bottom: none; }
.nav__mobile-link:hover,
.nav__mobile-link:active { color: var(--antique-gold); }

/* Very short viewports (landscape phones, small Androids) */
@media (max-height: 620px) {
  .nav__mobile { padding-top: 74px; }
  .nav__mobile-link { font-size: 1.14rem; padding: 11px 8px; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 40px;
  cursor: pointer;
  transition: background-color 0.35s var(--transition-smooth),
              color 0.35s var(--transition-smooth),
              border-color 0.35s var(--transition-smooth),
              transform 0.35s var(--transition-smooth),
              box-shadow 0.35s var(--transition-smooth);
  border: none;
  outline: none;
  text-decoration: none;
  will-change: transform;
}

.btn--primary {
  background: var(--antique-gold);
  color: var(--charcoal);
  border: 1px solid var(--antique-gold);
}

.btn--primary:hover {
  background: var(--gold-light);
  color: var(--charcoal);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(184, 150, 62, 0.30);
}

.btn--outline {
  background: transparent;
  color: var(--himalayan-white);
  border: 1px solid rgba(245,242,237,0.5);
}

.btn--outline:hover {
  background: rgba(245,242,237,0.10);
  border-color: var(--himalayan-white);
  transform: translateY(-2px);
}

.btn--outline-dark {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--charcoal);
}

.btn--outline-dark:hover {
  background: var(--charcoal);
  color: var(--himalayan-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(28, 28, 28, 0.18);
}

.btn--gold-outline {
  background: transparent;
  color: var(--antique-gold);
  border: 1px solid var(--antique-gold);
}

.btn--gold-outline:hover {
  background: var(--antique-gold);
  color: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(184, 150, 62, 0.28);
}

.btn__arrow {
  width: 18px;
  height: 1px;
  background: currentColor;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.3s var(--transition-smooth);
}

.btn__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.btn:hover .btn__arrow { transform: translateX(6px); }

/* --- Gold Divider --- */
.gold-divider {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--antique-gold), transparent);
  margin: 24px auto;
}

.gold-divider--left {
  margin: 24px 0;
}

/* --- Page Hero (non-home) --- */
.page-hero {
  position: relative;
  height: 65vh;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transform: scale(1.05);
  transition: transform 6s ease;
}

.page-hero:hover .page-hero__bg {
  transform: scale(1.0);
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28,28,28,0.92) 0%,
    rgba(28,28,28,0.5) 50%,
    rgba(28,28,28,0.2) 100%
  );
}

.page-hero__content {
  position: relative;
  z-index: 2;
  padding: 80px 48px;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

.page-hero__content .t-label {
  margin-bottom: 16px;
}

/* --- Section Spacing --- */
.section {
  padding: var(--section-pad) 0;
}

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

.section--dark {
  background: var(--charcoal);
  color: var(--himalayan-white);
}

.section--sand {
  background: var(--sand-light);
}

.section--blue {
  background: var(--deep-blue);
  color: var(--himalayan-white);
}

/* --- Cards --- */
.experience-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--charcoal);
}

.experience-card__img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  transition: transform 0.8s var(--transition-slow);
  filter: brightness(0.85);
}

.experience-card:hover .experience-card__img {
  transform: scale(1.06);
  filter: brightness(0.7);
}

.experience-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28,28,28,0.95) 0%,
    rgba(28,28,28,0.4) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  transition: all 0.4s ease;
}

.experience-card__number {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--antique-gold);
  margin-bottom: 12px;
  font-style: italic;
}

.experience-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--himalayan-white);
  line-height: 1.2;
  margin-bottom: 12px;
}

.experience-card__desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(245,242,237,0.75);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

.experience-card:hover .experience-card__desc {
  max-height: 100px;
  opacity: 1;
}

.experience-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--antique-gold);
  margin-top: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s ease 0.1s;
}

.experience-card:hover .experience-card__link {
  opacity: 1;
  transform: translateY(0);
}

/* --- Grid Layouts --- */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2px;
}

/* --- Stats Row --- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.stat-item {
  padding: 48px 40px;
  border-right: 1px solid var(--border-light);
  text-align: center;
}

.stat-item:last-child { border-right: none; }

.stat-item__number {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--antique-gold);
  margin-bottom: 8px;
}

.stat-item__label {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* --- Pull Quote --- */
.pull-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  line-height: 1.5;
  color: var(--charcoal);
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}

.pull-quote::before,
.pull-quote::after {
  content: '"';
  font-family: var(--font-serif);
  font-size: 5rem;
  color: var(--sand-dark);
  opacity: 0.4;
  position: absolute;
  line-height: 1;
}

.pull-quote::before { top: -20px; left: -10px; }
.pull-quote::after { 
  content: '"'; 
  bottom: -40px; 
  right: -10px; 
}

/* --- Forms --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--antique-gold);
}

.form-input,
.form-select,
.form-textarea {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 14px 0;
  outline: none;
  transition: border-color 0.3s ease;
  width: 100%;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
  font-weight: 300;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-bottom-color: var(--antique-gold);
}

.form-textarea {
  resize: none;
  height: 120px;
  line-height: 1.7;
}

.form-select {
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B8963E' stroke-width='1' fill='none'/%3E%3C/svg%3E") no-repeat right 8px center;
}

/* ============================================================
   Dark form variant (bespoke.html + contact.html enquiry forms)

   Previously: transparent fields with a 25%-opacity hairline underline,
   placeholders at 0.35 alpha (~2.4:1 — well below the 4.5:1 minimum) and
   10px uppercase --antique-gold labels on navy (~4.7:1). The result was that
   you could not tell where the inputs were, or read what was in them.

   Now: filled wells with a visible edge, --gold-light labels (~6.3:1 on
   --deep-blue-mid) and legible placeholder text.
   ============================================================ */
.form--dark .form-label {
  color: var(--gold-light);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

.form--dark .form-input,
.form--dark .form-select,
.form--dark .form-textarea {
  color: var(--himalayan-white);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,184,154,0.22);
  padding: 13px 15px;
  font-size: 0.92rem;
  transition: border-color 0.28s ease, background-color 0.28s ease,
              box-shadow 0.28s ease;
}

.form--dark .form-input:hover,
.form--dark .form-select:hover,
.form--dark .form-textarea:hover {
  background: rgba(255,255,255,0.085);
  border-color: rgba(200,184,154,0.36);
}

.form--dark .form-input::placeholder,
.form--dark .form-textarea::placeholder {
  color: rgba(245,242,237,0.55);
}

.form--dark .form-input:focus,
.form--dark .form-select:focus,
.form--dark .form-textarea:focus {
  background: rgba(255,255,255,0.11);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(184,150,62,0.18);
}

/* keyboard users get the same clear ring */
.form--dark .form-input:focus-visible,
.form--dark .form-select:focus-visible,
.form--dark .form-textarea:focus-visible { outline: none; }

.form--dark .form-textarea {
  height: 132px;
  line-height: 1.75;
}

.form--dark .form-select {
  background-color: rgba(255,255,255,0.06);
  color: var(--himalayan-white);
  padding-right: 40px;
  /* lighter gold chevron, and inset so it clears the new padding */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF7A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.form--dark .form-select option {
  background: var(--deep-blue);
  color: var(--himalayan-white);
}

/* Chrome/Edge paint autofilled inputs near-white, which turns white text
   invisible on this form. The inset shadow is the only reliable override. */
.form--dark .form-input:-webkit-autofill,
.form--dark .form-input:-webkit-autofill:hover,
.form--dark .form-input:-webkit-autofill:focus,
.form--dark .form-select:-webkit-autofill,
.form--dark .form-textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--himalayan-white);
  -webkit-box-shadow: 0 0 0 1000px #2B3A4D inset;
  box-shadow: 0 0 0 1000px #2B3A4D inset;
  caret-color: var(--himalayan-white);
  transition: background-color 9999s ease-out 0s;
}

/* the * on required fields shouldn't read as part of the label text */
.form--dark .form-label .req { color: var(--antique-gold); margin-left: 2px; }

/* --- Journal Cards --- */
.journal-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  group: true;
}

.journal-card__img-wrap {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.journal-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--transition-slow);
}

.journal-card:hover .journal-card__img {
  transform: scale(1.05);
}

.journal-card__body {
  padding: 28px 0 0;
}

.journal-card__category {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--antique-gold);
  margin-bottom: 12px;
}

.journal-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--charcoal);
  margin-bottom: 14px;
  transition: color 0.3s ease;
}

.journal-card:hover .journal-card__title { color: var(--antique-gold); }

.journal-card__excerpt {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.journal-card__meta {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

/* --- Contact Info Items --- */
.contact-item {
  display: flex;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-light);
}

.contact-item:last-child { border-bottom: none; }

.contact-item__icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--antique-gold);
  font-size: 1rem;
}

.contact-item__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--antique-gold);
  margin-bottom: 6px;
}

.contact-item__value {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.9rem;
  color: var(--himalayan-white);
  line-height: 1.5;
}

/* --- Footer --- */
.footer {
  background: var(--charcoal);
  padding: 80px 0 40px;
  border-top: 1px solid rgba(184,150,62,0.2);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 40px;
}

.footer__brand-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--himalayan-white);
  margin-bottom: 6px;
}

.footer__brand-tagline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--antique-gold);
  margin-bottom: 24px;
}

.footer__brand-desc {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.8;
  color: rgba(245,242,237,0.5);
}

.footer__col-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--antique-gold);
  margin-bottom: 24px;
}

.footer__col-link {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.85rem;
  color: rgba(245,242,237,0.5);
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.footer__col-link:hover { color: var(--himalayan-white); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__copy {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(245,242,237,0.3);
  letter-spacing: 0.05em;
}

.footer__social {
  display: flex;
  gap: 20px;
}

.footer__social-link {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,242,237,0.4);
  transition: color 0.3s ease;
}

.footer__social-link:hover { color: var(--antique-gold); }

/* --- Scroll Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--transition-slow), transform 0.8s var(--transition-slow);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }

/* --- Signature Motion (opt-in; composes with .reveal + .visible) --- */

/* Image "curtain" wipe — pair with .reveal on a wrapper around an <img> */
.reveal-clip {
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--transition-slow);
}
.reveal-clip.visible { clip-path: inset(0 0 0 0); }

/* Slow zoom-out on the image inside a clip wrapper */
.reveal-clip img { transform: scale(1.12); transition: transform 1.6s var(--transition-slow); }
.reveal-clip.visible img { transform: scale(1); }

/* Rise + settle — a softer, springier entrance than the default */
.reveal-rise { transform: translateY(64px); }
.reveal-rise.visible { transform: translateY(0); }

/* Split-word headline reveal — words rise from behind a mask */
.reveal-words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.reveal-words .word__inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.9s var(--transition-slow);
}
.reveal-words.visible .word__inner { transform: translateY(0); }

/* Line that draws itself in horizontally */
.reveal-line {
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 1;
  transition: transform 0.9s var(--transition-slow);
}
.reveal-line.visible { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-clip,
  .reveal-rise,
  .reveal-line,
  .reveal-clip img,
  .reveal-words .word__inner {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}

/* --- Horizontal Rule --- */
.thin-rule {
  width: 100%;
  height: 1px;
  background: var(--border-light);
  border: none;
}

/* Scroll lock while any modal / lightbox is open (experiences modal, astro lightbox) */
body.exp-modal-open { overflow: hidden; }

/* An image that failed to load. Kept in the layout (so cards keep their shape)
   but fully invisible, otherwise the browser paints the alt text on top of the
   container. Set by initMissingImages() in js/main.js. */
img.img-missing {
  visibility: hidden;
}

/* --- Utility Classes --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-gold { color: var(--antique-gold) !important; }
.text-white { color: var(--himalayan-white) !important; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-60 { margin-top: 60px; }
.mt-80 { margin-top: 80px; }

/* --- Responsive --- */

/* Nav width budget: logo 158 + 7 links + CTA ~230 + padding. At 1440px that came
   to ~1444px, which is why the CTA overlapped "Contact". Step the nav down, then
   hand over to the hamburger at 1100px — below that the seven top-level items
   genuinely cannot fit alongside the logo and CTA. */
@media (max-width: 1440px) {
  .nav { padding: 24px 34px; gap: 22px; }
  .nav.scrolled { padding: 16px 34px; }
  .nav__links { gap: 19px; }
  .nav__link { letter-spacing: 0.12em; }
  .nav__cta { letter-spacing: 0.12em; padding: 10px 18px; }
}

@media (max-width: 1260px) {
  .nav__logo { width: 138px; height: 40px; }
  .nav__links { gap: 14px; }
  .nav__link { font-size: 0.67rem; letter-spacing: 0.08em; }
  .nav__cta { font-size: 0.64rem; letter-spacing: 0.08em; padding: 9px 14px; }
}

@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__logo { width: 158px; height: 46px; }
}

@media (max-width: 1200px) {
  .container,
  .container--mid { padding: 0 40px; }
  .container--narrow { padding: 0 40px; }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 992px) {
  :root {
    --section-pad: 80px;
    --section-pad-sm: 60px;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid var(--border-light); }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4) { border-top: 1px solid var(--border-light); }

  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .container,
  .container--mid,
  .container--narrow { padding: 0 24px; }

  .nav { padding: 20px 24px; }
  .nav.scrolled { padding: 14px 24px; }
  /* links/CTA already hidden and the toggle shown from 1100px */

  .page-hero__content { padding: 60px 24px; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2-1 { grid-template-columns: 1fr; }

  .stats-row { grid-template-columns: 1fr 1fr; }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  :root {
    --section-pad: 60px;
    --section-pad-sm: 40px;
  }

  .stats-row { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-top: 1px solid var(--border-light); }
  .stat-item:first-child { border-top: none; }

  .btn { padding: 14px 28px; }
}

/* --- Loading Screen --- */
.loader {
  position: fixed;
  inset: 0;
  background: var(--charcoal);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 24px;
  text-align: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader__brand {
  font-family: var(--font-serif);
  font-weight: 300;
  /* 16 uppercase chars at 1.8rem/0.35em needed ~448px — wider than a phone. */
  font-size: clamp(1.05rem, 4.6vw, 1.8rem);
  /* one tracking scale, shared by this rule AND @keyframes loaderBrandOut */
  --ls: 0.35em;
  --ls-mid: 0.60em;
  --ls-end: 0.66em;
  letter-spacing: var(--ls);
  /* letter-spacing also adds a trailing gap after the LAST character, which
     shifts centred text left by half of it. Indent by one gap to re-centre. */
  text-indent: var(--ls);
  max-width: 100%;
  text-transform: uppercase;
  color: var(--himalayan-white);
}

.loader__line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--antique-gold), transparent);
  animation: loaderLine 1.5s ease forwards;
}

@keyframes loaderLine {
  to { width: min(200px, 62vw); }
}

.loader__sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--antique-gold);
  opacity: 0;
  animation: fadeIn 0.8s ease 0.8s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* ── Click-to-enter loader ──
   A real click is the only thing that lets a browser play the intro sound, so the
   loader waits for one. .is-ready is added by JS once the page has loaded; until
   then the prompt is hidden and the panel is not interactive. */
.loader--gate { cursor: default; }
.loader--gate.is-ready { cursor: pointer; }

.loader__enter {
  margin-top: 6px;
  padding: 13px 30px;
  background: none;
  border: 1px solid rgba(184,150,62,0.5);
  color: var(--antique-gold);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s var(--transition-smooth),
              background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.loader--gate.is-ready .loader__enter {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.loader__enter:hover,
.loader__enter:focus-visible {
  background: var(--antique-gold);
  border-color: var(--antique-gold);
  color: var(--charcoal);
  outline: none;
}
.loader__enter:focus-visible { box-shadow: 0 0 0 3px rgba(184,150,62,0.28); }

/* the whole panel is clickable once ready; the button remains the real control */
.loader--gate.is-ready .loader__enter::after {
  content: '';
  position: fixed;
  inset: 0;
}

/* gentle breathing hint on the prompt, never on reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .loader--gate.is-ready .loader__enter {
    animation: enterPulse 3.4s ease-in-out 1.2s infinite;
  }
  @keyframes enterPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184,150,62,0); }
    50%      { box-shadow: 0 0 0 6px rgba(184,150,62,0.10); }
  }
}

/* ── Loader exit sequence ──
   Runs for the full length of the intro sound. JS measures the audio and sets
   --exit (falling back to 4000ms), so if the mp3 is swapped the choreography
   retimes itself. Every element shares one duration and is staged by keyframe
   percentage, which keeps the phases locked together at any length. */
.loader--gate.is-exiting { pointer-events: none; }
.loader--gate.is-exiting .loader__brand,
.loader--gate.is-exiting .loader__line,
.loader--gate.is-exiting .loader__sub,
.loader--gate.is-exiting .loader__enter,
.loader--gate.is-exiting {
  animation-duration: var(--exit, 4000ms);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: forwards;
  /* the intro rules carry delays (.loader__sub 0.8s, .loader__line via shorthand)
     which would otherwise stall the exit — reset them */
  animation-delay: 0s;
  animation-iteration-count: 1;
}

/* the prompt is the first thing to go */
.loader--gate.is-exiting .loader__enter {
  animation-name: loaderEnterOut;
  pointer-events: none;
}
@keyframes loaderEnterOut {
  0%   { opacity: 1; transform: none; }
  14%  { opacity: 0; transform: translateY(6px) scale(0.97); }
  100% { opacity: 0; transform: translateY(6px) scale(0.97); }
}

/* location label fades early */
.loader--gate.is-exiting .loader__sub { animation-name: loaderSubOut; }
@keyframes loaderSubOut {
  0%   { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}

/* the gold rule draws all the way out, then dissolves */
.loader--gate.is-exiting .loader__line { animation-name: loaderLineOut; }
@keyframes loaderLineOut {
  0%   { width: min(200px, 62vw); opacity: 1; }
  55%  { width: min(76vw, 620px); opacity: 1; }
  88%  { width: min(76vw, 620px); opacity: 0; }
  100% { width: min(76vw, 620px); opacity: 0; }
}

/* the brand name breathes outward, then lifts away */
.loader--gate.is-exiting .loader__brand { animation-name: loaderBrandOut; }
/* Tracking values come from --ls* so the mobile breakpoint controls the animated
   expansion too. Hardcoding them here made the brand widen to 0.66em on every
   screen — 352px on a 360px phone — so it wrapped and shunted left mid-exit,
   even though the static text fitted fine. text-indent tracks letter-spacing to
   cancel the trailing gap, otherwise centring drifts as the tracking grows. */
@keyframes loaderBrandOut {
  0%   { letter-spacing: var(--ls);     text-indent: var(--ls);     opacity: 1; transform: none; }
  70%  { letter-spacing: var(--ls-mid); text-indent: var(--ls-mid); opacity: 1; transform: none; }
  94%  { letter-spacing: var(--ls-end); text-indent: var(--ls-end); opacity: 0; transform: translateY(-10px); }
  100% { letter-spacing: var(--ls-end); text-indent: var(--ls-end); opacity: 0; transform: translateY(-10px); }
}

/* the panel itself only clears at the very end, so the homepage is the payoff */
.loader--gate.is-exiting { animation-name: loaderPanelOut; }
@keyframes loaderPanelOut {
  0%   { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: 0; }
}

/* No motion: hold the panel for the sound, then cut. */
@media (prefers-reduced-motion: reduce) {
  .loader--gate.is-exiting .loader__brand,
  .loader--gate.is-exiting .loader__line,
  .loader--gate.is-exiting .loader__sub,
  .loader--gate.is-exiting .loader__enter { animation: none; }
  .loader--gate.is-exiting .loader__enter { opacity: 0; }
  .loader--gate.is-exiting { animation-name: loaderPanelOut; }
}

@media (max-width: 520px) {
  /* 0.35em tracking is what actually overflows a narrow phone, not the font size */
  .loader { gap: 18px; }
  .loader__brand { --ls: 0.2em; --ls-mid: 0.26em; --ls-end: 0.30em; }
  .loader__sub  { font-size: 0.58rem; letter-spacing: 0.2em; text-indent: 0.2em; }
}

@media (max-width: 600px) {
  .loader__enter { padding: 12px 24px; font-size: 0.6rem; letter-spacing: 0.24em; }
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--warm-white); }
::-webkit-scrollbar-thumb { background: var(--sand-dark); }
::-webkit-scrollbar-thumb:hover { background: var(--antique-gold); }

/* --- Selection --- */
::selection {
  background: var(--antique-gold);
  color: var(--charcoal);
}

/* =========================================
   ENHANCEMENTS — Premium Ladakh Features
   ========================================= */

/* --- Prayer Flag Stripe (Lungta) --- */
.prayer-flag-stripe {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  display: flex;
  z-index: 1001;
  pointer-events: none;
}
.prayer-flag-stripe span {
  flex: 1;
  animation: flagWave 3s ease-in-out infinite;
}
.prayer-flag-stripe span:nth-child(1) { background: #4A90D9; animation-delay: 0s; }
.prayer-flag-stripe span:nth-child(2) { background: #F5F2ED; animation-delay: 0.1s; }
.prayer-flag-stripe span:nth-child(3) { background: #C0392B; animation-delay: 0.2s; }
.prayer-flag-stripe span:nth-child(4) { background: #27AE60; animation-delay: 0.3s; }
.prayer-flag-stripe span:nth-child(5) { background: #F39C12; animation-delay: 0.4s; }

@keyframes flagWave {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* --- Page Transition Bar --- */
.page-transition-bar {
  position: fixed;
  top: 3px;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--antique-gold), var(--gold-light));
  z-index: 10000;
  transition: width 0.4s ease;
  pointer-events: none;
}

/* --- Page Fade Overlay --- */
.page-fade {
  position: fixed;
  inset: 0;
  background: var(--charcoal);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.page-fade.active {
  opacity: 0.6;
  pointer-events: all;
}

/* --- Itinerary Cards --- */
.itinerary-section {
  padding: 100px 0;
  background: var(--warm-white);
}

.itinerary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: var(--container-mid);
  margin: 0 auto;
  padding: 0 48px;
}

.itinerary-card {
  border: 1px solid var(--border-light);
  padding: 48px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.4s ease;
  background: var(--warm-white);
  cursor: pointer;
}

.itinerary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0%;
  background: linear-gradient(to bottom, var(--antique-gold), var(--gold-light));
  transition: height 0.5s ease;
}

.itinerary-card:hover {
  border-color: rgba(184,150,62,0.4);
  transform: translateY(-4px);
}

.itinerary-card:hover::before {
  height: 100%;
}

.itinerary-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--himalayan-white);
  background: var(--charcoal);
  padding: 6px 14px;
  margin-bottom: 28px;
}

.itinerary-card__duration {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  font-weight: 300;
  color: var(--antique-gold);
  line-height: 1;
  margin-bottom: 6px;
}

.itinerary-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 400;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: 24px;
}

.itinerary-card__divider {
  width: 40px;
  height: 1px;
  background: var(--antique-gold);
  margin-bottom: 24px;
}

.itinerary-card__highlights {
  list-style: none;
  margin-bottom: 32px;
}

.itinerary-card__highlights li {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
}

.itinerary-card__highlights li::before {
  content: '◇';
  color: var(--antique-gold);
  font-size: 0.55rem;
  flex-shrink: 0;
}

.itinerary-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--antique-gold);
}

.itinerary-card__arrow {
  width: 20px;
  height: 1px;
  background: var(--antique-gold);
  position: relative;
  flex-shrink: 0;
  transition: transform 0.3s var(--transition-smooth);
}

.itinerary-card:hover .itinerary-card__arrow {
  transform: translateX(6px);
}

.itinerary-card__arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--antique-gold);
  border-top: 1px solid var(--antique-gold);
  transform: rotate(45deg);
}

/* --- Season Widget --- */
.season-widget {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 32px;
  border: 1px solid var(--border-light);
  background: var(--warm-white);
  margin: 0 auto 60px;
  max-width: fit-content;
}

.season-widget__label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--antique-gold);
}

.season-widget__items {
  display: flex;
  gap: 24px;
}

.season-widget__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
}

.season-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.season-dot--open {
  background: #27AE60;
  box-shadow: 0 0 6px rgba(39,174,96,0.5);
  animation: dotPulse 2s ease-in-out infinite;
}

.season-dot--closed {
  background: var(--text-muted);
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(39,174,96,0.4); }
  50% { box-shadow: 0 0 10px rgba(39,174,96,0.7); }
}

.season-widget__status {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0;
}

.season-widget__status--open {
  color: #27AE60;
  border: 1px solid rgba(39,174,96,0.35);
}

.season-widget__status--closed {
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

/* --- Responsive Itinerary & Season --- */
@media (max-width: 768px) {
  .itinerary-grid {
    grid-template-columns: 1fr;
    padding: 0 24px;
  }

  .itinerary-card {
    padding: 32px;
  }

  .season-widget {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .season-widget__items {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* --- Tagify Custom Dark Theme --- */
.tagify {
  --tags-border-color: var(--border-light);
  --tags-hover-border-color: var(--antique-gold);
  --tags-focus-border-color: var(--antique-gold);
  --tag-bg: rgba(184, 150, 62, 0.15);
  --tag-hover: rgba(184, 150, 62, 0.25);
  --tag-text-color: var(--text-primary);
  --tag-text-color--edit: var(--text-primary);
  --tag-pad: 0.3em 0.5em;
  --tag-inset-shadow-size: 1.1em;
  --tag-invalid-color: #D9534F;
  --tag-invalid-bg: rgba(217, 83, 79, 0.5);
  --tag-remove-bg: rgba(184, 150, 62, 0.3);
  --tag-remove-btn-color: var(--text-primary);
  --tag-remove-btn-bg: none;
  --tag-remove-btn-bg--hover: #c77777;
  --input-color: var(--text-primary);
  --placeholder-color: var(--text-muted);
  --placeholder-color-focus: var(--text-muted);
  --loader-size: .8em;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 300;
  border: 1px solid var(--border-light) !important;
  border-radius: 0;
  padding: 4px;
}
.tagify__input::before {
  color: var(--text-muted);
}
.tagify__dropdown {
  background: var(--charcoal);
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.tagify__dropdown__item {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 10px 16px;
}
.tagify__dropdown__item--active {
  background: var(--antique-gold);
  color: var(--charcoal);
}

/* --- Flatpickr Tweaks --- */
.flatpickr-calendar.dark {
  background: var(--charcoal) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  border-radius: 0 !important;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--antique-gold) !important;
  border-color: var(--antique-gold) !important;
  color: var(--charcoal) !important;
}
.flatpickr-day.inRange {
  background: rgba(184, 150, 62, 0.15) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   HAMBURGER CONTRAST

   .nav__toggle span is --himalayan-white, and the nav is transparent until you
   scroll 80px. That is fine over a dark hero image, but journal.html's hero is
   var(--warm-white) — white bars on a white hero, invisible. Rather than
   maintaining a per-page light/dark nav variant, give the toggle its own quiet
   backing on mobile so it reads against any hero, image or not.
   Only applies below 1100px, which is where the toggle is shown at all.
   ============================================================ */
@media (max-width: 1100px) {
  .nav__toggle {
    padding: 9px 8px;
    border-radius: 4px;
    background: rgba(20, 22, 26, 0.38);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transition: background-color 0.3s ease;
  }
  .nav__toggle span {
    /* a hairline at 1px disappears against busy imagery on a high-DPI screen */
    height: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  }
  /* once the bar itself is dark the backing is redundant */
  .nav.scrolled .nav__toggle {
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .nav.scrolled .nav__toggle span { box-shadow: none; }
}