/* ============================================================
   TRIPIDO TRAVELS — design system
   Palette sampled from the Tripido logo.
   Light-only by design: travel photography is graded for light grounds.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand — Marigold */
  --navy:#14204A;
  --navy-deep:#0D1533;
  --navy-lift:#24316B;
  --navy-mist:#E8EAF3;
  --gold:#FFB302;
  --gold-deep:#E89E00;
  --gold-soft:#FFF1CC;
  --verm:#C1361B;
  --verm-bright:#E8442A;
  --verm-soft:#FDE8E3;
  --grad:linear-gradient(100deg,#FFB302 0%,#FFC93F 100%);
  --grad-hover:linear-gradient(100deg,#F0A600 0%,#FFBE1F 100%);

  /* neutrals — warm cream, biased to the gold */
  --porcelain:#FFF9EC;
  --surface:#FFFFFF;
  --sunk:#F6F1E4;
  --ink:#14204A;
  --body:#4A4F63;
  --muted:#6E7488;
  --faint:#9B9FB0;
  --rule:#E8E2D2;
  --rule-soft:#F1ECDF;

  /* semantic */
  --ok:#1E6B4E;
  --ok-soft:#E4F0EA;
  --hot:#C1361B;
  --hot-soft:#FDE8E3;

  /* type — one family, many weights (the OTA approach) */
  --display:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Mulish",system-ui,sans-serif;

  /* space — tighter than before; Veena World is dense */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:22px;
  --s6:30px; --s7:42px; --s8:58px; --s9:74px; --s10:96px;
  --band:clamp(46px,6vw,84px);
  --gut:clamp(16px,3.4vw,26px);
  --maxw:1320px;

  --r-sm:5px; --r-md:8px; --r-lg:12px; --r-xl:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,32,74,.05), 0 2px 8px rgba(20,32,74,.05);
  --sh-2:0 2px 6px rgba(20,32,74,.07), 0 10px 28px rgba(20,32,74,.09);
  --sh-3:0 8px 22px rgba(20,32,74,.11), 0 20px 56px rgba(20,32,74,.13);
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.42s;
}

/* cross-document view transitions (progressive: Chrome/Edge) */
@view-transition{ navigation:auto; }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0; background:var(--porcelain); color:var(--body);
  font-family:var(--ui); font-size:17px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
/* Only photo containers get a loading colour — a global img background
   paints a box behind transparent PNGs like the logo. */
.card-media img,.dcard-media img,.camp-card .m img,.pop-art img{background:var(--sunk)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2.5px solid var(--gold-deep); outline-offset:3px; border-radius:3px}
::selection{background:var(--gold-deep); color:#fff}

/* ---------- 3. TYPE ---------- */
.d-xl{font-family:var(--display); font-weight:900; font-size:clamp(34px,5.4vw,60px);
  line-height:1.06; letter-spacing:-.032em; color:var(--ink); text-wrap:balance}
.d-l{font-family:var(--display); font-weight:900; font-size:clamp(27px,3.4vw,42px);
  line-height:1.12; letter-spacing:-.028em; color:var(--ink); text-wrap:balance}
.d-m{font-family:var(--display); font-weight:800; font-size:clamp(23px,2.7vw,32px);
  line-height:1.18; letter-spacing:-.022em; color:var(--ink); text-wrap:balance}
.d-s{font-family:var(--display); font-weight:800; font-size:clamp(19px,2vw,24px);
  line-height:1.26; letter-spacing:-.018em; color:var(--ink)}
.d-xl em,.d-l em,.d-m em{font-style:normal; color:var(--gold)}

.eyebrow{font-family:var(--ui); font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verm); display:flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:24px; height:3px; background:var(--gold); border-radius:2px; flex:none}
.eyebrow.center{justify-content:center}

.lede{font-size:clamp(17px,1.6vw,19px); line-height:1.6; color:var(--muted); max-width:60ch}
.small{font-size:14.5px; line-height:1.55}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.01em}
.price{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}
.band{padding-block:var(--band)}
.band-tight{padding-block:clamp(40px,5.5vw,72px)}
.band-ink{background:var(--navy); color:#C9C9E4}
.band-ink .d-l,.band-ink .d-m,.band-ink .d-s{color:#fff}
.band-ink .lede{color:#A5A5C8}
.band-soft{background:var(--surface)}
.defer{content-visibility:auto; contain-intrinsic-size:auto 700px}

.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5);
  margin-bottom:var(--s7); flex-wrap:wrap}
.head-row .lede{margin-top:var(--s3)}
.head-row .eyebrow{margin-bottom:var(--s3)}

.grid{display:grid; gap:var(--s5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-6{grid-template-columns:repeat(6,1fr)}

/* horizontal scroll rail — native snap, no carousel JS */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px,300px);
  gap:var(--s5); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px var(--gut) var(--s5); margin-inline:calc(var(--gut)*-1);
  scrollbar-width:none; overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@media(min-width:1000px){
  .rail{grid-auto-flow:initial; overflow:visible; padding:0; margin:0;
    grid-template-columns:repeat(var(--cols,4),1fr)}
}

/* ---------- 5. BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ui); font-size:15px; font-weight:700; letter-spacing:.005em;
  padding:14px 26px; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  white-space:nowrap; line-height:1}
.btn svg{width:17px; height:17px; flex:none}
.btn-primary{background:var(--grad); color:var(--navy); box-shadow:0 4px 14px rgba(255,179,2,.34)}
.btn-primary:hover{background:var(--grad-hover); transform:translateY(-2px); box-shadow:0 8px 22px rgba(255,179,2,.45)}
.btn-ghost{border-color:var(--rule); background:var(--surface); color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold-deep); color:var(--gold-deep); transform:translateY(-2px)}
.btn-light{background:#fff; color:var(--navy)}
.btn-light:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn-outline-light{border-color:rgba(255,255,255,.34); color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1); border-color:#fff}
.btn-sm{padding:10px 19px; font-size:14px}
.btn-lg{padding:17px 34px; font-size:16px}
.link-more{display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:15px;
  color:var(--gold-deep); transition:gap .2s var(--ease)}
.link-more:hover{gap:12px}

/* ---------- 6. CARDS ---------- */
.card{background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-1); transition:transform .34s var(--ease), box-shadow .34s var(--ease);
  display:flex; flex-direction:column; height:100%}
.card:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.card-media{position:relative; overflow:hidden; background:var(--sunk)}
.card-media img{width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease)}
.card:hover .card-media img{transform:scale(1.055)}
.card-body{padding:var(--s5); display:flex; flex-direction:column; gap:10px; flex:1}
.card-title{font-family:var(--display); font-weight:800; font-size:21px; line-height:1.24;
  letter-spacing:-.012em; color:var(--ink)}
.card-foot{margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--rule-soft);
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3)}

.ratio-4-5{aspect-ratio:4/5}
.ratio-3-2{aspect-ratio:3/2}
.ratio-1-1{aspect-ratio:1/1}
.ratio-16-9{aspect-ratio:16/9}
.ratio-21-9{aspect-ratio:21/9}

/* badges & chips */
.badge{position:absolute; top:14px; left:14px; z-index:2; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); color:var(--ink); font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:7px 12px; border-radius:var(--r-pill)}
.badge-hot{background:var(--verm); color:#fff}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--muted); background:var(--sunk); padding:6px 12px; border-radius:var(--r-pill)}
.chip svg{width:14px;height:14px;flex:none;color:var(--gold-deep)}
.meta-row{display:flex; flex-wrap:wrap; gap:8px}

.from-label{font-size:12px; color:var(--faint); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; display:block; margin-bottom:2px}
.from-price{font-family:var(--display); font-variant-numeric:tabular-nums; font-weight:900;
  font-size:21px; color:var(--verm); letter-spacing:-.02em}
.from-price sup{font-size:12px; font-weight:500; color:var(--faint); top:-.6em}

/* ---------- 7. HEADER ---------- */
.topbar{background:var(--navy-deep); color:#9B9BC4; font-size:13px}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  min-height:38px; flex-wrap:wrap}
@media(max-width:560px){ .topbar-l{display:none} .topbar .wrap{justify-content:center} }
.topbar a{transition:color .2s}
.topbar a:hover{color:#fff}
.topbar-l,.topbar-r{display:flex; align-items:center; gap:var(--s5)}
.topbar-item{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.topbar-item svg{width:14px; height:14px; color:var(--gold-deep); flex:none}

.site-head{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--rule-soft); transition:box-shadow .3s var(--ease)}
.site-head.stuck{box-shadow:0 4px 24px rgba(20,20,51,.09)}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:74px}
.brand{display:flex; align-items:center; flex:none}
.brand img{height:44px; width:auto; background:none}

.nav{display:none}
@media(min-width:1060px){ .nav{display:flex; align-items:center; gap:2px} }
.nav-item{position:relative}
.nav-link{display:inline-flex; align-items:center; gap:6px; padding:11px 15px; font-size:15px;
  font-weight:600; color:var(--ink); border-radius:var(--r-sm); transition:color .2s, background .2s}
.nav-link:hover{color:var(--gold-deep); background:var(--navy-mist)}
.nav-link svg{width:13px; height:13px; transition:transform .25s var(--ease); color:var(--faint)}
.nav-item:hover .nav-link svg{transform:rotate(180deg)}

.mega{position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  border:1px solid var(--rule-soft); padding:var(--s6); min-width:640px;
  opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s}
.nav-item:hover .mega, .nav-item:focus-within .mega{opacity:1; visibility:visible;
  transform:translateY(0); pointer-events:auto}
.mega-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6)}
.mega-h{font-size:11.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint); margin-bottom:var(--s3)}
.mega-list li+li{margin-top:3px}
.mega-list a{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:9px 12px; border-radius:var(--r-sm); font-size:15px; font-weight:500;
  color:var(--body); transition:background .18s, color .18s}
.mega-list a:hover{background:var(--navy-mist); color:var(--navy)}
.mega-list .n{font-family:var(--mono); font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums}

.head-cta{display:none; align-items:center; gap:var(--s3)}
@media(min-width:1060px){ .head-cta{display:flex} }
.burger{display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; align-items:center; border-radius:var(--r-sm); border:1px solid var(--rule)}
@media(min-width:1060px){ .burger{display:none} }
.burger span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed; inset:0; z-index:80; background:var(--surface);
  transform:translateX(100%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto; visibility:hidden}
.drawer.open{transform:translateX(0); visibility:visible}
.drawer-head{display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--gut); border-bottom:1px solid var(--rule-soft); position:sticky; top:0;
  background:var(--surface); z-index:2}
.drawer-head img{height:38px}
.drawer-close{width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-sm);
  border:1px solid var(--rule); font-size:22px; color:var(--ink)}
.drawer-body{padding:var(--s5) var(--gut) 140px}
.drawer-body details{border-bottom:1px solid var(--rule-soft)}
.drawer-body summary{display:flex; align-items:center; justify-content:space-between;
  padding:17px 0; font-size:18px; font-weight:700; color:var(--ink); cursor:pointer; list-style:none}
.drawer-body summary::-webkit-details-marker{display:none}
.drawer-body summary::after{content:"+"; font-size:22px; font-weight:400; color:var(--gold-deep);
  transition:transform .3s var(--ease)}
.drawer-body details[open] summary::after{transform:rotate(45deg)}
.drawer-body .sub{padding:0 0 var(--s4)}
.drawer-body .sub a{display:flex; justify-content:space-between; padding:10px 0;
  font-size:16px; color:var(--muted)}
.drawer-body .sub a:hover{color:var(--gold-deep)}
.drawer-flat{display:block; padding:17px 0; font-size:18px; font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--rule-soft)}
.drawer-cta{display:grid; gap:12px; margin-top:var(--s6)}

/* ---------- 8. HERO ---------- */
.hero{position:relative; min-height:clamp(560px,88vh,880px); display:flex; align-items:flex-end;
  overflow:hidden; background:var(--navy-deep)}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(18,18,58,.62) 0%,rgba(18,18,58,.18) 34%,rgba(18,18,58,.5) 68%,rgba(18,18,58,.9) 100%)}
.hero-inner{position:relative; z-index:2; width:100%; padding-block:clamp(48px,7vw,88px)}
.hero h1{color:#fff; margin-bottom:var(--s4); max-width:15ch}
.hero h1 em{color:var(--gold)}
.hero-sub{color:rgba(255,255,255,.9); font-size:clamp(17px,1.7vw,20px); max-width:46ch;
  margin-bottom:var(--s6); line-height:1.55}
.hero-eyebrow{color:#FFC9B4; margin-bottom:var(--s4)}
.hero-eyebrow::before{background:#FFC9B4}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s7)}
.hero-scroll{position:absolute; right:var(--gut); bottom:var(--s7); z-index:2;
  writing-mode:vertical-rl; font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.6); display:none}
@media(min-width:1060px){ .hero-scroll{display:flex; align-items:center; gap:14px} }
.hero-scroll::after{content:""; width:1px; height:54px; background:linear-gradient(rgba(255,255,255,.5),transparent)}

/* search panel */
.searchbar{background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-3);
  display:grid; gap:var(--s4); grid-template-columns:1fr; max-width:1080px}
@media(min-width:860px){ .searchbar{grid-template-columns:1.15fr 1fr 1fr auto; align-items:end} }
.field label{display:block; font-size:11.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:7px}
.field-ctrl{display:flex; align-items:center; gap:10px; background:var(--porcelain);
  border:1.5px solid var(--rule); border-radius:var(--r-md); padding:12px 14px;
  transition:border-color .2s, background .2s}
.field-ctrl:focus-within{border-color:var(--gold-deep); background:#fff}
.field-ctrl svg{width:18px; height:18px; color:var(--gold-deep); flex:none}
.field-ctrl select,.field-ctrl input{border:0; background:none; width:100%; font-size:15.5px;
  font-weight:600; color:var(--ink); outline:none; appearance:none}

/* ---------- 9. DESTINATION STRIP ---------- */
.dest-rail{--cols:6}
.dest{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:var(--s5) var(--s3); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-1); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.dest:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.dest-ic{width:60px; height:60px; display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--navy-mist); color:var(--navy); transition:background .3s var(--ease)}
.dest:hover .dest-ic{background:var(--gold); color:var(--navy)}
.dest-ic svg{width:30px; height:30px}
.dest-name{font-size:15px; font-weight:700; color:var(--ink); line-height:1.25}
.dest-n{font-family:var(--mono); font-size:12px; color:var(--faint)}

/* ---------- 10. CAMPAIGN ---------- */
.campaign{position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--navy)}
.campaign-bg{position:absolute; inset:0}
.campaign-bg img{width:100%;height:100%;object-fit:cover; opacity:.4}
.campaign-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(95deg,rgba(18,18,58,.95) 0%,rgba(18,18,58,.72) 46%,rgba(26,26,82,.42) 100%)}
.campaign-inner{position:relative; z-index:2; padding:clamp(32px,5vw,64px)}
.campaign-grid{display:grid; gap:var(--s5); grid-template-columns:1fr; margin-top:var(--s6)}
@media(min-width:820px){ .campaign-grid{grid-template-columns:repeat(3,1fr)} }
.camp-card{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg); overflow:hidden; backdrop-filter:blur(10px);
  transition:transform .3s var(--ease), background .3s var(--ease)}
