/* ═══════════ THE JOURNEY BUILDER ═══════════
   Everything is scoped to #jb so it cannot reach the rest of the site.
   Colours and type come from tokens.css; nothing is redeclared here. */
#jb{--r:var(--r-soft);--pill:var(--r-pill);font-family:var(--sans);color:var(--ink);
  font-size:15px;line-height:1.65}
#jb *,#jb *::before,#jb *::after{box-sizing:border-box}
#jb img{max-width:100%;display:block}
#jb .jb-wrap{max-width:720px;margin:0 auto;padding:0 22px 90px}
#jb .jb-err{text-align:center;color:var(--ink-70);padding:60px 0}
#jb .jb-err a{color:var(--gold-ink)}
/* ── masthead ─────────────────────────────── */
#jb .mast{text-align:center;padding:34px 0 0}
#jb .mast-k{display:none}
#jb .mast-lotus{width:40px;height:40px;margin:0 auto 20px;opacity:.9;
  animation:jbTurn 60s linear infinite}
@keyframes jbTurn{ to{ transform:rotate(360deg) } }
#jb .mast h1{font-family:var(--serif);font-weight:300;font-size:clamp(32px,7vw,46px);
  line-height:1.08;margin:16px 0 0;letter-spacing:-.01em}
#jb .mast h1 em{font-style:italic;color:var(--gold-ink)}
#jb .mast p{color:var(--ink-40);max-width:34ch;margin:14px auto 0;font-size:14px}
/* ── progress ─────────────────────────────── */
#jb .prog{display:flex;gap:6px;justify-content:center;margin:26px 0 34px;align-items:center}
#jb .prog i{width:6px;height:6px;border-radius:50%;background:var(--ink-15);transition:.3s}
#jb .prog i.done{background:rgba(201,168,108,.45)}
#jb .prog i.on{background:var(--gold);width:20px;border-radius:var(--pill)}
/* ── question ─────────────────────────────── */
#jb .q{animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}
}
/* The dots already count. The numeral said it twice — gone, but its
   space stays so the question doesn't jump up to meet the dots. */
#jb .q-n{display:block;height:21px;margin:0;font-size:0;color:transparent}
#jb .q-h{font-family:var(--serif);font-weight:300;font-size:clamp(25px,6vw,34px);line-height:1.2;
  margin:0 0 6px;text-align:center}
#jb .q-s{text-align:center;color:var(--ink-40);font-size:13px;margin:0 auto 28px;max-width:40ch}
#jb .opts{display:grid;gap:10px}
#jb .opts.two{grid-template-columns:1fr 1fr}
#jb .opt{position:relative;background:var(--white);border:1px solid var(--ink-06);
  border-radius:var(--image-card-radius,8px);padding:18px 46px 18px 20px;cursor:pointer;text-align:left;
  font:inherit;color:inherit;width:100%;transition:border-color .22s,box-shadow .22s,transform .14s,background .22s}
/* the tick sits in the corner, empty until chosen — on a phone in
   daylight this is the only state that reads at a glance */
#jb .opt::after{content:'\2713';position:absolute;top:15px;right:15px;width:20px;height:20px;
  border-radius:50%;border:1px solid var(--ink-15);display:grid;place-items:center;font-size:10px;
  color:transparent;transition:.22s;line-height:1}
#jb .opt:hover{border-color:var(--ink-15);box-shadow:0 2px 14px rgba(26,22,18,.05)}
#jb .opt:hover::after{border-color:var(--gold)}
#jb .opt:active{transform:scale(.99)}
#jb .opt.sel{border-color:rgba(201,168,108,.5);background:rgba(201,168,108,.11)}
#jb .opt.sel::after{background:var(--gold);border-color:var(--gold);color:#2A2114}
/* The display serif is drawn for headlines, not for 20px labels on
   black — its hairlines disappear. Options use the sans; Cormorant
   keeps the questions. */
#jb .opt b{display:block;font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.35;
  letter-spacing:-.005em}
#jb .opt span{display:block;color:var(--gold-ink);font-size:12px;line-height:1.55;margin-top:4px}

/* Two-up options carry a word, not a sentence. The qualifier rides on
   the same line so the boxes stay short and the grid stays even. */
#jb .opts.two .opt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  min-height:74px;align-content:center;padding:16px 44px 16px 20px}
#jb .opts.two .opt b{font-size:15px}
#jb .opts.two .opt span{display:inline;margin-top:0;font-size:12px;letter-spacing:.04em}
/* Where a two-up option carries a real description rather than a
   qualifier, it needs its own line and room to sit under the label. */
#jb .opts.two .opt.has-desc{display:block;min-height:0;padding:15px 44px 15px 20px}
#jb .opts.two .opt span.desc{display:block;margin-top:4px;font-size:11px;line-height:1.45;
  letter-spacing:0}
@media(max-width:520px){
  #jb .opt{padding:16px 42px 16px 18px}
  #jb .opt b{font-size:14.5px}
  #jb .opts.two .opt{min-height:66px;padding:14px 40px 14px 18px}
  #jb .opts.two .opt b{font-size:14px}
}
/* ── moving between questions ─────────────
   A hairline, then Back sitting quiet on the left and Next carrying
   the weight on the right. The count between them means the dots
   above don't have to be counted. */
#jb .nav-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:30px;padding-top:20px;border-top:1px solid var(--ink-06)}
#jb .nav-back{background:none;border:0;padding:6px 2px;font:inherit;font-size:13px;
  color:var(--ink-40);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
