/* ============================================================================
   Waypoint Journeys — 2026 core-page redesign layer
   ============================================================================
   Presentational only. Loaded LAST in <head> on every redesigned page so it
   wins the cascade over both the shared stylesheets (homepage.css /
   expedition.css) and each page's inline critical CSS, without editing them.

   Nothing in here touches lead capture or ad tracking: no rule renames a form
   field, hides a honeypot differently, or changes a CTA's href. The floating
   "Message Us" card deliberately keeps pointing at /inquire/ so the Lead pixel,
   CAPI dedupe, Google Ads conversion and lead Sheet keep firing as before.

   Section rhythm note: the homepage keeps its existing ALTERNATING light/dark
   bands (sand Difference / How It Works / FAQ against dark Expeditions /
   Stats / Custom / Testimonials / CTA) rather than the all-dark treatment in
   the design bundle — a deliberate deviation the founder asked for. On the sand
   bands, gold text uses --gold-dark, because plain --gold measures only 2.35:1
   against #F5EDE0 and fails WCAG AA.
   ========================================================================== */

:root {
  --wpj-card: #161616;
  --wpj-input: #101010;
  --wpj-footer: #0D0D0C;
  --wpj-img-fallback: #22211f;
  --wpj-wa: #167850;
  --wpj-wa-hover: #125E3F;
  --wpj-hair-16: rgba(196, 148, 74, .16);
  --wpj-hair-30: rgba(196, 148, 74, .30);
  --wpj-hair-55: rgba(196, 148, 74, .55);
  --wpj-div: rgba(232, 224, 212, .35);
}

/* css/expedition.css's token set predates --font-display / --font-body /
   --off-white; this layer consumes all three, and an unresolvable var() makes
   the whole declaration compute to unset. Declare them for the expedition scope
   only — the values are the ones inquire/index.html already publishes. */
body.wpj-expedition {
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;
  --off-white: #E8E0D4;
}

/* ==========================================================================
   1. NAVIGATION + MEGA MENU  (shared, every page)
   ========================================================================== */

/* Home/Inquire use <nav class="nav">; expedition pages use <nav id="navbar">.
   Both get the same bar. */
.nav,
#navbar {
  /* Bar spans the viewport; its CONTENTS are held to the design's 1320px with
     32px side padding. Done with padding rather than a wrapper because the
     logo and link list are direct flex children on all 114 pages — on a
     3440px monitor the logo and links would otherwise sit ~3.4k apart. */
  padding: 0 max(32px, calc((100% - 1320px) / 2));
  height: 68px;
  background: rgba(26, 26, 26, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(196, 148, 74, .28);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* The bar is opaque from the top now, so the scrolled state only tightens it. */
.nav.scrolled,
#navbar.scrolled {
  padding: 0 max(32px, calc((100% - 1320px) / 2));
  background: rgba(26, 26, 26, .98);
  box-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.nav-logo svg { width: 32px; height: 32px; }
.nav-logo-text { font-size: .75rem; letter-spacing: .35em; }

.nav-links { gap: 30px; }
.nav-links a {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
}
.nav-links a:hover { color: var(--gold-light); }

/* .nav-cta-btn on home/inquire, .nav-cta on expedition pages */
.nav-cta-btn,
.nav-links .nav-cta {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 11px 22px;
  background: var(--gold);
  color: var(--charcoal) !important;
  border: 1px solid var(--gold) !important;
  transition: background .25s ease, color .25s ease;
}
.nav-cta-btn:hover,
.nav-links .nav-cta:hover {
  background: transparent;
  color: var(--gold) !important;
}
/* the expedition nav links carry an animated underline pseudo-element; it
   should not draw across the filled button */
.nav-links .nav-cta::after { display: none !important; }
/* On the Inquire page the button starts inverted — you are already there. */
body.wpj-on-inquire .nav-cta-btn {
  background: transparent;
  color: var(--gold) !important;
}
body.wpj-on-inquire .nav-cta-btn:hover {
  background: var(--gold);
  color: var(--charcoal) !important;
}

/* ---- mega menu: full-width panel, opens on hover ---- */
.nav-dd-menu {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  max-width: none;
  margin: 0;
  padding: 34px 32px 38px;
  background: #111;
  border: none;
  border-bottom: 1px solid var(--wpj-hair-55);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
  border-radius: 0;
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity .22s ease, visibility .22s ease;
  /* leave a strip of the page visible below the panel so it still reads as a
     menu rather than a full-screen takeover (Africa alone has 22 links) */
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-dd.open .nav-dd-menu,
.nav-dd.wpj-hover .nav-dd-menu {
  opacity: 1;
  visibility: visible;
}
/* Expedition pages' inline critical CSS re-centres the panel at >=1241px with
   `.nav-dd.open .nav-dd-menu, .nav-dd:hover .nav-dd-menu { transform:
   translate(-50%, 0) }` — three classes of specificity, which beats the base
   rule's `transform: none` above. On a full-width fixed panel that shifted the
   whole menu half a viewport left, putting the Africa, Asia and Americas
   columns off-screen on every desktop wider than 1240px. Match the inline
   selectors (including bare :hover) at equal specificity; this file loads
   later, so it wins the tie. */
@media (min-width: 1241px) {
  .nav-dd .nav-dd-menu,
  .nav-dd.open .nav-dd-menu,
  .nav-dd.wpj-hover .nav-dd-menu,
  .nav-dd:hover .nav-dd-menu {
    left: 0;
    right: 0;
    transform: none;
  }
}
.nav-dd-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 28px;
  max-width: 1320px;
  margin: 0 auto;
}
.nav-dd-col { min-width: 0; }
.nav-dd-heading {
  display: block;
  font-family: var(--font-body);
  font-size: .625rem !important;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold) !important;
  padding-bottom: 9px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--wpj-hair-30);
}
.nav-dd-col a:not(.nav-dd-heading) {
  display: block;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--off-white);
  padding: 3.5px 0;
  transition: color .2s ease;
}
.nav-dd-col a:not(.nav-dd-heading):hover { color: var(--gold-light); }

/* ==========================================================================
   2. FLOATING "MESSAGE US" CTA  (every page except /inquire/)
   Markup is injected by js/inquire-cta.js; href stays /inquire/?dest=<slug>
   so this button keeps producing tracked Leads.
   ========================================================================== */

