/* ==========================================================================
   M K PRIVÉ TRAVELS — LUXURY DESIGN SYSTEM
   Built to the client brief: minimal, cinematic, editorial luxury (Aman
   Resorts / Abercrombie & Kent / Black Tomato register), replacing the
   previous dark "spatial UI" glassmorphism direction entirely — that
   design language (drifting glow orbs, frosted blur panels, 3D tilt) is
   intentionally NOT carried forward here, since it conflicts with the
   brief's explicit call for minimalism and generous white space.

   COLOR PALETTE (exact values from the client brief):
     --navy   #0F1B2D  Deep Midnight Navy — backgrounds, nav, footer, hero overlay
     --ivory  #F8F5EF  Ivory White — main content background
     --gold   #C9A86A  Champagne Gold — CTAs, icons, dividers, hover (used sparingly)
     --gold-hover #B8945A — primary button hover, per brief
     --sand   #D8C8A8  Sand Beige — cards, testimonials, enquiry sections
     --slate  #4A5568  Slate Grey — secondary/supporting text

   TYPE: Cormorant Garamond (headings) + Manrope (body), per brief.

   ACCESSIBILITY NOTE ON THE BRIEF'S BUTTON SPEC:
   The brief specifies the secondary button as "Champagne Gold border,
   Champagne Gold text" on a transparent background. Measured against the
   Ivory body background, gold-on-ivory text is only ~2.1:1 contrast —
   well below WCAG AA's 4.5:1 minimum, i.e. genuinely hard to read. Gold
   text on the Navy background, however, measures 7.65:1 (comfortably
   passes AAA) — so the gold-outline button is used exactly as specified
   wherever it sits on navy (hero, footer), and a navy-outline variant
   (same visual language, navy border/text instead) is used anywhere an
   outline button appears on the light Ivory background instead.

   HERO SCRIM: tuned the same way — alpha 0.55 + backdrop-filter
   brightness(0.5) so hero text stays readable (9.25:1 white / 8.5:1
   ivory) even against a worst-case pure-white placeholder photo, once
   real photography is added.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* ---- BRAND COLORS (exact brief values — change only these to re-theme) ---- */
  --navy: #0F1B2D;
  --navy-soft: #16273D;
  /* slightly lighter navy for card-on-navy contexts */
  --ivory: #F8F5EF;
  --gold: #C9A86A;
  --gold-hover: #B8945A;
  --sand: #D8C8A8;
  --slate: #4A5568;
  --white: #FFFFFF;

  --text-on-navy: #F8F5EF;
  --text-on-navy-muted: rgba(248, 245, 239, 0.72);
  --text-on-ivory: #1C2530;
  /* near-navy, slightly softer than pure navy for body copy */
  --text-on-ivory-muted: var(--slate);

  --border-hairline: rgba(15, 27, 45, 0.12);
  --border-hairline-on-navy: rgba(248, 245, 239, 0.18);

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- LAYOUT ---- */
  --radius: 6px;
  /* "rounded image corners (subtle)" per brief */
  --radius-sm: 4px;
  --max-width: 1200px;
  --shadow-soft: 0 8px 28px rgba(15, 27, 45, 0.08);
  /* soft navy-tinted shadow */
  --shadow-medium: 0 16px 48px rgba(15, 27, 45, 0.14);

  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Reset / cross-browser base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-on-ivory-muted);
  background: var(--ivory);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}

/* Unify native <select> across browsers with a custom arrow */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%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='%234A5568' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px !important;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button {
  -webkit-appearance: none;
  appearance: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .container {
    padding: 0 40px;
  }
}

@media (min-width: 1100px) {
  .container {
    padding: 0 60px;
  }
}

/* ---- Typography — elegant, editorial, generously spaced ---- */
h1,
h2,
h3,
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--text-on-ivory);
  margin: 0 0 0.45em;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 500;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
}

h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 600;
}

p {
  margin: 0 0 1em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 14px;
}

