/* ==========================================================================
   pages.css — from the Orbit screens package, unmodified except where noted.
   Loaded after style.css, so it may only add to the design system, never
   restyle it. Every selector here is either a new component or scoped to
   markup (svg.lucide, .nav__trigger, .hero--slider) that the original
   homepage never emits.
   ========================================================================== */

/* ==========================================================================
   THE WILD ORBIT — sub-page layer
   Loaded AFTER css/style.css. Adds only what the homepage did not need:
   mega menu, mobile drawer, page hero, breadcrumbs, archive layout,
   filters, pagination, CTA band, WhatsApp enquiry.

   Nothing here overrides an existing homepage rule, so the homepage can
   load this file too (it needs it for the new header).

   Contents
   --------
     A. Header additions (mega menu trigger, search)
     B. Desktop mega menu — left rail + featured card, River Mist glass
     C. Mobile off-canvas navigation
     D. Page hero + breadcrumbs
     E. Archive layout: filter rail + results
     F. Archive expedition card additions
     G. Pagination
     H. CTA band
     I. WhatsApp enquiry
     J. Responsive
   ========================================================================== */

:root {
  --mist:            #f8f3ed;
  --mist-glass:      rgba(248, 243, 237, 0.92);
  --ink:             #020a0b;
  --ink-soft:        rgba(2, 10, 11, 0.62);
  --ink-hairline:    rgba(2, 10, 11, 0.10);
  --gold-tint:       rgba(174, 124, 53, 0.10);

  /* Mega menu — deep forest green glass */
  --mega-glass:      rgba(11, 32, 25, 0.82);
  --mega-rail:       rgba(6, 21, 16, 0.55);
  --mega-hairline:   rgba(255, 255, 255, 0.09);
  --panel-shadow:    0 32px 70px -18px rgba(0, 0, 0, 0.65);
  --whatsapp:        #1f7a4d;
}

/* ==========================================================================
   A. HEADER ADDITIONS
   ========================================================================== */
.site-header { transition: background-color var(--transition); }
.site-header.has-open-mega { background-color: rgba(0, 10, 10, 0.94); }

.nav__item { position: relative; }

/* The trigger is a button so it works with keyboard and without JS the
   sibling link still navigates to the archive. */
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: var(--space-2);
  font-size: var(--fs-nav);
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.55;
  transition: opacity var(--transition), color var(--transition);
}
.nav__trigger:hover,
.nav__item.is-open .nav__trigger { opacity: 1; color: var(--color-gold-light); }
.nav__item--active .nav__trigger { opacity: 1; color: var(--color-gold); font-weight: var(--fw-bold); }

.nav__caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition);
}
.nav__item.is-open .nav__caret { transform: translateY(1px) rotate(225deg); }

.header-actions .btn--nav { white-space: nowrap; }

/* ==========================================================================
   B. DESKTOP MEGA MENU
   A floating River Mist panel over the dark page: blurred, hairline gold
   border, left category rail, link columns, one featured card.
   ========================================================================== */
.mega {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  z-index: 90;
  padding: var(--space-3) var(--gutter) var(--space-8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
  pointer-events: none;
}
.nav__item.is-open .mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.mega__panel {
  display: grid;
  grid-template-columns: minmax(190px, 232px) minmax(0, 1fr) minmax(280px, 344px);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  background-color: var(--mega-glass);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  border: 1px solid rgba(174, 124, 53, 0.42);
  box-shadow: var(--panel-shadow);
  color: var(--color-text-soft);
  overflow: hidden;
}

/* --- Left category rail --- */
.mega__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-8) var(--space-4) var(--space-8) var(--space-8);
  border-right: 1px solid var(--mega-hairline);
  background-color: var(--mega-rail);
}
.mega__rail-label {
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 243, 237, 0.45);
}
.mega__rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  font-size: var(--fs-link);
  font-weight: var(--fw-medium);
  text-align: left;
  color: rgba(248, 243, 237, 0.72);
  transition: background-color var(--transition), color var(--transition);
}
.mega__rail-item::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
}
.mega__rail-item:hover { color: var(--color-white); background-color: rgba(241, 173, 78, 0.08); }
.mega__rail-item[aria-selected="true"] {
  background-color: rgba(241, 173, 78, 0.12);
  color: var(--color-gold-light);
  font-weight: var(--fw-bold);
}
.mega__rail-item[aria-selected="true"]::after { opacity: 1; transform: translateX(2px) rotate(45deg); }

/* --- Link columns --- */
.mega__panes { padding: var(--space-8); }
.mega__pane[hidden] { display: none; }
.mega__pane {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-10);
}
.mega__group-title {
  grid-column: 1 / -1;
  margin-bottom: calc(var(--space-2) * -1);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 243, 237, 0.42);
}
.mega__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  transition: background-color var(--transition);
}
.mega__link:hover { background-color: rgba(241, 173, 78, 0.07); }
.mega__link-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--color-cream);
}
.mega__link:hover .mega__link-title { color: var(--color-accent); }
.mega__link-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--color-muted);
}

