/* =====================================================================
   EXPERIENCES WE OFFER — the scroll showcase
   One compact section. While it is on screen it holds still for a short
   stretch of scrolling, and the experiences change inside it: the picture
   rises from below over the one before, the words and cards change with it.

   Two states:
     .kshow            no script — an ordinary block showing the first slide
     .kshow.is-live    the script has run — the section grows by one short
                       step per slide, and its inner panel pins to the top
                       of the screen while that extra length scrolls past

   Every moving part is positioned by js/home-showcase.js each frame from how
   far through the section the page is; the CSS only lays out the resting
   state and the stacking.
   ===================================================================== */
.kshow {
  --ks-ink: var(--ink, #2e4755);
  --ks-muted: var(--muted, rgba(46, 71, 85, .69));
  --ks-gold: var(--gold, #BD830D);
  --ks-line: rgba(46, 71, 85, .12);
  /* How much scrolling each change takes. Deliberately short: nine slides at
     this step add under three screens of scroll, where a full screen per
     slide would make this the longest thing on the page. */
  --ks-step: 34svh;
  /* What sits fixed across the top of the screen, which the pinned panel has
     to clear. Nothing on desktop in sidebar mode; the header below that. */
  --ks-top: var(--header-h, 0px);
  --ks-overlap: clamp(46px, 5.2vw, 78px);
  --ks-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  color: var(--ks-ink);
  /* Pure white from edge to edge, set off from the warm page around it. */
  background: #FFFFFF;
}
/* The panel is only as tall as what is in it, not a whole screen. The script
   measures it and sets --ks-pin-h (so the section is that plus one short
   step per slide) and --ks-stick (where it pins: centred on the screen, or
   just under the header when the screen is too short to centre it). */
.kshow.is-live {
  height: calc(var(--ks-pin-h, 100svh) + (var(--ks-n) - 1) * var(--ks-step));
}

/* The space around the section: a clear, generous gap above it so it reads
   as its own block after the package rail, a little less below. */
.kshow__pin { padding-block: clamp(72px, 7.4vw, 124px) clamp(48px, 5.6vw, 92px); }
.kshow.is-live .kshow__pin {
  position: sticky;
  top: var(--ks-stick, var(--ks-top));
}
/* A little narrower than the page's other rows, so the picture stays a
   comfortable size on a wide screen. */
.kshow__inner { width: 100%; max-width: 1120px; }

/* ---- heading: set like "Popular Destinations" below it ----
   It sits in the left column only, a little below the top of the picture
   beside it. */
.kshow__head { grid-area: head; padding-top: clamp(14px, 3vh, 30px); }
.kshow__title {
  margin: 0 0 6px;
  /* Sized against the left column it shares with the words, so it stays on
     one line from a laptop up. */
  font-size: clamp(1.4rem, 2.1vw, 2.35rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ks-ink);
}
/* "We Offer" in gold, with no rule under it. */
.kshow__title em {
  font-style: normal;
  color: var(--ks-gold);
}
.kshow__sub { margin: 0; font-size: clamp(.84rem, .98vw, 1rem); color: var(--ks-muted); }

/* ---- the stage: heading, words and counter down the left; the picture
   down the whole of the right, from the top of the section to the foot ---- */
.kshow__stage {
  display: grid;
  grid-template-columns: minmax(0, .87fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head visual"
    "copy visual"
    "nav  visual";
  column-gap: clamp(22px, 2.9vw, 48px);
  /* No height of its own: the picture's landscape shape sets it, and the
     words' row in the left column stretches to match. */
}

/* ---------------------------------------------------------------- words */
/* The layers inside are stacked absolutely, so this row needs a floor of its
   own to hold the tallest of them. */
.kshow__copy { grid-area: copy; position: relative; min-height: 340px; }
/* Heading, description and button in one column, lined up with the section
   heading above them and starting just under it. */
.kshow__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* A clear break between the section's heading and the slide's own words —
     never less than about a line and a half of the heading. */
  padding-top: clamp(68px, 8vh, 88px);
  visibility: hidden;
}
.kshow__text.is-active { visibility: visible; }

/* Not in the reference's layout. */
.kshow__num { display: none; }
/* The small gold line above the heading. */
.kshow__eyebrow {
  margin-bottom: 8px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ks-gold);
}
.kshow__h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ks-ink);
}
.kshow__desc {
  margin: clamp(10px, 1.4vh, 14px) 0 0;
  max-width: 44ch;
  font-size: clamp(.88rem, .95vw, .98rem);
  line-height: 1.65;
  color: var(--ks-muted);
}
/* Gold with white text: the site's own call to action, readable on gold. */
.kshow__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 2.4vh, 24px);
  padding: 11px 20px;
  border-radius: 8px;
  background: var(--ks-gold);
  color: #FFFFFF;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s var(--ks-ease), transform .2s var(--ks-ease);
}
.kshow__cta svg { width: 17px; height: 17px; transition: transform .2s var(--ks-ease); }
.kshow__cta:hover { filter: brightness(1.07); }
.kshow__cta:hover svg { transform: translateX(3px); }
.kshow__cta:focus-visible { outline: 2px solid var(--ks-ink); outline-offset: 3px; }

