/* ─────────────────────────────────────────────────────────────────────────
   JCM Villas Ubud — design tokens
   Brand: teal #005357 (hutan) · gold #D2B980 (kunyit) · ivory (kabut) — from the JCM logo
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --hutan: #005357;      /* brand teal (logo background) */
  --hutan-2: #0b6064;
  --hutan-3: #1a6d71;
  --lumut: #4f6f6c;
  --kabut: #f4f1ea;      /* warm ivory */
  --kabut-2: #e9e3d6;
  --batu: #d3cbb8;
  --kunyit: #d2b980;     /* brand gold */
  --kunyit-2: #c2a566;
  --kunyit-ink: #6e5a2b;
  --white: #ffffff;
  --ink: #0b3d40;
  --muted: #566866;
  --line: rgba(0, 63, 66, 0.13);
  --line-light: rgba(244, 241, 234, 0.18);

  --f-display: 'Darker Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --f-text: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-brand: 'Marcellus', 'Optima', Georgia, serif; /* close to the logo lettering */

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --nav-h: 72px;
  --shadow: 0 1px 2px rgba(0, 63, 66, 0.06), 0 12px 40px -12px rgba(0, 63, 66, 0.22);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--kabut);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--kunyit); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--kunyit); color: var(--hutan); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* Type */
.h3, .vsec__title { font: 600 clamp(28px, 3vw, 38px)/1 var(--f-display); letter-spacing: -0.005em; }
.h4 { font: 600 24px/1.1 var(--f-display); }
h2 { font: 600 clamp(38px, 5.2vw, 72px)/0.92 var(--f-display); letter-spacing: -0.01em; }
.eyebrow { font: 600 12px/1.2 var(--f-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lumut); margin: 0 0 14px; }
.eyebrow--light { color: var(--kunyit); }
.sechead { margin: 0 auto clamp(32px, 5vw, 60px); max-width: 860px; text-align: center; }
.sechead h2 { text-wrap: balance; }

/* Buttons */
.btn {
  --bg: var(--hutan); --fg: var(--kabut);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  background: var(--bg); color: var(--fg); font: 600 15px/1 var(--f-ui); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; transition: background .2s, transform .2s var(--ease), box-shadow .2s;
  white-space: nowrap;
}
.btn .ic { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--accent { --bg: var(--kunyit); --fg: var(--hutan); }
.btn--accent:hover { --bg: var(--kunyit-2); }
.btn--dark { --bg: var(--hutan); --fg: var(--kabut); }
.btn--dark:hover { --bg: var(--hutan-3); }
.btn--ghost { --bg: transparent; --fg: var(--hutan); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--hutan); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 16px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::after { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: inherit; flex: none; }
.iconbtn .ic { width: 20px; height: 20px; }
.iconbtn:hover { background: rgba(0, 63, 66, .07); }
.iconbtn--line { border: 1px solid var(--line); width: 36px; height: 36px; }
.iconbtn--line:hover { border-color: var(--hutan); background: transparent; }
.iconbtn--line[disabled] { opacity: .3; cursor: not-allowed; }
.iconbtn--light { color: var(--kabut); }
.iconbtn--light:hover { background: rgba(255, 255, 255, .12); }
.linklike { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; color: inherit; }
.ic { width: 20px; height: 20px; flex: none; }

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); color: var(--kabut); transition: color .3s; }
.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(244, 241, 234, .92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .3s; }
.nav--solid, .nav.is-scrolled { color: var(--hutan); }
.nav--solid::before, .nav.is-scrolled::before { opacity: 1; }
.nav.is-open::before { box-shadow: none; }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.logo__mark { display: block; width: 52px; height: 40px; flex: none; background: var(--logo-mark, currentColor); -webkit-mask: url(/assets/brand/jcm-monogram-gold.png) center / contain no-repeat; mask: url(/assets/brand/jcm-monogram-gold.png) center / contain no-repeat; transition: background-color .3s; }
.logo__txt { display: grid; gap: 3px; padding-left: 12px; border-left: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 35%, transparent); font-family: var(--f-brand); text-transform: uppercase; line-height: 1; }
.logo__txt b { font-weight: 400; font-size: 17px; letter-spacing: .2em; }
.logo__txt small { font-size: 10px; letter-spacing: .32em; opacity: .75; }
.nav:not(.nav--solid):not(.is-scrolled) .logo { --logo-mark: var(--kunyit); }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 999px; font: 500 15px/1 var(--f-ui); text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav__link .ic { width: 16px; height: 16px; transition: transform .2s; }
.nav__link:hover { background: rgba(127, 127, 127, .14); }
.nav__drop { position: relative; }
.nav__drop.is-open .nav__link .ic { transform: rotate(180deg); }
.nav__menu { position: absolute; top: calc(100% + 10px); left: -8px; width: 300px; background: var(--white); color: var(--hutan); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; display: none; }
.nav__drop.is-open .nav__menu { display: block; }
.nav__menu a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; font: 600 22px/1 var(--f-display); }
.nav__menu a small { display: block; font: 400 13px/1.3 var(--f-ui); color: var(--muted); margin-top: 4px; }
.nav__menu a:hover { background: var(--kabut); }
.nav__menu-all { border-top: 1px solid var(--line); margin-top: 4px; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.cur select { appearance: none; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 999px; padding: 8px 14px; font: 600 13px/1 var(--f-ui); cursor: pointer; opacity: .85; }
.cur select option { color: var(--hutan); }
.nav__burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
.nav__burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .25s; }
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 26px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.nav__sheet { position: fixed; inset: var(--nav-h) 0 0; z-index: 49; background: var(--kabut); color: var(--hutan); overflow-y: auto; overscroll-behavior: contain; padding: 8px 0 calc(32px + env(safe-area-inset-bottom)); animation: fade .2s both; }
.nav__sheet .wrap { display: flex; flex-direction: column; gap: 0; text-align: center; }
.nav__sheet a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 600 28px/1 var(--f-display); }
.nav__sheet-label { font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--lumut); padding: 18px 0 6px; }
.nav__sheet .cur { align-self: center; margin-top: 18px; }
.nav__sheet-villa small { display: block; font: 400 14px/1.3 var(--f-ui); color: var(--muted); margin-top: 6px; }
.nav__sheet .btn { margin-top: 12px; }
.nav--minimal .nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav__back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; font-size: 15px; }
.nav__secure { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.nav__secure .ic { width: 16px; height: 16px; }

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
}
@media (max-width: 640px) {
  .nav__actions .btn, .nav__actions .cur { display: none; }
  .logo__txt { display: none; }
  .nav__secure span { display: none; }
  .page-home .nav:not(.is-scrolled) .nav__burger { color: var(--kabut); }
}

/* ── Hero (signature: tinted by the real time in Ubud) ─────────────────── */
.hero { position: relative; min-height: max(660px, 100svh); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--kabut); isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: heroIn 2.4s var(--ease) both; }
@keyframes heroIn { from { transform: scale(1.12); opacity: .6; } to { transform: scale(1.04); opacity: 1; } }
.hero__tint { position: absolute; inset: 0; z-index: -1; transition: background 1.2s; background:
  linear-gradient(180deg, rgba(0, 63, 66,.55) 0%, rgba(0, 63, 66,.18) 30%, rgba(0, 63, 66,.25) 60%, rgba(0, 63, 66,.85) 100%), var(--phase, transparent); }
.hero[data-phase="dawn"]    { --phase: linear-gradient(180deg, rgba(196,170,214,.38), rgba(244, 241, 234,.08)); }
.hero[data-phase="morning"] { --phase: linear-gradient(180deg, rgba(255,236,196,.20), rgba(255,255,255,0)); }
.hero[data-phase="day"]     { --phase: transparent; }
.hero[data-phase="golden"]  { --phase: linear-gradient(180deg, rgba(210, 185, 128,.28), rgba(227,120,47,.12)); }
.hero[data-phase="evening"] { --phase: linear-gradient(180deg, rgba(42,48,110,.42), rgba(227,140,60,.10)); }
.hero[data-phase="night"]   { --phase: linear-gradient(180deg, rgba(8,18,40,.62), rgba(8,18,40,.30)); }
.hero__inner { display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 56px; }
.hero__clock { display: inline-flex; align-items: center; justify-content: center; gap: 4px 10px; flex-wrap: wrap; font: 500 14px/1.3 var(--f-ui); background: rgba(0, 63, 66, .38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 8px 18px 8px 14px; border-radius: 999px; margin: 0 0 26px; }
.hero__clock > span:first-of-type { display: inline-flex; align-items: center; gap: 10px; }
.hero__clock b { font-variant-numeric: tabular-nums; font-weight: 600; }
.hero__clock-line { opacity: .88; font-family: var(--f-text); font-style: italic; font-size: 15px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--kunyit); box-shadow: 0 0 0 0 rgba(210, 185, 128,.7); animation: pulse 2.4s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(210, 185, 128,0); } 100% { box-shadow: 0 0 0 0 rgba(210, 185, 128,0); } }
.hero__title { font: 600 clamp(46px, 8.6vw, 132px)/0.88 var(--f-display); letter-spacing: -0.02em; max-width: 14ch; margin: 0 auto 26px; text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 30, 32, .25); }
.hero__lede { font: 400 clamp(17px, 1.6vw, 21px)/1.45 var(--f-text); max-width: 580px; opacity: .94; margin: 0 auto 34px; text-wrap: balance; }
.hero .search { width: 100%; margin-inline: auto; }
.hero__proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 24px; font-size: 14px; opacity: .92; }
.hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero__proof .ic { width: 16px; height: 16px; color: var(--kunyit); }

