/* B1 Waterfront. Tokens first; every colour on the page is one of these. Radius 0 everywhere, no shadows. */
@font-face { font-family: "Prata"; src: url("../fonts/prata-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ground: #EEF2F0;   /* page */
  --surface: #FFFFFF;  /* raised bands, form panel, dialog */
  --ink: #0F2A2E;      /* text, primary button, deep band (13.4:1 on ground) */
  --mid: #4B6A6C;      /* secondary text (5.2:1 ground, 5.9:1 surface) */
  --glass: #8DB4AE;    /* the horizon line, hover fill, accents on ink (6.6:1 on ink) */
  --foil: #D9C7A5;     /* rules only, never text */
  --shallow: #DCE7E4;  /* sea-glass tint: private band, monograms */
  --hair: #C3D3CF;     /* hairlines between list items */
  --field: #6F8C8A;    /* input borders (3.6:1 on surface) */
  --alert: #9B2F1D;    /* form errors (6.9:1 on surface) */
  --on-deep: #EEF2F0;
  --on-deep-mid: #A9C4BF; /* secondary text on ink (8.1:1) */
  /* depth ramp of the community index, open sea -> inland */
  --d1: #0F2A2E; --d2: #1E4246; --d3: #35605F; --d4: #8DB4AE; --d5: #BCD3CE; --d6: #E2EBE8;
  --cap-d3: #D6E5E1;

  --serif: "Prata", "Didot", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --pad: clamp(72px, 8.5vw, 128px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --h1: clamp(2.65rem, 1.3rem + 4.9vw, 5.6rem);
  --h2: clamp(2rem, 1.35rem + 2.2vw, 3.4rem);
  --h3: clamp(1.45rem, 1.2rem + .8vw, 1.9rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.65 var(--sans); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: var(--ground); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--m), var(--max)); margin-inline: auto; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; padding: 0 22px 0 28px;
  background: var(--ink); color: var(--ground); border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
  font: 600 14px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background-color .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease); }
.btn:hover { background: var(--glass); border-color: var(--glass); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: 12px; }
.arr { width: 32px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1; transition: transform .24s var(--ease); }
.arr--s { width: 24px; }
.btn:hover .arr, .tlink:hover .arr, a:hover > .tlink .arr { transform: translateX(4px); }
.tlink { display: inline-flex; align-items: center; gap: 12px; font: 600 15px/1.4 var(--sans); letter-spacing: .01em; color: inherit;
  text-decoration: underline; text-decoration-color: var(--glass); text-decoration-thickness: 1px; text-underline-offset: 7px;
  transition: text-decoration-color .24s var(--ease); background: none; border: 0; padding: 0; cursor: pointer; }
.tlink:hover { text-decoration-color: currentColor; }
.cap { font: 500 13px/1.4 var(--sans); color: var(--mid); letter-spacing: .01em; padding-top: 12px; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
.hdr.is-scrolled { border-bottom-color: var(--hair); }
.hdr__in { display: flex; align-items: center; gap: 32px; height: 76px; }
.brand { font: 400 26px/1 var(--serif); text-decoration: none; letter-spacing: .01em; display: flex; align-items: baseline; gap: 14px; margin-right: auto; }
.brand__sub { font: 500 12px/1 var(--sans); color: var(--mid); letter-spacing: .02em; }
.nav { display: flex; gap: 28px; }
.nav a, .hdr__tel { position: relative; font: 500 14px/1 var(--sans); text-decoration: none; padding: 10px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--glass); transform: scaleX(0); transform-origin: left; transition: transform .24s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.hdr__tel { color: var(--mid); font-variant-numeric: tabular-nums; }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px; background: none; border: 0; font: 600 14px/1 var(--sans); letter-spacing: .02em; cursor: pointer; }
.menu-btn__bars { width: 22px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
@media (max-width: 1180px) { .nav, .hdr__tel { display: none; } }
@media (max-width: 1180px) { .menu-btn { display: inline-flex; } .hdr__in { gap: 20px; } }
@media (max-width: 620px) { .hdr__cta, .brand__sub { display: none; } .hdr__in { height: 64px; } }

.menu { position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--on-deep); display: flex; flex-direction: column; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu :focus-visible { outline-color: var(--glass); }
.menu__top { display: flex; justify-content: space-between; align-items: center; height: 64px; flex: none; }
.menu__close { background: none; border: 0; min-height: 44px; padding: 0 2px; font: 600 14px/1 var(--sans); color: var(--on-deep); cursor: pointer; text-decoration: underline; text-decoration-color: var(--glass); text-underline-offset: 6px; }
.menu__nav { display: flex; flex-direction: column; padding-top: 24px; }
.menu__nav a { font: 400 clamp(1.9rem, 1.4rem + 2vw, 2.6rem)/1.15 var(--serif); text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--d3); }
.menu__nav a:last-child { border-bottom-color: var(--glass); }
.menu__foot { margin-top: auto; padding: 32px 0 40px; display: flex; flex-direction: column; gap: 8px; color: var(--on-deep-mid); font-size: 15px; }
.menu__foot a { text-decoration: none; }
body.is-locked { overflow: hidden; }

