/* ---------- Base ---------- */
:root{
  --primary:#1B4D3E;
  --secondary:#CBA135;
  --bg:#FAF8F3;
  --ink:#16352C;
  --ink-soft:#405a50;
  --card:#ffffff;
  --br:16px;
  --shadow:0 8px 20px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{padding:0;margin:0;background:var(--bg);color:var(--ink);font-family: ui-serif, Georgia, "Times New Roman", Times, serif}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

.home .section{padding:40px 0}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ---------- Headings ---------- */
h1{font-size:48px;line-height:1.1;margin:0 0 12px}
h2{font-size:32px;line-height:1.2;margin:0 0 16px}
h3{font-size:26px;margin:0 0 8px}
.lead{font-size:18px;color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:12px;padding:12px 18px;border:1.5px solid transparent;cursor:pointer;text-decoration:none}
.btn.sm{padding:8px 12px;font-size:14px}
.btn.mt8{margin-top:8px}
.btn.mt12{margin-top:12px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{filter:brightness(0.95);text-decoration:none}
.btn-primary-outline{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-primary-outline:hover{background:rgba(27,77,62,.06);text-decoration:none}

.link{color:var(--primary);font-weight:700}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Eyebrow / pill ---------- */
.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:6px}
.eyebrow.gold{color:var(--secondary)}
.pill{position:absolute;top:8px;z-index:2;background:var(--primary);color:#fff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;box-shadow:var(--shadow)}
.pill.left{left:8px}
.pill.right{right:8px}

/* ---------- Hero ---------- */
.hero{padding:28px 0 12px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero-copy{position:relative}
.tabs{display:inline-flex;border:1px solid rgba(27,77,62,.25);border-radius:14px;overflow:hidden;margin:16px 0 10px;background:#fff}
.tab{padding:10px 14px;font-weight:700;color:var(--ink-soft);background:transparent;border:none;cursor:pointer}
.tab.active{background:var(--primary);color:#fff}
.form{background:#fff;border:1px solid rgba(27,77,62,.15);border-radius:14px;padding:10px;box-shadow:var(--shadow)}
.inline-grid{display:grid;grid-template-columns:1fr 1fr 1fr 2fr auto;gap:8px}
.inline-grid .span-2{grid-column:span 2}
.inline-grid input{height:42px;border:1px solid rgba(27,77,62,.25);border-radius:10px;padding:0 10px;font-size:14px}
.inline-grid button{height:42px}

.ticker{margin-top:10px;display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid rgba(27,77,62,.15);border-radius:999px;padding:6px 10px;box-shadow:var(--shadow)}
.ticker .dot{font-size:11px;font-weight:800;background:#E8EFEA;color:var(--primary);border-radius:999px;padding:3px 8px}
.ticker .money{color:var(--primary);font-weight:800}

.hero-mosaic{position:relative;display:grid;grid-template-columns:1fr 220px;gap:10px}
.hero-mosaic .side{display:grid;gap:10px;grid-auto-rows:1fr}
.rounded{border-radius:18px;overflow:hidden}
.shadow{box-shadow:var(--shadow)}

/* ---------- Media ratios keep images controlled ---------- */
.thumb{position:relative;overflow:hidden;background:#ddd}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ratio-16x9{aspect-ratio:16/9}
.ratio-4x3{aspect-ratio:4/3}
.ratio-1x1{aspect-ratio:1/1}

/* ---------- Grids / cards ---------- */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.grid-4{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.grid-3{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid rgba(27,77,62,.15);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card-horizontal{display:flex;flex-direction:row;min-width:260px}
.card-body{padding:10px 12px}
.card-title{font-weight:800}

/* ---------- Carousel ---------- */
.carousel{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.carousel > *{scroll-snap-align:start}

/* ---------- Trust & Why ---------- */
.trust-grid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.trust{background:#fff;border:1px solid rgba(27,77,62,.12);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.why{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.why-card{background:#fff;border:1px solid rgba(27,77,62,.12);border-radius:16px;padding:14px;box-shadow:var(--shadow)}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(27,77,62,.25);background:#fff;font-weight:700}
.chip:hover{background:rgba(27,77,62,.06);text-decoration:none}

/* ---------- CTA ---------- */
.cta{background:linear-gradient(180deg, rgba(203,161,53,.12), rgba(27,77,62,.08));border:1px solid rgba(27,77,62,.12);border-radius:22px;padding:26px;text-align:center;box-shadow:var(--shadow)}
.cta .actions{justify-content:center;margin-top:10px}

/* ---------- Utilities ---------- */
.muted{color:var(--ink-soft)}
.mt12{margin-top:12px}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr}
  .hero-mosaic{grid-template-columns:1fr;gap:8px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  h1{font-size:38px}
}

@media (max-width: 600px){
  .inline-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .inline-grid .span-2{grid-column:1 / -1}
  .grid-4,.grid-3{grid-template-columns:1fr}
}
/* ---- header ---- */
.nav-root {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg, #FAF8F3);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 10px 16px; display: flex; align-items: center; gap: 16px;
}
.nav-brand { display: inline-flex; align-items: center; }
.nav-logo { width: 250px; height: auto; object-fit: contain; }

.nav-links {
  display: flex; gap: 8px; margin-left: 12px; flex: 1 1 auto; flex-wrap: wrap;
}
.nav-link {
  padding: 8px 12px; border-radius: 10px; font-weight: 600;
  color: var(--ink, #163c31); text-decoration: none;
}
.nav-link:hover { background: rgba(27,77,62,.08); }
.nav-link.active { background: #1B4D3E; color: #fff; }

.nav-actions { display: inline-flex; gap: 8px; }
.btn { padding: 8px 12px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.btn.primary { background: #1B4D3E; color: #fff; }
.btn.ghost { border: 1px solid #1B4D3E; color: #1B4D3E; }

:root{
  --primary: #1B4D3E;      /* Jungle Green */
  --secondary: #CBA135;    /* Savanna Gold */
  --bg: #FAF8F3;           /* Ivory */
  --ink: #12352C;
  --ink-soft:#38564C;
  --card:#ffffff;
  --muted:#6b7280;
  --hair:#eae7df;
}

/* ---------- Footer ---------- */
.footer{
  background: var(--bg);
  border-top: 1px solid var(--hair);
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 16px;
  display: grid;
  grid-template-columns: 1.1fr 2.2fr;
  gap: 24px;
}

.footer-brand{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-logo{
  width: 120px;
  height: auto;
  object-fit: contain;
  display: block;
}

.footer-tag{
  font-size: 13px;
  color: var(--muted);
}

.footer-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}

.footer-col{ min-width: 140px; }

.footer-h{
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 8px;
}

.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.footer-link{
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
  transition: color .15s ease, transform .15s ease;
}
.footer-link:hover{
  color: var(--primary);
  transform: translateX(2px);
}

/* social */
.footer-social{ display: flex; gap: 10px; }
.footer-social-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--ink-soft);
  background: #fff;
  transition: all .15s ease;
}
.footer-social-btn:hover{
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.footer-copy{
  border-top: 1px solid var(--hair);
  text-align: center;
  padding: 10px 12px 16px;
  font-size: 13px;
  color: var(--muted);
}

/* responsive */
@media (max-width: 980px){
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 560px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }
  .footer-logo{ width: 104px; }
}


/* ---- hero badges fix ---- */
/* Make sure hero text is above badges */
.hero-copy { position: relative; z-index: 3; }

/* Place badges only over the image mosaic and below the text */
.corner-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 12px;
  color: #fff; background: #1B4D3E;
  z-index: 2;   /* lower than .hero-copy, so they never overlap the text */
}
.corner-badge.right { left: auto; right: 8px; }

@media (max-width: 900px) {
  .nav-links { display: none; }     /* keep header clean on small screens */
  .footer-inner { grid-template-columns: 1fr; }
}
/* ---------- Tokens ---------- */
:root{
  --primary:#1B4D3E;
  --secondary:#CBA135;
  --bg:#FAF8F3;
  --ink:#12352C;
  --ink-soft:#38564C;
  --hair:#eae7df;
  --card:#ffffff;
}

/* ---------- Layout helpers ---------- */
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.section{ padding:28px 0; }
.h2{ font-size:28px; font-weight:800; margin:0 0 10px; }
.h3{ font-size:24px; font-weight:800; margin:0 0 6px; }
.muted{ color:var(--ink-soft); font-size:14px; }

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.carousel{ display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x proximity; }
.carousel > *{ scroll-snap-align:start; }

@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3, .cards-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .grid-4, .grid-3, .cards-3{ grid-template-columns:1fr; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; padding:24px 0 18px; }
.hero-bg{
  position:absolute; inset:0;
  background: conic-gradient(from 180deg at 20% 10%, rgba(27,77,62,.14), transparent 30%, rgba(203,161,53,.14), transparent 60%);
  pointer-events:none;
}
.hero-grid{ display:grid; gap:18px; grid-template-columns: 1.2fr 1fr; align-items:center; }
.hero-title{ font-size:34px; font-weight:900; line-height:1.1; margin:0; }
.hero-sub{ margin:8px 0 12px; color:var(--ink-soft); }

/* tabs */
.tabs{
  display:inline-flex; background:#fff; padding:4px; border-radius:12px; border:1px solid var(--hair); gap:4px; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.tab{
  padding:8px 12px; border-radius:8px; font-weight:700; font-size:14px; color:var(--ink); background:transparent; border:none; cursor:pointer;
}
.tab.active{ background:var(--primary); color:#fff; }
.tab-panel{ margin-top:10px; }

/* compact mosaic */
.mosaic{ position:relative; }
.mosaic-grid{
  display:grid; grid-template-columns:2fr 1fr; grid-auto-rows: 140px; gap:8px;
  border:1px solid var(--hair); padding:8px; border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.mosaic-item{ width:100%; height:100%; object-fit:cover; border-radius:12px; }
.mosaic-item.span-2{ grid-column: span 2; }

/* badges */
.badge{
  position:absolute; top:8px; left:8px;
  background:var(--primary); color:#fff; font-size:12px; font-weight:800;
  border-radius:999px; padding:6px 10px; box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.badge.right{ left:auto; right:8px; }

/* ticker */
.ticker{
  display:inline-flex; align-items:center; gap:8px; background:#fff; padding:6px 10px; border-radius:999px;
  border:1px solid var(--hair); box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.chip{ background:#E8EFEA; color:var(--primary); font-weight:800; font-size:11px; padding:4px 8px; border-radius:999px; }

/* panels, inputs, buttons */
.panel{
  background:#fff; border:1px solid var(--hair); border-radius:14px; padding:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.panel-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; }
.panel-grid .span-2{ grid-column: span 2; }

.input{
  border:1px solid var(--hair); padding:10px 12px; border-radius:10px; outline:none; background:#fff;
}
.input:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(27,77,62,.1); }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px;
  color:#fff; background:var(--primary); font-weight:800; border:1px solid var(--primary);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(27,77,62,.18); }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px;
  color:var(--primary); background:transparent; border:1px solid var(--primary); font-weight:800;
}
.btn-ghost:hover{ background:rgba(27,77,62,.08); }

/* cards */
.card{
  background:#fff; border:1px solid var(--hair); border-radius:14px; overflow:hidden;
  display:block; text-decoration:none; color:inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.10); }
.card-body{ padding:10px 12px; }
.card-title{ font-weight:800; margin-bottom:4px; }
.thumb-16x9, .thumb-4x3{ width:100%; position:relative; overflow:hidden; background:#f4f2ec; }
.thumb-16x9{ aspect-ratio:16 / 9; }
.thumb-4x3{ aspect-ratio:4 / 3; }
.thumb-16x9 img, .thumb-4x3 img{ width:100%; height:100%; object-fit:cover; display:block; }

.hover-float:hover{ transform: translateY(-4px); }

.pill{
  margin:8px 12px 12px;
  display:inline-flex; padding:6px 10px; font-size:12px; font-weight:800; color:#fff; background:var(--primary);
  border-radius:999px;
}
.price-chip{ display:inline-flex; margin-top:8px; padding:6px 10px; font-weight:800; color:#fff; background:var(--primary); border-radius:10px; }

/* theme chips */
.themes{ display:flex; flex-wrap:wrap; gap:8px; }
.theme-chip{
  border:1px solid var(--hair); background:#fff; padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--ink);
  transition: all .12s ease;
}
.theme-chip:hover{ border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }

/* mini cards (why us + trust) */
.mini-card{ border:1px solid var(--hair); background:#fff; border-radius:14px; padding:12px; }
.eyebrow{ font-size:13px; font-weight:800; color:var(--primary); margin-bottom:8px; }
.eyebrow-gold{ font-size:12px; font-weight:800; color:var(--secondary); text-transform:uppercase; letter-spacing:.02em; }
.mini-title{ font-weight:800; margin:4px 0 6px; }

/* CTA */
.cta{
  border:1px solid var(--hair); border-radius:16px; padding:18px; text-align:center;
  background: linear-gradient(180deg, rgba(203,161,53,.10), rgba(27,77,62,.08));
}
.cta-actions{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
.cta-row{ display:flex; gap:10px; margin-top:12px; }

/* reveal animation */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.reveal.reveal-in{ opacity:1; transform: translateY(0); }

/* responsive tweaks */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .mosaic-grid{ grid-auto-rows: 120px; }
  .panel-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .panel-grid{ grid-template-columns: 1fr; }
  .cta-row{ flex-direction: column; }
}
/* Trips page layout */
.trips-root{ padding:18px 0 28px; }
.trips-head{ margin-bottom:10px; }
.trips-title{ font-size:28px; font-weight:900; margin:0 0 6px; }
.err{ color:#b00020; margin:8px 0; }
.meta{ margin:6px 0 10px; color:var(--ink-soft); font-size:14px; }
.empty{ border:1px solid var(--hair); background:#fff; border-radius:12px; padding:18px; text-align:center; }

.filters{
  display:grid; grid-template-columns: 1.4fr .6fr .6fr .8fr auto auto; gap:8px; align-items:center; margin:10px 0 14px;
}
.filters .actions{ display:flex; gap:8px; }
@media (max-width: 980px){
  .filters{ grid-template-columns: 1fr 1fr; }
  .filters .actions{ grid-column: 1 / -1; }
}

/* shared components reused from homepage */
.container{ max-width:1200px; margin:0 auto; padding:0 16px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 980px){ .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .grid-3{ grid-template-columns:1fr;} }

.panel{ background:#fff; border:1px solid var(--hair); border-radius:12px; padding:10px; }
.input{ border:1px solid var(--hair); padding:10px 12px; border-radius:10px; outline:none; background:#fff; }
.input:focus{ border-color: var(--primary); box-shadow:0 0 0 2px rgba(27,77,62,.1); }

.btn-primary{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px;
  color:#fff; background:var(--primary); font-weight:800; border:1px solid var(--primary); }
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:10px;
  color:var(--primary); background:transparent; border:1px solid var(--primary); font-weight:800; }

.card{ background:#fff; border:1px solid var(--hair); border-radius:14px; overflow:hidden;
  display:block; text-decoration:none; color:inherit; transition: transform .12s ease, box-shadow .12s ease; }
.card:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.10); }
.card-body{ padding:10px 12px; }
.card-title{ font-weight:800; margin-bottom:4px; }
.thumb-16x9{ aspect-ratio:16/9; background:#f3f0e8; }
.thumb-16x9 img{ width:100%; height:100%; object-fit:cover; display:block; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.pill{ padding:6px 10px; font-size:12px; font-weight:800; border-radius:999px; color:#fff; background:#7a8; }
.pill-value{ background:#537a65; }
.pill-balanced{ background:#1B4D3E; }
.pill-premium{ background:#CBA135; color:#1B4D3E; }
.price-chip{ padding:6px 10px; border-radius:10px; background:var(--primary); color:#fff; font-weight:800; }

/* skeletons */
.skeleton{ background:linear-gradient(90deg,#eee,#f5f5f5,#eee); background-size:200% 100%; animation:shine 1.2s linear infinite; }
.sk-line{ height:12px; background:#eee; border-radius:6px; margin:8px 0; }
.sk-line.w-70{ width:70%; } .sk-line.w-40{ width:40%; }
.sk-pill{ width:80px; height:24px; background:#eee; border-radius:999px; }
.sk-chip{ width:130px; height:28px; background:#eee; border-radius:8px; }
@keyframes shine{ to{ background-position:-200% 0; } }

/* ---- Trip detail layout ---- */
.trip-detail-root { padding-bottom: 56px; }
.hero-16x9 { aspect-ratio: 16/9; background:#eee; margin: 16px 0 20px; }
.hero-16x9 img { width:100%; height:100%; object-fit:cover; display:block; }

.trip-head { display:flex; gap:24px; align-items:flex-start; justify-content:space-between; }
.quote-card { position: sticky; top: 16px; background:#fff; border:1px solid #E9E4D9; border-radius:16px; padding:16px; width:320px; box-shadow: 0 8px 24px rgba(27,77,62,.08); }
.quote-card.mobile { width:100%; }
.md-hide { display:none; }
@media (max-width: 960px){
  .quote-card{ display:none; }
  .md-hide{ display:block; }
}

.tabs { display:flex; gap:8px; border-bottom:1px solid #eee; margin: 28px 0 16px; flex-wrap:wrap;}
.tab { padding:10px 14px; border-radius:10px 10px 0 0; border:1px solid transparent; color:#1B4D3E; font-weight:600; }
.tab:hover{ background:#f8f6f0; border-color:#E9E4D9; }

.content-grid { display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:24px; }
.content-col { min-width:0; }
.content-aside { min-width:0; }

@media (max-width: 960px){
  .content-grid { grid-template-columns: 1fr; }
}

.article { padding: 16px 0; }
.article + .article { border-top:1px solid #eee; }

.price-box { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.price-label { font-size:.9rem; color:#777; }
.price-main { font-size:1.35rem; font-weight:800; color:#1B4D3E; }

.quote-form .lbl { font-weight:600; font-size:.92rem; margin-top:8px; display:block; }
.quote-form .fine { margin:10px 0 0; padding-left: 18px; color:#6b7280; font-size:.85rem; }
.quote-form .fine li{ list-style: disc; }

.itinerary .day { border:1px solid #eee; border-radius:12px; padding:10px 12px; margin-bottom:10px; background:#fff; }
.itinerary summary { cursor:pointer; font-weight:700; color:#1B4D3E; }

.bullet-list { padding-left: 18px; }
.bullet-list li { list-style: disc; margin: 4px 0; }

.tick-list li::marker { content:"✔ "; color:#1B4D3E; }
.cross-list li::marker { content:"✖ "; color:#b45309; }

.operator-card { display:grid; grid-template-columns: 56px 1fr auto; gap:12px; align-items:center; border:1px solid #eee; padding:12px; border-radius:12px; }
.op-logo { width:56px; height:56px; object-fit:contain; }
.op-name { font-weight:700; }

.rate-row{ display:flex; justify-content:space-between; padding:12px; border:1px dashed #e5e7eb; border-radius:12px; margin-top:8px; }

/* small helpers already in your project: */
.h1{ font-size: clamp(28px, 4.5vw, 48px); color:#123D32; line-height:1.1; }
.h2{ font-size: 22px; margin:10px 0 6px; color:#123D32; }
.lead{ font-size:1.05rem; }
.radius-2{ border-radius:16px; }
.overflow{ overflow:hidden; }
.pv-40{ padding:40px 0; }
/* ========== Brand + base tokens ========== */
:root{
  --brand-50:#f3f6f5;
  --brand-100:#e6eeeb;
  --brand-300:#c6d9d3;
  --brand-700:#21483c;
  --brand-800:#1b3d33;
  --brand-900:#17362d;
  --ink-800:#1a1f1c;
  --ink-700:#2c342f;
  --ink-600:#415049;
  --muted:#667670;
  --ring:#b9d5cc;
  --border:#e7ecea;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}

.container{ max-width:1200px; margin-inline:auto; }
.pv-40{ padding-block:40px; }
.mt-16{ margin-top:16px; }
.mt-24{ margin-top:24px; }
.w-100{ width:100%; }

.h1{ font-family: ui-serif, Georgia, "Times New Roman", Times, serif; font-weight:700; font-size:clamp(2.2rem, 3vw + 1rem, 3.5rem); color:var(--brand-900); line-height:1.1; }
.h2{ font-family: ui-serif, Georgia, "Times New Roman", Times, serif; font-weight:700; font-size:clamp(1.5rem, 1.2vw + 1rem, 2rem); color:var(--brand-900); margin-bottom:.5rem; }

.muted{ color:var(--muted); }
.lead{ font-size:1.05rem; line-height:1.7; color:var(--ink-700); }

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1rem; border:1px solid var(--border); border-radius:.75rem;
  background:#fff; color:var(--brand-900);
}
.btn-ghost:hover{ background:var(--brand-50); }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1rem; border-radius:.8rem; background:var(--brand-900); color:#fff;
  box-shadow: 0 3px 12px rgba(27,61,51,.15);
}
.btn-primary:hover{ background:var(--brand-800); }
.btn-primary:focus{ outline:2px solid var(--ring); outline-offset:2px; }

.input{
  width:100%; padding:.7rem .85rem; border:1px solid var(--border);
  border-radius:.7rem; background:#fff; color:var(--ink-800);
}
.lbl{ font-size:.9rem; color:var(--muted); margin-top:.5rem; display:block; }

.err{ color:#b3261e; background:#fdeceb; border:1px solid #f7c9c5; padding:.9rem 1rem; border-radius:.75rem; }

/* Skeleton hero while loading */
.sk-hero{ height:42vh; border-radius:1.2rem; background:linear-gradient(90deg,#eef3f2 25%,#f5f9f8 37%,#eef3f2 63%); animation:sh 1.2s infinite; }
@keyframes sh{ 0%{background-position:-200px 0} 100%{background-position:calc(200px + 100%) 0} }

/* ========== Hero ========== */
.hero-16x9{ aspect-ratio:16/9; background:var(--brand-50); }
.radius-2{ border-radius:1.2rem; }
.overflow{ overflow:hidden; }
.hero-16x9 img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ========== Title + sticky quote card ========== */
.trip-head{
  display:grid; gap:2rem; align-items:flex-start;
  grid-template-columns: minmax(0,1fr);
  margin-top:1.25rem;
}
@media (min-width: 1024px){
  .trip-head{ grid-template-columns: minmax(0,1fr) 360px; }
}

.quote-card{
  position:relative; background:var(--card); border:1px solid var(--border);
  border-radius:1rem; padding:1.1rem; box-shadow:var(--shadow);
}
@media (min-width:1024px){
  .quote-card{ position:sticky; top:80px; }
}
.quote-card.mobile{ box-shadow:none; }

/* price block */
.price-box{ display:flex; flex-direction:column; gap:.25rem; }
.price-label{ font-size:.9rem; color:var(--muted); }
.price-main{ font-family: ui-serif, Georgia, serif; font-size:1.75rem; color:var(--brand-900); }

/* form fineprint */
.fine{ margin-top:.5rem; color:var(--muted); font-size:.85rem; list-style:disc; padding-left:1rem; }

/* ========== Tabs (anchor nav) ========== */
.trip-body{ margin-top:1.25rem; }
.tabs{
  position:sticky; top:64px; z-index:10;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(140%) blur(6px);
  border:1px solid var(--border); border-radius:1rem; overflow:auto; white-space:nowrap;
  padding:.4rem;
}
.tab{ display:inline-block; color:var(--brand-900); padding:.6rem 1rem; border-radius:.7rem; }
.tab:hover{ background:var(--brand-50); }

/* ========== Content grid ========== */
.content-grid{
  display:grid; gap:2rem; margin-top:1rem;
  grid-template-columns: minmax(0,1fr);
}
@media (min-width:1024px){
  .content-grid{ grid-template-columns: minmax(0,1fr) 320px; }
}
.content-col{ min-width:0; } /* avoid overflow from long content */
.content-aside{}

/* ========== Articles ========== */
.article{ padding:1rem 0; border-bottom:1px solid var(--border); }
.article:last-child{ border-bottom:0; }

.bullet-list{ list-style:disc; padding-left:1.3rem; color:var(--ink-700); }
.tick-list, .cross-list{ list-style:none; padding:0; margin:0; }
.tick-list li::before{ content:"✔ "; color:var(--brand-700); margin-right:.25rem; }
.cross-list li::before{ content:"✖ "; color:#b3261e; margin-right:.25rem; }
.grid-2{ display:grid; gap:1rem; grid-template-columns: 1fr 1fr; }
.grid-2.sm1{ grid-template-columns:1fr; }
@media (min-width: 780px){ .grid-2.sm1{ grid-template-columns:1fr 1fr; } }

/* rates row */
.rate-row{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--border); border-radius:1rem; padding:1rem 1.2rem; background:#fff;
}

/* operator card */
.operator-card{
  display:flex; align-items:center; gap:1rem; border:1px solid var(--border);
  border-radius:1rem; padding:1rem; background:#fff;
}
.op-logo{ width:40px; height:40px; border-radius:50%; background:var(--brand-100); object-fit:cover; }
.op-name{ font-weight:600; color:var(--brand-900); }

/* Itinerary */
.itinerary .day{
  border:1px solid var(--border); border-radius:.9rem; background:#fff; padding:.8rem 1rem; margin-bottom:.75rem;
}
.itinerary summary{ cursor:pointer; font-weight:600; color:var(--brand-900); list-style:none; }
.itinerary summary::-webkit-details-marker{ display:none; }

/* utilities for responsive visibility */
.md-hide{ display:block; }
@media (min-width:1024px){ .md-hide{ display:none; } }
/* ---------- Trip Detail Polished ---------- */

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.pv-40 { padding: 40px 0; }
.radius-2 { border-radius: 16px; }
.overflow { overflow: hidden; }

.crumbs {
  display: flex; gap: 8px; align-items: center;
  font-size: 13px; color: #6b7280; margin: 14px 0 10px;
}
.crumbs a { color: #1B4D3E; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.hero-gallery { display: grid; gap: 10px; }
.hero-main { width: 100%; aspect-ratio: 16/9; background: #f2f2f2; }
.hero-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.hero-thumbs .thumb {
  border: 1px solid #e5e7eb; border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer;
  background: #fff;
}
.hero-thumbs .thumb img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transform: scale(1.0); transition: transform .2s ease;
}
.hero-thumbs .thumb:hover img { transform: scale(1.03); }
.hero-thumbs .thumb.active { outline: 2px solid #1B4D3E; }

.trip-detail-root { padding: 12px 0 56px; }

.trip-head {
  margin-top: 12px;
  display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start;
}
@media (max-width: 960px) {
  .trip-head { grid-template-columns: 1fr; }
}

.h1 { font-size: 28px; line-height: 1.2; font-weight: 800; }
.h2 { font-size: 20px; line-height: 1.25; font-weight: 700; margin-bottom: 8px; }
.muted { color: #6b7280; }
.mt-6 { margin-top: 6px; }
.mt-24 { margin-top: 24px; }

.quote-card {
  position: sticky; top: 18px;
  border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px;
  background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.quote-card.mobile { position: static; top: auto; }

.price-box { display: grid; gap: 4px; }
.price-label { font-size: 12px; color: #6b7280; }
.price-main { font-size: 22px; font-weight: 800; color: #1B4D3E; }

.btn-primary {
  display: inline-flex; justify-content: center; align-items: center;
  gap: 8px; padding: 10px 14px; border-radius: 10px;
  background: #1B4D3E; color: #fff; border: 1px solid #1B4D3E;
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-ghost {
  display: inline-flex; justify-content: center; align-items: center;
  gap: 8px; padding: 10px 14px; border-radius: 10px;
  background: transparent; color: #1B4D3E; border: 1px solid #1B4D3E;
  font-weight: 700;
}
.w-100 { width: 100%; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

.lbl { font-size: 12px; color: #374151; margin-top: 10px; display: block; }
.input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #e5e7eb;
  background: #fff; outline: none;
}
.input:focus { border-color: #1B4D3E; }

.fine { margin-top: 10px; color: #6b7280; font-size: 12px; list-style: disc; padding-left: 18px; }

.tabs {
  display: flex; gap: 8px; margin-top: 18px; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px;
  overflow-x: auto;
}
.tab {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 8px 12px; border-radius: 8px; color: #374151; font-weight: 600;
}
.tab.active { background: #E8EFEA; color: #1B4D3E; }

.content-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; margin-top: 18px;
}
.content-col { min-width: 0; }
.content-aside { min-width: 0; }
@media (max-width: 960px) {
  .content-grid { grid-template-columns: 1fr; }
  .md-hide { display: none; }
}

.article {
  border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; background: #fff;
  margin-top: 12px;
}
.lead { font-size: 15px; color: #374151; }

.bullet-list { list-style: disc; padding-left: 18px; color: #374151; }
.tick-list, .cross-list { list-style: none; padding-left: 0; }
.tick-list li::before { content: "✓ "; color: #1B4D3E; font-weight: 700; }
.cross-list li::before { content: "✕ "; color: #b91c1c; font-weight: 700; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sm1 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .sm1 { grid-template-columns: 1fr 1fr; }
}

.rate-row {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px dashed #e5e7eb; border-radius: 12px; padding: 10px 12px; margin-top: 10px;
}

.operator-card {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center;
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; background: #fff;
}
.op-logo { width: 64px; height: 64px; object-fit: contain; }
.op-name { font-weight: 700; color: #111827; }

.itinerary .day { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; background: #fff; margin-top: 10px; }
.itinerary summary { cursor: pointer; font-weight: 700; color: #1B4D3E; }

.sk-hero {
  width: 100%; aspect-ratio: 16/9; border-radius: 16px;
  background: linear-gradient(90deg,#f1f5f9,#eef2f7,#f1f5f9);
  background-size: 200% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

.err { color: #b91c1c; font-weight: 700; }
/* ================= Safari Connector: TripX ================= */

:root {
  --sc-primary: #1B4D3E;
  --sc-secondary: #CBA135;
  --sc-ink: #111827;
  --sc-ink-soft: #6b7280;
  --sc-bg: #FAF8F3;
  --sc-card: #ffffff;
  --sc-border: #e5e7eb;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.pv-40 { padding: 40px 0; }
.radius-2 { border-radius: 16px; }
.overflow { overflow: hidden; }
.muted { color: var(--sc-ink-soft); }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.w-100 { width: 100%; }
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--sc-primary);
  background: var(--sc-primary); color:white; font-weight:800;
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--sc-primary);
  color: var(--sc-primary); background: transparent; font-weight:800;
}

.h1 { font-size: 28px; line-height: 1.2; font-weight: 900; color: var(--sc-ink); }
.h2 { font-size: 20px; line-height: 1.25; font-weight: 800; color: var(--sc-ink); margin-bottom: 8px; }

/* background brand arc */
.tripX-root { position: relative; padding-bottom: 64px; }
.brand-arc {
  position: absolute; inset: -120px 0 auto 0; height: 360px; z-index: -1;
  background: radial-gradient(1200px 360px at 0% 0%,
    rgba(27,77,62,.12), transparent 60%),
    radial-gradient(900px 300px at 100% 0%,
    rgba(203,161,53,.12), transparent 60%);
  pointer-events: none;
}

/* Split hero */
.split-hero {
  display: grid; grid-template-columns: 1.2fr .9fr; gap: 18px; align-items: stretch;
}
@media (max-width: 980px) { .split-hero { grid-template-columns: 1fr; } }

.split-left { background: #f2f2f2; position: relative; }
.split-left > img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/10; }

.filmstrip {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
}
.film { border: 1px solid var(--sc-border); border-radius: 10px; padding: 0; overflow: hidden; background: #fff; opacity: .9; }
.film img { width: 100%; display:block; aspect-ratio: 5/3; object-fit: cover; transform: scale(1.0); transition: transform .2s ease; }
.film:hover img { transform: scale(1.03); }
.film.active { outline: 2px solid var(--sc-primary); opacity: 1; }

.split-right {
  border: 1px solid var(--sc-border);
  border-radius: 16px; padding: 16px; background: var(--sc-card);
}
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(27,77,62,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.chip-row { display:flex; flex-wrap: wrap; gap: 10px; }
.stat-chip {
  border: 1px solid var(--sc-border); border-radius: 12px; padding: 10px 12px; background: #fff;
  min-width: 120px;
}
.stat-l { font-size: 12px; color: var(--sc-ink-soft); }
.stat-v { font-size: 16px; font-weight: 800; color: var(--sc-ink); }

.cta-row { display:flex; gap: 10px; flex-wrap: wrap; }
.mini-points { color: var(--sc-ink-soft); font-size: 13px; padding-left: 18px; list-style: disc; }

/* Floating dock */
.action-dock {
  display: none;
}
@media (min-width: 981px) {
  .action-dock {
    position: sticky; top: 16px; align-self: start; justify-self: end;
    display: flex; flex-direction: column; gap: 8px;
    transform: translateY(-120%);
  }
}
.dock-btn {
  padding:10px 12px; border-radius: 12px; border:1px solid var(--sc-border); background:#fff; font-weight:700; text-align:center;
}
.dock-btn.primary { border-color: var(--sc-primary); color: #fff; background: var(--sc-primary); }

/* Quick nav */
.quick-nav {
  display:flex; gap:10px; overflow:auto; margin: 16px 0 0;
  border-bottom: 1px solid var(--sc-border); padding-bottom: 6px;
}
.qn {
  padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--sc-ink);
}
.qn:hover { background: #E8EFEA; color: var(--sc-primary); }

/* Main grid */
.gridX { display: grid; grid-template-columns: 1fr 360px; gap: 20px; margin-top: 16px; }
@media (max-width: 980px) { .gridX { grid-template-columns: 1fr; } }
.col-main { min-width: 0; }
.col-side { min-width: 0; }

.articleX {
  border: 1px solid var(--sc-border); border-radius: 16px; padding: 16px; background: #fff; margin-top: 14px;
}
.lead { font-size: 15px; color: #374151; }

/* Highlights mosaic */
.highlight-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; margin-top: 10px;
}
.hi-card {
  grid-column: span 4; border: 1px solid var(--sc-border); border-radius: 14px; padding: 12px; background: #fff;
  display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start;
}
@media (max-width: 720px) { .hi-card { grid-column: span 6; } }
.hi-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sc-secondary); margin-top: 6px; }
.hi-text { color: var(--sc-ink); font-weight: 600; }

/* Route scroller */
.route-scroll {
  margin-top: 8px; border: 1px dashed var(--sc-border); border-radius: 14px; padding: 12px; position: relative;
  background: #fff;
}
.route-line {
  position: absolute; left: 12px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--sc-primary), var(--sc-secondary));
  opacity: .25;
}

/* Timeline */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--sc-primary), var(--sc-secondary)); opacity: .25;
}
.tl-row { display: grid; grid-template-columns: 16px 1fr; gap: 10px; margin-top: 8px; }
.tl-pin { width: 12px; height: 12px; border-radius: 999px; background: var(--sc-primary); margin-top: 10px; }
.tl-card { border: 1px solid var(--sc-border); border-radius: 12px; padding: 12px; background: #fff; }
.tl-h { font-weight: 800; color: var(--sc-ink); margin-bottom: 6px; }

/* Rates */
.rate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 720px) { .rate-cards { grid-template-columns: 1fr; } }
.rate-card {
  border: 1px solid var(--sc-border); border-radius: 14px; padding: 12px; background: #fff;
}
.rate-h { font-size: 12px; color: var(--sc-ink-soft); }
.rate-v { font-size: 18px; font-weight: 900; color: var(--sc-ink); margin-top: 4px; }
.rate-f { font-size: 12px; color: var(--sc-ink-soft); }

/* Inclusions / Features */
.split-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .split-2 { grid-template-columns: 1fr; } }
.tick-list, .cross-list { list-style: none; padding-left: 0; margin: 0; }
.tick-list li::before { content: "✓ "; color: var(--sc-primary); font-weight: 900; }
.cross-list li::before { content: "✕ "; color: #b91c1c; font-weight: 900; }

.feature-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
@media (max-width: 720px) { .feature-row { grid-template-columns: 1fr; } }
.feature {
  border: 1px solid var(--sc-border); border-radius: 14px; padding: 12px; background: #fff;
}
.f-icon { font-size: 22px; }
.f-t { font-weight: 800; margin-top: 4px; }
.f-d { margin-top: 2px; }

/* Sidebar cards */
.side-card {
  border: 1px solid var(--sc-border); border-radius: 16px; padding: 16px; background: #fff; margin-top: 14px;
}
.price-box { display: grid; gap: 4px; }
.price-label { font-size: 12px; color: var(--sc-ink-soft); }
.price-main { font-size: 22px; font-weight: 900; color: var(--sc-primary); }

.lbl { font-size: 12px; color: #374151; margin-top: 10px; display: block; }
.input { width: 100%; padding:10px 12px; border-radius: 10px; border:1px solid var(--sc-border); background:#fff; }
.input:focus { border-color: var(--sc-primary); }
.fine { margin-top: 10px; color: var(--sc-ink-soft); font-size: 12px; list-style: disc; padding-left: 18px; }

.op-line { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; }
.op-logo { width: 56px; height: 56px; object-fit: contain; }
.op-name { font-weight: 900; color: var(--sc-ink); }
.op-badges { display:flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.badge { border: 1px solid var(--sc-border); background:#fff; border-radius: 999px; padding: 4px 8px; font-size: 12px; }

/* CTA ribbon */
.cta-ribbon {
  display:flex; gap: 12px; align-items: center; justify-content: space-between;
  border:1px solid var(--sc-border); border-radius:16px; padding: 14px; margin-top: 16px;
  background: linear-gradient(180deg, rgba(203,161,53,.10), rgba(27,77,62,.10));
}
.cta-text { font-weight: 900; color: var(--sc-ink); display:flex; gap:10px; flex-direction: column; }
.cta-text span { font-weight: 500; color: var(--sc-ink-soft); }

/* Skeleton + errors */
.sk-hero {
  width: 100%; aspect-ratio: 16/9; border-radius: 16px;
  background: linear-gradient(90deg,#f1f5f9,#eef2f7,#f1f5f9);
  background-size: 200% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.err { color: #b91c1c; font-weight: 800; }
/* --- Compact Trip Detail overrides --- */
.hero-16x9 img { aspect-ratio: 16/7; object-fit: cover; width: 100%; height: auto; }
.trip-detail-root .h1 { font-size: 24px; line-height: 1.2; }
.trip-detail-root .lead { font-size: 14px; }
.trip-head { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; margin: 12px 0 8px; }
@media (max-width: 960px) {
  .trip-head { grid-template-columns: 1fr; }
}

.quote-card { position: sticky; top: 84px; border: 1px solid #eaeaea; border-radius: 14px; padding: 14px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.quote-card.mobile { position: static; }

.trip-body .content-grid { display: grid; grid-template-columns: 1fr 0; gap: 16px; }
@media (max-width: 960px) {
  .trip-body .content-grid { grid-template-columns: 1fr; }
}

.article { padding: 12px; margin-top: 12px; border: 1px solid #f0f0f0; border-radius: 12px; background: #fff; }
.h2 { font-size: 18px; margin-bottom: 6px; font-weight: 700; }

.timeline { display: grid; gap: 10px; }
.tl-row { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.tl-pin { width: 8px; height: 8px; border-radius: 999px; background: #1B4D3E; margin: 8px 6px 0 6px; }
.tl-card { border: 1px solid #eee; border-radius: 10px; padding: 10px; background: #fff; }
.tl-h { font-weight: 700; margin-bottom: 4px; }

.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .split-2 { grid-template-columns: 1fr; } }

.tick-list, .cross-list, .bullet-list { margin: 8px 0 0; padding: 0 0 0 18px; }
.tick-list li { list-style: "✔  "; }
.cross-list li { list-style: "✖  "; }
.bullet-list li { list-style: disc; }

.rate-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; border: 1px dashed #e5e5e5; border-radius: 10px; margin-top: 8px; }

.price-box { display: grid; gap: 4px; margin-bottom: 8px; }
.price-label { font-size: 12px; color: #666; }
.price-main { font-size: 18px; font-weight: 800; color: #1B4D3E; }

.quote-form .lbl { font-size: 12px; color: #555; margin-top: 6px; display: block; }
.quote-form .input { width: 100%; border: 1px solid #e6e6e6; border-radius: 8px; padding: 10px; margin-top: 4px; }
.fine { margin-top: 8px; font-size: 12px; color: #666; display: grid; gap: 4px; }

.op-logo { width: 44px; height: 44px; object-fit: contain; }
.operator-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; border: 1px solid #eee; border-radius: 10px; padding: 10px; }
.op-name { font-weight: 700; }

/* Utility */
.btn-ghost { border: 1px solid #1B4D3E20; padding: 8px 12px; border-radius: 10px; color: #1B4D3E; background: #fff; }
.btn-primary { background: #1B4D3E; color: #fff; border-radius: 10px; padding: 10px 14px; border: none; }
.w-100 { width: 100%; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.muted { color: #666; }
.pv-40 { padding: 40px 0; }
.radius-2 { border-radius: 16px; }
.overflow { overflow: hidden; }
.sk-hero { height: 280px; background: linear-gradient(90deg, #f3f3f3 25%, #ecebeb 37%, #f3f3f3 63%); animation: sk 1.4s infinite; border-radius: 16px; }
@keyframes sk { 0% {background-position: -200px 0;} 100% {background-position: calc(200px + 100%) 0;} }
/* ==== Trip Detail: Creative, Compact, Sticky Sidebar ==== */

.trip-shell { --brand:#1B4D3E; --gold:#CBA135; background:#FAF8F3; }

/* Hero */
.trip-hero { position:relative; }
.trip-hero-img { width:100%; height:auto; aspect-ratio: 16/7; object-fit: cover; display:block; }
.trip-hero-scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); }
.trip-hero-inner{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:flex-end; gap:8px; padding:18px; color:#fff;
}
.crumbs{ display:flex; gap:8px; font-size:12px; opacity:.9; align-items:center; flex-wrap:wrap;}
.crumbs a{ color:#fff; text-decoration:none; }
.trip-title{ font-size:28px; line-height:1.1; font-weight:900; letter-spacing:.2px; text-shadow:0 2px 10px rgba(0,0,0,.25); }
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); }
.chip-strong{ background:rgba(0,0,0,.25); border-color:rgba(255,255,255,.25); }
.chip-gold{ background: rgba(203,161,53,.25); border-color:rgba(203,161,53,.55); }
.cta-row { display:flex; gap:8px; margin-top:6px; }
.btn-primary{ background:var(--brand); color:#fff; border:none; border-radius:12px; padding:10px 14px; font-weight:700; }
.btn-soft{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:10px 14px; font-weight:700; }

/* Stat strip */
.container{ max-width:1120px; margin:0 auto; padding:0 16px; }
.stat-strip{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; margin:14px auto; }
@media (max-width:920px){ .stat-strip{ grid-template-columns:1fr 1fr; } }
.stat{ background:#fff; border:1px solid #eee; border-radius:14px; padding:12px; }
.kicker{ font-size:11px; letter-spacing:.4px; color:#777; text-transform:uppercase; }
.stat-v{ font-size:18px; font-weight:900; color:var(--brand); }
.sub{ font-size:12px; color:#888; }

/* Body grid */
.body-grid{ display:grid; grid-template-columns: minmax(0,1fr) 340px; gap:14px; margin:12px auto 38px; align-items:start; }
@media (max-width:1040px){ .body-grid{ grid-template-columns: 1fr; } }

/* Cards */
.card{ background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden; }
.card + .card{ margin-top:12px; }
.card-h{ padding:12px 14px; border-bottom:1px dashed #eee; display:flex; align-items:center; justify-content:space-between; }
.card-t{ margin:0; font-size:16px; font-weight:900; color:#222; }
.card-b{ padding:12px 14px; }
.lead{ font-size:14px; color:#333; }

/* Lists */
.dash{ padding-left:18px; }
.dash li{ list-style:"–  "; margin:6px 0; }
.tick{ padding-left:18px; }
.tick li{ list-style:"✔  "; margin:6px 0; }
.cross{ padding-left:18px; }
.cross li{ list-style:"✖  "; margin:6px 0; }

/* Photo strip */
.photo-strip{ display:flex; gap:10px; overflow:auto; padding:4px; scroll-snap-type:x mandatory; }
.photo-strip img{
  height:140px; width:auto; border-radius:10px; object-fit:cover; flex:0 0 auto; scroll-snap-align:start;
  border:1px solid #eee;
}

/* Itinerary */
.it-wrap{ position:relative; }
.it-line{ position:absolute; left:12px; top:0; bottom:0; width:2px; background: #E8EFEA; }
.it-row{ position:relative; padding-left:32px; margin:10px 0; }
.it-dot{ position:absolute; left:6px; top:9px; width:12px; height:12px; border-radius:999px; background:var(--brand); border:none; }
.it-sum{
  width:100%; text-align:left; padding:10px 12px; border-radius:10px; border:1px solid #eee; background:#fff;
  display:flex; justify-content:space-between; align-items:center; font-weight:700;
}
.it-toggle{ font-weight:900; color:#999; margin-left:10px; }
.it-body{ border:1px solid #f2f2f2; border-top:none; padding:10px 12px; border-radius:0 0 10px 10px; background:#fff; margin-top:-8px; }

/* Sticky Quote */
.quote-stick{ position:sticky; top:90px; height:fit-content; }
.quote-card{ border:1px solid #eee; border-radius:16px; background:#fff; padding:14px; box-shadow: 0 4px 24px rgba(0,0,0,.05); }
.quote-price .big{ font-size:22px; font-weight:900; color:var(--brand); }
.quote-form .lbl{ font-size:12px; margin-top:8px; display:block; color:#666; }
.quote-form .input{ width:100%; border:1px solid #e6e6e6; border-radius:10px; padding:10px; margin-top:4px; }
.fine{ font-size:12px; color:#777; margin-top:10px; }
.w-100{ width:100%; }
.mt-10{ margin-top:10px; }

/* Operator */
.operator-card{
  display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center;
  border:1px dashed #eaeaea; border-radius:12px; padding:10px;
}
.op-logo{ width:44px; height:44px; object-fit:contain; }
.op-name{ font-weight:900; }

/* Utilities */
.pv-40{ padding:40px 0; }
.err{ color:#a00; font-weight:700; }
.btn-ghost{ border:1px solid #1B4D3E22; background:#fff; color:#1B4D3E; padding:10px 14px; border-radius:12px; }
.sk-hero{
  height:280px; border-radius:16px;
  background: linear-gradient(90deg, #f3f3f3 25%, #ecebeb 37%, #f3f3f3 63%);
  animation: sk 1.4s infinite; background-size: 400% 100%;
}
@keyframes sk{ 0% { background-position: 0 0; } 100% { background-position: 140% 0; } }

/* Small screens */
@media (max-width:720px){
  .trip-title{ font-size:22px; }
  .photo-strip img{ height:120px; }
}
/* Visibility helpers for sidebar/photo placement */
.only-desktop { display: none; }
.only-mobile  { display: block; }
@media (min-width:1041px){
  .only-desktop { display: block; }
  .only-mobile  { display: none;  }
}

/* Sidebar photo highlights */
.sidebar-photos{
  margin-top:14px;
  border:1px solid #eee;
  background:#fff;
  border-radius:16px;
  padding:12px;
}
.side-h{
  margin:0 0 8px 0;
  font-size:15px;
  font-weight:900;
  color:#222;
}
.photo-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.photo-grid img{
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #eee;
}

/* Share row */
.share-row{
  margin-top:16px;
  display:flex; align-items:center; gap:10px;
  padding-top:10px; border-top:1px dashed #eee;
}
.share-btn{
  padding:6px 10px; border:1px solid #e6e6e6; border-radius:10px; background:#fff; cursor:pointer;
}
/* ==== Trip Details layout fixes ==== */
.container.body-grid {
  align-items: start; /* make columns start at the top */
}

.quote-col {
  position: relative;
  z-index: 0;
  /* fallback height if JS variable not set yet */
  --quoteH: 520px;
}

.quote-col .quote-card {
  position: sticky;
  top: 20px;
  z-index: 2; /* keep above page background */
  background: #fff;
  border-radius: 12px;
}

.quote-col .sidebar-photos {
  /* push photos BELOW sticky card height (from CSS var) */
  margin-top: calc(var(--quoteH) + 16px);
  position: relative;
  z-index: 1; /* make sure they never go under body bg */
}

.sidebar-photos .photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sidebar-photos .photo-grid img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Smaller hero */
.trip-hero {
  height: min(34vh, 460px);
  min-height: 260px;
}
.trip-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trip-hero { overflow: hidden; }
.trip-hero-img { width: 100%; height: 100%; object-fit: cover; }
.quote-col .quote-card .input { width: 100%; margin-top: 8px; }
.btn-primary { cursor: pointer; }
/* ===== SafariConnector HOME LAYOUT ===== */

/* container ya ndani ya homepage */
.home-shell {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 16px 72px;
  background: #F3F4EF;
}

/* ---------- HERO ---------- */
.home-hero {
  margin-top: 24px;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  position: relative;
  background: #05291F;
  box-shadow: 0 22px 55px rgba(0,0,0,0.45);
}

.home-hero-bg {
  position: relative;
  height: 420px;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(11,123,83,0.55), transparent 60%),
    linear-gradient(120deg, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
}

/* grid ya hero: text + glass card */
.home-hero-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr);
  padding: 32px 32px 24px;
  gap: 24px;
}

.home-hero-left {
  align-self: center;
  max-width: 640px;
}

.home-hero-right {
  align-self: center;
  justify-self: flex-end;
  max-width: 360px;
  width: 100%;
}

/* strip ya stats chini ya hero */
.home-hero-stats-wrap {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
}

.home-hero-stats {
  background: rgba(249,250,251,0.98);
  border-radius: 999px;
  padding: 7px 18px;
  border: 1px solid #E5E7EB;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #111827;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* helper kwa object-cover ya Next Image kama tailwind haipo */
.object-cover {
  object-fit: cover;
}

/* ---------- GRIDS ZA SECTIONS ---------- */

.home-grid-dests {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.home-grid-trips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-grid-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.home-grid-ops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-grid-trust {
  margin-top: 44px;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  background: #FFFFFF;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1024px) {
  /* hero iwe column moja */
  .home-hero-bg {
    height: 520px;
  }

  .home-hero-grid {
    position: static;
    display: flex;
    flex-direction: column;
    padding: 24px 20px 20px;
  }

  .home-hero-right {
    max-width: 100%;
    justify-self: stretch;
  }

  .home-hero-stats-wrap {
    position: static;
    padding: 0 16px 16px;
  }

  .home-hero-stats {
    width: 100%;
    justify-content: center;
    border-radius: 18px;
  }

  .home-grid-dests {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-grid-trips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-grid-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-grid-ops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-grid-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-hero {
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
  }

  .home-hero-bg {
    height: 460px;
  }

  .home-grid-dests {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-grid-trips,
  .home-grid-steps,
  .home-grid-ops,
  .home-grid-trust {
    grid-template-columns: 1fr;
  }
}