/* ==========================================================================
   BookAbuDhabiTours — base stylesheet
   Mobile-first, no framework, no build step required.
   ========================================================================== */

:root {
  /* Brand */
  --color-ink: #10201c;
  --color-navy: #0b2a3d;
  --color-navy-deep: #071c29;
  --color-navy-light: #123f5c;
  --color-gold: #b9922a;
  --color-gold-light: #e6c15c;
  --color-gold-dark: #6b5216; /* darkened from #8f7020 — that value failed WCAG AA text contrast (~4.6:1, borderline/failing per Lighthouse) against both white and sand surfaces; this gives ~7:1+ */
  --color-sand: #f6f1e7;
  --color-sand-dark: #ece3cf;
  --color-white: #ffffff;
  --color-border: #e3dcc9;
  --color-border-strong: #d8cfb4;
  --color-muted: #5b6a66;
  --color-whatsapp: #25d366;

  /* Surfaces */
  --surface: var(--color-white);
  --surface-alt: var(--color-sand);
  --surface-dark: var(--color-navy);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Radius / shadow */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --shadow-sm: 0 2px 8px rgba(7,28,41,.06);
  --shadow-md: 0 10px 30px rgba(7,28,41,.10);
  --shadow-lg: 0 24px 60px rgba(7,28,41,.18);

  --container: 1240px;
  --header-h: 76px;
  --sticky-cta-h: 78px; /* actual rendered bar is ~74px (padding + btn min-height); 78px keeps body's reserved bottom space from underlapping the footer */
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--surface);
  line-height: 1.6;
  font-size: 1.0625rem;
  padding-bottom: calc(var(--sticky-cta-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
@media (max-width: 480px) { body { font-size: 1rem; } }
/* Below 1200px the floating Call button (see "Floating contact buttons"
   further down) sits fixed above the sticky CTA bar, in the band
   sticky-cta-h to sticky-cta-h+~60px from the viewport bottom. The
   sticky-cta-h reservation above only clears the bar itself, so without
   this the footer's copyright line ends up scrolled directly underneath
   the floating Call button. Extends the reserved space so real content
   always ends above both fixed elements. */
@media (max-width: 1199px) {
  body { padding-bottom: calc(var(--sticky-cta-h) + 4.5rem + env(safe-area-inset-bottom)); }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-navy); text-decoration: none; }
a:hover { text-decoration: underline; }
/* In-paragraph links must not rely on color alone (WCAG 1.4.1) — body text
   and link color are both dark, so an underline is the distinguishing cue. */
p a { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--color-gold-dark); outline-offset: 2px; border-radius: 4px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; color: var(--color-navy); font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 700; }
p { margin: 0 0 1em; }
button { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: .75em 1em;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: .6em;
}
.prose { max-width: 72ch; }
.icon { width: 1em; height: 1em; flex-shrink: 0; }
.icon--sm { width: 18px; height: 18px; }
.icon--md { width: 28px; height: 28px; }
.icon--lg { width: 36px; height: 36px; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .85em 1.7em;
  min-height: 46px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover, .btn:focus-visible { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--color-gold); color: var(--color-navy-deep); box-shadow: var(--shadow-sm); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-gold-dark); color: var(--color-white); }
/* text is dark navy, not white — white-on-#25d366 is only ~2:1 contrast
   (fails WCAG AA); navy-deep on the same green is ~8.8:1, matching the same
   dark-text-on-saturated-background pattern .btn--primary already uses. The
   WhatsApp green itself is untouched — this is a text-color fix, not a
   brand-color change. */
.btn--whatsapp { background: var(--color-whatsapp); color: var(--color-navy-deep); }
.btn--whatsapp:hover, .btn--whatsapp:focus-visible { background: #1ebe57; }
.btn--outline { background: transparent; border-color: var(--color-navy); color: var(--color-navy); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--color-navy); color: var(--color-white); }
.btn--lg { padding: 1em 2em; font-size: 1.02rem; }
.btn--on-dark.btn--outline { border-color: rgba(255,255,255,.55); color: var(--color-white); }
.btn--on-dark.btn--outline:hover { background: rgba(255,255,255,.12); }

