/* Public site + guest guide. Tokens come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  font: 400 1rem/1.55 var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--sea) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.i { width: 20px; height: 20px; flex: none; }
.i--sm { width: 16px; height: 16px; }
.i--lg { width: 28px; height: 28px; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 720px; }

/* ——— Type */
.display, .h1, .h2 { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; }
.display { font-size: clamp(2.5rem, 8vw, 4.75rem); line-height: 1.02; letter-spacing: -0.028em; }
.h1 { font-size: clamp(2.1rem, 5.5vw, 3.1rem); line-height: 1.06; letter-spacing: -0.022em; }
.h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; }
.h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.012em; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.5; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.006em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea);
}
.mono { font-family: var(--mono); letter-spacing: 0.02em; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 0.75em; }
.prose ul { display: grid; gap: 6px; }
.prose li { position: relative; padding-left: 20px; }
.prose li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--sea); }
.prose a { color: var(--sea); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 650; }

/* ——— Buttons */
.btn {
  --btn-bg: var(--bg-elev); --btn-ink: var(--ink); --btn-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-line);
  font-weight: 600; font-size: 0.975rem; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 160ms var(--ease), background-color 160ms, opacity 160ms;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn:active, .press:active { transform: scale(0.97); transition-duration: 80ms; }
.btn--primary { --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-line: transparent; }
.btn--light { --btn-bg: #fff; --btn-ink: #102a43; --btn-line: transparent; }
.btn--glass {
  --btn-bg: rgba(255, 255, 255, 0.16); --btn-ink: #fff; --btn-line: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.btn--wa { --btn-bg: var(--wa); --btn-ink: #fff; --btn-line: transparent; }
.btn--airbnb { --btn-bg: var(--airbnb); --btn-ink: #fff; --btn-line: transparent; }
.btn--tonal { --btn-bg: var(--sea-soft); --btn-ink: var(--sea); --btn-line: transparent; }
.btn--ghost { --btn-bg: transparent; --btn-line: transparent; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 0.9rem; }
.btn--block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-sunk); color: var(--ink); flex: none;
  transition: transform 160ms var(--ease);
}
.icon-btn:active { transform: scale(0.92); }

/* ——— Chips / pills / badges */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px var(--gutter); margin-inline: calc(var(--gutter) * -1); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; scroll-snap-align: start;
  min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--line-strong); color: var(--ink-2);
  font-size: 0.9rem; font-weight: 550; transition: transform 160ms var(--ease), background-color 200ms, color 200ms;
}
.chip:active { transform: scale(0.95); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: transparent; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; background: var(--bg-sunk); color: var(--ink-2);
}
.badge--glass { background: rgba(10, 22, 36, 0.45); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.badge--deal { background: var(--sun-soft); color: var(--sun-strong); }
.badge--sea { background: var(--sea-soft); color: var(--sea); }

/* ——— Cards & fields */
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.field { display: grid; gap: 6px; }
.field > span { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.input {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--r);
  background: var(--bg); border: 1px solid var(--line-strong); font-size: 1rem;
  transition: border-color 160ms, box-shadow 160ms;
}
.input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sea) 20%, transparent); }
.input--code { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.input::placeholder { color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); font-size: 0.925rem; }
.alert--error { background: var(--danger-soft); color: var(--danger); }
.alert--info { background: var(--sea-soft); color: var(--sea); }
.alert--sun { background: var(--sun-soft); color: var(--sun-strong); }

