/* ==========================================================
   Typefaces (2026-10-23). The whole site reads these two tokens:
   every font-family in css/ resolves to one of them, so a change of
   typeface is a change here plus the Google Fonts link in each head.
     --font-body     Plus Jakarta Sans: body copy, labels, buttons, cards
     --font-display  Lora: headings, page names, the italic accent word
   ========================================================== */
:root {
  --font-body: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;
}

/* ==========================================================
   Colour theme. Every palette colour in style.css reads one of
   these tokens, so the whole site changes from this one block.
   The -rgb twins feed rgba(var(--t-x-rgb), alpha).
   ========================================================== */
:root {
  --t-ink: #0A2540;
  --t-ink-rgb: 10, 37, 64;
  --t-ink-l: #163A5E;
  --t-ink-l-rgb: 22, 58, 94;
  --t-ink-d: #061A2E;
  --t-ink-d-rgb: 6, 26, 46;
  --t-acc: #B5782A;
  --t-acc-rgb: 181, 120, 42;
  --t-acc-l: #E6B45F;
  --t-acc-l-rgb: 230, 180, 95;
  --t-acc-d: #8F5D1C;
  --t-acc-d-rgb: 143, 93, 28;
  --t-acc-p: #F2DDB4;
  --t-acc-p-rgb: 242, 221, 180;
  --t-btn: #E0A030;
  --t-btn-rgb: 224, 160, 48;
  --t-btn-d: #C98A1E;
  --t-btn-d-rgb: 201, 138, 30;
  --t-btn-l: #F0BE5C;
  --t-btn-l-rgb: 240, 190, 92;
  --t-btn-text: #9A6414;
  --t-btn-text-rgb: 154, 100, 20;
  --t-on-btn: #0A2540;
  --t-on-btn-rgb: 10, 37, 64;
  --t-bg: #F4F7FA;
  --t-bg-rgb: 244, 247, 250;
  --t-bg-2: #FBFCFE;
  --t-bg-2-rgb: 251, 252, 254;
  --t-sand: #E8EDF3;
  --t-sand-rgb: 232, 237, 243;
  --t-line: #DCE3EA;
  --t-line-rgb: 220, 227, 234;
  --t-line-s: #E9EEF3;
  --t-line-s-rgb: 233, 238, 243;
  --t-tx: #46525F;
  --t-tx-rgb: 70, 82, 95;
  --t-tx-2: #5F6B78;
  --t-tx-2-rgb: 95, 107, 120;
  --t-tx-3: #8490A0;
  --t-tx-3-rgb: 132, 144, 160;
  --pj-brown-text: var(--t-btn-text);
}

/* ==========================================================
   Design refresh. Loaded after style.css on every page.
   1. Top bar (contact line above the nav)
   2. Homepage hero slideshow
   3. Type scale: one set of sizes and weights for the site
   4. Headings on the older pages, on the same scale
   5. Photographs without the dark film
   6. Smaller pieces on the same scale
   ========================================================== */

