/*
 * ---------------------------------------------------------------------------
 * Version:        0.1.0
 * Last edited by: Manara Studio
 * Date:           2026-10-30
 * Status:         In build (preview only)
 * Purpose:        One stylesheet for every plugin view. Tokens first, then components in page order.
 * Changelog:
 *   0.1.0  2026-10-30  Manara Studio  From the premium concept; plugin additions at the end.
 * Maintainer notes:
 *   - Palette = the live site's own (owner rejected a new one). Logical properties throughout, so
 *     Arabic RTL mirrors without a second sheet; check /ar/ after any layout change.
 *   - No words in CSS `content`: TranslatePress cannot translate them.
 *   - No ancestor of a sticky element may set overflow (the booking panel is sticky).
 * ---------------------------------------------------------------------------
 */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 88%;
  descent-override: 21%;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* HaloPuncak's own palette, as on the live site: sand and cream grounds, forest green, gold */
  --paper: #f4f3ec;
  --mist-1: #efeee2;
  --mist-2: #e6e4d4;
  --mist-3: #d4d9c6;
  --hair: #d9dccd;
  /* ink: the forest green the live headings use */
  --ink: #1f3d2b;
  --ink-2: #46504a;
  --ink-3: #636b63;
  /* gold: the one action colour (#a87e39 on the live site; buttons one step deeper for 4.5:1 white text) */
  --pool: #96702f;
  --pool-2: #85632a;
  --pool-ink: #3f6b4a;
  --gold: #a87e39;
  --gold-soft: #e4d2a8;
  --on-gold: #ffffff;
  /* the mark */
  --leaf: #8fa050;
  --leaf-2: #a8c46a;
  --moss: #3f6b4a;
  --petal: #f2f0e6;
  /* dark sections: the live footer's forest green */
  --night: #1f3d2b;
  --night-2: #294534;
  --night-3: #3f6b4a;
  --night-deep: #0f2418;
  --night-ink: #f2f0e6;
  --night-soft: #c4cbb8;
  --night-hair: #35553f;

  --focus: #1f3d2b;
  --focus-dark: #f2f0e6;

  --mk-petal: #9fb0c8;
  --mk-left: var(--leaf-2);
  --mk-mid: var(--moss);
  --mk-right: var(--leaf);

  /* type */
  --f-sans: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --step--1: clamp(0.84rem, 0.81rem + 0.12vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.35rem, 1.18rem + 0.85vw, 1.875rem);
  --step-3: clamp(1.65rem, 1.3rem + 1.75vw, 2.75rem);
  --step-4: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  --step-5: clamp(2.4rem, 1.4rem + 4.6vw, 5.25rem);
  --step-6: clamp(2.6rem, 1.2rem + 6.2vw, 6rem);

  /* space, 4-based */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 11rem;
  --gutter: clamp(1rem, 4.2vw, 3.5rem);
  --wrap: 86rem;
  --hdr-h: 4.75rem;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 160ms; --d-2: 320ms; --d-3: 700ms; --d-4: 1200ms;

  --r-1: 3px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(15 36 24 / 0.06), 0 8px 24px -12px rgb(15 36 24 / 0.22);
  --shadow-2: 0 2px 6px rgb(15 36 24 / 0.08), 0 30px 60px -28px rgb(15 36 24 / 0.45);

  color-scheme: light;
  accent-color: var(--pool);
}

@property --pp { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--ink-3) var(--mist-1); scrollbar-width: thin; }
html.no-lenis { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.no-lenis { scroll-behavior: auto; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--f-sans);
  font-stretch: 100%;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  caret-color: var(--pool-2);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; hanging-punctuation: first; }
dl, dd { margin: 0; }
::selection { background: var(--gold-soft); color: var(--night-deep); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.i { width: 1.15em; height: 1.15em; flex: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: fixed; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); z-index: 100;
  padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--paper); border-radius: var(--r-1);
  transform: translateY(-160%); transition: transform var(--d-2) var(--ease-out);
}
.skip:focus { transform: none; }

.h-display {
  font-size: var(--step-4);
  font-weight: 760;
  font-stretch: 112%;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.prose p + p { margin-block-start: var(--s-4); }
.prose { max-width: 66ch; color: var(--ink-2); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-block-end: 2px;
  transition: background-size var(--d-2) var(--ease-out);
}
.link-arrow .i { transition: transform var(--d-2) var(--ease-out); }
.link-arrow:hover .i { transform: translateX(4px); }
.link-arrow:hover { background-size: 0 1px; background-position: 100% 100%; }
.link-arrow--light { color: var(--night-ink); }

.textbtn { background: none; border: 0; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; color: var(--pool-ink); }

/* ------------------------------------------------------------------ buttons */
.btn {
  --b-bg: transparent; --b-fg: var(--ink); --b-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 3.25rem; padding: 0.8rem 1.45rem;
  border: 1.5px solid var(--b-bd); border-radius: var(--r-pill);
  background: var(--b-bg); color: var(--b-fg);
  font-weight: 620; font-stretch: 104%; font-size: 1rem; line-height: 1.1; letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out),
              border-color var(--d-2) var(--ease-out), translate var(--d-3) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
}
.btn .i { transition: transform var(--d-2) var(--ease-out); }
.btn:hover .i:last-child { transform: translateX(3px); }
.btn:active { scale: 0.98; }
.btn--pool { --b-bg: var(--pool); --b-fg: var(--on-gold); --b-bd: var(--pool); }
.btn--pool:hover { --b-bg: var(--pool-2); --b-bd: var(--pool-2); box-shadow: 0 10px 28px -14px rgb(133 99 42 / 0.85); }
.btn--line { --b-bd: var(--ink); }
.btn--line:hover { --b-bg: var(--ink); --b-fg: var(--paper); }
.btn--ghost { --b-bd: color-mix(in oklab, var(--night-ink) 55%, transparent); --b-fg: var(--night-ink); }
.btn--ghost:hover { --b-bg: var(--night-ink); --b-fg: var(--night); }
.btn--sm { min-height: 2.75rem; padding: 0.6rem 1.1rem; font-size: 0.94rem; }
.btn--xs { min-height: 2.75rem; padding: 0.45rem 0.95rem; font-size: 0.88rem; }
.btn--block { display: flex; width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; pointer-events: none; }

.ibtn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border: 1.5px solid var(--hair); border-radius: 50%; background: var(--paper); color: var(--ink);
  transition: border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.ibtn:hover { border-color: var(--ink); }
.ibtn:disabled { opacity: 0.4; cursor: default; }

/* ------------------------------------------------------------------ header */
.hdr {
  --hdr-bg: color-mix(in oklab, var(--paper) 94%, transparent);
  --hdr-fg: var(--ink);
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  color: var(--hdr-fg);
  transition: background-color var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out), translate var(--d-3) var(--ease-out);
}
.hdr__in { display: flex; align-items: center; gap: var(--s-5); height: var(--hdr-h); transition: height var(--d-3) var(--ease-out); }
.hdr--solid, .hdr.is-scrolled { background: var(--hdr-bg); box-shadow: 0 1px 0 var(--hair); }
.hdr.is-scrolled { --hdr-h: 4rem; }
.hdr--night { --mk-mid: var(--petal); --mk-petal: var(--petal); }
.hdr--night:not(.is-scrolled) { --hdr-fg: var(--night-ink); }
.hdr--night.is-scrolled { --hdr-bg: color-mix(in oklab, var(--night) 94%, transparent); --hdr-fg: var(--night-ink); box-shadow: 0 1px 0 var(--night-hair); }
.hdr.is-hidden { translate: 0 -100%; }
.hdr.is-dark { --hdr-bg: color-mix(in oklab, var(--night) 94%, transparent); --hdr-fg: var(--night-ink); --mk-mid: var(--petal); background: var(--hdr-bg); box-shadow: 0 1px 0 var(--night-hair); }
.page-villa .hdr, .page-list .hdr { position: sticky; }

.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; margin-inline-end: auto; }
.brand__mark { width: 2.6rem; height: auto; aspect-ratio: 231.8 / 170.1; transition: width var(--d-3) var(--ease-out); }
.is-scrolled .brand__mark { width: 2.25rem; }
.brand__word { font-weight: 780; font-stretch: 118%; font-size: 1.22rem; letter-spacing: -0.02em; }
.nav { display: flex; gap: var(--s-5); font-weight: 560; }
.nav a { text-decoration: none; padding-block: var(--s-2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--d-2) var(--ease-out); }
.nav a:hover, .nav a[aria-current="page"] { background-size: 100% 1.5px; }
.hdr__wa .i { width: 1.2em; height: 1.2em; }

