/* B2 "Majlis" — Dar Mawa (placeholder). Tokens first; every colour used below is one of these. */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --ground: #F5ECE2;      /* page */
  --surface: #FBF6EF;     /* cards, form, dialog */
  --plaster: #EFE3D4;     /* the plaster band base (ink 12.9:1, mid 4.6:1) */
  --ink: #2B1D17;         /* text, outlines (13.9:1 on ground) */
  --mid: #7A5F52;         /* secondary text (5.0:1 ground, 5.5:1 surface) */
  --clay: #B4654A;        /* fills, rules, large numerals only (3.7:1 ground) */
  --clay-deep: #8F4A33;   /* clay as text and as the button hover fill (surface label 6.1:1) */
  --sand: #DCC5A9;        /* photo frames' fill, discs, chips, the lattice on ink */
  --r-photo: 26px;        /* soft corners on every photograph */
  --line: #D9C8B4;        /* hairline on ground */
  --on-ink: #DCC5A9;      /* sand on ink 9.8:1 */
  --on-ink-mid: #BFA68E;  /* 7.0:1 on ink */
  --on-ink-accent: #D99A80; /* 6.9:1 on ink */
  --focus: #8F4A33;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1320px;
  --gut: clamp(20px, 4vw, 56px);
  --sec: clamp(80px, 8.5vw, 136px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--sans); font-kerning: normal; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 380; margin: 0; text-wrap: balance; font-variation-settings: "SOFT" 60, "WONK" 0; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding-inline: var(--gut); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
h1 { font-size: clamp(2.7rem, 1.25rem + 5vw, 6.4rem); line-height: 1.0; letter-spacing: -0.022em; font-weight: 340; font-variation-settings: "SOFT" 100, "WONK" 1; }
h2 { font-size: clamp(2rem, 1.35rem + 2.1vw, 3.35rem); line-height: 1.06; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); line-height: 1.15; letter-spacing: -0.005em; font-weight: 420; }
.lead { font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink); max-width: 34em; }
.cap { margin-top: 12px; font-size: 14px; line-height: 1.4; color: var(--mid); }

/* ---------- buttons: soft pill, outline ink, sentence case; clay fill on hover ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); font: 500 16px/1.2 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); }
.btn:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--surface); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--ink); color: var(--surface); }
.btn--solid:hover { background: var(--clay-deep); }
.tlink { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; background: none; border: 0; color: var(--ink); font: 500 16px/1.3 var(--sans); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: color .2s var(--ease), text-decoration-color .2s var(--ease); }
.tlink__arrow { width: 20px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .22s var(--ease); }
.tlink:hover { color: var(--clay-deep); text-decoration-color: var(--clay-deep); }
.tlink:hover .tlink__arrow { transform: translateX(4px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }

/* ---------- photographs: soft rounded rectangles (26 px), the same on every corner. No arch or plaque shapes anywhere. ---------- */
.frame { position: relative; overflow: hidden; background: var(--sand); border-radius: var(--r-photo); }
.frame picture, .frame img { width: 100%; height: 100%; }
.frame img { object-fit: cover; }
.frame--wide { aspect-ratio: 3 / 2; }

/* ---------- the recurring motif: a mashrabiya lattice line, a strip of small diamonds in clay, CSS only ---------- */
.lattice { height: 24px; padding: 3px 0; border-block: 1.5px solid rgba(180, 101, 74, .8); background-clip: content-box; background-origin: content-box;
  background-image: repeating-linear-gradient(45deg, rgba(180, 101, 74, 0) 0 9px, rgba(180, 101, 74, .75) 9px 10.5px),
                    repeating-linear-gradient(-45deg, rgba(180, 101, 74, 0) 0 9px, rgba(180, 101, 74, .75) 9px 10.5px),
                    radial-gradient(circle at 50% 50%, rgba(180, 101, 74, .75) 0 2px, rgba(180, 101, 74, 0) 2.5px);
  background-size: auto, auto, 13.4px 18px; }
.lattice--ink { border-color: rgba(220, 197, 169, .6);
  background-image: repeating-linear-gradient(45deg, rgba(220, 197, 169, 0) 0 9px, rgba(220, 197, 169, .55) 9px 10.5px),
                    repeating-linear-gradient(-45deg, rgba(220, 197, 169, 0) 0 9px, rgba(220, 197, 169, .55) 9px 10.5px); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--ground); transition: box-shadow .2s; }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.hdr__in { display: flex; align-items: center; gap: 32px; height: 84px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__sun { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--clay); background: radial-gradient(circle, var(--clay) 0 4px, rgba(180, 101, 74, 0) 4.5px); display: inline-block; flex: none; }