.camp-card:hover{transform:translateY(-4px); background:rgba(255,255,255,.15)}
.camp-card .m{aspect-ratio:16/10; overflow:hidden}
.camp-card .m img{width:100%;height:100%;object-fit:cover}
.camp-card .b{padding:var(--s5)}
.camp-card h3{font-family:var(--display); font-size:21px; font-weight:800; color:#fff; margin-bottom:8px}
.camp-card .st{font-family:var(--mono); font-size:12.5px; color:#B9B9DC; margin-bottom:var(--s4)}

/* ---------- 11. STATS ---------- */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); overflow:hidden}
@media(min-width:760px){ .stats{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--navy); padding:var(--s6) var(--s5); text-align:center}
.stat-n{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:clamp(30px,4vw,44px);
  font-weight:600; color:#fff; letter-spacing:-.03em; line-height:1; display:block}
.stat-n span{color:var(--gold)}
.stat-l{display:block; margin-top:12px; font-size:13px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:#9B9BC4; line-height:1.4}

/* ---------- 12. INCLUSIONS ---------- */
.incl{display:grid; gap:var(--s5) var(--s6); grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){ .incl{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1060px){ .incl{grid-template-columns:repeat(6,1fr)} }
.incl-item{text-align:center}
.incl-ic{width:66px; height:66px; margin:0 auto var(--s4); display:grid; place-items:center;
  border-radius:22px; background:var(--surface); box-shadow:var(--sh-1); color:var(--gold-deep);
  transition:transform .3s var(--ease)}
.incl-item:hover .incl-ic{transform:translateY(-4px) rotate(-4deg)}
.incl-ic svg{width:32px;height:32px}
.incl-item h3{font-size:15.5px; font-weight:700; color:var(--ink); margin-bottom:5px}
.incl-item p{font-size:14px; color:var(--muted); line-height:1.5}

/* ---------- 13. STEPS ---------- */
.steps{display:grid; gap:var(--s6); grid-template-columns:1fr; counter-reset:step}
@media(min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{position:relative; padding-top:var(--s6)}
.step::before{counter-increment:step; content:"0" counter(step);
  font-family:var(--display); font-size:50px; font-weight:900; line-height:1;
  color:var(--gold); position:absolute; top:0; left:0}
.step h3{font-family:var(--display); font-size:21px; font-weight:800; color:var(--ink);
  margin-bottom:9px; padding-top:var(--s4)}
.step p{color:var(--muted); font-size:15.5px}

/* ---------- 14. REVIEWS ---------- */
.review{background:var(--surface); border-radius:var(--r-lg); padding:var(--s6) var(--s5);
  box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:var(--s4); height:100%}
.stars{display:flex; gap:3px; color:var(--gold-deep)}
.stars svg{width:17px;height:17px}
.review-q{font-family:var(--display); font-weight:600; font-size:17.5px; line-height:1.5; color:var(--ink); flex:1}
.review-by{display:flex; align-items:center; gap:12px; padding-top:var(--s4);
  border-top:1px solid var(--rule-soft)}
.avatar{width:44px; height:44px; border-radius:var(--r-pill); background:var(--navy);
  display:grid; place-items:center; color:var(--gold); font-weight:800; font-size:16px; flex:none}
.review-by .nm{font-size:15px; font-weight:700; color:var(--ink); display:block; line-height:1.3}
.review-by .tr{font-size:13px; color:var(--faint)}

/* ---------- 15. FEATURE BAND ---------- */
.feature{position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:520px;
  display:flex; align-items:center}
.feature-bg{position:absolute; inset:0}
.feature-bg img{width:100%;height:100%;object-fit:cover}
.feature-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(18,18,58,.94) 0%,rgba(18,18,58,.75) 42%,rgba(18,18,58,.15) 100%)}
.feature-inner{position:relative; z-index:2; padding:clamp(34px,5vw,72px); max-width:640px}
.feature h2{color:#fff; margin-bottom:var(--s4)}
.feature p{color:rgba(255,255,255,.85); margin-bottom:var(--s6)}
.feature-prices{display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(255,255,255,.2); border-radius:var(--r-md); overflow:hidden; margin-bottom:var(--s6)}
.fp{background:rgba(18,18,58,.75); padding:var(--s4) var(--s5); backdrop-filter:blur(6px)}
.fp .t{font-size:14px; font-weight:700; color:#fff; display:block; margin-bottom:4px}
.fp .d{font-family:var(--mono); font-size:12px; color:#9B9BC4; display:block; margin-bottom:8px}
.fp .p{font-family:var(--display); font-size:19px; font-weight:900; color:var(--gold)}

/* ---------- 16. ACCORDION ---------- */
.faq-cats{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:var(--s6)}
.faq-cat{font-size:14px; font-weight:600; padding:9px 17px; border-radius:var(--r-pill);
  border:1.5px solid var(--rule); color:var(--muted); background:var(--surface); transition:all .2s}
.faq-cat:hover{border-color:var(--gold-deep); color:var(--gold-deep)}
.faq-cat.on{background:var(--navy); border-color:var(--navy); color:#fff}
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding:22px 0; font-size:17.5px; font-weight:600; color:var(--ink); cursor:pointer;
  list-style:none; transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--gold-deep)}
.acc summary::after{content:""; width:22px; height:22px; flex:none; border-radius:50%;
  background:var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314204A' stroke-width='3'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/12px no-repeat;
  transition:transform .3s var(--ease), background-color .2s}
.acc details[open] summary::after{transform:rotate(135deg); background-color:var(--gold)}
.acc .a{padding:0 0 24px; color:var(--muted); max-width:76ch; font-size:16px}

/* ---------- 17. SEO TEXT ---------- */
/* NOTE: never combine `columns` with a clamped max-height — overflow content
   fragments into extra column boxes laid out sideways, off the viewport. */
.seo{color:var(--muted); font-size:15.5px; line-height:1.75; max-width:none; position:relative}
@media(min-width:960px){
  .seo:not(.seo-clamp), .seo.open{columns:2; column-gap:var(--s8)}
}
.seo p{margin-bottom:var(--s4); break-inside:avoid}
.seo strong{color:var(--ink); font-weight:600}
.seo-clamp{max-height:170px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 55%,transparent);
  mask-image:linear-gradient(#000 55%,transparent)}
.seo-clamp.open{max-height:none; -webkit-mask-image:none; mask-image:none}

/* ---------- 18. CONTACT ---------- */
.contact-grid{display:grid; gap:var(--s5); grid-template-columns:1fr}
@media(min-width:820px){ .contact-grid{grid-template-columns:repeat(3,1fr)} }
.contact-card{background:var(--surface); border-radius:var(--r-lg); padding:var(--s6) var(--s5);
  box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.contact-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.contact-ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:var(--navy-mist); color:var(--navy)}
.contact-ic svg{width:24px;height:24px}
.contact-card h3{font-size:16px; font-weight:700; color:var(--ink)}
.contact-card .v{font-family:var(--mono); font-size:16px; font-weight:500; color:var(--gold-deep);
  word-break:break-word}
.contact-card p{font-size:14px; color:var(--muted)}

/* ---------- 19. FOOTER ---------- */
.site-foot{background:var(--navy-deep); color:#9B9BC4; padding-top:var(--band)}
.foot-top{display:grid; gap:var(--s7); grid-template-columns:1fr; padding-bottom:var(--s8);
  border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:900px){ .foot-top{grid-template-columns:1.5fr 1fr 1fr 1fr} }
.foot-brand img{height:46px; margin-bottom:var(--s4)}
.foot-brand p{font-size:15px; color:#8A8AB4; max-width:38ch; margin-bottom:var(--s5)}
.foot-h{font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:#fff; margin-bottom:var(--s4)}
.foot-list li+li{margin-top:11px}
.foot-list a{font-size:15px; color:#9B9BC4; transition:color .2s, padding-left .2s}
.foot-list a:hover{color:#fff; padding-left:5px}
.socials{display:flex; gap:11px}
.socials a{width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; transition:background .25s var(--ease), transform .25s var(--ease)}
.socials a:hover{background:var(--gold); color:var(--navy); transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.foot-bot{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding-block:var(--s5); flex-wrap:wrap; font-size:14px}
.foot-bot a:hover{color:#fff}
.foot-links{display:flex; gap:var(--s5); flex-wrap:wrap}

/* ---------- 20. MOBILE ACTION BAR ---------- */
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:1fr 1fr;
  background:var(--surface); border-top:1px solid var(--rule);
  box-shadow:0 -4px 24px rgba(20,20,51,.1); padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:1060px){ .mbar{display:none} }
.mbar a{display:flex; align-items:center; justify-content:center; gap:9px; padding:15px 10px;
  font-size:15px; font-weight:700; color:var(--ink)}
.mbar a+a{background:var(--gold); color:var(--navy)}
.mbar svg{width:18px;height:18px}
body{padding-bottom:60px}
@media(min-width:1060px){ body{padding-bottom:0} }

/* desktop docked enquiry */
.dock{position:fixed; right:0; top:50%; translate:0 -50%; z-index:55; display:none;
  writing-mode:vertical-rl; background:var(--verm); color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:20px 13px;
  border-radius:var(--r-md) 0 0 var(--r-md); box-shadow:var(--sh-2); transition:padding .25s var(--ease)}
@media(min-width:1060px){ .dock{display:block} }
.dock:hover{padding-right:19px}

/* ---------- 21. MOTION ---------- */
.reveal{opacity:1; transform:none}
.js .reveal{opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
.reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important;
    scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  @view-transition{ navigation:none; }
}

/* ---------- 22. UTILITIES ---------- */
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)}
.mt-6{margin-top:var(--s6)} .mt-7{margin-top:var(--s7)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.noscroll{overflow:hidden}
@media(max-width:719px){
  .g-2,.g-3,.g-4,.g-6{grid-template-columns:1fr}
  .feature{min-height:auto}
  .feature-prices{grid-template-columns:1fr}
}
@media(min-width:720px) and (max-width:1059px){
  .g-3,.g-4,.g-6{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   MARIGOLD ADDITIONS — search v2 + Veena-World-density sections
   ============================================================ */

/* ---------- SEARCH v2: dates + travellers ---------- */
.searchbar{grid-template-columns:1fr; gap:var(--s3); padding:var(--s4); border-radius:var(--r-lg)}
@media(min-width:980px){
  .searchbar{grid-template-columns:1.25fr 1fr 1fr 1.15fr auto; align-items:end; gap:var(--s3)}
}
.field-ctrl{border-radius:var(--r-md); padding:11px 13px; background:var(--sunk); border-color:var(--rule)}
.field-ctrl:focus-within{border-color:var(--gold-deep)}
.field-ctrl svg{color:var(--verm)}
.field-ctrl input[type="date"]{font-family:var(--ui); color:var(--ink); min-width:0}
.field label{color:var(--muted); font-weight:800; font-size:11px}

.pax{position:relative}
.pax-btn{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--sunk); border:1.5px solid var(--rule); border-radius:var(--r-md);
  padding:11px 13px; font-size:15px; font-weight:700; color:var(--ink); transition:border-color .2s}
.pax-btn:hover,.pax[data-open="1"] .pax-btn{border-color:var(--gold-deep)}
.pax-btn svg{width:18px;height:18px;color:var(--verm);flex:none}
.pax-btn .cap{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pax-pop{position:absolute; z-index:30; left:0; right:0; top:calc(100% + 8px);
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-3); border:1px solid var(--rule);
  padding:var(--s4); min-width:284px; display:none}
.pax[data-open="1"] .pax-pop{display:block}
@media(max-width:979px){ .pax-pop{right:auto; width:100%; min-width:0} }
.pax-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:10px 0}
.pax-row+.pax-row{border-top:1px solid var(--rule-soft)}
.pax-row .lb{font-size:14.5px; font-weight:800; color:var(--ink); display:block; line-height:1.2}
.pax-row .hint{font-size:12px; color:var(--faint)}
.step-ctl{display:flex; align-items:center; gap:12px}
.step-ctl button{width:32px; height:32px; border-radius:var(--r-pill); border:1.5px solid var(--rule);
  display:grid; place-items:center; font-size:18px; font-weight:700; color:var(--navy);
  background:#fff; line-height:1; transition:all .18s}
.step-ctl button:hover:not(:disabled){border-color:var(--gold-deep); background:var(--gold-soft)}
.step-ctl button:disabled{opacity:.35; cursor:not-allowed}
.step-ctl .v{min-width:20px; text-align:center; font-weight:800; font-size:16px;
  color:var(--ink); font-variant-numeric:tabular-nums}
.pax-done{width:100%; margin-top:var(--s3)}
.child-ages{display:flex; flex-wrap:wrap; gap:8px; padding:10px 0 0; border-top:1px solid var(--rule-soft)}
.child-ages select{font-size:13px; font-weight:700; padding:7px 9px; border-radius:var(--r-sm);
  border:1.5px solid var(--rule); background:#fff; color:var(--ink)}

/* ---------- PROMO BANNER ---------- */
.promo{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--navy);
  display:grid; grid-template-columns:1fr; align-items:center; min-height:170px}
@media(min-width:860px){ .promo{grid-template-columns:1.35fr .65fr} }
.promo-in{position:relative; z-index:2; padding:clamp(24px,3.6vw,40px)}
.promo-tag{display:inline-block; background:var(--gold); color:var(--navy); font-size:11px;
  font-weight:900; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px;
  border-radius:var(--r-pill); margin-bottom:14px}
.promo h3{font-family:var(--display); font-weight:900; font-size:clamp(22px,3vw,32px);
  line-height:1.12; letter-spacing:-.028em; color:#fff; margin-bottom:9px}
.promo p{color:#B9C0DA; font-size:15.5px; margin-bottom:20px; max-width:52ch}
.promo-art{position:relative; min-height:140px; display:none}
@media(min-width:860px){ .promo-art{display:block} }
.promo-art svg{position:absolute; inset:0; width:100%; height:100%}

/* ---------- GUEST COUNT on cards ---------- */
.guests{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:var(--ok); background:var(--ok-soft); padding:5px 10px; border-radius:var(--r-pill)}
.guests svg{width:13px;height:13px}

/* ---------- SPOTLIGHT (single featured tour) ---------- */
.spot{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:340px;
  display:flex; align-items:flex-end}
.spot-bg{position:absolute; inset:0}
.spot-bg img{width:100%;height:100%;object-fit:cover}
.spot-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(13,21,51,.15) 0%,rgba(13,21,51,.55) 45%,rgba(13,21,51,.95) 100%)}
@media(min-width:860px){
  .spot-bg::after{background:linear-gradient(90deg,rgba(13,21,51,.95) 0%,rgba(13,21,51,.72) 46%,rgba(13,21,51,.1) 100%)}
  .spot{align-items:center}
}
.spot-in{position:relative; z-index:2; padding:clamp(24px,3.6vw,44px); max-width:620px}
.spot-kicker{font-size:11.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); margin-bottom:11px}
.spot h3{font-family:var(--display); font-weight:900; font-size:clamp(24px,3.4vw,38px);
  line-height:1.1; letter-spacing:-.03em; color:#fff; margin-bottom:12px}
.spot-meta{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px}
.spot-meta span{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:13px; font-weight:700; padding:6px 12px; border-radius:var(--r-pill)}
.spot-price{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.spot-price .big{font-family:var(--display); font-weight:900; font-size:32px; color:var(--gold);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.spot-price .was{font-size:15px; color:#8A93B4; text-decoration:line-through}
.spot-price .off{background:var(--verm); color:#fff; font-size:12px; font-weight:800;
  padding:4px 10px; border-radius:var(--r-pill)}

/* ---------- DEPARTURE CARDS ---------- */
.dep{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:var(--s5); display:flex; flex-direction:column; gap:11px; height:100%;
  border-left:4px solid var(--gold); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.dep:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.dep-date{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:800;
  color:var(--verm); letter-spacing:.03em; text-transform:uppercase}
.dep-date svg{width:15px;height:15px}
.dep h3{font-family:var(--display); font-weight:800; font-size:18px; color:var(--ink); line-height:1.25}
.dep-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding-top:var(--s3); border-top:1px solid var(--rule-soft); margin-top:auto}
.dep-seats{font-size:12.5px; font-weight:700; color:var(--hot)}

/* ---------- CITY GRID ---------- */
.cities{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
@media(min-width:720px){ .cities{grid-template-columns:repeat(4,1fr)} }
.city{background:var(--surface); border-radius:var(--r-lg); padding:var(--s5) var(--s4);
  box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:7px;
  border-top:3px solid transparent; transition:all .3s var(--ease)}
.city:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-top-color:var(--gold)}
.city .ic{width:40px;height:40px;border-radius:var(--r-md); background:var(--gold-soft);
  color:var(--navy); display:grid; place-items:center; margin-bottom:5px}
.city .ic svg{width:21px;height:21px}
.city .nm{font-size:16px; font-weight:900; color:var(--ink); letter-spacing:-.015em}
.city .dp{font-size:12.5px; color:var(--faint); font-weight:600}
.city .pr{margin-top:auto; padding-top:11px; font-size:12px; color:var(--muted); font-weight:600}
.city .pr b{display:block; font-size:17px; font-weight:900; color:var(--verm);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}

/* ---------- CALLBACK BAND ---------- */
.callback{background:var(--navy); border-radius:var(--r-lg); padding:clamp(22px,3.2vw,36px);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap}
.callback h3{font-family:var(--display); font-weight:900; font-size:clamp(19px,2.4vw,26px);
  color:#fff; letter-spacing:-.024em; margin-bottom:6px}
.callback p{color:#B9C0DA; font-size:15px; max-width:56ch}

/* ---------- BOTTOM TAB LINKS ---------- */
.tabs-nav{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  border-bottom:2px solid var(--rule); margin-bottom:var(--s6); padding-bottom:0}
.tabs-nav::-webkit-scrollbar{display:none}
.tab-btn{font-size:14.5px; font-weight:800; color:var(--muted); padding:12px 18px;
  white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .2s}
.tab-btn:hover{color:var(--navy)}
.tab-btn.on{color:var(--navy); border-bottom-color:var(--gold)}
.tab-pane{display:none}
.tab-pane.on{display:block}
.linkgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:9px var(--s5)}
@media(min-width:720px){ .linkgrid{grid-template-columns:repeat(4,1fr)} }
.linkgrid a{font-size:14px; color:var(--muted); padding:5px 0; transition:color .18s}
.linkgrid a:hover{color:var(--verm)}

/* ---------- FOOTER: more groups ---------- */
.foot-top{grid-template-columns:1fr}
@media(min-width:760px){ .foot-top{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .foot-top{grid-template-columns:1.45fr 1fr 1fr 1fr 1fr} }
.site-foot{background:var(--navy-deep)}
.foot-list a{font-size:14px}
.newsletter{display:flex; gap:8px; margin-top:var(--s4); flex-wrap:wrap}
.newsletter input{flex:1; min-width:150px; padding:11px 13px; border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#fff; font-size:14px}
.newsletter input::placeholder{color:#7C86AC}
.accred{display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--s5)}
.accred span{font-size:10.5px; font-weight:800; letter-spacing:.1em; color:#8A93B4;
  border:1px solid rgba(255,255,255,.16); padding:6px 11px; border-radius:var(--r-sm)}

/* ---------- rail tweaks at Marigold density ---------- */
@media(min-width:1000px){ .rail{gap:var(--s4)} }
.head-row{margin-bottom:var(--s6)}

/* ---------- multi-number contact list ---------- */
.phone-list{display:flex; flex-direction:column; gap:2px; width:100%; margin:2px 0 4px}
.phone-list li+li{border-top:1px solid var(--rule-soft)}
.phone-list a{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding:9px 0; transition:color .18s}
.phone-list .lb{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); flex:none}
.phone-list .v{font-family:var(--display); font-size:16.5px; font-weight:800; color:var(--verm);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap}
.phone-list a:hover .v{color:var(--navy)}
.phone-list a:hover .lb{color:var(--navy)}

.phone-list .is-primary .v{font-size:19px}
.phone-list .lb i{display:block; font-style:normal; font-size:10.5px; font-weight:800;
  letter-spacing:.09em; color:var(--navy); background:var(--gold); padding:3px 7px;
  border-radius:var(--r-pill); margin-top:5px; width:max-content}

/* ============================================================
   HERO TAGLINE
   ============================================================ */
.hero-tagline{
  font-family:var(--display); font-weight:800;
  font-size:clamp(19px,2.5vw,30px); line-height:1.22; letter-spacing:-.024em;
  color:#fff; margin:0 0 var(--s4); max-width:22ch; text-wrap:balance;
}
.hero-tagline em{font-style:normal; color:var(--gold); position:relative; white-space:nowrap}
.hero-tagline em::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:3px;
  background:var(--gold); border-radius:3px; transform-origin:left;
  transform:scaleX(0); animation:tl-underline 1s var(--ease) .55s forwards;
}
@keyframes tl-underline{ to{ transform:scaleX(1) } }
.foot-tagline{
  font-family:var(--display); font-weight:800; font-size:17px; line-height:1.3;
  color:var(--gold) !important; letter-spacing:-.018em; margin-bottom:10px !important; max-width:30ch;
}

/* ============================================================
   DESTINATION CARDS — photo-led, animated
   ============================================================ */
.dcard{
  position:relative; display:block; aspect-ratio:3/4; border-radius:var(--r-lg);
  overflow:hidden; background:var(--navy); isolation:isolate;
  box-shadow:var(--sh-1);
  transition:opacity .6s var(--ease), transform .6s var(--ease), box-shadow .4s var(--ease);
  transition-delay:calc(var(--i) * 65ms);
}
/* entrance only when JS is driving it */
.js .dcard{opacity:0; transform:translateY(26px) scale(.97)}
.js .dcard-rail.in .dcard{opacity:1; transform:none}
.dcard:hover{box-shadow:var(--sh-3)}

.dcard-media{position:absolute; inset:0; z-index:0; display:block}
.dcard-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
  transition:transform .85s var(--ease), filter .5s var(--ease);
  filter:saturate(.92);
}
.dcard:hover .dcard-media img{transform:scale(1.12); filter:saturate(1.12)}

/* gradient wash — deepens on hover so the label stays readable */
.dcard::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,21,51,.06) 0%,rgba(13,21,51,.30) 46%,rgba(13,21,51,.90) 100%);
  transition:opacity .45s var(--ease);
}
.dcard:hover::after{opacity:.92}

/* gold sweep on hover */
.dcard::before{
  content:""; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,179,2,.30) 50%,transparent 62%);
  transform:translateX(-110%);
  transition:transform .85s var(--ease);
}
.dcard:hover::before{transform:translateX(110%)}

/* icon badge */
.dcard-ic{
  position:absolute; z-index:3; top:12px; left:12px;
  width:44px; height:44px; display:grid; place-items:center; border-radius:14px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff;
  transition:background .4s var(--ease), transform .5s var(--ease), color .4s var(--ease);
}
.dcard:hover .dcard-ic{background:var(--gold); border-color:var(--gold); color:var(--navy);
  transform:translateY(-3px) rotate(-6deg) scale(1.06)}

/* the icon draws itself in when the row scrolls into view */
.js .dcard-ic svg path,.js .dcard-ic svg circle{
  stroke-dasharray:120; stroke-dashoffset:120;
}
.js .dcard-rail.in .dcard-ic svg path,
.js .dcard-rail.in .dcard-ic svg circle{
  animation:draw .95s var(--ease) forwards;
  animation-delay:calc(var(--i) * 65ms + 260ms);
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

.dcard-body{position:absolute; z-index:3; left:0; right:0; bottom:0; padding:15px 14px 16px;
  display:flex; flex-direction:column; gap:3px;
  transform:translateY(0); transition:transform .45s var(--ease)}
.dcard:hover .dcard-body{transform:translateY(-4px)}
.dcard-name{font-family:var(--display); font-weight:900; font-size:18px; letter-spacing:-.02em;
  color:#fff; line-height:1.15}
.dcard-n{font-size:12.5px; font-weight:600; color:rgba(255,255,255,.82);
  font-variant-numeric:tabular-nums}

.dcard-go{position:absolute; z-index:3; right:12px; bottom:14px; width:34px; height:34px;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:var(--gold); color:var(--navy);
  opacity:0; transform:translateX(-8px) scale(.8);
  transition:opacity .4s var(--ease), transform .4s var(--ease)}
.dcard:hover .dcard-go{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .dcard{opacity:1; transform:none; transition:none}
  .dcard::before{display:none}
  .dcard-ic svg path,.dcard-ic svg circle{stroke-dasharray:none; stroke-dashoffset:0; animation:none}
  .hero-tagline em::after{animation:none; transform:scaleX(1)}
}
@media(max-width:999px){
  .dcard{aspect-ratio:4/5}
  .dcard-ic{width:38px;height:38px;border-radius:12px}
  .dcard-name{font-size:16px}
}

.dscene{width:100%; height:100%; display:block; object-fit:cover}

/* ---------- visible adult / child counters in the search bar ---------- */
.searchbar{grid-template-columns:1fr}
@media(min-width:1120px){
  .searchbar{grid-template-columns:1.25fr .95fr .95fr .8fr .8fr auto; align-items:end; gap:var(--s3)}
}
@media(min-width:760px) and (max-width:1119px){
  .searchbar{grid-template-columns:1fr 1fr; align-items:end}
  .searchbar>button[type="submit"]{grid-column:1/-1}
}
.cnt{display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--sunk); border:1.5px solid var(--rule); border-radius:var(--r-md);
  padding:7px 9px; transition:border-color .2s}
.cnt:focus-within{border-color:var(--gold-deep)}
.cnt button{width:32px; height:32px; flex:none; border-radius:var(--r-pill);
  border:1.5px solid var(--rule); background:#fff; color:var(--navy);
  font-size:18px; font-weight:800; line-height:1; display:grid; place-items:center;
  transition:all .18s}
.cnt button:hover:not(:disabled){border-color:var(--gold-deep); background:var(--gold-soft)}
.cnt button:disabled{opacity:.32; cursor:not-allowed}
.cnt .v{flex:1; text-align:center; font-size:17px; font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums}
.child-ages{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.child-ages .lbl{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted)}

/* footer logo chip — the supplied light logo was the old brand */
.foot-logo{display:inline-block; margin-bottom:var(--s4)}
.foot-logo img{display:block; height:46px; width:auto; background:none}

/* ============================================================
   WELCOME POP-UP
   ============================================================ */
.pop{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:var(--s4)}
.pop[hidden]{display:none}
.pop-veil{position:absolute; inset:0; background:rgba(13,21,51,.74);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0;
  transition:opacity .35s var(--ease)}
.pop.show .pop-veil{opacity:1}

.pop-box{position:relative; z-index:2; width:100%; max-width:860px; background:var(--surface);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:0 30px 90px rgba(13,21,51,.42);
  display:grid; grid-template-columns:1fr; max-height:calc(100vh - 2*var(--s4));
  opacity:0; transform:translateY(22px) scale(.97);
  transition:opacity .42s var(--ease), transform .42s var(--ease)}
.pop.show .pop-box{opacity:1; transform:none}
@media(min-width:820px){ .pop-box{grid-template-columns:.82fr 1fr} }

.pop-x{position:absolute; top:12px; right:12px; z-index:5; width:38px; height:38px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.92); color:var(--navy);
  font-size:24px; line-height:1; display:grid; place-items:center;
  box-shadow:var(--sh-1); transition:background .2s, transform .2s}
.pop-x:hover{background:#fff; transform:rotate(90deg)}

.pop-art{position:relative; display:none; background:var(--navy)}
@media(min-width:820px){ .pop-art{display:block} }
.pop-art img{width:100%; height:100%; object-fit:cover}
.pop-art::after{content:""; position:absolute; inset:0;
  background:linear-gradient(200deg,rgba(13,21,51,.1),rgba(13,21,51,.62))}
.pop-art-tag{position:absolute; left:16px; bottom:16px; z-index:2; display:inline-flex;
  align-items:center; gap:7px; background:var(--gold); color:var(--navy); font-size:12px;
  font-weight:900; letter-spacing:.06em; text-transform:uppercase; padding:8px 13px;
  border-radius:var(--r-pill)}

.pop-body{padding:clamp(24px,3.4vw,38px); overflow-y:auto}
.pop-tag{display:inline-block; background:var(--verm-soft); color:var(--verm); font-size:11px;
  font-weight:900; letter-spacing:.13em; text-transform:uppercase; padding:6px 11px;
  border-radius:var(--r-pill); margin-bottom:14px}
.pop-body h2{font-family:var(--display); font-weight:900; font-size:clamp(22px,2.7vw,28px);
  line-height:1.15; letter-spacing:-.028em; color:var(--ink); margin-bottom:9px; text-wrap:balance}
.pop-body p{color:var(--muted); font-size:15px; line-height:1.55; margin-bottom:20px}

.pop-form{display:flex; flex-direction:column; gap:13px}
.pop-two{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.pop-field label{display:block; font-size:11px; font-weight:900; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.pop-field input,.pop-field select{width:100%; padding:12px 14px; font-size:15px; font-weight:600;
  color:var(--ink); background:var(--sunk); border:1.5px solid var(--rule);
  border-radius:var(--r-md); outline:none; transition:border-color .2s, background .2s}
.pop-field input:focus,.pop-field select:focus{border-color:var(--gold-deep); background:#fff}
.pop-field input.bad{border-color:var(--verm); background:var(--verm-soft)}
.pop-err{color:var(--verm); font-size:13.5px; font-weight:700; margin:0}
.pop-submit{width:100%; margin-top:2px}
.pop-note{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--faint);
  margin:0 !important; line-height:1.4}
.pop-note svg{color:var(--ok); flex:none}

.pop-done{text-align:center; padding:var(--s6) 0}
.pop-tick{width:74px; height:74px; margin:0 auto var(--s4); border-radius:var(--r-pill);
  background:var(--ok-soft); color:var(--ok); display:grid; place-items:center}
.pop-done h3{font-family:var(--display); font-weight:900; font-size:21px; color:var(--ink); margin-bottom:7px}
.pop-done p{margin:0}
.pop-done a{color:var(--verm); font-weight:800}

@media(max-width:819px){
  .pop{align-items:flex-end; padding:0}
  .pop-box{max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-height:92vh; transform:translateY(100%)}
  .pop.show .pop-box{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pop-veil,.pop-box{transition:none}
  .pop-box{transform:none}
}

/* ============================================================
   MOBILE PASS — sliders, sizing, app-like feel
   ============================================================ */

/* Generic: any grid marked .rail-m becomes a swipeable, snapping slider
   on small screens, with the next card peeking so swiping is discoverable. */
@media(max-width:819px){
  .rail-m{
    display:grid !important;
    grid-auto-flow:column;
    grid-auto-columns:82%;
    grid-template-columns:none !important;
    gap:var(--s4);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px var(--gut) var(--s4);
    margin-inline:calc(var(--gut) * -1);
  }
  .rail-m::-webkit-scrollbar{display:none}
  .rail-m > *{scroll-snap-align:center; height:auto}
  /* the small icon rows read better 2-up than one huge card */
  .incl.rail-m{grid-auto-columns:44%}
  .incl.rail-m .incl-item{text-align:center}
  .steps.rail-m{grid-auto-columns:80%}
  .contact-grid.rail-m{grid-auto-columns:76%}
  .campaign-grid.rail-m{grid-auto-columns:78%; margin-inline:0; padding-inline:0}
}

/* swipe affordance */
@media(max-width:819px){
  .head-row{position:relative}
  .head-row::after{
    content:"swipe →"; position:absolute; right:0; bottom:-2px;
    font-size:10.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
    color:var(--faint); opacity:.75;
  }
  .head-row:not(:has(+ .rail-m)):not(:has(+ .rail))::after{content:none}
}

/* ---------- POP-UP: compact sheet, not a full screen ---------- */
@media(max-width:819px){
  .pop{align-items:flex-end; padding:0}
  .pop-box{
    max-width:none; border-radius:20px 20px 0 0;
    max-height:min(78vh, 620px);
    transform:translateY(100%);
    box-shadow:0 -12px 40px rgba(13,21,51,.35);
  }
  .pop.show .pop-box{transform:none}
  .pop-box::before{                     /* grab handle, reads as a sheet */
    content:""; position:absolute; top:9px; left:50%; translate:-50% 0; z-index:6;
    width:42px; height:4px; border-radius:99px; background:var(--rule);
  }
  .pop-body{padding:24px 18px 20px}
  .pop-x{top:8px; right:8px; width:32px; height:32px; font-size:20px}
  .pop-tag{margin-bottom:10px; font-size:10px; padding:5px 9px}
  .pop-body h2{font-size:19px; line-height:1.2; margin-bottom:6px}
  .pop-body p{font-size:13.5px; line-height:1.45; margin-bottom:14px}
  .pop-form{gap:10px}
  .pop-two{gap:10px}
  .pop-field label{font-size:10px; margin-bottom:4px}
  .pop-field input,.pop-field select{padding:10px 12px; font-size:14.5px}
  .pop-submit{padding:14px 22px; font-size:15px}
  .pop-note{font-size:11.5px}
  .pop-done{padding:var(--s5) 0}
  .pop-tick{width:58px; height:58px; margin-bottom:12px}
  .pop-done h3{font-size:18px}
}
@media(max-width:819px) and (max-height:680px){
  .pop-box{max-height:86vh}
  .pop-body p{display:none}            /* very short screens: lead straight to the form */
}

/* ---------- FOOTER: two columns on phones ---------- */
@media(max-width:759px){
  .foot-top{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6) var(--s5)}
  .foot-brand{grid-column:1 / -1}
  .foot-h{margin-bottom:12px; font-size:11px}
  .foot-list a{font-size:13.5px}
  .foot-list li + li{margin-top:8px}
  .foot-bot{flex-direction:column; align-items:flex-start; gap:12px}
  .foot-links{gap:var(--s4); font-size:13px}
}

/* ---------- general mobile sizing ---------- */
@media(max-width:819px){
  body{font-size:16px}
  .band{padding-block:clamp(40px,8vw,56px)}
  .band-tight{padding-block:clamp(32px,6.5vw,44px)}
  .head-row{margin-bottom:var(--s5)}
  .lede{font-size:15.5px}

  .hero{min-height:auto}
  .hero-inner{padding-block:34px 30px}
  .hero-tagline{font-size:18px; margin-bottom:12px}
  .hero-sub{font-size:15px; margin-bottom:20px}

  .searchbar{padding:14px; gap:10px}
  .field label{font-size:10.5px; margin-bottom:5px}
  .field-ctrl{padding:10px 12px}
  .cnt{padding:6px 8px}
  .cnt button{width:30px; height:30px}

  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:var(--s5) var(--s4)}
  .stat-n{font-size:26px}
  .stat-l{font-size:11px; margin-top:8px}

  .spot{min-height:auto}
  .spot-in{padding:24px 18px 26px}
  .spot h3{font-size:22px}
  .spot-price .big{font-size:26px}

  .feature-inner{padding:26px 18px 28px}
  .feature-prices{grid-template-columns:1fr 1fr}
  .fp{padding:12px 14px}
  .fp .p{font-size:17px}

  .cities{gap:10px}
  .city{padding:16px 14px}
  .callback{padding:22px 18px; text-align:left}
  .tabs-nav{margin-bottom:var(--s5)}
  .linkgrid{grid-template-columns:1fr 1fr; gap:6px var(--s4)}

  .acc summary{font-size:16px; padding:18px 0; gap:var(--s4)}
  .acc .a{font-size:15px; padding-bottom:20px}
  .faq-cats{gap:7px}
  .faq-cat{font-size:13px; padding:8px 14px}

  /* tap targets */
  .btn{min-height:46px}
  .btn-sm{min-height:40px}
}
@media(max-width:400px){
  .stats{grid-template-columns:1fr 1fr}
  .incl.rail-m{grid-auto-columns:56%}
  .hero h1{font-size:32px}
}


/* ============================================================
   LEGAL PAGES — terms.php, privacy.php
   ============================================================ */
.legal-head{border-bottom:1px solid var(--rule); padding-bottom:var(--s5); margin-bottom:var(--s6)}
.legal-meta{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s4);
  font-size:14px; color:var(--muted)}
.legal-meta b{color:var(--ink); font-weight:800}

.legal-note{border-left:4px solid var(--gold); background:var(--gold-soft);
  padding:16px 20px; border-radius:0 var(--r-md) var(--r-md) 0; margin:var(--s5) 0}
.legal-note p{margin:0; font-size:14.5px; color:var(--ink)}
.legal-note p+p{margin-top:8px}

/* table of contents */
.legal-toc{background:var(--sunk); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:var(--s5) var(--s5) var(--s4); margin-bottom:var(--s7)}
.legal-toc h2{font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--s3)}
/* the global reset sets ul,ol{list-style:none} — legal copy needs its
   markers back, because the text cross-references numbered sections */
.legal-toc ol{margin:0; padding-left:22px; columns:2; column-gap:var(--s6);
  list-style:decimal}
.legal-toc li::marker{color:var(--gold-deep); font-weight:800}
.legal-toc li{margin-bottom:7px; break-inside:avoid; font-size:14.5px}
.legal-toc a{color:var(--body); text-decoration:none}
.legal-toc a:hover{color:var(--verm); text-decoration:underline}

/* body copy */
.legal-body{counter-reset:sec}
.legal-body section{margin-bottom:var(--s7); scroll-margin-top:110px}
.legal-body h2{counter-increment:sec; font-size:clamp(19px,2.2vw,24px); line-height:1.3;
  color:var(--ink); margin:0 0 var(--s3); font-weight:800}
.legal-body h2::before{content:counter(sec) ". "; color:var(--gold-deep); font-weight:900}
.legal-body h3{font-size:16.5px; font-weight:800; color:var(--ink); margin:var(--s5) 0 var(--s2)}
.legal-body p,.legal-body li{font-size:15.5px; line-height:1.72; color:var(--body)}
.legal-body p{margin:0 0 var(--s3)}
.legal-body ul,.legal-body ol{margin:0 0 var(--s3); padding-left:24px}
.legal-body ul{list-style:disc}
.legal-body ol{list-style:decimal}
.legal-body li{margin-bottom:9px; padding-left:4px}
.legal-body li::marker{color:var(--gold-deep)}
.legal-body strong{color:var(--ink); font-weight:800}
.legal-body a{color:var(--verm); font-weight:700}

/* the CONFIRM markers Tripido must review */
.legal-body em.confirm,.legal-note em.confirm{display:inline-block; font-style:normal;
  background:var(--verm-soft); color:var(--verm); font-size:13px; font-weight:800;
  padding:2px 9px; border-radius:var(--r-pill); margin-left:4px}

/* definition / slab tables */
.legal-table{width:100%; border-collapse:collapse; margin:var(--s4) 0 var(--s5); font-size:15px}
.legal-table th,.legal-table td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule)}
.legal-table th{font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:800; background:var(--sunk)}
.legal-table td:last-child{font-weight:800; color:var(--ink); white-space:nowrap}
.legal-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

@media (max-width:640px){
  .legal-toc ol{columns:1}
  .legal-body p,.legal-body li{font-size:15px}
}

/* ============================================================
   DEPARTURE CITY CARDS — landmark photo, no pricing
   Overrides the earlier .city rules; scoped .cities .city so it
   also beats the small-screen padding rule further down.
   ============================================================ */
.cities .city{position:relative; display:flex; flex-direction:column; padding:0;
  overflow:hidden; background:var(--surface); border-radius:var(--r-lg);
  border-top:0; box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.cities .city:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}

.city-media{position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  background:var(--gold-soft)}
.city-media img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease)}
.cities .city:hover .city-media img{transform:scale(1.07)}

/* fallback while a city has no photograph yet */
.city-ic{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; color:var(--gold-deep)}
.city-ic svg{width:30px; height:30px}

.city-body{padding:13px 15px 15px}
.cities .city .nm{display:block; font-size:16px; font-weight:900; color:var(--ink);
  letter-spacing:-.015em}
.cities .city .lm{display:block; margin-top:3px; font-size:12.5px; color:var(--muted);
  font-weight:600}

@media (max-width:640px){
  .city-body{padding:11px 12px 13px}
  .cities .city .nm{font-size:15px}
  .cities .city .lm{font-size:12px}
}

/* compact variant while a city has no landmark photograph yet */
.cities .city-plain{padding:var(--s5) var(--s4)}
.cities .city-plain .city-body{padding:0}
.city-ic-sm{display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:12px; border-radius:var(--r-md);
  background:var(--gold-soft); color:var(--gold-deep)}
.city-ic-sm svg{width:19px; height:19px}

/* ============================================================
   ENQUIRY PAGE  (enquire.php)  +  the "Enquire now" CTA button
   ============================================================ */
.enq-head{max-width:64ch; margin-bottom:var(--s7)}
.enq-assure{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:var(--s5); padding:0}
.enq-assure li{display:flex; align-items:center; gap:7px; list-style:none;
  font-size:14px; font-weight:700; color:var(--ink)}
.enq-assure svg{width:16px; height:16px; color:var(--ok); flex:none}

.enq-form{background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-xl); padding:clamp(20px,3.4vw,38px); box-shadow:var(--sh-2)}

.enq-set{border:0; padding:0; margin:0 0 var(--s7)}
.enq-set:last-of-type{margin-bottom:var(--s5)}
.enq-set legend{padding:0 0 var(--s4); font-size:12px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-deep)}

.enq-grid{display:grid; grid-template-columns:1fr; gap:var(--s4)}
@media (min-width:700px){ .enq-grid{grid-template-columns:1fr 1fr} }

.fld{display:flex; flex-direction:column; gap:7px}
.fld>span{font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--muted)}
.fld>span b{color:var(--verm)}
.fld input,.fld select,.fld textarea{
  width:100%; font-family:var(--ui); font-size:15.5px; font-weight:600; color:var(--ink);
  background:var(--porcelain); border:1.5px solid var(--rule); border-radius:var(--r-md);
  padding:12px 14px; transition:border-color .18s var(--ease), background .18s var(--ease)}
.fld textarea{resize:vertical; min-height:96px; font-weight:500; line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint); font-weight:500}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--gold-deep); background:#fff}
.fld input.bad,.fld select.bad,.fld textarea.bad{border-color:var(--verm); background:var(--verm-soft)}
.fld-wide{margin-top:var(--s4)}

