/* =====================================================================
   BANNER — "Your Tour, Perfectly Personalised!"
   Headline and strapline centred, a cluster of rounded photo tiles either
   side, and a rail of destinations underneath.

   The banner carries its own photograph — a washed-out snowfield that fades
   to near-white through the middle, so the headline and the panel read over
   it without needing a scrim. Its edges are close enough to the page's warm
   white that it still joins the sections below as one sheet.

   Every size is in container units — 1cqw is a hundredth of the banner's
   width — measured off the reference, so the whole block scales as one
   piece. The tile geometry is set per tile in the markup (--x --y --w --h,
   in the same hundredths) and multiplied by --u here, which lets the phone
   layout blow the cluster up by changing one value.

   Vertical rhythm, in hundredths of the width:
       top 3.46 · tiles 20.67 · to the icons 2.5 · rail · rule
   ===================================================================== */
.kmos {
  --u: 1cqw;
  --kmos-ink: #2e4755;
  --kmos-sub: #2e4755;
  --kmos-label: #2e4755;
  --kmos-icon: rgba(46, 71, 85, .86);
  --kmos-orange: #BD830D;
  --kmos-rule: rgba(46, 71, 85, .1);
  --kmos-ease: cubic-bezier(.22, .61, .36, 1);
  /* Laid over the photograph. Clear on the light theme, which wants the
     picture as it is; navy on the dark one, which would otherwise glare. */
  --kmos-wash: transparent;
  position: relative;
  /* Above the sections that follow, so the search card's panels open over
     them. */
  z-index: 5;
  isolation: isolate;
  container-type: inline-size;
  /* The outer tile columns hang off the sides and are clipped there (see the
     @supports below for the open foot). */
  overflow: hidden;
  margin: 0;
  padding: var(--header-h, 88px) 0 calc(1.6 * var(--u));
  /* Tall enough to show the picture's snow drifts under the rail, as the
     reference does, without a band of empty snow before the next section. */
  min-height: calc(var(--header-h, 0px) + 41 * var(--u));
  color: var(--kmos-ink);
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* Sides clipped, foot open, so the search panels can drop below the banner.
   Browsers without `clip` keep `hidden` above and crop a long panel instead
   (hidden + visible would turn the banner into a scroller). */
@supports (overflow: clip) {
  .kmos { overflow: visible; overflow-x: clip; }
}

/* The picture: the full width of the banner and its own height, lifted a
   little so the peaks sit behind the tile clusters and the drifts land below
   the rail. Faded out at the foot, so the banner melts into the page instead
   of stopping at a line. A web-sized JPG of images/IMAGES/"banner background
   image 2.png"; the previous picture is still at images/hero/banner-bg.jpg. */
.kmos::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--kmos-wash), var(--kmos-wash)),
    /* A web-sized JPG of images/IMAGES/"BANNER BACKGROUND IMAGE 3.png". The
       earlier pictures are still at images/hero/banner-bg-2b.jpg and
       banner-bg.jpg. */
    url('../images/hero/banner-bg-3.jpg') center calc(var(--header-h, 0px) - 3 * var(--u)) / 100% auto no-repeat,
    #FFFFFF;
  /* Only the last sliver fades, below the drifts, so the drifts themselves
     stay crisp and fully visible. */
  -webkit-mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 93%, transparent 100%);
}

