/* ============================================
   SLM SAFARIS — SHARED STYLESHEET
   ============================================ */

:root {
  --emerald-deep: #0d2818;
  --emerald: #173a26;
  --emerald-mid: #1f4d33;
  --emerald-light: #2d6647;
  --gold: #c9a961;
  --gold-bright: #e3c684;
  /* Deepened from #8a6f33 in the September 2026 accessibility pass:
     the old value measured 4.12:1 on the bone background, below the
     WCAG AA minimum of 4.5:1 for body text. This clears 4.5 on ivory,
     bone and bone-warm while reading as the same bronze. */
  --gold-deep: #775f2c;
  --bone: #f4eee0;
  --bone-warm: #e8dec6;
  --ivory: #fbf8f0;
  --charcoal: #1a1a17;
  --shadow: rgba(13, 40, 24, 0.18);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--ivory);
  line-height: 1.6;
  overflow-x: hidden;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ===== NAV ===== */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
}
nav.site-nav.scrolled,
nav.site-nav.solid {
  background: rgba(251, 248, 240, 0.96);
  backdrop-filter: blur(20px);
  padding: 14px 56px;
  border-bottom: 1px solid rgba(13, 40, 24, 0.08);
}
.logo {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--bone);
  text-transform: uppercase;
  text-decoration: none;
}
.logo span {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.05em;
}
nav.site-nav.scrolled .logo,
nav.site-nav.solid .logo { color: var(--emerald-deep); }
.nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }
.nav-links a {
  color: var(--bone);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  position: relative;
  transition: color 0.3s ease;
}
nav.site-nav.scrolled .nav-links a,
nav.site-nav.solid .nav-links a { color: var(--emerald-deep); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.4s ease;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a.active::after { width: 100%; }

/* ===== Safari Experiences dropdown =====================================
   The label itself stays a real link to /safari-experiences; the caret beside
   it is a separate button so that the parent page is still reachable in one
   click. Desktop opens on hover AND on :focus-within, so tabbing through the
   nav reveals the submenu without any JavaScript; the button adds an explicit
   control for touch and for screen readers, and site.js keeps aria-expanded
   truthful. Below 900px the nav is a stacked panel and the submenu becomes an
   indented block that the same button expands — no hover involved. */
.has-sub { position: relative; display: flex; align-items: center; gap: 6px; }
.sub-toggle {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
  color: inherit;
}
.sub-toggle::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s ease;
  opacity: 0.75;
}
.has-sub.open > .sub-toggle::before { transform: rotate(-135deg) translate(-2px, -2px); }
.sub-toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.nav-links .subnav {
  list-style: none;
  position: absolute;
  top: 100%; left: -22px;
  min-width: 268px;
  margin: 0;
  padding: 14px 0;
  background: var(--ivory);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 2px;
  box-shadow: 0 24px 48px rgba(13, 40, 24, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
  z-index: 60;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav,
.has-sub.open > .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* keeps the pointer from falling through the gap between label and panel */
.has-sub::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 16px; }
.nav-links .subnav li { display: block; }
.nav-links .subnav a {
  display: block;
  padding: 11px 26px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--emerald-deep);
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav-links .subnav a::after { display: none; }
.nav-links .subnav a:hover,
.nav-links .subnav a:focus-visible { background: rgba(201, 169, 97, 0.14); color: var(--gold-deep, #8a6d24); }

.nav-cta {
  border: 1px solid var(--gold);
  padding: 10px 22px;
  color: var(--gold) !important;
  transition: all 0.4s ease;
}
.nav-cta:hover { background: var(--gold); color: var(--emerald-deep) !important; }
.nav-cta::after { display: none; }
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--bone);
  cursor: pointer;
  font-size: 22px;
}
nav.site-nav.scrolled .menu-toggle,
nav.site-nav.solid .menu-toggle { color: var(--emerald-deep); }

/* ===== PAGE HERO (fullscreen, editorial) ===== */
.page-hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--emerald-deep);
}
.page-hero-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,40,24,0.55) 0%, rgba(13,40,24,0.3) 40%, rgba(13,40,24,0.88) 100%),
              radial-gradient(ellipse at 70% 30%, rgba(201,169,97,0.15), transparent 60%);
}
.page-hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.45;
  mix-blend-mode: overlay;
}
.page-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 56px 100px;
  color: var(--bone);
  max-width: 1500px;
  margin: 0 auto;
}
.breadcrumb {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: fadeUp 1.2s 0.3s forwards;
}
.breadcrumb::before { content: ''; width: 60px; height: 1px; background: var(--gold); }
.breadcrumb a { color: rgba(244,238,224,0.7); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span.sep { color: rgba(244,238,224,0.4); }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(50px, 8.5vw, 124px);
  line-height: 0.96;
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 1100px;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 1.2s 0.5s forwards;
}
.page-hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}
.page-hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 40px;
  opacity: 0;
  animation: fadeUp 1.2s 0.8s forwards;
}
.page-hero p.lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 300;
  color: var(--bone-warm);
  max-width: 540px;
  line-height: 1.5;
}
.page-hero-coords {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bone-warm);
  text-align: right;
  line-height: 2;
  border-left: 1px solid var(--gold);
  padding-left: 22px;
}
.page-hero-coords em {
  color: var(--gold);
  font-style: italic;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
  font-size: 16px;
}
.page-hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--bone-warm);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 1.5s 1.5s forwards;
  z-index: 2;
}
.page-hero-scroll-line {
  width: 1px; height: 48px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  50% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== SECTIONS ===== */
.section {
  padding: 110px 56px;
  position: relative;
}
.section-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.section-narrow { max-width: 1080px; margin: 0 auto; }
.section-label {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.section-label::before { content: ''; width: 32px; height: 1px; background: var(--gold-deep); }
.section-label.center { justify-content: center; }
h2.h-display {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--emerald-deep);
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
h2.h-display em { font-style: italic; color: var(--gold-deep); }

/* ===== AT-A-GLANCE FACTS BAR ===== */
.facts-bar {
  background: var(--ivory);
  padding: 70px 56px;
  border-bottom: 1px solid rgba(13, 40, 24, 0.08);
}
.facts-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
}
.fact { padding: 0; }
.fact h5 {
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
  font-weight: 500;
  font-family: var(--font-body);
}
.fact h5::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 12px;
}
.fact p {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--emerald-deep);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.fact p em { font-style: italic; color: var(--gold-deep); font-weight: 300; }

