/* ═══════════════════════════════════════════════════════════════════
   WILDBOSSES · SHARED SHELL
   Nav, footer, buttons, section furniture and the tour card. Used by
   every page so the site cannot drift apart page to page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the frame ───────────────────────────────────────────
   Nav and footer take the dark band. Everything between them is
   the light ground, because that is where the photographs live. */
.wb-nav, .wb-foot { }

/* ── nav ────────────────────────────────────────────────── */
.wb-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: var(--sp-5);
  padding: 11px clamp(16px, 4vw, 46px);
  /* landscape on a notched phone puts the cutout in the left inset */
  padding-left:  max(clamp(16px, 4vw, 46px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 46px), env(safe-area-inset-right));
  background: var(--forest);
  border-bottom: 1px solid rgba(234,247,228,.10);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
/* Stamped by wb-site.js once the page has left the top. The bar is already
   opaque forest, so this is a shadow to lift it off the content rather than
   the usual translucent-blur trick, which would fight the photographs. */
.wb-nav.is-stuck {
  box-shadow: 0 1px 0 rgba(247,190,24,.22), 0 12px 32px -16px rgba(0,18,10,.85);
}
/* skip link — first tab stop on every page */
.wb-skip {
  position: absolute; left: 10px; top: 10px; z-index: 999;
  padding: 10px 16px; border-radius: 999px;
  background: var(--grad-sun); color: var(--on-sun);
  font-size: 13px; font-weight: 700;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.wb-skip:focus-visible { transform: translateY(0); }

.wb-brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.wb-logo {
  width: 52px; height: 52px; border-radius: 13px; display: none;
  background-size: cover; background-position: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.wb-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 5px rgba(247,190,24,.38));
}
.wb-logo.has-logo { display: block; }
.wb-brand-txt { display: grid; line-height: 1; }
.wb-brand-txt b {
  font-family: var(--display); font-size: 28px;
  letter-spacing: .035em; color: var(--ink);
}
.wb-brand-txt i {
  font-style: normal; font-size: 10.5px; letter-spacing: .404em;
  color: var(--label); margin-top: 5px;
  /* tracked so ADVENTURES measures the same as the wordmark above it */
}

.wb-links { display: flex; gap: clamp(12px, 1.8vw, 28px); margin-left: auto; }
.wb-links a {
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  padding: 13px 2px; position: relative; transition: color .2s;
  display: inline-flex; align-items: center;
}
.wb-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 8px;
  height: 2px; border-radius: 2px; background: var(--grad-sun); transition: right .28s var(--ease);
}
.wb-links a:hover, .wb-links a[aria-current="page"] { color: var(--ink); }
.wb-links a:hover::after, .wb-links a[aria-current="page"]::after { right: 0; }

.wb-nav-end { display: flex; align-items: center; gap: 9px; }

.wb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, transform .2s, border-color .2s, color .2s;
}
.wb-btn-gold {
  background: var(--grad-sun); color: var(--on-sun);
  box-shadow: var(--glow-sun);
}
.wb-btn-gold:hover {
  background: var(--grad-sun); filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(247,190,24,.52);
}
.wb-btn-gold:active { transform: translateY(0); }
.wb-btn-ghost { background: var(--glass-2); color: var(--ink); border-color: var(--line); }
.wb-btn-ghost:hover { border-color: var(--shoot); color: var(--shoot); background: var(--glass); }
.wb-btn-lg { padding: 14px 28px; font-size: 14px; }

.wb-burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0; margin-right: -8px;
  align-items: center; justify-content: center; flex-direction: column;
  gap: 5px; border-radius: 12px;
}
.wb-burger:hover { background: rgba(234,247,228,.08); }
.wb-burger span {
  width: 20px; height: 2px; background: var(--ink); display: block;
  border-radius: 2px; transition: transform .28s var(--ease), opacity .2s;
}
/* the two bars fold into a cross rather than swapping for a glyph */
.wb-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.wb-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* ── page furniture ─────────────────────────────────────── */
.wb-wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(16px, 4vw, 46px); }
.wb-sec  { padding: clamp(48px, 8vw, 108px) 0; }
.wb-hero + .wb-sec { padding-top: clamp(34px, 4.6vw, 68px); }

.wb-sec-head { max-width: 640px; margin: 0 auto clamp(28px, 4.5vw, 58px); text-align: center; }
.wb-sec-head.left { margin-left: 0; text-align: left; }
.wb-eyebrow {
  margin: 0 0 12px; font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--label);
}
.wb-sec-title {
  margin: 0 0 14px; font-family: var(--display);
  font-size: clamp(32px, 5.2vw, 66px); line-height: .99;
  letter-spacing: .01em; color: var(--ink);
}
.wb-sec-lede { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; }

