/* ============================================================
   HERO (homepage)
   ============================================================ */
.hero {
  height: 100vh; min-height: 680px; position: relative;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.hero-slider {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.08);
  transition: opacity 2.2s ease, transform 9s ease;
  filter: brightness(1.08) saturate(1.06);
}
.hero-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
:root.dark-mode .hero-slide { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity 1.2s ease; transform: none !important; }
}

/* Hero background VIDEO (homepage) — replaces the image slider */
.hero-video-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(1.05) saturate(1.05);
}
:root.dark-mode .hero-video { filter: brightness(.85); }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-video-wrap { background: var(--teal-dk); }
}
.hero-bg {
  /* Lightened scrim — kept for text contrast, but much less opaque than
     the original (was up to .97 near the bottom; now maxes out at .45)
     so the video reads through clearly instead of looking washed grey. */
  position: absolute; inset: 0; will-change: transform; z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(6,32,28,.22) 0%,
      rgba(6,32,28,.14) 35%,
      rgba(6,32,28,.30) 78%,
      rgba(6,32,28,.45) 100%);
}
:root.dark-mode .hero-bg {
  background:
    linear-gradient(to bottom,
      rgba(4,9,8,.40) 0%,
      rgba(4,9,8,.22) 35%,
      rgba(4,9,8,.48) 78%,
      rgba(4,9,8,.55) 100%);
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgba(6,32,28,.22) 100%);
}
/* min-width: 0 overrides the browser's default "automatic minimum size"
   for flex items (min-width: auto). Without it, once adaptive-fit.js
   applies white-space:nowrap to .hero h1 to measure/shrink it, this flex
   item's content-based minimum width jumps to the full unbroken line
   width of whatever language is active. Flexbox then refuses to shrink
   the item (and its h1) below that width, so el.clientWidth silently
   grows to match el.scrollWidth — the JS sees "no overflow" and never
   shrinks the heading, and long translations (French/German/Spanish)
   spill past the hero's edges on desktop/laptop. */
.hero-inner { position: relative; z-index: 2; padding: 0 1cm; width: 100%; min-width: 0; }

.hero-slider-dots {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  z-index: 3; display: flex; gap: 10px;
}
.hero-slider-dots button {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: 1px solid rgba(237,224,192,.7); background: rgba(237,224,192,.25);
  cursor: pointer; transition: background .3s ease, transform .3s ease;
}
.hero-slider-dots button.is-active { background: var(--gold-lt, #EDD080); transform: scale(1.25); }
.hero-slider-dots button:focus-visible { outline: 2px solid var(--gold-lt, #EDD080); outline-offset: 2px; }

/* Groups the compass + "Discover" cue as one relative unit so the text
   always sits a fixed gap below the compass, and both move/scale together.
   Positioned higher (top: 42% vs the old 50%) and shrunk so the combined
   footprint clears the CTA buttons lower in the hero at all sizes. */
.hero-compass-group {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}

.hero-compass-wrap {
  /* Reduced ~15px off the fixed cap (580px → 565px) and scaled the
     viewport-relative cap proportionally (78vw → 76vw) so it shrinks
     consistently on smaller screens too, not just on desktop. */
  width: min(565px, 76vw); height: min(565px, 76vw);
  opacity: .06;
  animation: slowSpin 120s linear infinite;
}
@keyframes slowSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-compass-wrap { animation: none; } }

.hero-eyebrow {
  font-family: var(--sc); font-size: 11px; font-weight: 500;
  letter-spacing: .35em; text-transform: uppercase; color: var(--gold-lt);
  margin-bottom: 28px; display: block; opacity: .95;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 1px 10px rgba(0,0,0,.5);
  transform: translateY(20px);
}
.hero h1 {
  font-family: var(--serif); font-size: clamp(48px, 8vw, 96px);
  font-weight: 300; font-style: italic; color: var(--ivory);
  line-height: 1.04; letter-spacing: -.01em; margin-bottom: 10px;
  transition: color .35s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 4px 24px rgba(0,0,0,.55);
  transform: translateY(40px);
}
:root.dark-mode .hero h1 {
  color: var(--gold-lt);
  text-shadow: 0 0 60px rgba(224,189,99,.22), 0 2px 8px rgba(0,0,0,.5);
}
.hero-h1-plain {
  font-family: var(--sc); font-size: clamp(13px, 2vw, 20px);
  font-weight: 400; letter-spacing: .3em; color: var(--gold-lt);
  display: block; margin-top: 10px; margin-bottom: 36px; opacity: .92;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 1px 8px rgba(0,0,0,.5);
  transform: translateY(10px);
}
.hero-rule {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 auto 36px; max-width: 360px;
  transform: translateY(40px);
}
.hero-rule::before, .hero-rule::after { content: ''; flex: 1; height: 1px; background: rgba(212,168,75,.5); }
.hero-rule-star { color: var(--gold-lt); font-size: 12px; }

.hero-sub {
  font-family: var(--serif); font-size: clamp(16px, 1.9vw, 20px); font-weight: 300;
  color: rgba(247,242,234,.88); max-width: 520px; margin: 0 auto 48px;
  line-height: 1.85; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 1px 12px rgba(0,0,0,.5);
}
:root.dark-mode .hero-sub { color: rgba(237,231,223,.82); }

.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue span { font-family: var(--sc); font-size: 9px; letter-spacing: .3em; color: rgba(212,168,75,.65); text-transform: uppercase; }
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(212,168,75,.65), transparent); animation: scrollPulse 2.5s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.4;transform:scaleY(.5);transform-origin:top} 50%{opacity:1;transform:scaleY(1)} }