/* ===== INTRO PROSE BLOCK ===== */
.prose-block {
  background: var(--ivory);
  padding: 140px 56px;
}
.prose-block .section-narrow {
  max-width: 980px;
  margin: 0 auto;
}
.prose-block .lead-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 300;
  color: var(--emerald);
  line-height: 1.35;
  margin-bottom: 50px;
  max-width: 880px;
  letter-spacing: -0.005em;
}
.prose-block p {
  font-size: 17px;
  color: rgba(26, 26, 23, 0.75);
  margin-bottom: 24px;
  max-width: 760px;
  font-weight: 300;
  line-height: 1.85;
}
.prose-block p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  color: var(--gold-deep);
  float: left;
  line-height: 0.9;
  padding-right: 12px;
  padding-top: 8px;
  font-style: italic;
}

/* ===== ITINERARY (DAY BY DAY) ===== */
.itinerary {
  background: var(--bone);
  padding: 130px 56px;
}
.itinerary-inner { max-width: 1100px; margin: 0 auto; }
.itinerary-header { margin-bottom: 70px; text-align: center; }
.day-list { list-style: none; }
.day {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 50px;
  padding: 40px 0;
  border-top: 1px solid rgba(13, 40, 24, 0.12);
  align-items: start;
}
.day:last-child { border-bottom: 1px solid rgba(13, 40, 24, 0.12); }
.day-number {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}
.day-number .num {
  display: block;
  font-size: 48px;
  font-weight: 400;
  color: var(--emerald-deep);
  line-height: 1;
  margin-bottom: 4px;
  font-style: normal;
}
.day-number .lab {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.day-content h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--emerald-deep);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.day-content .day-loc {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}
.day-content p {
  font-size: 15.5px;
  color: rgba(26, 26, 23, 0.72);
  line-height: 1.75;
  font-weight: 300;
  max-width: 720px;
}

/* ===== ACCOMMODATION GRID ===== */
.accom {
  background: var(--ivory);
  padding: 130px 56px;
}
.accom-inner { max-width: 1300px; margin: 0 auto; }
.accom-header { text-align: center; margin-bottom: 70px; }
.accom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.accom-card {
  background: var(--bone);
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease;
}
.accom-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px var(--shadow);
}
.accom-img {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.accom-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13,40,24,0.3) 100%);
}
.accom-body { padding: 30px 28px; }
.accom-body .nights {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--gold-deep);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.accom-body h4 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--emerald-deep);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.accom-body ul { list-style: none; }
.accom-body li {
  font-size: 14px;
  color: rgba(26, 26, 23, 0.7);
  padding: 4px 0 4px 18px;
  position: relative;
  font-weight: 300;
}
.accom-body li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-size: 22px;
  line-height: 1.4;
}

/* ===== INCLUDED / EXCLUDED ===== */
.inclusions {
  background: var(--emerald-deep);
  color: var(--bone);
  padding: 130px 56px;
  position: relative;
}
.inclusions::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.66 0 0 0 0 0.38 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}
.inc-inner {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}
.inc-header { text-align: center; margin-bottom: 70px; }
.inc-header h2 { color: var(--bone); }
.inc-header h2 em { color: var(--gold); }
.inc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.inc-col h4 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(201,169,97,0.2);
}
.inc-col h4 em { font-style: italic; }
.inc-col ul { list-style: none; }
.inc-col li {
  font-size: 15px;
  color: var(--bone-warm);
  padding: 10px 0 10px 28px;
  position: relative;
  line-height: 1.6;
  font-weight: 300;
  border-bottom: 1px solid rgba(201,169,97,0.08);
}
.inc-col li::before {
  position: absolute;
  left: 0;
  top: 11px;
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
}
.inc-col.included li::before {
  content: '✓';
  color: var(--gold);
  font-weight: 500;
  font-style: normal;
}
.inc-col.excluded li::before {
  content: '×';
  color: rgba(232, 222, 198, 0.4);
  font-size: 22px;
  top: 8px;
}

