/* =========================================================
   BALI SIGNATURE — BRAND TOKENS
   Colors, fonts and sizes below are taken directly from the
   approved "Bali Signature Brand Guidelines" design file.
   Do not add new colors or fonts here — reuse these variables.
   ========================================================= */
:root {
  /* Colors — "Dark Forward" direction, chosen after reviewing palette
     options together. The whole page now lives on a warm near-black
     ground (not just the header/footer), with gold as the accent and
     warm ivory as the primary text color. */
  --bg: #221D19;              /* page background — warm near-black */
  --card: #2C2521;            /* elevated panel / card background */
  --sand: #FBF6EF;            /* light/cream tone — used as TEXT color on dark grounds throughout (not a background in this theme) */
  --paper: #FBF6EF;           /* letterhead-style paper white (brand-reference only, unused on-site) */
  --ink: #15130F;             /* Ink Black — darkest layer: header, footer, hero/tile scrims */
  --ink-deep: #0F0D0B;        /* deepest dark, presentation-style moments */
  --charcoal: #F3E9DC;        /* PRIMARY TEXT color on the (dark) page — warm ivory */
  --gold: #C9A46B;            /* Signature Gold — primary accent (buttons, icons, dark-bg text) */
  --gold-hover: #8f7038;      /* darkened gold — button background hover only (self-contained, not text) */
  --gold-bright: #E3C48D;     /* brightened gold — link/text hover emphasis on dark grounds */
  --gold-text: #C9A46B;       /* on this dark page, plain Signature Gold already reads clearly (~8:1) */
  --champagne: #EFE6D8;       /* Warm Ivory — secondary accent text */
  --champagne-light: #EFE6D8; /* kept as alias for compatibility */
  /* Legacy alias so existing component rules keep working under the new palette */
  --clay: var(--gold);
  --clay-hover: var(--gold-hover);

  --text-muted: #a89370;      /* eyebrows / small labels, light-appropriate */
  --text-caps: #baa88c;       /* uppercase descriptor text, light-appropriate */
  --text-secondary: #cbb99a;  /* body copy, secondary, light-appropriate */
  --text-dark-secondary: #cbb99a; /* body copy on the darkest (--ink) sections */
  --text-dark-muted: #8f7a52;     /* labels on the darkest (--ink) sections */

  --divider: #3a332c;
  --divider-light: #4a4038;
  --divider-dark: #3a332c;
  --dashed-dark: #6b5f42;

  /* Type — single Jost family for headings, body, and UI */
  --font-headline: 'Jost', sans-serif;
  --font-body: 'Jost', sans-serif;

  /* Layout */
  --max-width: 1180px;
  --radius: 3px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--charcoal);
  line-height: 1.6;
}

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

a { color: var(--gold-text); text-decoration: none; }
a:hover { color: var(--gold-bright); }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

h1, h2, h3, h4 {
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 16px;
}

h1 { font-size: 52px; line-height: 1.1; }
h2 { font-size: 34px; line-height: 1.2; }
h3 { font-size: 24px; line-height: 1.3; }

p { margin: 0 0 16px; color: var(--text-secondary); }

.descriptor {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-caps);
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.btn-outline {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--charcoal);
}
.btn-outline:hover { border-color: var(--gold-text); color: var(--gold-text); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  background: var(--ink);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(201, 164, 107, 0.25);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand svg { flex-shrink: 0; }
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.brand-logo-footer { height: 26px; }

.brand-name {
  font-family: var(--font-headline);
  font-size: 21px;
  font-weight: 600;
  color: var(--champagne);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: 14px;
  color: var(--text-dark-secondary);
  font-weight: 500;
}

.main-nav a.active,
.main-nav a:hover { color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  margin: 5px 0;
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    width: 100%;
  }
  .main-nav.open { display: block; }
  .site-header .wrap { flex-wrap: wrap; }
  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 12px 0 18px;
  }
  .main-nav li { border-top: 1px solid rgba(201, 164, 107, 0.2); }
  .main-nav a { display: block; padding: 12px 0; }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section {
  padding: 72px 0;
  border-top: 1px solid var(--divider);
}
.section:first-of-type { border-top: none; }

