/* =========================================================
   NXT Tours — Global Styles
   Theme: "Crimson & Gold" — white/light-pink base, crimson +
   orange-gold accents, matching the client's real brand.
   ========================================================= */

:root {
  /* Colors: from the NXT Tours Brand Guideline (2025).
     Primary #AA1345, secondary #F39200, plus white and black. Every other shade on the site is
     a lighter/darker step of these two, never a new colour. */
  --primary: #aa1345;
  --primary-deep: #7a0e32;
  /* Big coloured areas (hero, stats, CTA, page tops): a soft light-to-dark step around the brand
     crimson, so the middle of the area reads as exactly #AA1345 */
  --grad-start: #bc1a50;
  --grad-end: #8e1039;
  --gradient-brand: linear-gradient(135deg, var(--grad-start) 0%, var(--primary) 50%, var(--grad-end) 100%);
  --primary-soft: rgba(170, 19, 69, 0.08);
  --accent: #f39200;
  --accent-soft: rgba(243, 146, 0, 0.15);
  /* Darker step of the brand orange so small text stays readable (WCAG AA) on white;
     --accent itself is for buttons, icons and text on crimson/dark backgrounds. */
  --accent-text: #9e5f00;
  --bg: #ffffff;
  --bg-muted: #fbf4f6;
  --text: #1c1013;
  --text-muted: #7c6669;
  --border: #f4e6eb;
  --white: #ffffff;

  /* Fonts */
  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
  /* the stylish font used for highlighted words inside big headings */
  --font-accent: "Playfair Display", Georgia, serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

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

a,
button,
.tour-card[data-tour],
summary {
  /* stops the default grey/blue flash phones show on tap; these are all
     clickable even though most of them aren't real <a>/<button> elements,
     and they already have their own tap feedback (pink hover sparks, lift, colour change) */
  -webkit-tap-highlight-color: transparent;
}

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

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  color: var(--accent-text);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* On dark (crimson) backgrounds the brighter --accent has enough contrast and reads better */
.page-hero .eyebrow,
.hero .eyebrow,
.spotlight-dark .eyebrow {
  color: var(--accent);
}

/* The highlighted word(s) inside a big heading: stylish italic serif, a little larger,
   coloured. (A <span>, not <em>, because this is only visual — no spoken emphasis.) */
.accent-word {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 1.14em;
  letter-spacing: -0.01em;
  color: var(--primary);
}

/* On crimson (page banners, CTA strip) and on black the crimson word would vanish, so use gold */
.page-hero .accent-word,
.cta-strip .accent-word {
  color: #f39200;
}

.spotlight-dark .accent-word {
  color: var(--accent);
}

.section {
  padding: 5rem 0;
}

.section-muted {
  background: var(--bg-muted);
}

/* Warm cream with a fine woven-fabric texture (same look as the reference site's
   Abu Dhabi section). Two very faint diagonal line sets cross each other every 4px.
   Put it next to .section-muted to replace the pink with this cream. */
.bg-fabric {
  background-color: #fdf8f4;
  background-image:
    repeating-linear-gradient(45deg, rgba(110, 70, 50, 0.03) 0, rgba(110, 70, 50, 0.03) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg, rgba(110, 70, 50, 0.03) 0, rgba(110, 70, 50, 0.03) 1px, transparent 1px, transparent 4px);
}

.section-title {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  text-align: center;
  margin-bottom: 0.75rem;
}


.section-subtitle {
  text-align: center;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 3rem;
}

/* Eyebrow with a thin gold line on each side (used on the Home "Why Choose Us" heading) */
.eyebrow-lines {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 3px;
}

/* Same eyebrow but it follows the alignment of the text around it: flush left in a
   left-aligned column, centred where the column is centred (e.g. on phones) */
.eyebrow-lines.is-inline {
  display: inline-flex;
}

.eyebrow-lines::before,
.eyebrow-lines::after {
  content: "";
  width: 44px;
  height: 1px;
  background: var(--accent);
}

/* Huge, very faint word sitting behind a section heading (e.g. "TRUST").
   The wrapper must be position: relative; z-index: -1 keeps it behind the
   heading text, and the mask fades its bottom edge into the page. */
.heading-watermark {
  position: absolute;
  top: -2.5rem;
  left: 0;
  right: 0;
  z-index: -1;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(5rem, 20vw, 15rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(170, 19, 69, 0.055);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 95%);
}

/* For a long watermark word (MOMENTS is 7 letters): a smaller size so it fits the page width
   instead of running off the right edge */
.heading-watermark.is-long {
  font-size: clamp(3.4rem, 15vw, 12rem);
}

/* Card look — used for tour cards, forms, testimonials etc. */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(28, 16, 19, 0.05);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  position: relative;
}

/* On hover the solid buttons get a very slight highlight: about 5% brighter plus a soft shadow */
.btn-solid {
  background: var(--primary);
  color: var(--white);
  border: none;
}

.btn-solid:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(170, 19, 69, 0.25);
}

.btn-accent {
  background: var(--accent);
  color: var(--white);
  border: none;
}

.btn-accent:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(243, 146, 0, 0.28);
}

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

.btn-outline:hover {
  border-color: var(--white);
  transform: translateY(-3px);
}

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

.btn-outline-dark:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-3px);
}

/* Hover effect on .btn-solid, .btn-accent, .btn-outline-dark and the nav "Book on
   WhatsApp" pill: tiny pink sparks fly up off the button like embers from lava.
   The sparks are little <i class="spark"> dots that script.js creates and
   animates ("Hover sparks" at the end of the file). They live in a fixed layer
   on top of the page, NOT inside the button, so nothing clips them. */
.spark-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* =========================================================
   Decorative background circles (used behind hero + stats)
   Own take: concentric dashed rings, slow independent
   rotation + gentle breathing scale — not a literal copy.
   ========================================================= */
.ring-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ring-decor::before,
.ring-decor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
}

.ring-decor::before {
  width: 480px;
  height: 480px;
  top: -180px;
  right: -120px;
  animation: ring-spin 50s linear infinite, ring-breathe 8s ease-in-out infinite;
}

.ring-decor::after {
  width: 320px;
  height: 320px;
  bottom: -140px;
  left: -80px;
  border-color: rgba(255, 255, 255, 0.09);
  animation: ring-spin-reverse 40s linear infinite, ring-breathe 7s ease-in-out infinite reverse;
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ring-spin-reverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes ring-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* =========================================================
   Sections with background decorations (small particles, line texture).
   The big pink scroll bubbles were removed on 2026-09-21 (user's choice);
   the class name `has-bubbles` stays only because the HTML uses it.
   ========================================================= */
.has-bubbles {
  position: relative;
  overflow: hidden;
  /* "clip" cuts off the decorations at the edge but can't be scrolled sideways
     (e.g. when a button inside is focused), which would shift the whole section */
  overflow: clip;
}

/* Keep real content above the background decorations */
.has-bubbles > *:not(.particles) {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Fine line texture (class "lines-bg" on a section)
   Two sets of very thin, very light pink diagonal lines that cross
   into a small diamond mesh. It fades out at the top and bottom
   edges so it melts into the neighbouring sections.
   ========================================================= */
.lines-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(170, 19, 69, 0.035) 0, rgba(170, 19, 69, 0.035) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(-45deg, rgba(170, 19, 69, 0.035) 0, rgba(170, 19, 69, 0.035) 1px, transparent 1px, transparent 18px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* =========================================================
   Navigation
   ========================================================= */
/* At the very top the bar is see-through so it melts into the hero photo (white text).
   Once you scroll it becomes TRANSPARENT glass: almost no colour of its own, just blur,
   so whatever is behind it shows through (a solid white/grey/pink tint looked grey
   over dark sections, which is why there is none).
   script.js adds/removes two classes:
     .scrolled = the page has been scrolled down a little
     .on-dark  = the section under the bar is dark (hero, black section, footer...),
                 so the text and logo stay WHITE; without it they turn dark. */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.1rem 0;
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 rgba(170, 19, 69, 0);
  backdrop-filter: blur(0px) saturate(100%) brightness(1);
  -webkit-backdrop-filter: blur(0px) saturate(100%) brightness(1);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease,
    box-shadow 0.4s ease, border-color 0.4s ease, padding 0.35s ease;
}

.navbar.scrolled {
  padding: 0.75rem 0;
  background: rgba(255, 255, 255, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  /* saturate kept low: a strong boost turned the brand crimson behind the bar into neon pink */
  backdrop-filter: blur(20px) saturate(115%);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
}

/* over a LIGHT section: a little white so the dark text stays crisp (white on white looks clean, not grey) */
.navbar.scrolled:not(.on-dark) {
  background: rgba(255, 255, 255, 0.38);
  border-bottom-color: rgba(255, 255, 255, 0.7);
}

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

/* Logo = the client's real logo image. Two transparent copies are stacked:
   the white one shows over the crimson banner, the crimson one fades in once the
   bar turns into light glass after scrolling. */
.logo {
  position: relative;
  display: block;
  flex-shrink: 0;
}

.logo-img {
  display: block;
  height: 58px;
  width: auto;
  transition: opacity 0.4s ease, transform 0.35s ease, height 0.35s ease;
}

.logo-on-light {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.navbar.scrolled .logo-img {
  height: 50px;
}

.navbar:not(.on-dark) .logo-on-dark {
  opacity: 0;
}

.navbar:not(.on-dark) .logo-on-light {
  opacity: 1;
}

.logo:hover .logo-img {
  transform: scale(1.05);
}

.logo-img {
  transform-origin: left center;
}

/* the same white logo in the dark footer */
.footer-logo {
  display: block;
  height: 64px;
  width: auto;
  margin-bottom: 1rem;
}

@media (max-width: 520px) {
  .logo-img {
    height: 44px;
  }

  .navbar.scrolled .logo-img {
    height: 40px;
  }
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
  color: var(--white);
  transition: color 0.4s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #f39200;
  transition: width 0.25s ease, background 0.4s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a.active {
  color: #f39200;
}

.navbar:not(.on-dark) .nav-links a {
  color: var(--text);
}

.navbar:not(.on-dark) .nav-links a::after {
  background: var(--primary);
}

.navbar:not(.on-dark) .nav-links a.active {
  color: var(--primary);
}

/* white text on see-through glass over a dark area: a soft shadow keeps it readable on busy photos */
.navbar.scrolled.on-dark .nav-links a:not(.nav-cta) {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.nav-links a.nav-cta {
  background: var(--accent);
  color: var(--white);
  padding: 0.6rem 1.3rem;
  border-radius: 50px;
  font-weight: 600;
}

/* The nav pill also gets the pink hover sparks (see .spark-layer) */
.nav-links a.nav-cta {
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.nav-links a.nav-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 5px 14px rgba(243, 146, 0, 0.28);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.4s ease;
}

.navbar:not(.on-dark) .nav-toggle span {
  background: var(--text);
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   Language switcher (top-right of every navbar)
   ========================================================= */
.lang-widget {
  position: relative;
  margin-left: 1.4rem;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.navbar:not(.on-dark) .lang-toggle {
  border-color: var(--border);
  background: var(--white);
  color: var(--text);
}

.lang-toggle svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.lang-toggle:hover {
  border-color: var(--accent);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1200;
}

.lang-widget.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

.lang-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

[dir="rtl"] .lang-option {
  text-align: right;
}

.lang-option:hover {
  background: var(--bg-muted);
}

.lang-option.is-active {
  background: var(--primary);
  color: var(--white);
}

.lang-native {
  font-weight: 700;
}

.lang-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.lang-option.is-active .lang-label {
  color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 860px) {
  .lang-widget {
    margin-left: 0.6rem;
  }

  .lang-toggle span {
    display: none;
  }

  .lang-toggle {
    padding: 0.5rem;
  }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8rem 0 6.5rem;
  overflow: hidden;
  background: var(--gradient-brand);
  color: var(--white);
  text-align: center;
}

/* ---------- Big background photo ----------
   Three full-size photos are stacked on top of each other and only the one
   with .is-active is visible. Every 4 seconds (or when you press an arrow or a
   small photo) script.js swipes the next photo in vertically: the new photo
   slides up over the old one (.is-leaving), like cards stacked one on top of the other. The slide itself is done
   in script.js with the separate `translate` property; the slow zoom below uses
   `transform`, so the two never fight. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
  transform: scale(1.12);
  transition: transform 7s ease-out;
}

.hero-bg-img.is-active,
.hero-bg-img.is-leaving {
  visibility: visible;
}

/* The incoming photo is layered ON TOP of the outgoing one */
.hero-bg-img.is-leaving {
  z-index: 1;
}

.hero-bg-img.is-active {
  z-index: 2;
  transform: scale(1);
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3; /* above the photos (they are z-index 1 and 2 while swiping), otherwise the tint is hidden behind them */
  background:
    radial-gradient(ellipse 65% 55% at 50% 48%, rgba(122, 14, 50, 0.3), transparent 78%),
    linear-gradient(180deg, rgba(122, 14, 50, 0.26) 0%, rgba(170, 19, 69, 0.06) 32%, rgba(170, 19, 69, 0.08) 66%, rgba(110, 12, 44, 0.34) 100%);
}

/* The text block: left-aligned on a wide desktop (a bold travel-app look, the reference the
   user showed), centred again on tablet/phone where there isn't room either side of it. */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

@media (min-width: 1101px) {
  .hero-inner {
    justify-content: flex-start;
  }

  .hero-content {
    padding-left: 2.5rem;
  }
}

/* ---------- Photo picker: a stack of destination cards + prev/next + a page count ----------
   Kept small and quiet so the big photo and the headline stay the focus.
   On a wide desktop (1101px and up) it sits on the RIGHT side of the hero, centred top to
   bottom: [stack of 3 tall cards] above ‹ 01 / 03 ›. On tablet/phone it is a small row at
   the bottom centre (see the max-width: 1100px block). */
.hero-picker {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1s forwards;
}

.hero-thumbs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Row under the card stack: ‹ arrow, "01 / 03", arrow › */
.hero-picker-controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.hero-picker-count {
  min-width: 3.6rem;
  font: 700 0.82rem var(--font-body);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

/* ---------- Step rail: a small dotted line + circled number on the far left edge ----------
   Purely decorative (it just echoes which of the 3 photos is showing); desktop only, there is
   no room for it once the picker drops to a bottom row on tablet/phone. */
.hero-step {
  position: absolute;
  left: 2.2rem;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  opacity: 0;
  animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s forwards;
}

.hero-step-line {
  width: 1px;
  height: 92px;
  background-image: linear-gradient(rgba(255, 255, 255, 0.55) 50%, transparent 50%);
  background-size: 1px 8px;
  background-repeat: repeat-y;
}

.hero-step-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(40, 4, 22, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 700 0.75rem var(--font-body);
  color: var(--white);
}

@media (min-width: 1101px) {
  .hero-step {
    display: flex;
  }
}

/* Each small photo is a button. The selected one is bright with a white border.
   scale is a separate property, so it never fights the entrance animation (transform). */
.hero-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 62px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--primary);
  scale: 0.94;
  transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease;
}

.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  transition: filter 0.4s ease, transform 0.6s ease;
}

.hero-thumb:hover img {
  transform: scale(1.1);
}

.hero-thumb.is-active {
  scale: 1.06;
  border-color: var(--white);
}

.hero-thumb.is-active img,
.hero-thumb:hover img {
  filter: none;
}

/* Name at the bottom of each small photo */
.hero-thumb span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  color: var(--white);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.hero-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  /* a soft dark tint (not white) so the arrow stays visible over bright skies too */
  background: rgba(40, 4, 22, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, scale 0.2s ease;
}

.hero-arrow:hover {
  background: var(--white);
  color: var(--primary);
}

.hero-arrow:active {
  scale: 0.9;
}

.hero-thumb:focus-visible,
.hero-arrow:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* ---------- Desktop: 3 destination cards in a staggered row (the reference the user sent:
   cards sit side by side, each at a slightly different height, overlapping a little rather
   than one fully behind another). script.js sets data-pos on each card: 0 = the photo shown
   big in the hero, 1 and 2 = the other two. The active one lifts slightly and reads full
   brightness; the other two sit a touch smaller/dimmer. All three keep their own name label,
   like the reference. On tablet/phone (1100px and below) none of this applies: a small row. */
@media (min-width: 1101px) {
  .hero-picker {
    gap: 0.9rem;
  }

  .hero-arrow {
    width: 40px;
    height: 40px;
  }

  .hero-thumbs {
    position: relative;
    display: block;
    width: 250px;
    height: 292px;
  }

  .hero-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 128px;
    height: 250px;
    border-radius: 20px;
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 14px 26px rgba(30, 0, 14, 0.3);
    transition: translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease, opacity 0.5s ease;
  }

  /* A gentle wave: each card sits at its own height, and they overlap only a little
     (mostly side by side), so all three destinations stay easy to see at once. */
  .hero-thumb[data-pos="0"] {
    translate: 122px 42px;
    scale: 1.05;
    z-index: 3;
  }

  .hero-thumb[data-pos="1"] {
    translate: 61px 0;
    scale: 0.94;
    z-index: 2;
  }

  .hero-thumb[data-pos="2"] {
    translate: 0 30px;
    scale: 0.94;
    z-index: 1;
  }

  /* 5 photos, 3 cards on show: the other two wait (invisible) behind the back card and slide
     into the stack when their turn comes */
  .hero-thumb[data-pos="3"],
  .hero-thumb[data-pos="4"] {
    translate: 0 30px;
    scale: 0.85;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
  }

  .hero-thumb[data-pos="1"] img,
  .hero-thumb[data-pos="2"] img {
    filter: brightness(0.78);
  }

  /* Every card keeps its name at the bottom, not just the active one */
  .hero-thumb span {
    display: block;
    bottom: 0.7rem;
    font-size: 0.62rem;
  }
}

/* On medium desktop windows the whole picker is a bit smaller so it stays clear of the headline */
@media (min-width: 1101px) and (max-width: 1359px) {
  .hero-picker {
    scale: 0.78;
    transform-origin: right center;
  }

  .hero-step {
    left: 1.4rem;
  }
}

/* Tablet and phone (1100px and below): no room on the left, so the picker becomes
   a small row at the bottom centre: ‹ photo photo photo ›. The hero gets extra
   bottom space for it and the scroll hint is hidden. */
@media (max-width: 1100px) {
  .hero-picker {
    left: 50%;
    right: auto;
    top: auto;
    translate: -50% 0;
    bottom: 1.8rem;
    flex-direction: column;
  }

  .hero {
    padding-bottom: 8.5rem;
  }

  .scroll-cue {
    display: none;
  }
}

/* ---------- Text ---------- */
.hero-content {
  position: relative;
  max-width: 900px;
}

/* Left-aligned on desktop (the reference layout); centred again below 1101px, where the
   picker moves to a bottom row and centred text reads better on a narrower column. */
@media (min-width: 1101px) {
  .hero-content {
    max-width: 640px;
    text-align: left;
  }

  /* .hero .hero-actions (below) centres the button; this beats it so the button lines up with the text */
  .hero .hero-content .hero-actions {
    justify-content: flex-start;
  }

  .hero .hero-content p {
    margin-left: 0;
  }

  /* Dark fade on the LEFT, behind the text, so it reads on any photo (bright domes, white sand) */
  .hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(90deg, rgba(20, 8, 12, 0.66) 0%, rgba(20, 8, 12, 0.45) 32%, rgba(20, 8, 12, 0.12) 58%, transparent 72%);
    pointer-events: none;
  }
}

/* Tablet/phone: text is centred over the photo, so darken the middle band instead */
@media (max-width: 1100px) {
  .hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(20, 8, 12, 0.15) 0%, rgba(20, 8, 12, 0.42) 30%, rgba(20, 8, 12, 0.42) 66%, rgba(20, 8, 12, 0.1) 100%);
    pointer-events: none;
  }
}

/* Phones: the tall photos are bright and fresh, so only a soft neutral shade behind the text,
   and no crimson tint on top (it made the photos look dull and purple) */
@media (max-width: 700px) {
  .hero-bg::after {
    background: none;
  }

  .hero-bg::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.34) 28%, rgba(0, 0, 0, 0.34) 62%, rgba(0, 0, 0, 0) 100%);
  }
}