/* ===== BEST TIME TO VISIT ===== */
.season {
  background: var(--bone);
  padding: 130px 56px;
}
.season-inner { max-width: 1300px; margin: 0 auto; }
.season-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 70px; align-items: end; }
.season-header p {
  font-size: 16px;
  color: rgba(26, 26, 23, 0.7);
  line-height: 1.8;
  font-weight: 300;
  max-width: 460px;
}
.season-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: rgba(13,40,24,0.08);
}
.season-card {
  background: var(--ivory);
  padding: 40px 28px;
  transition: all 0.4s ease;
}
.season-card:hover {
  background: var(--emerald-deep);
  color: var(--bone);
}
.season-card:hover h5,
.season-card:hover .season-months { color: var(--gold); }
.season-card:hover p { color: var(--bone-warm); }
.season-months {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--gold-deep);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
  transition: color 0.4s ease;
}
.season-card h5 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--emerald-deep);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
  transition: color 0.4s ease;
}
.season-card p {
  font-size: 14px;
  color: rgba(26, 26, 23, 0.7);
  line-height: 1.7;
  font-weight: 300;
  transition: color 0.4s ease;
}

/* ===== PHOTO GALLERY ===== */
.gallery {
  background: var(--ivory);
  padding: 130px 56px;
}
.gallery-inner { max-width: 1500px; margin: 0 auto; }
.gallery-header { text-align: center; margin-bottom: 70px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 12px;
}
.gallery-item {
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(13, 40, 24, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute;
  top: 30px; right: 40px;
  background: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  width: 50px; height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.3s ease;
}
.lightbox-close:hover { background: var(--gold); color: var(--emerald-deep); }

/* ===== ENQUIRY FORM ===== */
.enquiry {
  background: var(--emerald);
  color: var(--bone);
  padding: 130px 56px;
  position: relative;
}
.enquiry-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.enquiry-text h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  font-weight: 300;
  color: var(--bone);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.enquiry-text h2 em { font-style: italic; color: var(--gold); }
.enquiry-text p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--bone-warm);
  line-height: 1.5;
  margin-bottom: 30px;
  font-weight: 300;
}
.enquiry-text .contact-quick {
  font-size: 14px;
  color: var(--bone-warm);
  line-height: 2;
  font-weight: 300;
  border-top: 1px solid rgba(201,169,97,0.2);
  padding-top: 24px;
}
.enquiry-text .contact-quick strong {
  color: var(--gold);
  font-weight: 400;
  display: inline-block;
  width: 80px;
  letter-spacing: 0.05em;
}
.enquiry-text .contact-quick a { color: var(--bone); text-decoration: none; transition: color 0.3s; }
.enquiry-text .contact-quick a:hover { color: var(--gold); }

.form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { position: relative; }
.field label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(201,169,97,0.3);
  padding: 10px 0;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--gold); }
.field select option { background: var(--emerald-deep); color: var(--bone); }
.field textarea { resize: vertical; min-height: 90px; }
.form button {
  margin-top: 14px;
  align-self: flex-start;
  padding: 18px 40px;
  background: var(--gold);
  color: var(--emerald-deep);
  border: 1px solid var(--gold);
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s ease;
  font-family: var(--font-body);
}
.form button:hover { background: transparent; color: var(--gold); }

/* ===== CTA ===== */
.cta-block {
  background: var(--ivory);
  padding: 130px 56px;
  text-align: center;
}
.cta-inner { max-width: 760px; margin: 0 auto; }
.cta-block h2 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 300;
  color: var(--emerald-deep);
  line-height: 1.02;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.cta-block h2 em { font-style: italic; color: var(--gold-deep); }
.cta-block p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  color: var(--emerald);
  margin-bottom: 38px;
  font-weight: 300;
}
.btn {
  display: inline-block;
  padding: 18px 42px;
  background: var(--emerald-deep);
  color: var(--bone);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  border: 1px solid var(--emerald-deep);
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
  font-weight: 400;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-101%);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.btn span { position: relative; z-index: 1; }
.btn:hover { color: var(--emerald-deep); border-color: var(--gold); }
.btn:hover::before { transform: translateX(0); }
.btn-secondary {
  display: inline-block;
  padding: 18px 42px;
  background: transparent;
  color: var(--emerald-deep);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  border: 1px solid var(--emerald-deep);
  transition: all 0.4s ease;
  font-weight: 400;
  margin-left: 14px;
}
.btn-secondary:hover { background: var(--emerald-deep); color: var(--bone); }