/* ---- Thin gold divider ("Please incorporate: Thin champagne gold divider lines") ---- */
.gold-divider {
  border: none;
  border-top: 1px solid var(--gold);
  width: 64px;
  margin: 0 0 28px;
  opacity: 0.85;
}

.gold-divider.center {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn:active {
  transform: scale(0.98);
}

/* Primary: solid champagne gold / navy text, per brief exactly */
.btn-primary {
  background: var(--gold);
  color: var(--navy);
}

.btn-primary:hover {
  background: var(--gold-hover);
}

/* Outline-gold: for use on NAVY backgrounds (hero, footer) — see accessibility
   note at the top of this file for why this is scoped to dark backgrounds. */
.btn-outline-gold {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}

.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--navy);
}

/* Outline-navy: same visual language, for use on the light Ivory background */
.btn-outline-navy {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn-outline-navy:hover {
  background: var(--navy);
  color: var(--ivory);
}

/* ---- Header / nav ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 10px;
  gap: 16px;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-on-navy);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.logo span {
  color: var(--gold);
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-links a {
  position: relative;
  color: var(--text-on-navy-muted);
  padding-bottom: 6px;
  display: inline-block;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-on-navy);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-on-navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 10px;
  margin: -10px;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    flex-direction: column;
    padding: 24px;
    gap: 22px;
    display: none;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    border-top: 1px solid var(--border-hairline-on-navy);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    display: block;
    padding: 4px 0 8px;
  }
}

/* ==========================================================================
   HERO — full-bleed cinematic media background with navy scrim.
   Same technical structure as before (.hero-media / .hero-scrim / three
   swap-in options in an HTML comment), restyled for the light-luxury
   direction: taller (near full-viewport), centered elegant text, slower/
   calmer entrance animation.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: 100px 24px;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 640px) {
  .hero-inner {
    padding: 120px 40px;
  }
}

.hero .eyebrow {
  color: var(--gold);
}

.hero h1 {
  color: var(--text-on-navy);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.hero p.lead {
  color: var(--text-on-navy-muted);
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  gap: 18px;
  margin-top: 36px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-actions .btn {
  flex: 0 1 auto;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-media-img,
.hero-media video,
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide {
  opacity: 0;
  transition: opacity 1.6s ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-media-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 60%, #0A1220 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-media-placeholder .placeholder-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(248, 245, 239, 0.4);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-align: center;
  padding: 0 20px;
}

.hero-media-placeholder .placeholder-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--gold);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 27, 45, 0.55);
  -webkit-backdrop-filter: brightness(0.5);
  backdrop-filter: brightness(0.5);
}

/* ---- Generic supporting media placeholder (showcase sections, sidebars) ---- */
.media-placeholder {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 220px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-soft);
}

.media-placeholder img,
.media-placeholder video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-placeholder .placeholder-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(248, 245, 239, 0.45);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-align: center;
  padding: 0 18px;
}

.media-placeholder .placeholder-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--gold);
}

.media-placeholder.video .placeholder-icon {
  width: 50px;
  height: 50px;
  background: rgba(201, 168, 106, 0.12);
  font-size: 1.2rem;
}

/* ---- Circular avatar placeholder (guide/team photos) ---- */
.avatar-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy));
  border: 1px solid rgba(201, 168, 106, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.6rem;
  overflow: hidden;
  position: relative;
}

.avatar-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Sections — generous white space throughout ---- */
.section {
  padding: 64px 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .section {
    padding: 88px 0;
  }
}

@media (min-width: 1100px) {
  .section {
    padding: 120px 0;
  }
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-navy {
  background: var(--navy);
  color: var(--text-on-navy-muted);
}

.section-navy h2,
.section-navy h3 {
  color: var(--text-on-navy);
}

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

/* ---- Package cards — clean, editorial, soft shadow, no glass blur ---- */
.package-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 640px) {
  .package-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
  }
}

.package-card {
  background: var(--white);
  color: var(--text-on-ivory);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.package-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
}