/* Small letter-spaced label above the headline */
.hero-h1-top {
  display: block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.1rem;
}

/* The headline: elegant light serif, like a travel magazine */
.hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.7rem, 7.4vw, 6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 1.4rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(60, 6, 24, 0.4), 0 4px 30px rgba(60, 6, 24, 0.4);
}

/* The gold word follows the selected photo: Dubai / Abu Dhabi / Hatta.
   It is a tall strip of words; script.js sets --i and the strip slides up to that word. */
.rotator {
  display: block;
  height: 1.16em;
  overflow: hidden;
  /* The negative margin pulls the box left; the words inside get the same padding back
     (see .rotator-track > span) so the text stays lined up with the headline. */
  margin-left: -0.3em;
}

.rotator-track {
  display: block;
  transform: translateY(calc(var(--i, 0) * -1.16em));
  transition: transform 0.7s cubic-bezier(0.75, 0, 0.25, 1);
}

.rotator-track > span {
  display: block;
  height: 1.16em;
  line-height: 1.16;
  font-style: italic;
  font-weight: 700;
  /* The gold colour is a gradient clipped to the letters, and it only paints inside this box.
     Italic letters lean outside their box (the foot of the "A" on the left, the top of the "i" on the right),
     so that part was cut off. Padding makes the box bigger so the gradient covers the whole letter. */
  padding: 0 0.3em;
  /* text-shadow does not follow gradient-clipped text, and filter: drop-shadow() renders as a
     visible rectangular box behind it in this browser (background-clip:text + filter bug), so this
     word stays without a shadow; the gold gradient already has enough contrast on its own. */
  text-shadow: none;
  background: linear-gradient(90deg, #ffb547, #f39200, #ffc978, #ffb547);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gold-shimmer 5s linear infinite;
}

.hero-h1-bottom {
  display: block;
}

@keyframes gold-shimmer {
  to { background-position: 200% 0; }
}

.hero p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin: 0 auto 2.2rem;
  font-size: 1.22rem;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero .hero-actions {
  justify-content: center;
}

/* A slightly bigger button so it matches the bigger headline; the arrow icon sits after the text */
.hero .hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.05rem 2.4rem;
  font-size: 1.05rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Text rises in one piece at a time when the page loads */
.hero-content > * {
  opacity: 0;
  animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.hero-content > *:nth-child(1) { animation-delay: 0.3s; }
.hero-content > *:nth-child(2) { animation-delay: 0.45s; }
.hero-content > *:nth-child(3) { animation-delay: 0.6s; }
.hero-content > *:nth-child(4) { animation-delay: 0.75s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Little "mouse" outline with a dot that drops — tells people to scroll */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  z-index: 2;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--white);
  animation: cue-drop 1.8s ease-in-out infinite;
}

@keyframes cue-drop {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* Small page hero (for Tours / About / Contact) */
.page-hero {
  min-height: 40vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 9rem 1.5rem 3rem;
  background: var(--gradient-brand);
  color: var(--white);
  overflow: hidden;
}

.page-hero > *:not(.ring-decor):not(.particles) {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  margin-bottom: 0.5rem;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   Fade-up scroll animation (JS toggles .in-view)
   Cards support a staggered entrance via nth-child delay.
   ========================================================= */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* If JS never runs (blocked/fails to load), don't leave the whole page invisible */
.no-js .fade-up {
  opacity: 1;
  transform: none;
}

.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.2s; }
.stagger > *:nth-child(4) { transition-delay: 0.3s; }
.stagger > *:nth-child(5) { transition-delay: 0.4s; }
.stagger > *:nth-child(6) { transition-delay: 0.5s; }
.stagger > *:nth-child(7) { transition-delay: 0.6s; }
.stagger > *:nth-child(8) { transition-delay: 0.7s; }

/* =========================================================
   Stats counter strip
   ========================================================= */
.stats-strip {
  position: relative;
  background: var(--gradient-brand);
  color: var(--white);
  padding: 3.5rem 0;
  overflow: hidden;
}

/* Islamic-star lattice pattern, brought back 2026-09-23 for the counters strip only
   (it used to also sit on .hero/.page-hero — those were left plain when this was
   removed on 2026-09-21; only re-add it there too if asked).
   One 80px tile: an 8-pointed star (two overlapping squares), a small circle in the
   middle and half-diamonds at the corners, so the tiles join into a continuous lattice.
   The layer is bigger than the strip and slides by exactly one tile, so the loop is
   seamless. Softer in the middle (behind the numbers) via a radial mask, so the digits
   stay easy to read. */
:root {
  --pattern-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.3' stroke-width='1'%3E%3Crect x='16' y='16' width='48' height='48'/%3E%3Crect x='16' y='16' width='48' height='48' transform='rotate(45 40 40)'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3Cpath d='M0 -10L10 0L0 10L-10 0ZM80 -10L90 0L80 10L70 0ZM0 70L10 80L0 90L-10 80ZM80 70L90 80L80 90L70 80Z'/%3E%3C/g%3E%3C/svg%3E");
}

.stats-strip::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: 0;
  pointer-events: none;
  background-image: var(--pattern-star);
  background-size: 80px 80px;
  animation: pattern-drift 45s linear infinite;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(ellipse 75% 120% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, #000 70%);
  mask-image: radial-gradient(ellipse 75% 120% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, #000 70%);
}

@keyframes pattern-drift {
  to { transform: translate(80px, 80px); }
}

.stats-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
}

.stat-number .plus,
.stat-number .star {
  color: var(--accent);
}

.stat-label {
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.3rem;
}

/* =========================================================
   Why Choose Us — numbered cards
   ========================================================= */
/* 2 x 2 on desktop and tablet, one column on phones. Each card is laid out
   sideways: icon on the left, heading + text on the right. */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 940px;
  margin: 0 auto;
}

.why-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.3rem;
  align-items: start;
  padding: 2rem 1.8rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover: the whole card fills with crimson, text goes white, the icon box turns white */
.why-card:hover {
  transform: translateY(-6px);
  background-color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 18px 40px rgba(170, 19, 69, 0.32);
}

.why-card h3,
.why-card p,
.why-number,
.why-icon {
  transition: color 0.3s ease, background-color 0.3s ease;
}

.why-card:hover h3 {
  color: var(--white);
}

.why-card:hover p {
  color: rgba(255, 255, 255, 0.85);
}

.why-card:hover .why-number {
  color: rgba(255, 255, 255, 0.14);
}

.why-card:hover .why-icon {
  background-color: var(--white);
  color: var(--primary);
}

.why-number {
  position: absolute;
  top: -0.3rem;
  right: 0.9rem;
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 800;
  color: var(--bg-muted);
  z-index: 0;
}

.why-icon {
  grid-row: 1 / span 2;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  /* white card: a crimson box with a white icon; on hover (crimson card) it flips to a white box with a crimson icon */
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  position: relative;
  z-index: 1;
}

.why-card h3 {
  grid-column: 2;
  font-size: 1.1rem;
  margin: 0.1rem 0 0.4rem;
  position: relative;
  z-index: 1;
}

.why-card p {
  grid-column: 2;
  color: var(--text-muted);
  font-size: 0.92rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

  /* smaller watermark number so it doesn't sit behind the heading */
  .why-number {
    font-size: 2.8rem;
    top: 0.2rem;
  }
}
/* =========================================================
   Featured tour spotlight
   ========================================================= */
.spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.spotlight-img {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 40px rgba(28, 16, 19, 0.15);
}

.spotlight-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.spotlight-img:not(.slider):hover img {
  transform: scale(1.06);
}

/* =========================================================
   Photo slider (used inside .spotlight-img[data-slider])
   Next/Prev buttons + dots. A new photo is revealed with a
   wipe from the side you're heading to, while the photo
   settles from a slight zoom; the caption then slides up.
   ========================================================= */
.slider {
  position: relative;
  /* "clip" (unlike "hidden") can never be scrolled sideways by the zoomed-in photos */
  overflow: clip;
  touch-action: pan-y; /* vertical scroll still works while swiping sideways */
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: clip;
  z-index: 1;
  clip-path: inset(0 0 0 100%); /* hidden (parked on the right) */
}

.slider[data-dir="prev"] .slide {
  clip-path: inset(0 100% 0 0); /* when going back, new photos wipe in from the left */
}

/* (.slider prefix keeps these stronger than the data-dir rule above) */
.slider .slide.is-leaving {
  z-index: 2;
  clip-path: inset(0);
}

.slider .slide.is-active {
  z-index: 3;
  clip-path: inset(0);
  transition: clip-path 0.85s cubic-bezier(0.77, 0, 0.18, 1);
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transition: transform 1.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.slide.is-active img {
  transform: scale(1);
}

/* The photo being covered drifts the opposite way — a little parallax */
.slider[data-dir="next"] .slide.is-leaving img {
  transform: translateX(-9%) scale(1.05);
  transition: transform 0.85s ease;
}

.slider[data-dir="prev"] .slide.is-leaving img {
  transform: translateX(9%) scale(1.05);
  transition: transform 0.85s ease;
}

/* Dark fade at the bottom so the caption and dots stay readable */
.slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, transparent, rgba(28, 16, 19, 0.6));
  pointer-events: none;
}

/* A square poster slide: the whole poster is shown (contain, nothing cropped) with a
   dark blurred copy of itself filling the side bars. No caption or bottom fade,
   they would cover the poster's own text. */
.slide-poster {
  background: #120a06;
}

.slide-poster::before {
  content: "";
  position: absolute;
  inset: -12%;
  background: url("../images/desert-safari-poster.jpg") center / cover;
  filter: blur(22px) brightness(0.5);
}

.slide-poster::after,
.slide-poster figcaption {
  display: none;
}

/* "Places You'll Visit": one separate card per stop (script.js builds them, grouped by tour) */
.stops-group + .stops-group {
  margin-top: 3rem;
}

.stops-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.stops-group-head h3 {
  font-size: 1.35rem;
}

.stops-more {
  padding: 0.5rem 1.1rem;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--primary);
  font: 600 0.85rem var(--font-body);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.stops-more:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.stop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.4rem;
}

.stop-card {
  display: block;
  padding: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(28, 16, 19, 0.06);
  font-family: inherit;
  color: var(--text);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stop-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(28, 16, 19, 0.13);
}

.stop-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.stop-img {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-muted);
}

.stop-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.stop-card:hover .stop-img img {
  transform: scale(1.06);
}

/* No photo yet: NXT logo on a bright crimson panel with a soft glow */
.stop-img.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 55%),
    var(--gradient-brand);
}

.stop-img.is-empty img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: var(--white);
  object-fit: cover;
}

.stop-card:hover .stop-img.is-empty img {
  transform: scale(1.1);
}

.stop-body {
  display: block;
  padding: 1rem 1.1rem 1.1rem;
}

.stop-name {
  display: block;
  font: 700 1.05rem/1.3 var(--font-heading);
}

.stop-sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--text-muted, #6b5a5f);
}

