/* Jesselton Courtyard – Medan landing page
   Quiet, photo-led: city → neighbourhood → estate → club → homes → rooms → questions → invitation. */

:root {
  --paper: #f5f5f1;
  --ink: #18221a;
  --ink-2: #2a352c;   /* secondary text on the coloured grounds */
  --muted: #4a564e;   /* secondary text on paper and pale sage only */
  --c1: #eaeee5;      /* pale sage */
  --c2: #c8d3c0;      /* sage */
  --c3: #a9bccb;      /* brand blue-grey */
  --c4: #8ea586;      /* brand green */
  --c5: #2f3b2c;      /* deep green */
  --accent: #3e5a3a;
  --error: #9a2b1d;
  --rule: rgba(24, 34, 26, .16);
  --serif: "Gilda Display", "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: clamp(20px, 4vw, 56px);
  --px: max(var(--m), calc((100vw - 1440px) / 2));
  --gap: clamp(88px, 11vw, 168px);
  --s-small: 15px;
  --s-body: clamp(17px, 1.15vw, 18px);
  --s-mid: clamp(20px, 1.6vw, 24px);
  --s-h3: clamp(26px, 2.2vw, 34px);
  --s-h2: clamp(34px, 4.4vw, 64px);
  --s-hero: clamp(46px, 7.4vw, 96px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; scrollbar-color: var(--c4) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--s-body)/1.6 var(--sans); overflow-x: hidden; caret-color: var(--accent); }
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: var(--s-h2); }
h3 { font-size: var(--s-h3); }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
.body { max-width: 56ch; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--c4); color: var(--ink); }
figcaption { padding-top: 12px; font-size: var(--s-small); color: var(--muted); }

/* Buttons: solid, square-shouldered */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; border: 0; border-radius: 2px;
  font: 500 var(--s-body)/1 var(--sans); letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-dark { background: var(--c5); color: var(--paper); }
.btn-dark:hover { background: var(--accent); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: var(--s-small); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-light:focus-visible { outline-color: var(--paper); }

/* Shared split: heading left, text right */
.split { display: grid; gap: 24px; }
.split-body { display: grid; gap: 22px; }
.statement { font: 400 clamp(24px, 2.3vw, 32px)/1.3 var(--serif); max-width: 32ch; }
@media (min-width: 900px) {
  .split { grid-template-columns: 6fr 5fr; gap: var(--m); align-items: end; }
}

/* ---------- 1. Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; color: var(--paper); background: var(--c5); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 55%; animation: settle 2.6s var(--ease) both; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 14, .72) 0%, rgba(10, 20, 14, .34) 48%, rgba(10, 20, 14, .14) 100%); }
.hero-logo { position: absolute; z-index: 2; top: 24px; left: var(--m); width: clamp(120px, 13vw, 184px); }
.hero-copy { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(32px, 6vh, 72px); display: grid; gap: 18px; justify-items: start; }
.hero h1 { font-size: var(--s-hero); line-height: .98; max-width: 8.5em; }
.hero-sub { max-width: 34ch; font-size: var(--s-mid); line-height: 1.4; }
.hero-event { font: 500 var(--s-body)/1.45 var(--sans); letter-spacing: .02em; }
.hero-copy .btn { margin-top: 6px; }
@keyframes settle { from { transform: scale(1.05); } to { transform: none; } }
@media (min-width: 900px) {
  .hero-logo { top: 36px; }
  .hero-copy { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--m); row-gap: 20px; left: var(--px); right: var(--px); }
  .hero h1, .hero-sub { grid-column: 1; }
  .hero-event { grid-column: 2; grid-row: 1; text-align: right; align-self: end; }
  .hero-copy .btn { grid-column: 2; grid-row: 2; justify-self: end; margin: 0; }
}

/* ---------- Top bar: appears once the hero has gone, steps aside at the form ---------- */
.bar { position: fixed; z-index: 30; inset: 0 0 auto 0; height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--m); background: var(--paper); box-shadow: 0 1px 0 var(--rule), 0 8px 24px -16px rgba(24, 34, 26, .35);
  transform: translateY(-110%); transition: transform .5s var(--ease); }
.bar.show { transform: none; }
.bar-mark { width: 116px; }