/* --- Featured card --- */
.mega__featured {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-left: 1px solid var(--mega-hairline);
  background-color: rgba(6, 21, 16, 0.4);
}
.mega__featured-label {
  display: block;
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.mega__featured-media {
  display: block;
  margin-top: var(--space-4);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #0b120f;
}
.mega__featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.mega__featured:hover .mega__featured-media img { transform: scale(1.05); }
.mega__featured-title {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-cream);
}
.mega__featured:hover .mega__featured-title { color: var(--color-accent); }
.mega__featured-text {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-muted);
}
.mega__featured-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--fs-link-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  transition: gap var(--transition);
}
.mega__featured-link:hover { gap: var(--space-4); }

/* Page dim behind an open mega menu */
.mega-scrim {
  position: fixed;
  inset: var(--nav-height) 0 0 0;
  z-index: 80;
  background-color: rgba(2, 10, 11, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
}
.mega-scrim.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   C. MOBILE OFF-CANVAS NAVIGATION
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background-color: rgba(2, 10, 11, 0.97);
  backdrop-filter: blur(var(--blur-nav));
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 260ms ease, visibility 260ms;
  overscroll-behavior: contain;
}
.drawer.is-open { transform: none; visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--nav-height);
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--border-hairline);
  flex-shrink: 0;
}
.drawer__title {
  font-size: var(--fs-nav);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.drawer__close {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-white);
}
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--gutter) var(--space-16); }

.drawer__group + .drawer__group { border-top: 1px solid var(--border-hairline); }
.drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  padding-block: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  color: var(--color-cream);
}
.drawer__toggle span {
  position: relative;
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.drawer__toggle span::before,
.drawer__toggle span::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background-color: var(--color-gold-light);
  transition: transform var(--transition);
}
.drawer__toggle span::after { transform: rotate(90deg); }
.drawer__toggle[aria-expanded="true"] span::after { transform: rotate(0deg); }

.drawer__panel { display: none; padding-bottom: var(--space-6); }
.drawer__panel.is-open { display: block; }
.drawer__panel li + li { margin-top: 2px; }
.drawer__panel a {
  display: block;
  min-height: 44px;
  padding: var(--space-3) 0;
  font-size: var(--fs-body);
  color: var(--color-muted);
}
.drawer__panel a:hover { color: var(--color-white); }
.drawer__panel-label {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--fs-badge);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 173, 78, 0.75);
}

.drawer__actions {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-hairline);
  flex-shrink: 0;
}

/* ==========================================================================
   D. PAGE HERO + BREADCRUMBS
   ========================================================================== */
.page-hero {
  display: flex;
  align-items: flex-end;
  min-height: clamp(430px, 26rem + 14vw, 660px);
  padding-block: calc(var(--nav-height) + var(--space-12)) var(--space-16);
}
.page-hero .section__bg::after {
  background: linear-gradient(to bottom, rgba(2, 10, 11, 0.55) 0%, rgba(2, 10, 11, 0.35) 42%, rgba(2, 10, 11, 0.92) 100%);
}
.page-hero__inner { width: 100%; }
.page-hero__title {
  margin-top: var(--space-6);
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-cream);
  text-wrap: pretty;
}
.page-hero__title em { font-style: normal; color: var(--color-accent); }
.page-hero__lead {
  max-width: 62ch;
  margin-top: var(--space-6);
  font-size: var(--fs-lead);
  color: var(--color-text-soft);
  text-wrap: pretty;
}
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(174, 124, 53, 0.35);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.page-hero__meta strong { color: var(--color-accent); font-weight: var(--fw-medium); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-3); }
.breadcrumbs li + li::before { content: "/"; color: rgba(174, 124, 53, 0.7); }
.breadcrumbs [aria-current="page"] { color: var(--color-cream); }

/* ==========================================================================
   E. ARCHIVE LAYOUT
   ========================================================================== */
.archive {
  background-color: var(--color-background);
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-16) var(--space-20);
}
.archive__layout {
  display: grid;
  grid-template-columns: minmax(230px, 292px) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

/* --- Filter rail (a real GET form: works with JS off) --- */
.filters {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  padding: var(--space-8) var(--space-6);
  background-color: var(--surface-glass);
  border: 1px solid rgba(174, 124, 53, 0.4);
  backdrop-filter: blur(var(--blur-glass));
}
.filters__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.filters__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.filters__reset { font-size: var(--fs-small); color: var(--color-muted); }
.filters__reset:hover { color: var(--color-white); }

.filters__set { border: 0; margin: 0; padding: 0; }
.filters__set + .filters__set {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-hairline);
}
.filters__legend {
  margin-bottom: var(--space-4);
  padding: 0;
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 243, 237, 0.55);
}
.filters__opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  font-size: var(--fs-body);
  color: var(--color-text-soft);
  cursor: pointer;
}
.filters__opt input {
  appearance: none;
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(174, 124, 53, 0.7);
  background-color: transparent;
  transition: background-color var(--transition);
}
.filters__opt input:checked { background-color: var(--color-gold); border-color: var(--color-gold); }
.filters__opt input:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 2px; }
.filters__opt-count { margin-left: auto; font-size: var(--fs-small); color: var(--color-muted-dark); }
.filters__apply { width: 100%; margin-top: var(--space-8); }