/* ---------- hero: words on the ground, then the horizon, then the water ---------- */
.hero__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; padding: clamp(28px, 4.2vw, 64px) 0 clamp(28px, 3vw, 44px); }
.hero h1 { grid-column: 1 / 9; font-size: var(--h1); line-height: 1.02; letter-spacing: -.015em; max-width: 11ch; }
.hero__side { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding-bottom: .5rem; }
.lead { color: var(--mid); font-size: 17px; max-width: 34ch; }
.horizon { height: 1px; background: var(--glass); }
.horizon--hero { transform-origin: left center; }
.hero__fig img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; }
.hero__fig .cap { padding-bottom: 0; }
@media (max-width: 1023px) {
  .hero h1 { grid-column: 1 / -1; max-width: 12ch; }
  .hero__side { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
}
@media (max-width: 620px) {
  .hero__head { gap: 20px; padding-top: 24px; padding-bottom: 24px; }
  .hero__side { flex-direction: column; align-items: stretch; gap: 20px; }
  .lead { font-size: 16px; }
  .hero__cta { min-height: 56px; }
  .hero__fig img { aspect-ratio: 4 / 3; object-position: 60% 50%; }
}
@media (prefers-reduced-motion: no-preference) {
  .horizon--hero { animation: draw 1.1s var(--ease) .15s both; }
  .hero__fig img { animation: settle 1.6s var(--ease) both; }
  .hero h1, .hero__side { animation: rise .9s var(--ease) .35s both; }
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes settle { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero__fig { overflow: hidden; }

/* ---------- sections ---------- */
.sec { padding-block: var(--pad); }
.sec--surface { background: var(--surface); }
.sec--deep { background: var(--ink); color: var(--on-deep); }
.sec--deep :focus-visible { outline-color: var(--glass); }
.sh { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); font-size: var(--h2); margin-bottom: clamp(20px, 2.4vw, 32px); }
.sh h2 { font-size: 1em; line-height: 1.06; letter-spacing: -.01em; flex: 0 1 auto; max-width: 17ch; }
.sh__line { flex: 1 1 48px; min-width: 48px; height: 1px; background: var(--glass); margin-bottom: .3em; }
.intro { color: var(--mid); max-width: 60ch; margin-bottom: clamp(40px, 5vw, 72px); }

/* featured villas: one large, one smaller set lower, like two moored boats */
.villas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) 24px; }
.villa { position: relative; display: flex; flex-direction: column; }
.villa--a { grid-column: 1 / 8; }
.villa--b { grid-column: 8 / 13; margin-top: clamp(96px, 13vw, 200px); }
.villa__img { overflow: hidden; margin-bottom: 20px; }
.villa__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.villa__where { font: 500 13px/1.4 var(--sans); color: var(--mid); margin-bottom: 8px; }
.villa__name { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.1; margin-bottom: 10px; }
.villa__open { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.villa__open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.villa__open:focus-visible { outline: none; }
.villa:has(.villa__open:focus-visible) { outline: 2px solid var(--ink); outline-offset: 8px; }
.villa__facts { color: var(--mid); max-width: 44ch; margin-bottom: 18px; }
.villa .tlink { align-self: flex-start; }
.villa:hover .tlink { text-decoration-color: currentColor; }
.villa:hover .tlink .arr { transform: translateX(4px); }
.private { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; background: var(--shallow); padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 48px); border-top: 1px solid var(--glass); }
.private__h { grid-column: 1 / 6; font-size: var(--h3); line-height: 1.15; }
.private p { grid-column: 6 / 10; }
.private .tlink { grid-column: 10 / 13; justify-self: end; }
@media (max-width: 899px) {
  .villa--a, .villa--b { grid-column: 1 / -1; margin-top: 0; }
  .private__h, .private p, .private .tlink { grid-column: 1 / -1; justify-self: start; }
}

