/* ============================================================
   TOUR-UGANDA.COM — shared design system
   ============================================================ */

:root{
  --ink:#221f1a;
  --ink-soft:#33312b;
  --clay:#c2551f;
  --clay-deep:#8f3f18;
  --matoke:#4d6a41;
  --matoke-deep:#324429;
  --matoke-bright:#84b06d;
  --victoria:#2c5a66;
  --victoria-deep:#1f414a;
  --victoria-bright:#63aec4;
  --bark:#151310;
  --bark-hi:#f7f2e6;
  --gold:#e3a23c;
  --gold-deep:#b97e26;
  --paper:#0a0a09;
  --surface:#1d1a16;
  --muted: rgba(247,242,230,0.66);
  --line: rgba(247,242,230,0.14);
  --line-light: rgba(251,248,241,0.22);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--bark-hi);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:700;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit;}
ul{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px;}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--clay);
  display:flex; align-items:center; gap:0.6em;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--clay); display:inline-block;}
.eyebrow.on-dark{color:var(--gold);}
.eyebrow.on-dark::before{background:var(--gold);}
.eyebrow.c-matoke{color:var(--matoke-bright);}
.eyebrow.c-matoke::before{background:var(--matoke-bright);}
.eyebrow.c-victoria{color:var(--victoria-bright);}
.eyebrow.c-victoria::before{background:var(--victoria-bright);}
.eyebrow.c-gold{color:var(--gold);}
.eyebrow.c-gold::before{background:var(--gold);}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,9,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 32px; max-width:1180px; margin:0 auto;}
.brand{font-family:'Fraunces', serif; font-weight:700; font-size:1.12rem; letter-spacing:-0.01em; text-decoration:none; color:var(--bark-hi); display:flex; align-items:center; gap:10px;}
.brand img{height:38px; width:auto; display:block;}
.brand em{color:var(--gold); font-style:normal;}
.nav-links{display:flex; gap:28px; font-size:0.86rem; font-weight:500;}
.nav-links a{text-decoration:none; color:var(--muted); position:relative; padding:4px 0;}
.nav-links a:hover{color:var(--gold);}
.nav-links a.active{color:var(--bark-hi);}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold);}
.nav-cta{font-family:'IBM Plex Mono', monospace; font-size:0.74rem; background:var(--clay); color:var(--bark-hi); padding:10px 16px; text-decoration:none; letter-spacing:0.03em; border:1px solid var(--clay); transition:background .2s, color .2s; white-space:nowrap;}
.nav-cta:hover{background:transparent; color:var(--bark-hi);}
.nav-toggle{display:none; background:none; border:none; padding:4px;}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--bark-hi); margin:5px 0;}
@media (max-width:980px){
  .nav-links, .nav-cta.desktop{display:none;}
  .nav-toggle{display:block;}
}

