/* ==========================================================================
   KiboQuest: Design System
   Loaded per-page via $extraStylesheets (see partials/header.php); a page
   that doesn't set $extraStylesheets is completely unaffected by this file.
   Started as index.php's homepage redesign, now shared by every migrated
   page (see CLAUDE.md's "Redesign progress" for the current list).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Design tokens: locked palette, one added utility shade (--ember) for
     gradients/shadows derived from the amber accent. */
  --ink: #22262B;
  --slate: #3D4550;
  --stone: #A69C8C;
  --glacier: #F7F5F0;
  --amber: #E08A3E;
  --amber-dark: #C46F27;
  --ember: #7A3B14;

  --primary: var(--amber);
  --light: var(--glacier);
  --dark: var(--slate);
}

* { box-sizing: border-box; }

/* ==========================================================================
   Base typography
   ========================================================================== */

body {
  font-family: 'Work Sans', 'Heebo', sans-serif;
  color: var(--ink);
  background-color: var(--glacier);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', 'Montserrat', serif;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Shared chrome: retint/refont only, no layout changes on this pilot page
   ========================================================================== */

.bg-dark { background-color: var(--ink) !important; }

.navbar-dark .navbar-nav .nav-link {
  font-family: 'Work Sans', sans-serif;
  letter-spacing: 0.04em;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.dropdown-toggle.active {
  color: var(--amber) !important;
}

.dropdown-menu { font-family: 'Work Sans', sans-serif; }

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--amber) !important;
  color: #fff !important;
}

.btn-primary {
  background-color: var(--amber) !important;
  border-color: var(--amber) !important;
  font-family: 'Work Sans', sans-serif;
  letter-spacing: 0.06em;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--amber-dark) !important;
  border-color: var(--amber-dark) !important;
}

.btn-dark { background-color: var(--ink) !important; border-color: var(--ink) !important; }

.text-primary { color: var(--amber) !important; }

.footer {
  background-color: var(--ink) !important;
  /* css/style.css sets margin-top:-110px, written for the old template's
     booking-bar spacer that used to sit right above the footer. This
     page's new layout has no such spacer, so left as-is the negative
     margin pulls the footer up over the adventure section instead. */
  margin-top: 0 !important;
}

.footer .btn.btn-social:hover,
.footer .btn.btn-link:hover { color: var(--amber) !important; }

/* ==========================================================================
   Booking modal: brand-accent retint only; functional calendar status
   colors are semantic and untouched.
   ========================================================================== */

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--amber); }

.price-info strong, .price-display { color: var(--amber); }

.submit-btn, .btn-book-now { background: var(--amber); }
.submit-btn:hover, .btn-book-now:hover { background: var(--amber-dark); }

.existing-bookings-info { border-left-color: var(--amber); }

.flatpickr-monthDropdown-months option:hover,
.flatpickr-monthDropdown-months option:focus,
.flatpickr-monthDropdown-months option:checked { background: var(--amber) !important; }

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { fill: var(--amber) !important; }

#priceDisplay { background-color: var(--glacier) !important; }
#charCount { color: var(--stone) !important; }

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .animated, .wow { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Lazy-load skeleton (unchanged contract with js/image-optimization.js)
   ========================================================================== */

.img-lazy { opacity: 0; transition: opacity 0.4s ease-in-out; }
.img-lazy.loaded { opacity: 1; }

.img-placeholder {
  background: linear-gradient(90deg, #e5e1d8 25%, #d8d3c6 50%, #e5e1d8 75%);
  background-size: 200% 100%;
  animation: kq-loading 1.5s infinite;
  position: absolute; inset: 0; z-index: 1;
}

@keyframes kq-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .img-placeholder { animation: none; background: #e5e1d8; }
}

/* ==========================================================================
   Utility
   ========================================================================== */

.kq-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}

.kq-kicker::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--amber);
  display: inline-block;
}

.kq-section-label {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   HERO: one decisive image, off-grid oversized headline, elevation chart
   fused to the bottom edge instead of a decorative divider.
   ========================================================================== */

.kq-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.kq-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.kq-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(34,38,43,.25) 0%, rgba(34,38,43,.4) 45%, rgba(34,38,43,.95) 100%),
    linear-gradient(90deg, rgba(34,38,43,.65) 0%, rgba(34,38,43,0) 50%);
  z-index: 1;
}