#jb .nav-back:hover{color:var(--gold-ink)}
#jb .nav-back[hidden]{visibility:hidden;display:inline-flex}
#jb .nav-count{font-family:var(--serif);font-size:14px;color:var(--ink-40);margin:0;letter-spacing:.04em;
  white-space:nowrap}
#jb .nav-count i{font-style:italic;color:var(--ink-15);margin:0 1px}
#jb .nav-next{background:var(--gold);color:#2A2114;border:0;border-radius:var(--pill);
  padding:13px 26px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:background .2s,opacity .2s,transform .18s}
#jb .nav-next:hover:not(:disabled){background:var(--gold-light);transform:translateX(2px)}
#jb .nav-next:disabled{background:none;color:var(--ink-15);box-shadow:inset 0 0 0 1px var(--ink-06);
  cursor:not-allowed}
#jb .nav-ar{transition:transform .22s;display:inline-block}
#jb .nav-next:hover:not(:disabled) .nav-ar{transform:translateX(3px)}
#jb .nav-back:hover .nav-ar{transform:translateX(-3px)}
@media(max-width:420px){
  #jb .nav-next{padding:12px 20px;font-size:12.5px}
  #jb .nav-count{font-size:13px}
}
#jb .pick-n{text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-40);margin:-16px 0 22px}
#jb.asking .pick-n{color:rgba(250,248,244,.35)}
#jb .opt.capped{opacity:.4;pointer-events:none}
#jb .skip{display:block;margin:20px auto 0;background:none;border:0;color:var(--ink-40);
  font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* ── building ─────────────────────────────── */
#jb .build{text-align:center;padding:80px 0}
#jb .build-d{display:inline-flex;gap:7px;margin-bottom:22px}
#jb .build-d i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.25s infinite}
#jb .build-d i:nth-child(2){animation-delay:.16s}
#jb .build-d i:nth-child(3){animation-delay:.32s}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}
50%{opacity:1;transform:scale(1)}
}
#jb .build p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-70);margin:0}
/* ── the plan ─────────────────────────────── */
/* ── moving between questions ─────────────
   A hairline, then Back sitting quiet on the left and Next carrying
   the weight on the right. The count between them means the dots
   above don't have to be counted. */
#jb .nav-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:30px;padding-top:20px;border-top:1px solid var(--ink-06)}
#jb .nav-back{background:none;border:0;padding:6px 2px;font:inherit;font-size:13px;
  color:var(--ink-40);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s}
#jb .nav-back:hover{color:var(--gold-ink)}
#jb .nav-back[hidden]{visibility:hidden;display:inline-flex}
#jb .nav-count{font-family:var(--serif);font-size:14px;color:var(--ink-40);margin:0;letter-spacing:.04em;
  white-space:nowrap}
#jb .nav-count i{font-style:italic;color:var(--ink-15);margin:0 1px}
#jb .nav-next{background:var(--gold);color:#2A2114;border:0;border-radius:var(--pill);
  padding:13px 26px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:background .2s,opacity .2s,transform .18s}
#jb .nav-next:hover:not(:disabled){background:var(--gold-light);transform:translateX(2px)}
#jb .nav-next:disabled{background:none;color:var(--ink-15);box-shadow:inset 0 0 0 1px var(--ink-06);
  cursor:not-allowed}
#jb .nav-ar{transition:transform .22s;display:inline-block}
#jb .nav-next:hover:not(:disabled) .nav-ar{transform:translateX(3px)}
#jb .nav-back:hover .nav-ar{transform:translateX(-3px)}
@media(max-width:420px){
  #jb .nav-next{padding:12px 20px;font-size:12.5px}
  #jb .nav-count{font-size:13px}
}
#jb .pick-n{text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-40);margin:-16px 0 22px}
#jb.asking .pick-n{color:rgba(250,248,244,.35)}
#jb .opt.capped{opacity:.4;pointer-events:none}
#jb .skip{display:block;margin:20px auto 0;background:none;border:0;color:var(--ink-40);
  font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* ── building ─────────────────────────────── */
#jb .build{text-align:center;padding:80px 0}
#jb .build-d{display:inline-flex;gap:7px;margin-bottom:22px}
#jb .build-d i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.25s infinite}
#jb .build-d i:nth-child(2){animation-delay:.16s}
#jb .build-d i:nth-child(3){animation-delay:.32s}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}
50%{opacity:1;transform:scale(1)}
}
#jb .build p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-70);margin:0}
#jb .plan-top .q-n{margin-bottom:8px}









#jb .note{max-width:720px;margin:0 auto;padding:0 22px 40px}
#jb .note div{background:var(--gold-soft);border-left:2px solid var(--gold);padding:14px 16px;
  font-size:12.5px;color:var(--ink-70);border-radius:0 var(--r) var(--r) 0}
/* ── choices made so far ──────────────────── */
#jb .chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 22px}
#jb .chip{background:none;border:1px solid var(--ink-15);border-radius:var(--pill);
  padding:5px 13px;font:inherit;font-size:11.5px;color:var(--ink-40);cursor:pointer;transition:.18s}
#jb .chip:hover{border-color:var(--gold);color:var(--gold-ink)}
#jb .btn.wide{display:block;width:100%;margin:18px 0 0;text-align:center}
#jb .route.on{border-color:var(--gold);background:var(--gold-soft)}
@media(max-width:420px){
  #jb .route{padding:11px 8px}
}
/* ── the carousel ─────────────────────────── */
#jb .rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:22px -22px 0;
  padding:0 22px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#jb .rail::-webkit-scrollbar{display:none}