.wpj-msg-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  text-decoration: none;
  background: rgba(17, 17, 17, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--wpj-hair-55);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .45s ease, transform .45s ease, border-color .25s ease;
}
.wpj-msg-cta.wpj-on { opacity: 1; transform: none; pointer-events: auto; }
.wpj-msg-cta:hover { border-color: var(--gold); }
.wpj-msg-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.wpj-msg-icon svg { width: 17px; height: 17px; fill: var(--gold); display: block; }
.wpj-msg-lines { display: block; line-height: 1.25; }
.wpj-msg-title {
  display: block;
  font-family: var(--font-body);
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.wpj-msg-sub {
  display: block;
  font-family: var(--font-body);
  font-size: .719rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: rgba(232, 224, 212, .8);
  margin-top: 3px;
}
@media (max-width: 640px) {
  /* full-width bar: on phones this is the primary persistent action */
  .wpj-msg-cta {
    left: 0; right: 0; bottom: 0;
    justify-content: center;
    border-left: none; border-right: none; border-bottom: none;
    padding: 13px 16px calc(13px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .wpj-msg-cta { transition: none; }
}

/* ==========================================================================
   3. FOOTER  (shared) — social icon circles + italic Playfair tagline
   ========================================================================== */

.footer {
  background: var(--wpj-footer);
  border-top: 1px solid rgba(196, 148, 74, .22);
  padding: 56px 32px 44px;
  text-align: center;
}
.footer-logo {
  /* Declared in full rather than layered: /inquire/'s own CSS never makes this
     a flex container, so a bare justify-content did nothing there and the
     compass sat on the wordmark's baseline, touching the text. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.footer-logo svg { width: 26px; height: 26px; flex: 0 0 auto; }
.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 26px 0 24px;
}
.footer-social a {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 224, 212, .3);
  border-radius: 50%;
  transition: border-color .25s ease;
}
.footer-social a:hover { border-color: var(--gold); }
.footer-social svg {
  width: 21px;
  height: 21px;
  fill: #E8E0D4;
  transition: fill .25s ease;
}
.footer-social a:hover svg { fill: var(--gold); }
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  /* One line on anything wider than a small phone: the sentence is 52
     characters, so the old 40ch max-width forced a wrap at every screen size. */
  font-size: .95rem;
  margin: 0 auto 18px;
  max-width: none;
}
.footer-legal, .footer-links { margin: 0 0 14px; }
.footer-legal a, .footer-links a {
  font-family: var(--font-body);
  font-size: .8125rem !important;
  color: var(--gold-light) !important;
  margin: 0 9px !important;
  text-decoration: none;
}
.footer-legal a:hover, .footer-links a:hover { color: var(--gold) !important; }
.footer-copy { font-size: .75rem; }   /* colour set in the accessibility pass */

/* ==========================================================================
   4. CTA BAND contact row  (shared: home, about, expedition pages)
   envelope | 1x24px divider | WhatsApp — all gold, 17px, 20px icons
   ========================================================================== */

.cta-contact-row, .contact-options {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin: 30px 0 34px;
}
.cta-contact-link, .contact-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--gold);
  text-decoration: none;
  transition: color .25s ease;
}
.cta-contact-link:hover, .contact-option:hover { color: var(--gold-light); }
.cta-contact-link svg, .contact-option svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
}
.cta-contact-link svg [fill="none"], .contact-option svg [fill="none"] { fill: none; }
.cta-contact-sep, .contact-separator {
  width: 1px;
  height: 24px;
  background: var(--wpj-div);
  display: inline-block;
}

/* ==========================================================================
   5. HOME
   ========================================================================== */

/* ---- 5a. Hero: single image, Ken Burns, darker scrim, readable eyebrow ---- */
.hero { height: calc(100vh - 68px); min-height: 560px; }
/* The design calls for one still image, not the crossfade. Keep the second
   slide in the DOM (it is a real <picture> another page may reference) but stop
   it painting, and neutralise the JS slideshow's .active toggling. */
.hero .hero-slide { opacity: 1; transition: none; }
.hero .hero-slide ~ .hero-slide { display: none; }
.hero .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .hero-slide {
  position: absolute;
  inset: -5%;
  width: auto;
  height: auto;
  overflow: hidden;
}
.hero .hero-slide picture, .hero .hero-slide img { height: 100%; }
.hero .hero-slide img {
  animation: wpjKenBurns 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes wpjKenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.1) translate(-1.2%, 1.4%); }
}
.hero-overlay {
  background: linear-gradient(180deg,
    rgba(20, 19, 17, .68) 0%,
    rgba(20, 19, 17, .42) 45%,
    #1A1A1A 98%);
}
.hero-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--gold-light);
  /* readable over the bright sky in the upper third of the photo */
  text-shadow: 0 1px 3px rgba(17, 17, 17, .9), 0 2px 18px rgba(17, 17, 17, .75);
  margin-bottom: 26px;
}
.hero-title {
  font-size: clamp(2.75rem, 6.4vw, 4.875rem);
  line-height: 1.08;
  margin-bottom: 24px;
}
.hero-subtitle { font-size: 1.1875rem; font-weight: 300; }
.wp-hero-reply {
  font-size: .78rem;
  color: rgba(232, 224, 212, .75);
  margin-top: 14px;
}
/* Explore indicator: label over a pulsing 1px gold line */
.scroll-indicator span {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.scroll-indicator svg { display: none; }
.scroll-indicator::after {
  content: '';
  display: block;
  width: 1px;
  height: 44px;
  margin: 12px auto 0;
  background: var(--gold);
  transform-origin: top;
  animation: wpjPulse 2.2s ease-in-out infinite;
}
@keyframes wpjPulse {
  0%, 100% { transform: scaleY(.3); opacity: .55; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* ---- 5b. The Waypoint Difference — text TOP-aligned against the photo ---- */
.philosophy { padding: 0; }
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 0;
  align-items: stretch;
  max-width: none;
}
.philosophy-content {
  align-self: start;                 /* top-aligned, not vertically centred */
  padding: clamp(60px, 6vw, 90px) clamp(32px, 5vw, 88px);
}
.philosophy .gold-rule { width: 64px; height: 2px; background: var(--gold-dark); }
.philosophy-title { font-size: clamp(1.875rem, 3vw, 2.625rem); margin-bottom: 0; }
.philosophy .gold-rule { margin: 20px 0 28px; }
.philosophy-text { font-size: 1.03rem; line-height: 1.72; }
.philosophy-image { min-height: 480px; }
.philosophy-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 5c. Expeditions grid + cards ----
   Restructured from "text over a full-bleed photo" to "photo on top, dark body
   below" using only CSS, so all 56 card markup blocks stay untouched. */
.expeditions { padding: clamp(70px, 8vw, 120px) 32px; }
.expeditions-header { margin-bottom: 56px; }
.expeditions-title { font-size: clamp(2.125rem, 3.6vw, 3rem); }
.continent-heading {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: var(--font-display);
  font-size: 1.8125rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 26px;
}
.continent-heading::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--wpj-hair-30);
}
.expeditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 26px;
}