/* ---------- Ad film ---------- */
.film { padding: clamp(40px, 6vw, 88px) var(--px) 0; }
.film[hidden] { display: none; }
.film-frame > video { width: 100%; aspect-ratio: 16 / 9; background: var(--c5); }
.film-frame > video[hidden], .film-ph[hidden] { display: none; }
.film-ph { aspect-ratio: 16 / 9; background: var(--c5); color: var(--paper); display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; }
.film-ph-t { font: 400 var(--s-mid)/1.2 var(--serif); }
.film-ph-d { max-width: 44ch; font-size: var(--s-small); color: #c9d1c4; }

/* ---------- 2. Why Penang ---------- */
.penang { padding: var(--gap) var(--px); display: grid; gap: clamp(48px, 6vw, 88px); }
.pano > img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 80%; }
.life { list-style: none; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
  margin: 0 calc(var(--m) * -1); padding: 0 var(--m) 8px; scrollbar-width: none; }
.life::-webkit-scrollbar { display: none; }
.life-card { flex: 0 0 74%; scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.life-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.life-card h3 { font-size: var(--s-mid); margin-top: 10px; }
.life-card p { color: var(--muted); max-width: 30ch; }
@media (min-width: 900px) {
  .life { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; gap: clamp(20px, 2vw, 32px); }
}

/* ---------- 3. Location ---------- */
.where { padding: var(--gap) var(--px); display: grid; gap: 40px; background: var(--c1); }
.where-head { display: grid; gap: 22px; }
.where-head h2 { max-width: 13em; }
.sheet h3 { font-size: var(--s-h3); }
.sheet-tabs { display: none; }
.js .sheet-tabs { display: flex; gap: 0; margin-top: 22px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.sheet-tabs button { flex: none; min-height: 48px; padding: 0 16px; border: 0; background: none; color: var(--muted); font: 500 var(--s-small)/1 var(--sans); letter-spacing: .02em; cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent; transition: color .3s var(--ease), box-shadow .3s var(--ease); }
.sheet-tabs button:first-child { padding-left: 0; }
.sheet-tabs button:hover { color: var(--ink); }
.sheet-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.sheet-group { margin-top: 28px; }
.sheet-group h4 { font-size: var(--s-mid); margin-bottom: 14px; }
.js .sheet-group { display: none; }
.js .sheet-group.on { display: block; animation: fade .4s var(--ease); }
.js .sheet-group h4 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dist { list-style: none; display: grid; }
.dist li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.km { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.sheet-sub { margin-top: 24px; font-weight: 500; }
.names { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.names li::before { content: ""; display: inline-block; width: 12px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--accent); }
.sheet-foot { margin-top: 24px; font-size: var(--s-small); color: var(--muted); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 900px) {
  .where { grid-template-columns: 6fr 5fr; column-gap: var(--m); align-items: start; }
  .where-head { position: sticky; top: 108px; }
}

/* ---------- 4. Estate ---------- */
.estate-photo { position: relative; height: 86svh; min-height: 480px; overflow: hidden; color: var(--paper); }
.estate-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.estate-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(to top, rgba(10, 20, 14, .62), rgba(10, 20, 14, 0)); }
.estate-photo h2 { position: absolute; z-index: 1; left: var(--px); right: var(--m); bottom: clamp(32px, 5vw, 64px); max-width: 11em; font-size: clamp(38px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.02em; }
.estate-nums { display: grid; gap: 28px; padding: 64px var(--px) 0; }
.estate-nums > div { padding-top: 18px; border-top: 1px solid var(--rule); }
.estate-nums dt { font: 400 clamp(36px, 4.4vw, 64px)/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.estate-nums dd { margin-top: 10px; color: var(--muted); font-size: var(--s-small); max-width: 24ch; }
.estate-concept { display: grid; gap: 40px; padding: clamp(72px, 8vw, 120px) var(--px) var(--gap); align-items: center; }
.estate-aerial img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.concepts { display: grid; gap: 20px; }
.concepts h3 { max-width: 18ch; }
.concepts ul { list-style: none; display: grid; }
.concepts li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.concepts li strong { font: 400 var(--s-mid)/1.25 var(--serif); }
.concepts li span { color: var(--muted); }
@media (min-width: 900px) {
  .estate-photo { height: 92svh; }
  .estate-nums { grid-template-columns: repeat(3, 1fr); gap: var(--m); padding-top: 80px; }
  .estate-concept { grid-template-columns: 7fr 5fr; gap: calc(var(--m) * 1.5); }
}

/* ---------- 5. Club / facilities ---------- */
.club { padding: var(--gap) var(--px); display: grid; gap: clamp(40px, 5vw, 72px); background: var(--c3); --muted: var(--ink-2); }
.club figcaption { color: var(--ink-2); }
.club-grid { display: grid; gap: 28px; }
.tile img, .tile video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c5); }
.also { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(24, 34, 26, .22); }
.also h3 { font-size: var(--s-mid); }
.also p { max-width: 70ch; }
@media (min-width: 900px) {
  .club-grid { grid-template-columns: repeat(12, 1fr); gap: 40px clamp(20px, 2vw, 32px); }
  .t-a { grid-column: 1 / 8; grid-row: 1 / 3; display: flex; flex-direction: column; }
  .t-a video { flex: 1; aspect-ratio: auto; height: 100%; }
  .t-b { grid-column: 8 / 13; }
  .t-c { grid-column: 8 / 13; }
  .t-d { grid-column: 1 / 13; }
  .t-d img { aspect-ratio: 21 / 8; }
  .also { grid-template-columns: 4fr 8fr; column-gap: var(--m); align-items: baseline; }
}

/* ---------- 6. Homes ---------- */
.homes { padding: var(--gap) var(--px); display: grid; gap: clamp(56px, 7vw, 104px); background: var(--c4); --muted: var(--ink-2); }
.home { display: grid; gap: 28px; }
.home-img img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; }
.home-text { display: grid; gap: 18px; align-content: start; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 8px; }
.facts > div { padding-top: 12px; border-top: 1px solid rgba(24, 34, 26, .25); }
.facts dt { font-size: var(--s-small); font-weight: 500; color: var(--ink); }
.facts dd { margin-top: 4px; font: 400 var(--s-mid)/1.25 var(--serif); }
.homes-note { font-size: var(--s-small); color: var(--ink-2); }
@media (min-width: 900px) {
  .home { grid-template-columns: 8fr 4fr; gap: var(--m); align-items: center; }
  .home-homes .home-img { grid-column: 2; grid-row: 1; }
  .home-homes .home-text { grid-column: 1; grid-row: 1; }
  .home-homes { grid-template-columns: 4fr 8fr; }
}

/* ---------- 7. Interiors ---------- */
.gallery { padding: var(--gap) var(--px); display: grid; gap: clamp(40px, 5vw, 72px); }
.gal-grid { display: grid; gap: 28px; }
.gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .gal-grid { grid-template-columns: 1fr 1fr; gap: 40px clamp(20px, 2vw, 32px); }
  .gal-wide { grid-column: 1 / -1; }
  .gal-wide img { aspect-ratio: 21 / 9; }
}