/* ===== FOOTER ===== */
footer.site-footer {
  background: #0a1810;
  color: var(--bone-warm);
  padding: 90px 56px 36px;
}
.footer-grid {
  max-width: 1400px;
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 70px;
}
.footer-brand .logo {
  color: var(--bone);
  margin-bottom: 22px;
  display: inline-block;
}
.footer-brand p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--bone-warm);
  line-height: 1.6;
  max-width: 380px;
  font-weight: 300;
  margin-bottom: 22px;
}
.footer-socials { display: flex; gap: 14px; }
.footer-socials a {
  width: 36px; height: 36px;
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  text-decoration: none;
  font-size: 11px;
  transition: all 0.3s ease;
}
.footer-socials a:hover { background: var(--gold); color: var(--emerald-deep); }
.footer-col h5 {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
  font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--bone-warm);
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  transition: color 0.3s ease;
}
.footer-col a:hover { color: var(--gold); }
.footer-col p { font-size: 14px; color: var(--bone-warm); line-height: 1.7; font-weight: 300; }
.footer-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(201, 169, 97, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 238, 224, 0.5);
}
.footer-bottom em {
  color: var(--gold);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.05em;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  nav.site-nav { padding: 18px 24px; }
  nav.site-nav.scrolled, nav.site-nav.solid { padding: 12px 24px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ivory);
    flex-direction: column;
    padding: 26px 24px;
    gap: 18px;
    border-bottom: 1px solid rgba(13, 40, 24, 0.08);
  }
  .nav-links.open a { color: var(--emerald-deep); }
  .menu-toggle { display: block; }

  /* Submenu, mobile: an indented block inside the stacked panel. Hover and
     focus-within must NOT open it here — a tap would open it and never close
     it — so only the .open class set by the button counts. */
  /* label and caret centred together, like every other item in the stacked
     panel; the submenu drops underneath them on its own full-width row */
  .has-sub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
    position: static;
  }
  .sub-toggle { padding: 10px 4px; }
  .nav-links .subnav {
    flex-basis: 100%;
    text-align: center;
    position: static;
    min-width: 0;
    width: 100%;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .has-sub:hover > .subnav,
  .has-sub:focus-within > .subnav { display: none; }
  .has-sub.open > .subnav {
    display: block;
    margin-top: 14px;
    padding: 14px 0 4px;
    border-top: 1px solid rgba(201, 169, 97, 0.4);
  }
  .nav-links .subnav a { padding: 9px 0; font-size: 10.5px; }
  .has-sub::after { display: none; }
  .section, .itinerary, .accom, .inclusions, .season, .gallery, .enquiry, .cta-block, .facts-bar, .prose-block, footer.site-footer { padding-left: 24px; padding-right: 24px; }
  .page-hero-content { padding: 0 24px 60px; }
  .page-hero-meta { flex-direction: column; align-items: flex-start; }
  .page-hero-coords { border-left: none; padding-left: 0; text-align: left; border-top: 1px solid var(--gold); padding-top: 16px; }
  .facts-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .day { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; }
  .day-number { display: flex; align-items: baseline; gap: 12px; }
  .day-number .num { font-size: 36px; }
  .accom-grid { grid-template-columns: 1fr; gap: 24px; }
  .inc-grid { grid-template-columns: 1fr; gap: 50px; }
  .season-header { grid-template-columns: 1fr; gap: 30px; }
  .season-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .gallery-item.wide { grid-column: span 2; }
  .enquiry-inner { grid-template-columns: 1fr; gap: 50px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
  .btn-secondary { margin-left: 0; margin-top: 14px; }
  .prose-block { padding: 90px 24px; }
  .prose-block p:first-of-type::first-letter { font-size: 48px; }
}

/* ============================================
   TRUST, TRADE & CONTENT COMPONENTS
   Added for travel-trade readiness. Uses existing
   tokens only — no new colours, no new fonts.
   ============================================ */

/* ===== SKIP LINK & LANDMARKS ===== */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gold); color: var(--emerald-deep);
  padding: 14px 24px; font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ===== TRUST STRIP (compact, understated) ===== */
.trust-strip {
  background: var(--ivory);
  border-top: 1px solid rgba(13, 40, 24, 0.08);
  border-bottom: 1px solid rgba(13, 40, 24, 0.08);
  padding: 46px 56px;
}
.trust-strip-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px;
}
.trust-fact h5 {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 9px; font-weight: 500;
}
.trust-fact p {
  font-family: var(--font-display); font-size: 19px; font-weight: 300;
  color: var(--emerald-deep); line-height: 1.35;
}
.trust-fact p .sub {
  display: block; font-family: var(--font-body); font-size: 13px;
  color: rgba(26, 26, 23, 0.6); margin-top: 5px; line-height: 1.5;
}