.section-tight { padding: 48px 0; }

.hero {
  padding: 88px 0 64px;
}

.hero .descriptor { margin-bottom: 18px; }
.hero h1 { margin-bottom: 20px; }
.hero p.lead {
  font-size: 18px;
  max-width: 640px;
  color: var(--text-secondary);
}
.hero .cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* =========================================================
   TRUST BAR
   Quiet, factual line — reuses only already-approved facts
   (DMC status, founder-led positioning, Amini Group).
   ========================================================= */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 13px;
  color: var(--text-secondary);
}
.trust-bar .sep { color: var(--divider); }

/* =========================================================
   FULL-BLEED PHOTO HERO
   Text overlays the photo on a bottom-anchored scrim, so it
   stays legible whether a real photo or the flat placeholder
   color is showing.
   ========================================================= */
.hero-photo {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  border-radius: 0;
}
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,19,15,0) 35%, rgba(21,19,15,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero-photo.missing::after {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  background: transparent;
  font-size: 11px;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 48px;
  max-width: 720px;
}
.hero-content .descriptor { color: var(--champagne-light); margin-bottom: 16px; }
.hero-content h1 { color: var(--sand); margin-bottom: 18px; }
.hero-content p.lead { color: var(--text-dark-secondary); }
.hero-content .cta-row { margin-top: 26px; }
.hero-content .btn-outline { color: var(--sand); border-color: var(--text-dark-secondary); }
.hero-content .btn-outline:hover { border-color: var(--champagne-light); color: var(--champagne-light); }

@media (max-width: 600px) {
  .hero-photo { min-height: 460px; }
  .hero-content { padding: 28px; }
}

.ratio-tile { aspect-ratio: 5 / 4; }

/* =========================================================
   CLOSING CTA BAND
   ========================================================= */
.closing-band {
  background: var(--ink);
}
.closing-band-inner {
  text-align: center;
  padding: 24px 0;
}
.closing-band .descriptor { color: var(--text-dark-muted); margin-bottom: 24px; }
.closing-band .cta-row { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.closing-band .btn-outline { color: var(--sand); border-color: var(--text-dark-secondary); }
.closing-band .btn-outline:hover { border-color: var(--champagne-light); color: var(--champagne-light); }

/* =========================================================
   MICRO CTA (Collections page)
   ========================================================= */
.micro-cta { margin-top: 18px; }
.micro-cta a { font-size: 13px; font-weight: 600; color: var(--gold-text); }
.micro-cta a:hover { color: var(--gold-bright); }

/* =========================================================
   PULL QUOTE (About page)
   ========================================================= */
.pull-quote {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--charcoal);
  max-width: 20ch;
  margin: 0 0 8px;
}
.pull-quote::before { content: "\201C"; color: var(--champagne); }

/* =========================================================
   PARTNER PILLARS + HOW IT WORKS
   ========================================================= */
.pillar {
  background: var(--card);
  border-radius: var(--radius);
  border-top: 3px solid var(--clay);
  padding: 28px;
}
.pillar h3 { font-size: 17px; margin-bottom: 10px; }
.pillar p { font-size: 14px; margin: 0; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}
.step h4 { margin: 0 0 6px; font-size: 16px; }
.step p { margin: 0; font-size: 13.5px; }

/* =========================================================
   CONTACT PATHS (Contact page)
   ========================================================= */
.contact-path .eyebrow { margin-bottom: 16px; }

/* =========================================================
   TESTIMONIALS — quiet empty state
   ========================================================= */
.testimonial-quiet-msg {
  grid-column: 1 / -1;
  text-align: center;
  padding: 32px;
  border: 1px dashed var(--divider);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

/* =========================================================
   PHOTO PLACEHOLDERS
   Swap photos by dropping a file with the exact filename
   into the /images folder — no code editing required.
   ========================================================= */
.photo-placeholder {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}
.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.hotel-card:hover .photo-placeholder img { transform: scale(1.07); }
.photo-placeholder.missing::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--card);
  text-align: center;
  padding: 12px;
}