/* Header / primary nav ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--color-navy);
  margin-right: auto;
  letter-spacing: -.01em;
}
.site-header__mark { height: 40px; width: auto; max-width: 68vw; flex-shrink: 0; display: block; }
@media (min-width: 480px) { .site-header__mark { height: 48px; } }
.site-header__cta { display: none; flex-shrink: 0; }

.nav-toggle {
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: .55em .8em;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-toggle:hover { border-color: var(--color-gold-dark); }

.primary-nav { display: none; width: 100%; }
.primary-nav.is-open { display: block; }
.primary-nav__list { display: flex; flex-direction: column; }
.primary-nav__item { border-top: 1px solid var(--color-border); }
.primary-nav__link {
  display: block;
  padding: .95em .25em;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  color: var(--color-ink);
  font-weight: 600;
  min-height: 44px;
}
.primary-nav__dropdown { display: none; padding-left: 1em; }
.has-dropdown.is-open .primary-nav__dropdown { display: block; }
.primary-nav__dropdown a,
.primary-nav__soon { display: block; padding: .7em .25em; min-height: 44px; }
.primary-nav__soon { color: var(--color-muted); }

@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block; width: auto; }
  .primary-nav__list { flex-direction: row; gap: 1.75rem; }
  .primary-nav__item { border-top: none; position: relative; }
  .primary-nav__link { padding: .5em 0; white-space: nowrap; position: relative; }
  .primary-nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--color-gold); transform: scaleX(0); transform-origin: left;
    transition: transform .18s ease;
  }
  .primary-nav__link:hover::after, .primary-nav__link:focus-visible::after { transform: scaleX(1); }
  .primary-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: .6em;
    box-shadow: var(--shadow-md);
  }
  .has-dropdown:hover .primary-nav__dropdown,
  .has-dropdown:focus-within .primary-nav__dropdown { display: block; }
  .primary-nav__dropdown a { border-radius: var(--radius-sm); }
  .primary-nav__dropdown a:hover, .primary-nav__dropdown a:focus-visible { background: var(--surface-alt); text-decoration: none; }
  .site-header__cta { display: inline-flex; }
}

/* Breadcrumbs ---------------------------------------------------------------- */
.breadcrumbs { max-width: var(--container); margin: 0 auto; padding: .9rem 1.5rem; font-size: .85rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35em; color: var(--color-muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .35em; color: var(--color-border-strong); }

/* Hero ------------------------------------------------------------------- */
.hero { background: linear-gradient(180deg, var(--surface-alt) 0%, var(--color-sand-dark) 100%); padding: var(--space-7) 0 var(--space-6); }
.hero--tour { padding: var(--space-6) 0; }
.hero__inner { max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
.hero__grid { display: grid; gap: var(--space-6); align-items: center; }
.hero__subtitle { font-size: 1.12rem; color: var(--color-muted); max-width: 56ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: var(--space-5); }
.hero__stats { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border-strong); }
.hero__stats li { display: flex; align-items: center; gap: .5em; font-weight: 600; font-size: .92rem; color: var(--color-navy); }
.hero__stats .icon { color: var(--color-gold-dark); }

.hero__image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/11; }
.hero__image img, .hero__image picture img { width: 100%; height: 100%; object-fit: cover; }
.hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-top: var(--space-5); aspect-ratio: 16/9; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: var(--space-8); }
  .hero__image { aspect-ratio: 4/5; }
}

/* Generic sections ------------------------------------------------------- */
.section { padding: var(--space-7) 0; max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }
.section > p:not([class]) { max-width: 68ch; }
.section--muted { background: var(--surface-alt); }
.section-head { max-width: 68ch; margin-bottom: var(--space-5); }

@media (max-width: 640px) {
  .section { padding: var(--space-6) 0; padding-inline: 1.15rem; }
  .section-head { margin-bottom: var(--space-4); }
  .hero { padding: var(--space-6) 0 var(--space-5); }
  .cta-band { padding: var(--space-7) 0; }
  .card-grid, .attraction-grid, .intent-grid, .steps, .compare-cards { gap: var(--space-4); }
  .trust-bar__inner { padding: var(--space-4) 1.15rem; gap: var(--space-4); }
  .tour-card__body { padding: 1.1rem; }
  .feature-block { gap: var(--space-5); }
}

.prose h3 { margin-top: 1.75em; }
.prose__group:first-child h3 { margin-top: 0; }
/* 860px+: two balanced text columns instead of one long narrow column with
   empty space beside it. CSS multi-column (not grid) so reading order stays
   natural — column 1 top-to-bottom, then column 2 — and column-fill:balance
   evens out how much falls in each. break-inside:avoid-column keeps each
   heading glued to its own paragraph rather than splitting across the gap.
   column-gap of 3rem over a ~1192px content area yields ~570px columns —
   roughly 65-70 characters per line at this theme's body font size, inside
   the 55-75ch readability target. Single column (unchanged) below 860px. */
