/* =====================================================================
   KOHWAN — banner
   Full-bleed photograph, headline and search centred over it, a rail of
   product cards pinned to each edge, trust row beneath. Measured off the comp
   at a 1839px canvas and written as vw against that base.

     banner        855 tall (46.5vw)
     headline      54px, coloured second word + swoosh
     search pill   625x72, fully rounded, blue submit
     rail label    11px caps, .22em, with a rule
     card          163x318 (0.513) · radius 12 · 16px gutters
     rail arrow    37 circle, outside the track
   ===================================================================== */

/* =====================================================================
   FEATURED STAYS
   Serif heading with line arrows opposite, a tab row over a hairline, then a
   rail of photo cards with a badge, title, place and nightly rate.
   ===================================================================== */
/* Transparent so the site-wide gradient runs behind it; the photo cards
   supply the contrast this section used to get from a white slab. */
.kstay { padding: clamp(30px, 3.6vw, 56px) 0; background: transparent; }

.kstay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(14px, 1.6vw, 24px);
}
.kstay__title {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 2.3vw, 2.15rem);
  font-weight: 500;
  color: var(--ink);
}
:root[data-theme="dark"] .kstay__title { color: var(--ink); }

/* Bare line arrows, not buttons — the comp keeps them very quiet. */
.kstay__arrows { display: flex; align-items: center; gap: 16px; flex: none; }
.kstay__step {
  display: grid;
  place-items: center;
  width: 34px; height: 26px;
  border: 0;
  background: none;
  color: rgba(46, 71, 85, .46);
  cursor: pointer;
  transition: color .2s var(--ease), opacity .2s var(--ease);
}
.kstay__step svg { width: 30px; height: 20px; }
.kstay__step:hover { color: var(--ink); }
.kstay__step[disabled] { opacity: .3; cursor: default; }