/* ===== CREDENTIALS TABLE ===== */
.credentials { background: var(--bone); padding: 130px 56px; }
.cred-inner { max-width: 1080px; margin: 0 auto; }
.cred-header { margin-bottom: 54px; }
.cred-note {
  font-size: 14px; color: rgba(26, 26, 23, 0.62);
  line-height: 1.75; font-weight: 300; max-width: 640px; margin-top: 18px;
}
.cred-list { list-style: none; border-top: 1px solid rgba(13, 40, 24, 0.12); }
.cred-row {
  display: grid; grid-template-columns: 300px 1fr; gap: 40px;
  padding: 24px 0; border-bottom: 1px solid rgba(13, 40, 24, 0.12);
  align-items: baseline;
}
.cred-row dt, .cred-key {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500;
}
.cred-row dd, .cred-val {
  font-family: var(--font-display); font-size: 20px; font-weight: 300;
  color: var(--emerald-deep); line-height: 1.45;
}
.cred-val .sub {
  display: block; font-family: var(--font-body); font-size: 13.5px;
  color: rgba(26, 26, 23, 0.62); margin-top: 6px; font-weight: 300; line-height: 1.6;
}
.cred-val.pending {
  font-family: var(--font-body); font-size: 14px; font-style: italic;
  color: rgba(26, 26, 23, 0.45);
}

/* ===== TEAM ===== */
.team { background: var(--ivory); padding: 130px 56px; }
.team-inner { max-width: 1300px; margin: 0 auto; }
.team-header { text-align: center; margin-bottom: 70px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.team-card { background: var(--bone); border-radius: 2px; overflow: hidden; }
.team-photo {
  height: 340px; background-size: cover; background-position: center;
  background-color: var(--emerald); position: relative;
}
.team-photo.placeholder {
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--emerald) 0%, var(--emerald-deep) 100%);
  color: rgba(244, 238, 224, 0.5);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  text-align: center; padding: 24px;
}
.team-body { padding: 28px; }
.team-body h4 {
  font-family: var(--font-display); font-size: 24px; font-weight: 400;
  color: var(--emerald-deep); margin-bottom: 4px;
}
.team-role {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 14px;
}
.team-body p { font-size: 14.5px; line-height: 1.7; color: rgba(26, 26, 23, 0.7); font-weight: 300; }

/* ===== STORY (two-column narrative) ===== */
.story { background: var(--ivory); padding: 130px 56px; }
.story-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; align-items: center;
}
.story-text h2 {
  font-family: var(--font-display); font-size: clamp(38px, 5vw, 62px);
  font-weight: 300; color: var(--emerald-deep); line-height: 1.05;
  margin-bottom: 26px; letter-spacing: -0.01em;
}
.story-text h2 em { font-style: italic; color: var(--gold-deep); }
.story-text .lead {
  font-family: var(--font-display); font-size: 23px; font-style: italic;
  font-weight: 300; color: var(--emerald); line-height: 1.45; margin-bottom: 24px;
}
.story-text p {
  font-size: 16px; color: rgba(26, 26, 23, 0.72); margin-bottom: 20px;
  font-weight: 300; line-height: 1.8;
}
.story-visual {
  height: 620px; background-size: cover; background-position: center;
  border-radius: 2px; box-shadow: 0 30px 60px var(--shadow); position: relative;
}
.story-visual::after {
  content: ''; position: absolute; top: -20px; right: -20px;
  width: 100%; height: 100%; border: 1px solid var(--gold); z-index: -1;
}