.expedition-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;               /* was 5/7 — the body now sets the height */
  background: var(--wpj-card);
  border: 1px solid var(--wpj-hair-16);
  overflow: hidden;
  transition: border-color .3s ease;
}
.expedition-card:hover { border-color: var(--wpj-hair-55); }
/* the featured Socotra card carries a brighter border */
.expedition-card[data-card="socotra"] { border-color: rgba(196, 148, 74, .6); }

.expedition-card picture {
  display: block;
  position: relative;
  flex: 0 0 auto;
  height: 225px;
  background: var(--wpj-img-fallback);
}
.expedition-card-img {
  position: static;
  width: 100%;
  height: 225px;
  object-fit: cover;
}
.expedition-card:hover .expedition-card-img { transform: none; }
/* the old full-card scrim becomes a short fade from the photo into the body */
.expedition-card-overlay {
  position: absolute;
  top: 165px;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0), var(--wpj-card));
  z-index: 1;
  pointer-events: none;
}
.expedition-card:hover .expedition-card-overlay { background: linear-gradient(to bottom, rgba(22, 22, 22, 0), var(--wpj-card)); }

.expedition-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  padding: 26px;
}
.expedition-card-tag {
  font-size: .625rem;
  letter-spacing: .26em;
  color: var(--gold);
  text-shadow: none;                /* no longer sits on a photo */
  margin: 0;
}
.expedition-card-name {
  font-size: 1.625rem;
  color: var(--white);
  text-shadow: none;
  margin: 0;
}
.expedition-card-subtitle {
  font-size: 1rem;
  font-style: italic;
  color: var(--gold-light);
  opacity: 1;
  margin: 0;
}
.expedition-card-desc {
  font-size: .906rem;
  line-height: 1.62;
  color: var(--off-white);
  flex: 1 1 auto;
  margin: 0;
  /* the dark body has room for the full blurb, but cap runaway copy */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.expedition-card-details {
  font-size: .781rem;
  font-weight: 600;
  color: var(--off-white);
  opacity: 1;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(196, 148, 74, .22);
}
.expedition-card-details .separator { margin: 0 7px; }   /* colour set in the accessibility pass */
.expedition-card-link {
  font-size: .688rem;
  letter-spacing: .2em;
  color: var(--gold);
  margin-top: 2px;
}

/* ---- 5d. Stats band ---- */
.stats { padding: clamp(70px, 8vw, 110px) 32px; }
.stats-overlay { background: rgba(17, 17, 17, .81); }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  color: var(--gold);
}
.stat-label {
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--off-white);
}

/* ---- 5e. How It Works (stays on sand) ---- */
.how-it-works { padding: clamp(70px, 8vw, 110px) 32px; }
.how-it-works .section-label { color: var(--gold-dark) !important; }
.how-it-works .gold-rule { background: var(--gold-dark); }
.hiw-number {
  font-family: var(--font-display);
  font-size: 3.25rem;
  color: var(--gold-dark);
  opacity: .85;
  line-height: 1;
}
/* 44x1px rule between the numeral and the step title; the steps are a centred
   stack, so the rule has to be centred too rather than flush left. */
.hiw-step-title::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold-dark);
  margin: 16px auto 14px;
}
.hiw-step-title { font-family: var(--font-display); font-size: 1.5rem; }
.hiw-step-text { font-size: .97rem; line-height: 1.7; }

/* ---- 5f. Custom expedition panel ---- */
.custom-expedition { padding: clamp(70px, 8vw, 110px) 32px; }
.custom-expedition-inner {
  max-width: 1180px;
  background: var(--wpj-card);
  border: 1px solid var(--wpj-hair-30);
  padding: clamp(40px, 5vw, 72px);
}
.custom-expedition-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  text-align: left;
}
.wpj-custom-copy .gold-rule { margin: 20px 0 26px; }
.custom-expedition-title { margin-bottom: 0; }
.wpj-custom-side { align-self: center; }
/* one inclusion per row, as in the mock */
.custom-expedition-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: none;
  margin: 0 0 32px;
}
/* homepage.css stacks these vertically for the old 4-across strip; the redesign
   puts the icon beside its label, one inclusion per row. */
.custom-feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
}
.custom-feature-icon { flex: 0 0 auto; display: flex; opacity: 1; }
.custom-feature-icon svg { width: 20px; height: 20px; stroke: var(--gold); }
.custom-feature-text { font-size: 1rem; color: var(--off-white); opacity: 1; letter-spacing: .01em; }
.custom-expedition-btn {
  display: inline-block;
  border: 1px solid var(--gold);
  transition: background .25s ease, color .25s ease;
}
.custom-expedition-btn:hover { background: transparent; color: var(--gold); }

/* ---- 5g. Testimonials ---- */
/* Keeps --charcoal, not --charcoal-deep. The homepage alternates two dark tones
   as well as dark-against-sand: hero 1A / expeditions 11 / stats 1A / custom 11
   / testimonials 1A / contact 11. Deepening this one band put two identical 11
   sections back to back and flattened that rhythm. */
.testimonial { background: var(--charcoal); padding: clamp(70px, 8vw, 110px) 32px; }
.testimonial-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1875rem, 2vw, 1.4375rem);
  line-height: 1.6;
}
/* The quote sits inside inline curly quotes. homepage.css renders the opening
   mark as a 4rem block ornament above the text; the redesign wants it inline
   and matched by a closing mark, so both are restated here. */
.testimonial-quote::before,
.testimonial-quote::after {
  display: inline;
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}
.testimonial-quote::before { content: '\201C'; }
.testimonial-quote::after  { content: '\201D'; }
.testimonial-attribution {
  font-family: var(--font-body);
  font-style: normal;
  font-size: .781rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.testimonial-destination { font-size: .8125rem; }   /* colour set in the accessibility pass */
.testimonial-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: none;
  color: var(--gold);
  display: grid;
  place-items: center;
  transition: background .25s ease, color .25s ease;
}
.testimonial-arrow:hover { background: var(--gold); color: var(--charcoal); }
.testimonial-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(245, 237, 224, .25);
  border: none;
}
.testimonial-dot.active { background: var(--gold); }