/* Search bar */
.search { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; align-items: stretch; background: var(--white); color: var(--hutan); border-radius: 999px; padding: 6px; box-shadow: var(--shadow); max-width: 980px; text-align: left; }
.search__f { display: flex; flex-direction: column; justify-content: center; gap: 3px; text-align: left; padding: 10px 22px; border: 0; background: none; border-radius: 999px; cursor: pointer; min-width: 0; position: relative; }
.search__f + .search__f::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.search__f:hover { background: var(--kabut); }
.search__f:hover::before, .search__f:hover + .search__f::before { opacity: 0; }
.search__f > span { font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.search__f > b, .search__f select { font: 500 16px/1.2 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search__f select { appearance: none; border: 0; background: transparent; padding: 0; color: var(--hutan); cursor: pointer; width: 100%; }
.search__f select:focus-visible { outline: none; }
.search__f:focus-within { background: var(--kabut); }
.search__go { min-height: 60px; padding: 0 28px; }
@media (max-width: 900px) {
  .search { grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); gap: 4px; padding: 8px; }
  .search__f { border-radius: 12px; padding: 12px 14px; background: var(--kabut); min-height: 58px; }
  .search__f + .search__f::before { display: none; }
  .search__f--villa { grid-column: 1 / -1; }
  .search__f--guests { grid-column: 1 / -1; }
  .search__go { grid-column: 1 / -1; border-radius: 12px; margin-top: 4px; min-height: 56px; }
}

/* Results (home search) */
.results { padding-top: 48px; }
.results__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 24px; }
.results__head h2 { font-size: clamp(30px, 3.4vw, 44px); }
.results__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rcard { background: var(--white); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--line); }
.rcard img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.rcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.rcard__body h3 { font: 600 30px/1 var(--f-display); }
.rcard__meta { color: var(--muted); font-size: 14px; }
.rcard__price { margin-top: auto; padding-top: 12px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.rcard__price b { font-size: 22px; }
.rcard--off { opacity: .55; }
.rcard__why { font-size: 14px; color: var(--kunyit-ink); font-weight: 500; }

/* ── Intro ──────────────────────────────────────────────────────────── */
.intro { padding-block: clamp(72px, 10vw, 150px) clamp(56px, 8vw, 110px); text-align: center; }
.intro__inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.intro__lead { font: 400 clamp(26px, 3.2vw, 44px)/1.18 var(--f-text); letter-spacing: -0.01em; text-wrap: balance; margin-bottom: 26px; }
.intro__body { font: 400 clamp(17px, 1.4vw, 19px)/1.6 var(--f-text); color: var(--muted); max-width: 620px; margin: 0 auto 32px; }
.intro__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.intro__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--white); font-size: 15px; font-weight: 500; }
.intro__facts .ic { width: 18px; height: 18px; color: var(--lumut); }