/* ---------- 1. Top bar ---------- */
.pj-header .header-content .container {
  min-height: 38px;
}
.pj-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 38px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.pj-topbar-contact,
.pj-topbar-meta {
  display: flex;
  align-items: center;
  gap: 24px;
}
.pj-topbar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.2s ease;
}
.pj-topbar a:hover {
  color: var(--t-acc-l, #C9A971);
}
.pj-topbar i {
  font-size: 12px;
  color: var(--t-acc-l, #C9A971);
}
.pj-topbar-meta span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
@media (max-width: 1199px) {
  .pj-topbar-meta span {
    display: none;
  }
}

/* ---------- 2. Homepage hero slideshow ---------- */
.hm-slides img {
  opacity: 0;
  animation: hm-slide 24s linear infinite both;
}
.hm-slides img:nth-child(1) { animation-delay: -1s; }
.hm-slides img:nth-child(2) { animation-delay: 5s; }
.hm-slides img:nth-child(3) { animation-delay: 11s; }
.hm-slides img:nth-child(4) { animation-delay: 17s; }
@keyframes hm-slide {
  0%   { opacity: 0; transform: scale(1.03); }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  31%  { opacity: 0; transform: scale(1.09); }
  100% { opacity: 0; transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-slides img {
    animation: none;
  }
  .hm-slides img:first-child {
    opacity: 1;
  }
}

/* ---------- 3. Type scale ----------
   One scale for the whole site. Headings are a light serif in
   sentence case; nothing on the site is set heavier than 600.
   Each size is a clamp, so one rule covers phone to desktop and
   no heading needs its own media query. Change the numbers here
   to make every heading on the site larger or smaller. */
:root {
  --fs-hero: clamp(28px, 2.9vw, 40px);      /* home and holidays hero */
  --fs-hero-in: clamp(26px, 2.5vw, 35px); /* every other page banner */
  --fs-h2: clamp(22px, 2vw, 28px);        /* section headings */
  --fs-h2-sm: clamp(21px, 1.75vw, 24px);  /* headings beside a list or a photo */
  --fs-cta: clamp(23px, 2.1vw, 29px);     /* closing bands */
  --fw-display: 500;
}
.hl-h2,
.hl-hero-title,
.hl-cta-title,
.hl-custom-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: -0.005em;
  text-transform: none;
}
.hl-h2,
.hl-page .hl-h2 {
  font-size: var(--fs-h2);
  line-height: 1.22;
}
.hl-hero-title,
.hm-hero .hl-hero-title {
  font-size: var(--fs-hero);
  line-height: 1.14;
}
.in-hero .hl-hero-title,
.pd-hero .hl-hero-title {
  font-size: var(--fs-hero-in);
  line-height: 1.16;
}
.hl-cta-title,
.hl-custom-title {
  font-size: var(--fs-cta);
  line-height: 1.2;
}
.dp-faq .faq-head .hl-h2,
.hm-intro .hl-h2 {
  font-size: var(--fs-h2-sm);
}
.hl-label {
  font-size: 10.5px;
}
.hl-sub {
  font-size: 14.5px;
}
.hl-hero-text {
  font-size: 15px;
  line-height: 1.7;
}
.hm-hero .hl-hero-inner {
  max-width: 620px;
}

/* ---------- 4. Headings on the older pages ----------
   About, MICE, Corporate, Group Tours and Contact are built on the
   older components, where each block sized its own heading. They all
   take the same scale here. The long legal headings stay sans. */
body.has-pj-header h1,
body.has-pj-header h2:not(.lg-h2):not(.lg-assure-title):not(.mm-title) {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-display) !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}
body.has-pj-header h1 .theme,
body.has-pj-header h2 .theme,
body.has-pj-header h2 .ms-accent {
  font-style: italic;
}
body.has-pj-header:not(.hl-page) h2:not(.mm-title):not(.hl-cta-title):not(.fc-title):not(.mc-title) {
  font-size: var(--fs-h2) !important;
  line-height: 1.22 !important;
}
body.has-pj-header .faq-head h2 {
  font-size: var(--fs-h2-sm) !important;
}
body.has-pj-header .pb-title,
body.has-pj-header .contact-hero h1,
body.has-pj-header .lg-hero-title {
  font-size: var(--fs-hero-in);
  line-height: 1.16;
}
body.has-pj-header .fc-title,
body.has-pj-header .mc-title {
  font-size: var(--fs-cta);
  line-height: 1.2;
}

/* ---------- 5. Photographs without the dark film ----------
   Every hero, band and photo card used to sit under a navy layer
   that covered the whole picture. The full-cover layers are gone.
   What is left is a short shade directly behind white lettering,
   because white text on a bright photograph cannot be read, plus a
   soft shadow on the lettering itself. --ph is the shade colour. */
:root {
  --ph: var(--t-ink-d-rgb, 13, 22, 32);
  --ph-text: 0 1px 2px rgba(var(--ph), 0.55), 0 4px 26px rgba(var(--ph), 0.55);
}

/* heroes with the text on the left: shade the left third only */
.hl-hero-veil,
.kx-hero-veil {
  background: linear-gradient(90deg, rgba(var(--ph), 0.62) 0%, rgba(var(--ph), 0.4) 26%, rgba(var(--ph), 0.12) 48%, rgba(var(--ph), 0) 64%);
}
.kx-hero-veil {
  background:
    linear-gradient(90deg, rgba(var(--ph), 0.62) 0%, rgba(var(--ph), 0.4) 26%, rgba(var(--ph), 0.12) 48%, rgba(var(--ph), 0) 64%),
    linear-gradient(180deg, rgba(var(--ph), 0) 62%, rgba(var(--ph), 0.42) 100%);
}
/* the India-style heroes carried a second layer on top of the veil */
.hl-hero.in-hero::before {
  content: none;
}
.contact-hero::before {
  background: linear-gradient(100deg, rgba(var(--ph), 0.66) 0%, rgba(var(--ph), 0.42) 28%, rgba(var(--ph), 0.1) 54%, rgba(var(--ph), 0) 70%);
}
.lg-hero-veil {
  background: linear-gradient(92deg, rgba(var(--ph), 0.84) 0%, rgba(var(--ph), 0.6) 38%, rgba(var(--ph), 0.14) 76%, rgba(var(--ph), 0) 100%);
}
/* heroes with the text in the middle: shade the middle, leave the sides */
.page-banner::before,
.page-banner-photo::before,
.corp-banner::before {
  background: radial-gradient(ellipse 60% 86% at 50% 54%, rgba(var(--ph), 0.78) 0%, rgba(var(--ph), 0.6) 40%, rgba(var(--ph), 0.2) 76%, rgba(var(--ph), 0) 100%);
}
.hl-hero-inner,
.kx-hero-inner,
.pb-inner,
.contact-hero-content,
.lg-hero .container {
  text-shadow: var(--ph-text);
}
.hl-hero-inner .hl-btn,
.hl-hero-inner .nir-btn,
.kx-hero-inner .hl-btn,
.pb-inner .nir-btn,
.contact-hero-content .nir-btn {
  text-shadow: none;
}

/* photo cards: a caption shade along the bottom, the rest of the picture clear */
.hl-region-veil,
.fs-veil,
.fs-custom .fs-veil,
.ij-veil,
.iw-doc-veil,
.dp-season-veil,
.kx-tile-veil,
.kx-days-card-veil,
.mdx-veil {
  background: linear-gradient(to top, rgba(var(--ph), 0.84) 0%, rgba(var(--ph), 0.58) 22%, rgba(var(--ph), 0.16) 44%, rgba(var(--ph), 0) 58%);
}
.hl-region-body,
.fs-body,
.ij-body,
.kx-tile-body,
.mdx-body {
  text-shadow: 0 1px 2px rgba(var(--ph), 0.6), 0 2px 14px rgba(var(--ph), 0.5);
}
/* cards whose caption sits on its own chip need almost nothing */
.pkg-shade,
.hl-card-shade,
.hl-dest-shade,
.in-exp-veil,
.id-veil {
  background: linear-gradient(to top, rgba(var(--ph), 0.3) 0%, rgba(var(--ph), 0) 30%);
}
.sl-media::after {
  background: linear-gradient(180deg, rgba(var(--ph), 0) 62%, rgba(var(--ph), 0.34) 100%);
}
.kx-pk-img::after {
  background: linear-gradient(to top, rgba(var(--ph), 0.4) 0%, rgba(var(--ph), 0) 36%);
}

/* photo bands: the picture shows on the open side, the shade stays under the text */
.hl-cta-veil {
  background: linear-gradient(92deg, rgba(var(--ph), 0.84) 0%, rgba(var(--ph), 0.62) 34%, rgba(var(--ph), 0.2) 68%, rgba(var(--ph), 0.06) 100%);
}
.mice-cta::before {
  background: linear-gradient(100deg, rgba(var(--ph), 0.84) 0%, rgba(var(--ph), 0.62) 34%, rgba(var(--ph), 0.2) 68%, rgba(var(--ph), 0.06) 100%);
}
.mc-shade {
  background: linear-gradient(100deg, rgba(var(--ph), 0.84) 0%, rgba(var(--ph), 0.62) 34%, rgba(var(--ph), 0.2) 68%, rgba(var(--ph), 0.06) 100%);
}
.mvv-hero::before {
  background: linear-gradient(92deg, rgba(var(--ph), 0.82) 0%, rgba(var(--ph), 0.58) 36%, rgba(var(--ph), 0.14) 68%, rgba(var(--ph), 0) 100%);
}
.mvv-hero::after {
  background: linear-gradient(180deg, rgba(var(--ph), 0) 40%, rgba(var(--ph), 0.4) 100%);
}
.hl-custom-veil {
  background: linear-gradient(180deg, rgba(var(--ph), 0.6) 0%, rgba(var(--ph), 0.7) 100%);
}
.final-cta::before,
.corp-page .final-cta::before {
  background: radial-gradient(ellipse 58% 86% at 50% 50%, rgba(var(--ph), 0.66) 0%, rgba(var(--ph), 0.5) 44%, rgba(var(--ph), 0.16) 82%, rgba(var(--ph), 0.06) 100%);
}
.hl-cta-copy,
.mc-copy,
.fc-inner,
.hl-custom-head {
  text-shadow: var(--ph-text);
}
.hl-cta-copy .hl-btn,
.hl-cta-copy .nir-btn,
.mc-copy .nir-btn,
.fc-inner .nir-btn {
  text-shadow: none;
}

/* phones: the text runs the full width, so the shade is even and light */
@media (max-width: 767px) {
  .hl-hero-veil,
  .kx-hero-veil,
  .contact-hero::before,
  .lg-hero-veil,
  .page-banner::before,
  .page-banner-photo::before,
  .corp-banner::before {
    background: linear-gradient(180deg, rgba(var(--ph), 0.36) 0%, rgba(var(--ph), 0.56) 100%);
  }
  .hl-cta-veil,
  .mice-cta::before,
  .mc-shade,
  .mvv-hero::before,
  .final-cta::before,
  .corp-page .final-cta::before {
    background: linear-gradient(180deg, rgba(var(--ph), 0.62) 0%, rgba(var(--ph), 0.72) 100%);
  }
}

/* centred banners: room for the serif line, and a gold that reads on a photograph */
.pb-inner {
  max-width: 760px;
}
.pb-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.94);
}
.pb-title .theme,
.fc-title .theme,
.mc-title .theme,
.contact-hero h1 .theme {
  color: var(--t-btn-l, #D3984C) !important;
}

/* ---------- 6. Smaller pieces on the same scale ----------
   Card titles, counters and prices that were set large and heavy
   in their own blocks. Titles sit at 17 to 19px, semi-bold. */
body.has-pj-header .mvv-hero-title {
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.25;
}
body.has-pj-header .mvv-title {
  font-size: 18px;
}
body.has-pj-header .ph-word,
body.has-pj-header .fs-title,
body.has-pj-header .qc-title {
  font-size: 18px;
}
body.has-pj-header .dk-title {
  font-size: 17px;
}
body.has-pj-header .sl-num {
  font-size: 23px;
}
body.has-pj-header .pd-card-price .pkg-amount {
  font-size: 26px;
}
body.has-pj-header .pd-h2 {
  font-size: 22px;
}
/* plain <b> and <strong> follow the same ceiling */
b,
strong {
  font-weight: 600;
}

/* ---------- parked content ----------
   The owner shows only the destinations that have a package. Everything
   else is kept in the page but parked: a section or a card carries
   data-pj-hold, and cards inside lists that a script counts sit in a
   <template data-pj-hold>. To bring something back, remove the attribute
   (or lift the cards out of the template). */
[data-pj-hold] {
  display: none !important;
}


/* ==== Site preloader: the mascot picture on the home page (2026-10-23) ====
   Only index.html carries #pj-preloader.pj-load.pj-load-home: the owner's
   mascot picture (images/loader/home-penguin.webp, jpg fallback) floating on
   white, with the label and three dots under it. The last block of
   js/header.js holds it for 1.5 s after the page starts and fades it out.
   Every other page keeps the stock #preloader spinner from css/style.css.
   (The per-page penguin loaders made on 2026-10-20 were removed on
   2026-10-23 at the owner's request; their pictures are still in
   images/loader/ but nothing references them.) */
.pj-load {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  background: #fff;
  color: var(--t-ink, #16232f);
  text-align: center;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.pj-load.is-done {
  opacity: 0;
  pointer-events: none;
}
html.pj-loading {
  overflow: hidden;
}
.pj-load-pic {
  display: block;
  width: min(92vw, 820px);
  max-height: 62vh;
  height: auto;
  object-fit: contain;
  margin-bottom: 10px;
  animation: pj-load-float 3.2s ease-in-out infinite alternate, pj-load-in 0.6s ease-out both;
}
.pj-load-label {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--t-ink, #16232f);
}
.pj-load-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-tx, #55504b);
}
.pj-load-dots {
  display: inline-flex;
  gap: 4px;
}
.pj-load-dots b {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--t-acc, #a8834e);
  animation: pj-load-dot 1.2s ease-in-out infinite;
}
.pj-load-dots b:nth-child(2) {
  animation-delay: 0.2s;
}
.pj-load-dots b:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes pj-load-float {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}
@keyframes pj-load-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes pj-load-dot {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@media (max-height: 640px) {
  .pj-load-pic {
    max-height: 56vh;
  }
}
@media (max-width: 480px) {
  .pj-load-label {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pj-load-pic {
    animation: none;
  }
  .pj-load-dots b {
    animation-duration: 2.4s;
  }
}
/* ==== end site preloader ==== */


/* ==== "In short" explainer under a service hero (2026-10-23) ====
   For visitors who do not know the travel trade: holidays.html, git.html and
   mice.html open with this three-part card right under the banner, answering
   what the service is, who it is for and how to start, in plain words.
   corporate.html has its own version inside its page design. */
.pj-plain-wrap {
  padding: 0 0 8px;
  background: #fff;
}
.pj-plain {
  display: grid;
  grid-template-columns: 200px repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: -34px;
  position: relative;
  z-index: 3;
  border: 1px solid var(--t-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(var(--t-ink-rgb), 0.1);
  overflow: hidden;
}
.pj-plain-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 26px 24px;
  background: var(--t-ink);
  color: #fff;
}
.pj-plain-head em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-acc-l);
}
.pj-plain-head b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
.pj-plain-col {
  padding: 24px 24px 22px;
}
.pj-plain-col + .pj-plain-col {
  border-left: 1px solid var(--t-line-s);
}
.pj-plain-col em {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-acc);
}
.pj-plain-col em i {
  font-size: 14px;
}
.pj-plain-col p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--t-tx);
}
.pj-plain-col p a {
  color: var(--t-btn-text);
  font-weight: 600;
  text-decoration: none;
}
.pj-plain-col p a:hover {
  color: var(--t-ink);
}
@media (max-width: 991px) {
  .pj-plain {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }
  .pj-plain-wrap {
    padding-top: 24px;
  }
  .pj-plain-head {
    grid-column: 1 / -1;
    padding: 20px 22px;
  }
  .pj-plain-col + .pj-plain-col {
    border-left: 0;
  }
  .pj-plain-col:nth-child(3) {
    border-left: 1px solid var(--t-line-s);
  }
  .pj-plain-col:nth-child(4) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--t-line-s);
  }
}
@media (max-width: 560px) {
  .pj-plain {
    grid-template-columns: 1fr;
  }
  .pj-plain-col:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--t-line-s);
  }
}
/* ==== end "In short" ==== */