/* ------------------------------------------------------------------ mist */
.mist { position: absolute; inset: auto 0 0; height: 46%; pointer-events: none; overflow: hidden; z-index: 2; }
.mist i {
  position: absolute; display: block; inset-inline-start: -30%; width: 160%; height: 60%;
  background: radial-gradient(closest-side, rgb(244 243 236 / 0.85), rgb(244 243 236 / 0));
  filter: blur(8px);
  animation: drift 48s linear infinite alternate;
}
.mist i:nth-child(1) { inset-block-end: -18%; opacity: 0.95; }
.mist i:nth-child(2) { inset-block-end: 6%; height: 40%; opacity: 0.55; animation-duration: 64s; animation-direction: alternate-reverse; }
.mist i:nth-child(3) { inset-block-end: 24%; height: 28%; opacity: 0.35; animation-duration: 80s; }
.mist--night i { background: radial-gradient(closest-side, rgb(31 61 43 / 0.9), rgb(31 61 43 / 0)); }
@keyframes drift { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, 0, 0); } }

/* ------------------------------------------------------------------ frames + parallax */
.frame { position: relative; overflow: hidden; background: var(--mist-2); aspect-ratio: 3 / 4; }
.frame img {
  position: absolute; inset-inline: 0; inset-block-start: calc(var(--par, 0) * -50%);
  width: 100%; height: calc(100% + var(--par, 0) * 100%); object-fit: cover;
  transform: translate3d(0, calc(var(--pp, 0) * var(--par, 0) / (2 * (1 + var(--par, 0))) * 100%), 0);
  will-change: transform;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 48em) {
    .js .frame[data-par] img { animation: pp linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes pp { from { --pp: -1; } to { --pp: 1; } }
.img-missing { background: linear-gradient(160deg, var(--mist-2), var(--mist-3)); }
.img-missing img { visibility: hidden; }

/* reveal: content is visible by default; only animates when JS and motion allow */
.js.motion [data-reveal] { opacity: 0; translate: 0 1.25rem; transition: opacity var(--d-4) var(--ease-out), translate var(--d-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js.motion [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------------ hero (home) */
.hero {
  position: relative; z-index: 2; display: grid; isolation: isolate;
  grid-template-columns: minmax(0, 1fr) min(47vw, calc(100svh * 0.75));
  min-height: max(40rem, 100svh);
  background: var(--paper);
}
.hero__copy {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-6);
  padding: calc(var(--hdr-h) + var(--s-6)) var(--s-7) var(--s-7) max(var(--gutter), (100vw - var(--wrap)) / 2);
  position: relative; z-index: 3;
}
.hero__title {
  font-size: clamp(2.7rem, 1rem + 4.6vw, 5.4rem);
  font-weight: 800; font-stretch: 116%; line-height: 0.96; letter-spacing: -0.035em;
  max-width: 11.5ch;
}
.hero__title .ln { display: block; text-wrap: balance; }
.hero__kicker { font-size: var(--step-0); font-weight: 680; font-stretch: 108%; letter-spacing: 0.01em; color: var(--moss); }
.js.motion .hero__kicker { animation: fadeUp 1000ms var(--ease-out) both; }
.hero__sub { font: italic 400 var(--step-2)/1.35 var(--f-serif); color: var(--ink-2); max-width: 30ch; }
.hero__photo { position: relative; margin: 0; z-index: 1; }
.hero__img, .mistgl {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%), linear-gradient(to top, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 16%), linear-gradient(to top, transparent 0, #000 14%);
  mask-composite: intersect;
}
.hero__img { position: absolute; inset: 0; overflow: hidden; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo figcaption {
  position: absolute; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); z-index: 3;
  font-size: var(--step--1); font-weight: 560; color: var(--ink); background: color-mix(in oklab, var(--paper) 82%, transparent);
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
}
.hero__wa { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 560; color: var(--ink-2); text-decoration: none; }
.hero__wa:hover { color: var(--ink); text-decoration: underline; }
.mist--hero { z-index: 2; inset-inline-start: 30%; height: 38%; }
.has-mistgl .mist--hero { display: none; }
.mistgl {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 2.4s var(--ease-out);
}
.mistgl.is-on { opacity: 1; }

/* the authored entrance: the headline rises line by line while the photo clears, like mist lifting */
.js.motion .hero__title .ln, .js.motion .pt-hero__title .ln { animation: lineUp 1000ms var(--ease-out) both; }
.js.motion .hero__title .ln:nth-child(2), .js.motion .pt-hero__title .ln:nth-child(2) { animation-delay: 110ms; }
.js.motion .pt-hero__title .ln:nth-child(3) { animation-delay: 220ms; }
.js.motion .hero__sub, .js.motion .pt-hero__sub { animation: fadeUp 1000ms var(--ease-out) 260ms both; }
.js.motion .hero__img img { animation: demist 1500ms var(--ease-out) both; }
@keyframes lineUp { from { clip-path: inset(0 0 100% 0); translate: 0 0.4em; } to { clip-path: inset(-0.1em 0 -0.25em 0); translate: 0 0; } }
@keyframes fadeUp { from { opacity: 0; translate: 0 0.6rem; } }
@keyframes demist { from { filter: blur(12px) saturate(0.75) brightness(1.08); scale: 1.04; } }

/* photos further down come out of the same mist as they arrive */
.js.motion .frame.is-veiled img { filter: blur(8px) saturate(0.85) brightness(1.05); opacity: 0.6; }
.js.motion .frame.is-veiled.is-in img { filter: none; opacity: 1; transition: filter 1100ms var(--ease-out), opacity 1100ms var(--ease-out); }

/* finder: the hero's sentence form */
.finder { display: grid; gap: var(--s-5); padding-block-start: var(--s-5); border-block-start: 1px solid var(--hair); max-width: 40rem; }
.finder__line { font-size: var(--step-2); font-weight: 520; font-stretch: 104%; line-height: 1.6; letter-spacing: -0.01em; }
.pick { position: relative; display: inline-block; }
.pick select {
  appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; margin: 0;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat;
  padding: 0 1.25em 0.05em 0.05em; font-weight: 720; font-stretch: 108%; color: var(--ink); cursor: pointer;
  background-color: transparent;
}
.pick::after { content: ""; position: absolute; inset-inline-end: 0.2em; top: 50%; width: 0.42em; height: 0.42em; border: solid var(--ink); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pick select:focus-visible { outline-offset: 4px; }
.finder__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }

/* toggle */
.toggle { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; font-weight: 560; min-height: 2.75rem; position: relative; }
.toggle input { position: absolute; opacity: 0; width: 2.75rem; height: 1.6rem; margin: 0; cursor: pointer; }
.toggle__ui { width: 2.75rem; height: 1.6rem; border-radius: var(--r-pill); background: var(--mist-2); box-shadow: inset 0 0 0 1.5px var(--hair); position: relative; transition: background-color var(--d-2) var(--ease-out); flex: none; }
.toggle__ui::after { content: ""; position: absolute; inset-block-start: 0.2rem; inset-inline-start: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgb(15 36 24 / 0.3); transition: translate var(--d-2) var(--ease-out); }
.toggle input:checked + .toggle__ui { background: var(--pool); box-shadow: none; }
.toggle input:checked + .toggle__ui::after { translate: 1.15rem 0; }
.toggle input:focus-visible + .toggle__ui { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ------------------------------------------------------------------ own pool */
.own { padding-block: var(--s-10) var(--s-9); }
.own__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); align-items: center; }
.own__photo { grid-column: 1 / span 6; grid-row: 1; }
.own__text { grid-column: 8 / span 5; grid-row: 1; display: grid; gap: var(--s-6); }
.own__detail { grid-column: 6 / span 2; grid-row: 1; align-self: end; width: 100%; margin-block-end: calc(-1 * var(--s-8)); z-index: 2; box-shadow: var(--shadow-2); outline: 0.5rem solid var(--paper); }
.always { display: grid; gap: 0; border-block-start: 1px solid var(--hair); }
.always > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s-4); padding-block: var(--s-4); border-block-end: 1px solid var(--hair); }
.always dt { font-weight: 640; font-stretch: 90%; color: var(--ink-3); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; padding-block-start: 0.15em; }
.always dd { font-weight: 560; }

/* ------------------------------------------------------------------ quick picks: one quiet line of shortcuts */
.routes { padding-block: var(--s-6) var(--s-7); border-block-end: 1px solid var(--hair); }
.routes__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.routes__title { font-size: 0.95rem; font-weight: 640; color: var(--ink-3); letter-spacing: 0; }
.qp__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.qp {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.4rem 0.45rem 0.4rem 1rem;
  border: 1.5px solid var(--hair); border-radius: var(--r-pill); background: #fff;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
.qp__n {
  display: inline-grid; place-items: center; min-width: 1.85rem; height: 1.85rem; padding-inline: 0.4rem;
  border-radius: var(--r-pill); background: var(--mist-1); color: var(--ink-2); font-size: 0.85rem; font-weight: 700;
  transition: background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
.qp:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.qp:hover .qp__n { background: var(--gold-soft); color: var(--night-deep); }
.qp:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.how__rules { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); margin-block-start: var(--s-7); }
.how__rules h3 { grid-column: 1 / span 5; font-size: var(--step-2); font-weight: 720; font-stretch: 110%; letter-spacing: -0.015em; }
.how__rules .rules { grid-column: 7 / span 6; }

/* ------------------------------------------------------------------ villa register */
.villas { background: var(--night); color: var(--night-ink); padding-block: var(--s-9) var(--s-10); }
.villas__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; margin-block-end: var(--s-7); }
.villas__side { justify-self: end; display: grid; gap: var(--s-4); justify-items: start; }
.villas__head p { color: var(--night-soft); max-width: 40ch; }
.villas__more { margin-block-start: var(--s-7); }
.villas .link-arrow { color: var(--night-ink); }

.reg { --reg-fg: var(--ink); --reg-soft: var(--ink-3); --reg-hair: var(--hair); --reg-hover: var(--mist-1); --cell-on: var(--ink); --cell-on-fg: var(--paper);
  border-block-start: 1px solid var(--reg-hair); color: var(--reg-fg); }
.villas .reg { --reg-fg: var(--night-ink); --reg-soft: var(--night-soft); --reg-hair: var(--night-hair); --reg-hover: var(--night-2); --cell-on: var(--gold-soft); --cell-on-fg: var(--night-deep); }
.reg__head, .reg__row {
  display: grid; align-items: center; gap: var(--s-5);
  grid-template-columns: 4.5rem minmax(12rem, 1fr) auto 7.5rem 4.5rem 10.5rem 2rem;
}
.reg__head { padding-block: var(--s-3); font-size: var(--step--1); font-weight: 600; font-stretch: 90%; text-transform: uppercase; letter-spacing: 0.07em; color: var(--reg-soft); border-block-end: 1px solid var(--reg-hair); }
.reg__head span:nth-child(6) { text-align: end; }
.reg__row { position: relative; padding-block: var(--s-4); border-block-end: 1px solid var(--reg-hair); transition: background-color var(--d-2) var(--ease-out); }
.reg__row:hover { background: var(--reg-hover); }
.reg__row[hidden] { display: none; }
.reg__thumb { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--mist-2); border-radius: var(--r-1); }
.reg__thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--d-4) var(--ease-out); }
.reg__row:hover .reg__thumb img { scale: 1.06; }
.reg__id { display: grid; gap: var(--s-1); min-width: 0; }
.reg__name { font-size: var(--step-2); font-weight: 720; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.1; text-decoration: none; overflow-wrap: anywhere; }
.reg__name::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.reg__name:focus-visible { outline: none; }
.reg__row:has(.reg__name:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.reg__meta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; color: var(--reg-soft); font-size: var(--step--1); font-weight: 520; }
.fam { display: inline-flex; align-items: center; gap: 0.3em; color: var(--moss); font-weight: 620; }
.villas .fam { color: #bfd3ba; }
.fam .i { width: 1.05em; height: 1.05em; }
.beds { display: inline-flex; gap: 2px; }
.beds i { display: grid; place-items: center; width: 1.55rem; height: 1.85rem; font-style: normal; font-size: 0.76rem; font-weight: 640; font-variant-numeric: tabular-nums;
  border: 1px solid var(--reg-hair); color: color-mix(in oklab, var(--reg-soft) 65%, transparent); border-radius: 2px; }
.beds i.on { background: var(--cell-on); border-color: var(--cell-on); color: var(--cell-on-fg); }
.reg__guests, .reg__rating { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 560; font-variant-numeric: tabular-nums; }
.reg__guests .i, .reg__rating .i { color: var(--reg-soft); }
.reg__rating .i { color: var(--gold); }
.villas .reg__rating .i { color: var(--gold-soft); }
.reg__price { text-align: end; font-weight: 680; font-stretch: 104%; font-size: var(--step-1); white-space: nowrap; }
.reg__from { font-weight: 500; font-size: var(--step--1); color: var(--reg-soft); }
.reg__go { display: grid; place-items: center; color: var(--reg-soft); transition: translate var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out); }
.reg__row:hover .reg__go { translate: 4px 0; color: var(--reg-fg); }