.mobile-menu{display:none; position:fixed; inset:0; z-index:60; background:var(--ink); color:var(--bark-hi); padding:28px 32px; overflow-y:auto;}
.mobile-menu.open{display:flex; flex-direction:column;}
.mobile-menu .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:36px;}
.mobile-menu a{font-family:'Fraunces', serif; font-size:1.5rem; text-decoration:none; color:var(--bark-hi); padding:12px 0; border-bottom:1px solid var(--line-light);}
.mobile-menu .close{background:none; border:none; color:var(--bark-hi); font-size:1.6rem;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 24px; font-size:0.92rem; font-weight:600; text-decoration:none; border:1px solid transparent; transition:transform .15s ease, background .2s, color .2s, border-color .2s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--clay); color:var(--bark-hi);}
.btn-primary:hover{background:var(--clay-deep);}
.btn-ghost{border-color:var(--line); color:var(--bark-hi);}
.btn-ghost:hover{background:rgba(247,242,230,0.07);}
.btn-ghost.on-dark{border-color:var(--line-light); color:var(--bark-hi);}
.btn-ghost.on-dark:hover{background:rgba(251,248,241,0.08);}
.btn-dark{background:var(--ink); color:var(--bark-hi);}
.btn-dark:hover{background:var(--ink-soft);}
.btn-matoke{background:var(--matoke); color:var(--bark-hi);}
.btn-matoke:hover{background:var(--matoke-deep);}
.btn-victoria{background:var(--victoria); color:var(--bark-hi);}
.btn-victoria:hover{background:var(--victoria-deep);}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-deep);}
.btn-sm{padding:10px 18px; font-size:0.82rem;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{padding:64px 0 56px; border-bottom:1px solid var(--line);}
.page-hero.on-dark{background:var(--ink); color:var(--bark-hi); border-bottom:none;}
.page-hero .crumb{font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--muted); margin-bottom:18px; display:block;}
.page-hero.on-dark .crumb{color:rgba(251,248,241,0.6);}
.page-hero .crumb a{text-decoration:none; color:inherit;}
.page-hero .crumb a:hover{color:var(--gold);}
.page-hero h1{font-size:clamp(2.1rem, 4.2vw, 3.4rem); margin:16px 0 20px;}
.page-hero.on-dark h1{color:var(--bark-hi);}
.page-hero p.lede{font-size:1.05rem; color:var(--muted); max-width:56ch;}
.page-hero.on-dark p.lede{color:rgba(251,248,241,0.78);}
.page-hero-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:center;}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr;}}

.stat-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bark);}
.stat-strip.on-dark{background:rgba(251,248,241,0.03); border-color:var(--line-light);}
.stat-strip .wrap{display:flex; flex-wrap:wrap; padding:0;}
.stat-item{flex:1 1 200px; padding:22px 32px; border-right:1px solid var(--line);}
.stat-strip.on-dark .stat-item{border-right:1px solid var(--line-light);}
.stat-item:last-child{border-right:none;}
.stat-item b{display:block; font-family:'Fraunces', serif; font-size:1.5rem; margin-bottom:4px;}
.stat-item span{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--muted);}
.stat-strip.on-dark .stat-item span{color:rgba(251,248,241,0.7);}
@media (max-width:700px){.stat-item{border-right:none; border-bottom:1px solid var(--line);}}

/* ---------- GENERIC SECTIONS ---------- */
.section{padding:96px 0; border-bottom:1px solid var(--line);}
.section.on-dark{background:var(--ink); color:var(--bark-hi); border-bottom:none;}
.section.tint-bark{background:var(--bark);}
.section-head{max-width:70ch; margin-bottom:48px;}
.section-head h2{font-size:clamp(1.85rem,3.3vw,2.5rem); margin-top:14px;}
.section.on-dark .section-head h2{color:var(--bark-hi);}
.section-head p{color:var(--muted); margin-top:14px; max-width:58ch;}
.section.on-dark .section-head p{color:rgba(251,248,241,0.75);}

/* ---------- CARD GRID ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.section.on-dark .card-grid{background:var(--line-light); border-color:var(--line-light);}
.card{background:var(--surface); padding:30px 26px; display:flex; flex-direction:column; gap:14px; min-height:260px;}
.section.on-dark .card, .section.tint-bark .card{background:var(--ink);}
.card .k{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--clay); letter-spacing:0.05em;}
.section.on-dark .card .k{color:var(--gold);}
.card h3{font-size:1.24rem;}
.section.on-dark .card h3{color:var(--bark-hi);}
.card p{font-size:0.92rem; color:var(--muted); flex-grow:1;}
.section.on-dark .card p{color:rgba(251,248,241,0.72);}
.card .meta{display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; padding-top:14px; border-top:1px solid var(--line);}
.section.on-dark .card .meta{border-top-color:var(--line-light);}
.card .meta .dur{color:var(--muted);}
.section.on-dark .card .meta .dur{color:rgba(251,248,241,0.6);}
.card .meta .go{color:var(--clay); font-weight:600;}
.section.on-dark .card .meta .go{color:var(--gold);}
@media (max-width:900px){.card-grid, .card-grid.cols-2{grid-template-columns:1fr;}}

/* ---------- TIMELINE / ITINERARY ---------- */
.timeline{border-top:1px solid var(--line);}
.timeline-item{display:grid; grid-template-columns:110px 1fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--line);}
.timeline-item .time{font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--clay); padding-top:3px;}
.timeline-item h4{font-size:1.05rem; margin-bottom:6px;}
.timeline-item p{font-size:0.92rem; color:var(--muted);}
@media (max-width:640px){.timeline-item{grid-template-columns:80px 1fr;}}