.ratio-hero { aspect-ratio: 16 / 9; }
.ratio-wide { aspect-ratio: 21 / 9; }
.ratio-card { aspect-ratio: 4 / 3; }
.ratio-portrait { aspect-ratio: 3 / 4; }

/* =========================================================
   CARDS — collections / founders / testimonials
   ========================================================= */
.grid {
  display: grid;
  gap: 28px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-body { padding: 24px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14px; margin-bottom: 12px; }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.tag {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 999px;
  padding: 5px 12px;
}

.founder-card { text-align: center; }
.founder-card .photo-placeholder { width: 100%; aspect-ratio: 3 / 4; height: auto; margin: 0 auto 24px; }
.founder-card .card-body { padding: 0; }
.founder-name { font-family: var(--font-headline); font-size: 19px; font-weight: 600; color: var(--charcoal); margin-bottom: 2px; }
.founder-title { font-size: 13px; color: var(--gold-text); margin-bottom: 12px; }

.testimonial-card {
  background: var(--card);
  border: 1px dashed var(--divider);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  gap: 12px;
}
.testimonial-card .quote-mark {
  font-family: var(--font-headline);
  font-size: 40px;
  color: var(--champagne);
  line-height: 1;
}
.testimonial-card .coming-soon {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.testimonial-card blockquote {
  margin: 0;
  font-size: 16px;
  color: var(--charcoal);
  font-style: italic;
}
.testimonial-card .author {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* =========================================================
   PARTNER / CONTACT
   ========================================================= */
.highlight-box {
  background: var(--card);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius);
  padding: 32px;
}

.contact-card {
  background: var(--ink);
  border-radius: var(--radius);
  padding: 40px;
  color: var(--sand);
  max-width: 420px;
}
.contact-card .founder-name-lg { font-family: var(--font-headline); font-size: 20px; color: var(--sand); font-weight: 600; }
.contact-card .founder-title { color: var(--text-dark-muted); margin-bottom: 20px; display: block; }
.contact-card .contact-line { color: var(--text-dark-secondary); font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.contact-card a { color: var(--text-dark-secondary); }
.contact-card a:hover { color: var(--sand); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: var(--sand);
  padding: 56px 0 32px;
}
.site-footer .brand-name { color: var(--sand); }
.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--divider-dark);
}
.footer-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.footer-nav a { color: var(--text-dark-secondary); font-size: 14px; }
.footer-nav a:hover { color: var(--sand); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dark-muted);
  letter-spacing: 0.03em;
}

@media (max-width: 600px) {
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .section { padding: 48px 0; }
  .hero { padding: 56px 0 40px; }
}

/* =========================================================
   TILES — dense photo-forward browsing cards, used only for
   Package and Tour listings (Collections/Tours pages), not
   site-wide. Full-bleed photo + overlaid text, same scrim
   technique as the homepage hero.
   ========================================================= */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }

/* Full-bleed variant: edge-to-edge, no gaps or rounded corners —
   used for the homepage Tours showcase. */
.tile-grid.bleed { gap: 0; }
.tile-grid.bleed .tile { border-radius: 0; min-height: 420px; }

.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background: var(--card);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.5s ease; }
.tile:hover img { transform: scale(1.07); }
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,19,15,0) 30%, rgba(21,19,15,0.88) 100%);
  z-index: 1;
  pointer-events: none;
}
.tile.missing::after {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 14px;
  background: transparent;
  font-size: 10px;
}
.tile-content { position: relative; z-index: 2; padding: 22px; width: 100%; }
.tile-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.tile-title { font-family: var(--font-headline); font-weight: 600; font-size: 19px; color: var(--sand); margin: 0 0 8px; line-height: 1.25; }
.tile-desc { font-size: 13px; color: var(--text-dark-secondary); margin: 0 0 14px; }
.tile-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid var(--sand);
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tile-cta:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.tile-cta.disabled { color: var(--text-dark-muted); border-color: var(--text-dark-muted); cursor: default; pointer-events: none; }

/* Feature tile: content spread across top and bottom corners
   (eyebrow+title top-left, short line top-right, description
   bottom-left, CTA bottom-right) — used on the homepage Tours
   showcase. */