/* ——— Navigation (translucent, content scrolls underneath) */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; color: #fff; transition: color 240ms; }
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line); transition: opacity 240ms;
}
.nav.is-solid, .nav--solid { color: var(--ink); }
.nav.is-solid::before, .nav--solid::before { opacity: 1; }
.nav__in { display: flex; align-items: center; gap: 16px; height: 68px; padding-top: env(safe-area-inset-top); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; }
.brand__mark { width: 34px; height: 34px; flex: none; object-fit: contain; }
.brand__text { display: grid; line-height: 1.1; }
.brand__text b { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.brand__text small { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.nav__links { display: none; gap: 28px; margin-left: auto; font-weight: 550; font-size: 0.95rem; }
.nav__links a { opacity: 0.85; transition: opacity 160ms; }
.nav__links a:hover { opacity: 1; }
.nav__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav .btn--nav { --btn-bg: rgba(255, 255, 255, 0.16); --btn-ink: currentColor; --btn-line: rgba(255, 255, 255, 0.35); min-height: 40px; padding: 0 14px; font-size: 0.875rem; }
.nav.is-solid .btn--nav, .nav--solid .btn--nav { --btn-bg: var(--brand); --btn-ink: var(--brand-ink); --btn-line: transparent; }
.lang { display: flex; align-items: center; padding: 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.lang a { min-width: 40px; height: 36px; display: grid; place-items: center; border-radius: 999px; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.04em; opacity: 0.72; }
.lang a[aria-current="true"] { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
/* Below 900px the link row is gone, so the catalog keeps a button of its own. */
.nav.is-solid .btn--nav-nearby, .nav--solid .btn--nav-nearby { --btn-bg: transparent; --btn-ink: var(--ink); --btn-line: var(--line-strong); }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__end { margin-left: 12px; }
  .nav .btn--nav-nearby { display: none; }
}
@media (max-width: 520px) {
  .nav .brand__text small { display: none; }
  .nav .brand__text b { width: min-content; white-space: normal; font-size: 0.78rem; line-height: 1.08; }
  .nav .btn--nav { width: 40px; padding: 0; }
  .nav .btn--nav span { display: none; }
}
/* Under ~400px the mark alone carries the brand — the wordmark would fight the
   language switch for the same pixels, and the page title sits right below it. */
@media (max-width: 400px) { .nav .brand__text { display: none; } .nav .brand { min-width: 44px; justify-content: center; } }

/* ——— Hero */
.hero { position: relative; min-height: min(92svh, 860px); display: flex; align-items: flex-end; color: #fff; isolation: isolate; overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); animation: hero-in 1.6s var(--ease) both; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 32, 0.55) 0%, rgba(6, 18, 32, 0.22) 28%, rgba(6, 18, 32, 0.62) 62%, rgba(6, 18, 32, 0.92) 100%); }
.hero__content { padding-block: 120px 132px; display: grid; gap: 18px; max-width: 1180px; }
.hero__content .eyebrow { color: #fff; opacity: 0.9; }
.hero__content .display { max-width: 12ch; text-wrap: balance; }
.hero__content .lead { color: rgba(255, 255, 255, 0.86); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@keyframes hero-in { from { transform: scale(1.12); opacity: 0.6; } }

/* ——— Guest access card (overlaps the hero) */
.access { position: relative; z-index: 2; margin-top: -84px; }
.access__card { padding: 22px; border-radius: var(--r-xl); background: var(--bg-elev); box-shadow: var(--shadow-lg); border: 1px solid var(--line); display: grid; gap: 18px; }
.access__intro { display: flex; gap: 14px; align-items: flex-start; }
.access__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sun-soft); color: var(--sun-strong); flex: none; }
.access__intro h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; }
.access__intro p { color: var(--ink-2); font-size: 0.95rem; margin-top: 2px; }
.access__form { display: grid; gap: 12px; }
.access__hint { font-size: 0.82rem; color: var(--ink-3); }
@media (min-width: 900px) {
  .access__card { grid-template-columns: 1fr 1.35fr; align-items: center; padding: 28px 32px; gap: 28px; }
  .access__form { grid-template-columns: 1.4fr 1fr auto; align-items: end; }
  .access__form .alert, .access__form .access__hint { grid-column: 1 / -1; }
}

/* ——— Sections */
.section { padding-block: clamp(64px, 10vw, 112px); }
.section__head { display: grid; gap: 10px; margin-bottom: 28px; }
.section__head .lead { max-width: 60ch; }
.section--sunk { background: var(--bg-sunk); }

/* ——— Stay cards */
.stay-grid { display: grid; gap: 20px; margin-top: 20px; }
@media (min-width: 640px) { .stay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .stay-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.stay-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 280ms var(--ease), box-shadow 280ms var(--ease); }
@media (hover: hover) { .stay-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .stay-card:hover .stay-card__media img { transform: scale(1.04); } }
.stay-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-sunk); }
.stay-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.stay-card__media .badge { position: absolute; left: 12px; top: 12px; }
.stay-card__body { display: grid; gap: 10px; padding: 18px 20px 20px; flex: 1; align-content: start; }
.stay-card__body .muted { font-size: 0.95rem; }
.stay-card__actions { display: flex; gap: 8px; margin-top: 6px; }
.stay-card__actions .btn { flex: 1; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-2); font-size: 0.9rem; }
.facts li { display: inline-flex; align-items: center; gap: 6px; }
.facts .i { width: 17px; height: 17px; color: var(--ink-3); }