.kq-hero-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 5vw 3.5rem;
  color: #fff;
}

.kq-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.25rem;
  background: rgba(34,38,43,0.55);
  padding: 0.35em 0.75em 0.35em 0.6em;
  border-radius: 2px;
}

.kq-hero-eyebrow::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--amber);
}

.kq-hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1.5rem;
  max-width: 16ch;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.kq-hero-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--amber);
}

.kq-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.92);
  max-width: 42ch;
  margin-bottom: 2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.kq-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kq-btn {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9rem 1.75rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
}

.kq-btn--solid {
  background: var(--amber);
  color: #fff;
}
.kq-btn--solid:hover { background: var(--amber-dark); color: #fff; }

.kq-btn--outline {
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.kq-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* ==========================================================================
   ELEVATION CHART: the signature element. A real, labeled profile of the
   Machame route, fused to the hero's bottom edge. Draws itself in on
   scroll (respects prefers-reduced-motion).
   ========================================================================== */

.kq-chart {
  position: relative;
  z-index: 2;
  background: var(--ink);
  padding: 1.5rem 5vw 2.5rem;
}

.kq-chart-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: rgba(247,245,240,0.65);
  font-family: 'Work Sans', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kq-chart-label strong { color: var(--amber); }

.kq-chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.kq-chart-fill { fill: url(#kqChartGradient); }

.kq-chart-line {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  transition: stroke-dashoffset 1.8s cubic-bezier(.16,.84,.44,1);
}

.kq-route-panel.kq-in-view .kq-chart-line { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .kq-chart-line { transition: none; stroke-dashoffset: 0; }
}

.kq-chart-point {
  fill: var(--ink);
  stroke: var(--amber);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 0.3s ease 1.6s;
}

.kq-route-panel.kq-in-view .kq-chart-point { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .kq-chart-point { transition: none; opacity: 1; }
}

.kq-chart-tick {
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: rgba(247,245,240,0.75);
}

.kq-chart-tick-camp {
  font-weight: 600;
  fill: #fff;
}

@media (max-width: 640px) {
  .kq-chart-tick { font-size: 9px; }
}

/* ==========================================================================
   MEET YOUR GUIDE
   ========================================================================== */

.kq-guide {
  background-color: var(--glacier);
  padding: 6rem 0;
}

.kq-guide-copy h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0.5rem 0 1.5rem;
  max-width: 14ch;
}

.kq-guide-copy p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4b4740;
  max-width: 52ch;
}

.kq-credential-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  border-top: 1px solid rgba(166,156,140,0.4);
}

.kq-credential-list li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(166,156,140,0.4);
  font-size: 0.98rem;
}

.kq-credential-list .kq-credential-num {
  font-family: 'Fraunces', serif;
  font-size: 0.85rem;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.kq-credential-placeholder { color: var(--stone); font-style: italic; }

.kq-guide-portrait {
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--slate) 0%, var(--ink) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kq-guide-portrait-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ==========================================================================
   CHOOSE YOUR ADVENTURE: sharp-edged editorial grid on a dark ground,
   feature tile dominant, thin amber seams instead of card shadows.
   ========================================================================== */

.kq-adventure {
  background-color: var(--ink);
  padding: 3.5rem 0 4rem;
}

.kq-adventure-head {
  margin-bottom: 2rem;
}

.kq-adventure-head .kq-kicker { color: var(--amber); }
.kq-adventure-head .kq-kicker::before { background: var(--amber); }

.kq-adventure-head h2 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin: 0.5rem 0 0;
  max-width: 20ch;
}

.kq-adventure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: rgba(224,138,62,0.35);
}

.kq-tile {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  color: #fff;
  text-decoration: none;
  background: var(--ink);
  overflow: hidden;
}

.kq-tile-feature { min-height: 380px; }

.kq-tile-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s ease;
}

.kq-tile:hover .kq-tile-img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .kq-tile-img, .kq-tile:hover .kq-tile-img { transition: none; transform: none; }
}

.kq-tile-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(34,38,43,.1) 0%, rgba(34,38,43,.55) 32%, rgba(34,38,43,.88) 58%, rgba(34,38,43,.98) 100%);
  z-index: 1;
}

.kq-tile-body {
  position: relative;
  z-index: 2;
  padding: 1.75rem;
  width: 100%;
}

