/* ============================================================
   The Loft — Plot 2989 Madikwe Crescent, Extension 11, Gaborone
   Palette: warm ivory & sand, near-black ink, champagne bronze,
   terracotta blush accent.
   Type: Fraunces (display) + Inter (body).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bone:        #FAF7F0;
  --bone-2:      #F3EFE4;
  --sand:        #EDE7D8;
  --sand-2:      #DFD4BE;
  --noir:        #201C18;
  --noir-deep:   #14110D;
  --logo:        #1F3D34;   /* the brochure brand green — logo surfaces only */
  --bronze:      #7E6039;
  --bronze-soft: #C6A878;
  --bronze-wash: #F1E9D9;
  --clay:        #B4644A;
  --blush:       #E4A58C;
  --blush-deep:  #C97F63;
  --ink:         #1C1A16;
  --ink-2:       #4B463D;
  --ink-3:       #7A7466;
  --line:        #DCD2BF;
  --line-soft:   #E9E1D1;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  --sh-s: 0 1px 2px rgba(28,26,22,.05), 0 2px 8px rgba(28,26,22,.04);
  --sh-m: 0 2px 6px rgba(28,26,22,.06), 0 12px 28px rgba(28,26,22,.07);
  --sh-l: 0 4px 12px rgba(28,26,22,.08), 0 28px 60px rgba(28,26,22,.12);

  --head-h: 72px;
  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--head-h) + 20px);
}

/* author display rules must never resurrect a hidden element */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -.018em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.7rem); }
h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }

p { margin: 0 0 1.05em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--noir); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  text-decoration: none; font-size: 14px; font-weight: 500;
  transition: top .2s var(--ease);
}
.skip:focus { top: 16px; }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 4px;
}
.sec-enquire :focus-visible,
.foot :focus-visible,
.cal-sum :focus-visible { outline-color: var(--blush); }

/* ---------- shared bits ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay);
  box-shadow: 0 0 0 4px rgba(180,100,74,.14);
}
.eyebrow-light { color: rgba(255,255,255,.66); }
.eyebrow-light .dot { background: var(--blush); box-shadow: 0 0 0 4px rgba(228,165,140,.2); }

.sec { padding-block: clamp(64px, 9vw, 118px); }
.sec-alt { background: var(--bone-2); border-block: 1px solid var(--line-soft); }

.sec-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 62px); }
.sec-head h2 { margin-bottom: 0; }
.sec-head-row {
  max-width: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.sec-lede {
  margin-top: 20px; font-size: 1.09rem;
  color: var(--ink-2); max-width: 62ch;
}
.sec-note {
  margin: 0; font-size: 14.5px; color: var(--ink-3);
  max-width: 34ch; padding-bottom: 4px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px; font-weight: 500; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-lg { padding: 15px 27px; font-size: 15.5px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

.btn-solid {
  background: var(--noir); color: var(--bone);
  box-shadow: 0 1px 2px rgba(20,17,13,.26), 0 6px 18px rgba(32,28,24,.18);
}
.btn-solid:hover { background: var(--noir-deep); transform: translateY(-1px); }
.btn-solid:active { transform: translateY(0); }

.btn-ghost {
  background: transparent; color: var(--noir);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--bronze-soft); background: var(--bronze-wash); }

/* ---------- header ---------- */

.head {
  position: sticky; top: 0; z-index: 90;
  height: var(--head-h);
  background: rgba(250,247,240,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.head.stuck { border-bottom-color: var(--line); background: rgba(250,247,240,.95); }

.head-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand {
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; flex-shrink: 0;
}
.brand-mark {
  width: 48px; height: 48px; flex: none;
  border-radius: 14px;
  background: var(--logo);
  color: var(--bone);
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(31,61,52,.28);
}
.brand-mark svg { width: 31px; height: 31px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.12; }
.brand-txt strong {
  font-family: var(--display); font-weight: 600; font-size: 21px;
  letter-spacing: -.018em; color: var(--ink);
}
.brand-txt small { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 450; color: var(--ink-2);
  text-decoration: none;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--sand); }
.nav a[aria-current="true"] { color: var(--bronze); background: var(--bronze-wash); font-weight: 500; }

.head-act { display: flex; align-items: center; gap: 10px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 12px;
  background: transparent; cursor: pointer;
  place-items: center;
  transition: background .18s var(--ease);
}
.burger:hover { background: var(--sand); }
.burger svg { width: 20px; height: 20px; color: var(--ink); }

.drawer {
  position: fixed; inset: var(--head-h) 0 auto 0; z-index: 89;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-m);
  padding: 12px clamp(20px, 5vw, 40px) 22px;
  animation: slideDown .26s var(--ease);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } }
.drawer nav { display: flex; flex-direction: column; }
.drawer a {
  padding: 14px 4px;
  font-size: 17px; color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer-cta { margin-top: 14px; justify-content: center; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 76px) clamp(56px, 7vw, 96px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(720px 420px at 88% 6%, rgba(228,165,140,.16), transparent 68%),
    radial-gradient(620px 460px at 4% 92%, rgba(126,96,57,.09), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero h1 { margin-bottom: 22px; }
.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: 30px;
}

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 34px; padding: 0;
}
.hero-facts li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 13px;
  background: var(--bone-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 14px; font-weight: 450; color: var(--ink-2);
}
.hero-facts svg { width: 17px; height: 17px; color: var(--bronze); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-art { position: relative; }

.frame {
  position: relative;
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--sh-l);
  border: 1px solid rgba(255,255,255,.5);
}
.frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame-tall { aspect-ratio: 4 / 4.85; }

.frame-cap {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: rgba(250,247,240,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.6);
}
.frame-cap-k {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay); font-weight: 500;
}
.frame-cap-v {
  font-family: var(--display); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink); text-align: right;
}

.hero-badge {
  position: absolute; left: -18px; bottom: 112px;
  max-width: 232px;
  background: var(--noir);
  color: var(--bone);
  border-radius: var(--r-m);
  padding: 16px 20px;
  box-shadow: var(--sh-m);
}
.hero-badge-k {
  display: block;
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blush); font-weight: 500; margin-bottom: 5px;
}
.hero-badge-v {
  display: block;
  font-family: var(--display); font-size: 15px; font-weight: 500;
  line-height: 1.35; letter-spacing: -.01em;
}

.hero-play {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 13px;
  padding: 9px 20px 9px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(250,247,240,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-m);
  cursor: pointer; text-align: left;
  transition: transform .26s var(--ease), background .26s var(--ease), box-shadow .26s var(--ease);
}
.hero-play:hover, .hero-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.03);
  background: rgba(250,247,240,.96);
  box-shadow: var(--sh-l);
}
.hero-play-ico {
  position: relative;
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--noir); color: var(--blush);
}
.hero-play-ico svg { width: 16px; height: 16px; margin-left: 2px; }
.hero-play-ico::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--noir);
  animation: playPulse 2.8s var(--ease) infinite;
}
@keyframes playPulse {
  0% { transform: scale(1); opacity: .5; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}
.hero-play-t { display: flex; flex-direction: column; gap: 2px; }
.hero-play-t strong {
  font-family: var(--display); font-size: 16px; font-weight: 600;
  letter-spacing: -.014em; color: var(--ink);
}
.hero-play-t small { font-size: 12.5px; color: var(--ink-3); }

.btn-play {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--noir); color: var(--blush);
  margin-right: -2px;
}
.btn-play svg { width: 10px; height: 10px; margin-left: 1px; }

