:root {
  --forest: #173A36;
  --forest-deep: #244E48;
  --sand: #E8D8BF;
  --gold: #C69A57;
  --gold-soft: #D9B47C;
  --ivory: #F7F4EE;
  --charcoal: #171A1A;
  --muted: #6B6F6A;
  --hairline: rgba(23, 58, 54, 0.12);
  --hairline-dark: rgba(232, 216, 191, 0.18);
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: auto; scroll-padding-top: 6rem; }
html, body { overflow-x: hidden; }
body {
  background: var(--ivory);
  color: var(--charcoal);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gold); color: #1B1A17; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #EAE3D6; }
::-webkit-scrollbar-thumb { background: #C3B49A; border: 3px solid #EAE3D6; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.h-display {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.h-display em { font-style: italic; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 1.9rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.eyebrow-dark { color: var(--gold-soft); }
.lead { color: var(--muted); line-height: 1.75; }

#siteNav { transition: background-color .5s ease, box-shadow .5s ease, border-color .5s ease, backdrop-filter .5s ease; }
.nav-scrolled,
body.page-inner #siteNav {
  background: rgba(17, 42, 39, 0.86);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(232, 216, 191, 0.14);
  box-shadow: 0 20px 50px -32px rgba(0, 0, 0, 0.85);
}
.nav-shell { transition: padding .5s ease; }
.nav-scrolled .nav-shell,
body.page-inner #siteNav .nav-shell { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s cubic-bezier(.2,.75,.3,1);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }
.nav-link.is-active::after { transform: scaleX(1); }

.lang-select-input {
  appearance: none;
  -webkit-appearance: none;
  height: 2.5rem;
  padding: 0 2rem 0 0.95rem;
  border: 1px solid rgba(247, 244, 238, 0.28);
  border-radius: 999px;
  background: rgba(247, 244, 238, 0.08);
  color: var(--ivory);
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.lang-select-input:hover,
.lang-select-input:focus {
  border-color: var(--gold);
  background: rgba(247, 244, 238, 0.14);
  outline: none;
}
.lang-select-input option { color: var(--charcoal); background: var(--ivory); text-transform: none; letter-spacing: 0; }
.lang-select-caret {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gold-soft);
  pointer-events: none;
  transform: translateY(-50%);
}
.lang-select-input-wide { width: 100%; }

#scrollProgress {
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.9rem 1.75rem;
  border-radius: 999px;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.75,.3,1), background-color .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: #1B1A17; box-shadow: 0 16px 34px -20px rgba(198, 154, 87, .9); }