.package-card-image {
  height: 260px;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy));
  position: relative;
}

.package-card-tier {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
}

.package-card-tier.Premium {
  background: var(--gold);
  color: var(--navy);
}

.package-card-tier.Economy {
  background: var(--white);
  color: var(--navy);
}

.package-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.package-card-body h3 {
  color: var(--text-on-ivory);
}

.package-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  font-size: 0.78rem;
  color: var(--slate);
  border-top: 1px solid var(--border-hairline);
  padding-top: 16px;
  margin-top: auto;
}

.package-card-price {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.3rem;
}

/* ---- Filter bar ---- */
.filter-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 36px;
}

.filter-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-chip {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-hairline);
  background: transparent;
  color: var(--slate);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
  min-height: 42px;
  -webkit-tap-highlight-color: transparent;
}

.filter-chip.active,
.filter-chip:hover {
  border-color: var(--gold);
  color: var(--navy);
  background: rgba(201, 168, 106, 0.08);
}

/* ---- Steps ---- */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
  }
}

.steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step-marker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Value / testimonial cards (sand-beige, per brief) ---- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 640px) {
  .value-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 28px;
  }
}

.value-card {
  background: var(--sand);
  border-radius: var(--radius);
  padding: 32px 28px;
  color: var(--text-on-ivory);
}

.value-card h3 {
  color: var(--text-on-ivory);
}

.value-card p {
  color: var(--slate);
}

/* ---- Gallery ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
  }
}

.gallery-grid figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: 160px;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy) 70%);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.gallery-grid figure:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.gallery-grid figcaption {
  position: relative;
  z-index: 1;
  color: var(--text-on-navy);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.gallery-grid img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-grid .placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gold);
}

.gallery-grid figure.video .placeholder-icon {
  width: 54px;
  height: 54px;
  background: rgba(201, 168, 106, 0.14);
  font-size: 1.3rem;
}

/* ---- Forms ---- */
.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-hairline);
}

@media (min-width: 640px) {
  .form-card {
    padding: 44px;
  }
}

.form-row {
  margin-bottom: 20px;
}

.form-row-inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 480px) {
  .form-row-inline {
    grid-template-columns: repeat(3, 1fr);
  }
}

.form-row label,
.form-row-inline label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--slate);
  margin-bottom: 8px;
}

.form-row input,
.form-row textarea,
.form-row select,
.form-row-inline input,
.form-row-inline select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--ivory);
  color: var(--text-on-ivory);
  min-height: 50px;
  line-height: 1.3;
  transition: border-color 0.25s ease;
}

.form-row textarea {
  min-height: 100px;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
}

.form-hint {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 8px;
}

.form-status {
  margin-top: 16px;
  font-weight: 600;
}

.form-status.success {
  color: #3D6B4F;
}

.form-status.error {
  color: #A13A2C;
}

.hp-field {
  position: absolute;
  left: -9999px;
}

.radio-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.radio-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-on-ivory);
  font-size: 0.95rem;
  min-height: 44px;
}

.radio-row input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
}

/* ---- Tier selector ---- */
.tier-select {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 420px) {
  .tier-select {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

.tier-option {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 18px;
  cursor: pointer;
  transition: all 0.25s ease;
  background: var(--white);
}

.tier-option:hover {
  border-color: var(--gold);
}

.tier-option.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 106, 0.08);
}

.tier-option h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-on-ivory);
  font-weight: 600;
}

.tier-option .price-line {
  font-size: 0.82rem;
  color: var(--slate);
}

/* ---- Hotel star selector ---- */
.star-select {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.star-option {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.25s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  background: var(--white);
  color: var(--text-on-ivory);
  -webkit-tap-highlight-color: transparent;
}

.star-option:hover {
  border-color: var(--gold);
}

.star-option.selected {
  border-color: var(--gold);
  background: rgba(201, 168, 106, 0.12);
  color: #8A6A2E;
}

/* ---- Destination picker ---- */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 480px) {
  .destination-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
}