/* ---------- CALLOUT / SAFETY BOX ---------- */
.callout{border:1px solid var(--line); border-left:4px solid var(--clay); padding:24px 28px; background:var(--bark); display:flex; flex-direction:column; gap:8px;}
.callout.c-matoke{border-left-color:var(--matoke-bright);}
.callout.c-victoria{border-left-color:var(--victoria-bright);}
.callout.c-gold{border-left-color:var(--gold);}
.callout h4{font-size:1rem;}
.callout p{font-size:0.9rem; color:var(--muted);}

/* ---------- PRICING ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.price-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.price-card{background:var(--surface); padding:32px 26px; display:flex; flex-direction:column; gap:16px;}
.price-card.featured{background:var(--ink); color:var(--bark-hi); border-top:3px solid var(--gold);}
.price-card .amount{font-family:'Fraunces', serif; font-size:2.3rem; font-weight:700;}
.price-card .amount span{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:400; color:var(--muted);}
.price-card.featured .amount span{color:rgba(251,248,241,0.7);}
.price-card ul li{font-size:0.88rem; padding:8px 0; border-top:1px solid var(--line); color:var(--muted);}
.price-card.featured ul li{border-top-color:var(--line-light); color:rgba(251,248,241,0.8);}
@media (max-width:900px){.price-grid{grid-template-columns:1fr;}}

/* ---------- GALLERY (color-block placeholders, described by caption) ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.gallery-item{aspect-ratio:4/5; position:relative; overflow:hidden; display:flex; align-items:flex-end; background-size:cover; background-position:center;}
.gallery-item span{position:relative; z-index:1; color:var(--bark-hi); font-family:'IBM Plex Mono', monospace; font-size:0.72rem; padding:12px; line-height:1.4; text-shadow:0 1px 4px rgba(0,0,0,0.9);}
.gallery-item::before{content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.85) 100%);}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line); padding:20px 0;}
.faq-item h4{font-size:0.98rem; margin-bottom:8px;}
.faq-item p{font-size:0.9rem; color:var(--muted);}

/* ---------- TESTIMONIALS ---------- */
.test-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.test blockquote{font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:1.1rem; line-height:1.45; margin:0 0 16px;}
.test cite{font-family:'IBM Plex Mono', monospace; font-style:normal; font-size:0.75rem; color:var(--muted);}
@media (max-width:860px){.test-grid{grid-template-columns:1fr; gap:40px;}}