/* ── Villa cards ────────────────────────────────────────────────────── */
.villas { padding-bottom: clamp(72px, 10vw, 140px); }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vcard { display: flex; flex-direction: column; text-align: center; background: var(--white); border-radius: var(--r-lg); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s; }
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.vcard__media { position: relative; display: block; aspect-ratio: 4/4.2; overflow: hidden; background: var(--kabut-2); }
.vcard__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.vcard__media > img + img { opacity: 0; }
@media (hover: hover) { .vcard:hover .vcard__media > img + img { opacity: 1; } .vcard:hover .vcard__media > img { transform: scale(1.03); } }
.vcard__logo { position: absolute; inset: auto 0 0; z-index: 1; display: grid; place-items: center; padding: 64px 16px 22px; background: linear-gradient(180deg, rgba(0, 30, 32, 0), rgba(0, 30, 32, .62)); pointer-events: none; }
.vcard__logo img { width: auto; height: 58px; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25)); }
.vcard__badge { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1; background: rgba(255,255,255,.94); color: var(--hutan); padding: 8px 14px; border-radius: 999px; font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.vcard__body { padding: 26px 24px 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1; }
.vcard__name { font: 600 clamp(40px, 3.6vw, 54px)/0.9 var(--f-display); letter-spacing: -0.01em; }
.vcard__name a { text-decoration: none; }
.vcard__tag { font: 400 18px/1.4 var(--f-text); color: var(--muted); margin: 0; max-width: 30ch; text-wrap: balance; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; }
.facts .ic { width: 16px; height: 16px; color: var(--lumut); }
.vcard__rate { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.vcard__rate b { color: var(--hutan); }
.vcard__rate span:last-child b { font-size: 20px; }
.vcard__stars { display: inline-flex; align-items: center; gap: 5px; }
.vcard__stars .ic, .vhead__n .ic, .bk__stars .ic, .gf__v .ic:first-child { width: 16px; height: 16px; fill: var(--kunyit); stroke: var(--kunyit); }
@media (max-width: 1060px) {
  .vgrid { grid-template-columns: 1fr; max-width: 580px; margin-inline: auto; }
  .vcard__media { aspect-ratio: 4/3; }
}
.vdots { display: none; }
/* Phones: the villas side by side, swipeable, the next card peeking in */
@media (max-width: 760px) {
  .vgrid { display: flex; max-width: none; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .vgrid::-webkit-scrollbar { display: none; }
  .vgrid > .vcard { flex: 0 0 min(80%, 360px); scroll-snap-align: start; }
  .vdots { display: flex; justify-content: center; margin-top: 10px; }
  .vdots button { display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
  .vdots button::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--batu); transition: width .3s var(--ease), background .3s; }
  .vdots button.is-on::before { width: 22px; background: var(--hutan); }
}

/* ── Rhythm of the day (signature) ──────────────────────────────────── */
.rhythm { background: var(--hutan); color: var(--kabut); padding-block: clamp(72px, 10vw, 140px); overflow: hidden; }
.rhythm__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 44px; }
.rhythm h2 { max-width: 14ch; margin-inline: auto; }
.rhythm__now { max-width: 480px; font: 400 18px/1.45 var(--f-text); color: rgba(244, 241, 234,.8); margin: 0 auto; }
.rhythm__now b { color: var(--kunyit); font-family: var(--f-ui); font-variant-numeric: tabular-nums; }
.rhythm__track {
  --bleed: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bleed);
  padding: 34px 0 14px var(--bleed); margin-inline: calc(50% - 50vw);
  scrollbar-width: none;
}
.rhythm__track::-webkit-scrollbar { display: none; }
.rhythm__marker { position: absolute; top: 28px; left: 0; z-index: 1; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--kunyit); box-shadow: 0 0 0 6px rgba(210, 185, 128,.18); transition: left 1s var(--ease); }
.rhythm__marker::after { content: 'now'; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 600 11px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--kunyit); }
.rhythm__list { display: grid; grid-template-columns: repeat(7, 250px); gap: 18px; width: max-content; padding-right: var(--bleed); }
.moment { position: relative; padding-top: 26px; scroll-snap-align: start; opacity: .8; transition: opacity .4s; }
.moment::before { content: ''; position: absolute; top: 0; left: 0; right: -18px; height: 1px; background: var(--line-light); }
.moment:last-child::before { right: 0; }
.moment::after { content: ''; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--hutan); border: 1px solid rgba(244, 241, 234,.5); }
.moment.is-now::after { background: var(--kunyit); border-color: var(--kunyit); }
.moment.is-now, .moment:hover { opacity: 1; }
.moment time { display: block; font: 600 13px/1 var(--f-ui); letter-spacing: .1em; color: rgba(244, 241, 234,.7); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.moment.is-now time { color: var(--kunyit); }
.moment figure { border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.moment img { aspect-ratio: 4/5; object-fit: cover; width: 100%; filter: saturate(.8) brightness(.92); transition: filter .4s; }
.moment.is-now img { filter: none; }
.moment h3 { font: 600 28px/1 var(--f-display); margin-bottom: 8px; }
.moment p { font: 400 16px/1.5 var(--f-text); color: rgba(244, 241, 234,.78); margin: 0; }

/* ── Services ───────────────────────────────────────────────────────── */
.services { padding-block: clamp(72px, 10vw, 140px); }
.services__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.services__head > p { font: 400 19px/1.5 var(--f-text); color: var(--muted); margin: 16px auto 0; max-width: 540px; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc { background: var(--white); border-radius: var(--r-lg); padding: 30px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.svc > .ic { width: 50px; height: 50px; padding: 13px; border-radius: 50%; background: var(--kabut); color: var(--lumut); }
.svc--well > .ic { color: var(--kunyit-ink); background: rgba(210, 185, 128,.14); }
.svc h3 { font: 600 25px/1.05 var(--f-display); margin-bottom: 4px; }
.svc p { font-size: 14px; color: var(--muted); margin: 0; max-width: 30ch; }
.svc__price { font-size: 14px; color: var(--muted); margin-top: auto; padding-top: 6px; }
.svc__price b { color: var(--hutan); font-size: 17px; }
.included { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.included__title { margin: 0; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--lumut); }
.included ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.included li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.included .ic { width: 18px; height: 18px; color: var(--lumut); }
.included--inline { margin-top: 12px; padding: 22px 24px; background: var(--hutan); color: var(--kabut); border-radius: 20px; align-items: flex-start; text-align: left; position: relative; overflow: hidden; }
.included--inline::after { content: ''; position: absolute; right: -50px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(210, 185, 128,.25), transparent 70%); }
.included--inline .included__title { color: var(--kunyit); }
.included--inline ul { justify-content: flex-start; position: relative; z-index: 1; }
.included--inline .ic { color: var(--kunyit); }
@media (max-width: 960px) { .services__grid { grid-template-columns: 1fr 1fr; } }

/* ── Reviews (Airbnb-style cards, infinite slider) ──────────────────── */
.reviews { background: var(--kabut-2); padding-block: clamp(72px, 10vw, 140px); overflow: hidden; }
.eyebrow--center { text-align: center; }
.gf { text-align: center; color: var(--hutan); }
.gf__badge { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.laurel { width: clamp(42px, 5.4vw, 64px); height: auto; color: var(--hutan); flex: none; }
.gf__n { font: 600 clamp(80px, 10vw, 128px)/0.8 var(--f-display); letter-spacing: -0.03em; padding-inline: 4px; }
.gf__title { font: 600 clamp(20px, 2vw, 24px)/1.2 var(--f-ui); margin: 14px 0 6px; }
.gf__sub { color: var(--muted); max-width: 420px; margin: 0 auto; font-size: 15px; line-height: 1.5; }
.gf__villas { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 30px auto 44px; }
.gf__v { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--kabut); border-radius: 999px; text-decoration: none; font-size: 14px; border: 1px solid transparent; transition: border-color .2s; }
.gf__v:hover { border-color: var(--hutan); }
.gf__v b { font-weight: 600; }
.gf__v span { color: var(--muted); }
.gf__v .ic:last-child { width: 14px; height: 14px; color: var(--muted); }
.marquee { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); cursor: grab; outline-offset: -4px; overscroll-behavior-x: contain; }
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-drag { cursor: grabbing; user-select: none; }
.marquee__track { display: flex; gap: 20px; width: max-content; padding: 8px 20px 16px; }
.rv { flex: none; width: 380px; background: var(--white); border-radius: 16px; padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -10px rgba(0, 63, 66,.18); display: flex; flex-direction: column; gap: 12px; font-family: var(--f-ui); text-align: left; color: #222; }
.rv__head { display: flex; align-items: center; gap: 12px; }
.rv__av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 19px/1 var(--f-ui); background: hsl(var(--h) 30% 36%); flex: none; }
.rv__who b { display: block; font-size: 16px; font-weight: 600; color: #222; }
.rv__who small { color: #6a6a6a; font-size: 14px; }
.rv__meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #222; margin: 2px 0 0; font-weight: 500; }
.rv__stars { display: inline-flex; gap: 2px; }
.rv__stars svg { width: 10px; height: 10px; fill: #222; }
.rv__text { font-size: 16px; line-height: 1.5; color: #222; margin: 0; }
.vreviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 28px 0 24px; }
.vreviews .rv { width: auto; box-shadow: none; border: 1px solid var(--line); }
.vsec .gf { padding: 8px 0 28px; }
.vsec .gf__n { font-size: clamp(64px, 8vw, 96px); }
@media (max-width: 640px) {
  .rv { width: min(82vw, 330px); padding: 20px; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { padding-inline: var(--gutter); gap: 12px; }
}

/* ── Book direct + how it works ─────────────────────────────────────── */
.direct { padding-block: clamp(72px, 10vw, 140px); }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: clamp(56px, 7vw, 96px); }
.perk { background: var(--white); border-radius: var(--r-lg); padding: 30px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.perk > .ic { width: 50px; height: 50px; padding: 13px; border-radius: 50%; background: var(--hutan); color: var(--kunyit); margin-bottom: 4px; }
.perk h3 { font: 600 25px/1.05 var(--f-display); }
.perk p { font-size: 15px; color: var(--muted); margin: 0; }
.how__steps { counter-reset: s; display: grid; gap: 0; }
.how__steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); text-align: left; }
.how__steps li:first-child { border-top: 0; }
.how__steps li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hutan); display: grid; place-items: center; font: 600 15px/1 var(--f-ui); }
.how__steps b { font: 600 24px/1.05 var(--f-display); }
.how__steps span { color: var(--muted); font-size: 15px; }
.how__steps .is-done::before { content: '✓'; background: var(--hutan); color: var(--kunyit); }

.how { position: relative; isolation: isolate; overflow: hidden; text-align: center; color: var(--kabut); background: var(--hutan); border-radius: 28px; padding: clamp(40px, 5.5vw, 72px) clamp(18px, 4vw, 56px); }
.how::before { content: ''; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(520px 260px at 50% -6%, rgba(210, 185, 128,.26), transparent 70%),
  radial-gradient(420px 420px at 100% 100%, rgba(79, 111, 108,.55), transparent 70%); }
.how::after { content: ''; position: absolute; z-index: -1; width: 560px; height: 560px; right: -180px; bottom: -260px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 26px, rgba(244, 241, 234,.06) 26px 27px); }
.how__head { margin-bottom: clamp(28px, 4vw, 48px); }
.how__title { font: 600 clamp(32px, 4.2vw, 56px)/0.95 var(--f-display); letter-spacing: -0.01em; color: var(--kabut); max-width: 24ch; margin: 0 auto; text-wrap: balance; }
.how .how__steps { position: relative; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.how .how__steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; padding: 26px 22px 24px; border: 1px solid rgba(244, 241, 234,.12); border-radius: 20px; background: rgba(244, 241, 234,.05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .35s var(--ease), background .35s, border-color .35s; }
.how .how__steps li:hover { transform: translateY(-4px); background: rgba(244, 241, 234,.09); border-color: rgba(210, 185, 128,.45); }
.how .how__steps li::before { content: counter(s, decimal-leading-zero); position: absolute; top: 16px; right: 18px; width: auto; height: auto; border: 0; border-radius: 0; background: none; font: 600 46px/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px rgba(210, 185, 128,.55); }
.how .how__steps li:not(:last-child)::after { content: ''; position: absolute; z-index: 1; top: 49px; right: -17px; width: 18px; border-top: 2px dashed rgba(210, 185, 128,.6); }
.how__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--kunyit); color: var(--hutan); margin-bottom: 6px; box-shadow: 0 8px 24px -8px rgba(210, 185, 128,.6); }
.how__ic .ic { width: 24px; height: 24px; }
.how .how__steps b { font: 600 25px/1.05 var(--f-display); color: var(--kabut); padding-right: 40px; }
.how .how__steps .how__txt { color: rgba(244, 241, 234,.74); font-size: 15px; line-height: 1.5; }
.how .how__steps li:nth-child(2) { background: rgba(210, 185, 128,.1); border-color: rgba(210, 185, 128,.35); }
.how__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.how__cta > span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(244, 241, 234,.75); }
.how__cta > span .ic { width: 16px; height: 16px; color: var(--kunyit); }
.howband { padding-block: clamp(40px, 6vw, 80px); }
@media (max-width: 1000px) { .perks { grid-template-columns: 1fr 1fr; } .how .how__steps { grid-template-columns: 1fr 1fr; } .how .how__steps li::after { display: none; } }