/* the floating preview over the register (pointer devices) */
.peek { position: fixed; inset: 0 auto auto 0; width: 15rem; aspect-ratio: 3 / 4; z-index: 40; pointer-events: none; opacity: 0; scale: 0.92;
  transition: opacity var(--d-2) var(--ease-out), scale var(--d-3) var(--ease-out); border-radius: var(--r-1); overflow: hidden; box-shadow: var(--shadow-2); }
.peek.is-on { opacity: 1; scale: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ area + voice */
.area { padding-block: var(--s-10); }
.area__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) var(--s-6); align-items: start; }
.area__grid > .h-display { grid-column: 1 / span 6; }
.area__text { grid-column: 8 / span 5; font-size: var(--step-1); line-height: 1.55; }
.voice { grid-column: 1 / span 9; margin-block-start: var(--s-8); }
.voice blockquote p { font: italic 400 var(--step-5)/1.08 var(--f-serif); letter-spacing: -0.015em; }
.voice figcaption { margin-block-start: var(--s-4); color: var(--ink-3); font-weight: 520; }
.area__rating { grid-column: 10 / span 3; align-self: end; color: var(--ink-2); border-block-start: 1px solid var(--hair); padding-block-start: var(--s-4); }
.area__rating strong { font-weight: 720; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ how to book */
.how { padding-block: var(--s-9); background: var(--mist-1); }
.how__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); }
.how__grid > .h-display { grid-column: 1 / span 5; }
.how__steps { grid-column: 7 / span 6; display: grid; counter-reset: st; }
.how__steps li { counter-increment: st; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-4); border-block-start: 1px solid var(--hair); color: var(--ink-2); }
.how__steps li::before { content: counter(st); font-weight: 760; font-stretch: 112%; color: var(--ink); font-size: var(--step-1); line-height: 1.35; }
.how__steps strong { color: var(--ink); font-weight: 680; }
.how__pay { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); align-items: center; margin-block-start: var(--s-7); padding-block-start: var(--s-6); border-block-start: 1px solid var(--hair); }
.how__pay > p { grid-column: 1 / span 4; color: var(--ink-2); }
.pay { grid-column: 5 / span 8; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.pay img { width: 5.25rem; height: auto; filter: grayscale(1) contrast(1.1); opacity: 0.7; mix-blend-mode: multiply; transition: filter var(--d-2), opacity var(--d-2); }
.pay li:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------------------ owners band */
.faq { padding-block: var(--s-9); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); }
.faq__grid > .h-display { grid-column: 1 / span 5; }
.faq__list { grid-column: 7 / span 6; display: grid; }
.faq__item + .faq__item { border-block-start: none; }
.faq__item summary h3 { font-size: var(--step-1); font-weight: 660; line-height: 1.3; padding-block: var(--s-3); }
.faq__item p { color: var(--ink-2); max-width: 58ch; padding-block-end: var(--s-4); }
.owners { background: var(--night); color: var(--night-ink); padding-block: var(--s-9); }
.owners__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; }
.owners p { color: var(--night-soft); max-width: 44ch; }

/* ------------------------------------------------------------------ footer */
.ftr { background: var(--night); color: var(--night-ink); padding-block: var(--s-8) var(--s-6); border-block-start: 1px solid var(--night-hair); --mk-mid: var(--petal); }
.ftr__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); padding-block-end: var(--s-7); border-block-end: 1px solid var(--night-hair); }
.ftr__hello { font-size: var(--step-6); font-weight: 820; font-stretch: 122%; letter-spacing: -0.04em; line-height: 0.92; }
.ftr__hello span { display: inline-block; }
.ftr__gloss { font: italic 400 var(--step-1)/1.4 var(--f-serif); color: var(--night-soft); max-width: 22ch; }
.ftr__gloss em { font-style: normal; font-family: var(--f-sans); font-weight: 620; color: var(--night-ink); }
.ftr__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); padding-block: var(--s-7); }
.ftr__h { font-size: var(--step--1); font-weight: 640; font-stretch: 90%; text-transform: uppercase; letter-spacing: 0.08em; color: var(--night-soft); margin-block-end: var(--s-4); }
.ftr__phone { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--step-1); font-weight: 680; text-decoration: none; font-variant-numeric: tabular-nums; }
.ftr__phone:hover { color: var(--gold-soft); }
.ftr__small { color: var(--night-soft); font-size: 0.94rem; margin-block-start: var(--s-2); max-width: 30ch; }
.ftr__time { margin-block-start: var(--s-3); font-size: 0.94rem; color: var(--night-ink); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 0.5em; }
.ftr__time::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--leaf-2); box-shadow: 0 0 0 3px rgb(168 196 106 / 0.18); }
.ftr__list { list-style: none; display: grid; gap: var(--s-2); }
.ftr__list a, .ftr__link { text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2rem; }
.ftr__list a:hover, .ftr__link:hover { text-decoration: underline; }
.ftr__link { font-weight: 620; margin-block-start: var(--s-2); }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-block-start: var(--s-5); border-block-start: 1px solid var(--night-hair); font-size: 0.88rem; color: var(--night-soft); }
.ftr__concept { font-style: italic; }
.ftr ::selection { background: var(--gold-soft); color: var(--night-deep); }
.ftr :focus-visible, .villas :focus-visible, .owners :focus-visible, .dusk :focus-visible, .pt :focus-visible, .hdr.is-dark :focus-visible { outline-color: var(--focus-dark); }