/* ===== TESTIMONIALS ===== */
.testimonials { background: var(--bone); padding: 130px 56px; }
.testi-inner { max-width: 1300px; margin: 0 auto; }
.testi-header { text-align: center; margin-bottom: 66px; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.testi-card {
  background: var(--ivory); padding: 40px 34px; border-radius: 2px;
  border-top: 2px solid var(--gold); display: flex; flex-direction: column;
}
.testi-card blockquote {
  font-family: var(--font-display); font-size: 20px; font-style: italic;
  font-weight: 300; color: var(--emerald-deep); line-height: 1.55;
  margin-bottom: 24px; flex: 1;
}
.testi-meta { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.testi-meta .src {
  display: block; font-size: 12px; letter-spacing: 0.04em; text-transform: none;
  color: rgba(26, 26, 23, 0.5); margin-top: 6px; font-style: italic;
}
.testi-card.placeholder { border-top-color: rgba(13, 40, 24, 0.15); }
.testi-card.placeholder blockquote {
  font-family: var(--font-body); font-size: 14px; font-style: italic;
  color: rgba(26, 26, 23, 0.42); line-height: 1.7;
}
.testi-links {
  margin-top: 54px; text-align: center;
  font-size: 13px; color: rgba(26, 26, 23, 0.65); font-weight: 300;
}
.testi-links a { color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid rgba(138, 111, 51, 0.35); }
.testi-links a:hover { color: var(--emerald-deep); border-bottom-color: var(--emerald-deep); }

/* ===== JOURNEY (numbered process rail) ===== */
.journey-steps { background: var(--emerald-deep); color: var(--bone); padding: 140px 56px; }
.js-inner { max-width: 1200px; margin: 0 auto; }
.js-header { text-align: center; margin-bottom: 70px; }
.js-header h2 {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 68px);
  font-weight: 300; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 18px;
}
.js-header h2 em { font-style: italic; color: var(--gold); }
.js-header p {
  font-size: 16px; color: var(--bone-warm); max-width: 660px;
  margin: 0 auto; font-weight: 300; line-height: 1.8;
}
.js-list { list-style: none; counter-reset: js; }
.js-step {
  counter-increment: js;
  display: grid; grid-template-columns: 90px 1fr; gap: 34px;
  padding: 30px 0; border-bottom: 1px solid rgba(201, 169, 97, 0.18);
}
.js-step:last-child { border-bottom: none; }
.js-step::before {
  content: counter(js, decimal-leading-zero);
  font-family: var(--font-display); font-size: 40px; font-style: italic;
  font-weight: 300; color: var(--gold); line-height: 1;
}
.js-step h4 {
  font-family: var(--font-display); font-size: 26px; font-weight: 400;
  margin-bottom: 8px; line-height: 1.2;
}
.js-step p { font-size: 15px; color: var(--bone-warm); line-height: 1.75; font-weight: 300; }
.js-note {
  margin-top: 46px; padding: 26px 30px;
  border: 1px solid rgba(201, 169, 97, 0.3);
  font-size: 14px; color: var(--bone-warm); line-height: 1.75; font-weight: 300;
}
.js-note strong { color: var(--gold); font-weight: 500; }

/* ===== SERVICE GRID (trade capabilities) ===== */
.services { background: var(--ivory); padding: 130px 56px; }
.services-inner { max-width: 1300px; margin: 0 auto; }
.services-header { margin-bottom: 66px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: rgba(13, 40, 24, 0.1); }
.service {
  background: var(--ivory); padding: 40px 34px;
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service:hover { background: var(--bone); }
.service h4 {
  font-family: var(--font-display); font-size: 23px; font-weight: 400;
  color: var(--emerald-deep); margin-bottom: 10px; line-height: 1.25;
}
.service p { font-size: 14.5px; color: rgba(26, 26, 23, 0.7); line-height: 1.7; font-weight: 300; }

/* ===== TRADE PANEL (dark, for "how we work") ===== */
.trade-panel { background: var(--emerald); color: var(--bone); padding: 130px 56px; }
.tp-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; align-items: start;
}
.tp-text h2 {
  font-family: var(--font-display); font-size: clamp(38px, 5vw, 60px);
  font-weight: 300; line-height: 1.05; margin-bottom: 24px;
}
.tp-text h2 em { font-style: italic; color: var(--gold); }
.tp-text p { font-size: 16px; color: var(--bone-warm); line-height: 1.8; font-weight: 300; margin-bottom: 18px; }
.tp-list { list-style: none; }
.tp-item { padding: 22px 0; border-bottom: 1px solid rgba(201, 169, 97, 0.2); }
.tp-item:last-child { border-bottom: none; }
.tp-item h4 {
  font-family: var(--font-display); font-size: 22px; font-weight: 400;
  color: var(--bone); margin-bottom: 7px;
}
.tp-item p { font-size: 14.5px; color: var(--bone-warm); line-height: 1.7; font-weight: 300; }

/* ===== PROSE PAGE (policies) ===== */
.policy { background: var(--ivory); padding: 150px 56px 120px; }
.policy-inner { max-width: 860px; margin: 0 auto; }
.policy h1 {
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 68px);
  font-weight: 300; color: var(--emerald-deep); line-height: 1.05;
  margin-bottom: 20px; letter-spacing: -0.01em;
}
.policy .updated {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 50px;
}
.policy h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 400;
  color: var(--emerald-deep); margin: 48px 0 16px; line-height: 1.2;
}
.policy h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: var(--emerald-deep); margin: 30px 0 10px;
}
.policy p, .policy li {
  font-size: 16px; color: rgba(26, 26, 23, 0.75);
  line-height: 1.85; font-weight: 300; margin-bottom: 14px;
}
.policy ul, .policy ol { margin: 0 0 20px 22px; }
.policy li { margin-bottom: 8px; }
.policy a { color: var(--gold-deep); }
.policy .todo {
  display: block; background: rgba(201, 169, 97, 0.12);
  border-left: 2px solid var(--gold); padding: 18px 22px;
  font-size: 14px; font-style: italic; color: rgba(26, 26, 23, 0.7);
  margin: 20px 0; line-height: 1.7;
}

/* ===== 404 ===== */
.notfound {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--emerald-deep); color: var(--bone);
  text-align: center; padding: 120px 24px 80px;
}
.notfound-inner { max-width: 620px; }
.notfound h1 {
  font-family: var(--font-display); font-size: clamp(46px, 8vw, 90px);
  font-weight: 300; line-height: 1.05; margin-bottom: 22px;
}
.notfound h1 em { font-style: italic; color: var(--gold); }
.notfound p { font-size: 16px; color: var(--bone-warm); line-height: 1.8; font-weight: 300; margin-bottom: 34px; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; }
.notfound-links a {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201, 169, 97, 0.4);
  padding-bottom: 4px; transition: all 0.3s ease;
}
.notfound-links a:hover { color: var(--bone); border-bottom-color: var(--bone); }

