:root {
  --deep-forest: #1B4332;
  --pine: #2D6A4F;
  --emerald: #059669;
  --warm-ivory: #F6F1E7;
  --paper-soft: #FBF7EE;
  --ink: #22281F;
  --slate: #4F5C53;
  --mist: #8A9387;
  --line: #DDD3BD;
  --brass: #B08D2E;
  --shadow: 0 1px 2px rgba(27,67,50,0.06), 0 8px 24px rgba(27,67,50,0.08);
  --shadow-card: 0 1px 2px rgba(27,67,50,0.05), 0 6px 18px rgba(27,67,50,0.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--warm-ivory);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--deep-forest); text-decoration: underline; }
img { max-width: 100%; display: block; }
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--deep-forest);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brass);
}
h1, h2, h3 { color: var(--deep-forest); letter-spacing: -0.01em; }
h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.1; margin-top: 0.5rem; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
p { color: var(--ink); }
.lede { color: var(--slate); margin-top: 0.75rem; max-width: 40rem; font-size: 1.0625rem; }

.site-header {
  background: var(--warm-ivory);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(140%) blur(8px);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  gap: 1rem;
}
.brand img { height: 36px; width: auto; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.95rem;
}
.site-nav a[aria-current="page"] { color: var(--deep-forest); font-weight: 700; }
.site-nav .cta {
  background: var(--deep-forest);
  color: #fff;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  font-weight: 600;
}
.site-nav .cta:hover { background: var(--pine); color: #fff; text-decoration: none; }

.page-hero { padding: 3rem 0 1.5rem; background: var(--warm-ivory); }
.page-hero .wrap { max-width: 1080px; }

.dest-grid-wrap { padding: 1.5rem 0 3rem; }
.grid-aside {
  color: var(--slate);
  max-width: 46rem;
  margin-bottom: 1.5rem;
}
.dest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.dest-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(27,67,50,0.06), 0 12px 28px rgba(27,67,50,0.14);
}
.dest-card-inner {
  padding: 1.25rem 1.25rem 1.5rem;
}
.dest-region {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.dest-card h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.dest-band {
  font-size: 0.875rem;
  color: var(--slate);
  border-left: 3px solid var(--emerald);
  padding-left: 0.625rem;
  margin: 0.5rem 0 0.75rem;
}
.dest-blurb {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.dest-meta {
  font-size: 0.8rem;
  color: var(--mist);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dest-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brass);
}
.dest-btn {
  display: inline-block;
  background: var(--deep-forest);
  color: #fff;
  padding: 0.625rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.dest-btn:hover { background: var(--pine); color: #fff; text-decoration: none; }

@media (max-width: 880px) {
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 1.875rem; }
}
@media (max-width: 560px) {
  .dest-grid { grid-template-columns: 1fr; }
  .site-nav { gap: 0.75rem; font-size: 0.875rem; }
  .site-nav .cta { padding: 0.4rem 0.7rem; }
}

.trust-strip {
  background: var(--paper-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 3rem 0;
}
.strip-head { text-align: center; margin-bottom: 1.5rem; }
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.strip-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.125rem;
}
.strip-title { font-weight: 700; color: var(--deep-forest); margin-bottom: 0.25rem; }
.strip-body { color: var(--slate); font-size: 0.95rem; }
.strip-foot {
  text-align: center;
  color: var(--mist);
  margin-top: 1.5rem;
  font-size: 0.875rem;
}
.dest-more {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}
@media (max-width: 880px) { .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .strip-grid { grid-template-columns: 1fr; } }

.site-footer {
  background: var(--warm-ivory);
  border-top: 1px solid var(--line);
  padding: 2rem 0 2.5rem;
}
.site-footer p {
  color: var(--slate);
  font-size: 0.9rem;
  max-width: 60rem;
  margin: 0 auto 0.5rem;
}
.footer-credit {
  text-align: center;
  font-size: 0.85rem;
  color: var(--mist);
}

.faq-list {
  max-width: 46rem;
  display: grid;
  gap: 0.75rem;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 1.25rem;
  box-shadow: var(--shadow-card);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--deep-forest);
  font-size: 1.0625rem;
  padding: 0.9375rem 2rem 0.9375rem 0;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brass);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-item p {
  padding: 0.875rem 0 1.125rem;
  color: var(--slate);
  margin: 0;
  font-size: 0.98rem;
}

/* Step cards used by how-it-works/index.html and what-it-costs/index.html.
   These three class names shipped without any rule, so the ordered lists
   rendered as bare browser lists instead of cards. Added 2026-10-12. */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.how-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.how-step {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.how-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.how-card p:not(.how-step) { font-size: 0.95rem; color: var(--slate); }
@media (max-width: 880px) { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how-grid { grid-template-columns: 1fr; } }

/* Destination detail pages. Added 2026-10-13 with /destinations/cape-town/,
   the first destination page under the /destinations/ index. */
.back-link {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: var(--pine);
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.detail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.detail-card h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.detail-card p { font-size: 0.95rem; color: var(--slate); margin-bottom: 0.5rem; }
.detail-card p:last-child { margin-bottom: 0; }
.day-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brass);
  margin-bottom: 0.5rem;
}
.cost-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .cost-table { min-width: 44rem; }
.cost-table caption {
  text-align: left;
  color: var(--slate);
  font-size: 0.9rem;
  padding-bottom: 0.875rem;
}
.cost-table th,
.cost-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.cost-table th {
  background: var(--paper-soft);
  color: var(--deep-forest);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cost-table tr:last-child td { border-bottom: 0; }
.cost-amount { white-space: nowrap; font-weight: 600; color: var(--ink); }
.fine-note {
  font-size: 0.85rem;
  color: var(--mist);
  margin-top: 0.875rem;
  max-width: 52rem;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 0;
}
.cta-note {
  text-align: center;
  color: var(--slate);
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}

/* Packages page styles. Added 2026-10-21 with /packages/ */
.pkg-badge {
  background: var(--paper-soft);
  color: var(--deep-forest);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 0.5rem;
}
.pkg-card {
  /* inherits .dest-card styles */
}
.pkg-price {
  font-weight: 700;
  color: var(--ink);
}
.pkg-inclusions {
  font-size: 0.9rem;
  color: var(--slate);
}
.pkg-btn {
  /* inherits .dest-btn styles */
}
@media (max-width: 880px) { .detail-grid { grid-template-columns: 1fr; } }