.tile-grid.bleed .tile::before {
  background: linear-gradient(180deg, rgba(21,19,15,0.6) 0%, rgba(21,19,15,0.15) 45%, rgba(21,19,15,0.7) 100%);
  transition: background 0.4s ease;
}
.tile-feature { align-items: stretch; }

/* On pointer devices, the description and CTA stay hidden until hover,
   when the scrim deepens and they animate up into view (CTA lagging
   slightly behind the description). Touch devices have no hover state,
   so they keep both permanently visible instead of hiding content
   behind an interaction that doesn't exist for them. */
@media (hover: hover) and (pointer: fine) {
  .tile-grid.bleed .tile-feature:hover::before {
    background: linear-gradient(180deg, rgba(21,19,15,0.15) 0%, rgba(21,19,15,0.15) 45%, rgba(21,19,15,0.92) 100%);
  }
  .tile-feature .tile-desc,
  .tile-feature .tile-cta {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .tile-feature .tile-desc { transition-delay: 0.05s; }
  .tile-feature .tile-cta { transition-delay: 0.12s; }
  .tile-feature:hover .tile-desc,
  .tile-feature:hover .tile-cta {
    opacity: 1;
    transform: translateY(0);
  }
}
.tile-feature .tile-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
}
.tile-feature .tile-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.tile-feature .tile-title { font-size: 26px; }
.tile-feature .tile-secondary {
  font-style: italic;
  font-size: 16px;
  color: var(--champagne);
  text-align: right;
  white-space: nowrap;
}
.tile-feature .tile-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.tile-feature .tile-desc { margin: 0; max-width: 60%; }

/* =========================================================
   TOUR COLLECTION SECTIONS — dark, gallery-style presentation
   for the Tours page, mirroring how the brand's own guidelines
   use dark grounds for high-impact showcase moments.
   ========================================================= */
.tour-collection {
  background: var(--ink);
  padding: 72px 0;
  border-top: 1px solid var(--divider-dark);
}
.tour-collection-head { text-align: center; margin-bottom: 48px; }
.tour-collection-head .descriptor { color: var(--text-dark-muted); margin-bottom: 14px; }
.tour-collection-head h2 { color: var(--sand); margin-bottom: 10px; }
.tour-collection-head p { color: var(--text-dark-secondary); max-width: 56ch; margin: 0 auto; }

.tour-row-list { display: flex; flex-direction: column; gap: 56px; }
.tour-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) { .tour-row { grid-template-columns: 1fr; gap: 24px; } }
.tour-row .photo-placeholder { position: relative; }
.tour-row .badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.tour-row-index {
  font-family: var(--font-headline);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 10px;
}
.tour-row h3 { color: var(--sand); font-size: 28px; margin-bottom: 12px; }
.tour-row p { color: var(--text-dark-secondary); margin-bottom: 18px; }
.tour-row-cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
}
.tour-row-cta:hover { color: var(--gold); }
.tour-row-cta.disabled { color: var(--text-dark-muted); border-color: var(--divider-dark); cursor: default; pointer-events: none; }
.tour-collection-empty {
  text-align: center;
  color: var(--text-dark-muted);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 24px;
  border: 1px dashed var(--divider-dark);
  border-radius: var(--radius);
}

/* Sub-category grouping within a tab (e.g. Day Tours -> Mount Batur) */
.tour-subgroup { margin-bottom: 56px; }
.tour-subgroup:last-child { margin-bottom: 0; }
.tour-subgroup-label {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider-dark);
}

/* =========================================================
   TOUR TABS — Day / Overnight / Couple
   ========================================================= */
.tab-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px 0 8px;
  background: var(--ink);
}
.tab-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid var(--divider-dark);
  background: transparent;
  color: var(--text-dark-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { border-color: var(--gold); color: var(--sand); }
.tab-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.tab-panel[hidden] { display: none; }

/* Tier tabs — used inside the Honeymoon Collection tab for
   Budget / Mid-Range / Premium. Matches .tab-btn's transparent
   treatment so it sits naturally on the dark page. */
.tier-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tier-tab-btn {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--divider);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tier-tab-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.tier-tab-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* =========================================================
   BACK LINK
   ========================================================= */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold-text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-bottom: 20px;
}
.back-link:hover { color: var(--gold-bright); }