.brand__name { font: 460 1.6rem/1 var(--serif); letter-spacing: .01em; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 30px; }
.nav a { position: relative; text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 8px; margin: 0 -8px; }
.nav a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 2px; height: 1.5px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease); }
.nav a:hover::after { transform: scaleX(1); }
.hdr__cta { font-size: 15px; }
.menu-btn { display: none; margin-left: auto; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--surface); }
.menu { background: var(--ground); border-top: 1px solid var(--line); height: calc(100dvh - 72px); overflow-y: auto; }
.menu ul { padding: 24px 0 8px; }
.menu li { border-bottom: 1px solid var(--line); }
.menu a { display: block; padding: 16px 0; font: 380 1.75rem/1.2 var(--serif); text-decoration: none; font-variation-settings: "SOFT" 60; }
.menu .btn--menu { display: flex; width: 100%; margin-top: 28px; min-height: 56px; padding: 0 24px; font: 500 16px/1.2 var(--sans); }
.menu__note { padding: 18px 0 24px; color: var(--mid); font-size: 15px; }
.menu__note a { display: inline; font: 500 15px/1.4 var(--sans); padding: 0; color: var(--ink); }

/* ---------- hero ---------- */
.hero { padding: clamp(12px, 2vw, 24px) 0 var(--sec); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.hero__fig { margin: 0; grid-column: 7 / 13; grid-row: 1; }
.frame--hero { height: clamp(560px, calc(100vh - 180px), 690px); }
.hero__text { grid-column: 1 / 7; grid-row: 1; align-self: stretch; padding: 0 clamp(0px, 3vw, 56px) 32px 0; display: flex; flex-direction: column; gap: 28px; }
.hero__text h1 { margin-top: clamp(24px, calc(100vh - 784px), 116px); }
.hero__text .hero__where { margin-top: 0; }
.hero__text h1 { max-width: 9.2em; }
.hero__where { padding-top: 0; color: var(--ink) !important; font-size: 15px; color: var(--mid); max-width: 30em; }

/* ---------- sections ---------- */
.sec { padding: var(--sec) 0; }
.sec__head { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(40px, 4.5vw, 64px); }
.sec__head p { color: var(--mid); max-width: 36em; }
.sec__head--split { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 24px; align-items: end; }
.sec__head--split p { padding-bottom: 6px; }

/* featured villas */
.villas { padding-top: 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
.card { display: flex; flex-direction: column; }
.card__facts { margin-top: auto; }
.card__open { align-self: flex-start; }
.frame--card { aspect-ratio: 4 / 5; margin-bottom: 22px; }
.card__place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--mid); margin-bottom: 8px; }
.chip { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--sand); color: var(--ink); font-size: 13px; line-height: 1.4; }
.card__name { margin-bottom: 10px; }
.card__line { color: var(--ink); margin-bottom: 14px; max-width: 30em; }
.card__facts { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; color: var(--mid); margin-bottom: 14px; font-variant-numeric: lining-nums tabular-nums; }
.card__open { justify-self: start; }
.card__open::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card .frame img { transition: transform .5s var(--ease); }
.card:hover .frame img { transform: scale(1.025); }

/* communities: one tall photograph beside an index of six places */
.communities { background: var(--surface); }
.comm__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.comm__fig { margin: 0; grid-column: 1 / 6; position: sticky; top: 108px; }
.frame--comm { aspect-ratio: 2 / 3; }
.comm__text { grid-column: 7 / 13; display: grid; gap: 18px; }
.comm__intro { color: var(--mid); max-width: 34em; margin-bottom: 18px; }
.places li { display: grid; grid-template-columns: 22px minmax(0, 13rem) minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 22px 0; border-top: 1px solid var(--line); }
.places li:last-child { border-bottom: 1px solid var(--line); }
.places li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--clay); align-self: start; margin-top: .62em; }
.places p { padding-top: .3em; }
.places h3 { font-size: clamp(1.3rem, 1.15rem + .45vw, 1.6rem); }
.places p { color: var(--ink); font-size: 16px; }