/* ===== FORM STATUS & EXTRAS ===== */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status {
  font-size: 14px; line-height: 1.7; padding: 16px 20px;
  border-left: 2px solid var(--gold); background: rgba(201, 169, 97, 0.12);
  color: var(--bone); font-weight: 300;
}
.form-status[hidden] { display: none; }
.form-status.error { border-left-color: #c96161; background: rgba(201, 97, 97, 0.14); }
.form-consent {
  font-size: 12.5px; color: rgba(244, 238, 224, 0.6);
  line-height: 1.65; font-weight: 300;
}
.form-consent a { color: var(--gold); }
.enquiry.light { background: var(--bone); color: var(--charcoal); }
.enquiry.light .enquiry-text h2 { color: var(--emerald-deep); }
.enquiry.light .enquiry-text p { color: rgba(26, 26, 23, 0.72); }
.enquiry.light .field label { color: var(--gold-deep); }
.enquiry.light .field input,
.enquiry.light .field select,
.enquiry.light .field textarea {
  color: var(--charcoal);
  border-bottom-color: rgba(13, 40, 24, 0.25);
}
.enquiry.light .field select option { background: var(--ivory); color: var(--charcoal); }
.enquiry.light .contact-quick { border-color: rgba(13, 40, 24, 0.15); }
.enquiry.light .contact-quick a,
.enquiry.light .contact-quick p { color: var(--emerald-deep); }
.enquiry.light .form-status { color: var(--charcoal); }
.enquiry.light .form-consent { color: rgba(26, 26, 23, 0.55); }
.enquiry.light .form-consent a { color: var(--gold-deep); }

/* ===== AVAILABILITY / DISCLAIMER NOTE ===== */
.avail-note {
  max-width: 1300px; margin: 46px auto 0;
  padding: 20px 26px; border: 1px solid rgba(13, 40, 24, 0.14);
  font-size: 13.5px; line-height: 1.75; color: rgba(26, 26, 23, 0.65);
  font-weight: 300;
}
.accom .avail-note { background: rgba(251, 248, 240, 0.6); }
.avail-note strong { color: var(--emerald-deep); font-weight: 500; }
.inclusions .avail-note {
  border-color: rgba(201, 169, 97, 0.3);
  color: var(--bone-warm);
}
.inclusions .avail-note strong { color: var(--gold); }

/* ===== CONTACT DETAIL GRID ===== */
.contact-detail { background: var(--ivory); padding: 130px 56px; }
.cd-inner {
  max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px;
}
.cd-block h4 {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: 14px; font-weight: 500;
}
.cd-block p, .cd-block a {
  font-family: var(--font-display); font-size: 21px; font-weight: 300;
  color: var(--emerald-deep); line-height: 1.5; text-decoration: none;
}
.cd-block a:hover { color: var(--gold-deep); }
.cd-block .sub {
  display: block; font-family: var(--font-body); font-size: 13.5px;
  color: rgba(26, 26, 23, 0.6); margin-top: 8px; line-height: 1.65;
}

/* ===== RESPONSIVE — new components ===== */
@media (max-width: 900px) {
  .trust-strip, .credentials, .team, .story, .testimonials,
  .journey-steps, .services, .trade-panel, .policy, .contact-detail {
    padding-left: 24px; padding-right: 24px;
  }
  .trust-strip-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .cred-row { grid-template-columns: 1fr; gap: 8px; }
  .team-grid, .testi-grid, .services-grid, .cd-inner { grid-template-columns: 1fr; }
  .services-grid { gap: 1px; }
  .story-inner, .tp-inner { grid-template-columns: 1fr; gap: 46px; }
  .story-visual { height: 380px; }
  .js-step { grid-template-columns: 60px 1fr; gap: 20px; }
  .js-step::before { font-size: 30px; }
  .policy { padding-top: 120px; }
}
@media (max-width: 600px) {
  .trust-strip-inner { grid-template-columns: 1fr; }
}

/* ===== FOOTER LEGAL LINKS ===== */
.footer-legal a {
  color: rgba(244, 238, 224, 0.6);
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-legal a:hover { color: var(--gold); }
.footer-brand p a, .footer-col p a { color: var(--bone-warm); text-decoration: none; }
.footer-brand p a:hover, .footer-col p a:hover { color: var(--gold); }

/* ===== FACTS BAR COLUMN MODIFIERS =====
   Replaces inline grid-template-columns overrides, which beat the
   responsive media queries and caused horizontal overflow on phones. */
.facts-inner.cols-3 { grid-template-columns: repeat(3, 1fr); }
.facts-inner.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .facts-inner,
  .facts-inner.cols-3,
  .facts-inner.cols-4 { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 560px) {
  .facts-inner,
  .facts-inner.cols-3,
  .facts-inner.cols-4 { grid-template-columns: 1fr; gap: 26px; }
  .season-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery-item.wide { grid-column: span 1; }
  .gallery-item.tall { grid-row: span 1; }
}

/* ===== FIXES FOUND IN QA ===== */

/* "WhatsApp" overflowed the fixed 80px label column in the contact list. */
.enquiry-text .contact-quick strong {
  width: auto;
  min-width: 96px;
  padding-right: 10px;
}

/* The gold CTA outline sits on ivory once the nav goes solid, where
   #c9a961 on #fbf8f0 is about 2.1:1 — below the WCAG AA minimum.
   The deeper gold reaches roughly 5.3:1 while reading identically. */
nav.site-nav.solid .nav-cta,
nav.site-nav.scrolled .nav-cta {
  color: var(--gold-deep) !important;
  border-color: var(--gold-deep);
}
nav.site-nav.solid .nav-cta:hover,
nav.site-nav.scrolled .nav-cta:hover {
  background: var(--gold-deep);
  color: var(--ivory) !important;
}

/* Placeholder text was inheriting an over-light colour in the forms. */
.field input::placeholder,
.field textarea::placeholder { color: rgba(244, 238, 224, 0.55); }
.enquiry.light .field input::placeholder,
.enquiry.light .field textarea::placeholder { color: rgba(26, 26, 23, 0.45); }

/* The breadcrumb was designed for the dark page hero; on the light policy
   pages its separator inherited a near-invisible colour. */
.policy .breadcrumb { color: var(--gold-deep); }
.policy .breadcrumb::before { background: var(--gold-deep); }
.policy .breadcrumb span.sep { color: rgba(26, 26, 23, 0.45); }
.policy .breadcrumb a { color: var(--gold-deep); }
.policy .breadcrumb a:hover { color: var(--emerald-deep); }

/* The footer now carries the registered entity and registration numbers, which
   is longer than the old copyright line. Let the row wrap and ease the tracking
   on that span so it does not crowd the links beside it. */
.footer-bottom { flex-wrap: wrap; row-gap: 12px; }
.footer-entity { letter-spacing: .06em; }

/* ===== ACCOMMODATION CARD NOTE =====
   Marks a card whose photograph is regional imagery rather than a picture of
   the named property. Deliberately quiet but legible — it is a disclosure, not
   a decoration, and it must survive a skim. */
.accom-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(13, 40, 24, 0.12);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(26, 26, 23, 0.58);
  font-style: italic;
  font-weight: 300;
}


/* ===== Policy tables (cancellation schedule) ===== */
.policy .table-wrap { overflow-x: auto; margin: 0 0 26px; }
.policy table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  font-weight: 300;
  min-width: 420px;
}
.policy table th,
.policy table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(26,26,23,0.1);
  line-height: 1.6;
}
.policy table th {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold-deep);
  border-bottom: 1px solid rgba(26,26,23,0.22);
}
.policy table tr:last-child td { border-bottom: none; }
.policy table td:last-child { font-weight: 400; white-space: nowrap; }