/* communities: aerial band, then the depth index */
.sec--communities { padding-top: 0; }
.band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.band .cap { margin-bottom: clamp(56px, 6vw, 96px); }
@media (max-width: 620px) { .band img { aspect-ratio: 16 / 9; object-position: 45% 50%; } }
.depth { counter-reset: d; }
.depth__row { background: var(--bg); color: var(--fg); }
.d1 { --bg: var(--d1); --fg: var(--on-deep); --cap: var(--glass); }
.d2 { --bg: var(--d2); --fg: var(--on-deep); --cap: var(--on-deep-mid); }
.d3 { --bg: var(--d3); --fg: var(--on-deep); --cap: var(--cap-d3); }
.d4 { --bg: var(--d4); --fg: var(--ink); --cap: var(--ink); }
.d5 { --bg: var(--d5); --fg: var(--ink); --cap: var(--ink); }
.d6 { --bg: var(--d6); --fg: var(--ink); --cap: var(--mid); }
.d1 :focus-visible, .d2 :focus-visible, .d3 :focus-visible { outline-color: var(--glass); }
.depth__h { font-size: inherit; }
.depth__btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) 28px; align-items: baseline; gap: 24px; padding: clamp(22px, 2.4vw, 34px) 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.depth__name { font: 400 clamp(1.75rem, 1.2rem + 2.1vw, 3rem)/1.1 var(--serif); letter-spacing: -.005em; }
.depth__cap { font: 500 14px/1.4 var(--sans); color: var(--cap); letter-spacing: .01em; }
.depth__cap::before { content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin: -3px 12px 0 0; }
.depth__icon { position: relative; width: 18px; height: 18px; align-self: center; justify-self: end; }
.depth__icon::before, .depth__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1px; background: currentColor; transition: transform .24s var(--ease); }
.depth__icon::after { transform: rotate(90deg); }
.depth__btn[aria-expanded="true"] .depth__icon::after { transform: rotate(0deg); }
.depth__btn:hover .depth__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: var(--cap); }
.depth__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem) 28px; gap: 24px; padding: 0 0 clamp(26px, 3vw, 40px); align-items: end; }
.depth__panel[hidden] { display: none; }
.depth__panel p { max-width: 58ch; }
@media (max-width: 760px) {
  .depth__btn { grid-template-columns: minmax(0, 1fr) 28px; gap: 6px 16px; }
  .depth__name { grid-column: 1; }
  .depth__cap { grid-column: 1; grid-row: 2; }
  .depth__icon { grid-column: 2; grid-row: 1 / 3; }
  .depth__panel { grid-template-columns: 1fr; gap: 16px; }
}

/* services */
.svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
.svc__fig { grid-column: 1 / 8; }
.svc__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.svc__list { grid-column: 9 / 13; }
.svc__list li { padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--hair); }
.svc__list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.svc__list h3 { font-size: var(--h3); line-height: 1.15; margin-bottom: 10px; }
.svc__list p { color: var(--mid); margin-bottom: 14px; }
@media (max-width: 899px) { .svc__fig, .svc__list { grid-column: 1 / -1; } }

/* why us, on the deep band */
.sec--deep .sh__line { background: var(--glass); }
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(32px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); }
.why__item { border-top: 1px solid var(--glass); padding-top: 24px; }
.why__item h3 { font-size: var(--h3); line-height: 1.18; margin-bottom: 12px; }
.why__item p { color: var(--on-deep-mid); max-width: 46ch; }
@media (max-width: 760px) { .why { grid-template-columns: 1fr; gap: 40px; } }

/* process: five stations on one horizon */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: clamp(40px, 5vw, 72px); position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--glass); }
.steps li { position: relative; padding-top: 28px; }
.steps li::before { content: ""; position: absolute; left: 0; top: -8px; width: 1px; height: 17px; background: var(--ink); }
.steps__n { display: block; font: 600 13px/1 var(--sans); color: var(--mid); font-variant-numeric: tabular-nums; letter-spacing: .04em; margin-bottom: 14px; }
.steps h3 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.65rem); line-height: 1.2; margin-bottom: 10px; }
.steps p { color: var(--mid); font-size: 16px; }
@media (max-width: 899px) {
  .steps { grid-template-columns: 1fr; gap: 32px; padding-left: 28px; }
  .steps::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps li { padding-top: 0; }
  .steps li::before { left: -36px; top: .35em; width: 17px; height: 1px; }
}

/* advisors */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.team li { border-top: 1px solid var(--hair); padding-top: 24px; }
.team__mono { display: grid; place-items: center; width: 72px; height: 72px; background: var(--shallow); font: 400 26px/1 var(--serif); margin-bottom: 22px; border-bottom: 1px solid var(--glass); }
.team h3 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 6px; }
.team__role { color: var(--ink); font-weight: 500; }
.team__lang { color: var(--mid); font-size: 15px; }
@media (max-width: 899px) { .team { grid-template-columns: 1fr; } .team li { display: grid; grid-template-columns: 72px 1fr; column-gap: 20px; } .team__mono { grid-row: 1 / 4; margin: 0; } }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 6vw, 96px); margin-top: clamp(32px, 4vw, 56px); }
.quote blockquote { margin: 0 0 20px; font: 400 clamp(1.4rem, 1.15rem + .9vw, 1.95rem)/1.38 var(--serif); }
.quote figcaption { font: 500 14px/1.4 var(--sans); color: var(--mid); padding-top: 16px; border-top: 1px solid var(--foil); max-width: 40ch; }
@media (max-width: 760px) { .quotes { grid-template-columns: 1fr; } }