/* Text over photography must stay legible regardless of what's in the
   photo underneath. This can't depend on tuning per-image. Two
   independent, redundant guarantees, applied centrally to every tile: a
   near-solid scrim behind the whole text block (below), and a small
   solid backing chip behind the kicker specifically, since a thin
   accent-colored label is the hardest case (amber over a bright sky or
   water can lose contrast even with a shadow). */
.kq-tile-body .kq-kicker {
  color: var(--amber);
  margin-bottom: 0.6rem;
  background: rgba(34,38,43,0.55);
  padding: 0.25em 0.6em 0.25em 0.5em;
  border-radius: 2px;
}
.kq-tile-body .kq-kicker::before { background: var(--amber); }

.kq-tile-body h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  margin: 0 0 0.5rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 4px 14px rgba(0,0,0,0.6);
}

.kq-tile-body p {
  color: rgba(255,255,255,0.92);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 36ch;
  margin-bottom: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.55);
}

.kq-tile-cta {
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.kq-tile:hover .kq-tile-cta,
.kq-tile:focus-visible .kq-tile-cta {
  color: var(--amber);
  border-color: var(--amber);
}

.kq-tile:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
}

@media (min-width: 768px) {
  .kq-adventure-grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(3, minmax(150px, 1fr));
  }
  .kq-tile-feature {
    grid-column: 1;
    grid-row: 1 / span 3;
    min-height: 100%;
  }
}

/* ==========================================================================
   ABOUT / STORY PAGE (about_us.php): reuses the hero + kicker + tokens
   above; adds its own narrative components.
   ========================================================================== */

.kq-hero--compact { min-height: 58vh; }

.kq-story { background-color: var(--glacier); padding: 5rem 0; }

.kq-story-lede {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 26ch;
  margin-bottom: 2rem;
}

.kq-story-body p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #4b4740;
  max-width: 64ch;
  margin-bottom: 1.4rem;
}

.kq-story-placeholder { color: var(--stone); font-style: italic; }

.kq-principles { background-color: var(--ink); padding: 5rem 0; }

.kq-principles-head { margin-bottom: 3rem; }
.kq-principles-head .kq-kicker { color: var(--amber); }
.kq-principles-head .kq-kicker::before { background: var(--amber); }
.kq-principles-head h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0.5rem 0 0;
  max-width: 22ch;
}

.kq-principles-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .kq-principles-list { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; }
}

.kq-principle-num {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 0.5rem;
}

.kq-principles-list h3 { color: #fff; font-size: 1.35rem; margin-bottom: 0.5rem; }
.kq-principles-list p { color: rgba(255,255,255,0.75); font-size: 0.98rem; line-height: 1.6; margin: 0; }

.kq-mission { background-color: var(--glacier); padding: 6rem 0; text-align: center; }

.kq-mission-kicker { justify-content: center; margin-bottom: 1.5rem; }

.kq-mission blockquote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 42ch;
  margin: 0 auto;
}

.kq-story-cta { background-color: var(--slate); padding: 4rem 0; text-align: center; }
.kq-story-cta h2 { color: #fff; margin-bottom: 1.5rem; }
.kq-story-cta .kq-hero-cta { justify-content: center; }

/* ==========================================================================
   TRIP INFO / LONG-FORM REFERENCE PAGES (kilimanjaro_faq.php etc.)
   Mostly light throughout; these are read, not sold. Ink/Slate/Amber are
   reserved for the waypoints rail, section numbers and callouts, not big
   color blocks. Signature: the waypoints rail is the elevation motif
   re-expressed as reading-progress markers, real navigation, not
   decoration reused wholesale from the homepage chart.
   ========================================================================== */

.kq-article-hero .kq-hero-title { max-width: 22ch; }

.kq-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  margin-bottom: 1rem;
}

.kq-breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.kq-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.kq-breadcrumb span[aria-current] { color: #fff; }

.kq-article-layout {
  background-color: var(--glacier);
  padding: 3.5rem 0 5rem;
}

.kq-article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 992px) {
  .kq-article-grid { grid-template-columns: 240px 1fr; gap: 4rem; }
}

/* -- Waypoints rail -- */
.kq-waypoints-wrap {
  position: relative;
  margin: 0 -5vw 2rem;
  background: var(--ink);
}