.enq-foot{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  padding-top:var(--s5); border-top:1px solid var(--rule-soft)}
.enq-note{margin:0; color:var(--muted); max-width:46ch}
.enq-note a{color:var(--verm); font-weight:800}

.enq-err{margin:var(--s4) 0 0; padding:12px 16px; border-radius:var(--r-md);
  background:var(--verm-soft); color:var(--verm); font-size:14.5px; font-weight:700}
.enq-err[hidden]{display:none}

.enq-alt{margin-top:var(--s7); text-align:center}
.enq-alt>p{font-size:16px; font-weight:800; color:var(--ink); margin-bottom:var(--s4)}
.enq-alt .hero-actions{justify-content:center}

/* ---- the "Enquire now" call to action ---- */
.btn-enquire{position:relative; overflow:hidden; background:var(--grad); color:var(--navy);
  font-weight:900; letter-spacing:.01em; box-shadow:0 6px 20px rgba(255,179,2,.42)}
.btn-enquire:hover{background:var(--grad-hover); transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(255,179,2,.52)}
.btn-enquire::after{content:""; position:absolute; top:0; left:-120%;
  width:55%; height:100%; transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
@media (prefers-reduced-motion:no-preference){
  .btn-enquire::after{animation:enqShine 4.2s ease-in-out infinite}
}
@keyframes enqShine{
  0%,72%{left:-120%}
  86%,100%{left:150%}
}

/* small enquiry pill sitting to the right of the city name — 3D pebble */
.city-body{display:flex; align-items:center; justify-content:space-between; gap:10px}
.city-txt{display:block; min-width:0}

.city-cta{
  position:relative; flex:none; overflow:hidden;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:8px 15px 9px;
  font-size:11.5px; font-weight:900; letter-spacing:.03em;
  color:#5A3200;                                   /* warm brown reads cleanly on gold */
  border:0; border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FFDD8C 0%,#FFC02E 42%,#F5A300 78%,#DE8F00 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),          /* top bevel  */
    inset 0 -2.5px 4px rgba(150,84,0,.38),         /* under-curve */
    inset 0 0 0 1px rgba(190,110,0,.28),           /* rim         */
    0 1.5px 2px rgba(20,32,74,.16),                /* contact     */
    0 5px 12px rgba(224,150,0,.44);                /* glow        */
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}

/* specular sheen across the top third — what sells the roundness */
.city-cta::before{
  content:""; position:absolute; left:8%; right:8%; top:2px; height:42%;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));
  pointer-events:none;
}