/* ================================ STAGE ================================ */
.kmos__stage {
  position: relative;
  /* The tile clusters set their own height, so this only has to hold the
     headline and the panel — and give way if they ever need more. */
  min-height: calc(20.67 * var(--u));
  margin-top: calc(3.46 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Each cluster's box runs from the screen edge to the inner tile; the outer
   column hangs off the edge and is clipped by the banner. */
.kmos__side {
  position: absolute;
  top: 0;
  width: calc(26.48 * var(--u));
  height: calc(20.67 * var(--u));
}
.kmos__side--l { left: 0; }
/* The reference's right cluster is the left one turned half a turn. */
.kmos__side--r { right: -.45cqw; transform: rotate(180deg); }

.kmos__tile {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: calc(1.05 * var(--u));
  /* The faces carry the ground and the hairline ring, so the tile itself does
     no clipping and the turn is free to happen in three dimensions. Place,
     size, shape and corner are all exactly as they were. */
  perspective: calc(46 * var(--u));
  /* backwards, not both: once in, the hover transform has to be free. */
  animation: kmos-tile .9s var(--kmos-ease) backwards;
  animation-delay: calc(var(--i) * 70ms);
  transition: transform .62s cubic-bezier(.2, .8, .22, 1);
}
.kmos__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The right cluster is the left one turned half a turn, so each face is
   turned back. Done on the face rather than on the photograph, so the name on
   the reverse comes round with it instead of arriving upside down. */
.kmos__side--r .kmos__face { transform: rotate(180deg); }

/* ------------------------------- the flip -------------------------------
   A tile keeps the same photograph on both sides; the reverse adds only the
   destination's name. Pointing at a tile turns it — and only it — half a turn
   about its Y axis, so the picture itself rotates edge-on; taking the pointer
   away turns it straight back. Nothing latches: place, size, shape, corner
   and spacing are untouched, and the growth is a transform. */
[data-kmos-tile] { cursor: pointer; }

.kmos__flip {
  position: absolute;
  inset: 0;
  /* The faces take their corner from here and this takes it from the tile, so
     the rounded corner carries the whole way down to the photograph. Without
     it the faces would inherit no radius at all and square themselves off. */
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3, .7, .2, 1);
}

.kmos__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #FAF8F3;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* A half-pixel line round every photograph, following its rounded corners.
   Laid over the picture (a border on the face itself would sit under it), and
   it never takes the pointer. */
.kmos__face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: .5px solid rgba(46, 71, 85, .38);
  border-radius: inherit;
  pointer-events: none;
}
.kmos__face--b { transform: rotateY(180deg); }
.kmos__side--r .kmos__face--b { transform: rotate(180deg) rotateY(180deg); }

/* ============================ THE FEATURED CARD ============================
   Pointing at a tile, tapping it or tabbing to it (js/hero-mosaic.js sets
   .is-feat) turns it over and lifts it into a featured card: 14u wide
   whatever its size at rest, grown from the corner nearest the headline so it
   opens into the banner. Every other tile stays exactly as it is — no blur,
   no movement. Without the script, plain hover does the same.

   --s    how much this tile grows to reach the featured width
   --fu   one "featured unit" before the scale, so the words on the card come
          out the same size on every tile once it has grown */
.kmos__tile {
  --s: calc(14 / var(--w));
  --fu: calc(var(--u) / var(--s));
  transform-origin: 0 var(--oy, top);
}
.kmos__tile.is-feat,
.kmos:not(.kmos--js) .kmos__tile:hover {
  z-index: 10;
  transform: translateX(calc(var(--tx, 0) * var(--u))) scale(var(--s));
}
/* The outer column hangs off the screen, so its card is brought in by just
   that much: it opens flush with the screen's edge and still covers every
   visible part of the tile it grew from, so the pointer never slips off it.
   The right cluster sits a further .45 out. */
.kmos__side--l .kmos__tile--c1 { --tx: 3.36; }
.kmos__side--r .kmos__tile--c1 { --tx: 3.81; }
.kmos__tile.is-feat .kmos__flip,
.kmos:not(.kmos--js) .kmos__tile:hover .kmos__flip { transform: rotateY(180deg); }
/* The featured card rides above the headline and the search card. The right
   cluster is turned, which makes it a layer of its own, so it is the cluster
   that has to step forward rather than just the tile. */
.kmos__side:has(.is-feat),
.kmos:not(.kmos--js) .kmos__side:has(.kmos__tile:hover) { z-index: 6; }
/* A soft, even shadow — even, because the right cluster is upside down and a
   directional one would fall the wrong way there. */
.kmos__tile.is-feat .kmos__face--b,
.kmos:not(.kmos--js) .kmos__tile:hover .kmos__face--b {
  box-shadow: 0 0 calc(2.6 * var(--fu)) rgba(20, 34, 44, .32), 0 0 0 1px rgba(255, 255, 255, .5);
}

/* The package, over the photograph on the reverse. */
.kmos__feat {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(.8 * var(--fu));
  background: linear-gradient(0deg, rgba(20, 34, 44, .9) 0%, rgba(20, 34, 44, .62) 42%, rgba(20, 34, 44, .08) 72%, rgba(20, 34, 44, 0) 100%);
  color: #FFFFFF;
  text-align: left;
  opacity: 0;
  transition: opacity .3s ease;
}
.kmos__tile.is-feat .kmos__feat,
.kmos:not(.kmos--js) .kmos__tile:hover .kmos__feat { opacity: 1; transition-delay: .28s; }