/* ── page masthead (inner pages) ─────────────────────────
   A green band, not a white void. Nav and masthead read as one
   mass of forest at the top of every page, the content below is
   the light ground, and the footer closes it. The light inside
   the band is the same sun-over-the-ridge as the page ambient,
   so the two do not look like different ideas. */
.wb-hero {
  position: relative;
  padding: clamp(52px, 7.4vw, 108px) 0 clamp(34px, 4.4vw, 64px);
  text-align: center;
  background: var(--forest);
  overflow: hidden;
}
.wb-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 64% at 50% -20%, rgba(255,214,64,.17), transparent 68%),
    radial-gradient(ellipse 42% 74% at 102% 44%, rgba(111,217,67,.10), transparent 72%),
    radial-gradient(ellipse 42% 74% at -2% 56%, rgba(18,160,90,.16), transparent 72%);
}
.wb-hero > * { position: relative; z-index: 1; }
/* the band already carries its own air; the section under it should not
   start from a standing stop as if nothing came before */
/* a hairline of gold under the band — the seam between frame and ground */
.wb-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--sun) 22%, var(--citrine) 50%, var(--sun) 78%, transparent);
  opacity: .85;
}
.wb-hero h1 {
  margin: 0 0 14px; font-family: var(--display);
  font-size: clamp(38px, 7vw, 88px); line-height: .95;
  letter-spacing: .01em; color: var(--ink);
}
/* :not() because .wb-hero p (0,1,1) outranks .wb-eyebrow (0,1,0) — the
   eyebrow inside a masthead was silently taking the lede colour and had
   been losing its accent long before the palette changed. */
.wb-hero p:not(.wb-eyebrow) { margin: 0 auto; max-width: 60ch; color: var(--ink-2); font-size: 16px; }

/* ── tour card ──────────────────────────────────────────── */
.wb-grid {
  display: grid; gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.wb-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--line); border-top-color: var(--glass-edge);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wb-card { background: var(--bg-deep); }
}
.wb-card:hover {
  transform: translateY(-5px);
  border-color: var(--sun);
  box-shadow: var(--shadow-lift), var(--glow-sun);
}
.wb-card-img { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--bg-deep); }
.wb-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.wb-card:hover .wb-card-img img { transform: scale(1.06); }

.wb-card-tag {
  position: absolute; top: 9px; left: 9px;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(4,36,26,.66); backdrop-filter: blur(9px);
  color: var(--pollen); border: 1px solid rgba(180,255,200,.22);
}
.wb-card-tag.is-soon { color: var(--on-sun); background: var(--grad-sun); border-color: transparent; font-weight: 700; }