/* ---------- FORM ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1/-1;}
label{display:block; font-family:'IBM Plex Mono', monospace; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin-bottom:8px;}
input, select, textarea{width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--surface); font-family:'Inter', sans-serif; font-size:0.94rem; color:var(--bark-hi);}
textarea{resize:vertical; min-height:110px;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--clay); outline-offset:1px; border-color:var(--clay);}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--clay); color:var(--bark-hi); padding:88px 0; text-align:center;}
.cta-band.c-matoke{background:var(--matoke);}
.cta-band.c-victoria{background:var(--victoria);}
.cta-band.c-ink{background:var(--ink);}
.cta-band.c-gold{background:var(--gold); color:var(--ink);}
.cta-band.c-gold h2{color:var(--ink);}
.cta-band.c-gold p{color:rgba(34,31,26,0.75);}
.cta-band.c-gold .btn-primary{background:var(--ink); color:var(--bark-hi);}
.cta-band.c-gold .btn-primary:hover{background:#000;}
.cta-band.c-gold .btn-ghost{border-color:rgba(34,31,26,0.4); color:var(--ink);}
.cta-band h2{font-size:clamp(1.9rem,3.8vw,2.8rem); color:var(--bark-hi); max-width:18ch; margin:18px auto 16px;}
.cta-band p{max-width:50ch; margin:0 auto 32px; color:rgba(251,248,241,0.85);}
.cta-band .btn-row{justify-content:center;}
.cta-band .btn-primary{background:var(--ink);}
.cta-band .btn-primary:hover{background:#000;}
.cta-band .btn-ghost{border-color:rgba(251,248,241,0.5); color:var(--bark-hi);}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:rgba(251,248,241,0.7); padding:60px 0 26px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid var(--line-light);}
.footer-grid h5{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
.footer-grid a{display:block; text-decoration:none; color:rgba(251,248,241,0.7); font-size:0.89rem; margin-bottom:10px;}
.footer-grid a:hover{color:var(--bark-hi);}
.footer-brand{font-family:'Fraunces', serif; font-size:1.25rem; color:var(--bark-hi); margin-bottom:12px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:20px; font-size:0.76rem; flex-wrap:wrap; gap:10px;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:30px;}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ---------- PAGE BANNERS ---------- */
.banner{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bark);
}
.banner svg{width:100%; height:100%; display:block;}
.banner img{width:100%; height:100%; display:block; object-fit:cover;}
.banner video{width:100%; height:100%; display:block; object-fit:cover;}
.banner::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%);
  pointer-events:none;
}
.banner .banner-tag{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--bark-hi);
  background:rgba(8,8,7,0.78);
  padding:6px 10px;
  backdrop-filter:blur(3px);
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
}
@media (max-width:900px){.banner{aspect-ratio:4/3;}}

/* ---------- HOME HERO ROUTE SVG ---------- */
.route-panel{position:relative; aspect-ratio:1/1.05;}
.route-panel svg{width:100%; height:100%;}
.route-path{fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.6s 0.3s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.route-dot{fill:var(--bark-hi);}
.route-dot.hi{fill:var(--gold);}
.route-label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; fill:rgba(251,248,241,0.85);}
@media (prefers-reduced-motion: reduce){.route-path{animation:none; stroke-dashoffset:0;}}

/* ---------- FLOATING WHATSAPP BUTTON ---------- */
.whatsapp-float{
  position:fixed;
  bottom:22px;
  right:22px;
  z-index:80;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,0.55);
  transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none;
}
.whatsapp-float:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 34px -8px rgba(0,0,0,0.6);
}
.whatsapp-float svg{width:30px; height:30px; fill:#ffffff;}
.whatsapp-float .wa-label{
  position:absolute;
  right:70px;
  background:var(--ink);
  color:var(--bark-hi);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  padding:8px 12px;
  white-space:nowrap;
  opacity:0;
  transform:translateX(6px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  border:1px solid var(--line-light);
}
.whatsapp-float:hover .wa-label{opacity:1; transform:translateX(0);}
@media (max-width:640px){
  .whatsapp-float{width:52px; height:52px; bottom:16px; right:16px;}
  .whatsapp-float svg{width:26px; height:26px;}
  .whatsapp-float .wa-label{display:none;}
}

.tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.tile{background:var(--surface); padding:30px 24px; text-decoration:none; color:var(--bark-hi); display:flex; flex-direction:column; gap:10px; transition:background .2s;}
.tile:hover{background:var(--ink);}
.tile .k{font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--gold); letter-spacing:0.05em;}
.tile h3{font-size:1.1rem;}
.tile p{font-size:0.85rem; color:var(--muted);}
.tile .arrow{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--clay); margin-top:auto;}
@media (max-width:900px){.tile-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tile-grid{grid-template-columns:1fr;}}