.sec-head-act {
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* ---------- strip ---------- */

.strip {
  background: var(--sand);
  border-block: 1px solid var(--line);
  padding-block: 26px;
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px;
}
.strip-item { display: flex; flex-direction: column; gap: 3px; }
.strip-k {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}
.strip-v {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.012em; color: var(--noir);
}

/* ---------- the loft ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
.split-media { position: sticky; top: calc(var(--head-h) + 28px); }
.split-media .frame { aspect-ratio: 4 / 3.4; }
.split-copy p { color: var(--ink-2); }
.split-copy > p:first-child { font-size: 1.09rem; color: var(--ink); }

.ticks {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; gap: 2px;
  border-top: 1px solid var(--line-soft);
}
.ticks li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15.5px; color: var(--ink-2);
}
.ticks svg {
  width: 18px; height: 18px; flex: none; margin-top: 2px;
  color: var(--bronze);
}

/* ---------- gallery ---------- */

.gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-flow: dense;
  gap: 14px;
}
.gitem {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--r-m);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--sand);
  box-shadow: var(--sh-s);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gitem img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease);
}
.gitem:hover img, .gitem:focus-visible img { transform: scale(1.035); }
.gitem:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gitem-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gitem:last-child { grid-column: span 2; aspect-ratio: 2 / 1; }
.gitem:hover, .gitem:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sh-m);
}
.gitem-cap {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 13px;
  background: rgba(250,247,240,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--ink);
  letter-spacing: -.005em;
}

/* ---------- rates ---------- */

.slider { margin-bottom: clamp(30px, 4vw, 46px); }
.slider-view {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sand);
  box-shadow: var(--sh-m);
}
.slider-track {
  display: flex;
  transition: transform .62s var(--ease);
  will-change: transform;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-cap {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 18px;
  border-radius: var(--r-m);
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(250,247,240,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-s);
}
.slide-k {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay); font-weight: 500; flex: none;
}
.slide-v {
  font-family: var(--display); font-size: 15.5px; font-weight: 500;
  letter-spacing: -.01em; color: var(--ink); text-align: right;
}

/* ---------- shared viewer controls ---------- */
/* One ring-and-glyph button for every photo viewer: tour, lightbox, carousel. */
.vbtn {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(250,247,240,.42);
  background: rgba(20,17,13,.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--bone); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.vbtn:hover { background: rgba(250,247,240,.16); border-color: rgba(250,247,240,.62); }
.vbtn:active { transform: scale(.94); }
.vbtn svg { width: 18px; height: 18px; }
.vbtn-onlight {
  border-color: rgba(20,17,13,.32);
  background: rgba(250,247,240,.78);
  color: var(--noir);
}
.vbtn-onlight:hover { background: var(--bone); border-color: rgba(20,17,13,.55); }

.slider-nav {
  position: absolute; top: 50%; left: 14px; translate: 0 -50%; z-index: 2;
}
.slider-nav-next { left: auto; right: 14px; }

.slider-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: 14px;
}
.dots { display: flex; gap: 7px; }
.dot {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--sand-2); cursor: pointer;
  transition: width .26s var(--ease), background .26s var(--ease);
}
.dot:hover { background: var(--bronze-soft); }
.dot[aria-current="true"] { width: 26px; background: var(--bronze); }
.slider-live {
  margin: 0; font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.cur-box { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-bottom: 4px; }
.cur {
  display: inline-flex; gap: 2px;
  padding: 4px;
  background: var(--sand);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.cur button {
  padding: 7px 15px;
  border: 0; border-radius: 999px;
  background: transparent;
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.cur button:hover { background: var(--bone); }
.cur button[aria-pressed="true"] {
  background: var(--noir); color: var(--bone);
  box-shadow: 0 1px 3px rgba(20,17,13,.3);
}
.cur-note { margin: 0; font-size: 12.5px; color: var(--ink-3); max-width: 34ch; text-align: right; }

.rate-cards .loc-card { display: flex; flex-direction: column; }
.price {
  display: flex; align-items: baseline; gap: 9px;
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.price-v {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 600; letter-spacing: -.02em;
  color: var(--noir);
  font-variant-numeric: tabular-nums;
}
.price-u { font-size: 13.5px; color: var(--ink-3); }
/* "On request" is a phrase, not a figure — it needs a smaller hand than the prices. */
.price-v.is-text { font-size: clamp(1.28rem, 1.9vw, 1.5rem); letter-spacing: -.01em; }
.price-est {
  margin: 4px 0 0;
  font-size: 13px; color: var(--clay);
  min-height: 1.35em;
  font-variant-numeric: tabular-nums;
}

/* The owner's peak dates, named under the rate cards so nobody is surprised by
   a December quote. Hidden entirely when no peak season is set. */
.rate-peak {
  max-width: 74ch;
  margin: 22px auto 0;
  padding: 14px 20px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--blush);
  border-radius: var(--r-s);
  background: var(--bone);
  font-size: 13.5px; line-height: 1.65;
  color: var(--ink-2);
  text-align: center;
}

.incl {
  margin-top: 26px;
  padding: 20px 26px;
  background: var(--bone-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-m);
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px 32px; flex-wrap: wrap;
}
.incl-h {
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.incl-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 26px;
}
.incl-list li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 450; color: var(--ink-2);
}
.incl-list svg { width: 17px; height: 17px; color: var(--bronze); }

/* ---------- availability calendar ---------- */

.cal-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

.cal-card {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: var(--sh-m);
}
.cal-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px 22px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.cal-nights {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  font-weight: 600; letter-spacing: -.02em;
  color: var(--ink);
}
.cal-top-range { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-3); }

.cal-fields {
  display: flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bone);
  box-shadow: var(--sh-s);
}
.cal-field {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 158px;
  padding: 10px 40px 10px 16px;
  border-radius: 14px;
  transition: box-shadow .18s var(--ease);
}
.cal-field + .cal-field { border-left: 1px solid var(--line); border-radius: 0 14px 14px 0; }
.cal-field.is-active { box-shadow: inset 0 0 0 2px var(--noir); }
.cal-field-k {
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.cal-field-v {
  font-size: 15px; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cal-field-x {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.cal-field-x:hover { background: var(--sand); color: var(--ink); }
.cal-field-x svg { width: 13px; height: 13px; }
.cal-field-x[hidden] { display: none; }

.cal-months {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 38px);
}
.cal-mon-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.cal-nav-pad { width: 40px; height: 40px; flex: none; }
.cal-month {
  margin: 0;
  flex: 1; min-width: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  font-weight: 600; letter-spacing: -.015em;
  color: var(--ink);
  text-align: center;
}
.cal-nav {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 12px;
  background: transparent; cursor: pointer;
  transition: background .18s var(--ease);
}
.cal-nav:hover { background: var(--sand); }
.cal-nav:disabled { opacity: .3; cursor: default; background: transparent; }
.cal-nav svg { width: 18px; height: 18px; color: var(--ink); }

.cal-dow, .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 2px 0;
}
.cal-dow { margin-bottom: 4px; }
.cal-dow span {
  text-align: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-3);
  padding: 6px 0;
}