/* Same look as the "View Details" pill on the tour cards */
.stop-btn {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 0.45rem 1.15rem;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--white);
  font: 600 0.85rem var(--font-body);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.stop-card:hover .stop-btn {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

@media (max-width: 520px) {
  .stops-group-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.slide-poster img {
  position: relative;
  object-fit: contain;
}

.slide figcaption {
  /* Top-left, across from the "1 / 14" count: the dots row at the bottom can be wide (one dot
     per photo), so the caption never shares a line with it */
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  max-width: calc(100% - 7rem);
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.slide.is-active figcaption {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.slider-btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, scale 0.25s ease, box-shadow 0.25s ease;
}

.slider-btn.prev { left: 0.9rem; }
.slider-btn.next { right: 0.9rem; }

.slider-btn:hover {
  background: var(--white);
  color: var(--primary);
  scale: 1.08;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.slider-btn:active {
  scale: 0.92;
}

.slider-btn:focus-visible,
.slider-dots button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.slider-count {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  background: rgba(28, 16, 19, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  max-width: calc(100% - 2rem);
  z-index: 5;
  display: flex;
  gap: 6px;
  padding: 0.45rem 0.65rem;
  border-radius: 50px;
  background: rgba(28, 16, 19, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.slider-dots button {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease;
}

/* Bigger invisible tap area around each tiny dot */
.slider-dots button::before {
  content: "";
  position: absolute;
  inset: -8px -3px;
}

.slider-dots button.is-current {
  width: 22px;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .slider .slide,
  .slider .slide.is-active,
  .slider .slide img,
  .slider .slide.is-leaving img,
  .slider .slide figcaption {
    transition: none;
  }
}

.spotlight h2 {
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  margin-bottom: 0.5rem;
}

.spotlight-dark h2 {
  color: var(--white);
}

.spotlight-tagline {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

.spotlight-dark .spotlight-tagline {
  color: var(--accent);
}

.spotlight-desc {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.spotlight-dark .spotlight-desc {
  color: rgba(255, 255, 255, 0.8);
}

.spotlight-meta {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.3rem 0 1.2rem;
}

.spotlight-dark .spotlight-meta {
  color: rgba(255, 255, 255, 0.7);
}

.spotlight-price {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-heading);
}

.spotlight-price .was {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 0.5rem;
}

.spotlight-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 1.2rem 0 1.5rem;
  font-size: 0.9rem;
}

.spotlight-list li::before {
  content: "✓ ";
  color: var(--primary);
  font-weight: 700;
}

/* "And much more" line under a tour's checklist: same font, size and colour as the checklist items
   (dark text on the light section, white on the dark Desert Safari block) */
.spotlight-more {
  margin: -0.7rem 0 1.3rem; /* pulls it up into the gap the list leaves below it */
  font-size: 0.9rem;
  color: var(--text);
}

.spotlight-dark .spotlight-more {
  color: var(--white);
}

.spotlight.reverse .spotlight-img {
  order: 2;
}

/* Sits straight on the black .matte-section, so it needs no box of its own */
.spotlight-dark {
  color: var(--white);
}

/* On black, the crimson tick marks and the grey "was" price are too dim */
.spotlight-dark .spotlight-list li::before {
  color: var(--accent);
}

.spotlight-dark .spotlight-price .was {
  color: rgba(255, 255, 255, 0.5);
}

.spotlight-dark .spotlight-img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}

/* =========================================================
   Matte black section (used for the Desert Safari block)
   Flat black with a fine grain, so it feels like matte paper/rubber and
   nothing shines. Faint sand-dune ripple lines sit on top of it and
   drift upward, slowly, while you scroll (script.js moves .matte-bg).
   ========================================================= */
.matte-section {
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: #050404;
  color: var(--white);
}

.matte-section > .container {
  position: relative;
  z-index: 1;
}

/* Fine grain: stays still; it is what makes the black look matte */
.matte-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Dune ripples: taller than the section so it has room to slide up/down */
.matte-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -180px;
  bottom: -180px;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='80' viewBox='0 0 400 80'%3E%3Cg fill='none' stroke='white' stroke-width='1.2'%3E%3Cpath d='M0 40 Q100 12 200 40 T400 40' stroke-opacity='0.11'/%3E%3Cpath d='M0 64 Q100 46 200 64 T400 64' stroke-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 80px;
}

.spotlight-dark .spotlight-price {
  color: var(--accent);
}

.spotlight-dark p {
  color: rgba(255, 255, 255, 0.75);
}

/* =========================================================
   Tour Cards
   ========================================================= */
/* auto-fill (not auto-fit): empty columns stay, so when the filter shows only 1 or 2 tours
   each card keeps the same size as in "All Tours" instead of stretching wide */
.tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.8rem;
}

.tour-card {
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.tour-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 35px rgba(28, 16, 19, 0.15);
}

.tour-img-wrap {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
}

.tour-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tour-card:hover .tour-img-wrap img {
  transform: scale(1.08);
}

.tour-type-badge {
  z-index: 2; /* stays above the photo, which fills the whole box in the wide cards */
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: rgba(28, 16, 19, 0.7);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 50px;
  letter-spacing: 0.5px;
}

.tour-body {
  padding: 1.5rem;
}

.tour-body h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.tour-body p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

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

.tour-price {
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-heading);
}

.tour-price .was {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: line-through;
  font-weight: 400;
  display: block;
}

/* =========================================================
   Big tour cards (home page "Choose Your Adventure")
   Two cards per row on a desktop: the photo sits on TOP as a landscape (16:10)
   picture, so the whole photo is visible from the sides, and the details go below it.
   Below 980px there is one card per row and the photo goes back to the left
   (42% wide); on phones the photo is on top again.
   The wide Khorfakkan card on the Tours page (.tour-span) keeps the photo-left layout.
   ========================================================= */
.tours-wide-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.tour-wide {
  display: grid;
  grid-template-columns: 42% 1fr;
}

.tour-wide .tour-img-wrap {
  aspect-ratio: auto;
  min-height: 300px;
}

/* fill the whole (stretched) photo column */
.tour-wide .tour-img-wrap img {
  position: absolute;
  inset: 0;
}

.tour-wide .tour-body {
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
}

.tour-wide .tour-body h3 {
  font-size: 1.45rem;
}

.tour-wide .tour-footer {
  margin-top: auto;
}

@media (min-width: 981px) {
  .tour-wide:not(.tour-span) {
    display: block;
  }

  /* Compact cards (user: "ye cards mere frame mai nhi aarhe"): a wide, low photo and a tighter
     text area, so a whole card fits on a laptop screen (about 470px tall instead of 660px). */
  .tour-wide:not(.tour-span) .tour-img-wrap {
    aspect-ratio: 5 / 2;
    min-height: 0;
  }

  .tour-wide:not(.tour-span) .tour-body {
    padding: 1.1rem 1.4rem 1.25rem;
  }

  .tour-wide:not(.tour-span) .tour-body h3 {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
  }

  .tour-wide:not(.tour-span) .tour-body p {
    font-size: 0.88rem;
    margin-bottom: 0.7rem;
  }

  /* the 3 highlights sit in two columns instead of a tall single list */
  .tour-wide:not(.tour-span) .tour-points {
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 1rem;
    margin: 0 0 0.9rem;
    font-size: 0.84rem;
  }
}

/* Cards whose photo is one of the client's SQUARE marketing posters (class has-poster, Home
   "Choose Your Adventure"). The poster must be shown WHOLE, so the photo area is an exact square
   (the card just gets taller, on purpose) and the poster is never cropped or zoomed. The usual
   "Sharing & Private" badge and the "View details" hover pill are hidden because they would sit on
   top of the poster's own logo and phone strip. On tablets the card is a centred column so the
   poster does not become huge; the photo is always on top, never to the left. */
.tour-wide.has-poster {
  display: block;
}

.tour-wide.has-poster .tour-img-wrap {
  aspect-ratio: 3 / 2; /* the landscape posters are 1536 x 1024 */
  min-height: 0;
  background: #120a06;
}

.tour-wide.has-poster .tour-img-wrap img {
  object-fit: contain;
}

.tour-card.has-poster:hover .tour-img-wrap img {
  transform: none;
}

.tour-card.has-poster .tour-type-badge,
.tour-card.has-poster[data-tour] .tour-img-wrap::after {
  display: none;
}

@media (max-width: 980px) {
  .tour-wide.has-poster {
    width: min(100%, 640px);
    justify-self: center;
  }
}

/* Desktop: 2 cards per row, poster on top (3:2 = 389px tall at 584 wide) and a compact text area
   below it, so a whole card is about 550px tall and fits on a laptop screen. The 3-line highlight
   list is hidden because the poster already lists everything; the full details open in the popup. */
@media (min-width: 981px) {
  .tour-wide.has-poster .tour-points {
    display: none;
  }

  .tour-wide.has-poster .tour-body p {
    margin-bottom: 0.9rem;
  }
}

.tour-points {
  grid-template-columns: 1fr;
  gap: 0.45rem;
  margin: 0.4rem 0 1.4rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* Tours page: the last card is wide and takes the free space beside the previous card.
   3 columns -> spans 2 of them; 2 columns -> takes the whole row; 1 column -> normal. */
@media (min-width: 620px) {
  .tour-span {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .tour-span {
    grid-column: span 2;
  }
}
/* Extra room in the wide card: bigger text + small "what's included" chips */
.tour-span .tour-body h3 {
  font-size: 1.7rem;
}

.tour-span .tour-body > p {
  font-size: 1rem;
}

.tour-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.4rem;
}

.tour-chips li {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  background: var(--primary-soft);
  color: var(--primary);
}
@media (max-width: 980px) {
  .tours-wide-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .tour-wide {
    grid-template-columns: 1fr;
  }

  .tour-wide .tour-img-wrap {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }
}

/* =========================================================
   Particles: tiny, very faint dots that float slowly in a section's
   background (script.js creates them from data-particles="how many").
   Only transform is animated, and the animation pauses when the
   section is off-screen.
   ========================================================= */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--c, var(--primary));
  opacity: var(--o, 0.2);
  animation: particle-drift var(--d, 20s) ease-in-out var(--delay, 0s) infinite alternate;
}

.particles.is-paused .particle {
  animation-play-state: paused;
}

@keyframes particle-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(var(--dx, 20px), var(--dy, -40px)) scale(1.3); }
}
/* =========================================================
   Tours page banner: split layout. Text, quick facts and buttons on
   the left; three floating photo "postcards", two little info chips
   and a plane flying along a dashed route on the right.
   ========================================================= */
.tours-hero {
  display: block;
  text-align: left;
  min-height: 0;
  padding: 8.5rem 0 5rem;
}

.tours-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

.tours-hero .tours-hero-text h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  margin-bottom: 1rem;
}

.tours-hero-text p {
  max-width: 520px;
  margin-bottom: 1.6rem;
}

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
}

.hero-facts li {
  padding: 0.45rem 1rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-facts strong {
  font-family: var(--font-heading);
  color: #f39200;
}

.tours-hero .hero-actions {
  justify-content: flex-start;
}

.tours-hero-cards {
  position: relative;
  height: 420px;
}

.flight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 0;
}

.postcard {
  --rot: 0deg;
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 7px 7px 30px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.35);
  animation: postcard-float 7s ease-in-out infinite;
}

.postcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.postcard figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  text-align: center;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
}

.pc-1 { --rot: -6deg; width: 50%; height: 240px; left: 2%; top: 16%; }
.pc-2 { --rot: 5deg; width: 46%; height: 200px; right: 2%; top: 0; animation-delay: -2s; }
.pc-3 { --rot: -3deg; width: 48%; height: 200px; right: 8%; bottom: 0; animation-delay: -4s; }

.float-chip {
  --rot: 0deg;
  position: absolute;
  z-index: 2;
  padding: 0.55rem 1rem;
  border-radius: 14px;
  background: var(--white);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  animation: postcard-float 6s ease-in-out infinite;
}

.float-chip::before {
  content: "✓";
  margin-right: 0.4rem;
  color: var(--primary);
}

.fc-1 { left: 0; bottom: 14%; animation-delay: -1s; }
.fc-2 { right: 0; top: 46%; animation-delay: -3s; }

@keyframes postcard-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50% { transform: translateY(-12px) rotate(calc(var(--rot) + 1.5deg)); }
}

/* Filter chips above the tour cards */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0 auto 0.9rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  font: 600 0.92rem var(--font-body);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(28, 16, 19, 0.05);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.chip span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.chip:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 10px 22px rgba(170, 19, 69, 0.3);
}

.chip.is-active span {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

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

.filter-status {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 2rem;
}

/* Headline above the tour cards (replaced the filter chips) */
.tours-headline {
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  margin: -0.4rem auto 2.6rem;
}

.tour-card.is-hidden {
  display: none !important;
}

.tour-card.pop-in {
  animation: pop-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .tours-hero {
    text-align: center;
    padding: 7.5rem 0 3.5rem;
  }

  .tours-hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tours-hero-text p {
    margin-inline: auto;
  }

  .hero-facts,
  .tours-hero .hero-actions {
    justify-content: center;
  }

  .tours-hero-cards {
    width: 100%;
    max-width: 520px;
    height: 340px;
    margin: 0 auto;
  }
}

@media (max-width: 520px) {
  .tours-hero-cards {
    height: 270px;
  }

  .pc-1 { height: 170px; }
  .pc-2,
  .pc-3 { height: 140px; }

  .float-chip {
    font-size: 0.7rem;
    padding: 0.4rem 0.75rem;
  }
}
/* =========================================================
   Booking journey (the 4 booking steps)
   A vertical timeline. A line runs down the middle and fills with
   colour as you scroll, the NXT Tours logo rides
   its tip, each step's number badge lights up once the logo has
   passed it, and the cards slide in from alternating sides.
   script.js sets --progress (0 to 1) on .journey while you scroll.
   ========================================================= */
.journey {
  --progress: 0;
  /* How long the road is: from the top to the CENTRE of the last badge. script.js sets it in px,
     so the logo finishes exactly on the last badge instead of below it. */
  --journey-end: 100%;
  position: relative;
  max-width: 980px;
  margin: 0 auto;
}

/* The grey-pink dashed road, and the coloured fill on top of it */
.journey-line,
.journey-fill {
  position: absolute;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 4px;
}

.journey-line {
  top: 0;
  height: var(--journey-end);
  background: repeating-linear-gradient(to bottom, rgba(170, 19, 69, 0.24) 0 8px, transparent 8px 16px);
}

.journey-fill {
  top: 0;
  height: calc(var(--progress) * var(--journey-end));
  background: linear-gradient(to bottom, var(--primary), var(--accent));
}

.journey-plane {
  position: absolute;
  left: 50%;
  top: calc(var(--progress) * var(--journey-end));
  z-index: 3;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--white);
  background: var(--primary);
  box-shadow: 0 6px 16px rgba(170, 19, 69, 0.4);
}

/* The client's real logo (images/logo-mark.png) rides the tip of the line */
.journey-plane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journey-steps {
  list-style: none;
  position: relative;
}

.journey-step {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  align-items: center;
  margin-bottom: 1.8rem;
}

.journey-step:last-child {
  margin-bottom: 0;
}

.journey-node {
  position: relative; /* the two ripple rings below are placed against the badge */
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid rgba(170, 19, 69, 0.25);
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 800;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.journey-node.is-reached {
  background: var(--primary);
  color: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 7px rgba(170, 19, 69, 0.12);
  transform: scale(1.1);
  /* small POP: the badge grows a little, then settles (plays every time the logo reaches it) */
  animation: node-pop 0.5s ease-out both;
}

/* One soft gold ripple ring that spreads a little way out of the badge */
.journey-node::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

.journey-node.is-reached::before {
  animation: node-ring 0.6s ease-out both;
}

@keyframes node-pop {
  0% { transform: scale(1); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1.1); }
}

@keyframes node-ring {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.journey-card {
  grid-row: 1;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.4rem 1.5rem;
}

/* Odd steps sit on the left (icon on the outer side), even steps on the right */
.journey-step:nth-child(odd) .journey-card {
  grid-column: 1;
  flex-direction: row-reverse;
  text-align: right;
}

.journey-step:nth-child(even) .journey-card {
  grid-column: 3;
}

.journey-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  /* crimson box with a white icon (same look as the "Why Choose Us" icons) */
  background: var(--primary);
  color: var(--white);
}