/* ——— Promotions */
.promo-row { display: grid; gap: 16px; }
@media (min-width: 760px) { .promo-row { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.promo { position: relative; overflow: hidden; display: grid; border-radius: var(--r-xl); background: var(--brand); color: var(--brand-ink); min-height: 220px; isolation: isolate; }
.promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.promo--img { color: #fff; }
.promo--img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(190deg, rgba(6, 18, 32, 0.35) 0%, rgba(6, 18, 32, 0.72) 55%, rgba(6, 18, 32, 0.92) 100%); }
.promo__body { align-self: end; padding: 22px; display: grid; gap: 8px; justify-items: start; }
.promo__body h3 { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.015em; font-weight: 600; }
.promo__body p { opacity: 0.85; }
/* Same story as the contact block: without a photo the inverted brand colour is a white
   rectangle in the dark theme, and it washes the deal badge out with it. A promo that has
   a photo keeps its own dark scrim and needs none of this. */
@media (prefers-color-scheme: dark) {
  /* The surface goes dark even under a photo: if the photo fails to load, white-on-white
     is what's left otherwise. The photo hides it in every other case. */
  .promo { background: var(--bg-elev); }
  .promo:not(.promo--img) { color: var(--ink); border: 1px solid var(--line); }
}

/* ——— Partners */
.partner-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } }
.partner { display: flex; gap: 14px; align-items: center; padding: 14px; }
.partner__thumb { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea); }
.partner__thumb img { width: 100%; height: 100%; object-fit: cover; }
.partner__body { display: grid; gap: 3px; min-width: 0; }
.partner__body h3 { font-size: 1.02rem; font-weight: 650; }
.partner__body p { font-size: 0.85rem; color: var(--ink-3); }
.partners__foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-top: 18px; }

/* ——— Nearby catalog (public) */
.nearby { padding-top: 104px; padding-bottom: 96px; display: grid; gap: 20px; }
.nearby .section__head { margin-bottom: 0; }
/* A flatter cover than the stay cards: the list is long and the photo is a hint, not the pitch. */
.nearby .stay-card__media { aspect-ratio: 16 / 10; }
.nearby .stay-card__body { padding: 16px 18px 18px; }
.nearby .stay-card__body .badge { justify-self: start; }
.nearby .stay-card__body .note { align-items: center; }
.nearby .stay-card__actions { flex-wrap: wrap; }
.nearby .stay-card__actions .btn { flex: 1 1 auto; }
.stay-card__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
a.card.partner { transition: transform 200ms var(--ease); }
a.card.partner:active { transform: scale(0.98); }
.about { padding: 22px; display: grid; gap: 10px; margin-top: 8px; }
.owner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px; }
.owner__body { flex: 1; min-width: 240px; display: grid; gap: 4px; }

/* ——— Why us */
.why { display: grid; gap: 14px; }
@media (min-width: 560px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .why { grid-template-columns: repeat(4, 1fr); } }
.why__item { padding: 22px; display: grid; gap: 10px; align-content: start; }
.why__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea); }
.why__item h3 { font-size: 1.05rem; font-weight: 650; }
.why__item p { color: var(--ink-2); font-size: 0.95rem; }