.cal-day {
  position: relative;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14.5px; font-weight: 450;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.cal-day.is-free:hover { background: var(--bronze-wash); border-radius: 999px; }
.cal-day.is-today::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--clay);
  pointer-events: none;
}
.cal-day.is-in { background: var(--sand); color: var(--ink); }
/* Endpoint markers are painted as a disc inside the cell so the sand band
   keeps running behind them, as in the reference picker. */
.cal-day.is-sel {
  background-image: radial-gradient(circle 19px at center, var(--noir) 98%, transparent 100%);
  color: var(--bone); font-weight: 600;
}
.cal-day.is-block,
.cal-day.is-past {
  color: var(--ink-3);
  text-decoration: line-through;
  cursor: not-allowed;
}
.cal-day.is-past { opacity: .55; }
.cal-day.is-blank { visibility: hidden; cursor: default; }
/* Peak nights carry a warm tint so the higher rate is visible before it is
   quoted. Only background-color, so the selection disc still paints over it. */
.cal-day.is-peak:not(.is-in):not(.is-sel):not(.is-past):not(.is-block) {
  background-color: rgba(228, 165, 140, .24);
  border-radius: 999px;
  color: var(--blush-deep);
  font-weight: 550;
}
.cal-day.is-peak:not(.is-in):not(.is-sel):not(.is-past):not(.is-block):hover {
  background-color: rgba(228, 165, 140, .44);
  color: var(--blush-deep);
}

.cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 12.5px; color: var(--ink-3);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lg { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.lg-free { background: var(--bone); border: 1px solid var(--line); }
.lg-peak { background: rgba(228, 165, 140, .5); }
.lg-block { background: var(--sand-2); }
.lg-sel { background: var(--noir); border-radius: 50%; }

.cal-sum {
  position: sticky; top: calc(var(--head-h) + 24px);
  background: var(--noir);
  color: var(--bone);
  border-radius: var(--r-l);
  padding: 28px 26px 24px;
  box-shadow: var(--sh-l);
}
.cal-sum-h {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--blush);
  margin: 0 0 14px;
}
.sum-range {
  font-family: var(--display);
  font-size: 1.16rem; font-weight: 500; line-height: 1.4;
  letter-spacing: -.012em;
  min-height: 2.8em;
}
.sum-list { margin: 14px 0 20px; }
.sum-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(250,247,240,.14);
}
.sum-list dt { font-size: 14px; color: rgba(250,247,240,.66); }
.sum-list dd {
  margin: 0;
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.012em; text-align: right;
  font-variant-numeric: tabular-nums;
}
.sum-save {
  margin: -8px 0 16px;
  font-size: 13px; font-weight: 600; line-height: 1.5;
  color: var(--blush);
}
.cal-cta { display: flex; flex-direction: column; gap: 9px; }
.cal-sum .btn-ghost {
  color: var(--bone);
  border-color: rgba(250,247,240,.3);
  background: transparent;
}
.cal-sum .btn-ghost:hover { background: rgba(250,247,240,.1); border-color: rgba(250,247,240,.5); }
.cal-fine {
  margin: 16px 0 0;
  font-size: 12.5px; line-height: 1.6;
  color: rgba(250,247,240,.62);
}

/* ---------- extras ---------- */

.extras {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.extra label {
  position: relative;
  display: block;
  height: 100%;
  padding: 24px 22px 22px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-s);
  cursor: pointer;
  transition: border-color .22s var(--ease), background .22s var(--ease),
              transform .22s var(--ease), box-shadow .22s var(--ease);
}
.extra label:hover { transform: translateY(-3px); box-shadow: var(--sh-m); }
.extra.on label, .extra label:has(input:checked) {
  border-color: var(--bronze);
  background: linear-gradient(180deg, rgba(241,233,217,.62), var(--bone) 62%);
}
.extra-chk {
  position: absolute; top: 18px; right: 18px;
  width: 23px; height: 23px;
  margin: 0;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--bone);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.extra-chk:hover { border-color: var(--bronze-soft); }
.extra-chk:checked {
  background: var(--noir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  border-color: var(--noir);
}
.extra-chk:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.extra-ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--sand); color: var(--bronze);
  margin-bottom: 14px;
  transition: background .22s var(--ease), color .22s var(--ease);
}
.extra.on .extra-ico, .extra label:has(input:checked) .extra-ico { background: var(--noir); color: var(--blush); }
.extra-ico svg { width: 21px; height: 21px; }
.extra h3 { font-size: 15.5px; margin-bottom: 6px; padding-right: 26px; }
.extra p { font-size: 14px; color: var(--ink-3); margin: 0; line-height: 1.55; }
.extra-meta {
  display: block;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--clay);
}
.extra-note {
  height: 100%;
  padding: 24px 22px 22px;
  background: var(--sand);
  border: 1px dashed var(--sand-2);
  border-radius: var(--r-l);
}
.extra-note .extra-ico { background: rgba(20,17,13,.055); color: var(--ink-3); }
.extra-note h3 { padding-right: 0; color: var(--ink-2); }
.extra-note .extra-meta { color: var(--ink-3); border-top-color: var(--sand-2); }

/* ---------- location ---------- */

.loc-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 66px);
}

.places {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line-soft);
}
.places li { border-bottom: 1px solid var(--line-soft); }
.place {
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 4px 17px 0;
  text-decoration: none; color: inherit;
  transition: padding-left .22s var(--ease), background .22s var(--ease);
}
.place:hover, .place:focus-visible {
  padding-left: 14px;
  background: linear-gradient(90deg, var(--bronze-wash), transparent 82%);
}
.place-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.place-n {
  font-family: var(--display); font-size: 17.5px; font-weight: 600;
  letter-spacing: -.014em; color: var(--ink);
  transition: color .22s var(--ease);
}
.place:hover .place-n, .place:focus-visible .place-n { color: var(--bronze); }
.place-d { font-size: 14.5px; color: var(--ink-3); }
.place-go {
  margin-left: auto; flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bone);
  color: var(--bronze);
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.place-go svg { width: 16px; height: 16px; }
.place:hover .place-go, .place:focus-visible .place-go {
  background: var(--noir); color: var(--blush); border-color: var(--noir);
  transform: translateX(2px);
}