/* -------------------------------------------------------------- picture */
.kshow__visual {
  grid-area: visual;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Landscape, as the reference draws it — but never so tall that the pinned
   section would run off a short laptop screen; there it flattens instead. */
.kshow__frame {
  position: relative;
  flex: none;
  aspect-ratio: 1.28;
  /* The panel's own padding and the card captions have to fit on the screen
     too, so the picture gives way first on a short one. */
  max-height: min(470px, calc(100svh - var(--ks-top) - 280px));
  overflow: hidden;
  border-radius: 18px;
  background: rgba(46, 71, 85, .08);
  box-shadow: 0 18px 44px rgba(46, 71, 85, .16);
  /* Its own stacking context, so the layers inside can be ordered without
     reaching past the frame. */
  isolation: isolate;
}
.kshow__shot {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.kshow__shot.is-active { visibility: visible; }
.kshow__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A little weight at the foot, where the cards stand. */
.kshow__shot::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 36%;
  background: linear-gradient(to top, rgba(14, 26, 33, .32), rgba(14, 26, 33, 0));
  pointer-events: none;
}

/* ---------------------------------------------------------------- cards
   The reference's cards: a white frame round the photograph, the name and a
   chevron beneath it, standing half over the foot of the big picture. */
.kshow__cards {
  position: relative;
  z-index: 2;
  flex: none;
  margin-top: calc(-1 * var(--ks-overlap));
  /* The photograph plus room for a two-line name beneath it. */
  height: calc(var(--ks-card-h, clamp(92px, 9.4vw, 138px)) + 54px);
}
.kshow__row {
  position: absolute;
  inset: 0 clamp(12px, 1.8vw, 28px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  visibility: hidden;
}
.kshow__row.is-active { visibility: visible; }

.kshow__card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--ks-ink);
}
.kshow__cardpic {
  display: block;
  height: var(--ks-card-h, clamp(92px, 9.4vw, 138px));
  padding: 5px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(14, 26, 33, .16);
}
.kshow__cardpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kshow__cardcap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 2px 0;
}
.kshow__cardname {
  font-size: clamp(.76rem, .86vw, .9rem);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kshow__cardcap svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--ks-gold); transition: transform .2s var(--ks-ease); }
.kshow__card a:hover .kshow__cardname { text-decoration: underline; text-underline-offset: 2px; }
.kshow__card a:hover svg { transform: translateX(3px); }
.kshow__card a:focus-visible { outline: 2px solid var(--ks-gold); outline-offset: 3px; }

/* ------------------------------------------------------------ progress */
/* Lined up with the heading and words above it, and standing level with the
   foot of the picture rather than down at the names under the cards: the
   margin below is how far the cards hang beneath the picture, less a little. */
.kshow__nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin-bottom: calc(var(--ks-card-h, clamp(92px, 9.4vw, 138px)) + 54px - var(--ks-overlap) - 30px);
  padding-top: 16px;
  border-top: 1px solid var(--ks-line);
}
.kshow__count {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ks-muted);
  font-variant-numeric: tabular-nums;
}
.kshow__count b { font-size: 1.3rem; font-weight: 800; color: var(--ks-ink); }
.kshow__ticks {
  flex: 1 1 auto;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.kshow__ticks li { flex: 1 1 0; min-width: 0; }
.kshow__tick {
  display: block;
  width: 100%;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.kshow__tick::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 3px;
  background: rgba(46, 71, 85, .16);
  transition: background-color .3s var(--ks-ease);
}
.kshow__tick.is-active::before,
.kshow__tick.is-past::before { background: var(--ks-gold); }
.kshow__tick:focus-visible { outline: 2px solid var(--ks-gold); outline-offset: 2px; }

.kshow__arrows { display: flex; gap: 6px; }
/* Square, navy, as the reference's own arrows are. */
.kshow__step {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--ks-ink);
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity .2s var(--ks-ease), filter .2s var(--ks-ease);
}
.kshow__step svg { width: 18px; height: 18px; }
.kshow__step:hover { filter: brightness(1.15); }
.kshow__step[disabled] { opacity: .32; cursor: default; filter: none; }
.kshow__step:focus-visible { outline: 2px solid var(--ks-gold); outline-offset: 2px; }