/* ------------------------------------------------------------------ listing page */
.page-list { background: var(--paper); }
.lst__head { padding-block: var(--s-8) var(--s-6); display: grid; gap: var(--s-4); }
.lst__title { font-size: var(--step-5); font-weight: 800; font-stretch: 116%; letter-spacing: -0.035em; line-height: 1; }
.lst__title [data-count] { font-variant-numeric: tabular-nums; display: inline-block; min-width: 1ch; }
.lst__sub { color: var(--ink-2); font-size: var(--step-1); max-width: 52ch; }
.lst__grid { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--s-8); align-items: start; padding-block-end: var(--s-10); }
.flt { position: sticky; top: calc(4rem + var(--s-5)); display: grid; gap: var(--s-5); padding-block-end: var(--s-5); }
.flt__head { display: flex; align-items: center; justify-content: space-between; }
.flt__title { font-size: var(--step-1); font-weight: 740; font-stretch: 110%; }
.flt__close { display: none; }
.flt__set { border: 0; margin: 0; padding: 0 0 var(--s-5); border-block-end: 1px solid var(--hair); display: grid; gap: var(--s-3); min-width: 0; }
.flt__set legend { font-weight: 660; padding: 0; margin-block-end: var(--s-3); float: left; width: 100%; }
.flt__set legend + * { clear: both; }
.flt__hint { font-size: var(--step--1); color: var(--ink-3); }
.flt__foot { display: flex; gap: var(--s-3); }
.flt__done { display: none; }
.stepper { display: flex; align-items: center; gap: var(--s-4); }
.stepper output { min-width: 3.5ch; text-align: center; font-size: var(--step-2); font-weight: 720; font-stretch: 110%; font-variant-numeric: tabular-nums; }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.chip { position: relative; display: grid; place-items: center; gap: 0; min-height: 3.1rem; border: 1.5px solid var(--hair); border-radius: var(--r-1); cursor: pointer; transition: border-color var(--d-1), background-color var(--d-1); }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.chip small { font-size: 0.72rem; color: var(--ink-3); line-height: 1; }
.chip:hover { border-color: var(--ink-3); }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:has(input:checked) small { color: var(--mist-3); }
.chip:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.checks { display: grid; gap: var(--s-1); }
.check { display: flex; align-items: center; gap: var(--s-3); min-height: 2.5rem; cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--ink); }
.check small { margin-inline-start: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.range input { width: 100%; accent-color: var(--pool); height: 2.75rem; }
.range__out { font-weight: 600; }
.lst__bar { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-3); border-block-end: 1px solid var(--hair); position: sticky; top: 4rem; background: var(--paper); z-index: 5; }
.lst__open { display: none; }
.lst__status { margin-inline-end: auto; color: var(--ink-2); font-weight: 560; font-variant-numeric: tabular-nums; }
.sort { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 560; color: var(--ink-3); }
.sort select, .field select, .field input {
  min-height: 2.75rem; padding: 0.45rem 2.2rem 0.45rem 0.8rem; border: 1.5px solid var(--hair); border-radius: var(--r-1); background-color: var(--paper); color: var(--ink); font-weight: 560;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.75rem) 50%; background-size: 0.32rem 0.32rem; background-repeat: no-repeat;
}
.field input { background-image: none; padding-inline-end: 0.8rem; width: 100%; }
.sort select:hover, .field select:hover, .field input:hover { border-color: var(--ink-3); }
.badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding-inline: 0.3rem; border-radius: var(--r-pill); background: var(--pool); color: var(--on-gold); font-size: 0.78rem; font-weight: 720; }
.lst__active { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block: var(--s-3); }
.lst__active:empty { display: none; }
.pill { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0.3rem 0.5rem 0.3rem 0.8rem; border-radius: var(--r-pill); background: var(--mist-1); border: 1px solid var(--hair); font-size: 0.9rem; font-weight: 560; }
.pill .i { width: 1rem; height: 1rem; }
.pill:hover { border-color: var(--ink); }
.reg--full .reg__head, .reg--full .reg__row { grid-template-columns: 5.5rem minmax(11rem, 1fr) auto 6.5rem 3.5rem 9rem 1.25rem; gap: var(--s-4); }
.reg--full .reg__row { padding-block: var(--s-4); }
.reg--full .reg__name { font-size: var(--step-1); font-stretch: 108%; }
.reg--full .reg__price { font-size: 1.05rem; }
.reg--full .beds i { width: 1.4rem; }
.reg__row.is-entering { animation: rowIn var(--d-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes rowIn { from { opacity: 0; translate: 0 0.75rem; } }
.lst__empty { padding: var(--s-8) var(--s-6); display: grid; gap: var(--s-3); justify-items: start; background: var(--mist-1); border-radius: var(--r-1); margin-block-start: var(--s-5); }
.lst__empty[hidden] { display: none; }
.lst__empty-t { font-size: var(--step-3); font-weight: 760; font-stretch: 110%; letter-spacing: -0.02em; }
.lst__empty-a { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-3); }
.lst__share { display: flex; gap: var(--s-3); align-items: flex-start; margin-block-start: var(--s-7); color: var(--ink-3); font-size: 0.94rem; max-width: 60ch; }
.lst__share .i { margin-block-start: 0.2em; }
.scrim { position: fixed; inset: 0; background: rgb(15 36 24 / 0.45); z-index: 59; opacity: 0; transition: opacity var(--d-2) var(--ease-out); }
.scrim.is-on { opacity: 1; }

/* ------------------------------------------------------------------ villa page */
.page-villa { background: var(--paper); }
.crumbs { display: flex; gap: var(--s-2); padding-block: var(--s-5) 0; font-size: 0.92rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.vp__head { padding-block: var(--s-5) var(--s-6); display: grid; gap: var(--s-4); }
.vp__title { font-size: var(--step-6); font-weight: 820; font-stretch: 118%; letter-spacing: -0.04em; line-height: 0.95; }
.vp__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ink-2); font-weight: 540; }
.vp__facts > span { display: inline-flex; align-items: center; gap: 0.4em; }
.vp__facts .i { color: var(--ink-3); }

.strip { position: relative; }
.strip__track {
  display: flex; gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-inline: max(var(--gutter), (100vw - var(--wrap)) / 2); scrollbar-width: none;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__item { flex: none; scroll-snap-align: start; height: clamp(22rem, 66vh, 42rem); aspect-ratio: var(--ar, 3 / 4); max-width: 92vw; }
.strip__item:first-child { height: clamp(22rem, 66vh, 42rem); }
.strip__btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--mist-2); overflow: hidden; border-radius: var(--r-1); cursor: zoom-in; }
.strip__btn img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--d-4) var(--ease-out), filter var(--d-3); }
.strip__btn:hover img { scale: 1.03; }
.strip__btn:focus-visible { outline-offset: -4px; outline-width: 3px; }
.strip__ctl { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-4); }
.strip__count { margin-inline-end: auto; font-weight: 640; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.strip__note { font-size: 0.9rem; color: var(--ink-3); font-style: italic; padding-block-end: var(--s-2); }

.vp__grid { display: grid; grid-template-columns: minmax(0, 1fr) 23.5rem; gap: var(--s-9); align-items: start; padding-block: var(--s-7) var(--s-9); }
.vp__body { display: grid; gap: var(--s-8); min-width: 0; }
.vp__sec { display: grid; gap: var(--s-4); }
.vp__sec h2 { font-size: var(--step-3); font-weight: 760; font-stretch: 112%; letter-spacing: -0.025em; }
.vp__lede { color: var(--ink-2); max-width: 60ch; }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tags li { padding: 0.45rem 0.85rem; border: 1px solid var(--hair); border-radius: var(--r-pill); font-weight: 560; background: var(--paper); }
.more-list { border-block: 1px solid var(--hair); }
.more-list summary { display: flex; justify-content: space-between; align-items: center; min-height: 3.25rem; cursor: pointer; font-weight: 640; list-style: none; }
.more-list summary::-webkit-details-marker { display: none; }
.more-list summary span { color: var(--ink-3); font-weight: 500; }
.more-list summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; margin-inline-start: var(--s-3); transition: rotate var(--d-2) var(--ease-out); }
.more-list[open] summary::after { rotate: 45deg; }
.cols { columns: 3 12rem; column-gap: var(--s-6); padding: var(--s-2) 0 var(--s-5); list-style: none; }
.cols li { padding-block: 0.3rem; break-inside: avoid; color: var(--ink-2); }