/* ============================================================
   PHILOSOPHY STRIP
   ============================================================ */
.philosophy {
  background: var(--teal-dk); padding: 68px 0;
  border-top: 1px solid rgba(212,168,75,.22);
  border-bottom: 1px solid rgba(212,168,75,.22);
}
:root.dark-mode .philosophy { background: #06100E; }

.philosophy-in {
  max-width: 1360px; margin: 0 auto; padding: 0 48px;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0; align-items: stretch;
}
.phil-item { text-align: center; padding: 0 44px; border-right: 1px solid rgba(212,168,75,.18); display:flex; flex-direction:column; align-items:center; }
.phil-item:last-child { border-right: none; }
.phil-num {
  font-family: var(--sc); font-size: 10px; letter-spacing: .3em;
  color: rgba(212,168,75,.6); text-transform: uppercase; margin-bottom: 18px; display: block;
}
.phil-title {
  font-family: var(--serif); font-size: 25px; font-weight: 300; font-style: italic;
  color: var(--gold-lt); margin-bottom: 14px; line-height: 1.2;
}
.phil-desc {
  font-size: 13.5px; font-weight: 300; color: rgba(237,208,128,.72);
  line-height: 1.85; letter-spacing: .02em;
}
.phil-explore { margin-top:auto; }

/* ============================================================
   JOURNEY CARDS
   ============================================================ */
.journey-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.journey-card { position: relative; overflow: hidden; cursor: pointer; }
.journey-card img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
  filter: brightness(.88) saturate(.92);
}
.journey-card:hover img { transform: scale(1.06); filter: brightness(.72) saturate(.85); }
.journey-over {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,32,28,.96) 0%, rgba(6,32,28,.3) 55%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 28px;
  transition: background .4s;
}
.journey-card:hover .journey-over {
  background: linear-gradient(to top, rgba(6,32,28,.98) 0%, rgba(6,32,28,.62) 65%, rgba(6,32,28,.15) 100%);
}
.journey-region {
  font-family: var(--sc); font-size: 9.5px; letter-spacing: .3em;
  color: var(--gold-lt); text-transform: uppercase; margin-bottom: 10px; display: block;
}
.journey-name {
  font-family: var(--serif); font-size: clamp(19px, 2.2vw, 26px); font-weight: 300; font-style: italic;
  color: #F7F2EA; line-height: 1.15; margin-bottom: 8px;
}
.journey-nights {
  font-family: var(--sc); font-size: 10px; letter-spacing: .2em;
  color: rgba(237,208,128,.8); text-transform: uppercase;
}
.journey-reveal {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.25,.46,.45,.94), opacity .4s;
  opacity: 0;
}
.journey-card:hover .journey-reveal { max-height: 130px; opacity: 1; }
.journey-reveal p {
  font-size: 13px; font-weight: 300; color: rgba(247,242,234,.85);
  line-height: 1.75; margin: 12px 0 16px; letter-spacing: .01em;
}
.journey-enquire {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sc); font-size: 10px; letter-spacing: .2em;
  color: var(--gold-lt); text-decoration: none; text-transform: uppercase;
  border-bottom: 1px solid rgba(212,168,75,.5); padding-bottom: 2px;
  transition: color .2s;
}
.journey-enquire:hover { color: var(--gold-lt); opacity: .8; }
.journey-card.wide { grid-column: span 2; }
.journey-card.wide img { aspect-ratio: 8/5; }

/* ============================================================
   DESTINATION STRIP
   ============================================================ */