.journey-icon svg {
  width: 24px;
  height: 24px;
}

.journey-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.journey-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Slide in from the side each card sits on (stronger selector than the plain .fade-up) */
.journey-step:nth-child(odd) .journey-card.fade-up {
  transform: translateX(-50px);
}

.journey-step:nth-child(even) .journey-card.fade-up {
  transform: translateX(50px);
}

.journey-step .journey-card.fade-up.in-view,
.no-js .journey-step .journey-card.fade-up {
  transform: none;
}

.journey-cta {
  text-align: center;
  margin-top: 3rem;
}

/* Phones: the road moves to the left edge and every card sits on the right of it */
@media (max-width: 720px) {
  .journey-line,
  .journey-fill,
  .journey-plane {
    left: 26px;
  }

  .journey-step {
    grid-template-columns: 52px 1fr;
    column-gap: 0.9rem;
  }

  .journey-node {
    grid-column: 1;
  }

  .journey-step:nth-child(odd) .journey-card,
  .journey-step:nth-child(even) .journey-card {
    grid-column: 2;
    flex-direction: row;
    text-align: left;
  }

  .journey-step:nth-child(odd) .journey-card.fade-up,
  .journey-step:nth-child(even) .journey-card.fade-up {
    transform: translateX(40px);
  }

  .journey-step .journey-card.fade-up.in-view {
    transform: none;
  }
}

/* =========================================================
   Testimonials
   ========================================================= */
/* Reviews marquee: the cards move slowly to the left by themselves.
   script.js wraps the cards in .reviews-track and copies the row once, then adds .is-marquee.
   Without JavaScript (or with reduced motion) it stays a normal row you can scroll sideways. */
.reviews-slider {
  position: relative;
  display: flow-root;
}

.testimonial-grid {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  /* room around the cards so their shadows are not cut off */
  padding: 0.6rem 0.4rem 1.6rem;
  margin: -0.6rem -0.4rem -1.6rem;
}

.reviews-track {
  display: flex;
  width: max-content;
}

/* Wide, low cards: 440px wide, the text runs long instead of tall */
.testimonial-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 440px;
  margin-right: 1.5rem; /* margin, not gap, so half of the track is exactly one full set of cards */
  padding: 1.8rem 2rem;
  scroll-snap-align: start;
}

/* Carousel mode: every 2 seconds the next review slides to the centre.
   script.js gives each card an offset from the centre (--off: -1, 0, 1, ...) and the cards
   are absolutely positioned around the middle of the row. The centre card is bigger and
   highlighted, the cards next to it sit a little HIGHER, slightly smaller and softly blurred,
   the rest are hidden. Edges fade out with a mask. */
.testimonial-grid.is-carousel {
  overflow: hidden;
  /* The bottom padding is real layout space (no negative margin below) so the centre card's shadow
     fits inside the box without being cut, and the box never sits on top of the button below it. */
  padding: 2.6rem 0.4rem 4.2rem;
  margin: -2.6rem -0.4rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.is-carousel .reviews-track {
  position: relative;
  display: block;
  width: 100%;
  height: var(--stage-h, 420px);
}

.is-carousel .testimonial-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 440px;
  margin: 0;
  scroll-snap-align: none;
  cursor: pointer;
  z-index: var(--z, 0);
  opacity: var(--o, 1);
  filter: blur(var(--b, 0px));
  transform: translate(calc(-50% + var(--off, 0) * var(--step, 464px)), var(--y, 0px)) scale(var(--s, 1));
  transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.25, 1), opacity 0.8s ease, filter 0.8s ease,
    box-shadow 0.8s ease, border-color 0.8s ease, background 0.8s ease;
}

/* A card that is jumping from one end to the other (while hidden) must not slide across the row */
.is-carousel .testimonial-card.is-jumping {
  transition: none;
}

.is-carousel .testimonial-card.is-far {
  pointer-events: none;
}

/* The centre card: bigger, gold edge, soft crimson glow */
.is-carousel .testimonial-card.is-center {
  cursor: default;
  border-color: var(--accent);
  background: linear-gradient(180deg, #ffffff 0%, #fff8f0 100%);
  box-shadow: 0 18px 40px rgba(170, 19, 69, 0.2), 0 0 0 2px rgba(243, 146, 0, 0.35);
}

.is-carousel .testimonial-card.is-center .review-stars {
  filter: drop-shadow(0 0 6px rgba(243, 146, 0, 0.45));
}

/* Left and right arrows of the reviews carousel */
.reviews-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 6;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(170, 19, 69, 0.18);
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 8px 22px rgba(170, 19, 69, 0.18);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, scale 0.25s ease;
}

.reviews-arrow.is-prev { left: 0; }
.reviews-arrow.is-next { right: 0; }

/* Arrows only change colour and size on hover, they never slide sideways */
.reviews-arrow:hover {
  background: var(--primary);
  color: var(--white);
  scale: 1.1;
}

.reviews-arrow:active {
  scale: 0.94;
}

.reviews-arrow:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1000px) {
  .testimonial-card {
    flex-basis: 380px;
  }

  .is-carousel .testimonial-card {
    width: 380px;
  }
}

@media (max-width: 520px) {
  .testimonial-card {
    flex-basis: 84vw;
    padding: 1.5rem;
  }

  .is-carousel .testimonial-card {
    width: 84vw;
  }

  /* On phones the arrows sit under the card, side by side, so they never cover the text */
  .reviews-arrow {
    top: auto;
    bottom: 0.6rem;
    translate: none;
    width: 46px;
    height: 46px;
  }

  .reviews-arrow.is-prev { left: calc(50% - 56px); }
  .reviews-arrow.is-next { right: auto; left: calc(50% + 10px); }
}

/* The review text takes the free space, so the guest's name lines up at the bottom of every card */
.testimonial-card p {
  flex: 1;
}

/* Big orange quote mark and 5 stars above each review (same look as the reference the user showed) */
.review-quote {
  height: 2.4rem;
  margin-bottom: 0.3rem;
  font-family: var(--font-accent);
  font-size: 4.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}

.review-stars {
  margin-bottom: 1rem;
  font-size: 1.05rem;
  letter-spacing: 5px;
  color: var(--accent);
}

.testimonial-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

.testimonial-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.testimonial-tour {
  font-size: 0.78rem;
  color: var(--primary);
}

/* =========================================================
   CTA Strip
   ========================================================= */
.cta-strip {
  text-align: center;
  padding: 3.5rem 2rem;
  margin: 0 auto;
  background: var(--gradient-brand);
  color: var(--white);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.cta-strip > *:not(.ring-decor):not(.particles) {
  position: relative;
  z-index: 1;
}

/* Buttons in the CTA card stay in the middle (.hero-actions itself is left-aligned) */
.cta-strip .hero-actions {
  justify-content: center;
}

/* Little UAE skyline (images/skyline.svg) along the bottom of the card, very faint.
   The strip is one tile (640px) wider than the card and slides left by exactly one tile,
   so the loop has no jump. Only transform is animated. */
.cta-strip::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% + 640px);
  height: 96px;
  background: url("../images/skyline.svg") repeat-x left bottom / 640px 96px;
  opacity: 0.17;
  pointer-events: none;
  animation: skyline-drift 70s linear infinite;
}

@keyframes skyline-drift {
  to { transform: translateX(-640px); }
}

.cta-strip h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin-bottom: 0.5rem;
}

.cta-strip p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.5rem;
}

/* =========================================================
   Footer
   ========================================================= */
footer {
  background: #000000; /* brand black, as in the guideline's logo-on-black version */
  color: rgba(255, 255, 255, 0.7);
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-grid h3 {
  font-size: 1rem;
  color: var(--white);
  margin-bottom: 0.8rem;
}

.footer-grid p, .footer-grid a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.88rem;
  display: block;
  margin-bottom: 0.5rem;
}

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

/* Phone/Instagram/Facebook links in the footer: icon + text in a row
   (the general ".footer-grid a" rule above is display:block, so this
   overrides just these three to sit the icon next to the text) */
.footer-grid a.footer-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-grid a.footer-link svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.footer-bottom {
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
}

/* =========================================================
   WhatsApp Floating Button
   ========================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  width: 58px;
  height: 58px;
  background: #25d366;
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
  /* gentle up-and-down float; uses the separate `translate` property so it
     doesn't fight the hover `transform: scale()` */
  animation: whatsapp-bob 3s ease-in-out infinite;
}

@keyframes whatsapp-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
}

/* =========================================================
   Real icons (replace emoji), added 2026-09-22
   Brand marks (WhatsApp/Instagram/Facebook) are solid shapes using their
   real logo path; everything else is a plain 2px-stroke outline icon, the
   same style already used for the journey step icons above. Every icon
   uses currentColor, so it automatically matches whatever color its box
   already has — only SIZE needs setting per spot, never color.
   Without an explicit size an inline SVG can render huge in plain text flow
   (a bug that hit the Contact page's phone pill first time round) — so every
   icon spot below gets its own width/height rule, never left to "auto".
   ========================================================= */
svg[class^="icon-"] {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.why-icon svg,
.value-icon svg {
  width: 28px;
  height: 28px;
}

.quick-icon svg {
  width: 24px;
  height: 24px;
}

.loc-pin svg,
.map-card-pin svg {
  width: 22px;
  height: 22px;
}

.contact-info-item .icon svg {
  width: 20px;
  height: 20px;
}

.story-points li svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.hero-facts li svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

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

/* The "ping" ring is a separate circle that only scales and fades (transform + opacity).
   Those run on the graphics card. Animating box-shadow instead forces the browser to
   repaint everything under the button on every frame, which made scrolling stutter. */
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.65);
  pointer-events: none;
  animation: pulse-ring 2.4s ease-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* =========================================================
   Forms (Contact page)
   ========================================================= */
.form-card {
  padding: 2.5rem;
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
  color: var(--text-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-group input,
.form-group select,
.form-group textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* on focus: crimson border, a soft glow ring and a white field */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(170, 19, 69, 0.12);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.contact-info-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-info-item .icon {
  color: var(--primary);
}

.contact-info-item h3 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.contact-info-item p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.map-wrap {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 1.5rem;
}

.map-wrap iframe {
  width: 100%;
  height: 260px;
  border: 0;
}

/* =========================================================
   About page extras
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* Values: 3 cards with a photo on top. The photo zooms slowly on hover, the
   round icon sits on the photo's bottom edge and jumps a little. */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.8rem;
}

.value-card {
  position: relative;
  overflow: clip;
  text-align: left;
  transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.7s ease;
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 40px rgba(28, 16, 19, 0.13);
}

.value-img {
  position: relative;
  height: 210px;
  overflow: clip;
}

.value-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.value-card:hover .value-img img {
  transform: scale(1.1);
}

/* soft crimson fade at the bottom of the photo so the icon and number stand out */
.value-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(110, 12, 44, 0.55));
}

.value-num {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}

/* the icon is a direct child of the card (not of the photo box, which clips),
   placed so it straddles the photo's bottom edge (photo = 210px tall) */
.value-icon {
  position: absolute;
  left: 1.5rem;
  top: 182px;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 10px 22px rgba(28, 16, 19, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.value-card:hover .value-icon {
  transform: translateY(-6px) rotate(-8deg);
}

.value-body {
  padding: 2.3rem 1.6rem 1.8rem;
}

.value-body h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
}

.value-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Story: two overlapping photos, a turning dashed ring behind them and a badge */
.story-photos {
  position: relative;
  height: 470px;
}

.story-ring {
  position: absolute;
  width: 380px;
  height: 380px;
  left: -50px;
  top: -30px;
  border-radius: 50%;
  border: 2px dashed rgba(170, 19, 69, 0.28);
  animation: ring-spin 60s linear infinite;
}

.story-photo {
  position: absolute;
  margin: 0;
  overflow: clip;
  border-radius: 22px;
  box-shadow: 0 24px 48px rgba(28, 16, 19, 0.18);
  animation: story-float 8s ease-in-out infinite;
}

.story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-main {
  width: 68%;
  height: 380px;
  left: 0;
  top: 0;
}

.sp-side {
  width: 54%;
  height: 250px;
  right: 0;
  bottom: 0;
  border: 6px solid var(--white);
  animation-delay: -3s;
}

.story-badge {
  position: absolute;
  left: 8%;
  bottom: 6px;
  z-index: 2;
  padding: 0.9rem 1.3rem;
  border-radius: 18px;
  background: var(--gradient-brand);
  color: var(--white);
  text-align: center;
  box-shadow: 0 16px 32px rgba(170, 19, 69, 0.35);
  animation: story-float 6s ease-in-out infinite;
  animation-delay: -1.5s;
}

.story-badge strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.9rem;
  line-height: 1.1;
  color: #f39200;
}

.story-badge span {
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes story-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.story-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0;
}

.story-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(28, 16, 19, 0.05);
  font-size: 0.88rem;
  font-weight: 600;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.story-points li:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
}

/* Why Book With Us: tall photo on the left, 6 small cards on the right */
.why-split {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 2rem;
  align-items: stretch;
}

.why-photo {
  position: relative;
  margin: 0;
  min-height: 420px;
  border-radius: 24px;
  overflow: clip;
  box-shadow: 0 24px 48px rgba(28, 16, 19, 0.16);
}

.why-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: photo-pan 18s ease-in-out infinite alternate;
}

@keyframes photo-pan {
  from { transform: scale(1.12) translateX(-3%); }
  to { transform: scale(1.12) translateX(3%); }
}

.why-photo figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: 0.8rem 1.1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.85rem;
  line-height: 1.4;
}

.why-photo figcaption strong {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--primary);
}

.why-photo figcaption small {
  color: var(--text-muted);
}

.why-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

/* On this page the cards are stacked (icon on top) instead of sideways */
.why-tiles .why-card {
  display: block;
  padding: 1.5rem 1.4rem;
}

.why-tiles .why-icon {
  margin-bottom: 0.9rem;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.3s ease, color 0.3s ease;
}

.why-tiles .why-card:hover .why-icon {
  transform: scale(1.12) rotate(-8deg);
  background-color: var(--white);
  color: var(--primary);
}

/* Location: info card (with a photo) next to a big map */
.loc-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.8rem;
  align-items: stretch;
}

.loc-card {
  overflow: clip;
}

.loc-photo {
  position: relative;
  height: 190px;
}

.loc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loc-pin {
  position: absolute;
  right: 1.2rem;
  bottom: -22px;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  box-shadow: 0 10px 22px rgba(170, 19, 69, 0.4);
}

/* a ring that grows and fades out around the pin (transform + opacity only) */
.loc-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: pin-pulse 2.2s ease-out infinite;
}

@keyframes pin-pulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(2); opacity: 0; }
}

.loc-body {
  padding: 2rem 1.6rem 1.6rem;
}

.loc-grid .map-wrap {
  margin-top: 0;
  min-height: 420px;
  box-shadow: 0 4px 20px rgba(28, 16, 19, 0.05);
}

.loc-grid .map-wrap iframe {
  height: 100%;
  min-height: 420px;
}

/* About banner extras: the spinning "Born in Dubai" badge that sits over the postcards */
.about-hero .tours-hero-text h1 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
}

.spin-badge {
  position: absolute;
  z-index: 3;
  left: calc(45% - 55px);
  top: calc(47% - 55px);
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f39200, var(--accent));
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.spin-badge svg {
  width: 100%;
  height: 100%;
  animation: ring-spin 14s linear infinite;
}

.spin-badge text {
  font: 700 10.5px var(--font-heading);
  fill: #5a2a00;
}

/* the real logo mark sits in the middle of the turning text */
.spin-badge-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  translate: -50% -50%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

