/* ==========================================================================
   MANZALA — Your Journey. Your Sri Lanka.
   Handwritten stylesheet. No frameworks, no gradients.
   Palette pulled from the Manzala mark:
     ink    #12314F   ocean #2E7BA6   ochre #E9902B
     paper  #F7F4EE   leaf  #2F6B4F
   ========================================================================== */

:root{
  --ink:#12314F;
  --ink-soft:#3C5771;
  --ink-faint:#6B819A;
  --ocean:#2E7BA6;
  --ochre:#E9902B;
  --ochre-deep:#C9741A;
  --leaf:#2F6B4F;
  --paper:#F7F4EE;
  --paper-2:#F1ECE2;
  --white:#FFFFFF;
  --rule:#DDD5C7;
  --rule-dark:#254764;

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans: "Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;

  --wrap:1180px;
  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.14; margin:0; letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,6.4vw,4.5rem)}
h2{font-size:clamp(1.95rem,4vw,2.9rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ochre-deep);
  margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:34px; height:2px; background:var(--ochre); flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:""; width:34px; height:2px; background:var(--ochre); flex:none}
.eyebrow.on-dark{color:var(--ochre)}

.lede{font-size:1.09rem; color:var(--ink-soft); max-width:60ch}
.muted{color:var(--ink-faint)}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
.section{padding:96px 0}
.section--tight{padding:70px 0}
.section--paper2{background:var(--paper-2)}
.section--ink{background:var(--ink); color:#E9EEF4}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .lede{color:#B7C6D6}

.hr{height:1px; background:var(--rule); border:0; margin:0}

.head{max-width:660px; margin-bottom:52px}
.head.center{margin-left:auto; margin-right:auto; text-align:center}
.head.center .lede{margin-left:auto; margin-right:auto}
.head p{margin-top:18px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  border:1.5px solid var(--ink); background:var(--ink); color:#fff;
  transition:background .22s, color .22s, border-color .22s, transform .22s;
}
.btn:hover{background:var(--ochre); border-color:var(--ochre); color:var(--ink); transform:translateY(-2px)}
.btn--ochre{background:var(--ochre); border-color:var(--ochre); color:var(--ink)}
.btn--ochre:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn--ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn--ghost-light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn--sm{padding:12px 22px; font-size:.68rem}

.textlink{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.74rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink); border-bottom:2px solid var(--ochre); padding-bottom:5px;
  transition:gap .2s, color .2s;
}
.textlink:hover{gap:16px; color:var(--ochre-deep)}
.textlink .ar{transition:transform .2s}
.textlink:hover .ar{transform:translateX(3px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{
  background:var(--ink); color:#B9C8D8;
  font-size:.76rem; letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:42px; flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar-l,.topbar-r{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.topbar-r span{color:#7E93A8}

.site-head{
  position:sticky; top:0; z-index:80;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.site-head.is-stuck{box-shadow:0 6px 22px rgba(18,49,79,.09)}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:82px}

.brand{display:flex; align-items:center; gap:13px}
.brand img{width:52px; height:52px; flex:none; border-radius:50%; background:#fff; padding:4px}
.brand-txt{line-height:1}
.brand-name{
  font-family:var(--serif); font-size:1.42rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); display:block;
}
.brand-tag{
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:5px; display:block;
}

.nav{display:flex; align-items:center; gap:34px}
.nav a{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:6px 0; position:relative;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--ochre); transition:right .26s;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.active::after{right:0}
.nav a.active{color:var(--ink)}

.head-cta{display:flex; align-items:center; gap:14px}

.burger{
  display:none; width:46px; height:42px; border:1.5px solid var(--rule);
  background:transparent; padding:0; position:relative;
}
.burger span{
  position:absolute; left:12px; right:12px; height:2px; background:var(--ink);
  transition:transform .25s, opacity .2s;
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{
  display:none; border-top:1px solid var(--rule); background:var(--paper);
  padding:12px var(--gut) 26px;
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block; padding:15px 0; border-bottom:1px solid var(--rule);
  font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.mobile-nav .btn{width:100%; justify-content:center; margin-top:20px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative; background:var(--ink); overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-media::after{content:""; position:absolute; inset:0; background:rgba(11,32,54,.56)}
.hero-in{position:relative; z-index:2; padding-top:130px; padding-bottom:118px; color:#fff}
.hero h1{color:#fff; max-width:16ch; text-shadow:0 2px 26px rgba(6,20,34,.32)}
.hero .kicker{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:700;
  color:var(--ochre); margin:0 0 24px; display:flex; align-items:center; gap:13px;
}
.hero .kicker::before{content:""; width:46px; height:2px; background:var(--ochre)}
.hero p.hero-sub{
  margin:26px 0 38px; max-width:50ch; font-size:1.12rem; color:#DCE5EE;
  text-shadow:0 1px 16px rgba(6,20,34,.3);
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap}

.hero-facts{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.18);
  background:rgba(9,28,48,.5);
}
.hero-facts .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.fact{padding:26px 22px; border-left:1px solid rgba(255,255,255,.14)}
.fact:first-child{border-left:0; padding-left:0}
.fact b{
  display:block; font-family:var(--serif); font-size:1.85rem; color:#fff; line-height:1;
}
.fact span{
  display:block; margin-top:9px; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:#A9BCCE;
}

/* page banner (inner pages) */
.pagehead{position:relative; background:var(--ink); overflow:hidden}
.pagehead .hero-media::after{background:rgba(11,32,54,.62)}
.pagehead-in{position:relative; z-index:2; padding-top:96px; padding-bottom:84px; color:#fff}
.pagehead h1{color:#fff; max-width:18ch}
.pagehead p{margin:22px 0 0; max-width:56ch; color:#D5E0EA; font-size:1.06rem}
.crumbs{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:#9FB4C7; margin-bottom:22px;
}
.crumbs a:hover{color:#fff}
.crumbs .sep{margin:0 10px; color:#5F7A93}

/* ==========================================================================
   INTRO / SPLIT
   ========================================================================== */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center}
.split--rev .split-media{order:2}

.framed{position:relative}
.framed img{position:relative; z-index:2}
.framed::before{
  content:""; position:absolute; z-index:1;
  left:-18px; top:-18px; width:58%; height:58%;
  border-left:2px solid var(--ochre); border-top:2px solid var(--ochre);
}
.framed::after{
  content:""; position:absolute; z-index:1;
  right:-18px; bottom:-18px; width:58%; height:58%;
  border-right:2px solid var(--ocean); border-bottom:2px solid var(--ocean);
}

.stack-media{position:relative; padding-bottom:70px; padding-right:60px}
.stack-media .big{width:100%; box-shadow:0 22px 44px rgba(18,49,79,.16)}
.stack-media .small{
  position:absolute; right:0; bottom:0; width:52%;
  border:8px solid var(--paper); box-shadow:0 18px 34px rgba(18,49,79,.2);
}

.stamp{
  position:absolute; z-index:5; right:-14px; top:-26px;
  width:118px; height:118px; border-radius:50%;
  background:var(--ochre); color:var(--ink);
  display:grid; place-content:center; text-align:center;
  transform:rotate(-9deg);
  border:2px dashed rgba(18,49,79,.45);
}
.stamp b{display:block; font-family:var(--serif); font-size:1.75rem; line-height:1}
.stamp span{display:block; font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; margin-top:5px; font-weight:700}

/* signature */
.sig{margin-top:30px; display:flex; align-items:center; gap:16px}
.sig-name{font-family:var(--serif); font-style:italic; font-size:1.35rem; color:var(--ink)}
.sig-role{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint)}

/* ---------- value list ---------- */
.values{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.value{background:var(--paper); padding:36px 28px}
.section--paper2 .value{background:var(--paper-2)}
.value .ico{width:38px; height:38px; margin-bottom:20px; color:var(--ochre-deep)}
.value h3{font-size:1.18rem; margin-bottom:10px}
.value p{font-size:.94rem; color:var(--ink-soft); margin:0}

/* ==========================================================================
   DESTINATION GRID
   ========================================================================== */
.dest-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:20px}
.dest{
  position:relative; overflow:hidden; background:var(--ink);
  min-height:270px; display:block;
}
.dest img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.dest::after{
  content:""; position:absolute; inset:0;
  background:rgba(12,32,52,.30);
  transition:background .35s;
}
/* solid-colour scrim (layered flat blocks, not a gradient ramp) keeps
   white captions legible over bright photos */
.dest .scrim{
  position:absolute; z-index:2; left:0; right:0; bottom:0; height:56%;
  background:rgba(9,26,44,.62);
  -webkit-mask-image:linear-gradient(to top, #000 32%, transparent 100%);
  mask-image:linear-gradient(to top, #000 32%, transparent 100%);
  pointer-events:none;
}
.dest:hover img{transform:scale(1.07)}
.dest:hover::after{background:rgba(12,32,52,.44)}
.dest-cap{position:absolute; z-index:3; left:26px; right:26px; bottom:24px; color:#fff}
.dest-cap b{display:block; font-family:var(--serif); font-size:1.55rem; line-height:1.1}
.dest-cap span{
  display:block; margin-top:8px; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:#D8C29A;
}
.dest-num{
  position:absolute; z-index:3; top:20px; left:26px;
  font-family:var(--serif); font-size:.9rem; color:rgba(255,255,255,.72);
  letter-spacing:.1em;
}
.c4{grid-column:span 4} .c5{grid-column:span 5} .c6{grid-column:span 6}
.c7{grid-column:span 7} .c8{grid-column:span 8} .c3{grid-column:span 3}
.tall{min-height:400px}

/* ==========================================================================
   TOUR CARDS
   ========================================================================== */
.tours{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.tour{
  background:var(--white); border:1px solid var(--rule);
  display:flex; flex-direction:column;
  transition:transform .28s, box-shadow .28s, border-color .28s;
}
.tour:hover{transform:translateY(-6px); box-shadow:0 24px 46px rgba(18,49,79,.14); border-color:#C9BFAC}
.tour-media{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--paper-2)}
.tour-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.tour:hover .tour-media img{transform:scale(1.06)}
.tour-days{
  position:absolute; left:0; top:20px; z-index:3;
  background:var(--ochre); color:var(--ink);
  padding:8px 16px 8px 14px;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.tour-body{padding:28px 26px 30px; display:flex; flex-direction:column; flex:1}
.tour-body h3{margin-bottom:12px}
.tour-route{
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:16px; line-height:1.7;
}
.tour-body p{font-size:.95rem; color:var(--ink-soft)}
.tour-foot{
  margin-top:auto; padding-top:20px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.tour-price{font-family:var(--serif); font-size:1.05rem; color:var(--ink)}
.tour-price small{display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:3px}

/* pills / filters */
.pills{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px}
.pill{
  border:1.5px solid var(--rule); background:transparent; color:var(--ink-soft);
  padding:11px 22px; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; transition:.2s;
}
.pill:hover{border-color:var(--ink); color:var(--ink)}
.pill.active{background:var(--ink); border-color:var(--ink); color:#fff}

/* ==========================================================================
   ITINERARY BLOCKS
   ========================================================================== */
.itin{
  background:var(--white); border:1px solid var(--rule);
  margin-bottom:34px; scroll-margin-top:110px;
}
.itin-top{display:grid; grid-template-columns:340px 1fr; align-items:stretch}
.itin-top .ph{position:relative; overflow:hidden; min-height:240px; background:var(--paper-2)}
.itin-top .ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.itin-badge{
  position:absolute; z-index:3; left:0; top:22px;
  background:var(--ink); color:#fff; padding:9px 18px;
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.itin-intro{padding:34px 34px 30px}
.itin-intro h3{font-size:1.75rem; margin-bottom:8px}
.itin-intro .sub{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ochre-deep); font-weight:700; margin-bottom:16px;
}
.itin-intro p{font-size:.96rem; color:var(--ink-soft)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chip{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--rule); padding:6px 12px; color:var(--ink-soft);
}
.chip.hl{border-color:var(--ochre); color:var(--ochre-deep); font-weight:700}

.itin-toggle{
  width:100%; text-align:left; background:var(--paper-2); border:0;
  border-top:1px solid var(--rule); border-bottom:1px solid transparent;
  padding:18px 34px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.itin-toggle:hover{background:#EAE3D6}
.itin-toggle .pm{
  width:26px; height:26px; border:1.5px solid var(--ink); position:relative; flex:none;
  transition:transform .3s, background .25s, border-color .25s;
}
.itin-toggle .pm::before,.itin-toggle .pm::after{
  content:""; position:absolute; background:var(--ink); transition:opacity .25s, background .25s;
}
.itin-toggle .pm::before{left:6px; right:6px; top:11.25px; height:1.5px}
.itin-toggle .pm::after{top:6px; bottom:6px; left:11.25px; width:1.5px}
.itin.open .itin-toggle{background:var(--ink); color:#fff; border-bottom-color:var(--rule-dark)}
.itin.open .itin-toggle .pm{border-color:var(--ochre); background:var(--ochre); transform:rotate(180deg)}
.itin.open .itin-toggle .pm::before{background:var(--ink)}
.itin.open .itin-toggle .pm::after{opacity:0}

.itin-days{display:none; padding:8px 34px 34px}
.itin.open .itin-days{display:block}

/* day row — table-less, works everywhere */
.day{display:grid; grid-template-columns:118px 1fr 176px; gap:26px; padding:24px 0; border-bottom:1px solid var(--rule)}
.day:last-child{border-bottom:0}
.day-n{position:relative; padding-left:0}
.day-n b{
  font-family:var(--serif); font-size:1.5rem; color:var(--ink); display:block; line-height:1;
}
.day-n span{
  display:block; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ochre-deep); font-weight:700; margin-top:7px;
}
.day-acts{list-style:none; margin:0; padding:0}
.day-acts li{position:relative; padding-left:22px; margin-bottom:7px; font-size:.96rem; color:var(--ink-soft)}
.day-acts li:last-child{margin-bottom:0}
.day-acts li::before{
  content:""; position:absolute; left:0; top:10px;
  width:7px; height:7px; background:var(--ochre); transform:rotate(45deg);
}
.day-acts li.star{color:var(--ink); font-weight:600}
.day-acts li.star::before{background:var(--ocean)}
.day-stay{text-align:right}
.day-stay em{
  display:block; font-style:normal; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px;
}
.day-stay b{font-family:var(--serif); font-size:1.14rem; font-weight:400; color:var(--ink)}

.itin-foot{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:2px solid var(--ink); padding-top:24px; margin-top:8px;
}
.itin-foot .price b{font-family:var(--serif); font-size:1.6rem; display:block; line-height:1.1}
.itin-foot .price span{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}

/* inclusions */
.incl{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:8px}
.incl h4{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 14px; color:var(--ink);
}
.incl ul{list-style:none; margin:0; padding:0}
.incl li{position:relative; padding-left:26px; font-size:.93rem; color:var(--ink-soft); margin-bottom:8px}
.incl li::before{
  content:""; position:absolute; left:2px; top:9px; width:11px; height:6px;
  border-left:2px solid var(--leaf); border-bottom:2px solid var(--leaf); transform:rotate(-45deg);
}
.incl .no li::before{
  border:0; left:3px; top:11px; width:11px; height:2px; background:var(--ink-faint); transform:none;
}

/* ==========================================================================
   EXPERIENCES STRIP
   ========================================================================== */
.exp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.exp{position:relative; overflow:hidden; min-height:330px; background:var(--ink)}
.exp img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s}
.exp::after{content:""; position:absolute; inset:0; background:rgba(11,30,50,.38)}
.exp .scrim{
  position:absolute; z-index:2; left:0; right:0; bottom:0; height:62%;
  background:rgba(9,26,44,.66);
  -webkit-mask-image:linear-gradient(to top, #000 34%, transparent 100%);
  mask-image:linear-gradient(to top, #000 34%, transparent 100%);
  pointer-events:none;
}
.exp:hover img{transform:scale(1.06)}
.exp-in{position:relative; z-index:3; padding:32px; color:#fff; height:100%; display:flex; flex-direction:column; justify-content:flex-end}
.exp-in b{font-family:var(--serif); font-size:1.5rem; display:block; margin-bottom:8px}
.exp-in p{font-size:.92rem; color:#D5DFE9; margin:0}

/* ==========================================================================
   TRIPADVISOR / REVIEW TRUST BAR
   ========================================================================== */
.ta-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:34px; flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.2);
  padding:26px 32px; margin-bottom:44px;
}
.ta-score{display:flex; align-items:center; gap:18px}
.ta-score .num{
  font-family:var(--serif); font-size:2.9rem; line-height:1; color:#fff;
}
.ta-score .of{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#8FA5BA;
  display:block; margin-top:8px;
}
.bubbles{display:flex; gap:5px; align-items:center}
.bubbles svg{width:19px; height:19px; flex:none}
.ta-meta{flex:1; min-width:210px}
.ta-meta b{color:#fff; font-weight:600}
.ta-meta .src{
  display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:#8FA5BA; margin-top:7px;
}
.ta-awards{display:flex; gap:10px; flex-wrap:wrap}
.ta-award{
  border:1px solid rgba(255,255,255,.24); padding:9px 15px;
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:#C6D4E1;
}
.ta-award b{display:block; color:var(--ochre); font-size:.72rem; letter-spacing:.1em}

/* light-background variant */
.ta-bar--light{border-color:var(--rule); background:var(--white)}
.ta-bar--light .ta-score .num{color:var(--ink)}
.ta-bar--light .ta-score .of,.ta-bar--light .ta-meta .src{color:var(--ink-faint)}
.ta-bar--light .ta-meta{color:var(--ink-soft)}
.ta-bar--light .ta-meta b{color:var(--ink)}
.ta-bar--light .ta-award{border-color:var(--rule); color:var(--ink-soft)}
.ta-bar--light .ta-award b{color:var(--ochre-deep)}

.quote .who span{display:block}
.quote .via{
  display:flex; align-items:center; gap:7px;
  margin-top:14px; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8FA5BA;
}
.quote .via svg{width:13px; height:13px; flex:none}

@media (max-width:680px){
  .ta-bar{padding:22px 20px; gap:22px}
  .ta-score .num{font-size:2.3rem}
  .ta-bar .btn{width:100%; justify-content:center}
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14)}
.quote{background:var(--ink); padding:38px 32px}
.stars{color:var(--ochre); letter-spacing:3px; font-size:.9rem; margin-bottom:18px}
.quote p{font-family:var(--serif); font-size:1.1rem; line-height:1.62; color:#E6EDF3}
.quote .who{margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15)}
.quote .who b{display:block; font-size:.82rem; letter-spacing:.06em}
.quote .who span{font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#8FA5BA}

/* ==========================================================================
   GALLERY GRID
   ========================================================================== */
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.gal-item{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); cursor:pointer}
.gal-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gal-item:hover img{transform:scale(1.06)}
.gal-more{display:flex; justify-content:center; padding-top:48px}

@media (max-width:960px){ .gal-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .gal-grid{grid-template-columns:repeat(2,1fr); gap:10px} }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{position:relative; overflow:hidden; background:var(--ink)}
.cta-media{position:absolute; inset:0}
.cta-media img{width:100%; height:100%; object-fit:cover}
.cta-media::after{content:""; position:absolute; inset:0; background:rgba(11,30,50,.72)}
.cta-in{position:relative; z-index:3; padding-top:92px; padding-bottom:92px; text-align:center; color:#fff}
.cta-in h2{color:#fff; max-width:20ch; margin:0 auto}
.cta-in p{margin:22px auto 34px; max-width:56ch; color:#CBD8E4}
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-shell{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule)}
.form-side{background:var(--ink); color:#D6E1EB; padding:48px 44px}
.form-side h3{color:#fff; margin-bottom:16px}
.form-side p{color:#B4C4D4; font-size:.96rem}
.contact-list{list-style:none; margin:30px 0 0; padding:0}
.contact-list li{display:flex; gap:16px; padding:16px 0; border-top:1px solid rgba(255,255,255,.14)}
.contact-list .ico{width:22px; height:22px; color:var(--ochre); flex:none; margin-top:3px}
.contact-list em{display:block; font-style:normal; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#8DA3B8; margin-bottom:3px}
.contact-list b{font-weight:600; color:#fff; font-size:.98rem}
.contact-list a:hover{color:var(--ochre)}

.form-main{background:var(--white); padding:48px 44px}
.field{margin-bottom:22px}
.field label{
  display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--ink); margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; font-family:var(--sans); font-size:.98rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:0;
  transition:border-color .2s, background .2s; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312314F' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px; padding-right:44px;
}
.field textarea{resize:vertical; min-height:130px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--ocean); background:#fff;
}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form-note{font-size:.78rem; color:var(--ink-faint); margin-top:16px}
.form-msg{
  display:none; margin-top:18px; padding:15px 18px;
  border-left:3px solid var(--leaf); background:#EFF4F0; font-size:.92rem; color:var(--ink);
}
.form-msg.show{display:block}
.form-msg.err{border-left-color:#B3261E; background:#FBEDEC}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:#B3261E; background:#FDF6F5}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{
  width:100%; background:transparent; border:0; text-align:left;
  padding:24px 44px 24px 0; position:relative;
  font-family:var(--serif); font-size:1.18rem; color:var(--ink);
}
.faq-q:hover{color:var(--ochre-deep)}
.faq-q::before,.faq-q::after{
  content:""; position:absolute; right:6px; background:var(--ochre-deep); transition:transform .28s, opacity .28s;
}
.faq-q::before{top:50%; width:16px; height:2px; margin-top:-1px}
.faq-q::after{top:50%; right:13px; width:2px; height:16px; margin-top:-8px}
.faq-item.open .faq-q::after{transform:rotate(90deg); opacity:0}
.faq-a{display:none; padding:0 60px 26px 0; color:var(--ink-soft); font-size:.98rem}
.faq-item.open .faq-a{display:block}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{background:var(--ink); color:#A9BCCE; padding:78px 0 0; font-size:.94rem}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:56px}
.foot-brand{display:flex; align-items:center; gap:13px; margin-bottom:22px}
.foot-brand img{width:56px; height:56px; border-radius:50%; background:#fff; padding:4px}
.foot-brand .brand-name{color:#fff; font-size:1.35rem}
.foot-brand .brand-tag{color:#7F95AB}
.site-foot h4{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin:0 0 22px;
}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li{margin-bottom:12px}
.site-foot a:hover{color:var(--ochre)}
.socials{display:flex; gap:10px; margin-top:22px}
.socials a{
  width:40px; height:40px; border:1px solid rgba(255,255,255,.25);
  display:grid; place-content:center; color:#C6D4E1; transition:.2s;
}
.socials a:hover{background:var(--ochre); border-color:var(--ochre); color:var(--ink)}
.socials svg{width:17px; height:17px}
.foot-bot{
  border-top:1px solid rgba(255,255,255,.14); padding:26px 0;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.8rem; color:#7F95AB;
}

/* whatsapp float */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:grid; place-content:center; box-shadow:0 8px 24px rgba(0,0,0,.24);
  transition:transform .22s;
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px; height:30px; fill:#fff}

/* reveal */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav{gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:40px}
}

@media (max-width:960px){
  body{font-size:16.5px}
  .section{padding:74px 0}
  .nav,.head-cta .btn{display:none}
  .burger{display:block}
  .split{grid-template-columns:1fr; gap:44px}
  .split--rev .split-media{order:0}
  .values{grid-template-columns:1fr 1fr}
  .tours{grid-template-columns:1fr 1fr; gap:26px}
  .exp-grid{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .dest-grid > *{grid-column:span 6 !important}
  .tall{min-height:300px}
  .itin-top{grid-template-columns:1fr}
  .itin-top .ph{min-height:230px}
  .form-shell{grid-template-columns:1fr}
  .hero-facts .wrap{grid-template-columns:1fr 1fr}
  .fact{border-left:0; border-top:1px solid rgba(255,255,255,.14); padding-left:0}
  .fact:nth-child(1),.fact:nth-child(2){border-top:0}
  .stack-media{padding-right:40px; padding-bottom:56px}
}

@media (max-width:680px){
  :root{--gut:18px}
  body{font-size:16px; line-height:1.68}
  .section{padding:58px 0}
  .section--tight{padding:46px 0}
  .head{margin-bottom:36px}
  .topbar-l .hide-sm{display:none}
  .brand img{width:44px; height:44px; border-radius:50%; background:#fff; padding:3px}
  .brand-name{font-size:1.16rem; letter-spacing:.13em}
  .brand-tag{font-size:.5rem}
  .head-in{min-height:70px}
  .hero-in{padding-top:82px; padding-bottom:70px}
  .hero p.hero-sub{font-size:1rem}
  .hero-actions .btn{flex:1 1 100%; justify-content:center}
  .pagehead-in{padding-top:64px; padding-bottom:56px}
  .values{grid-template-columns:1fr}
  .tours{grid-template-columns:1fr}
  .exp-grid{grid-template-columns:1fr}
  .dest-grid > *{grid-column:span 12 !important}
  .dest{min-height:230px}
  .tall{min-height:250px}
  .stack-media{padding-right:0; padding-bottom:0}
  .stack-media .small{position:static; width:100%; margin-top:14px; border-width:0}
  .stamp{width:92px; height:92px; right:6px; top:-16px}
  .stamp b{font-size:1.35rem}
  .framed::before,.framed::after{display:none}
  .itin-intro,.itin-days,.itin-toggle{padding-left:20px; padding-right:20px}
  .itin-days{padding-bottom:26px}
  /* stack day rows into cards */
  .day{grid-template-columns:1fr; gap:12px; padding:20px 0}
  .day-n{display:flex; align-items:baseline; gap:12px}
  .day-n b{font-size:1.28rem}
  .day-n span{margin-top:0}
  .day-stay{
    text-align:left; border-top:1px dashed var(--rule); padding-top:12px;
    display:flex; align-items:baseline; gap:10px;
  }
  .day-stay em{margin-bottom:0}
  .incl{grid-template-columns:1fr; gap:24px}
  .itin-foot{flex-direction:column; align-items:flex-start}
  .itin-foot .btn{width:100%; justify-content:center}
  .form-side,.form-main{padding:34px 22px}
  .field-row{grid-template-columns:1fr; gap:0}
  .foot-grid{grid-template-columns:1fr; gap:34px; padding-bottom:40px}
  .cta-in{padding-top:64px; padding-bottom:64px}
  .cta-actions .btn{flex:1 1 100%; justify-content:center}
  .wa{width:52px; height:52px; right:14px; bottom:14px}
  .wa svg{width:26px; height:26px}
  .faq-a{padding-right:24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}

@media print{
  .site-head,.topbar,.wa,.cta,.site-foot,.hero-actions{display:none}
  .itin-days{display:block !important}
  body{background:#fff}
}

/* ==========================================================================
   MOBILE USABILITY PASS
   Fixes measured on a real 390x844 touch viewport:
     - inputs were 15.68px -> iOS Safari zoomed in on every field tap
     - several tap targets were under Apple/Google's 44px minimum
     - nav drawer did not close when tapping outside it
     - top bar burned 58px of vertical space on small screens
   ========================================================================== */

/* 1. Never let iOS zoom on focus. 16px is the threshold. ------------------ */
input, select, textarea {
  font-size: 16px;
}

/* 2. Comfortable tap targets ---------------------------------------------- */
@media (max-width: 900px) {
  .field input,
  .field select,
  .field textarea {
    min-height: 52px;
    padding: 14px 16px;
    font-size: 16px;
  }
  .field textarea { min-height: 132px; }

  /* the whole label row becomes easier to hit */
  .field label {
    font-size: .74rem;
    margin-bottom: 7px;
  }

  /* buttons and links in flowing text */
  .btn {
    min-height: 52px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .btn--sm { min-height: 44px; }

  /* filter pills on the itineraries page */
  .pill[data-filter] {
    min-height: 46px;
    padding: 12px 18px;
  }

  /* footer links: real hit boxes, same look */
  .site-foot .foot-grid a,
  .site-foot .foot-bot a,
  .crumbs a,
  .topbar a {
    display: inline-block;
    padding: 10px 0;
  }
  .site-foot .socials a {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* contact-detail rows: phone / email are primary actions on a phone */
  .form-side b a,
  .contact-row b a {
    display: inline-block;
    padding: 9px 0;
  }

  /* home-page tour cards: make the whole title row an easy target */
  .tour h3 a,
  .dest-cap b,
  .textlink {
    display: inline-block;
    padding: 6px 0;
  }

  /* accordion rows */
  .faq-q { min-height: 56px; }
  .itin-toggle { min-height: 56px; }
}

/* 3. Reclaim vertical space on phones ------------------------------------- */
@media (max-width: 680px) {
  /* the top bar is decorative on a phone - the same details are in the
     footer and on the contact page, so hide it and give the content the room */
  .topbar { display: none; }

  .head-in { min-height: 64px; }
  .hero-in { padding-top: 64px; padding-bottom: 58px; }
  .pagehead-in { padding-top: 52px; padding-bottom: 46px; }
}

/* 4. Bigger, easier nav drawer -------------------------------------------- */
@media (max-width: 900px) {
  .burger {
    width: 48px;
    height: 48px;
  }
  .mobile-nav a {
    min-height: 56px;
    display: flex;
    align-items: center;
    font-size: 1.02rem;
  }
  /* a call-to-action pinned in the drawer, so booking is never far away */
  .mobile-nav .btn {
    margin-top: 14px;
    width: 100%;
    justify-content: center;
  }
}

/* 5. Scrim behind the drawer so tapping outside closes it ----------------- */
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 26, 44, .5);
  /* must sit above .site-head (80) so a tap outside the drawer reaches it,
     but below the drawer itself, which is raised to 82 below */
  z-index: 79;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  cursor: pointer;
}
.nav-scrim.on { display: block; }
@media (min-width: 901px) { .nav-scrim { display: none !important; } }

/* 6. Sticky "Enquire" bar on the itineraries page ------------------------- */
.tourbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  background: #fff;
  border-top: 1px solid var(--rule);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  align-items: center;
  gap: 12px;
  box-shadow: 0 -6px 20px rgba(18, 49, 79, .1);
}
.tourbar b { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.tourbar span { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.tourbar .btn { margin-left: auto; min-height: 46px; }
@media (max-width: 680px) {
  .tourbar.on { display: flex; }
  /* keep the floating WhatsApp button clear of the bar.
     .wa is rendered before the JS-appended bar, so a sibling selector cannot
     reach it — a body class is used instead. */
  body.has-tourbar .wa { bottom: 90px; }
}

/* 7. Comfortable reading measure ------------------------------------------ */
@media (max-width: 680px) {
  .lede { font-size: 1.02rem; }
  .day-acts span { line-height: 1.62; }
  /* stop long words (URLs, place names) forcing a sideways scroll */
  body { overflow-wrap: break-word; }
}

/* 8. Respect the notch / rounded corners on modern phones ----------------- */
@supports (padding: max(0px)) {
  @media (max-width: 680px) {
    .wrap {
      padding-left: max(var(--gut), env(safe-area-inset-left));
      padding-right: max(var(--gut), env(safe-area-inset-right));
    }
  }
}

/* direct-call link in the mobile drawer (top bar is hidden on phones) */
.mobile-call {
  display: none;
}
@media (max-width: 900px) {
  .mobile-call {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 10px;
    border: 1px solid var(--rule);
    color: var(--ink) !important;
    font-size: .95rem;
    letter-spacing: .02em;
  }
}

/* drawer must float above its own scrim */
@media (max-width: 900px) {
  .mobile-nav.open { position: relative; z-index: 82; }
}

/* ==========================================================================
   DESTINATION DIALOG
   ========================================================================== */
.dest-dialog-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(18, 49, 79, .62);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease, visibility .32s;
  padding: 24px;
}
.dest-dialog-overlay.open { opacity: 1; visibility: visible; }

.dest-dialog {
  background: #fff; border-radius: 8px; overflow: hidden;
  max-width: 580px; width: 100%;
  box-shadow: 0 28px 60px rgba(18, 49, 79, .28);
  transform: translateY(18px) scale(.97);
  transition: transform .32s cubic-bezier(.2, .7, .3, 1);
  position: relative;
}
.dest-dialog-overlay.open .dest-dialog { transform: none; }

.dest-dialog-img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}

.dest-dialog-body { padding: 32px 34px 34px; }

.dest-dialog-body h3 {
  font-family: var(--serif); font-size: 1.6rem; color: var(--ink);
  margin-bottom: 12px; line-height: 1.2;
}

.dest-dialog-body p {
  font-size: .96rem; color: var(--ink-soft); line-height: 1.65;
  margin: 0;
}

.dest-dialog-close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(18, 49, 79, .65); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.dest-dialog-close:hover { background: var(--ink); }
.dest-dialog-close::before, .dest-dialog-close::after {
  content: ""; position: absolute; width: 16px; height: 2px; background: #fff;
}
.dest-dialog-close::before { transform: rotate(45deg); }
.dest-dialog-close::after  { transform: rotate(-45deg); }

/* Enquire link inside dialog */
.ddg-link {
  display: inline-block; margin-top: 22px; padding: 12px 26px;
  background: var(--ochre); color: var(--ink); border: 1px solid var(--ochre);
  border-radius: 4px; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; cursor: pointer;
  transition: background .2s, color .2s;
}
.dest-dialog-enquire:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

@media (max-width: 680px) {
  .dest-dialog { max-width: 100%; margin: 0; border-radius: 8px; }
  .dest-dialog-body { padding: 24px 22px 26px; }
  .dest-dialog-body h3 { font-size: 1.35rem; }
}