.table-scroll { overflow-x: auto; }
.rooms { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rooms th, .rooms td { padding: var(--s-4) var(--s-3); text-align: start; border-block-end: 1px solid var(--hair); }
.rooms thead th { font-size: var(--step--1); font-weight: 620; font-stretch: 90%; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding-block: var(--s-3); }
.rooms tbody th { font-weight: 660; }
.rooms td.num { font-weight: 680; white-space: nowrap; }
.rooms td:last-child { text-align: end; }
.rooms tr { transition: background-color var(--d-2) var(--ease-out); }
.rooms tr.is-picked { background: color-mix(in oklab, var(--gold) 16%, var(--paper)); }
.rooms tr.is-picked .btn { --b-bg: var(--ink); --b-fg: var(--paper); }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block-start: 1px solid var(--hair); }
.rules > div { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-block-end: 1px solid var(--hair); display: grid; gap: var(--s-1); }
.rules dt { font-size: var(--step--1); font-weight: 620; font-stretch: 90%; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.rules dd { font-weight: 560; }

.rvs { display: grid; gap: var(--s-6); }
.rv blockquote p { font: italic 400 var(--step-2)/1.35 var(--f-serif); }
.rv__by { margin-block-start: var(--s-3); color: var(--ink-3); font-size: 0.94rem; }
.rv__by a { color: var(--pool-ink); }

.panel { position: sticky; top: calc(4rem + var(--s-5)); display: grid; gap: var(--s-4); padding: var(--s-6); background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-1); box-shadow: var(--shadow-1); }
.panel__from { display: grid; gap: 0.1rem; color: var(--ink-3); }
.panel__from > span:first-child { font-size: 0.88rem; font-weight: 560; }
.panel__from strong { font-size: var(--step-3); font-weight: 760; font-stretch: 108%; color: var(--ink); letter-spacing: -0.02em; }
.panel__note { font-size: 0.86rem; color: var(--ink-3); }
.panel__ask { display: grid; gap: var(--s-3); margin-block-start: var(--s-2); }
.panel__or { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-3); font-size: 0.88rem; font-weight: 560; }
.panel__or::before, .panel__or::after { content: ""; height: 1px; background: var(--hair); flex: 1; }
.field { display: grid; gap: 0.3rem; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); }
.field select { width: 100%; font-size: 0.95rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.similar { padding-block: 0 var(--s-9); display: grid; gap: var(--s-5); }
.similar h2 { font-size: var(--step-3); font-weight: 760; font-stretch: 112%; letter-spacing: -0.025em; }
.reg--compact .reg__head { display: none; }

.mbar { display: none; }

/* lightbox */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--night-deep); color: var(--night-ink); overscroll-behavior: contain; }
.lb::backdrop { background: var(--night-deep); }
.lb[open] { display: grid; place-items: center; animation: lbIn var(--d-3) var(--ease-out); }
@keyframes lbIn { from { opacity: 0; } }
.lb__fig { display: grid; justify-items: center; gap: var(--s-3); max-width: min(92vw, 70rem); }
.lb__fig img { max-height: 82dvh; width: auto; max-width: 100%; object-fit: contain; border-radius: var(--r-1); }
.lb__fig figcaption { color: var(--night-soft); font-size: 0.94rem; text-align: center; }
.lb__count { position: absolute; inset-block-start: var(--s-5); inset-inline-start: var(--s-5); font-weight: 640; font-variant-numeric: tabular-nums; }
.lb .ibtn { position: absolute; background: var(--night-2); color: var(--night-ink); border-color: var(--night-hair); width: 3.25rem; height: 3.25rem; }
.lb .ibtn:hover { border-color: var(--night-ink); }
.lb__prev { inset-inline-start: var(--s-5); top: 50%; translate: 0 -50%; }
.lb__next { inset-inline-end: var(--s-5); top: 50%; translate: 0 -50%; }
.lb__close { inset-block-start: var(--s-4); inset-inline-end: var(--s-4); }
.lb :focus-visible { outline-color: var(--focus-dark); }

/* ------------------------------------------------------------------ partner page */
.page-partner { background: var(--night); color: var(--night-ink); }
.pt { --ink-2: var(--night-soft); }
.pt-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) min(44vw, calc(100svh * 0.75)); min-height: max(40rem, 100svh); isolation: isolate; }
.pt-hero__copy { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-6); padding: calc(var(--hdr-h) + var(--s-7)) var(--s-7) var(--s-9) max(var(--gutter), (100vw - var(--wrap)) / 2); z-index: 3; }
.pt-hero__title { font-size: clamp(2.6rem, 1rem + 5vw, 5.75rem); font-weight: 800; font-stretch: 116%; letter-spacing: -0.035em; line-height: 0.97; }
.pt-hero__title .ln { display: block; }
.pt-hero__sub { font: italic 400 var(--step-2)/1.38 var(--f-serif); color: var(--night-soft); max-width: 32ch; }
.pt-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.pt-hero__photo { position: relative; z-index: 1; }
.pt-hero__photo .hero__img { -webkit-mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 0.35) 18%, #000 38%), linear-gradient(to top, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, rgb(0 0 0 / 0.35) 18%, #000 38%), linear-gradient(to top, transparent 0, #000 16%); }
.pt-hero__photo figcaption { position: absolute; inset-block-end: var(--s-5); inset-inline: var(--s-7) var(--s-5); z-index: 3; color: var(--night-ink); font-size: var(--step--1); text-align: end; text-shadow: 0 1px 8px rgb(15 36 24 / 0.8); }
.mist--night { z-index: 2; height: 32%; }
.nofee { padding-block: var(--s-9); border-block: 1px solid var(--night-hair); }
.nofee__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.nofee__list li { display: grid; gap: var(--s-3); align-content: start; }
.nofee__big { font-size: var(--step-4); font-weight: 800; font-stretch: 118%; letter-spacing: -0.035em; line-height: 1; }
.nofee__list li p:last-child { color: var(--night-soft); font-size: var(--step-1); }
.ledger { padding-block: var(--s-10); }
.ledger__cols { display: grid; grid-template-columns: 1fr 1fr; margin-block-start: var(--s-7); border-block-start: 1px solid var(--night-hair); }
.ledger__col { padding: var(--s-6) var(--s-7) var(--s-6) 0; }
.ledger__col + .ledger__col { border-inline-start: 1px solid var(--night-hair); padding-inline: var(--s-7) 0; }
.ledger h3 { font-size: var(--step-2); font-weight: 740; font-stretch: 112%; margin-block-end: var(--s-5); }
.ledger li { padding-block: var(--s-3); border-block-end: 1px solid var(--night-hair); font-size: var(--step-1); line-height: 1.45; }
.ledger__col:first-child h3 { color: var(--gold-soft); }
.ledger__col:last-child h3 { color: #bfd3ba; }
.trail { padding-block: var(--s-9) var(--s-10); background: linear-gradient(to bottom, var(--night), var(--night-deep)); }
.trail__in { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); }
.trail__in > .h-display { grid-column: 1 / span 6; margin-block-end: var(--s-7); }
.trail__path { position: absolute; inset-block: 12rem 0; inset-inline-start: 0; width: min(100%, 52rem); height: calc(100% - 12rem); overflow: visible; }
.trail__base { fill: none; stroke: var(--night-hair); stroke-width: 2; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; }
.trail__line { fill: none; stroke: var(--gold-soft); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); vector-effect: non-scaling-stroke; }
.trail__steps { grid-column: 1 / -1; display: grid; gap: var(--s-9); position: relative; }
.trail__steps li { width: min(100%, 22rem); display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--night-2); border: 1px solid var(--night-hair); border-radius: var(--r-1); }
.trail__steps li:nth-child(odd) { justify-self: center; margin-inline-start: 18%; }
.trail__steps li:nth-child(even) { justify-self: start; }
.trail__steps li:nth-child(1) { margin-inline-start: 34%; }
.trail__steps h3 { font-size: var(--step-2); font-weight: 740; font-stretch: 110%; letter-spacing: -0.02em; }
.trail__steps p { color: var(--night-soft); }
.pt-cta { padding-block: var(--s-10); }
.pt-cta__in { display: grid; gap: var(--s-5); justify-items: start; }
.pt-cta__in p { color: var(--night-soft); font-size: var(--step-1); max-width: 40ch; }
.page-partner .ftr { border-block-start-color: var(--night-hair); }
.page-partner .btn--pool:hover { box-shadow: 0 10px 30px -12px rgb(228 210 168 / 0.45); }