/* Destinations ticker: one long row of names that slides left forever.
   The row holds the same list twice, so moving it by exactly half loops seamlessly. */
.marquee {
  overflow: hidden;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: max-content;
  padding-right: 1.6rem;
  animation: marquee-slide 38s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track span {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
  white-space: nowrap;
}

.marquee-track i {
  font-style: normal;
  color: var(--accent);
}

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* "Rich" particles (data-particles-style="rich"): besides plain dots there are
   thin rings, diamonds and little 4-point stars, and they twinkle softly. */
.particles.rich .particle {
  animation: particle-drift var(--d, 20s) ease-in-out var(--delay, 0s) infinite alternate,
             particle-twinkle var(--tw, 4s) ease-in-out var(--delay, 0s) infinite;
}

.particle.p-ring {
  background: transparent;
  border: 1.5px solid var(--c);
}

.particle.p-diamond {
  border-radius: 2px;
  rotate: 45deg;
}

.particle.p-star {
  border-radius: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

@keyframes particle-twinkle {
  0%, 100% { opacity: var(--o, 0.2); }
  50% { opacity: calc(var(--o, 0.2) * 0.3); }
}

@media (max-width: 980px) {
  .why-split,
  .loc-grid {
    grid-template-columns: 1fr;
  }

  .why-photo {
    min-height: 280px;
  }

  .loc-grid .map-wrap,
  .loc-grid .map-wrap iframe {
    min-height: 320px;
  }
}

@media (max-width: 860px) {
  .story-photos {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }

  .story-points {
    justify-content: center;
  }

  .spin-badge {
    width: 96px;
    height: 96px;
    left: calc(45% - 48px);
    top: calc(47% - 48px);
  }
}

@media (max-width: 520px) {
  .story-photos {
    height: 380px;
  }

  .sp-main {
    height: 300px;
  }

  .sp-side {
    height: 190px;
  }

  .story-ring {
    width: 280px;
    height: 280px;
  }

  .why-tiles {
    grid-template-columns: 1fr;
  }

  .spin-badge {
    width: 78px;
    height: 78px;
    left: calc(45% - 39px);
    top: calc(47% - 39px);
  }

  .marquee-track span {
    font-size: 0.85rem;
    letter-spacing: 2px;
  }
}

/* =========================================================
   Contact page
   ========================================================= */

/* Banner: the chat demo sits in the middle, two photo postcards peek out behind it */
.contact-hero .tours-hero-cards {
  height: 430px;
}

.cp-1 { --rot: -7deg; width: 44%; height: 165px; left: 0; top: 6%; }
.cp-2 { --rot: 6deg; width: 44%; height: 165px; right: 0; bottom: 6%; animation-delay: -3s; }

/* A phone-style WhatsApp chat. script.js adds .on (message appears) and .done
   (typing dots turn into the real text) one after another, then starts over. */
.chat-demo {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: min(300px, 80%);
  border-radius: 22px;
  overflow: clip;
  background: #efe7dd;
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.4);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  background: #128c7e;
  color: var(--white);
}

/* the real NXT logo mark, cropped round like a WhatsApp profile photo */
.chat-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.chat-title {
  font: 700 0.92rem var(--font-heading);
  line-height: 1.2;
}

.chat-title small {
  display: block;
  font: 400 0.7rem var(--font-body);
  opacity: 0.85;
}

.chat-title small i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-radius: 50%;
  background: #7dffa8;
}

.chat-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 290px;
  padding: 1rem 0.8rem;
}

.msg {
  position: relative;
  max-width: 82%;
  padding: 0.55rem 0.8rem;
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.msg.on {
  opacity: 1;
  transform: none;
}

.msg.out {
  align-self: flex-end;
  background: #dcf8c6;
  border-bottom-right-radius: 4px;
}

.msg.in {
  align-self: flex-start;
  background: var(--white);
  border-bottom-left-radius: 4px;
}

/* Incoming messages show 3 bouncing dots first, then the text fades in over them */
.msg.in .txt {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.msg.in.done .txt {
  opacity: 1;
}

.typing {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  display: flex;
  gap: 4px;
  translate: 0 -50%;
  transition: opacity 0.2s ease;
}

.msg.done .typing {
  opacity: 0;
}

.typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a8a8a;
  animation: typing-bounce 1s ease-in-out infinite;
}

.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

/* Without JS (or with reduced motion) show the finished chat */
.no-js .msg,
.chat-demo.is-static .msg {
  opacity: 1;
  transform: none;
}

.no-js .msg.in .txt,
.chat-demo.is-static .msg.in .txt {
  opacity: 1;
}

.no-js .typing,
.chat-demo.is-static .typing {
  display: none;
}

/* Quick contact cards: 4 clickable cards that overlap the banner's bottom edge */
.quick-row {
  position: relative;
  z-index: 3;
  margin-top: -3.4rem;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.quick-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.2rem 1.3rem;
  overflow: clip;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(28, 16, 19, 0.13);
  color: var(--text);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.7s ease;
}

.quick-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 42px rgba(28, 16, 19, 0.18);
}

/* a coloured line that grows across the bottom on hover */
.quick-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--qc, var(--primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.quick-card:hover::after {
  transform: scaleX(1);
}

.qc-wa { --qc: #25d366; }
.qc-call { --qc: var(--primary); }
.qc-ig { --qc: #d6249f; }
.qc-fb { --qc: #1877f2; }

.quick-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.4rem;
  background: var(--primary-soft);
  color: var(--qc, var(--primary));
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.qc-wa .quick-icon { background: #e3f8ea; }
.qc-ig .quick-icon { background: #fbe6f4; }
.qc-fb .quick-icon { background: #e6effe; }

.quick-card:hover .quick-icon {
  transform: scale(1.12) rotate(-8deg);
}

.quick-text h3 {
  font-size: 0.98rem;
  margin-bottom: 0.1rem;
}

.quick-text p {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* A real SVG arrow (not the → text character, whose position depends on the font),
   centred inside a 28px box. It does not slide sideways on hover, it only grows a little. */
.quick-arrow {
  margin-left: auto;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qc, var(--primary));
  transition: transform 0.3s ease;
}

.quick-arrow svg {
  display: block;
  width: 20px;
  height: 20px;
}

.quick-card:hover .quick-arrow {
  transform: scale(1.18);
}

/* Form card: crimson-to-gold top edge, two fields per row, custom select arrow */
.form-card {
  position: relative;
  overflow: clip;
}

.form-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.2rem;
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a40c4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #b9a6a9;
}

.form-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  font-family: var(--font-body);
  font-size: 1rem;
}

.form-status {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--primary);
}

.form-status a {
  font-weight: 700;
  text-decoration: underline;
}

.form-note {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Side column: photo with a caption, then the "what happens next" steps */
/* the photo takes whatever height is left, so both columns end at the same line */
.contact-grid {
  align-items: stretch;
}

.contact-side {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1.5rem;
}

.side-photo {
  position: relative;
  min-height: 260px;
  margin: 0;
  overflow: clip;
  border-radius: 24px;
  box-shadow: 0 24px 48px rgba(28, 16, 19, 0.16);
}

.side-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: photo-pan 18s ease-in-out infinite alternate;
}

.side-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(110, 12, 44, 0.85));
}

.side-photo figcaption {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.3rem;
  z-index: 1;
  font: 700 1.35rem/1.25 var(--font-heading);
  color: var(--white);
}

.side-photo .accent-word {
  color: #f39200;
}

.steps-card {
  padding: 1.8rem;
}

.steps-card h3 {
  font-size: 1.1rem;
  margin-bottom: 1.5rem; /* leaves room for the logo, which starts just above the first badge */
}

/* The 3 steps are a small copy of the Home "Booking is Simple" journey: a dashed road that fills
   with colour as you scroll, the NXT logo riding its tip, and each number badge lighting up and
   popping when the logo reaches it. script.js drives it (data-journey on .steps-journey, the same
   code as the Home timeline) and sets --progress (0 to 1) and --journey-end (px, the centre of the
   last badge) on .steps-journey. */
.steps-journey {
  --progress: 0;
  --journey-end: 100%;
  position: relative;
  margin-top: 0.5rem;
}

/* the grey-pink dashed road, from the first badge to the last one */
.steps-journey::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  height: calc(var(--journey-end) - 18px);
  border-left: 2px dashed rgba(170, 19, 69, 0.3);
}

/* the coloured fill that grows down the road */
.steps-fill {
  position: absolute;
  left: 16px;
  top: 0;
  width: 4px;
  height: calc(var(--progress) * var(--journey-end));
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--primary), var(--accent));
}

/* the client's logo rides the tip of the fill */
.steps-logo {
  position: absolute;
  left: 18px;
  top: calc(var(--progress) * var(--journey-end));
  z-index: 3;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--white);
  background: var(--primary);
  box-shadow: 0 5px 12px rgba(170, 19, 69, 0.4);
}

.steps-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-steps {
  list-style: none;
}

.contact-steps li {
  position: relative;
  padding: 0 0 1.3rem 3.2rem;
}

.contact-steps li:last-child {
  padding-bottom: 0;
}