/* ---------- 8. FAQ ---------- */
.faq { padding: 0 var(--px) var(--gap); display: grid; gap: 40px; }
.faq-head { display: grid; gap: 20px; align-content: start; }
.qa { display: grid; border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 72px; padding: 16px 0; font: 400 var(--s-mid)/1.3 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform .4s var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--accent); }
.qa details p { padding: 0 0 24px; color: var(--muted); max-width: 62ch; }
@media (min-width: 900px) {
  .faq { grid-template-columns: 4fr 8fr; gap: var(--m); }
  .faq-head { position: sticky; top: 108px; }
}

/* ---------- 9. Invitation + form ---------- */
.invite { padding: var(--gap) var(--px); display: grid; gap: 56px; background: var(--c5); color: var(--paper); }
.invite-card { display: grid; gap: 28px; align-content: start; }
.dates { display: grid; gap: 0; border-top: 1px solid rgba(243, 243, 240, .2); }
.dates > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid rgba(243, 243, 240, .2); }
.dates dt { font: 400 clamp(36px, 4.4vw, 60px)/1 var(--serif); letter-spacing: -0.02em; }
.dates dd { color: #c9d1c4; }
.venue { font: 400 var(--s-mid)/1.4 var(--serif); }
.expect { list-style: none; display: grid; gap: 10px; }
.expect li { padding-left: 26px; position: relative; }
.expect li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 11px; height: 6px; border-left: 1.5px solid var(--c2); border-bottom: 1.5px solid var(--c2); transform: rotate(-45deg); }
.note { color: #c9d1c4; max-width: 44ch; }
.form-wrap { scroll-margin-top: 24px; }
.form, .done { display: grid; gap: 22px; background: var(--paper); color: var(--ink); padding: 32px 22px; }
.form-h { font-size: var(--s-h3); }
.f { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.f > label, .f legend { font-weight: 500; }
.f legend { padding: 0; margin-bottom: 6px; }
.f input:not([type="radio"]):not([type="checkbox"]), .f select { width: 100%; min-height: 54px; padding: 0 16px; font: 400 17px/1.2 var(--sans); color: var(--ink);
  background: #fff; border: 1px solid rgba(24, 34, 26, .3); border-radius: 2px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.f input::placeholder { color: #6b756d; }
.f input:focus, .f select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.f.invalid input:not([type="radio"]):not([type="checkbox"]), .f.invalid > select { border-color: var(--error); }
.f.invalid .opt input, .f.invalid .consent input { outline: 2px solid var(--error); outline-offset: 2px; }
.tel { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; min-height: 46px; cursor: pointer; }
.opt input, .consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); flex: none; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--s-small); cursor: pointer; }
.consent input { margin-top: 1px; }
.err { color: var(--error); font-size: var(--s-small); font-weight: 500; }
.err[hidden] { display: none; }
.form .btn { justify-self: stretch; }
.form-status { font-weight: 500; }
.form-status:empty { display: none; }
.trust { padding-top: 18px; border-top: 1px solid var(--rule); font-size: var(--s-small); color: var(--muted); }
.done { align-content: start; }
.done[hidden], .form[hidden] { display: none; }
.done:focus { outline: none; }
.done h3 { font-size: var(--s-h3); }
.done-mark { width: 120px; }
.nw { white-space: nowrap; }
.done-when { font: 400 clamp(28px, 4vw, 52px)/1.1 var(--serif); letter-spacing: -0.01em; padding-top: 18px; border-top: 1px solid var(--rule); }
.done-where { font: 400 var(--s-mid)/1.4 var(--serif); margin-top: -10px; }
.done-next { color: var(--muted); }
.hp { position: absolute; left: -9999px; }
@media (min-width: 900px) {
  .invite { grid-template-columns: 5fr 7fr; gap: calc(var(--m) * 1.5); align-items: start; }
  .invite-card { position: sticky; top: 108px; }
  .form, .done { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding: 48px; }
  .form > *, .done > * { grid-column: 1 / -1; }
  .form > div.f:nth-of-type(4), .form > div.f:nth-of-type(5) { grid-column: auto; } /* type + purpose side by side */
  .form .btn { justify-self: start; min-width: 260px; }
}