.cities .city:hover .city-cta{
  transform:translateY(-2px);
  filter:saturate(1.06);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -2.5px 4px rgba(150,84,0,.34),
    inset 0 0 0 1px rgba(190,110,0,.24),
    0 3px 5px rgba(20,32,74,.18),
    0 10px 22px rgba(224,150,0,.55);
}

/* pressed — the pebble sinks into the card */
.cities .city:active .city-cta{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(150,84,0,.42),
    inset 0 0 0 1px rgba(190,110,0,.3),
    0 1px 2px rgba(20,32,74,.16);
}

.city-cta svg{width:13px; height:13px; position:relative}

@media (prefers-reduced-motion:reduce){
  .cities .city:hover .city-cta{transform:none}
}
@media (max-width:520px){
  .city-cta{padding:7px 11px 8px; font-size:11px}
  .city-cta svg{display:none}
}

/* "City not on the list?" — Incredible India artwork behind the panel.
   The wash is deliberately light so the illustration actually reads; the
   copy is protected with a shadow rather than by drowning the picture. */
.callback-india{
  position:relative; isolation:isolate; overflow:hidden;
  background-color:var(--navy);
  background-image:url("/images/homepage/incredible-india.jpg");
  background-size:cover;
  background-position:center 58%;
  background-repeat:no-repeat;
}
.callback-india::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(13,21,51,.86) 0%,
    rgba(13,21,51,.68) 28%,
    rgba(13,21,51,.34) 56%,
    rgba(13,21,51,.06) 100%);
}
.callback-india h3,
.callback-india p{text-shadow:0 1px 4px rgba(13,21,51,.95), 0 0 14px rgba(13,21,51,.7)}
.callback-india p{color:#DCE2F5}

@media (max-width:760px){
  .callback-india{background-position:center 62%}
  .callback-india::before{
    background:linear-gradient(180deg,rgba(13,21,51,.82) 0%,rgba(13,21,51,.62) 100%);
  }
}

/* Honeymoon promo band — Santorini sunset behind the copy.
   Wash is heaviest on the left where the text sits and clears to the right
   so the couple, the caldera and the sunset all read. */
.promo{
  isolation:isolate;
  background-color:var(--navy);
  background-image:url("/images/homepage/honeymoon-santorini.jpg");
  background-size:cover;
  background-position:center 56%;
  background-repeat:no-repeat;
}
.promo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,
    rgba(13,21,51,.90) 0%,
    rgba(13,21,51,.74) 30%,
    rgba(13,21,51,.38) 58%,
    rgba(13,21,51,.08) 100%);
}
.promo h3,.promo p{text-shadow:0 1px 4px rgba(13,21,51,.95), 0 0 16px rgba(13,21,51,.7)}
.promo p{color:#DDE3F6}
/* the decorative SVG is redundant now the photograph is there */
.promo-art{display:none !important}

@media (max-width:760px){
  .promo{background-position:center 60%}
  .promo::before{
    background:linear-gradient(180deg,rgba(13,21,51,.86) 0%,rgba(13,21,51,.66) 100%);
  }
}

/* speciality card placeholder while a category has no photograph yet */
.spec-ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--gold-soft) 0%,#FFE7AE 55%,#FFDA8A 100%);
  color:var(--gold-deep)}