@media (min-width: 860px) {
  .prose { max-width: none; columns: 2; column-gap: 3rem; column-fill: balance; }
  .prose__group, .prose > .callout { break-inside: avoid-column; }
}

.section ul:not(.card-grid):not(.related-tours__list):not(.choose-list):not(.intent-grid):not(.attraction-grid):not(.hero__stats):not(.trust-bar__list) {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1em;
}
.section ul:not(.card-grid):not(.related-tours__list):not(.choose-list):not(.intent-grid):not(.attraction-grid):not(.hero__stats):not(.trust-bar__list) li { margin-bottom: .4em; }

/* Trust bar ---------------------------------------------------------------- */
.trust-bar { border-bottom: 1px solid var(--color-border); background: var(--surface); }
.trust-bar__inner {
  max-width: var(--container); margin-inline: auto; padding: var(--space-5) 1.5rem;
  display: grid; gap: var(--space-5); grid-template-columns: 1fr;
}
.trust-bar__item { display: flex; align-items: flex-start; gap: .85rem; }
.trust-bar__item .icon { color: var(--color-gold-dark); margin-top: .1em; }
.trust-bar__item strong { display: block; color: var(--color-navy); font-size: .98rem; }
.trust-bar__item span { display: block; color: var(--color-muted); font-size: .88rem; }
@media (min-width: 700px) { .trust-bar__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .trust-bar__inner { grid-template-columns: repeat(4, 1fr); } }

/* Card grid ------------------------------------------------------------------ */
.card-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.tour-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.tour-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tour-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--color-navy); }
.tour-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tour-card__badge {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(7,28,41,.72); color: var(--color-white);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: .35em .8em; border-radius: var(--radius-full);
}
.tour-card__body { padding: 1.35rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.tour-card__body h3 { font-size: 1.08rem; margin: 0; }
.tour-card__meta { font-size: .92rem; color: var(--color-muted); flex: 1; }
.tour-card__body .btn { margin-top: auto; align-self: flex-start; }

/* More tours (compact rows — keeps secondary tours crawlable without the
   visual weight of a full image card; used on all viewports, not just
   mobile, so there is only one copy of this markup in the DOM) ------------- */
.more-tours { margin-top: var(--space-6); }
.more-tours__heading { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); margin-bottom: var(--space-3); }
.tour-row-list { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); }
.tour-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--color-border);
  color: var(--color-ink); transition: background-color .15s ease;
}
.tour-row:last-child { border-bottom: none; }
.tour-row:hover, .tour-row:focus-visible { background: var(--surface-alt); text-decoration: none; }
.tour-row > .icon:first-child { flex: 0 0 auto; color: var(--color-gold-dark); }
.tour-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tour-row__title { font-weight: 700; color: var(--color-navy); }
.tour-row__meta { font-size: .82rem; color: var(--color-muted); }
.tour-row > .icon:last-child { flex: 0 0 auto; color: var(--color-border-strong); }

/* Simple info cards (steps, trust, etc. reuse) ------------------------------- */
.info-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); padding: 1.35rem; box-shadow: var(--shadow-sm); }

/* Comparison cards ----------------------------------------------------------- */
.compare-cards { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: stretch; margin-top: var(--space-5); }
.compare-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.compare-card h3 { margin-bottom: .3em; }
.compare-card__for { color: var(--color-muted); font-size: .92rem; margin-bottom: var(--space-4); }
.compare-card__facts { display: grid; gap: .75rem; margin: 0 0 var(--space-5); }
.compare-card__facts > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--color-border); padding-top: .6rem; }
.compare-card__facts dt { color: var(--color-muted); font-size: .85rem; }
.compare-card__facts dd { margin: 0; font-weight: 700; color: var(--color-navy); text-align: right; }
.compare-card .btn { margin-top: auto; align-self: flex-start; }
.compare-cards__vs {
  justify-self: center; font-weight: 800; color: var(--color-gold-dark);
  font-size: .85rem; letter-spacing: .1em; position: relative;
}
@media (min-width: 800px) {
  .compare-cards { grid-template-columns: 1fr auto 1fr; }
}