/* ---------- 10. Closing film ---------- */
.closing { position: relative; height: 84svh; min-height: 520px; overflow: hidden; color: var(--paper); display: grid; place-items: center; text-align: center; background: var(--c5); }
.closing-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing-scrim { position: absolute; inset: 0; background: rgba(10, 20, 14, .42); }
.closing-text { position: relative; display: grid; gap: 22px; justify-items: center; padding: 0 var(--m); }
.closing h2 { font-size: clamp(44px, 6.6vw, 96px); }
.closing-text p { font-size: var(--s-mid); }
.closing-text .closing-tag { margin-top: 16px; max-width: 44ch; font: 400 var(--s-body)/1.5 var(--serif); color: #dfe5da; }
.closing-cap { position: absolute; left: var(--m); right: var(--m); bottom: 20px; font-size: var(--s-small); color: #dfe5da; }

/* ---------- Footer: minimal close ---------- */
.foot { background: var(--c5); color: var(--paper); padding: clamp(64px, 8vw, 104px) var(--px) 40px; display: grid; gap: clamp(48px, 6vw, 72px); border-top: 1px solid rgba(243, 243, 240, .12); }
.foot a:hover { text-decoration: underline; }
.dev { display: flex; align-items: center; gap: 16px; }
.dev-logo { flex: none; width: 60px; height: auto; }
.dev p { font-size: var(--s-small); line-height: 1.5; color: #d3dace; }
.foot-base { display: grid; gap: 10px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; line-height: 1.6; color: #b9c2b4; }
.permit { max-width: 72ch; }
@media (min-width: 900px) {
  .foot-base { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--m); }
}

/* Phones: facility and interior pictures become one swipeable row each, so the page stays short */
@media (max-width: 899px) {
  .club-grid, .gal-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
    margin: 0 calc(var(--m) * -1); padding: 0 var(--m) 8px; scrollbar-width: none; }
  .club-grid::-webkit-scrollbar, .gal-grid::-webkit-scrollbar { display: none; }
  .tile, .gal { flex: 0 0 82%; scroll-snap-align: start; }
  .estate-photo { height: 72svh; }
  .closing { height: 76svh; }
}

/* Range dashes drawn as a short centred rule: the serif's own en dash is as long as an em dash */
span.nd { display: inline-block; width: .38em; height: max(1px, .04em); margin: 0 .1em; vertical-align: .3em; background: currentColor; overflow: hidden; text-indent: 1em; white-space: nowrap; }

/* ---------- Motion: one soft rise as content enters, slow drift on the big photos ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
.done:not([hidden]) { animation: rise .8s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  /* clip, not hidden: a hidden overflow would become the photo's own scroller and freeze the timeline */
  .estate-photo, .closing { overflow: clip; }
  .estate-photo > img, .closing-media { inset: -8% 0; height: 116%; animation: drift linear both; animation-timeline: view(); }
  @keyframes drift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ================= Craft details ================= */
/* The courtyard mark: a house plan around an open centre, drawn once and reused */
:root { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M0 0h14v14H0zM1.5 1.5v11h11v-11zM5 5h4v4H5z'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath fill='none' stroke='black' stroke-width='1.2' d='M0 5h16.5M12.5 1l4 4-4 4'/%3E%3C/svg%3E"); }
.expect li::before, .names li::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border: 0; transform: none; margin: 0;
  background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.expect li::before { color: var(--c4); }
.names li { position: relative; padding-left: 24px; }
.names li::before { width: 9px; height: 9px; top: .55em; color: var(--accent); }
.closing-mark { display: block; width: 18px; height: 18px; background: currentColor; opacity: .8; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

/* Hero: a short hairline sets the showcase line apart, the only ornament over the photograph */
.hero-event::before { content: ""; display: block; width: 40px; height: 1px; margin-bottom: 14px; background: currentColor; opacity: .6; }
@media (min-width: 900px) { .hero-event::before { margin-left: auto; } }

/* Captions open with a short rule, like a printed plate */
figcaption::before { content: ""; display: inline-block; width: 20px; height: 1px; margin-right: 10px; vertical-align: .32em; background: currentColor; opacity: .55; }

/* Buttons carry a drawn arrow that steps forward on hover */
.btn::after { content: ""; flex: none; width: 18px; height: 10px; margin-left: 14px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .4s var(--ease); }
.btn:hover::after { transform: translateX(4px); }
.btn:disabled::after { display: none; }
.btn-sm::after { width: 15px; margin-left: 10px; }

/* Tabs: one underline that slides to the chosen tab */
.sheet-tabs { position: relative; }
.sheet-tabs button[aria-selected="true"] { box-shadow: none; }
.sheet-tabs::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: var(--tw, 0); background: var(--accent); transform: translateX(var(--tx, 0)); transition: transform .5s var(--ease), width .5s var(--ease); }

/* Photographs unveil from the top edge as they arrive; text keeps its soft rise */
.js .rv:is(.pano, .tile, .home-img, .gal, .life-card, .estate-aerial) { transform: none; }
.js .rv:is(.pano, .tile, .home-img, .gal, .life-card, .estate-aerial) :is(img, video) { clip-path: inset(0 0 14% 0); transform: scale(1.05); transform-origin: 50% 0;
  transition: clip-path 1.3s var(--ease), transform 1.8s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in :is(img, video) { clip-path: inset(0); transform: none; }

/* Browser surfaces */
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }
.qa summary:focus-visible { outline-offset: 4px; }
.expect li::before { color: var(--c2); width: 12px; height: 12px; top: .45em; }

/* Standalone photographs sit in a mount: a narrow margin of the section's own ground inside one hairline.
   Border and padding live on the image itself, so the unveil clip opens frame and photo together. */
:is(.pano, .life-card, .tile, .home-img, .gal, .estate-aerial) :is(img, video) { padding: 6px; border: 1px solid rgba(24, 34, 26, .2); background-clip: content-box; }
:is(.club, .homes) :is(.tile, .home-img) :is(img, video) { border-color: rgba(24, 34, 26, .3); }
.tile video { background-color: var(--c5); }
@media (min-width: 900px) { :is(.pano, .life-card, .tile, .home-img, .gal, .estate-aerial) :is(img, video) { padding: 9px; } }

/* ================= More motion (Sean 29 Oct): hero sequence, word-by-word headlines, drawn rules ================= */
/* Hero arrives in order: photo settles, headline words rise, then the line, the dates, the button */
.hero-logo { animation: fade 1.2s var(--ease) .15s both; }
.hero-sub { animation: rise 1s var(--ease) .75s both; }
.hero-event { animation: rise 1s var(--ease) .9s both; }
.hero-copy .btn { animation: rise 1s var(--ease) 1.05s both; }

/* Headlines: each word rises out of its own line */
.split-h .w { display: inline-block; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; vertical-align: top; }
.split-h .w > span { display: inline-block; transform: translateY(108%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.split-h.in .w > span { transform: none; }
.hero .split-h .w > span { transition-delay: calc(.25s + var(--i, 0) * 90ms); }

/* Rules draw themselves from the left as their row arrives */
.js .rv:is(.concepts li, .qa details, .dist li, .dates > div) { border-bottom-color: transparent; background: linear-gradient(var(--line, var(--rule)), var(--line, var(--rule))) left bottom / 0% 1px no-repeat;
  transition: opacity .9s var(--ease), transform .9s var(--ease), background-size 1.4s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in:is(.concepts li, .qa details, .dist li, .dates > div) { background-size: 100% 1px; }
.js .rv:is(.estate-nums > div) { border-top-color: transparent; background: linear-gradient(var(--rule), var(--rule)) left top / 0% 1px no-repeat;
  transition: opacity .9s var(--ease), transform .9s var(--ease), background-size 1.4s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in:is(.estate-nums > div) { background-size: 100% 1px; }
.dates > div { --line: rgba(243, 243, 240, .2); }

/* The closing mark turns into place */
.js .closing-mark.rv { transform: rotate(-90deg) scale(.6); }
.js .closing-mark.rv.in { transform: none; }

/* FAQ answers open smoothly where the browser supports it */
:root { interpolate-size: allow-keywords; }
.qa details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.qa details[open]::details-content { block-size: auto; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .split-h .w > span { transform: none; } }

/* ================= Premium pass on motion: slower, softer, cinematic ================= */
:root { --ease-soft: cubic-bezier(.22, 1, .36, 1); --ease-curtain: cubic-bezier(.77, 0, .175, 1); }

/* Text comes out of a slight blur as it rises */
.js .rv { transform: translateY(26px); filter: blur(6px);
  transition: opacity 1.3s var(--ease-soft), transform 1.5s var(--ease-soft), filter 1.3s var(--ease-soft), background-size 1.6s var(--ease-soft); }
.js .rv.in { filter: none; }

/* Headlines: longer, softer word rise with a touch of blur */
.split-h .w > span { transform: translateY(112%); opacity: 0; filter: blur(4px);
  transition: transform 1.4s var(--ease-soft), opacity 1s var(--ease-soft), filter 1.2s var(--ease-soft); transition-delay: calc(var(--i, 0) * 85ms); }
.split-h.in .w > span { transform: none; opacity: 1; filter: none; }
.hero .split-h .w > span { transition-delay: calc(.35s + var(--i, 0) * 110ms); }
.hero-sub { animation-duration: 1.4s; animation-delay: 1s; }
.hero-event { animation-duration: 1.4s; animation-delay: 1.15s; }
.hero-copy .btn { animation-duration: 1.4s; animation-delay: 1.3s; }
.hero-media { animation: settle 4s var(--ease-soft) both; }
@keyframes settle { from { transform: scale(1.12); filter: brightness(.85); } to { transform: none; filter: none; } }

/* Photographs: a curtain lifts from the bottom while the picture eases back from a close crop */
.js .rv:is(.pano, .tile, .home-img, .gal, .life-card, .estate-aerial, .inset) { filter: none; transform: none; }
.js .rv:is(.pano, .tile, .home-img, .gal, .life-card, .estate-aerial, .inset) :is(img, video) { clip-path: inset(100% 0 0 0); transform: scale(1.14); transform-origin: 50% 100%;
  transition: clip-path 1.6s var(--ease-curtain), transform 2.4s var(--ease-soft); transition-delay: var(--d, 0ms); }
.js .rv.in :is(img, video) { clip-path: inset(0); transform: none; }
.js .rv:is(.pano, .tile, .home-img, .gal, .life-card, .estate-aerial) figcaption,
.js .rv.life-card :is(h3, p) { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease-soft), transform 1.2s var(--ease-soft); transition-delay: calc(var(--d, 0ms) + .7s); }
.js .rv.in figcaption, .js .rv.in.life-card :is(h3, p) { opacity: 1; transform: none; }

/* Buttons: the darker tone sweeps in from the left */
.btn { background-image: linear-gradient(var(--sweep, transparent), var(--sweep, transparent)); background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size .7s var(--ease-soft), color .3s var(--ease); }
.btn:hover { background-size: 100% 100%; }
.btn-light { --sweep: #fff; }
.btn-light:hover { background-color: var(--paper); }
.btn-dark { --sweep: var(--accent); }
.btn-dark:hover { background-color: var(--c5); }

/* Smooth scrolling (desktop, set up in main.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .js .rv, .split-h .w > span { filter: none; opacity: 1; } }
.js .rv:is(.concepts li, .qa details, .dist li, .dates > div, .estate-nums > div) {
  transition: opacity 1.3s var(--ease-soft), transform 1.5s var(--ease-soft), filter 1.3s var(--ease-soft), background-size 1.8s var(--ease-soft); transition-delay: var(--d, 0ms); }

/* ================= Signature pieces (29 Oct): distance diagram, insets, sideways gallery, fact band, wordmark ================= */
/* Distance diagram: rings to scale, directions approximate; the chosen tab lights its places */
.radar-fig { margin: 0; }
.radar { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.radar .ring { fill: none; stroke: rgba(24, 34, 26, .2); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.radar .ring-km { font-size: 15px; fill: var(--muted); letter-spacing: .04em; }
.radar .core rect { fill: none; stroke: var(--c5); stroke-width: 1.6; }
.radar .core .core-in { fill: var(--c5); stroke: none; }
.radar .pt line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .45; }
.radar .pt circle { fill: var(--paper); stroke: var(--c5); stroke-width: 1.6; }
.radar .pt text { font-size: 19px; fill: var(--ink); }
.radar .pt .km-t { fill: var(--accent); font-weight: 500; }
.radar .pt { transition: opacity .6s var(--ease-soft); }
.radar[data-g] .pt:not([data-on]) { opacity: .22; }
.radar[data-g] .pt[data-on] circle { fill: var(--c5); }
.js .radar-fig.rv { filter: none; transform: none; }
.js .radar-fig.rv .ring, .js .radar-fig.rv .pt line { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-soft); transition-delay: calc(var(--i) * 120ms); }
.js .radar-fig.rv .pt circle, .js .radar-fig.rv .pt text, .js .radar-fig.rv .ring-km { opacity: 0; transition: opacity .8s var(--ease-soft); transition-delay: calc(.6s + var(--i) * 110ms); }
.js .radar-fig.rv.in .ring, .js .radar-fig.rv.in .pt line { stroke-dashoffset: 0; }
.js .radar-fig.rv.in .pt circle, .js .radar-fig.rv.in .pt text, .js .radar-fig.rv.in .ring-km { opacity: 1; }
@media (min-width: 900px) {
  .where { grid-template-columns: 6fr 5fr; row-gap: clamp(48px, 5vw, 80px); align-items: center; }
  .where-head { position: static; grid-column: 1 / -1; grid-template-columns: 6fr 5fr; column-gap: var(--m); align-items: end; }
  .radar-fig { grid-column: 1; max-width: 680px; }
  .sheet { grid-column: 2; }
}

/* Homes: an interior plate overlaps each main picture, like a brochure spread */
.inset { display: none; }
@media (min-width: 900px) {
  .home { position: relative; margin-bottom: 40px; }
  .inset { display: block; position: absolute; z-index: 2; width: min(320px, 23vw); bottom: -64px; }
  .home-villas .inset { left: clamp(24px, 4vw, 64px); }
  .home-homes .inset { right: clamp(24px, 4vw, 64px); }
  .inset img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; padding: 9px; border: 1px solid rgba(24, 34, 26, .3); background: var(--c4); box-shadow: 0 24px 48px -28px rgba(16, 26, 18, .55); }
}

/* Interiors glide sideways while the section holds still (desktop; main.js measures the travel) */
.gallery.h-scroll { padding-bottom: 0; }
.h-scroll .gal-pin { position: relative; margin: 0 calc(var(--px) * -1); }
.h-scroll .gal-stage { position: sticky; top: 0; height: 100vh; overflow: clip; display: flex; align-items: center; }
.h-scroll .gal-grid { display: flex; gap: clamp(28px, 3vw, 56px); margin: 0; padding: 0 var(--px); overflow: visible; will-change: transform; }
.h-scroll .gal { flex: none; }
.h-scroll .gal img, .h-scroll .gal-wide img { height: 66vh; width: auto; aspect-ratio: auto; }
.gal-bar { position: absolute; left: var(--px); right: var(--px); bottom: 28px; height: 1px; background: var(--rule); }
.gal-bar i { position: absolute; inset: 0; background: var(--c5); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* A slow line of the estate's facts */
.band { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: clamp(18px, 2.4vw, 30px) 0; }
.band-track { display: flex; width: max-content; }
@supports (animation-timeline: view()) { .band-track { animation: band linear both; animation-timeline: view(); } }
.band-track span { flex: none; padding-right: .3em; white-space: nowrap; font: 400 clamp(30px, 4.6vw, 68px)/1 var(--serif); letter-spacing: -0.01em; color: var(--accent); }
@keyframes band { from { transform: translateX(0); } to { transform: translateX(-30%); } } /* moves only with the reader's scroll */

/* Footer signs off with the name, large and quiet */
.foot { overflow: hidden; }
.foot-word { margin: 0 0 -.2em; font: 400 clamp(64px, 21vw, 340px)/.8 var(--serif); letter-spacing: -0.03em; color: rgba(243, 243, 240, .07); white-space: nowrap; text-align: center; user-select: none; }

/* Phones: the diagram names only the places of the chosen tab, at a readable size */
@media (max-width: 899px) {
  .radar .pt text { font-size: 30px; }
  .radar .ring-km { font-size: 22px; }
  .radar[data-g] .pt:not([data-on]) text { display: none; }
  .radar[data-g] .pt:not([data-on]) { opacity: .35; }
}

/* ================= Photo mounts v2 (29 Oct): the frame is its own element, the photo reveals inside it ================= */
:is(.pano, .life-card, .tile, .home-img, .gal, .estate-aerial, .inset) :is(img, video) { padding: 0; border: 0; }
.m { display: block; padding: 6px; border: 1px solid rgba(24, 34, 26, .2); }
.m-in { display: block; position: relative; overflow: hidden; }
.m-in > :is(img, video) { display: block; }
:is(.club, .homes) .m { border-color: rgba(24, 34, 26, .3); }
@media (min-width: 900px) {
  .m { padding: 9px; }
  .t-a .m { flex: 1; display: flex; flex-direction: column; }
  .t-a .m-in { flex: 1; }
  .t-a .m-in > video { height: 100%; }
  .inset .m-in > img { padding: 0; border: 0; box-shadow: none; background: none; }
  .inset .m { background: var(--c4); border-color: rgba(24, 34, 26, .3); box-shadow: 0 30px 60px -34px rgba(16, 26, 18, .6); }
}

/* Reveal: the hairline mount settles first, then a curtain draws down inside it while the picture eases back from a closer crop */
.js .rv:is(.pano, .tile, .home-img, .gal, .life-card, .estate-aerial, .inset) .m { opacity: 0; transform: translateY(18px);
  transition: opacity 1.1s var(--ease-soft), transform 1.4s var(--ease-soft); transition-delay: var(--d, 0ms); }
.js .rv:is(.pano, .tile, .home-img, .gal, .life-card, .estate-aerial, .inset) .m-in { clip-path: inset(0 0 100% 0);
  transition: clip-path 1.7s var(--ease-curtain); transition-delay: calc(var(--d, 0ms) + .25s); }
.js .rv:is(.pano, .tile, .home-img, .gal, .life-card, .estate-aerial, .inset) .m-in > :is(img, video) { clip-path: none; transform: scale(1.22);
  transition: transform 2.6s var(--ease-soft), scale 1.4s var(--ease-soft); transition-delay: calc(var(--d, 0ms) + .25s), 0s; }
.js .rv.in .m { opacity: 1; transform: none; }
.js .rv.in .m-in { clip-path: inset(0); }
.js .rv.in .m-in > :is(img, video) { transform: none; }

/* Hover (mouse only): the picture leans in a touch inside its still frame */
@media (hover: hover) and (pointer: fine) {
  :is(.pano, .life-card, .tile, .home-img, .gal, .estate-aerial, .inset) .m-in > :is(img, video) { transition: transform 2.6s var(--ease-soft), scale 1.4s var(--ease-soft); }
  :is(.pano, .life-card, .tile, .home-img, .gal, .estate-aerial, .inset):hover .m-in > :is(img, video) { scale: 1.035; }
}

/* Footer: one quiet row under the name */
.foot { padding-top: clamp(56px, 7vw, 96px); gap: clamp(32px, 4vw, 56px); }
.foot-word { margin: 0; }
.foot-base { align-items: center; row-gap: 20px; }
.foot .dev { gap: 14px; }
.foot .dev p { font-size: 14px; color: #b9c2b4; }
.foot .dev-logo { width: 44px; }
@media (max-width: 899px) { .foot .dev { order: -1; } }

/* Fact band v2: a still, centred line of facts, each set off by the courtyard mark (the moving version was hard to read) */
.band { padding: clamp(28px, 3.4vw, 44px) var(--px); }
.band-track { display: none; }
.band-list { --g: clamp(40px, 5.2vw, 80px); list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 0; }
.band-list li { position: relative; padding: 0 calc(var(--g) / 2); font: 400 clamp(21px, 2.3vw, 32px)/1.2 var(--serif); color: var(--ink); white-space: nowrap; }
/* The mark sits in the gap and takes no width, so hiding it at a line start never changes the wrap */
.band-list li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; transform: translate(-50%, -50%); background: var(--c4); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.band-list li.row-start::before { display: none; }
@media (max-width: 899px) { .band-list { --g: 24px; gap: 8px 0; margin: 0 -8px; } .band-list li { font-size: 19px; } .band-list li + li::before { width: 7px; height: 7px; } }

/* ================= Reduced motion (29 Oct): a calm fade instead of a still page; nothing slides, zooms or wipes ================= */
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv :is(.m, .m-in, .m-in > img, .m-in > video) { transform: none !important; scale: none !important; filter: none !important; clip-path: none !important; }
  .js .rv { transition: opacity 1.2s ease !important; transition-delay: var(--d, 0ms) !important; }
  .js .rv:not(.in), .js .rv:not(.in) .m { opacity: 0 !important; }
  .js .rv.in, .js .rv.in .m { opacity: 1 !important; }
}