/* One Caribbean Estates — public site
   Direction: Aman × Christie's × Four Seasons × Knight Frank × Apple × Stripe.
   Calm, minimal, editorial luxury. Palette: ink / white / warm bone / restrained gold. */

:root {
  /* The site is light by design and has no dark palette. Saying so is not
     decoration: without it a phone in dark mode renders every native
     control - the Location, Budget, Bedrooms and Sort dropdowns - in the
     OS's dark styling on a cream page, and Chrome on Android may apply
     its Auto Dark Theme and algorithmically invert the whole thing.
     Declaring the scheme opts out of both. */
  color-scheme: only light;

  /* The browser paints its own controls with an accent colour, and left to
     itself that colour is blue: the highlighted row in the Location, Budget,
     Bedrooms and Sort dropdowns, the tick in a checkbox, the text you drag
     over. None of it is ours, and all of it appears on a cream page beside
     sand and gold. Naming the accent once here settles every native control
     on the site.

     iOS draws its picker itself and ignores this. The only way to control
     that one is to stop using a native <select>, which costs more than the
     blue does. */
  accent-color: var(--gold-deep);

  --ink: #191713;
  --ink-2: #2c2823;
  --bg: #ffffff;
  --bone: #f6f3ee;
  --bone-2: #efe9e0;
  --stone: #e6ded2;
  --line: #e8e1d5;
  --gold: #c9a875;
  --gold-deep: #a8875a;
  --muted: #857c6f;
  --muted-2: #a49a8b;
  --dark: #14130f;
  --dark-2: #1d1b16;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wrap: min(1240px, 90vw);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }
.wrap { width: var(--wrap); margin: 0 auto; }

/* ── Type primitives ── */
.eyebrow {
  font-size: 0.68rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500;
}
.eyebrow.light { color: var(--gold); }
.sec-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400; font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08; letter-spacing: -0.01em; margin-top: 1rem;
  text-wrap: balance;
}
.sec-head { max-width: 46rem; margin-bottom: 3.5rem; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.split { display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; max-width: none; }
.sec-note { color: var(--muted); max-width: 22rem; font-size: 0.98rem; }
.sec-note.light { color: rgba(255,255,255,0.66); }
.sec-cta { margin-top: 3rem; }
.link-underline {
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--gold); padding-bottom: 4px;
  transition: color 0.3s, border-color 0.3s;
}
.dark .link-underline { color: #fff; }
.link-underline:hover { color: var(--gold-deep); }

/* ── Mega-menu ── */
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.18);
  max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease);
}
.mega.open { max-height: 460px; }
.mega-inner {
  width: var(--wrap); margin: 0 auto; padding: 3rem 0 3.4rem;
  display: none; grid-template-columns: 0.8fr 1.2fr; gap: 4rem;
}
.mega-inner.show { display: grid; }
.mega-lead .eyebrow { color: var(--gold-deep); }
.mega-lead p {
  font-family: "Cormorant Garamond", serif; font-size: 1.6rem; font-weight: 400;
  line-height: 1.25; margin-top: 1rem; color: var(--ink); max-width: 18rem;
}
.mega-links { list-style: none; columns: 2; column-gap: 3rem; }
.mega-links.three { columns: 3; }
.mega-links li { break-inside: avoid; margin-bottom: 0.9rem; }
.mega-links a {
  font-size: 0.9rem; color: var(--ink-2); letter-spacing: 0.02em;
  border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 0.25s, border-color 0.25s;
}
.mega-links a:hover { color: var(--gold-deep); border-color: var(--gold); }