.spec-ph svg{width:40px; height:40px; opacity:.72}


/* ============================================================
   DESTINATION RAIL — swipe sideways rather than wrap down the page.
   With 25 destinations a wrapped grid ran to four rows; this keeps the
   section one row tall and scrolls horizontally at every width.
   ============================================================ */
.rail-wrap{position:relative}

@media (min-width:1000px){
  /* undo the shared .rail grid behaviour for this rail only */
  .dcard-rail{
    grid-auto-flow:column;
    grid-template-columns:none;
    grid-auto-columns:minmax(180px,180px);
    overflow-x:auto;
    padding:4px var(--gut) var(--s5);
    margin-inline:calc(var(--gut) * -1);
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
  }
}

/* fade on the trailing edge so it is obvious there is more to the right */
.rail-wrap::after{
  content:""; position:absolute; top:0; right:0; bottom:var(--s5); width:64px;
  pointer-events:none; opacity:0; transition:opacity .3s var(--ease);
  background:linear-gradient(90deg,rgba(255,249,236,0) 0%,var(--porcelain) 82%);
}
.rail-wrap.has-next::after{opacity:1}

/* round arrows — desktop only, where there is nothing to swipe with */
.rail-nav{
  position:absolute; top:calc(50% - var(--s5)); transform:translateY(-50%);
  z-index:5; display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:#fff; color:var(--navy); border:1.5px solid var(--rule);
  box-shadow:var(--sh-2); cursor:pointer;
  transition:background .18s var(--ease), transform .18s var(--ease), opacity .2s;
}
.rail-nav svg{width:19px; height:19px}
.rail-nav:hover{background:var(--gold); border-color:var(--gold); transform:translateY(-50%) scale(1.07)}
.rail-nav.prev{left:-14px}
.rail-nav.next{right:-14px}
.rail-nav[disabled]{opacity:0; pointer-events:none}

@media (min-width:1000px){
  .rail-nav{display:flex}
}

@media (prefers-reduced-motion:reduce){
  .dcard-rail{scroll-behavior:auto}
}

/* the icon set only has a right arrow — flip it for "previous" */
.rail-nav.prev svg{transform:rotate(180deg)}
/* the rail bleeds past the wrapper via negative margins, so pull the
   buttons inside the visible edge rather than outside it */
.rail-nav.prev{left:6px}
/* clear of the fixed "Plan my trip" dock tab, which is 47px wide */
.rail-nav.next{right:40px}

/* ============================================================
   PRICE MATCH PROMISE — replaces the season spotlight.
   Built as the page's loudest block: full-bleed villa photograph,
   a three-step explainer, and a WhatsApp hand-off that expects a
   screenshot of the competing price.
   ============================================================ */
.pm{position:relative; border-radius:var(--r-xl); overflow:hidden; isolation:isolate;
  background:var(--navy-deep); box-shadow:var(--sh-3)}
.pm-bg{position:absolute; inset:0; z-index:-2}
.pm-bg img{width:100%; height:100%; object-fit:cover; object-position:center 58%}
.pm-bg::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(9,15,38,.94) 0%, rgba(9,15,38,.86) 30%,
    rgba(9,15,38,.48) 60%, rgba(9,15,38,.14) 100%)}

.pm-in{position:relative; z-index:2; display:grid; gap:clamp(22px,3vw,44px);
  grid-template-columns:1fr; padding:clamp(26px,3.8vw,52px)}
@media (min-width:940px){ .pm-in{grid-template-columns:1.08fr .92fr; align-items:center} }

/* ---- left column ---- */
.pm-kicker{display:inline-flex; align-items:center; gap:7px; margin:0 0 14px;
  background:rgba(255,179,2,.16); border:1px solid rgba(255,179,2,.42);
  color:var(--gold); font-size:11px; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; padding:6px 13px; border-radius:var(--r-pill)}
.pm-kicker svg{width:14px; height:14px}