/* consultation */
.consult { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start; }
.consult__side { grid-column: 1 / 6; }
.consult__side h2 { font-size: var(--h2); line-height: 1.06; letter-spacing: -.01em; margin-bottom: 20px; max-width: 14ch; }
.consult__side > p { color: var(--mid); max-width: 40ch; margin-bottom: 32px; }
.consult__fig img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.contact { margin: 28px 0 0; display: grid; gap: 0; }
.contact div { display: grid; grid-template-columns: 7rem 1fr; padding: 12px 0; border-top: 1px solid var(--hair); }
.contact dt { font-weight: 600; font-size: 14px; }
.contact dd { margin: 0; color: var(--mid); font-size: 15px; }
.contact a { text-decoration: none; }
.consult__panel { grid-column: 7 / 13; background: var(--surface); padding: clamp(24px, 3.4vw, 48px); border-top: 1px solid var(--glass); }
@media (max-width: 999px) { .consult__side, .consult__panel { grid-column: 1 / -1; } .consult__panel { margin-inline: calc(-1 * min(var(--m), 24px)); } }

.form { display: grid; gap: 22px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .field label { display: block; font: 600 14px/1.4 var(--sans); margin-bottom: 8px; padding: 0; }
.opt { font-weight: 400; color: var(--mid); }
.seg { display: grid; grid-template-columns: 1fr 1fr; }
.seg legend { margin-bottom: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 8px 12px; border: 1px solid var(--field); font: 500 15px/1.25 var(--sans); text-align: center; transition: background-color .2s var(--ease), color .2s var(--ease); }
.seg label + label span { border-left: 0; }
.seg input:checked + span { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
input:not([type=radio]):not([type=checkbox]), select, textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--field); border-radius: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.4 var(--sans); }
select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { resize: vertical; min-height: 112px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
[aria-invalid="true"] { border: 2px solid var(--alert) !important; }
.err { color: var(--alert); font: 600 14px/1.4 var(--sans); margin-top: 8px; }
.radios { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.radios legend { width: 100%; }
.radios label, .check label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
input[type=radio], input[type=checkbox] { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; flex: none; }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { margin-top: 13px; }
.check label { min-height: 44px; display: block; padding-top: 10px; line-height: 1.5; }
.check + .err { margin-top: -14px; }
.form__send { justify-self: start; min-width: 240px; }
.form__note { color: var(--mid); font-size: 14px; }
.done h3 { font-size: var(--h3); margin-bottom: 12px; }
.done h3:focus { outline: none; }
.done p { color: var(--mid); margin-bottom: 24px; max-width: 46ch; }
@media (max-width: 560px) { .form__send { justify-self: stretch; min-height: 56px; } }

/* footer */
.ftr { background: var(--ink); color: var(--on-deep); padding: clamp(64px, 7vw, 104px) 0 40px; }
.ftr :focus-visible { outline-color: var(--glass); }
.ftr__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; padding-bottom: 40px; }
.ftr__line { font: 400 clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem)/1.1 var(--serif); max-width: 18ch; }
.ftr .horizon { margin-bottom: 40px; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.ftr__h { font: 600 14px/1.4 var(--sans); margin-bottom: 14px; color: var(--glass); }
.ftr__cols li { color: var(--on-deep-mid); font-size: 15px; padding: 4px 0; }
.ftr__cols a { text-decoration: none; }
.ftr__cols a:hover { color: var(--on-deep); text-decoration: underline; text-decoration-color: var(--glass); text-underline-offset: 5px; }
.ftr__note { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--d3); color: var(--on-deep-mid); font-size: 14px; max-width: 80ch; }
@media (max-width: 899px) { .ftr__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ftr__cols { grid-template-columns: 1fr; } }

