/* Design tokens. Colours are overridden per tenant from tenants.config.brand.colors
   (see lib/html.js); these defaults only keep an unconfigured tenant readable. */
:root {
  --ink:#113440; --accent:#1E6B3A; --sun:#F07634; --sand:#F9EBD1;
  --paper:#FFFCF6; --muted:#4f646b; --line:rgba(17,52,64,.12); --wa:#147a3c;
  --rented:#9a4a1c; --reserved:#8a6a00; --off:#6b7780;
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:18px; --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; font:17px/1.6 var(--sans); color:var(--ink); background:var(--paper); min-height:100vh; display:flex; flex-direction:column; }
img, video { max-width:100%; display:block; }
a { color:inherit; }
h1, h2, h3 { font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.01em; margin:0; text-wrap:balance; }
h1 { font-size:clamp(40px, 7vw, 84px); }
h2 { font-size:clamp(30px, 4.2vw, 52px); }
p { margin:0 0 1em; }
.wrap { max-width:1200px; margin:0 auto; padding:0 20px; }
.eyebrow { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 14px; }
.lede { font-size:clamp(17px, 1.6vw, 20px); color:var(--muted); max-width:46ch; }

/* header: transparent over the hero, solid once the page scrolls */
.site-header { position:fixed; inset:0 0 auto 0; z-index:50; transition:background .35s var(--ease), box-shadow .35s, padding .35s; padding:16px 0; }
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-header.solid { background:rgba(255,252,246,.92); backdrop-filter:saturate(1.4) blur(12px); box-shadow:0 1px 0 var(--line); padding:9px 0; }
.brand img { height:46px; width:auto; transition:height .35s var(--ease); }
.solid .brand img { height:38px; }
.nav { display:flex; align-items:center; gap:clamp(12px, 2.4vw, 30px); font-size:15px; font-weight:500; }
.nav a { text-decoration:none; position:relative; padding:6px 0; }
.nav a:not(.btn)::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform:scaleX(1); }
.nav .hide-s { display:none; } @media (min-width:760px) { .nav .hide-s { display:inline; } }
main { flex:1 0 auto; min-height:60vh; } .pad-top { padding-top:96px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; border-radius:999px; border:1.5px solid var(--ink); background:var(--ink); color:#fff; font:600 15px var(--sans); text-decoration:none; cursor:pointer; transition:transform .25s var(--ease), background .25s, color .25s; }
.btn:hover { transform:translateY(-2px); }
.btn.ghost { background:transparent; color:var(--ink); } .btn.ghost:hover { background:var(--ink); color:#fff; }
.btn.wa { background:var(--wa); border-color:var(--wa); } .btn.small { padding:9px 16px; font-size:14px; }

section.block { padding:clamp(56px, 8vw, 110px) 0; }
.block-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.about { background:var(--ink); color:#fff; } .about .eyebrow { color:var(--sun); } .about .lede { color:rgba(255,255,255,.78); max-width:60ch; }
.about .btn { background:#fff; color:var(--ink); border-color:#fff; }
.about .btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); } .about .btn.ghost:hover { background:#fff; color:var(--ink); }
.split { display:grid; gap:30px; } @media (min-width:900px) { .split { grid-template-columns:1fr 1fr; gap:80px; align-items:center; } }

/* cards */
.grid { display:grid; gap:26px 22px; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); }
.card { display:block; text-decoration:none; }
.card-media { position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--sand); }
.card-media img { width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.card:hover .card-media img { transform:scale(1.06); }
.card-media .badge { position:absolute; left:12px; top:12px; }
.card.is-rented .card-media img { filter:saturate(.75); }
.card-body { padding:14px 4px 0; }
.card-body h3 { font-size:25px; margin-bottom:4px; }
.card-body p { margin:0; } .card-area, .card-facts { color:var(--muted); font-size:14.5px; }
.card-price { margin-top:8px !important; font-weight:600; } .card-price small { font-weight:400; color:var(--muted); }
.card-noimg { width:100%; height:100%; display:grid; place-items:center; color:var(--muted); font-size:14px; }
.empty { color:var(--muted); padding:40px 0; }

.badge { display:inline-block; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; color:#fff; background:var(--off); backdrop-filter:blur(6px); }
.badge-available { background:var(--accent); } .badge-reserved { background:var(--reserved); } .badge-rented { background:var(--rented); }

/* index pages */
.page-head { background:var(--sand); padding:130px 0 40px; } .page-head .lede { margin-top:12px; }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; }
.filters select, .more-panel select { appearance:none; font:500 15px var(--sans); color:var(--ink); padding:11px 38px 11px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23113440' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.filters label.check, .more-panel label.check { display:inline-flex; align-items:center; gap:8px; padding:11px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-size:15px; font-weight:500; cursor:pointer; }
.count { color:var(--muted); font-size:15px; margin:26px 0 18px; }

/* content pages */
.prose { max-width:820px; padding-top:48px; padding-bottom:96px; } .prose p { font-size:18px; margin:0 0 1.2em; } .prose h2 { font-size:32px; margin:1.6em 0 .5em; }
.prose .ticks { grid-template-columns:1fr; font-size:18px; gap:12px; margin:1.4em 0 1.6em; }
/* plain bulleted lists (legal text) and a list under a list item */
.bullets { margin:0 0 1.4em; padding-left:1.3em; } .prose .bullets { font-size:18px; } .bullets li { margin:0 0 .5em; padding-left:.2em; } .bullets li::marker { color:var(--accent); }
.prose p + .bullets { margin-top:-.4em; } .bullets ul, .ticks ul { list-style:circle; margin:.6em 0 .2em; padding-left:1.3em; } .ticks ul li { padding-left:.2em; } .ticks ul li::before { content:none; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:2em; }
.faq details { border-bottom:1px solid var(--line); padding:6px 0; } .faq summary { cursor:pointer; list-style:none; font:400 24px var(--serif); padding:16px 40px 16px 0; position:relative; }
.faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; position:absolute; right:6px; top:12px; font:300 30px var(--sans); color:var(--accent); transition:transform .3s var(--ease); }
.faq details[open] summary::after { transform:rotate(45deg); } .faq details p { color:var(--muted); max-width:62ch; }
.contact-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:22px; margin:0 0 1em; } .contact-list dt { font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .contact-list dd { margin:4px 0 0; font-size:19px; } .contact-list a { text-underline-offset:4px; }
.site-footer .social a { display:inline-block; margin-right:16px; }

/* listing page */
.gallery-wrap { position:relative; margin-top:76px; }
.gallery { display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.gallery::-webkit-scrollbar { display:none; }
.gallery button { flex:none; width:86vw; aspect-ratio:4/3; padding:0; border:0; background:var(--sand); scroll-snap-align:center; cursor:zoom-in; overflow:hidden; }
.gallery.g-1 button { width:100vw; }
.gallery img { width:100%; height:100%; object-fit:cover; }
.gallery-wrap .more { display:none; }
/* on a phone the counter is the button that opens the viewer */
.gallery-count { position:absolute; right:14px; bottom:12px; min-height:32px; border:0; background:rgba(17,52,64,.78); color:#fff; font:500 13px var(--sans); padding:6px 12px; border-radius:999px; cursor:pointer; }
.gallery-count::after { content:""; position:absolute; inset:-8px; } /* a finger-sized target around the small chip */
@media (min-width:900px) {
  .gallery-wrap { max-width:1200px; margin:96px auto 0; padding:0 20px; }
  .gallery { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2, minmax(0, 1fr)); height:min(62vh, 600px); overflow:hidden; gap:8px; }
  .gallery button, .gallery.g-1 button { width:auto; aspect-ratio:auto; border-radius:10px; } .gallery button:first-child { grid-row:span 2; border-radius:var(--radius) 10px 10px var(--radius); }
  .gallery button:nth-child(n+6) { display:none; } .gallery button img { transition:transform .9s var(--ease); } .gallery button:hover img { transform:scale(1.04); }
  /* fewer than five photos: a shape of its own, never an empty cell */
  .gallery.g-1 { grid-template-columns:1fr; grid-template-rows:1fr; } .gallery.g-1 button:first-child { border-radius:var(--radius); }
  .gallery.g-2 { grid-template-columns:1fr 1fr; grid-template-rows:1fr; } .gallery.g-2 button:first-child { grid-row:auto; } .gallery.g-2 button:last-child { border-radius:10px var(--radius) var(--radius) 10px; }
  .gallery.g-3 { grid-template-columns:2fr 1fr; } .gallery.g-3 button:nth-child(n+4) { display:none; }
  .gallery-wrap .more { display:inline-flex; position:absolute; right:36px; bottom:16px; background:#fff; color:var(--ink); border-color:#fff; box-shadow:0 6px 20px rgba(17,52,64,.25); }
  .gallery-count { display:none; }
}
.listing { display:grid; gap:40px; padding-top:34px; padding-bottom:80px; }
/* Desktop: article and map on the left, the enquiry panel beside both. Phone: article, prices and
   enquiry, then the map (the panel comes before the map in the source). */
@media (min-width:980px) { .listing { grid-template-columns:minmax(0, 1fr) 380px; gap:40px 70px; } .listing > article, .listing-after { grid-column:1; } .listing > .enquire { grid-column:2; grid-row:1 / span 2; } }
.listing .listing-after section { margin-top:0; }
.prices-top { margin:26px 0 0; } .prices-top h2 { font-size:22px; margin-bottom:4px; } .prices-top .prices { font-size:15px; font-variant-numeric:tabular-nums; } .prices-top .prices th, .prices-top .prices td { padding:8px 0; } .prices-top .sale-price { font-size:30px; } .prices-top .prices tr:last-child > * { border-bottom:0; }
@media (min-width:980px) { .prices-top { display:none; } } @media (max-width:979px) { .prices-side { display:none; } .prices-top + .facts { margin-top:22px; } }
.prices td small { display:block; font-size:12.5px; font-weight:400; color:var(--muted); }
.wa-note { font-size:13.5px; line-height:1.45; color:var(--muted); margin:10px 0 0; max-width:52ch; } .enquire .wa-note { text-align:center; }
.form-done { margin-top:18px; padding:20px; border-radius:14px; background:var(--sand); text-align:center; } .form-done:focus { outline:none; } .form-done p { margin:0; font:400 24px/1.2 var(--serif); } .form-done .btn { margin-top:14px; }
.listing header .ref { font-size:12.5px; letter-spacing:.16em; color:var(--muted); margin:0 0 10px; }
.listing header h1 { font-size:clamp(34px, 4.6vw, 56px); } .listing header .area { color:var(--muted); margin:10px 0 14px; }
.facts { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:18px 14px; margin:30px 0; padding:24px 0; border-block:1px solid var(--line); }
.facts dt { color:var(--muted); font-size:13px; } .facts dd { margin:2px 0 0; font-weight:600; }
.listing section { margin-top:38px; } .listing section h2 { font-size:30px; margin-bottom:14px; }
.description p { max-width:64ch; }
.ticks { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:9px 24px; }
.ticks li { padding-left:24px; position:relative; } .ticks li::before { content:""; position:absolute; left:2px; top:.62em; width:10px; height:6px; border:solid var(--accent); border-width:0 0 2px 2px; transform:rotate(-45deg); }
.ticks.no li::before { width:10px; height:0; border-width:0 0 2px 0; transform:none; top:.8em; border-color:var(--muted); }
.enquire { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; align-self:start; box-shadow:0 30px 60px -40px rgba(17,52,64,.35); }
@media (min-width:980px) { .enquire { position:sticky; top:96px; } }
.enquire h2 { font-size:24px; margin-bottom:12px; }
.prices { border-collapse:collapse; width:100%; margin-bottom:6px; } .prices th, .prices td { text-align:left; padding:10px 0; border-bottom:1px solid var(--line); font-weight:400; color:var(--muted); } .prices td { text-align:right; font-weight:600; color:var(--ink); }
.sale-price { font:400 34px var(--serif); margin:4px 0 2px; } .sale-price small { font:400 15px var(--sans); color:var(--muted); display:block; }
.enquire .btn { width:100%; margin-top:14px; } .enquire .fine { font-size:13px; color:var(--muted); margin:12px 0 0; text-align:center; }
.enquiry { margin-top:18px; display:grid; gap:10px; } .enquiry .or { text-align:center; color:var(--muted); font-size:13.5px; line-height:1.45; margin:0 0 2px; }
.enquiry input, .enquiry textarea { width:100%; font:400 16px var(--sans); color:var(--ink); padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); resize:vertical; }
.enquiry input:focus, .enquiry textarea:focus { outline:none; border-color:var(--ink); } .enquiry .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.enquiry .btn { margin-top:2px; } .form-note { margin:0; font-size:14px; min-height:1.2em; } .form-note.ok { color:var(--accent); font-weight:600; } .form-note.err { color:#b3261e; }
.video video, .video iframe, .video-facade { width:100%; aspect-ratio:16/9; border:0; border-radius:var(--radius); background:var(--ink); display:block; }
.video-facade { color:#fff; font:500 17px var(--sans); cursor:pointer; display:grid; place-items:center; grid-auto-flow:column; justify-content:center; gap:12px; }
.video-facade span { width:54px; height:54px; border-radius:50%; background:var(--sun); display:grid; place-items:center; font-size:18px; padding-left:3px; }
.mapbox { position:relative; height:340px; border-radius:var(--radius); overflow:hidden; background:var(--sand); } .map-note { font-size:13.5px; color:var(--muted); margin-top:8px; }
@media (max-width:759px) { .mapbox { height:280px; } }
/* the map's words: under the tiles while it works, over everything (with a link) when it cannot load */
.map-fallback { position:absolute; inset:0; margin:0; display:grid; place-content:center; gap:8px; padding:20px; text-align:center; font-size:14.5px; color:var(--muted); }
.map-fallback a { color:var(--ink); font-weight:600; text-underline-offset:3px; }
.mapbox.failed .map-fallback, .bigmap.failed .map-fallback { z-index:1000; background:var(--sand); }
.map-move { position:absolute; z-index:1000; left:50%; bottom:12px; transform:translateX(-50%); min-height:40px; padding:0 16px; border:0; border-radius:999px; background:rgba(17,52,64,.86); color:#fff; font:500 14px var(--sans); box-shadow:0 6px 18px rgba(17,52,64,.25); }
.map-move[aria-pressed=true] { background:var(--accent); }
.mobile-cta { position:fixed; inset:auto 0 0 0; z-index:40; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,252,246,.94); backdrop-filter:blur(10px); border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; }
.mobile-cta .p { flex:1; font-weight:600; line-height:1.2; } .mobile-cta .p small { display:block; font-weight:400; color:var(--muted); font-size:12.5px; }
.mobile-cta { transition:transform .24s var(--ease); } .mobile-cta.hide { transform:translateY(110%); visibility:hidden; transition:transform .24s var(--ease), visibility 0s .24s; }
.mobile-cta .p a { display:inline-block; font-size:12.5px; font-weight:400; color:var(--muted); text-underline-offset:3px; padding:2px 0; } .mobile-cta .btn { min-height:48px; padding-inline:20px; }
@media (min-width:980px) { .mobile-cta { display:none; } }
/* the bar never sits on the last lines of the page, and it rides above the Admin's preview banner */
@media (max-width:979px) { body:has(.mobile-cta) .site-footer { padding-bottom:calc(40px + 76px + env(safe-area-inset-bottom)); } body:has(.preview-banner) .mobile-cta { bottom:34px; } }
.preview-banner { position:fixed; inset:auto 0 0 0; z-index:60; background:#1d2327; color:#fff; text-align:center; font-size:13px; padding:8px 12px; }

/* full-screen gallery: a modal <dialog> (audit SITE-02), so the page behind it is inert and Escape closes it */
.lightbox { position:fixed; inset:0; z-index:100; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; color:#fff; background:#0b1d24; display:none; grid-template-rows:56px minmax(0, 1fr); overflow:hidden; }
.lightbox[open] { display:grid; animation:fade .3s; } .lightbox::backdrop { background:#0b1d24; } @keyframes fade { from { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation:none; } }
/* the counter and the close button have a bar of their own, so nothing is printed over a photo */
.lightbox .bar { display:flex; align-items:center; justify-content:space-between; padding:0 10px 0 20px; }
.lightbox .pos { color:rgba(255,255,255,.8); font-size:14px; font-variant-numeric:tabular-nums; }
/* a sideways swipe moves between photos and pinching zooms; at the first or last photo the swipe stops
   here instead of turning into the browser's own Back gesture */
.lightbox .strip { display:flex; min-height:0; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior:contain; touch-action:pan-x pinch-zoom; } .lightbox .strip::-webkit-scrollbar { display:none; }
.lightbox figure { flex:none; width:100vw; height:100%; margin:0; display:grid; grid-template-rows:minmax(0, 1fr); scroll-snap-align:center; padding:0 0 env(safe-area-inset-bottom); }
.lightbox img { width:100%; height:100%; object-fit:contain; }
.lightbox .x, .lightbox .nav-b { border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.18); color:#fff; width:44px; height:44px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; }
.lightbox .x:focus-visible, .lightbox .nav-b:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.lightbox .nav-b { position:absolute; z-index:2; top:calc(50% + 28px); transform:translateY(-50%); display:none; } .lightbox .prev { left:16px; } .lightbox .next { right:16px; }
.lightbox .nav-b:disabled { opacity:.35; cursor:default; }
@media (min-width:900px) { .lightbox .nav-b { display:block; } .lightbox figure { padding:0 72px 24px; } }

.site-footer { background:var(--ink); color:rgba(255,255,255,.75); padding:64px 0 40px; font-size:15px; }
.site-footer .cols { display:grid; gap:30px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.site-footer .footer-title { font:400 28px/1.08 var(--serif); letter-spacing:-.01em; color:#fff; margin:0 0 10px; } /* a <p>: no heading level without a parent */ .site-footer a { text-decoration:none; display:block; padding:3px 0; } .site-footer a:hover { color:#fff; }
.site-footer .legal a { display:inline-block; padding:8px 4px; }
.site-footer .legal { margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.15); font-size:13px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }

/* above the fold: plays on load from CSS alone, never waits for a script */
.film .reveal, .listing header.reveal, .page-head .reveal { animation:rise .9s var(--ease) both; animation-delay:calc(var(--i, 0) * 90ms + 80ms); opacity:1; transform:none; transition:none; }
@keyframes rise { from { opacity:0; transform:translateY(26px); } }

/* motion: elements rise in as they enter the viewport; all of it off for reduced motion */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i, 0) * 70ms); }
.reveal.in { opacity:1; transform:none; }
.no-js .reveal { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; }
  .listing header.reveal, .film .reveal { animation:none; } .card-media img, .gallery button img, .btn { transition:none; }
}

.prices th small { display:block; font-size:13px; opacity:.8; }

/* browse pages: filter bar, active filters, toolbar, area pages, map (Annex A A6, A10) */
.filters { align-items:center; position:relative; }
.seg { display:inline-flex; padding:3px; border-radius:999px; border:1.5px solid var(--line); background:#fff; }
.seg a { padding:8px 16px; border-radius:999px; font-size:15px; font-weight:500; text-decoration:none; white-space:nowrap; transition:background .25s, color .25s; }
.seg a.on { background:var(--ink); color:#fff; } .seg a:not(.on):hover { background:var(--sand); }
.filters select:focus-visible, .filters .check:focus-within, .more-panel select:focus-visible, .more-panel .check:focus-within, .morefilters summary:focus-visible, .seg a:focus-visible, .chips a:focus-visible, .share-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.filters select { max-width:210px; text-overflow:ellipsis; }
.filters .check input, .more-panel .check input { accent-color:var(--accent); width:16px; height:16px; margin:0; }
.morefilters { position:static; } .morefilters summary { list-style:none; cursor:pointer; padding:11px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-size:15px; font-weight:500; white-space:nowrap; user-select:none; }
.morefilters summary::-webkit-details-marker { display:none; } .morefilters[open] summary, .morefilters[data-active] summary { border-color:var(--ink); }
.morefilters summary b { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--ink); color:#fff; font-size:12px; font-weight:600; }
.more-panel { position:absolute; z-index:30; left:0; top:calc(100% + 10px); width:min(560px, 100%); display:flex; flex-wrap:wrap; gap:10px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 30px 60px -30px rgba(17,52,64,.45); }
.more-panel fieldset { flex:1 0 100%; border:0; border-top:1px solid var(--line); margin:6px 0 0; padding:14px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.more-panel legend { float:left; width:100%; padding:0; margin-bottom:4px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.more-panel fieldset .check { padding:8px 14px; font-size:14.5px; } .more-panel .btn { margin-left:auto; }
.more-head { display:none; }
.active-filters { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; font-size:14px; }
.active-filters a { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(17,52,64,.08); text-decoration:none; font-weight:500; }
.active-filters a span { font-size:17px; line-height:1; opacity:.6; } .active-filters a:hover span { opacity:1; }
.active-filters a.clear { background:none; text-decoration:underline; text-underline-offset:3px; color:var(--muted); padding-inline:6px; }
.results { padding-bottom:90px; } .toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:22px 0 18px; } .toolbar .count { margin:0; }
.tools { display:flex; align-items:center; gap:10px; } .tools select { appearance:none; font:500 15px var(--sans); color:var(--ink); padding:10px 36px 10px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23113440' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.empty .cta-row { margin-top:14px; } .also { margin:40px 0 0; } .also a { text-underline-offset:4px; }
.crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--muted); margin:0 0 18px; } .crumbs a { text-underline-offset:3px; } .crumbs [aria-current] { color:var(--ink); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.chips a { padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; text-decoration:none; font-size:15px; font-weight:500; } .chips a small { color:var(--muted); margin-left:4px; }
.chips a.on { background:var(--ink); border-color:var(--ink); color:#fff; } .chips a.on small { color:rgba(255,255,255,.7); }
.area-intro { max-width:64ch; margin-top:18px; } .page-head .cta-row { margin-top:22px; }

.page-head.compact { padding:96px 0 26px; } .page-head.compact h1 { font-size:clamp(32px, 4vw, 48px); } .page-head.compact .filters { margin-top:18px; }
.map-split { display:grid; gap:22px; } .map-pane { order:-1; } .bigmap { position:relative; height:62vh; min-height:340px; border-radius:var(--radius); overflow:hidden; background:var(--sand); z-index:0; }
.bigmap.failed { display:grid; place-items:center; padding:24px; text-align:center; color:var(--muted); }
@media (min-width:980px) {
  .map-split { grid-template-columns:420px minmax(0, 1fr); align-items:start; } .map-pane { order:0; position:sticky; top:84px; } .bigmap { height:calc(100vh - 140px); }
  .map-list { display:grid; gap:14px; } .map-list .card { display:grid; grid-template-columns:172px minmax(0, 1fr); gap:14px; padding:8px; border-radius:calc(var(--radius) + 4px); border:1.5px solid transparent; transition:border-color .25s, background .25s; }
  .map-list .card:hover, .map-list .card.on { background:#fff; border-color:var(--line); } .map-list .card.on { border-color:var(--ink); }
  .map-list .card-media { border-radius:12px; } .map-list .card-media .badge { left:6px; top:6px; font-size:10.5px; padding:3px 8px; max-width:calc(100% - 16px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .map-list .card-body { padding:2px 0 0; } .map-list .card-body h3 { font-size:20px; } .map-list .card.reveal { opacity:1; transform:none; }
}
@media (max-width:979px) { .map-list { display:grid; gap:26px 22px; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); } }
.pin { position:absolute; transform:translate(-50%, -50%); white-space:nowrap; padding:5px 11px; border-radius:999px; background:#fff; color:var(--ink); font:600 13px var(--sans); border:1.5px solid var(--ink); box-shadow:0 6px 16px -6px rgba(17,52,64,.5); cursor:pointer; transition:background .2s, color .2s, transform .2s var(--ease); }
.pin:hover, .pin.hover, .pin.on { background:var(--ink); color:#fff; transform:translate(-50%, -50%) scale(1.08); }
.pin.cluster { min-width:38px; height:38px; padding:0 10px; display:grid; place-items:center; background:var(--accent); border-color:#fff; border-width:2px; color:#fff; font-size:14px; }
.leaflet-popup-content-wrapper { border-radius:16px; padding:0; overflow:hidden; box-shadow:0 24px 50px -24px rgba(17,52,64,.6); } .leaflet-popup-content { margin:0 !important; font:400 14px/1.35 var(--sans); }
.pin-cards { display:grid; max-height:300px; overflow:auto; } .pin-card { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:12px; padding:10px; text-decoration:none; color:var(--ink) !important; align-items:center; }
.pin-card + .pin-card { border-top:1px solid var(--line); } .pin-card img { width:96px; height:76px; object-fit:cover; border-radius:10px; background:var(--sand); }
.pin-card span { display:grid; gap:2px; min-width:0; } .pin-card b { font:400 18px/1.15 var(--serif); } .pin-card small { color:var(--muted); font-size:12.5px; } .pin-card strong { font-size:13.5px; } .pin-card strong small { font-weight:400; }
.pin-card .badge { justify-self:start; font-size:11px; padding:2px 8px; margin-top:2px; }

/* listing page: area link, share */
.listing header .area a { text-underline-offset:3px; text-decoration-color:var(--line); } .listing header .area a:hover { text-decoration-color:currentColor; }
.head-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.share { position:relative; display:inline-flex; align-items:center; gap:10px; }
.share-btn { display:inline-flex; align-items:center; gap:7px; padding:5px 13px 5px 10px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font:500 13.5px var(--sans); cursor:pointer; transition:border-color .25s; } .share-btn:hover { border-color:var(--ink); }
.share-menu { display:none; position:absolute; z-index:20; left:0; top:calc(100% + 8px); min-width:210px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 50px -24px rgba(17,52,64,.5); }
.share.open .share-menu { display:grid; } .share-menu button, .share-menu a { display:block; width:100%; text-align:left; padding:10px 12px; border:0; border-radius:9px; background:none; color:var(--ink); font:500 14.5px var(--sans); text-decoration:none; cursor:pointer; }
.share-menu button:hover, .share-menu a:hover { background:var(--sand); } .share-note { font-size:13.5px; color:var(--accent); font-weight:600; }
.no-js .share-btn { display:none; } .no-js .share-menu { display:flex; position:static; box-shadow:none; border:0; padding:0; } .no-js .share-menu button { display:none; }

/* phone: the filters become one row that scrolls sideways; "More filters" opens as a sheet */
@media (max-width:759px) {
  .filters { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-20px; padding:2px 20px; } .filters::-webkit-scrollbar { display:none; }
  .filters > * { flex:none; } .filters select { max-width:190px; } .filters .seg { order:-2; } .morefilters { order:-1; } /* More filters stays in reach, not at the far end of the row */
  .more-panel { position:fixed; inset:auto 0 0 0; top:auto; width:auto; max-height:78vh; overflow:auto; border-radius:22px 22px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -30px 80px rgba(17,52,64,.35); z-index:80; }
  .more-panel.sheet { box-shadow:0 0 0 100vmax rgba(17,52,64,.38); } /* the dimmed page behind the sheet; a tap on it closes */
  .more-head { flex:1 0 100%; display:flex; align-items:center; justify-content:space-between; margin:0 0 4px; font-size:17px; } .no-js .more-head button { display:none; }
  .more-close { border:0; background:none; padding:8px 0 8px 16px; color:var(--accent); font:600 15px var(--sans); cursor:pointer; }
  .more-panel select { flex:1 1 100%; max-width:none; } .more-panel .btn { flex:1 0 100%; padding:14px; font-size:15px; }
  .toolbar { margin-top:18px; } .tools { width:100%; justify-content:space-between; flex-wrap:wrap; } /* the map of everything has three view links: they take their own line */
  .pin-card b { font-size:17px; }
}
@media (prefers-reduced-motion: reduce) { .pin, .seg a { transition:none; } }
.results .gap { height:34px; }

/* skip link, phone header and menu */
.skip { position:absolute; left:12px; top:-60px; z-index:200; padding:10px 16px; border-radius:999px; background:var(--ink); color:#fff; font-weight:600; text-decoration:none; } .skip:focus { top:12px; }
.wa-top svg, .menu-btn { display:none; }
dialog.menu { border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; background:var(--sand); color:var(--ink); overflow:auto; }
dialog.menu[open] { display:flex; flex-direction:column; padding:84px 24px calc(24px + env(safe-area-inset-bottom)); } dialog.menu::backdrop { background:var(--sand); }
.menu nav { display:grid; } .menu nav a { font:400 34px/1.25 var(--serif); text-decoration:none; padding:7px 0; min-height:56px; display:flex; align-items:center; border-bottom:1px solid var(--line); animation:rise .5s var(--ease) both; animation-delay:calc(var(--i) * 60ms); }
.menu nav a[aria-current] { color:var(--accent); font-style:italic; }
.menu-close { position:absolute; right:16px; top:16px; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--ink); font-size:24px; line-height:1; cursor:pointer; }
.menu-close:focus-visible, .menu-btn:focus-visible, .menu nav a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.menu-foot { margin-top:auto; padding-top:28px; display:grid; gap:14px; text-align:center; } .menu-mail { font-size:15px; color:var(--muted); text-underline-offset:3px; padding:8px 0; }
@media (max-width:759px) {
  .nav { gap:10px; } .nav > a:not(.btn):not(.menu-btn) { padding:12px 4px; }
  .btn.wa-top { width:44px; height:44px; padding:0; background:#fff; border-color:var(--line); color:var(--wa); } .wa-top span { display:none; } .wa-top svg { display:block; width:22px; height:22px; }
  .menu-btn { display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; }
  .menu-btn span, .menu-btn span::before { display:block; width:18px; height:1.8px; border-radius:2px; background:currentColor; } .menu-btn span { transform:translateY(-3.5px); } .menu-btn span::before { content:""; transform:translateY(7px); }
  .nav a.menu-nojs::after { content:none; } a.menu-nojs { display:none; } .no-js button.menu-btn { display:none; } .no-js a.menu-nojs { display:inline-grid; }
}
@media (prefers-reduced-motion: reduce) { .menu nav a { animation:none; } .mobile-cta { transition:none; } }

/* ── Shared shortlist (/s/:token): phone first, one home per card ───────── */
.sl-intro { font-size:15px; color:var(--muted); margin:14px 0 0; max-width:52ch; }
.sl-wrap { display:grid; gap:26px; } .sl-item, .sl-foot { max-width:880px; }
.sl-block { padding-top:34px; }
.sl-item { display:grid; gap:14px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.sl-item:last-of-type { border-bottom:0; }
.sl-media { position:relative; display:block; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--sand); }
.sl-media img { width:100%; height:100%; object-fit:cover; } .sl-media .badge { position:absolute; left:12px; top:12px; }
.sl-item.is-pass .sl-media img { filter:saturate(.4); opacity:.75; }
.sl-body .ref { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.sl-body h2 { font-size:clamp(26px, 3.4vw, 34px); } .sl-body h2 a { text-decoration:none; } .sl-body h2 a:hover { color:var(--accent); }
.sl-area { color:var(--muted); font-size:14.5px; margin:4px 0 0; } .sl-price { font-weight:600; margin:6px 0 0; } .sl-price small { font-weight:400; color:var(--muted); }
.sl-react { display:flex; gap:10px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.sl-btn { display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 20px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font:600 15px var(--sans); cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.sl-btn:hover { border-color:var(--ink); } .sl-btn:active { transform:scale(.97); }
.sl-btn.like svg path { fill:none; } .sl-btn.like[aria-pressed=true] { background:var(--accent); border-color:var(--accent); color:#fff; } .sl-btn.like[aria-pressed=true] svg path { fill:currentColor; }
.sl-btn.pass[aria-pressed=true] { background:var(--ink); border-color:var(--ink); color:#fff; }
.sl-note { font-size:13.5px; color:var(--accent); font-weight:600; min-height:1.2em; } .sl-note.err { color:#b3261e; }
.sl-comment { display:grid; gap:8px; margin-top:12px; grid-template-columns:1fr auto; align-items:start; }
.sl-comment textarea, .sl-viewing input, .sl-viewing textarea { width:100%; font:400 16px var(--sans); color:var(--ink); padding:11px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); resize:vertical; }
.sl-comment textarea:focus, .sl-viewing input:focus, .sl-viewing textarea:focus { outline:none; border-color:var(--ink); }
.sl-comment .btn { min-height:46px; }
.sl-viewing { margin-top:12px; } .sl-viewing details summary { list-style:none; display:inline-flex; } .sl-viewing summary::-webkit-details-marker { display:none; }
.sl-viewing details[open] summary { background:var(--sand); color:var(--ink); border-color:var(--sand); }
.sl-viewing form { display:grid; gap:8px; margin-top:10px; padding:14px; border-radius:14px; background:var(--sand); }
.sl-viewing form .btn { justify-self:start; }
.sl-done { margin:0; padding:12px 14px; border-radius:12px; background:var(--sand); font-weight:600; font-size:15px; } .sl-done small { display:block; font-weight:400; color:var(--muted); font-size:13.5px; }
.sl-item.saving .sl-btn { opacity:.7; }
.sl-foot { display:grid; gap:12px; justify-items:start; padding-top:8px; } .sl-foot p { margin:0; font:400 24px/1.2 var(--serif); }
@media (min-width:760px) {
  .sl-item { grid-template-columns:320px minmax(0, 1fr); gap:24px; align-items:start; }
  .sl-media { position:sticky; top:96px; }
  .sl-comment { max-width:560px; } .sl-viewing form { max-width:560px; }
  .sl-foot { grid-template-columns:1fr auto; align-items:center; }
}

/* ══ Redesign, 25 Sep 2026 ══════════════════════════════════════════════════════════════════════
   One look across the site: photo-led, serif headlines, sand and ink, one clear action per screen. */
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.btn:focus-visible { outline-offset:3px; }
.btn.sun { background:var(--sun); border-color:var(--sun); color:#1b1206; }
.btn.wa { color:#fff; } .btn.wa:hover { background:#0f6431; border-color:#0f6431; }
.muted { color:var(--muted); }

/* The film (Bas's full-bleed video): pinned while the page slides over it. site.js sets --p from 0 to 1 over the
   first screen of scrolling: the film eases back and darkens, the words drift up and fade. */
.film { position:sticky; top:0; height:100svh; min-height:560px; overflow:hidden; background:var(--ink); color:#fff; --p:0; z-index:0; }
.film-media { position:absolute; inset:0; }
.film-media video, .film-media img { width:100%; height:100%; object-fit:cover; transform:scale(calc(1.02 + var(--p) * .1)) translateY(calc(var(--p) * 4vh)); transform-origin:50% 40%; will-change:transform; }
.film-media::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,252,246,.8) 0, rgba(255,252,246,0) 140px), linear-gradient(15deg, rgba(10,30,37,.7) 0%, rgba(10,30,37,.3) 45%, rgba(10,30,37,0) 70%);
  opacity:calc(1 + var(--p) * .5); }
.film::after { content:""; position:absolute; inset:0; background:var(--ink); opacity:calc(var(--p) * .55); pointer-events:none; }
.film-in { position:relative; z-index:1; height:100%; display:grid; grid-template-columns:minmax(0, 1fr); align-items:end; padding-top:110px; padding-bottom:clamp(40px, 9vh, 96px);
  transform:translateY(calc(var(--p) * -70px)); opacity:calc(1 - var(--p) * 1.3); }
.film-words { max-width:720px; }
.film h1 { color:#fff; font-size:clamp(46px, 7.4vw, 96px); text-shadow:0 2px 30px rgba(10,30,37,.35); } .film h1 em { color:var(--sand); }
.film .eyebrow { color:var(--sand); } .film .lede { color:rgba(255,255,255,.9); margin:18px 0 0; max-width:52ch; }
.hero-search { margin-top:28px; background:#fff; color:var(--ink); border-radius:20px; padding:10px; box-shadow:0 30px 70px -30px rgba(0,0,0,.55); max-width:820px; }
.hs-kind { display:flex; gap:4px; padding:4px 4px 10px; }
.hs-kind label { position:relative; cursor:pointer; } .hs-kind input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.hs-kind label { padding:8px 16px; border-radius:999px; font-weight:600; font-size:14.5px; color:var(--muted); }
.hs-kind label:has(input:checked) { background:var(--ink); color:#fff; } .hs-kind label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.hs-row { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; gap:0; align-items:stretch; border-top:1px solid var(--line); }
.hs-f { display:flex; flex-direction:column; gap:2px; padding:10px 16px; border-right:1px solid var(--line); min-width:0; }
.hs-f span { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hs-f select { appearance:none; border:0; background:transparent; font:500 16px var(--sans); color:var(--ink); padding:2px 0; min-width:0; cursor:pointer; text-overflow:ellipsis; }
.hs-f select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:6px; }
.hero-search .btn { margin:8px 0 0 8px; border-radius:16px; min-height:56px; white-space:nowrap; }
.hs-price[hidden] { display:none; }
.hero-note { margin:14px 0 0; font-size:14.5px; color:rgba(255,255,255,.85); }
.film-down { position:absolute; z-index:1; left:50%; bottom:46px; transform:translateX(-50%); width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff; border:1.5px solid rgba(255,255,255,.5); opacity:calc(1 - var(--p) * 3); }
@media (max-width:759px) { .film-down { display:none; } }
@media (max-width:759px) {
  .film { min-height:620px; } .film-in { padding-bottom:64px; }
  .hs-row { grid-template-columns:1fr 1fr; } .hs-f:nth-child(2) { border-right:0; } .hs-price { grid-column:1 / -1; border-top:1px solid var(--line); border-right:0; }
  .hero-search .btn { grid-column:1 / -1; margin:8px 0 0; }
}
/* The rest of the home page is a sheet that slides up over the film. */
.curtain { position:relative; z-index:2; background:var(--paper); border-radius:32px 32px 0 0; margin-top:-32px; box-shadow:0 -24px 60px -30px rgba(10,30,37,.5); }
.curtain > .block:first-child { padding-top:clamp(56px, 7vw, 90px); }
@media (prefers-reduced-motion: reduce) { .film { position:relative; height:auto; min-height:92svh; } .film-in, .film-media video, .film-media img, .film::after, .film-down { transform:none; opacity:1; } .film::after { opacity:0; } }

/* The carousel hero (config.home.hero_style "carousel"): the tenant's homes in turn, under the same words and
   search. The slides are stacked; site.js fades the next one in over the last, the rest are hidden and inert.
   Desktop: caption and controls in one column at the bottom right, the words kept clear of it. Below 1100px:
   caption and dots in a band under the words; phones swipe and have no arrows. */
.film-car { --car-low:clamp(40px, 9vh, 96px); --car-col:340px; }
.film-car .film-in { pointer-events:none; } .film-car .film-words { pointer-events:auto; } /* the words lie over the slides */
.film-car .film-in { padding-bottom:var(--car-low); } /* stated here: from 1100px the .wrap shorthand would zero it, and the words must end where the controls do */
/* The words and the caption never overlap: when they need more than one screen (a short phone) the hero grows,
   and site.js pins it by its bottom edge instead of its top, so the page still slides over it. */
.film-car { height:auto; min-height:100svh; } .film-car .film-in { height:auto; min-height:100svh; }
.no-js .film-car { position:relative; }
.car { position:absolute; inset:0; z-index:0; }
.car-slides { position:absolute; inset:0; }
.car-slide { position:absolute; inset:0; opacity:0; visibility:hidden; }
.car-slide.is-on { opacity:1; visibility:visible; z-index:2; transition:opacity .9s var(--ease); }
.car-slide.was { opacity:1; visibility:visible; z-index:1; } /* the last one stays whole under the fade, so nothing shows through */
.car-slide:not(.is-on):not(.was) .film-media img { will-change:auto; }
/* legibility only: the film's two shades plus one along the bottom, under the caption */
.film-car .film-media::after { background:linear-gradient(180deg, rgba(255,252,246,.8) 0, rgba(255,252,246,0) 140px), linear-gradient(0deg, rgba(10,30,37,.62) 0, rgba(10,30,37,0) 42%), linear-gradient(15deg, rgba(10,30,37,.7) 0%, rgba(10,30,37,.3) 45%, rgba(10,30,37,0) 70%); }
.car-in, .car-ctrl { position:absolute; left:0; right:0; pointer-events:none; transform:translateY(calc(var(--p) * -70px)); opacity:calc(1 - var(--p) * 1.3); }
.car-in { bottom:calc(var(--car-low) + 64px); }
.car-ctrl { bottom:var(--car-low); z-index:3; }
.car-cap, .car-bar { pointer-events:auto; width:var(--car-col); margin-left:auto; }
.car-cap { display:grid; justify-items:start; gap:3px; padding-top:16px; border-top:1px solid rgba(255,255,255,.42); color:#fff; text-decoration:none; text-shadow:0 1px 14px rgba(10,30,37,.4); }
.car-cap .chip { margin-bottom:9px; text-shadow:none; }
.car-title { font:400 30px/1.1 var(--serif); letter-spacing:-.01em; text-wrap:balance; text-decoration:underline 1px transparent; text-underline-offset:5px; transition:text-decoration-color .25s; }
.car-cap:hover .car-title { text-decoration-color:currentColor; }
.car-where { font-size:14.5px; color:rgba(255,255,255,.84); }
.car-price { margin-top:5px; font-size:16.5px; font-weight:600; } .car-price small { font-size:14px; font-weight:400; color:rgba(255,255,255,.84); }
.car-cap:focus-visible { outline:2px solid #fff; outline-offset:8px; border-radius:2px; }
.car-bar { display:flex; align-items:center; gap:8px; }
.car-dots { display:flex; align-items:center; margin-right:auto; }
.car-dot { width:26px; height:44px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.car-dot::before { content:""; width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.5); transition:width .3s var(--ease), background-color .3s; }
.car-dot:hover::before { background:rgba(255,255,255,.85); } .car-dot[aria-current]::before { width:18px; background:#fff; }
.car-btn { flex:none; width:44px; height:44px; display:grid; place-items:center; padding:0; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); background:rgba(10,30,37,.2); color:#fff; cursor:pointer; transition:background-color .25s, border-color .25s; }
.car-btn:hover { background:rgba(255,255,255,.16); border-color:#fff; }
.car-btn:focus-visible, .car-dot:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.car-play .i-play, .car-play.is-paused .i-pause { display:none; } .car-play.is-paused .i-play { display:block; }
.no-js .car-ctrl { display:none; }
@media (min-width:1100px) { .film-car .film-words { max-width:min(720px, calc(100% - var(--car-col) - 40px)); } }
@media (max-width:1099px) {
  .film-car { --car-low:44px; } .film-car .film-in { padding-bottom:172px; } .film-car .film-down { display:none; } /* the page's sheet covers the last 32px */
  .car-in { bottom:calc(var(--car-low) + 50px); }
  .car-cap, .car-bar { width:auto; margin-left:0; }
  .car-cap { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding-top:12px; }
  .car-cap .chip { margin:0; font-size:11.5px; padding:4px 9px; }
  .car-title { flex:1 1 0; min-width:0; font-size:21px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .car-where { display:none; } .car-price { flex-basis:100%; margin:0; font-size:15px; }
}
@media (max-width:759px) { .car-prev, .car-next { display:none; } .car-btn { width:40px; height:40px; } }
@media (prefers-reduced-motion: reduce) { .car-slide.is-on, .car-dot::before, .car-btn, .car-title { transition:none; } .car-in, .car-ctrl { transform:none; opacity:1; } }

/* cards */
.grid.four { grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
@media (min-width:1100px) { .grid.four { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.card-media { border-radius:20px; }
.card-body { padding:14px 2px 0; display:grid; gap:3px; }
.card-body h3 { font:600 18px/1.3 var(--sans); letter-spacing:0; margin:0; }
.card-facts { display:flex; flex-wrap:wrap; gap:0 12px; color:var(--muted); font-size:14px; }
.card-facts span + span::before { content:"·"; margin-right:12px; color:rgba(17,52,64,.35); }
.card-price { font-size:17px; margin-top:6px !important; font-weight:700; }
.card-noimg { background:linear-gradient(135deg, var(--sand), #efe2c6); }
.chip { display:inline-block; font-size:12.5px; font-weight:700; border-radius:999px; padding:6px 11px; background:#fff; color:var(--ink); line-height:1.2; }
.card-media .chip { position:absolute; left:12px; top:12px; box-shadow:0 4px 14px rgba(10,30,37,.18); }
.chip-available { background:#e3f0e7; color:#14502a; } .chip-reserved { background:#fbf1d0; color:#6b5200; } .chip-rented { background:#fde6d8; color:#8a3a10; } .chip-off { background:#eceff1; color:#3f4b52; }
.card.is-rented .card-media img { filter:saturate(.55); opacity:.85; }
.rented-row { margin-top:64px; } .rented-row .block-head { align-items:baseline; margin-bottom:22px; } .rented-row h2 { font-size:34px; }
.grid.small { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:22px; } .grid.small .card-media { aspect-ratio:3/2; } .grid.small .card-facts { display:none; }

/* index head */
.page-head { background:var(--paper); padding:124px 0 8px; border-bottom:1px solid var(--line); }
.page-head h1 { font-size:clamp(40px, 5.4vw, 64px); } .page-head .lede { margin:10px 0 0; font-size:16.5px; }
.page-head .filters { padding:14px 0 18px; }

/* the assistant band */
.assistant { background:var(--sand); }
.assistant-in { display:grid; gap:36px; } @media (min-width:900px) { .assistant-in { grid-template-columns:minmax(0, 1fr) minmax(380px, 460px); gap:80px; align-items:center; } }
.assistant .lede { margin:16px 0 26px; color:#33505a; }
/* the example conversation: each question is a link that asks it on WhatsApp; the answers count the homes listed now */
.chat { display:grid; gap:10px; padding:18px; background:#fff; border-radius:22px; box-shadow:0 30px 60px -36px rgba(17,52,64,.45); }
.chat-head { display:flex; align-items:center; gap:10px; padding:0 4px 12px; border-bottom:1px solid var(--line); margin-bottom:4px; font-size:15px; }
.chat-head .dot { width:9px; height:9px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 3px rgba(20,122,60,.18); }
.chat-av { width:44px; height:44px; border-radius:50%; object-fit:cover; margin-right:2px; } .chat-av + .dot { margin-left:-16px; margin-top:26px; box-shadow:0 0 0 3px #fff; } .chat-head small { color:var(--muted); font-size:13px; margin-left:auto; }
.bub { max-width:88%; padding:11px 15px; border-radius:18px; font-size:15px; line-height:1.45; }
.bub.me { justify-self:end; background:var(--ink); color:#fff; border-bottom-right-radius:6px; text-decoration:none; transition:background .2s; } .bub.me:hover { background:#1c4d5e; }
.bub.ai { justify-self:start; background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:6px; display:grid; gap:10px; } .bub.ai p { margin:0; }
.mini { display:grid; grid-template-columns:96px minmax(0, 1fr); gap:12px; align-items:center; padding:6px; border-radius:12px; background:#fff; border:1px solid var(--line); text-decoration:none; }
.mini img, .mini .card-noimg { width:96px; height:72px; object-fit:cover; border-radius:8px; background:var(--sand); display:block; }
.mini span { display:grid; gap:1px; min-width:0; } .mini b { font:400 18px/1.15 var(--serif); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mini small { color:var(--muted); font-size:12.5px; } .mini strong { font-size:13.5px; } .mini strong small { font-weight:400; }
.chat-note { margin:6px 4px 0; font-size:13px; color:var(--muted); }
@media (max-width:759px) { .bub.ai, .chat-note { display:none; } .chat { padding:14px; } .bub.me { max-width:100%; } }

/* how it works, areas, owners */
.steps { display:grid; gap:20px; margin-top:30px; } @media (min-width:900px) { .steps { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.steps { gap:32px; margin-top:40px; }
.step { border-top:1px solid var(--ink); padding:22px 0 0; display:grid; gap:10px; align-content:start; }
.step h3 { font:400 26px/1.2 var(--serif); } .step p { margin:0; color:var(--muted); max-width:34ch; }
.num { font:italic 400 34px/1 var(--serif); color:var(--accent); margin-bottom:6px; }
/* areas: one photo tile each, taken from a home there */
.area-list { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
.tile { position:relative; display:block; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--sand); color:#fff; text-decoration:none; }
.tile img, .tile .card-noimg { width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); display:block; } .tile:hover img { transform:scale(1.05); }
.tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,30,37,0) 40%, rgba(10,30,37,.72) 100%); }
.tile-words { position:absolute; z-index:1; left:18px; right:18px; bottom:16px; display:grid; gap:2px; } .tile-words span { font:400 28px/1.1 var(--serif); }
.tile-words small { font-size:13px; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.areas-block .lede { margin-top:10px; }
@media (min-width:900px) { .area-list { grid-template-columns:repeat(min(var(--n, 4), 5), minmax(0, 1fr)); max-width:calc(min(var(--n, 4), 5) * 340px); gap:20px; } .tile { aspect-ratio:3/4; } }
.owners { background:var(--sand); } .owners .lede { margin-top:16px; color:#33505a; } .owner-cta { margin:0; } @media (min-width:900px) { .owner-cta { text-align:right; } }
.about .stats { display:flex; flex-wrap:wrap; gap:12px 44px; margin:26px 0 0; } .about .stats div { display:grid; } .about .stats dt { font:400 44px/1 var(--serif); color:#fff; } .about .stats dd { margin:4px 0 0; font-size:13.5px; color:rgba(255,255,255,.7); }
.about { border-radius:0; }

/* listing page */
.listing header .head-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.listing header .ref { font-size:13px; letter-spacing:.08em; color:var(--muted); margin:0; }
.listing header h1 { font-size:clamp(36px, 4.6vw, 58px); }
.facts { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:18px 24px; border:0; padding:0; }
.facts > div { border-top:1px solid var(--ink); padding:12px 0 0; }
.facts dt { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .facts dd { font-size:19px; font-weight:500; }
.description h2 { font-size:30px; margin-bottom:14px; } .more-text summary { cursor:pointer; color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; padding:8px 0; list-style:none; } .more-text summary::-webkit-details-marker { display:none; } .more-text[open] summary { display:none; }
.enquire { border-radius:26px; padding:28px; box-shadow:0 30px 60px -36px rgba(17,52,64,.45); }
.enquire .prices-side h2 { font:600 13px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.enquire .prices td { font-size:18px; }
.side-facts { margin:10px 0 4px; } .side-facts div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); } .side-facts dt { color:var(--muted); } .side-facts dd { margin:0; font-weight:600; text-align:right; }
.enquire .btn.ghost { margin-top:10px; }
.enquiry-more { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; } .enquiry-more summary { cursor:pointer; font-size:14.5px; color:var(--muted); list-style:none; } .enquiry-more summary::-webkit-details-marker { display:none; } .enquiry-more summary::after { content:" +"; color:var(--accent); font-weight:700; }
.fld { display:grid; gap:5px; font-size:14px; font-weight:600; } .fld small { font-weight:400; color:var(--muted); }
.similar { background:var(--sand); }
.gallery-wrap .more { border-radius:12px; }

/* ══ Desktop, 26 Sep 2026 ═══════════════════════════════════════════════════════════════════════
   Room to breathe at desktop widths: a wider column, three cards to a row, the newest home wide. */
@media (min-width:1100px) {
  .wrap { max-width:1360px; padding:0 40px; }
  .card-media { border-radius:14px; }
  .results .grid { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px 28px; }
  .grid.small { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .grid.four { gap:32px 28px; }
  .filters select, .filters label.check, .morefilters summary { padding-block:10px; font-size:14.5px; }
  .filters select { padding-right:34px; }
  .block-head { margin-bottom:40px; }
  .site-footer .cols { grid-template-columns:2fr 1fr 1fr 1.4fr; }
  .facts { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .gallery-wrap { max-width:1360px; padding:0 40px; }
  .listing { grid-template-columns:minmax(0, 1fr) 400px; gap:40px 96px; }
  .film h1 { font-size:clamp(64px, 6.6vw, 104px); }
}
/* the newest home: photo left, the words beside it; a phone gets it as the first card instead */
.feature { display:none; }
@media (min-width:900px) {
  .phone-only { display:none; }
  .feature { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:0; margin-bottom:44px; text-decoration:none; color:var(--ink); border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line); }
  .feature-media { position:relative; aspect-ratio:3/2; background:var(--sand); overflow:hidden; } .feature-media img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
  .feature:hover .feature-media img { transform:scale(1.04); } .feature-media .chip { position:absolute; left:16px; top:16px; box-shadow:0 4px 14px rgba(10,30,37,.18); }
  .feature-body { display:grid; align-content:center; gap:8px; padding:clamp(28px, 3.4vw, 52px); }
  .feature-body h3 { font-size:clamp(30px, 2.8vw, 40px); } .feature-body .muted { margin:0; }
  .feature-text { color:var(--muted); margin:8px 0 6px; max-width:48ch; font-size:16px; }
  .feature-body .card-facts { font-size:15px; } .feature-price { font-size:22px; font-weight:700; margin:6px 0 10px; } .feature-price small { font-weight:400; color:var(--muted); font-size:15px; }
  .feature-body .btn { justify-self:start; }
}

/* index head on desktop: one white search bar like the home page's, labelled fields, the rest as quiet pills.
   Below 1100px the labels vanish and each field is a pill, as on a phone. */
.ff { display:contents; } .ff span { display:none; }
@media (min-width:1100px) {
  .page-head { padding:130px 0 0; border-bottom:0; }
  .page-head .ph-row { display:flex; align-items:end; justify-content:space-between; gap:24px; }
  .page-head h1 { font-size:clamp(48px, 5vw, 72px); } .page-head .lede { margin:0 0 10px; font-size:17px; }
  .page-head .filters { margin-top:30px; padding:8px; gap:0; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 50px -34px rgba(17,52,64,.45); align-items:stretch; }
  .page-head .seg { border:0; background:var(--sand); align-self:center; margin:0 10px 0 2px; } .page-head .seg a:not(.on):hover { background:rgba(255,255,255,.7); }
  .ff { display:flex; flex-direction:column; gap:1px; padding:8px 18px; border-left:1px solid var(--line); min-width:0; flex:1 1 0; }
  .ff span { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .page-head .filters .ff select { border:0; border-radius:0; background-color:transparent; background-position:right 2px center; padding:2px 22px 2px 0; font-size:15.5px; max-width:none; width:100%; }
  .page-head .filters .ff select:focus-visible { outline-offset:4px; border-radius:6px; }
  .page-head .filters label.check { border:0; background:transparent; align-self:center; border-left:1px solid var(--line); border-radius:0; padding:8px 18px; }
  .page-head .morefilters { align-self:center; margin-left:auto; } .page-head .morefilters summary { border:0; background:var(--sand); padding:10px 18px; }
  .page-head .morefilters[open] summary, .page-head .morefilters[data-active] summary { background:var(--ink); color:#fff; } .page-head .morefilters[data-active] summary b { background:#fff; color:var(--ink); }
  .page-head .active-filters { margin-top:14px; } .page-head .wrap::after { content:""; display:block; height:22px; }
  .results .toolbar { margin:8px 0 26px; }
}