:root {
  --sand: #EBD3A9; /* Sun-baked ochre stone: page background */
  --sand-light: #F6E7CB; /* Sunlit stone: cards and inputs only */
  --sand-deep: #D7B98A; /* Shaded stone: rules and illustration shade */
  --shadow: #CFAE7A; /* Long cast shadow behind numerals on stone */
  --shadow-dark: #062728; /* Long cast shadow on the teal hero */
  --teal: #0F3D3E; /* Deep teal: text, hero band and dark sections */
  --teal-soft: #1C5354; /* Lifted teal: panels on dark */
  --green: #1D4A37; /* Garden green: the neighbourhood band */
  --muted: #3F4F48; /* Quiet teal grey: secondary text (AA on ochre) */
  --sun: #F5972A; /* Low orange sun: highlights, buttons, active rooms */
  --sun-deep: #E07818; /* Late sun: hover and the sun's edge */
  --on-teal: #EFE4D1; /* Sand text on teal */
  --on-teal-muted: #B9C3B8; /* Secondary text on teal (AA) */
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; /* Didone headlines and numerals */
  --font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif; /* Body, labels, tables */
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --wide: max(var(--gutter), calc((100% - 1360px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--teal); font: 400 1.0625rem/1.6 var(--font-body); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, ol { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.03em; font-optical-sizing: auto; }
h2 { font-size: clamp(2.8rem, 1.4rem + 5.6vw, 7rem); line-height: .95; text-wrap: balance; }
h2 em, h3 em { font-style: italic; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sun); color: var(--teal); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.hero :focus-visible, .architecture :focus-visible, .neighbourhood :focus-visible, .room-description :focus-visible { outline-color: var(--sun); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 50; padding: .8rem 1.1rem; background: var(--teal); color: var(--sand); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.section { padding: clamp(5rem, 10vw, 9.5rem) var(--wide); position: relative; }
.eyebrow { font: 500 .78rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.section-label { display: flex; align-items: flex-end; gap: .9rem; margin-bottom: 2rem; overflow: visible; }
/* Sun-dial numerals: the hour advances section by section, as the sun crosses the page */
.dial { position: relative; display: inline-block; padding-left: 3.7rem; font: italic 400 2rem/1 var(--font-display); font-variant-numeric: lining-nums; }
.dial::before { content: ''; position: absolute; left: 0; bottom: .1rem; width: 3rem; height: 1.5rem; border-radius: 3rem 3rem 0 0; background: var(--sun); }
.dial::after { content: ''; position: absolute; left: 1.45rem; bottom: .1rem; width: 2px; height: 1.85rem; background: currentColor; transform-origin: 50% 100%; transform: rotate(var(--hour, 0deg)); }
.h9 { --hour: -62deg; } .h10 { --hour: -42deg; } .h11 { --hour: -21deg; } .h12 { --hour: 0deg; } .h2 { --hour: 32deg; } .h4 { --hour: 56deg; } .h6 { --hour: 80deg; }
.shared-life .dial::before { background: var(--teal); }
.shared-life .dial::after { background: var(--sand-light); }
.section-label p { font: 500 .78rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 0; border: 0; border-bottom: 1.5px solid currentColor; background: none; cursor: pointer; font-weight: 500; transition: gap .25s ease; }
.text-link:hover { gap: 1rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 3.4rem; padding: .9rem 1.5rem; border: 0; cursor: pointer; font-weight: 500; font-size: 1rem; transition: background .25s ease, color .25s ease, transform .25s ease; }
.button-dark { background: var(--teal); color: var(--sand-light); }
.button-dark:hover { background: var(--sun); color: var(--teal); }

/* Long cast shadow, as if the sun were low in the west */
.hero h1 span, .fact-number { text-shadow: 2px 3px 0 var(--shadow); }

/* Header */
.site-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem var(--wide); }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; font: 400 1.7rem/1 var(--font-display); letter-spacing: -.02em; }
.wordmark svg { width: 1.9rem; height: 1.9rem; }
.site-header { color: var(--on-teal); background: var(--teal); }
.wordmark svg circle { fill: var(--sun); }
.site-header nav { display: flex; align-items: center; gap: 2rem; font-size: .95rem; font-weight: 500; }
@media (max-width: 399px) { .site-header nav { font-size: .85rem; gap: .8rem; } }
.site-header nav a:not(.nav-visit) { display: none; }
.site-header nav a:not(.nav-visit):hover { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1.5px; }
.nav-visit { white-space: nowrap; padding: .7rem 1.1rem; background: var(--sun); color: var(--teal); transition: background .25s ease, color .25s ease; }
.nav-visit:hover { background: var(--sand-light); color: var(--teal); }
.site-header :focus-visible { outline-color: var(--sun); }

/* Hero */
.hero { position: relative; isolation: isolate; display: grid; gap: 1.5rem; padding: 5.6rem var(--wide) 3rem; overflow: clip; background: var(--teal); color: var(--on-teal); }
.hero h1 span { text-shadow: 2px 3px 0 rgba(0, 40, 40, .5); }
.hero::before { /* the sun */
  content: ''; position: absolute; z-index: -2; width: clamp(20rem, 66vw, 60rem); aspect-ratio: 1; right: -38vw; top: -26vw; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #FFC266, var(--sun) 55%, var(--sun-deep));
  box-shadow: 0 0 0 2.5rem rgba(245, 151, 42, .12), 0 0 0 5.5rem rgba(245, 151, 42, .06);
}
.hero::after { /* pergola shadows drifting across the stone */
  content: ''; position: absolute; z-index: -1; inset: -20% -40%; pointer-events: none;
  background: repeating-linear-gradient(118deg, transparent 0 7.5rem, rgba(2, 24, 25, .16) 7.5rem 10.5rem);
  animation: pergola 38s ease-in-out infinite alternate;
}
@keyframes pergola { from { transform: translateX(-3%); } to { transform: translateX(4%); } }
.hero-top { display: flex; justify-content: space-between; gap: 1rem; font: 500 .74rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; padding-top: 1rem; border-top: 1.5px solid var(--on-teal); }
.hero-top p { margin: 0; }
.edition { text-align: right; align-self: start; padding: .35rem .6rem; background: var(--teal); }
.hero h1 { position: relative; z-index: 2; font-size: clamp(3.4rem, 15.2vw, 15rem); line-height: .86; letter-spacing: -.045em; margin: .5rem 0 0 -.04em; }
.hero h1 span { font-style: italic; display: inline-block; padding-right: .1em; }
.hero-art { position: relative; margin-inline: calc(var(--wide) * -1); }
.hero-art img { width: 100%; height: auto; aspect-ratio: 7 / 5; object-fit: cover; }
.art-index { position: absolute; right: var(--gutter); top: 1rem; padding: .4rem .55rem; background: var(--sun); font: 500 .72rem/1 var(--font-body); letter-spacing: .16em; color: var(--teal); }
.sun-link { position: absolute; left: var(--gutter); bottom: -2.6rem; display: grid; place-content: center; gap: .4rem; width: 8.2rem; aspect-ratio: 1; border-radius: 50%; padding: 1rem; background: var(--sun); color: var(--teal); font: italic 400 1.15rem/1.05 var(--font-display); text-align: center; transition: background .3s ease, color .3s ease, transform .4s ease; }
.sun-link:hover { background: var(--sand-light); color: var(--teal); transform: rotate(-6deg); }
.sun-arrow { font-style: normal; font-family: var(--font-body); font-size: 1.2rem; }
.hero-bottom { display: grid; gap: 1.2rem; padding-top: 3.6rem; }
.hero-bottom > p:first-child { font: 400 1.5rem/1.25 var(--font-display); }
.hero-bottom .text-link { justify-self: start; }
.location { font-size: .95rem; color: var(--on-teal-muted); }

/* Introduction */
.intro-body { display: grid; gap: 2.2rem; }
.intro-copy { display: grid; gap: 1.2rem; max-width: 34rem; color: var(--muted); }
.intro-copy p:first-child { font: 400 1.45rem/1.35 var(--font-display); color: var(--teal); }
.intro-copy .text-link { justify-self: start; color: var(--teal); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; margin-top: clamp(4rem, 8vw, 7rem); }
.facts > div { border-top: 1.5px solid var(--teal); padding-top: 1.2rem; }
.fact-number { display: block; font: 400 clamp(4rem, 2rem + 7vw, 8.5rem)/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: lining-nums; }
.fact-number span { font-size: .5em; vertical-align: .6em; }
.facts p { margin-top: 1rem; font-size: .95rem; color: var(--muted); }

/* Architecture: teal */
.architecture { background: var(--teal); color: var(--on-teal); display: grid; gap: 3.5rem; overflow: clip; }
.architecture h2 em { color: var(--sun); }
.architecture-text { display: grid; gap: 1.3rem; align-content: start; max-width: 36rem; }
.architecture-text > p { color: var(--on-teal-muted); }
.architecture-text h2 { margin-bottom: 1rem; }
.architect-signature { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(239, 228, 209, .25); }
.signature { font: italic 400 2.2rem/1 var(--font-display); color: var(--sun); }
.architect-signature p { font-size: .95rem; line-height: 1.4; color: var(--on-teal-muted); }
.material-study { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: end; padding-bottom: 4.5rem; isolation: isolate; }
.material { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: .9rem; color: var(--teal); }
.material::after { /* each sample throws a long shadow across the floor */
  content: ''; position: absolute; z-index: -1; left: 0; top: 100%; width: 100%; height: 34%; background: linear-gradient(180deg, rgba(3, 22, 22, .6), rgba(3, 22, 22, 0)); transform-origin: top left; transform: skewX(52deg);
}
.material span { font: italic 400 1.4rem/1 var(--font-display); }
.material p { font-size: .9rem; font-weight: 500; line-height: 1.25; }
.limestone { height: 18rem; background: linear-gradient(160deg, #F7EEDD, #E2D1B2); }
.limestone::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(120, 95, 60, .16) 46px 47px), repeating-linear-gradient(90deg, transparent 0 70px, rgba(120, 95, 60, .1) 70px 71px); pointer-events: none; }
.oak { height: 22rem; background: repeating-radial-gradient(ellipse 140% 18% at 20% 50%, #C99C68 0 3px, #B98A57 3px 7px, #D2A876 7px 11px); }
.bronze { height: 14rem; background: linear-gradient(115deg, #7A5A36, #B8915A 38%, #E2C08A 50%, #9C7444 64%, #6E4F2E); color: #1D1308; }
.bronze span, .bronze p { color: #FFF6E6; }
.material-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-teal-muted); }
.material-caption span:first-child { font: italic 400 1.05rem/1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--on-teal); }
.detail-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(239, 228, 209, .25); }
.detail-strip p { padding: 1.2rem 1rem 1.2rem 0; border-bottom: 1px solid rgba(239, 228, 209, .25); font-size: .95rem; }
.detail-strip span { display: block; font: italic 400 1.2rem/1 var(--font-display); color: var(--sun); margin-bottom: .5rem; }

/* Residences + floorplan */
.residences { background: var(--sand); }
.residence-heading { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
.residence-heading > p { font: 400 1.25rem/1.35 var(--font-display); color: var(--muted); }
.residence-heading > p::first-line { font-style: italic; color: var(--teal); }
.plan-layout { display: grid; gap: 3rem; }
.floorplan-wrap { background: var(--sand-light); padding: 1rem; box-shadow: 1rem 1rem 0 var(--teal); }
.plan-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding-bottom: .9rem; margin-bottom: .6rem; border-bottom: 1px solid var(--sand-deep); font: 500 .7rem/1.3 var(--font-body); letter-spacing: .14em; }
.floorplan { width: 100%; height: auto; }
.room { fill: #F7F0E3; transition: fill .3s ease; cursor: pointer; }
.room-terrace { fill: #EFE3CC; }
.room:hover, .room.is-active { fill: var(--sun); }
.plan-labels text { font: 600 14px var(--font-body); letter-spacing: .06em; pointer-events: none; }
.plan-scale text { font: 500 13px var(--font-body); }
.plan-room-summary { display: none; margin-top: .8rem; font-size: 15px; color: var(--muted); }
@media (max-width: 639px) { .plan-labels, .plan-scale { display: none; } .plan-room-summary { display: block; } }
.furniture { pointer-events: none; opacity: .75; }
.plan-lines { pointer-events: none; }
.plan-note { margin-top: .8rem; font-size: .88rem; color: var(--muted); }
.room-explorer { display: grid; gap: 1.2rem; align-content: start; }
.room-explorer .eyebrow { color: var(--muted); }
.room-explorer h3 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; }
.explorer-instruction { color: var(--muted); }
.room-controls { display: grid; border-top: 1px solid var(--sand-deep); }
.room-controls[hidden] { display: none; }
.room-controls button { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3rem; padding: .6rem 0; border: 0; border-bottom: 1px solid var(--sand-deep); background: none; text-align: left; cursor: pointer; font-size: 1rem; transition: padding .25s ease, color .25s ease; }
.room-controls button span { opacity: 0; transition: opacity .25s ease; }
.room-controls button:hover, .room-controls button[aria-pressed="true"] { padding-left: .8rem; }
.room-controls button[aria-pressed="true"] { font-weight: 600; box-shadow: inset 4px 0 0 var(--sun); }
.room-controls button:hover span, .room-controls button[aria-pressed="true"] span { opacity: 1; }
.room-description { display: grid; gap: .5rem; padding: 1.5rem; background: var(--teal); color: var(--on-teal); }
.room-area { display: flex; align-items: baseline; gap: .4rem; font: 400 clamp(4.5rem, 3rem + 5vw, 7rem)/.9 var(--font-display); letter-spacing: -.04em; color: var(--sun); font-variant-numeric: lining-nums tabular-nums; }
.room-area span:last-child { font: 500 1.1rem/1 var(--font-body); letter-spacing: 0; color: var(--on-teal); }
.room-description h4 { font-size: 1.6rem; }
.room-description p:last-child { color: var(--on-teal-muted); }
.room-explorer .button { justify-self: start; }

/* Availability */
.availability-heading { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.availability-heading > p { font: 400 1.25rem/1.35 var(--font-display); color: var(--muted); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; padding: 1.2rem; margin-bottom: 1.5rem; background: var(--teal); color: var(--on-teal); }
.filters[hidden] { display: none; }
.filters label { display: grid; gap: .3rem; font: 500 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-teal-muted); min-width: 0; }
.filters select { width: 100%; min-height: 2.8rem; padding: .4rem 1.6rem .4rem 0; border: 0; border-bottom: 1.5px solid var(--on-teal); border-radius: 0; background: transparent; color: var(--on-teal); font: 500 1rem/1.2 var(--font-body); letter-spacing: 0; text-transform: none; -webkit-appearance: none; appearance: none; color-scheme: dark;
  background-image: linear-gradient(45deg, transparent 50%, var(--sun) 50%), linear-gradient(-45deg, transparent 50%, var(--sun) 50%); background-size: 6px 6px; background-position: calc(100% - 8px) 55%, calc(100% - 2px) 55%; background-repeat: no-repeat; }
.filters select option { background: var(--sand-light); color: var(--teal); }
.filters :focus-visible { outline-color: var(--sun); }
#reset-filters { min-height: 2.8rem; padding: .5rem 1rem; border: 1.5px solid var(--sun); background: transparent; color: var(--sun); cursor: pointer; font-weight: 500; }
#reset-filters:hover { background: var(--sun); color: var(--teal); }
.availability-count { font: italic 400 1.3rem/1.3 var(--font-display); margin-bottom: 1rem; }
.availability-table { width: 100%; border-collapse: collapse; }
.availability-table thead { display: none; }
.availability-table tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4rem 1rem; padding: 1.2rem 0; border-top: 1.5px solid var(--teal); }
.availability-table tbody tr:last-child { border-bottom: 1.5px solid var(--teal); }
.availability-table tr[hidden] { display: none; }
.availability-table th[scope="row"] { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .8rem; text-align: left; font-weight: 400; }
.residence-number { font: 400 2.6rem/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.residence-number + span { font: italic 400 1.3rem/1 var(--font-display); }
.availability-table td { white-space: nowrap; font-size: .95rem; font-variant-numeric: tabular-nums; }
.availability-table td[data-label]::before { content: attr(data-label); display: block; font: 500 .72rem/1.6 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.availability-table td.price { font: 400 1.5rem/1.1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.availability-table td:last-child { grid-column: 2 / -1; align-self: end; justify-self: end; }
.availability-table td a { display: inline-flex; gap: .5rem; padding: .55rem .9rem; background: var(--teal); color: var(--sand-light); font-weight: 500; font-size: .9rem; transition: background .25s ease, color .25s ease; }
.availability-table td a:hover { background: var(--sun); color: var(--teal); }
.empty-state { padding: 2rem 0; font: italic 400 1.4rem/1.3 var(--font-display); border-bottom: 1.5px solid var(--teal); }
.availability-footnote { margin-top: 1.5rem; font-size: .9rem; color: var(--muted); max-width: 44rem; }

/* Neighbourhood: teal */
.neighbourhood { display: grid; gap: 3.5rem; background: var(--green); color: var(--on-teal); }
.neighbourhood h2 em { color: var(--sun); }
.neighbourhood-copy { display: grid; gap: 1.4rem; align-content: start; }
.neighbourhood-copy > p:not(.walking-note) { color: var(--on-teal-muted); max-width: 32rem; }
.neighbourhood-copy h2 { margin-bottom: .6rem; }
.local-list { list-style: none; padding: 0; border-top: 1px solid rgba(239, 228, 209, .25); }
.local-list li { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(239, 228, 209, .25); }
.local-list li > span:first-child { display: grid; place-items: center; width: 2.2rem; aspect-ratio: 1; border-radius: 50%; background: var(--sun); color: var(--teal); font-size: .8rem; font-weight: 600; }
.local-list h3 { font-size: 1.4rem; line-height: 1.1; }
.local-list p { font-size: .95rem; color: var(--on-teal-muted); }
.local-list li > span:last-child { font: italic 400 1.3rem/1 var(--font-display); color: var(--sun); white-space: nowrap; }
.walking-note { font-size: .95rem; color: var(--on-teal-muted); }
.map-wrap { position: relative; }
.neighbourhood-map { width: 100%; height: auto; box-shadow: 1.2rem 1.2rem 0 rgba(3, 20, 20, .35); }
.map-marker-label text { font: 600 13px var(--font-body); }
.map-label text { font: 600 14px var(--font-body); letter-spacing: .14em; }
.map-small text { font: 500 12px var(--font-body); }
@media (max-width: 639px) { .map-marker-label text, .map-label text, .map-small text { font-size: 25px; } }
.map-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-top: 2rem; font: italic 400 1.2rem/1.2 var(--font-display); }
.map-caption span { font: 500 .7rem/1.6 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-teal-muted); }

/* Shared life: a courtyard drawn in sun and shade */
.shared-life { display: grid; gap: 2.5rem; background: var(--sun); }
.shared-life .shared-copy dl div { border-bottom-color: rgba(15, 61, 62, .3); }
.shared-art { position: relative; height: 24rem; overflow: hidden; background: linear-gradient(180deg, #F6E7CB 0 66%, #DDBA84 66% 100%); box-shadow: 1rem 1rem 0 var(--teal); }
.shadow-wall { position: absolute; inset: -30% -60% 0 -20%; background: repeating-linear-gradient(105deg, transparent 0 4.5rem, rgba(110, 72, 30, .17) 4.5rem 6.5rem); transform: skewY(-8deg); animation: pergola 30s ease-in-out infinite alternate; }
.shadow-bench { position: absolute; left: 36%; bottom: 22%; width: 40%; height: 7%; background: var(--teal); }
.shadow-bench::before { content: ''; position: absolute; left: 6%; right: 6%; top: 100%; height: 160%; background: repeating-linear-gradient(90deg, var(--teal) 0 8%, transparent 8% 92%, var(--teal) 92% 100%); }
.shadow-bench::after { content: ''; position: absolute; left: 30%; top: 100%; width: 120%; height: 300%; background: rgba(87, 58, 24, .26); transform-origin: top left; transform: skewX(62deg); }
.shadow-plant { position: absolute; left: 6%; top: 8%; width: 34%; height: 58%; opacity: .32; filter: blur(2px);
  background: radial-gradient(ellipse 20% 34% at 50% 30%, #5C3C17 98%, transparent), radial-gradient(ellipse 16% 28% at 24% 48%, #5C3C17 98%, transparent), radial-gradient(ellipse 16% 28% at 76% 46%, #5C3C17 98%, transparent), radial-gradient(ellipse 14% 24% at 36% 70%, #5C3C17 98%, transparent), radial-gradient(ellipse 14% 24% at 66% 72%, #5C3C17 98%, transparent), linear-gradient(90deg, transparent 48.5%, #5C3C17 48.5% 51.5%, transparent 51.5%);
  transform: skewX(-16deg); }
.shadow-pot { position: absolute; left: 12%; bottom: 22%; width: 13%; height: 18%; background: linear-gradient(90deg, #C9713E, #B05A2D); clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); }
.shadow-pot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14%; background: #9A4C24; }
.courtyard-caption { position: absolute; left: 1rem; bottom: 1rem; padding: .35rem .6rem; background: var(--sand-light); font: 500 .72rem/1.3 var(--font-body); letter-spacing: .16em; }
.shared-life .shared-art::after { content: ''; position: absolute; left: 12%; bottom: 0; width: 13%; height: 22%; background: rgba(87, 58, 24, .26); transform-origin: top left; transform: skewX(62deg); }
.shared-copy { display: grid; gap: 1.5rem; align-content: start; }
.shared-copy > p { font: 400 1.5rem/1.3 var(--font-display); }
.shared-copy dl { display: grid; border-top: 1.5px solid var(--teal); }
.shared-copy dl div { padding: 1.1rem 0; border-bottom: 1px solid var(--sand-deep); }
.shared-copy dt { font-weight: 600; }
.shared-copy dd { color: var(--teal); }

/* Visit */
.visit { display: grid; gap: 3rem; background: var(--sand); }
.visit-copy { display: grid; gap: 1.3rem; align-content: start; }
.visit-copy h2 { margin-bottom: .6rem; }
.visit-copy > p:not(.visit-hours) { color: var(--muted); max-width: 30rem; }
.visit-copy address { font: 400 1.35rem/1.35 var(--font-display); }
.visit-hours { font-size: .95rem; }
.visit-copy .text-link { justify-self: start; font: 400 1.6rem/1.2 var(--font-display); }
.enquiry-panel { position: relative; display: grid; gap: 1.3rem; align-content: start; padding: clamp(1.5rem, 4vw, 3rem); background: var(--teal); color: var(--on-teal); overflow: clip; }
.enquiry-panel::before { content: ''; position: absolute; right: -4rem; top: -4rem; width: 10rem; aspect-ratio: 1; border-radius: 50%; background: var(--sun); }
.enquiry-panel .eyebrow { color: var(--on-teal-muted); }
.enquiry-panel h3 { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); line-height: 1; position: relative; }
#viewing-form { display: grid; gap: 1.2rem; }
#viewing-form label { display: grid; gap: .3rem; font: 500 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-teal-muted); }
#viewing-form input, #viewing-form select, #viewing-form textarea { width: 100%; min-height: 2.9rem; padding: .5rem 0; border: 0; border-bottom: 1.5px solid rgba(239, 228, 209, .65); border-radius: 0; background: transparent; color: var(--on-teal); font: 400 1.05rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; -webkit-appearance: none; appearance: none; color-scheme: dark; resize: vertical; }
#viewing-form select { background-image: linear-gradient(45deg, transparent 50%, var(--sun) 50%), linear-gradient(-45deg, transparent 50%, var(--sun) 50%); background-size: 6px 6px; background-position: calc(100% - 8px) 55%, calc(100% - 2px) 55%; background-repeat: no-repeat; padding-right: 1.5rem; }
#viewing-form select option { background: var(--sand-light); color: var(--teal); }
#viewing-form input::placeholder, #viewing-form textarea::placeholder { color: #93A79F; }
.enquiry-panel :focus-visible { outline-color: var(--sun); }
.enquiry-panel .button-dark { justify-self: start; background: var(--sun); color: var(--teal); margin-top: .4rem; }
.enquiry-panel .button-dark:hover { background: var(--sand-light); }
.form-note { font-size: .9rem; color: var(--on-teal-muted); }
.form-success { display: grid; gap: 1rem; justify-items: start; }
.form-success[hidden] { display: none; }
.success-mark { display: grid; place-items: center; width: 3.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--sun); color: var(--teal); font-size: 1.4rem; }
.form-success h4 { font-size: 2.6rem; line-height: 1; }
.form-success p { color: var(--on-teal-muted); }
.enquiry-panel noscript p { color: var(--on-teal); }
.enquiry-panel noscript a { text-decoration: underline; }

/* Footer */
.site-footer { position: relative; isolation: isolate; background: var(--teal); color: var(--on-teal); padding: 3.5rem var(--wide) 1.5rem; overflow: clip; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.footer-top p { font: italic 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1.1 var(--font-display); }
.back-top { padding: .7rem 1.1rem; border: 1.5px solid var(--sun); color: var(--sun); font-weight: 500; transition: background .25s ease, color .25s ease; }
.back-top:hover { background: var(--sun); color: var(--teal); }
.footer-wordmark { position: relative; margin: 2.5rem 0 0; font: 400 clamp(5.5rem, 26vw, 25rem)/.82 var(--font-display); letter-spacing: -.05em; text-align: center; white-space: nowrap; }
.footer-wordmark::before { /* the sun setting behind the name */
  content: ''; position: absolute; z-index: -1; left: 50%; bottom: 6%; width: 32%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--sun);
  clip-path: inset(0 0 50% 0);
}
.footer-wordmark span { font-size: .14em; vertical-align: 4.6em; font-family: var(--font-body); }
.footer-bottom { display: grid; gap: .6rem; padding-top: 1.5rem; border-top: 1px solid rgba(239, 228, 209, .3); font-size: .95rem; }
.footer-bottom a { text-decoration: underline; text-underline-offset: .25em; }
.footer-bottom a:hover { color: var(--sun); }
.legal { margin-top: 1.5rem; font-size: .75rem; color: var(--on-teal-muted); max-width: 52rem; }
.site-footer :focus-visible { outline-color: var(--sun); }

/* Reveal */
.js .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (min-width: 640px) {
  .hero::before { right: -16vw; top: -10vw; }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .detail-strip { grid-template-columns: repeat(4, 1fr); }
  .filters { grid-template-columns: repeat(3, 1fr) auto; }
  .availability-table tr { grid-template-columns: 2fr 1fr 1fr 1.4fr 1.2fr auto; align-items: center; }
  .availability-table th[scope="row"] { grid-column: auto; }
  .availability-table td:last-child { grid-column: auto; }
  .floorplan-wrap { padding: 1.6rem; }
  .footer-bottom { grid-template-columns: 1fr 1fr 1fr; }
  .footer-bottom p:last-child { text-align: right; }
}

@media (min-width: 960px) {
  .site-header nav a:not(.nav-visit) { display: inline; }
  .hero { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; padding-top: 6.5rem; padding-bottom: 5rem; }
  .hero-top, .hero h1 { grid-column: 1 / -1; }
  .hero h1 { margin-top: 1.5rem; }
  .hero h1 { font-size: clamp(3.4rem, min(15.2vw, 17vh), 15rem); }
  .hero-art { grid-column: 5 / -1; grid-row: 3; justify-self: end; width: min(100%, 41rem); margin: -4vw 0 0; }
  .art-index { right: 1rem; }
  .hero-bottom { grid-column: 1 / 5; grid-row: 3; align-content: end; padding: 0 1rem 0 0; }
  .sun-link { left: -4.5rem; bottom: 12%; width: 9.5rem; font-size: 1.3rem; }
  .intro-body { grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: end; }
  .architecture { grid-template-columns: 1fr 1.1fr; column-gap: 6rem; align-items: center; }
  .detail-strip { grid-column: 1 / -1; }
  .residence-heading { grid-template-columns: 1fr auto; align-items: end; }
  .residence-heading .section-label { grid-column: 1 / -1; margin-bottom: 0; }
  .residence-heading > p { text-align: right; }
  .plan-layout { grid-template-columns: 1.45fr 1fr; gap: 4rem; align-items: start; }
  .room-explorer { position: sticky; top: 2rem; }
  .availability-heading { grid-template-columns: 1fr auto; align-items: end; }
  .availability-heading > p { text-align: right; }
  .availability-table thead { display: table-header-group; }
  .availability-table thead tr { border-top: 0; padding: 0 0 .8rem; }
  .availability-table thead th { text-align: left; font: 500 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .availability-table td[data-label]::before { display: none; }
  .availability-table tbody tr { padding: 1.4rem .8rem; margin: 0 -.8rem; transition: background .25s ease; }
  .availability-table tbody tr:hover { background: var(--sand-light); }
  .hero::before { right: -8vw; top: -14vw; }
  .neighbourhood { grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
  .shared-life { grid-template-columns: 1fr 1.5fr 1fr; gap: 3rem; align-items: end; }
  .shared-art { height: 34rem; }
  .visit { grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}