/* villa dialog */
.vd { width: min(100% - 32px, 1180px); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 0; background: var(--surface); color: var(--ink); overflow: hidden; }
.vd::backdrop { background: rgba(15, 42, 46, .72); }
.vd__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); max-height: calc(100svh - 32px); }
.vd__gal { background: var(--ground); padding: 24px; overflow: auto; }
.vd__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--shallow); }
.vd__thumbs { display: flex; gap: 10px; margin-top: 16px; }
.vd__thumbs button { padding: 0; border: 1px solid transparent; background: none; cursor: pointer; width: 88px; opacity: .7; transition: opacity .2s var(--ease); }
.vd__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--ink); }
.vd__thumbs button:hover { opacity: 1; }
.vd__thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vd__body { padding: 72px clamp(24px, 3vw, 44px) 36px; overflow: auto; }
.vd__close { position: absolute; top: 14px; right: 16px; z-index: 2; min-height: 44px; padding: 0 14px; background: var(--surface); border: 1px solid var(--ink); font: 600 14px/1 var(--sans); cursor: pointer; }
.vd__close:hover { background: var(--glass); border-color: var(--glass); }
.vd__where { font: 500 13px/1.4 var(--sans); color: var(--mid); margin-bottom: 8px; }
.vd__title { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); line-height: 1.06; margin-bottom: 16px; }
#vd-desc { color: var(--mid); margin-bottom: 24px; }
.vd__facts { margin: 0 0 20px; }
.vd__facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.vd__facts dt { font-weight: 600; }
.vd__facts dd { margin: 0; color: var(--mid); font-variant-numeric: tabular-nums; }
.vd__note { font-size: 13px; color: var(--mid); margin-bottom: 24px; }
.vd__cta { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .vd[open] { animation: rise .24s var(--ease); } }
@media (max-width: 860px) {
  .vd { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; }
  .vd__in { grid-template-columns: 1fr; max-height: 100%; height: 100%; overflow: auto; }
  .vd__gal, .vd__body { overflow: visible; }
  .vd__gal { padding: 64px 16px 16px; }
  .vd__body { padding: 24px 20px 32px; }
  .vd__thumbs button { width: 72px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- review fixes, pass 1 (see ROUND_LOG.md) ---------- */
/* 1. the depth ramp ends the section: no ground padding stacked on top of the next section's padding */
.sec--communities { padding-bottom: 0; }
/* 2. phone: the horizon line rises above the heading at full width instead of a 48px stub beside a wrapped title */
@media (max-width: 620px) {
  .sh { flex-wrap: wrap; }
  .sh__line { order: -1; flex: 1 0 100%; margin: 0 0 20px; }
  .sh h2 { max-width: none; }
}
/* 3. hero: balanced lead (no one-word last line), tighter head so more of the water shows in the fold */
.lead { text-wrap: balance; max-width: 36ch; }
.hero__head { padding-top: clamp(24px, 3.2vw, 48px); }

/* ======================= iteration 2 (council iter1: Fable, Opus, Sonnet) ======================= */
:root { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230F2A2E' stroke-width='1.2'/%3E%3C/svg%3E"); }
@media (max-width: 620px) { :root { --pad: 56px; } }

/* horizon line: starts at the heading's right edge, on the FIRST line (wrapped heads no longer float a rule off the last line) */
.sh { display: grid; grid-template-columns: auto minmax(48px, 1fr); column-gap: clamp(20px, 2vw, 32px); align-items: start; }
.sh h2 { max-width: 22ch; }
.sh__line { align-self: start; margin: .74em 0 0; min-width: 0; }
@media (max-width: 620px) {
  .sh { grid-template-columns: 1fr; }
  .sh__line { grid-row: 1; margin: 0 0 20px; }
}

/* hero crop on a phone: Atlantis fully in frame, not bisected */
@media (max-width: 620px) { .hero__fig img { object-position: 92% 50%; } }
.nav a:focus-visible { outline-offset: 6px; }

/* villas: tops aligned, the shapes differ instead (5:4 and a square) */
.villa--b { margin-top: 0; }
.villa--a .villa__img img { aspect-ratio: 5 / 4; }
.villa--b .villa__img img { aspect-ratio: 1 / 1; }

/* depth index: the water caption sits right after the name, like a sounding */
.depth__btn { grid-template-columns: auto minmax(0, 1fr) 28px; column-gap: clamp(20px, 2.4vw, 36px); }
.depth__cap { justify-self: start; font-size: 15px; }
.d6 { --cap: var(--ink); }
.depth__panel { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 760px) { .depth__btn { grid-template-columns: minmax(0, 1fr) 28px; } .depth__panel { grid-template-columns: 1fr; } }

/* services: with a photograph (5:4) or, while the photograph serves the why band, as three columns */
.svc__fig img { aspect-ratio: 5 / 4; }
.svc:not(:has(.svc__fig)) .svc__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 64px); }
.svc:not(:has(.svc__fig)) .svc__list li { border-bottom: 0; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--glass); }
@media (max-width: 899px) { .svc:not(:has(.svc__fig)) .svc__list { grid-template-columns: 1fr; } }

/* why: one dark band, split with a photograph */
.why-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ink); color: var(--on-deep); }
.why-split :focus-visible { outline-color: var(--glass); }
.why__fig { display: flex; flex-direction: column; }
.why__fig img { flex: 1 1 0; min-height: 520px; width: 100%; height: auto; object-fit: cover; }
.why__fig .cap { color: var(--on-deep-mid); padding: 12px 24px 0 var(--m); }
.why__body { padding: var(--pad) var(--m) var(--pad) clamp(40px, 5.5vw, 96px); max-width: 760px; }
.why__body .sh h2 { max-width: 18ch; }
.why-split .why { grid-template-columns: 1fr; gap: 28px; margin-top: 8px; }
.why-split .why__item { padding-top: 20px; }
.why-split .why__item h3 { margin-bottom: 8px; }
@media (max-width: 899px) {
  .why-split { grid-template-columns: 1fr; }
  .why__fig img { flex: none; min-height: 0; aspect-ratio: 5 / 4; }
  .why__body { padding: var(--pad) var(--m); max-width: none; }
  .why__body .sh h2 { max-width: 17ch; }
}