/* ——— Contact band + footer */
.contact { border-radius: var(--r-xl); background: var(--brand); color: var(--brand-ink); padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; position: relative; overflow: hidden; isolation: isolate; }
.contact::after { content: ""; position: absolute; right: -70px; bottom: -100px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sea) 55%, transparent), transparent 70%); z-index: -1; }
.contact .lead { color: inherit; opacity: 0.8; }
/* A closing invitation, not a section opener — it doesn't need the full heading scale. */
.contact .h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
/* In the dark theme the inverted brand slab turns into a floodlight at this size, so the
   block joins the other cards instead: elevated surface, hairline, glow dialled down. */
@media (prefers-color-scheme: dark) {
  .contact { background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); }
  .contact::after { background: radial-gradient(circle, color-mix(in srgb, var(--sea) 20%, transparent), transparent 70%); }
}
.contact__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.footer { padding: 40px 0 calc(96px + env(safe-area-inset-bottom)); color: var(--ink-3); font-size: 0.875rem; }
.footer__in { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.footer .brand { color: var(--ink); }
.footer__by { white-space: nowrap; }
.footer__by::before { content: '·'; margin-inline: 6px; opacity: 0.6; }
.footer__links { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 40px; }
.footer__links a:hover { color: var(--ink); }

.wa-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: #fff; box-shadow: 0 10px 30px rgba(31, 170, 83, 0.4);
  transition: transform 200ms var(--ease);
}
.wa-fab .i { width: 30px; height: 30px; }
.wa-fab:active { transform: scale(0.92); }

/* ——— Back to top: JS adds .is-on once the page is a screen deep. It stacks above whatever
   else already owns the bottom right — the WhatsApp button, the property page's CTA bar. */
.to-top {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 44;
  background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity 220ms var(--ease), transform 320ms var(--ease);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top.is-on:active { transform: scale(0.92); }
.wa-fab ~ .to-top { bottom: calc(86px + env(safe-area-inset-bottom)); }
.mobile-cta ~ .to-top { bottom: calc(88px + env(safe-area-inset-bottom)); }
@media (min-width: 960px) { .mobile-cta ~ .to-top { bottom: calc(16px + env(safe-area-inset-bottom)); } }
.no-js .to-top { display: none; }

/* ——— Property page */
.property { padding-top: 84px; padding-bottom: 120px; }
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.gallery { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--bg-sunk); margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
@media (min-width: 720px) { .gallery { margin-inline: 0; border-radius: var(--r-xl); } }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: center; }
@media (min-width: 900px) { .gallery__track img { aspect-ratio: 16 / 8; } }
.gallery__count { position: absolute; right: 12px; bottom: 12px; }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); display: none; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
@media (hover: hover) and (min-width: 720px) { .gallery__nav { display: grid; background: rgba(255, 255, 255, 0.9); color: #102a43; box-shadow: var(--shadow-sm); } }
.property__grid { display: grid; gap: 40px; margin-top: 28px; }
@media (min-width: 960px) { .property__grid { grid-template-columns: 1fr 360px; gap: 56px; } }
.property__main { display: grid; gap: 36px; align-content: start; min-width: 0; }
.property__main > section { display: grid; gap: 14px; }
.property__head { display: grid; gap: 10px; }
.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 20px; }
.amenities li { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.amenities .i { color: var(--ink-2); width: 22px; height: 22px; }
.map { aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-sunk); border: 1px solid var(--line); }
.map iframe { width: 100%; height: 100%; border: 0; }
.book { position: sticky; top: 92px; padding: 22px; display: grid; gap: 14px; align-self: start; }
.book__times { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.book__times div { padding: 10px 14px; display: grid; }
.book__times div + div { border-left: 1px solid var(--line-strong); }
.book__times small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.book__times b { font-size: 1.05rem; }
.mobile-cta {
  position: fixed; inset: auto 0 0; z-index: 45; display: flex; gap: 10px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid var(--line);
}
.mobile-cta .btn { flex: 1; }
@media (min-width: 960px) { .mobile-cta { display: none; } }

.list { display: grid; gap: 10px; }
.row { display: flex; gap: 14px; align-items: center; padding: 12px 14px; }
.row__icon { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--bg-sunk); color: var(--ink-2); overflow: hidden; }
.row__icon img { width: 100%; height: 100%; object-fit: cover; }
.row__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row__body h3 { font-size: 1rem; font-weight: 620; line-height: 1.3; }
.row__body p { font-size: 0.85rem; color: var(--ink-3); }

/* ——— Scroll reveal */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Where the browser can drive an animation from the scroll position itself, a block stops
   firing once and starts following the page: it rises as it comes up and rewinds if the
   reader scrolls back, so the motion answers the hand instead of playing at it. Everywhere
   else the IntersectionObserver above still reveals each block exactly as before.
   `translate`/`scale` are their own properties, so these compose with the `transform`
   the intro and the hover states already use instead of replacing it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal-rise linear both; animation-timeline: view(); animation-range: entry 6% cover 24%; }
    /* Even columns trail the odd ones, so a row arrives as a wave and not as a wall. */
    .stay-grid > .reveal:nth-child(2n), .partner-grid > .reveal:nth-child(2n), .why > .reveal:nth-child(2n) {
      animation-range: entry 14% cover 32%;
    }
    /* The hero photo hangs back while the page moves on, and its text steps out of the way. */
    .hero__img { animation: hero-in 1.6s var(--ease) both, hero-park linear both; animation-timeline: auto, scroll(); animation-range: normal, 0 100vh; }
    .hero__content { animation: hero-leave linear both; animation-timeline: scroll(); animation-range: 0 80vh; }
    /* A cover photo settles into its frame as the card arrives. */
    .stay-card__media img, .partner__thumb img { animation: photo-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes reveal-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hero-park { to { translate: 0 5%; scale: 1.1; } }
@keyframes hero-leave { to { transform: translateY(-40px); opacity: 0.25; } }
@keyframes photo-settle { from { scale: 1.06; } to { scale: 1; } }

/* ——— Toast */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font-weight: 600; font-size: 0.925rem; box-shadow: var(--shadow-lg);
  transform: translate(-50%, 20px) scale(0.96); opacity: 0; pointer-events: none;
  transition: transform 320ms var(--ease), opacity 220ms;
}
.toast.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; }