#jb .dots{display:flex;gap:5px;justify-content:center;margin-top:14px}
#jb .dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-15);transition:.25s}
#jb .dots i.on{background:var(--gold);width:16px;border-radius:var(--pill)}
/* ── experiences ──────────────────────────── */
#jb .xps{margin-top:34px}
#jb .xp-h{font-family:var(--serif);font-size:20px;font-style:italic;margin:0 0 14px;text-align:center;color:var(--ink-70)}
#jb .xp-rail{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -22px;
  padding:0 22px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#jb .xp-rail::-webkit-scrollbar{display:none}
#jb .xp-rail .xp-box{flex:0 0 clamp(150px,44vw,180px);scroll-snap-align:center}
#jb .xp-box{background:var(--white);border:1px solid var(--ink-06);border-radius:var(--r);padding:12px 13px}
#jb .xp-box b{display:block;font-weight:500;font-size:13px;line-height:1.35}
#jb .xp-box span{display:block;color:var(--ink-40);font-size:11px;margin-top:3px}
#jb .xp-box i{display:block;font-style:normal;color:var(--gold-ink);font-size:11.5px;margin-top:6px}
#jb .free{margin-top:16px;text-align:left}
#jb .free label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40);margin-bottom:7px}
#jb .free input{width:100%;background:var(--white);border:1px solid var(--ink-15);border-radius:var(--r);
  padding:13px 14px;font:inherit;font-size:14.5px;color:var(--ink)}
#jb .free input:focus{outline:none;border-color:var(--gold)}
#jb .free-hit{font-size:12.5px;color:var(--gold-ink);margin:8px 0 0;min-height:18px}
#jb .free-hit b{font-weight:500}
#jb .xp-box{display:flex;gap:0;flex-direction:column;overflow:hidden;padding:0}
#jb .xp-img{aspect-ratio:3/2;background:var(--paper);overflow:hidden}
#jb .xp-img img{width:100%;height:100%;object-fit:cover}
#jb .xp-txt{padding:11px 12px 13px}
#jb .arr-alt{font-size:11.5px;color:var(--ink-40);margin:10px 0 0;line-height:1.5}
#jb .inline-undo{background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#jb .unmatched{background:var(--gold-soft);border-left:2px solid var(--gold);padding:12px 14px;margin-top:20px;
  font-size:12.5px;color:var(--ink-70);border-radius:0 var(--r) var(--r) 0}
#jb .opt span em{font-style:normal;color:var(--gold-ink);display:block;margin-top:4px;font-size:12px}
#jb .xp-s{text-align:center;color:var(--ink-40);font-size:12px;margin:-8px 0 14px}
#jb .xp-box{display:flex;flex-direction:column;overflow:hidden;padding:0;text-align:left;font:inherit;
  color:inherit;cursor:pointer;background:var(--white);border:1px solid var(--ink-06);
  border-radius:var(--r);opacity:.5;transition:opacity .2s,border-color .2s}
#jb .xp-box.on{opacity:1;border-color:var(--gold)}
#jb .xp-img{position:relative}
#jb .xp-tick-unused{position:absolute;top:7px;right:7px;width:21px;height:21px;border-radius:50%;
  background:rgba(10,8,5,.45);color:transparent;display:grid;place-items:center;font-size:11px;
  backdrop-filter:blur(4px);transition:.2s}
#jb .xp-box.on .xp-tick{background:var(--gold);color:#2A2114}
#jb .swap{margin-top:10px;border-top:1px solid var(--ink-06);padding-top:11px}
#jb .swap-h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40);margin:0 0 8px}
#jb .swap-o{display:flex;align-items:center;gap:10px;width:100%;background:none;border:1px solid var(--ink-06);
  border-radius:var(--r);padding:6px;margin-bottom:6px;font:inherit;color:inherit;cursor:pointer;
  text-align:left;transition:.18s}
#jb .swap-o:hover{border-color:var(--gold)}
#jb .swap-o img{width:42px;height:34px;object-fit:cover;border-radius:2px;flex:0 0 auto}
#jb .swap-o b{display:block;font-weight:500;font-size:13px}
#jb .swap-o i{display:block;font-style:normal;color:var(--ink-40);font-size:11px}
@media(min-width:760px){
  #jb .card{flex:0 0 300px}
#jb .opts.two{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){#jb *{animation:none!important;transition:none!important}
}
@media(prefers-reduced-motion:reduce){ #jb .mast-lotus{animation:none} }

/* ═══════════ THE ASKING ═══════════
   The six questions happen in the dark, the way the top half of
   /customize/ does. The plan itself arrives back in daylight — the
   switch marks the moment the work is done. Only the asking is
   restyled here; everything above stays as it was. */
#jb.asking{background:var(--night);color:var(--cream);min-height:100svh;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}
#jb.asking .jb-wrap{max-width:760px;padding-bottom:70px}

#jb.asking .mast{padding-top:44px}
#jb.asking .mast h1{color:var(--cream)}
#jb.asking .mast h1 em{color:var(--gold-light)}
#jb.asking .mast-lotus{opacity:.85}

#jb.asking .prog i{background:rgba(250,248,244,.18)}
#jb.asking .prog i.done{background:rgba(201,168,108,.5)}
#jb.asking .prog i.on{background:var(--gold)}

#jb.asking .q-h{color:var(--cream)}
#jb.asking .q-s{color:rgba(250,248,244,.45)}

#jb.asking .opt{background:#13100B;border-color:rgba(250,248,244,.10);border-radius:12px;
  padding:20px 52px 20px 22px}