/* ── Whole compound ─────────────────────────────────────────────────── */
.whole { position: relative; min-height: 680px; display: flex; align-items: center; justify-content: center; padding: 72px var(--gutter); isolation: isolate; }
.whole__media { position: absolute; inset: 0; z-index: -1; }
.whole__media img { width: 100%; height: 100%; object-fit: cover; }
.whole__card { max-width: 580px; margin: 0 auto; text-align: center; background: rgba(244, 241, 234, .95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: clamp(28px, 4vw, 52px); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; }
.whole__card h2 { margin-bottom: 18px; }
.whole__card p:not(.eyebrow) { font: 400 18px/1.55 var(--f-text); color: var(--muted); margin-bottom: 28px; }

/* ── Location ───────────────────────────────────────────────────────── */
.location { padding-block: clamp(72px, 10vw, 140px); }
.location .sechead > p:not(.eyebrow) { font: 400 18px/1.55 var(--f-text); color: var(--muted); margin: 20px auto 0; max-width: 560px; }
.location__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.location__info { display: grid; gap: 22px; }
.location__info > .btn { justify-self: start; }
@media (max-width: 860px) { .location__info > .btn { justify-self: center; } }
.drives li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.drives b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.drives--compact li { font-size: 15px; padding: 10px 0; }
.map { position: relative; aspect-ratio: 4/3.1; border-radius: var(--r-lg); overflow: hidden; background:
  repeating-radial-gradient(circle at 50% 45%, transparent 0 22px, rgba(0, 63, 66,.07) 22px 23px), var(--kabut-2); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__load { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; cursor: pointer; }
.map__load .ic { width: 36px; height: 36px; color: var(--hutan); }
.map__load span { font: 600 26px/1 var(--f-display); }
.map__load small { color: var(--muted); }
@media (max-width: 860px) { .location__grid { grid-template-columns: 1fr; } }

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq { padding-bottom: clamp(72px, 10vw, 140px); }
.faq__list { border-top: 1px solid var(--line); }
.faq > .faq__list { max-width: 880px; margin: 0 auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; cursor: pointer; font: 600 clamp(21px, 2vw, 28px)/1.15 var(--f-display); }
.qa summary::-webkit-details-marker { display: none; }
.qa__ic { flex: none; }
.qa__ic .ic { width: 22px; height: 22px; transition: transform .3s var(--ease); }
.qa[open] .qa__ic .ic { transform: rotate(45deg); }
.qa__a p { font: 400 18px/1.6 var(--f-text); color: var(--muted); max-width: 760px; padding-bottom: 22px; margin: 0; }
.vsec .qa summary { font-size: 22px; padding: 18px 0; }
.vsec .qa__a p { font-size: 17px; }

/* ── Final CTA ──────────────────────────────────────────────────────── */
.final { background: var(--hutan); color: var(--kabut); padding-block: clamp(80px, 10vw, 140px); }
.final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.final h2 { font-size: clamp(48px, 7vw, 104px); margin-bottom: 18px; }
.final__inner > p { font: 400 19px/1.5 var(--f-text); color: rgba(244, 241, 234,.8); max-width: 520px; margin-bottom: 36px; }
.final .search { text-align: left; width: 100%; }
.final__alt { margin-top: 28px; font-size: 15px !important; font-family: var(--f-ui) !important; }
.final__alt a { white-space: nowrap; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot { background: #00393c; color: rgba(244, 241, 234,.82); padding-top: 72px; font-size: 15px; }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; }
.foot h3 { font: 600 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--kunyit); margin-bottom: 18px; }
.foot a, .foot .linklike { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 5px 0; color: inherit; }
.foot a:hover, .foot .linklike:hover { color: var(--white); }
.foot a span { opacity: .6; }
.foot .logo { --logo-mark: var(--kunyit); width: max-content; flex-direction: column; align-items: center; gap: 14px; padding: 0; }
.foot .logo__mark { width: 104px; height: 80px; }
.foot .logo__txt { display: grid; border: 0; padding: 0; justify-items: center; gap: 6px; }
.foot .logo__txt b { font-size: 19px; }
.foot .ic { width: 17px; height: 17px; opacity: .8; }
.foot__brand p { max-width: 360px; margin-top: 18px; }
.foot__nib, .foot__hours, .foot__addr { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; opacity: .75; }
.foot__nib .ic, .foot__hours .ic, .foot__addr .ic { margin-top: 2px; }
.logo--light { color: var(--kabut); }
.foot__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px 96px; border-top: 1px solid var(--line-light); font-size: 13px; opacity: .65; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) {
  .foot { padding-top: 56px; text-align: center; }
  .foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .foot a, .foot .linklike, .foot__nib, .foot__hours, .foot__addr { justify-content: center; }
  .foot .linklike { margin-inline: auto; }
  .foot__brand p { margin-inline: auto; }
  .foot .logo { margin-inline: auto; }
  .foot__base { justify-content: center; text-align: center; }
}

/* ── Floating WhatsApp ──────────────────────────────────────────────── */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; background: var(--hutan); color: var(--kabut); text-decoration: none; border-radius: 999px; padding: 12px 18px 12px 14px; box-shadow: var(--shadow); font-size: 14px; font-weight: 500; transition: transform .2s var(--ease); }
.wa-float:hover { transform: translateY(-2px); }
.wa-float .ic { width: 22px; height: 22px; color: var(--kunyit); }
@media (max-width: 760px) { .wa-float span { display: none; } .wa-float { padding: 14px; } .page-villa .wa-float, .page-book .wa-float { bottom: 92px; } .page-book .wa-float { display: none; } }

/* ── Consent ────────────────────────────────────────────────────────── */
.consent { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: min(420px, calc(100vw - 40px)); background: var(--white); color: var(--hutan); border-radius: var(--r-lg); padding: 22px; box-shadow: 0 24px 64px -16px rgba(0, 63, 66,.45); font-size: 14px; }
.consent__title { font: 600 24px/1 var(--f-display); margin-bottom: 8px; }
.consent__prefs { display: grid; gap: 10px; margin: 14px 0; padding: 14px; background: var(--kabut); border-radius: var(--r); }
.consent__prefs label { display: flex; gap: 10px; align-items: flex-start; }
.consent__prefs input { accent-color: var(--hutan); margin-top: 3px; }
.consent__btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.consent__btns .linklike { margin-left: 6px; font-size: 14px; }

/* ── Sheets (modals) ────────────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(11, 33, 24, .55); backdrop-filter: blur(3px); animation: fade .2s both; }
.sheet__panel { position: relative; background: var(--white); color: var(--hutan); border-radius: var(--r-lg); width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; box-shadow: var(--shadow); animation: rise .28s var(--ease) both; }
.sheet__panel--guests { width: min(440px, 100%); }
.sheet__panel--wide { width: min(980px, 100%); }
.sheet__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.sheet__title { font: 600 30px/1 var(--f-display); margin: 0 0 4px; }
.sheet__sub { margin: 0; color: var(--muted); font-size: 14px; }
.sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.sheet__note { font-size: 13px; color: var(--kunyit-ink); min-height: 1em; margin: 8px 0 0; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 640px) {
  .sheet { align-items: flex-end; padding: 0; }
  .sheet__panel { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
}
.step { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.step p { margin: 0; font-weight: 600; }
.step small { color: var(--muted); font-size: 13px; }
.step__ctl { display: flex; align-items: center; gap: 12px; }
.step__ctl output { min-width: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Calendar ───────────────────────────────────────────────────────── */
.cal { position: relative; }
.cal__nav { position: absolute; top: -4px; left: 0; right: 0; display: flex; justify-content: space-between; pointer-events: none; }
.cal__nav button { pointer-events: auto; }
.cal__months { display: grid; grid-template-columns: repeat(var(--months, 2), 1fr); gap: 32px; }
.cal__month h4 { text-align: center; font: 600 16px/32px var(--f-ui); margin-bottom: 10px; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow span { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 8px; font-weight: 500; }
.cal__d { position: relative; aspect-ratio: 1; border: 0; background: none; font: 500 15px/1 var(--f-ui); cursor: pointer; border-radius: 50%; color: var(--hutan); font-variant-numeric: tabular-nums; display: grid; place-items: center; }
.cal__d:hover:not([disabled]) { box-shadow: inset 0 0 0 1.5px var(--hutan); }
.cal__d[disabled] { color: rgba(0, 63, 66,.28); cursor: default; }
.cal__d.is-busy { text-decoration: line-through; color: rgba(0, 63, 66,.3); }
.cal__d.is-today::after { content: ''; position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--kunyit-2); }
.cal__d.is-in, .cal__d.is-hover { background: var(--kabut-2); border-radius: 0; }
.cal__d.is-start, .cal__d.is-end { background: var(--hutan); color: var(--kabut); border-radius: 50%; }
.cal__d.is-start.has-end { border-radius: 50% 0 0 50%; }
.cal__d.is-end { border-radius: 0 50% 50% 0; }
.cal__d.is-start.is-end { border-radius: 50%; }
.cal__d.is-checkout-only { color: rgba(0, 63, 66,.55); }
.cal__d.is-short { color: rgba(0, 63, 66,.42); }
.cal__empty { aspect-ratio: 1; }
.cal--inline { background: var(--white); border-radius: var(--r-lg); padding: 24px; }
.vsec > p.cal__legend, .cal__legend { font: 400 13px/1.4 var(--f-ui); display: flex; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--muted); margin-top: 12px; }
.cal__key { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.cal__key--busy { background: repeating-linear-gradient(45deg, var(--batu) 0 2px, transparent 2px 4px); border: 1px solid var(--batu); }
.cal__key--sel { background: var(--hutan); }
.cal__loading { font-size: 13px; color: var(--muted); text-align: center; padding-top: 8px; }

/* ── Villa page ─────────────────────────────────────────────────────── */
.page-villa main, .page-book main, .page-thanks main, .page-legal main, .page-404 main { padding-top: var(--nav-h); }
.vhead { padding-top: clamp(22px, 3vw, 34px); padding-bottom: 4px; text-align: left; }
.crumbs { display: flex; justify-content: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 24px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.vhead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.vhead .eyebrow { margin-bottom: 8px; }
.vhead__title { margin: 2px 0 0; line-height: 0; }
.vhead__title img { display: block; height: clamp(68px, 6.8vw, 92px); width: auto; }
.vhead__tag { font: 400 clamp(17px, 1.5vw, 20px)/1.4 var(--f-text); color: var(--muted); max-width: 640px; margin: 10px 0 0; }
.vhead__score { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; text-align: left; transition: border-color .2s, transform .2s; }
.vhead__score:hover { transform: translateY(-2px); }
.vhead__score:hover { border-color: var(--hutan); }
.vhead__n { display: inline-flex; align-items: center; gap: 6px; font: 600 28px/1 var(--f-display); }
.vhead__meta { display: flex; flex-direction: column; }
.vhead__n .ic { width: 22px; height: 22px; }
.vhead__score b { display: block; font-size: 15px; }
.vhead__score small { color: var(--muted); font-size: 13px; }

.mosaic-wrap { position: relative; }
.page-villa .mosaic-wrap { padding-top: 18px; }
.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(170px, 21vw, 290px)); gap: 8px; }
.mosaic__cell { padding: 0; border: 0; cursor: zoom-in; overflow: hidden; background: var(--kabut-2); }
.mosaic__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .3s; }
.mosaic__cell:hover img { transform: scale(1.03); filter: brightness(.94); }
.mosaic__cell--0 { grid-row: span 2; border-radius: var(--r-lg) 0 0 var(--r-lg); }
.mosaic__cell--2 { border-radius: 0 var(--r-lg) 0 0; }
.mosaic__cell--4 { border-radius: 0 0 var(--r-lg) 0; }
.mosaic__all { position: absolute; right: calc(var(--gutter) + 16px); bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); }
.mosaic__all .ic { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .mosaic-wrap, .page-villa .mosaic-wrap { padding-inline: 0; padding-top: 0; }
  .mosaic { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; grid-template: none; overscroll-behavior-x: contain; }
  .mosaic::-webkit-scrollbar { display: none; }
  .mosaic__cell { flex: 0 0 100%; aspect-ratio: 4/3; scroll-snap-align: center; border-radius: 0 !important; }
  .mosaic__all { right: 14px; bottom: 14px; padding: 9px 14px; font-size: 13px; }
  .mosaic__count { display: block; position: absolute; left: 14px; bottom: 14px; background: rgba(0, 63, 66,.72); color: var(--kabut); font: 600 12px/1 var(--f-ui); padding: 9px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }
}
.mosaic__count { display: none; }

