/* AWNS shared inline-extracted styles. Cached by browser, no per-page duplication. */

/* ===== awbns-button-hover ===== */
/* ========= LIQUID FILL HOVER =========
   A circular "ink drop" expands from the exact cursor entry point and
   fills the button. Reverses from the exit point on mouseleave.
   Built on the site's existing --ripple-* variables in .button::before.
   The JS at the bottom of the page sets --ripple-x/y/size on enter+leave.
   ===================================== */

.button,
.cyo-btn,
.main-navigation__drawer-cta,
.testimonial-slider__testimonial-button {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  transition: color .32s ease .14s, transform .2s ease, box-shadow .25s ease !important;
}
.button > *,
.cyo-btn > *,
.main-navigation__drawer-cta > *,
.testimonial-slider__testimonial-button > * {
  position: relative;
  z-index: 1;
}

/* The ink drop itself — sits behind text */
.button::before,
.cyo-btn::before,
.main-navigation__drawer-cta::before,
.testimonial-slider__testimonial-button::before {
  content: "" !important;
  position: absolute !important;
  top: var(--ripple-y, 50%) !important;
  left: var(--ripple-x, 50%) !important;
  width: var(--ripple-size, 0) !important;
  height: var(--ripple-size, 0) !important;
  background: var(--ripple-color, #332421) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  transform-origin: center !important;
  transition: transform .55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  pointer-events: none;
  z-index: -1 !important;
}
.button:hover::before,
.cyo-btn:hover::before,
.main-navigation__drawer-cta:hover::before,
.testimonial-slider__testimonial-button:hover::before {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Ripple color per button type — primary uses Deep Amber (the secondary
   brand color) so gold deepens to amber on hover. Other variants unchanged. */
.button--primary, .main-navigation__drawer-cta, .cyo-btn.primary { --ripple-color: #8E5A1A; }
.button--secondary, .cyo-btn.ghost { --ripple-color: #d4af37; }
.button--neutral { --ripple-color: #332421; }
.testimonial-slider__testimonial-button { --ripple-color: #d4af37; }

/* Text colors — navy on gold for WCAG AA contrast (7:1).
   On hover the ripple expands behind text; flip text to white when ripple covers. */
.button--primary, .main-navigation__drawer-cta { color: #332421 !important; }
.button--primary:hover, .main-navigation__drawer-cta:hover { color: #ffffff !important; }
.button--secondary { color: #332421; }
.button--secondary:hover { color: #332421; }
.button--neutral { color: #ffffff; }
.button--neutral:hover { color: #ffffff; }
.cyo-btn.primary { color: #332421; }
.cyo-btn.primary:hover { color: #ffffff; }
.cyo-btn.ghost { color: #332421; }
.cyo-btn.ghost:hover { color: #332421; }
.testimonial-slider__testimonial-button { color: #332421 !important; }
.testimonial-slider__testimonial-button:hover { color: #332421 !important; border-color: #d4af37 !important; }

/* Subtle lift — physical feedback */
.button:hover, .main-navigation__drawer-cta:hover, .testimonial-slider__testimonial-button:hover { transform: translateY(-1px); }
.button:active, .main-navigation__drawer-cta:active, .testimonial-slider__testimonial-button:active { transform: translateY(0); }

/* Disabled buttons stay inert — no ripple, no lift */
.button[disabled], .cyo-btn[disabled],
.button[disabled]:hover, .cyo-btn[disabled]:hover { transform: none !important; }
.button[disabled]::before, .cyo-btn[disabled]::before { display: none !important; }

/* Respect reduced motion — instant color change, no ripple animation */
@media (prefers-reduced-motion: reduce) {
  .button::before, .cyo-btn::before, .main-navigation__drawer-cta::before, .testimonial-slider__testimonial-button::before {
    transition: none !important;
  }
}

/* ===== awbns-header-cta ===== */
@media (min-width: 1251px) {
  /* 3-section nav: LOGO (left) | MENU (centered) | CTA (right).
     Named grid areas with display:contents on the primary-menu wrapper
     so its children (the <ul> menu + the <a> CTA) inherit grid placement. */
  body .main-navigation__bottom .main-navigation__bottom-container {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-areas: "logo menu cta" !important;
    align-items: center !important;
    gap: var(--gap) !important;
  }
  body .main-navigation__logo {
    grid-area: logo !important;
    justify-self: start !important;
    align-self: center !important;
  }
  body .main-navigation__primary-menu {
    display: contents !important;
  }
  body .main-navigation__primary-menu > .menu {
    grid-area: menu !important;
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--gap) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body .main-navigation__drawer-cta {
    grid-area: cta !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center;
    padding: 9px 22px;
    background: #d4af37;
    color: #332421;
    font-family: var(--font-secondary);
    font-size: var(--font-size-body-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    border-radius: 100px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .25s ease;
    box-shadow: 0 4px 12px -4px rgba(212, 175, 55,0.45);
  }
}

/* ===== awbns-link-hover ===== */
/* Editorial nav link hover: gold underline expands from center + text color shift.
   Top-level primary nav items + footer nav items get the underline treatment.
   Sub-menu items keep their existing background-tint hover (set elsewhere). */

@media (min-width: 1251px) {
  /* TOP NAV — primary menu items */
  .main-navigation__primary-menu .menu > li > .menu-item__link {
    position: relative !important;
    transition: color .25s ease !important;
  }
  .main-navigation__primary-menu .menu > li > .menu-item__link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: var(--color-primary-1, #d4af37);
    transform: translateX(-50%);
    transition: width .35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .main-navigation__primary-menu .menu > li:hover > .menu-item__link::after,
  .main-navigation__primary-menu .menu > li > .menu-item__link:focus-visible::after {
    width: 100%;
  }
  .main-navigation__primary-menu .menu > li > .menu-item__link:hover,
  .main-navigation__primary-menu .menu > li > .menu-item__link:focus-visible {
    color: var(--color-primary-1, #d4af37) !important;
  }
}

/* FOOTER NAV — top-level dropdown headers ("About", "Destinations", etc.) */
.site-footer__navigation .menu > li > a {
  position: relative;
  transition: color .25s ease;
  display: inline-block;
}
.site-footer__navigation .menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--color-primary-1, #d4af37);
  transform: translateX(-50%);
  transition: width .35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.site-footer__navigation .menu > li:hover > a::after,
.site-footer__navigation .menu > li > a:focus-visible::after {
  width: 100%;
}
.site-footer__navigation .menu > li > a:hover,
.site-footer__navigation .menu > li > a:focus-visible {
  color: var(--color-primary-1, #d4af37) !important;
}

/* FOOTER NAV — sub-menu items (lighter treatment, just color shift) */
.site-footer__navigation .menu .sub-menu li a {
  transition: color .2s ease;
}
.site-footer__navigation .menu .sub-menu li a:hover,
.site-footer__navigation .menu .sub-menu li a:focus-visible {
  color: var(--color-primary-1, #d4af37) !important;
}

/* ===== awbns-inquiry-styles ===== */
.form__status:empty { display: none; }
.form__status { margin-top: var(--gap-sm, 12px); padding: 12px 16px; border-radius: 6px; font-family: var(--font-secondary); font-size: var(--font-size-body-sm); line-height: 1.5; }
.form__status[data-state="success"] { background: rgba(212, 175, 55, 0.12); color: var(--color-secondary-1, #332421); border: 1px solid rgba(212, 175, 55, 0.35); }
.form__status[data-state="error"]   { background: rgba(196, 74, 44, 0.08);  color: #963822; border: 1px solid rgba(196, 74, 44, 0.30); }
.awbns-inquiry-form .awbns-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.awbns-inquiry-form button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }


/* ===== awbns-cookie-banner ===== */
.awbns-cookie-banner {
  position: fixed;
  left: 16px; right: 16px;
  bottom: 16px;
  z-index: 9998;
  max-width: 720px;
  margin-inline: auto;
  background: #ffffff;
  color: var(--color-secondary-1, #332421);
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-3, #c7b8a5);
  box-shadow: 0 16px 40px -10px rgba(51, 36, 33,0.18);
  display: none;
  font-family: var(--font-secondary, "Bricolage Grotesque", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s cubic-bezier(0.22, 1, 0.36, 1);
}
.awbns-cookie-banner.is-open { display: block; }
.awbns-cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.awbns-cookie-banner__row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.awbns-cookie-banner__body { flex: 1 1 320px; min-width: 0; }
.awbns-cookie-banner__title {
  font-family: var(--font-primary, "Migra");
  font-size: 18px;
  font-style: italic;
  color: var(--color-primary-1, #d4af37);
  margin: 0 0 4px;
  line-height: 1.2;
}
.awbns-cookie-banner__text { margin: 0; color: var(--color-neutral-2, #6b5d55); font-size: 13px; }
.awbns-cookie-banner__text a { color: var(--color-primary-1, #d4af37); text-decoration: underline; text-underline-offset: 3px; }
.awbns-cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.awbns-cookie-banner__btn {
  border: none;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.awbns-cookie-banner__btn--accept { background: #d4af37; color: #ffffff; }
.awbns-cookie-banner__btn--accept:hover { background: #b8951f; transform: translateY(-1px); }
.awbns-cookie-banner__btn--decline { background: transparent; color: var(--color-neutral-2, #6b5d55); border: 1px solid var(--color-neutral-3, #c7b8a5); }
.awbns-cookie-banner__btn--decline:hover { background: var(--color-neutral-4, #f5f1ea); color: var(--color-secondary-1, #332421); border-color: var(--color-secondary-1, #332421); }

/* MOBILE — compact bottom-pill, max ~70% width, smaller text */
@media (max-width: 600px) {
  .awbns-cookie-banner {
    padding: 12px 14px;
    bottom: 12px;
    left: 12px; right: 12px;
    max-width: 360px;
    border-radius: 10px;
    font-size: 12.5px;
  }
  .awbns-cookie-banner__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .awbns-cookie-banner__title { font-size: 15px; margin-bottom: 2px; }
  .awbns-cookie-banner__text { font-size: 11.5px; line-height: 1.5; }
  .awbns-cookie-banner__actions { justify-content: stretch; gap: 8px; }
  .awbns-cookie-banner__btn { flex: 1; padding: 8px 12px; font-size: 10px; letter-spacing: 0.10em; }
}

/* ===== awbns-content-links =====
   Underlined gold links inside body content (FAQ answers, terms paragraphs,
   travel guide blocks, founder letter, story articles). Excludes buttons,
   navigation, CTAs, cards — they have their own treatment. */
.awbns-faq-cat__answer a,
.awbns-bt-block__body a,
.awbns-tc-block__body a,
.awbns-tg-block__body a,
.awbns-tg-faq a,
.awbns-letter__body a,
.awbns-story p a,
.awbns-story__placeholder a,
.awbns-about-hero a,
.cta__description a,
.cyo-done-foot a,
.cyo-done-lede a,
.lodging-form__form-status a {
  color: var(--color-primary-1, #d4af37) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: var(--color-primary-1, #d4af37) !important;
  border-bottom: none !important;
  transition: color .2s ease, text-decoration-color .2s ease, text-decoration-thickness .2s ease;
  font-weight: 500;
}
.awbns-faq-cat__answer a:hover,
.awbns-bt-block__body a:hover,
.awbns-tc-block__body a:hover,
.awbns-tg-block__body a:hover,
.awbns-tg-faq a:hover,
.awbns-letter__body a:hover,
.awbns-story p a:hover,
.awbns-story__placeholder a:hover,
.awbns-about-hero a:hover,
.cta__description a:hover,
.cyo-done-foot a:hover,
.cyo-done-lede a:hover,
.lodging-form__form-status a:hover {
  color: var(--color-secondary-1, #332421) !important;
  text-decoration-color: var(--color-secondary-1, #332421) !important;
  text-decoration-thickness: 2px !important;
}

/* Header & footer nav: keep on body font, Regular 400. */
.main-navigation .menu-item__text,
.main-navigation .nav-menu-link,
.main-navigation .menu li a,
#site-navigation .menu a,
.site-footer .menu a,
#footer-menu li a,
#footer-buttons-menu li a {
  font-family: var(--font-secondary, 'Bricolage Grotesque') !important;
  font-weight: 400 !important;
}

/* Process section: 4 step headings in brand gold. */
.process__step-title,
.process__step-title b,
.process__step-title span {
  color: #d4af37 !important;
}

/* Footer: dark overlay on desktop so copy reads cleanly over the bg image. */
@media (min-width: 901px) {
  .site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 12, 10, 0.55);
    pointer-events: none;
    z-index: 0;
  }
  .site-footer > * {
    position: relative;
    z-index: 1;
  }
}

/* Process: 4 cards in a single row on desktop, grid layout so all fit. */
@media (min-width: 901px) {
  .process__steps {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--gap) !important;
    overflow: visible !important;
    padding-inline: var(--gutter);
  }
  .process__step {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
}

/* Expanding-cards <li> wrapper: collapse to direct grid children so
   the <a> card fills the grid cell instead of becoming zero-height. */
.awbns-disc__card-li {
  display: contents;
}

/* Task 12: Hero CTA larger — confident, ~40% bigger than default body button. */
.hero__cta .button {
  padding: 1.1rem 2.2rem !important;
  font-size: clamp(1rem, 1.1vw, 1.15rem) !important;
  letter-spacing: 0.08em !important;
}
@media (min-width: 901px) {
  .hero__cta .button {
    padding: 1.25rem 2.6rem !important;
    font-size: 1.15rem !important;
  }
}

/* ===== Cinematic media grade — "Karibu Gold" LUT =====
   A pronounced editorial color grade tuned for East-African golden-hour
   content. Built on Teal & Orange cinema logic, warmed for safari content:
   - lifted contrast for film-stock depth (blacks deepened, highlights protected)
   - saturation push for richer earth tones, ochres, and skin
   - sepia + hue-rotate bias warmth into highlights, cools shadows slightly
   - brightness pulled down a hair so highlights don't clip on bright skies
   Tested against logos and avatars via the :not() and exclude list below. */
.hero__background-video,
.text-media__media-video,
.text-media__media-image,
.awbns-disc__media img,
[class*="__photo"],
.testimonial-slider__testimonial-image:not(.awbns-avatar-initials),
img.attachment-full,
img.size-full,
img.wp-post-image {
  filter:
    contrast(1.16)
    saturate(1.24)
    brightness(0.96)
    sepia(0.10)
    hue-rotate(-6deg);
  transition: filter .5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero video — the signature surface. Add a true cinema-grade overlay:
   warm top wash (golden hour) into a deeper bottom (vignette-like).
   Uses screen + multiply blend modes so it grades the actual video pixels
   rather than just sitting on top. Pointer-events off so nothing intercepts. */
.hero__background { position: relative; }
.hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* warm highlight wash, top */
    linear-gradient(180deg, rgba(212, 175, 55, 0.10) 0%, rgba(212, 175, 55, 0) 35%),
    /* bottom shadow gradient — vignette */
    linear-gradient(180deg, transparent 55%, rgba(20, 14, 12, 0.45) 100%),
    /* subtle teal-shadow / orange-highlight split (T&O) */
    radial-gradient(ellipse 100% 80% at 50% 40%, rgba(255, 180, 90, 0.06) 0%, rgba(40, 60, 70, 0.10) 100%);
  mix-blend-mode: multiply;
}

/* Container-level vignettes on media blocks — the "cinematic" secret ingredient.
   Inset box-shadow burns the edges 4–6%, gives every photo a center of focus
   without touching the pixel data. Subtle, but the eye registers it as
   "this image was framed". */
.text-media__media,
.awbns-disc__media {
  position: relative;
  overflow: hidden;
}
.text-media__media::after,
.awbns-disc__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 60px rgba(20, 14, 12, 0.28),
    inset 0 -40px 80px rgba(20, 14, 12, 0.18);
  border-radius: inherit;
  z-index: 2;
}
/* horizontal-gallery slides intentionally OMITTED from the vignette pass —
   the inset box-shadow becomes prohibitively expensive when Swiper's wrapper
   translates every frame during a swipe (10 slides × 2 large-blur shadows ×
   60fps = scratch). Static media (text-media, discoveries) keep their
   vignettes; the gallery relies on its own gradient ::after instead. */

/* On hover, intensify slightly — the "look closer" gesture. Only on
   non-touch where hover is meaningful. */
@media (hover: hover) {
  .text-media__media-image:hover,
  .awbns-disc__media img:hover {
    filter:
      contrast(1.20)
      saturate(1.30)
      brightness(0.97)
      sepia(0.12)
      hue-rotate(-6deg);
  }
}




/* Amber as a real secondary accent — applied to section eyebrow tags on
   cream-bg sections so the same warm tone reappears as visual rhythm
   alongside destination numerals. Tier 2 follow-ups also live here. */
.awbns-disc__eyebrow,
.awbns-dest__eyebrow,
.testimonial-slider__eyebrow,
.cta__eyebrow,
.text-media__eyebrow,
.awbns-gallery-header__eyebrow {
  color: var(--color-accent, #8E5A1A) !important;
  opacity: 1 !important;
}

/* Tier 2 — real tight line-heights flagged by audit (display elements
   on cream bg, where readability suffers). Bumping to >=1.3 per WCAG. */
.awbns-dest__subhead { line-height: 1.55 !important; }
.awbns-disc__subhead { line-height: 1.55 !important; }
.testimonial-slider__testimonial-quote { line-height: 1.35 !important; }
.testimonial-slider__testimonial-additional-details { line-height: 1.55 !important; }
.process__step-description { line-height: 1.5 !important; }

/* Tier 2 — layout-property animations replaced with transform for GPU compositing.
   Original: transition: margin (hamburger toggle lines) — janky on scroll-heavy pages. */
.site-header__toggle-line {
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity .2s ease !important;
}

/* Pill-shaped buttons sitewide. Fully rounded for editorial CTA feel. */
.button,
.cyo-btn,
.button--primary,
.button--secondary,
.button--neutral,
.main-navigation__drawer-cta,
.main-navigation__button,
.testimonial-slider__testimonial-button {
  border-radius: 999px !important;
}

/* Hero CTA — wider, shorter, generous tracking. White + bold per request.
   NB: white on gold = 2.1:1 (overrides Path A contrast); text-shadow added for legibility. */
.hero__cta .button {
  padding: 0.85rem 2.6rem !important;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem) !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(51,36,33,0.25);
}
@media (min-width: 901px) {
  .hero__cta .button {
    padding: 0.95rem 3.2rem !important;
    font-size: 1.05rem !important;
  }
}

/* Footer fix — style.css has a mobile single-column override that leaks onto
   desktop because it isn't wrapped in a media query. Restore the 2-col grid
   intent on desktop and let the footer breathe to its full content height. */
@media (min-width: 901px) {
  body footer.site-footer .site-footer__container {
    grid-template-columns: 1fr 2fr !important;
    grid-template-areas:
      "site-footer__content site-footer__navigation"
      "site-footer__bottom site-footer__bottom" !important;
    padding-inline: var(--gutter) !important;
    gap: var(--spacer) !important;
  }
  body footer.site-footer .site-footer__container .site-footer__content {
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  /* 6 footer menu columns (About / Destinations / Discoveries /
     Accommodation / Resources / Utility) — let them flow as a flex row. */
  body footer.site-footer .site-footer__navigation > #footer-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--gap) var(--gap-lg) !important;
    justify-content: space-between !important;
  }
  body footer.site-footer .site-footer__navigation > #footer-menu > .menu-item {
    flex: 1 1 0 !important;
    min-width: 120px !important;
  }
  /* Make sure nothing clips */
  body footer.site-footer { overflow: visible !important; }
  body footer.site-footer .site-footer__container { overflow: visible !important; }
}

/* ===== Acacia Green ===== */
/* Secondary primary brand color. Used 20% of the time, never competes with gold.
   Three deliberate placements:
   1) Footer nav link hover — distinguishes from top-nav gold hover
   2) "Show more" / inline expander buttons — non-pill secondary actions
   3) Section dashed dividers and link underlines on hover */

/* Footer nav: hover swaps from gold to acacia green */
.site-footer__navigation .menu > li > a:hover,
.site-footer__navigation .menu > li > a:focus-visible {
  color: var(--color-acacia, #5C6B47) !important;
}
.site-footer__navigation .menu > li > a::after,
.site-footer__navigation .menu > li:hover > a::after {
  background: var(--color-acacia, #5C6B47) !important;
}

/* Inline text-media "Show more" reveal button — secondary, non-pill */
.show-more-button {
  color: var(--color-acacia, #5C6B47) !important;
  border-bottom: 1px solid var(--color-acacia, #5C6B47) !important;
  transition: color .2s ease, border-color .2s ease;
}
.show-more-button:hover {
  color: var(--color-secondary-1, #332421) !important;
  border-color: var(--color-secondary-1, #332421) !important;
}

/* Destination card "Read more" link styling on hover */
.awbns-dest__link:hover {
  color: var(--color-acacia, #5C6B47) !important;
}

/* Footer compaction — desktop only. Tightens padding/gaps so the full footer
   (logo → content → menu columns → payment → copyright) fits in one viewport
   when scrolled to the end. Mobile keeps generous spacing for legibility. */
@media (min-width: 901px) {
  body footer.site-footer {
    padding-top: var(--gap) !important;
    padding-bottom: 0 !important;
  }
  body footer.site-footer .site-footer__container {
    gap: var(--gap) !important;
    padding-block: var(--gap) !important;
  }
  body footer.site-footer .site-footer__content {
    gap: var(--gap-sm) !important;
  }
  body footer.site-footer .site-footer__content-contact {
    gap: 4px !important;
  }
  body footer.site-footer .site-footer__navigation > #footer-menu {
    gap: var(--gap-sm) var(--gap) !important;
  }
  body footer.site-footer .site-footer__navigation .sub-menu {
    gap: 6px !important;
  }
  body footer.site-footer .site-footer__navigation .sub-menu li {
    padding: 2px 0 !important;
  }
  body footer.site-footer .site-footer__payment {
    padding-top: var(--gap-sm) !important;
    margin-top: var(--gap-sm) !important;
    gap: 6px !important;
  }
  body footer.site-footer .site-footer__bottom,
  body footer.site-footer #colophon-bottom {
    padding-block: var(--gap-sm) !important;
  }
  body footer.site-footer .site-footer__content-logo-image {
    max-height: 180px !important;
    width: auto !important;
  }
}

/* ===== Testimonial avatar — stacked offset rectangle ===== */
/* Editorial cover-photo treatment: the image (or initials block) sits as a
   portrait rectangle with a subtle Karibu Gold offset plate behind it, like
   a print laid on top of a developing card. Replaces the oval/circle avatar.
   Uses double box-shadow: hard offset = gold plate; soft blur = ambient depth.
   No markup change needed; the offset plate is rendered via shadow. */
.testimonial-slider__testimonial-image,
.awbns-avatar-initials {
  width: 120px !important;
  height: 148px !important;
  max-width: 120px !important;
  max-height: 148px !important;
  min-width: 120px !important;
  min-height: 148px !important;
  aspect-ratio: auto !important;
  border-radius: 3px !important;
  box-shadow:
    11px 11px 0 var(--color-primary-1, #d4af37),
    14px 14px 28px rgba(51, 36, 33, 0.09) !important;
  margin: 0 auto calc(var(--gap-sm) + 12px) auto !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.awbns-avatar-initials {
  font-family: var(--font-primary) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2.3rem !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  color: var(--color-secondary-1, #332421) !important;
  background: var(--color-neutral-4, #f5f1ea) !important;
  border: 1px solid rgba(51, 36, 33, 0.08) !important;
}
/* Make sure the testimonial card lets the offset plate breathe — no clipping. */
.testimonial-slider__testimonial { overflow: visible !important; }

/* Mobile: smaller portrait rectangle, tighter offset. */
@media (max-width: 600px) {
  .testimonial-slider__testimonial-image,
  .awbns-avatar-initials {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 5 / 3 !important;
    box-shadow:
      7px 7px 0 var(--color-primary-1, #d4af37),
      10px 10px 20px rgba(51, 36, 33, 0.08) !important;
    margin: 0 0 calc(var(--gap-sm) + 9px) 0 !important;
  }
  .awbns-avatar-initials {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== Horizontal gallery — scroll jank fix ===== */
/* The "Wild Tanzania, as we see it." section was scratching on scroll because
   Swiper init + SplitText reveal + 10 lazy WebPs decoding all hit the same
   paint frame. These rules scope the section's paint cost and pre-allocate
   a compositor layer for the slides so the cost doesn't escape. */
.horizontal-gallery {
  contain: layout paint style;
}
.horizontal-gallery__wrapper {
  will-change: transform;
  transform: translateZ(0);  /* force own compositor layer */
}
.horizontal-gallery__media {
  contain: layout paint;
}
.horizontal-gallery__media-image {
  will-change: auto;
  backface-visibility: hidden;  /* avoids blurry edges on transform */
}
/* Reserve the gallery's vertical footprint so layout doesn't shift when
   slides finish decoding. The aspect ratio matches the existing 480x550. */
@media (min-width: 901px) {
  .horizontal-gallery__container { min-height: 620px; }
}

/* ===== Hero — dynamic viewport height ===== */
/* Original rule uses 100svh which is locked to "address bar visible" size.
   When mobile users scroll down, the address bar hides; on scroll-up the hero
   stays at the old smaller size, leaving a blank strip below.
   100dvh tracks the visible viewport in real time so the hero always fills it.
   100vh fallback covers older browsers without dvh support. */
.hero.--high-impact .page-container {
  height: 100vh;          /* fallback for old browsers */
  height: 100dvh !important;
}

/* ===== Text-media — top-align media + content columns =====
   Stock rule has .text-media__media using align-self:start while
   .text-media__content uses margin-block:auto (vertical-center). The two
   don't agree when column heights differ, leaving the video visually
   "shifted down" next to the Karibu sana paragraph (and other text-media
   blocks). Force both to start so the top edges line up. */
@media (min-width: 851px) {
  .text-media__content { margin-block: 0 !important; align-self: start !important; }
  .text-media__media { align-self: start !important; }
}

/* ===== Accommodation tier hero — system fixes ===== */

/* (1) Touch responsiveness — two causes of swipe lag on the hero gallery:
       a) overlay-inner with pointer-events:auto sat ON TOP of Swiper, eating
          touch events on the bottom 1/3 of the hero (right where fingers land).
       b) no touch-action declaration meant the browser waited ~300ms to
          decide whether a touch belonged to Swiper or to page scroll.
       The overlay holds no interactive elements, so it can be made fully
       inert to pointer events. touch-action:pan-y on slides claims horizontal
       gestures for Swiper instantly while preserving vertical page scroll. */
.awbns-tier-hero__overlay-inner { pointer-events: none !important; }
.awbns-tier-hero__gallery .swiper-slide { touch-action: pan-y; }
.awbns-tier-hero__gallery,
.awbns-tier-hero__gallery .swiper-wrapper { touch-action: pan-y; }

/* (2) Dashes (pagination bullets) — were left-pinned because the controls
       row used justify-content: space-between (bullets left, arrows right).
       Float the arrows to the right, absolutely-center the bullets in the
       row. Works at every viewport. */
.awbns-tier-hero__controls-inner {
  position: relative !important;
  justify-content: flex-end !important;
}
.awbns-tier-hero__pagination {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* On the tightest mobiles, keep some breathing room so dashes don't kiss the
   arrow stack when the slide count's bullet row gets longer. */
@media (max-width: 480px) {
  .awbns-tier-hero__pagination { gap: 6px !important; }
}

/* ===== Horizontal gallery — swipe responsiveness =====
   Declares horizontal pan as a Swiper gesture so the browser doesn't burn
   300ms deciding whether the touch is for the carousel or page scroll.
   Vertical scroll still works because we explicitly allow pan-y. */
.horizontal-gallery__container,
.horizontal-gallery__wrapper,
.horizontal-gallery__media {
  touch-action: pan-y;
}

/* ===== Accommodation tier "Karibu" hairline — restore centering =====
   The inline CSS declares .awbns-tier-open::before twice. The first sets
   transform: translateX(-50%) (centers it). The second overrides with
   transform: scaleX(0) for the reveal animation — but CSS doesn't merge
   transforms, so the centering offset is lost. The hairline ends up with
   its LEFT EDGE at the page center, drifting right of true center.
   Restore by combining both transforms in the override. */
.awbns-tier-open::before {
  transform: translateX(-50%) scaleX(0) !important;
}
.awbns-tier-open.is-visible::before {
  transform: translateX(-50%) scaleX(1) !important;
}

/* ===== Mobile nav drawer — CTA bottom safe area =====
   When the drawer is open on mobile, the "Plan Yours" CTA sat at the
   bottom-edge of the viewport and visually kissed the browser address bar /
   bottom toolbar (Safari, Chrome on Android both reserve ~50–80px there).
   Lift the CTA with safe-area-aware bottom padding so it always clears
   the chrome on every device. */
@media (max-width: 1250px) {
  body.site-header-open .main-navigation__bottom-container {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;
  }
  body.site-header-open .main-navigation__drawer-cta {
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

/* ===== Editorial body text — tighten leading =====
   Several inline page styles set line-height as high as 1.75 with extra
   word-spacing 0.02em on top. The combination read as "AI-spaced" — too
   loose for the editorial register. Pull it back to 1.55 for body
   paragraphs and 1.5 for leads. Applies to about-us, safety, terms, faq
   without touching the per-page CSS. */
.awbns-tc-block__body,
.awbns-tc-block__body p,
.awbns-letter__body p,
.awbns-faq-cat__answer,
.awbns-faq__answer,
.awbns-why__answer {
  line-height: 1.55 !important;
  word-spacing: normal !important;
}
.awbns-tc-hero__lead,
.awbns-about-hero__lead,
.awbns-faq-hero__lead,
.awbns-why__subhead {
  line-height: 1.5 !important;
}
/* About-us "Karibu" greeting had word-spacing 0.04em on top of italic
   letter-spacing 0 — gives a deliberate-but-loose feel. Normalize. */
.awbns-letter__greeting,
.awbns-letter__body p em {
  word-spacing: normal !important;
}


/* ===== Destination magazine register =====
   Hoisted from per-page inline styles so all six destination pages share
   one source of truth. Sections: dst-open (magazine intro), dst-wildlife
   (numbers + habitats), dst-imagebreak (full-bleed spread), dst-article
   (long-form with sticky sidebar), dst-stays (accommodation tier links). */

.dst-open { padding: clamp(5rem, 10vw, 9rem) var(--gap) clamp(3rem, 6vw, 5rem); background: var(--color-neutral-4); }
.dst-open__inner { max-width: 920px; margin: 0 auto; }
.dst-open__head { font-family: var(--font-primary); font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.05; color: var(--color-secondary-1); margin: 0 0 var(--gap); letter-spacing: -0.025em; font-weight: 400; max-width: 22ch; }
.dst-open__head em { color: var(--color-primary-1); font-style: italic; }
.dst-open__dek { font-family: var(--font-primary); font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.4; color: var(--color-neutral-1); margin: 0 0 var(--gap-lg); max-width: 56ch; font-weight: 400; letter-spacing: -0.005em; }
.dst-open__body { font-family: var(--font-secondary); font-size: clamp(1.02rem, 1.1vw, 1.13rem); line-height: 1.6; color: var(--color-neutral-1); margin: 0; max-width: 64ch; }
.dst-open__body::first-letter { font-family: var(--font-primary); color: var(--color-secondary-1); font-size: 3.4em; line-height: 0.82; float: left; padding: 0.08em 0.14em 0 0; font-weight: 400; }
.dst-open__body em { color: var(--color-primary-1); font-style: italic; }

.dst-wildlife { padding: clamp(5rem, 10vw, 10rem) var(--gap); background: var(--color-light); }
.dst-wildlife__inner { max-width: 1180px; margin: 0 auto; }
.dst-wildlife__header { max-width: 720px; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.dst-wildlife__label { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; color: var(--color-secondary-1); opacity: 0.55; margin: 0 0 var(--gap-sm); font-weight: 600; }
.dst-wildlife__heading { font-family: var(--font-primary); font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.05; color: var(--color-secondary-1); margin: 0; letter-spacing: -0.02em; font-weight: 400; }
.dst-wildlife__heading em { color: var(--color-primary-1); font-style: italic; }
.dst-wildlife__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 2.5vw, 2.5rem); margin-bottom: clamp(4rem, 8vw, 7rem); }
@media (min-width: 701px) { .dst-wildlife__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .dst-wildlife__grid { grid-template-columns: repeat(4, 1fr); } }
.dst-wildlife__card { padding: var(--gap-lg) 0; border-top: 1px solid rgba(51,36,33,0.14); position: relative; }
.dst-wildlife__card-num { font-family: var(--font-primary); font-style: italic; color: var(--color-primary-1); font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 var(--gap-sm); font-weight: 400; }
.dst-wildlife__card-name { font-family: var(--font-primary); font-size: clamp(1.2rem, 1.5vw, 1.45rem); color: var(--color-secondary-1); margin: 0 0 var(--gap-sm); font-weight: 400; letter-spacing: -0.005em; }
.dst-wildlife__card-name em { color: var(--color-primary-1); font-style: italic; }
.dst-wildlife__card-desc { font-family: var(--font-secondary); font-size: 0.94rem; line-height: 1.55; color: var(--color-neutral-2); margin: 0; }
.dst-wildlife__divide { display: flex; align-items: center; gap: var(--gap); margin: clamp(2rem, 4vw, 3.5rem) 0; }
.dst-wildlife__divide::before, .dst-wildlife__divide::after { content: ""; flex: 1; height: 1px; background: rgba(51,36,33,0.12); }
.dst-wildlife__divide-label { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.7rem; color: var(--color-secondary-1); opacity: 0.6; font-weight: 600; }
.dst-wildlife__habitats { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 3.5vw, 3rem); }
@media (min-width: 901px) { .dst-wildlife__habitats { grid-template-columns: repeat(3, 1fr); } }
.dst-wildlife__habitat { padding: var(--gap-lg) 0 0; border-top: 1px solid rgba(51,36,33,0.14); }
.dst-wildlife__habitat-eyebrow { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.66rem; color: var(--color-primary-1); margin: 0 0 var(--gap-sm); font-weight: 700; }
.dst-wildlife__habitat-name { font-family: var(--font-primary); font-size: clamp(1.4rem, 2vw, 1.7rem); color: var(--color-secondary-1); margin: 0 0 var(--gap-sm); font-weight: 400; letter-spacing: -0.01em; line-height: 1.15; }
.dst-wildlife__habitat-name em { color: var(--color-primary-1); font-style: italic; }
.dst-wildlife__habitat-desc { font-family: var(--font-secondary); font-size: 0.97rem; line-height: 1.55; color: var(--color-neutral-2); margin: 0; }

.dst-imagebreak { padding: 0; background: var(--color-light); }
.dst-imagebreak__inner { max-width: 1320px; margin: 0 auto; padding: 0 var(--gap); }
.dst-imagebreak__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
@media (min-width: 901px) { .dst-imagebreak__frame { aspect-ratio: 21 / 9; } }
.dst-imagebreak__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dst-imagebreak__caption { font-family: var(--font-secondary); font-size: 0.78rem; color: var(--color-neutral-2); letter-spacing: 0.04em; padding: var(--gap-sm) 0 0; margin: 0; max-width: 64ch; line-height: 1.45; }
.dst-imagebreak__caption em { font-family: var(--font-primary); color: var(--color-primary-1); font-style: italic; font-size: 1.05em; }

.dst-article { padding: clamp(5rem, 10vw, 10rem) var(--gap); background: var(--color-light); }
.dst-article__inner { max-width: 1140px; margin: 0 auto; }
.dst-article__head { max-width: 760px; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid rgba(51,36,33,0.14); }
.dst-article__category { font-family: var(--font-secondary); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.30em; color: var(--color-primary-1); margin: 0 0 var(--gap); font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.dst-article__category::before { content: ""; width: 24px; height: 1px; background: var(--color-primary-1); }
.dst-article__title { font-family: var(--font-primary); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; color: var(--color-secondary-1); margin: 0 0 var(--gap); letter-spacing: -0.02em; font-weight: 400; }
.dst-article__title em { color: var(--color-primary-1); font-style: italic; }
.dst-article__dek { font-family: var(--font-primary); font-style: italic; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.45; color: var(--color-neutral-1); margin: 0; max-width: 60ch; letter-spacing: -0.005em; font-weight: 400; }
.dst-article__layout { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 901px) { .dst-article__layout { grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(3rem, 6vw, 5rem); } }
.dst-article__body { font-family: var(--font-secondary); font-size: clamp(1.02rem, 1.1vw, 1.13rem); line-height: 1.6; color: var(--color-secondary-1); max-width: 64ch; }
.dst-article__body > p { margin: 0 0 var(--gap); }
.dst-article__body > p:last-child { margin-bottom: 0; }
.dst-article__body > p:first-of-type::first-letter { font-family: var(--font-primary); color: var(--color-secondary-1); font-size: 3.6em; line-height: 0.82; float: left; padding: 0.08em 0.14em 0 0; font-weight: 400; }
.dst-article__body em { color: var(--color-primary-1); font-style: italic; }
.dst-article__body strong { font-weight: 600; color: var(--color-secondary-1); }
.dst-article__sub { font-family: var(--font-primary); font-size: clamp(1.4rem, 2vw, 1.7rem); margin: clamp(2rem, 3.5vw, 3rem) 0 var(--gap); line-height: 1.15; color: var(--color-secondary-1); font-weight: 400; letter-spacing: -0.01em; }
.dst-article__sub em { color: var(--color-primary-1); font-style: italic; }
.dst-article__pullquote { margin: clamp(2.5rem, 4.5vw, 3.5rem) 0; padding: clamp(1.5rem, 2.5vw, 2rem) 0; border-top: 1px solid rgba(51,36,33,0.14); border-bottom: 1px solid rgba(51,36,33,0.14); font-family: var(--font-primary); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.35; color: var(--color-secondary-1); letter-spacing: -0.005em; }
.dst-article__pullquote::before { content: "\201C"; font-family: var(--font-primary); color: var(--color-primary-1); font-size: 2.4em; line-height: 0; vertical-align: -0.35em; margin-right: 0.06em; font-style: italic; }
.dst-article__pullquote em { color: var(--color-primary-1); font-style: italic; }
.dst-article__figure { margin: clamp(2.5rem, 4.5vw, 3.5rem) 0; }
.dst-article__figure img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.dst-article__figure figcaption { font-family: var(--font-secondary); font-size: 0.78rem; color: var(--color-neutral-2); letter-spacing: 0.04em; padding: var(--gap-sm) 0 0; margin: 0; line-height: 1.45; }
.dst-article__figure figcaption em { font-family: var(--font-primary); color: var(--color-primary-1); font-style: italic; font-size: 1.05em; }
.dst-article__aside { font-family: var(--font-secondary); }
@media (min-width: 901px) { .dst-article__aside { position: sticky; top: calc(var(--menu-main-height) + var(--gap)); align-self: start; } }
.dst-article__aside-label { font-family: var(--font-secondary); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--color-primary-1); margin: 0 0 var(--gap-sm); font-weight: 700; padding-bottom: var(--gap-sm); border-bottom: 1px solid var(--color-primary-1); }
.dst-article__aside-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
.dst-article__aside-item { display: grid; grid-template-columns: 80px 1fr; gap: var(--gap-sm); padding: 8px 0; border-bottom: 1px solid rgba(51,36,33,0.10); }
.dst-article__aside-item:last-child { border-bottom: none; }
.dst-article__aside-month { font-family: var(--font-primary); font-style: italic; color: var(--color-primary-1); font-size: 0.95rem; line-height: 1.2; letter-spacing: -0.005em; }
.dst-article__aside-where { font-size: 0.86rem; line-height: 1.4; color: var(--color-neutral-2); }
.dst-article__aside-where strong { color: var(--color-secondary-1); font-weight: 600; }

.dst-stays { padding: clamp(5rem, 10vw, 10rem) var(--gap); background: var(--color-light); }
.dst-stays__inner { max-width: 1180px; margin: 0 auto; }
.dst-stays__header { max-width: 720px; margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.dst-stays__label { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; color: var(--color-secondary-1); opacity: 0.55; margin: 0 0 var(--gap-sm); font-weight: 600; }
.dst-stays__heading { font-family: var(--font-primary); font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.05; color: var(--color-secondary-1); margin: 0 0 var(--gap); letter-spacing: -0.02em; font-weight: 400; }
.dst-stays__heading em { color: var(--color-primary-1); font-style: italic; }
.dst-stays__subhead { font-family: var(--font-secondary); font-size: clamp(1rem, 1.1vw, 1.1rem); line-height: 1.55; color: var(--color-neutral-2); margin: 0; max-width: 56ch; }
.dst-stays__grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(51,36,33,0.14); }
@media (min-width: 901px) { .dst-stays__grid { grid-template-columns: 1fr 1fr; } }
.dst-stays__row { display: grid; grid-template-columns: 60px 1fr auto; gap: clamp(1rem, 2vw, 2rem); align-items: baseline; padding: var(--gap-lg) 0; border-bottom: 1px solid rgba(51,36,33,0.14); text-decoration: none; color: inherit; transition: padding-left .35s cubic-bezier(0.22, 1, 0.36, 1); }
.dst-stays__row:hover { padding-left: 12px; }
@media (min-width: 901px) { .dst-stays__row:nth-child(odd) { padding-right: var(--gap-lg); border-right: 1px solid rgba(51,36,33,0.14); } .dst-stays__row:nth-child(even) { padding-left: var(--gap-lg); } }
.dst-stays__row-num { font-family: var(--font-primary); font-style: italic; color: var(--color-primary-1); font-size: clamp(1.4rem, 2vw, 1.7rem); margin: 0; opacity: 0.7; line-height: 1; }
.dst-stays__row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dst-stays__row-name { font-family: var(--font-primary); font-size: clamp(1.2rem, 1.5vw, 1.5rem); color: var(--color-secondary-1); margin: 0; line-height: 1.1; letter-spacing: -0.005em; }
.dst-stays__row-name em { color: var(--color-primary-1); font-style: italic; }
.dst-stays__row-desc { font-family: var(--font-secondary); font-size: 0.9rem; color: var(--color-neutral-2); margin: 0; line-height: 1.5; }
.dst-stays__row-go { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.66rem; color: var(--color-secondary-1); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: gap .25s cubic-bezier(0.22, 1, 0.36, 1), color .2s ease; }
.dst-stays__row-go::after { content: "\2192"; transition: transform .25s ease; }
.dst-stays__row:hover .dst-stays__row-go { gap: 12px; color: var(--color-primary-1); }

/* ===== Destination + Discovery hero — full-bleed perception fix =====
   Three changes:
   (1) 100svh -> 100dvh so the hero tracks the real visible viewport
       (no gap when iOS Safari collapses the address bar on scroll).
   (2) Bottom dark-wash gradient starts lower (65% instead of 50%) and
       finishes lighter (0.50 instead of 0.75) — gives the image ~30%
       more visible breathing room before the wash kicks in.
   (3) On mobile, drop the overlay bottom padding so the title sits
       closer to the controls and the photo carries more canvas. */
.awbns-dpage-hero__shell {
  height: 100vh;
  height: 100dvh !important;
}
.awbns-dpage-hero__gallery .swiper-slide::after {
  background: linear-gradient(180deg,
    rgba(51, 36, 33, 0.30) 0%,
    rgba(51, 36, 33, 0.0) 25%,
    rgba(51, 36, 33, 0.0) 65%,
    rgba(51, 36, 33, 0.50) 100%) !important;
}
@media (max-width: 600px) {
  .awbns-dpage-hero__overlay {
    padding-bottom: calc(var(--gap) + 40px) !important;
  }
}

/* ===== Header logo — force BLACK wordmark on cream pages =====
   Cream-background pages all set body.--navigation-theme-dark via inline
   script, but the original site CSS doesn't carry !important — so other
   scroll-state rules can cascade in and flip the secondary (white) logo
   back on, leaving it invisible against the cream header background.
   Force the right wordmark in this state regardless of scroll position. */
body.--navigation-theme-dark .main-navigation__logo-image.--primary {
  opacity: 1 !important;
}
body.--navigation-theme-dark .main-navigation__logo-image.--secondary {
  opacity: 0 !important;
}

/* ===== Resources pages — shared editorial register =====
   Hoisted hero + section utilities used by seasonal-highlights, the two
   flight pages, and booking terms. Replaces the plain awbns-srh-hero
   centered-text register with a brand-aligned magazine intro that pairs
   with the rest of the editorial pages (Safety, Our approach). */

.res-hero { padding: calc(var(--menu-main-height) + clamp(3rem, 6vw, 6rem)) var(--gap) clamp(3rem, 5vw, 4.5rem); background: var(--color-neutral-4); }
.res-hero__inner { max-width: 920px; margin: 0 auto; }
.res-hero__eyebrow { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.30em; font-size: 0.7rem; color: var(--color-primary-1); margin: 0 0 var(--gap-lg); font-weight: 700; display: inline-flex; align-items: center; gap: 12px; }
.res-hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--color-primary-1); }
.res-hero__head { font-family: var(--font-primary); font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.05; color: var(--color-secondary-1); margin: 0 0 var(--gap); letter-spacing: -0.025em; font-weight: 400; max-width: 20ch; }
.res-hero__head em { color: var(--color-primary-1); font-style: italic; }
.res-hero__dek { font-family: var(--font-primary); font-style: italic; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.4; color: var(--color-neutral-1); margin: 0 0 var(--gap-lg); max-width: 56ch; font-weight: 400; letter-spacing: -0.005em; }
.res-hero__lede { font-family: var(--font-secondary); font-size: clamp(1.02rem, 1.1vw, 1.13rem); line-height: 1.55; color: var(--color-neutral-1); max-width: 64ch; margin: 0; }

/* Shared section label/eyebrow patterns used across all resource bodies. */
.res-label { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; color: var(--color-primary-1); margin: 0 0 var(--gap-sm); font-weight: 700; }
.res-section-heading { font-family: var(--font-primary); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; color: var(--color-secondary-1); margin: 0 0 var(--gap); letter-spacing: -0.015em; font-weight: 400; }
.res-section-heading em { color: var(--color-primary-1); font-style: italic; }

/* Editorial divider — labelled hairline that breaks long content runs. */
.res-divide { display: flex; align-items: center; gap: var(--gap); margin: clamp(2.5rem, 4vw, 4rem) auto; max-width: 760px; }
.res-divide::before, .res-divide::after { content: ""; flex: 1; height: 1px; background: rgba(51, 36, 33, 0.14); }
.res-divide-label { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.7rem; color: var(--color-secondary-1); opacity: 0.6; font-weight: 600; white-space: nowrap; }

/* ===== Header hover-reveal — preview the scrolled state on hover =====
   On pages where the header is currently transparent (home video hero,
   destinations, discoveries, accommodation tier pages — i.e., body does NOT
   have --navigation-theme-dark), hovering anywhere over the header bar
   should reveal the scrolled-state appearance: cream/white background,
   dark text, black logo. When the cursor leaves the header, it fades
   back to transparent. After actual scroll, the body gets the dark-theme
   class and the hover rule becomes a no-op (the bg is already there). */

/* Smooth fades so the reveal feels deliberate, not flashbulb. */
.main-navigation__bottom,
.main-navigation__logo-image,
.main-navigation__primary-menu .menu-item__link,
.main-navigation__primary-menu .menu-item__text {
  transition: background-color .35s cubic-bezier(0.22, 1, 0.36, 1),
              color .35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity .35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Only fire on pages currently in the transparent header state. */
body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__bottom {
  background-color: var(--color-light) !important;
  color: var(--color-dark) !important;
}
body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__logo-image.--primary {
  opacity: 1 !important;
}
body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__logo-image.--secondary {
  opacity: 0 !important;
}
/* Menu link text flips white -> dark on hover-reveal so the items stay
   readable against the new cream background. */
body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__primary-menu .menu-item__link,
body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__primary-menu .menu-item__text {
  color: var(--color-dark) !important;
}
/* Hamburger toggle lines (mobile) — flip to dark on hover-reveal too. */
body:not(.--navigation-theme-dark) .site-header:hover .site-header__toggle-line {
  background: var(--color-dark) !important;
}
/* Suppress on touch devices — hover on touch is ambiguous and would
   trigger this on every tap. */
@media (hover: none) {
  body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__bottom {
    background-color: rgba(0,0,0,0) !important;
    color: var(--color-light) !important;
  }
  body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__logo-image.--primary { opacity: 0 !important; }
  body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__logo-image.--secondary { opacity: 1 !important; }
  body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__primary-menu .menu-item__link,
  body:not(.--navigation-theme-dark) .site-header:hover .main-navigation__primary-menu .menu-item__text {
    color: var(--color-light) !important;
  }
  body:not(.--navigation-theme-dark) .site-header:hover .site-header__toggle-line {
    background: var(--color-light) !important;
  }
}

/* ===== Home process section — editorial typographic lift =====
   The original markup uses inline span/b font-size 1.5em on each step title,
   producing a "SaaS process diagram" feel. Override to bigger italic
   numerals + cleaner step titles in the brand register, without rewriting
   the WordPress-stuck inline markup. */
.process__step { padding-block: clamp(1.5rem, 3vw, 2.5rem) !important; }
.process__step-number {
  font-family: var(--font-primary) !important;
  font-style: italic !important;
  color: var(--color-primary-1) !important;
  font-size: clamp(3rem, 5.5vw, 4.5rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 0.4rem !important;
  font-weight: 400 !important;
}
/* Step title — the inline span/b font-size 1.5em becomes our base; the
   parent class keeps Migra, weight 400. */
.process__step-title {
  font-family: var(--font-primary) !important;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 0.6rem !important;
  letter-spacing: -0.01em !important;
  font-weight: 400 !important;
  color: var(--color-secondary-1) !important;
}
.process__step-title span,
.process__step-title b {
  font-size: inherit !important;
  font-weight: 400 !important;
  font-family: inherit !important;
}
.process__step-description {
  font-family: var(--font-secondary) !important;
  font-weight: 400 !important;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem) !important;
  line-height: 1.55 !important;
  color: var(--color-neutral-1) !important;
  max-width: 32ch !important;
}

/* ===== Home CTA marquee — pause on hover =====
   The ticker is a tasteful brand signature when it doesn't compete for
   attention. Pause the scroll when the cursor lands on it so readers can
   focus on the text without it sliding away. CSS-only; works whether the
   underlying motion is animation- or transform-driven. */
.cta-marquee:hover .cta-marquee__track,
.cta-marquee:hover [data-marquee] {
  animation-play-state: paused !important;
}
.cta-marquee__track,
.cta-marquee [data-marquee] {
  transition: opacity .25s ease;
}
.cta-marquee:hover .cta-marquee__track,
.cta-marquee:hover [data-marquee] {
  opacity: 0.92;
}

/* ===== Home trust badges — credential eyebrow =====
   The marquee of partner logos works harder when it's framed as a
   credential statement rather than a passive logo strip. Inject a small
   uppercase eyebrow above it with the same gold-dash treatment used
   elsewhere on the page. */
.trust-badges.--default {
  padding-top: clamp(2.5rem, 5vw, 4rem) !important;
}
.trust-badges.--default::before {
  content: "Licensed & Accredited by";
  display: block;
  text-align: center;
  font-family: var(--font-secondary);
  text-transform: uppercase;
  letter-spacing: 0.30em;
  font-size: 0.72rem;
  color: var(--color-primary-1);
  font-weight: 700;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: var(--gap-sm);
  position: relative;
}
.trust-badges.--default::after {
  content: "";
  position: absolute;
  top: clamp(2.5rem, 5vw, 4rem);
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1.4rem;
  width: 28px;
  height: 1px;
  background: var(--color-primary-1);
  opacity: 0;
}