#jb.asking .opt::after{border-color:rgba(250,248,244,.2);top:50%;margin-top:-11px;width:22px;height:22px}
#jb.asking .opt:hover{background:#191409;border-color:rgba(201,168,108,.34);
  transform:translateY(-1px);box-shadow:none}
#jb.asking .opt:hover::after{border-color:var(--gold)}
#jb.asking .opt.sel{border-color:var(--gold);
  background:linear-gradient(120deg,rgba(201,168,108,.18),rgba(201,168,108,.04))}
#jb.asking .opt.sel::after{background:var(--gold);border-color:var(--gold);color:#2A2114}
#jb.asking .opt b{color:var(--cream);font-size:16px}
#jb.asking .opt span{color:rgba(250,248,244,.45)}
#jb.asking .opt span em{color:var(--gold-light)}
#jb.asking .opts.two .opt{min-height:80px;padding:18px 48px 18px 20px}
#jb.asking .opts.two .opt b{font-size:15px}
#jb.asking .opts.two .opt span{color:rgba(250,248,244,.45)}

#jb.asking .chip{border-color:rgba(250,248,244,.18);color:rgba(250,248,244,.5)}
#jb.asking .chip:hover{border-color:var(--gold);color:var(--gold-light)}

#jb.asking .nav-row{border-top-color:rgba(250,248,244,.07)}
#jb.asking .nav-back{color:rgba(250,248,244,.45)}
#jb.asking .nav-back:hover{color:var(--gold-light)}
#jb.asking .nav-count{color:rgba(250,248,244,.45)}
#jb.asking .nav-count i{color:rgba(250,248,244,.2)}
#jb.asking .nav-next:disabled{background:none;color:rgba(250,248,244,.22);
  box-shadow:inset 0 0 0 1px rgba(250,248,244,.1)}

#jb.asking .free label{color:rgba(250,248,244,.45)}
#jb.asking .free input{background:#13100B;border-color:rgba(250,248,244,.14);color:var(--cream)}
#jb.asking .free input::placeholder{color:rgba(250,248,244,.28)}
#jb.asking .free-hit{color:var(--gold-light)}
#jb.asking .skip{color:rgba(250,248,244,.45)}
#jb.asking .build p{color:rgba(250,248,244,.7)}
@media(max-width:520px){
  #jb.asking .opt{padding:18px 48px 18px 19px}
  #jb.asking .opt b{font-size:14.5px}
  #jb.asking .opts.two .opt b{font-size:14px}
  #jb.asking .opts.two .opt{min-height:70px}
}

/* ═══════════ THE PLAN ═══════════
   Same dark world as the questions — the whole builder is one place
   now. Full-width cards, no carousel: a plan is read top to bottom,
   not swiped through. */
/* With the masthead hidden on the plan, the title started cold right
   under the nav. This is the room the masthead was holding. */
#jb .hd{text-align:center;margin-bottom:6px;padding-top:clamp(56px,9vw,64px)}
#jb .hd-h{font-family:var(--serif);font-weight:300;font-size:clamp(28px,6.4vw,46px);line-height:1.08;
  margin:0;letter-spacing:-.01em;color:var(--cream)}
/* One line on desktop, whatever the two place names are. Phones keep
   the wrap — forcing “Nuwara Eliya to Trincomalee” onto one line there
   would shrink it to nothing. */
@media(min-width:601px){ #jb .hd-h{white-space:nowrap} }
#jb .hd-h em{font-style:italic;color:var(--gold-light)}
/* The title and the three numbers were sitting on top of each other.
   More space above, more between, and a larger figure — these are the
   first facts anyone reads. */
#jb .facts{display:flex;justify-content:center;flex-wrap:wrap;margin:34px 0 0}
#jb .fact{padding:4px 30px;border-left:1px solid rgba(250,248,244,.14);text-align:center}
#jb .fact:first-child{border-left:0}
#jb .fact b{display:block;font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.15;
  color:var(--cream)}
#jb .fact span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,248,244,.4);margin-top:8px}
#jb .price{margin:26px 0 0;text-align:center}
#jb .price b{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--cream)}
#jb .price-t{background:none;border:0;padding:0 0 2px;margin-left:10px;font:inherit;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);cursor:pointer;
  border-bottom:1px solid rgba(201,168,108,.4)}
#jb .cap-line{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:8px 0 0}
#jb .bit{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding:7px 0;
  border-bottom:1px solid rgba(250,248,244,.06);color:rgba(250,248,244,.62);margin:0}
#jb .bit b{font-weight:400;font-family:var(--serif);font-size:14px;color:var(--cream)}
#jb .fine{font-size:11.5px;color:rgba(250,248,244,.38);margin:12px 0 0;line-height:1.5}
#jb .break{max-width:440px;margin:16px auto 0;font-size:12px;color:rgba(250,248,244,.42);display:none}
#jb .break.on{display:block}

/* switcher: one control, three parts */
#jb .rs{position:relative;display:flex;margin:34px 0 0;background:#13100B;border:1px solid rgba(250,248,244,.1);
  border-radius:var(--pill);padding:5px}
/* The gold used to be the active button's own background, so it jumped
   from one third to another. It is its own layer now and moves on
   transform — compositor work, no layout, smooth on a phone. */
/* Width and position come from CSS, not from measuring the element the
   instant the plan is written into the DOM — that measurement could come
   back zero, and when it did the gold never appeared at all. The buttons
   are equal flex children, so the arithmetic is exact: --rs-n is how many
   routes there are, --rs-i which one is selected. */