/* ---- 5h. FAQ (stays on sand) ---- */
.faq { padding: clamp(70px, 8vw, 110px) 32px; }
.faq-inner { max-width: 760px; }
.faq .section-label { color: var(--gold-dark) !important; }
.faq .gold-rule { background: var(--gold-dark); }
.faq-item { border-top: 1px solid rgba(138, 100, 48, .3); border-bottom: none; }  /* homepage.css draws its own bottom rule; without this every separator was a 2px double line */
.faq-item:last-child { border-bottom: 1px solid rgba(138, 100, 48, .3); }
/* homepage.css opens the accordion by raising a fixed 300px cap, which clips
   the longer answers on narrow phones once they wrap past ~14 lines. Raise the
   ceiling; the transition still animates, it just has more headroom. */
.faq-item.active .faq-answer { max-height: 1600px; }
.faq-question {
  font-size: 1.03rem;
  font-weight: 500;
  padding: 22px 44px 22px 0;
  position: relative;
}
.faq-question::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 300;
  color: var(--gold-dark);
  line-height: 1;
}
.faq-item.active .faq-question::after { content: '\2212'; }
.faq-answer-inner { font-size: .938rem; line-height: 1.72; padding-bottom: 22px; }

/* ---- 5i. CTA band ---- */
.cta { border-top: 1px solid var(--wpj-hair-30); padding: clamp(70px, 8vw, 110px) 32px; }
/* The old band opened with a 1px x 80px vertical gold descender pinned to its
   top centre. The redesign opens it with a hairline across the full width
   instead, and the two together read as a stray artifact hanging into the
   band — so the descender goes. */
.cta::before { display: none; }
.cta-title { font-family: var(--font-display); }
.cta-button {
  display: inline-block;
  padding: 18px 44px;
  border: 1px solid var(--gold);
  transition: background .25s ease, color .25s ease;
}
.cta-button:hover { background: transparent; color: var(--gold); }

/* ==========================================================================
   6. EXPEDITION PAGES
   ========================================================================== */

/* ---- 6a. Sub-nav: sticky directly under the main bar ---- */
.wpj-subnav {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 900;
  height: 46px;
  background: rgba(17, 17, 17, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(232, 224, 212, .2);
}
.wpj-subnav-inner {
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.wpj-subnav a {
  font-family: var(--font-body);
  font-size: .656rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--off-white);
  text-decoration: none;
  transition: color .2s ease;
  white-space: nowrap;
}
.wpj-subnav a:hover { color: var(--gold-light); }
.wpj-subnav .wpj-subnav-book { margin-left: auto; color: var(--gold); }
@media (max-width: 560px) {
  .wpj-subnav-inner { gap: 16px; padding: 0 16px; }
  .wpj-subnav a { font-size: .60rem; letter-spacing: .12em; }
}

/* The main bar (68px) and the sub-nav (46px) are both fixed, so in-page
   anchors have to stop clear of 114px. Most expedition pages rely on native
   anchor jumps with html{scroll-behavior:smooth}, which scroll-margin-top
   handles; the twelve pages that also run their own JS offset were taught to
   add the sub-nav's height. */
body.wpj-expedition :target,
body.wpj-expedition #overview,
body.wpj-expedition #highlights,
body.wpj-expedition #itinerary,
body.wpj-expedition #details,
body.wpj-expedition #faq,
body.wpj-expedition #book,
body.wpj-expedition #security,
body.wpj-expedition #related,
body.wpj-expedition #wpj-content { scroll-margin-top: 122px; }
@media (max-width: 640px) {
  body.wpj-expedition :target,
  body.wpj-expedition #overview,
  body.wpj-expedition #highlights,
  body.wpj-expedition #itinerary,
  body.wpj-expedition #details,
  body.wpj-expedition #faq,
  body.wpj-expedition #book,
  body.wpj-expedition #security,
  body.wpj-expedition #related,
  body.wpj-expedition #wpj-content { scroll-margin-top: 114px; }
}

/* Both bars are fixed, so the hero starts below them rather than behind. */
body.wpj-expedition #hero {
  margin-top: 114px;
  height: calc(100vh - 114px);
  min-height: 520px;
}
@media (max-width: 640px) {
  body.wpj-expedition #hero { margin-top: 106px; height: calc(100vh - 106px); min-height: 440px; }
}
/* /syria-expedition/getting-there/ is the one expedition page with no sub-nav,
   so its chrome is the 68px main bar alone. */
body.wpj-no-subnav #hero { margin-top: 68px; height: calc(100vh - 68px); }
body.wpj-no-subnav #overview, body.wpj-no-subnav #wpj-content { scroll-margin-top: 76px; }
@media (max-width: 640px) {
  body.wpj-no-subnav #hero { margin-top: 60px; height: calc(100vh - 60px); }
}

/* ---- 6b. Hero: darker scrim + simplified hierarchy ----
   MUST stay scoped to body.wpj-expedition. The homepage's hero is
   <section class="hero" id="hero">, so a bare `#hero .hero-overlay` also
   matched it — and because an id outranks the homepage's own `.hero-overlay`
   rule, the homepage silently rendered this darker expedition scrim (.72/.58)
   instead of its lighter one (.68/.42) no matter what order the rules were in. */
body.wpj-expedition #hero .hero-overlay {
  background: linear-gradient(180deg,
    rgba(20, 19, 17, .72) 0%,
    rgba(20, 19, 17, .58) 50%,
    #1A1A1A 100%);
}
body.wpj-expedition .hero-title { font-size: clamp(3.5rem, 9vw, 6.875rem); line-height: 1.02; }
body.wpj-expedition .hero-eyebrow {
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(17, 17, 17, .9), 0 2px 18px rgba(17, 17, 17, .75);
}
body.wpj-expedition .hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-light);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  letter-spacing: 0;
}
/* The old bordered day-count badge is replaced by the meta line, which carries
   the same duration (plus any extra clause the badge held, such as the eclipse
   date window on Egypt 2027 or Madagascar's optional extension). */
body.wpj-expedition .hero-dates { display: none; }

/* The tagline is the page's descriptive hook and is DIFFERENT copy from the
   short italic subtitle above it — "Across the Hindu Kush — Bamiyan, the
   Band-e-Amir Lakes & the Blue Mosque" against "The Crossroads of Asia".
   The design bundle omits it because Socotra's happens to restate its day
   count, but on the other 54 pages it is unique editorial copy, so it stays. */