/* Mobile filter disclosure — hidden on desktop */
.filters__mobile-toggle { display: none; }

/* --- Results header --- */
.results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-hairline);
}
.results__count { font-size: var(--fs-body); color: var(--color-muted); }
.results__count strong { color: var(--color-cream); font-weight: var(--fw-medium); }
.results__sort { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); color: var(--color-muted); }
.results__sort select {
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid rgba(174, 124, 53, 0.4);
  color: var(--color-text-soft);
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

.results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}
.results__empty {
  display: none;
  padding: var(--space-16) var(--space-8);
  border: 1px solid rgba(174, 124, 53, 0.4);
  text-align: center;
  color: var(--color-muted);
}
.results__empty.is-visible { display: block; }
.results__empty h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   F. ARCHIVE EXPEDITION CARD ADDITIONS
   ========================================================================== */
.expedition-card[hidden] { display: none; }
.expedition-card__tier {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  padding: 5px 14px;
  background-color: rgba(2, 10, 11, 0.55);
  border: 1px solid rgba(241, 173, 78, 0.6);
  backdrop-filter: blur(5px);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-light);
}
.expedition-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-small);
}
.expedition-card__facts dt {
  font-size: var(--fs-badge);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.expedition-card__facts dd { margin: 2px 0 0; color: var(--color-text-soft); }
.expedition-card__from { color: var(--color-accent); }
.expedition-card--tall { min-height: clamp(420px, 22rem + 14vw, 560px); }

/* ==========================================================================
   G. PAGINATION
   ========================================================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-16);
}
.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 46px;
  min-height: 46px;
  padding-inline: var(--space-4);
  border: 1px solid rgba(174, 124, 53, 0.4);
  font-size: var(--fs-body);
  color: var(--color-text-soft);
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.pagination a:hover { border-color: var(--color-gold); color: var(--color-white); }
.pagination [aria-current="page"] { background-color: var(--color-gold); border-color: var(--color-gold); color: var(--color-white); }
.pagination__gap { border: 0; color: var(--color-muted-dark); }

/* ==========================================================================
   H. CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  background-color: #16261f;
  border-top: 1px solid var(--border-hairline);
  padding-block: var(--space-20);
  overflow: hidden;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-12);
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-cream);
}
.cta-band__text { max-width: 54ch; margin-top: var(--space-4); font-size: var(--fs-lead); color: var(--color-muted); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.cta-band__emblem {
  position: absolute;
  right: -60px; bottom: -80px;
  width: 320px;
  opacity: 0.06;
  pointer-events: none;
}

/* ==========================================================================
   I. WHATSAPP ENQUIRY
   ========================================================================== */
.wa {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: calc(clamp(1rem, 2vw, 2rem) + env(safe-area-inset-bottom));
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
}
.wa__fab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 0 var(--space-6);
  background-color: var(--whatsapp);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.8);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-white);
  transition: transform var(--transition), background-color var(--transition);
}
.wa__fab:hover { transform: translateY(-2px); background-color: #24915b; }
.wa__fab-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: #b9f6ce;
  flex-shrink: 0;
}

.wa__panel {
  width: min(360px, calc(100vw - 2rem));
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-6);
  background-color: rgba(8, 18, 15, 0.9);
  border: 1px solid rgba(174, 124, 53, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--panel-shadow);
  transform-origin: bottom right;
}
.wa__panel[hidden] { display: none; }
.wa__panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
}
.wa__panel-note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); }
.wa__form { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.wa__form label {
  font-size: var(--fs-badge);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 243, 237, 0.6);
}
.wa__form input,
.wa__form select,
.wa__form textarea {
  width: 100%;
  padding: var(--space-3);
  margin-top: 6px;
  background-color: rgba(2, 10, 11, 0.6);
  border: 1px solid rgba(174, 124, 53, 0.35);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
}
.wa__form textarea { min-height: 68px; resize: vertical; }
.wa__form input:focus,
.wa__form select:focus,
.wa__form textarea:focus { outline: none; border-color: var(--color-gold); }
.wa__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.wa__submit { width: 100%; margin-top: var(--space-2); }

/* ==========================================================================
   J. RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  /* The desktop mega menu and its rail are replaced by the drawer. */
  .mega, .mega-scrim { display: none; }
  .nav__trigger { display: none; }

  .archive__layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .filters__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: var(--space-3) var(--space-6);
    background-color: var(--surface-glass);
    border: 1px solid rgba(174, 124, 53, 0.4);
    font-size: var(--fs-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-soft);
  }
  .filters__mobile-toggle span { color: var(--color-accent); }
  .filters.is-collapsed { display: none; }
  .results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__inner { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .page-hero { padding-block: calc(var(--nav-height) + var(--space-8)) var(--space-12); }
  .page-hero__title { max-width: none; }
  .results__grid { grid-template-columns: 1fr; }
  .expedition-card__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa__fab span:not(.wa__fab-dot) { display: none; }
  .wa__fab { padding: 0; width: 52px; justify-content: center; }
}