/* ------------------------------------------------------------------ magnetic + cursor */


/* ------------------------------------------------------------------ tablet */
@media (max-width: 63.99em) {
  .nav { gap: var(--s-4); }
  .hero, .pt-hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__photo, .pt-hero__photo { order: -1; height: min(72svh, 46rem); }
  .hero__img, .pt-hero__photo .hero__img { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
  .hero__copy, .pt-hero__copy { padding: 0 var(--gutter) var(--s-8); margin-block-start: calc(-1 * var(--s-9)); }
  .hdr--over:not(.is-scrolled) { background: var(--hdr-bg); box-shadow: 0 1px 0 var(--hair); }
  .hdr--night:not(.is-scrolled) { --hdr-bg: color-mix(in oklab, var(--night) 94%, transparent); box-shadow: 0 1px 0 var(--night-hair); }
  .hero__photo { margin-block-start: var(--hdr-h); }
  .pt-hero__photo { margin-block-start: var(--hdr-h); }
  .mist--hero, .mist--night { inset-inline-start: 0; height: 30%; inset-block-end: auto; top: calc(min(72svh, 46rem) - 18%); }
  .hero__photo figcaption { inset-block-end: auto; inset-block-start: var(--s-4); }
  .own__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .own__photo { grid-column: 1 / span 5; }
  .own__detail { grid-column: 5 / span 3; grid-row: 1; align-self: end; margin-block-end: calc(-1 * var(--s-6)); }
  .own__text { grid-column: 1 / -1; grid-row: 2; margin-block-start: var(--s-6); }
  .pt-hero__photo figcaption { inset-block-end: auto; inset-block-start: var(--s-4); }
  .pt-hero__copy { margin-block-start: calc(-1 * var(--s-7)); }
  .villas__head { grid-template-columns: 1fr; }
  .villas__side { justify-self: start; }
  .reg__head { display: none; }
  .reg__row, .reg--full .reg__row {
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    grid-template-areas: "thumb id price" "thumb beds beds" "thumb guests rating";
    gap: var(--s-2) var(--s-4); align-items: center;
  }
  .reg__thumb { grid-area: thumb; align-self: start; }
  .reg__id { grid-area: id; }
  .beds { grid-area: beds; }
  .reg__guests { grid-area: guests; }
  .reg__rating { grid-area: rating; justify-self: end; }
  .reg__price { grid-area: price; align-self: start; }
  .reg__go { display: none; }
  .area__grid > .h-display, .area__text, .voice, .area__rating { grid-column: 1 / -1; }
  .how__grid > .h-display, .how__steps, .how__pay > p, .pay { grid-column: 1 / -1; }
  .owners__in { grid-template-columns: 1fr; align-items: start; }
  .how__rules h3, .how__rules .rules { grid-column: 1 / -1; }
  .faq__grid > .h-display, .faq__list { grid-column: 1 / -1; }
  .ftr__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lst__grid { grid-template-columns: 1fr; gap: 0; }
  .lst__open { display: inline-flex; }
  .flt {
    position: fixed; inset: auto 0 0; z-index: 60; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper); padding: var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0; box-shadow: 0 -20px 60px -20px rgb(15 36 24 / 0.5);
    translate: 0 105%; visibility: hidden; transition: translate var(--d-3) var(--ease-out), visibility 0s linear var(--d-3);
  }
  .flt.is-open { translate: 0 0; visibility: visible; transition: translate var(--d-3) var(--ease-out); }
  .flt__close, .flt__done { display: inline-flex; }
  .flt__foot { position: sticky; bottom: calc(-1 * var(--s-5) - env(safe-area-inset-bottom)); background: var(--paper); padding-block: var(--s-3); justify-content: space-between; }
  .chips { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .lst__bar { top: 4rem; }
  .vp__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .panel { position: static; }
  .mbar {
    display: flex; position: fixed; inset: auto 0 0; z-index: 45; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--paper) 96%, transparent); box-shadow: 0 -1px 0 var(--hair);
    transition: translate var(--d-3) var(--ease-out);
  }
  .mbar.is-hidden { translate: 0 110%; }
  .mbar p { display: flex; gap: 0.35em; align-items: baseline; color: var(--ink-3); }
  .mbar strong { color: var(--ink); font-size: var(--step-1); font-weight: 740; }
  .page-villa .ftr { padding-block-end: calc(var(--s-10) + env(safe-area-inset-bottom)); }
  .nofee__list { grid-template-columns: 1fr; gap: var(--s-7); }
  .trail__steps li:nth-child(n) { justify-self: start; margin-inline-start: 0; }
  .trail__steps li:nth-child(even) { justify-self: end; }
  .trail__path { width: 100%; }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 39.99em) {
  :root { --hdr-h: 4rem; }
  .brand__word { font-size: 1.08rem; }
  .brand__mark { width: 2.2rem; }
  .nav a[href$="partner.html"] { display: none; }
  .hdr__in { gap: var(--s-3); }
  .hdr__wa span { display: none; }
  .hdr__wa { width: 2.75rem; padding: 0; }
  .hero__photo, .pt-hero__photo { height: 64svh; }
  .mist--hero, .mist--night { top: calc(64svh - 20%); }
  .finder__line { font-size: var(--step-1); }
  .finder__row { flex-direction: column; align-items: stretch; }
  .finder__row .btn { width: 100%; }
  .own { padding-block: var(--s-8); }
  .own__detail { grid-column: 5 / span 4; margin-block-end: calc(-1 * var(--s-5)); }
  .own__photo { grid-column: 1 / span 6; }
  .own__text { margin-block-start: var(--s-5); }
  .always > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .reg__row, .reg--full .reg__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "thumb thumb" "id price" "beds beds" "guests rating";
    gap: var(--s-2) var(--s-3); padding-block: var(--s-5);
  }
  .reg__thumb { aspect-ratio: 16 / 10; border-radius: 10px; margin-block-end: var(--s-2); }
  .reg__name { font-size: var(--step-1); }
  .reg__price { font-size: 1rem; }
  .beds i { width: 1.3rem; height: 1.6rem; font-size: 0.7rem; }
  .ftr__cols { grid-template-columns: 1fr; gap: var(--s-6); }
  .ftr__hello { font-size: clamp(3rem, 16vw, 4.5rem); }
  .lst__bar { flex-wrap: wrap; }
  .lst__status { order: 3; flex-basis: 100%; }
  .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rules { grid-template-columns: 1fr; }
  .routes__in { gap: var(--s-3); }
  .strip__track { align-items: center; }
  .strip__item, .strip__item:first-child { height: auto; width: 80vw; }
  .strip__item--wide, .strip__item--wide:first-child { width: 92vw; }
  .rooms thead { display: none; }
  .rooms, .rooms tbody { display: block; }
  .rooms tr { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); padding-block: var(--s-4); border-block-end: 1px solid var(--hair); }
  .rooms th, .rooms td { padding: 0; border: 0; }
  .rooms tbody th { grid-column: 1 / -1; }
  .rooms td:nth-child(2), .rooms td:nth-child(4) { display: none; }
  .rooms td.rooms__sleeps { grid-column: 1; color: var(--ink-3); font-size: 0.92rem; }
  .rooms td.num { grid-column: 1; }
  .rooms td:last-child { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .field-row { grid-template-columns: 1fr; }
  .ledger__cols { grid-template-columns: 1fr; }
  .ledger__col, .ledger__col + .ledger__col { padding-inline: 0; border-inline-start: 0; }
  .trail__steps { gap: var(--s-7); }
  .trail__steps li:nth-child(n) { justify-self: stretch; width: auto; margin-inline-start: 2.5rem; }
  .trail__path { inset-inline-start: -1rem; width: 4rem; }
  .vp__title { font-size: clamp(2.4rem, 11vw, 3.5rem); }
}

@media (max-width: 22em) {
  .beds i { width: 1.1rem; }
  .brand__word { display: none; }
}