/* "In short" that does not overlap the hero (destination pages, whose heroes end in a card) */
.pj-plain-wrap.is-flat {
  padding-top: 30px;
  padding-bottom: 6px;
}
.pj-plain-wrap.is-flat .pj-plain {
  margin-top: 0;
}

/* ==== styled dropdowns (2026-10-23) ====
   js/pj-select.js replaces any <select data-pj-select> with a button and a
   listbox of its own, because the list a native select opens cannot be
   styled and looked like a grey system menu beside the gold buttons. */
.pj-select {
  position: relative;
}
.pj-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.pj-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--t-line);
  border-radius: 12px;
  background: var(--t-bg);
  color: var(--t-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.pj-select-btn:hover {
  border-color: rgba(var(--t-acc-rgb), 0.6);
  background: #fff;
}
.pj-select-btn:focus-visible,
.pj-select.is-open .pj-select-btn {
  outline: none;
  border-color: var(--t-acc);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--t-acc-rgb), 0.15);
}
.pj-select-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-select-chev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.6px solid var(--t-ink);
  border-bottom: 1.6px solid var(--t-ink);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.pj-select.is-open .pj-select-chev {
  transform: rotate(225deg);
  margin-top: 4px;
}
.pj-select-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--t-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px -12px rgba(var(--t-ink-rgb), 0.28), 0 2px 6px rgba(var(--t-ink-rgb), 0.06);
  max-height: 290px;
  overflow-y: auto;
  animation: pj-select-in 0.18s ease-out;
}
.pj-select-list[hidden] {
  display: none;
}
.pj-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  color: var(--t-ink);
  cursor: pointer;
  position: static;
}
.pj-select-item:hover,
.pj-select-item:focus {
  background: var(--t-bg);
  outline: none;
}
.pj-select-item.is-selected {
  background: rgba(var(--t-acc-rgb), 0.12);
  color: var(--t-acc-d);
  font-weight: 600;
}
.pj-select-item.is-selected::after {
  content: "";
  width: 6px;
  height: 11px;
  margin-right: 4px;
  border-right: 2px solid var(--t-acc-d);
  border-bottom: 2px solid var(--t-acc-d);
  transform: rotate(45deg);
}
@keyframes pj-select-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pj-select-list {
    animation: none;
  }
}
/* ==== end styled dropdowns ==== */