/* number badge: white with a pale ring until the logo arrives, then crimson with a gold ring and a small pop */
.contact-steps .step-num {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid rgba(170, 19, 69, 0.25);
  color: var(--primary);
  font: 800 0.9rem var(--font-heading);
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.contact-steps .step-num.is-reached {
  background: var(--primary);
  color: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(170, 19, 69, 0.12);
  transform: scale(1.1);
  animation: node-pop 0.5s ease-out both;
}

/* one soft gold ripple ring that spreads out of the badge */
.contact-steps .step-num::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

.contact-steps .step-num.is-reached::before {
  animation: node-ring 0.6s ease-out both;
}

.contact-steps strong {
  display: block;
  font: 600 0.98rem var(--font-heading);
}

.contact-steps span {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* Big map with the office card floating on top of it */
.map-wide {
  position: relative;
  overflow: clip;
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 44px rgba(28, 16, 19, 0.1);
}

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

/* centred vertically on the left so it doesn't cover Google's own "Open in Maps"
   link (top-left) or its logo (bottom-left) */
.map-card {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  translate: 0 -50%;
  z-index: 1;
  max-width: 320px;
  padding: 1.4rem 1.5rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 16px 36px rgba(28, 16, 19, 0.18);
}

.map-card-pin {
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: 0.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 1.2rem;
}

/* same growing ring as the About page pin */
.map-card-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: pin-pulse 2.2s ease-out infinite;
}

.map-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.map-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.map-card .btn {
  padding: 0.7rem 1.4rem;
  font-size: 0.88rem;
}

/* FAQ: <details> boxes. The + turns into an x when open and the answer slides in. */
.faq {
  display: grid;
  gap: 0.9rem;
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  overflow: clip;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(28, 16, 19, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.7s ease, transform 0.7s ease;
}

.faq-item[open] {
  border-color: rgba(170, 19, 69, 0.35);
  box-shadow: 0 14px 30px rgba(170, 19, 69, 0.09);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  list-style: none;
  font: 600 1rem var(--font-heading);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  background: var(--primary);
  color: var(--white);
}

.faq-item summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.faq-body {
  padding: 0 1.4rem 1.3rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  animation: faq-open 0.4s ease;
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.faq-more {
  margin-top: 2rem;
  text-align: center;
  color: var(--text-muted);
}

.faq-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
  color: var(--primary);
  font-weight: 700;
}

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

@media (max-width: 860px) {
  .contact-hero {
    padding-bottom: 6.5rem;
  }

  .contact-hero .tours-hero-cards {
    height: 400px;
  }
}

@media (max-width: 700px) {
  /* card goes above the map instead of floating over it */
  .map-card {
    position: static;
    translate: none;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }

  .map-wide iframe {
    height: 320px;
  }

  .form-card {
    padding: 2rem 1.4rem;
  }
}

@media (max-width: 520px) {
  .contact-hero .tours-hero-cards {
    height: 380px;
  }

  .cp-1,
  .cp-2 {
    height: 130px;
  }

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

@media (max-width: 440px) {
  .quick-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background: rgba(251, 244, 246, 0.97);
    backdrop-filter: blur(14px);
    flex-direction: column;
    justify-content: center;
    box-shadow: -10px 0 30px rgba(28, 16, 19, 0.1);
    transition: right 0.35s ease;
  }

  .nav-links.open {
    right: 0;
  }

  /* The slide-in panel is light pink, so its links (and the X that closes it)
     must be dark even while the bar itself is still see-through at the top */
  .navbar .nav-links a,
  .navbar.scrolled .nav-links a {
    color: var(--text);
  }

  .navbar .nav-links a::after,
  .navbar.scrolled .nav-links a::after {
    background: var(--primary);
  }

  .navbar .nav-links a.active,
  .navbar.scrolled .nav-links a.active {
    color: var(--primary);
  }

  .navbar .nav-links a.nav-cta {
    color: var(--white);
  }

  .navbar .nav-toggle.active span {
    background: var(--text);
  }

  .nav-toggle {
    display: flex;
  }

  .hero {
    padding: 7rem 0 8.5rem;
  }

  .hero h1 {
    font-size: 4rem;
  }

  /* Tablet/phone: the photo picker moves to the bottom centre; the scroll hint is hidden to make room */
  .hero-picker {
    left: 50%;
    top: auto;
    translate: -50% 0;
    bottom: 1.8rem;
    flex-direction: row;
  }

  .hero-thumbs {
    flex-direction: row;
  }

  .hero-arrow svg {
    rotate: none;
  }

  .scroll-cue {
    display: none;
  }

  .contact-grid,
  .about-grid,
  .spotlight,
  .spotlight.reverse .spotlight-img {
    grid-template-columns: 1fr;
    order: initial;
  }

  .about-grid {
    text-align: center;
  }

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

  .spotlight-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  /* scales with the screen width so "Like Never Before" always stays on one line */
  .hero h1 {
    font-size: clamp(2.2rem, 10.6vw, 3rem);
  }

  .hero-h1-top {
    letter-spacing: 0.3em;
  }

  .hero p {
    font-size: 1.05rem;
  }

  .slide figcaption {
    font-size: 0.66rem;
    padding: 0.3rem 0.65rem;
    max-width: calc(100% - 6rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .slider-btn {
    width: 38px;
    height: 38px;
  }

  /* Smaller picker so it fits a 360px screen, lifted so it never sits under the floating WhatsApp button */
  .hero {
    padding-bottom: 9.5rem;
  }

  .hero-picker {
    bottom: 5.6rem;
  }

  .hero-thumb {
    width: 54px;
    height: 44px;
    border-radius: 10px;
  }

  /* 5 photos + arrows + count don't fit a phone's width: on phones the photos alone are the
     picker (tap one to show it); they still change by themselves every few seconds */
  .hero-picker-controls {
    display: none;
  }

  .hero-thumb span {
    display: none;
  }

  .hero-arrow {
    width: 38px;
    height: 38px;
  }

  .hero-picker {
    gap: 0.5rem;
  }

  .page-hero h1 {
    font-size: 2.3rem;
  }

  .section-title {
    font-size: 2.05rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  /* Keep decorative rings subtle and out of the way on small screens */
  .ring-decor::before,
  .ring-decor::after {
    opacity: 0.5;
  }
}

/* People who prefer less motion get the finished hero without any movement */
@media (prefers-reduced-motion: reduce) {
  .hero-content > *,
  .hero-picker {
    animation: none;
    opacity: 1;
  }

  .cta-strip::before,
  .stats-strip::before {
    animation: none;
  }

  .contact-steps .step-num.is-reached,
  .contact-steps .step-num.is-reached::before,
  .journey-node.is-reached,
  .journey-node.is-reached::before {
    animation: none;
  }

  .hero-bg-img,
  .rotator-track {
    transition-duration: 0.01s;
  }

  .hero-bg-img {
    transform: none;
  }

  .particle,
  .particles.rich .particle,
  .postcard,
  .float-chip,
  .spin-badge svg,
  .marquee-track,
  .story-ring,
  .story-photo,
  .story-badge,
  .why-photo img,
  .loc-pin::after,
  .map-card-pin::after,
  .side-photo img,
  .typing i,
  .faq-body,
  .rotator-track,
  .rotator-track > span,
  .scroll-cue span,
  .whatsapp-float,
  .whatsapp-float::after {
    animation: none;
  }

  .ring-decor::before,
  .ring-decor::after {
    animation: none;
  }
}

/* =========================================================
   Tour details popup (opens when a tour card is clicked)
   A native <dialog>: Esc closes it, focus stays inside it, and the dark
   backdrop is styled with ::backdrop. Photos on the left, details on the
   right; the "Book on WhatsApp" bar stays pinned at the bottom.
   ========================================================= */
body.modal-open {
  overflow: hidden;
}

button.btn {
  font-family: var(--font-body);
}

/* Cards that open the popup */
.tour-card[data-tour] {
  cursor: pointer;
}

.tour-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: 700 0.88rem var(--font-body);
  cursor: pointer;
}

/* Small arrow after a text link/button: an SVG centred on the text line.
   It only grows a little on hover, it never slides sideways. */
.arrow-inline {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.tour-more span {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.tour-card:hover .tour-more span,
.tour-more:hover span {
  transform: scale(1.2);
}

.tour-more:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* a "View details" pill that rises over the photo on hover */
.tour-card[data-tour] .tour-img-wrap::after {
  content: "View details";
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 3;
  translate: -50% 10px;
  padding: 0.45rem 2.35rem 0.45rem 1rem;
  border-radius: 50px;
  /* the arrow is a background image placed at the exact vertical centre of the pill */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a40c4a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 15px 15px,
    rgba(255, 255, 255, 0.94);
  color: var(--primary);
  font: 700 0.8rem var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, translate 0.3s ease;
}

.tour-card[data-tour]:hover .tour-img-wrap::after {
  opacity: 1;
  translate: -50% 0;
}

/* The window */
.tour-modal {
  width: min(1040px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}

.tour-modal[open] {
  animation: tm-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.tour-modal.is-closing {
  animation: tm-out 0.18s ease forwards;
}

.tour-modal::backdrop {
  background: rgba(28, 16, 19, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: tm-fade 0.3s ease;
}

.tour-modal.is-closing::backdrop {
  animation: tm-fade-out 0.18s ease forwards;
}

@keyframes tm-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes tm-out {
  to { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes tm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tm-fade-out {
  to { opacity: 0; }
}

.tm-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  height: min(680px, calc(100dvh - 2rem));
}

.tm-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 6;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.tm-close:hover {
  transform: rotate(90deg);
  background: var(--primary);
  color: var(--white);
}

.tm-close:focus-visible,
.tm-arrow:focus-visible,
.tm-thumbs button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Photos */
.tm-gallery {
  position: relative;
  background: #1c1013;
  overflow: hidden;
}

.tm-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 30%, transparent 55%, rgba(28, 16, 19, 0.85));
  pointer-events: none;
}

.tm-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.6s ease;
}

.tm-photo.is-swapping {
  opacity: 0;
  transform: scale(1.05);
}

.tm-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  background: rgba(28, 16, 19, 0.7);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.tm-caption {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 5.2rem;
  z-index: 3;
  color: var(--white);
  font: 700 1.05rem var(--font-heading);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.tm-thumbs {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.1rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.tm-thumbs button {
  width: 66px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.tm-thumbs button:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.tm-thumbs button.is-active {
  opacity: 1;
  border-color: var(--white);
}

.tm-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-arrow {
  position: absolute;
  top: 42%;
  z-index: 4;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

.tm-arrow:hover {
  transform: scale(1.1);
  background: var(--white);
}

/* The ‹ › and × are real SVGs (not text characters), so they sit at the exact centre of the round button */
.tm-arrow svg,
.tm-close svg {
  display: block;
  width: 20px;
  height: 20px;
}

.tm-prev { left: 0.9rem; }
.tm-next { right: 0.9rem; }

.tm-gallery.is-single .tm-arrow,
.tm-gallery.is-single .tm-thumbs {
  display: none;
}

.tm-gallery.is-single .tm-caption {
  bottom: 1.3rem;
}

/* Details column: scrolls by itself, booking bar stays pinned below it */
.tm-info {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tm-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2rem 1rem;
}

.tm-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0.2rem 3rem 0.8rem 0;
  line-height: 1.15;
}

.tm-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.tm-price {
  font: 800 2rem var(--font-heading);
  color: var(--primary);
}

.tm-was {
  color: var(--text-muted);
  font-size: 1rem;
}

.tm-save {
  padding: 0.2rem 0.65rem;
  border-radius: 50px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.tm-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.tm-facts li {
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.tm-intro {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.tm-scroll h3 {
  margin: 1.3rem 0 0.6rem;
  font-size: 0.95rem;
}

/* "Stops on this tour": every stop is its own small photo with its name under it */
.tm-stops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 0.75rem 0.6rem;
}

.tm-stops figure {
  margin: 0;
}

.tm-stops img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  background: var(--bg-muted);
  box-shadow: 0 4px 12px rgba(28, 16, 19, 0.12);
}

.tm-stops figcaption {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--text);
}

.tm-morestops-label {
  margin: 1rem 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tm-morestops {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tm-morestops li {
  padding: 0.3rem 0.75rem;
  border-radius: 50px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 600;
}

.tm-points {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.tm-points li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.tm-points li::before {
  content: "✓";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
}

.tm-ask {
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  background: var(--bg-muted);
  color: var(--text-muted);
  font-size: 0.86rem;
}

.tm-book {
  padding: 1rem 2rem 1.4rem;
  border-top: 1px solid var(--border);
  background: var(--white);
}

.tm-book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.tm-book label {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.tm-book input {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-muted);
  color: var(--text);
  font: 0.9rem var(--font-body);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.tm-book input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(170, 19, 69, 0.12);
}

.tm-wa {
  display: block;
  text-align: center;
}

/* Phones: full-screen sheet, photo on top */
@media (max-width: 820px) {
  .tour-modal {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .tour-modal[open] {
    animation-name: tm-sheet;
  }

  .tm-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 250px minmax(0, 1fr);
    height: 100dvh;
  }

  .tm-caption {
    bottom: 4.3rem;
    font-size: 0.95rem;
  }

  .tm-thumbs button {
    width: 54px;
    height: 40px;
  }

  .tm-scroll {
    padding: 1.4rem 1.3rem 0.8rem;
  }

  .tm-title {
    margin-right: 0;
  }

  .tm-book {
    padding: 0.9rem 1.3rem 1.1rem;
  }
}

@keyframes tm-sheet {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-modal[open],
  .tour-modal::backdrop,
  .tour-modal.is-closing,
  .tour-modal.is-closing::backdrop {
    animation: none;
  }

  .tm-photo,
  .tm-close,
  .tour-card[data-tour] .tour-img-wrap::after {
    transition: none;
  }
}
/* ---- Guest gallery (Home): masonry grid, 4 columns, 2 tall + 4 short tiles ----
   The tall tiles span 2 rows; the browser fills the free cells with the short ones. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 1.2rem;
}

.gallery-item {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: clip;
  background: var(--bg-muted);
  box-shadow: 0 10px 30px rgba(28, 16, 19, 0.1);
}

.gallery-item.is-tall {
  grid-row: span 2;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.7s ease;
}

.gallery-item:hover img {
  scale: 1.06;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
    gap: 1rem;
  }
}

/* Phone: same 2 columns, smaller tiles */
@media (max-width: 520px) {
  .gallery-grid {
    grid-auto-rows: 150px;
    gap: 0.7rem;
  }

  .gallery-item {
    border-radius: 16px;
  }
}


/* =========================================================
   Tour detail page (tour.html): a full page instead of the old popup, for card clicks
   ("iss type ka page khuly jaha uss tour ki malumaat ho" reference the user showed).
   Reuses the .tm-* classes already built for the tour popup (gallery, facts pills,
   highlights checklist, stops grid) so the two never visually drift apart.
   ========================================================= */
/* Header: no more crimson banner, but not plain white either, per the user's request: a soft
   pink-to-white wash using the same crimson as the logo, just very light so the dark text
   (and the light-glass navbar over it) both stay easy to read. Left-aligned, sits directly on
   the page background; padding-top clears the fixed navbar since this page no longer has a
   dark hero photo underneath it. */
.tour-header {
  padding: 6.5rem 1.5rem 1.1rem;
  text-align: left;
  background: linear-gradient(180deg, #f6e4ea 0%, #fbf4f6 55%, var(--white) 100%);
}

.tour-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  transition: gap 0.2s ease, color 0.2s ease;
}

.tour-back-link svg {
  width: 16px;
  height: 16px;
}

.tour-back-link:hover {
  color: var(--accent-text);
}

.tour-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.tour-breadcrumb a {
  color: var(--primary);
  font-weight: 600;
  transition: color 0.2s ease;
}

.tour-breadcrumb a:hover {
  color: var(--accent-text);
}

.tour-header h1 {
  color: var(--text);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 0.5rem;
}

/* The italic accent word is bold everywhere else on the site, but at this smaller size a bold
   weight looked too heavy next to the plain part of the title, so it is lighter here only */
.tour-header h1 .accent-word {
  font-weight: 500;
  font-size: 1.03em;
}

/* Meta facts on the left, Sharing/Private switch on the right, same row */
.tour-header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  margin-top: 1.3rem;
}

/* Row of quick facts under the title: real, already-used stats, dot-separated */
.tour-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
}

.tour-hero-meta li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85rem;
}

.tour-hero-meta li:not(:first-child)::before {
  content: "\00b7";
  margin: 0 0.9rem;
  color: var(--text-muted);
  font-weight: 400;
}

.tour-hero-meta li[hidden] {
  display: none;
}

/* If duration is hidden, its dot separator would float on its own: hide that too */
.tour-hero-meta li[hidden]::before {
  display: none;
}

.tour-hero-meta svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
  flex: none;
}

@media (max-width: 600px) {
  .tour-header {
    padding-top: 5.5rem;
  }

  /* The row wraps to several lines on narrow screens, where a lone "·" at the start
     of a wrapped line looks like a stray mark: use plain gaps here instead */
  .tour-hero-meta {
    row-gap: 0.7rem;
    column-gap: 1.1rem;
  }

  .tour-hero-meta li:not(:first-child)::before {
    display: none;
  }
}

/* Less top padding than the generic .section default: the pink header above already gives
   the page its breathing room, so the gallery can start right after it instead of leaving
   another big gap (the bottom padding stays, for the space before the CTA strip below) */
.tour-detail {
  padding-top: 1.3rem;
}

.tour-detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.tour-detail-main h2 {
  margin: 2rem 0 0.8rem;
  font-size: 1.35rem;
}

.tour-detail-main > h2:first-of-type {
  margin-top: 0;
}

.tour-page-intro {
  color: var(--text-muted);
  line-height: 1.65;
}

.tour-why-sub {
  color: var(--text-muted);
  margin-top: -0.5rem;
  margin-bottom: 1.3rem;
}

/* 4 across on this page (the About page's own .why-tiles stays 2 across there) */
.tour-why-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0.5rem;
}

/* A real photo on top of each card (or the same branded placeholder used for stop cards
   elsewhere, until a real one is supplied), with the icon overlapping its bottom edge like a
   small badge, matching the reference the user pointed to */
.tour-why-grid .why-card {
  /* Without this, CSS Grid's default min-width:auto lets a card grow to fit the photo's natural
     size instead of the grid column, which is why the photo was rendering far too big */
  min-width: 0;
  padding: 0 0 1.6rem;
  overflow: hidden;
}

.tour-why-grid .tour-why-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-muted);
}

.tour-why-grid .tour-why-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tour-why-grid .why-card:hover .tour-why-photo img {
  transform: scale(1.06);
}

.tour-why-grid .tour-why-photo.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 55%), var(--gradient-brand);
}

.tour-why-grid .tour-why-photo.is-empty img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background: var(--white);
  object-fit: cover;
}

.tour-why-grid .why-card:hover .tour-why-photo.is-empty img {
  transform: scale(1.08);
}

/* White circle badge, overlapping the photo's bottom edge */
.tour-why-grid .why-icon {
  width: 48px;
  height: 48px;
  margin: -24px 0 0.9rem 1.3rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  border: 3px solid var(--white);
  box-shadow: 0 4px 12px rgba(28, 16, 19, 0.18);
}

.tour-why-grid .why-card:hover .why-icon {
  background: var(--white);
  color: var(--primary);
}

.tour-why-grid .why-icon svg {
  width: 21px;
  height: 21px;
}

.tour-why-grid h3,
.tour-why-grid p {
  padding: 0 1.3rem;
}

/* Lighter than the site's usual heading weight (700): the reference the user pointed to uses a
   softer, more open look here, not a bold/heavy one */
.tour-why-grid h3 {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.55rem;
}

.tour-why-grid p {
  font-size: 0.86rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

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

@media (max-width: 520px) {
  .tour-why-grid {
    grid-template-columns: 1fr;
  }
}

/* Photo grid above the description: one big photo + up to 4 small tiles. The layout adapts to
   how many photos a tour has (data-count, set by script.js), same idea as a "1 big + 2x2 small"
   listing-site gallery, just built from whatever photos exist instead of always needing 5. */
.tour-gallery-grid {
  display: grid;
  gap: 8px;
  height: 420px;
  margin-bottom: 1.6rem;
  border-radius: 20px;
  overflow: hidden;
}

.tour-gallery-grid button {
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  background: #1c1013;
}

.tour-gallery-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tour-gallery-grid button:hover img {
  transform: scale(1.06);
}

.tour-gallery-grid button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* "+N photos" overlay on the last small tile, when a tour has more photos than the grid shows */
.g-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 16, 19, 0.55);
  color: var(--white);
  font: 700 1rem var(--font-heading);
  transition: background 0.3s ease;
}

.tour-gallery-grid button:hover .g-more {
  background: rgba(28, 16, 19, 0.68);
}

.tour-gallery-grid[data-count="2"] {
  grid-template-columns: 1.6fr 1fr;
}

.tour-gallery-grid[data-count="3"],
.tour-gallery-grid[data-count="4"],
.tour-gallery-grid[data-count="5"] {
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.tour-gallery-grid[data-count="4"],
.tour-gallery-grid[data-count="5"] {
  grid-template-columns: 1.6fr 1fr 1fr;
}

.tour-gallery-grid .g-main { grid-column: 1; grid-row: 1; }

.tour-gallery-grid[data-count="3"] .g-main,
.tour-gallery-grid[data-count="4"] .g-main,
.tour-gallery-grid[data-count="5"] .g-main {
  grid-row: 1 / 3;
}

.tour-gallery-grid[data-count="3"] .g-thumb:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.tour-gallery-grid[data-count="3"] .g-thumb:nth-of-type(3) { grid-column: 2; grid-row: 2; }

.tour-gallery-grid[data-count="4"] .g-thumb:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.tour-gallery-grid[data-count="4"] .g-thumb:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.tour-gallery-grid[data-count="4"] .g-thumb:nth-of-type(4) { grid-column: 2 / 4; grid-row: 2; }

.tour-gallery-grid[data-count="5"] .g-thumb:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.tour-gallery-grid[data-count="5"] .g-thumb:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.tour-gallery-grid[data-count="5"] .g-thumb:nth-of-type(4) { grid-column: 2; grid-row: 2; }
.tour-gallery-grid[data-count="5"] .g-thumb:nth-of-type(5) { grid-column: 3; grid-row: 2; }

@media (max-width: 700px) {
  .tour-gallery-grid {
    height: 300px;
  }
}

/* Phones: the grid is swapped for a swipe row of every photo (built by script.js) */
.tour-swipe {
  display: none;
}

@media (max-width: 560px) {
  .tour-gallery-grid {
    display: none;
  }

  .tour-swipe {
    display: block;
    position: relative;
    margin-bottom: 1.6rem;
    border-radius: 20px;
    overflow: hidden;
    background: #1c1013;
  }

  .tour-swipe-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tour-swipe-track::-webkit-scrollbar {
    display: none;
  }

  .tour-swipe-track button {
    flex: 0 0 100%;
    height: 280px;
    padding: 0;
    border: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: none;
    cursor: pointer;
  }

  .tour-swipe-track img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tour-swipe-count {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--white);
    font: 600 0.8rem var(--font-heading);
    pointer-events: none;
  }

  .tour-swipe-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
  }

  .tour-swipe-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transition: width 0.25s ease, background 0.25s ease;
  }

  .tour-swipe-dots span.is-active {
    width: 16px;
    border-radius: 4px;
    background: var(--accent);
  }
}

