@font-face {
  font-family: "AboretoLocal";
  src: url("assets/fonts/aboreto.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "PoppinsLightLocal";
  src: url("assets/fonts/poppins-light.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "PoppinsSemiLocal";
  src: url("assets/fonts/poppins-semibold.woff2") format("woff2");
  font-display: swap;
}

:root {
  --page: #f5f5f5;
  --ink: #1e1e1e;
  --green: #143c2c;
  --gold: #ddba74;
  --gold-text: #8f6610;
  --soft-gold: #eccdb2;
  --muted: #565656;
  --white: #fffffe;
  --header-h: 76px;
  --max: 960px;
  --mobile-inner: 320px;
  --card-radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--page);
  color: var(--ink);
  font-family: PoppinsLightLocal, Poppins, Arial, sans-serif;
  scroll-behavior: smooth;
  touch-action: manipulation;
}

body {
  margin: 0;
  background: var(--page);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

@view-transition {
  navigation: auto;
}

main {
  view-transition-name: page;
}

/* One calm curve for every group: the page crossfade and the shared villa
   images that morph between a card and the villa page hero. Named villa images
   (view-transition-name: vt-villa-*) are set inline in the markup per villa. */
::view-transition-group(*) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(page) {
  animation: pageOut 220ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(page) {
  animation: pageIn 360ms cubic-bezier(.22, 1, .36, 1) both;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 4px;
}

.button.dark:focus-visible,
.chat-float:focus-visible {
  outline-color: var(--gold);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 30;
  padding: 10px 18px;
  background: var(--green);
  color: var(--white);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 14px;
  border-radius: 4px;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

button,
input,
textarea {
  font: inherit;
}

button {
  touch-action: manipulation;
}

.site-header {
  position: relative;
  z-index: 20;
  height: var(--header-h);
  background: var(--page);
}

.header-inner {
  width: min(100%, 430px);
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 56px;
  height: 56px;
  /* Trim ~11% off the right edge to drop the stray flourish/artifact on
     that side. Proportional, so it holds across the logo's sizes. */
  object-fit: cover;
  object-position: left center;
  clip-path: inset(0 11% 0 0);
}

.brand-lockup {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--green);
  line-height: 1;
  text-align: center;
}

.brand-word {
  font-family: AboretoLocal, serif;
  font-size: 34px;
  line-height: .92;
  letter-spacing: 0;
  color: inherit;
  text-transform: uppercase;
}

.brand-tagline {
  max-width: 100%;
  padding-top: 4px;
  border-top: 1px solid rgba(221, 186, 116, .72);
  color: var(--gold-text);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.desktop-nav,
.header-phone {
  display: none;
}

.menu-toggle {
  justify-self: end;
  width: 44px;
  height: 40px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.menu-lines,
.menu-lines::before,
.menu-lines::after {
  width: 23px;
  height: 2px;
  border-radius: 99px;
  background: var(--ink);
  display: block;
  transition: transform 260ms ease, opacity 180ms ease;
}

.menu-lines {
  position: relative;
}

.menu-lines::before,
.menu-lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-lines::before {
  top: -9px;
}

.menu-lines::after {
  top: 9px;
}

.menu-open .menu-lines {
  background: transparent;
}

.menu-open .menu-lines::before {
  transform: translateY(9px) rotate(45deg);
}

.menu-open .menu-lines::after {
  transform: translateY(-9px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(245, 245, 245, 0.98);
  transform: translateY(-100%);
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
  padding-top: calc(var(--header-h) + 46px);
}

.drawer.is-open {
  transform: translateY(0);
}

/* With JS, keep the closed drawer out of the tab order and a11y tree.
   (Without JS the drawer can't be opened, so its links stay reachable as a fallback.) */
html.js .drawer {
  visibility: hidden;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 420ms;
}

html.js .drawer.is-open {
  visibility: visible;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.drawer nav {
  width: min(280px, calc(100vw - 56px));
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.drawer a {
  min-height: 50px;
  display: grid;
  place-items: center;
  color: var(--green);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 20px;
}

.drawer a[aria-current="page"] {
  color: var(--gold-text);
}

@media (max-width: 374px) {
  .header-inner {
    grid-template-columns: 50px minmax(0, 1fr) 40px;
    gap: 8px;
    padding: 0 12px;
  }

  .brand-logo {
    width: 49px;
    height: 49px;
  }

  .brand-word {
    font-size: 29px;
  }

  .brand-tagline {
    font-size: 8px;
  }
}

.section {
  padding: 58px 0;
}

.site-header + .drawer + main > .section:first-child {
  padding-top: 20px;
  padding-bottom: 58px;
}

.section-tight {
  padding: 38px 0;
}

.inner {
  width: min(var(--mobile-inner), calc(100vw - 40px));
  margin: 0 auto;
}

.center {
  text-align: center;
}

.display {
  margin: 0;
  color: var(--green);
  font-family: AboretoLocal, serif;
  font-size: 24px;
  line-height: 1.28;
  letter-spacing: 0;
  text-align: center;
}

.display.large {
  font-size: 28px;
}

.display.dark {
  color: var(--ink);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
}

.lead {
  margin: 14px auto 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.copy {
  margin: 20px auto 0;
  color: var(--ink);
  font-family: PoppinsLightLocal, Poppins, sans-serif;
  font-size: 15px;
  line-height: 1.72;
}

.copy.center {
  text-align: center;
}

.hero {
  min-height: 371px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--image) center / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .31);
}

.hero-content {
  width: min(300px, calc(100vw - 44px));
  text-align: center;
  color: var(--white);
  animation: slideUp 720ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero-kicker {
  margin: 0 0 14px;
  color: var(--gold);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font-family: AboretoLocal, serif;
  font-size: 28px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-cta {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero-cta .button {
  margin-top: 0;
  flex: 1 1 132px;
  min-width: 0;
  min-height: 46px;
  padding: 0 16px;
  font-size: 14px;
  letter-spacing: .02em;
}

.button.ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

.button.ghost:hover {
  background: var(--white);
  color: var(--green);
}

.button {
  display: inline-grid;
  place-items: center;
  min-height: 41px;
  min-width: 200px;
  padding: 0 28px;
  margin-top: 28px;
  background: var(--gold);
  color: var(--green);
  border: 0;
  border-radius: 0;
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 17.67px;
  line-height: 1;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}

.button:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-2px);
}

.button.dark {
  background: var(--green);
  color: var(--white);
  min-width: 170px;
  min-height: 44px;
  padding: 0 24px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.button.dark:hover {
  background: var(--gold);
  color: var(--green);
}

.button.whatsapp {
  background: #25d366;
  color: #ffffff;
  min-width: 170px;
  min-height: 44px;
  padding: 0 24px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.button.whatsapp:hover {
  background: #1da851;
  color: #ffffff;
}

.button .btn-ico {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.split-image {
  width: 100%;
  min-height: 298px;
  display: block;
  object-fit: cover;
}

.services-teaser {
  padding-bottom: 0;
  overflow: visible;
}

.home-services-image {
  position: relative;
  height: clamp(540px, 132vw, 760px);
  margin-top: 36px;
  overflow: hidden;
  isolation: isolate;
  background: #f5f2eb;
}

.home-services-image .split-image {
  height: 100%;
  min-height: 0;
  object-position: center center;
}

.home-services-image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(245, 245, 245, 0), var(--page) 88%);
  pointer-events: none;
}

.why-owners {
  position: relative;
  z-index: 1;
  margin-top: clamp(-124px, -22vw, -84px);
  padding-top: 0;
}

.why-owners .inner {
  padding-top: clamp(34px, 8vw, 54px);
}

.feature-list {
  display: grid;
  gap: 38px;
  margin-top: 34px;
}

.feature h3,
.service-block h2,
.villa-text h2 {
  margin: 0;
  color: var(--green);
  font-family: AboretoLocal, serif;
  font-size: 20px;
  line-height: 1.45;
  text-align: center;
}

.feature p,
.service-block p,
.service-block li {
  margin: 12px 0 0;
  color: var(--ink);
  font-family: PoppinsLightLocal, Poppins, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

.service-block li b {
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-weight: 400;
}

.ico {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--green);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-icon,
.package-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 60, 44, .07);
}

.feature-icon .ico,
.package-icon .ico {
  width: 24px;
  height: 24px;
}

.amenity-grid {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 22px;
}

.amenity {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #555;
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
}

.amenity-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.icon-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: #555;
  font-size: 14px;
  line-height: 1.55;
}

.icon-list li {
  display: flex;
  gap: 14px;
}

.icon-list li + li {
  margin-top: 16px;
}

.icon-list .ico {
  margin-top: 1px;
}

/* The icon list carries its own icons (no disc bullets), so it doesn't need the
   bullet indent that .property-section ul adds for the plain bulleted lists. */
.property-section .icon-list {
  padding-left: 0;
}

picture {
  display: contents;
}

.image-card {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  isolation: isolate;
}

/* The build wraps each <img> in a <picture>; keep that wrapper out of the
   grid flow so the villa name stays centered (both axes) over the photo. */
.image-card picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.image-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .34);
}

.image-card span {
  font-family: AboretoLocal, serif;
  font-size: 27px;
  line-height: 1.4;
  text-align: center;
}

.card-stack {
  display: grid;
  gap: 0;
  margin-top: 28px;
}

.villas-map-hero {
  padding: 0;
  overflow: visible;
}

.villas-heading {
  padding-top: 38px;
  padding-bottom: 28px;
}

.villa-location {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 0;
  overflow: visible;
}

.villa-location-copy {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.villa-location-copy p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.villa-map-shell {
  position: relative;
  width: 100%;
  margin-top: 0;
  height: min(42vh, 56.25vw, 430px);
  background: #9fcddd;
  overflow: visible;
  isolation: isolate;
}

.villa-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.villa-map-points {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.villa-map-point {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--green);
  cursor: pointer;
  pointer-events: all;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
}

.villa-map-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(20, 60, 44, .88);
  box-shadow:
    inset 0 0 0 3px rgba(255, 253, 247, .45),
    0 0 0 10px rgba(20, 60, 44, .13),
    0 8px 18px rgba(20, 60, 44, .16);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.villa-map-dismiss {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.villa-map-dismiss[hidden] {
  display: none;
}

.villa-map-popover {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: min(210px, 72vw);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--soft-gold);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(20, 60, 44, .22);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: scale(.97);
  transform-origin: 50% 100%;
  transition: opacity 160ms ease, transform 180ms ease;
}

.villa-map-popover[hidden] {
  display: none;
}

.villa-map-popover img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
}

.villa-map-popover span {
  display: grid;
  gap: 2px;
  padding: 11px 12px 12px;
}

.villa-map-popover b {
  color: var(--green);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 13px;
  line-height: 1.25;
}

.villa-map-popover small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.villa-map-point:hover,
.villa-map-point:focus-visible,
.villa-map-point.is-active {
  outline: none;
}

.villa-map-popover.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

@media (max-width: 759px) {
  .villa-location {
    margin-bottom: 0;
  }

  /* Property pages carry the densest copy (amenities, highlights). The global
     320px mobile column left big side gutters and forced long, narrow text to
     wrap heavily. Let these content cards use nearly the full phone width and
     tighten the card padding so each amenity reads in far fewer lines. */
  .property-page .inner {
    width: min(100vw - 32px, 460px);
  }

  .property-section {
    padding: 26px 20px;
  }
}

/* Rich villa listing — one card per villa, fed from each villa's own content. */
.villa-listing {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 28px;
  margin-top: 30px;
}

.villa-card {
  background: var(--white);
  overflow: hidden;
  border-radius: var(--card-radius);
}

.villa-card-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.villa-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Modern, restrained hover: the villa photos breathe slightly on pointer
   devices. Motion-gated so reduced-motion viewers get a static image, and
   pointer-gated so it never triggers on touch taps. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .image-card img,
  .villa-card-media img {
    transition: transform 640ms cubic-bezier(.22, 1, .36, 1);
  }

  .image-card:hover img,
  .villa-card:hover .villa-card-media img,
  .villa-card-media:focus-visible img {
    transform: scale(1.045);
  }
}

.villa-card-body {
  padding: 28px 24px 32px;
  text-align: center;
}

.villa-card-body h2 {
  margin: 0;
  font-family: AboretoLocal, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.villa-card-body h2 a {
  color: var(--green);
}

.villa-card-intro {
  max-width: 540px;
  margin: 14px auto 0;
  color: #5e5e5e;
  font-size: 15px;
  line-height: 1.7;
}

.villa-card .property-facts {
  max-width: 520px;
  margin-inline: auto;
}

.villa-card .property-facts span {
  padding: 11px 12px;
}

.villa-card-foot {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.villa-card-foot .property-status {
  margin-top: 0;
}

.text-link {
  color: var(--gold-text);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 180ms ease;
}

.text-link:hover {
  text-decoration-color: currentColor;
}

.reviews {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.review {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 28px 34px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

/* No more lonely glyph on its own line. The quote becomes an oversized, faint
   gold flourish cropped into the top corner that the testimonial sits over —
   it fills the space instead of adding to it. Flex order then floats the
   testimonial up as the hero and drops the attribution to the foot of the
   card, like a signed quote, with a gold hairline dividing the two. */
.quote-mark {
  position: absolute;
  top: 14px;
  inset-inline-start: 12px;
  z-index: 0;
  color: var(--gold);
  opacity: .17;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 120px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.review p {
  order: 1;
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-family: PoppinsLightLocal, Poppins, sans-serif;
  font-size: 15px;
  line-height: 1.9;
}

.review h3 {
  order: 2;
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  color: var(--green);
  font-family: AboretoLocal, serif;
  font-size: 20px;
  letter-spacing: .05em;
}

/* Gold hairline above the name separates the testimonial from its attribution. */
.review h3::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  margin: 0 auto 18px;
  background: rgba(221, 186, 116, .7);
}

.review strong {
  order: 3;
  position: relative;
  z-index: 1;
  margin-top: 7px;
  color: var(--gold-text);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.service-photo-grid {
  display: grid;
  gap: 0;
  margin-top: 36px;
}

.service-photo-grid img {
  width: 100%;
  min-height: 213px;
  object-fit: cover;
}

.service-block {
  padding: 42px 0;
}

.service-block ol {
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
  display: grid;
  gap: 24px;
}

.service-block b {
  color: var(--green);
}

.package-list {
  display: grid;
  gap: 26px;
  margin-top: 30px;
}

.package h3 {
  margin: 0;
  color: var(--green);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 18px;
  text-align: center;
}

.package p {
  margin: 8px 0 0;
  text-align: center;
}

.slider {
  position: relative;
  overflow: hidden;
  background: #ddd;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.slides {
  display: flex;
  transition: transform 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.slide {
  min-width: 100%;
}

.slide img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  -webkit-user-drag: none;
}

.slider-controls {
  position: absolute;
  inset: auto 14px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.slider button {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(245, 245, 245, .86);
  color: var(--green);
  font-size: 22px;
  line-height: 1;
}

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}

.slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(245, 245, 245, .6);
}

.slider-dots button.is-active {
  background: var(--gold);
}

.villa-text {
  padding: 40px 0 0;
}

.villa-text h1 {
  margin: 0;
  color: var(--green);
  font-family: AboretoLocal, serif;
  font-size: 30px;
  line-height: 1.35;
  text-align: center;
}

.villa-text .status {
  display: block;
  margin: 26px auto 0;
  color: var(--gold-text);
  font-family: AboretoLocal, serif;
  font-size: 28px;
  text-align: center;
}

.villa-text ul {
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.villa-text li {
  text-align: center;
}

.property-page {
  background: #eee;
  padding-bottom: 66px;
}

html.js .property-page [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.property-hero {
  background: #ddd;
}

.property-page .property-hero .slide img {
  height: min(38vh, 420px);
  min-height: 290px;
  object-fit: cover;
}

.property-page .slider-controls {
  inset: 0 18px;
  align-items: center;
  z-index: 4;
}

.property-page .slider button {
  width: 44px;
  height: 44px;
  background: rgba(245, 245, 245, .88);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  color: var(--green);
}

.property-page .slider-dots {
  display: none;
}

.property-intro {
  position: relative;
  z-index: 2;
  margin-top: -42px;
  padding: 40px 24px 36px;
  background: var(--white);
  text-align: center;
}

.property-kicker {
  margin: 0 0 10px;
  color: var(--gold-text);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.property-intro h1,
.property-cta h2 {
  margin: 0;
  color: var(--green);
  font-family: AboretoLocal, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}

.property-intro > p:not(.property-kicker),
.property-cta > p:not(.property-kicker) {
  max-width: 640px;
  margin: 18px auto 0;
  color: #5e5e5e;
  font-size: 15px;
  line-height: 1.7;
}

.property-facts {
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.property-facts span {
  min-height: 44px;
  padding: 10px 8px;
  display: grid;
  place-items: center;
  border: 1px solid #d8d8d8;
  color: var(--ink);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 12px;
  line-height: 1.25;
}

.property-status {
  display: inline-grid;
  place-items: center;
  min-width: 132px;
  min-height: 38px;
  margin-top: 28px;
  padding: 0 20px;
  background: var(--green);
  color: var(--white);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.property-status.reserved {
  background: var(--gold);
  color: var(--green);
}

.property-status.booking-cta {
  min-width: 190px;
  background: var(--green);
  color: var(--white);
  box-shadow: 0 12px 24px rgba(27, 57, 47, .14);
  transition:
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.property-status.booking-cta:hover,
.property-status.booking-cta:focus-visible {
  background: var(--gold);
  color: var(--green);
  transform: translateY(-1px);
}

.property-status.booking-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.property-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

/* The buttons carry their own 28px top margin for the standalone case; inside
   the flex group the wrapper owns the spacing, so the gap stays consistent
   with the facts grid above instead of stacking margin + gap. */
.property-cta-buttons .property-status {
  margin-top: 0;
}

.property-status.booking-cta.airbnb-cta {
  background: #ff5a5f;
  color: var(--white);
}

.property-status.booking-cta.airbnb-cta:hover,
.property-status.booking-cta.airbnb-cta:focus-visible {
  background: #e0484d;
  color: var(--white);
}

.property-availability {
  margin-top: 28px;
  padding: 34px 24px 30px;
  background: var(--white);
}

.availability-head {
  text-align: center;
}

.availability-head h2 {
  margin: 0;
  color: var(--green);
  font-family: AboretoLocal, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}

.availability-status {
  max-width: 680px;
  margin: 18px auto 0;
  color: #5e5e5e;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.availability-status.is-error,
.availability-status.is-stale {
  color: #815d13;
}

.availability-calendars {
  margin-top: 26px;
  display: grid;
  gap: 18px;
}

.availability-month {
  padding: 16px;
  border: 1px solid #dedede;
  background: #fafafa;
}

.availability-month h3 {
  margin: 0 0 14px;
  color: var(--green);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.availability-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.availability-weekday,
.availability-day,
.availability-blank {
  min-height: 32px;
}

.availability-weekday {
  display: grid;
  place-items: center;
  color: #777;
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

.availability-day {
  display: grid;
  place-items: center;
  border: 1px solid #cfe0d7;
  background: #f2f8f5;
  color: var(--green);
  font-size: 12px;
  line-height: 1;
}

.availability-day.is-unavailable {
  border-color: var(--gold);
  background: #f4dfb5;
  color: var(--green);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
}

.availability-day.is-past {
  border-color: #e4e4e4;
  background: #f7f7f7;
  color: #9a9a9a;
}

.availability-day.is-past.is-unavailable {
  border-color: #e4e4e4;
  background: #f7f7f7;
  color: #9a9a9a;
  font-family: PoppinsLightLocal, Poppins, Arial, sans-serif;
}

.availability-day.is-today {
  outline: 2px solid var(--green);
  outline-offset: 1px;
}

.availability-legend {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  color: #555;
  font-size: 12px;
  line-height: 1.2;
}

.availability-legend[hidden] {
  display: none;
}

.availability-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-dot {
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 1px solid #cfe0d7;
  background: #f2f8f5;
}

.legend-dot.unavailable {
  border-color: var(--gold);
  background: #f4dfb5;
}

.property-details {
  padding-top: 54px;
  display: grid;
  gap: 22px;
}

.property-section {
  padding: 32px 24px;
  background: var(--white);
}

.property-section h2 {
  margin: 0;
  color: var(--gold-text);
  font-family: AboretoLocal, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
}

.property-section ul {
  margin: 22px 0 0;
  padding-left: 18px;
  color: #555;
  font-size: 14px;
  line-height: 1.55;
}

.property-section li + li {
  margin-top: 10px;
}

.property-section b {
  color: #3e3e3e;
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
}

/* =====================================================================
   Location timeline (understated "hairline" style)
   The villa is the origin on top (name + neighbourhood area); each place
   hangs off a fine gold thread as a stop, ordered by travel time, with its
   time gold-emphasised inline. Small green dots, a white ring "breaks" the
   thread behind each dot. RTL-safe (the thread is centre-set).
   ===================================================================== */
.property-metro .metro {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.property-metro .metro li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
}

.metro-node {
  position: relative;
  flex: 0 0 14px;
  align-self: stretch;
  display: flex;
  justify-content: center;
}

.metro-node::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: rgba(221, 186, 116, .5);
}

/* Trim the thread so it begins at the origin dot and ends at the last stop. */
.property-metro .metro li:first-child .metro-node::before {
  top: 10px;
}

.property-metro .metro li:last-child .metro-node::before {
  bottom: calc(100% - 10px);
}

.metro-dot {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--white);
}

.metro-body {
  padding-bottom: 20px;
  color: #3e3e3e;
  font-size: 14px;
  line-height: 1.55;
}

.property-metro .metro li:last-child .metro-body {
  padding-bottom: 0;
}

/* The travel time, gold-emphasised inline within each sentence. */
.metro-time {
  color: var(--gold-text);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
}

/* Origin (the villa) reads as the terminus: a slightly larger gold-ringed dot. */
.metro-origin .metro-dot {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--green);
}

.metro-origin .metro-body {
  padding-bottom: 24px;
}

.metro-origin b {
  color: var(--green);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
}

.metro-origin small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.property-cta {
  margin-top: 54px;
  padding: 42px 24px;
  background: var(--white);
}

.property-cta .button {
  margin-top: 28px;
}

.contact-block {
  padding-top: 23px;
  text-align: center;
}

.contact-block h1 {
  width: 240px;
  margin: 0 auto;
  color: var(--ink);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.43;
}

/* Three shared columns — icon | label | value — so colons and values line up
   across all rows. justify-content centers the column group as a whole. */
.contact-lines {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: auto auto minmax(0, max-content);
  justify-content: center;
  align-items: center;
  column-gap: 11px;
  row-gap: 16px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  text-align: start;
}

/* Each row's three cells flow directly into the shared grid. */
.contact-lines li {
  display: contents;
}

.contact-ico {
  width: 20px;
  height: 20px;
  fill: var(--green);
  flex: 0 0 auto;
}

.cl-label {
  text-align: end;
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
}

.cl-value {
  overflow-wrap: anywhere;
}

.form-title {
  margin: 92px 0 0;
  color: var(--ink);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
}

.contact-form {
  margin-top: 34px;
  display: grid;
  gap: 26px;
  text-align: left;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

/* Both submit buttons share one layout so email + WhatsApp stay balanced. */
.form-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 1 1 auto;
  margin-top: 0;
}

.field label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1;
}

.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: 10px 0;
  color: var(--ink);
  outline: 0;
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-bottom-color: var(--gold);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.form-status {
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(20, 60, 44, .08);
  color: var(--green);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.form-status[hidden] {
  display: none;
}

.dark-cta {
  width: 100%;
  margin-top: 0;
  padding: 42px 20px 40px;
  background: var(--ink);
  color: var(--white);
  text-align: center;
}

.dark-cta .copy {
  max-width: 640px;
  margin: 0 auto;
  color: var(--white);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 22px;
  line-height: 1.45;
}

.dark-cta .button {
  margin-top: 36px;
  min-width: 200px;
  min-height: 40px;
  background: var(--page);
  color: var(--ink);
  font-family: PoppinsLightLocal, Poppins, sans-serif;
  font-size: 15px;
  text-transform: none;
}

/* Internal basemap preview page. */
.basemap-preview-page {
  background: #f5f5f5;
}

.basemap-preview-hero {
  padding: 72px 0 28px;
}

.basemap-preview-inner,
.basemap-preview-grid {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
}

.basemap-preview-inner {
  display: grid;
  gap: 12px;
}

.basemap-preview-inner .display {
  margin: 0;
  text-align: left;
}

.basemap-preview-inner .copy {
  max-width: 760px;
  margin: 0;
  text-align: left;
}

.basemap-preview-grid {
  display: grid;
  gap: 24px;
  padding: 20px 0 70px;
}

.basemap-option {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(20, 60, 44, .13);
  background: var(--white);
}

.basemap-option img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: #9fcddd;
}

.basemap-option-body {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.basemap-option h2 {
  margin: 0;
  color: var(--green);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 16px;
  line-height: 1.25;
}

.basemap-option p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

@media (min-width: 900px) {
  .basemap-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-footer {
  padding: 13px 0;
  text-align: center;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--green);
  transition: color 180ms ease;
}

.socials a:hover {
  color: var(--gold-text);
}

.social-ico {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 18px;
  font-size: 13px;
}

.footer-links a {
  padding: 6px 2px;
  color: var(--muted);
  transition: color 180ms ease;
}

.footer-links a:hover {
  color: var(--green);
}

.copyright {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

.chat-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 12;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  display: grid;
  place-items: center;
}

.chat-icon {
  width: 28px;
  height: 21px;
  border-radius: 5px;
  background: var(--white);
  position: relative;
}

.chat-icon::after {
  content: "";
  position: absolute;
  left: 13px;
  bottom: -6px;
  border-top: 7px solid var(--white);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.chat-icon span,
.chat-icon span::before,
.chat-icon span::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green);
  position: absolute;
  top: 9px;
}

.chat-icon span {
  left: 12px;
}

.chat-icon span::before,
.chat-icon span::after {
  content: "";
  top: 0;
}

.chat-icon span::before {
  left: -9px;
}

.chat-icon span::after {
  left: 9px;
}

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(38px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageOut {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Neutralize every view-transition group (page + shared villa images) so the
     navigation is an instant cut for viewers who prefer reduced motion. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-content {
    animation: none;
  }

  .button:hover,
  .button.dark:hover {
    transform: none;
  }
}

@media (min-width: 760px) {
  :root {
    --header-h: 90px;
    --mobile-inner: 700px;
  }

  .header-inner {
    width: min(700px, calc(100vw - 40px));
    grid-template-columns: 82px 1fr 52px;
  }

  .brand-logo {
    width: 74px;
    height: 74px;
  }

  .brand-word {
    font-size: 48px;
  }

  .brand-tagline {
    font-size: 10.5px;
  }

  .hero {
    min-height: 560px;
  }

  .hero-content {
    width: min(620px, calc(100vw - 64px));
  }

  .hero h1 {
    font-size: 62px;
    line-height: 1.35;
  }

  .button {
    min-width: 280px;
  }

  .display {
    font-size: 50px;
  }

  .display.large {
    font-size: 64px;
  }

  .lead {
    font-size: 30px;
  }

  .feature-list,
  .reviews {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-stack,
  .service-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .split.services-teaser {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 0;
  }

  /* Two-column split retained; the left-column copy grows to ~2/3 of the
     left column and keeps consistent padding on all four sides. */
  .split.services-teaser .inner {
    align-self: start;
    width: 100%;
    max-width: 66.6%;
    padding: 40px;
  }

  .split .inner {
    width: auto;
    max-width: 420px;
    padding: 0 40px;
    align-self: center;
  }

  .home-services-image {
    height: clamp(760px, 82vw, 980px);
    margin-top: 0;
  }

  .why-owners {
    margin-top: clamp(-170px, -14vw, -118px);
  }

  .why-owners .inner {
    padding-top: clamp(48px, 7vw, 78px);
  }

  .slide img {
    height: 560px;
  }

  .property-page .property-hero .slide img {
    height: min(50vh, 560px);
    min-height: 360px;
  }

  .property-intro {
    margin-top: -58px;
    padding: 50px 48px 46px;
  }

  .property-intro h1,
  .property-cta h2 {
    font-size: 42px;
  }

  .property-facts {
    grid-template-columns: repeat(4, 1fr);
  }

  .villa-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .villa-card-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 360px;
  }

  /* Alternate the image side down the list for editorial rhythm. In RTL the
     whole grid mirrors, so this still reads as a clean A/B cadence. */
  .villa-card:nth-child(even) .villa-card-media {
    order: 2;
  }

  .villa-card-body {
    padding: 40px 44px;
    align-self: center;
    text-align: start;
  }

  .villa-card-body h2 {
    font-size: 32px;
  }

  .villa-card-intro,
  .villa-card .property-facts {
    margin-inline: 0;
  }

  /* Two-up facts read better inside the narrower half-width card. */
  .villa-card .property-facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .villa-card-foot {
    flex-direction: row;
    justify-content: space-between;
  }

  .property-availability {
    padding: 42px 44px 38px;
  }

  .availability-head h2 {
    font-size: 34px;
  }

  .availability-calendars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .amenity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .property-section {
    padding: 40px 38px;
  }

  .property-section h2 {
    font-size: 30px;
  }

  .property-cta {
    padding: 52px 48px;
  }

}

@media (min-width: 980px) {
  .header-inner {
    width: min(1440px, 78vw);
    grid-template-columns: 82px max-content 1fr max-content;
    gap: 22px;
  }

  .brand-lockup {
    justify-items: start;
    text-align: start;
  }

  .brand-word {
    color: var(--gold-text);
    font-size: 36px;
  }

  .desktop-nav {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 22px;
    color: #6e6e6e;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .desktop-nav a {
    transition: color 180ms ease;
  }

  .desktop-nav a:hover,
  .desktop-nav a[aria-current="page"] {
    color: var(--gold-text);
  }

  .header-phone {
    display: block;
    color: var(--gold-text);
    font-family: PoppinsSemiLocal, Poppins, sans-serif;
    font-size: 12px;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
  }

  .menu-toggle {
    display: none;
  }

  .property-page .inner {
    width: min(1020px, calc(100vw - 80px));
  }

  .property-details {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  .property-section-wide {
    grid-column: 1 / -1;
  }
}

/* Home page desktop refinements (2026-07) */
@media (min-width: 980px) {
  /* Our Villas card grid: cap to ~3/4 of the page, round the images and add
     a little breathing room between them. */
  .card-stack {
    width: min(75vw, 1200px);
    margin-inline: auto;
    gap: 16px;
  }

  .card-stack .image-card {
    border-radius: var(--card-radius);
  }

  /* Reviews grow horizontally to ~3/4 of the page, three across. */
  .reviews-inner {
    width: min(75vw, 1200px);
  }

  .reviews-inner .reviews {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Trim the bottom 1/5 of the tall garden-pool photo so the teaser row
     isn't so tall. 960/1024 = the top 4/5 of the 960x1280 source, anchored
     to the top so the bottom fifth is cropped. */
  .home-services-image {
    height: auto;
    aspect-ratio: 960 / 1024;
  }

  .home-services-image .split-image {
    object-position: 50% 0;
  }
}

/* Tighter vertical rhythm between sections on desktop (~1/3 of mobile). */
@media (min-width: 980px) {
  .section {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .section-tight {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .site-header + .drawer + main > .section:first-child {
    padding-bottom: 20px;
  }
}

/* =====================================================================
   i18n: language switcher
   Desktop dropdown lives inside .desktop-nav (hidden < 980px); the drawer
   gets a flat language list for mobile. No layout impact on the header grid.
   ===================================================================== */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #6e6e6e;
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color 180ms ease;
}

.lang-toggle:hover,
.lang-switcher.is-open .lang-toggle {
  color: var(--gold-text);
}

.lang-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 180ms ease;
}

.lang-switcher.is-open .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--soft-gold);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 25;
}

.lang-switcher.is-open .lang-menu {
  display: flex;
}

.lang-menu a {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}

.lang-menu a:hover {
  background: var(--page);
}

.lang-menu a[aria-current="true"] {
  color: var(--gold-text);
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
}

.drawer-langs {
  width: min(280px, calc(100vw - 56px));
  margin: 22px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--soft-gold);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}

.drawer-langs a {
  font-family: PoppinsSemiLocal, Poppins, sans-serif;
  font-size: 14px;
  color: var(--green);
  padding: 6px 8px;
}

.drawer-langs a[aria-current="true"] {
  color: var(--gold-text);
}

/* =====================================================================
   i18n: right-to-left support (Arabic, Hebrew)
   Layout is mostly grid/flow which mirrors automatically under dir="rtl";
   only the explicitly side-anchored pieces need flipping.
   ===================================================================== */
[dir="rtl"] .skip-link {
  left: auto;
  right: 8px;
}

[dir="rtl"] .chat-float {
  right: auto;
  left: 16px;
}

[dir="rtl"] .header-phone {
  text-align: left;
}

[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

[dir="rtl"] .amenity,
[dir="rtl"] .contact-form {
  text-align: right;
}

/* =====================================================================
   i18n: non-Latin font fallbacks
   The brand fonts (Aboreto, Poppins) are Latin-only and would render as
   tofu for Thai/Arabic/Hebrew/Cyrillic. We force script-appropriate system
   font stacks (no extra downloads, so no perf cost on poor networks). These
   stacks also cover Latin, so brand/villa names still render cleanly.
   Self-hosted, subsetted Noto webfonts can replace these later if desired.
   ===================================================================== */
html[lang="th"] {
  --i18n-font: "Noto Sans Thai", "Leelawadee UI", "Sukhumvit Set", system-ui, sans-serif;
}

html[lang="ar"] {
  --i18n-font: "Noto Sans Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif;
}

html[lang="he"] {
  --i18n-font: "Noto Sans Hebrew", "Arial Hebrew", Tahoma, system-ui, sans-serif;
}

html[lang="ru"] {
  --i18n-font: "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

html[lang="th"] *,
html[lang="ar"] *,
html[lang="he"] *,
html[lang="ru"] * {
  font-family: var(--i18n-font) !important;
}

/* ------------------------------------------------------------------ *
 * Our Services / About page refinements (scoped to .services-page)
 * - tame the full-bleed banners (the coastline shot was rendering
 *   ~1180px tall); give both a single, elegant responsive height
 * - lock gallery images to a shared aspect ratio so each band is crisp
 * - balance the package cards three-up on wider screens
 * ------------------------------------------------------------------ */
/* Alternating two-column (text <-> image) rows. Mobile: single column,
   image under text. Desktop (>=980px): 2-col; .service-split--reverse flips
   the image to the opposite side for editorial rhythm. */
.service-split {
  width: min(var(--mobile-inner), calc(100vw - 40px));
  margin: 26px auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.service-split-text {
  width: 100%;
}

/* Neutralise the auto-centering the .lead style applies so text fills its
   column cleanly in the split layout. */
.services-page .service-split .lead {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.service-split-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Portrait service photos: a tall frame that fills the column edge-to-edge (no
   letterbox gaps). On mobile (single stacked column, like the front page) the
   image dissolves into the page background at the bottom; on desktop it sits
   beside the copy, where a bottom-only fade reads oddly, so it's disabled there
   (see the min-width rule below). */
.service-split-img--portrait {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 96%);
}

/* Packages only ever render here, so they own their column count outright
   (rather than overriding the shared feature/review 2-up rule). */
@media (min-width: 760px) {
  .package-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Headings stay centred (on-brand); longer body copy reads left-aligned.
   Uses logical `start` so RTL locales align right automatically. */
.services-page .lead,
.services-page .service-block li {
  text-align: start;
}

@media (min-width: 980px) {
  .service-split {
    width: min(1040px, calc(100vw - 48px));
    flex-direction: row;
    gap: 48px;
    margin: 14px auto;
    align-items: center;
  }

  .service-split--reverse {
    flex-direction: row-reverse;
  }

  .service-split-text,
  .service-split-img {
    flex: 1 1 0;
    min-width: 0;
  }

  .service-split-img {
    aspect-ratio: 4 / 3;
    height: clamp(320px, 34vw, 440px);
  }

  /* Taller portrait beside the copy: fills the column width for a clean edge
     (no side gaps) and stands taller than the 4:3 landscape frames. A bottom
     fade only makes sense for the full-bleed mobile stack, so drop it here and
     keep a clean rounded rectangle. */
  .service-split-img--portrait {
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    height: clamp(460px, 52vw, 600px);
    border-radius: 12px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* About heading reads left-aligned as a column heading in the split. */
  .service-split .display {
    text-align: start;
  }
}

/* ------------------------------------------------------------------ *
 * Contact — desktop two-column: info (heading, lead, contact lines) on
 * the left; form title + form on the right. Mobile stays single column.
 * ------------------------------------------------------------------ */
@media (min-width: 980px) {
  .contact-block.inner {
    width: min(75vw, 1100px);
  }

  .contact-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
    text-align: start;
  }

  /* Left column (heading + lead + contact lines) vertically centered
     against the taller form column. */
  .contact-info {
    align-self: center;
  }

  .contact-block h1 {
    width: auto;
    margin: 0;
    text-align: start;
  }

  .contact-info .lead {
    text-align: start;
  }

  .contact-lines {
    justify-content: start;
    margin-top: 32px;
  }

  .form-title {
    margin: 0 0 4px;
  }

  .contact-form {
    margin-top: 24px;
  }
}

/* ------------------------------------------------------------------ *
 * /our-villas: portrait desktop map + two-column layout.
 * Mobile (<980px) is unchanged — .villas-desktop-grid is an inert
 * wrapper there and only the landscape .villa-map--mobile shell shows.
 * ------------------------------------------------------------------ */
.villa-map--desktop {
  display: none;
}

@media (min-width: 980px) {
  .villa-map--mobile {
    display: none;
  }

  .villa-map--desktop {
    display: block;
  }

  .villas-desktop-grid {
    display: grid;
    grid-template-columns: minmax(340px, 1.4fr) 2fr;
    gap: 2.5rem;
    align-items: start;
    padding-inline: clamp(24px, 3vw, 56px);
  }

  /* Map column (left): a full-height sea-blue panel spanning the heading +
     listing rows, with the island map centered within it. The blue matches
     the map's own water so the island reads as floating in the sea. */
  .villas-desktop-grid .villas-map-hero {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #b5d5da;
  }

  /* Keep the island in view while the villa list scrolls, while still
     resting centered in the blue panel. */
  .villas-desktop-grid .villa-location {
    position: sticky;
    top: 1.5rem;
  }

  .villas-desktop-grid .villas-heading {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
  }

  .villas-desktop-grid .villas-heading .inner {
    width: auto;
    margin-inline: auto;
  }

  /* Villa cards laid out as a 2-up grid on the right (~2/3 of the page). */
  .villas-desktop-grid .villa-listing {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: auto;
    margin-top: 0;
  }

  /* Portrait map fills the left column. */
  .villa-map-shell.villa-map--desktop {
    height: auto;
    aspect-ratio: 1800 / 2700;
    background: #b5d5da;
    overflow: hidden;
  }

  /* Nudge-zoom ~5% to crop the slivers of terrain at the top/bottom edges.
     The basemap and the dot overlay scale together about the centre, so the
     villa markers stay aligned; the shell clips the overflow. */
  .villa-map--desktop .villa-map-svg,
  .villa-map--desktop .villa-map-points {
    transform: scale(1.05);
  }

  /* In the narrower right-column grid, cards stack (image over text)
     instead of the full-width 50/50 split. */
  .villas-desktop-grid .villa-card {
    display: block;
  }

  .villas-desktop-grid .villa-card-media {
    aspect-ratio: 3 / 2;
    min-height: 0;
    height: auto;
    order: 0;
  }

  .villas-desktop-grid .villa-card:nth-child(even) .villa-card-media {
    order: 0;
  }

  .villas-desktop-grid .villa-card-body {
    padding: 24px 22px 28px;
    text-align: center;
  }

  .villas-desktop-grid .villa-card-foot {
    justify-content: space-between;
  }

  .villas-desktop-grid .villa-card .property-facts {
    grid-template-columns: repeat(2, 1fr);
  }
}