/* Feature blocks (From Dubai / Private) --------------------------------------- */
.feature-block { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
.feature-block__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.feature-block__content h2 { margin-bottom: .5em; }
@media (min-width: 860px) {
  .feature-block { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .feature-block--reverse .feature-block__media { order: 2; }
  .feature-block--reverse .feature-block__content { order: 1; }
}

/* Attraction cards ------------------------------------------------------------ */
.attraction-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-5); }
.attraction-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.attraction-card__media {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--surface-alt); color: var(--color-gold-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4);
}
.attraction-card__media--photo {
  width: 100%; height: auto; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden;
}
.attraction-card__media--photo picture, .attraction-card__media--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.attraction-card h3 { margin-bottom: .35em; }
.attraction-card p { margin-bottom: 0; color: var(--color-muted); font-size: .95rem; }
.attraction-card__soon { display: inline-block; margin-top: .6em; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-gold-dark); }
@media (min-width: 640px) { .attraction-grid { grid-template-columns: repeat(2, 1fr); } }
/* 1180px+: 7 cards read better as 4 then a centered row of 3 than as an
   uneven 3-column grid (3/3/1). Flexbox + justify-content:center does this
   for free — a full row of 4 sits flush, the trailing row of 3 centers
   itself — without hardcoding "row 2" in markup. min-width keeps cards from
   ever being squeezed narrower than is comfortable for the photo + copy. */
@media (min-width: 1180px) {
  .attraction-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .attraction-card { flex: 0 1 270px; min-width: 260px; max-width: 280px; }
}

/* Intent selector (Choose Your Tour) ------------------------------------------ */
.intent-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-5); }
.intent-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem; color: var(--color-ink); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.intent-card:hover, .intent-card:focus-visible { border-color: var(--color-gold); box-shadow: var(--shadow-sm); transform: translateY(-2px); text-decoration: none; }
.intent-card__icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--surface-alt); color: var(--color-gold-dark);
  display: flex; align-items: center; justify-content: center;
}
.intent-card__text { display: flex; flex-direction: column; gap: .1em; }
.intent-card__label { font-size: .82rem; color: var(--color-muted); }
.intent-card__title { font-weight: 700; color: var(--color-navy); }
@media (min-width: 700px) { .intent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .intent-grid { grid-template-columns: repeat(3, 1fr); } }

/* Steps (How Booking Works) --------------------------------------------------- */
.steps { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-5); }
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step__num {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-full);
  background: var(--color-navy); color: var(--color-white); font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.step h3 { margin-bottom: .25em; font-size: 1.05rem; }
.step p { margin-bottom: 0; color: var(--color-muted); font-size: .93rem; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Callout ---------------------------------------------------------------------- */
.callout { border-left: 4px solid var(--color-gold); background: var(--color-white); padding: 1.25rem 1.5rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-top: var(--space-5); box-shadow: var(--shadow-sm); }
.callout h3 { margin-bottom: .35em; }
.callout p { margin-bottom: 0; }

/* Tour facts --------------------------------------------------------------- */
.tour-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-5) 0;
  background: var(--surface-alt);
}
.tour-facts__item dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); margin-bottom: .2em; }
.tour-facts__item dd { margin: 0; font-weight: 700; color: var(--color-navy); }
@media (min-width: 640px) { .tour-facts { grid-template-columns: repeat(5, 1fr); } }

.booking-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin: var(--space-5) 0; }

/* FAQ ----------------------------------------------------------------------- */
.faq-list { max-width: 74ch; margin-top: var(--space-5); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  cursor: pointer; font-weight: 700; padding: 1.05rem 0; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--color-navy);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: 0 0 auto; font-size: 1.3rem; font-weight: 400; line-height: 1;
  color: var(--color-gold-dark); transition: transform .18s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--color-muted); padding-bottom: 1.1rem; margin: 0; }

/* Related tours -------------------------------------------------------------- */
.related-tours__list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-4); }
.related-tours__list a {
  display: inline-block;
  padding: .55em 1.1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: .9rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.related-tours__list a:hover, .related-tours__list a:focus-visible { border-color: var(--color-gold); background: var(--surface-alt); text-decoration: none; }

/* Final CTA (tour pages — simpler) -------------------------------------------- */
.final-cta { border-top: 1px solid var(--color-border); margin-top: var(--space-6); padding-top: var(--space-6); }

/* Final CTA band (homepage — premium) ----------------------------------------- */
.cta-band { background: linear-gradient(135deg, var(--color-navy-deep), var(--color-navy-light)); color: var(--color-white); padding: var(--space-8) 0; margin-top: var(--space-4); }
.cta-band__inner { max-width: 760px; margin-inline: auto; padding-inline: 1.5rem; text-align: center; }
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: rgba(255,255,255,.78); }
.cta-band .booking-cta { justify-content: center; }