#jb .rs-ind{position:absolute;top:5px;bottom:5px;left:5px;border-radius:var(--pill);
  width:calc((100% - 10px) / var(--rs-n, 3));
  transform:translateX(calc(var(--rs-i, 0) * 100%));
  background:var(--gold);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  will-change:transform;pointer-events:none;z-index:0}
#jb .r{position:relative;z-index:1;flex:1;background:none;border:0;border-radius:var(--pill);padding:8px 6px;text-align:center;
  font:inherit;color:var(--cream);cursor:pointer;transition:color .24s;min-width:0}
#jb .r b{display:block;font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.1}
/* 10.5px at 42% was unreadable on a phone — the stops and hours are
   the whole point of choosing between the three. */
/* Uppercase with real tracking and a heavier stroke: at this size a
   lowercase grey line is the hardest thing on the page to read, and it
   carries the only numbers that separate the three routes. */
#jb .r span{display:block;font-size:10.5px;font-weight:600;color:rgba(250,248,244,.66);
  margin-top:4px;letter-spacing:.1em;text-transform:uppercase}
#jb .r.on{color:#2A2114}
#jb .r.on span{color:rgba(42,33,20,.86)}
#jb .r-note{text-align:center;font-family:var(--serif);font-style:italic;font-size:15px;
  color:rgba(250,248,244,.45);margin:14px 0 0}

/* ── the route line ────────────────────────
   Every stop as a dot, the hours on the connector between them. It
   reads the carousel's scroll position, so moving through the cards
   moves along the route. On a phone the names drop away and the dots
   and hours remain, which keeps it on one screen however many stops. */
#jb .rl{display:flex;align-items:center;margin-top:30px;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0 clamp(18px,4vw,64px)}
#jb .rl-stop{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto}
#jb .rl-stop b{width:8px;height:8px;border-radius:50%;background:rgba(250,248,244,.2);display:block;
  transition:background .35s,transform .35s,box-shadow .35s}
#jb .rl-stop span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,248,244,.35);white-space:nowrap;transition:color .35s}
#jb .rl-stop.on b{background:var(--gold);transform:scale(1.5);box-shadow:0 0 0 4px rgba(201,168,108,.16)}
#jb .rl-stop.on span{color:var(--gold-light)}
#jb .rl-stop.past b{background:rgba(201,168,108,.5)}
/* the connectors stretch, so the line always reaches both edges */
#jb .rl-leg{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;padding-bottom:20px}
#jb .rl-leg i{display:block;flex:1;min-width:8px;height:1px;background:rgba(250,248,244,.14);
  transition:background .4s}
#jb .rl-leg i.done{background:rgba(201,168,108,.5)}
#jb .rl-leg em{font-style:normal;font-size:9px;letter-spacing:.1em;color:rgba(250,248,244,.3);
  white-space:nowrap}
@media(max-width:600px){
  #jb .rl-stop span{display:none}
  #jb .rl-leg{padding-bottom:0;gap:6px}
  #jb .rl-leg em{font-size:8.5px}
}
@media(prefers-reduced-motion:reduce){ #jb .rl-stop b{transition:none} }

/* ── the route, as a rail ──────────────────
   Edge to edge: the rail breaks out of the text column so cards run off
   the screen rather than stopping at a margin. Every image is a fixed
   186px and every card matches the tallest, so nothing drifts.
   Drive times live on each card's region line, so the gaps stay empty —
   a label between cards broke the journey into pieces. */
#jb .rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:18px;
  padding:0 clamp(18px,4vw,64px) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  align-items:stretch}
#jb .rail::-webkit-scrollbar{display:none}
#jb .st{scroll-snap-align:start;flex:0 0 auto;width:clamp(268px,80vw,306px);background:#13100B;
  border:1px solid rgba(250,248,244,.1);border-radius:13px;overflow:hidden;
  display:flex;flex-direction:column}
#jb .im{position:relative;height:186px;flex:0 0 186px;overflow:hidden;background:#0F0C08}
#jb .im img{width:100%;height:100%;object-fit:cover;object-position:center}
/* The nights and the rate are the two numbers people scan for, so they
   were the wrong things to have shrunk. */
#jb .nn{position:absolute;top:11px;left:11px;font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(10,8,5,.6);padding:5px 12px;
  border-radius:var(--pill);backdrop-filter:blur(6px)}
#jb .bd{padding:13px 15px 14px;display:flex;flex-direction:column;flex:1}
#jb .grow{flex:1}
#jb .bd h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0;line-height:1.03;
  color:var(--cream)}
#jb .reg{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:5px 0 7px}
#jb .reg span{color:rgba(250,248,244,.4);letter-spacing:.1em}
#jb .blurb{font-size:12px;line-height:1.42;color:rgba(250,248,244,.62);margin:0}
#jb .st .hr{border-top:1px solid rgba(250,248,244,.07);margin:10px 0 0;padding-top:9px}
#jb .st .k{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,248,244,.42);margin:0 0 5px}
#jb .row{display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin:0}
#jb .row b{font-weight:500;font-size:14px;color:var(--cream)}
#jb .row i{font-style:normal;font-family:var(--serif);font-size:19px;color:var(--gold-light);white-space:nowrap}
#jb .sty{font-size:11px;color:rgba(250,248,244,.42);margin:3px 0 0}
/* One size, always. It sat at a different height on every card because
   the blurb wraps to two lines on some places, and it changed shape
   again when the swap panel opened. Fixed height, pinned to the bottom,
   same in both states. */