/* services */
.services__fig { margin: 0 0 clamp(36px, 4vw, 56px); }
.frame--band { aspect-ratio: 21 / 9; }
.svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin-bottom: 32px; }
.svc { display: grid; align-content: start; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.svc p { color: var(--ink); font-size: 17px; }

/* plaster band: CSS-only trowelled texture on a pseudo-element, text stays on a solid colour */
.plaster { position: relative; background: var(--plaster); padding: var(--sec) 0; isolation: isolate; overflow: hidden; }
.plaster::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(60% 45% at 18% 22%, rgba(251, 246, 239, .55), rgba(251, 246, 239, 0) 70%),
    radial-gradient(40% 60% at 82% 76%, rgba(220, 197, 169, .45), rgba(220, 197, 169, 0) 72%),
    radial-gradient(28% 20% at 58% 12%, rgba(180, 101, 74, .06), rgba(180, 101, 74, 0) 80%),
    radial-gradient(35% 25% at 40% 88%, rgba(251, 246, 239, .4), rgba(251, 246, 239, 0) 75%),
    repeating-radial-gradient(circle at 31% 47%, rgba(43, 29, 23, .028) 0 1px, rgba(43, 29, 23, 0) 1px 3px),
    repeating-radial-gradient(circle at 73% 21%, rgba(251, 246, 239, .09) 0 1.5px, rgba(251, 246, 239, 0) 1.5px 4.5px); }
.dark { background: var(--ink); color: var(--surface); padding: var(--sec) 0; }
.dark h2 { color: var(--surface); }
.dark .why dt { color: var(--sand); }
.dark .why dd { color: var(--on-ink-mid); }
.dark .cap { color: var(--on-ink-mid); }
.dark :focus-visible { outline-color: var(--on-ink-accent); }
.why__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.why__text { grid-column: 1 / 8; display: grid; gap: 48px; }
.why { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 44px 40px; }
.why div { padding-top: 22px; border-top: 1px solid rgba(220, 197, 169, .28); }
.why dt { font: 400 1.6rem/1.18 var(--serif); margin-bottom: 8px; font-variation-settings: "SOFT" 60; }
.why dd { margin: 0; color: var(--mid); font-size: 17px; }
.why__fig { margin: 0; grid-column: 9 / 13; }
.frame--niche { aspect-ratio: 4 / 3; }

/* process */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.process .sec__head p { color: var(--mid); }
.steps li { display: grid; align-content: start; gap: 10px; padding-top: 22px; border-top: 1px solid var(--ink); }
.steps li:first-child { border-top: 2px solid var(--clay); }
.steps__n { font: italic 300 3.5rem/1 var(--serif); color: var(--clay); font-variation-settings: "SOFT" 100, "WONK" 1; margin-bottom: 6px; }
.steps h3 { font-size: 1.35rem; }
.steps p { color: var(--mid); font-size: 16px; }

/* team: name rows with a small round initial, no faces, no plaques */
.team { background: var(--surface); padding: var(--sec) 0; }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.person { display: grid; grid-template-columns: 52px minmax(0, 1fr); padding-top: 24px; border-top: 1px solid var(--ink); column-gap: 24px; align-items: start; }
.person > div { display: grid; gap: 6px; padding-top: 4px; }
.person__initial { font: italic 300 3rem/.9 var(--serif); color: var(--clay-deep); font-variation-settings: "SOFT" 100, "WONK" 1; }
.person__role { color: var(--clay-deep); font-weight: 500; font-size: 15px; }
.person p:not(.person__role) { color: var(--mid); font-size: 16px; }
@media (min-width: 1181px) { .person p:not(.person__role):not(.person__since) { min-height: 6.4em; } }
.person .person__since { font-size: 14px; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--line); }