/* ------------------------------------------------------------------ lists arrive as lists: a short stagger, capped */
.js.motion [data-stagger] > :is(li, .reg__row) { opacity: 0; translate: 0 0.9rem; }
.js.motion [data-stagger] > .reg__head { opacity: 1; translate: none; }
.js.motion [data-stagger].is-in > :is(li, .reg__row) {
  opacity: 1; translate: 0 0;
  --sd: calc(min(var(--i, 0), 9) * 45ms);
  transition: opacity 700ms var(--ease-out) var(--sd), translate 700ms var(--ease-out) var(--sd), background-color var(--d-2) var(--ease-out) 0s;
}
/* titles on the inner pages rise the way the homepage headline does */
.js.motion .vp__title, .js.motion .lst__title { animation: lineUp 900ms var(--ease-out) both; }
.js.motion .vp__facts, .js.motion .lst__sub { animation: fadeUp 900ms var(--ease-out) 140ms both; }
.js.motion .strip__item { animation: stripIn 1000ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes stripIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.js.motion .panel { animation: fadeUp 900ms var(--ease-out) 260ms both; }
/* a changed count nudges, so the eye catches that the list just changed */
.is-bump { animation: bump 420ms var(--ease-out); }
@keyframes bump { 0% { translate: 0 0.25em; opacity: 0.3; } 100% { translate: 0 0; opacity: 1; } }
/* the lightbox swaps photos with a short cross-fade */
.lb__fig img.is-swap { animation: lbSwap 380ms var(--ease-out); }
@keyframes lbSwap { from { opacity: 0; scale: 0.985; } }

/* ------------------------------------------------------------------ page transition: the mist veil (cross-document View Transitions)
   Leaving a page, it dissolves into warm haze; the next page clears out of the mist from the bottom up.
   A villa's thumbnail and name morph into its photo strip and title. The header holds still.
   Browsers without cross-document View Transitions (Firefox) simply load the page. */
@view-transition { navigation: auto; }
.hdr { view-transition-name: hdr; }
::view-transition-group(hdr) { animation-duration: 0s; }
::view-transition-old(root) { animation: veilOut 380ms var(--ease-io) both; }
::view-transition-new(root) {
  animation: veilIn 820ms var(--ease-out) both, mistRise 900ms var(--ease-out) both;
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 100%); mask-image: linear-gradient(to top, #000 50%, transparent 100%);
  -webkit-mask-size: 100% 200%; mask-size: 100% 200%;
}
@keyframes veilOut { to { opacity: 0; filter: blur(10px) brightness(1.12) saturate(0.75); } }
@keyframes veilIn { from { opacity: 0; filter: blur(14px) brightness(1.16) saturate(0.7); } 45% { opacity: 1; } to { filter: none; } }
@keyframes mistRise { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: 0 100%; mask-position: 0 100%; } }
::view-transition-group(*.morph) { animation-duration: 620ms; animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1); }
::view-transition-old(*.morph), ::view-transition-new(*.morph) { animation-duration: 620ms; height: 100%; object-fit: cover; }
html:active-view-transition { overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: fadeQuick 160ms linear both !important; mask-image: none; -webkit-mask-image: none; filter: none; }
  ::view-transition-group(*) { animation-duration: 0s !important; }
}
@keyframes fadeQuick { from { opacity: 0; } }

/* ------------------------------------------------------------------ without JavaScript: hide controls that need it */
.no-js .flt, .no-js .lst__open, .no-js .sort, .no-js .lst__share, .no-js .strip__ctl .ibtn, .no-js .strip__ctl .btn,
.no-js .panel__ask .field, .no-js .panel__ask .field-row { display: none; }
.no-js .lst__grid { grid-template-columns: 1fr; }
.no-js .strip__btn { cursor: default; }