/* ==========================================================
   Review pass, 2026-10-24: small global fixes found going page by page.
   ========================================================== */
/* fontawesome swaps <i class="fab fa-whatsapp"> for an <svg>, so every rule
   that styles a sibling line icon by `> i` needs an `> svg` twin. Footer: */
.sf-contact li > svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--t-acc-l);
}
/* the top bar meta line was 10.5px */
.pj-topbar-meta {
  font-size: 11px;
}
/* Buttons, slimmer. Plus Jakarta Sans is wider than Inter was, and the owner
   kept finding two buttons stacked where one row was meant (holidays, packages,
   group tours, corporate). Same pill, less air, and a button never wraps. */
.hl-btn,
.hl-btn-line,
.hl-btn-ghost {
  padding: 13px 24px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
/* Breadcrumb as a transparent pill, the owner's ask ("transparent button mein
   karo sab jagah"). Every page's breadcrumb is a nav[aria-label="breadcrumb"],
   so one rule covers all eleven page systems; nav+attribute outranks their
   single-class rules, which keep their margins, separators and link colours. */
nav[aria-label="breadcrumb"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px;
  border: 1px solid rgba(var(--t-ink-rgb), 0.22);
  border-radius: 100px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
nav[aria-label="breadcrumb"].dsx-crumb-light {
  border-color: rgba(255, 255, 255, 0.55);
}
/* legal pages: their breadcrumb is a Bootstrap ul inside the nav; keep the
   list flush so the pill hugs the two words */
nav[aria-label="breadcrumb"] > .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
}
.lg-hero nav[aria-label="breadcrumb"] {
  margin-bottom: 20px;
}
/* on the dark legal hero the ink border vanished; a light one */
.lg-hero nav[aria-label="breadcrumb"] {
  border-color: rgba(255, 255, 255, 0.55);
}
/* Header on small laptops (992-1199px): the seven links, the WhatsApp circle
   and the Plan Your Trip button were 55px wider than the screen between about
   1020 and 1170px, so the button ran off the right edge. The circle folds away
   there (the top bar keeps "WhatsApp Us") and so does the button's arrow. */
@media (min-width: 992px) and (max-width: 1199px) {
  .pj-wa-btn {
    display: none;
  }
  .pj-cta .pj-arrow {
    display: none;
  }
}