:root {
  --ink: #111714;
  --muted: #5a6560;
  --hair: #e7eae8;
  --tint: #f3f5f4;
  --wa: #0a7a52;
  --wa-d: #086444;
  --now: #0a7a52;
  --now-lit: #3ddc97; /* the same green, lit for use on the dark hero photo */
  --soon: #8f5a00;
  --later: #47524d;
  --edge: 16px;
  --filters: 104px;
  --font: "Schibsted Grotesk", "Onest", system-ui, sans-serif;
  /* The brand colour, from Pita's logo. Only the logo uses it. */
  --brand: #836a52;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--filters); }
body { margin: 0; background: #fff; color: var(--ink); font: 400 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; caret-color: var(--ink); }
::selection { background: var(--ink); color: #fff; }
img { display: block; }
h1, h2, p, dl, dd { margin: 0; }
h1, h2 { font-weight: 800; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wa { width: 20px; height: 20px; flex: none; }

/* Header */
.head { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 var(--edge); background: #fff; }
/* The logo: the monogram (the P with a house under its bowl, drawn as type plus an SVG house in a 500 box) beside PUSPÉ over a
   tracked PROPERTIES · BALI, all in bronze. Tracking adds space after the last letter, so a matching negative margin keeps
   each line centred. */
.brand, .gobrand { display: inline-flex; align-items: center; gap: 10px; color: var(--brand); text-decoration: none; }
.mono { position: relative; width: 34px; height: 34px; flex: none; }
.mono b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; line-height: 1; }
.mono svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wms { display: grid; justify-items: center; line-height: 1; }
.wm { font-size: 22px; font-weight: 600; letter-spacing: .28em; margin-right: -.28em; }
.wd { margin-top: 5px; font-size: 9px; font-weight: 600; letter-spacing: .22em; margin-right: -.22em; white-space: nowrap; }
.headr { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lang { flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--tint); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.lang:hover { background: var(--hair); }
.wa-btn.headwa { display: none; }

/* Hero */
.hero { padding: 8px var(--edge) 18px; display: grid; gap: 14px; }
.hero h1 { font-size: clamp(36px, 10vw, 56px); }
.hero .sub { margin-top: 10px; color: var(--muted); font-size: 18px; max-width: 34em; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.facts b { color: var(--ink); font-weight: 700; }
.finder { display: none; }

/* Home: one big photo with the promise and the search on it, then a row of villas ready soon and a grid of areas.
   Only the photo layer is clipped, so the search's dropdowns can open past the photo's edge. */
.hh { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(calc(100svh - 70px), 760px); margin: 0 var(--edge); padding: 26px 20px 22px; color: #fff; }
.hh-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 22px; background: var(--ink); }
.hh-media img { width: 100%; height: 100%; object-fit: cover; }
/* --sc scales the darkening for the photo in use: a dark photo needs less of it. */
.hh-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,12,calc(.34 * var(--sc, 1))) 0%, rgba(10,14,12,calc(.08 * var(--sc, 1))) 20%, rgba(10,14,12,calc(.5 * var(--sc, 1))) 44%, rgba(10,14,12,calc(.82 * var(--sc, 1))) 70%, rgba(10,14,12,calc(.9 * var(--sc, 1))) 100%); }
.hh h1, .hh-sub, .hh-facts { text-shadow: 0 1px 2px rgba(10,14,12,.4), 0 2px 28px rgba(10,14,12,.5); }
.hh h1 { font-size: clamp(40px, 11vw, 76px); line-height: 1; letter-spacing: -.03em; max-width: 11em; }
.hh-sub { margin-top: 12px; max-width: 34em; font-size: 18px; color: rgba(255,255,255,.88); }
.hh-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.btn-light { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; transition: background .15s; }
.btn-light:hover { background: var(--tint); }
.btn-light.ink { background: var(--ink); color: #fff; }
.hh-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; font-size: 14px; color: rgba(255,255,255,.82); }
.hh-facts b { color: #fff; font-weight: 700; }
.hh-facts .hh-now { display: inline-flex; align-items: center; gap: 7px; color: var(--now-lit); font-weight: 600; }
.hh-facts .hh-now b { color: inherit; }
.hh-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--now-lit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--now-lit) 30%, transparent); }
.hh-cap { position: absolute; top: 14px; right: 14px; max-width: calc(100% - 28px); padding: 7px 12px; border-radius: 999px; background: rgba(10,14,12,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two promises under the hero: no hidden fees, and a viewing the same or next day */
.promise { display: grid; gap: 10px; max-width: 1344px; margin: 0 auto; padding: 14px var(--edge) 0; }
.promise > div { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--tint); }
.promise .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.promise p { font-size: 14px; color: var(--muted); }
.promise b { color: var(--ink); font-weight: 600; }
.hsec { max-width: 1344px; margin: 0 auto; padding: 44px var(--edge) 0; }
.hsec-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hsec-h h2 { font-size: 30px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 72%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; margin: 0 calc(var(--edge) * -1); padding: 0 var(--edge) 4px; }
.rail::-webkit-scrollbar { display: none; }
.rcard { scroll-snap-align: start; display: grid; align-content: start; gap: 3px; color: var(--ink); text-decoration: none; }
.rimg { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 8px; border-radius: 12px; background: var(--tint); }
.rimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.rcard:hover .rimg img, .atile:hover img { transform: scale(1.04); }
.rimg .state { top: 10px; left: 10px; height: 28px; font-size: 13px; }
.rcard b { font-size: 16px; line-height: 1.25; }
.rcard span { color: var(--muted); font-size: 14px; }
.rcard .state.is-now { color: var(--now); } .rcard .state.is-soon { color: var(--soon); } .rcard .state.is-later, .rcard .state.is-ask, .rcard .state.is-taken { color: var(--later); }
.rcard .rprice { color: var(--ink); font-weight: 700; font-size: 16px; }
.rprice small { color: var(--muted); font-size: 13px; font-weight: 400; }
.agrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.atile { position: relative; isolation: isolate; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--ink); color: #fff; text-decoration: none; }
.atile img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.atile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,14,12,0) 42%, rgba(10,14,12,.74) 100%); }
.atxt { position: absolute; left: 14px; right: 14px; bottom: 12px; display: grid; gap: 2px; }
.atxt b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.atxt small { font-size: 13px; color: rgba(255,255,255,.86); }
.home .close { margin-top: 56px; }
/* On a phone the hero's own button leads to the catalog, so the header link waits for more room. */
.navlink { display: none; padding: 8px 4px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (min-width: 640px) { .navlink { display: inline; } }
.navlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Filters: tap and scroll */
.filters { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--hair); padding: 8px 0; display: grid; gap: 6px; }
.chips { display: flex; align-items: center; gap: 6px; padding: 0 var(--edge); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.pill { flex: none; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tint); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.pill:hover { background: var(--hair); }
.pill[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pill small { font-size: 13px; font-weight: 400; opacity: .7; margin-left: 3px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.find { display: flex; align-items: center; gap: 6px; flex: none; height: 40px; padding: 0 12px 0 10px; background: var(--tint); border-radius: 999px; color: var(--muted); }
.find:focus-within { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.find .ic { width: 17px; height: 17px; }
.find input { width: 84px; border: 0; background: none; outline: 0; font-size: 16px; color: var(--ink); }
.find input::placeholder { color: var(--muted); }
.find input:focus, .find input:not(:placeholder-shown) { width: 150px; }
.find input::-webkit-search-cancel-button { display: none; }
.sep { flex: none; width: 1px; height: 22px; background: var(--hair); margin: 0 4px; }

/* Feed: one column of edge-to-edge posts on a phone */
.intro { padding: 14px var(--edge) 0; color: var(--muted); max-width: 44em; }
.catalog { scroll-margin-top: var(--filters); }
.feed { display: grid; gap: 22px; padding: 14px 0 8px; }
.post { content-visibility: auto; contain-intrinsic-size: auto 480px; min-width: 0; }
.ph { position: relative; overflow: hidden; background: var(--tint); aspect-ratio: 4 / 3; }
.gal { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gal::-webkit-scrollbar { display: none; }
.gal a { flex: 0 0 100%; display: block; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.gal img { width: 100%; height: 100%; object-fit: cover; }
/* Every photo strip: a swipe never turns into a browser back gesture, and a mouse can drag it. */
[data-gal] { overscroll-behavior-x: contain; -webkit-user-select: none; user-select: none; }
[data-gal] img { -webkit-user-drag: none; }
[data-gal].drag { scroll-snap-type: none; cursor: grabbing; }
.heroimg .gal a { display: block; }
.state { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; background: #fff; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.is-now { color: var(--now); } .is-soon { color: var(--soon); } .is-later, .is-ask, .is-taken { color: var(--later); }
.dots { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(17,23,20,.68); color: #fff; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; pointer-events: none; }
.renderchip { position: absolute; left: 12px; top: 48px; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; }
.nav { display: none; position: absolute; top: calc(50% - 21px); width: 42px; height: 42px; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.nav.prev { left: 12px; } .nav.next { right: 12px; }
.gw:not([data-pos]) > .prev, .gw[data-pos="end"] > .next { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .nav { display: grid; opacity: 0; transition: opacity .15s; }
  .gw:hover > .nav, .nav:focus-visible { opacity: 1; }
}
.cap { padding: 12px var(--edge) 0; }
.cap h2 { font-size: 26px; }
.cap h2 a { color: inherit; text-decoration: none; }
.cap h2 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.line { margin-top: 4px; font-size: 14px; color: var(--muted); }
.pdesc { display: none; }
.price { margin-top: 8px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.price small { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.checked { display: block; font-size: 13px; color: var(--muted); }
.warn { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--soon); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--wa); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s; }
.wa-btn:hover { background: var(--wa-d); }
.wa-btn.wide { width: 100%; }
.acts .wa-btn { flex: 1 1 auto; padding: 0 12px; }
.more { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tint); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s; }
.more:hover { background: var(--hair); }
.ask-post { padding: 30px var(--edge); background: var(--tint); display: grid; gap: 14px; justify-items: start; }
.ask-post h2 { font-size: 30px; }
.ask-post p { color: var(--muted); max-width: 40em; }
.none { padding: 48px 16px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.none h1, .none h2 { font-size: 26px; }
.none p { color: var(--muted); max-width: 30em; }

/* Reviews, how it works, questions */
.reviews { padding: 48px var(--edge) 0; }
.reviews h2 { font-size: clamp(32px, 6vw, 52px); margin-bottom: 16px; }
.revrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 380px); gap: 22px; overflow-x: auto; scrollbar-width: none; }
.revrow figure { margin: 0; }
.revrow img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 10px; border-radius: 12px; }
.revrow blockquote { margin: 0; font-size: 18px; line-height: 1.35; }
.revrow figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
.revrow a { color: inherit; }
.close { padding: 56px var(--edge) 28px; }
.close h2 { font-size: clamp(32px, 6vw, 52px); max-width: 15em; }
.how { display: grid; gap: 18px; margin: 28px 0; }
.how dt { font-weight: 700; }
.how dd { color: var(--muted); max-width: 36em; }
.faq { padding: 8px var(--edge) 40px; }
.faq details { border-top: 1px solid var(--hair); padding: 14px 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq p { margin-top: 6px; color: var(--muted); max-width: 44em; }
.foot { padding: 20px var(--edge) 32px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 14px; }
.browse { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.browse a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }

/* Sheets */
.sheet { border: 0; padding: 0; color: var(--ink); background: #fff; max-width: 100vw; }
.sheet::backdrop { background: rgba(10,14,12,.55); }
.sheet[open] { animation: rise .42s cubic-bezier(.16,1,.3,1); }
@keyframes rise { from { transform: translateY(36px); opacity: 0; } }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } }
.sheet-lead { width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; }
.sheet-lead form, .done { position: relative; padding: 22px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet-lead h2 { font-size: 26px; padding-right: 44px; }
.sub { margin: 4px 0 16px; color: var(--muted); font-size: 14px; }
.two { display: grid; gap: 12px; margin-bottom: 12px; }
.field { display: block; margin-bottom: 12px; }
.two .field { margin: 0; }
.field > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.field input { width: 100%; height: 48px; padding: 0 13px; border: 0; border-radius: 12px; background: var(--tint); font-size: 16px; }
.field input:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
.field input::placeholder { color: var(--muted); }
.field input.bad { box-shadow: inset 0 0 0 1.5px #b3261e; }
/* Move-in date: a field that opens the site's own calendar */
.datebtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 48px; padding: 0 13px; border: 0; border-radius: 12px; background: var(--tint); color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.datebtn .ic { width: 20px; height: 20px; flex: none; }
.datebtn .unset { color: var(--muted); }
.datebtn:focus-visible, .datebtn[aria-expanded="true"] { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
.cal { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--tint); animation: pop .22s cubic-bezier(.16,1,.3,1); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-head b { font-size: 16px; font-weight: 600; }
.cal-nav { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.cal-nav .ic { width: 18px; height: 18px; }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-grid > span { padding: 6px 0; color: var(--muted); font-size: 13px; font-weight: 500; }
.cal-grid .d { height: 40px; border: 0; border-radius: 50%; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.cal-grid .d:hover:not(:disabled):not(.on) { background: #fff; }
.cal-grid .d.today:not(.on) { box-shadow: inset 0 0 0 1.5px var(--hair); }
.cal-grid .d.on { background: var(--ink); color: #fff; font-weight: 700; }
.cal-grid .d:disabled { color: var(--muted); opacity: .45; cursor: default; }
.cal .link.center { margin: 6px 0 0; }
.cal button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.check { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; font-size: 14px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.link { display: block; padding: 6px 0; margin-bottom: 10px; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.link.center { width: 100%; margin: 8px 0 0; text-align: center; }
.err { margin-bottom: 10px; color: #b3261e; font-size: 14px; font-weight: 500; }
.fine { margin-top: 4px; color: var(--muted); font-size: 13px; text-align: center; }
.done p { margin: 6px 0 16px; color: var(--muted); }
.x { position: absolute; right: 12px; top: 12px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tint); color: var(--ink); }
.setf { margin-top: 16px; }
.plink { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.plink[aria-current] { background: var(--ink); color: #fff; }

/* Villa page */
.vp { padding-bottom: 8px; }
.vgal-wrap { position: relative; }
.vgal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 2px; background: var(--tint); scrollbar-width: none; }
.vgal::-webkit-scrollbar { display: none; }
.vgal img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 60%; scroll-snap-align: center; }
.vgal-wrap .dots { right: auto; left: 12px; }
.vgal-wrap .renderchip { top: 12px; left: auto; right: 12px; }
.vd { padding: 16px var(--edge) 12px; max-width: 760px; }
.backlink { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; margin-left: -4px; }
.backlink .ic { width: 16px; height: 16px; }
.vp h1 { margin-top: 10px; font-size: clamp(36px, 7vw, 56px); }
.vhead { margin-top: 6px; font-size: 18px; color: var(--muted); }
.when { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-weight: 700; }
.when::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.vd .checked { margin-top: 2px; }
.nofee { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.nofee li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.nofee .ic { width: 16px; height: 16px; flex: none; }
.vp .warn { margin-top: 10px; }
.desc { margin-top: 14px; font-size: 18px; line-height: 1.4; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; margin: 20px 0 4px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.stats dt { color: var(--muted); font-size: 13px; }
.stats dd { font-weight: 600; font-size: 14px; }
.stats dd small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
/* Good to know, amenities, nearby */
.gfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
.gfacts dt { color: var(--muted); font-size: 13px; }
.gfacts dd { font-weight: 600; font-size: 14px; }
.amgrid { display: grid; gap: 16px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.vp .amgrid h3, .nearh { font-size: 13px; font-weight: 500; color: var(--muted); margin: 0 0 6px; }
.amgrid ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.amgrid li { padding: 6px 12px; border-radius: 999px; background: var(--tint); font-size: 14px; }
.nearh { margin-top: 16px; }
.near { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
.near li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.near b { font-weight: 600; white-space: nowrap; }
.vp section { margin-top: 26px; }
.vp section h2 { font-size: 22px; margin-bottom: 8px; }
.vp section > p { max-width: 62ch; }
.mutedp { margin-top: 8px; color: var(--muted); }
.costs { display: grid; gap: 18px; }
.costs ul { margin: 0; padding-left: 18px; color: var(--muted); }
.costs li + li { margin-top: 3px; }
.allin { margin-top: 10px; font-weight: 700; }
.more-light { margin-top: 12px; }
.faq-in { padding: 0; }
.sim { padding: 8px var(--edge) 0; }
.simgrid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; }
.simgrid a { color: var(--ink); text-decoration: none; display: grid; gap: 2px; }
.simimg { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); margin-bottom: 6px; border-radius: 12px; }
.simimg img { width: 100%; height: 100%; object-fit: cover; }
.simimg .renderchip { top: 8px; left: 8px; }
.simgrid span { color: var(--muted); font-size: 14px; }
.vbar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: #fff; }
.vbar b { display: block; font-size: 18px; line-height: 1.2; white-space: nowrap; }
.vbar small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.vbar .wa-btn { padding: 0 14px; }

/* Tablet: two across */
@media (min-width: 640px) {
  :root { --edge: 24px; }
  .feed { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; padding: 18px var(--edge) 8px; }
  .ph { aspect-ratio: 4 / 3; border-radius: 22px; }
  .cap { padding: 12px 2px 0; }
  .post.wide { grid-column: 1 / -1; }
  .ask-post { grid-column: 1 / -1; border-radius: 22px; padding: 32px; }
  .how { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .two { grid-template-columns: 1fr 1fr; }
  .sheet-lead { width: 460px; margin: auto; border-radius: 22px; }
  .costs { grid-template-columns: 1fr 1fr; }
  .hh { padding: 40px 36px 34px; }
  .rail { grid-auto-columns: minmax(260px, 42%); }
  .agrid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* Desktop: hero with finder, then one wide villa and three under it */
@media (min-width: 1000px) {
  :root { --edge: 32px; --filters: 112px; }
  .head { height: 66px; }
  .wa-btn.headwa { display: inline-flex; min-height: 40px; font-size: 14px; padding: 0 16px; }
  .hero { padding: 22px var(--edge) 30px; max-width: 1344px; margin: 0 auto; }
  .hero .sub { margin-top: 14px; }
  .hh { width: calc(100% - 2 * var(--edge)); max-width: 1344px; min-height: min(80vh, 760px); margin: 0 auto; padding: 56px; }
  .hh-cap { top: 20px; right: 20px; }
  .hh-acts { display: none; }
  .hh .finder { max-width: 760px; margin-top: 26px; }
  .hsec { padding-top: 64px; }
  .promise { grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: 20px; }
  .hsec-h h2 { font-size: 34px; }
  .rail { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 28px 18px; overflow: visible; margin: 0; padding: 0; }
  .agrid { grid-template-columns: repeat(4, 1fr); }
  .atile { aspect-ratio: 3 / 4; }
  .finder { display: flex; align-items: stretch; margin-top: 22px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 10px 34px rgba(10,14,12,.12), 0 0 0 1px var(--hair); }
  .fld { position: relative; flex: 1; min-width: 0; padding: 9px 14px 9px 20px; border-radius: 999px; transition: background .15s; }
  .fld + .fld::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--hair); transition: opacity .15s; }
  .fld:hover, .fld.open { background: var(--tint); }
  .fld:hover::before, .fld:hover + .fld::before, .fld.open::before, .fld.open + .fld::before { opacity: 0; }
  .fld > span { display: block; font-size: 13px; color: var(--muted); }
  .fld select { width: 100%; border: 0; background: none; font-weight: 600; font-size: 16px; padding: 0; }
  .dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font-size: 16px; font-weight: 500; color: var(--muted); }
  .fld.set .dd { font-weight: 700; color: var(--ink); }
  .dd b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: inherit; }
  .dd .ic { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
  .fld.open .dd .ic { transform: rotate(180deg); }
  .dd:focus-visible { outline-offset: 6px; border-radius: 12px; }
  .ddl { position: absolute; z-index: 40; top: calc(100% + 12px); left: 0; min-width: max(100%, 240px); max-height: min(440px, 62vh); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; margin: 0; padding: 8px; list-style: none; border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(10,14,12,.2), 0 0 0 1px var(--hair); animation: pop .2s cubic-bezier(.16,1,.3,1); }
  .ddl li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; }
  .ddl li:hover { background: var(--tint); }
  .ddl li:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .ddl li[aria-selected="true"] { font-weight: 700; }
  .ddl .ic { width: 18px; height: 18px; opacity: 0; }
  .ddl li[aria-selected="true"] .ic { opacity: 1; }
  .finder > button { flex: none; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; white-space: nowrap; }
  .finder > button:hover { background: var(--later); }
  .filters { padding: 10px 0; }
  .chips, .feed { max-width: 1344px; margin-inline: auto; width: 100%; }
  .feed { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; padding-top: 24px; }
  .post { contain-intrinsic-size: auto 480px; }
  .post.wide { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: center; padding-bottom: 4px; }
  .post.wide .ph { aspect-ratio: 16 / 10; }
  .post.wide .cap { padding: 0 8px 0 0; }
  .post.wide .cap h2 { font-size: 34px; }
  .post.wide .pdesc { display: block; margin-top: 10px; font-size: 16px; max-width: 34em; }
  .post.wide .price { font-size: 26px; margin-top: 14px; }
  .post.wide .acts { margin-top: 16px; }
  .post.wide .acts .wa-btn { flex: 0 1 auto; padding: 0 22px; }
  .close, .faq, .foot, .reviews { max-width: 1344px; margin-inline: auto; }
  .vp { display: grid; grid-template-columns: 3fr 2fr; align-items: start; }
  .vp .vcol { grid-column: 1; grid-row: 1; align-self: stretch; }
  .vp .vd { grid-column: 2; grid-row: 1; }
  .vp .vgal-wrap { position: sticky; top: 0; }
  .vp .sim { grid-row: 2; }
  .vp .vgal img { aspect-ratio: auto; height: calc(100svh - 71px); }
  .vd { padding-top: 24px; }
  .vp .costs { grid-template-columns: 1fr; }
  .sim { grid-column: 1 / -1; padding-top: 24px; padding-bottom: 24px; }
  .simgrid { grid-auto-columns: minmax(240px, 1fr); }
  .vbar { justify-content: flex-end; gap: 24px; padding-right: var(--edge); }
}
/* Result count, clear, short WhatsApp label */
.count { padding: 14px var(--edge) 0; color: var(--muted); font-size: 14px; font-weight: 500; }
.count + .feed { padding-top: 10px; }
.pill.clear { display: inline-flex; align-items: center; gap: 4px; padding: 0 14px 0 10px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 600; }
.pill.clear .ic { width: 16px; height: 16px; }
.lbl-s { display: none; }

/* View switcher: floats while the villas are on screen */
.views { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--ink); box-shadow: 0 8px 28px rgba(10,14,12,.28); transform: translate(-50%, 160%); opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s; }
.in-cat .views { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.views button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: #fff; font-size: 14px; font-weight: 600; transition: background .15s, color .15s; }
.views button:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.14); }
.views button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.views .ic { width: 17px; height: 17px; }
.views button:focus-visible { outline-color: #fff; }

/* Grid: two across on a phone, more on wider screens */
body[data-layout="grid"] .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; padding: 10px 12px 8px; }
body[data-layout="grid"] .post { contain-intrinsic-size: auto 390px; }
body[data-layout="grid"] .ph { aspect-ratio: 4 / 5; border-radius: 12px; }
body[data-layout="grid"] .cap { padding: 8px 2px 0; }
body[data-layout="grid"] .cap h2 { font-size: 16px; letter-spacing: -.01em; }
body[data-layout="grid"] .line { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-layout="grid"] .price { margin-top: 4px; font-size: 16px; }
body[data-layout="grid"] .price small { display: block; font-size: 13px; }
body[data-layout="grid"] .warn { font-size: 13px; }
body[data-layout="grid"] .checked, body[data-layout="grid"] .acts .more { display: none; }
body[data-layout="grid"] .dots { top: auto; bottom: 8px; right: 8px; height: 24px; padding: 0 8px; }
body[data-layout="grid"] .nav { width: 34px; height: 34px; top: calc(50% - 17px); }
body[data-layout="grid"] .nav.prev { left: 8px; } body[data-layout="grid"] .nav.next { right: 8px; }
body[data-layout="grid"] .nav .ic { width: 16px; height: 16px; }
body[data-layout="grid"] .acts { margin-top: 8px; }
body[data-layout="grid"] .acts .wa-btn { min-height: 40px; padding: 0 10px; gap: 6px; font-size: 14px; }
body[data-layout="grid"] .lbl { display: none; }
body[data-layout="grid"] .lbl-s { display: inline; }
body[data-layout="grid"] .state { left: 8px; top: 8px; height: 26px; padding: 0 9px; gap: 5px; font-size: 13px; }
body[data-layout="grid"] .renderchip { left: 8px; top: 40px; height: 24px; }
body[data-layout="grid"] .ask-post { grid-column: 1 / -1; padding: 24px 16px; border-radius: 12px; }

/* Map: price pins, a card for the tapped villa */
.mapwrap { position: relative; isolation: isolate; height: calc(100svh - var(--filters)); min-height: 420px; background: var(--tint); }
/* Beats the map library's own position: relative, which would collapse the map to 300px. */
.mapwrap > .map { position: absolute; inset: 0; }
.maplibregl-map { font: inherit; }
.pin { padding: 7px 10px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 2px 8px rgba(10,14,12,.3); cursor: pointer; transition: background .12s, color .12s; }
.pin.on, .pin.hot { z-index: 2; background: var(--ink); color: #fff; }
.pin.many { box-shadow: inset 0 0 0 2px var(--ink), 0 2px 8px rgba(10,14,12,.3); }
.mapnote { position: absolute; left: 12px; top: 12px; z-index: 500; padding: 6px 11px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(10,14,12,.16); }
.mapnote:empty { display: none; }
.mapcard { position: absolute; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 600; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px 12px; padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 10px 34px rgba(10,14,12,.26); animation: rise .3s cubic-bezier(.16,1,.3,1); }
.mc-img { position: relative; width: 112px; height: 112px; overflow: hidden; border-radius: 12px; background: var(--tint); }
.mc-img .dots { top: auto; bottom: 6px; right: 6px; height: 22px; padding: 0 7px; font-size: 13px; }
.mc-img .nav { width: 30px; height: 30px; top: calc(50% - 15px); }
.mc-img .nav.prev { left: 5px; } .mc-img .nav.next { right: 5px; }
.mc-img .nav .ic { width: 16px; height: 16px; }
.mc-txt { display: grid; align-content: center; gap: 2px; min-width: 0; padding-right: 34px; }
.mc-name { color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }
.mc-line { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-near { color: var(--muted); font-size: 13px; }
.mapcard .price { margin-top: 2px; font-size: 16px; }
.mapcard .price small { font-size: 13px; }
.mapcard .wa-btn { grid-column: 1 / -1; min-height: 44px; }
.mapcard .x { right: 8px; top: 8px; width: 34px; height: 34px; }
@media (max-width: 999px) {
  body[data-layout="map"] .feed, body[data-layout="map"] .count, body[data-layout="map"] .none { display: none; }
}

@media (min-width: 640px) {
  body[data-layout="grid"] .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; padding: 14px var(--edge) 8px; }
  body[data-layout="grid"] .ph { aspect-ratio: 4 / 3; }
  body[data-layout="grid"] .lbl { display: inline; }
  body[data-layout="grid"] .lbl-s { display: none; }
  body[data-layout="grid"] .acts .more { display: inline-flex; min-height: 40px; font-size: 14px; }
}
@media (min-width: 1000px) {
  .count { max-width: 1344px; margin-inline: auto; }
  body[data-layout="grid"] .feed { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-layout="grid"] .cap h2 { font-size: 18px; }
  /* Map beside a two-column list */
  body[data-layout="map"] .catalog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; padding-left: var(--edge); }
  body[data-layout="map"] .count { grid-column: 1; max-width: none; margin: 0; padding-inline: 0; }
  body[data-layout="map"] .feed { grid-column: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 0; padding: 10px 0 32px; gap: 28px 14px; }
  body[data-layout="map"] .none { grid-column: 1; }
  body[data-layout="map"] .mapwrap { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: var(--filters); height: calc(100vh - var(--filters)); }
  .mapcard { left: auto; right: 16px; bottom: 16px; width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Tool pages: the tracked WhatsApp link and the owner's lead form */
.go { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px var(--edge); text-align: center; }
.go h1 { font-size: 30px; }
.go p { color: var(--muted); }
.go .gobrand { margin-bottom: 18px; }
.go .wa-btn { margin-top: 8px; }
.addp { max-width: 520px; margin: 0 auto; padding: 28px var(--edge) calc(32px + env(safe-area-inset-bottom)); }
.addp h1 { font-size: 30px; }
.addp .sub { margin-bottom: 20px; }
.addp .code { margin: 4px 0 18px; font-size: 32px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.field select { width: 100%; height: 48px; padding: 0 40px 0 13px; border: 0; border-radius: 12px; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6560' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; font-size: 16px; -webkit-appearance: none; appearance: none; }
.field select:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
.wa-btn.ink { background: var(--ink); }
.wa-btn.ink:hover { background: var(--later); }

/* Count line with the sort menu beside it */
.countrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--edge) 0; }
.countrow .count { padding: 0; margin: 0; max-width: none; }
.countrow + .feed { padding-top: 10px; }
@media (max-width: 999px) { body[data-layout="map"] .countrow { display: none; } }
@media (min-width: 1000px) {
  .countrow { max-width: 1344px; margin-inline: auto; }
  body[data-layout="map"] .countrow { grid-column: 1; max-width: none; margin: 0; padding-inline: 0; }
}
.sort { position: relative; flex: none; }
.sort select { -webkit-appearance: none; appearance: none; height: 36px; padding: 0 34px 0 14px; border: 0; border-radius: 999px; background: var(--tint); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.sort::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.sort select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The yearly price, under the monthly one */
.yr { margin-top: 2px; color: var(--muted); font-size: 14px; }
.vbar .vyr { display: block; }

/* List your villa */
.listp select { width: 100%; height: 48px; padding: 0 13px; border: 0; border-radius: 12px; background: var(--tint); color: var(--ink); font: inherit; font-size: 16px; }
.listp #lDone { margin-top: 14px; }