.wb-card-body { padding: 12px 14px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wb-card-dest { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.wb-card-name {
  margin: 0; font-family: var(--display); font-size: 18px;
  line-height: 1.08; letter-spacing: .01em; color: var(--ink);
}
.wb-card-sub { margin: 0; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.wb-card-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  padding-top: 9px; margin-top: auto; border-top: 1px solid var(--line);
}
.wb-card-price { font-size: 13px; font-weight: 600; color: var(--ink); }
.wb-card-price small { display: block; font-size: 9.5px; font-weight: 400; color: var(--ink-3); letter-spacing: .08em; }
.wb-card-when { font-size: 10px; color: var(--ink-3); text-align: right; }
.wb-card-when b {
  display: block; color: var(--ink); font-weight: 600; font-size: 12px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ── homepage tour slideshow ────────────────────────────── */
.wb-slide-wrap {
  position: relative; overflow: hidden;
}
/* No transition here on purpose: the script sets it per move so it can
   rewind the loop with animation off, which is what keeps the seam
   invisible. */
.wb-slide-track {
  display: flex; gap: clamp(12px, 1.6vw, 20px);
  will-change: transform;
}
/* Each slide card fixed width so N cards are visible */
.wb-slide-track .wb-card {
  flex: 0 0 clamp(220px, 22vw, 280px);
  min-width: 0;
}
.wb-slide-nav {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 22px;
}
.wb-slide-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--line);
  color: var(--ink-2); cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.wb-slide-btn:hover { border-color: var(--shoot); color: var(--shoot); background: var(--glass); }
.wb-slide-btn svg { width: 16px; height: 16px; }
.wb-slide-dots { display: flex; gap: 2px; }
/* A 6px dot is honest about its importance and impossible to hit. The ink
   stays 7px; the button around it is 40px so a thumb can land on it. */
.wb-slide-dot {
  width: 26px; height: 40px; border: none; background: none;
  cursor: pointer; padding: 0; position: relative;
}
.wb-slide-dot::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--line);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.wb-slide-dot:hover::before { background: var(--ink-3); }
.wb-slide-dot.on::before { background: var(--grad-sun); transform: scale(1.45); }

/* ── photo gallery strip ────────────────────────────────── */
.wb-gallery-sec {
  padding: clamp(40px, 6vw, 80px) 0;
  background: var(--bg-deep);
  border-block: 1px solid var(--line-2);
  overflow: hidden;
}
.wb-gallery-head {
  max-width: var(--max); margin: 0 auto clamp(22px, 3vw, 38px);
  padding: 0 clamp(16px, 4vw, 46px); text-align: center;
}
.wb-gallery-runner {
  display: flex; gap: 14px;
  width: max-content;
  animation: galleryScroll 42s linear infinite;
}
.wb-gallery-runner:hover { animation-play-state: paused; }
.wb-gallery-run { display: flex; gap: 14px; flex: 0 0 auto; }
@keyframes galleryScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.wb-photo-tile {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 260px);
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-deep);
  position: relative;
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.wb-photo-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
  display: block;
}
.wb-photo-tile:hover img { transform: scale(1.08); }
.wb-photo-tile-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 10px 12px 9px;
  background: linear-gradient(to top, rgba(4,36,26,.86), transparent);
  font-size: 11px; color: rgba(255,249,227,.9);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.wb-photo-tile:hover .wb-photo-tile-cap { opacity: 1; }

/* ── lightbox ────────────────────────────────────────────── */
.wb-lightbox {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(2,20,14,.94); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.wb-lightbox.open { opacity: 1; pointer-events: auto; }
.wb-lightbox-img {
  max-width: 92vw; max-height: 88vh;
  border-radius: 10px; object-fit: contain;
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}
.wb-lightbox-close {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,249,227,.14); border: 1px solid rgba(255,249,227,.24);
  color: var(--pollen); width: 40px; height: 40px; border-radius: 50%;
  font-size: 20px; cursor: pointer; display: grid; place-items: center;
  transition: background .2s;
}
.wb-lightbox-close:hover { background: rgba(255,249,227,.28); }
.wb-lightbox-cap {
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  font-size: 13px; color: rgba(255,249,227,.74); pointer-events: none;
}

.wb-empty {
  grid-column: 1/-1; text-align: center; padding: 68px 20px;
  border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-2);
}
.wb-empty b { display: block; color: var(--ink); font-family: var(--display); font-size: 22px; margin-bottom: 8px; }
.wb-boot { grid-column: 1/-1; padding: 56px 0; text-align: center; color: var(--ink-3); font-size: 13px; letter-spacing: .1em; }

/* ── footer ─────────────────────────────────────────────── */
.wb-foot { padding: clamp(34px, 5vw, 62px) 0; background: var(--forest); }
.wb-foot-in { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
.wb-foot-brand-block { display: flex; align-items: center; gap: 14px; }
.wb-foot-logo {
  width: 52px; height: 52px; object-fit: contain; flex: 0 0 auto;
  filter: drop-shadow(0 2px 10px rgba(247,190,24,.38));
  opacity: .9;
}
.wb-foot-brand { font-family: var(--display); font-size: 17px; letter-spacing: .04em; color: var(--ink); }
.wb-foot-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.wb-foot-links { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: -10px 0; }
.wb-foot-links a {
  font-size: 13px; color: var(--ink-2); transition: color .2s;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
}
.wb-foot-links a:hover { color: var(--shoot); }
.wb-foot-legal { margin: 0; font-size: 12px; color: var(--ink-3); }

@media (max-width: 820px) {
  /* Anchored to the nav with top:100% rather than the old `inset:61px 0 auto 0`.
     That 61px was a guess at the bar's height, and the bar is 68px once the
     logo is in — so the sheet used to hang 7px over the content it was
     supposed to sit under. `.wb-nav` is sticky, therefore a positioned
     ancestor, therefore the containing block: the sheet now measures itself. */
  .wb-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--forest);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px -18px rgba(0,18,10,.9);
    padding: 6px clamp(16px, 4vw, 46px) max(18px, env(safe-area-inset-bottom));
    display: flex;
    /* animated rather than display:none, so it can leave as well as arrive */
    visibility: hidden; opacity: 0;
    transform: translateY(-10px);
    transition: opacity .24s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .wb-links.open { visibility: visible; opacity: 1; transform: none; }
  .wb-links a {
    padding: 15px 0; border-bottom: 1px solid var(--line-2);
    font-size: 16px; min-height: 52px;
  }
  .wb-links a:last-child { border-bottom: 0; }
  .wb-links a::after { display: none; }
  /* the current page is marked with a gold rule on the leading edge */
  .wb-links a[aria-current="page"] {
    color: var(--ink); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--sun); padding-left: 12px;
  }
  .wb-burger { display: flex; }
  /* The booking button used to be hidden here. Most of this traffic is
     phones, so that removed the one action the page exists for from the
     device most likely to take it. It shrinks instead. */
  .wb-nav-end .wb-btn { padding: 10px 15px; font-size: 11.5px; }
  .wb-nav { gap: var(--sp-3); }
  .wb-logo { width: 42px; height: 42px; border-radius: 11px; }
  .wb-brand { gap: 11px; }
  .wb-brand-txt b { font-size: 22px; }
  .wb-brand-txt i { font-size: 9px; letter-spacing: .36em; margin-top: 4px; }
}
/* dim the page behind an open sheet so the menu reads as the layer in front */
.wb-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(2,20,14,.5);
  opacity: 0; pointer-events: none; transition: opacity .26s var(--ease);
}
.wb-scrim.on { opacity: 1; pointer-events: auto; }
@media (min-width: 821px) { .wb-scrim { display: none; } }