/* ——— Bottom sheet (JS drives transform with a spring) */
.sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.sheet__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; }
.sheet__panel {
  position: relative; width: 100%; max-width: 520px; max-height: calc(100svh - 24px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-elev); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-lg);
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(100%); will-change: transform;
}
.sheet__grab { width: 100%; height: 28px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.sheet__close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.sheet__grab::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); }
@media (min-width: 720px) {
  .sheet { align-items: center; padding: 24px; }
  .sheet__panel { border-radius: var(--r-xl); }
}

/* ———————————————— Guest guide ———————————————— */
.guest { background: var(--bg); }
.g { padding-top: 64px; padding-bottom: 80px; display: grid; gap: 28px; }
.g-bar { position: fixed; inset: 0 0 auto; z-index: 50; }
.g-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--line); }
.g-bar__in { height: 60px; padding-top: env(safe-area-inset-top); display: flex; align-items: center; gap: 12px; }
.g-bar__home { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -6px; color: var(--brand); flex: none; }
.g-bar__home:active { transform: scale(0.94); }
.g-bar .brand__mark { width: 30px; height: 30px; color: var(--brand); }
.g-bar__title { font-weight: 650; font-size: 0.95rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-bar .lang { color: var(--ink); }

.g-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; color: #fff; isolation: isolate; min-height: 360px; display: flex; align-items: flex-end; margin-top: 12px; }
.g-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.g-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 18, 32, 0.15) 0%, rgba(6, 18, 32, 0.2) 35%, rgba(6, 18, 32, 0.88) 100%); }
.g-hero__content { padding: 20px; display: grid; gap: 8px; width: 100%; }
.g-hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.04; letter-spacing: -0.022em; }
.g-hero p { color: rgba(255, 255, 255, 0.85); }
.status { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 650; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 0 3px rgba(126, 226, 168, 0.3); }
.status--pre::before { background: #ffd27a; box-shadow: 0 0 0 3px rgba(255, 210, 122, 0.3); }
.dates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: var(--r); background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.2); }
.dates div { display: grid; line-height: 1.25; }
.dates div:last-child { text-align: right; }
.dates small { font-size: 0.66rem; white-space: nowrap; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.dates b { font-size: clamp(1.05rem, 5.2vw, 1.25rem); font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.dates span { font-size: 0.8rem; opacity: 0.8; }
.dates__mid { font-size: 0.75rem; font-weight: 650; opacity: 0.85; display: grid; justify-items: center; gap: 2px; }
.dates__mid::before { content: ""; width: clamp(20px, 8vw, 44px); height: 1px; background: rgba(255, 255, 255, 0.5); }

/* Segmented section nav (sticky, scroll-spy) */
.seg { position: sticky; top: calc(68px + env(safe-area-inset-top)); z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 4px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.seg a { position: relative; z-index: 1; display: grid; place-items: center; min-height: 40px; padding-inline: 4px; border-radius: 999px; font-size: clamp(0.78rem, 3.4vw, 0.875rem); font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color 200ms; }
.seg a[aria-current="true"] { color: var(--bg); }
.seg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--ink); will-change: transform, width; }

.g-section { display: grid; gap: 14px; scroll-margin-top: 130px; }
.g-section__head { display: grid; gap: 4px; margin-top: 8px; }
.g-section__head h2 { font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; }
.g-section__head p { color: var(--ink-2); font-size: 0.95rem; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 360px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-width: 0; }
.tile--wide { grid-column: 1 / -1; }
.tile__head { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tile__head .i { width: 18px; height: 18px; color: var(--sea); }
.tile dl { display: grid; gap: 6px; }
.tile dt { font-size: 0.75rem; color: var(--ink-3); }
.tile dd { font-size: 1.1rem; font-weight: 650; overflow-wrap: anywhere; line-height: 1.25; }
.tile--link { transition: transform 200ms var(--ease); }
.tile--link:active { transform: scale(0.98); }
.tile__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tile__actions .btn { flex: 1; min-width: 0; }
.tile > .btn { width: 100%; padding-inline: 10px; }
.tile--wa { background: var(--wa); color: #fff; border-color: transparent; }
.tile--wa .tile__head, .tile--wa .tile__head .i { color: rgba(255, 255, 255, 0.85); }
.tile--wa b { font-size: 1.05rem; line-height: 1.25; }
.locked { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bg-sunk); color: var(--ink-2); font-size: 0.85rem; line-height: 1.3; }
.locked .i { width: 18px; height: 18px; color: var(--ink-3); }

/* Lockbox code: tap to reveal */
.code { display: grid; gap: 6px; justify-items: start; text-align: left; width: 100%; }
.code__digits { position: relative; font-family: var(--mono); font-size: 1.9rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.1; }
.code__digits span { transition: opacity 260ms var(--ease), filter 260ms var(--ease); }
.code__mask { position: absolute; inset: 0; transition: opacity 260ms var(--ease); }
.code:not(.is-open) .code__digits span:first-child { opacity: 0; filter: blur(8px); }
.code.is-open .code__mask { opacity: 0; }
.code small { font-size: 0.8rem; color: var(--sea); font-weight: 600; }
.code.is-open small { color: var(--ink-3); }

/* Accordions */
.acc { overflow: hidden; }
.acc summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; cursor: pointer; font-weight: 650; font-size: 1.02rem; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .row__icon { width: 40px; height: 40px; background: var(--sea-soft); color: var(--sea); }
.acc summary .chev { margin-left: auto; color: var(--ink-3); transition: transform 280ms var(--ease); }
.acc[open] summary .chev { transform: rotate(180deg); }
.acc__body { padding: 0 16px 18px 68px; color: var(--ink-2); }
.checklist { display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .i { width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }
@media (max-width: 420px) { .acc__body { padding-left: 16px; } }

/* Places */
/* Name and route on the first line, the actions on a full-width line below —
   inside the narrow middle column every pill would take a line of its own. */
.place { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 12px; padding: 12px; }
.place__thumb { width: 60px; height: 60px; border-radius: 14px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--bg-sunk); color: var(--ink-2); }
.place__thumb img { width: 100%; height: 100%; object-fit: cover; }
.place__body { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.place__body h3 { font-size: 1rem; font-weight: 650; line-height: 1.25; }
.place__body p { font-size: 0.85rem; color: var(--ink-3); line-height: 1.35; }
.place--partner { border-color: color-mix(in srgb, var(--sun) 45%, transparent); }
.place__pills { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.place__pills:empty { display: none; }
.deal {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 0 10px 0 12px; border-radius: 999px; white-space: nowrap;
  background: var(--sun-soft); color: var(--sun-strong); font-weight: 700; font-size: 0.85rem; transition: transform 160ms var(--ease);
}
.deal:active { transform: scale(0.95); }
.deal .i { width: 18px; height: 18px; }
.deal span { overflow: hidden; text-overflow: ellipsis; }
.deal .i--sm { width: 16px; height: 16px; opacity: 0.7; }
.ride {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--bg-sunk); color: var(--ink-2); font-weight: 650; font-size: 0.85rem; transition: transform 160ms var(--ease);
}
.ride:active { transform: scale(0.95); }
.ride .i { width: 16px; height: 16px; }
.ride--wa { background: color-mix(in srgb, var(--wa) 14%, transparent); color: var(--wa-ink); }

/* Coupon ticket */
.ticket { display: grid; gap: 14px; text-align: center; padding-bottom: 6px; }
.ticket__place { display: flex; align-items: center; gap: 12px; text-align: left; }
.ticket__deal { font-family: var(--display); font-size: clamp(1.9rem, 9vw, 2.8rem); overflow-wrap: break-word; text-wrap: balance; font-weight: 650; line-height: 1; letter-spacing: -0.03em; color: var(--sun-strong); }
.ticket__terms { color: var(--ink-2); font-size: 0.95rem; }
.ticket__cut { position: relative; height: 24px; margin-inline: -20px; }
.ticket__cut::before { content: ""; position: absolute; left: 22px; right: 22px; top: 50%; border-top: 2px dashed var(--line-strong); }
.ticket__cut::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0 50%, var(--scrim-solid, var(--bg-sunk)) 12px, transparent 12.5px), radial-gradient(circle at 100% 50%, var(--scrim-solid, var(--bg-sunk)) 12px, transparent 12.5px); }
.ticket__code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 16px; border-radius: var(--r); background: var(--bg-sunk); text-align: left; }
.ticket__code small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ticket__code b { font-family: var(--mono); font-size: 1.35rem; letter-spacing: 0.06em; }
.ticket__qr { justify-self: center; width: 168px; padding: 12px; border-radius: var(--r); background: #fff; }
.ticket__qr svg { width: 100%; height: auto; }
.ticket__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ticket__actions .btn { flex: 1 1 auto; }
.ticket__how { font-weight: 650; }

.help { padding: 22px; display: grid; gap: 12px; justify-items: start; }
.help h2 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; }
.note { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; letter-spacing: 0.006em; color: var(--ink-3); }
a.note { align-items: center; min-height: 40px; }

/* State screens (soon / expired / revoked / not found) */
.state { min-height: 100svh; display: grid; place-items: center; padding: 88px var(--gutter) 40px; }
.state__card { width: 100%; max-width: 480px; overflow: hidden; text-align: center; }
.state__card > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.state__body { padding: 26px 24px 28px; display: grid; gap: 12px; justify-items: center; }
.state__icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--sea-soft); color: var(--sea); }
.state__icon .i { width: 30px; height: 30px; }
.state__icon--ok { background: var(--ok-soft); color: var(--ok); }
.state__icon--bad { background: var(--danger-soft); color: var(--danger); }
.state h1 { font-family: var(--display); font-weight: 600; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; }
.state__actions { display: grid; gap: 10px; width: 100%; margin-top: 6px; }

@media (min-width: 720px) {
  .g { max-width: 760px; }
  .g-hero { min-height: 420px; }
  .g-hero__content { padding: 28px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .btn:active, .chip:active, .icon-btn:active, .deal:active, .ride:active, .tile--link:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav::before, .g-bar::before, .seg, .mobile-cta { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .card, .tile, .stay-card { border-color: var(--ink-3); }
}