/* Footer ---------------------------------------------------------------------- */
.site-footer { background: var(--color-navy-deep); color: var(--color-sand); margin-top: 0; }
.site-footer__grid {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-8) 1.5rem var(--space-6);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .site-footer__grid { grid-template-columns: 1.3fr repeat(3, 1fr); } }
.site-footer h2 { color: var(--color-white); font-size: .92rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer__subhead { margin-top: 1.4rem; }
.site-footer a { color: rgba(246,241,231,.82); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-white); }
.site-footer__col ul { display: flex; flex-direction: column; gap: .55rem; font-size: .93rem; }
.site-footer__logo-panel {
  display: inline-block;
  background: var(--color-sand);
  border-radius: var(--radius-sm);
  padding: .6rem .9rem;
  margin-bottom: 1rem;
  line-height: 0;
}
.site-footer__logo-panel img { height: 44px; width: auto; display: block; }
.site-footer__tagline { color: rgba(246,241,231,.65); max-width: 32ch; }
.site-footer__legal { font-size: .8rem; color: rgba(246,241,231,.55); max-width: 34ch; margin-top: .8rem; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 1.2rem 1.5rem; text-align: center; font-size: .82rem; color: rgba(246,241,231,.6); }

/* Sticky mobile CTA -------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  gap: .6rem;
  padding: .6rem .75rem;
  padding-bottom: max(.6rem, env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  z-index: 90;
  box-shadow: 0 -6px 20px rgba(7,28,41,.08);
}
.sticky-cta .btn { flex: 1; min-height: 46px; }
@media (min-width: 1200px) { .sticky-cta { display: none; } }

/* Floating contact buttons -------------------------------------------------- */
.floating-contact__btn {
  position: fixed;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 48px;
  min-width: 48px;
  padding: .65em 1.1em;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: .85rem;
  box-shadow: var(--shadow-md);
  z-index: 95;
  transition: background-color .15s ease, transform .15s ease;
}
.floating-contact__btn:hover { transform: translateY(-2px); }
.floating-contact__btn--call { left: 1.25rem; background: var(--color-navy); color: var(--color-white); }
.floating-contact__btn--call:hover, .floating-contact__btn--call:focus-visible { background: var(--color-navy-light); }
/* same navy-deep-on-green pairing used for .btn--whatsapp (WCAG AA fix in
   Part 7) — white text on #25d366 is only ~2:1 contrast, this is ~8.8:1 */
.floating-contact__btn--whatsapp { right: 1.25rem; background: var(--color-whatsapp); color: var(--color-navy-deep); }
.floating-contact__btn--whatsapp:hover, .floating-contact__btn--whatsapp:focus-visible { background: #1ebe57; }
/* Below 1200px the sticky CTA bar (above) already has its own WhatsApp
   button — hide the floating one there to avoid a redundant control, and
   lift Call above the bar's reserved height so neither overlaps it. Both
   sit at the true viewport corners once the sticky bar itself is hidden
   at >=1200px (unchanged rule above). */
@media (max-width: 1199px) {
  .floating-contact__btn--whatsapp { display: none; }
  .floating-contact__btn--call { bottom: calc(var(--sticky-cta-h) + .75rem + env(safe-area-inset-bottom)); }
}
/* Keep clear of the footer's own content — both buttons sit fully within
   the last ~70px of viewport height, well short of typical footer link
   rows, and use pointer-events only on their own small hit area. */

/* Contact details + legal/registration block --------------------------------- */
.contact-details { display: flex; flex-direction: column; gap: .75rem; margin: var(--space-5) 0; }
.contact-details .btn { align-self: flex-start; }
.legal-details { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.legal-details h2 { font-size: 1rem; margin-bottom: 1rem; }
.legal-details__list { display: grid; gap: .75rem; margin: 0; max-width: 52ch; }
.legal-details__list > div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--color-border); padding-top: .6rem; }
.legal-details__list dt { color: var(--color-muted); font-size: .85rem; }
.legal-details__list dd { margin: 0; font-weight: 600; color: var(--color-navy); text-align: right; }

/* Utility ------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}