body.wpj-expedition .hero-tagline {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.55;
  color: rgba(232, 224, 212, .82);
  text-transform: none;
  max-width: 34em;
  margin: 14px auto 0;
  border: none;
  padding: 0;
}
/* 56x1px gold rule, above the meta line so the order reads
   title -> italic subtitle -> tagline -> rule -> facts -> action */
.wpj-hero-meta::before {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin: 26px auto 24px;
}
.wpj-hero-meta {
  font-family: var(--font-body);
  font-size: .781rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--off-white);
  margin: 0 0 26px;
}
.wpj-hero-meta .wpj-meta-days { color: var(--gold); }
.wpj-hero-meta .wpj-meta-sep { margin: 0 8px; }   /* colour set in the accessibility pass */
/* one gold button beside a quiet text link */
.wpj-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
}
body.wpj-expedition .hero-cta.wp-hero-inquire {
  margin: 0;
  padding: 17px 38px;
  font-size: .8125rem;
  letter-spacing: .16em;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--charcoal);
}
body.wpj-expedition .hero-cta.wp-hero-inquire:hover {
  background: transparent;
  color: var(--gold);
}
/* the "View Itinerary" button becomes a hairline text link */
body.wpj-expedition a.hero-cta:not(.wp-hero-inquire) {
  margin: 0;
  border: none;   /* padding set in the accessibility pass (tap target) */
  border-bottom: 1px solid var(--wpj-hair-55);
  background: none;
  font-size: .719rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--off-white);
  transition: color .2s ease, border-color .2s ease;
}
body.wpj-expedition a.hero-cta:not(.wp-hero-inquire):hover {
  color: var(--gold);
  border-color: var(--gold);
  background: none;
}
body.wpj-expedition .wp-hero-reply {
  font-size: .781rem;
  color: rgba(232, 224, 212, .7);
  margin-top: 20px;
}
/* The old "Scroll" cue is retired on expedition pages. The design's expedition
   hero has no scroll indicator — the sticky sub-nav directly beneath the bar
   already says there is more below, and only the HOME hero keeps a cue
   ("EXPLORE" over a pulsing gold line).
   It also actively collided: the cue is pinned to the hero's bottom edge, and
   with the tagline restored the hero stack is taller, so on New Zealand — whose
   hero also carries the route switcher — "SCROLL" was printing on top of the
   "Plan This Expedition" button at a 760px-tall viewport. */
body.wpj-expedition .hero-scroll { display: none; }

/* ---- 6b-bis. "What's Included" details grid ----
   Each cell is label + value in a flex row, so the value's start position
   drifted with the label's length ("Duration" vs "Included Experiences") and
   neighbouring cells never lined up. A fixed label column aligns every value
   in both grid columns; ≤640px expedition.css stacks the grid to one column
   and the same 168px track still reads correctly. */
body.wpj-expedition .detail-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 4px 20px;
  align-items: start;
}
body.wpj-expedition .detail-label { min-width: 0; padding-top: 2px; }
@media (max-width: 400px) {
  /* one column on the narrowest phones: label above value */
  body.wpj-expedition .detail-row { grid-template-columns: 1fr; gap: 4px 0; }
}

/* ---- 6c. Investment band + safety card ---- */
/* Spec: the figure is white and only the currency is gold, which also reads
   better than all-gold over the photographic background. */
.pricing-amount { color: var(--white); }
.pricing-amount .price-cur { color: var(--gold); font-size: .3em; opacity: 1; }
.pricing-note { font-size: .844rem; color: rgba(232, 224, 212, .7); }
.book-cta {
  display: inline-block;
  border: 1px solid var(--gold);
  transition: background .25s ease, color .25s ease;
}
.book-cta:hover { background: transparent; color: var(--gold); }
.security-inner {
  background: var(--wpj-card);
  border: 1px solid var(--wpj-hair-30);
  text-align: left;
  padding: 30px 32px;
}

/* ---- 6d. Cross-sell cards ---- */
.related-card, .related-expeditions .related-card { border: 1px solid var(--wpj-hair-16); }
.related-card:hover { border-color: var(--wpj-hair-55); }

@media (prefers-reduced-motion: reduce) {
  .hero .hero-slide img { animation: none; }
  .scroll-indicator::after { animation: none; transform: scaleY(1); }
}

/* ==========================================================================
   7. INQUIRE  (presentational only — field names, ids, honeypot,
      ?dest= prefill, validation and Lead wiring are all untouched)
   ========================================================================== */

/* Centred header above the two columns. It now carries the top offset that
   clears the fixed nav, since it sits above .inq (which previously owned it). */
.wpj-inq-head {
  text-align: center;
  margin: 0 auto clamp(30px, 3.5vw, 46px);
  padding-top: 140px;
}
body.wpj-on-inquire .inq { padding-top: 0; }
@media (max-width: 900px) {
  .wpj-inq-head { padding-top: 92px; }
  body.wpj-on-inquire .inq { padding-top: 0; }
}
body.wpj-on-inquire .intro-eyebrow,
body.wpj-on-inquire #introEyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 16px;
}
body.wpj-on-inquire .intro-title {
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 4.6vw, 3.625rem);
  line-height: 1.1;
}

/* three gold check bullets, stacked */
body.wpj-on-inquire .proof {
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
  margin: 22px 0;
  padding: 0;
}
body.wpj-on-inquire .proof li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: .97rem;
  color: var(--off-white);
}
/* replaces the old 6px rotated gold square marker with a gold check */
body.wpj-on-inquire .proof li::before {
  content: '\2713';
  flex: 0 0 auto;
  width: auto;
  height: auto;
  background: none;
  transform: none;
  color: var(--gold);
  font-size: .95em;
}

/* hero photo in a thin gold frame (square corners, per the design tokens) */
body.wpj-on-inquire .intro-hero {
  border: 1px solid rgba(196, 148, 74, .35);
  padding: 10px;
  background: transparent;
  border-radius: 0;
  aspect-ratio: auto;
}
body.wpj-on-inquire .intro-hero img { display: block; width: 100%; height: auto; }

/* promise: two lines, the second italic gold */
body.wpj-on-inquire .intro-hook {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--white);
  line-height: 1.45;
}
body.wpj-on-inquire .intro-hook .wpj-reply {
  display: block;
  font-style: italic;
  color: var(--gold-light);
}

body.wpj-on-inquire .proof li { font-size: .97rem; }
/* The candid safety note loses its teal left border: teal is not part of the
   redesign's charcoal/gold/sand accent set, and it read as a stray colour
   against the gold-accented form card beside it. */
body.wpj-on-inquire .safety {
  font-size: .906rem;
  color: rgba(232, 224, 212, .8);
  opacity: 1;
  border-left: none;
  padding: 0;
}
body.wpj-on-inquire .rating { color: var(--gold); letter-spacing: .14em; }