@media (max-width: 400px) {
  /* last to go is the button: the tagline yields first, then the wordmark */
  .wb-brand-txt i { display: none; }
  .wb-logo { width: 36px; height: 36px; border-radius: 9px; }
  .wb-brand-txt b { font-size: 19px; }
  .wb-nav-end .wb-btn { padding: 9px 13px; font-size: 11px; }
}
@media (max-width: 340px) {
  .wb-brand-txt b { font-size: 17px; }
}

/* ── WhatsApp floating action button ────────────────────── */
.wb-wa {
  position: fixed;
  /* the iPhone home indicator sits in the bottom inset; without this the
     button lands under it and the first tap only dismisses the gesture bar */
  bottom: calc(clamp(18px, 4vw, 32px) + env(safe-area-inset-bottom));
  right: calc(clamp(18px, 4vw, 32px) + env(safe-area-inset-right));
  z-index: 500;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 14px rgba(37,211,102,.46),
    0 2px 6px rgba(0,0,0,.22);
  transition:
    transform .25s var(--ease),
    box-shadow .25s var(--ease),
    background .2s;
  /* slide in from the right on load */
  animation: wbWaIn .55s cubic-bezier(.16,.9,.3,1) both .9s;
}
/* the trip page parks a booking bar along the bottom edge on phones; the
   button steps up over it rather than sitting on top of the price */
body.has-bookbar .wb-wa {
  bottom: calc(clamp(18px, 4vw, 32px) + 68px + env(safe-area-inset-bottom));
}
@media (min-width: 901px) { body.has-bookbar .wb-wa { bottom: calc(clamp(18px,4vw,32px) + env(safe-area-inset-bottom)); } }
@keyframes wbWaIn {
  from { opacity: 0; transform: translateX(24px) scale(.8); }
  to   { opacity: 1; transform: translateX(0)   scale(1);   }
}
.wb-wa:hover {
  background: #1da851;
  transform: translateY(-3px) scale(1.07);
  box-shadow:
    0 8px 24px rgba(37,211,102,.52),
    0 4px 10px rgba(0,0,0,.28);
}
.wb-wa:focus-visible {
  outline: 3px solid #25D366;
  outline-offset: 3px;
}
.wb-wa svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
/* pulse ring — draws the eye without being annoying */
.wb-wa::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
  animation: wbWaPulse 3.2s ease-out infinite 2.4s;
}
@keyframes wbWaPulse {
  0%   { transform: scale(1);    opacity: .72; }
  70%  { transform: scale(1.62); opacity: 0;   }
  100% { transform: scale(1.62); opacity: 0;   }
}
/* tooltip label */
.wb-wa-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-deep, #021A12);
  color: var(--ink, #EAF7E4);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  transform: translateY(-50%) translateX(6px);
}
.wb-wa:hover .wb-wa-tip,
.wb-wa:focus-visible .wb-wa-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* hide pulse when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wb-wa, .wb-wa::before { animation: none; }
}