.vbody { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(40px, 6vw, 96px); padding-top: 40px; padding-bottom: 80px; }
.vside { position: relative; }
.vfacts { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 6px 0 26px; border-bottom: 1px solid var(--line); }
.vfacts li { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.vfacts .ic { width: 22px; height: 22px; color: var(--lumut); }
.vsec { padding-block: 34px; }
.vsec:last-child { border-bottom: 0; }
.vsec__title { margin-bottom: 20px; display: flex; align-items: center; gap: 12px; font-size: clamp(26px, 2.6vw, 34px) !important; }
.vsec__row .vsec__title { margin-bottom: 0; }
.vsec__row { margin-bottom: 18px; }
.vsec__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.vsec > p { font: 400 18px/1.6 var(--f-text); color: var(--muted); }
.vstory p { font: 400 19px/1.65 var(--f-text); color: var(--muted); max-width: 680px; }
.vstory .vstory__lead { font-size: clamp(22px, 2vw, 26px); line-height: 1.4; color: var(--hutan); }
.vstory__best { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--f-ui) !important; color: var(--kunyit-ink) !important; background: rgba(210, 185, 128,.14); padding: 10px 14px; border-radius: 999px; margin-bottom: 22px !important; }
.vstory__best .ic { width: 16px; height: 16px; }
.hl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hl__item { display: flex; gap: 14px; align-items: flex-start; background: var(--white); border-radius: 18px; padding: 18px; transition: transform .3s var(--ease), box-shadow .3s; }
.hl__item:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -20px rgba(0, 63, 66,.45); }
.hl h3 { font: 600 21px/1.1 var(--f-display); margin-bottom: 4px; }
.hl p { margin: 0; font-size: 15px; color: var(--muted); }
.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.room button, .space button { display: block; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; cursor: zoom-in; width: 100%; margin-bottom: 12px; }
.room img, .space img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s var(--ease); }
.room button:hover img, .space button:hover img { transform: scale(1.04); }
.room figcaption, .space figcaption { display: flex; flex-direction: column; gap: 2px; }
.room b, .space b { font: 600 22px/1.05 var(--f-display); }
.room span { font-size: 15px; }
.room small, .space span { color: var(--muted); font-size: 14px; }
.spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
.amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; margin-bottom: 22px; }
.amen li, .amen-all li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.amen .ic, .amen-all .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: rgba(79, 111, 108,.13); color: var(--lumut); margin-top: 0; flex: none; }
.amen li { font-size: 15px; align-items: center; }
.amen-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.amen-all h3 { font: 600 22px/1 var(--f-display); margin-bottom: 12px; }
.amen-all ul { display: grid; gap: 10px; }
.rbreak { display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; margin-bottom: 28px; }
.rbreak__subs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.rbar, .rdist { display: grid; grid-template-columns: 1fr 80px 28px; gap: 12px; align-items: center; font-size: 14px; }
.rdist { grid-template-columns: 26px 1fr 34px; }
.rbar b { font-variant-numeric: tabular-nums; text-align: right; }
.rdist small { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.rbar__track { height: 4px; border-radius: 4px; background: var(--kabut-2); overflow: hidden; }
.rbar__track span { display: block; height: 100%; background: var(--hutan); border-radius: inherit; }
.vsec > p.mentions { font: 400 14px/1.4 var(--f-ui); }
.mentions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); }
.chip { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--white); color: var(--hutan); font-weight: 500; }
.chip small { color: var(--muted); font-weight: 400; }
.vquotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 24px 0; }
.extlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-underline-offset: 4px; }
.extlink .ic { width: 16px; height: 16px; }
.policy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.policy h3 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.2 var(--f-ui); margin-bottom: 10px; }
.policy h3 .ic { width: 18px; height: 18px; color: var(--lumut); }
.policy p { font-size: 15px; color: var(--muted); margin: 0; }
.policy__list li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.policy__list li:last-child { border-bottom: 0; }
.policy__list span { color: var(--muted); }
.gtk { display: grid; gap: 14px; }
.gtk li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 16px; color: var(--muted); }
.gtk .ic { width: 20px; height: 20px; color: var(--lumut); margin-top: 2px; }