#jb .st .act{width:100%;margin-top:12px;height:34px;flex:0 0 34px;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(250,248,244,.14);background:none;
  border-radius:var(--pill);padding:0 12px;font:inherit;font-size:11px;letter-spacing:.02em;
  color:rgba(250,248,244,.55);cursor:pointer;transition:border-color .18s,color .18s}
#jb .st .act:hover{border-color:var(--gold);color:var(--gold-light)}
#jb .st .act[data-open]{border-color:rgba(201,168,108,.45);color:var(--gold-light)}
#jb .st .arr-alt{margin:9px 0 0;font-size:10.5px;color:rgba(250,248,244,.4)}
/* The alternatives slide over the card rather than growing it. Growing
   one card stretched all the others to match and left a hole in the
   middle of every neighbour. */
#jb .st{position:relative}
#jb .swap{position:absolute;left:0;right:0;bottom:0;top:186px;z-index:3;
  background:rgba(12,10,6,.97);backdrop-filter:blur(10px);padding:14px 15px 15px;
  overflow-y:auto;border-top:1px solid rgba(201,168,108,.25);
  animation:jbSwapIn .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes jbSwapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#jb .swap-h{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,248,244,.4);margin:0 0 7px}
#jb .swap-o{display:flex;align-items:center;gap:9px;width:100%;background:none;
  border:1px solid rgba(250,248,244,.08);border-radius:8px;padding:5px;margin-bottom:5px;font:inherit;
  color:var(--cream);cursor:pointer;text-align:left;transition:.18s}
#jb .swap-o:hover{border-color:var(--gold)}
#jb .swap-o img{width:48px;height:38px;object-fit:cover;border-radius:5px;flex:0 0 auto}
#jb .swap-o b{display:block;font-weight:500;font-size:13.5px}
#jb .swap-o i{display:block;font-style:normal;color:rgba(250,248,244,.42);font-size:11px;margin-top:1px}
@media(max-width:600px){
  /* easier to hit and to read on a phone, without changing the layout */
  #jb .swap-o{padding:7px;gap:11px}
  #jb .swap-o img{width:54px;height:42px}
  #jb .swap-o b{font-size:14.5px}
  #jb .swap-o i{font-size:11.5px}
  #jb .swap-keep{height:38px;font-size:12px}
  #jb .swap-h{font-size:9px}
}
#jb .swap-keep{width:100%;margin-top:10px;height:34px;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(201,168,108,.45);background:none;border-radius:var(--pill);
  font:inherit;font-size:11px;color:var(--gold-light);cursor:pointer;transition:.18s}
#jb .swap-keep:hover{background:rgba(201,168,108,.12)}

/* experiences */
#jb .xps{margin-top:36px}
#jb .xp-h{font-family:var(--serif);font-size:21px;font-style:italic;margin:0 0 4px;text-align:center;
  color:var(--cream)}
#jb .xp-s{text-align:center;color:rgba(250,248,244,.38);font-size:12px;margin:0 0 16px}
#jb .xp-rail{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:0 clamp(18px,4vw,64px) 4px;scrollbar-width:none}
#jb .xp-rail::-webkit-scrollbar{display:none}
#jb .xp-box{flex:0 0 clamp(150px,44vw,180px);scroll-snap-align:center;display:flex;flex-direction:column;
  overflow:hidden;padding:0;text-align:left;font:inherit;color:var(--cream);cursor:pointer;
  background:#13100B;border:1px solid rgba(250,248,244,.1);border-radius:10px;opacity:.45;
  transition:opacity .2s,border-color .2s}
#jb .xp-box.on{opacity:1;border-color:var(--gold)}
#jb .xp-img{position:relative;aspect-ratio:3/2;overflow:hidden}
#jb .xp-img img{width:100%;height:100%;object-fit:cover}
#jb .xp-tick-unused{position:absolute;top:7px;right:7px;width:21px;height:21px;border-radius:50%;
  background:rgba(10,8,5,.55);color:transparent;display:grid;place-items:center;font-size:11px;transition:.2s}
#jb .xp-box.on .xp-tick{background:var(--gold);color:#2A2114}
#jb .xp-txt{padding:11px 12px 13px}
#jb .xp-txt b{display:block;font-weight:500;font-size:13px;line-height:1.35}
#jb .xp-txt span{display:block;color:rgba(250,248,244,.4);font-size:11px;margin-top:3px}
#jb .xp-txt i{display:block;font-style:normal;font-family:var(--serif);color:var(--gold-light);font-size:14px;margin-top:6px}
#jb .dots{display:flex;gap:5px;justify-content:center;margin-top:14px}
#jb .dots i{width:5px;height:5px;border-radius:50%;background:rgba(250,248,244,.18);transition:.25s}
#jb .dots i.on{background:var(--gold);width:16px;border-radius:var(--pill)}

/* closing */
#jb .unmatched{background:rgba(201,168,108,.1);border-left:2px solid var(--gold);padding:12px 14px;
  margin-top:20px;font-size:12.5px;color:rgba(250,248,244,.6);border-radius:0 3px 3px 0}
#jb .inline-undo{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--gold-light);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#jb .cta{background:#13100B;border:1px solid rgba(201,168,108,.3);border-radius:14px;padding:34px 26px;
  margin-top:34px;text-align:center}