.map {
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bone-2);
  box-shadow: var(--sh-m);
}
.map-embed { position: relative; aspect-ratio: 4 / 3; background: #F2ECDD; overflow: hidden; }
.map-tiles {
  position: absolute; inset: 0; z-index: 1;
  /* Warm parchment, so the map sits inside the ivory/bronze brand rather than
     fighting it with the blue-green of the raw OSM raster. */
  filter: sepia(.46) saturate(.62) contrast(.9) brightness(1.07);
}
.map-tiles img {
  position: absolute;
  width: 256px; height: 256px;
  user-select: none; -webkit-user-drag: none;
}
.map-embed::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(242,236,221,.55), rgba(242,236,221,0) 24%,
                    rgba(242,236,221,0) 56%, rgba(242,236,221,.65) 100%),
    radial-gradient(120% 90% at 50% 50%, rgba(126,96,57,0) 55%, rgba(126,96,57,.12) 100%);
}
.map-pin {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  transform: translate(-50%, -104%);
  background: var(--noir);
  color: var(--bronze-soft);
  border: 2px solid var(--bone);
  border-radius: 50% 50% 50% 8px;
  box-shadow: 0 12px 24px rgba(32,28,24,.34);
}
.map-pin svg { width: 20px; height: 20px; }
.map-pin::after {
  content: "";
  position: absolute; left: 50%; bottom: -12px;
  width: 24px; height: 8px; margin-left: -12px;
  border-radius: 50%;
  background: rgba(32,28,24,.28);
  filter: blur(2.5px);
}
.map-pin-pulse {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: rgba(126,96,57,.34);
  animation: pinPulse 2.8s var(--ease) infinite;
}
@keyframes pinPulse {
  0% { transform: scale(.5); opacity: .9; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}
.map-chip {
  position: absolute; left: 14px; top: 14px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: rgba(250,247,240,.94);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-radius: 999px;
  box-shadow: var(--sh-s);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.map-chip svg { width: 13px; height: 13px; color: var(--bronze); }
.map-zoom {
  position: absolute; right: 14px; top: 14px; z-index: 4;
  display: grid;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(250,247,240,.96);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: var(--sh-s);
}
.map-zb {
  width: 40px; height: 37px;
  padding: 0;
  border: 0; background: transparent;
  font-size: 19px; font-weight: 500; line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s var(--ease);
}
.map-zb + .map-zb { border-top: 1px solid var(--line-soft); }
.map-zb:hover { background: var(--bronze-wash); }
.map-zb:focus-visible { outline: 2px solid var(--bronze); outline-offset: -3px; }
.map-zb:disabled { color: var(--line); cursor: default; background: transparent; }

.map-card {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 5;
  padding: 15px 16px 12px;
  background: rgba(250,247,240,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(250,247,240,.85);
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(32,28,24,.22);
}
.map-card-top { display: flex; align-items: center; gap: 11px; }
.map-dot {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bronze); color: var(--bone);
}
.map-dot svg { width: 15px; height: 15px; }
.map-addr { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.map-k {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronze); font-weight: 600;
}
.map-v {
  font-family: var(--display); font-size: 15px; font-weight: 600;
  letter-spacing: -.012em; color: var(--ink);
}
.map-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.map-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: transform .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease), color .18s var(--ease);
}
.map-pill svg { width: 14px; height: 14px; }
.map-pill:hover { transform: translateY(-1px); border-color: var(--bronze-soft); background: var(--bronze-wash); }
.map-pill:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.map-pill-go {
  flex: 1 1 100%;
  padding: 12px 18px;
  background: var(--noir); border-color: var(--noir); color: var(--bone);
  font-size: 14.5px;
  box-shadow: 0 8px 18px rgba(32,28,24,.26);
}
.map-pill-go:hover { background: var(--noir-deep); border-color: var(--noir-deep); }
.map-coord {
  display: block;
  margin-top: 11px;
  font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.map-coord a { color: var(--ink-3); text-decoration-color: var(--line); }
.map-coord a:hover { color: var(--bronze); }

.loc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.loc-card {
  padding: 26px 26px 28px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-s);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.loc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-m);
  border-color: var(--sand-2);
}
.loc-ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--bronze-wash); color: var(--bronze);
  margin-bottom: 16px;
}
.loc-ico svg { width: 22px; height: 22px; }
.loc-card h3 { margin-bottom: 8px; }
.loc-card p { font-size: 15px; color: var(--ink-2); margin: 0; }
.loc-card p + p { margin-top: 10px; }

/* ---------- amenities ---------- */

.amens {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-l);
  overflow: hidden;
}
.amen {
  background: var(--bone);
  padding: 26px 24px 28px;
  transition: background .25s var(--ease);
}
.amen:hover { background: #FFFDF8; }
.amen-ico {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--sand); color: var(--bronze);
  margin-bottom: 15px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.amen:hover .amen-ico { background: var(--noir); color: var(--blush); }
.amen-ico svg { width: 20px; height: 20px; }
.amen h3 { font-size: 15.5px; margin-bottom: 5px; }
.amen p { font-size: 14px; color: var(--ink-3); margin: 0; line-height: 1.55; }

/* ---------- things to know ---------- */

.amens-more { margin-top: 26px; text-align: center; }

.know-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.know-col { padding-right: clamp(24px, 3.2vw, 44px); }
.know-col + .know-col {
  padding-left: clamp(24px, 3.2vw, 44px);
  border-left: 1px solid var(--line-soft);
}
.know-ico {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sand); color: var(--bronze);
  margin-bottom: 15px;
}
.know-ico svg { width: 19px; height: 19px; }
.know-col h3 {
  font-family: var(--display);
  font-size: clamp(17px, 1.7vw, 19.5px);
  font-weight: 600; letter-spacing: -.014em;
  margin: 0 0 12px;
}
.know-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 9px;
}
.know-list li {
  position: relative;
  padding-left: 17px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.know-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bronze-soft);
}
.know-more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding: 0;
  background: none; border: 0;
  font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--bronze);
  cursor: pointer;
}
.know-more svg { width: 15px; height: 15px; transition: transform .22s var(--ease); }
.know-more:hover { color: var(--noir); }
.know-more:hover svg { transform: translateX(4px); }
.know-more:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; border-radius: 4px; }

.know-glance { margin-top: clamp(32px, 4.4vw, 54px); }
.know-glance .terms-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0 clamp(20px, 2.6vw, 38px);
}
.know-glance .terms-list > div {
  display: block;
  padding: 14px 0 16px;
  border-top: 1px solid rgba(250,247,240,.16);
  border-bottom: 0;
}
.know-glance .terms-list dt {
  margin-bottom: 6px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(250,247,240,.56);
}
.know-glance .terms-list dd { text-align: left; font-size: 17px; }

.terms-card {
  background: var(--noir);
  color: var(--bone);
  border-radius: var(--r-l);
  padding: 30px 30px 26px;
  box-shadow: var(--sh-l);
  position: relative;
  overflow: hidden;
}
.terms-card::after {
  content: "";
  position: absolute; right: -70px; top: -70px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228,165,140,.24), transparent 68%);
  pointer-events: none;
}
.terms-card-h {
  position: relative;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--blush);
  margin: 0 0 18px;
}
.terms-list { margin: 0; position: relative; }
.terms-foot {
  position: relative;
  margin: 20px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(250,247,240,.18);
  font-size: 13.5px; color: rgba(250,247,240,.7);
}

