/* ==========================================================================
   Mother Continent Explorers — explorers.africa
   Design system: tokens, layout, components
   Font: Sanchez (headings + body), system sans reserved for UI chrome only
   ========================================================================== */

:root{
  /* Palette — Bwindi forest + savanna gold, crisp white ground */
  --ink:        #1B2620;
  --ink-soft:   #4B5A4F;
  --ink-faint:  #7C8A7B;
  --bg:         #FCFCFA;
  --surface:    #FFFFFF;
  --surface-alt:#F5F4EE;
  --line:       #E3E0D3;
  --line-soft:  #ECEAE1;

  --gold:       #C1791E;
  --gold-deep:  #96601A;
  --gold-tint:  #F3E1C2;

  --forest:      #2E4A3A;
  --forest-deep: #16261B;
  --forest-tint: #DCE6DC;

  --terracotta: #A8492F;
  --terracotta-tint: #F0DAD1;

  --cream:      #F8F5E9;

  --shadow-sm: 0 1px 2px rgba(27,38,32,0.08);
  --shadow-md: 0 6px 20px rgba(27,38,32,0.10);
  --shadow-lg: 0 18px 44px rgba(27,38,32,0.16);

  --serif: "Sanchez", "Iowan Old Style", Georgia, "Noto Serif", serif;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --menu-font: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; }

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.01em; }
h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.005em; }
h3{ font-size: 1.3rem; }
h4{ font-size: 1.05rem; }