/* form card: 2px gold top accent on a bordered dark card */
body.wpj-on-inquire .form-card {
  background: var(--wpj-card);
  border: 1px solid var(--wpj-hair-30);
  border-top: 2px solid var(--gold);
}
body.wpj-on-inquire .form-card label {
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--off-white);
}
body.wpj-on-inquire .form-card .req { color: var(--gold); }
body.wpj-on-inquire .form-card input:not([type="hidden"]),
body.wpj-on-inquire .form-card select,
body.wpj-on-inquire .form-card textarea {
  background: var(--wpj-input);
  border: 1px solid rgba(196, 148, 74, .32);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: .938rem;
  font-weight: 300;
  color: var(--sand);
  border-radius: 0;
}
body.wpj-on-inquire .form-card input:focus,
body.wpj-on-inquire .form-card select:focus,
body.wpj-on-inquire .form-card textarea:focus {
  border-color: var(--gold);
  outline: none;
}
body.wpj-on-inquire .form-card select option,
body.wpj-on-inquire .form-card select optgroup { background: var(--wpj-card); color: var(--sand); }

/* The honeypot must stay off-screen but still submittable — never display:none. */
body.wpj-on-inquire .wp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* collapsible optional pane: gold circled +/- to the LEFT of the label */
body.wpj-on-inquire details.more { border: none; margin: 4px 0 18px; }
body.wpj-on-inquire details.more > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);   /* padding set in the accessibility pass */
  font-size: .719rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
body.wpj-on-inquire details.more > summary::-webkit-details-marker { display: none; }
body.wpj-on-inquire details.more > summary::marker { content: ''; }
body.wpj-on-inquire details.more > summary::before {
  content: '+';
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(196, 148, 74, .12);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}
body.wpj-on-inquire details.more[open] > summary::before { content: '\2212'; }
body.wpj-on-inquire details.more > summary span { letter-spacing: .06em; text-transform: none; }   /* colour + opacity set in the accessibility pass */
body.wpj-on-inquire .more-inner { padding-top: 16px; }

body.wpj-on-inquire .submit-btn {
  width: 100%;
  padding: 17px 20px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
body.wpj-on-inquire .submit-btn:hover:not(:disabled) { background: transparent; color: var(--gold); }
body.wpj-on-inquire .consent { font-size: .781rem; color: rgba(232, 224, 212, .7); }
body.wpj-on-inquire .consent a { color: var(--gold-light); }

/* the stars/"we reply" line above Submit is redundant with the promise column */
body.wpj-on-inquire .trust-row { display: none; }

/* "Prefer not to fill in a form?" + two stretched half-width buttons */
body.wpj-on-inquire .quick { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--wpj-hair-16); }
body.wpj-on-inquire .quick-label { text-align: center; font-size: .906rem; color: rgba(232, 224, 212, .8); margin-bottom: 14px; }
body.wpj-on-inquire .quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.wpj-on-inquire .quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 14px;
  font-family: var(--font-body);
  font-size: .781rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  border: 1px solid rgba(196, 148, 74, .55);
  color: var(--sand);
  background: transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