.kmos__feat-kind {
  align-self: flex-start;
  padding: calc(.22 * var(--fu)) calc(.55 * var(--fu));
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #2e4755;
  font-size: max(calc(9px / var(--s)), calc(.52 * var(--fu)));
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.kmos__tile--ski .kmos__feat-kind { background: #FFFFFF; color: #BD830D; }

.kmos__feat-body { display: flex; flex-direction: column; gap: calc(.22 * var(--fu)); min-width: 0; }
.kmos__feat-place {
  font-size: max(calc(9px / var(--s)), calc(.52 * var(--fu)));
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}
.kmos__feat-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: max(calc(12px / var(--s)), calc(.86 * var(--fu)));
  font-weight: 600;
  line-height: 1.22;
}
.kmos__feat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(.15 * var(--fu)) calc(.55 * var(--fu));
  font-size: max(calc(10px / var(--s)), calc(.6 * var(--fu)));
  opacity: .92;
}
.kmos__feat-meta:empty { display: none; }
.kmos__feat-meta s { margin-right: calc(.2 * var(--fu)); opacity: .6; }
.kmos__feat-meta b { font-size: 1.2em; font-weight: 700; color: #FBD24B; }
.kmos__feat-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(.3 * var(--fu));
  margin-top: calc(.4 * var(--fu));
  padding: calc(.34 * var(--fu)) calc(.7 * var(--fu));
  border-radius: 999px;
  background: #BD830D;
  color: #FFFFFF;
  font-size: max(calc(9px / var(--s)), calc(.56 * var(--fu)));
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.kmos__feat-cta svg { width: 1.05em; height: 1.05em; transition: transform .25s ease; }
.kmos__tile.is-feat:hover .kmos__feat-cta { background: #a8740b; }
.kmos__tile.is-feat:hover .kmos__feat-cta svg { transform: translateX(3px); }

/* The link covers the whole card, but only takes the pointer once the tile
   is featured: a first tap on a phone turns the tile instead of leaving. */
.kmos__feat-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
}
.kmos__tile.is-feat .kmos__feat-link,
.kmos:not(.kmos--js) .kmos__tile:hover .kmos__feat-link { pointer-events: auto; }
.kmos__feat-link:focus-visible { outline: 3px solid #BD830D; outline-offset: -3px; }

/* No motion wanted: the card still appears, without the turn. */
@media (prefers-reduced-motion: reduce) {
  .kmos__tile,
  .kmos__flip,
  .kmos__feat { transition: none !important; }
}

/* --------------------------- the destination ---------------------------
   The one thing the reverse adds. */
.kmos__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(1.1 * var(--u)) calc(.5 * var(--u)) calc(.52 * var(--u));
  background: linear-gradient(0deg, rgba(46, 71, 85, .9) 0%, rgba(46, 71, 85, .55) 45%, rgba(46, 71, 85, 0) 100%);
  color: #FAF8F3;
  font-size: max(10px, calc(.76 * var(--u)));
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  /* The name is the thing that opens the package. */
  cursor: pointer;
}

/* ----------------------------- the package -----------------------------
   Sits clear of the tile, toward the middle of the banner, and only while the
   turned tile is being pointed at. It is a child of the tile, so moving the
   pointer onto the card still counts as being on the tile and the card holds
   still instead of flickering away. */
.kmos__pkg {
  position: absolute;
  top: 50%;
  left: 100%;
  z-index: 7;
  width: calc(16.5 * var(--u));
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .34s var(--kmos-ease), visibility .34s;
}
.kmos__side--r .kmos__pkg { transform: translateY(-50%) rotate(180deg); }
/* Only once the name itself has been clicked. */
.kmos__tile.is-card .kmos__pkg { opacity: 1; visibility: visible; }

.kmos__pkg-in {
  display: flex;
  /* The gap is inside the hover area, so crossing it never drops the card. */
  margin-left: calc(.62 * var(--u));
  border-radius: calc(.95 * var(--u));
  /* The photograph runs right to the card's own edge, so the card does the
     clipping and no ground is left showing around the picture. */
  overflow: hidden;
  /* Liquid glass: the banner shows through, softened and lifted. */
  background: rgba(250, 248, 243, .55);
  -webkit-backdrop-filter: blur(calc(1.2 * var(--u))) saturate(1.35);
          backdrop-filter: blur(calc(1.2 * var(--u))) saturate(1.35);
  box-shadow:
    0 calc(.85 * var(--u)) calc(2.1 * var(--u)) rgba(46, 71, 85, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .65);
  color: var(--kmos-ink);
  text-align: left;
  text-decoration: none;
  transform: translateX(calc(-.5 * var(--u)));
  transition: transform .34s var(--kmos-ease);
}
.kmos__tile.is-card .kmos__pkg-in { transform: translateX(0); }

.kmos__pkg-media {
  flex: none;
  /* Full height of the card, whatever the title runs to. */
  align-self: stretch;
  width: calc(5.4 * var(--u));
  background: rgba(46, 71, 85, .08);
}
.kmos__pkg-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.kmos__pkg-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(.2 * var(--u));
  /* The card's inset lives here now that the picture has none. */
  padding: calc(.62 * var(--u)) calc(.72 * var(--u));
}
.kmos__pkg-place {
  font-size: max(8px, calc(.5 * var(--u)));
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .62;
}
.kmos__pkg-title {
  font-size: max(10px, calc(.68 * var(--u)));
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kmos__pkg-meta {
  display: flex;
  align-items: center;
  gap: calc(.55 * var(--u));
  font-size: max(8px, calc(.54 * var(--u)));
  opacity: .78;
}
.kmos__pkg-rate {
  display: inline-flex;
  align-items: center;
  gap: calc(.2 * var(--u));
  color: #1BA94C;
  opacity: 1;
}
.kmos__pkg-rate svg { width: max(9px, calc(.6 * var(--u))); height: max(9px, calc(.6 * var(--u))); }

.kmos__pkg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(.5 * var(--u));
  margin-top: calc(.22 * var(--u));
}
.kmos__pkg-price { display: inline-flex; align-items: baseline; gap: calc(.3 * var(--u)); }
.kmos__pkg-price s { font-size: max(8px, calc(.52 * var(--u))); opacity: .5; }
.kmos__pkg-price b { font-size: max(11px, calc(.78 * var(--u))); font-weight: 700; }
.kmos__pkg-cta {
  flex: none;
  padding: calc(.3 * var(--u)) calc(.7 * var(--u));
  border-radius: 999px;
  background: var(--kmos-orange);
  color: #2e4755;
  font-size: max(8px, calc(.54 * var(--u)));
  font-weight: 600;
  line-height: 1.2;
}