/* ---------- modals ---------- */

.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(12px, 4vw, 40px);
}
.modal[hidden] { display: none; }
.modal-bd {
  position: absolute; inset: 0;
  background: rgba(20,17,13,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modal-fade .24s var(--ease);
}
.modal-card {
  position: relative;
  width: min(900px, 100%);
  max-height: min(88vh, 940px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-l);
  animation: modal-in .3s var(--ease);
}
.modal-h {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px clamp(20px, 3vw, 32px);
  background: rgba(250,247,240,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.modal-h h3 {
  font-family: var(--display);
  font-size: clamp(19px, 2.3vw, 24px);
  font-weight: 600; letter-spacing: -.018em;
  margin: 0;
}
.modal-x {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bone); color: var(--ink-2);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.modal-x svg { width: 16px; height: 16px; }
.modal-x:hover { background: var(--noir); color: var(--bone); border-color: var(--noir); }
.modal-x:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.modal-b { padding: clamp(20px, 3vw, 32px); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } }
body.is-modal { overflow: hidden; }

.amod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(24px, 3vw, 38px) clamp(26px, 3.4vw, 46px);
}
.amod-grp h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 13px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--bronze);
}
.amod-grp h4 svg { width: 16px; height: 16px; }
.amod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.amod-list li {
  display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.amod-list li > svg { width: 16px; height: 16px; margin-top: 2px; color: var(--bronze); }
.amod-list b { font-weight: 600; color: var(--ink); }
.amod-note {
  margin-top: clamp(22px, 3vw, 30px);
  padding: 15px 18px;
  background: var(--sand);
  border-left: 2px solid var(--clay);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
.amod-note b { color: var(--ink); font-weight: 600; }

.pol { display: grid; gap: clamp(20px, 2.6vw, 28px); }
.pol-lede {
  margin: 0;
  font-size: 14.5px; line-height: 1.65; color: var(--ink-2);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.pol-sec h4 {
  margin: 0 0 8px;
  font-family: var(--display); font-size: 16px; font-weight: 600;
  letter-spacing: -.01em; color: var(--ink);
}
.pol-sec p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.pol-sec p + p { margin-top: 10px; }
.pol-sec a {
  color: var(--bronze);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--bronze-soft);
}
.pol-sec a:hover { text-decoration-color: var(--bronze); }
.pol-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pol-rules li {
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.pol-rules li > svg { width: 17px; height: 17px; margin-top: 2px; color: var(--bronze); }
.pol-rules li.no > svg { color: var(--clay); }
.pol-tag {
  display: inline-block;
  margin-bottom: 10px; padding: 5px 11px;
  background: var(--bronze-wash);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--bronze);
}

/* ---------- enquire ---------- */

.sec-enquire {
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(228,165,140,.16), transparent 62%),
    var(--noir-deep);
  color: var(--bone);
}
.sec-enquire h2 { color: var(--bone); }
.enq-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.enq-copy p { color: rgba(250,247,240,.78); max-width: 46ch; }
.enq-note {
  margin-top: 18px; padding-left: 16px;
  border-left: 2px solid var(--blush);
  font-size: 14.5px; color: rgba(250,247,240,.62) !important;
}

.enq-actions {
  margin-top: clamp(28px, 4vw, 46px);
}
.enq-assure {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 22px; flex-wrap: wrap;
  margin: 0;
  padding: 16px 20px;
  background: rgba(250,247,240,.07);
  border: 1px solid rgba(250,247,240,.14);
  border-radius: var(--r-m);
  font-size: 14px; line-height: 1.55;
  color: rgba(250,247,240,.72);
}
.enq-assure a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--blush); text-decoration: none;
  font-weight: 500; white-space: nowrap;
}
.enq-assure a:hover { color: var(--bone); }
.enq-assure a svg { width: 18px; height: 18px; }