/* ── Mobile drawer ── */
.drawer { position: fixed; inset: 0; z-index: 90; background: rgba(255,255,255,0.99); backdrop-filter: blur(10px); display: grid; place-items: center; }
.drawer[hidden] { display: none; }
.drawer nav { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
.drawer a { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; color: var(--ink); }
.drawer .d-enquire { color: var(--gold-deep); }

/* ── Hero ── */
.hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero-stage { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease;
}
.hero-slide.on { opacity: 1; animation: kb 8s linear forwards; }
@keyframes kb { to { transform: scale(1); } }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,14,11,0.78), rgba(15,14,11,0.15) 42%, rgba(15,14,11,0.4)); }
.hero-copy { position: relative; z-index: 2; width: var(--wrap); margin: 0 auto; padding-bottom: 8vh; }
.hero-h {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(3rem, 8vw, 7rem); line-height: 1.02; letter-spacing: -0.02em;
  margin: 1.2rem 0 0; text-wrap: balance;
}
.hero-h em { color: var(--gold); font-weight: 400; }
.hero-sub { max-width: 30rem; margin-top: 1.6rem; font-size: 1.1rem; color: rgba(255,255,255,0.8); }
.hero-scroll { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 3rem; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.hero-scroll i { display: block; width: 46px; height: 1px; background: var(--gold); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; position: absolute; left: -46px; top: 0; width: 46px; height: 100%; background: #fff; animation: slide 2.4s var(--ease) infinite; }
@keyframes slide { to { left: 46px; } }

/* ── Statement ── */
.statement { padding: 8rem 0; }
.lede {
  font-family: "Cormorant Garamond", serif; font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.35; letter-spacing: -0.005em;
  max-width: 44rem; margin: 0 auto; text-align: center; text-wrap: balance;
}
.lede em { color: var(--gold-deep); font-style: italic; }

/* ── Section base ── */
.section { padding: 7rem 0; }
.section.dark { background: var(--dark); color: #fff; }
.section.bone { background: var(--bone); }
.section.dark .sec-title { color: #fff; }

/* ── Divisions ── */
.div-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.div-card { background: var(--bg); padding: 2.6rem 2.2rem 2.4rem; display: flex; flex-direction: column; min-height: 260px; transition: background 0.4s var(--ease); position: relative; }
.div-card:hover { background: var(--bone); }
.dc-no { font-family: "Cormorant Garamond", serif; font-size: 0.95rem; color: var(--gold-deep); letter-spacing: 0.1em; }
.div-card h3 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 1.7rem; margin: 0.7rem 0 0.7rem; }
.div-card p { color: var(--muted); font-size: 0.94rem; flex: 1; }
.dc-go { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-top: 1.4rem; opacity: 0; transform: translateX(-6px); transition: all 0.35s var(--ease); }
.div-card:hover .dc-go { opacity: 1; transform: none; }

/* ── Feature (properties) ── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.p-card { cursor: pointer; }
.p-media { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--bone);
  /* Up-and-down stays the page's; sideways reaches the swipe handler. Set
     here rather than fought over in JS, so a list can never become
     unscrollable because a finger landed on a photograph. */
  touch-action: pan-y; }
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.p-card:hover .p-media img { transform: scale(1.05); }
.p-noimg { width: 100%; height: 100%; background: linear-gradient(140deg, var(--bone) 0%, var(--stone) 100%); position: relative; }
.p-noimg::after {
  content: ""; position: absolute; inset: 0; background-color: var(--gold-deep); opacity: 0.16;
  -webkit-mask: url("assets/oce-monogram.webp") center / 64px no-repeat;
  mask: url("assets/oce-monogram.webp") center / 64px no-repeat;
}
.exp-media .p-noimg::after { opacity: 0.28; background-color: var(--gold); }
.p-badge { position: absolute; top: 1rem; left: 1rem; background: rgba(20,19,15,0.7); backdrop-filter: blur(4px); color: #fff; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 0.7rem; }
.p-badge.rental { background: rgba(201,168,117,0.92); color: var(--ink); }
/* Opposite corner from For Sale / For Rent so the two never overlap, and a
   distinct colour: the position is information, not decoration. */
.p-badge.uo { left: auto; right: 1rem; background: rgba(122,58,42,0.88); color: #fff; }
.p-info { padding: 1.3rem 0.2rem 0; }
.p-loc { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.p-name { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 500; margin: 0.4rem 0 0.5rem; line-height: 1.15; }
.p-meta { display: flex; gap: 1.2rem; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.8rem; margin-top: 0.9rem; }
/* Lining, tabular figures.
 *
 * Cormorant Garamond's default numerals are old-style: six of the ten digits
 * hang below the baseline (3 4 5 6 7 9) and their widths run from 332 to 489
 * units — a 47% spread, so no two prices line up and every figure sits at a
 * different height. Handsome in a paragraph, genuinely hard to read as a
 * price, which is what was being reported.
 *
 * The font already carries `lnum` and `tnum`; they were simply never asked
 * for. Nothing else about the type changes. */
.p-price { font-family: "Cormorant Garamond", serif; font-size: 1.4rem; color: var(--ink);
  font-variant-numeric:lining-nums tabular-nums; }
.p-price .per { font-family: "Inter"; font-size: 0.78rem; color: var(--muted); font-weight: 300; }
.dark .p-name, .dark .p-price { color: #fff; }
.dark .p-meta { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.14); }

/* ── Experiences ── */
.exp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.exp-card { cursor: pointer; }
.exp-media { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.exp-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.exp-card:hover .exp-media img { transform: scale(1.05); }
.exp-media .exp-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,8,0.8), transparent 55%); }
.exp-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; }
.exp-cap .p-loc { color: var(--gold); }
.exp-cap h3 { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; font-weight: 500; color: #fff; margin: 0.3rem 0; }
.exp-cap .rate { font-size: 0.85rem; color: rgba(255,255,255,0.82); }

/* ── Intelligence ── */
.intel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.intel-card { border: 1px solid var(--line); padding: 2.2rem 2rem 2.4rem; display: flex; flex-direction: column; min-height: 240px; transition: border-color 0.35s, transform 0.35s var(--ease); }
.intel-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.ic-tag { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.intel-card h3 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 1.6rem; margin: 0.9rem 0 0.7rem; }
.intel-card p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.ic-meta { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--muted-2); margin-top: 1.4rem; }

/* ── Advisory ── */
.adv-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.adv-lead p { color: var(--muted); margin: 1.4rem 0 2rem; max-width: 26rem; }
.btn-ghost { display: inline-block; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 0.9rem 1.8rem; transition: all 0.3s; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.adv-list { list-style: none; columns: 2; column-gap: 2.5rem; }
.adv-list li { break-inside: avoid; padding: 0.9rem 0; border-bottom: 1px solid var(--stone); font-size: 0.96rem; color: var(--ink-2); }

/* ── Partners / Press ── */
.partner-row, .press-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3.5rem; margin-top: 1rem; }
.partner-row span, .press-row span {
  font-family: "Cormorant Garamond", serif; font-size: 1.35rem; color: var(--muted);
  letter-spacing: 0.02em; transition: color 0.3s;
}
.partner-row span:hover, .press-row span:hover { color: var(--ink); }

/* ── House ── */
.house-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.house-copy p { color: rgba(255,255,255,0.72); margin-top: 1.4rem; max-width: 30rem; }
.house-figure { aspect-ratio: 4/5; background-size: cover; background-position: center; background-color: #222; }

/* ── Contact ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
.contact-copy p { color: var(--muted); margin-top: 1.3rem; }
.contact-lines { list-style: none; margin-top: 2.2rem; display: grid; gap: 1.3rem; }
.contact-lines li { font-size: 0.98rem; color: var(--ink-2); }
.contact-lines li span { display: block; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.25rem; }
.contact-lines a:hover { color: var(--gold-deep); }
.contact-form { border: 1px solid var(--line); padding: 2.4rem; }
.field { margin-bottom: 1.3rem; }
.field label { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--muted-2); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85rem 0; border: none; border-bottom: 1px solid var(--stone);
  font-family: inherit; font-size: 0.98rem; color: var(--ink); background: transparent;
  transition: border-color 0.3s;
}
.field select { padding: 0.7rem 0; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; }
.btn-dark { width: 100%; margin-top: 0.6rem; background: var(--ink); color: #fff; border: none; cursor: pointer; padding: 1.1rem; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.3s; }
.btn-dark:hover { background: #000; }
.form-note { margin-top: 1rem; font-size: 0.86rem; min-height: 1.2rem; }
.form-note.ok { color: #3f7d54; }
.form-note.err { color: #b4453a; }

/* ── Footer ── */
.foot { background: var(--dark); color: rgba(255,255,255,0.66); padding: 5rem 0 2.5rem; }
.foot-top { display: grid; grid-template-columns: 1fr 2.4fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.foot-brand .brand-mark { width: 54px; height: 41px; margin-bottom: 1.2rem; }
.foot-tag { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.foot-cols h4 { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; font-weight: 500; }
.foot-cols a { display: block; font-size: 0.86rem; color: rgba(255,255,255,0.6); margin-bottom: 0.6rem; transition: color 0.25s; }
.foot-cols a:hover { color: var(--gold); }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: 0.76rem; color: var(--muted-2); }

/* ── Modal ── */
.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(15,14,11,0.74); backdrop-filter: blur(5px); }
.modal-panel { position: relative; z-index: 2; width: min(940px, 94vw); max-height: 90vh; background: #fff; overflow: hidden auto; box-shadow: 0 50px 100px -30px rgba(0,0,0,0.6); animation: mIn 0.45s var(--ease); }
@keyframes mIn { from { opacity: 0; transform: translateY(18px); } }
.modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 5; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--ink); font-size: 1.5rem; cursor: pointer; }
.modal-hero { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: var(--bone); }
.modal-hero.p-noimg { height: auto; }
.modal-hero.p-noimg::after { -webkit-mask-size: 110px; mask-size: 110px; }
.modal-content { padding: 2.4rem 2.6rem 2.8rem; }
.modal-loc { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.modal-name { font-family: "Cormorant Garamond", serif; font-size: 2.2rem; font-weight: 500; margin: 0.4rem 0; }
.modal-price { font-family: "Cormorant Garamond", serif; font-size: 1.7rem; color: var(--ink); margin-bottom: 1.4rem;
  font-variant-numeric:lining-nums tabular-nums; }
.modal-specs { display: flex; gap: 2.6rem; padding: 1.4rem 0; border-block: 1px solid var(--line); margin-bottom: 1.4rem; }
.modal-specs .v { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; }
.modal-specs .k { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 0.2rem; }
.modal-desc { color: var(--muted); white-space: pre-line; }
.modal-amenities { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.modal-amen-title { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.8rem; }
.amen-chip { display: inline-block; margin: 0 0.5rem 0.5rem 0; padding: 0.42rem 0.85rem; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink); background: var(--bone); border: 1px solid var(--line); }
.modal-links { margin-top: 1.4rem; display: flex; gap: 1.6rem; }
.modal-link { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 0.15rem; }
.modal-link:hover { color: var(--ink); border-color: var(--ink); }
.modal-actions { margin-top: 1.8rem; display: flex; gap: 1.2rem; align-items: center; }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide.on { animation: none; transform: scale(1); }
  .hero-scroll i::after { animation: none; }
}

/* ── Sub-pages (portfolio / journal) ── */
body.sub { padding-top: 0; }
.sub-hero { padding: 9.5rem 0 3rem; background: var(--bone); border-bottom: 1px solid var(--line); }
.sub-h { font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; margin-top: 0.8rem; }
.sub-lede { color: var(--muted); max-width: 34rem; margin-top: 1rem; font-size: 1.02rem; }

.filterbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.filterbar-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1rem 0 0.7rem; flex-wrap: wrap; }
.filterbar-controls { display: flex; gap: 1rem; align-items: flex-end; padding: 0.4rem 0 1rem; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 0.2rem; padding-top: 1rem; }
.fb-field { display: flex; flex-direction: column; gap: 0.35rem; }
.fb-field span { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.fb-field select { padding: 0.6rem 2rem 0.6rem 0.8rem; border: 1px solid var(--line); font-family: inherit; font-size: 0.86rem; background: #fff; cursor: pointer; min-width: 150px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.fb-field select:focus { outline: none; border-color: var(--gold); }
.fb-clear { align-self: flex-end; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0.7rem 0.3rem; transition: color 0.25s; }
.fb-clear:hover { color: var(--gold-deep); }
.tabs { display: flex; gap: 0.4rem; }
.tabs button { background: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 0.55rem 1.1rem; border-radius: 1px; transition: all 0.25s; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); border-color: var(--gold); }
.fb-right { display: flex; gap: 0.8rem; align-items: center; flex: 1; justify-content: flex-end; }
.fb-search { flex: 1; max-width: 320px; padding: 0.7rem 1rem; border: 1px solid var(--line); font-family: inherit; font-size: 0.9rem; background: #fff; }
.fb-search:focus { outline: none; border-color: var(--gold); }
.fb-sort { padding: 0.7rem 0.9rem; border: 1px solid var(--line); font-family: inherit; font-size: 0.85rem; background: #fff; cursor: pointer; }
.fb-sort:focus { outline: none; border-color: var(--gold); }
.port-count { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.card-grid .p-card { cursor: pointer; }
.card-grid .p-price .per { font-family: "Inter"; font-size: 0.78rem; color: var(--muted); }
.empty { color: var(--muted); font-style: italic; padding: 2rem 0; }
/* The hero pages in place, the same way the listing page does. The stage is
   what the arrows and the counter position against. */
.modal-stage { position: relative; }
.modal-stage .stage-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.86); backdrop-filter: blur(6px);
  color: var(--ink); font-size: 1.4rem; line-height: 1;
  opacity: 0; transition: opacity 0.5s cubic-bezier(.16,.72,.26,1),
                          background 0.5s cubic-bezier(.16,.72,.26,1);
}
.modal-stage:hover .stage-nav,
.modal-stage .stage-nav:focus-visible { opacity: 1; }
/* A touch screen has no hover to reveal them with. */
@media (hover: none) { .modal-stage .stage-nav { opacity: 1; } }
.modal-stage .stage-nav:hover { background: #fff; }
.modal-stage .stage-nav.prev { left: 16px; }
.modal-stage .stage-nav.next { right: 16px; }
.modal-stage .stage-count {
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  margin: 0; z-index: 3; pointer-events: none;
  color: rgba(255,255,255,0.92); font-size: 0.66rem; letter-spacing: 0.22em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
/* Saving from the preview, which is where somebody decides they like it. */
.modal-fav {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: none; border: 0; padding: 0.6rem 0; cursor: pointer;
  font: inherit; font-size: 0.64rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  transition: color 0.5s cubic-bezier(.16,.72,.26,1);
}
.modal-fav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.modal-fav:hover { color: var(--ink); }
.modal-fav.on { color: var(--gold-deep); }
.modal-fav.on svg { fill: currentColor; stroke: currentColor; }
.modal-fav:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.modal-gallery { display: flex; gap: 0.4rem; padding: 0.5rem; background: var(--bone); overflow-x: auto; }
.modal-gallery img { height: 62px; width: 90px; object-fit: cover; cursor: pointer; opacity: 0.65; flex: 0 0 auto; transition: opacity 0.2s; }
.modal-gallery img:hover, .modal-gallery img.active { opacity: 1; outline: 2px solid var(--gold); }

/* Journal */
.journal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.j-card { background: #fff; padding: 2.6rem 2.4rem; cursor: pointer; display: flex; flex-direction: column; min-height: 250px; transition: background 0.35s; }
.j-card:hover { background: var(--bone); }
.j-card.featured { grid-column: 1 / -1; }
.j-card h3 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 1.8rem; margin: 0.8rem 0 0.7rem; line-height: 1.12; }
.j-card.featured h3 { font-size: 2.4rem; max-width: 22ch; }
.j-card p { color: var(--muted); flex: 1; font-size: 0.96rem; max-width: 44ch; }
.j-read { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-top: 1.4rem; }

/* Reader overlay */
.reader { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; }
.reader[hidden] { display: none; }
.reader-scrim { position: absolute; inset: 0; background: rgba(15,14,11,0.7); backdrop-filter: blur(5px); }
.reader-panel { position: relative; z-index: 2; width: min(760px, 94vw); max-height: 94vh; margin: 3vh 0; background: #fff; overflow: hidden auto; box-shadow: 0 50px 100px -30px rgba(0,0,0,0.6); animation: mIn 0.45s var(--ease); }
.reader-head { padding: 3.4rem 3.6rem 1.5rem; border-bottom: 1px solid var(--line); }
.reader-head h1 { font-family: "Cormorant Garamond", serif; font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0.8rem 0; text-wrap: balance; }
.reader-dek { color: var(--muted); font-size: 1.05rem; }
.reader-body { padding: 2.4rem 3.6rem 3.4rem; }
.reader-body h2 { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 1.6rem; margin: 2.2rem 0 0.8rem; }
.reader-body p { color: var(--ink-2); font-size: 1.05rem; line-height: 1.85; margin-bottom: 1.2rem; max-width: 62ch; }
.reader-cta { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.reader-cta p { color: var(--muted); margin-bottom: 1.2rem; }
@media (max-width: 720px) { .reader-head, .reader-body { padding-inline: 1.6rem; } .journal-grid { grid-template-columns: 1fr; } }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .div-grid, .feature-grid, .exp-grid, .intel-grid { grid-template-columns: repeat(2, 1fr); }
  .adv-wrap, .house-grid, .contact-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .foot-top { grid-template-columns: 1fr; }
  .sec-head.split { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 720px) {
  .nav, .hdr-enquire { display: none; }
  .hdr-burger { display: flex; }
  .div-grid, .feature-grid, .exp-grid, .intel-grid, .foot-cols, .adv-list, .mega-links { grid-template-columns: 1fr; columns: 1; }
  .section { padding: 4.5rem 0; }
  .statement { padding: 5rem 0; }
  .hero-copy { padding-bottom: 12vh; }
}


/* Category tabs — a second, quieter row under the intent tabs. Built from
   the data, so a category with nothing in it never appears. */
.cat-row{padding-top:0;flex-wrap:wrap;gap:8px}
.tabs.cats{flex-wrap:wrap;gap:8px}
.tabs.cats button{
  background:transparent;border:1px solid var(--line);border-radius: 2px;
  padding:7px 15px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;transition:.2s}
.tabs.cats button:hover{color:var(--ink);border-color:var(--gold)}
.tabs.cats button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabs.cats button .n{opacity:.55;margin-left:6px;font-size:.62rem}


/* Map of the current results. Collapsed by default: most visitors are
   scanning the grid, and a 420px map above it pushes the listings off
   screen on a laptop. */
.map-wrap{width:min(1240px,92vw);margin:0 auto 26px}
.map-toggle{background:transparent;border:1px solid var(--line);border-radius: 2px;
  padding:8px 18px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;transition:.2s}
.map-toggle:hover{color:var(--ink);border-color:var(--gold)}
.map-toggle[aria-expanded="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.map-note{display:inline-block;margin-left:12px;font-size:.72rem;color:var(--muted)}
#map{height:min(66vh,620px);margin-top:14px;border-radius:2px;border:1px solid var(--line);z-index:0}

/* OpenStreetMap's own tiles are drawn for legibility, not for a page with a
   muted palette: motorways in orange and pink retail blocks fight everything
   around them. Desaturating and lifting them slightly leaves the geography
   readable while letting the map sit inside the page rather than shout from
   it. Applied to the tiles alone so the marker and its shadow keep their
   colour. Costs nothing and needs no basemap account. */
.leaflet-tile-pane{filter:saturate(.42) contrast(.92) brightness(1.06)}

.leaflet-popup-content{font-family:"Inter",system-ui,sans-serif;font-size:.82rem;margin:10px 12px}
.leaflet-popup-content .mp-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.1rem;display:block}
.leaflet-popup-content .mp-price{color:var(--gold);display:block;margin-top:2px}
.leaflet-popup-content a{color:var(--ink)}

/* A nightly rate beside a sale price is meaningless without the period. */
.grid .price .per{font-size:.62em;letter-spacing:.1em;text-transform:uppercase;opacity:.6}


/* Price pins — reading the market at a glance beats clicking pin by pin. */
.price-pin{background:none;border:0}
.price-pin span{
  display:inline-block;white-space:nowrap;transform:translate(-50%,-50%);
  background:var(--ink);color:#fff;font-family:"Inter",system-ui,sans-serif;
  font-size:.7rem;font-weight:500;letter-spacing:.02em;padding:5px 9px;
  border-radius: 2px;box-shadow:0 2px 8px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.85);transition:transform .12s ease,background .12s ease}
.price-pin span:hover{background:var(--gold);color:#1a1509;transform:translate(-50%,-50%) scale(1.08);z-index:900}
.leaflet-marker-icon.price-pin{width:auto!important;height:auto!important;margin:0!important}

/* Cluster bubbles in the brand palette. MarkerCluster.Default.css loads
   after this file, so its green has to be beaten on specificity. */
.leaflet-container .marker-cluster,
.leaflet-container .marker-cluster-small,
.leaflet-container .marker-cluster-medium,
.leaflet-container .marker-cluster-large{background:rgba(184,147,90,.30)}
.leaflet-container .marker-cluster div,
.leaflet-container .marker-cluster-small div,
.leaflet-container .marker-cluster-medium div,
.leaflet-container .marker-cluster-large div{
  background:var(--ink);color:#fff;font-family:"Inter",system-ui,sans-serif;
  font-weight:500;font-size:.74rem;border:1px solid rgba(255,255,255,.7)}

.leaflet-popup-content{width:210px!important}
.leaflet-popup-content .mp-img{width:100%;height:110px;object-fit:cover;border-radius:2px;margin-bottom:8px;display:block}
.leaflet-popup-content .mp-loc{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:2px}


/* Hover sync: the card and its pin light up together, so scanning the list
   tells you where each property actually is. */
.price-pin.is-hot span{background:var(--gold);color:#1a1509;transform:translate(-50%,-50%) scale(1.14);z-index:1000}
.p-card.is-hot{box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
.p-card.is-hot .p-media img{transform:scale(1.04)}


/* Card galleries — stacked images, one visible, arrows on hover. */
.p-media{position:relative;overflow:hidden}
.p-media .p-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease}
.p-media .p-shot.on{opacity:1;position:relative}
.p-noimg{width:100%;aspect-ratio:3/2;background:linear-gradient(135deg,#efe9e0,#e5ddd0)}
.p-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:#191713;font-size:1.15rem;line-height:1;
  opacity:0;transition:opacity .2s ease,background .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.2)}
.p-nav.prev{left:10px}.p-nav.next{right:10px}
.p-card:hover .p-nav{opacity:1}
.p-nav:hover{background:#fff}
.p-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:5px}
.p-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)}
.p-dots i.on{background:#fff}
@media (hover:none){.p-nav{opacity:.85}}

/* Seasonal rates — a villa is not one price. */
.p-price .from,.modal-price .from{font-size:.62em;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
table.rates{width:100%;border-collapse:collapse;margin:14px 0 4px;font-size:.86rem}
table.rates caption{text-align:left;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding-bottom:8px}
table.rates th{text-align:left;font-weight:500;padding:7px 0;border-bottom:1px solid var(--line);width:34%}
table.rates td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink)}
table.rates td.wk{color:var(--muted);text-align:right}

/* The card's crawlable link. Covers the card so the whole tile is clickable
   and "open in new tab" works, without wrapping block content in an <a>. */
.p-card{position:relative}
.p-card .p-link{position:absolute;inset:0;z-index:2;text-indent:-9999px;overflow:hidden}
.p-card .p-nav,.p-card .p-dots{z-index:4}
/* This is the one thing a visitor is meant to do from the quick view - the
   panel is a preview, and everything worth reading (the full description,
   the rates, the location, the enquiry form) is on the other side of it.
   It spent its life as a .68rem underlined caption between the price and the
   specs, which is where the eye is least likely to be. Given the same gold
   the site uses for every other primary action, it now reads as the way out
   of the panel rather than a footnote inside it. */
.modal-full{display:inline-flex;align-items:center;gap:.7em;
  margin:20px 0 6px;padding:14px 26px;border-radius:2px;
  background:var(--gold);color:#1a1509;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  text-decoration:none;border:1px solid var(--gold);
  transition:background .28s cubic-bezier(.22,1,.36,1),color .28s,transform .28s}
/* The arrow lives in CSS so the label stays a plain string in the markup,
   and it steps forward on hover - the same nudge the collection cards use. */
.modal-full::after{content:"\2192";font-size:1.05em;line-height:1;
  transition:transform .28s cubic-bezier(.22,1,.36,1)}
.modal-full:hover{background:transparent;color:var(--gold-deep)}
.modal-full:hover::after{transform:translateX(4px)}
.modal-full:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
/* On a phone the panel is the whole screen; a full-width bar is easier to
   hit than a pill floating mid-column. */
@media (max-width:620px){
  .modal-full{display:flex;justify-content:center;width:100%}
}



/* ---------------------------------------------------------------------------
   The listing pages on a phone.

   Two faults, both from rules that were written once for a desktop and never
   given a breakpoint.

   The filter bar was 535px tall on an 844px screen — a search field, a
   category row that wrapped to three lines, and four dropdowns each stacked
   on their own line because of a 150px min-width. It is `position: sticky`,
   so that 63% of the screen never scrolled away and the properties behind it
   were effectively unreachable.

   The card grid was `repeat(3, 1fr)` at every width. On a 390px phone that
   is a 148px card holding a 99px-tall photograph, with a 123px "Holiday
   Rental" badge across it — the badge covering 83% of the card. The badge was
   never too big; the photographs were far too small.
--------------------------------------------------------------------------- */

/* Two across on a tablet, one on a phone. A luxury listing is sold on its
   photograph, and a 148px-wide one sells nothing. */
@media (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 720px) {
  .card-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* The filter panel folds away on anything short or narrow.

   Width alone is not the test. A phone held sideways is 844x390 — wide
   enough to miss a 720px rule, and only 390px tall, where the full bar
   leaves almost nothing for the properties. So this keys on either. */
.fb-toggle { display: none; }

@media (max-width: 900px), (max-height: 560px) {
  /* Let the filters scroll away. Pinning them made sense at a desktop height
     of 90px; at 535px it takes the page hostage. */
  .filterbar { position: static; }

  .filterbar-row { padding: 0.9rem 0 0.6rem; gap: 0.7rem; }
  .fb-search { max-width: none; width: 100%; }

  /* One swipeable row instead of three wrapped ones. The scrollbar is hidden
     because the row is obviously scrollable from the clipped last chip. */
  .cat-row { padding-bottom: 0.7rem; }
  /* No scroll-snap. With `proximity` and a snap point on every chip, the
     nearest point to a small drag is the one you started from, so the strip
     sprang back to the left and would not scroll at all — including when
     the chevron asked it to. Chips are not pages; they do not need snapping. */
  .tabs.cats {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tabs.cats::-webkit-scrollbar { display: none; }
  .tabs.cats button { flex: 0 0 auto; }

  /* The four dropdowns fold away behind a button. Most visitors search or
     tap a category; the ones who want to filter by budget ask for it. */
  .fb-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin: 0 0 0.9rem; padding: 0.75rem 0.9rem;
    background: none; border: 1px solid var(--line); border-radius: 2px;
    font-family: inherit; font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink); cursor: pointer;
  }
  .fb-toggle .fb-caret { transition: transform 0.25s; font-size: 0.8rem; }
  .fb-toggle[aria-expanded="true"] .fb-caret { transform: rotate(180deg); }
  /* The count of filters actually in use, so a collapsed panel can never
     hide the reason a list looks short. */
  .fb-toggle .fb-count {
    margin-left: auto; margin-right: 0.6rem; padding: 0.1rem 0.45rem;
    background: var(--ink); color: #fff; border-radius: 999px;
    font-size: 0.62rem; letter-spacing: 0.06em;
  }
  .fb-toggle .fb-count:empty { display: none; }

  .filterbar-controls {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem; padding: 0 0 1rem; margin: 0; border-top: 0;
  }
  .filterbar.filters-open .filterbar-controls { display: grid; }
  .fb-field { min-width: 0; }
  .fb-field select { min-width: 0; width: 100%; }
  .fb-clear { grid-column: 1 / -1; justify-self: start; padding-left: 0; }
}


/* --- Show more ------------------------------------------------------------
   Rendering all 353 at once is a scroll nobody finishes and a page that
   fetches every first photograph before anyone asks. Twenty-four at a time.
   The label carries no number, deliberately: see the note in portfolio.js. */
.load-more {
  display: block; margin: 3rem auto 0; padding: 0.95rem 2.6rem;
  background: none; border: 1px solid var(--ink); border-radius: 2px;
  font-family: inherit; font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink); cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.load-more:hover { background: var(--ink); color: #fff; }
.load-more[hidden] { display: none; }

/* --- The category strip tells you it continues ----------------------------
   A row that scrolls with nothing to say so is a row whose contents do not
   exist as far as most people are concerned: you see "All, Villas,
   Apartments" and half of "Townhouses" and no reason to think Beachfront or
   Marina are there at all.

   So it says so twice — a fade where the list carries on, and a chevron you
   can press. Pressing matters as much as the fade: an affordance you can only
   act on by guessing the right gesture is still half hidden. Both appear only
   on the side that has more, and both go at the end.

   Built from real elements rather than ::before/::after on the row, which
   would not take the opacity change and sat against the row's padding
   instead of the chips. */
.cat-scroll { position: relative; }

.cat-fade {
  position: absolute; top: 0; bottom: 0; width: 52px;
  pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 2;
}
.cat-fade.left  { left: 0;  background: linear-gradient(to right, #fff 25%, rgba(255,255,255,0)); }
.cat-fade.right { right: 0; background: linear-gradient(to left,  #fff 25%, rgba(255,255,255,0)); }
.cat-scroll.can-left  .cat-fade.left  { opacity: 1; }
.cat-scroll.can-right .cat-fade.right { opacity: 1; }

.cat-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; z-index: 3;
  display: none; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 50%;
  font-family: inherit; font-size: 1rem; line-height: 1; color: var(--ink);
  cursor: pointer; box-shadow: 0 1px 8px rgba(20,19,15,0.16);
}
.cat-arrow.left  { left: 0; }
.cat-arrow.right { right: 0; }
.cat-scroll.can-left  .cat-arrow.left  { display: flex; }
.cat-scroll.can-right .cat-arrow.right { display: flex; }

/* Room for the chevron to sit over, so it never covers a chip's label. */
.cat-scroll.can-left  .tabs.cats { padding-left: 34px; }
.cat-scroll.can-right .tabs.cats { padding-right: 34px; }


/* The drag-to-select highlight, for the same reason as accent-color. */
::selection { background: var(--gold); color: var(--ink); }

/* The controls were pure black on a page whose ink is a warm near-black —
   the one place on the site that used #000. */
.fb-field select, .fb-search, .fb-sort { color: var(--ink); }
.fb-field select option { color: var(--ink); background: var(--bg); }


/* The home page's rental cards hold the same gallery as the grid cards, in
   a differently-shaped box. The photograph rules are scoped to .p-media, so
   .exp-media needs saying too. */
.exp-media { touch-action: pan-y; }
.exp-media .p-shot { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .4s; }
.exp-media .p-shot.on { opacity: 1; position: relative; }

/* Holiday Rentals: the way into the exclusive villas. */
.excl-strip{display:inline-flex;flex-wrap:wrap;gap:.35rem .9rem;align-items:baseline;margin-top:1.4rem;padding:.75rem 1.1rem;
  border:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.excl-strip span{letter-spacing:.04em;text-transform:none;font-size:.9rem;opacity:.85}
.excl-strip:hover{background:rgba(255,255,255,.12)}

/* Map previews (8 Oct 2026): a photo carousel in the desktop popup, and a
   card that slides up from the bottom on phones. */
.leaflet-popup-content .mp-pop{width:256px}
.leaflet-popup-content{width:auto!important}
.mp-media{position:relative;height:150px;border-radius:2px;overflow:hidden;background:#efe9e0;margin-bottom:9px}
.mp-media .mp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;margin:0}
.mp-media .mp-img.on{opacity:1}
.leaflet-popup-content .mp-media .mp-img{height:100%;margin:0}
.mp-nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(255,255,255,.88);color:#191713;font-size:1.1rem;line-height:1;cursor:pointer;z-index:2}
.mp-prev{left:8px}.mp-next{right:8px}
.mp-nav:hover{background:#fff}
.mp-count{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(20,19,15,.66);color:#fff;
  font-size:.66rem;letter-spacing:.06em;padding:2px 7px;border-radius:10px}
.mp-pop .mp-name,.mp-sheet .mp-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.15rem;display:block;line-height:1.2}
.mp-pop a,.mp-sheet a{color:var(--ink);text-decoration:none}
.mp-pop .mp-loc,.mp-sheet .mp-loc{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.mp-pop .mp-price,.mp-sheet .mp-price{color:var(--gold);display:block;margin-top:3px}
.mp-go{display:inline-block;margin-top:10px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid var(--gold);padding-bottom:2px}
.mp-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:#fff;border-radius:14px 14px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.18);padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .32s cubic-bezier(.22,.61,.36,1);font-family:"Inter",system-ui,sans-serif}
.mp-sheet.open{transform:none}
.mp-sheet .mp-media{height:200px}
.mp-sheet .mp-go{display:block;text-align:center;margin-top:14px;padding:13px 0;border:1px solid var(--ink);
  background:var(--ink);color:#fff;font-size:.72rem}
.mp-close{position:absolute;top:6px;right:8px;width:34px;height:34px;border:0;background:none;font-size:1.6rem;
  line-height:1;color:#6b6459;cursor:pointer;z-index:3}
.mp-sheet .mp-media{margin-top:26px}

/* For Sale and Holiday Villas (Oct 2026): a shorter banner, so the first row
   of listings is on the first screen of a laptop and near it on a phone.
   Scoped by the listing pages' own heading; other pages keep .sub-hero. */
.sub-hero:has(#portTitle) { padding: 7.2rem 0 1.8rem; }
.sub-hero:has(#portTitle) .sub-h { font-size: clamp(2rem, 4vw, 3rem); }
@media (max-width: 640px) {
  .sub-hero:has(#portTitle) { padding: 6rem 0 1.2rem; }
  .sub-hero:has(#portTitle) .sub-lede { font-size: 0.92rem; }
}
/* The category chips are built once the listings arrive; holding their row
   open stops everything below jumping down when they appear. */
.tabs.cats:empty { min-height: 30px; }
/* The listings sat 112px below the filters; the filters already separate
   them from the banner. */
.section.port { padding-top: 1.6rem; }

/* Phones, For Sale / Holiday Villas / Long Stays (Monika, 9 Oct 2026): the
   category chips wrap onto rows as they do on the homepage, rather than one
   strip scrolled sideways behind a chevron that half of visitors never
   notice. Overrides the single-row rules above. */
@media (max-width: 900px), (max-height: 560px) {
  .tabs.cats { flex-wrap: wrap; overflow: visible; }
  .cat-scroll .cat-fade, .cat-scroll .cat-arrow { display: none !important; }
  .cat-scroll.can-left .tabs.cats, .cat-scroll.can-right .tabs.cats { padding-left: 0; padding-right: 0; }
}
/* One banner standard (9 Oct 2026): every page title the size of For Sale's. */
.sub-hero .sub-h { font-size: clamp(2rem, 4vw, 3rem); }