.dest-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 0 48px 80px; }
@media (max-width: 1024px) {
  .dest-strip { grid-template-columns: repeat(3, 1fr); }
}
.dest-item { position: relative; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.dest-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
  filter: brightness(.8) saturate(.88);
}
.dest-item:hover img { transform: scale(1.08); filter: brightness(.64) saturate(.82); }
.dest-over-strip {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,32,28,.97) 0%, rgba(6,32,28,.48) 60%, transparent 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
}
.dest-name-strip { font-family: var(--serif); font-size: clamp(19px, 2.4vw, 28px); font-weight: 300; font-style: italic; color: #F7F2EA; margin-bottom: 6px; }
.dest-pkg-strip { font-family: var(--sc); font-size: 9.5px; letter-spacing: .1em; color: rgba(237,208,128,.78); text-transform: none; line-height: 1.5; }

/* Destination card with no supplied photograph — tasteful gradient placeholder */
.dest-item-placeholder {
  background: linear-gradient(155deg, var(--teal-dk) 0%, #0C6B60 100%);
}
:root.dark-mode .dest-item-placeholder { background: linear-gradient(155deg, #06100E 0%, #0A1F1B 100%); }
.dest-over-strip-placeholder {
  position: static; height: 100%; background: none;
  align-items: center; text-align: center; padding: 24px;
}
.dest-placeholder-mark { color: rgba(212,168,75,.55); font-size: 26px; margin-bottom: 14px; }

/* ============================================================
   EXPERIENCE SECTION
   ============================================================ */
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.exp-img-wrap { position: relative; }
.exp-img { width: 100%; display: block; }
.exp-img-frame { position: absolute; top: -16px; left: -16px; right: 16px; bottom: 16px; border: 1px solid rgba(212,168,75,.4); pointer-events: none; }
.exp-gold-badge { position: absolute; bottom: 28px; right: 28px; background: var(--gold); color: var(--teal-dk); padding: 20px 24px; text-align: center; font-family: var(--sc); }
.egb-num { font-size: 32px; font-weight: 600; line-height: 1; margin-bottom: 6px; }
.egb-lbl { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; }

.exp-pull { font-family: var(--serif); font-size: 20px; font-weight: 300; font-style: italic; color: var(--teal-dk); margin: 24px 0 28px; line-height: 1.6; }
:root.dark-mode .exp-pull { color: var(--gold-lt); }
.exp-body { font-size: 15px; font-weight: 300; color: var(--text2); margin-bottom: 20px; line-height: 1.9; letter-spacing: .01em; }
.exp-list { list-style: none; margin: 32px 0 0; }
.exp-list li { font-size: 14px; font-weight: 300; color: var(--text2); margin-bottom: 12px; line-height: 1.7; display: flex; gap: 12px; }
.li-ic { color: var(--gold-dk); flex-shrink: 0; font-size: 12px; }
:root.dark-mode .li-ic { color: var(--gold); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.testimonial-card {
  background: rgba(212,168,75,.1); padding: 36px;
  border-left: 3px solid var(--gold); transition: all .3s; border-radius: 0 4px 4px 0;
}
:root.dark-mode .testimonial-card { background: rgba(212,168,75,.07); }
.testimonial-card:hover { background: rgba(212,168,75,.16); transform: translateY(-4px); box-shadow: 0 8px 32px rgba(212,168,75,.1); }
.testimonial-quote { font-family: var(--serif); font-size: 18px; font-weight: 300; font-style: italic; color: var(--text); margin-bottom: 20px; line-height: 1.8; }
.testimonial-author { font-family: var(--sc); font-size: 11px; letter-spacing: .2em; color: var(--gold-dk); text-transform: uppercase; }
:root.dark-mode .testimonial-author { color: var(--gold); }

/* ============================================================
   ENQUIRY SECTION
   ============================================================ */
.enquiry-section {
  background: linear-gradient(135deg, var(--teal-dk) 0%, rgba(6,32,28,.85) 100%);
  padding: 88px 0; text-align: center;
}
:root.dark-mode .enquiry-section { background: linear-gradient(135deg, #060F0D 0%, #040908 100%); }
.enquiry-content { max-width: 600px; margin: 0 auto; padding: 0 48px; }
.enquiry-title { font-family: var(--serif); font-size: clamp(30px, 5.6vw, 48px); font-weight: 300; font-style: italic; color: var(--gold-lt); margin-bottom: 24px; }
.enquiry-text { font-size: 16px; color: rgba(237,208,128,.8); margin-bottom: 36px; line-height: 1.8; }

.enquiry-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-input, .form-textarea, .form-select {
  background: rgba(255,255,255,.07); border: 1px solid rgba(212,168,75,.35);
  color: #F7F2EA; padding: 14px 16px; font-family: var(--sans);
  font-size: 14px; transition: all .3s; border-radius: 2px; width: 100%;
}
.form-select option { background: var(--teal-dk); color: #F7F2EA; }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(237,208,128,.45); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none; border-color: var(--gold); background: rgba(212,168,75,.12); box-shadow: 0 0 0 2px rgba(212,168,75,.12);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-error { color: #FF9B9B; font-size: 12.5px; font-family: var(--sans); text-align: left; min-height: 16px; }
.form-status { font-size: 14px; padding: 12px 16px; border-radius: 4px; text-align: left; display: none; }
.form-status.show { display: block; }
.form-status.success { background: rgba(76,175,80,.15); color: #9FE6A4; border: 1px solid rgba(76,175,80,.35); }
.form-status.error { background: rgba(255,107,107,.15); color: #FFB3B3; border: 1px solid rgba(255,107,107,.35); }
.captcha-wrap { display: flex; justify-content: flex-start; }

/* reCAPTCHA v3 has no visible checkbox — it shows a floating badge in the
   bottom-right corner by default, which collides with the Travel Concierge
   widget. Google permits hiding the badge as long as the required
   attribution text below is displayed instead. */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-notice {
  font-size: clamp(9.5px, 2.6vw, 11.5px);
  line-height: 1.6;
  color: var(--text2);
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.recaptcha-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.recaptcha-notice a:hover { color: var(--gold-dk); }
:root.dark-mode .recaptcha-notice a:hover { color: var(--gold); }

/* .enquiry-section always has a dark background regardless of the
   light/dark theme toggle (see rule above), so var(--text2) — which
   flips to a dark color in light mode for use on light backgrounds
   elsewhere — goes near-invisible here. Force a clear near-white tone
   instead (matching the form's own input text color), and reset the
   opacity too since the base rule's opacity:.75 was compounding with
   the color's own alpha and diluting it further. */
.enquiry-section .recaptcha-notice { color: rgba(247,242,234,.85); opacity: 1; }
.enquiry-section .recaptcha-notice a { color: rgba(247,242,234,.95); }
.enquiry-section .recaptcha-notice a:hover { color: var(--gold-lt); }
.field-invalid { border-color: #FF9B9B !important; }

/* The 5-card "Featured Journeys" grid is set inline (style="grid-template-
   columns:repeat(5,1fr)") so it works with any number of cards a page
   supplies. That inline rule has no fallback of its own, so without a
   tablet/mobile override 5 columns get squeezed edge-to-edge on laptops,
   tablets and phones and every card's 3:4 image + overlay text collapses
   into an unreadable sliver. !important is needed here to win against the
   inline style at each breakpoint. */
@media (max-width: 1180px) {
  .journey-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
  .journey-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 460px) {
  .journey-grid { grid-template-columns: 1fr !important; }
}

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

/* Hero description has two variants: the full poetic line for tablet/desktop,
   and a short destination list for mobile so the hero doesn't get text-heavy
   on small screens. Only one is ever visible at a time. */
.hero-sub-short { display: none; }

@media (max-width: 768px) {
  .philosophy-in { grid-template-columns: 1fr; }
  .phil-item { border-right: none; border-bottom: 1px solid rgba(212,168,75,.15); padding: 28px 0; }
  .phil-item:last-child { border-bottom: none; }
  .journey-card.wide { grid-column: span 1; }
  .dest-strip { grid-template-columns: repeat(2, 1fr); padding: 0 24px 60px; }
  .exp-grid { grid-template-columns: 1fr; gap: 40px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .enquiry-content { padding: 0 24px; }
  .form-row { grid-template-columns: 1fr; }
  /* Decorative supporting line above the main hero headline — dropped on
     mobile to reduce clutter and let the headline take center stage. */
  .hero-eyebrow { display: none; }
  /* Swap the long descriptive hero line for a compact destination list on
     mobile, keeping the hero readable and un-clogged on small screens. */
  .hero-sub-full { display: none; }
  .hero-sub-short {
    display: block;
    font-family: var(--sc);
    font-size: clamp(12px, 3.4vw, 15px);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-lt);
    max-width: 92%;
  }
}
@media (max-width: 480px) {
  .dest-strip { grid-template-columns: 1fr; }
}

/* ============================================================
   SMALL / VERY SMALL MOBILE (≤ 380px — SE, small Android, folded)
   Fluid clamp() sizing already covers most of this range, but a
   few fixed-px "main text" elements and paddings still need a
   dedicated floor so nothing crowds or clips on the narrowest
   real-world screens.
   ============================================================ */
@media (max-width: 380px) {
  .hero-inner { padding: 0 16px; }
  .hero-rule { max-width: 240px; margin-bottom: 26px; }
  .hero-sub { margin-bottom: 34px; }
  .hero-ctas { gap: 12px; }
  .hero-ctas a { flex: 1 1 auto; text-align: center; padding-left: 18px; padding-right: 18px; }
  .phil-title { font-size: 21px; }
  .journey-name { font-size: 22px; }
  .dest-name-strip { font-size: 22px; }
  .exp-gold-badge { padding: 14px 16px; right: 16px; bottom: 16px; }
  .egb-num { font-size: 26px; }
  .enquiry-content { padding: 0 18px; }
  .testimonial-card { padding: 24px; }
}