/* ---------------------------- promo tiles ----------------------------
   Two tiles carry a package offer instead of a photograph: the navy one on
   the left, the yellow one on the right. Everything inside is sized in the
   same container units as the rest of the banner, so the cards grow with the
   cluster — including the phone layout, which scales --u up. */
.kmos__promo {
  box-shadow: none;
  text-decoration: none;
}
.kmos__promo--dark { background: #2e4755; color: #FAF8F3; }
.kmos__promo--gold { background: #FBD24B; color: #2e4755; }

.kmos__promo-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(.34 * var(--u));
  padding: calc(.85 * var(--u));
}
/* The right cluster is turned half a turn, so its card is turned back the
   same way the photographs are. */
.kmos__side--r .kmos__promo-in { transform: rotate(180deg); }

.kmos__promo-t {
  font-size: max(11px, calc(.86 * var(--u)));
  font-weight: 600;
  line-height: 1.22;
}
.kmos__promo-b {
  display: inline-flex;
  align-items: center;
  gap: calc(.36 * var(--u));
  margin-top: calc(.62 * var(--u));
  padding: calc(.38 * var(--u)) calc(.72 * var(--u));
  border-radius: 999px;
  font-size: max(8px, calc(.5 * var(--u)));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.kmos__promo-b svg {
  flex: none;
  width: max(8px, calc(.56 * var(--u)));
  height: max(8px, calc(.56 * var(--u)));
}
.kmos__promo--dark .kmos__promo-b { background: #FAF8F3; color: #2e4755; }
.kmos__promo--gold .kmos__promo-b { background: #2e4755; color: #FAF8F3; }

@keyframes kmos-tile {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------- the headline ---------------------------- */
/* Dead centre of the stage: the stage is as tall as the clusters, so the
   words sit on the clusters' own centre line with equal room above and
   below, and equal room either side. */
.kmos__copy {
  position: relative;
  z-index: 3;
  padding: 0;
  text-align: center;
}
.kmos__title {
  margin: 0;
  font-family: inherit;
  font-size: max(28px, calc(3.25 * var(--u)));
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kmos-ink);
  animation: kmos-up .8s var(--kmos-ease) backwards;
}
.kmos__title em {
  font-style: normal;
  background: linear-gradient(90deg, #BD830D 0%, #BD830D 45%, #BD830D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kmos__sub {
  margin: calc(.82 * var(--u)) 0 0;
  font-size: max(14px, calc(1.19 * var(--u)));
  font-weight: 400;
  line-height: 1.5;
  color: var(--kmos-sub);
  animation: kmos-up .8s var(--kmos-ease) .12s backwards;
}
@keyframes kmos-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------- the two ways in -------------------------
   Skiing on the left, tours on the right, mirrored about the centre line:
   the same width, the same outline, no fill. */
.kmos__ways {
  display: flex;
  justify-content: center;
  gap: max(12px, calc(1 * var(--u)));
  margin-top: calc(1.35 * var(--u));
  animation: kmos-up .8s var(--kmos-ease) .12s backwards;
}
.kmos__way {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: max(8px, calc(.5 * var(--u)));
  min-width: max(172px, calc(11.4 * var(--u)));
  height: max(44px, calc(2.9 * var(--u)));
  padding: 0 max(18px, calc(1.2 * var(--u)));
  border: 1.5px solid rgba(46, 71, 85, .42);
  border-radius: 999px;
  background: transparent;
  color: var(--kmos-ink);
  font-size: max(13px, calc(.84 * var(--u)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s var(--kmos-ease), color .25s var(--kmos-ease), transform .25s var(--kmos-ease);
}
.kmos__way svg { flex: none; width: max(16px, calc(1 * var(--u))); height: max(16px, calc(1 * var(--u))); }
.kmos__way:hover { border-color: var(--kmos-orange); color: var(--kmos-orange); transform: translateY(-2px); }
.kmos__way:focus-visible { outline: 2px solid var(--kmos-orange); outline-offset: 3px; }

/* ============================ DESTINATION RAIL ============================
   A full-width hairline under a centred rail. The tabs scroll sideways; the
   arrows sit over the rail, outside the scroller, so the scroller's clipping
   never catches them. */
/* Under the search card, centred, with no rule under it. */
.kmos__bar {
  position: relative;
  z-index: 2;
  margin-top: calc(1.2 * var(--u));
}
.kmos__rail {
  position: relative;
  width: calc(52 * var(--u));
  max-width: calc(100% - 24px);
  margin: 0 auto;
}
/* The ends fade by masking the tabs themselves rather than laying a colour
   over them, so the fade is right on whatever the page gradient is doing
   behind it. Each end only fades while there is more to scroll to. */
.kmos__track {
  --fade-l: 0px;
  --fade-r: calc(9 * var(--u));
  display: flex;
  gap: calc(2.4 * var(--u));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 0 calc(5 * var(--u)) calc(.36 * var(--u)) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent calc(100% - var(--fade-r) * .28));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent calc(100% - var(--fade-r) * .28));
}
.kmos__track::-webkit-scrollbar { display: none; }
.kmos__rail:not(.is-start) .kmos__track { --fade-l: calc(5 * var(--u)); }
.kmos__rail.is-end .kmos__track { --fade-r: 0px; }

.kmos__tab {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(.4 * var(--u));
  /* Room above the icon for a Trending flag. */
  padding: max(12px, calc(.6 * var(--u))) 0 calc(.5 * var(--u));
  color: var(--kmos-label);
  font-size: max(12px, calc(.66 * var(--u)));
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease;
}
.kmos__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background-color .2s ease;
}
.kmos__tab:hover { color: #2e4755; }
.kmos__tab:hover .kmos__ic { color: var(--kmos-orange); }
/* Champagne is too pale for small type on Warm White: the live label is
   Burgundy, its underline and icon carry the Champagne. */
/* No underline on the live tab, as in the reference: the weight marks it. */
.kmos__tab.is-on { color: #2e4755; font-weight: 500; }
.kmos__tab:focus-visible { outline: 2px solid var(--kmos-orange); outline-offset: 4px; border-radius: 4px; }

.kmos__ic {
  position: relative;
  width: max(20px, calc(1.2 * var(--u)));
  height: max(20px, calc(1.2 * var(--u)));
  color: var(--kmos-icon);
  transition: color .2s ease;
}
.kmos__ic svg { display: block; width: 100%; height: 100%; }

/* Pinned to the icon's top-right corner, as in the reference. */
.kmos__hot {
  position: absolute;
  left: calc(100% - .15 * var(--u));
  bottom: calc(100% - .05 * var(--u));
  height: max(13px, calc(.81 * var(--u)));
  padding: 0 max(4px, calc(.29 * var(--u)));
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: #BD830D;
  color: #2e4755;
  font-size: max(8px, calc(.48 * var(--u)));
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.kmos__step {
  position: absolute;
  top: calc(50% - .18 * var(--u));
  width: max(34px, calc(2.55 * var(--u)));
  height: max(34px, calc(2.55 * var(--u)));
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 248, 243, .78);
  color: #2e4755;
  box-shadow: 0 1px 3px rgba(46, 71, 85, .12);
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity .25s ease, background-color .2s ease;
}
.kmos__step:hover { background: #FAF8F3; }
.kmos__step:focus-visible { outline: 2px solid var(--kmos-orange); outline-offset: 2px; }
.kmos__step svg { width: 42%; height: 42%; }
.kmos__step--next { right: 0; }
.kmos__step--prev { left: 0; }

/* The arrows only show where there is more to scroll to. */
.kmos__rail.is-start .kmos__step--prev,
.kmos__rail.is-end .kmos__step--next { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============================== FIND YOUR TRIP ==============================
   The ski hub's search card (css/ski-search.css), fitted to the banner: the
   full measure between the clusters' outer edges, just under the stage, where
   the tiles have already ended — so nothing overlaps it. A frosted white card
   rather than a solid slab, so the snowfield still reads through its edge. */
.kmos__find {
  position: relative;
  z-index: 4;
  width: min(calc(100% - 40px), max(860px, calc(76 * var(--u))), 1160px);
  margin: calc(1.1 * var(--u)) auto 0;
  animation: kmos-up .8s var(--kmos-ease) .2s backwards;
}
.kmos__find .sks { width: 100%; }
.kmos__find .sks-card {
  padding: max(16px, calc(1.25 * var(--u))) max(18px, calc(1.45 * var(--u))) max(14px, calc(1.05 * var(--u)));
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: max(16px, calc(1.2 * var(--u)));
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
          backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 18px 48px rgba(46, 71, 85, .16), 0 2px 6px rgba(46, 71, 85, .06);
}
/* A touch tighter than on the ski page, so every field shows its whole value
   ("Arriving → Returning", "2 adults · 1 room") on a laptop screen. The dates
   get the most room, since they hold two values. */
/* Desktop only: ski-search.css restacks the fields below 900px. */
@media (min-width: 901px) {
  .kmos__find .sks-bar {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .9fr) auto;
    gap: 12px;
  }
}
.kmos__find .sks-box { gap: 10px; min-height: 54px; padding: 0 14px; font-size: .9rem; }
.kmos__find .sks-go,
.kmos__find .sks-go__more { height: 54px; }
.kmos__find .sks-go { min-width: 132px; padding: 0 18px; }
.kmos__find .sks-chip { padding: 9px 15px; font-size: .86rem; }
/* The fields sit on white, so they take a faint tint of their own. */
.kmos__find .sks-box { background: rgba(246, 248, 249, .92); }
.kmos__find .sks-box:hover { background: #FFFFFF; }
/* The row of trip parts is centred under the fields, as in the reference;
   the auto margins give way as soon as it has to scroll. */
.kmos__find .sks-parts { margin-top: max(12px, calc(.95 * var(--u))); }
.kmos__find .sks-parts__track { margin-inline: auto; }
.kmos__find .sks-chip { background: transparent; }
.kmos__find .sks-chip:hover { background: #FFFFFF; }
.kmos__find .sks-chip[aria-expanded="true"] { background: #2e4755; }
/* The explainer line under the row is the ski page's; the banner keeps to
   the fields and the parts. */
.kmos__find .sks-more { display: none; }
/* The panels open over the rail and the sections below. */
.kmos__find .sks-pop { z-index: 30; text-align: left; }
/* The ski pages define this; the homepage does not load their stylesheet. */
.kmos__find .skl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ============================ REFERENCE LAYOUT ============================
   The banner without its two buttons and destination rail: the search card
   rides straight under the headline and the photograph's snow drifts fill
   the foot. Measured off the reference in hundredths of the banner's width
   (u), from the top of the stage, where the tiles start:
       headline  3.87 → 13.1    two lines of 3.25u at 1.42
       card      14.6 → ~23     56.3u wide, centred, tucked under the
                                innermost tiles (which end at 13.9u)
   The banner keeps its height (min-height on .kmos). Phones keep their own
   stacked layout, below. */
@media (min-width: 901px) {
  /* Centred with 3.7u of room beneath it, the headline rides 1.85u above
     the stage's centre line, which puts its top at 3.87u. */
  .kmos__copy { margin-bottom: calc(3.7 * var(--u)); }

  /* The stage is 20.67u tall, so -6.07u brings the card's top to 14.6u. */
  .kmos__find {
    width: min(calc(100% - 40px), max(860px, calc(56.3 * var(--u))));
    margin-top: calc(-6.07 * var(--u));
  }
  /* A flat, square-cornered white card, as the reference draws it. */
  .kmos__find .sks-card {
    padding: max(12px, calc(.95 * var(--u))) max(12px, calc(.7 * var(--u))) max(10px, calc(.6 * var(--u)));
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 2px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 2px 10px rgba(46, 71, 85, .06);
  }
  .kmos__find .sks-field { gap: max(6px, calc(.45 * var(--u))); }
  .kmos__find .sks-field__lab { font-size: max(12px, calc(.72 * var(--u))); }
  .kmos__find .sks-bar { gap: max(10px, calc(.62 * var(--u))); }
  .kmos__find .sks-box {
    min-height: max(44px, calc(2.6 * var(--u)));
    font-size: max(13px, calc(.8 * var(--u)));
  }
  .kmos__find .sks-go,
  .kmos__find .sks-go__more { height: max(44px, calc(2.6 * var(--u))); }
  .kmos__find .sks-parts { margin-top: max(10px, calc(.7 * var(--u))); }
  .kmos__find .sks-chip {
    padding: max(7px, calc(.45 * var(--u))) max(12px, calc(.85 * var(--u)));
    font-size: max(12px, calc(.74 * var(--u)));
  }
}
/* The card cannot go narrower than 860px and still show its fields whole.
   Where 860px is more than the reference's 56.3u — banners under 1528px —
   it reaches past the notch under the innermost tiles, so it drops just far
   enough to clear them: below the third column's lower tile (17.41u) while
   it still sits inside the second columns, and below every tile once it is
   wide enough to reach those too. */
@media (min-width: 901px) {
  @container (max-width: 1528px) {
    .kmos__find { margin-top: calc(-2.95 * var(--u)); }
  }
  @container (max-width: 1190px) {
    .kmos__find { margin-top: calc(.9 * var(--u)); }
  }
}

/* ------------------------- the rest of the page -------------------------
   Every section below the banner shares the destination rail's edges, so the
   whole page lines up on one column. 69.4% is that rail: .kmos__rail is
   69.4cqw of the banner, and the banner is as wide as the sections are. */
@media (min-width: 1100px) {
  .kmos ~ .container,
  .kmos ~ * .container {
    max-width: 69.4%;
    padding-inline: 0;
  }
}

/* ------------------------------ dark theme ------------------------------ */
:root[data-theme="dark"] .kmos {
  --kmos-ink: #FAF8F3;
  --kmos-sub: rgba(250, 248, 243, .74);
  --kmos-label: rgba(250, 248, 243, .86);
  --kmos-icon: rgba(250, 248, 243, .78);
  --kmos-rule: rgba(250, 248, 243, .1);
  /* The photograph is near-white, so it is taken right down here rather than
     left to glare behind light type. */
  --kmos-wash: rgba(46, 71, 85, .88);
}
:root[data-theme="dark"] .kmos__tab:hover { color: #FAF8F3; }
:root[data-theme="dark"] .kmos__step { background: rgba(46, 71, 85, .85); color: #FAF8F3; }
:root[data-theme="dark"] .kmos__step:hover { background: #2e4755; }
/* The search card stays a light card on the navy wash — it is the ski
   pages' card, drawn in their light colours — so the browser's own select
   popups are told to match it. */
.kmos__find .sks { color-scheme: light; }
:root[data-theme="dark"] .kmos__way { border-color: rgba(250, 248, 243, .45); }
:root[data-theme="dark"] .kmos__find .sks-card { background: rgba(255, 255, 255, .94); }

/* ------------------------------ responsive ------------------------------
   On a phone the proportional layout would shrink everything to nothing, so
   the stage stacks: the left cluster, enlarged, over the headline; the rail
   becomes a plain swipeable row. */
@media (max-width: 900px) {
  /* Phones carry the site's fixed 44px .topbar above the header. */
  .kmos { padding-top: calc(var(--header-h, 76px) + 44px); min-height: 0; }
  /* The banner is far taller than wide here, so the picture covers it rather
     than sitting as a thin strip across the top. */
  .kmos::before { background-position: center top, center top, 0 0; background-size: auto, cover, auto; }

  .kmos__stage { min-height: 0; margin-top: 18px; flex-direction: column; }
  .kmos__side { position: relative; top: auto; }
  .kmos__side--r { display: none; }
  /* Three times the size, and nudged right so the outer column that hangs
     off the edge on desktop is all in view. */
  .kmos__side--l {
    --u: 2.95cqw;
    left: auto;
    margin: 0 auto;
    transform: translateX(calc(1.68 * var(--u)));
  }
  .kmos__tile { border-radius: 14px; }
  /* The cluster is three times the size here, which would take the card with
     it. The name on the reverse is enough on a phone. */
  .kmos__pkg { display: none; }

  .kmos__copy { padding: 22px 16px 0; }
  .kmos__title { font-size: clamp(28px, 8.4cqw, 44px); line-height: 1.3; }
  .kmos__sub { margin-top: 8px; font-size: 15px; }

  .kmos__bar { margin-top: 18px; }
  .kmos__rail { width: 100%; max-width: none; }
  /* Snapping aligns to the scroller's edge, not its padding, so the inset
     has to be repeated as scroll-padding or the first tab sits flush. */
  .kmos__track {
    gap: 26px;
    padding: 0 16px 6px;
    scroll-padding-inline: 16px;
    scroll-snap-type: x proximity;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .kmos__tab { gap: 8px; padding: 18px 0 10px; font-size: 13px; scroll-snap-align: start; }
  .kmos__ic { width: 26px; height: 26px; }
  .kmos__hot { left: calc(100% - 3px); bottom: calc(100% - 1px); height: 14px; padding: 0 5px; font-size: 8px; }
  .kmos__step { display: none; }

  /* The two ways in share the width, still mirrored. */
  .kmos__ways { margin-top: 18px; gap: 10px; }
  .kmos__way { flex: 1 1 0; min-width: 0; max-width: 200px; height: 46px; padding: 0 14px; font-size: 14px; }

  /* The search card takes the phone's width; ski-search.css stacks its
     fields at this size. */
  .kmos__find { width: calc(100% - 32px); margin-top: 22px; }
}

/* Someone who has asked for less motion gets the layout, not the entrance. */
@media (prefers-reduced-motion: reduce) {
  .kmos__tile, .kmos__title, .kmos__sub, .kmos__ways, .kmos__find { animation: none; }
  .kmos__tile { transition: none; }
  /* The tiles still turn over — they just arrive there at once. */
  .kmos__flip { transition: none; }
  .kmos__track { scroll-behavior: auto; }
}

/* On a phone the cluster is enlarged and nearly fills the width, so the two
   inner columns grow toward the left instead of running off the screen. */
@media (max-width: 900px) {
  .kmos__tile--c3,
  .kmos__tile--c4 { transform-origin: 100% var(--oy, top); }
  /* Here the whole cluster is already in view. */
  .kmos__side--l .kmos__tile--c1 { --tx: 0; }
}