#jb .cta h3{font-family:var(--serif);font-weight:300;font-size:28px;margin:0 0 8px;color:var(--cream)}
#jb .cta p{color:rgba(250,248,244,.5);font-size:13.5px;margin:0 0 22px}
#jb .btn{display:inline-block;background:var(--gold);color:#2A2114;border:0;border-radius:var(--pill);
  padding:15px 36px;font:inherit;font-weight:500;font-size:14px;cursor:pointer;transition:.2s}
#jb .btn:hover{background:var(--gold-light)}
#jb .alt{text-align:center;margin-top:28px;padding-top:24px;border-top:1px solid rgba(250,248,244,.07)}
#jb .alt p{color:rgba(250,248,244,.4);font-size:13px;margin:0 0 10px}
#jb .alt a{color:var(--gold-light);font-size:13.5px}
#jb .restart{display:block;margin:30px auto 0;background:none;border:0;color:rgba(250,248,244,.35);
  font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Swap alternatives are a tap target, and 32px of thumbnail with 12px
   type is too small on a phone. */
@media(max-width:600px){
  #jb .swap-o{padding:7px;gap:11px}
  #jb .swap-o img{width:54px;height:42px}
  #jb .swap-o b{font-size:14px}
  #jb .swap-o i{font-size:11.5px}
  #jb .swap-h{font-size:9px;margin-bottom:9px}
  #jb .swap-keep{height:38px;font-size:12px}
}
@media(max-width:560px){
  #jb .fact{padding:0 13px}#jb .fact b{font-size:22px}#jb .fact span{font-size:9.5px;letter-spacing:.14em}
  #jb .r b{font-size:17px}#jb .r span{font-size:10px;letter-spacing:.08em}
}

@media(prefers-reduced-motion:reduce){ #jb .rs-ind{transition:none} }

/* the closing block, in the site's own language rather than a bespoke one */
#jb .jb-cta{text-align:center;padding:52px 0 0;margin-top:40px;
  border-top:1px solid rgba(250,248,244,.08)}
#jb .jb-cta .dst-cta-p{margin-bottom:30px}
#jb .jb-restart{display:block;margin:26px auto 0;background:none;border:0;
  color:rgba(250,248,244,.32);font:inherit;font-size:12.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
#jb .jb-restart:hover{color:var(--gold-light)}

/* experience cards, in the destination cards' language */
#jb .xp-box{flex:0 0 clamp(200px,58vw,224px);scroll-snap-align:start;display:flex;flex-direction:column;
  overflow:hidden;padding:0;text-align:left;background:#13100B;border:1px solid rgba(250,248,244,.1);
  border-radius:13px;opacity:.62;transition:opacity .2s,border-color .2s}
#jb .xp-box.on{opacity:1;border-color:rgba(201,168,108,.45)}
#jb .xp-img{position:relative;height:126px;flex:0 0 126px;overflow:hidden;background:#0F0C08}
#jb .xp-img img{width:100%;height:100%;object-fit:cover}
#jb .xp-txt{padding:12px 14px 13px;display:flex;flex-direction:column;flex:1}
#jb .xp-txt b{display:block;font-weight:500;font-size:13.5px;line-height:1.35;color:var(--cream)}
#jb .xp-txt span{display:block;color:rgba(250,248,244,.42);font-size:11px;margin-top:3px;flex:1}
#jb .xp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
#jb .xp-foot i{font-style:normal;font-family:var(--serif);font-size:19px;color:var(--gold-light)}
#jb .xp-add{height:30px;padding:0 15px;border-radius:var(--pill);border:1px solid rgba(250,248,244,.18);
  background:none;font:inherit;font-size:11px;letter-spacing:.06em;color:rgba(250,248,244,.6);
  cursor:pointer;transition:.18s;white-space:nowrap}
#jb .xp-add:hover{border-color:var(--gold);color:var(--gold-light)}
#jb .xp-add.is{background:var(--gold);border-color:var(--gold);color:#2A2114;font-weight:500}
#jb .xp-h{font-family:var(--serif);font-size:clamp(26px,4.4vw,34px);font-style:italic;font-weight:300;
  margin:0 0 6px;text-align:center;color:var(--cream)}
#jb .xp-s{text-align:center;color:rgba(250,248,244,.45);font-size:13.5px;margin:0 0 22px}

/* The site gives these buttons their box through a selector rooted at
   .dst-cta-sec, which this section is not — so the primary button had
   colour but no padding and collapsed to a bar. Same measurements,
   rooted here instead. */
/* The site standard now sizes these; only the finish is set here. */
#jb .jb-cta .btn-primary,
#jb .jb-cta .btn-ghost--onink{
  transition:background .25s ease,color .25s ease,transform .25s ease}
#jb .jb-cta .btn-primary{background:var(--gold);color:var(--ink);border:0}
#jb .jb-cta .btn-primary:hover{background:var(--gold-light);transform:translateY(-2px)}
#jb .jb-cta .btn-ghost--onink:hover{transform:translateY(-2px)}
#jb .jb-cta .dst-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:600px){
  #jb .jb-cta .dst-cta-actions{flex-direction:column;gap:12px;max-width:320px;margin:0 auto}
  #jb .jb-cta .dst-cta-actions > *{width:100%}
}

/* the enquiry form, in the plan’s own language */
#jb .jb-form{max-width:520px;margin:26px auto 0;text-align:left;display:grid;gap:10px}
#jb .jb-form-h{font-family:var(--serif);font-size:22px;font-style:italic;margin:0 0 4px;
  text-align:center;color:var(--cream)}