/* Full-screen photo viewer dialog, opened by clicking a grid tile above: counter + close along the
   top, a big photo with large arrows on either side, and a thumbnail strip BELOW the photo (not
   overlaid on it) */
/* display:none must win when the dialog is closed: a plain class selector can otherwise out-rank
   the browser's own "dialog:not([open])" default, which left this dialog visibly open on the page
   even before anyone clicked a photo. Explicit :not([open]) here settles that regardless. */
.tour-lightbox:not([open]) {
  display: none;
}

.tour-lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1200px, 94vw);
  height: min(720px, 92vh);
  padding: 1.1rem 1.2rem 1.4rem;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #1c1013;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}

.tour-lightbox[open] {
  display: flex;
  flex-direction: column;
  animation: tm-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.tour-lightbox::backdrop {
  background: rgba(28, 16, 19, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.lightbox-count {
  direction: ltr;
  color: rgba(255, 255, 255, 0.85);
  font: 700 0.9rem var(--font-heading);
}

.lightbox-top .tm-close {
  position: static;
}

.lightbox-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}

.lightbox-photo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.lightbox-photo.is-swapping {
  opacity: 0;
  transform: scale(1.03);
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  transition: background 0.25s ease, scale 0.25s ease;
}

.lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.26);
  scale: 1.08;
}

.lightbox-arrow[hidden] {
  display: none;
}

.lightbox-arrow.is-prev {
  left: 0.9rem;
}

.lightbox-arrow.is-next {
  right: 0.9rem;
}

.lightbox-arrow svg {
  width: 22px;
  height: 22px;
}

.lightbox-caption {
  margin-top: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  font: 700 0.95rem var(--font-heading);
  text-align: center;
}

.lightbox-thumbs {
  margin-top: 0.8rem;
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.lightbox-thumbs[hidden] {
  display: none;
}

.lightbox-thumbs button {
  flex: none;
  width: 78px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: none;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.lightbox-thumbs button:hover {
  opacity: 0.9;
}

.lightbox-thumbs button.is-active {
  opacity: 1;
  border-color: var(--accent);
}

.lightbox-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .tour-lightbox {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    padding: 0.8rem;
  }

  .lightbox-arrow {
    width: 42px;
    height: 42px;
  }

  .lightbox-thumbs button {
    width: 60px;
    height: 44px;
  }
}

/* Same pill-row look as the old popup facts, just reused on the page */
.tour-facts-strip {
  margin-top: 1.5rem;
}

/* Booking card: pinned to the top of the right column while you scroll the description */
.tour-detail-side {
  position: sticky;
  top: 6.5rem;
}

.tour-booking-card {
  padding: 1.6rem;
}

/* Price shown as a solid crimson box (like a reference travel site the client showed), not
   plain text on the white card */
.tour-booking-card .tm-price-row {
  margin: 0 0 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: var(--gradient-brand);
}

.tour-booking-card .tm-price {
  color: var(--white);
}

.tour-booking-card .tm-was {
  color: rgba(255, 255, 255, 0.75);
}

.tour-booking-card .tm-save {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

/* Small label above the big price ("Sharing tour, per person") */
.tm-price-label {
  display: block;
  width: 100%;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

.tour-booking-card .tm-was[hidden],
.tour-booking-card .tm-save[hidden] {
  display: none;
}

/* Private prices: a light block under the crimson sharing-price box */
.tour-private-box {
  margin: -0.4rem 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px dashed rgba(170, 19, 69, 0.25);
  border-radius: 14px;
  background: var(--bg-muted);
}

.tour-private-box[hidden] {
  display: none;
}

.tour-private-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.tour-private-head svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.tour-private-list {
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.tour-private-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.88rem;
  color: var(--text);
}

.tour-private-list strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--primary);
  white-space: nowrap;
}

.tour-private-note {
  margin-top: 0.55rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tour-book-field[hidden],
.tour-book-field [hidden] {
  display: none;
}

.tour-book-title {
  margin: 0.2rem 0 0.8rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.tour-book-optional {
  font-weight: 500;
  opacity: 0.75;
}

.tour-book-field input.is-invalid,
.tour-book-field select.is-invalid {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Travel date: horizontal row of day chips ---- */
.date-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.date-month {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}

/* The 60 day chips must scroll inside the card, never widen the card or its grid column */
.tour-detail-side,
.tour-booking-card {
  min-width: 0;
}

.date-strip {
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.date-strip.is-invalid {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.date-track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
  padding: 2px;
}

.date-track::-webkit-scrollbar {
  display: none;
}

.date-track:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
  border-radius: 10px;
}

.date-day {
  flex: 0 0 54px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.45rem 0 0.4rem;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--bg-muted);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.date-day:hover {
  border-color: rgba(170, 19, 69, 0.35);
}

/* A day the team blocked in the admin panel: struck through, can't be picked */
.date-day.is-blocked {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: transparent;
}

.date-day.is-blocked .date-num {
  text-decoration: line-through;
}

.cal-day.is-blocked {
  text-decoration: line-through;
}

/* "Bookings for tomorrow close at 6:00 PM Dubai time": orange info line under the dates */
.date-note {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.45;
}

.date-note::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 0.1rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.date-dow {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

.date-num {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.date-mon {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
}

.date-day.is-weekend .date-dow {
  color: var(--accent-text);
}

.date-day.is-selected {
  background: var(--gradient-brand);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 6px 16px rgba(170, 19, 69, 0.28);
  transform: translateY(-1px);
}

.date-day.is-selected .date-dow,
.date-day.is-selected .date-mon {
  color: rgba(255, 255, 255, 0.85);
}

.date-arrow {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.date-arrow svg {
  width: 16px;
  height: 16px;
}

.date-arrow:hover:not(:disabled) {
  background: var(--primary);
  color: var(--white);
}

.date-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.date-head-right {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.date-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(170, 19, 69, 0.25);
  border-radius: 999px;
  background: var(--white);
  color: var(--primary);
  font: 600 0.72rem var(--font-body);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.date-cal-btn svg {
  width: 14px;
  height: 14px;
}

.date-cal-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* Spam trap field: off screen for people, bots still fill it */
.tour-book-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tour-book-btn.is-loading {
  opacity: 0.75;
  pointer-events: none;
  cursor: progress;
}

/* ---- "Booking request received" popup ---- */
.done-dialog {
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: 0 0 1.3rem;
}

.done-hero {
  padding: 1.8rem 1.5rem 1.4rem;
  background: var(--gradient-brand);
  color: var(--white);
  text-align: center;
}

.done-check {
  width: 58px;
  height: 58px;
  margin: 0 auto 0.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.18);
  animation: done-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

.done-check svg {
  width: 28px;
  height: 28px;
}

@keyframes done-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.done-hero h3 {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
}

.done-hero p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
}

.done-body {
  padding: 1.2rem 1.4rem 0;
}

.done-ref {
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: var(--bg-muted);
  text-align: center;
}

.done-ref span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.done-ref strong {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--primary);
}

.done-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1rem;
  margin: 1rem 0 0;
  font-size: 0.86rem;
}

.done-summary dt {
  color: var(--text-muted);
}

.done-summary dd {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.done-note {
  margin: 0.9rem 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.done-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: #25d366;
  color: var(--white);
}

.done-wa svg {
  width: 20px;
  height: 20px;
}

.done-wa:hover {
  background: #1fb857;
}

.done-close {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  font: 600 0.9rem var(--font-body);
  cursor: pointer;
}

.done-close:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---- Full calendar popup (same shell as the pickup picker) ---- */
.cal-dialog {
  width: min(400px, calc(100vw - 2rem));
  margin: auto;
  inset: 0;
  padding: 0 0 1.1rem;
  border: none;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(28, 16, 19, 0.3);
}

.cal-dialog::backdrop {
  background: rgba(28, 16, 19, 0.55);
  backdrop-filter: blur(3px);
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.2rem 1.3rem 0.7rem;
  padding: 0.45rem;
  border-radius: 14px;
  background: var(--bg-muted);
}

.cal-month {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text);
}

.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  margin: 0 1.3rem;
}

.cal-week span {
  padding-bottom: 0.3rem;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cal-week span:nth-child(5),
.cal-week span:nth-child(6) {
  color: var(--accent-text);
}

.cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--bg-muted);
  color: var(--text);
  font: 600 0.9rem var(--font-heading);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cal-day:hover:not(:disabled),
.cal-day:focus-visible {
  border-color: rgba(170, 19, 69, 0.45);
  outline: none;
}

.cal-day.is-weekend:not(:disabled):not(.is-selected) {
  color: var(--accent-text);
}

.cal-day:disabled {
  background: transparent;
  color: #cbbcc0;
  cursor: default;
}

.cal-day.is-today {
  border-color: rgba(170, 19, 69, 0.2);
  border-style: dashed;
}

.cal-day.is-selected {
  background: var(--gradient-brand);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(170, 19, 69, 0.28);
}

.cal-picked {
  min-height: 1.2em;
  margin: 0.8rem 1.3rem 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  text-align: center;
}

/* ---- Pickup point: button that opens the picker ---- */
.pickup-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-muted);
  font: 600 0.9rem var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pickup-trigger:hover {
  border-color: rgba(170, 19, 69, 0.35);
}

.pickup-trigger.has-value {
  color: var(--text);
  border-color: rgba(170, 19, 69, 0.3);
  background: var(--bg-muted);
}

.pickup-trigger.is-invalid {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.pickup-trigger-pin {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.pickup-trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickup-trigger-chev {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--primary);
}

/* ---- Pickup picker popup ---- */
.pickup-dialog {
  width: min(520px, calc(100vw - 2rem));
  max-height: min(680px, calc(100vh - 2rem));
  margin: auto;
  inset: 0;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(28, 16, 19, 0.3);
  overflow: hidden;
}

.pickup-dialog[open] {
  display: flex;
  flex-direction: column;
}

.pickup-dialog::backdrop {
  background: rgba(28, 16, 19, 0.55);
  backdrop-filter: blur(3px);
}

.pickup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.3rem 0.8rem;
}

.pickup-head h3 {
  font-size: 1.15rem;
  margin: 0;
}

.pickup-sub {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pickup-head .tm-close {
  position: static;
  flex: none;
  background: var(--bg-muted);
  color: var(--primary);
}

.pickup-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 1.3rem 0.6rem;
  padding: 0 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg-muted);
  transition: border-color 0.2s ease;
}

.pickup-search:focus-within {
  border-color: var(--primary);
}

.pickup-search svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.pickup-search input {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0;
  border: none;
  background: transparent;
  font: 500 0.92rem var(--font-body);
  color: var(--text);
  outline: none;
}

.pickup-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.2rem 1.3rem 1.2rem;
  overscroll-behavior: contain;
}

.pickup-group h4 {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.7rem 0 0.4rem;
  background: var(--white);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary);
}

.pickup-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  margin-bottom: 0.35rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pickup-row:hover,
.pickup-row:focus-visible {
  border-color: rgba(170, 19, 69, 0.4);
  background: var(--bg-muted);
  outline: none;
}

.pickup-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pickup-row-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.pickup-row-sub {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-text);
}

.pickup-check {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--primary);
  opacity: 0;
}

.pickup-row.is-selected {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.pickup-row.is-selected .pickup-check {
  opacity: 1;
}

.pickup-row.is-special,
.pickup-row.is-help {
  border-style: dashed;
  border-color: rgba(170, 19, 69, 0.35);
  background: var(--bg-muted);
}

.pickup-row.is-special {
  margin: 0.4rem 0 0.2rem;
}

.pickup-row.is-help {
  margin-top: 0.9rem;
}

.pickup-row.is-special .pickup-row-sub,
.pickup-row.is-help .pickup-row-sub {
  color: var(--text-muted);
  font-weight: 500;
}

.pickup-empty {
  padding: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .pickup-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
  }
}

/* Area heading rows in the pickup table under the timeline */
.tl-pickup .tl-pickup-area th {
  padding-top: 0.8rem;
  background: var(--white);
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
}

.tour-book-error {
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
}

.tour-book-error[hidden] {
  display: none;
}

.tour-book-field select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font: 600 0.9rem var(--font-body);
  color: var(--text);
}

.tour-book-field select:focus {
  outline: none;
  border-color: var(--primary);
}

/* Not-included list gets a cross, notes get an "i", instead of the green-style tick */
.tm-points.is-no li::before {
  content: "\2715";
  background: rgba(124, 102, 105, 0.12);
  color: var(--text-muted);
}