/* Tier grouping within a collection's package listing */
.tier-group { margin-top: 44px; }
.tier-group:first-child { margin-top: 0; }
.tier-label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--divider);
}

/* =========================================================
   WHY WORK WITH US — reason grid
   ========================================================= */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
}
@media (max-width: 900px) { .reason-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .reason-grid { grid-template-columns: 1fr; } }
.reason h3 { font-size: 16px; margin-bottom: 8px; }
.reason p { font-size: 13.5px; margin: 0; }

/* Condensed homepage teaser — labels only, full reasons live on
   the dedicated Why Work With Us page. */
.highlight-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
}
.highlight-strip .item {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 15px;
  color: var(--charcoal);
  position: relative;
  padding-left: 18px;
}
.highlight-strip .item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}

/* =========================================================
   HOTEL PORTFOLIO
   ========================================================= */
.hotel-summary-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px 28px;
  text-align: center;
}
.hotel-summary-card .count {
  font-family: var(--font-headline);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.hotel-summary-card .count.empty {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hotel-summary-card h3 { font-size: 17px; margin-bottom: 6px; }
.hotel-summary-card p { font-size: 13px; margin: 0; }

.hotel-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hotel-card:hover, .hotel-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  outline: none;
}
.hotel-card .photo-placeholder { position: relative; border-radius: 0; aspect-ratio: 3 / 2; }
.hotel-card .badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.hotel-card .card-body { padding: 22px 26px; }
.hotel-card .destination { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.hotel-card-cta { display: inline-block; margin-top: 10px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }

/* Hotel detail modal — opened by clicking a .hotel-card, shows full
   description, why-we-recommend, and a video box when one exists. */
.hotel-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hotel-modal[hidden] { display: none; }
.hotel-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 13, 11, 0.82); }
.hotel-modal-content {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  z-index: 1;
}
.hotel-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 13, 11, 0.65);
  color: var(--sand);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.hotel-modal-body { padding: 28px 30px 32px; }
.hotel-modal-body h3 { font-size: 22px; margin-bottom: 4px; }
.hotel-modal-body .destination { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.hotel-modal-body > p { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 0; }
.hotel-modal-body .why-we-recommend {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}
.hotel-modal-body .why-we-recommend h4 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 6px;
}
.hotel-modal-body .why-we-recommend p { font-size: 13.5px; margin: 0; color: var(--text-secondary); }
.hotel-modal-video { margin-top: 20px; }
.hotel-modal-video video, .hotel-modal-video iframe { width: 100%; border-radius: var(--radius); display: block; border: none; aspect-ratio: 16 / 9; max-height: 480px; }
.hotel-modal-video .video-placeholder {
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.modal-open { overflow: hidden; }

/* Tour detail modal — reuses .hotel-modal chrome (dual-classed with
   .tour-modal in the markup) but adds its own content sections: stops,
   itinerary timing, inclusions/exclusions, what to wear, add-ons. */
.hotel-modal-body h4 {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 20px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}
.tour-bullet-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text-secondary); }
.tour-bullet-list li { margin-bottom: 6px; }
.tour-stops { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--text-secondary); }
.tour-stops li { margin-bottom: 10px; }
.tour-stops strong { color: var(--sand); font-size: 14px; }
.tour-stop-duration { font-size: 12px; color: var(--text-muted); }
.tour-stops p { margin: 2px 0 0; }
.tour-itinerary { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.tour-itinerary-row { display: flex; gap: 14px; }
.tour-itinerary-time { flex: 0 0 60px; color: var(--gold-text); font-weight: 600; }
.tour-inclusions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tour-inclusions-grid h4 { margin-top: 0; padding-top: 0; border-top: none; }
@media (max-width: 600px) { .tour-inclusions-grid { grid-template-columns: 1fr; } }
.tour-last-updated { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--divider); font-size: 11px; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }