/* =============================================================
   Sorai Hospitality — modern minimal
   Oswald (display, uppercase) + Courier Prime (text).
============================================================= */
:root {
  /* palette: dark taupe-brown / warm off-white / sage */
  --bg: #f6f5f1;
  --bg-2: #ecebe5;
  --dark: #4a4237;
  --sage: #6a6a67;
  --sage-ink: #f6f5f1;
  --ink: #2a251f;
  --ink-2: #4a4237;
  --muted: #8b8579;
  --line: #d8d5cc;
  --taupe: #c9bfb0;
  --brown: #4a4237;
  --display: "Oswald", "Arial Narrow", sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --header-h: 84px;
  --gutter: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.7 var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 300; text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; margin: 0; }
.kicker { font: 400 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.section { padding: clamp(80px, 11vw, 160px) 0; }
.center { text-align: center; }

/* buttons */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 28px; border-radius: 999px;
  font: 400 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s; white-space: nowrap;
}
.pill-dark { background: var(--dark); color: var(--bg); }
.pill-dark:hover { background: var(--ink); }
.pill-line { border: 1px solid currentColor; }
.pill-line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill-light { border: 1px solid rgba(255,255,255,.8); color: #fff; }
.pill-light:hover { background: #fff; color: var(--ink); }
.arrow-link { display: inline-flex; align-items: center; gap: 10px; font: 400 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.arrow-link svg { width: 22px; height: 22px; transition: transform .25s; }
.arrow-link:hover svg { transform: translateX(5px); }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s ease, transform 1s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header-h); transition: background .35s, color .35s, border-color .35s; border-bottom: 1px solid transparent; }
.site-header.solid, .site-header.scrolled { background: rgba(248, 246, 242, .97); color: var(--ink); border-color: var(--line); }
.site-header.overlay:not(.scrolled) { color: #fff; }
.header-inner { height: 100%; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav-left { display: flex; gap: 34px; }
.nav-left a, .nav-link { font: 400 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; padding: 6px 0; position: relative; }
.nav-left a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .3s; }
.nav-left a:hover::after, .nav-left a.active::after { right: 0; }
.logo { font: 400 30px/1 var(--display); letter-spacing: .42em; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-left: .42em; }
.logo small { font: 400 10px/1 var(--mono); letter-spacing: .4em; text-transform: uppercase; padding-left: .4em; }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 26px; }
.icon-link svg { width: 20px; height: 20px; display: block; }
.nav-right > a { display: inline-flex; align-items: center; }
.nav-right .nav-link { padding: 0; height: 40px; }
.nav-right .pill { line-height: 1; }
.nav-right .pill { height: 40px; padding: 0 24px; }
.menu-btn { display: none; width: 32px; height: 32px; position: relative; }
.menu-btn span { position: absolute; left: 4px; right: 4px; height: 1px; background: currentColor; transition: transform .3s, top .3s; }
.menu-btn span:first-child { top: 12px; } .menu-btn span:last-child { top: 20px; }
.menu-open .menu-btn span:first-child { top: 16px; transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { top: 16px; transform: rotate(-45deg); }
.menu-overlay { position: fixed; inset: 0; z-index: 55; background: var(--bg); display: flex; flex-direction: column; justify-content: center; padding: var(--header-h) var(--gutter) 40px; opacity: 0; pointer-events: none; transition: opacity .35s; }
.menu-overlay nav { display: flex; flex-direction: column; gap: 10px; }
.menu-overlay nav a { font: 300 clamp(34px, 9vw, 54px)/1.15 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.menu-overlay p { margin-top: 40px; color: var(--muted); }
.menu-open { overflow: hidden; }
.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
.menu-open .site-header { color: var(--ink); background: var(--bg); }

/* ---------- hero (video) ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; max-height: 1100px; color: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(15,12,10,.45) 0%, rgba(15,12,10,.25) 60%), linear-gradient(180deg, rgba(15,12,10,.35), rgba(15,12,10,0) 25%, rgba(15,12,10,0) 75%, rgba(15,12,10,.35)); }
.hero h1, .hero .kicker { text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero-inner { position: relative; z-index: 2; padding: 0 var(--gutter); }
.hero .kicker { color: rgba(255,255,255,.85); }
.hero h1 { font-size: clamp(40px, 6.6vw, 96px); letter-spacing: .08em; margin: 24px 0 36px; }
.hero-foot { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 34px; display: flex; justify-content: center; align-items: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.hero-places { text-align: center; }
.hero-ctas { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-ctas .pill { min-width: 212px; height: 41px; padding: 0 25px; font-size: 11.7px; }
.hero-book { position: absolute; right: 0; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.6); transition: border-color .2s, gap .2s; }
.hero-book:hover { border-color: #fff; gap: 14px; }
.hero-book svg { width: 18px; height: 18px; }

/* ---------- intro ---------- */
.intro { max-width: 820px; margin: 0 auto; text-align: center; }
.intro h2 { font-size: clamp(28px, 3.4vw, 46px); margin: 22px 0 28px; line-height: 1.2; }
.intro p { color: var(--ink-2); margin: 0 auto 16px; max-width: 640px; }

/* ---------- section head ---------- */
.head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.head h2 { font-size: clamp(30px, 3.6vw, 52px); }

/* ---------- villa cards ---------- */
.villa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 32px; }
.villa-card { display: flex; flex-direction: column; }
.card-media { position: relative; aspect-ratio: 1.45 / 1; overflow: hidden; background: var(--bg-2); }
.card-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.card-track::-webkit-scrollbar { display: none; }
.card-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; transition: transform 1.2s ease; }
.villa-card:hover .card-track img { transform: scale(1.04); }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .3s; }
.car-btn svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.car-btn.prev { left: 6px; } .car-btn.next { right: 6px; }
.villa-card:hover .car-btn, .car-btn:focus-visible { opacity: 1; }
.car-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.car-dots i { width: 18px; height: 1px; background: rgba(255,255,255,.5); transition: background .3s; }
.car-dots i.on { background: #fff; }
.tag { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 10px; background: rgba(201, 191, 176, .92); color: var(--ink); font: 700 14px/1 var(--mono); padding: 12px 16px; border-radius: 4px; }
.tag svg { width: 18px; height: 18px; }
.heart { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; }
.heart svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); transition: transform .2s; }
.heart:hover svg { transform: scale(1.12); }
.heart.on svg { fill: #fff; }
/* Casa-Cook-style card: landscape image, uppercase name ↗, pin + place, two-line description */
.card-body { padding-top: 30px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-size: clamp(26px, 2.3vw, 34px); font-weight: 400; letter-spacing: .02em; margin: 0; }
.card-title a { display: inline-flex; align-items: center; gap: 14px; }
.card-title .ur svg { width: .7em; height: .7em; transition: transform .3s; }
.card-title a:hover .ur svg { transform: translate(3px, -3px); }
.card-place { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; font: 700 15px/1 var(--mono); }
.card-place svg { width: 20px; height: 20px; }
.card-short { margin: 0; font-size: 15px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-facts { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-facts span { color: var(--ink); }

/* ---------- villa carousel (home) ---------- */
.rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 64px; }
.rail-head h2 { font-size: clamp(44px, 5vw, 76px); font-weight: 400; letter-spacing: .02em; }
.rail-arrows { display: flex; gap: 24px; }
.rail-arrows button { width: 48px; height: 40px; display: grid; place-items: center; transition: opacity .2s, transform .2s; }
.rail-arrows button svg { width: 40px; height: 30px; }
.rail-arrows button:disabled { opacity: .3; cursor: default; }
.rail-arrows button:not(:disabled):hover { transform: translateX(var(--nudge, 0)); }
.rail-arrows .r { --nudge: 4px; } .rail-arrows .l { --nudge: -4px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.rail::-webkit-scrollbar { display: none; }
.rail .villa-card { scroll-snap-align: start; }
.rail .card-media { aspect-ratio: 1.45 / 1; }
.rail-foot { margin-top: 64px; display: flex; justify-content: center; }

/* ---------- sage panel (pacing section, inset from page edges) ---------- */
.panel { margin: 0 clamp(0px, 3vw, 56px); background: var(--sage); color: var(--sage-ink); padding: clamp(56px, 6vw, 96px) clamp(20px, 4vw, 72px) clamp(56px, 6vw, 72px); }
.panel-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: start; margin-bottom: clamp(48px, 5vw, 72px); }
.panel .kicker { color: var(--sage-ink); display: inline-flex; align-items: center; gap: 12px; }
.panel .kicker svg { width: 18px; height: 18px; }
.panel h2 { font-size: clamp(40px, 4.6vw, 72px); font-weight: 400; letter-spacing: .02em; margin-top: 28px; }
.panel p { margin: 0; font-size: 17px; line-height: 1.7; }
.panel p + .pill { margin-top: 32px; }
.panel-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel-imgs figure { margin: 0; position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.panel-imgs img { width: 100%; height: 100%; object-fit: cover; }
.panel-imgs figcaption { position: absolute; left: 14px; bottom: 12px; color: #fff; font-size: 11px; opacity: .8; }
.pill-cream { border: 1px solid var(--sage-ink); color: var(--sage-ink); }
.pill-cream:hover { background: var(--sage-ink); color: var(--sage); }

/* ---------- editorial two-column intro ---------- */
.lede { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.lede .kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.lede h2 { font-size: clamp(40px, 4.6vw, 72px); font-weight: 400; letter-spacing: .02em; margin-top: 28px; }
.lede p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; }

/* ---------- feature band ---------- */
.band { position: relative; min-height: min(88vh, 880px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.5)); }
.band-inner { position: relative; z-index: 1; width: 100%; padding: 0 var(--gutter) 64px; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.band .kicker { color: rgba(255,255,255,.85); }
.band h2 { font-size: clamp(40px, 6vw, 88px); margin: 16px 0 12px; }
.band p { max-width: 520px; margin: 0; }
.band .note { position: absolute; z-index: 1; top: 24px; right: var(--gutter); font-size: 11px; opacity: .75; }

/* ---------- destinations ---------- */
/* Destinations: full-bleed video band with big clickable place names */
.places { position: relative; min-height: min(92vh, 860px); display: flex; color: #fff; overflow: hidden; background: var(--dark); }
.places-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.places-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(26,22,18,0) 0%, rgba(26,22,18,.28) 30%, rgba(26,22,18,.12) 55%, rgba(26,22,18,.72) 100%); }
.places-inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 120px; padding-bottom: 72px; }
.places-top { text-align: center; }
.places-top .kicker { color: rgba(255,255,255,.85); }
.places-top h2 { font-size: clamp(32px, 3vw, 44px); font-weight: 300; letter-spacing: .02em; margin: 20px 0 0; line-height: 1; }
.places-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.45); }
.place-link { display: flex; flex-direction: column; gap: 8px; padding: 22px 28px 4px 0; transition: opacity .5s ease; text-shadow: 0 1px 18px rgba(0,0,0,.25); }
.place-link + .place-link { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.45); }
.places-list:hover .place-link { opacity: .45; }
.places-list .place-link:hover { opacity: 1; }
.place-no { font: 400 11px/1 var(--mono); letter-spacing: .16em; opacity: .8; }
.place-name { font: 300 clamp(26px, 2.4vw, 34px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; display: inline-flex; align-items: flex-start; gap: 10px; }
.place-name .ur { display: inline-flex; width: 14px; opacity: 0; transform: translate(-6px, 6px); transition: opacity .4s, transform .4s; }
.place-name .ur svg { width: 100%; height: auto; }
.place-link:hover .ur { opacity: 1; transform: none; }
.place-blurb { font-size: 13px; line-height: 1.55; max-width: 34ch; opacity: .9; }
.place-count { font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .75; margin-top: 6px; }

/* ---------- stay longer ---------- */
.stay { position: relative; color: var(--bg); background: #0e0d0d url("../img/library/interiors/light-through-door.jpg") right center / auto 100% no-repeat; display: flex; align-items: center; aspect-ratio: 2.06 / 1; padding: 40px 0; }
.stay > .wrap { position: relative; width: 100%; }
.stay .kicker { color: var(--taupe); }
.stay-grid > div > p, .stay .points p { color: rgba(246,245,241,.72) !important; }
.stay .points li { border-color: rgba(246,245,241,.16) !important; }
.stay .pill-dark { background: var(--bg); color: var(--dark); }
.stay .pill-dark:hover { background: var(--taupe); }
.stay-grid { display: grid; grid-template-columns: 300px clamp(290px, 30vw, 440px); gap: 56px; align-items: center; margin-left: 0; }
.stay .points li { grid-template-columns: 36px 1fr; padding: 16px 0; }
.stay .points li::before { font-size: 16px; }
.stay .points h3 { font-size: 16px; margin-bottom: 4px; }
.stay .points p { font-size: 13px; line-height: 1.55; }
.stay h2 { font-size: clamp(32px, 3vw, 44px); margin: 18px 0 20px; }
.stay-grid > div > p { color: var(--ink-2); font-size: 14px; }
.points { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.points li { counter-increment: p; display: grid; grid-template-columns: 70px 1fr; padding: 28px 0; border-top: 1px solid var(--line); }
.points li:last-child { border-bottom: 1px solid var(--line); }
.points li::before { content: "0" counter(p); font: 300 22px/1.2 var(--display); color: var(--taupe); }
.points h3 { font-size: 20px; margin-bottom: 8px; }
.points p { margin: 0; color: var(--ink-2); }

/* ---------- owners split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.split-img { aspect-ratio: 4 / 5; overflow: hidden; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split h2 { font-size: clamp(32px, 4vw, 58px); margin: 20px 0 24px; }
.split p { color: var(--ink-2); max-width: 480px; margin: 0 0 34px; }

/* ---------- instagram ---------- */
.insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 48px; }
.insta-grid a { aspect-ratio: 1; overflow: hidden; }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s, opacity .3s; }
.insta-grid a:hover img { transform: scale(1.05); opacity: .85; }

/* ---------- newsletter ---------- */
.news { text-align: center; max-width: 620px; margin: 0 auto; }
.news h2 { font-size: clamp(26px, 3vw, 40px); margin: 18px 0 30px; }
.news form { display: flex; border-bottom: 1px solid var(--ink); }
.news input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 14px 0; font-size: 15px; }
.news button { font: 400 13px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; padding-left: 20px; }
.news .msg { min-height: 24px; margin-top: 12px; color: var(--sage); font-size: 14px; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: rgba(246,245,241,.72); padding: clamp(48px, 5vw, 72px) 0 24px; font-size: 13px; }
.footer-logo { font: 300 clamp(44px, 6.5vw, 96px)/.85 var(--display); letter-spacing: .1em; color: #fff; margin-bottom: clamp(32px, 3.5vw, 48px); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: space-between; gap: 32px; padding-bottom: clamp(32px, 4vw, 48px); }
.site-footer h4 { font-size: 12px; letter-spacing: .2em; color: #fff; margin-bottom: 14px; font-weight: 400; }
.footer-cols a { display: block; margin-bottom: 6px; }
.site-footer a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; font-size: 11px; letter-spacing: .08em; }

.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--ink); background: var(--bg); display: grid; place-items: center; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s, background .2s; }
.to-top svg { width: 26px; height: 26px; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--ink); color: #fff; }

/* =============================================================
   LISTING PAGE
============================================================= */
.list-head { padding-top: calc(var(--header-h) + 64px); padding-bottom: 40px; }
/* villas hero: palm shadows aerial behind the intro AND the top of the listing (sized in villas.js fitHero) */
.vl-top { position: relative; overflow: hidden; }
.vl-hero-img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.18) 86%, transparent 93%);
          mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.18) 86%, transparent 93%); }
.vl-top::before { content: ""; position: absolute; inset: 0 0 auto; height: 760px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(246,245,241,.62) 0%, rgba(246,245,241,.4) 60%, rgba(246,245,241,0) 100%); }
.vl-top .list-head, .vl-top .listing { position: relative; z-index: 2; }
.vl-top .list-head { text-align: center; padding-top: calc(var(--header-h) + 34px); padding-bottom: 98px; }
.vl-top .list-head .kicker { justify-content: center; }
.vl-top .list-head .list-sub { max-width: none; margin: 14px auto 0; font: 400 clamp(20px, 1.9vw, 28px)/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #12100d; }
.list-lead { max-width: 660px; margin: 16px auto 0; }
.vl-top .list-head .list-lead p { max-width: none; margin: 0 auto; font: italic 600 22px/1.5 "Cormorant Garamond", Georgia, serif; color: #000; text-shadow: 0 0 10px rgba(246,245,241,.85), 0 0 2px rgba(246,245,241,.6); }
.vl-top .list-head .kicker { color: #2b2823; }
.vl-top .list-head .list-lead p + p { margin-top: 14px; }
/* toolbar + sidebar text sits over the surf: give them a soft paper wash so they stay legible */
.vl-top .toolbar, .vl-top .f-title { text-shadow: 0 0 14px rgba(246,245,241,.9); }
.list-head h1 { font-size: clamp(44px, 7vw, 104px); letter-spacing: .06em; }
.list-head p { color: var(--ink-2); margin: 16px 0 0; max-width: 520px; }

.listing { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 4vw, 72px); padding-bottom: 140px; align-items: start; }

/* sidebar — modelled on the reference: title, availability pill, stepper, collapsibles, Apply */
.filters { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; padding: 4px 0 24px 32px; border-left: 1px solid var(--line); order: 2; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.f-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.f-title h2 { font-size: 34px; letter-spacing: .04em; text-transform: none; font-weight: 300; }
.f-clear { font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.f-clear:hover { color: var(--brown); }
.f-close { display: none; width: 32px; height: 32px; }
.f-close svg { width: 26px; height: 26px; }
.f-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--ink-2); }
.f-label { font: 300 19px/1.2 var(--display); letter-spacing: .03em; }
.f-avail { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.f-avail .f-label { display: block; padding-bottom: 14px; border-bottom: 1px solid var(--ink-2); margin-bottom: 14px; }
.date-btn { display: block; margin-left: auto; height: 44px; padding: 0 22px; border: 1px solid var(--ink); border-radius: 999px; font: 300 16px/1 var(--display); letter-spacing: .03em; transition: background .2s, color .2s; }
.date-btn:hover, .date-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
.date-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.date-panel label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px; }
.date-panel input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 6px 0; font-size: 13px; outline: none; }
.step-ctrl { display: flex; align-items: center; gap: 16px; }
.step-ctrl button { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink-2); transition: color .2s; }
.step-ctrl button svg { width: 24px; height: 24px; }
.step-ctrl button:hover:not(:disabled) { color: var(--ink); }
.step-ctrl button:disabled { opacity: .3; cursor: default; }
.step-ctrl output { min-width: 22px; text-align: center; font: 300 20px/1 var(--display); }
.f-group { border-bottom: 1px solid var(--ink-2); }
.f-group > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer; }
.f-group > summary::-webkit-details-marker { display: none; }
.f-group > summary svg { width: 22px; height: 22px; transition: transform .25s; }
.f-group[open] > summary svg { transform: rotate(180deg); }
.f-group .f-n { font: 400 12px/1 var(--mono); margin-left: 8px; color: var(--muted); }
.f-section { padding-top: 22px; }
.f-section > .f-label { display: block; margin-bottom: 4px; }
.f-section .f-group { border-bottom: 0; }
.f-section .f-group > summary { padding: 10px 0; }
.f-section .f-group:last-child { border-bottom: 1px solid var(--ink-2); padding-bottom: 8px; }
.f-body { padding: 0 0 18px; }
.check { display: flex; align-items: center; gap: 12px; padding: 5px 0; cursor: pointer; font-size: 14px; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box { width: 15px; height: 15px; border: 1px solid var(--ink-2); display: grid; place-items: center; flex: none; transition: background .15s; }
.check .box svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.check input:checked + .box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .box svg { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--taupe); outline-offset: 2px; }
.check .n { margin-left: auto; font-size: 12px; color: var(--muted); }
.check.disabled { opacity: .35; }
.check.parent { font-weight: 700; }
.check.child { padding-left: 27px; }
.f-apply { margin-top: 28px; display: flex; align-items: center; gap: 16px; }
.f-apply .pill { height: 52px; padding: 0 40px; font: 300 18px/1 var(--display); letter-spacing: .04em; text-transform: none; }
.f-apply .pill[disabled] { opacity: .35; cursor: default; }
.f-preview { font-size: 12px; color: var(--muted); }
/* compact filters (Lance: "a little oversized") */
.f-title { margin-bottom: 14px; }
.f-title h2 { font-size: 26px; }
.f-clear { font-size: 12px; }
.f-label { font-size: 16px; }
.f-row, .f-group > summary { padding: 12px 0; }
.f-avail { padding: 12px 0 14px; }
.f-avail .f-label { padding-bottom: 10px; margin-bottom: 10px; }
.date-btn { height: 36px; padding: 0 18px; font-size: 14px; }
.step-ctrl { gap: 12px; }
.step-ctrl button, .step-ctrl button svg { width: 20px; height: 20px; }
.step-ctrl output { font-size: 16px; min-width: 18px; }
.f-group > summary svg { width: 18px; height: 18px; }
.f-section { padding-top: 16px; }
.f-section .f-group > summary { padding: 7px 0; }
.f-body { padding-bottom: 12px; }
.check { font-size: 13px; padding: 4px 0; }
.f-apply { margin-top: 20px; }
.f-apply .pill { height: 42px; padding: 0 30px; font-size: 15px; }
.vl-top .filters { padding-top: 14px; padding-left: 24px; }

