/* Align Kilimanjaro guide, route, and packing pages with the safari package look. */
:root {
  --gold: #8a5a36;
  --gold-bright: #c1844f;
  --gold-soft: #f3ece4;
  --ink: #20201d;
  --muted: #6c6f68;
  --line: #e4e1d8;
  --paper: #fbfaf6;
  --sage: #3f5f4c;
  --green: #3f5f4c;
  --green-dark: #263d31;
  --shadow: 0 24px 70px rgba(32, 32, 29, .14);
  --radius: 8px;
}

body,
.routes-page,
.packing-page {
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nav-wrapper {
  --gold: #8a5a36;
  --gold-soft: #f3ece4;
  --dark: #20201d;
  --text: #20201d;
  --muted: #6c6f68;
  --line: #e4e1d8;
  --panel: #fbfaf6;
  --shadow: 0 24px 70px rgba(32, 32, 29, .14);
}

.main-nav,
.mobile-menu {
  border-color: rgba(32, 32, 29, .08);
}

.hero,
.routes-hero,
.packing-hero {
  min-height: 660px;
  color: #fff;
}

.routes-hero,
.packing-hero {
  padding-top: 128px;
  padding-bottom: 58px;
  background: #20201d;
}

.hero:not([style]) {
  background:
    linear-gradient(90deg, rgba(16, 19, 14, .90), rgba(16, 19, 14, .68) 42%, rgba(16, 19, 14, .14)),
    url("/assets/wix-media/26acfb_4a53f0c40617487e973f9703751873ad-mv2-3d2ea96269.webp") center / cover no-repeat;
}

.routes-hero::before,
.packing-hero::before {
  background:
    linear-gradient(90deg, rgba(16, 19, 14, .90), rgba(16, 19, 14, .68) 42%, rgba(16, 19, 14, .14)),
    url("/assets/wix-media/26acfb_4a53f0c40617487e973f9703751873ad-mv2-3d2ea96269.webp") center / cover no-repeat;
}

.hero-inner,
.routes-container,
.packing-container,
.container {
  max-width: 1180px;
}

.hero-content h1,
.hero h1 {
  font-size: clamp(42px, 6.2vw, 76px);
  line-height: .98;
  letter-spacing: 0;
}

.hero-copy,
.hero-content p {
  color: rgba(255, 255, 255, .86);
  font-size: 19px;
}

.eyebrow,
.hero-content .eyebrow {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(54, 95, 115, .28);
  border: 1px solid rgba(151, 188, 205, .58);
  color: #d7eef7;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.btn-gold,
.btn--gold,
.primary,
.route-cta,
.popup-submit {
  background: var(--gold);
  color: #fff7ee;
}

.btn-outline,
.btn--outline {
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

.hero-card,
.quote-card,
.facts-grid,
.facts__grid,
.intro-note,
.quick-card,
.map-card,
.compare-card,
.pack-card,
.content-card,
.packing-card,
.packing-section,
.popup-dialog {
  border-radius: 10px;
  border-color: var(--line);
  box-shadow: 0 18px 40px rgba(32, 32, 29, .10);
}

.facts,
.facts__grid {
  position: relative;
  z-index: 4;
}

.facts-grid,
.facts__grid {
  background: #fff;
  border: 1px solid var(--line);
}

.fact,
.fact__label,
.stat-box span,
.section__kicker,
.intro-copy p,
.intro-note p,
.quick-card p,
.route-button-text span,
.map-note,
.compare-card p,
.packing-card p,
.content-card p {
  color: var(--muted);
}

.section__kicker,
.quick-card span,
.map-title span,
.compare-card span {
  color: var(--gold);
}

.guide-pill,
.meta-pill {
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .11);
  color: #fff;
  backdrop-filter: blur(8px);
}

.guide-pill:hover,
.quick-card:hover,
.quick-card:focus,
.route-button:hover,
.route-button.active,
.compare-card:hover {
  border-color: rgba(138, 90, 54, .62);
}

.route-button {
  border-radius: 8px;
  background: #fff;
  color: #4a4d47;
}

.route-button.active {
  color: var(--ink);
  box-shadow: inset 4px 0 0 var(--gold), 0 18px 38px rgba(32, 32, 29, .10);
}

.route-pin {
  color: var(--sage);
}

.route-button.active .route-pin {
  color: var(--gold);
}

.map-header,
.packing-nav {
  background: #fff;
  border-color: var(--line);
}

.packing-nav {
  color: var(--ink);
}

.packing-nav a {
  color: var(--ink);
  border-color: rgba(32, 32, 29, .12);
}

.packing-nav a:hover,
.packing-nav a.active {
  background: var(--gold-soft);
  color: var(--ink);
  border-color: rgba(138, 90, 54, .42);
}

.active-route,
.route-flow {
  stroke: var(--gold);
}

.descent-route {
  stroke: var(--sage);
}

.route-moving-dot {
  fill: #fff7ee;
  stroke: var(--gold);
}

.check {
  background: rgba(63, 95, 76, .16);
  color: var(--sage);
}

@media (max-width: 760px) {
  .hero,
  .routes-hero,
  .packing-hero {
    min-height: auto;
  }

  .hero-copy,
  .hero-content p {
    font-size: 16px;
  }
}