/* process: one shared baseline for the five stations (1280: "Offer and checks" wrapped and dropped its paragraph) */
@media (min-width: 900px) { .steps h3 { font-size: clamp(1.25rem, 1rem + .55vw, 1.65rem); min-height: 2.4em; } }
@media (max-width: 899px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-left: 0; }
  .steps::before, .steps li::before { display: none; }
  .steps li { border-top: 1px solid var(--glass); padding-top: 16px; }
  .steps li:last-child { grid-column: 1 / -1; }
  .steps p { font-size: 15px; }
}

/* photo break between process and advisors (pending p07) */
.band--break img { aspect-ratio: 2 / 1; }
.band--break .cap { margin-bottom: 0; }
@media (max-width: 620px) { .band--break img { aspect-ratio: 3 / 2; } }

/* advisors and testimonials in one band: rows of advisors, quotes on a deep panel */
.adv { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.adv .team { grid-template-columns: 1fr; gap: 0; }
.adv .team li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 28px; align-content: center; padding: 28px 0; border-top: 1px solid var(--glass); }
.adv .team li:last-child { border-bottom: 1px solid var(--glass); }
.adv .team__mono { grid-row: 1 / 4; width: 96px; height: 96px; margin: 0; background: var(--d5); border: 0; font-size: 40px; align-self: center; }
.adv .team h3 { font-size: clamp(1.5rem, 1.25rem + .7vw, 1.9rem); margin-bottom: 4px; }
.quotes { background: var(--d2); color: var(--on-deep); padding: clamp(28px, 3.4vw, 52px); grid-template-columns: 1fr; gap: 40px; margin-top: 0; }
.quotes__h { font: 600 14px/1.4 var(--sans); color: var(--glass); letter-spacing: .01em; }
.quote::before { content: ""; display: block; width: 48px; height: 1px; background: var(--foil); margin-bottom: 20px; }
.quote blockquote { font-size: clamp(1.45rem, 1.15rem + .95vw, 2rem); }
.quote figcaption { color: var(--on-deep-mid); border-top: 0; padding-top: 0; }
@media (max-width: 899px) { .adv { grid-template-columns: 1fr; } .adv .team li { grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; } .adv .team__mono { width: 72px; height: 72px; font-size: 30px; } }

/* consultation photograph keeps its own ratio (4:5 hall when delivered, 5:4 bedroom until then) */
.consult__fig img { aspect-ratio: auto; }

/* form controls in the radius-0 system */
select { background-image: var(--check); background-position: right 16px center; background-size: 14px 8px; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid var(--ink); background: var(--surface); display: inline-grid; place-content: center; cursor: pointer; }
input[type=checkbox]:checked { background: var(--ink); }
input[type=checkbox]:checked::after { content: ""; width: 10px; height: 5px; border-left: 1.5px solid var(--ground); border-bottom: 1.5px solid var(--ground); transform: translateY(-1px) rotate(-45deg); }
input[type=checkbox][aria-invalid="true"] { border: 2px solid var(--alert); }

/* footer wordmark */
.ftr__mark { font: 400 30px/1 var(--serif); letter-spacing: .01em; margin-bottom: 40px; color: var(--on-deep); }
/* why band: its column is too narrow for a side rule, so the horizon rises above the heading (same device as on a phone) */
.why__body .sh { grid-template-columns: 1fr; }
.why__body .sh__line { grid-row: 1; margin: 0 0 24px; }
.why__body .sh h2 { max-width: 16ch; }

/* ======================= iteration 4 (council iter2: Fable, Opus, Sonnet) ======================= */
/* deeper page: communities on ink, process and consultation on d2 (with the why split and the footer, about half the scroll is deep) */
.sec--ink { background: var(--ink); color: var(--on-deep); }
.sec--d2 { background: var(--d2); color: var(--on-deep); }
.sec--ink .intro, .sec--d2 .intro, .sec--ink .cap, .sec--d2 .cap { color: var(--on-deep-mid); }
.sec--ink :focus-visible, .sec--d2 :focus-visible { outline-color: var(--glass); }
.sec--ink .depth { border-top: 1px solid var(--glass); }
.sec--communities .band img { max-height: 520px; object-position: 50% 30%; }
.sec--d2 .steps__n, .sec--d2 .steps p { color: var(--on-deep-mid); }
.sec--d2 .steps li::before { background: var(--glass); }

/* process: subgrid rows replace min-height, so one-line titles leave no hole and the paragraphs still share a line */
@media (min-width: 900px) {
  .steps { grid-template-rows: auto auto auto; row-gap: 0; column-gap: 24px; }
  .steps li { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  .steps h3 { min-height: 0; }
  .steps p { font-size: 17px; }
}
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; gap: 28px; } .steps li:last-child { grid-column: auto; } }