/* =============================================================================
   JOURNEY CARDS  —  the six-safari grid
   =============================================================================
   Added 12 September 2026. These rules were written inside the <style> block of
   index.html and nowhere else, so safari-experiences.html — which uses exactly
   the same markup — had nothing to style them with and rendered the whole grid
   as plain text and underlined links. Anything used by more than one page
   belongs here, not in a page.
   ========================================================================== */

/* Journeys */
.journeys {
  background: var(--emerald-deep);
  color: var(--bone);
  padding: 150px 56px;
  position: relative;
}
.journeys::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.66 0 0 0 0 0.38 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
}
.journeys-header {
  max-width: 1400px;
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
.journeys-header h2 {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.journeys-header h2 em { font-style: italic; color: var(--gold); }
.journeys-header p {
  font-size: 16px;
  color: var(--bone-warm);
  line-height: 1.8;
  font-weight: 300;
  max-width: 480px;
}
.journey-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 40px;
}
.journey {
  position: relative;
  border-top: 1px solid rgba(201, 169, 97, 0.25);
  padding-top: 30px;
  transition: all 0.5s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.journey:hover { border-top-color: var(--gold); }
.journey-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 18px;
}
.journey-image {
  width: 100%;
  height: 320px;
  border-radius: 2px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.journey:hover .journey-image { transform: translateY(-8px); }
.journey-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(13,40,24,0.4) 100%);
}
.journey h3 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 6px;
  line-height: 1.15;
}
.journey h3 em { font-style: italic; color: var(--gold); font-weight: 300; }
.journey-region {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.journey p {
  color: var(--bone-warm);
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 18px;
}
.journey-link {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.journey-link::after { content: '→'; transition: transform 0.4s ease; }
.journey:hover .journey-link::after { transform: translateX(6px); }

@media (max-width: 900px) {
  .journeys-header { grid-template-columns: 1fr; gap: 32px; }
  .journey-grid { grid-template-columns: 1fr; gap: 50px; }
  .journeys { padding-left: 24px; padding-right: 24px; }
}