/* ----------------------------------------------------------- dark theme */
:root[data-theme="dark"] .kshow { --ks-line: rgba(250, 248, 243, .16); background: var(--panel, #16263c); }
:root[data-theme="dark"] .kshow__tick::before { background: rgba(250, 248, 243, .2); }
:root[data-theme="dark"] .kshow__step { background: rgba(250, 248, 243, .14); }
:root[data-theme="dark"] .kshow__cardpic { background: var(--surface, #1e2f3c); }

/* ----------------------------------------------------------- responsive */
/* The pinned panel has to clear the mobile header, and below 900px the
   "Pay Online" strip above it as well. */
@media (max-width: 1099px) { .kshow { --ks-top: var(--header-h, 76px); } }
@media (max-width: 900px)  { .kshow { --ks-top: calc(var(--header-h, 76px) + 44px); } }

@media (max-width: 900px) {
  .kshow { --ks-step: 30svh; --ks-overlap: 40px; --ks-card-h: clamp(64px, 17vw, 96px); }
  .kshow__sub { display: none; }
  .kshow__head { padding-top: 0; margin-bottom: 12px; }
  .kshow__title { font-size: clamp(1.35rem, 5.4vw, 1.8rem); }

  /* A phone: the heading with the counter and arrows beside it; then one
     tall picture carrying the slide's words across its top and the framed
     cards across its foot. The picture has a real height of its own rather
     than whatever the stacked words used to leave it. */
  .kshow__stage {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-template-areas: "head nav" "visual visual";
    align-items: center;
    height: auto;
  }
  /* Pinned just under the header, with a strip left clear beneath the cards
     for the site's floating WhatsApp and chat buttons. */
  .kshow.is-live .kshow__pin { padding-block: 12px 96px; }
  .kshow__head { margin-bottom: 14px; }
  .kshow__visual { min-height: 0; }
  .kshow__frame {
    flex: none;
    aspect-ratio: auto;
    height: clamp(300px, calc(100svh - var(--ks-top) - 250px), 460px);
    max-height: none;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(46, 71, 85, .2);
  }
  /* Shade at the top for the words, as well as the one at the foot. */
  .kshow__shot::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    height: 62%;
    background: linear-gradient(to bottom, rgba(14, 26, 33, .72), rgba(14, 26, 33, .38) 55%, rgba(14, 26, 33, 0));
    pointer-events: none;
  }

  /* The words sit over the top of the picture, in the same grid cell. */
  .kshow__copy {
    grid-area: visual;
    align-self: start;
    z-index: 3;
    height: 0;
    min-height: 0;
    pointer-events: none;
  }
  .kshow__text { inset: 0 0 auto 0; padding: 18px 18px 0; }
  .kshow__eyebrow { margin: 0 0 6px; font-size: .66rem; color: #F2C45A; }
  .kshow__h3 { margin: 0; font-size: 1.45rem; color: #FFFFFF; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
  .kshow__desc {
    margin-top: 6px;
    max-width: 34ch;
    font-size: .84rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kshow__cta {
    margin-top: 14px;
    padding: 9px 15px;
    font-size: .82rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    pointer-events: auto;
  }

  .kshow__cards { height: calc(var(--ks-card-h) + 36px); }
  .kshow__row { inset-inline: 10px; gap: 8px; }
  .kshow__cardpic { padding: 3px; border-radius: 4px; }
  .kshow__cardpic img { border-radius: 2px; }
  .kshow__cardcap { padding-top: 7px; }
  .kshow__cardname { font-size: .74rem; -webkit-line-clamp: 1; }
  .kshow__cardcap svg { width: 12px; height: 12px; }

  /* Counter and arrows beside the heading; the tick row is left out. */
  .kshow__nav { gap: 10px; margin: 0 0 14px; padding: 0; border-top: 0; }
  .kshow__ticks { display: none; }
  .kshow__count { font-size: .8rem; }
  .kshow__count b { font-size: 1.05rem; }
  .kshow__arrows { gap: 5px; }
  .kshow__step { width: 32px; height: 32px; border-radius: 8px; }
  /* The heading keeps to one line beside them. */
  .kshow__head { min-width: 0; }
  .kshow__title { font-size: clamp(1.15rem, 5.2vw, 1.6rem); white-space: nowrap; }
}
@media (max-width: 400px) {
  .kshow__count { display: none; }
  .kshow__step { width: 30px; height: 30px; }
}

/* A short phone: the description goes, the heading and button stay. */
@media (max-width: 900px) and (max-height: 700px) {
  .kshow__desc { display: none; }
}

/* Movement off: the slides still change as the page scrolls, but by a plain
   fade in place — the script reads this too and drops the travel. */
@media (prefers-reduced-motion: reduce) {
  .kshow__cta, .kshow__cta svg, .kshow__cardcap svg, .kshow__tick::before { transition: none; }
}