/* Policies */
.pol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pol__card { position: relative; overflow: hidden; border-radius: 20px; padding: 24px; background: var(--white); transition: transform .35s var(--ease), box-shadow .35s; }
.pol__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pol__card h3 { display: flex; align-items: center; gap: 10px; font: 600 22px/1 var(--f-display); margin-bottom: 18px; }
.pol__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--kabut); color: var(--lumut); flex: none; }
.pol__ic .ic { width: 20px; height: 20px; }
.pol__card > p { font-size: 14px; color: var(--muted); margin: 0; }
.pol__card--times { background: linear-gradient(160deg, #fbf6ea 0%, #ffffff 55%, #e9f2f1 100%); }
.pol__card--times .pol__ic { background: rgba(210, 185, 128,.18); color: var(--kunyit-ink); }
.pol__times { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 16px; }
.pol__time { display: flex; flex-direction: column; gap: 4px; }
.pol__time:last-child { text-align: right; align-items: flex-end; }
.pol__time span { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pol__time span .ic { width: 15px; height: 15px; color: var(--kunyit-ink); }
.pol__time:last-child span .ic { color: #4b5aa8; }
.pol__time b { font: 600 clamp(34px, 3.4vw, 44px)/1 var(--f-display); letter-spacing: -0.01em; }
.pol__arc { width: 56px; height: 28px; border: 2px dashed var(--batu); border-bottom: 0; border-radius: 56px 56px 0 0; position: relative; }
.pol__arc::after { content: ''; position: absolute; top: -6px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--kunyit); box-shadow: 0 0 0 5px rgba(210, 185, 128,.2); }
.pol__card--pay { background: var(--hutan); color: var(--kabut); }
.pol__card--pay::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(210, 185, 128,.28), transparent 70%); }
.pol__card--pay .pol__ic { background: var(--kunyit); color: var(--hutan); }
.pol__card--pay > p { color: rgba(244, 241, 234,.78); }
.pol__methods { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.pol__methods li { font: 600 12px/1 var(--f-ui); padding: 7px 10px; border-radius: 8px; background: rgba(244, 241, 234,.1); border: 1px solid rgba(244, 241, 234,.16); }
.pol__guarantee { display: flex; align-items: center; gap: 8px; color: var(--kunyit) !important; font-weight: 600; }
.pol__guarantee .ic { width: 18px; height: 18px; }
.pol__card--cancel { grid-column: 1 / -1; }
.pol__card--cancel .pol__ic { background: rgba(79, 111, 108,.14); }
.pol__bar { position: relative; display: flex; gap: 4px; height: 12px; margin: 30px 0 18px; }
.pol__seg { flex: 1; border-radius: 999px; transform-origin: left; transition: transform 1.1s var(--ease); }
.pol__seg--full { background: linear-gradient(90deg, #3f7a4f, #6aa36a); }
.pol__seg--half { background: linear-gradient(90deg, #d2b980, #e3cf9f); transition-delay: .15s; }
.pol__seg--none { background: linear-gradient(90deg, #c9785a, #b9643f); transition-delay: .3s; }
.vsec.reveal:not(.is-in) .pol__seg { transform: scaleX(0); }
.pol__arrive { position: absolute; right: -2px; top: -26px; display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.pol__arrive .ic { width: 14px; height: 14px; }
.pol__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pol__step { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 3px solid; font-size: 14px; }
.pol__step span { color: var(--muted); }
.pol__step b { font-size: 15px; }
.pol__step--full { border-color: #4f8a59; }
.pol__step--half { border-color: var(--kunyit); }
.pol__step--none { border-color: #b9643f; }

/* Good to know */
.gtk2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gtk2__item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 18px; background: var(--white); border: 1px solid transparent; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.gtk2__item:hover { transform: translateY(-2px); border-color: var(--batu); box-shadow: 0 10px 30px -18px rgba(0, 63, 66,.4); }
.gtk2__item p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.gtk2__item p b { color: var(--hutan); }
.gtk2__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--kabut); color: var(--lumut); flex: none; }
.gtk2__ic .ic { width: 20px; height: 20px; }
.gtk2__item:nth-child(4n+2) .gtk2__ic { background: rgba(210, 185, 128,.16); color: var(--kunyit-ink); }
.gtk2__item:nth-child(4n+3) .gtk2__ic { background: rgba(75,90,168,.12); color: #4b5aa8; }
.gtk2__item:nth-child(4n+4) .gtk2__ic { background: rgba(185,100,63,.12); color: #a5552f; }
.gtk2__item--note { grid-column: 1 / -1; background: linear-gradient(100deg, rgba(210, 185, 128,.16), rgba(210, 185, 128,.04)); border-color: rgba(210, 185, 128,.3); }
.gtk2__item--note .gtk2__ic { background: var(--kunyit) !important; color: var(--hutan) !important; }
.gtk2__item--nature { grid-column: 1 / -1; position: relative; overflow: hidden; background: var(--lumut); color: var(--kabut); }
.gtk2__item--nature::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 160px; height: 160px; opacity: .14; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef0ea' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-14 15-15-1 10-7 15-15 15zM5 19l8-8'/%3E%3C/svg%3E"); }
.gtk2__item--nature p { color: rgba(244, 241, 234,.85); position: relative; z-index: 1; }
.gtk2__item--nature p b { color: var(--white); }
.gtk2__item--nature .gtk2__ic { background: rgba(244, 241, 234,.16) !important; color: var(--kabut) !important; }

/* Location */
.loc { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: clamp(22px, 3vw, 32px); background: var(--hutan); color: var(--kabut); }
.loc::before { content: ''; position: absolute; z-index: -1; width: 640px; height: 640px; left: -220px; top: -300px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 28px, rgba(244, 241, 234,.07) 28px 29px); }
.loc::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(380px 220px at 100% 0%, rgba(210, 185, 128,.2), transparent 70%); }
.loc__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.loc__head b { display: block; font: 600 26px/1.05 var(--f-display); }
.loc__head small { color: rgba(244, 241, 234,.7); font-size: 13px; }
.loc__pin { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--kunyit); color: var(--hutan); flex: none; }
.loc__pin::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(210, 185, 128,.5); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.loc__pin .ic { width: 24px; height: 24px; }
.loc__list { display: grid; gap: 4px; }
.loc__list li { display: grid; grid-template-columns: minmax(150px, 1.1fr) 1.4fr auto; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(244, 241, 234,.1); font-size: 15px; }
.loc__list li:last-child { border-bottom: 0; }
.loc__list b { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--kunyit); min-width: 64px; text-align: right; }
.loc__bar { height: 6px; border-radius: 999px; background: rgba(244, 241, 234,.1); overflow: hidden; }
.loc__bar i { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--kunyit), #e8d9b3); transition: width 1.2s var(--ease); }
.vsec.reveal:not(.is-in) .loc__bar i { width: 0; }
.loc__list li:nth-child(2) .loc__bar i { transition-delay: .08s; } .loc__list li:nth-child(3) .loc__bar i { transition-delay: .16s; } .loc__list li:nth-child(4) .loc__bar i { transition-delay: .24s; } .loc__list li:nth-child(5) .loc__bar i { transition-delay: .32s; } .loc__list li:nth-child(6) .loc__bar i { transition-delay: .4s; }
.loc__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.loc__foot > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(244, 241, 234,.65); }
.loc__foot .ic { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .pol, .gtk2 { grid-template-columns: 1fr; }
  .pol__steps { grid-template-columns: 1fr; }
  .pol__card { padding: 20px; }
  .loc__list li { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .loc__bar { grid-column: 1 / -1; grid-row: 2; }
  .loc__foot .btn { width: 100%; }
}

/* Villa page — gallery, stats, panels (same visual language as the policy cards) */
.gal { padding-top: 18px; }
.gal__main { position: relative; border-radius: 22px; overflow: hidden; background: var(--kabut-2); }
.gal__stage { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gal__stage img { width: 100%; height: clamp(320px, 50vw, 640px); object-fit: cover; transition: opacity .3s ease; }
.gal__stage img.is-fading { opacity: .25; }
.gal__nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--hutan); cursor: pointer; box-shadow: var(--shadow); opacity: 0; transition: opacity .25s, transform .25s; }
.gal__nav .ic { width: 22px; height: 22px; }
.gal__main:hover .gal__nav, .gal__nav:focus-visible { opacity: 1; }
.gal__nav:hover { transform: translateY(-50%) scale(1.06); }
.gal__nav--prev { left: 16px; }
.gal__nav--next { right: 16px; }
@media (hover: none) { .gal__nav { opacity: .9; } }
.gal__count { position: absolute; left: 16px; bottom: 16px; background: rgba(0, 63, 66,.72); color: var(--kabut); font: 500 12px/1 var(--f-ui); padding: 9px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gal__count b { font-weight: 700; }
.gal__all { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); }
.gal__all .ic { width: 16px; height: 16px; }
.gal__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 4px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.gal__thumbs::-webkit-scrollbar { display: none; }
.gal__thumb { flex: none; width: 112px; height: 74px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--kabut-2); opacity: .55; scroll-snap-align: start; transition: opacity .2s, border-color .2s, transform .2s; }
.gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal__thumb:hover { opacity: .9; transform: translateY(-2px); }
.gal__thumb.is-on { opacity: 1; border-color: var(--kunyit); }
@media (max-width: 760px) {
  .gal { padding: 0; }
  .gal__main { border-radius: 0; }
  .gal__stage img { height: auto; aspect-ratio: 4/3; }
  .gal__nav { width: 38px; height: 38px; }
  .gal__nav--prev { left: 10px; } .gal__nav--next { right: 10px; }
  .gal__count { left: 12px; bottom: 12px; }
  .gal__all { right: 12px; bottom: 12px; padding: 9px 13px; font-size: 13px; }
  .gal__thumbs { padding: 8px var(--gutter) 0; gap: 6px; }
  .gal__thumb { width: 70px; height: 50px; border-radius: 9px; }
}
.sec-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; background: rgba(79, 111, 108,.14); color: var(--lumut); }
.sec-ic .ic { width: 20px !important; height: 20px !important; fill: none !important; stroke: currentColor !important; }
.sec-ic--gold { background: rgba(210, 185, 128,.18); color: var(--kunyit-ink); }
.sec-ic--blue { background: rgba(75,90,168,.12); color: #4b5aa8; }
.sec-ic--clay { background: rgba(185,100,63,.13); color: #a5552f; }
.vstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding-top: 22px; }
.vstats li { display: flex; flex-direction: column; gap: 4px; background: var(--white); border-radius: 18px; padding: 16px; transition: transform .3s var(--ease), box-shadow .3s; }
.vstats li:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -20px rgba(0, 63, 66,.45); }
.vstats b { font: 600 32px/1 var(--f-display); margin-top: 8px; }
.vstats b i { font-style: normal; font-size: 18px; }
.vstats small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.vstory { background: linear-gradient(160deg, #fbf6ea 0%, #ffffff 52%, #e9f2f1 100%); border-radius: 22px; padding: clamp(22px, 3vw, 34px); }
.vstory p:last-child { margin-bottom: 0; }
.panel { background: var(--white); border-radius: 20px; padding: 22px 24px; }
.vsec .gf { background: linear-gradient(160deg, #fbf6ea 0%, #ffffff 60%); border-radius: 22px; padding: 26px 20px 24px; margin-bottom: 12px; }
.vsec .rbreak { margin-bottom: 18px; }
.vsec .faq__list { border-top: 0; display: grid; gap: 8px; }
.vsec .qa { background: var(--white); border-radius: 16px; border-bottom: 0; padding: 0 18px; transition: box-shadow .25s; }
.vsec .qa[open] { box-shadow: inset 0 0 0 1.5px rgba(210, 185, 128,.55); }
.vsec .qa__ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(210, 185, 128,.16); color: var(--kunyit-ink); }
.vsec .qa__ic .ic { width: 18px; height: 18px; }
.vsec .qa summary { font-size: 20px; }
@media (max-width: 640px) {
  .vstats { grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 18px; }
  .vstats li { padding: 12px; }
  .vstats b { font-size: 26px; }
  .hl__item { flex-direction: column; gap: 10px; padding: 14px; }
  .hl h3 { font-size: 18px; }
  .hl p { font-size: 13px; }
  .amen li { font-size: 14px; }
  .panel { padding: 18px; }
  .spaces { grid-template-columns: 1fr 1fr; }
}

/* Booking card */
.bk { position: sticky; top: calc(var(--nav-h) + 20px); background: var(--white); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow); }
.bk__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.bk__price { margin: 0; font-size: 15px; color: var(--muted); }
.bk__price b { font: 600 34px/1 var(--f-display); color: var(--hutan); }
.bk__from { font-size: 14px; }
.bk__stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; text-decoration: none; }
.bk__stars small { color: var(--muted); font-weight: 400; }
.bk__fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--batu); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; }
.bk__f { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 0; background: var(--white); text-align: left; cursor: pointer; }
.bk__f + .bk__f { border-left: 1px solid var(--batu); }
.bk__f--wide { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--batu) !important; }
.bk__f--wide .ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; }
.bk__f span { font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bk__f b { font-weight: 500; font-size: 15px; }
.bk__f:hover { background: var(--kabut); }
.bk__f.is-empty b { color: var(--muted); }
.bk__quote { margin-bottom: 14px; font-size: 15px; }
.qline { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.qline span { color: var(--muted); }
.qline--season span { color: var(--kunyit-ink); font-size: 13px; }
.qline--total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-weight: 600; font-size: 17px; }
.qline--total span { color: var(--hutan); }
.qline--dep { font-size: 13px; }
.bk__msg { font-size: 14px; color: var(--kunyit-ink); margin: 0 0 12px; min-height: 0; }
.bk__msg:empty { display: none; }
.bk__msg.is-ok { color: var(--lumut); }
.bk__fine { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 12px 0 18px; }
.bk__fine .ic { width: 14px; height: 14px; }
.bk__trust { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 14px; }
.bk__trust li { display: flex; gap: 10px; align-items: center; }
.bk__trust .ic { width: 18px; height: 18px; color: var(--lumut); }
.bk__wa { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; font-size: 14px; text-decoration: none; }
.bk__wa .ic { width: 18px; height: 18px; }
.bk__wa:hover { text-decoration: underline; }

/* Mobile booking bar */
.mbar { display: none; }
@media (max-width: 980px) {
  .vbody { grid-template-columns: 1fr; }
  .vside { order: 1; }
  .bk { position: static; box-shadow: none; }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--white); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--line), 0 -12px 32px -16px rgba(0, 63, 66,.3); justify-content: space-between; align-items: center; gap: 12px; }
  .mbar__info { display: flex; flex-direction: column; }
  .mbar__info b { font-size: 18px; }
  .mbar__info small { color: var(--muted); font-size: 13px; }
  .page-villa .foot__base { padding-bottom: 120px; }
  .amen { grid-template-columns: 1fr 1fr; }
  .spaces { grid-template-columns: 1fr 1fr; }
  .rbreak { grid-template-columns: 1fr; }
  .policy { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .rbreak__subs { grid-template-columns: 1fr; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(0, 30, 32, .97); color: var(--kabut); display: grid; grid-template-rows: auto 1fr auto; animation: fade .2s both; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 14px; font-variant-numeric: tabular-nums; }
.lightbox__stage { display: grid; place-items: center; padding: 0 72px; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: var(--r-sm); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255,255,255,.08); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }
.lightbox__thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px 16px; scrollbar-width: none; }
.lightbox__thumbs button { flex: none; width: 80px; height: 54px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; opacity: .5; background: none; }
.lightbox__thumbs button.is-on { opacity: 1; border-color: var(--kunyit); }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .lightbox__stage { padding: 0 8px; } .lightbox__nav { top: auto; bottom: 86px; transform: none; } }

/* Others */
.others { padding-block: clamp(64px, 8vw, 112px); }
.others h2 { margin-bottom: 0; }
.others__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ocard { display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; transition: box-shadow .3s; }
.ocard:hover { box-shadow: var(--shadow); }
.ocard__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.ocard__body { padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ocard h3 { font: 600 38px/0.9 var(--f-display); margin-bottom: 10px; }
.ocard p:not(.eyebrow) { font-size: 15px; color: var(--muted); }
.ocard__meta { margin-top: auto !important; margin-bottom: 0; color: var(--hutan) !important; }
@media (max-width: 900px) { .others__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ocard { grid-template-columns: 1fr; } .ocard__img img { aspect-ratio: 3/2; } }

/* ── Booking page ───────────────────────────────────────────────────── */
.bookwrap { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(32px, 5vw, 72px); padding-top: 40px; padding-bottom: 96px; align-items: start; }
.book__title { font: 600 clamp(44px, 6vw, 80px)/0.9 var(--f-display); letter-spacing: -0.01em; margin-bottom: 28px; }
.progress { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.progress li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--kabut-2); font-size: 14px; font-weight: 500; color: var(--muted); }
.progress li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--white); font-size: 12px; font-weight: 600; }
.progress li.is-on { background: var(--hutan); color: var(--kabut); }
.progress li.is-on span { background: var(--kunyit); color: var(--hutan); }
.progress li.is-done { color: var(--hutan); }
.progress li.is-done span { background: var(--hutan); color: var(--kunyit); }
.bstep { border: 0; padding: 0; margin: 0; min-width: 0; }
.bfield { margin-bottom: 28px; }
.bfield--row { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--batu); border-radius: var(--r); overflow: hidden; background: var(--white); margin-bottom: 14px; }
.bfield--row .bk__f + .bk__f { border-left: 1px solid var(--batu); }
.blabel { font-weight: 600; margin-bottom: 12px; font-size: 16px; }
.blabel small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }
.vpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vpick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.vpick__card { display: flex; flex-direction: column; gap: 2px; background: var(--white); border-radius: var(--r); padding: 8px 8px 12px; border: 1.5px solid transparent; cursor: pointer; height: 100%; transition: border-color .2s; }
.vpick__card img { border-radius: 9px; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 8px; }
.vpick__card b { font: 600 20px/1 var(--f-display); padding-inline: 4px; }
.vpick__card small { color: var(--muted); font-size: 12px; padding-inline: 4px; }
.vpick__opt input:checked + .vpick__card { border-color: var(--hutan); }
.vpick__opt input:focus-visible + .vpick__card { outline: 2px solid var(--kunyit); outline-offset: 2px; }
.extras { display: grid; gap: 8px; }
.extra { background: var(--white); border-radius: var(--r); border: 1.5px solid transparent; transition: border-color .2s; }
.extra:has(input:checked) { border-color: var(--hutan); }
.extra__main { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; cursor: pointer; }
.extra__main input { width: 18px; height: 18px; accent-color: var(--hutan); }
.extra__ic .ic { width: 24px; height: 24px; color: var(--lumut); }
.extra--well .extra__ic .ic { color: var(--kunyit-ink); }
.extra__txt b { display: block; font-size: 15px; }
.extra__txt small, .extra__price small { color: var(--muted); font-size: 13px; }
.extra__price { text-align: right; display: flex; flex-direction: column; }
.extra__qty { display: flex; align-items: center; gap: 10px; padding: 0 16px 14px 66px; font-size: 14px; color: var(--muted); }
.extra__qty output { font-weight: 600; color: var(--hutan); min-width: 16px; text-align: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inp { display: flex; flex-direction: column; gap: 6px; }
.inp--wide { grid-column: 1 / -1; }
.inp > span { font-weight: 600; font-size: 14px; }
.inp small { font-weight: 400; color: var(--muted); }
.inp input, .inp select, .inp textarea { width: 100%; font: 400 16px/1.4 var(--f-ui); color: var(--hutan); background: var(--white); border: 1px solid var(--batu); border-radius: 10px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; }
.inp textarea { resize: vertical; min-height: 110px; }
.inp input:focus, .inp select:focus, .inp textarea:focus { outline: none; border-color: var(--hutan); box-shadow: 0 0 0 3px rgba(0, 63, 66,.1); }
.inp.is-bad input, .inp.is-bad select { border-color: #b3401f; }
.inp__err { color: #a33a1b; font-size: 13px; }
.hp { position: absolute; left: -9999px; }
.chk { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; margin-bottom: 14px; cursor: pointer; }
.chk input { width: 18px; height: 18px; accent-color: var(--hutan); margin-top: 2px; flex: none; }
.chk.is-bad span { color: #a33a1b; }
.bnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.bnotice { display: grid; grid-template-columns: auto 1fr; gap: 12px; background: rgba(210, 185, 128,.13); border-radius: var(--r); padding: 16px 18px; margin: 20px 0; font-size: 15px; }
.bnotice p { margin: 0; }
.bnotice .ic { color: var(--kunyit-ink); }
.bform__err { background: #f7e3dc; color: #7c2a12; padding: 14px 16px; border-radius: var(--r); font-size: 15px; }
.bform__err a { font-weight: 600; }
.review { background: var(--white); border-radius: var(--r-lg); padding: 8px 22px; }
.review dl { margin: 0; }
.review div { display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; align-items: start; }
.review div:last-child { border-bottom: 0; }
.review dt { color: var(--muted); }
.review dd { margin: 0; }
.review button { font-size: 14px; }
.bpolicies { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.bpolicies h2 { margin-bottom: 12px; }
.bpolicies .muted { font-size: 14px; margin-top: 12px; }
.booksum { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 16px; }
.booksum__card { background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.booksum__img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.booksum__body { padding: 20px 22px 22px; }
.booksum__name { font: 600 32px/1 var(--f-display); margin-bottom: 4px; }
.booksum__rating { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.booksum__trip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 14px; padding: 14px 0; border-block: 1px solid var(--line); }
.booksum__trip dt { font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.booksum__trip dd { margin: 0; font-size: 15px; font-weight: 500; }
.booksum__lines { font-size: 15px; }
.booksum__total { display: flex; justify-content: space-between; font-weight: 600; font-size: 19px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
.booksum__dep { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.booksum__trust { display: grid; gap: 12px; padding: 4px 4px; font-size: 14px; }
.booksum__trust li { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.booksum__trust .ic { width: 18px; height: 18px; color: var(--lumut); margin-top: 2px; }
.booksum__quote { background: var(--kabut-2); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 10px; }
.booksum__quote blockquote { margin: 0; font: italic 400 18px/1.4 var(--f-text); }
.booksum__quote figcaption { font-size: 14px; font-weight: 600; }
.booksum__quote figcaption span { font-weight: 400; color: var(--muted); }
.booksum__quote:empty { display: none; }
.booksum__help { font-size: 14px; color: var(--muted); text-align: center; margin: 0; }
@media (max-width: 1020px) {
  .bookwrap { grid-template-columns: 1fr; }
  .booksum { position: static; order: -1; }
  .booksum__trust, .booksum__quote, .booksum__help { display: none; }
  .booksum__card { display: grid; grid-template-columns: 120px 1fr; box-shadow: none; }
  .booksum__img img { height: 100%; aspect-ratio: auto; }
  .booksum__body { padding: 14px 16px; }
  .booksum__name { font-size: 26px; }
}
@media (max-width: 640px) {
  .vpick { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .bfield--row { grid-template-columns: 1fr 1fr; }
  .bfield--row .bk__f:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--batu); }
  .extra__main { grid-template-columns: auto 1fr auto; }
  .extra__ic { display: none; }
  .extra__qty { padding-left: 48px; }
  .review div { grid-template-columns: 1fr auto; }
  .review dt { grid-column: 1 / -1; }
  .booksum__card { grid-template-columns: 1fr; }
  .booksum__img { display: none; }
}

/* ── Thanks / legal ─────────────────────────────────────────────────── */
.thanks { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 96px); padding-block: 64px 120px; align-items: start; }
.thanks__title { font: 600 clamp(56px, 8vw, 112px)/0.86 var(--f-display); letter-spacing: -0.02em; margin-bottom: 20px; }
.thanks__lead { font: 400 21px/1.5 var(--f-text); color: var(--muted); max-width: 560px; }
.thanks__ref { display: inline-flex; flex-direction: column; gap: 4px; background: var(--white); padding: 14px 20px; border-radius: var(--r); margin: 8px 0 28px; }
.thanks__ref span { font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.thanks__ref b { font-size: 22px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.thanks .how__steps { max-width: 560px; margin-bottom: 32px; }
.thanks__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.thanks__card { background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); position: sticky; top: calc(var(--nav-h) + 20px); }
@media (max-width: 900px) { .thanks { grid-template-columns: 1fr; } .thanks__card { position: static; } }
.legal { max-width: 820px; padding-block: 56px 120px; }
.legal h1 { font: 600 clamp(48px, 7vw, 88px)/0.9 var(--f-display); margin-bottom: 24px; }
.legal h2 { font-size: 32px; margin: 40px 0 12px; }
.legal p, .legal li { font: 400 18px/1.6 var(--f-text); color: var(--muted); }
.legal__lead { font-size: 22px !important; color: var(--hutan) !important; }
.legal a { text-underline-offset: 3px; }
.legal__table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; background: var(--white); border-radius: var(--r); overflow: hidden; }
.legal__table th, .legal__table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }

/* ── Tracking debug overlay (?debug_tracking=1) ─────────────────────── */
.tdebug { position: fixed; left: 12px; bottom: 12px; z-index: 99; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; color: #d6ecea; }
.tdebug__pill { border: 0; border-radius: 999px; background: #00393c; color: #d6ecea; font: inherit; padding: 7px 12px; cursor: pointer; box-shadow: var(--shadow); opacity: .85; }
.tdebug__pill b { color: var(--kunyit); }
.tdebug:not(.is-min) .tdebug__pill { display: none; }
.tdebug.is-min .tdebug__body { display: none; }
.tdebug__body { width: min(340px, calc(100vw - 24px)); max-height: 45vh; display: flex; flex-direction: column; background: #00393c; border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.tdebug__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.tdebug__bar b { color: var(--kunyit); }
.tdebug__bar button { background: none; border: 1px solid rgba(255,255,255,.25); color: inherit; font: inherit; border-radius: 6px; padding: 2px 6px; cursor: pointer; }
.tdebug__list { overflow: auto; padding: 0 10px; }
.tdebug__list > div { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.1); word-break: break-word; }
.tdebug__list b { color: var(--kunyit); }
.tdebug small { color: #8fb5b0; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── Phone refinements ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  h2 { font-size: clamp(34px, 10vw, 46px); }
  .eyebrow { font-size: 11px; margin-bottom: 10px; }
  .logo__mark { width: 46px; height: 35px; }
  .hero__inner { padding-top: calc(var(--nav-h) + 20px); padding-bottom: 96px; }
  .hero__clock { border-radius: 16px; padding: 8px 14px; margin-bottom: 18px; font-size: 13px; }
  .hero__clock-line { width: 100%; font-size: 14px; }
  .hero__title { font-size: clamp(42px, 12.5vw, 58px); margin-bottom: 16px; }
  .hero__lede { font-size: 16px; margin-bottom: 22px; }
  .hero__proof { flex-direction: column; align-items: center; gap: 6px; font-size: 13px; margin-top: 18px; }
  .intro__facts { gap: 8px; }
  .intro__facts li { font-size: 14px; padding: 9px 14px; }
  .vgrid { gap: 18px; }
  .vcard__body { padding: 22px 18px; gap: 12px; }
  .vcard__name { font-size: 40px; }
  .vcard__tag { font-size: 17px; }
  .services__head { margin-bottom: 28px; }
  .services__head > p { font-size: 17px; }
  .services__grid { grid-template-columns: 1fr; gap: 10px; }
  .svc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; text-align: left; padding: 16px; gap: 14px; }
  .svc > .ic { width: 44px; height: 44px; padding: 11px; }
  .svc h3 { font-size: 20px; margin: 0 0 3px; }
  .svc p { font-size: 13px; line-height: 1.4; }
  .svc__price { margin: 0; padding: 0; text-align: right; white-space: nowrap; font-size: 12px; display: flex; flex-direction: column; }
  .included li { font-size: 14px; }
  .perks { grid-template-columns: 1fr; gap: 10px; margin-bottom: 56px; }
  .perk { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; column-gap: 14px; row-gap: 2px; padding: 18px; }
  .perk > .ic { grid-row: span 2; margin: 0; width: 44px; height: 44px; padding: 11px; }
  .perk h3 { font-size: 21px; }
  .perk p { font-size: 14px; line-height: 1.45; }
  .how { border-radius: 22px; }
  .how .how__steps { grid-template-columns: 1fr; gap: 12px; }
  .how .how__steps li { padding: 22px 18px 20px; }
  .how .how__steps li::before { font-size: 38px; }
  .how .how__steps li:not(:last-child)::after { display: block; top: auto; bottom: -13px; right: auto; left: 41px; width: 0; height: 14px; border-top: 0; border-left: 2px dashed rgba(210, 185, 128,.6); }
  .howband { padding-inline: 0; }
  .gf__villas { flex-direction: column; align-items: center; margin: 22px auto 30px; gap: 8px; }
  .gf__v { font-size: 13px; padding: 10px 14px; }
  .whole { min-height: 0; padding: 56px var(--gutter); }
  .whole__card p:not(.eyebrow) { font-size: 16px; }
  .location .sechead > p:not(.eyebrow) { font-size: 16px; }
  .drives li { font-size: 15px; }
  .qa summary { font-size: 20px; padding: 18px 0; }
  .qa__a p { font-size: 16px; }
  .final h2 { font-size: 46px; }
  .final__inner > p { font-size: 17px; margin-bottom: 26px; }
  .vhead { padding-top: 18px; }
  .vhead__area { display: none; }
  .hero__tint { background: linear-gradient(180deg, rgba(0, 63, 66,.62) 0%, rgba(0, 63, 66,.38) 30%, rgba(0, 63, 66,.45) 60%, rgba(0, 63, 66,.88) 100%), var(--phase, transparent); }
  .crumbs { margin-bottom: 16px; font-size: 13px; }
  .vhead__title { font-size: clamp(32px, 9vw, 40px); }
  .vhead__meta { display: none; }
  .vhead__score { padding: 8px 12px; }
  .vhead__n { font-size: 22px; }
  .vhead__tag { font-size: 16px; }
  .vfacts { gap: 10px 18px; padding-bottom: 22px; }
  .vfacts li { font-size: 15px; }
  .vbody { padding-top: 24px; }
  .vsec { padding-block: 32px; }
  .vstory p { font-size: 17px; }
  .vstory .vstory__lead { font-size: 21px; }
  .spaces { gap: 18px 12px; }
  .room b, .space b { font-size: 19px; }
  .others__grid { gap: 14px; }
  .book__title { font-size: 40px; margin-bottom: 18px; }
  .progress { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .progress li { padding: 6px 10px 6px 6px; font-size: 12.5px; white-space: nowrap; flex: none; }
  .thanks { padding-block: 32px 96px; }
  .thanks__title { font-size: 52px; }
  .thanks__lead { font-size: 18px; }
  .thanks__btns .btn { width: 100%; }
}

/* Phones: compact villa cards in the slider (after the 640px rules on purpose) */
@media (max-width: 760px) {
  .vgrid > .vcard.reveal { opacity: 1; transform: none; } /* every card visible as soon as it's swiped in */
  .vgrid .vcard__media { aspect-ratio: 16/10; }
  .vgrid .vcard__logo { padding: 34px 10px 10px; }
  .vgrid .vcard__logo img { height: 34px; }
  .vgrid .vcard__badge { top: 10px; padding: 6px 10px; font-size: 10px; }
  .vgrid .vcard__body { padding: 16px 14px 16px; gap: 10px; }
  .vgrid .vcard__name { font-size: 30px; }
  .vgrid .vcard__tag { font-size: 15px; line-height: 1.35; }
  .vgrid .facts { gap: 5px; }
  .vgrid .facts li { padding: 4px 9px; font-size: 12px; }
  .vgrid .facts .ic { width: 14px; height: 14px; }
  .vgrid .vcard__rate { padding-top: 10px; font-size: 13px; }
  .vgrid .vcard__rate span:last-child b { font-size: 17px; }
  .vgrid .vcard .btn { min-height: 44px; font-size: 14px; }
  /* Wellness day: one moment per swipe, the next one peeking in */
  .rhythm__head { margin-bottom: 26px; }
  .rhythm__track { margin-inline: calc(var(--gutter) * -1); padding: 34px 0 6px var(--gutter); scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
  .rhythm__list { grid-template-columns: repeat(7, min(74vw, 300px)); gap: 14px; padding-right: var(--gutter); }
  .moment { opacity: 1; }
  .moment::before { right: -14px; }
  .rhythm .vdots button::before { background: rgba(244, 241, 234, .3); }
  .rhythm .vdots button.is-on::before { background: var(--kunyit); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}