.destination-tile {
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.25s ease;
  box-shadow: var(--shadow-soft);
}

.destination-tile:hover {
  transform: translateY(-3px);
}

.destination-tile.selected {
  border-color: var(--gold);
}

.destination-tile-image {
  height: 96px;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy));
  position: relative;
}

.destination-tile-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

.destination-tile.selected .destination-tile-check {
  display: flex;
}

.destination-tile-body {
  background: var(--white);
  padding: 10px 12px;
}

.destination-tile-body h4 {
  margin: 0;
  font-size: 0.86rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-on-ivory);
}

.selected-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 42px;
}

.route-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: var(--text-on-navy);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
}

.route-pill button {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px;
  margin: -4px;
}

.route-arrow {
  color: var(--slate);
  font-size: 1rem;
}

/* ---- Calendar / booking widget ---- */
.calendar-widget {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-hairline);
}

@media (min-width: 480px) {
  .calendar-widget {
    padding: 30px;
  }
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.calendar-header button {
  background: none;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  color: var(--navy);
  font-weight: 700;
  min-height: 40px;
}

.calendar-header strong {
  font-size: 0.95rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-on-ivory);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-grid .dow {
  font-size: 0.64rem;
  text-align: center;
  color: var(--slate);
  padding-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.calendar-day {
  aspect-ratio: 1;
  min-height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  border: 1px solid var(--border-hairline);
  background: var(--ivory);
  cursor: pointer;
  color: var(--text-on-ivory);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.calendar-day:not(.past):not(.empty):hover {
  border-color: var(--gold);
}

.calendar-day.past {
  opacity: 0.35;
  cursor: not-allowed;
}

.calendar-day.in-range {
  background: var(--navy);
  color: var(--ivory);
  border-color: var(--navy);
}

.calendar-day.range-start {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  font-weight: 700;
}

.calendar-day.empty {
  visibility: hidden;
}

/* ---- Price summary ---- */
.price-summary {
  background: var(--navy);
  color: var(--text-on-navy);
  border-radius: var(--radius-sm);
  padding: 22px 26px;
}

.price-summary .total {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  color: var(--gold);
  font-weight: 600;
  word-break: break-word;
}

.price-summary .breakdown {
  font-size: 0.85rem;
  color: var(--text-on-navy-muted);
  margin-top: 8px;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--navy);
  color: var(--text-on-navy-muted);
  padding: 72px 0 calc(28px + var(--safe-bottom));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 44px;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
  }
}

.footer-grid h4 {
  color: var(--text-on-navy);
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
  font-weight: 700;
}

.footer-grid a {
  display: block;
  margin-bottom: 10px;
  color: var(--text-on-navy-muted);
  padding: 4px 0;
}

.footer-grid a:hover {
  color: var(--gold);
}

.social-row {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}

.social-row a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-hairline-on-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.social-row a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.footer-bottom {
  border-top: 1px solid var(--border-hairline-on-navy);
  padding-top: 26px;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

/* ---- WhatsApp float (kept functional; brand green retained deliberately —
   it's a recognized utility color, not part of the site's own palette) ---- */
.whatsapp-float {
  position: fixed;
  bottom: calc(22px + var(--safe-bottom));
  right: 22px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-medium);
  z-index: 200;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.06);
}

/* ---- Map ---- */
.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.map-embed iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

@media (min-width: 640px) {
  .map-embed iframe {
    height: 400px;
  }
}

/* ---- Utility ---- */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 960px) {
  .two-col {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
  }
}

.stat {
  font-size: 0.85rem;
  color: var(--slate);
}

/* ---- Motion setup (GSAP hooks via data-reveal) ---- */
[data-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Small-phone safety net ---- */
@media (max-width: 380px) {
  .container {
    padding: 0 18px;
  }

  .btn {
    padding: 13px 24px;
    font-size: 0.78rem;
  }

  .package-grid,
  .value-grid,
  .steps {
    grid-template-columns: 1fr;
  }
}