/* booking wizard */
.bk {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(250,247,240,.06);
  border: 1px solid rgba(250,247,240,.14);
  border-radius: var(--r-l);
}
.bk-how { display: grid; gap: 11px; margin: 22px 0 0; padding: 0; list-style: none; }
.bk-how li {
  display: flex; gap: 12px;
  font-size: 14.5px; line-height: 1.6; color: rgba(250,247,240,.76);
}
.bk-how-n {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; margin-top: 1px;
  border: 1px solid rgba(228,165,140,.5); border-radius: 50%;
  font-size: 11.5px; color: var(--blush);
}
.bk-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px;
  margin: 0 0 22px; padding: 0; list-style: none;
}
.bk-step {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding-top: 10px;
  border-top: 2px solid rgba(250,247,240,.16);
  font-size: 12.5px; letter-spacing: .04em; color: rgba(250,247,240,.42);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.bk-n {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px;
  border: 1px solid rgba(250,247,240,.28); border-radius: 50%;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.bk-step.is-done { color: rgba(250,247,240,.66); border-top-color: rgba(228,165,140,.45); }
.bk-step.is-done .bk-n { border-color: rgba(228,165,140,.5); color: var(--blush); }
.bk-step.is-on { color: var(--bone); border-top-color: var(--blush); }
.bk-step.is-on .bk-n { border-color: var(--blush); background: rgba(228,165,140,.16); color: var(--blush); }

.bk-form { display: flex; flex-direction: column; gap: 15px; }
.bk-form[hidden] { display: none; }
.bk-panel { display: flex; flex-direction: column; gap: 14px; animation: bk-in .3s var(--ease) both; }
.bk-panel[hidden] { display: none; }
@keyframes bk-in { from { opacity: 0; transform: translateY(7px); } }
.bk-h {
  margin: 0;
  font-family: var(--display); font-size: 1.22rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--bone);
}
.bk-sub { margin: -6px 0 0; font-size: 14px; line-height: 1.6; color: rgba(250,247,240,.62); }
.bk-static { margin: 0; padding-top: 10px; font-size: 15px; color: var(--bone); font-variant-numeric: tabular-nums; }
.bk-fine { margin: 0; font-size: 13px; line-height: 1.62; color: rgba(250,247,240,.55); }
.bk-fine a { color: var(--blush); text-decoration-color: rgba(228,165,140,.4); }
.bk-fine a:hover { text-decoration-color: var(--blush); }
.bk-tot { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin: 2px 0 0; }
.bk-tot > div {
  display: flex; flex-direction: column;
  padding: 14px 16px;
  background: rgba(20,17,13,.3);
  border: 1px solid rgba(250,247,240,.12); border-radius: 12px;
}
.bk-tot dt { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: rgba(250,247,240,.5); }
.bk-tot dd {
  margin: 7px 0 0;
  font-family: var(--display); font-size: 1.3rem; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.bk-tot dd.is-text { font-size: 1.06rem; letter-spacing: -.005em; }
/* The note sits at the foot of the card so both cards read as one balanced pair. */
.bk-tot-note {
  margin: auto 0 0; padding-top: 10px;
  font-size: 12.5px; line-height: 1.55; color: rgba(250,247,240,.55);
}
.bk-tot-note.is-hi { color: var(--blush); font-weight: 600; }
.bk-tot-note:empty { display: none; }

.bk-hk {
  padding: 14px 16px 16px;
  background: rgba(20,17,13,.3);
  border: 1px solid rgba(250,247,240,.12); border-radius: 12px;
}
.bk-hk[hidden] { display: none; }
.bk-hk-h {
  margin: 0 0 12px;
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(250,247,240,.5);
}
.bk-hk-days {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.bk-hk-days li {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px 12px;
  background: rgba(250,247,240,.045);
  border: 1px solid rgba(250,247,240,.13); border-radius: 9px;
  font-size: 13px; color: rgba(250,247,240,.86); font-variant-numeric: tabular-nums;
}
.bk-hk-dow {
  flex: none;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blush);
}
.bk-same {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(250,247,240,.66); cursor: pointer;
}
.bk-extras { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bk-extras label {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: rgba(20,17,13,.28);
  border: 1px solid rgba(250,247,240,.12); border-radius: 12px;
  font-size: 14px; color: rgba(250,247,240,.82); cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.bk-extras label:hover { border-color: rgba(228,165,140,.42); }
.bk-extras input { flex: none; width: 16px; height: 16px; accent-color: var(--blush); }
.bk-extras li.on label { background: rgba(228,165,140,.13); border-color: var(--blush); color: var(--bone); }
.bk-note {
  margin: 0; padding: 12px 14px;
  border: 1px dashed rgba(250,247,240,.22); border-radius: 12px;
  font-size: 13px; line-height: 1.62; color: rgba(250,247,240,.6);
}
.bk-review { display: grid; margin: 0; padding: 0; border-top: 1px solid rgba(250,247,240,.14); }
.bk-review > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(250,247,240,.1);
}
.bk-review dt { flex: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(250,247,240,.5); }
.bk-review dd { margin: 0; font-size: 14.5px; color: var(--bone); text-align: right; }
.bk-review .bk-row-total dd { font-family: var(--display); font-size: 1.14rem; }
.bk-review .bk-row-total dd.is-text { font-size: 14.5px; }
.bk-agree { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.bk-agree label {
  display: flex; gap: 10px;
  font-size: 13.5px; line-height: 1.62; color: rgba(250,247,240,.72); cursor: pointer;
}
.bk-agree input { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--blush); }
.bk-link {
  padding: 0; border: 0; background: none;
  font: inherit; color: var(--blush); cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(228,165,140,.4);
}
.bk-link:hover { text-decoration-color: var(--blush); }
.bk-sign-in { font-family: var(--display); font-size: 17px; }
.bk-nav {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 16px;
  border-top: 1px solid rgba(250,247,240,.12);
}
.bk-hold { flex: 1 1 120px; font-size: 12.5px; line-height: 1.5; color: rgba(250,247,240,.5); }
.bk .btn-solid { background: var(--blush); color: var(--noir-deep); border-color: transparent; }
.bk .btn-solid:hover { background: var(--blush-deep); color: var(--noir-deep); }
.bk .btn-solid:disabled { opacity: .55; cursor: default; transform: none; }
.bk .btn-ghost { color: var(--bone); border-color: rgba(250,247,240,.24); }
/* On the dark booking panel, ghost hover must stay translucent so bone text stays visible */
.bk .btn-ghost:hover { background: rgba(250,247,240,.14); border-color: rgba(250,247,240,.55); color: var(--bone); }
.bk-status { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(250,247,240,.72); min-height: 1.4em; }
.bk-status.is-bad { color: var(--blush); }
.bk-done { display: flex; flex-direction: column; gap: 14px; }
.bk-done[hidden] { display: none; }
.bk-done-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(228,165,140,.5); border-radius: 50%;
  background: rgba(228,165,140,.16); color: var(--blush);
}
.bk-done-ico svg { width: 22px; height: 22px; }
.bk-done h3 { margin: 0; font-family: var(--display); font-size: 1.46rem; font-weight: 600; letter-spacing: -.015em; color: var(--bone); }
.bk-done p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(250,247,240,.76); }
.bk-done-act { display: flex; gap: 10px; flex-wrap: wrap; }
.bk-done-cur { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.bk-done-cur[hidden] { display: none; }
.bk-done-cur-sel { width: auto; min-width: 220px; }
.bk-done-cur .adm-lab { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: rgba(250,247,240,.58); }
.enq-duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.enq-trio { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.72fr); gap: 14px; }
.enq-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.enq-lab {
  font-size: 11px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(250,247,240,.58);
}
.enq-lab span[aria-hidden] { color: var(--blush); }
.enq-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: rgba(250,247,240,.38); }
.enq-in {
  width: 100%;
  padding: 11px 14px;
  font: inherit; font-size: 15px; color: var(--bone);
  background: rgba(20,17,13,.34);
  border: 1px solid rgba(250,247,240,.18);
  border-radius: 12px;
  color-scheme: dark;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.enq-in::placeholder { color: rgba(250,247,240,.34); }
.enq-in:focus-visible {
  outline: none;
  border-color: var(--blush);
  box-shadow: 0 0 0 3px rgba(228,165,140,.22);
}
.enq-in.is-bad { border-color: var(--blush-deep); }
textarea.enq-in { resize: vertical; min-height: 44px; }

/* modern dropdown — pick.js upgrades <select data-pick> in place */
.pick { position: relative; }
.pick-src {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  border: 0; padding: 0; opacity: 0; overflow: hidden; pointer-events: none;
}
.pick-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; cursor: pointer; text-align: left;
}
.pick-chev { width: 16px; height: 16px; flex: none; opacity: .6; transition: transform .18s var(--ease); }
.pick.is-open .pick-chev { transform: rotate(180deg); }
.pick-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-pop {
  position: absolute; z-index: 70; top: calc(100% + 6px); left: 0;
  width: max-content; min-width: 100%; max-width: min(340px, 92vw);
  margin: 0; padding: 6px; list-style: none;
  border-radius: 14px; max-height: 320px; overflow: auto;
  animation: pick-in .16s var(--ease);
}
@keyframes pick-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.pick-pop li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border-radius: 9px; font-size: 14.5px; cursor: pointer;
}
.pick-tick { width: 15px; height: 15px; flex: none; opacity: 0; }
.pick-pop li[aria-selected="true"] .pick-tick { opacity: 1; }
.pick[data-skin="dark"] .pick-pop {
  background: #262019; border: 1px solid rgba(250,247,240,.14);
  color: var(--bone); box-shadow: 0 22px 48px rgba(10,8,6,.5);
}
.pick[data-skin="dark"] li.is-active { background: rgba(250,247,240,.1); }
.pick[data-skin="dark"] li[aria-selected="true"],
.pick[data-skin="dark"] li[aria-selected="true"] .pick-tick { color: var(--blush); }
.enq-date {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.enq-date svg { flex: none; width: 14px; height: 14px; color: var(--blush); }
.enq-date span {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.enq-date:hover { border-color: rgba(228,165,140,.5); }
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.enq-fine {
  margin: 18px 0 0 !important;
  font-size: 12.5px !important;
  color: rgba(250,247,240,.42) !important;
  line-height: 1.6;
}
.enq-fine a { color: rgba(250,247,240,.6); }
.enq-fine a:hover { color: var(--blush); }

/* ---------- footer ---------- */

.foot { background: var(--sand); border-top: 1px solid var(--line); padding-block: 44px; }
.foot-in {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 28px 40px;
  align-items: start;
}
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand strong {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: -.018em; display: block; color: var(--ink);
}
.foot-brand p { margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); }

.foot-nav {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.foot-nav a {
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  transition: color .18s var(--ease);
}
.foot-nav a:hover { color: var(--bronze); }
.foot-legal {
  grid-column: 1 / -1;
  margin: 0; font-size: 12.5px; color: var(--ink-3);
}
.foot-legal-links {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px;
  margin: 12px 0 0; font-size: 12.5px;
}
.foot-legal-links a {
  position: relative; color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.foot-legal-links a:hover { color: var(--bronze); border-color: var(--bronze-soft); }
.foot-legal-links a + a::before {
  content: ""; position: absolute; left: -11px; top: 50%;
  width: 3px; height: 3px; margin-top: -1px; border-radius: 50%;
  background: var(--ink-3); opacity: .45;
}

/* ---------- lightbox ---------- */

.lb {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(18,17,14,.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 44px);
  animation: fadeIn .22s var(--ease);
}
.lb[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

.lb-bd { position: absolute; inset: 0; z-index: 0; }
.lb-in { position: relative; z-index: 1; }

.lb-in {
  width: min(1020px, 100%);
  display: flex; flex-direction: column; gap: 14px;
  animation: popIn .28s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: scale(.98) translateY(6px); } }

.lb-fig {
  position: relative; margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--noir-deep);
  border: 1px solid rgba(250,247,240,.14);
}
.lb-fig img { width: 100%; height: 100%; object-fit: contain; }
.lb-fig img[hidden] { display: none; }

.lb-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  color: var(--bone);
}
.lb-meta p { margin: 0; }
#lb-cap { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.012em; }
#lb-count { font-size: 13px; color: rgba(250,247,240,.5); font-variant-numeric: tabular-nums; }

.lb-btn { position: absolute; top: 50%; translate: 0 -50%; left: 14px; z-index: 2; }
.lb-btn-next { left: auto; right: 14px; }
.lb-x { position: absolute; z-index: 3; top: clamp(14px, 3vw, 26px); right: clamp(14px, 3vw, 26px); }

/* ---------- photo tour ---------- */

.tour {
  position: fixed; inset: 0; z-index: 130;
  background: #14120E;
  overflow: hidden;
  animation: fadeIn .26s var(--ease);
}
.tour[hidden] { display: none; }

.tour-stage { position: absolute; inset: 0; }
.tour-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  will-change: opacity, transform;
}
.tour-layer.is-on { opacity: 1; }
.tour-layer.kb-1 { animation: kb1 8.4s cubic-bezier(.32,.06,.24,1) both; }
.tour-layer.kb-2 { animation: kb2 8.4s cubic-bezier(.32,.06,.24,1) both; }
@keyframes kb1 {
  from { transform: scale(1.05) translate3d(-1.1%, .8%, 0); }
  to   { transform: scale(1.16) translate3d(1.3%, -.8%, 0); }
}
@keyframes kb2 {
  from { transform: scale(1.16) translate3d(1.3%, -1%, 0); }
  to   { transform: scale(1.05) translate3d(-1.1%, .8%, 0); }
}
.tour-vig {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(12,11,9,.62) 0%, rgba(12,11,9,0) 26%),
    linear-gradient(to top, rgba(12,11,9,.86) 0%, rgba(12,11,9,.44) 34%, rgba(12,11,9,0) 62%);
  pointer-events: none;
}