body.wpj-on-inquire .quick-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
body.wpj-on-inquire .quick-btn:not(.wa) svg { fill: none; stroke: currentColor; }
body.wpj-on-inquire .quick-btn:not(.wa):hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); }
body.wpj-on-inquire .quick-btn.wa {
  background: var(--wpj-wa);
  border-color: var(--wpj-wa);
  color: #fff;
}
body.wpj-on-inquire .quick-btn.wa svg { fill: #fff; }
body.wpj-on-inquire .quick-btn.wa:hover { background: var(--wpj-wa-hover); border-color: var(--wpj-wa-hover); color: #fff; }
/* The pair stays side-by-side on ordinary phones (390px still gives each button
   ~146px, enough for the icon + label) and only stacks on the narrowest
   screens, where "Email Us" would otherwise overflow its half. */
@media (max-width: 359px) {
  body.wpj-on-inquire .quick-row { grid-template-columns: 1fr; }
}

/* thank-you state keeps the same button pair */
body.wpj-on-inquire .thanks h2 { font-family: var(--font-display); }
body.wpj-on-inquire .thanks h2 em, body.wpj-on-inquire .thanks .wpj-ty-em {
  font-style: italic;
  color: var(--gold-light);
}
body.wpj-on-inquire .ty-sooner { text-align: center; margin: 22px 0 14px; color: rgba(232, 224, 212, .8); }

/* ==========================================================================
   8. ABOUT — framed portraits, quote blocks, no index numerals
   ========================================================================== */

body.wpj-on-about .founder-number { display: none; }
/* The portraits are full-height column images inside an overflow:hidden
   wrapper, so a border on the <img> would be clipped away. Framing the column
   puts the hairline where it reads — between the photo and the bio. */
body.wpj-on-about .founder-photo-col {
  border: 1px solid rgba(196, 148, 74, .25);
}
body.wpj-on-about .founder-photo-col img { object-position: top; }
body.wpj-on-about .founder-name { font-family: var(--font-display); }
body.wpj-on-about .founder-title {
  font-family: var(--font-body);
  font-size: .688rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
body.wpj-on-about .founder-bio { font-size: .969rem; line-height: 1.74; }
body.wpj-on-about .founder-moment {
  border-left: 2px solid var(--gold);
  padding-left: 22px;
  background: none;
}
body.wpj-on-about .founder-moment-label {
  font-family: var(--font-body);
  font-size: .656rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
body.wpj-on-about .founder-moment-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.094rem;
  line-height: 1.6;
}

/* ==========================================================================
   9. ACCESSIBILITY PASS
   Findings from the post-redesign audit. None of these change the visual
   design; they make it usable by keyboard and by thumb.
   ========================================================================== */

/* ---- 9a. Visible focus (WCAG 2.4.7) ----
   The restyled inputs signalled focus only by shifting their border colour,
   with outline:none — too weak for keyboard users, and invisible on the
   selects. Every interactive element now takes a gold focus ring. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
body.wpj-on-inquire .form-card input:focus-visible,
body.wpj-on-inquire .form-card select:focus-visible,
body.wpj-on-inquire .form-card textarea:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
/* on the sand bands the light gold ring would disappear */
body.wpj-expedition #overview a:focus-visible,
body.wpj-expedition #overview button:focus-visible,
.philosophy a:focus-visible,
.how-it-works a:focus-visible,
.faq a:focus-visible,
.faq button:focus-visible,
.faq-question:focus-visible {
  outline-color: var(--gold-dark);
}
/* keep the border cue as well as the ring */
body.wpj-on-inquire .form-card input:focus,
body.wpj-on-inquire .form-card select:focus,
body.wpj-on-inquire .form-card textarea:focus { border-color: var(--gold); }

/* ---- 9b. Touch target size (WCAG 2.5.8) ---- */
/* hamburger was 42x31 */
.hamburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
/* Carousel dots were 8x8. homepage.css already grows the hit area to a
   CENTRED 24x24 via top/left 50% + translate(-50%,-50%) on ::after; an earlier
   copy of that idea here used inset:-8px, which overrode the 50% offsets while
   homepage.css's translate survived — displacing the target 12px up-left off
   the dot it belonged to. The only thing this layer needs to add is the wider
   row gap, so adjacent 24px targets keep daylight between them. */
.testimonial-dots { gap: 18px; }
/* sub-nav links only filled their 16px text box inside a 46px bar */
.wpj-subnav a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 2px;
}
/* footer legal links were 14px high */
.footer-legal a, .footer-links a {
  display: inline-block;
  padding: 12px 4px;
}
/* CTA-band contact rows were 27px high */
.cta-contact-link, .contact-option { padding: 9px 2px; }
/* the optional-pane toggle was 38px */
body.wpj-on-inquire details.more > summary { padding: 10px 0; }
.nav-logo { padding: 6px 0; }
/* the hero's quiet "View Itinerary" text link was 25px high */
body.wpj-expedition a.hero-cta:not(.wp-hero-inquire) { padding: 11px 2px 12px; }

/* Three more, found by re-measuring with proper alpha compositing against the
   real backdrop rather than the nearest ancestor that happened to declare a
   colour. All three are pre-existing values — .detail-label and .day-date from
   css/expedition.css, .pricing-option-per from libya-expedition's inline style
   block (its only user) — that land just under AA at 11-12px, and all three are
   the smallest nudge that clears it:

     .detail-label       #8A6430 on the details-row tint rgb(238,231,218) = 4.32
                         -> #86612F = 4.54 (and 4.80 on plain --sand)
     .day-date           gold at .78 alpha on rgb(27,25,23)               = 4.40
                         -> .82 alpha
     .pricing-option-per --sand at .5 alpha on rgb(40,36,30)              = 4.43
                         -> .58 alpha

   --gold-dark itself is left alone: every other place it is used already
   clears AA, so darkening the token site-wide would buy nothing. */
.detail-label { color: #86612F; }
.day-date { color: rgba(196, 148, 74, 0.82); }
.pricing-option-per { color: rgba(245, 237, 224, 0.58); }

/* ---- 9c. Contrast (WCAG 1.4.3) ----
   Measured against the real rendered backgrounds. The design tokens specified
   a few values that fall just under AA at small sizes; these are the smallest
   nudges that clear it. */
/* Copyright and credit lines measured 1.9-3.7:1. Several pages also apply an
   opacity of .55 on top of the colour, so both have to be reset. The
   photography-credit line on 18 pages carried that .55 as an INLINE style,
   which no stylesheet can override — the inline opacity was removed there and
   the class below now governs it (.wpj-credit). */
.footer-copy, .wpj-credit {
  color: rgba(232, 224, 212, .72);
  opacity: 1;
}
/* the CC BY-SA attribution link was a 12px-high target */
.footer-copy a, .wpj-credit a { display: inline-block; padding: 10px 3px; }
/* tagline: .75 alpha measured 4.18:1 at 17px */
.footer-tagline { color: rgba(232, 224, 212, .86); opacity: 1; }
/* carousel trip line measured 3.69:1 at 13px (page CSS also sets opacity .6) */
.testimonial-destination { color: rgba(245, 237, 224, .88); opacity: 1; }
/* teal on sand is 3.33:1 — expedition FAQ eyebrows match the homepage's gold */
.faq-header-label, .faq .section-label { color: var(--gold-dark) !important; }
/* the "USD" suffix ships at opacity .5 (2.56:1). It appears inside three
   different price wrappers across the expedition pages. */
.pricing-amount .price-cur,
.pricing-card-amount .price-cur,
.pricing-option-price .price-cur {
  color: var(--gold);
  opacity: 1;
}
/* "(optional)" beside the pane label measured 3.72:1 */
body.wpj-on-inquire details.more > summary span { opacity: 1; color: rgba(232, 224, 212, .82); }
/* decorative middots between duration and price */
.expedition-card-details .separator { color: rgba(196, 148, 74, .8); }
.wpj-hero-meta .wpj-meta-sep { color: rgba(196, 148, 74, .8); }

/* ---- 9c-bis. Reduced motion also means reduced scrolling ----
   Every page sets html{scroll-behavior:smooth}; only /inquire/ turned it off
   under prefers-reduced-motion. The homepage is ~20,000px tall, so an anchor
   jump to the FAQ was a very long animated scroll for someone who asked for
   none. (The two JS scroll handlers were given the same guard.) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* ---- 9d. Keep a way out on pages that have no hamburger ----
   privacy/ and terms/ hide .nav-links below 900px but ship no hamburger and no
   mobile pane, so on a phone their header collapsed to just the logo — and they
   are linked from every footer on the site. They carry only four nav items,
   which fit once compacted, so where there is genuinely no hamburger the links
   stay visible. :has() is well supported; browsers without it simply keep the
   old behaviour, so this can only improve things. */
.nav:not(:has(.hamburger)) .nav-links {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 6px;
}
@media (max-width: 760px) {
  /* 760px, not 640: privacy/terms/404 hide .nav-links below 760, so the forced
     display:flex above needs its compaction over that whole range — at 641-760
     the links were rendering at full desktop size in a bar that had no room. */
  .nav:not(:has(.hamburger)) { height: auto; min-height: 60px; padding: 10px max(16px, calc((100% - 1320px) / 2)); }
  .nav:not(:has(.hamburger)) .nav-links { gap: 14px; row-gap: 8px; }
  .nav:not(:has(.hamburger)) .nav-links a { font-size: .62rem; letter-spacing: .1em; }
  /* Making the links visible was only half the fix: as inline anchors at this
     size their boxes were 11px tall, under the 24px WCAG 2.5.8 minimum, so the
     way out of the page existed but was hard to hit. The button already had
     padding; these three did not. */
  .nav:not(:has(.hamburger)) .nav-links > li > a:not(.nav-cta-btn) {
    display: inline-block;
    padding: 7px 0;
  }
  .nav:not(:has(.hamburger)) .nav-cta-btn { padding: 9px 14px; font-size: .6rem; letter-spacing: .1em; }
  /* the wordmark stays on one line and the LINKS wrap instead — a broken
     "WAYPOINT / JOURNEYS" reads worse than a second row of links */
  .nav:not(:has(.hamburger)) .nav-logo-text {
    font-size: .62rem;
    letter-spacing: .22em;
    white-space: nowrap;
  }
  .nav:not(:has(.hamburger)) .nav-logo { flex: 0 0 auto; }
}
@media (max-width: 340px) {
  /* at the very narrowest, drop the wordmark and keep the compass + the links */
  .nav:not(:has(.hamburger)) .nav-logo-text { display: none; }
}

/* ---- 9d-bis. Hero line breaks by viewport ----
   The hero headline and eyebrow carry two sets of <br>: .wpj-brd is the
   desktop break (after "Ends,"), .wpj-brm the phone pair (after "Map" and
   after "the"), so each width gets deliberately balanced lines instead of
   whatever the wrap happens to produce. */
.wpj-brm { display: none; }
@media (max-width: 640px) {
  .wpj-brm { display: inline; }
  .wpj-brd { display: none; }
}
@media (max-width: 359px) {
  /* the clamp's 2.8rem floor leaves "Journey Begins" wider than a 320px
     viewport, fragmenting the three deliberate lines into five */
  .hero .hero-title { font-size: 2.35rem; }
}

/* ---- 9e. Cross-page anchor landings ----
   Arriving at /#cont-asia from another page's mega menu is a native browser
   jump with no JS offset, so the heading landed under the now-opaque 68px bar.
   (In-page clicks were already handled by homepage.js's own offset.) */
#philosophy, #expeditions, #stats, #how-it-works, #custom-expedition,
#testimonial, #faq, #contact,
#cont-africa, #cont-asia, #cont-americas, #cont-europe, #cont-oceania {
  scroll-margin-top: 88px;
}
@media (max-width: 640px) {
  #philosophy, #expeditions, #stats, #how-it-works, #custom-expedition,
  #testimonial, #faq, #contact,
  #cont-africa, #cont-asia, #cont-americas, #cont-europe, #cont-oceania {
    scroll-margin-top: 76px;
  }
}

/* ---- 9f. Skip link (WCAG 2.4.1 Bypass Blocks) ----
   The first item in the header is a mega menu holding ~60 destination links,
   all of them real anchors in the DOM. Without a bypass, a keyboard or switch
   user tabs the entire catalogue before reaching the page, on every page.
   The link sits off-screen until it takes focus — it is the first focusable
   element in the document, so it is what the first Tab lands on. */
.wpj-skip {
  position: fixed;
  top: -120px;
  left: 12px;
  z-index: 2000;                 /* above the fixed bar (1000) and sub-nav */
  padding: 15px 22px;
  background: var(--gold, #C4944A);
  color: #141311;
  font-family: var(--font-body, 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  transition: top .15s ease;
}
.wpj-skip:focus,
.wpj-skip:focus-visible {
  top: 12px;
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}
/* The target takes focus programmatically, so it must not draw a ring of its
   own or sit under the fixed bar when the browser scrolls to it. */
#wpj-content {
  outline: none;
  scroll-margin-top: 88px;
}
@media (max-width: 640px) {
  #wpj-content { scroll-margin-top: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .wpj-skip { transition: none; }
}

/* ==========================================================================
   10. PRINT
   The new fixed chrome must not be stamped onto the first printed page, and
   the hero has to collapse to normal flow (its height is viewport-relative and
   its image is a -5% overscan layer).
   ========================================================================== */
@media print {
  .wpj-skip,
  .wpj-subnav,
  .wpj-msg-cta,
  .nav-dd-menu { display: none !important; }
  body.wpj-has-msg-cta { padding-bottom: 0 !important; }
  body.wpj-expedition #hero {
    margin-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .hero { height: auto !important; min-height: 0 !important; }
  .hero .hero-slide { position: relative; inset: 0; }
  .hero .hero-slide img { animation: none !important; }
  .scroll-indicator::after { animation: none !important; }
  /* the gold-on-charcoal palette prints as mud */
  .wpj-hero-meta, .wpj-hero-meta .wpj-meta-days,
  body.wpj-expedition .hero-tagline { color: #000 !important; }
  /* homepage.css clears its own overlay for print; this layer's scrims must
     follow suit or the printed hero is a grey slab */
  .hero-overlay,
  body.wpj-expedition #hero .hero-overlay { background: none !important; }
  /* scroll-reveal content starts at opacity:0 and no observer runs in print
     rendering — without this the itinerary, the site's most printable thing,
     printed as blank sections */
  .reveal, .fade-in, .fade-in-left, .fade-in-right {
    opacity: 1 !important;
    transform: none !important;
  }
  .route-switch { display: none !important; }  /* NZ pills printed over the hero */
  .footer-social { display: none !important; }
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .nav-dd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; }
}
@media (max-width: 900px) {
  /* the mega menu is desktop-only; phones use the existing hamburger pane */
  .nav-dd-menu { display: none !important; }
  .philosophy-content { padding: clamp(44px, 7vw, 64px) 24px; }
  .philosophy-image { min-height: 320px; }
  .expeditions, .stats, .how-it-works, .custom-expedition, .testimonial, .faq, .cta { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  /* #navbar MUST shrink with .nav here. It did not, so on every expedition page
     on every phone the bar stayed 68px while .wpj-subnav moved to top:60px —
     the sub-nav sat 8px on top of the bar, and the hero's 106px offset
     (60 + 46) was 8px short. */
  .nav, #navbar { height: 60px; padding: 0 20px; }
  .nav.scrolled, #navbar.scrolled { padding: 0 20px; }
  .hero { height: calc(100vh - 60px); }
  .wpj-subnav { top: 60px; }
  .footer-social a { width: 48px; height: 48px; }
  .footer-social { gap: 14px; }
  .expedition-card picture, .expedition-card-img { height: 200px; }
  .expedition-card-overlay { top: 145px; }
  .expedition-card-content { padding: 22px; }
  .wpj-hero-actions { gap: 18px; }
  body.wpj-expedition .hero-cta.wp-hero-inquire { padding: 15px 28px; }
  /* No blanket bottom padding here: inquire-cta.js pads the body by the bar's
     measured height whenever the viewport is <=640px (from init, so the footer
     never shifts at reveal time). A static 64px here would double it. */
}