/* why split: narrower photo column so the 1122 px p08 stays <= 1.3x on a 2x screen; photo flush to the band, caption in the text half */
@media (min-width: 900px) {
  .why-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .why__fig img { min-height: 0; }
  .why__body { padding-block: clamp(56px, 5.6vw, 88px); max-width: 860px; }
  .why-split .why { gap: 22px; }
}
.why__cap { margin-top: 28px; padding-top: 0; }
@media (max-width: 899px) { .why__fig img { aspect-ratio: 1 / 1; } }

/* villas: two equal squares, so titles share a baseline */
.villa--a { grid-column: 1 / 7; }
.villa--b { grid-column: 7 / 13; }
.villa--a .villa__img img, .villa--b .villa__img img { aspect-ratio: 1 / 1; }
@media (max-width: 899px) { .villa--a, .villa--b { grid-column: 1 / -1; } }

/* private list: first lines on one baseline */
.private { align-items: baseline; }
.private p { grid-column: 6 / 11; }
.private .tlink { grid-column: 11 / 13; }
@media (max-width: 899px) { .private p, .private .tlink { grid-column: 1 / -1; } }

/* pool-edge pause: inside the grid at 9 columns (<= 1.3x of the 1536 px source on a 2x screen), caption beside it */
.band--break { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; margin-top: var(--pad); }
.band--break img { grid-column: 4 / 13; grid-row: 1; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.band--break .cap { grid-column: 1 / 4; grid-row: 1; border-top: 1px solid var(--glass); padding-top: 14px; margin: 0; max-width: 26ch; }
@media (max-width: 899px) { .band--break img, .band--break .cap { grid-column: 1 / -1; grid-row: auto; } .band--break .cap { max-width: none; } }

/* advisors and quotes end together */
.adv { align-items: stretch; }
.adv .team { display: grid; grid-auto-rows: 1fr; height: 100%; }
.quotes { padding: 40px; gap: 32px; }
.quote blockquote { font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem); }

/* consultation on d2: white panel and the side column end together */
.sec--consult .consult { align-items: stretch; }
.consult__side { display: flex; flex-direction: column; }
.sec--consult .consult__side > p { color: var(--on-deep-mid); }
.sec--consult .contact { margin-top: auto; padding-top: 28px; }
.sec--consult .contact div { border-top-color: var(--d3); }
.sec--consult .contact dd { color: var(--on-deep-mid); }
.consult__panel { display: flex; flex-direction: column; color: var(--ink); }
.consult__panel .form { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.consult__panel .form[hidden] { display: none; }
.field--grow { flex: 1; display: flex; flex-direction: column; }
.field--grow textarea { flex: 1; }
.form__send { align-self: flex-start; }
.sec--d2 .consult__panel :focus-visible, .sec--d2 .consult__panel input:focus-visible, .sec--d2 .consult__panel select:focus-visible, .sec--d2 .consult__panel textarea:focus-visible { outline-color: var(--ink); }
@media (max-width: 560px) { .form__send { align-self: stretch; } }

/* square radios to match the checkbox */
.radios input[type=radio] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--ink); background: var(--surface); display: inline-grid; place-content: center; cursor: pointer; }
.radios input[type=radio]:checked::after { content: ""; width: 8px; height: 8px; background: var(--ink); }

/* footer note rule runs the full width; only the text keeps a measure */
.ftr__note { max-width: none; }
.ftr__note span { display: block; max-width: 80ch; }

/* hero: wider side column, lead carries more weight, button bottom on the H1's last baseline */
@media (min-width: 1024px) {
  .hero__side { grid-column: 8 / 13; padding-bottom: calc(var(--h1) * .2); }
  .lead { font-size: 19px; max-width: 38ch; }
}

/* dialog: gallery content centred in its column (no dead ground under the thumbs) */
.vd__gal { display: flex; flex-direction: column; justify-content: center; }
.why-split .why__cap { color: var(--on-deep-mid); }
/* why: principles 2x2 inside the text half from 1100 px, so the band is short enough for p08 to stay <= 1.3x at 2x */
@media (min-width: 1100px) { .why-split .why { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; } }
@media (min-width: 1024px) { .hero h1 { grid-column: 1 / 8; } }
@media (min-width: 900px) { .private p { grid-column: 6 / 10; } .private .tlink { grid-column: 10 / 13; } }