.tour-intro {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  text-align: center;
  background: rgba(12,11,9,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s var(--ease);
}
.tour-intro.is-on { opacity: 1; }
.tour-intro.is-off { opacity: 0; }
.tour-intro-mark {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 17px;
  background: var(--logo); color: var(--bone);
  margin-bottom: 12px;
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
}
.tour-intro-mark svg { width: 32px; height: 32px; }
.tour-intro-t {
  margin: 0;
  font-family: var(--display); font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 500; letter-spacing: -.02em; color: var(--bone);
}
.tour-intro-s {
  margin: 0;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(250,247,240,.6);
}

.tour-top {
  position: absolute; z-index: 3;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 2.4vw, 24px) clamp(16px, 3vw, 30px);
}
.tour-brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--display); font-size: 15.5px; font-weight: 600;
  letter-spacing: -.014em; color: var(--bone);
}
.tour-brand em { font-style: normal; font-weight: 400; color: rgba(250,247,240,.55); }
.tour-brand-mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--logo); color: var(--bone);
}
.tour-brand-mark svg { width: 18px; height: 18px; }

.tour-btn { flex: none; }
.tour-btn:active { transform: scale(.95); }
.tour-play { width: 52px; height: 52px; background: var(--blush); border-color: transparent; color: var(--noir-deep); }
.tour-play:hover { background: var(--bone); border-color: transparent; }
.tour-play svg { width: 20px; height: 20px; }

.tour-body {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 26px);
  padding: 0 clamp(18px, 4vw, 54px) clamp(20px, 3vw, 34px);
}

.tour-cap { max-width: 720px; }
.tour-cap.is-in .tour-chapter { animation: capIn .55s var(--ease) both; }
.tour-cap.is-in .tour-line { animation: capIn .7s .07s var(--ease) both; }
.tour-cap.is-in .tour-sub { animation: capIn .7s .14s var(--ease) both; }
.tour-cap.is-in .tour-cta { animation: capIn .7s .22s var(--ease) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }

.tour-chapter {
  margin: 0 0 10px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--blush);
}
.tour-line {
  margin: 0 0 10px;
  font-size: clamp(1.85rem, 4.6vw, 3.3rem);
  line-height: 1.06; letter-spacing: -.022em; font-weight: 500;
  color: var(--bone);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(12,11,9,.45);
}
.tour-sub {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.55;
  color: rgba(250,247,240,.72); max-width: 54ch;
}
.tour-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tour-cta[hidden] { display: none; }
.tour-cta .btn-solid { background: var(--blush); color: var(--noir-deep); border-color: transparent; }
.tour-cta .btn-solid:hover { background: var(--bone); }
.tour-ghost { color: var(--bone); border-color: rgba(250,247,240,.4); }
.tour-ghost:hover { background: rgba(250,247,240,.12); border-color: rgba(250,247,240,.6); }