#jb .jb-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#jb .jb-form input,#jb .jb-form select,#jb .jb-form textarea{width:100%;background:#13100B;
  border:1px solid rgba(250,248,244,.14);border-radius:10px;padding:14px 15px;font:inherit;
  font-size:14.5px;color:var(--cream);resize:vertical}
#jb .jb-form input:focus,#jb .jb-form select:focus,#jb .jb-form textarea:focus{outline:none;border-color:var(--gold)}
#jb .jb-form input::placeholder,#jb .jb-form textarea::placeholder{color:rgba(250,248,244,.32)}
#jb .jb-form .btn-primary{width:100%;margin-top:4px;border:0;
  background:var(--gold);color:var(--ink)}
#jb .jb-form .btn-primary:hover{background:var(--gold-light)}
#jb .jb-form-fine{font-size:11.5px;color:rgba(250,248,244,.4);margin:6px 0 0;text-align:center;line-height:1.5}
#jb .jb-form-fine a{color:var(--gold-light)}
@media(max-width:560px){ #jb .jb-form-row{grid-template-columns:1fr} }


/* ── the builder's own buttons join the site standard ──
   Swap, Next, Add and the route switcher were written before the
   invert hover existed, so they were the only buttons on the site that
   did nothing under the cursor. Same behaviour now: the outline fills
   with gold, the gold one goes to ink. Sizes are untouched — these are
   deliberately smaller than the page buttons because they sit inside
   cards. */
#jb .st .act,
#jb .swap-keep,
#jb .xp-add,
#jb .nav-next,
#jb .nav-back,
#jb .price-t,
#jb .swap-o {
  transition: background-color .28s ease, color .28s ease,
              border-color .28s ease, transform .18s ease;
}
#jb .st .act:hover,
#jb .swap-keep:hover,
#jb .xp-add:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #2A2114;
}
#jb .xp-add.is:hover {           /* already added — offer the opposite */
  background: none;
  color: var(--gold-light);
  border-color: var(--gold);
}
#jb .nav-next:hover:not(:disabled) {
  background: #13100B;
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
  transform: none;
}
#jb .swap-o:hover {
  background: rgba(201,168,108,.1);
  border-color: var(--gold);
}
#jb .st .act:active,
#jb .swap-keep:active,
#jb .xp-add:active,
#jb .nav-next:active:not(:disabled) { transform: scale(.97); }

@media (hover: none) {
  /* nothing should stay lit after a tap on a phone */
  #jb .st .act:hover, #jb .swap-keep:hover, #jb .xp-add:hover,
  #jb .nav-next:hover:not(:disabled), #jb .swap-o:hover {
    background: revert-layer; color: revert-layer;
    border-color: revert-layer; box-shadow: none;
  }
}

/* ══════════════ iOS FIELD ZOOM ══════════════
   Safari zooms the page in when a focused field is under 16px, and it does
   not zoom back out when the field blurs or the form submits — you land on
   the confirmation still magnified, having to pinch out by hand. 14.5px
   reads better on a desktop form, so it stays there; phones get 16px,
   which is the threshold and the only number that stops the zoom.
   Applies to every field in the builder: the free-text answers and the
   enquiry form. */
@media (max-width: 760px) {
  #jb .free input,
  #jb .jb-form input,
  #jb .jb-form select,
  #jb .jb-form textarea { font-size: 16px; }
}

/* ══════════════ v1030 — PLAN HEADER + SWITCHER, MOBILE ══════════════ */
@media (max-width: 600px) {
  /* More air between the site header and "Colombo to Ella". */
  #jb .hd { padding-top: 70px; }
  /* The three facts: larger, lighter serif figures, finer labels, and
     hairline gold dividers — the first numbers anyone reads. */
  #jb .facts { margin-top: 30px; }
  #jb .fact { padding: 4px 24px; border-left-color: rgba(201,168,108,.24); }
  #jb .fact b { font-size: 30px; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; }
  #jb .fact span { font-size: 10px; letter-spacing: .24em; margin-top: 8px; color: rgba(250,248,244,.46); }
  /* More room between "What's in it" and the route switcher. */
  #jb .rs { margin-top: 52px; }
}

/* Switcher: drag or swipe the gold between routes. A vertical swipe
   still scrolls the page; only a sideways drag is taken. */
#jb .rs { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
#jb .rs.dragging .rs-ind { transition: none; }

/* v1031: in the rare case a route would be identical to another, its
   slot stays visible — softened, not hidden — and says which it matches. */
#jb .r.r-off { cursor: default; opacity: .62; }
#jb .r.r-off span { text-transform: none; letter-spacing: .03em; font-weight: 500; font-style: italic; font-size: 11px; }

/* v1033: the "Working out the drives…" loader sat 80px below the progress
   dots, so on a phone it floated mid-screen. It now sits just under them,
   where the eye already is. The space below stays, so nothing jumps. */
#jb .build{padding:26px 0 80px}

/* v1048: both rails keep the page gutter when they snap. Without
   scroll-padding the stop cards snapped flush to the screen edge (0px)
   while the experience cards sat in the gutter, so the two rails never
   lined up. Both now snap card-start to the same gutter. */
#jb .rail,#jb .xp-rail{scroll-padding-inline:clamp(18px,4vw,64px)}
#jb .xp-rail>.xp-box{scroll-snap-align:start}
#jb .dots[hidden]{display:none}

/* v1118: budget select in the quote form */
#jb .jb-form select{-webkit-appearance:none;appearance:none;cursor:pointer;color:rgba(250,248,244,.85);background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
#jb .jb-form select option{color:#1a1612}