/* results */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.count { font: 300 22px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.toolbar-right { display: flex; align-items: center; gap: 18px; }
.sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sort select { border: 0; background: transparent; font-size: 13px; color: var(--ink); padding: 4px 22px 4px 0; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151515' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 14px; outline: none; }
.open-filters { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.chips:empty { margin-bottom: 18px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; }
.chip button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.chip button svg { width: 12px; height: 12px; }
.chip button:hover { background: var(--ink); color: #fff; }
.listing .villa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 32px; }
.empty { text-align: center; padding: 100px 20px; border: 1px solid var(--line); }
.empty h3 { font-size: 30px; margin-bottom: 12px; }
.empty p { color: var(--muted); margin: 0 0 28px; }
.load-more { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 72px; font-size: 13px; color: var(--muted); }

/* =============================================================
   VILLA PAGE
============================================================= */
.villa-page { padding-top: var(--header-h); }
.v-hero { position: relative; height: calc(100svh - var(--header-h)); min-height: 480px; max-height: 900px; overflow: hidden; }
.v-hero img { width: 100%; height: 100%; object-fit: cover; }
.v-hero .all { position: absolute; right: var(--gutter); bottom: 28px; background: var(--bg); }
.v-hero .note { position: absolute; left: var(--gutter); bottom: 34px; color: #fff; font-size: 11px; opacity: .8; }
.v-intro { padding: 72px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(40px, 7vw, 120px); align-items: start; }
.crumbs { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.v-intro h1 { font-size: clamp(42px, 6vw, 88px); margin: 22px 0 22px; }
.v-facts { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 0 36px; }
.v-facts div { padding: 18px 28px 18px 0; margin-right: 28px; border-right: 1px solid var(--line); }
.v-facts div:last-child { border-right: 0; }
.v-facts strong { display: block; font: 300 28px/1 var(--display); }
.v-facts span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.v-lead { font-size: 17px; color: var(--ink-2); max-width: 640px; margin: 0; }
.v-section { padding: 48px 0; border-top: 1px solid var(--line); }
.v-section h2 { font-size: 22px; letter-spacing: .14em; margin-bottom: 28px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: baseline; }
.ticks li::before { content: "—"; color: var(--taupe); }
.amen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.amen h4 { font-size: 15px; letter-spacing: .14em; margin-bottom: 14px; font-weight: 400; }
.amen ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; color: var(--ink-2); font-size: 14px; }
.v-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.v-gallery button { overflow: hidden; aspect-ratio: 4 / 3; }
.v-gallery button:first-child { grid-column: span 2; aspect-ratio: 16 / 8; }
.v-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s; }
.v-gallery button:hover img { transform: scale(1.03); }
.book { position: sticky; top: calc(var(--header-h) + 32px); border: 1px solid var(--ink); padding: 32px; background: var(--bg); }
.book .from { font-size: 13px; color: var(--muted); }
.book .price { font: 300 44px/1 var(--display); margin: 6px 0 4px; }
.book .label { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line); padding: 6px 10px; margin: 10px 0 0; }
.book form { margin-top: 26px; }
.bk-f { border-bottom: 1px solid var(--line); padding: 10px 0; }
.bk-f label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bk-f input, .bk-f select { width: 100%; border: 0; background: transparent; outline: none; font-size: 15px; padding: 4px 0 0; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bk-est { display: flex; justify-content: space-between; padding: 16px 0 0; font-size: 14px; }
.book .pill { width: 100%; margin-top: 24px; height: 54px; }
.book small { display: block; text-align: center; margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.similar { padding: 120px 0; border-top: 1px solid var(--line); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(21,21,21,.97); display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; }
.lightbox button { position: absolute; color: #fff; width: 56px; height: 56px; display: grid; place-items: center; }
.lightbox button svg { width: 32px; height: 32px; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 22px; color: #fff; font-size: 12px; letter-spacing: .16em; }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 1200px) {
  .villa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing .villa-grid { grid-template-columns: 1fr; }
  .nav-left { gap: 22px; }
}
@media (max-width: 1100px) {
  .listing .villa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  :root { --header-h: 68px; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav-left, .hide-sm { display: none; }
  .logo { grid-column: 1; align-items: flex-start; font-size: 24px; padding-left: 0; }
  .logo small { padding-left: 0; }
  .nav-right { grid-column: 3; gap: 16px; }
  .menu-btn { display: block; }
  .split { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }

  .rail { grid-auto-columns: calc((100% - 16px) / 2); }
  .panel-top, .lede { grid-template-columns: 1fr; gap: 28px; }
  .listing { grid-template-columns: 1fr; }
  .open-filters { display: inline-flex; height: 38px; padding: 0 20px; }
  .filters { position: fixed; inset: 0; z-index: 90; max-height: none; background: var(--bg); border: 0; padding: 28px var(--gutter) 40px; transform: translateY(100%); transition: transform .35s ease; }
  .filters-open .filters { transform: none; }
  .filters-open { overflow: hidden; }
  .f-close { display: grid; }
  .v-intro { grid-template-columns: 1fr; }
  .book { position: static; }
}
@media (max-width: 640px) {
  .villa-grid, .listing .villa-grid { grid-template-columns: 1fr; }
  .villa-grid { gap: 56px; }
  .rail { grid-auto-columns: 86%; }
  .rail-head { margin-bottom: 36px; }
  .panel-imgs { grid-template-columns: 1fr; gap: 12px; }
  .tag { top: 14px; left: 14px; font-size: 12px; padding: 9px 12px; }
  .nav-right .pill { display: none; }
  .hero-foot { flex-direction: column; gap: 18px; }
  .hero-book { position: static; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .amen { grid-template-columns: 1fr 1fr; }
  .v-facts div { padding-right: 18px; margin-right: 18px; }
  .to-top { width: 48px; height: 48px; right: 16px; bottom: 16px; }
  .band { min-height: min(72vh, 640px); }
}

/* =============================================================
   BOOKING FORM
============================================================= */
.book-page { padding-top: calc(var(--header-h) + 72px); padding-bottom: 140px; }
.book-head { max-width: 760px; margin-bottom: 72px; }
.book-head h1, .bk-done h1 { font-size: clamp(48px, 7vw, 104px); font-weight: 400; letter-spacing: .02em; margin: 22px 0 22px; }
.book-head p:last-child { font-size: 16px; margin: 0; max-width: 600px; }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(40px, 7vw, 120px); align-items: start; }
.bk-form fieldset { border: 0; margin: 0 0 64px; padding: 0; }
.bk-form legend { display: flex; align-items: baseline; gap: 18px; width: 100%; padding: 0 0 18px; margin-bottom: 30px; border-bottom: 1px solid var(--dark); font: 400 clamp(26px, 2.6vw, 36px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.bk-form legend span { font: 700 14px/1 var(--mono); color: var(--muted); }
.fld { margin-bottom: 28px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fld label, .fld .lbl { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.fld input, .fld select, .fld textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 8px 0 10px; font-size: 16px; outline: none; border-radius: 0; transition: border-color .2s; }
.fld select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4237' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; background-size: 16px; padding-right: 26px; }
.fld textarea { resize: vertical; border: 1px solid var(--line); padding: 12px 14px; line-height: 1.6; }
.fld input:focus, .fld select:focus { border-color: var(--dark); }
.fld textarea:focus { border-color: var(--dark); }
.fld input::placeholder, .fld textarea::placeholder { color: #b0aa9e; }
.fld.invalid input, .fld.invalid select { border-color: #a4503a; }
.fld.invalid label { color: #a4503a; }
.stepper-fld .step-ctrl { padding: 6px 0 10px; border-bottom: 1px solid var(--line); justify-content: space-between; }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice label { margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: inline-block; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; font: 300 16px/1 var(--display); letter-spacing: .03em; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.choice label:hover span { border-color: var(--dark); }
.choice input:checked + span { background: var(--dark); color: var(--bg); border-color: var(--dark); }
.choice input:focus-visible + span { outline: 2px solid var(--sage); outline-offset: 2px; }
.bk-submit { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.bk-submit .pill { height: 58px; padding: 0 48px; font: 300 19px/1 var(--display); letter-spacing: .04em; text-transform: none; }
.bk-submit .pill[disabled] { opacity: .5; }
.bk-err { color: #a4503a; font-size: 14px; margin: 0; }
.bk-summary { position: sticky; top: calc(var(--header-h) + 32px); background: var(--sage); color: var(--sage-ink); padding: 18px 18px 28px; }
.sum-img { aspect-ratio: 1.45 / 1; overflow: hidden; margin-bottom: 24px; }
.sum-img img { width: 100%; height: 100%; object-fit: cover; }
.bk-summary h3 { font-size: 28px; font-weight: 400; letter-spacing: .02em; padding: 0 6px; }
.bk-summary .card-place { padding: 0 6px; margin: 14px 0 22px; }
.bk-summary dl { margin: 0; padding: 0 6px; }
.bk-summary dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(246,245,241,.3); font-size: 14px; }
.bk-summary dt { opacity: .8; }
.bk-summary dd { margin: 0; text-align: right; }
.bk-summary .est { font-weight: 700; }
.sum-note { font-size: 12.5px; line-height: 1.6; opacity: .85; padding: 0 6px; margin: 16px 0 0; }
.bk-done { max-width: 680px; padding: 40px 0 80px; }
.bk-done p { font-size: 17px; margin: 0 0 36px; }
@media (max-width: 980px) {
  .book-grid { grid-template-columns: 1fr; }
  .bk-summary { position: static; order: -1; }
}
@media (max-width: 640px) {
  .fld-row { grid-template-columns: 1fr; gap: 0; }
  .bk-submit .pill { width: 100%; }
}

/* =============================================================
   MANAGEMENT PAGE
============================================================= */
.m-hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: w; border-top: 1px solid rgba(246,245,241,.35); }
.why-grid li { counter-increment: w; padding: 36px 32px 40px 0; border-bottom: 1px solid rgba(246,245,241,.35); }
.why-grid li:not(:nth-child(3n)) { border-right: 1px solid rgba(246,245,241,.35); }
.why-grid li:not(:nth-child(3n+1)) { padding-left: 32px; }
.why-grid li::before { content: "0" counter(w); display: block; font: 700 14px/1 var(--mono); opacity: .75; margin-bottom: 26px; }
.why-grid h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 400; letter-spacing: .02em; margin-bottom: 14px; }
.why-grid p { font-size: 15px !important; }
.compare { border-top: 1px solid var(--dark); }
.c-row { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.c-row > span:first-child { font: 400 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.c-row > span:nth-child(2) { color: var(--muted); }
.c-row > span:nth-child(3) { color: var(--ink); font-weight: 700; }
.c-head { padding: 16px 0; }
.c-head span { font: 400 12px/1 var(--mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--muted) !important; }
.c-head span:last-child { color: var(--ink) !important; font-weight: 700; }
.stay .lede h2, .stay .lede p { color: var(--bg); }
.stay .lede p { opacity: .8; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.plan { border: 1px solid rgba(246,245,241,.25); padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; }
.plan h3 { font-size: clamp(30px, 3vw, 44px); font-weight: 400; letter-spacing: .02em; margin: 18px 0 14px; }
.plan > p { margin: 0 0 24px; opacity: .8; }
.plan ul { list-style: none; padding: 0; margin: 0 0 28px; }
.plan li { padding: 11px 0; border-top: 1px solid rgba(246,245,241,.15); font-size: 15px; }
.plan li::before { content: "—"; margin-right: 12px; color: var(--taupe); }
.plan .fee { margin: auto 0 0; padding-top: 20px; border-top: 1px solid rgba(246,245,241,.35); font-size: 14px; opacity: 1; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.steps li { border-top: 1px solid var(--dark); padding-top: 26px; }
.steps span { font: 700 14px/1 var(--mono); color: var(--muted); }
.steps h3 { font-size: 26px; font-weight: 400; letter-spacing: .02em; margin: 22px 0 12px; }
.steps p { margin: 0; font-size: 15px; }
.faq { border-top: 1px solid var(--dark); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; font: 300 21px/1.3 var(--display); letter-spacing: .02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; transition: transform .25s; flex: none; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: 0 0 24px; font-size: 15px; max-width: 620px; }
#enquire .bk-done { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-grid li { padding: 30px 20px 32px 0 !important; border-right: 0 !important; }
  .why-grid li:nth-child(odd) { border-right: 1px solid rgba(246,245,241,.35) !important; }
  .why-grid li:nth-child(even) { padding-left: 20px !important; }
  .plans { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
}
@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-grid li { border-right: 0 !important; padding-left: 0 !important; }
  .c-row { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .c-row > span:first-child { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  .places-list { grid-template-columns: 1fr; }
  .place-link, .place-link + .place-link { padding: 22px 0; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.35); }
  .places-list:hover .place-link { opacity: 1; }
  .place-name .ur { opacity: 1; transform: none; }
  .places-inner { padding-top: 96px; padding-bottom: 32px; gap: 64px; }
}

@media (max-width: 800px) {
  .stay { background-size: cover; background-position: 80% center; }
  .stay::before { content: ""; position: absolute; inset: 0; background: rgba(14,13,13,.6); }
  .stay-grid { grid-template-columns: 1fr; gap: 40px; }
  .stay { aspect-ratio: auto; padding: 80px 0; }
}

/* Nysa: offer card, roughly one villa-card in size */
.offer-wrap { padding: 0 var(--gutter) clamp(64px, 8vw, 112px); margin-top: calc(-1 * clamp(24px, 5vw, 80px)); }
.offer { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; background: var(--sage); color: var(--sage-ink); transition: background .3s; }
.offer:hover { background: var(--dark); }
.offer-img { width: 100%; aspect-ratio: 1.45 / 1; object-fit: cover; display: block; }
.offer-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 8px; }
.offer-kicker { font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .8; display: inline-flex; align-items: center; gap: 8px; }
.offer-kicker svg { width: 12px; height: 12px; }
.offer-title { font: 400 26px/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.offer-text { font-size: 13px; line-height: 1.6; opacity: .85; }
.offer-cta { font: 400 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px 24px; }
.offer-cta svg { width: 16px; height: 16px; transition: transform .3s; }
.offer:hover .offer-cta svg { transform: translateX(4px); }

/* Owners: compact, small image */
.owners { display: grid; grid-template-columns: 240px minmax(0, 460px); gap: clamp(32px, 5vw, 72px); align-items: center; justify-content: center; }
.owners-img { aspect-ratio: 4 / 5; overflow: hidden; }
.owners-img img { width: 100%; height: 100%; object-fit: cover; }
.owners h2 { font-size: clamp(28px, 2.6vw, 38px); margin: 16px 0 16px; }
.owners p { color: var(--ink-2); font-size: 14px; margin: 0 0 26px; }

@media (max-width: 640px) {
  .owners { grid-template-columns: 1fr; }
  .owners-img { width: 180px; }
}

/* Villas coverflow */
.flow-head { text-align: center; margin-bottom: 40px; }
.flow-head h2 { font-size: clamp(32px, 3vw, 44px); margin: 0; letter-spacing: .08em; }
.flow-nav { gap: 64px; }
.flow { position: relative; height: 442px; overflow: hidden; outline: none; touch-action: pan-y; user-select: none; }
.fc { position: absolute; top: 0; left: 50%; width: 340px; height: 442px; display: flex; flex-direction: column; background: var(--sage); color: var(--sage-ink);
  transition: transform .7s cubic-bezier(.22,.7,.2,1), opacity .7s ease; cursor: pointer; transform-origin: center center; }
.fc.on { cursor: default; }
.fc-media { position: relative; display: block; height: 100%; flex: none; overflow: hidden; transition: height .7s cubic-bezier(.22,.7,.2,1); }
.fc.on .fc-media { height: 235px; cursor: pointer; }
.fc-media img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.fc-veil { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5)); color: #fff;
  font: 400 19px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; transition: opacity .5s; }
.fc.on .fc-veil { opacity: 0; }
.fc-body { flex: 1; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; min-height: 0; opacity: 0; transition: opacity .4s ease; }
.fc.on .fc-body { opacity: 1; transition-delay: .3s; }
.fc-kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 400 10px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.fc-kicker svg { width: 12px; height: 12px; flex: none; }
.fc-title { margin: 4px 0 0; font: 400 24px/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.fc-text { margin: 0; font-size: 12px; line-height: 1.6; opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fc-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font: 400 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.fc-cta svg { width: 16px; height: 16px; transition: transform .3s; }
.fc-cta:hover svg { transform: translateX(4px); }
.flow-nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 28px 0 8px; font: 400 11px/1 var(--mono); letter-spacing: .18em; color: var(--muted); }
.flow-nav button { width: 40px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.flow-nav button svg { width: 34px; height: 14px; }
@media (max-width: 640px) {
  .flow, .fc { height: 400px; }
  .fc { width: 250px; }
  .fc.on .fc-media { height: 172px; }
  .fc-title { font-size: 21px; }
}

/* Pacing: tighter intro -> villas -> destinations */
.intro { padding-bottom: clamp(48px, 6vw, 88px); }
.lede h2 { font-size: clamp(32px, 3.4vw, 50px); }
.lede p { font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.flow-sec { padding-bottom: clamp(16px, 2vw, 28px); }
.flow-head { margin-bottom: 28px; }
.flow-nav { margin: 22px 0 0; }
.flow-sec .rail-foot { margin-top: 26px; }
/* soft fade from the page colour into the destinations video */
.places::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 150px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(246,245,241,.75) 30%, rgba(246,245,241,.25) 65%, rgba(246,245,241,0) 100%); }
.places-inner { padding-top: 170px; z-index: 2; }
@media (max-width: 800px) {
  .places::before { height: 150px; }
  .places-inner { padding-top: 150px; }
}

/* Intro: always stacked top-to-bottom and centred, at every screen width */
.lede { grid-template-columns: 1fr; gap: 36px; justify-items: center; text-align: center; }
.lede > div { max-width: 760px; width: 100%; }
.lede h2 { margin-top: 22px; }
.lede .kicker { justify-content: center; }
.lede p { margin-left: auto; margin-right: auto; }

/* villas page: text that sits over the surf gets a frosted paper backing so the ocean can run under the listing */
.vl-top .list-head .kicker { margin-left: auto; margin-right: auto; }
.vl-top .card-body { background: rgba(245,249,249,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 22px 18px 16px; }
.vl-top .filters { background: rgba(245,249,249,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-top: 18px; padding-right: 20px; }
.vl-top .toolbar { background: rgba(245,249,249,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 14px 16px; }
@media (max-width: 980px) { .vl-top .filters { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* villas page: sea-glass blue page colour, sampled from the foam, so the surf fades into it */
html:has(body[data-page="villas"]) { background: #dae7e8; }
body[data-page="villas"] { background: transparent; }
/* faded sea-foam backdrop, fixed behind the whole page (pseudo-element so it also stays put on iOS) */
body[data-page="villas"]::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(222,233,234,.66); }
/* moving sea: two layers of the same foam photo (one mirrored, semi-transparent) drift against each other
   as you scroll (villas.js). The overlap shifts the foam pattern so the water seems to move. */
.sea { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.sea i { position: absolute; inset: -12%; background: url("../img/library/textures/foam-backdrop.jpg") center / cover no-repeat; will-change: transform; }
.sea .sea-b { opacity: .42; }
@media (max-width: 980px) { body[data-page="villas"] .vl-top .filters { background: #dae7e8; } }

@media (max-width: 640px) { .vl-top .list-head .list-lead p { font-size: 19px; line-height: 1.5; } }

/* Laptop and desktop: cards and filters share one 3-column grid. The filters take the right column for the
   first rows only, and once you scroll past them the villas fill all three columns.
   (The results section and the card grid use display:contents so their children join .listing's grid.) */
@media (min-width: 981px) {
  .listing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(20px, 2.4vw, 32px); }
  .listing > section, .listing .villa-grid { display: contents; }
  .listing .toolbar { grid-column: 1 / 3; grid-row: 1; margin-bottom: 0; }
  .listing .chips { grid-column: 1 / 3; margin: -24px 0 0; }
  .listing .chips:empty { display: none; }
  .listing .filters { grid-column: 3; grid-row: 1 / span var(--fspan, 3); } /* --fspan measured in villas.js */
  .listing .load-more { grid-column: 1 / -1; margin-top: 16px; }
}