.tm-points.is-info li::before {
  content: "i";
  font-family: var(--font-accent);
  font-style: italic;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.tm-points.is-no li,
.tm-points.is-info li {
  align-items: flex-start;
}

/* =========================================================
   "Your Day, Hour by Hour" timeline (tour.html)
   A vertical line on the left with one dot per stop. While you scroll, a crimson fill grows
   down the line, each dot turns crimson once passed, and each card slides in from the right.
   ========================================================= */
.tl {
  margin-top: 1rem;
}

.tl-sub {
  margin: -0.3rem 0 1.6rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.tl-track {
  position: relative;
  --tl-x: 22px; /* half the dot size */
  /* No clipping here: it cut the road and the dots at the screen edge on iPhone. Instead, cards
     in the narrow (phone) layout rise up from below rather than sliding in from the right, so
     nothing sticks out sideways (see .tl-track.is-animated:not(.is-zig) below). */
}

/* The road: drawn by script.js as an SVG through the centre of every stop.
   base = light grey road, paved = brand colours that fill in as you scroll, dash = white centre line */
.tl-road {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.tl-road path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl-road-base {
  stroke: #efe6e9;
  stroke-width: 16px;
}

.tl-road-paved {
  stroke: url(#tl-pave);
  stroke-width: 16px;
  transition: stroke-dashoffset 0.15s linear;
}

.tl-road-dash {
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2px;
  stroke-dasharray: 7 9;
}

/* The van drives down the road at the front of the coloured part */
.tl-van {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary);
  border: 2px solid var(--accent);
  box-shadow: 0 6px 16px rgba(28, 16, 19, 0.2);
  transition: transform 0.15s linear, opacity 0.3s ease;
  pointer-events: none;
}

.tl-van svg {
  width: 20px;
  height: 20px;
}

.tl-van.is-hidden {
  opacity: 0;
}

.tl-list {
  list-style: none;
  display: grid;
  gap: 1.1rem;
}

.tl-item {
  position: relative;
  padding-left: calc(var(--tl-x) * 2 + 0.9rem);
}

.tl-dot {
  position: absolute;
  left: var(--dot-x, 0px);
  top: 0.9rem;
  width: calc(var(--tl-x) * 2);
  height: calc(var(--tl-x) * 2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  z-index: 1;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.tl-dot svg {
  width: 20px;
  height: 20px;
}

.tl-item.is-reached .tl-dot,
.tl-track.is-static .tl-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 0 0 6px var(--primary-soft);
}

.tl-item.is-reached .tl-dot {
  transform: scale(1.05);
}

/* every second stop is orange, the brand's second colour */
.tl-item:nth-child(even) .tl-dot {
  border-color: rgba(243, 146, 0, 0.45);
}

.tl-item:nth-child(even).is-reached .tl-dot,
.tl-track.is-static .tl-item:nth-child(even) .tl-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
}

.tl-item:nth-child(even) .tl-time {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.tl-item:nth-child(even).is-reached .tl-card {
  border-color: rgba(243, 146, 0, 0.3);
}

/* ---- Wide column: zigzag. script.js places each card (absolute) and sets the track height ---- */
.tl-track.is-zig .tl-list {
  display: block;
}

.tl-track.is-zig .tl-item {
  position: absolute;
  padding-left: 0;
}

.tl-track.is-zig .tl-dot {
  top: 1.4rem;
}

.tl-track.is-zig .tl-item:nth-child(odd) .tl-card {
  margin-right: 0;
}

.tl-track.is-zig .tl-card {
  flex-direction: column;
  gap: 0.75rem;
}

.tl-track.is-zig .tl-photo {
  flex-basis: auto;
  aspect-ratio: 16 / 9;
}

.tl-track.is-zig .tl-item:nth-child(odd) .tl-body {
  text-align: right;
}

.tl-track.is-zig .tl-item:nth-child(odd) .tl-dur {
  flex-direction: row-reverse;
}

.tl-track.is-zig.is-animated .tl-item:nth-child(odd) .tl-card {
  transform: translateX(-28px);
}

.tl-track.is-zig.is-animated .tl-item.is-in .tl-card {
  transform: none;
}

.tl-card {
  display: flex;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 6px 22px rgba(28, 16, 19, 0.05);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.tl-item.is-reached .tl-card {
  border-color: rgba(170, 19, 69, 0.18);
}

.tl-card:hover {
  box-shadow: 0 10px 28px rgba(170, 19, 69, 0.1);
}

.tl-photo {
  flex: 0 0 170px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-muted);
}

.tl-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No photo yet: the NXT logo on a crimson panel, same as other placeholder cards on the site */
.tl-photo.is-empty {
  display: grid;
  place-items: center;
  background: var(--gradient-brand);
}

.tl-photo.is-empty img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  opacity: 0.9;
}

.tl-body {
  min-width: 0;
  align-self: center;
}

.tl-time {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
}

.tl-body h3 {
  margin: 0.4rem 0 0.1rem;
  font-size: 1.08rem;
  line-height: 1.3;
}

.tl-place {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tl-dur {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-text);
}

.tl-dur svg {
  width: 14px;
  height: 14px;
}

.tl-text {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Travel rows (pickup, departure, arrival): slimmer, tinted, no photo */
.tl-item.is-travel .tl-card {
  background: var(--bg-muted);
  box-shadow: none;
  padding: 0.75rem 1rem;
}

/* Scroll-in animation: hidden until the card reaches the screen */
.tl-track.is-animated .tl-card {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Phone layout (road on the left): cards rise from below, never stick out past the screen edge */
.tl-track.is-animated:not(.is-zig) .tl-card {
  transform: translateY(24px);
}

.tl-track.is-animated .tl-item.is-in .tl-card {
  opacity: 1;
  transform: none;
}

.tl-track.is-animated .tl-dot {
  opacity: 0;
  transform: scale(0.6);
}

.tl-track.is-animated .tl-item.is-in .tl-dot {
  opacity: 1;
  transform: none;
}

.tl-track.is-animated .tl-item.is-in.is-reached .tl-dot {
  transform: scale(1.05);
}

/* Pickup points fold-out */
.tl-pickup {
  margin-top: 1.4rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  overflow: hidden;
}

.tl-pickup summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--primary);
}

.tl-pickup summary::-webkit-details-marker {
  display: none;
}

.tl-pickup summary svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.tl-pickup summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.25s ease;
}

.tl-pickup[open] summary::after {
  transform: rotate(-135deg) translateY(-3px);
}

/* Opening / closing slide (script.js sets the height); the arrow turns back as soon as it starts closing */
.tl-pickup-body {
  overflow: hidden;
  /* opening: starts slowly and eases in and out (it felt too quick at the start) */
  transition: height 0.75s cubic-bezier(0.45, 0, 0.25, 1);
}

.tl-pickup.is-closing summary::after {
  transform: rotate(45deg) translateY(-3px);
}

/* The rows fade and slide in one after another while it opens */
.tl-pickup[open]:not(.is-closing) .tl-pickup-note,
.tl-pickup[open]:not(.is-closing) tbody tr {
  animation: pickup-row-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tl-pickup[open]:not(.is-closing) tbody tr:nth-child(n + 2) { animation-delay: 0.04s; }
.tl-pickup[open]:not(.is-closing) tbody tr:nth-child(n + 4) { animation-delay: 0.08s; }
.tl-pickup[open]:not(.is-closing) tbody tr:nth-child(n + 6) { animation-delay: 0.12s; }
.tl-pickup[open]:not(.is-closing) tbody tr:nth-child(n + 8) { animation-delay: 0.16s; }
.tl-pickup[open]:not(.is-closing) tbody tr:nth-child(n + 10) { animation-delay: 0.2s; }
.tl-pickup[open]:not(.is-closing) tbody tr:nth-child(n + 12) { animation-delay: 0.24s; }

.tl-pickup.is-closing .tl-pickup-body {
  opacity: 0.4;
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}

@keyframes pickup-row-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-pickup-body,
  .tl-pickup summary::after {
    transition: none;
  }

  .tl-pickup[open] .tl-pickup-note,
  .tl-pickup[open] tbody tr {
    animation: none;
  }
}

.tl-pickup-note {
  padding: 0 1.1rem 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tl-pickup table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tl-pickup th,
.tl-pickup td {
  padding: 0.55rem 1.1rem;
  text-align: left;
  border-top: 1px solid var(--border);
}

.tl-pickup th {
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-muted);
}

.tl-pickup td:last-child,
.tl-pickup th:last-child {
  text-align: right;
  white-space: nowrap;
}

.tl-pickup td:last-child {
  font-weight: 600;
  color: var(--primary);
}

@media (max-width: 600px) {
  .tl-track {
    --tl-x: 17px;
  }

  .tl-dot svg {
    width: 16px;
    height: 16px;
  }

  .tl-item {
    padding-left: calc(var(--tl-x) * 2 + 0.7rem);
  }

  .tl-card {
    flex-direction: column;
    gap: 0.7rem;
  }

  .tl-photo {
    flex-basis: auto;
    aspect-ratio: 16 / 9;
  }

  .tl-pickup th,
  .tl-pickup td {
    padding: 0.5rem 0.8rem;
  }
}

.tour-book-field {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tour-book-field input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: 600 0.9rem var(--font-body);
  color: var(--text);
}

.tour-book-field input:focus {
  outline: none;
  border-color: var(--primary);
}

.tour-book-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.4rem;
}

/* "Pay cash on pickup" under the Book Now button */
.tour-pay {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-text);
  text-align: center;
}

.tour-pay + .tour-ask {
  margin-top: 0.4rem;
}

.tour-ask {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

/* =========================================================
   Tour page reviews: score badge, review cards, "Write a review" popup
   ========================================================= */
.rv-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.rv-head h2 {
  margin-bottom: 0.2rem !important;
}

.rv-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.rv-score {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(28, 16, 19, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rv-score:hover {
  border-color: rgba(170, 19, 69, 0.3);
  box-shadow: 0 10px 24px rgba(170, 19, 69, 0.1);
}

.rv-score-fb {
  /* the official round Facebook logo (blue circle, white f), drawn by the svg itself */
  flex: none;
  width: 40px;
  height: 40px;
  display: block;
}

.rv-score-fb svg {
  display: block;
  width: 40px;
  height: 40px;
}

.rv-score strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--primary);
}

.rv-score small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.rv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.rv-card {
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 6px 22px rgba(28, 16, 19, 0.05);
}

.rv-card.is-extra {
  display: none;
}

.rv.show-all .rv-card.is-extra {
  display: flex;
}

.rv-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.rv-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--white);
  font: 700 1rem var(--font-heading);
}

.rv-who {
  flex: 1;
  min-width: 0;
}

.rv-who strong {
  display: block;
  font-size: 0.92rem;
}

.rv-who small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.rv-fb {
  flex: none;
  width: 22px;
  height: 22px;
  color: #1877f2;
}

.rv-fb svg {
  display: block;
  width: 22px;
  height: 22px;
}

/* Reviews written on the website: star rating + a small "Website" tag instead of the Facebook icon */
.rv-site {
  flex: none;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.68rem;
  font-weight: 700;
}

.rv-rating {
  margin: 0.8rem 0 0.6rem;
  color: var(--accent);
  font-size: 1rem;
  letter-spacing: 1px;
}

.rv-rating span {
  color: #e4d6da;
}

.rv-form .rv-or {
  margin-top: 1.1rem;
}

.rv-dialog .rv-fb-option {
  margin-bottom: 0.4rem;
}

.rv-thanks {
  padding: 1rem 0 0.2rem;
  text-align: center;
}

.rv-thanks h4 {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
}

.rv-thanks p {
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.rv-thanks .done-check {
  background: var(--primary-soft);
  box-shadow: none;
}

.rv-thanks[hidden],
.rv-form[hidden] {
  display: none;
}

.rv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  margin: 0.8rem 0 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
}

.rv-badge svg {
  width: 13px;
  height: 13px;
}

.rv-text {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.6;
}

.rv-card.is-open .rv-text {
  display: block;
  -webkit-line-clamp: unset;
}

.rv-toggle {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--primary);
  font: 600 0.82rem var(--font-body);
  cursor: pointer;
}

.rv-toggle[hidden] {
  display: none;
}

.rv-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.3rem;
}

.rv-more {
  flex-basis: 100%;
  padding: 0.3rem;
  border: none;
  background: none;
  color: var(--primary);
  font: 600 0.88rem var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.rv-more[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .rv-grid {
    grid-template-columns: 1fr;
  }

  .rv-actions .btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* "Write a review" popup */
.rv-dialog {
  width: min(460px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.rv-dialog-body {
  padding: 0 1.3rem;
}

.rv-fb-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid rgba(24, 119, 242, 0.3);
  border-radius: 14px;
  background: #f2f7ff;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rv-fb-option:hover {
  border-color: #1877f2;
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.15);
}

.rv-fb-option-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.rv-fb-option-icon svg {
  display: block;
  width: 40px;
  height: 40px;
}

.rv-fb-option strong {
  display: block;
  font-size: 0.92rem;
}

.rv-fb-option small {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.rv-or {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem 0 0.8rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rv-or::before,
.rv-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.rv-stars {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.rv-stars button {
  padding: 0 0.1rem;
  border: none;
  background: none;
  color: #e4d6da;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.rv-stars button.is-on {
  color: var(--accent);
}

.rv-stars button:hover {
  transform: scale(1.12);
}

.tour-book-field textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: 500 0.9rem var(--font-body);
  color: var(--text);
  resize: vertical;
}

.tour-book-field textarea:focus {
  outline: none;
  border-color: var(--primary);
}

/* Real guest reviews on the tour page: same card look as the Home testimonials, just static (no marquee) */
.tour-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.tour-review-card {
  padding: 1.4rem;
}

.tour-review-card .review-quote {
  height: 2rem;
  font-size: 3.6rem;
}

.tour-review-card .review-stars {
  font-size: 0.9rem;
}

.tour-review-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

.tour-review-name {
  font-weight: 700;
  font-size: 0.88rem;
}

.tour-review-source {
  font-size: 0.76rem;
  color: var(--primary);
}

/* Phone "Book Now" bar + pop-up booking sheet (built by script.js). Hidden on wide screens,
   where the booking card sits pinned on the right instead. */
.book-bar,
.book-sheet-head,
.book-sheet-backdrop {
  display: none;
}

@media (max-width: 980px) {
  .tour-detail-grid {
    grid-template-columns: 1fr;
  }

  /* The booking card becomes a sheet that slides up from the bottom of the screen */
  .tour-detail-side {
    position: fixed !important;
    top: auto !important; /* script.js pins it with an inline top on laptops */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 50px rgba(28, 16, 19, 0.25);
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.38s;
  }

  .tour-detail-side.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  }

  /* the sheet's own header already says "Book your tour" */
  .tour-detail-side .tour-book-title {
    display: none;
  }

  .tour-detail-side .tour-booking-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0.4rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  }

  .book-sheet-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.1rem 0.7rem;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-heading);
    font-size: 1.05rem;
  }

  .book-sheet-grip {
    position: absolute;
    top: 0.45rem;
    left: 50%;
    width: 42px;
    height: 5px;
    margin-left: -21px;
    border-radius: 5px;
    background: #e3d4d9;
  }

  .book-sheet-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--white);
    color: var(--text);
    cursor: pointer;
  }

  .book-sheet-close svg {
    width: 18px;
    height: 18px;
  }

  .book-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(28, 16, 19, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .book-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  body.sheet-open {
    overflow: hidden;
  }

  /* Bar at the bottom of the screen: price on the left, Book Now on the right */
  .book-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 26px rgba(28, 16, 19, 0.12);
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .book-bar.is-shown {
    transform: none;
  }

  .book-bar-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .book-bar-price small {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
  }

  .book-bar-price strong {
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 1.12rem;
  }

  .book-bar-btn {
    flex: none;
    padding: 0.8rem 1.8rem;
  }

  /* WhatsApp button moves up so it never covers the bar */
  .whatsapp-float {
    transition: transform 0.25s ease, bottom 0.35s ease;
  }

  body.has-book-bar .whatsapp-float {
    bottom: calc(5.4rem + env(safe-area-inset-bottom));
  }
}

/* =========================================================
   Tour page: orange accents
   The page was nearly all crimson. Rule: crimson for buttons and main actions, the brand's
   orange (#F39200) for small accents, so the page has both brand colours.
   ========================================================= */
.tour-detail-main > h2::after,
.tour-detail-main .tl h2::after,
.tour-detail-main [data-tour-extra] h2::after,
.tour-detail-main .rv-head h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin-top: 0.45rem;
  border-radius: 4px;
  background: var(--accent);
}

.tour-hero-meta svg {
  color: var(--accent);
}

.tour-detail .tm-facts li {
  border-color: rgba(243, 146, 0, 0.28);
  background: #fff8ee;
}

.tour-detail .tm-points:not(.is-no):not(.is-info) li::before {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.tour-detail .tm-points.is-info li::before {
  background: var(--primary-soft);
  color: var(--primary);
}

/* "Save 33%" on the crimson price card */
.tour-booking-card .tm-save {
  background: var(--accent);
  color: var(--text);
}

.tour-why-grid .why-card:nth-child(even) .why-icon,
.tour-why-grid .why-card:nth-child(even):hover .why-icon {
  color: var(--accent-text);
}

.tour-why-grid .why-card:nth-child(even) .why-icon {
  box-shadow: 0 4px 12px rgba(243, 146, 0, 0.3);
}

/* Offer banner: switched on in the admin panel (Site settings). Sits at the very top of the
   fixed nav bar, so it shows on every page. The negative margin cancels the bar's top padding. */
.offer-bar {
  margin: -1.1rem 0 0.75rem;
  padding: 0.45rem 1rem;
  background: linear-gradient(90deg, var(--primary), #c8361f 55%, var(--accent));
  color: var(--white);
  font: 600 0.82rem/1.35 var(--font-body);
  text-align: center;
  transition: margin 0.35s ease;
}

.navbar.scrolled .offer-bar {
  margin-top: -0.75rem;
}