.pm h3{font-family:var(--display); font-weight:900; line-height:1.04;
  font-size:clamp(30px,4.6vw,52px); color:#fff; margin:0 0 6px; letter-spacing:-.025em}
.pm h3 em{font-style:normal; color:var(--gold); display:block}
.pm-tag{font-family:var(--display); font-size:clamp(15px,1.8vw,20px); font-weight:800;
  color:#fff; margin:0 0 16px; letter-spacing:-.01em}
.pm-tag b{color:var(--gold)}
.pm-lede{color:#C7CEE8; font-size:15.5px; line-height:1.68; max-width:52ch; margin:0 0 22px}
.pm-lede strong{color:#fff; font-weight:800}

.pm-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.pm-note{font-size:12.5px; color:#98A2C6; margin:14px 0 0; max-width:46ch}

/* ---- right column: the three steps ---- */
.pm-steps{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg); padding:clamp(18px,2.2vw,26px); backdrop-filter:blur(9px)}
.pm-steps h4{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 16px}
.pm-step{display:flex; gap:14px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.11)}
.pm-step:last-child{border-bottom:0; padding-bottom:0}
.pm-step .n{flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--gold); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:900; font-family:var(--display)}
.pm-step .t{display:block; font-size:15px; font-weight:800; color:#fff; margin:2px 0 3px}
.pm-step .d{display:block; font-size:13.5px; color:#B4BDDB; line-height:1.55}

@media (max-width:939px){
  .pm-bg::after{background:linear-gradient(180deg,
    rgba(9,15,38,.93) 0%, rgba(9,15,38,.90) 55%, rgba(9,15,38,.82) 100%)}
}

/* The dock carries a longer label now ("Price Match Promise"), so tighten the
   tracking and cap its height rather than let it run past the viewport. */
.dock{font-size:12px; letter-spacing:.07em; padding:16px 12px;
  max-height:78vh; text-align:center}

/* FAQ placeholder shown before a topic is chosen */
.faq-empty{margin:var(--s6) 0 0; padding:var(--s6) var(--s5); text-align:center;
  background:var(--surface); border:1px dashed var(--rule); border-radius:var(--r-lg);
  color:var(--muted); font-size:15px; font-weight:600}
.faq-empty[hidden]{display:none}

/* pm-in overflow fix — grid children default to min-width:auto, so the
   360px "Send a screenshot on WhatsApp" button was forcing the column
   wider than the panel and pushing the copy off the right edge. */
.pm-in > *{min-width:0}
.pm-cta{width:100%}
.pm-cta .btn{max-width:100%}
.pm-lede,.pm-note,.pm-tag{overflow-wrap:anywhere}

@media (max-width:560px){
  .pm-cta{flex-direction:column; align-items:stretch}
  .pm-cta .btn{width:100%; white-space:normal; text-align:center;
    padding-left:14px; padding-right:14px}
  .pm h3{font-size:clamp(27px,8.4vw,38px)}
}

/* ============================================================
   Mobile contact + swipe hint fixes
   ============================================================ */
@media (max-width:819px){
  /* the "swipe →" label sat at bottom:-2px and collided with the centred
     heading once it wrapped — give the row its own room underneath */
  .head-row:has(+ .rail-m),
  .head-row:has(+ .rail){padding-bottom:22px}
  .head-row::after{bottom:2px}
}

@media (max-width:600px){
  /* label and number were competing for one line via space-between, which
     pushed the number past the edge of the card */
  .phone-list a{flex-direction:column; align-items:flex-start; gap:3px;
    padding-top:10px; padding-bottom:10px}
  .phone-list .lb{font-size:11px}
  .phone-list .v{font-size:18px; white-space:nowrap}
  .phone-list .is-primary .v{font-size:19px}
  .contact-card .v{overflow-wrap:anywhere}
}

/* The campaign now carries four cards, not three. Two-up on tablet so they
   do not squeeze, four-up only once there is room for it. */
@media (min-width:820px){ .campaign-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .campaign-grid{grid-template-columns:repeat(4,1fr)} }

/* ============================================================
   FIXED DEPARTURE DETAIL PAGE  (thailand-getaway.php)
   ============================================================ */
.dep-head{border-bottom:1px solid var(--rule); padding-bottom:var(--s6); margin-bottom:var(--s7)}
.dep-route{font-size:16px; font-weight:700; color:var(--muted); margin:0 0 var(--s4)}

.dep-badges{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s5)}
.dep-badge{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800;
  color:var(--ok); background:var(--ok-soft); border-radius:var(--r-pill); padding:6px 13px}
.dep-badge svg{width:14px; height:14px}

.dep-bar{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5);
  background:var(--sunk); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s5) var(--s5)}
.dep-price .l,.dep-when .l{display:block; font-size:11px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.dep-price .p{font-family:var(--display); font-size:30px; font-weight:900; color:var(--verm); line-height:1}
.dep-when .d{display:inline-flex; align-items:center; gap:7px; font-size:16px; font-weight:800; color:var(--ink)}
.dep-when svg{width:15px;height:15px;color:var(--gold-deep)}
.dep-bar .btn{margin-left:auto}

.dep-h2{display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-size:clamp(19px,2.4vw,24px); font-weight:900; color:var(--ink);
  margin:var(--s8) 0 var(--s4); padding-bottom:9px; border-bottom:2px solid var(--gold)}
.dep-h2 svg{width:19px;height:19px;color:var(--gold-deep); flex:none}

.dep-fine{font-size:13px; color:var(--muted); margin:var(--s3) 0 0; line-height:1.6}
.dep-fine a{color:var(--verm); font-weight:700}
.dep-fine sup{color:var(--verm); font-weight:800}

/* ---- flights ---- */
.dep-flights{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media (min-width:760px){ .dep-flights{grid-template-columns:1fr 1fr} }
.fl{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--sh-1)}
.fl-dir{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy); background:var(--navy-mist);
  padding:4px 10px; border-radius:var(--r-pill); margin-bottom:11px}
.fl-air{font-size:14.5px; color:var(--muted); margin:0 0 var(--s4)}
.fl-air b{color:var(--ink); font-weight:800}
.fl-leg{display:flex; align-items:center; gap:var(--s3)}
.fl-leg .t{display:block; font-family:var(--display); font-size:21px; font-weight:900; color:var(--ink)}
.fl-leg .t sup{font-size:11px; color:var(--verm)}
.fl-leg .c{display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-top:2px}
.fl-leg .right{text-align:right; margin-left:auto}
.fl-arrow{color:var(--gold-deep); flex:none}
.fl-arrow svg{width:16px;height:16px}

/* ---- hotels ---- */
.dep-hotels{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media (min-width:760px){ .dep-hotels{grid-template-columns:1fr 1fr} }
.ht{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--sh-1)}
.ht-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.ht-city{font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.ht-n{font-size:12px; font-weight:900; color:var(--navy); background:var(--gold-soft);
  padding:3px 10px; border-radius:var(--r-pill)}
.ht-name{font-family:var(--display); font-size:18px; font-weight:900; color:var(--ink); margin:0 0 3px}
.ht-star{color:var(--gold-deep); font-size:13px; letter-spacing:1px}
.ht-room{font-size:14px; color:var(--body); margin:0 0 9px}
.ht-meal{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  color:var(--ok); margin:0}
.ht-meal svg{width:14px;height:14px}

/* ---- simple lists ---- */
.dep-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.dep-list li{display:flex; align-items:flex-start; gap:10px; font-size:15.5px; color:var(--body)}
.dep-list svg{width:15px;height:15px;color:var(--ok); flex:none; margin-top:4px}

/* ---- itinerary ---- */
.dep-days{list-style:none; padding:0; margin:0}
.dep-days > li{display:flex; gap:var(--s4); padding:var(--s5) 0; border-bottom:1px solid var(--rule-soft)}
.dep-days > li:last-child{border-bottom:0}
.dep-days .n{flex:none; align-self:flex-start; font-family:var(--display); font-size:12px;
  font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--navy);
  background:var(--gold); padding:6px 12px; border-radius:var(--r-pill)}
.dep-days h3{font-family:var(--display); font-size:17.5px; font-weight:900; color:var(--ink);
  margin:2px 0 8px}
.dep-days ul{margin:0; padding-left:18px; list-style:disc}
.dep-days ul li{font-size:15px; color:var(--body); line-height:1.65; margin-bottom:5px}
.dep-days ul li::marker{color:var(--gold-deep)}

/* ---- inclusions / exclusions ---- */
.dep-inex{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media (min-width:760px){ .dep-inex{grid-template-columns:1fr 1fr} }
.dep-inex > div{border-radius:var(--r-lg); padding:var(--s5); border:1px solid var(--rule)}
.dep-inex .inc{background:var(--ok-soft); border-color:#C8E0D5}
.dep-inex .exc{background:var(--sunk)}
.dep-inex h3{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 var(--s4)}
.dep-inex .inc h3{color:var(--ok)}
.dep-inex .exc h3{color:var(--muted)}
.dep-inex h3 svg{width:16px;height:16px}
.dep-inex ul{margin:0; padding-left:19px; list-style:disc}
.dep-inex li{font-size:14.5px; line-height:1.62; color:var(--body); margin-bottom:7px}
.dep-inex .inc li::marker{color:var(--ok)}
.dep-inex .exc li::marker{color:var(--faint)}

/* ---- closing CTA ---- */
.dep-cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5);
  background:var(--navy); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); margin-top:var(--s8)}