/* ------------------------------------------------------------------ pointer-only touches */
@media (hover: none) {
  .reg__row:hover { background: transparent; }
  .peek { display: none; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .mist i { animation: none; }
  .frame img { transform: none !important; }
}

/* ------------------------------------------------------------------ forced colours */
@media (forced-colors: active) {
  .btn, .ibtn, .chip, .pill { border: 1px solid ButtonText; }
  .beds i.on { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .mist, .peek { display: none; }
  .hero__img, .pt-hero__photo .hero__img { mask-image: none; -webkit-mask-image: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .hdr, .mbar, .mist, .strip__ctl, .panel__ask, .peek, .flt, .lst__bar, .lb { display: none !important; }
  body, .page-partner, .villas, .owners, .ftr, .dusk { background: #fff !important; color: #000 !important; }
  .frame img { transform: none; }
}
.nw { white-space: nowrap; }

/* ------------------------------------------------------------------ underlines that follow the pointer
   --ux is set by site.js to 0% or 100% from the side the pointer crossed. */
.nav a, .ftr__list a, .ftr__link, .ftr__phone, .hero__wa, .link-arrow, .crumbs a, .rv__by a, .textbtn {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: var(--ux, 0%) 100%;
  transition: background-size var(--d-3) var(--ease-out), color var(--d-2) var(--ease-out);
}
.nav a, .ftr__list a, .ftr__link, .ftr__phone, .hero__wa { background-size: 0% 1.5px; }
.nav a:hover, .nav a[aria-current="page"], .ftr__list a:hover, .ftr__link:hover, .ftr__phone:hover, .hero__wa:hover { background-size: 100% 1.5px; text-decoration: none; }
.link-arrow, .crumbs a, .rv__by a, .textbtn { background-size: 100% 1px; }
.link-arrow:hover, .crumbs a:hover, .rv__by a:hover, .textbtn:hover { background-size: 0% 1px; background-position: var(--ux, 0%) 100%; }
.ftr__list a, .ftr__link, .ftr__phone { min-height: 0; padding-block: 0.15rem; }

/* ------------------------------------------------------------------ dropdowns (js/site.js builds them over the native select) */
.dd { position: relative; display: inline-block; vertical-align: baseline; }
.dd--box { display: block; }
.sort .dd--box { display: inline-block; min-width: 12.5rem; }
.dd__native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.pick:has(.dd)::after { display: none; }
.dd__btn {
  appearance: none; -webkit-appearance: none; border: 0; margin: 0; background: none; color: inherit; font: inherit;
  display: inline-flex; align-items: center; gap: 0.35em; cursor: pointer; text-align: start;
}
.pick .dd__btn {
  font-weight: 720; font-stretch: 108%; padding: 0 0.1em 0.06em;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat;
  transition: background-size var(--d-2) var(--ease-out);
}
.pick .dd.is-open .dd__btn { background-size: 100% 3px; }
.dd--box .dd__btn {
  width: 100%; justify-content: space-between; min-height: 2.75rem; padding: 0.45rem 0.85rem;
  border: 1.5px solid var(--hair); border-radius: 8px; background: var(--paper); font-weight: 560; font-size: 0.95rem;
  transition: border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.dd--box .dd__btn:hover, .dd--box.is-open .dd__btn { border-color: var(--ink-3); background: #fff; }
.dd__caret { width: 0.85em; height: 0.85em; flex: none; transition: rotate var(--d-3) var(--ease-out); }
.dd.is-open .dd__caret { rotate: 180deg; }
.dd__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.dd__list {
  position: absolute; top: calc(100% + 0.5rem); inset-inline-start: -0.4rem; z-index: 40;
  min-width: max(100%, 12.5rem); max-height: 20rem; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0.4rem; list-style: none;
  background: #fff; border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow-2);
  font: 500 1rem/1.3 var(--f-sans); font-stretch: 100%; letter-spacing: 0; color: var(--ink-2);
  transform-origin: top left; opacity: 0; translate: 0 -0.4rem; scale: 0.97; visibility: hidden; pointer-events: none;
  transition: opacity 140ms var(--ease-out), translate 180ms var(--ease-out), scale 180ms var(--ease-out), visibility 0s linear 180ms;
}
.dd--box .dd__list { inset-inline-start: 0; min-width: 100%; }
.dd.is-up .dd__list { top: auto; bottom: calc(100% + 0.5rem); transform-origin: bottom left; translate: 0 0.4rem; }
.dd.is-open .dd__list {
  opacity: 1; translate: 0 0; scale: 1; visibility: visible; pointer-events: auto;
  transition: opacity 180ms var(--ease-out), translate 320ms var(--ease-out), scale 320ms var(--ease-out), visibility 0s;
}
.dd__list:focus { outline: none; }
.dd__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem; padding: 0.5rem 0.75rem; border-radius: 9px; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.dd--box .dd__list li { white-space: normal; }
.dd__list li.is-active { background: var(--mist-1); color: var(--ink); }
.dd__list li[aria-selected="true"] { color: var(--ink); font-weight: 680; }
.dd__list li .i { flex: none; width: 1.05em; height: 1.05em; color: var(--gold); opacity: 0; scale: 0.6; transition: opacity var(--d-2) var(--ease-out), scale var(--d-2) var(--ease-out); }
.dd__list li[aria-selected="true"] .i { opacity: 1; scale: 1; }
.js.motion .dd.is-open .dd__list li { animation: ddItem 300ms var(--ease-out) both; animation-delay: calc(min(var(--k, 0), 8) * 22ms); }
@keyframes ddItem { from { opacity: 0; translate: 0 -0.3rem; } }

/* ------------------------------------------------------------------ drifting detail photos: the small overlapping frame
   moves as one layer, starting higher over the big photo and settling downward as the page scrolls. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js [data-drift] { animation: driftY linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes driftY { from { translate: 0 calc(var(--drift, 6rem) * -1); } to { translate: 0 calc(var(--drift, 6rem) * 0.6); } }
@media (max-width: 39.99em) { [data-drift] { --drift: 2.5rem !important; } }

/* ------------------------------------------------------------------ plugin additions (0.1.0) */
/* TranslatePress' own switcher, sat in the header beside WhatsApp */
.hdr__lang { font-size: var(--step--1); font-weight: 600; }
.hdr__lang .trp-language-switcher { width: auto; }
.hdr__lang .trp-ls-shortcode-current-language, .hdr__lang .trp-ls-shortcode-language { background: transparent; border-color: var(--hair); }
/* editor-only placeholder for a fact the owner has not confirmed (hlp_ph) */
.ph { display: inline-block; padding: 0.1em 0.5em; border: 1px dashed var(--gold); color: var(--gold); font-size: var(--step--1); border-radius: var(--r-1); }
/* rooms table: the unit photo beside its name */
.unit { display: flex; align-items: center; gap: var(--s-3); }
.unit img { width: 3.5rem; height: 3.5rem; min-width: 3.5rem; object-fit: cover; border-radius: var(--r-1); flex: none; }
.rooms tbody th { min-width: 13rem; }
.vp__sec .link-arrow { justify-self: start; }
.rooms__ask { font-weight: 560; color: var(--ink-3); }
.vp__h3 { font-size: var(--step-1); font-weight: 700; font-stretch: 108%; margin-block-start: var(--s-3); }
.ticks { display: grid; gap: var(--s-2); }
.ticks li { padding-inline-start: 1.4em; position: relative; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; width: 0.6em; height: 0.35em; border-inline-start: 2px solid var(--gold); border-block-end: 2px solid var(--gold); rotate: -45deg; }
.panel__note--min { color: var(--ink); font-weight: 560; }
/* footer payment partners: white chips on the dark footer */
.ftr__pay { padding-block: 0 var(--s-6); }
.ftr .pay { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ftr .pay img { width: 5.25rem; height: auto; mix-blend-mode: normal; filter: none; opacity: 1; background: #fff; border-radius: var(--r-1); padding: 0.2rem 0.4rem; }
.ftr__credit a { color: inherit; }
/* listing: the keyword block under the results; 404 */
.lst__about { margin-block-start: var(--s-7); padding-block-start: var(--s-6); border-block-start: 1px solid var(--hair); }
.lst__about h2 { font-size: var(--step-2); font-weight: 760; font-stretch: 112%; letter-spacing: -0.02em; color: var(--ink); margin-block-end: var(--s-3); }
.nf__act { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }
.vp__lead { color: var(--ink); font-weight: 520; }
/* the header with the language switcher in it: keep it on one line on phones */
.brand { flex: none; }
.brand__mark { flex: none; }
.nav a { white-space: nowrap; }
@media (max-width: 40em) {
  .hdr__in { gap: var(--s-3); }
  .nav a[href*="partner"] { display: none; } /* the footer links to it */
}
.rooms__lbl { display: none; }
@media (max-width: 40em) {
  .rooms__lbl { display: inline; }
  .rooms tbody th { min-width: 0; }
}
/* 0.3.0: found on real data */
/* phone: the keyword line must not sit on the photo */
@media (max-width: 63.99em) {
  .hero__copy { margin-block-start: 0; padding-block-start: var(--s-5); }
}
/* the WhatsApp Bubble snippet must clear the phone booking bar */
.page-villa #hp-wa-bubble { transition: bottom var(--d-2) var(--ease-out); }
@media (max-width: 63.99em) {
  .page-villa #hp-wa-bubble { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* TranslatePress: switcher and language popup in the site's palette (CSS only, its settings stay untouched) */
.hdr__lang .trp-language-switcher, .hdr__lang .trp-shortcode-switcher__wrapper { background: transparent; }
.hdr__lang .trp-shortcode-anchor, .hdr__lang .trp-shortcode-overlay { background: var(--paper); color: var(--ink); border-color: var(--hair); border-radius: var(--r-1); }
.trp_ald_modal { background: var(--paper) !important; color: var(--ink) !important; border: 0 !important; border-radius: var(--r-1); box-shadow: var(--shadow-2); }
.trp_ald_button, #trp_ald_no_text_popup_change_language { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
#trp_ald_x_button_and_textarea, #trp_ald_x_button_textarea { color: var(--ink-2) !important; }
/* other pages */
.gen__body { padding-block-end: var(--s-9); }
.gen__list { display: grid; gap: var(--s-3); }
/* 0.4.0: owner's review of the villa page */
/* 1. strip arrows: solid, so they read as buttons; the disabled end stays plainly different */
.strip__ctl .ibtn { background: var(--ink); border-color: var(--ink); color: var(--paper); cursor: pointer; }
.strip__ctl .ibtn .i { width: 1.35rem; height: 1.35rem; }
.strip__ctl .ibtn:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); }
.strip__ctl .ibtn:disabled { background: transparent; border-color: var(--hair); color: var(--ink-3); opacity: 1; cursor: default; }
/* 2. panel fields: a light tint, so they read as things to fill in */
.field input, .field select, .field .dd--box .dd__btn { background-color: color-mix(in oklab, var(--ink) 6%, var(--paper)); border-color: color-mix(in oklab, var(--ink) 18%, var(--paper)); }
.field input:hover, .field .dd--box .dd__btn:hover, .field .dd--box.is-open .dd__btn { background-color: color-mix(in oklab, var(--ink) 9%, var(--paper)); border-color: var(--ink-3); }
.dd.is-need .dd__btn { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.btn[aria-disabled="true"] { opacity: 0.8; pointer-events: auto; cursor: pointer; }
/* 3. the Maps link: a plain underline, no animation */
.vp__sec .link-arrow, .vp__sec .link-arrow .i { transition: none; }
.vp__sec .link-arrow:hover { background-size: 100% 1px; background-position: 0 100%; color: var(--gold); }
.vp__sec .link-arrow:hover .i { transform: none; }
/* 4. long reviews stop at five lines until Read more; without JS the whole review shows */
.js .rv--long:not(.is-open) blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.rv__more { margin-block: var(--s-2); font-weight: 600; }
.no-js .rv__more { display: none; }
/* the WordPress admin bar (logged-in editors): the sticky header and panel sit under it */
.admin-bar { --ab: 32px; }
.admin-bar .hdr { inset-block-start: var(--ab); }
.admin-bar .panel { top: calc(4rem + var(--s-5) + var(--ab)); }
@media (max-width: 782px) { .admin-bar { --ab: 46px; } }
@media (max-width: 600px) { .admin-bar .hdr { inset-block-start: 0; } }
/* the register sits in columns of very different widths (full page, beside the filters), so it
   answers to its own width, not the window's. 64rem and 56rem are the rows' real minimum widths.
   Phones keep their own layout (big wide photos), hence the min-width. */
.reg { container-type: inline-size; }
@media (min-width: 40em) {
  @container (max-width: 64rem) {
    .reg:not(.reg--full) .reg__head { display: none; }
    .reg:not(.reg--full) .reg__row {
      grid-template-columns: 7.5rem minmax(0, 1fr) auto;
      grid-template-areas: "thumb id price" "thumb beds beds" "thumb guests rating";
      gap: var(--s-2) var(--s-4);
    }
    .reg:not(.reg--full) .reg__thumb { grid-area: thumb; align-self: start; }
    .reg:not(.reg--full) .reg__id { grid-area: id; }
    .reg:not(.reg--full) .beds { grid-area: beds; }
    .reg:not(.reg--full) .reg__guests { grid-area: guests; }
    .reg:not(.reg--full) .reg__rating { grid-area: rating; justify-self: end; }
    .reg:not(.reg--full) .reg__price { grid-area: price; align-self: start; }
    .reg:not(.reg--full) .reg__go { display: none; }
  }
  @container (max-width: 56rem) {
    .reg--full .reg__head { display: none; }
    .reg--full .reg__row {
      grid-template-columns: 7.5rem minmax(0, 1fr) auto;
      grid-template-areas: "thumb id price" "thumb beds beds" "thumb guests rating";
      gap: var(--s-2) var(--s-4);
    }
    .reg--full .reg__thumb { grid-area: thumb; align-self: start; }
    .reg--full .reg__id { grid-area: id; }
    .reg--full .beds { grid-area: beds; }
    .reg--full .reg__guests { grid-area: guests; }
    .reg--full .reg__rating { grid-area: rating; justify-self: end; }
    .reg--full .reg__price { grid-area: price; align-self: start; }
    .reg--full .reg__go { display: none; }
  }
}
/* very narrow phones: long display words must not push the page wider */
.area__grid > *, .trail__in > *, .trail__steps > * { min-width: 0; }
.h-display { overflow-wrap: break-word; }
@media (max-width: 39.99em) { .area__grid, .trail__in, .trail__steps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 39.99em) { .how__grid, .how__rules, .how__pay, .faq__grid, .own__grid { column-gap: var(--s-2); } }