p{ margin: 0 0 1rem; color: var(--ink-soft); max-width: 62ch; }
p.lede{ font-size: 1.15rem; color: var(--ink-soft); }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.section{ padding: 84px 0; }
.section--tight{ padding: 56px 0; }
.section--alt{ background: var(--surface-alt); }
.section--forest{ background: var(--forest-deep); color: var(--cream); }
.section--forest h2, .section--forest h3, .section--forest p{ color: var(--cream); }
.section--forest .ink-soft-on-dark{ color: #C9D2C6; }

.section-head{ max-width: 720px; margin: 0 0 40px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head p{ max-width: 62ch; }
.section-head.center p{ margin-left: auto; margin-right: auto; }

/* ---- UI chrome uses the sans face: nav, buttons, tags, labels ---- */
.ui{ font-family: var(--sans); }

.tag{
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 100px;
  display: inline-block;
}
.tag--gold{ background: var(--gold-tint); color: var(--gold-deep); }
.tag--forest{ background: var(--forest-tint); color: var(--forest); }
.tag--terracotta{ background: var(--terracotta-tint); color: var(--terracotta); }
.tag--dark{ background: rgba(255,255,255,0.14); color: var(--cream); }

.btn{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg{ width: 16px; height: 16px; }
.btn:hover{ transform: translateY(-1px); }
.btn--primary{ background: var(--gold); color: var(--cream); }
.btn--primary:hover{ background: var(--gold-deep); }
.btn--outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover{ background: var(--ink); color: var(--cream); }
.btn--on-dark{ background: var(--cream); color: var(--forest-deep); }
.btn--on-dark:hover{ background: #fff; }
.btn--ghost-dark{ background: transparent; border-color: rgba(248,245,233,0.5); color: var(--cream); }
.btn--ghost-dark:hover{ background: rgba(248,245,233,0.12); }
.btn--sm{ padding: 9px 18px; font-size: 0.85rem; }
.btn--block{ width: 100%; justify-content: center; }

.icon{ font-size: 20px; line-height: 1; color: currentColor; display: inline-block; text-align: center; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{
  background: var(--forest-deep);
  color: #C9D2C6;
  font-family: var(--sans);
  font-size: 0.8rem;
}
.topbar .container{ display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.topbar-links{ display: flex; gap: 20px; align-items: center; flex-wrap: wrap; row-gap: 4px; }
.topbar-links a{ white-space: nowrap; }
.topbar-links a:hover{ color: var(--cream); }
.topbar-links .icon{ font-size: 13px; margin-right: 5px; vertical-align: -1px; }
.topbar-destinations{ white-space: nowrap; }
@media (max-width: 760px){
  .topbar-destinations{ display: none; }
  .topbar .social-row{ display: none; }
}

.site-header{
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .container{ display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 24px; }

.brand{ display: flex; align-items: center; gap: 10px; line-height: 1.05; }
.brand img.logo{ height: 42px; width: auto; display: block; }
.brand .brand-text{ display: flex; flex-direction: column; }
.brand .word{ font-family: var(--serif); font-size: 1.5rem; color: var(--forest-deep); }
.brand .dom{ font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-top: 3px; }

.header-cta{ display: flex; align-items: center; gap: 12px; }

/* Menu toggle — replaces the old inline hover nav entirely */
.menu-toggle{
  display: flex; align-items: center; gap: 9px; background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 100px; padding: 10px 20px 10px 16px;
  font-family: var(--sans); font-weight: 600; font-size: 0.9rem; color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.menu-toggle:hover{ border-color: var(--gold); background: var(--surface-alt); }
.menu-toggle .icon{ font-size: 16px; }

/* Full screen mega menu overlay — benchmarked on giltedge.travel's menu */
.menu-overlay{
  position: fixed; inset: 0; z-index: 200; background: #FFFFFF;
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  overflow-y: auto; font-family: var(--menu-font);
}
.menu-overlay.open{ opacity: 1; visibility: visible; transform: translateY(0); }
.menu-overlay-inner{ max-width: 1400px; margin: 0 auto; padding: 96px 32px 60px; position: relative; }
.menu-close{
  position: absolute; top: 26px; right: 32px; display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line); border-radius: 100px; padding: 9px 18px 9px 14px;
  font-family: var(--menu-font); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--forest-deep); cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.menu-close:hover{ background: var(--forest-deep); border-color: var(--forest-deep); color: #fff; }
.menu-close .icon{ font-size: 13px; }

.menu-columns{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)) 300px; gap: 30px; align-items: start; }
.menu-col h4{
  font-family: var(--menu-font); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--forest-deep); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--forest-deep);
}
.menu-list li{ border-bottom: 1px solid var(--line-soft); }
.menu-list li:first-child a{ padding-top: 0; }
.menu-list a{
  display: block; padding: 8px 0; font-family: var(--menu-font); font-size: 0.85rem; font-weight: 400; color: var(--ink);
  transition: color 0.15s ease;
}
.menu-list a:hover, .menu-list a:focus-visible{ color: var(--forest-deep); font-weight: 700; }
.menu-col > .btn{ margin-top: 18px; }
.menu-all-link{
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: var(--menu-font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--forest-deep);
}
.menu-all-link:hover{ text-decoration: underline; }

.menu-region-tabs{ display: flex; flex-direction: column; margin-bottom: 4px; }
.menu-region-tabs button{
  text-align: left; font-family: var(--menu-font); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--ink-soft);
  background: none; border: none; border-bottom: 1px solid var(--line-soft); padding: 8px 0; cursor: pointer;
  transition: color 0.15s ease;
}
.menu-region-tabs button:hover{ color: var(--forest-deep); }
.menu-region-tabs button.is-active{ color: var(--forest-deep); }
.menu-region-panel{ display: none; flex-direction: column; }
.menu-region-panel.is-active{ display: flex; }
.menu-region-panel a{
  font-family: var(--menu-font); font-size: 0.82rem; color: var(--ink-soft); padding: 6px 0 6px 4px;
}
.menu-region-panel a:hover{ color: var(--forest-deep); }

.menu-feature{ position: sticky; top: 0; }
.menu-feature .scene{ aspect-ratio: 3 / 4; }
.menu-feature-cap{
  margin-top: 12px; font-family: var(--menu-font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--forest-deep); text-align: center;
}

@media (max-width: 1200px){
  .menu-columns{ grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
  .menu-feature{ display: none; }
}
@media (max-width: 900px){
  .menu-columns{ grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .menu-overlay-inner{ padding-top: 88px; }
}
@media (max-width: 620px){
  .menu-columns{ grid-template-columns: 1fr; gap: 26px; }
  .header-cta .btn span{ display: none; }
  .menu-toggle span{ display: none; }
  .menu-close span{ display: none; }
}

/* ==========================================================================
   Image frames (.scene) — show a real photo when one exists; otherwise a clean
   branded panel (MCE logo on warm cream) that is ready for a photo to drop in.
   ========================================================================== */
.scene{
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  aspect-ratio: 4 / 3; container-type: inline-size; isolation: isolate;
  background: #F1EBD6 url("../images/site/logo.png") center 40% / auto 52% no-repeat;
  text-align: center; padding: 12px;
}
.scene::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.7), rgba(241,235,214,0.2) 70%);
}
.scene .scene-icon{ display: none; }
.scene > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.scene .scene-cap{
  position: relative; z-index: 2;
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.01em; font-weight: 600;
  color: var(--forest-deep); padding: 5px 12px; border-radius: 100px; background: rgba(255,255,255,0.82);
}
.scene.has-photo{ background-image: none; background-color: #1c2820; }
.scene.has-photo::before{ background: linear-gradient(0deg, rgba(14,26,19,0.55), rgba(14,26,19,0) 45%); z-index: 1; }
.scene.has-photo .scene-cap{ background: rgba(14,26,19,0.62); color: #fff; }
.scene--tall{ aspect-ratio: 3 / 4; }
.scene--wide{ aspect-ratio: 16 / 9; }
.scene--square{ aspect-ratio: 1 / 1; }
.scene--hero{ aspect-ratio: 2.4 / 1; }
.scene--thumb{ aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }

/* ==========================================================================
   Hero — full-bleed background photo carousel, copy overlaid, trust strip below
   ========================================================================== */
.hero{ position: relative; background: var(--forest-deep); color: var(--cream); }
.hero-slider{ position: relative; overflow: hidden; min-height: 560px; }
.slide{
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.9s ease;
}
.slide.is-active{ opacity: 1; visibility: visible; z-index: 1; }
.slide-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.04); transition: transform 7s ease-out; }
.slide.is-active .slide-bg{ transform: scale(1.12); }
.slide::before{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(14,26,19,0.86) 0%, rgba(14,26,19,0.62) 48%, rgba(14,26,19,0.18) 100%);
}
.slide .container{ position: relative; z-index: 2; display: block; width: 100%; padding-top: 30px; padding-bottom: 56px; }
.hero-copy{ max-width: 640px; }
.hero h1{ color: var(--cream); }
.hero h1 em{ font-style: normal; color: var(--gold); }
.hero p.lede{ color: #E4EADF; max-width: 52ch; text-align: left; }
.hero-actions{ display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.slider-controls{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 18px; padding-bottom: 20px; }
.slider-arrow{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(248,245,233,0.45); background: rgba(14,26,19,0.35); color: var(--cream);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.slider-arrow:hover{ background: rgba(248,245,233,0.22); }
.slider-arrow .icon{ font-size: 15px; }
.slider-dots{ display: flex; align-items: center; gap: 8px; }
.slider-dots button{ width: 8px; height: 8px; padding: 0; border-radius: 100px; background: rgba(248,245,233,0.45); border: none; cursor: pointer; transition: width 0.25s ease, background 0.25s ease; }
.slider-dots button.is-active{ width: 24px; background: var(--gold); }

.hero-stats{ display: flex; gap: 32px 48px; flex-wrap: wrap; padding: 22px 0 26px; }
.hero-stats .stat b{ font-family: var(--serif); font-size: 1.7rem; color: var(--cream); display: block; }
.hero-stats .stat span{ font-family: var(--sans); font-size: 0.78rem; color: #A9B6A4; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 900px){
  .hero-slider{ min-height: 600px; }
  .slide::before{ background: linear-gradient(0deg, rgba(14,26,19,0.88), rgba(14,26,19,0.5)); }
}

/* ==========================================================================
   Cards: tours, destinations, lodges, features
   ========================================================================== */
.grid{ display: grid; gap: 26px; }
.grid > *{ min-width: 0; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid--3, .grid--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .grid--2{ grid-template-columns: 1fr; } }
@media (max-width: 620px){ .grid--3, .grid--4{ grid-template-columns: 1fr; } }

.card{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease;
  display: flex; flex-direction: column;
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* Tour card */
.tour-card .scene{ border-radius: 0; aspect-ratio: 16/10; }
.tour-card-body{ padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tour-card-meta{ display: flex; gap: 8px; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); align-items: center; }
.tour-card-meta .dot{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }
.tour-card h3{ font-size: 1.18rem; margin-bottom: 2px; }
.tour-card p{ font-size: 0.92rem; margin-bottom: 0; }
.tour-card-foot{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.tour-card-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.tour-price{ font-family: var(--sans); }
.tour-price .from{ font-size: 0.68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; display: block; }
.tour-price b{ font-family: var(--serif); font-size: 1.25rem; color: var(--forest-deep); }
.tour-price .pp{ font-size: 0.72rem; color: var(--ink-faint); }

/* Destination card */
.dest-card .scene{ border-radius: 0; aspect-ratio: 4/3; }
.dest-card-body{ padding: 20px 22px 24px; }
.dest-card h3{ margin-bottom: 8px; }
.dest-card p{ font-size: 0.92rem; }
.dest-card .btn{ margin-top: 10px; }

/* Feature / icon card */
.feature-card{ padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.feature-card .icon-wrap{
  width: 48px; height: 48px; border-radius: 12px; background: var(--forest-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.feature-card .icon-wrap .icon{ color: var(--forest); font-size: 22px; }
.feature-card h3{ font-size: 1.05rem; margin-bottom: 6px; }
.feature-card p{ font-size: 0.9rem; margin-bottom: 0; }

.feature-card.on-dark{ background: rgba(248,245,233,0.06); border-color: rgba(248,245,233,0.16); }
.feature-card.on-dark h3{ color: var(--cream); }
.feature-card.on-dark p{ color: #C9D2C6; }
.feature-card.on-dark .icon-wrap{ background: rgba(193,121,30,0.22); }
.feature-card.on-dark .icon-wrap .icon{ color: var(--gold); }

/* Lodge / stay card */
.lodge-card{ display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 0; }
.lodge-card .scene{ border-radius: 0; height: 100%; aspect-ratio: auto; }
.lodge-card-body{ padding: 20px 22px; min-width: 0; }
.lodge-card h3{ font-size: 1.08rem; margin-bottom: 4px; }
.lodge-card p{ font-size: 0.9rem; margin-bottom: 8px; }
.lodge-tier{ margin-bottom: 8px; }
@media (max-width: 620px){ .lodge-card{ grid-template-columns: 1fr; } .lodge-card .scene{ aspect-ratio: 16/9; } }

/* Split content block (Why Visit Uganda Gorillas, About intro, etc.) */
.split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.split.reverse .split-art{ order: 2; }
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; gap: 32px; } .split.reverse .split-art{ order: -1; } }
.split-art .scene{ box-shadow: var(--shadow-md); }
.stat-row{ display: flex; gap: 30px; margin-top: 26px; flex-wrap: wrap; }
.stat-row .stat b{ font-family: var(--serif); font-size: 1.7rem; color: var(--forest-deep); display: block; }
.stat-row .stat span{ font-family: var(--sans); font-size: 0.76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.check-list{ margin-top: 18px; }
.check-list li{ display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 0.95rem; color: var(--ink-soft); }
.check-list .icon{ font-size: 16px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }

/* CTA band */
.cta-band{ background: var(--gold); color: var(--cream); border-radius: var(--radius-lg); padding: 52px 56px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-band h2{ color: var(--cream); margin-bottom: 6px; }
.cta-band p{ color: rgba(248,245,233,0.9); margin-bottom: 0; }
.cta-band-actions{ display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* Talk to an expert avatar */
.cta-expert{ display: flex; align-items: center; gap: 14px; }
.cta-expert .avatar{
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  background: rgba(248,245,233,0.28); display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed rgba(248,245,233,0.55);
}
.cta-expert .avatar .icon{ font-size: 24px; color: var(--cream); }
.cta-expert strong{ display: block; font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: var(--cream); }
.cta-expert span{ font-family: var(--sans); font-size: 0.8rem; color: rgba(248,245,233,0.85); }

/* Social icon row — used in topbar, footer, contact/enquire pages */
.social-row{ display: flex; gap: 10px; }
.social-row a{
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; opacity: 0.82; transition: opacity 0.15s ease, background 0.15s ease;
}
.social-row a:hover{ opacity: 1; background: rgba(255,255,255,0.08); }
.social-row .icon{ font-size: 14px; margin: 0; }

/* Chip links — cross-reference a trip already shown in another section, without duplicating its card */
.chip-link{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 0.86rem; font-weight: 600; color: var(--gold-deep);
  background: var(--gold-tint); padding: 8px 14px; border-radius: 100px; margin: 4px 6px 4px 0;
}
.chip-link:hover{ background: var(--gold); color: var(--cream); }
.chip-link .icon{ font-size: 13px; }

/* Secondary category sub-nav (Tour Packages page) */
.subnav{ position: sticky; top: 73px; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav .container{ display: flex; gap: 4px; overflow-x: auto; padding: 12px 28px; scrollbar-width: none; }
.subnav .container::-webkit-scrollbar{ display: none; }
.subnav a{
  font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--ink-soft);
  padding: 8px 14px; border-radius: 100px; white-space: nowrap;
}
.subnav a:hover{ background: var(--surface-alt); color: var(--ink); }
.subnav a.is-active{ background: var(--gold-tint); color: var(--gold-deep); }
.category-block{ padding: 56px 0; border-top: 1px solid var(--line); }
.category-block:first-of-type{ border-top: none; }

/* Blog cards */
.blog-card .scene{ border-radius: 0; aspect-ratio: 16/10; }
.blog-card-body{ padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-body .tag{ align-self: flex-start; margin-bottom: 2px; }
.blog-card-body h3{ font-size: 1.1rem; margin-bottom: 2px; }
.blog-card-body p{ font-size: 0.9rem; margin-bottom: 0; }
.blog-card-foot{ margin-top: auto; padding-top: 14px; }
.blog-card-foot .link-arrow{ display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 0.86rem; font-weight: 700; color: var(--gold-deep); }
.blog-card-foot .link-arrow .icon{ font-size: 14px; }
.blog-card:hover .link-arrow .icon{ transform: translateX(3px); }
.blog-card .link-arrow .icon{ transition: transform 0.15s ease; }

/* ==========================================================================
   Destinations page: region groups + long-form country sections
   ========================================================================== */
.region-tabs{ display: flex; gap: 10px; flex-wrap: wrap; font-family: var(--sans); margin-bottom: 34px; }
.region-tabs a{
  padding: 9px 16px; border-radius: 100px; border: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; color: var(--ink-soft);
}
.region-tabs a:hover{ border-color: var(--gold); color: var(--gold-deep); }

.country-section{ padding: 60px 0; border-top: 1px solid var(--line); }
.country-section:first-of-type{ border-top: none; }
.country-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; }
.country-head .region-label{ font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-deep); margin-bottom: 6px; display: block; }
.country-grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 44px; align-items: start; }
@media (max-width: 900px){ .country-grid{ grid-template-columns: 1fr; } }
.country-highlights{ margin-top: 18px; }
.country-highlights li{ display: flex; gap: 10px; font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 9px; }
.country-highlights .icon{ font-size: 15px; color: var(--gold-deep); flex-shrink: 0; margin-top: 3px; }
.country-facts{ display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 22px; }
.country-facts .fact{ background: var(--surface-alt); border-radius: var(--radius-sm); padding: 12px 14px; }
.country-facts .fact span{ font-family: var(--sans); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); display: block; margin-bottom: 3px; }
.country-facts .fact b{ font-family: var(--serif); font-size: 0.98rem; }

/* Quick jump grid used at top of destinations.html — image cards */
.quickgrid{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 900px){ .quickgrid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .quickgrid{ grid-template-columns: repeat(2, 1fr); } }
.qcard{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-sm); text-align: center; transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.qcard:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.qcard .scene{ border-radius: 0; aspect-ratio: 4/3; }
.qcard-body{ padding: 14px 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qcard-body h3{ font-size: 1.02rem; margin: 0; }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero{
  position: relative; overflow: hidden; color: var(--cream); padding: 62px 0 54px;
  background-image:
    radial-gradient(ellipse at 82% 15%, rgba(193,121,30,0.28), transparent 55%),
    radial-gradient(ellipse at 8% 90%, rgba(62,122,114,0.24), transparent 55%),
    linear-gradient(135deg, #24332A, #16261B);
}
.page-hero .container{ position: relative; z-index: 1; }
.page-hero h1{ color: var(--cream); max-width: 18ch; }
.page-hero p.lede{ color: #D7DED2; max-width: 60ch; }
.breadcrumb{ font-family: var(--sans); font-size: 0.82rem; color: #A9B6A4; margin-bottom: 18px; }
.breadcrumb a{ color: #C9D2C6; }
.breadcrumb a:hover{ color: var(--gold); }

/* ==========================================================================
   Forms (contact page)
   ========================================================================== */
.field{ margin-bottom: 18px; }
.field label{ font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--ink); display: block; margin-bottom: 7px; }
.field input, .field select, .field textarea{
  width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline: 2px solid var(--gold); outline-offset: 1px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px){ .field-row{ grid-template-columns: 1fr; } }

.contact-info{ display: flex; flex-direction: column; gap: 22px; }
.contact-info .item{ display: flex; gap: 14px; align-items: flex-start; }
.contact-info .icon-wrap{ width: 42px; height: 42px; border-radius: 10px; background: var(--forest-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info .icon-wrap .icon{ font-size: 18px; color: var(--forest); }
.contact-info h4{ margin-bottom: 3px; }
.contact-info p{ margin-bottom: 0; font-size: 0.92rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--forest-deep); color: #C9D2C6; padding-top: 70px; }
.footer-top{ display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; gap: 36px; padding-bottom: 46px; border-bottom: 1px solid rgba(248,245,233,0.14); }
@media (max-width: 980px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .footer-top{ grid-template-columns: 1fr; } }

.footer-brand{ display: flex; flex-direction: column; }
.footer-brand .logo-row{ display: flex; align-items: center; gap: 10px; }
.footer-brand img.logo{ height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.footer-brand .word{ font-family: var(--serif); font-size: 1.5rem; color: var(--cream); }
.footer-brand .dom{ font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin: 4px 0 14px; }
.footer-brand p{ font-size: 0.88rem; color: #A9B6A4; max-width: 32ch; }

.footer-col h4{ font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: #8FA089; margin-bottom: 16px; }
.footer-col ul li{ margin-bottom: 10px; }
.footer-col a{ font-family: var(--sans); font-size: 0.9rem; color: #C9D2C6; }
.footer-col a:hover{ color: var(--gold); }

.footer-bottom{ padding: 22px 0 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--sans); font-size: 0.8rem; color: #8FA089; }
.footer-bottom a{ color: #8FA089; }
.footer-bottom a:hover{ color: var(--gold); }
.footer-seo{ font-family: var(--sans); font-size: 0.82rem; color: #8FA089; padding: 26px 0; border-bottom: 1px solid rgba(248,245,233,0.14); max-width: 90ch; }

/* ==========================================================================
   When To Go — 12 month calendar strip with hover effect
   ========================================================================== */
.season-strip{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 30px; max-width: 900px; }
.season-strip .m{ text-align: center; }
.season-strip .m .dot{
  width: 100%; height: 52px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: default;
}
.season-strip .m:hover .dot{ transform: scale(1.12); box-shadow: var(--shadow-md); }
.season-strip .m span{ display: block; margin-top: 8px; font-family: var(--sans); font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.m-fair .dot{ background: #B9AE8A; }
.m-good .dot{ background: var(--gold); }
.m-great .dot{ background: var(--gold-deep); }
.m-best .dot{ background: var(--forest); }
.season-legend{ display: flex; gap: 20px; margin-top: 22px; flex-wrap: wrap; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); }
.season-legend span{ display: inline-flex; align-items: center; gap: 8px; }
.season-legend i{ width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
@media (max-width: 760px){ .season-strip{ grid-template-columns: repeat(6, 1fr); row-gap: 16px; } }
@media (max-width: 480px){ .season-strip{ grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-group-title{ font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-deep); margin: 30px 0 14px; }
.faq-group-title:first-child{ margin-top: 0; }
.faq-list{ display: grid; gap: 2px; max-width: 800px; }
.faq-item{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 22px; }
.faq-item summary{
  list-style: none; padding: 16px 0; font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--ink);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .icon{ color: var(--gold-deep); flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item[open] summary .icon{ transform: rotate(45deg); }
.faq-item p{ padding-bottom: 18px; font-size: 0.94rem; margin: 0; max-width: none; }

/* ==========================================================================
   Blog article
   ========================================================================== */
.article-meta{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--sans); font-size: 0.82rem; color: #A9B6A4; margin-top: 14px; }
.article-meta .dot{ width: 3px; height: 3px; border-radius: 50%; background: #A9B6A4; }
.article-body{ max-width: 72ch; }
.article-body p{ margin-bottom: 20px; }
.article-body h2{ font-size: 1.5rem; margin: 44px 0 14px; }
.article-body h2:first-child{ margin-top: 0; }
.article-body h3{ font-size: 1.15rem; margin: 28px 0 10px; }
.article-body .check-list{ margin-bottom: 20px; }
.article-figure{ margin: 28px 0; }
.article-figure .scene{ aspect-ratio: 16/9; border-radius: var(--radius-md); }
.article-figure figcaption{ font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin-top: 8px; }
.read-more-link{ display: block; font-family: var(--sans); font-size: 0.9rem; font-weight: 700; color: var(--gold-deep); margin: -6px 0 20px; }
.read-more-link .icon{ font-size: 12px; margin-left: 4px; }
.read-more-link:hover{ color: var(--forest); }

.callout{ background: var(--forest-tint); border-left: 4px solid var(--forest); border-radius: var(--radius-sm); padding: 24px 28px; margin: 8px 0 32px; max-width: 72ch; }
.callout-label{ font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--forest); margin-bottom: 8px; display: block; }
.callout p{ margin-bottom: 12px; }
.callout p:last-of-type{ margin-bottom: 0; }
.callout .check-list{ margin-top: 12px; margin-bottom: 0; }
.callout--gold{ background: var(--gold-tint); border-left-color: var(--gold); }
.callout--gold .callout-label{ color: var(--gold-deep); }
.callout--gold a.btn{ margin-top: 4px; }

.compare-table-wrap{ overflow-x: auto; margin: 8px 0 32px; max-width: 72ch; }
.compare-table{ width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.88rem; }
.compare-table caption{ text-align: left; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin-bottom: 12px; caption-side: top; }
.compare-table th, .compare-table td{ border: 1px solid var(--line); padding: 12px 16px; text-align: left; vertical-align: top; }
.compare-table thead th{ background: var(--forest-deep); color: var(--cream); font-weight: 700; }
.compare-table tbody th{ background: var(--surface-alt); color: var(--ink); font-weight: 700; white-space: nowrap; }
.compare-table tbody tr:nth-child(even){ background: var(--surface-alt); }

.related-tags{ display: flex; gap: 10px; flex-wrap: wrap; }
.related-tags a{ font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--forest); background: var(--forest-tint); padding: 8px 16px; border-radius: 100px; }
.related-tags a:hover{ background: var(--forest); color: var(--cream); }

/* Post hero — full-bleed featured image band, text overlaid at the bottom */
.post-hero{
  position: relative; overflow: hidden; color: var(--cream);
  min-height: 460px; display: flex; align-items: flex-end;
  background-image:
    radial-gradient(ellipse at 82% 15%, rgba(193,121,30,0.28), transparent 55%),
    radial-gradient(ellipse at 8% 90%, rgba(62,122,114,0.24), transparent 55%),
    linear-gradient(135deg, #24332A, #16261B);
}
.post-hero::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(14,26,19,0.95) 10%, rgba(14,26,19,0.55) 55%, rgba(14,26,19,0.1) 100%);
}
.post-hero .hero-icon{ position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); font-size: 130px; color: rgba(248,245,233,0.12); z-index: 0; }
.post-hero .container{ position: relative; z-index: 2; width: 100%; padding-top: 100px; padding-bottom: 44px; }
.post-hero h1{ color: #fff; max-width: 24ch; margin-top: 14px; }
.post-hero .post-meta-row{ margin-top: 22px; }
.post-hero .article-meta span{ color: rgba(255,255,255,0.85); }
.post-hero .article-meta .dot{ background: rgba(255,255,255,0.5); }
.post-hero .share-row span{ color: rgba(255,255,255,0.65); }
.post-hero .share-row button{ background: rgba(255,255,255,0.14); color: #fff; }
.post-hero .share-row button:hover{ background: var(--gold); color: var(--forest-deep); }
@media (max-width: 760px){ .post-hero{ min-height: 360px; } .post-hero .container{ padding-top: 64px; } }

/* Byline + share row */
.post-meta-row{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 14px; }
.share-row{ display: flex; align-items: center; gap: 9px; }
.share-row span{ font-family: var(--sans); font-size: 0.7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.share-row button{ width: 30px; height: 30px; border-radius: 50%; background: var(--forest-tint); color: var(--forest); border: none; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.share-row button:hover{ background: var(--forest); color: #fff; }

/* Pull quote */
.pull-quote{ border-left: 3px solid var(--gold); margin: 30px 0; padding: 4px 0 4px 24px; max-width: 72ch; }
.pull-quote p{ font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--forest-deep); line-height: 1.55; margin: 0; }

/* Video placeholder (matches the .scene photo-placeholder philosophy) */
.video-embed{ margin: 30px 0; max-width: 72ch; }
.video-embed figcaption{ font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin-top: 8px; }

/* Numbered check-list variant */
.check-list--numbered li .icon{ display: none; }
.check-list--numbered li::before{ counter-increment: step; content: counter(step); flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--forest-tint); color: var(--forest-deep); font-family: var(--sans); font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.check-list--numbered{ counter-reset: step; }

/* ---- Post layout: article + sidebar ---- */
.post-layout{ display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.post-sidebar{ position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.side-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; }
.side-card h5{ font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--forest-deep); margin-bottom: 14px; }
.toc-list{ display: grid; gap: 2px; }
.toc-list a{ display: block; font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); padding: 7px 0 7px 12px; border-left: 2px solid var(--line); transition: border-color 0.15s ease, color 0.15s ease; }
.toc-list a:hover{ color: var(--gold-deep); border-color: var(--gold); }
.side-card--cta{ background: var(--forest-deep); border: none; }
.side-card--cta h5{ color: var(--gold); }
.side-card--cta p{ color: rgba(248,245,233,0.82); font-size: 0.85rem; margin-bottom: 14px; }
.side-author{ display: flex; align-items: center; gap: 12px; }
.side-author .av-icon{ width: 44px; height: 44px; border-radius: 50%; background: var(--forest-tint); display: flex; align-items: center; justify-content: center; color: var(--forest); flex-shrink: 0; }
.side-author .av-icon .icon{ font-size: 17px; }
.side-author strong{ display: block; font-family: var(--sans); font-size: 0.82rem; color: var(--forest-deep); }
.side-author span{ font-family: var(--sans); font-size: 0.72rem; color: var(--ink-soft); }
.side-post{ display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px dotted var(--line); }
.side-post:last-child{ border-bottom: none; padding-bottom: 0; }
.side-post:first-child{ padding-top: 0; }
.side-post .scene--thumb{ width: 56px; height: 50px; flex-shrink: 0; padding: 6px; }
.side-post .scene--thumb .scene-icon{ font-size: 16px; }
.side-post .scene--thumb::before{ display: none; }
.side-post .scene--thumb .scene-cap{ display: none; }
.side-post h6{ font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--forest-deep); line-height: 1.4; margin: 0; }
.side-post .readtime{ font-family: var(--sans); font-size: 0.68rem; color: var(--ink-soft); display: block; margin-top: 3px; }
.tag-cloud{ display: flex; flex-wrap: wrap; gap: 8px; }
.tag-cloud a{ font-family: var(--sans); font-size: 0.76rem; color: var(--forest); background: var(--forest-tint); padding: 6px 12px; border-radius: 20px; }
.tag-cloud a:hover{ background: var(--forest); color: #fff; }
@media (max-width: 1080px){
  .post-layout{ grid-template-columns: 1fr; gap: 40px; }
  .post-sidebar{ position: static; flex-direction: row; flex-wrap: wrap; }
  .post-sidebar .side-card{ flex: 1 1 260px; }
}
@media (max-width: 620px){
  .post-sidebar{ flex-direction: column; }
}

/* Guest review cards */
.review-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.review-card .icon-wrap{ margin-bottom: 4px; }
.review-card .icon-wrap .icon{ font-size: 20px; color: var(--gold-deep); }
.review-stars{ display: flex; gap: 3px; margin-bottom: 12px; }
.review-stars .icon{ font-size: 14px; color: var(--gold); }
.review-card p{ font-size: 0.95rem; margin-bottom: 16px; max-width: none; }
.review-attrib{ font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); }
.review-attrib strong{ display: block; color: var(--ink); font-size: 0.86rem; margin-bottom: 2px; }

/* ==========================================================================
   Activity grading meter + responsible travel note
   ========================================================================== */
.grade-meter{ display: flex; align-items: center; gap: 20px; margin: 22px 0 10px; }
.grade-dots{ display: flex; gap: 7px; }
.grade-dots span{ width: 32px; height: 10px; border-radius: 5px; background: var(--line); }
.grade-dots span.is-filled{ background: var(--gold-deep); }
.grade-label{ font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--forest-deep); }
.grade-key{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); }
.responsible-note{ display: flex; gap: 16px; background: var(--forest-tint); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px 26px; max-width: 760px; }
.responsible-note .icon{ font-size: 24px; color: var(--forest); flex-shrink: 0; margin-top: 2px; }
.responsible-note p{ margin: 0; max-width: none; }

/* ==========================================================================
   Country-by-country activity guide (Logistics / Price / Accommodation / Summary)
   ========================================================================== */
.country-guide{ display: grid; gap: 40px; }
.country-guide-block{ display: grid; grid-template-columns: 220px 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.country-guide-block:last-child{ border-bottom: none; padding-bottom: 0; }
.country-guide-head h3{ margin-bottom: 6px; }
.country-guide-head .tag{ margin-top: 4px; }
.country-guide-rows{ display: grid; gap: 14px; }
.country-guide-row{ display: grid; grid-template-columns: 130px 1fr; gap: 16px; }
.country-guide-row dt{ font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-deep); }
.country-guide-row dd{ margin: 0; font-size: 0.94rem; color: var(--ink-soft); }
@media (max-width: 760px){
  .country-guide-block{ grid-template-columns: 1fr; gap: 14px; }
  .country-guide-row{ grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   Detailed itinerary pages (route flow, accommodation summary, day-by-day)
   ========================================================================== */
.route-flow{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.route-flow .stop{ font-family: var(--serif); font-size: 1.15rem; color: var(--forest-deep); }
.route-flow .icon{ font-size: 13px; color: var(--gold); }

.accom-summary{ display: grid; gap: 2px; max-width: 800px; }
.accom-row{
  display: grid; grid-template-columns: 1fr 90px 1fr; gap: 16px; align-items: center;
  padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.accom-row .dest{ font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.accom-row .dest span{ display: block; font-family: var(--sans); font-size: 0.76rem; color: var(--ink-faint); margin-top: 2px; }
.accom-row .nights{ font-family: var(--sans); font-size: 0.82rem; color: var(--ink-faint); text-align: center; white-space: nowrap; }
.accom-row .style{ font-family: var(--sans); font-size: 0.86rem; color: var(--ink-soft); }
@media (max-width: 620px){
  .accom-row{ grid-template-columns: 1fr; gap: 6px; text-align: left; }
  .accom-row .nights{ text-align: left; }
}

.itinerary-timeline{ display: grid; gap: 0; max-width: 820px; }
.itinerary-day{ display: grid; grid-template-columns: 64px 1fr; gap: 24px; position: relative; padding-bottom: 40px; }
.itinerary-day:last-child{ padding-bottom: 0; }
.itinerary-day::after{
  content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 2px; background: var(--line);
}
.itinerary-day:last-child::after{ display: none; }
.itinerary-day-num{
  width: 64px; height: 64px; border-radius: 50%; background: var(--forest-deep); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1;
  font-family: var(--sans);
}
.itinerary-day-num span{ font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; }
.itinerary-day-num b{ font-family: var(--serif); font-size: 1.15rem; line-height: 1; padding: 0 4px; }
.itinerary-day-body{ padding-top: 8px; }
.itinerary-day-body h3{ margin-bottom: 4px; }
.itinerary-day-body .day-place{ font-family: var(--sans); font-size: 0.8rem; color: var(--gold-deep); font-weight: 600; margin-bottom: 10px; display: block; }
.itinerary-day-body p{ font-size: 0.95rem; }
.itinerary-day-body .itinerary-glance{ margin-top: 14px; margin-bottom: 4px; max-width: none; }
.itinerary-day-body .itinerary-glance li{ font-size: 0.88rem; margin-bottom: 7px; }
@media (max-width: 560px){
  .itinerary-day{ grid-template-columns: 48px 1fr; gap: 16px; }
  .itinerary-day-num{ width: 48px; height: 48px; }
  .itinerary-day-num b{ font-size: 1.05rem; }
  .itinerary-day::after{ left: 23px; top: 48px; }
}

/* Wildlife chip list */
.wildlife-chips{ display: flex; flex-wrap: wrap; gap: 10px; }
.wildlife-chip{
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 100px; padding: 9px 18px 9px 14px; font-family: var(--sans); font-size: 0.86rem; color: var(--ink);
}
.wildlife-chip .icon{ font-size: 14px; color: var(--gold-deep); }

/* ==========================================================================
   Newsletter band
   ========================================================================== */
.newsletter{ background: var(--forest-deep); color: var(--cream); padding: 58px 0; }
.newsletter-inner{ display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.newsletter-inner h3{ color: var(--cream); font-size: 1.6rem; max-width: 360px; margin-bottom: 6px; }
.newsletter-inner p{ color: #C9D2C6; margin: 0; max-width: 40ch; }
.newsletter-form{ display: flex; max-width: 420px; width: 100%; }
.newsletter-form input{
  flex: 1; padding: 14px 18px; border: none; border-radius: 100px 0 0 100px;
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink);
}
.newsletter-form input:focus{ outline: 2px solid var(--gold); outline-offset: -2px; }
.newsletter-form button{ border-radius: 0 100px 100px 0; }

/* ==========================================================================
   SEO detail layout + glance card
   ========================================================================== */
.seo-layout{ display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 56px; align-items: start; }
.seo-copy h3{ font-size: 1.25rem; margin: 26px 0 10px; }
.seo-copy h3:first-child{ margin-top: 0; }
.glance-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px; position: sticky; top: 100px; }
.glance-card h4{ font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--forest); margin-bottom: 16px; }
.glance-row{ display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dotted var(--line); }
.glance-row:last-of-type{ border-bottom: none; }
.glance-row span:first-child{ font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); }
.glance-row span:last-child{ font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--forest); text-align: right; }
.glance-card .btn{ margin-top: 18px; }
@media (max-width: 900px){ .seo-layout{ grid-template-columns: 1fr; } .glance-card{ position: static; } }

/* ==========================================================================
   Partner logo marquee (Why Book With Us)
   ========================================================================== */
.logo-marquee{ overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track{ display: flex; align-items: center; gap: 56px; width: max-content; animation: logoScroll 30s linear infinite; }
.logo-track img, .logo-track .logo-ph{ height: 46px; width: auto; flex-shrink: 0; opacity: 0.75; filter: grayscale(1); transition: opacity 0.2s ease, filter 0.2s ease; }
.logo-track .logo-ph{
  display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 22px;
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm); font-family: var(--sans);
  font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); white-space: nowrap; opacity: 1; filter: none;
}
.logo-track img:hover{ opacity: 1; filter: grayscale(0); }
@keyframes logoScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .logo-track{ animation: none; overflow-x: auto; } }

/* Utility */
.mt-0{ margin-top: 0; }
.pb-0{ padding-bottom: 0; }
.pt-0{ padding-top: 0; }
.center{ text-align: center; }
.visually-hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   Sticky corner actions: WhatsApp + scroll to top
   ========================================================================== */
.sticky-actions{ position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 12px; }
.sticky-actions a, .sticky-actions button{
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); border: none; cursor: pointer;
}
.whatsapp-btn{ background: #25D366; color: #fff; }
.whatsapp-btn:hover{ background: #1DA851; }
.whatsapp-btn .icon{ font-size: 24px; color: #fff; }
.scrolltop-btn{
  background: var(--forest-deep); color: var(--cream);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.15s ease;
}
.scrolltop-btn:hover{ background: var(--gold); }
.scrolltop-btn.show{ opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 620px){
  .sticky-actions{ right: 14px; bottom: 14px; }
  .sticky-actions a, .sticky-actions button{ width: 46px; height: 46px; }
}

/* ==========================================================================
   R2 refinements — tighter rhythm, justified copy, logo + expert avatar
   ========================================================================== */
.section{ padding: 60px 0; }
.section--tight{ padding: 40px 0; }
.section-head{ margin-bottom: 28px; }
.grid{ gap: 22px; }
.category-block{ padding: 40px 0; }
.country-section{ padding: 44px 0; }
.country-head{ margin-bottom: 18px; }
.split{ gap: 44px; }
.cta-band{ padding: 40px 44px; }
.page-hero{ padding: 48px 0 42px; }
.newsletter{ padding: 44px 0; }
.site-footer{ padding-top: 52px; }
.footer-top{ padding-bottom: 36px; }
@media (max-width: 620px){ .section{ padding: 44px 0; } .cta-band{ padding: 30px 24px; } }

/* Justified body copy (hyphenation avoids rivers of white space) */
p{ max-width: 74ch; }
.section p, .article-body p, .seo-copy p, .country-grid p, .itin-section p, .callout p, .faq-item p, .card p, .feature-card p, .review-card p{
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
}
.hero p, .center p, .section-head.center p, .cta-band p, .newsletter p, .site-footer p, .tag, .scene-cap, .qcard p{ text-align: left; hyphens: manual; }
.center p, .section-head.center p{ text-align: center; }
.split > div > p, .seo-copy p, .article-body p{ max-width: none; }

/* Buttons — consistent spacing wherever they sit side by side or under copy */
.btn{ line-height: 1.2; white-space: nowrap; }
p + .btn, ul + .btn, .stat-row + .btn, div + .btn{ margin-top: 18px; }
.btn + .btn{ margin-left: 10px; }
.hero-actions .btn + .btn, .cta-band-actions .btn + .btn, .tour-card-actions .btn + .btn{ margin-left: 0; }
.tour-card-actions{ gap: 10px; }
.header-cta{ gap: 14px; }

/* Header + footer logo */
.brand img.logo{ height: 52px; }
.brand{ gap: 12px; }
.footer-brand .logo-row{ margin-bottom: 14px; }
.footer-brand img.logo{ height: 76px; width: auto; filter: none; opacity: 1; background: #fff; padding: 8px 12px; border-radius: 12px; }
@media (max-width: 620px){ .brand .brand-text .dom{ display: none; } .brand img.logo{ height: 44px; } }

/* "Talk to an expert" — real avatar */
.cta-expert .avatar{
  width: 62px; height: 62px; padding: 0; overflow: hidden; background: var(--cream);
  border: 2px solid rgba(248,245,233,0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.cta-expert .avatar img{ width: 100%; height: 100%; object-fit: cover; }
.cta-expert{ gap: 16px; }
/* form feedback */
.form-status{ margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 0.9rem; line-height: 1.5; }
.form-status.is-ok{ background: var(--forest-tint); color: var(--forest-deep); border: 1px solid #BFD0BF; }
.form-status.is-err{ background: var(--terracotta-tint); color: var(--terracotta); border: 1px solid #E3BFB1; }
.form-status i{ margin-right: 6px; }
.form-status a{ text-decoration: underline; font-weight: 600; }

/* photo heroes + no decorative icons standing in for images */
.post-hero.has-photo, .page-hero.has-photo{ background-size: cover; background-position: center; }
.post-hero .hero-icon{ display: none; }
.scene:not(.has-photo)::before{ background: none; }
.section-head p, p.lede, .tp-section > p.lede{ text-align: left; hyphens: manual; }
.tour-card-meta{ flex-wrap: wrap; row-gap: 2px; }
.tour-card h3{ line-height: 1.25; }
@media (max-width: 520px){
  .brand .brand-text{ display: none; }
  .brand img.logo{ height: 46px; }
  .site-header .container{ gap: 12px; }
}
.hero h2.hero-h{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); letter-spacing: -0.01em; color: var(--cream); line-height: 1.15; margin: 0 0 0.5em; font-weight: 400; text-wrap: balance; }
.hero h2.hero-h em{ font-style: normal; color: var(--gold); }

/* ==========================================================================
   R3 — global footer: newsletter band, 4 socials, "Speak to an Expert" widget
   ========================================================================== */
.site-footer{ padding-top: 0; }
.footer-news{ position: relative; overflow: hidden; background: linear-gradient(120deg, #234433 0%, #16261B 70%); border-bottom: 3px solid var(--gold); }
.footer-news::before{ content: ""; position: absolute; right: -30px; top: 50%; width: 260px; height: 260px; transform: translateY(-50%); background: url("../images/site/logo.png") center/contain no-repeat; opacity: 0.07; filter: brightness(3); pointer-events: none; }
.footer-news-inner{ position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-top: 44px; padding-bottom: 44px; }
.fn-kicker{ display: inline-flex; gap: 8px; align-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.fn-copy h3{ color: var(--cream); font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.fn-copy p{ color: #C9D2C6; margin: 0; max-width: 46ch; text-align: left; hyphens: manual; }
.fn-field{ display: flex; align-items: center; gap: 0; background: #fff; border-radius: 100px; padding: 6px 6px 6px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.fn-field > i{ color: var(--ink-faint); margin-right: 10px; }
.fn-field input{ flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--sans); font-size: 0.95rem; color: var(--ink); padding: 12px 0; }
.fn-field input:focus{ outline: none; }
.fn-field:focus-within{ box-shadow: 0 0 0 3px rgba(193,121,30,0.55), 0 10px 30px rgba(0,0,0,0.25); }
.fn-field .btn{ flex-shrink: 0; padding: 12px 24px; }
.footer-news-form small{ display: block; margin: 10px 0 0 20px; color: #A9B6A4; font-size: 0.78rem; }
.footer-news .form-status{ margin-top: 12px; }
@media (max-width: 860px){ .footer-news-inner{ grid-template-columns: 1fr; gap: 22px; padding-top: 34px; padding-bottom: 34px; } }
@media (max-width: 480px){
  .fn-field{ flex-wrap: wrap; border-radius: 18px; padding: 12px; }
  .fn-field > i{ display: none; }
  .fn-field input{ flex: 1 1 100%; padding: 8px 6px 12px; }
  .fn-field .btn{ width: 100%; justify-content: center; }
  .footer-news-form small{ margin-left: 4px; }
}

.footer-top{ grid-template-columns: 1.25fr 1.35fr 0.9fr 0.9fr 0.9fr; gap: 34px; padding-top: 50px; }
.footer-col--dest ul{ columns: 2; column-gap: 22px; }
.footer-col--dest li{ break-inside: avoid; }
.footer-social{ margin-top: 8px; gap: 10px; }
.footer-social a{ width: 38px; height: 38px; opacity: 1; border-color: rgba(248,245,233,0.35); }
.footer-social a:hover{ background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }
@media (max-width: 1100px){ .footer-top{ grid-template-columns: 1fr 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } .footer-col--dest{ grid-column: span 2; } }
@media (max-width: 700px){ .footer-top{ grid-template-columns: 1fr 1fr; gap: 28px 22px; } .footer-col--dest{ grid-column: 1 / -1; } }
@media (max-width: 420px){ .footer-top{ grid-template-columns: 1fr; } .footer-bottom{ flex-direction: column; align-items: flex-start; } }

/* follow card (contact + enquire) */
.follow-card{ margin-top: 28px; background: var(--forest-deep); color: var(--cream); border-radius: var(--radius-md); padding: 24px 26px; }
.follow-card h4{ color: var(--cream); margin-bottom: 6px; }
.follow-card p{ color: #C9D2C6; font-size: 0.9rem; text-align: left; margin-bottom: 16px; }
.follow-links{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.follow-links a{ display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid rgba(248,245,233,0.25); border-radius: 100px; font-size: 0.88rem; font-weight: 600; color: var(--cream); transition: background 0.15s ease, color 0.15s ease; }
.follow-links a:hover{ background: var(--gold); border-color: var(--gold); color: var(--forest-deep); }
.follow-links i{ width: 18px; text-align: center; }
@media (max-width: 420px){ .follow-links{ grid-template-columns: 1fr; } }

/* Speak to an Expert widget (replaces the bare WhatsApp bubble) */
.sticky-actions{ display: none; }
.expert-widget{ position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--sans); }
.ew-launch{ position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border: none; border-radius: 100px; background: var(--forest-deep); color: var(--cream); cursor: pointer; box-shadow: 0 10px 30px rgba(14,26,19,0.4); transition: transform 0.15s ease, background 0.15s ease; }
.ew-launch:hover{ transform: translateY(-2px); background: #1d3626; }
.ew-launch img{ width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background: var(--cream); flex-shrink: 0; }
.ew-label{ font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.ew-ico{ font-size: 15px; color: var(--gold); }
.ew-launch::after{ content: ""; position: absolute; top: -2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #25D366; border: 2px solid var(--bg); }
.ew-panel{ width: min(340px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px rgba(14,26,19,0.32); padding: 22px; position: relative; transform-origin: bottom right; animation: ewIn 0.2s ease; }
.ew-panel[hidden]{ display: none; }
@keyframes ewIn{ from{ opacity: 0; transform: translateY(10px) scale(0.97); } to{ opacity: 1; transform: none; } }
.ew-close{ position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-alt); color: var(--ink-soft); cursor: pointer; }
.ew-close:hover{ background: var(--forest-deep); color: #fff; }
.ew-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-right: 28px; }
.ew-head img{ width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold); background: var(--cream); flex-shrink: 0; }
.ew-head strong{ display: block; font-family: var(--serif); font-weight: 400; font-size: 1.1rem; color: var(--forest-deep); }
.ew-head span{ display: flex; align-items: center; gap: 7px; font-size: 0.76rem; color: var(--ink-soft); line-height: 1.35; }
.ew-dot{ width: 8px; height: 8px; border-radius: 50%; background: #25D366; flex-shrink: 0; display: inline-block; }
.ew-panel > p{ font-size: 0.88rem; margin: 0 0 14px; text-align: left; hyphens: manual; }
.ew-opt{ display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 14px; margin-top: 10px; border: 1px solid var(--line); color: var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.ew-opt:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ew-opt > i:first-child{ font-size: 22px; width: 26px; text-align: center; flex-shrink: 0; }
.ew-opt span{ flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.ew-opt b{ font-size: 0.92rem; }
.ew-opt small{ font-size: 0.75rem; color: inherit; opacity: 0.8; }
.ew-go{ font-size: 12px; opacity: 0.7; }
.ew-wa{ background: #25D366; border-color: #25D366; color: #fff; }
.ew-form{ background: var(--forest-deep); border-color: var(--forest-deep); color: var(--cream); }
.ew-form > i:first-child{ color: var(--gold); }
.scrolltop-btn{ width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: var(--shadow-lg); background: var(--forest-deep); color: var(--cream); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.15s ease; }
.scrolltop-btn.show{ opacity: 1; visibility: visible; transform: none; }
.scrolltop-btn:hover{ background: var(--gold); }
@media (max-width: 560px){
  .expert-widget{ right: 12px; bottom: 12px; }
  .ew-label{ display: none; }
  .ew-launch{ padding: 5px; }
  .ew-ico{ display: none; }
  .ew-launch img{ width: 52px; height: 52px; }
}
@media print{ .expert-widget{ display: none; } }


@media (max-width: 600px){
  .hero h1, .hero h2.hero-h{ font-size: 2rem; }
  .hero p.lede{ font-size: 1rem; }
  .slide .container{ padding-top: 28px; padding-bottom: 76px; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
  .slider-controls{ padding-bottom: 14px; }
}

/* ==========================================================================
   R4 — footer logo, name+email newsletter, no status dots
   ========================================================================== */
.footer-brand img.logo{ height: 128px; width: auto; background: none; padding: 0; border-radius: 0; filter: none; opacity: 1; }
.footer-brand .logo-row{ margin-bottom: 6px; }
.footer-brand p{ margin-top: 4px; }
.ew-launch::after{ display: none; }
.ew-dot{ display: none; }

.fn-fields{ display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; }
.fn-input{ display: flex; align-items: center; background: #fff; border-radius: 100px; padding: 0 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.22); min-width: 0; }
.fn-input > i{ color: var(--ink-faint); margin-right: 10px; font-size: 14px; }
.fn-input input{ flex: 1; min-width: 0; border: none; background: transparent; font-family: var(--sans); font-size: 0.95rem; color: var(--ink); padding: 15px 0; }
.fn-input input:focus{ outline: none; }
.fn-input:focus-within{ box-shadow: 0 0 0 3px rgba(193,121,30,0.6), 0 8px 24px rgba(0,0,0,0.22); }
.fn-fields .btn{ padding: 15px 26px; white-space: nowrap; }
.footer-news-form small{ margin-left: 18px; }
@media (max-width: 1100px){ .fn-fields{ grid-template-columns: 1fr 1fr; } .fn-fields .btn{ grid-column: 1 / -1; justify-content: center; } }
@media (max-width: 520px){ .fn-fields{ grid-template-columns: 1fr; } }


/* activities: info boxes + wildlife image cards */
.why-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.info-box{ position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px 18px 16px; box-shadow: var(--shadow-sm); border-top: 3px solid var(--gold); }
.info-num{ display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold-deep); margin-bottom: 6px; }
.info-box p{ margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--ink); text-align: left; hyphens: manual; }
.wild-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.wild-card{ margin: 0; }
.wild-card .scene{ aspect-ratio: 4 / 3; border-radius: var(--radius-md); background-size: auto 46%; background-position: center 45%; }
.wild-card figcaption{ font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: var(--forest-deep); margin-top: 8px; text-align: center; }


/* hero photos on every page */
.page-hero.has-photo{ background-size: cover; background-position: center; background-repeat: no-repeat; }
.page-hero.has-photo::before{ content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(14,26,19,0.9) 0%, rgba(14,26,19,0.68) 55%, rgba(14,26,19,0.3) 100%); }
.page-hero.has-photo .container{ position: relative; z-index: 1; }
.page-hero{ min-height: 280px; display: flex; align-items: center; }
.page-hero > .container{ width: 100%; }
.post-hero.has-photo{ background-size: cover; background-position: center; }

/* YouTube click-to-play */
.yt-grid{ display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.yt-grid.yt-n1{ grid-template-columns: minmax(0, 760px); }
.yt-grid.yt-n2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .yt-grid, .yt-grid.yt-n2{ grid-template-columns: 1fr; } }
.yt-embed{ margin: 0; }
.yt-play, .yt-embed iframe{ display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); }
.yt-play{ position: relative; padding: 0; cursor: pointer; background-size: cover; background-position: center; box-shadow: var(--shadow-md); overflow: hidden; }
.yt-play::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,26,19,0.45), rgba(14,26,19,0) 55%); transition: background 0.2s ease; }
.yt-play:hover::after{ background: rgba(14,26,19,0.35); }
.yt-btn{ position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; padding-left: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); transition: transform 0.15s ease; }
.yt-play:hover .yt-btn{ transform: translate(-50%, -50%) scale(1.08); }
.yt-embed figcaption{ font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--forest-deep); margin-top: 10px; line-height: 1.4; }
.inline-link{ color: var(--gold-deep); text-decoration: underline; font-weight: 600; }


/* FAQ answers that hold lists / several paragraphs */
.tp-faq{ max-width: none; }
.faq-a{ padding: 0 0 16px; }
.faq-a p, .faq-item .faq-a p{ padding-bottom: 8px; font-size: 0.94rem; margin: 0; max-width: none; text-align: left; hyphens: manual; }
.faq-a .check-list{ margin: 4px 0 4px; }

/* partners strip */
.partner-logos{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 46px; }
.partner-logos li{ display: flex; align-items: center; }
.partner-logos img{ height: 64px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 0.2s ease, opacity 0.2s ease; }
.partner-logos img:hover{ filter: none; opacity: 1; }

/* ==========================================================================
   R5 — centred section headings, universal CTA, partner carousel, inline video
   ========================================================================== */
.section-head{ max-width: 780px; margin: 0 auto 34px; text-align: center; }
.section-head p{ margin-left: auto; margin-right: auto; text-align: center; }
.section-head p.lede{ text-align: center; }
.eyebrow{ display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; }
.eyebrow--gold{ color: var(--gold); }
.split .eyebrow{ display: block; }
.section--forest .eyebrow{ color: var(--gold); }
.faq-list{ margin-left: auto; margin-right: auto; }
.tp-faq{ margin-left: 0; }
.hero-stats{ justify-content: center; text-align: center; gap: 28px 64px; }
.hero-stats .stat{ min-width: 120px; }
.country-guide, .grid{ margin-left: auto; margin-right: auto; }
.section-head + .center, .center{ text-align: center; }

/* Universal call to action */
.section--tight:has(> .container > .cta-band){ padding: 0; }
.cta-universal{ position: relative; isolation: isolate; background-size: cover; background-position: center; background-color: var(--forest-deep); color: var(--cream); padding: 92px 0 84px; text-align: center; }
.cta-universal::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 40%, rgba(14,26,19,0.62), rgba(14,26,19,0.9) 75%); }
.cu-inner{ max-width: 780px; margin: 0 auto; }
.cu-kicker{ display: inline-flex; gap: 9px; align-items: center; padding: 8px 18px; border-radius: 100px; background: rgba(193,121,30,0.22); border: 1px solid rgba(232,166,48,0.5); color: #F2C46D; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.cta-universal h2{ color: #fff; font-size: clamp(1.9rem, 3.8vw, 3rem); margin: 0 auto 14px; max-width: 20ch; text-wrap: balance; }
.cta-universal p{ color: #E4EADF; font-size: 1.08rem; max-width: 56ch; margin: 0 auto 28px; text-align: center; hyphens: manual; }
.cu-actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.cu-actions .btn{ padding: 15px 30px; font-size: 1rem; }
.cu-expert{ display: inline-flex; align-items: center; gap: 14px; margin-top: 38px; padding: 12px 24px 12px 12px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); text-align: left; backdrop-filter: blur(4px); }
.cu-expert img{ width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold); background: var(--cream); object-fit: cover; flex-shrink: 0; }
.cu-expert b{ display: block; font-family: var(--serif); font-weight: 400; font-size: 1.05rem; color: #fff; }
.cu-expert span{ font-size: 0.82rem; color: #C9D2C6; }
.cu-expert a{ color: #F2C46D; font-weight: 600; }
@media (max-width: 560px){
  .cta-universal{ padding: 64px 0 56px; }
  .cu-actions .btn{ width: 100%; justify-content: center; }
  .cu-expert{ border-radius: 20px; padding: 12px 16px 12px 12px; margin-top: 28px; }
}

/* Partner carousel: every logo sits in a fixed tile so any shape or size fits cleanly */
.partner-marquee{ overflow: hidden; position: relative; padding: 10px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pm-track{ display: flex; align-items: center; gap: 28px; width: max-content; animation: pmScroll calc(var(--pm-n, 8) * 5s) linear infinite; }
.partner-marquee:hover .pm-track{ animation-play-state: paused; }
.pm-item{ flex: 0 0 auto; width: 250px; height: 140px; padding: 20px 26px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pm-item:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pm-item img{ display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes pmScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 560px){ .pm-item{ width: 190px; height: 110px; padding: 14px 18px; } .pm-track{ gap: 18px; } }
@media (prefers-reduced-motion: reduce){ .pm-track{ animation: none; } .partner-marquee{ overflow-x: auto; } }

/* inline video inside a blog post */
.yt-inline{ margin: 32px 0; }
.yt-inline .yt-embed{ max-width: 100%; }
.yt-inline .yt-play, .yt-inline iframe{ border-radius: var(--radius-md); }

/* about page */
.callout-wide{ display: flex; gap: 28px; align-items: center; max-width: 960px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: var(--radius-md); padding: 34px 38px; box-shadow: var(--shadow-sm); }
.callout-wide .cw-icon{ flex: 0 0 74px; height: 74px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.callout-wide h2{ margin-bottom: 8px; font-size: 1.7rem; }
.callout-wide p{ margin: 0; max-width: none; }
@media (max-width: 640px){ .callout-wide{ flex-direction: column; text-align: center; padding: 28px 22px; } }

.pm-item img{ width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
p.ui[style*="text-align:center"]{ max-width: none; margin-left: auto; margin-right: auto; }
.post-layout > *, .tp-layout > *, .seo-layout > *{ min-width: 0; }
.article-body{ min-width: 0; overflow-wrap: break-word; }

/* ==========================================================================
   R6 — dark header with the light-letter logo, experience image boxes,
   reviews page, 4-up reading grid, alignment hooks for the admin panel
   ========================================================================== */
:root{ --header-h: 97px; }
.topbar{ background: #0C1510; }
.site-header{ background: linear-gradient(180deg, #1D3828 0%, #16261B 100%); border-bottom: 3px solid var(--gold); }
.site-header .container{ padding-top: 12px; padding-bottom: 12px; }
.brand img.logo{ height: 70px; }
.brand .word{ color: var(--cream); font-size: 1.6rem; }
.brand .dom{ color: var(--gold); }
.menu-toggle{ color: var(--cream); border-color: rgba(248,245,233,0.38); background: transparent; }
.menu-toggle:hover{ background: rgba(248,245,233,0.1); border-color: var(--gold); }
.subnav{ top: var(--header-h); }
.tp-side{ top: calc(var(--header-h) + 16px); }
.glance-card, .post-sidebar{ top: calc(var(--header-h) + 16px); }
.tp-section, h2.tp-group{ scroll-margin-top: calc(var(--header-h) + 14px); }
html{ scroll-padding-top: calc(var(--header-h) + 8px); }
@media (max-width: 620px){ :root{ --header-h: 83px; } .brand img.logo{ height: 56px; } }
@media (max-width: 520px){ .brand img.logo{ height: 56px; } }

/* alignment hooks (the admin panel will set data-align / data-size on any title, description or paragraph) */
[data-align="left"]{ text-align: left !important; }
[data-align="center"]{ text-align: center !important; }
[data-align="right"]{ text-align: right !important; }
[data-align="justify"]{ text-align: justify !important; }
[data-align="center"], [data-align="right"]{ margin-left: auto; margin-right: auto; }
[data-align="right"]{ margin-right: 0; }
[data-size="large"]{ font-size: 1.28em !important; }
[data-size="xlarge"]{ font-size: 1.6em !important; }

/* travel reading: four across */
.reading-grid{ grid-template-columns: repeat(4, 1fr); gap: 20px; }
.reading-grid .blog-card-body{ padding: 16px 18px 18px; }
.reading-grid .blog-card h3{ font-size: 1rem; line-height: 1.3; }
.reading-grid .blog-card p{ font-size: 0.86rem; }
@media (max-width: 1100px){ .reading-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .reading-grid{ grid-template-columns: 1fr; } }

/* other experiences: image boxes */
.exp-grid{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.exp-grid.grid--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px){ .exp-grid.grid--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .exp-grid.grid--4{ grid-template-columns: 1fr; } }
.exp-card{ display: flex; flex-direction: column; }
.exp-media{ display: block; }
.exp-card .scene{ border-radius: 0; aspect-ratio: 4 / 3; transition: transform 0.4s ease; }
.exp-card .exp-media{ overflow: hidden; }
.exp-card:hover .scene{ transform: scale(1.04); }
.exp-body{ padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.exp-body h3{ font-size: 1.1rem; margin: 0; }
.exp-body p{ font-size: 0.9rem; margin: 0 0 6px; text-align: left; hyphens: manual; }
.exp-body .btn{ margin-top: auto; align-self: flex-start; }

/* guest reviews page */
.reviews-empty{ display: flex; gap: 26px; align-items: center; max-width: 880px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 40px; box-shadow: var(--shadow-sm); }
.reviews-empty .re-icon{ flex: 0 0 80px; height: 80px; border-radius: 50%; background: var(--gold-tint); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; font-size: 32px; }
.reviews-empty h3{ font-size: 1.4rem; margin-bottom: 8px; }
.reviews-empty p{ text-align: left; max-width: none; }
@media (max-width: 640px){ .reviews-empty{ flex-direction: column; text-align: center; padding: 28px 22px; } .reviews-empty p{ text-align: center; } }
.review-form{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); }


/* visibility per device (set in the admin builder: Advanced > Show on) */
@media (max-width: 700px){ [data-hide~="mobile"]{ display: none !important; } }
@media (min-width: 701px) and (max-width: 1024px){ [data-hide~="tablet"]{ display: none !important; } }
@media (min-width: 1025px){ [data-hide~="desktop"]{ display: none !important; } }

/* featured / trending story on the blog hub */
.blog-card--feature{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; }
.blog-card--feature .tour-card-media, .blog-card--feature .scene{ height: 100%; min-height: 300px; }
.blog-card--feature .blog-card-body{ padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; }
.blog-card--feature h3{ font-size: 1.55rem; line-height: 1.25; }
@media (max-width: 800px){ .blog-card--feature{ grid-template-columns: 1fr; } .blog-card--feature .scene{ min-height: 220px; } }

/* larger "Talk to an Expert" photos */
.cta-expert{ gap: 18px; }
.cta-expert .avatar{ width: 84px; height: 84px; }
.ew-launch img{ width: 58px; height: 58px; }
.ew-head img{ width: 72px; height: 72px; }
.cu-expert img{ width: 68px; height: 68px; }
@media (max-width: 640px){ .ew-launch img{ width: 60px; height: 60px; } .cta-expert .avatar{ width: 72px; height: 72px; } }