.btn-gold:hover { background: #D3A968; box-shadow: 0 22px 42px -20px rgba(198, 154, 87, .95); }
.btn-ivory { background: var(--ivory); color: var(--forest); }
.btn-ivory:hover { background: #FFFFFF; }
.btn-forest { background: var(--forest); color: var(--ivory); box-shadow: 0 16px 34px -22px rgba(23, 58, 54, .9); }
.btn-forest:hover { background: var(--forest-deep); }
.btn-ghost { background: transparent; color: var(--ivory); border: 1px solid rgba(247, 244, 238, .42); }
.btn-ghost:hover { background: rgba(247, 244, 238, .12); border-color: rgba(247, 244, 238, .7); }
.btn-outline { background: transparent; color: var(--forest); border: 1px solid rgba(23, 58, 54, .28); }
.btn-outline:hover { background: rgba(23, 58, 54, .06); border-color: var(--forest); }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  cursor: pointer;
  background: none;
  border: 0;
}
.btn-link svg { transition: transform .35s cubic-bezier(.2,.75,.3,1); }
.btn-link:hover svg { transform: translateX(5px); }

.img-zoom { transition: transform 1.1s cubic-bezier(.2,.7,.3,1); will-change: transform; }
.group:hover .img-zoom { transform: scale(1.07); }
.media-frame { position: relative; overflow: hidden; background: #1C2624; }

/*
 * Text scrim for cards that overlay a title on a photo.
 *
 * A bottom-only gradient (from-charcoal/85 via-charcoal/25 to-transparent)
 * fades to nothing, so any bright part of the photo behind the text destroys
 * contrast — measured as low as 1.96:1 (white on near-white), i.e. the title
 * is effectively invisible. This layers two things:
 *
 *   1. a stronger, taller bottom gradient that always reaches the text, and
 *   2. a faint full-bleed wash that caps how light the photo can get anywhere.
 *
 * Together they guarantee a contrast floor regardless of the photo, without
 * flattening the image. Tune with the --scrim-alpha custom property.
 */
.card-scrim {
  --scrim-top: rgba(23, 26, 26, .30);
  --scrim-mid: rgba(23, 26, 26, .62);
  --scrim-bot: rgba(23, 26, 26, .92);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      var(--scrim-bot) 0%,
      var(--scrim-mid) 34%,
      var(--scrim-top) 72%,
      var(--scrim-top) 100%
    );
}

/* Slightly deeper wash where titles are longest / photos brightest. */
.card-scrim-strong {
  --scrim-top: rgba(23, 26, 26, .40);
  --scrim-mid: rgba(23, 26, 26, .70);
  --scrim-bot: rgba(23, 26, 26, .95);
}

/*
 * Tall link panels (#tour / #events). Content sits at the bottom, so the
 * gradient needs a longer, denser lower band than a short card.
 */
.card-scrim-panel {
  background:
    linear-gradient(
      to top,
      rgba(16, 34, 32, .96) 0%,
      rgba(16, 34, 32, .88) 28%,
      rgba(16, 34, 32, .64) 55%,
      rgba(16, 34, 32, .38) 100%
    );
}

.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  pointer-events: none;
  border-radius: inherit;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(247, 244, 238, .28);
  background: rgba(15, 43, 40, .42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.5rem 0.95rem;
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ivory);
}
.hover-caption {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.group:hover .hover-caption { opacity: 1; transform: translateY(0); }

.step-rule {
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

.field {
  min-height: 3.25rem;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(23, 58, 54, .16);
  background: var(--ivory);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  color: var(--charcoal);
  outline: none;
  transition: border-color .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.field::placeholder { color: #9A9E98; }
.field:focus { border-color: var(--gold); background: #FFFFFF; box-shadow: 0 0 0 4px rgba(198, 154, 87, .16); }
.field[aria-invalid="true"] { border-color: #B42318; background: #FFF8F7; }
.field-error { color: #B42318; }
.contact-panel { box-shadow: 0 40px 80px -60px rgba(23, 58, 54, .65); }

select.field {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173A36' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px 18px;
  padding-right: 2.75rem;
}

#waFloat { box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); }
#waFloat:hover { transform: translateY(-3px); }
#waFloat { transition: transform .35s cubic-bezier(.2,.75,.3,1), opacity .4s ease; }

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

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

body.page-inner:not(.page-bleed) main#main { padding-top: 5.25rem; }
.form-success {
  border: 1px solid rgba(23, 58, 54, 0.12);
  background: #fff;
  border-radius: 1.25rem;
  padding: 1rem 1.15rem;
  color: var(--forest);
}

/*
 * Pre-paint guard for every GSAP-revealed element.
 *
 * GSAP's .from() only applies its start state once the JS runs, so without this
 * the markup paints in its FINAL position and then snaps backwards the moment
 * the script initialises — a visible flash plus a layout jump on every load.
 *
 * Only `opacity` is declared here. Transforms are deliberately left to GSAP:
 * a CSS `transform` on an element GSAP also animates (notably `scale` on
 * .hero-bg) is read back as the tween's END value, so the animation resolves to
 * itself and the element stays frozen at its start state.
 *
 * `js-anim` is set by an inline script in <head>, so this only applies to
 * visitors who will actually get the animation. Without JS the class is never
 * added and the content stays plainly visible.
 */
.js-anim .hero-eyebrow,
.js-anim .hero-line,
.js-anim .hero-copy,
.js-anim .hero-cta,
.js-anim .hero-strip,
.js-anim .intro-reveal,
.js-anim .split-card,
.js-anim .world-label,
.js-anim .dest-kicker,
.js-anim .dest-title,
.js-anim .dest-copy,
.js-anim .dest-card,
.js-anim .event-reveal,
.js-anim .event-frame,
.js-anim .process-kicker,
.js-anim .process-title,
.js-anim .process-step,
.js-anim .why-reveal,
.js-anim .why-item,
.js-anim .gallery-kicker,
.js-anim .gallery-title,
.js-anim .gallery-copy,
.js-anim .gallery-item,
.js-anim .audience-kicker,
.js-anim .audience-title,
.js-anim .audience-item,
.js-anim .ig-kicker,
.js-anim .ig-title,
.js-anim .ig-copy,
.js-anim .ig-card,
.js-anim .cta-reveal,
.js-anim .contact-reveal,
.js-anim .contact-panel {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  /* No animation is going to run, so never hide anything. */
  .js-anim .hero-eyebrow,
  .js-anim .hero-line,
  .js-anim .hero-copy,
  .js-anim .hero-cta,
  .js-anim .hero-strip,
  .js-anim .intro-reveal,
  .js-anim .split-card,
  .js-anim .world-label,
  .js-anim .dest-kicker,
  .js-anim .dest-title,
  .js-anim .dest-copy,
  .js-anim .dest-card,
  .js-anim .event-reveal,
  .js-anim .event-frame,
  .js-anim .process-kicker,
  .js-anim .process-title,
  .js-anim .process-step,
  .js-anim .why-reveal,
  .js-anim .why-item,
  .js-anim .gallery-kicker,
  .js-anim .gallery-title,
  .js-anim .gallery-copy,
  .js-anim .gallery-item,
  .js-anim .audience-kicker,
  .js-anim .audience-title,
  .js-anim .audience-item,
  .js-anim .ig-kicker,
  .js-anim .ig-title,
  .js-anim .ig-copy,
  .js-anim .ig-card,
  .js-anim .cta-reveal,
  .js-anim .contact-reveal,
  .js-anim .contact-panel {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .img-zoom, .group:hover .img-zoom { transition: none; transform: none; }
  .btn:hover, #waFloat:hover { transform: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 480px) {
  .btn { padding-left: 1.35rem; padding-right: 1.35rem; letter-spacing: 0.12em; }
}