/* testimonials */
.words__h { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.words__note { color: var(--mid); font-size: 14px; }
.words__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.words__fig { margin: 0; grid-column: 1 / 5; }
.frame--pool { aspect-ratio: 3 / 4; }
.words__text { grid-column: 6 / 13; display: grid; gap: 36px; }
.words__text .words__note { margin: -24px 0 0; }
.quote { margin: 0; padding-left: 28px; border-left: 3px solid var(--clay); }
.quote blockquote { margin: 0 0 18px; }
.quote blockquote p { font: italic 330 clamp(1.35rem, 1.1rem + .8vw, 1.85rem)/1.35 var(--serif); font-variation-settings: "SOFT" 100; }
.quote figcaption { font-size: 15px; color: var(--mid); }
.words__text .quote:first-of-type blockquote p { font-size: clamp(1.5rem, 1.15rem + 1.15vw, 2.2rem); }
.quote figcaption span { margin-left: 6px; }

/* enquiry */
.enquire { background: var(--surface); }
.enquire__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.enquire__side { grid-column: 1 / 6; display: grid; gap: 20px; position: sticky; top: 120px; }
.enquire__side > p { color: var(--mid); max-width: 30em; }
.enquire__next { color: var(--ink); max-width: 30em; padding: 18px 0 2px; border-top: 2px solid var(--clay); }
.contact { margin: 16px 0 0; display: grid; gap: 0; }
.contact div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.contact dt { color: var(--mid); }
.contact dd { margin: 0; }
.form { grid-column: 7 / 13; display: grid; gap: 22px; }
.seg { border: 0; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.seg legend { font-size: 15px; color: var(--mid); margin-bottom: 12px; padding: 0; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 1.5px solid var(--sand); border-radius: 999px; background: var(--surface); font-weight: 500; font-size: 15px; transition: border-color .2s, background-color .2s; }
.seg input:checked + span { border-color: var(--ink); background: var(--sand); color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.field { display: grid; gap: 8px; }
.field label, .check label { font-size: 15px; font-weight: 500; }
.opt { color: var(--mid); font-weight: 400; }
input[type=text], input[type=email], input[type=tel], select, textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid var(--mid); border-radius: 12px; background: var(--surface);
  color: var(--ink); font: 400 16px/1.4 var(--sans); transition: border-color .2s; }
textarea { min-height: 104px; resize: vertical; }
select { appearance: none; padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232B1D17' stroke-width='1.5'/%3E%3C/svg%3E");
  background-position: calc(100% - 18px) 50%; background-size: 14px 8px; background-repeat: no-repeat; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
textarea::placeholder { color: var(--mid); }
[aria-invalid="true"] { border-color: var(--clay-deep) !important; border-width: 2px !important; }
[aria-invalid="true"]:focus-visible { border-width: 1px !important; outline-offset: 1px; }
.err { color: var(--clay-deep); font-size: 14px; font-weight: 500; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.check input { appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--surface) center / 14px 10px no-repeat; cursor: pointer; transition: background-color .2s; }
.check input:checked { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%23FBF6EF' stroke-width='1.8'/%3E%3C/svg%3E"); }
.btn--submit { justify-self: start; margin-top: 4px; }
.form__note { font-size: 14px; color: var(--mid); margin-top: -8px; }
.done { padding: 24px 26px; border-radius: 20px; background: var(--ground); border: 1px solid var(--sand); display: grid; gap: 8px; }
.done:focus { outline: none; }

/* footer */
.ftr { background: var(--ink); color: var(--on-ink); padding: 96px 0 48px; font-size: 15px; }
.ftr__grid { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 32px 24px; padding-bottom: 48px; }
.ftr__brand { display: flex; align-items: center; gap: 16px; font: 380 clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem)/1 var(--serif); color: var(--surface); margin-bottom: 16px; font-variation-settings: "SOFT" 100, "WONK" 1; }
.ftr .brand__sun { width: 26px; height: 26px; border-color: var(--on-ink-accent); background: radial-gradient(circle, var(--on-ink-accent) 0 6px, rgba(217, 154, 128, 0) 6.5px); }
.ftr__line { max-width: 24em; }
.ftr ul { display: grid; gap: 10px; }
.ftr a { color: var(--on-ink); text-decoration-color: var(--on-ink-accent); text-underline-offset: 5px; }
.ftr a:hover { color: var(--surface); }
.ftr__contact { margin: 0; display: grid; gap: 10px; }
.ftr__contact div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; }
.ftr__contact dt { color: var(--on-ink-mid); }
.ftr__contact dd { margin: 0; }
.ftr__legal { display: grid; grid-template-columns: 5fr 7fr; gap: 12px 24px; padding-top: 24px; border-top: 1px solid rgba(220, 197, 169, .28); color: var(--on-ink-mid); font-size: 14px; }
.ftr :focus-visible { outline-color: var(--on-ink-accent); }

/* dialog */
.dlg { width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 24px; background: var(--surface); color: var(--ink); overflow: hidden; }
.dlg::backdrop { background: rgba(43, 29, 23, .62); }
.dlg__in { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; padding: 32px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.dlg__bar { grid-column: 1 / -1; position: sticky; top: -32px; z-index: 2; display: flex; justify-content: flex-end; margin: -32px -32px -24px; padding: 16px 20px 8px; background: var(--surface); }
.dlg__close { position: static; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer; }
.dlg__close:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--surface); }
.dlg__gallery { padding-bottom: 24px; }
.frame--dlg { aspect-ratio: 4 / 5; height: min(calc(100dvh - 260px), 720px); width: auto; max-width: 100%; }
.thumbs { display: flex; gap: 10px; margin-top: 14px; }
.thumbs button { width: 64px; height: 80px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--sand); }
.thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.dlg__body { display: grid; align-content: start; gap: 18px; }
.dlg__body > p:not(.card__place):not(.dlg__note) { color: var(--ink); }
.facts { margin: 4px 0 8px; display: grid; }
.facts div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; }
.facts dt { color: var(--mid); }
.facts dd { margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.dlg__note { font-size: 14px; color: var(--mid); }

/* ---------- the one orchestrated moment: the hero frame opens ---------- */
@media (prefers-reduced-motion: no-preference) {
  .frame--hero { animation: frame-open 1.3s var(--ease) both; }
  .frame--hero img { animation: settle 1.8s var(--ease) both; }
  .hero__text > * { animation: rise .8s var(--ease) both; }
  .hero__text > :nth-child(2) { animation-delay: .12s; }
  .hero__text > :nth-child(3) { animation-delay: .22s; }
  .hero__text > :nth-child(4) { animation-delay: .3s; }
  .dlg[open] { animation: rise .24s var(--ease); }
}
@keyframes frame-open { from { clip-path: inset(6% 7% 0 7% round 26px); } to { clip-path: inset(0 0 0 0 round 26px); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav ul { gap: 22px; }
  .comm__fig { grid-column: 1 / 6; }
  .comm__text { grid-column: 6 / 13; }
  .places li { grid-template-columns: 22px 1fr; }
  .places p { grid-column: 2; margin-top: 4px; }
  .people { grid-template-columns: 1fr; gap: 28px; max-width: 680px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; padding: 16px 0 18px; }
  .steps__n { grid-row: span 2; font-size: 2.6rem; }
  .steps p { max-width: 40em; }
}
@media (max-width: 1023px) {
  .hdr__in { height: 72px; }
  html { scroll-padding-top: 72px; }
  .nav, .hdr__cta { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .hero__grid { grid-template-columns: 1fr; row-gap: 36px; }
  .hero__fig, .hero__text { grid-column: 1; }
  .hero__fig { grid-row: 1; }
  .hero__text { grid-row: 2; padding: 0; gap: 22px; }
  .frame--hero { height: auto; aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; }
  .hero__fig { max-width: 620px; }
  .sec__head--split { grid-template-columns: 1fr; }
  .cards { column-gap: 18px; }
  .card__facts { gap: 2px 14px; font-size: 14px; }
  .comm__grid, .words__grid { grid-template-columns: 1fr; }
  .comm__fig { position: static; grid-column: 1; max-width: none; margin-bottom: 44px; }
  .comm__text { grid-column: 1; }
  /* the full 3:2 frame would show the skyline at 80-95 % of c02: a 7:6 window from the left edge stops at 78 % */
  .frame--comm { aspect-ratio: 7 / 6; }
  .frame--comm img { object-position: 0% 55% !important; }
  .card__place { display: grid; justify-items: start; gap: 6px; }
  .svcs { grid-template-columns: 1fr; gap: 0; }
  .svc { padding: 20px 0 22px; }
  .frame--band { aspect-ratio: 3 / 2; }
  .words__fig { grid-column: 1; max-width: 360px; margin-bottom: 40px; }
  .words__text { grid-column: 1; }
  .why__fig { max-width: 420px; }
  .hero__text .hero__where { margin-top: 8px; }
  .hero__text h1 { margin-top: 0; }
  .services__fig, .services__text, .why__text, .why__fig, .comm__fig, .comm__text, .words__fig, .words__text, .enquire__side, .form { grid-column: 1 / -1; }
  .services__text { margin-top: 48px; }
  .why__fig { margin-top: 48px; max-width: 520px; }
  .enquire__side { position: static; margin-bottom: 48px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__grid > div:first-child { grid-column: 1 / -1; }
  .ftr__legal { grid-template-columns: 1fr; }
  .dlg__in { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .dlg__body { padding-top: 0; }

  .dlg__bar { top: -20px; margin: -20px -20px 0; padding: 12px 16px 10px; }
  .frame--dlg { aspect-ratio: 4 / 5; height: auto; width: min(100%, calc(56vh * .8)); margin-inline: auto; }
  .thumbs { justify-content: center; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: start; }
  .hero__fig { grid-column: 2; grid-row: 1; }
  .hero__text { grid-column: 1; grid-row: 1; padding-bottom: 36px; }
  .frame--hero { aspect-ratio: 4 / 5; max-height: none; }
  .hero__text { padding-bottom: 0; align-self: start; }
  .card__name { min-height: 2.3em; }
  .why__grid { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .why__text { grid-column: 1; }
  .why { grid-template-columns: 1fr; gap: 28px; }
  .why__fig { grid-column: 2; margin-top: 0; max-width: none; align-self: center; }
  .words__grid { grid-template-columns: 5fr 7fr; column-gap: 32px; }
  .words__fig { grid-column: 1; max-width: none; margin-bottom: 0; }
  .words__text { grid-column: 2; }
}
@media (max-width: 699px) {
  :root { --sec: 56px; }
  body { font-size: 16px; }
  .hero__lattice { margin-top: 0; margin-bottom: -8px; }
  .hero__where { font-size: 14px; }
  .sec__head { margin-bottom: 32px; gap: 12px; }
  .contact { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .why__text { gap: 32px; }
  /* phone: the three villas become a snap row (the next card peeks in), about 1 700 px shorter than a stack */
  .cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .cards::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: start; }
  .card__line { font-size: 15px; }
  .hero { padding-top: 8px; }
  .frame--hero { aspect-ratio: 1 / 1; max-height: 42vh; }
  .hero .cap { font-size: 13px; margin-top: 8px; }
  .hero__grid { row-gap: 24px; }
  .hero__text { gap: 18px; }
  .actions { gap: 10px 24px; }
  .actions .btn { width: 100%; min-height: 56px; }
  .hero__where { margin-top: 6px; }
  .places li { padding: 16px 0; }
  .places p { font-size: 15px; }
  .comm__fig { margin-bottom: 32px; }
  .why__fig { max-width: none; margin-top: 32px; }
  .why div { padding-top: 16px; }
  .why dt { font-size: 1.4rem; }
  .words__fig { max-width: none; margin-bottom: 28px; }
  .words__fig { max-width: 280px; margin-inline: auto; }

  .why { grid-template-columns: 1fr; gap: 26px; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { grid-template-columns: 52px 1fr; column-gap: 8px; row-gap: 4px; padding: 16px 0 18px; }
  .steps__n { grid-row: span 2; font-size: 2.6rem; }
  .ftr { padding: 56px 0 40px; }
  .ftr__grid { gap: 28px; padding-bottom: 28px; }
  .ftr__brand { margin-bottom: 10px; }
  .ftr ul { display: flex; flex-wrap: wrap; gap: 10px 22px; }
  .ftr__contact { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .ftr__contact div { grid-template-columns: 1fr; gap: 0; }
  .ftr__contact div:last-child { grid-column: 1 / -1; }
  .frame--niche { aspect-ratio: 4 / 3; }
  .why { gap: 20px; }
  .services .cap, .why .cap { display: none; }
  .person .person__since { display: none; }
  .person > div { padding-top: 0; }
  .quotes { grid-template-columns: 1fr; gap: 40px; }
  .row2 { grid-template-columns: 1fr; }
  .contact div { grid-template-columns: 1fr; gap: 2px; }
  .btn--submit { width: 100%; min-height: 56px; }
  .ftr__grid { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr 1fr; }
}

/* lattice placements */
.hero__lattice { margin-top: auto; margin-bottom: -12px; }
.hero__text .hero__lattice + .hero__where { margin-top: 0; }
.dark .lattice { margin-bottom: clamp(40px, 5vw, 64px); }
.ftr .lattice { margin-bottom: 56px; }