.kstay__tabs {
  display: flex;
  gap: clamp(14px, 2.2vw, 40px);
  margin-bottom: clamp(20px, 2.4vw, 34px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.kstay__tabs::-webkit-scrollbar { display: none; }

/* The tabs and "View all hotels" share one row and one rule underneath. */
.kstay__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 2.4vw, 34px);
  border-bottom: 1px solid var(--border);
}
.kstay__bar .kstay__tabs {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.kstay__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 10px 0 14px;
  color: #BD830D;
  font-size: clamp(.86rem, .98vw, .96rem);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.kstay__all svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.kstay__all:hover { color: var(--ink); }
.kstay__all:hover svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .kstay__all { font-size: .82rem; gap: 6px; }
}
.kstay__tab {
  position: relative;
  flex: none;
  padding: 10px 2px 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: clamp(.86rem, .98vw, .96rem);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.kstay__tab:hover { color: var(--ink); }
.kstay__tab.is-active { color: #BD830D; font-weight: 600; }
.kstay__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: #BD830D;
}

.kstay__rail { position: relative; }
.kstay__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kstay__track::-webkit-scrollbar { display: none; }

/* Three across with the fourth peeking, as the comp has it. */
.scard {
  display: block;
  flex: 0 0 clamp(240px, 30%, 420px);
  scroll-snap-align: start;
  color: var(--ink);
}
.scard[hidden] { display: none; }

.scard__media {
  position: relative;
  display: block;
  aspect-ratio: 600 / 440;
  border-radius: 10px;
  overflow: hidden;
}
.scard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.scard__badge {
  position: absolute;
  top: 14px; left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  background: rgba(46, 71, 85, .88);
  color: var(--gold);
  font-size: clamp(.6rem, .68vw, .68rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.scard__badge svg { width: 14px; height: 14px; flex: none; }

.scard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.scard__name {
  font-size: clamp(.95rem, 1.12vw, 1.12rem);
  font-weight: 700;
  line-height: 1.3;
}
.scard__rate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: clamp(.88rem, 1vw, 1rem);
  font-weight: 700;
}
.scard__rate svg { width: 15px; height: 15px; color: #BD830D; }

.scard__place {
  display: block;
  margin-top: 6px;
  font-size: clamp(.82rem, .93vw, .9rem);
  color: var(--muted);
}
.scard__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.scard__price b { font-size: clamp(1.05rem, 1.3vw, 1.3rem); font-weight: 700; }
.scard__price span { font-size: clamp(.82rem, .93vw, .9rem); color: var(--muted); }
.scard__price small { font-size: clamp(.74rem, .84vw, .82rem); color: var(--muted); }

@media (max-width: 900px)  { .scard { flex: 0 0 46%; } }
@media (max-width: 620px)  { .scard { flex: 0 0 82%; } }
@media (prefers-reduced-motion: reduce) { .kstay__track { scroll-behavior: auto; } }

/* =====================================================================
   JOURNEY IN FRAMES
   Centred title with a gold rule, then a strip of photos whose top and bottom
   edges bow inward toward the middle.

   The curve is an SVG mask on the track rather than per-image heights: that
   way the arc belongs to the frame and stays still while the photos scroll
   through it, which is what the comp does.
   ===================================================================== */
/* The strip moved into the footer: these rules now live in footer.css,
   which loads on every page, while this sheet is pushed only on the
   homepage. Kept here it overrode the footer copy on the homepage only. */

/* =====================================================================
   BANNER — header on white, artwork beneath it

   The comp seats the header on a white bar above the photograph rather than
   over it, so the banner starts below the header rather than under it.
   ===================================================================== */
:root { --ghead-h: 110px; }
@media (max-width: 1099px) { :root { --ghead-h: 74px; } }

/* The header floats over the artwork with nothing behind it. Its type stays
   full-strength navy and picks up a soft light halo so every item reads at
   100% against the photograph rather than being dimmed by a scrim. */
.site-header.ghead {
  top: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 0;
}
.ghead .gnav__btn,
.ghead .gstack,
.ghead .navmode-btn,
.ghead .nav-toggle span {
  opacity: 1;
}
.ghead .gnav__btn,
.ghead .gstack__lbl {
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(250, 248, 243, .75);
}
.ghead .gnav__btn svg,
.ghead .gstack__ic svg {
  filter: drop-shadow(0 1px 2px rgba(250, 248, 243, .7));
}
/* Panels opened from the header keep their own solid background. */
.ghead .gnav__panel,
.ghead .gwx__panel { text-shadow: none; }
:root[data-theme="dark"] .ghead .gnav__btn,
:root[data-theme="dark"] .ghead .gstack__lbl {
  text-shadow: 0 1px 3px rgba(46, 71, 85, .55);
}

/* The green utility strip is off on the homepage: the banner starts directly
   under the header. Nothing it carried is lost — the contact details are in
   the footer and the sidebar, and the header carries Live info and Weather. */
.ubar { display: none; }


/* ---------------- background ----------------
   A single panorama, so no masking or feathering: cover + centre is enough. */

/* The artwork already carries a pale haze through the middle, so this only
   lifts it enough to seat the navy type — it is nowhere near a wash. */

/* ---------------- centre column ---------------- */

/* The comp underlines the coloured word with a hand-drawn stroke. */

/* ---------------- booking widget ---------------- */
.gbook {
  width: 100%;
  padding: clamp(10px, .9vw, 14px);
  border-radius: 18px;
  background: rgba(250, 248, 243, .96);
  box-shadow: 0 18px 46px rgba(46, 71, 85, .18);
  text-align: left;
}
.gbook__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 2px 6px 10px;
}

/* trip type — the active one is a solid navy pill */
.gbook__trip { display: flex; align-items: center; gap: 2px; }
.gbook__triptab {
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #2e4755;
  font: inherit;
  font-size: clamp(.78rem, .88vw, .88rem);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.gbook__triptab:hover { color: var(--g-ink); }
.gbook__triptab.is-active { background: var(--g-ink); color: #FAF8F3; font-weight: 600; }

/* miles toggle */
.gmiles { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.gmiles__lbl { font-size: clamp(.76rem, .86vw, .86rem); color: #2e4755; }
.gmiles__box { position: absolute; opacity: 0; width: 0; height: 0; }
.gmiles__switch {
  position: relative;
  width: 42px; height: 24px;
  flex: none;
  border-radius: 999px;
  background: rgba(46, 71, 85, .21);
  transition: background-color .2s var(--ease);
}
.gmiles__switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FAF8F3;
  box-shadow: 0 1px 3px rgba(46, 71, 85, .35);
  transition: transform .2s var(--ease);
}
.gmiles__box:checked + .gmiles__switch { background: var(--g-ink); }
.gmiles__box:checked + .gmiles__switch::after { transform: translateX(18px); }
.gmiles__box:focus-visible + .gmiles__switch { outline: 2px solid var(--g-blue); outline-offset: 2px; }

/* field row */
.gbook__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}
.gfield {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(46, 71, 85, .1);
  border-radius: 12px;
  background: #FAF8F3;
  cursor: text;
  transition: border-color .2s var(--ease);
}
.gfield:focus-within { border-color: var(--g-ink); }
.gfield__ic { display: grid; place-items: center; flex: none; color: #2e4755; }
.gfield__ic svg { width: 20px; height: 20px; }
.gfield__txt { min-width: 0; flex: 1 1 auto; }
.gfield__txt small {
  display: block;
  font-size: .72rem;
  color: rgba(46, 71, 85, .69);
  line-height: 1.3;
}
.gfield__txt input,
.gfield__txt select {
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: clamp(.84rem, .95vw, .95rem);
  font-weight: 600;
  color: var(--g-ink);
  outline: none;
}
.gfield__txt select { cursor: pointer; appearance: none; }
.gfield__txt input::placeholder { color: var(--g-ink); opacity: 1; font-weight: 600; }
.gfield__caret {
  flex: none;
  width: 0; height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5px solid rgba(46, 71, 85, .69);
}

/* swap sits between From and To, as its own column */
.gbook__swap {
  align-self: center;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(46, 71, 85, .1);
  border-radius: 50%;
  background: #FAF8F3;
  color: var(--g-ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .3s var(--ease);
}
.gbook__swap svg { width: 16px; height: 16px; }
.gbook__swap:hover { background: #FAF8F3; transform: rotate(180deg); }

.gbook__go {
  padding: 0 clamp(20px, 2vw, 34px);
  border: 0;
  border-radius: 12px;
  background: var(--g-gold);
  /* Navy ink, not white: #FAF8F3 on mustard is ~2.6:1 and fails at this size.
     Navy on the same gold is ~6.5:1 and keeps the button reading as gold. */
  color: var(--brand-navy-dark);
  font: inherit;
  font-size: clamp(.88rem, 1vw, 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.gbook__go:hover { background: var(--brand-navy); color: #FAF8F3; }

/* =====================================================================
   BANNER — responsive
   The booking widget's own breakpoints. (They used to live at the foot of
   the decks band; that band is gone, so they sit with the banner now.)
   ===================================================================== */
@media (max-width: 900px) {
  .gbook__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gbook__swap { display: none; }
  .gbook__go { grid-column: 1 / -1; padding: 13px 20px; }
}
@media (max-width: 620px) {
  .gbook__fields { grid-template-columns: minmax(0, 1fr); }
  .gbook__top { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gbook__swap { transition: none; }
}
/* =====================================================================
   COMBINE TOURS — illustrated Kashmir map + matching tours

   The map is a fixed-ratio stage: an SVG landmass (real district
   boundaries) with markers positioned in per-cent, so pan and zoom are a
   single transform on .kmap__world and everything travels together.
   Overlays (legend, index, locator, scale, controls) sit outside the
   viewport so they stay put while the map moves under them.
   ===================================================================== */
.kmap { padding: 74px 0 78px; background: transparent; }
.kmap__title {
  margin: 0 0 40px; text-align: center; font-weight: 700; line-height: 1.28;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); color: #2e4755; letter-spacing: -.01em;
}

/* Map on the left, the tours it selects on the right — the reference layout.
   The map column is the narrower of the two, so every label on it is sized in
   vw against that column rather than in fixed rem. */
.kmap__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 38px); align-items: stretch;
}
/* Map and its spot index stack in the left column; the tours run full height
   of the right one. */
.kmap__panel { grid-column: 1; grid-row: 1; }


/* ------------------------------ map stage ------------------------------ */
/* Outlined, but with no fill of its own — the page colour shows through, so
   the generous margin inside the SVG box reads as breathing room. */
.kmap__panel {
  container-type: inline-size;
  position: relative; border: 1px solid #BD830D; border-radius: 14px;
  background: none; overflow: hidden; box-shadow: none;
}
.kmap__viewport {
  position: relative; aspect-ratio: 1000 / 934; overflow: hidden;
  cursor: grab; touch-action: pan-y;
}
.kmap__viewport.is-drag { cursor: grabbing; }
.kmap__world {
  position: absolute; inset: 0; transform-origin: 0 0;
  will-change: transform;
}
.kmap__world.is-eased { transition: transform .28s ease; }
.kmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ------------------------------ markers ------------------------------ */
/* Markers scale with the map but keep their own size: the counter-scale
   is applied by JS on --k-inv so labels stay legible while zoomed. */
.kmap__pin, .kmap__min, .kmap__air {
  position: absolute; z-index: 2; background: none; border: 0; padding: 0;
  font: inherit; color: #2e4755; white-space: nowrap; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transform: translate(-50%, -50%) scale(var(--k-inv, 1));
  transform-origin: 50% 50%;
}

/* Headline spot: numbered teardrop whose TIP sits on the coordinate, with the
   name pill hung to one side. Which side (and an optional vertical nudge) is
   set per pin in the view, so the tight clusters — Srinagar/Dal Lake/Tulip
   Garden, Pahalgam/Betaab/Aru — pull apart instead of stacking. */
.kmap__pin {
  z-index: 3; display: block;
  width: clamp(11px, 3.4cqw, 21px); height: clamp(15px, 4.45cqw, 28px);
  transform: translate(-50%, -100%) scale(var(--k-inv, 1));
  transform-origin: 50% 100%;
}
.kmap__drop { position: relative; display: block; width: 100%; height: 100%; }
/* The teardrop carries no number — the name pill beside it does the labelling,
   and the white centre keeps the marker reading as a pin rather than a blob. */
.kmap__drop svg { width: 100%; height: 100%; display: block; fill: #2e4755; filter: drop-shadow(0 2px 3px rgba(46, 71, 85, .3)); }
.kmap__tag {
  position: absolute; top: calc(50% + var(--k-ty, 0px)); transform: translateY(-50%);
  background: #FAF8F3; border-radius: 4px; padding: 3px 7px;
  font-size: clamp(6.4px, 1.78cqw, 12.4px); font-weight: 700; color: #2e4755; line-height: 1.3;
  box-shadow: 0 1px 3px rgba(46, 71, 85, .22);
}
.kmap__pin--r .kmap__tag { left: calc(100% + 4px); }
.kmap__pin--l .kmap__tag { right: calc(100% + 4px); }
.kmap__pin:hover .kmap__tag { color: #2e4755; }
.kmap__pin.is-active .kmap__drop svg { fill: #2e4755; }
.kmap__pin.is-active .kmap__tag { background: #2e4755; color: #FAF8F3; }

/* supporting place: hollow ring + plain label */
.kmap__min { z-index: 2; }
.kmap__ring {
  width: clamp(4px, 1.15cqw, 8px); height: clamp(4px, 1.15cqw, 8px); flex: none; border-radius: 50%;
  background: #FAF8F3; border: 1.3px solid #BD830D;
}
.kmap__min span {
  font-size: clamp(6px, 1.66cqw, 11.4px); font-weight: 500; color: #2e4755;
  position: relative; top: calc(var(--k-ty, 0px) * 0.62);
  text-shadow: 0 0 3px #FAF8F3, 0 0 3px #FAF8F3, 0 0 3px #FAF8F3;
}
.kmap__min--l { flex-direction: row-reverse; }
.kmap__min--t { flex-direction: column-reverse; gap: 2px; }
.kmap__min--b { flex-direction: column; gap: 2px; }
.kmap__min:hover span { color: #BD830D; }
.kmap__min:hover, .kmap__min.is-active { z-index: 4; }
.kmap__min.is-active .kmap__ring { background: #2e4755; border-color: #2e4755; }
.kmap__min.is-active span { color: #2e4755; font-weight: 700; }

.kmap__pin:focus-visible, .kmap__min:focus-visible { outline: 2px solid #2e4755; outline-offset: 3px; border-radius: 4px; }

/* airport */
.kmap__air { cursor: default; gap: 4px; }
.kmap__air svg { width: clamp(8px, 2.3cqw, 15px); height: clamp(8px, 2.3cqw, 15px); color: #2e4755; flex: none; }
.kmap__air b { font-size: clamp(6px, 1.66cqw, 11.4px); font-weight: 500; color: #2e4755; text-shadow: 0 0 3px #FAF8F3, 0 0 3px #FAF8F3; }

/* ------------------------------ overlays ------------------------------ */
.kmap__legend, .kmap__locator {
  position: absolute; z-index: 6; background: #FAF8F3;
  border: 1px solid #BD830D; border-radius: 10px;
}
.kmap__legend { left: 13px; top: 13px; padding: clamp(6px, 1.7cqw, 12px) clamp(8px, 2.3cqw, 16px); font-size: clamp(6.2px, 1.72cqw, 12px); color: #2e4755; }
.kmap__legend p { margin: 0 0 6px; display: flex; align-items: center; gap: 9px; }
.kmap__legend p:last-child { margin-bottom: 0; }
.kmap__key { width: clamp(16px, 7.4cqw, 50px); height: 0; border-top: 2px solid #BD830D; flex: none; }
.kmap__key--road { border-top-width: 3px; border-top-style: dashed; border-top-color: #BD830D; }
.kmap__key--pass { border-top-width: 3px; border-top-style: dashed; border-top-color: rgba(46, 71, 85, .22); }



.kmap__locator { right: 13px; top: 13px; width: clamp(62px, 19cqw, 150px); padding: clamp(6px, 1.9cqw, 13px); text-align: center; }
.kmap__locator b {
  display: block; font-size: clamp(8px, 2.5cqw, 17px); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #2e4755; margin-bottom: 4px;
}
.kmap__locator svg { width: clamp(26px, 8.4cqw, 66px); height: auto; display: block; margin: 0 auto; opacity: .55; }

.kmap__scale { position: absolute; left: 15px; bottom: 14px; z-index: 6; width: calc(var(--k-scale, 22) * 1%); min-width: 96px; }
.kmap__scale-bar { display: flex; height: 6px; }
.kmap__scale-bar i { flex: 1; border: 1px solid #2e4755; border-right: 0; }
.kmap__scale-bar i:nth-child(even) { background: #2e4755; }
.kmap__scale-bar::after { content: ''; width: 0; border-right: 1px solid #2e4755; }
.kmap__scale-nums { display: flex; justify-content: space-between; margin-top: 2px; font-size: clamp(5.6px, 1.5cqw, 10px); color: #2e4755; }

.kmap__ctrl { position: absolute; right: 13px; bottom: 13px; z-index: 6; display: grid; gap: 6px; }
.kmap__ctrl button {
  width: clamp(22px, 6.6cqw, 42px); height: clamp(22px, 6.6cqw, 42px);
  border-radius: 50%; background: #FAF8F3;
  border: 1px solid #BD830D; color: #2e4755; cursor: pointer; display: grid; place-items: center;
}
.kmap__ctrl button:hover { border-color: rgba(46, 71, 85, .21); }
.kmap__ctrl button:last-child { border-radius: 9px; }
.kmap__ctrl svg { width: clamp(10px, 2.8cqw, 18px); height: clamp(10px, 2.8cqw, 18px); }

/* Full-screen: the panel takes over the window, the stage grows with it. */
.kmap__panel.is-full {
  position: fixed; inset: 0; z-index: 999; border-radius: 0; border: 0;
}
.kmap__panel.is-full .kmap__viewport { aspect-ratio: auto; height: 100%; }

/* ------------------------------ responsive ------------------------------ */
/* Below this the two columns stop paying their way: the map goes full width
   with the tours under it, and its overlays get their roomy sizing back. */
@media (max-width: 1024px) {
  .kmap__grid { grid-template-columns: 1fr; gap: 26px; }
  .kmap__panel { grid-column: 1; grid-row: auto; }
  .kmap__tag { font-size: .74rem; padding: 4px 9px; }
  .kmap__min span { font-size: .7rem; }
  .kmap__pin { width: 22px; height: 29px; }
  .kmap__ctrl button { width: 38px; height: 38px; }
}
@media (max-width: 720px) {
  .kmap { padding: 52px 0 56px; }
  .kmap__locator { display: none; }
  .kmap__legend { padding: 8px 11px; font-size: .66rem; }
  .kmap__tag { font-size: .64rem; padding: 3px 7px; }
  .kmap__min span { font-size: .62rem; }
  .kmap__place { font-size: 1.24rem; }
}

@media (prefers-reduced-motion: reduce) {
  .kmap__world.is-eased { transition: none; }
  .kmap__track { scroll-behavior: auto; }
}

/* =====================================================================
   SELECTED REGION
   Picking a pin opens this: a dark card carrying the region's name, a line
   about it, and the six places it is known for. One panel per region, all
   rendered, one shown — so the section never changes height as you click.
   ===================================================================== */
.kregion {
  grid-column: 2; grid-row: 1; height: 100%;
  display: flex; flex-direction: column;
  background: none; border: 0; border-radius: 0; overflow: visible;
  color: #2e4755;
}
.kregion[hidden] { display: none; }

/* ------------------------------- hero ------------------------------- */
.kregion__hero { flex: none; position: relative; padding: 0 clamp(4px, .6vw, 10px) clamp(18px, 2vw, 28px); }
.kregion__hero > img { display: none; }
.kregion__veil { display: none; }
.kregion__intro { position: relative; z-index: 2; max-width: 76%; }
.kregion__eyebrow {
  margin: 0 0 8px; font-size: clamp(.6rem, .68vw, .74rem); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(46, 71, 85, .6);
}
.kregion__name {
  margin: 0 0 10px; font-size: clamp(1.6rem, 2.9vw, 2.9rem); font-weight: 700;
  line-height: 1.06; letter-spacing: -.015em; color: #2e4755;
}
.kregion__blurb {
  margin: 0; font-size: clamp(.8rem, .92vw, .98rem); line-height: 1.55; color: rgba(46, 71, 85, .74);
}
.kregion__count {
  position: absolute; right: 0; top: 4px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: #FAF8F3; border: 1px solid rgba(46, 71, 85, .1);
  border-radius: 999px; padding: 7px 15px;
  font-size: clamp(.68rem, .78vw, .84rem); font-weight: 600; color: #2e4755;
}
.kregion__count svg { width: 14px; height: 14px; flex: none; }

/* ------------------------------- grid ------------------------------- */
/* Three across, two down — six places, always the same shape. */
.kregion__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 1.1vw, 16px);
  padding: 0 0 clamp(14px, 1.6vw, 22px);
  flex: 1; min-height: 0;
}

.rcard {
  position: relative; display: block; overflow: hidden;
  border: 1px solid rgba(46, 71, 85, .1); border-radius: 12px;
  text-decoration: none; color: #FAF8F3; min-height: 0;
  transition: border-color .18s ease, transform .18s ease;
}
.rcard:hover { border-color: #2e4755; transform: translateY(-2px); }
.rcard__media { position: absolute; inset: 0; display: block; background: #FAF8F3; border-radius: 11px; overflow: hidden; }
.rcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* set per tile so six tiles off one photograph each show a different part */
  object-position: var(--k-crop, center);
}
.rcard::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(46, 71, 85, .92) 4%, rgba(46, 71, 85, .5) 42%, rgba(46, 71, 85, .08) 78%);
}
.rcard__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px 14px; }
.rcard__name {
  display: flex; align-items: center; gap: 7px;
  font-size: clamp(.78rem, .92vw, 1rem); font-weight: 700; line-height: 1.25; color: #FAF8F3;
}
.rcard__name svg { width: 14px; height: 14px; flex: none; transition: transform .18s ease; }
.rcard:hover .rcard__name svg { transform: translateX(3px); }
.rcard__go {
  display: block; margin-top: 3px;
  font-size: clamp(.66rem, .76vw, .82rem); color: rgba(250, 248, 243, .83);
}

/* ------------------------------ actions ------------------------------ */
.kregion__acts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.2vw, 18px);
  padding: 0;
  flex: none;
}
.kregion__btn {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(46, 71, 85, .21); border-radius: 999px;
  padding: clamp(9px, 1vw, 14px) clamp(18px, 2vw, 30px);
  font-size: clamp(.78rem, .9vw, .95rem); font-weight: 600;
  color: #2e4755; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.kregion__btn svg { width: 15px; height: 15px; flex: none; }
.kregion__btn:hover { border-color: #2e4755; background: rgba(46, 71, 85, .05); }
.kregion__btn--gold {
  background: linear-gradient(180deg, #BD830D 0%, #BD830D 100%);
  border-color: #BD830D; color: #2e4755;
}
.kregion__btn--gold:hover { background: #FAF8F3; border-color: #FAF8F3; color: #2e4755; }

@media (max-width: 1024px) {
  .kregion { grid-column: 1; grid-row: auto; }
  .kregion__intro { max-width: 70%; }
}
@media (max-width: 620px) {
  .kregion__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kregion__intro { max-width: 100%; }
  .kregion__veil { background: linear-gradient(to top, #2e4755 26%, rgba(46, 71, 85, .72) 62%, rgba(46, 71, 85, .4) 100%); }
  .kregion__acts { flex-direction: column; }
  .kregion__btn { justify-content: center; }
}

/* =====================================================================
   BANNER
   One full-bleed photograph, the headline and the booking widget centred
   over it. The widget's own colours live here too — the .gbook rules above
   read them as var(--g-ink) / var(--g-gold) / var(--g-blue).
   ===================================================================== */
.ghero {
  --g-ink: #2e4755;
  --g-gold: #BD830D;
  --g-blue: #2e4755;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(84px, 10.5vw, 158px) 0 clamp(62px, 7vw, 104px);
}
.ghero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}
/* A pale wash so the navy headline holds against the sky and the snow. */
.ghero__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 78% at 50% 34%, rgba(250, 248, 243, .7) 0%, rgba(250, 248, 243, .34) 48%, rgba(250, 248, 243, 0) 78%),
    linear-gradient(to bottom, rgba(250, 248, 243, .28) 0%, rgba(250, 248, 243, 0) 34%);
}

.ghero__mid {
  position: relative;
  width: min(1290px, calc(100% - 8vw));
  margin: 0 auto;
  text-align: center;
}

.ghero__title {
  margin: 0 0 clamp(10px, 1.1vw, 18px);
  color: var(--g-ink);
  font-weight: 800;
  font-size: clamp(2rem, 4.1vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
/* The gold word carries the swoosh, so the stroke tracks the word's width
   however the headline scales. */
.ghero__hl { position: relative; display: inline-block; color: var(--g-gold); }
.ghero__swoosh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.2em;
  width: 100%;
  height: auto;
  color: var(--g-gold);
  pointer-events: none;
}

.ghero__sub {
  margin: 0;
  color: #2e4755;
  font-size: clamp(.92rem, 1.15vw, 1.16rem);
  line-height: 1.5;
}

/* The widget sits under the strapline, still inside the photograph. */
.ghero .gbook {
  width: min(1160px, 100%);
  margin: clamp(30px, 3.4vw, 54px) auto 0;
}

@media (max-width: 860px) {
  .ghero { padding: clamp(64px, 14vw, 104px) 0 clamp(44px, 8vw, 72px); }
  .ghero__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}