/* ======================= iteration 5 (council iter3, final polish) ======================= */
/* communities: bay band (the page's one Burj), head and intro side by side */
.sec--communities .band img { aspect-ratio: 21 / 9; max-height: 520px; object-position: 50% 24%; }
.comm-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.comm-head .sh, .comm-head .intro { margin: 0; }
@media (max-width: 899px) { .comm-head { grid-template-columns: 1fr; } }
/* the horizon line marks the water sections only; services and advisors heads stand alone */
.sh--plain { grid-template-columns: 1fr; }
/* villas side by side from 700 px (820 no longer stacks two 738 px squares) */
@media (min-width: 700px) and (max-width: 899px) { .villa--a { grid-column: 1 / 7; } .villa--b { grid-column: 7 / 13; } }
/* process at 700-899: 3 + 2, no lone step */
@media (min-width: 700px) and (max-width: 899px) {
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps li { grid-column: span 2; }
  .steps li:nth-child(4), .steps li:nth-child(5) { grid-column: span 3; }
}
@media (max-width: 899px) { .why__fig img { aspect-ratio: 4 / 3; } }
/* pool-edge pause, inside the d2 process band: square photo (<= 1.2x of its 890 px crop at 2x) and one line in Prata */
.pause { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--glass); }
.pause img { grid-column: 8 / 13; grid-row: 1; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pause figcaption { grid-column: 1 / 7; grid-row: 1; }
.pause__line { display: block; font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem)/1.2 var(--serif); color: var(--on-deep); max-width: 18ch; margin-bottom: 16px; }
@media (max-width: 899px) { .pause img, .pause figcaption { grid-column: 1 / -1; grid-row: auto; } }
/* consultation: textarea at a working size, square hall photo so the side column matches the form; success state shrinks the panel */
.field--grow { flex: none; }
.field--grow textarea { flex: none; min-height: 140px; max-height: 240px; }
@media (min-width: 1000px) { .consult__fig img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 60%; } }
.consult__panel:has(#done:not([hidden])) { align-self: start; }
.done { padding-block: 8px; }
/* advisors: monogram as a stamp, not a tile */
.adv .team li { grid-template-columns: 64px minmax(0, 1fr); }
.adv .team__mono { width: 64px; height: 64px; background: none; border: 1px solid var(--glass); font-size: 1.6rem; }
/* dialog thumbnails at full strength, hair border; the current one in ink */
.vd__thumbs button { opacity: 1; border-color: var(--hair); }
.vd__thumbs button[aria-current="true"] { border-color: var(--ink); }
.comm-head .sh { grid-template-columns: 1fr; }
.comm-head .sh__line { grid-row: 1; margin: 0 0 24px; }

/* ---------- iteration 6 ---------- */
/* form: Email/Phone and Community/Villa share label, input and error rows, so a wrapped hint never pushes one input down */
@media (min-width: 561px) {
  .row2 { grid-template-rows: auto auto auto; row-gap: 0; }
  .row2 > .field { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
  .row2 > .field label { align-self: end; }
}
/* "Reply by" radios are round so they read as one-of-many; the consent checkbox stays square */
.radios input[type=radio], .radios input[type=radio]:checked::after { border-radius: 50%; }
.radios input[type=radio]:checked::after { width: 10px; height: 10px; }
/* primary button: sea-glass fill and ink label as pinned by the brief, but the ink edge stays so it does not wash out */
.btn:hover { border-color: var(--ink); }
/* horizon reads at a glance */
.horizon, .sh__line { height: 2px; }
/* pool-edge pause: smaller square (<= 1.0x at 2x), caption anchored to its base, from 700 px */
.pause { align-items: end; }
.pause img { grid-column: 9 / 13; }
.pause figcaption { grid-column: 1 / 8; padding-bottom: 4px; }
.pause__line { max-width: 20ch; font-size: clamp(1.6rem, 1.1rem + 1.9vw, 3.1rem); }
@media (max-width: 899px) { .pause img { grid-column: 7 / 13; grid-row: 1; } .pause figcaption { grid-column: 1 / 7; grid-row: 1; } }
@media (max-width: 699px) { .pause img, .pause figcaption { grid-column: 1 / -1; grid-row: auto; } }
/* 820: the hall photograph goes landscape and caps its width, so no tall photo stack */
@media (max-width: 999px) { .consult__fig { max-width: 560px; } .consult__fig img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; } }
/* 820: the garden photograph caps at 560 px wide (4:3, 1.0x of its source on a 2x screen) instead of a 615 px-tall full-width frame */
@media (min-width: 561px) and (max-width: 899px) { .why__fig { max-width: 560px; } }

/* ---------- iteration 7 (final) ---------- */
/* header lets the photographs show through, softly */
.hdr { background: color-mix(in srgb, var(--ground) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
/* text links: 44 px hit area without moving the type */
.tlink { position: relative; }
.tlink::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }
/* heads with an intro: H2 and its horizon on the left, the paragraph answers on the right (villas and communities) */
@media (min-width: 900px) {
  .comm-head .sh { grid-template-columns: auto minmax(48px, 1fr); }
  .comm-head .sh__line { grid-row: auto; margin: .74em 0 0; }
}
/* pool-edge pause: the line centres on the square and fills its field */
.pause { align-items: center; }
.pause figcaption { padding-bottom: 0; }
.pause__line { max-width: 16ch; font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3.4rem); line-height: 1.12; }
/* 820: the garden photograph spans the band as a 2:1 strip instead of a capped 4:3 with an empty ink block */
@media (min-width: 561px) and (max-width: 899px) { .why__fig { max-width: none; } .why__fig img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 62%; } }