@media (min-width: 992px) {
  .kq-waypoints-wrap {
    margin: 0;
    background: none;
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }
}

.kq-waypoints {
  list-style: none;
  margin: 0;
  padding: 0.75rem 5vw;
  display: flex;
  overflow-x: auto;
  gap: 0.25rem;
  scrollbar-width: none;
}

.kq-waypoints::-webkit-scrollbar { display: none; }

@media (min-width: 992px) {
  .kq-waypoints {
    flex-direction: column;
    overflow: visible;
    padding: 0;
    gap: 0;
    border-left: 1px solid rgba(166,156,140,0.4);
  }
}

.kq-waypoint-link {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(247,245,240,0.6);
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

@media (min-width: 992px) {
  .kq-waypoint-link {
    white-space: normal;
    color: #6b6558;
    padding: 0.5rem 0 0.5rem 1rem;
    margin-left: -1px;
    border-left: 1px solid transparent;
    border-radius: 0;
  }
}

.kq-waypoint-num {
  font-family: 'Fraunces', serif;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

.kq-waypoint-link:hover { color: #fff; }
@media (min-width: 992px) {
  .kq-waypoint-link:hover { color: var(--ink); }
}

.kq-waypoint-link.kq-waypoint-active {
  color: #fff;
  background: rgba(224,138,62,0.18);
}

@media (min-width: 992px) {
  .kq-waypoint-link.kq-waypoint-active {
    color: var(--ink);
    background: none;
    border-left-color: var(--amber);
  }
}

/* -- Article body -- */
.kq-article-body { max-width: 68ch; }

.kq-article-section { padding-top: 0.5rem; margin-bottom: 3rem; scroll-margin-top: 6rem; }
.kq-article-section:last-child { margin-bottom: 0; }

.kq-article-section-num {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 0.85rem;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.4rem;
}

.kq-article-section h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin-bottom: 1rem;
}

.kq-article-body p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #423f38;
  margin-bottom: 1.2rem;
}

.kq-article-body p:last-child { margin-bottom: 0; }

.kq-article-body ul { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.kq-article-body ul:last-child { margin-bottom: 0; }
.kq-article-body li { font-size: 1.05rem; line-height: 1.8; color: #423f38; margin-bottom: 0.4rem; }
.kq-article-body li:last-child { margin-bottom: 0; }

/* -- Callout box (tips, key facts) -- */
.kq-callout {
  background: #fff;
  border: 1px solid rgba(166,156,140,0.4);
  border-left: 3px solid var(--amber);
  border-radius: 2px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.kq-callout-label {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.5rem;
}

.kq-callout p, .kq-callout li { font-size: 0.98rem; color: #423f38; margin-bottom: 0.4rem; }
.kq-callout p:last-child, .kq-callout li:last-child { margin-bottom: 0; }

/* -- FAQ question/answer -- */
.kq-faq-question {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

/* ==========================================================================
   KILIMANJARO ROUTE PAGES (trekking_kilimanjaro.php and the kili_*.php route
   detail pages): a sales/booking template, not a read-only reference one.
   The "how to choose" list reuses .kq-credential-list as-is (same light-
   background, numbered-line component already built for Meet Your Guide).
   The route grid reuses .kq-adventure / .kq-tile wholesale, since a grid of
   linked photo tiles is exactly what this is too; only .kq-route-grid's
   column layout and the .room-item/.price-badge hooks (kept for the
   sitewide dynamic-pricing.js and booking-form.js, which key off those
   class names on every page, migrated or not) are new here.
   ========================================================================== */

.kq-decide { background-color: var(--glacier); padding: 5rem 0 1rem; }
.kq-decide .kq-kicker { margin-bottom: 1rem; }
.kq-decide h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 22ch; margin-bottom: 1.25rem; }
.kq-decide-lede { font-size: 1.05rem; line-height: 1.7; color: #4b4740; max-width: 62ch; margin-bottom: 0; }
.kq-decide .kq-credential-list { max-width: 74ch; }
.kq-decide .kq-credential-list span:last-child { line-height: 1.6; }

/* Uniform, not broken-grid: these six routes are peers being compared, not
   a hierarchy, and the page's own copy says so ("there isn't a single best
   route"). A big feature tile would visually contradict that, and these
   images are schematic route maps, not the kind of aspirational photography
   that earns a feature slot elsewhere on the site (e.g. the homepage's
   Choose Your Adventure grid, which keeps its feature tile). */
.kq-route-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: rgba(224,138,62,0.35); }

@media (min-width: 768px) {
  .kq-route-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .kq-route-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Modifier for a grid that will only ever hold 2 items (Mount Meru's two
   packages so far): stops it opening a 3rd, permanently empty column at
   desktop widths. The compound selector's higher specificity wins over the
   plain .kq-route-grid rule above regardless of source order. */
@media (min-width: 992px) {
  .kq-route-grid.kq-route-grid--pair { grid-template-columns: repeat(2, 1fr); }
}

/* Reserve fixed space for the title and description individually (in em
   units, so it scales with the card's own responsive font-size) rather than
   flooring the body's total height: flooring the total only helps cards
   that fall under the floor, so a card with a shorter title or a
   three-line description instead of two still drifts relative to its row
   siblings. Reserving each part keeps the kicker/title start position and
   the Book Now row lined up across every card, not just some of them. */
.kq-route-grid .kq-tile-body {
  display: flex;
  flex-direction: column;
}

.kq-route-grid .kq-tile-body h3 { min-height: 2.4em; }
.kq-route-grid .kq-tile-body p { min-height: 4.5em; }

.kq-tile-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.kq-btn { cursor: pointer; }
.kq-btn--sm { padding: 0.6rem 1.2rem; font-size: 0.78rem; }

.kq-btn:focus-visible,
.kq-tile-cta:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* -- Testimonials (shared component, first used here; reusable by any page) --
   Swaps the template's dark stock-photo backdrop and Bootstrap-yellow stars
   for the locked palette, sharp corners, and Fraunces/Work Sans type. Markup
   keeps .testimonial / .testimonial-carousel / .testimonial-item /
   owl-carousel structure and JS untouched; just add .kq-testimonials on the
   wrapper and drop .bg-white / .rounded from each card. */
.kq-testimonials.testimonial {
  background-color: var(--slate);
  background-image: none;
  padding: 5rem 0;
}

.kq-testimonials-head { text-align: center; margin-bottom: 0; }
.kq-testimonials-head .kq-kicker { justify-content: center; margin-bottom: 1rem; }
.kq-testimonials-head h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 0; }

.kq-testimonials .testimonial-item {
  background: var(--glacier);
  border-radius: 2px;
  padding: 2rem;
}

.kq-testimonials .testimonial-item p {
  font-family: 'Work Sans', sans-serif;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.7;
}

.kq-testimonials .testimonial-item h6 {
  font-family: 'Fraunces', serif;
  color: var(--ink);
}

.kq-testimonials .testimonial-item img { border-radius: 2px; }

.kq-testimonials .testimonial-item .text-warning i { color: var(--amber); }

.kq-testimonials .testimonial-item .fa-quote-right { color: var(--amber); opacity: 0.18; }

/* ==========================================================================
   ROUTE DETAIL PAGES (kili_*.php): a real booking flow, so these restyle
   markup/JS shared with every other trek/safari/zanzibar detail page
   (.sticky-nav-*, .book-now-section, .price-display, .gallery), not
   components built fresh for this redesign. That markup and its behavior
   (js/sticky-nav-scroll.js, js/dynamic-pricing.js) stay untouched; only its
   appearance changes here, and only on pages that load this stylesheet.
   ========================================================================== */

.kq-hero-facts {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1rem;
}
.kq-hero-facts span:not(:last-child)::after { content: '\00a0\00b7\00a0'; color: rgba(255,255,255,0.5); }

.sticky-nav-container { background-color: var(--ink); }
.sticky-nav-link { font-family: 'Work Sans', sans-serif; letter-spacing: 0.03em; }
.sticky-nav-link:hover { color: var(--amber); }
.sticky-nav-link.active { color: var(--amber); }
.sticky-nav-link.active::after { background-color: var(--amber); }
.sticky-nav-price span { color: var(--amber); }
.sticky-nav-book-btn {
  background: var(--amber);
  border-radius: 2px;
  font-family: 'Work Sans', sans-serif;
  letter-spacing: 0.05em;
}
.sticky-nav-book-btn:hover { background: var(--amber-dark); }

.kq-route-content { background-color: var(--glacier); padding: 3rem 0 5rem; }

/* A .kq-route-section is not necessarily its parent's first child: the
   elevation/map band below breaks out of .container between Overview and
   Itinerary, so Itinerary starts a second, separate container and would
   otherwise also count as a ":first-child" and lose its top spacing. Only
   the page's actual first section (Overview) should skip the divider. */
.kq-route-section { padding: 3rem 0; border-top: 1px solid rgba(166,156,140,0.35); }
.kq-route-section--first { padding-top: 0; border-top: none; }
.kq-route-section h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1rem; }
.kq-route-lede { max-width: 68ch; font-size: 1.05rem; line-height: 1.8; color: #423f38; }

/* -- Route at a glance: the map (where the trail physically goes) and the
   elevation chart (how hard each day is) answer different questions, so
   both stay, merged into one module rather than left as a small orphaned
   image with empty space beside it. Map and chart side by side on desktop,
   stacked on mobile. -- */
.kq-route-glance { background: var(--ink); padding: 1.5rem 5vw; }

/* Stacked, not side by side: a side-by-side split left the chart much
   wider than the map (whatever width the 1fr column happened to be),
   which both looked mismatched and, because the chart is an SVG scaled by
   its container width, shrank its label text to the point of being hard
   to read. Stacking keeps both at the same width, and gives the chart the
   full available width to render its labels at a readable size. Capped
   rather than full-bleed because the map is only a 648x341 source image;
   stretching it edge-to-edge on a wide screen would look soft. */
.kq-route-glance-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 680px;
  margin: 0 auto;
}

/* The chart keeps its own background/padding when used alone (the
   homepage's multi-route slideshow); here it's nested inside the band
   above, which already supplies both. */
.kq-route-glance .kq-chart { background: none; padding: 0; }

/* Scoped to this narrower, single-route context only, not a change to the
   shared .kq-chart-tick rule the homepage's already-approved chart uses:
   labels need to be legible at 680px, not just at the homepage's much
   wider full-bleed rendering. */
.kq-route-glance .kq-chart-tick { font-size: 13px; }
@media (max-width: 480px) {
  .kq-route-glance .kq-chart-tick { font-size: 11px; }
}

.kq-route-map img { width: 100%; height: auto; border-radius: 2px; display: block; }

/* -- Itinerary: real headings and paragraphs per day, not a <br>-joined
   blob, so the day-by-day plan is actually scannable and screen-reader
   friendly. The day number reuses the amber Fraunces numeral convention
   used everywhere else on the site (waypoints, credential list). -- */
.kq-itin-day { padding: 1.75rem 0; border-top: 1px solid rgba(166,156,140,0.35); }
.kq-itin-day:first-child { padding-top: 0; border-top: none; }

.kq-itin-day-head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.kq-itin-day-num { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--amber); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.kq-itin-day-title { font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--ink); margin: 0; }

/* A grid of fixed columns, not an inline row that wraps wherever a label
   happens to run long: that read as scattered and the type was too small
   to scan at a glance. This reads as one clean fact strip per day. */
.kq-itin-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(166,156,140,0.35);
  border-radius: 2px;
}

@media (min-width: 640px) {
  .kq-itin-stats { grid-template-columns: repeat(4, 1fr); }
}

.kq-itin-stat dt {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.3rem;
}

.kq-itin-stat dd {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.kq-itin-day p { font-size: 1.02rem; line-height: 1.75; color: #423f38; margin-bottom: 1rem; }
.kq-itin-day p:last-child { margin-bottom: 0; }

/* -- What's included / excluded: real lists, not another <br> blob -- */
.kq-included-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 768px) {
  .kq-included-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.kq-included-label, .kq-excluded-label {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.kq-included-label { color: var(--amber); }
.kq-excluded-label { color: var(--stone); }

.kq-included-list, .kq-excluded-list { list-style: none; padding: 0; margin: 0; }
.kq-included-list li, .kq-excluded-list li {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #423f38;
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.6rem;
}
.kq-included-list li::before { content: '+'; position: absolute; left: 0; color: var(--amber); font-weight: 700; }
.kq-excluded-list li::before { content: '\2013'; position: absolute; left: 0; color: var(--stone); font-weight: 700; }

/* .book-now-btn already gets its amber fill from the sitewide .btn-primary
   retint above; only the card around it and the price figure's type need
   a page-specific touch here. */
.book-now-section {
  background: var(--ink);
  border-radius: 2px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.book-now-section h4 { font-family: 'Fraunces', serif; color: #fff; font-size: 1.5rem; margin-bottom: 1rem; }
.book-now-section .price-display { font-family: 'Fraunces', serif; }
.book-now-section .book-now-btn { border-radius: 2px; }

.gallery img { border-radius: 2px; }

/* ==========================================================================
   SAFARI / ZANZIBAR PAGES: the same route-detail template as Kilimanjaro and
   Mount Meru, minus the elevation chart, game drives and beach days don't
   have an altitude profile. Safari's .kq-route-glance holds only a
   .kq-route-map figure (each package has a real regional park map, e.g.
   img/safari_tar_ngo_m.jpg); it works with just one flex child, no extra
   CSS needed. Zanzibar has no per-package map or chart asset at all, so its
   detail pages skip the glance module entirely and go straight from
   Overview to Itinerary inside one continuous .container.
   Itinerary days here also skip .kq-itin-stats (no elevation/distance/time/
   habitat data exists for a game drive or a beach day, so it isn't
   fabricated); .kq-itin-day still supplies the day-num/title heading.
   ========================================================================== */

.kq-itin-day ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.kq-itin-day ul:last-child { margin-bottom: 0; }
.kq-itin-day li { font-size: 1.02rem; line-height: 1.75; color: #423f38; margin-bottom: 0.4rem; }
.kq-itin-day li:last-child { margin-bottom: 0; }

/* -- Zanzibar overview's "why this trip" icon list: kept from the original
   (it's real, useful content), just given consistent spacing with the rest
   of the kq-route-section rhythm. Icon chips stay circular on purpose, a
   deliberate exception to the sharp-corner card/button convention that's
   common even in otherwise-sharp editorial design. -- */
.kq-benefits-grid { margin-top: 1.75rem; }
.kq-benefits-grid h5 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.kq-benefits-grid p { font-size: 0.95rem; color: #4b4740; line-height: 1.6; margin: 0; }

/* ==========================================================================
   CONTACT PAGE (contact.php): not a booking/itinerary page, so it doesn't
   reuse the route-detail template, just the shared hero/section/kicker
   pieces. The form itself (fields, the fetch()/reCAPTCHA v2/spinner-reuse
   JS in contact.php, and its POST target send.php) is left completely
   alone: only its visual presentation changes here.
   ========================================================================== */

.kq-contact-section { background-color: var(--glacier); padding: 5rem 0; }

.kq-contact-info { display: flex; flex-wrap: wrap; gap: 2rem 3rem; margin-bottom: 3rem; }

.kq-contact-info-item { display: flex; align-items: center; gap: 0.85rem; }

.kq-contact-info-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.kq-contact-info-item div { display: flex; flex-direction: column; }
.kq-contact-info-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}
.kq-contact-info-value {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  color: var(--ink);
}
.kq-contact-info-value a { color: inherit; text-decoration: none; }
.kq-contact-info-value a:hover { color: var(--amber); }

.kq-contact-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 992px) {
  .kq-contact-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.kq-contact-map { border-radius: 2px; overflow: hidden; min-height: 400px; height: 100%; }
.kq-contact-map iframe { display: block; width: 100%; height: 100%; min-height: 400px; }

.kq-contact-form .form-floating > .form-control,
.kq-contact-form .form-floating > textarea.form-control {
  border-radius: 2px;
  border-color: rgba(166,156,140,0.5);
  font-family: 'Work Sans', sans-serif;
}
.kq-contact-form .form-floating > .form-control:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 0.2rem rgba(224,138,62,0.15);
}
.kq-contact-form .form-floating > label { font-family: 'Work Sans', sans-serif; color: var(--stone); }
.kq-contact-form .btn-primary { border-radius: 2px; letter-spacing: 0.08em; }

.kq-contact-alert {
  border-radius: 2px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  font-family: 'Work Sans', sans-serif;
  font-size: 0.95rem;
}
.kq-contact-alert--success { background: rgba(224,138,62,0.12); border: 1px solid var(--amber); color: var(--ember); }
.kq-contact-alert--error { background: rgba(166,156,140,0.15); border: 1px solid var(--stone); color: var(--ink); }