.dep-cta h3{font-family:var(--display); font-size:clamp(19px,2.4vw,25px); font-weight:900;
  color:#fff; margin:0 0 7px}
.dep-cta p{color:#B9C0DA; font-size:15px; margin:0; max-width:54ch}
.dep-cta-btns{display:flex; flex-wrap:wrap; gap:11px; margin-left:auto}

@media (max-width:640px){
  .dep-bar{flex-direction:column; align-items:stretch}
  .dep-bar .btn{margin-left:0; width:100%}
  .dep-cta-btns{margin-left:0; width:100%}
  .dep-cta-btns .btn{width:100%}
  .dep-days > li{flex-direction:column; gap:10px}
}

/* ============================================================
   Departure card — route, title, icon rows, seats note, Book now
   ============================================================ */
.dep{gap:9px}
.dep-route{font-size:12px; font-weight:800; letter-spacing:.05em; color:var(--muted)}
.dep h3{font-size:17px; line-height:1.3; margin:0}

.dep-meta{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:8px}
.dep-meta li{display:flex; align-items:flex-start; gap:9px;
  font-size:13.5px; font-weight:600; color:var(--body); line-height:1.45}
.dep-meta svg{width:15px; height:15px; color:var(--gold-deep); flex:none; margin-top:1px}

.dep-row{align-items:flex-end}
.dep-row .from-price sup{font-size:11px; color:var(--muted); font-weight:700}
.dep-seats{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.dep-seats svg{width:13px; height:13px; flex:none}

.dep-book{width:100%; margin-top:2px}

@media (max-width:520px){
  .dep-row{flex-direction:column; align-items:flex-start; gap:7px}
}

/* multi-leg flights, layovers, policy tables */
.fl-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.fl-when{font-size:12.5px; font-weight:800; color:var(--verm)}
.fl-no{font-size:14px; color:var(--ink); font-weight:700; margin:0 0 7px}
.fl-no b{font-weight:800}
.fl-leg{margin-bottom:14px}
.fl-leg:last-child{margin-bottom:0}
.fl-leg .tz{display:block; font-size:11px; color:var(--faint); font-weight:600; margin-top:2px}
.fl-layover{display:flex; align-items:center; gap:7px; margin:0 0 12px;
  padding:8px 12px; border-left:3px solid var(--gold); background:var(--gold-soft);
  border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:12.5px; font-weight:700; color:#6B4400}
.fl-layover svg{width:13px;height:13px;color:var(--gold-deep); flex:none}
.dep-hotels.one{grid-template-columns:1fr}
.ht-star:empty{display:none}

.dep-policy{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media (min-width:760px){ .dep-policy{grid-template-columns:1fr 1fr} }
.pol{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s5)}
.pol h3{font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--s4)}
.pol ul{margin:0; padding-left:19px; list-style:disc}
.pol li{font-size:14.5px; line-height:1.6; color:var(--body); margin-bottom:7px}
.pol li::marker{color:var(--gold-deep)}
.pol-table{width:100%; border-collapse:collapse}
.pol-table td{padding:9px 0; border-bottom:1px solid var(--rule-soft); font-size:14.5px; color:var(--body)}
.pol-table tr:last-child td{border-bottom:0}
.pol-table td:last-child{text-align:right; font-weight:800; color:var(--verm); white-space:nowrap}

/* departure page — note, meal chips */
.dep-note{display:flex; align-items:flex-start; gap:9px; margin:0 0 var(--s5);
  padding:12px 16px; border-left:3px solid var(--gold); background:var(--gold-soft);
  border-radius:0 var(--r-md) var(--r-md) 0; font-size:14.5px; color:#5A3200; line-height:1.6}
.dep-note svg{width:15px;height:15px;color:var(--gold-deep); flex:none; margin-top:3px}
.dep-note strong{color:var(--verm); font-weight:800}
.dep-meals{display:flex; flex-wrap:wrap; gap:7px; margin:0 0 8px}
.dep-meals span{display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  font-weight:800; color:var(--ok); background:var(--ok-soft);
  padding:4px 10px; border-radius:var(--r-pill)}
.dep-meals svg{width:12px;height:12px}
.dep-rail{grid-template-columns:repeat(auto-fit,minmax(238px,1fr)) !important}

/* guest review block on departure pages */
.rv-top{display:grid; gap:var(--s5); grid-template-columns:1fr; align-items:center;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s5); margin-bottom:var(--s5)}
@media (min-width:640px){ .rv-top{grid-template-columns:180px 1fr} }
.rv-score{text-align:center}
.rv-stars{display:flex; justify-content:center; gap:2px; color:var(--ok)}
.rv-stars svg{width:20px;height:20px}
.rv-avg{font-family:var(--display); font-size:42px; font-weight:900; color:var(--ok);
  line-height:1; margin:6px 0 2px}
.rv-count{font-size:13px; color:var(--muted); margin:0}

.rv-blurb p{font-size:14.5px; color:var(--body); margin:0 0 12px; line-height:1.6}
.rv-bars{display:grid; gap:7px}
.rv-bar{display:flex; align-items:center; gap:11px}
.rv-bar .s{display:inline-flex; align-items:center; gap:3px; font-size:13px;
  font-weight:700; color:var(--body); width:32px; flex:none}
.rv-bar .s svg{width:12px;height:12px;color:var(--gold)}
.rv-bar .t{flex:1; height:8px; border-radius:99px; background:var(--sunk); overflow:hidden}
.rv-bar .t span{display:block; height:100%; background:var(--gold-deep); border-radius:99px}
.rv-bar .c{font-size:13px; font-weight:700; color:var(--muted); width:22px; text-align:right; flex:none}

.rv-list{display:grid; gap:var(--s4)}
.rv{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); padding:var(--s5)}
.rv-head{display:flex; align-items:center; gap:12px; margin-bottom:11px}
.rv-av{flex:none; width:40px; height:40px; border-radius:50%; background:var(--navy);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:900; font-size:17px}
.rv-who{min-width:0}
.rv-who .nm{display:block; font-size:15.5px; font-weight:800; color:var(--ink)}
.rv-who .dt{display:block; font-size:12.5px; color:var(--faint)}
.rv-rate{margin-left:auto; display:inline-flex; align-items:center; gap:5px; flex:none;
  font-size:14px; font-weight:800; color:var(--ok)}
.rv-rate svg{width:14px;height:14px}
.rv-meta{display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 10px;
  padding-bottom:10px; border-bottom:1px solid var(--rule-soft)}
.rv-meta span{display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--muted)}
.rv-meta b{color:var(--ink); font-weight:700}
.rv-meta svg{width:13px;height:13px;color:var(--gold-deep)}
.rv-q{font-size:15px; line-height:1.7; color:var(--body); margin:0}

/* "good to know" list on package pages */
.dep-know{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.dep-know li{display:flex; align-items:flex-start; gap:11px;
  background:var(--sunk); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:13px 16px; font-size:14.5px; line-height:1.62; color:var(--body)}
.dep-know svg{width:15px;height:15px;color:var(--gold-deep); flex:none; margin-top:3px}
.dep-know strong{color:var(--ink); font-weight:800}

/* was-price and saving on the departure price bar */
.dep-was{display:flex; align-items:center; gap:9px; margin-top:5px}
.dep-was s{font-size:14px; color:var(--faint)}
.dep-was b{font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#fff; background:var(--verm); padding:3px 9px; border-radius:var(--r-pill)}

/* per-person label beside the spotlight price */
.spot-price .pp{font-size:13px; font-weight:700; color:#B9C0DA; align-self:flex-end; margin-left:-6px}

/* flight widget staging page */
.fl-head{border-bottom:1px solid var(--rule); padding-bottom:var(--s5); margin-bottom:var(--s6)}
.fw-wrap{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--sh-1); min-height:170px}
.fw-note{display:flex; align-items:flex-start; gap:9px; margin:var(--s4) 0 0;
  font-size:13px; color:var(--muted); line-height:1.6}
.fw-note svg{width:15px;height:15px;color:var(--gold-deep); flex:none; margin-top:2px}

.fw-setup{background:var(--gold-soft); border:1px solid var(--gold);
  border-radius:var(--r-lg); padding:var(--s6) var(--s5)}
.fw-setup h3{display:flex; align-items:center; gap:9px; font-family:var(--display);
  font-size:19px; font-weight:900; color:#5A3200; margin:0 0 var(--s3)}
.fw-setup h3 svg{width:18px;height:18px;color:var(--gold-deep)}
.fw-setup p{font-size:15px; color:#5A3200; margin:0 0 var(--s3)}
.fw-setup ol{margin:0 0 var(--s3); padding-left:20px; list-style:decimal}
.fw-setup li{font-size:14.5px; color:#5A3200; line-height:1.65; margin-bottom:7px}
.fw-setup li::marker{color:var(--gold-deep); font-weight:800}
.fw-setup a{color:var(--verm); font-weight:800}
.fw-setup code{background:rgba(255,255,255,.7); padding:2px 7px; border-radius:4px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; color:var(--verm)}

.fw-cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5);
  background:var(--navy); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); margin-top:var(--s7)}
.fw-cta h3{font-family:var(--display); font-size:clamp(19px,2.4vw,24px); font-weight:900; color:#fff; margin:0 0 7px}
.fw-cta p{color:#B9C0DA; font-size:15px; margin:0; max-width:52ch}
.fw-cta-btns{display:flex; flex-wrap:wrap; gap:11px; margin-left:auto}
@media (max-width:640px){
  .fw-cta-btns{margin-left:0; width:100%}
  .fw-cta-btns .btn{width:100%}
}

/* hero left scrim — the headline sits over the left third, so darken that
   side horizontally as well as the existing top-to-bottom gradient. */
.hero-bg::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,rgba(13,21,51,.82) 0%,rgba(13,21,51,.62) 28%,
    rgba(13,21,51,.22) 55%,rgba(13,21,51,0) 78%)}
@media (max-width:820px){
  .hero-bg::before{background:linear-gradient(180deg,rgba(13,21,51,.70) 0%,rgba(13,21,51,.40) 60%,rgba(13,21,51,0) 100%)}
}

/* ============================================================
   branded 404
   ============================================================ */
.nf-head{border-bottom:1px solid var(--rule); padding-bottom:var(--s6); margin-bottom:var(--s6)}
.nf-code{font-family:var(--display); font-size:clamp(56px,10vw,96px); font-weight:900;
  line-height:.9; color:var(--gold); margin:0 0 var(--s3); letter-spacing:-.04em}
.nf-h2{font-family:var(--display); font-size:13px; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin:var(--s7) 0 var(--s4)}

.nf-grid{display:flex; flex-wrap:wrap; gap:9px}
.nf-chip{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--rule);
  border-radius:var(--r-pill); padding:9px 16px; transition:all .18s var(--ease)}
.nf-chip:hover{border-color:var(--gold-deep); color:var(--gold-deep); transform:translateY(-2px)}
.nf-chip svg{width:14px;height:14px;color:var(--gold-deep)}

.nf-links{display:grid; gap:10px; grid-template-columns:1fr}
@media (min-width:700px){ .nf-links{grid-template-columns:1fr 1fr} }
.nf-links a{display:flex; align-items:flex-start; gap:12px; padding:15px 18px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  transition:all .2s var(--ease)}
.nf-links a:hover{border-color:var(--gold); box-shadow:var(--sh-1); transform:translateY(-2px)}
.nf-links svg{width:16px;height:16px;color:var(--gold-deep); flex:none; margin-top:3px}
.nf-links b{display:block; font-size:15px; font-weight:800; color:var(--ink); margin-bottom:2px}
.nf-links span{font-size:13.5px; color:var(--muted); line-height:1.5}

.nf-help{margin-top:var(--s7); background:var(--sunk); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:var(--s6) var(--s5); text-align:center}
.nf-help p{font-size:15.5px; color:var(--body); margin:0 0 var(--s4)}
.nf-help b{color:var(--ink)}
.nf-help .hero-actions{justify-content:center}

/* ── pricing basis: land price vs flights included ─────────────────── */
.chip-inc{background:var(--ok-soft); border-color:#CBE3D8; color:var(--ok)}
.chip-inc svg{color:var(--ok)}
.chip-land{background:var(--navy-mist); border-color:#D6DAEA; color:var(--navy)}
.chip-land svg{color:var(--navy-lift)}

.pricing-explainer{
  max-width:760px; margin:var(--s5) auto 0; text-align:left;
  background:var(--porcelain); border:1px solid var(--rule);
  border-left:3px solid var(--gold); border-radius:12px;
  padding:var(--s5) var(--s5) calc(var(--s4) + 2px);
}
.pricing-explainer p{margin:0 0 12px; font-size:15px; line-height:1.65; color:var(--body)}
.pricing-explainer p:last-child{margin-bottom:0}
.pricing-explainer strong{color:var(--ink); font-weight:750}
.pricing-explainer .pe-foot{
  font-size:13.5px; color:var(--muted); padding-top:12px;
  border-top:1px solid var(--rule-soft);
}
@media (max-width:640px){
  .pricing-explainer{padding:var(--s4); border-radius:10px}
  .pricing-explainer p{font-size:14.5px}
}

/* ── ABOUT PAGE ────────────────────────────────────────────────────── */
.ab-head{text-align:center;max-width:720px;margin-inline:auto}
.ab-stats{margin:0}

/* four principles */
.ab-vals{
  display:grid; gap:var(--s4); margin-top:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.ab-vals > *{min-width:0}
.ab-val{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:var(--s5); transition:border-color .2s ease, transform .2s ease;
}
.ab-val:hover{border-color:var(--gold); transform:translateY(-2px)}
.ab-val-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:11px;
  background:var(--gold-soft); color:var(--gold-deep); margin-bottom:14px;
}
.ab-val h3{font-size:17px; line-height:1.35; color:var(--ink); margin:0 0 8px; font-weight:750}
.ab-val p{font-size:14.5px; line-height:1.65; color:var(--body); margin:0}
.ab-val strong{color:var(--ink); font-weight:700}

/* founder note */
.ab-founder{display:grid; gap:var(--s5); grid-template-columns:minmax(0,260px) minmax(0,1fr); align-items:center}
.ab-founder-pic img{width:100%; height:auto; border-radius:14px; display:block; object-fit:cover}
.ab-founder blockquote{
  margin:10px 0 14px; padding-left:18px; border-left:3px solid var(--gold);
  font-size:17px; line-height:1.7; color:var(--ink); font-style:italic;
}
.ab-founder-by{font-size:14px; color:var(--muted); margin:0}
.ab-founder-by strong{display:block; color:var(--ink); font-style:normal; font-size:15px}
@media (max-width:720px){ .ab-founder{grid-template-columns:1fr} }

/* three steps */
.ab-steps{display:grid; gap:var(--s4); margin-top:var(--s6); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ab-steps > *{min-width:0}
.ab-step{display:flex; gap:14px; align-items:flex-start}
.ab-step-n{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-weight:800; font-size:15px;
}
.ab-step h3{font-size:16px; color:var(--ink); margin:4px 0 6px; font-weight:750}
.ab-step p{font-size:14.5px; line-height:1.6; color:var(--body); margin:0}

/* who we plan for */
.ab-who{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:var(--s5)}
.ab-who-item{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; text-decoration:none;
  background:var(--surface); border:1px solid var(--rule);
  font-size:14.5px; font-weight:650; color:var(--ink);
  transition:border-color .2s ease, background .2s ease;
}
.ab-who-item svg{color:var(--gold-deep)}
.ab-who-item:hover{border-color:var(--gold); background:var(--gold-soft)}

/* google proof */
.ab-proof{
  display:grid; gap:var(--s5); grid-template-columns:minmax(0,200px) minmax(0,1fr);
  align-items:center; background:var(--porcelain);
  border:1px solid var(--rule); border-radius:14px; padding:var(--s5);
}
.ab-proof-score{text-align:center; border-right:1px solid var(--rule); padding-right:var(--s4)}
.ab-proof-txt p{font-size:15px; line-height:1.65; color:var(--body); margin:0 0 14px}
@media (max-width:720px){
  .ab-proof{grid-template-columns:1fr}
  .ab-proof-score{border-right:0; border-bottom:1px solid var(--rule); padding:0 0 var(--s4)}
}

/* contact cards */
.ab-contact{display:grid; gap:var(--s4); margin-top:var(--s5); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ab-contact > *{min-width:0}
.ab-cc{background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:var(--s5)}
.ab-cc-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--navy-mist); color:var(--navy); margin-bottom:12px;
}
.ab-cc h3{font-size:15px; color:var(--ink); margin:0 0 8px; font-weight:750}
.ab-cc p{font-size:14.5px; line-height:1.6; color:var(--body); margin:0 0 5px}
.ab-cc a{color:var(--ink); font-weight:650; text-decoration:none; border-bottom:1px solid var(--rule)}
.ab-cc a:hover{border-color:var(--gold)}
.ab-cc .small{color:var(--faint); font-size:12.5px}
.ab-legal{text-align:center; font-size:13px; color:var(--muted); margin:var(--s5) 0 0}

/* closing cta */
.ab-cta{
  text-align:center; background:var(--navy); color:#fff;
  border-radius:16px; padding:var(--s6) var(--s5);
}
.ab-cta h2{color:#fff; margin:0 0 10px}
.ab-cta p{color:#C9CEE4; font-size:15.5px; line-height:1.65; margin:0 0 var(--s5); max-width:520px; margin-inline:auto}
.ab-cta .hero-actions{justify-content:center}

@media (max-width:640px){
  .ab-val,.ab-cc{padding:var(--s4)}
  .ab-cta{padding:var(--s5) var(--s4)}
}

/* team */
.ab-team{display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:center; margin-top:var(--s6)}
.ab-tm{
  display:grid; gap:var(--s5); grid-template-columns:minmax(0,200px) minmax(0,1fr);
  align-items:center; background:var(--surface); border:1px solid var(--rule);
  border-radius:16px; padding:var(--s5); max-width:760px; width:100%;
}
.ab-tm-pic img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:14px; display:block}
.ab-tm h3{font-size:20px; color:var(--ink); margin:0 0 3px; font-weight:800; letter-spacing:-.01em}
.ab-tm-role{font-size:14px; font-weight:700; color:var(--gold-deep); margin:0 0 12px; text-transform:uppercase; letter-spacing:.04em}
.ab-tm-bio{font-size:14.5px; line-height:1.7; color:var(--body); margin:0 0 14px}
.ab-tm-tags{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px}
.ab-tm-prev{font-size:13px; color:var(--muted); margin:0; padding-top:11px; border-top:1px solid var(--rule-soft)}
.ab-tm-prev span{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--faint); margin-bottom:3px; font-weight:700}
@media (max-width:640px){
  .ab-tm{grid-template-columns:1fr; padding:var(--s4); text-align:center}
  .ab-tm-pic{max-width:180px; margin-inline:auto}
  .ab-tm-tags{justify-content:center}
}

/* founder experience */
.ab-founder-lede{font-size:16.5px; line-height:1.7; color:var(--ink); margin:8px 0 18px; font-weight:600}
.ab-founder-list{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ab-founder-list li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; line-height:1.6; color:var(--body)}
.ab-founder-list li svg{flex:none; margin-top:2px; color:var(--gold-deep)}
.ab-founder-by{margin-top:18px}

/* ── About: colour + motion ─────────────────────────────────────────── */

/* equal photo sizing for founder and team */
.ab-pic{width:100%; max-width:220px}
.ab-pic img{width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:14px; display:block}
.ab-founder{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.ab-tm{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
@media (max-width:720px){
  .ab-founder{grid-template-columns:1fr}
  .ab-founder .ab-pic{margin-inline:auto}
}

/* tone palette, shared by the principle cards and the promises */
[data-tone="gold"]{--tone:var(--gold-deep); --tone-soft:var(--gold-soft); --tone-line:#F3D89B}
[data-tone="navy"]{--tone:var(--navy-lift); --tone-soft:var(--navy-mist); --tone-line:#C6CDE6}
[data-tone="verm"]{--tone:var(--verm);      --tone-soft:var(--verm-soft); --tone-line:#F2C4B8}
[data-tone="ok"]  {--tone:var(--ok);        --tone-soft:var(--ok-soft);   --tone-line:#BEDCCE}

/* principle cards pick up their tone */
.ab-val[data-tone] .ab-val-ic{background:var(--tone-soft); color:var(--tone)}
.ab-val[data-tone]{position:relative; overflow:hidden}
.ab-val[data-tone]::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--tone); transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.ab-val[data-tone]:hover{border-color:var(--tone-line); transform:translateY(-3px);
  box-shadow:0 12px 28px -18px rgba(20,32,74,.45)}
.ab-val[data-tone]:hover::before{transform:scaleX(1)}
.ab-val[data-tone] .ab-val-ic{transition:transform .3s ease}
.ab-val[data-tone]:hover .ab-val-ic{transform:scale(1.08) rotate(-4deg)}

/* stats: give the numbers some life */
.ab-stats .stat-n{font-variant-numeric:tabular-nums}

/* ── accountability ─────────────────────────────────────────────────── */
.ab-acc-band{background:
  radial-gradient(900px 380px at 12% 0%, #FFF4DC 0%, transparent 62%),
  radial-gradient(760px 340px at 92% 100%, #EDF0FA 0%, transparent 60%),
  var(--porcelain);
}
.ab-acc{
  display:grid; gap:var(--s4); margin-top:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.ab-acc > *{min-width:0}
.ab-ac{
  position:relative; background:var(--surface); border:1px solid var(--rule);
  border-radius:16px; padding:var(--s5) var(--s5) calc(var(--s4) + 4px);
  display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ab-ac::after{
  content:""; position:absolute; left:0; top:22px; width:3px; height:34px;
  background:var(--tone); border-radius:0 3px 3px 0;
  transition:height .3s cubic-bezier(.2,.7,.3,1);
}
.ab-ac:hover{border-color:var(--tone-line); transform:translateY(-4px);
  box-shadow:0 16px 34px -20px rgba(20,32,74,.5)}
.ab-ac:hover::after{height:calc(100% - 44px)}
.ab-ac-n{
  font-size:12px; font-weight:800; letter-spacing:.12em;
  color:var(--tone); background:var(--tone-soft);
  padding:5px 10px; border-radius:999px; align-self:flex-start; margin-bottom:14px;
}
.ab-ac h3{font-size:17px; line-height:1.35; color:var(--ink); margin:0 0 9px; font-weight:750}
.ab-ac p{font-size:14.5px; line-height:1.65; color:var(--body); margin:0 0 16px; flex:1}
.ab-ac-go{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:13.5px; font-weight:700; color:var(--tone); text-decoration:none;
  padding-top:12px; border-top:1px solid var(--rule-soft); width:100%;
}
.ab-ac-go svg{transition:transform .25s ease}
.ab-ac:hover .ab-ac-go svg{transform:translateX(4px)}

/* team + founder cards lift too */
.ab-tm{transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease}
.ab-tm:hover{border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 14px 30px -20px rgba(20,32,74,.45)}
.ab-tm-pic img,.ab-founder-pic img{transition:transform .4s ease}
.ab-tm:hover .ab-tm-pic img{transform:scale(1.03)}
.ab-tm-pic,.ab-founder-pic{overflow:hidden; border-radius:14px}

/* who-we-plan-for chips get a lift */
.ab-who-item{transition:border-color .2s ease, background .2s ease, transform .2s ease}
.ab-who-item:hover{transform:translateY(-2px)}

@media (max-width:640px){ .ab-ac{padding:var(--s4)} }

/* ── stat counters: run-up + landing pop ───────────────────────────── */
.stat{position:relative; overflow:hidden}

/* the number itself */
.stat-n{display:block; transition:transform .38s cubic-bezier(.2,1.5,.4,1)}
.stat-n.is-running span{color:var(--gold)}

/* landing pop - a quick scale overshoot, then settle */
@keyframes tripidoPop{
  0%  {transform:scale(1)}
  38% {transform:scale(1.14)}
  70% {transform:scale(.98)}
  100%{transform:scale(1)}
}
.stat-n.is-done{animation:tripidoPop .62s cubic-bezier(.2,.9,.3,1) both}

/* a gold flare behind the number as it lands */
@keyframes tripidoFlare{
  0%  {opacity:0; transform:translate(-50%,-50%) scale(.4)}
  40% {opacity:.55}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.9)}
}
.stat-n.is-done::after{
  content:""; position:absolute; left:50%; top:38%;
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,179,2,.55) 0%, rgba(255,179,2,0) 68%);
  transform:translate(-50%,-50%); pointer-events:none;
  animation:tripidoFlare .85s ease-out both;
}

/* a gold rule sweeps under the label once the number lands */
.stat-l{position:relative}
.stat-n.is-done ~ .stat-l::after{
  content:""; position:absolute; left:50%; bottom:-9px;
  height:2px; width:0; background:var(--gold); border-radius:2px;
  transform:translateX(-50%);
  animation:tripidoSweep .5s .18s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes tripidoSweep{ to{ width:34px } }

/* the whole tile warms very slightly as its number lands */
@keyframes tripidoWarm{
  0%  {background:var(--navy)}
  45% {background:#1B2A5C}
  100%{background:var(--navy)}
}
.stat:has(.stat-n.is-done){animation:tripidoWarm 1s ease-out both}

@media (prefers-reduced-motion: reduce){
  .stat-n.is-done,.stat-n.is-done::after,.stat:has(.stat-n.is-done),
  .stat-n.is-done ~ .stat-l::after{animation:none}
  .stat-n.is-done::after{display:none}
}

/* ── About: mobile corrections ──────────────────────────────────────
   The tone/sizing rules added later in this file set .ab-tm and
   .ab-founder to two columns with no media query, which overrode the
   earlier mobile stacking rules purely by source order. These come
   last so the small-screen layout wins.                              */
@media (max-width:720px){
  .ab-founder,
  .ab-tm{
    grid-template-columns:1fr;
    gap:var(--s4);
    text-align:center;
    padding:var(--s5) var(--s4);
  }
  .ab-founder .ab-pic,
  .ab-tm .ab-pic{max-width:168px; margin-inline:auto}

  /* lists and chips re-centre with the text */
  .ab-founder-list li{text-align:left}
  .ab-tm-tags{justify-content:center}
  .ab-founder-by{margin-top:16px}

  /* the founder credential list reads better slightly tighter */
  .ab-founder-lede{font-size:15.5px; margin-bottom:16px}
  .ab-founder-list{gap:10px}
  .ab-founder-list li{font-size:14px}
}

/* accountability + principle cards: a touch more breathing room */
@media (max-width:640px){
  .ab-ac,.ab-val{padding:var(--s5) var(--s4)}
  .ab-ac h3,.ab-val h3{font-size:16.5px}
  .ab-ac-go{font-size:14px; padding-top:14px}
  .ab-who-item{font-size:14px; padding:9px 14px}
  .ab-cta{padding:var(--s5) var(--s4)}
  .ab-cta .hero-actions{flex-direction:column; align-items:stretch}
  .ab-cta .hero-actions .btn{justify-content:center}
}

/* stat band: bigger numbers on a phone so the count-up actually lands */
@media (max-width:640px){
  .stat{padding:var(--s5) var(--s3)}
  .stat-n{font-size:31px}
  .stat-l{font-size:11px; letter-spacing:.06em; margin-top:9px}
  .stat-n.is-done::after{width:88px; height:88px}
}
@media (max-width:360px){
  .stat-n{font-size:27px}
  .stat-l{font-size:10.5px}
}

/* hover lifts are meaningless on touch and can leave cards stuck raised */
@media (hover:none){
  .ab-val[data-tone]:hover,
  .ab-ac:hover,
  .ab-tm:hover{transform:none; box-shadow:none}
  .ab-val[data-tone]:hover::before{transform:scaleX(1)}
  .ab-tm:hover .ab-tm-pic img{transform:none}
}

/* ── pricing explainer: two parts, one toggle ───────────────────────── */
.pe{max-width:720px; margin:var(--s5) auto 0}

.pe-eq{
  display:grid; align-items:stretch; gap:10px;
  grid-template-columns:1fr auto 1fr;
}
.pe-eq > *{min-width:0}

.pe-part{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:13px; padding:14px 16px;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.pe-part[data-kind="land"]{--pe:var(--navy-lift); --pe-soft:var(--navy-mist); --pe-line:#C6CDE6}
.pe-part[data-kind="air"] {--pe:var(--gold-deep); --pe-soft:var(--gold-soft); --pe-line:#F3D89B}
.pe-part:hover{border-color:var(--pe-line); transform:translateY(-2px);
  box-shadow:0 10px 24px -18px rgba(20,32,74,.5)}

.pe-tag{
  align-self:flex-start; font-size:10.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--pe); background:var(--pe-soft);
  padding:3px 8px; border-radius:999px; margin-bottom:3px;
}
.pe-h{font-size:15.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em}
.pe-d{font-size:12.5px; line-height:1.45; color:var(--muted)}

.pe-op{
  align-self:center; font-size:20px; font-weight:800;
  color:var(--faint); font-family:var(--mono); user-select:none;
}

/* the toggle */
.pe-why{margin-top:10px}
.pe-why summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:700; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule);
  border-radius:11px; padding:11px 14px;
  transition:border-color .2s ease, background .2s ease;
}
.pe-why summary::-webkit-details-marker{display:none}
.pe-why summary span{display:inline-flex; align-items:center; gap:8px}
.pe-why summary span svg{color:var(--gold-deep); flex:none}
.pe-why summary > svg{color:var(--faint); transition:transform .25s ease; flex:none}
.pe-why[open] summary{border-color:var(--gold); background:var(--gold-soft)}
.pe-why[open] summary > svg{transform:rotate(180deg)}
.pe-why summary:hover{border-color:var(--gold)}
.pe-why summary:focus-visible{outline:2px solid var(--gold-deep); outline-offset:2px}

.pe-why-in{
  padding:14px 15px 2px; text-align:left;
  animation:peOpen .28s cubic-bezier(.2,.8,.3,1) both;
}
.pe-why-in p{font-size:14px; line-height:1.65; color:var(--body); margin:0 0 9px}
.pe-why-in p:last-child{margin-bottom:0; color:var(--muted); font-size:13.5px}
@keyframes peOpen{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none} }

@media (max-width:560px){
  .pe-eq{grid-template-columns:1fr; gap:8px}
  .pe-op{justify-self:center; font-size:17px; line-height:1}
  .pe-part{padding:12px 14px}
  .pe-why summary{font-size:13px; padding:10px 12px}
}
@media (prefers-reduced-motion: reduce){
  .pe-why-in{animation:none}
  .pe-part:hover{transform:none}
}

/* ── instagram gallery ──────────────────────────────────────────────── */
.ig-band{background:
  radial-gradient(760px 340px at 88% 0%, #FDEFF4 0%, transparent 60%),
  radial-gradient(700px 320px at 6% 100%, #FFF4DC 0%, transparent 58%),
  var(--surface);
}
.ig-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5);
}
.ig-head > div{min-width:0}
.ig-head .lede{margin:0}
.ig-head h2{margin:0 0 6px}

.ig-follow{
  display:inline-flex; align-items:center; gap:11px; flex:none;
  padding:11px 17px; border-radius:999px; text-decoration:none;
  border:1px solid var(--rule); background:var(--surface);
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.ig-follow svg{
  flex:none;
  background:linear-gradient(45deg,#F09433 0%,#E6683C 25%,#DC2743 50%,#CC2366 75%,#BC1888 100%);
  color:#fff; border-radius:9px; padding:4px; width:30px; height:30px;
}
.ig-follow span{display:flex; flex-direction:column; line-height:1.25}
.ig-follow b{font-size:14.5px; color:var(--ink); font-weight:750}
.ig-follow i{font-size:12.5px; color:var(--muted); font-style:normal}
.ig-follow:hover{border-color:#DC2743; transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(220,39,67,.6)}

.ig-grid{
  display:grid; gap:8px;
  grid-template-columns:repeat(6,1fr);
}
.ig-grid > *{min-width:0}
.ig-cell{
  position:relative; display:block; overflow:hidden;
  border-radius:12px; aspect-ratio:1; background:var(--sunk);
  transform:translateZ(0);
}
.ig-cell img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.ig-veil{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, rgba(220,39,67,.72), rgba(188,24,136,.72));
  color:#fff; opacity:0; transition:opacity .28s ease;
}
.ig-veil svg{transform:scale(.8); transition:transform .28s cubic-bezier(.2,1.4,.4,1)}
.ig-cell:hover img{transform:scale(1.07)}
.ig-cell:hover .ig-veil{opacity:1}
.ig-cell:hover .ig-veil svg{transform:scale(1)}
.ig-cell:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px}

.ig-reel{
  position:absolute; top:7px; right:7px;
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; letter-spacing:.03em;
  color:#fff; background:rgba(20,32,74,.62); backdrop-filter:blur(3px);
  padding:3px 7px; border-radius:999px; pointer-events:none;
}
.ig-reel svg{width:11px; height:11px}

.ig-note{text-align:center; margin:var(--s5) 0 0}
.ig-note a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
}
.ig-note a:hover{border-color:#DC2743; color:#DC2743}
.ig-note a svg{transition:transform .22s ease}
.ig-note a:hover svg{transform:translateX(4px)}

@media (max-width:900px){ .ig-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){
  .ig-grid{grid-template-columns:repeat(3,1fr); gap:6px}
  .ig-cell{border-radius:10px}
  .ig-head{flex-direction:column; align-items:flex-start; gap:var(--s3)}
  .ig-follow{align-self:stretch; justify-content:center}
}
/* on touch there is no hover, so show a permanent soft corner mark instead */
@media (hover:none){
  .ig-cell:hover img{transform:none}
  .ig-veil{display:none}
}
@media (prefers-reduced-motion: reduce){
  .ig-cell img,.ig-veil svg,.ig-note a svg{transition:none}
  .ig-follow:hover{transform:none}
}