.tour-ctrl { display: flex; flex-direction: column; gap: 12px; }
.tour-segs { display: flex; gap: 4px; }
.tour-seg {
  position: relative; flex: 1 1 0;
  height: 3px; border-radius: 2px;
  background: rgba(250,247,240,.22);
  overflow: hidden;
  transition: height .25s var(--ease), background .25s var(--ease);
}
.tour-seg.is-active { height: 5px; background: rgba(250,247,240,.3); }
.tour-seg i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--blush);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(228,165,140,.75);
}
.tour-row {
  display: flex; align-items: center; gap: 14px;
}
.tour-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  border: 1px solid rgba(250,247,240,.16);
  background: rgba(16,14,11,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tour-count {
  margin: 0 0 0 6px;
  font-size: 13px; color: rgba(250,247,240,.66);
  font-variant-numeric: tabular-nums;
}
.tour-hint {
  margin: 0 0 0 auto;
  font-size: 12.5px; color: rgba(250,247,240,.42);
  letter-spacing: .01em;
}
.tour-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }
.jump-now .reveal { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .split-media { position: static; }
  .cal-sum { position: static; }
  .tour-layer.kb-1, .tour-layer.kb-2 { animation: none; transform: none; }
  .hero-play-ico::after { animation: none; opacity: 0; }
  .map-pin-pulse { animation: none; opacity: 0; }
}

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .nav { display: none; }
  .burger { display: grid; }
  .amens { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .gal { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .extras { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  :root { --head-h: 64px; }
  body { font-size: 16.5px; }

  .head-act .btn { display: none; }
  .brand { gap: 11px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
  .brand-mark svg { width: 27px; height: 27px; }
  .brand-txt strong { font-size: 18.5px; }
  .brand-txt small { font-size: 11px; }

  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .hero-art { max-width: 480px; }
  .frame-tall { aspect-ratio: 4 / 3.6; }
  .hero-badge { left: auto; right: 14px; bottom: 96px; max-width: 210px; }

  .strip-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }

  .split { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .split-media { position: static; }

  .cal-wrap { grid-template-columns: minmax(0,1fr); }
  .cal-sum { position: static; }
  .cal-months { grid-template-columns: minmax(0,1fr); gap: 30px; }

  .loc-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .map { order: -1; }
  .map-embed { aspect-ratio: 16 / 11; }

  .slide { aspect-ratio: 16 / 10; }
  .slide-cap { left: 14px; right: 14px; bottom: 14px; }

  .tour-hint { display: none; }

  .know-grid { grid-template-columns: minmax(0,1fr); }
  .know-col { padding: 24px 0 0; border-top: 1px solid var(--line-soft); margin-top: 24px; }
  .know-col:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
  .know-col + .know-col { padding-left: 0; border-left: 0; }
  .know-glance .terms-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .amod-grid { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .enq-grid { grid-template-columns: minmax(0,1fr); gap: 34px; }

  .loc-cards { grid-template-columns: minmax(0,1fr); }
  .amens { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gal { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .extras { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .cur-box { align-items: flex-start; }
  .cur-note { text-align: left; }
}

@media (max-width: 560px) {
  .hero-facts li { font-size: 13.5px; padding: 7px 13px 7px 11px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .strip-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .sec-head-row { align-items: flex-start; }
  .sec-note { max-width: none; }
  .hero-badge { position: static; max-width: none; margin-top: 14px; }
  .frame-cap { left: 12px; right: 12px; bottom: 12px; padding: 10px 13px; }
  .terms-card { padding: 24px 22px 22px; }
  .know-glance .terms-list dd { font-size: 15.5px; }
  .modal { padding: 0; }
  .modal-card {
    width: 100%; max-width: none; max-height: 100vh; height: 100%;
    border-radius: 0; border: 0;
  }
  .modal-h { padding: 15px 18px; }
  .modal-b { padding: 20px 18px 26px; }
  .enq-duo, .enq-trio { grid-template-columns: minmax(0,1fr); gap: 15px; }
  .enq-assure { flex-direction: column; align-items: flex-start; }
  .bk { padding: 20px 18px 24px; }
  .bk-steps { gap: 4px; margin-bottom: 18px; }
  .bk-step { gap: 6px; font-size: 11px; letter-spacing: .01em; }
  .bk-n { width: 18px; height: 18px; font-size: 10px; }
  .bk-extras, .bk-tot { grid-template-columns: minmax(0,1fr); }
  .bk-hk-days { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 7px; }
  .bk-hk-days li { padding: 8px 10px; gap: 7px; font-size: 12.5px; }
  .bk-review > div { flex-direction: column; gap: 2px; }
  .bk-review dd { text-align: left; }
  .bk-nav { gap: 10px; }
  .bk-nav .btn { flex: 1 1 auto; justify-content: center; }
  .bk-hold { flex: 1 1 100%; order: 3; }
  .gitem:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 2 / 1.3; }
  .foot-in { grid-template-columns: minmax(0,1fr); }
  .cal-top { flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .cal-fields { width: 100%; }
  .cal-field { min-width: 0; flex: 1 1 0; padding: 9px 34px 9px 13px; }
  .cal-field-v { font-size: 14px; }
  .cal-day { height: 38px; font-size: 13.5px; }
  .cal-day.is-sel { background-image: radial-gradient(circle 16px at center, var(--noir) 98%, transparent 100%); }
  .cal-day.is-today::after { width: 29px; height: 29px; margin: -14.5px 0 0 -14.5px; }
  .cal-dow, .cal-grid { gap: 1px 0; }
  .cal-months { gap: 26px; }
  .cal-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .extras { grid-template-columns: minmax(0,1fr); }
  .incl { flex-direction: column; align-items: flex-start; }

  .sec-head-act { align-items: flex-start; }
  .slide { aspect-ratio: 4 / 3.6; }
  .slide-cap {
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 11px 14px;
  }
  .slide-v { text-align: left; font-size: 14.5px; }
  .vbtn { width: 40px; height: 40px; }
  .slider-nav { left: 10px; }
  .slider-nav-next { left: auto; right: 10px; }
  .slider-foot { flex-direction: column; align-items: flex-start; gap: 10px; }

  .map-embed { aspect-ratio: 3 / 4; }
  .map-tiles { transform: translateY(-13%); }
  .map-pin, .map-pin-pulse { top: 37%; }
  .map-card { left: 10px; right: 10px; bottom: 10px; padding: 13px 14px 11px; }
  .map-chip { left: 10px; top: 10px; padding: 7px 12px; }
  .map-zoom { right: 10px; top: 10px; }
  .map-pill { padding: 8px 12px; font-size: 12.5px; }

  .hero-play { padding: 8px 16px 8px 8px; gap: 11px; }
  .hero-play-t small { display: none; }

  .tour-body { gap: 14px; }
  .tour-row { gap: 8px; }
  .tour-pill { padding: 6px 14px 6px 6px; gap: 8px; }
  .tour-count { margin-left: 2px; }
  .tour-intro-mark { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 10px; }
  .tour-intro-mark svg { width: 26px; height: 26px; }
}