/* Parmelee Key, v2. Layout follows the "Avelor" reference section by section (reference/avelor).
   Type: Cormorant Garamond (display, light, italic accents) + Manrope (small capitals and body). */
:root {
  --paper: #f4f2ee;
  --ink: #121516;
  --soft: #4a5051;
  --mute: #868b8b;
  --rule: rgba(18, 21, 22, .18);
  --night: #0b0f10;
  --night-2: #12181a;
  --snow: #f1efe9;
  --snow-soft: rgba(241, 239, 233, .74);
  --snow-mute: rgba(241, 239, 233, .5);
  --snow-rule: rgba(241, 239, 233, .18);
  --serif: "Cormorant Garamond", "Iowan Old Style", Garamond, "Times New Roman", serif;
  --sans: Manrope, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 5.2vw, 96px);
  --ease: cubic-bezier(.22, .61, .2, 1);
  --bar: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 15px/1.7 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; font-weight: inherit; }
ol, ul { list-style: none; }
em { font-style: italic; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ---------- top bar: wordmark | two-line descriptor, five links, outlined enquiry ---------- */
.bar { position: fixed; z-index: 40; inset: 0 0 auto 0; height: var(--bar); padding: 0 var(--pad); display: flex; align-items: center; gap: clamp(22px, 4vw, 72px); color: var(--ink); background: rgba(244, 242, 238, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease); }
.on-dark .bar { color: var(--snow); background: linear-gradient(180deg, rgba(11, 15, 16, .5), rgba(11, 15, 16, 0)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.on-dark.is-solid .bar { background: rgba(11, 15, 16, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mark { display: inline-flex; align-items: center; gap: 13px; white-space: nowrap; flex: none; }
.mark span { font: 400 17px/1 var(--serif); letter-spacing: .34em; text-transform: uppercase; }
.mark i { font: 600 7.5px/1.35 var(--sans); font-style: normal; letter-spacing: .26em; text-transform: uppercase; padding-left: 13px; border-left: 1px solid currentColor; opacity: .8; }
.nav { display: flex; gap: clamp(14px, 1.9vw, 30px); }
.nav a { position: relative; font: 600 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; opacity: .78; transition: opacity .3s; }
.nav a::before { content: ""; position: absolute; left: 50%; top: 0; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: currentColor; opacity: 0; transition: opacity .3s; }
.nav a:hover, .nav a.is-here { opacity: 1; }
.nav a.is-here::before { opacity: 1; }
.enquire { margin-left: auto; flex: none; font: 600 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 14px 18px; border: 1px solid currentColor; transition: background .35s, color .35s; white-space: nowrap; }
.enquire:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.on-dark .enquire:hover { background: var(--snow); color: var(--night); border-color: var(--snow); }

/* ---------- shared pieces ---------- */
.tag { display: flex; align-items: center; gap: 14px; font: 600 9.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.tag i { display: block; width: 34px; height: 1px; background: currentColor; opacity: .7; }
.tag-c { justify-content: center; }
.big { font: 300 clamp(40px, 5.2vw, 84px)/1.02 var(--serif); letter-spacing: -.008em; margin-top: 26px; }
.big em { display: block; font-weight: 300; }
.small { margin-top: 26px; max-width: 34ch; font: 400 13px/1.75 var(--sans); }
.fine { font: 400 11px/1.7 var(--sans); color: var(--snow-mute); max-width: 110ch; }
.fine-dark { color: var(--mute); margin-top: clamp(30px, 5vh, 56px); }
.line-btn { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 15px 20px; border: 1px solid currentColor; font: 600 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; transition: background .35s, color .35s; }
.line-btn span { transition: transform .4s var(--ease); }
.line-btn:hover span { transform: translateX(5px); }
.night .line-btn:hover, .studies .line-btn:hover, .opp .line-btn:hover { background: var(--snow); color: var(--night); border-color: var(--snow); }
.text-link { display: inline-flex; gap: 12px; margin-top: 20px; font: 600 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding-bottom: 8px; border-bottom: 1px solid var(--snow-rule); transition: border-color .3s; }
.text-link:hover { border-bottom-color: currentColor; }
.corner { position: absolute; z-index: 2; left: var(--pad); bottom: clamp(26px, 4.6vh, 44px); color: #fff; font: 600 9.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.corner b { font-weight: 600; opacity: .6; margin-right: 16px; }
.cue { position: absolute; z-index: 2; left: 50%; bottom: clamp(18px, 3.4vh, 34px); transform: translateX(-50%); color: #fff; text-align: center; font: 600 9px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.cue i { display: block; width: 1px; height: 26px; margin: 10px auto 0; background: currentColor; transform-origin: top; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
[data-rise] { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
[data-rise].is-in { opacity: 1; transform: none; }

/* ---------- 01 hero: the clouds, as before ---------- */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); color: #fff; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade, .walk-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6, 10, 11, .38) 0%, rgba(6, 10, 11, 0) 24%, rgba(6, 10, 11, 0) 46%, rgba(6, 10, 11, .62) 100%); }
.hero-copy { position: absolute; left: var(--pad); bottom: clamp(104px, 18vh, 176px); max-width: min(980px, 88vw); transition: opacity 1.4s cubic-bezier(.45, 0, .55, 1), transform 2s cubic-bezier(.45, 0, .55, 1); }
.hero h1, .walk-line h2 { font: 300 clamp(48px, 7.6vw, 124px)/.96 var(--serif); letter-spacing: -.012em; margin-top: 24px; text-shadow: 0 2px 44px rgba(0, 0, 0, .3); }
.hero h1 em, .walk-line h2 em { display: block; padding-left: .62em; font-weight: 300; }
.hero-sub { margin-top: 24px; max-width: 44ch; font: 400 13px/1.75 var(--sans); color: rgba(255, 255, 255, .86); text-shadow: 0 1px 18px rgba(0, 0, 0, .5); }
.replay { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(22px, 4vh, 40px); color: #fff; font: 600 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .5); opacity: 0; pointer-events: none; transition: opacity .5s, background .3s, color .3s; }
.replay:hover { background: #fff; color: var(--night); }
.hero.is-seen .replay { opacity: 1; pointer-events: auto; }
.hero.is-playing .hero-copy { opacity: 0; transform: translateY(-14px); }
.hero.is-playing .cue, .hero.is-playing .replay { opacity: 0; pointer-events: none; }
.hero .cue { transition: opacity .6s; }

/* opening as on the first site: the title centred in a soft cloud veil; the first scroll falls through it into the film.
   Back at the top after the film: the same title over the first frame of the film (clouds, the key in the opening). */
.hero { color: #05161b; }
.hero-copy { left: 0; right: 0; bottom: auto; top: 50%; max-width: none; transform: translateY(-50%); display: grid; justify-items: center; text-align: center; padding: 0 var(--pad); z-index: 2; }
.hero-eyebrow { font: 600 10.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #0c242a; opacity: .78; }
.hero .hero-copy h1 { font: 400 clamp(58px, 11.5vw, 190px)/.92 "Instrument Serif", var(--serif); letter-spacing: -.025em; margin-top: 20px; text-shadow: none; }
.hero .hero-sub { margin-top: 18px; max-width: none; font: italic 400 clamp(19px, 2vw, 30px)/1.3 "Instrument Serif", var(--serif); color: #05161b; text-shadow: none; }
.hero.is-playing .hero-copy { opacity: 0; transform: translateY(calc(-50% - 26px)) scale(1.03); }
.hero-clouds { position: absolute; inset: -12%; pointer-events: none; z-index: 1; transform-origin: 50% 46%; transition: opacity 1.6s cubic-bezier(.45, 0, .55, 1), transform 2.4s cubic-bezier(.45, 0, .55, 1);
  background: linear-gradient(180deg, rgba(127, 178, 211, .92) 0%, rgba(169, 203, 224, .82) 34%, rgba(240, 220, 192, .78) 72%, rgba(243, 200, 152, .86) 100%); }
.hero-clouds i { position: absolute; border-radius: 50%; filter: blur(38px); background: radial-gradient(closest-side, rgba(255, 255, 255, .98), rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, 0)); animation: drift 26s ease-in-out infinite alternate; }
.hero-clouds i:nth-child(1) { width: 62%; height: 54%; left: -8%; top: 4%; }
.hero-clouds i:nth-child(2) { width: 58%; height: 50%; right: -10%; top: 0; animation-duration: 32s; animation-direction: alternate-reverse; }
.hero-clouds i:nth-child(3) { width: 74%; height: 58%; left: 10%; top: 34%; animation-duration: 38s; }
.hero-clouds i:nth-child(4) { width: 56%; height: 52%; left: -12%; bottom: -8%; animation-duration: 30s; animation-direction: alternate-reverse; }
.hero-clouds i:nth-child(5) { width: 60%; height: 54%; right: -8%; bottom: -6%; }
.hero-clouds i:nth-child(6) { width: 40%; height: 36%; left: 30%; top: 8%; opacity: .8; animation-duration: 44s; }
@keyframes drift { from { transform: translate3d(-2.5%, 0, 0) scale(1); } to { transform: translate3d(2.5%, -1.5%, 0) scale(1.07); } }
.hero.is-playing .hero-clouds, .hero.is-seen .hero-clouds { opacity: 0; transform: scale(1.18); }
.hero .replay { color: #fff; background: rgba(11, 15, 16, .42); border-color: transparent; border-radius: 999px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero .replay:hover { background: #fff; color: var(--night); }
@media (max-width: 760px) { .hero .hero-copy { bottom: auto; right: 0; } }
.hero-lock, .hero-lock body { overflow: hidden; }

/* ---------- 02 the vision: a large statement with stepped lines, a small picture, the facts ---------- */
.sec { position: relative; padding: clamp(96px, 15vh, 190px) var(--pad); }
.paper { background: var(--paper); color: var(--ink); }
.night { background: var(--night); color: var(--snow); }
.statement-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 23vw); gap: clamp(24px, 5vw, 90px); align-items: center; margin-top: clamp(40px, 7vh, 80px); }
.say { font: 300 clamp(34px, 5.3vw, 88px)/1.08 var(--serif); letter-spacing: -.012em; }
.say span { display: block; opacity: .14; transition: opacity .9s var(--ease); }
.say span.is-lit { opacity: 1; }
.say .in { padding-left: 1.05em; }
.say-pic { aspect-ratio: 3 / 4; overflow: hidden; align-self: center; }
.say-pic img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.facts { margin-top: clamp(64px, 11vh, 130px); border-top: 1px solid var(--rule); }
.facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 28px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 600 9.5px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; flex: none; }
.facts dd { font: 500 9.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-align: right; color: var(--soft); }

/* ---------- 03 walk-through: its own film on the scroll ---------- */
.walk { position: relative; height: 560vh; background: var(--paper); }
.walk-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.walk-frame { position: absolute; inset: 0; overflow: hidden; background: var(--night); will-change: clip-path; }
.walk-poster, .walk-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.walk-frame video { opacity: 0; transition: opacity .6s; }
.walk-frame video.is-live { opacity: 1; }
.walk-copy { position: absolute; inset: 0; z-index: 1; color: #fff; pointer-events: none; }
.walk-line { position: absolute; opacity: 0; transition: opacity .8s var(--ease), transform 1s var(--ease); transform: translateY(16px); }
.walk-line.is-on { opacity: 1; transform: none; }
.w-left { left: var(--pad); bottom: clamp(104px, 18vh, 176px); max-width: min(900px, 86vw); }
.w-right { right: var(--pad); top: 46%; text-align: right; }
.w-right h2 { font-size: clamp(26px, 3.1vw, 50px); line-height: 1.1; margin: 0; color: rgba(255, 255, 255, .86); }
.w-right h2 em { padding: 0; }
.w-top { left: 50%; top: calc(var(--bar) + 5vh); width: min(900px, 88vw); text-align: center; transform: translate(-50%, 16px); }
.w-top.is-on { transform: translateX(-50%); }
.w-top h2 { font-size: clamp(32px, 4.2vw, 68px); margin-top: 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 44px rgba(0, 0, 0, .65); }
.w-top h2 em { display: inline; padding: 0; }
.walk-note { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(26px, 4.6vh, 44px); max-width: 32ch; text-align: right; font: 400 9.5px/1.5 var(--sans); letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
.walk-stage.is-closing .walk-copy, .walk-stage.is-closing .corner, .walk-stage.is-closing .cue, .walk-stage.is-closing .walk-note { opacity: 0; transition: opacity .4s; }

/* ---------- 04 compounds: the row moves sideways while the page scrolls ---------- */
.studies { position: relative; background: var(--night); color: var(--snow); }
.studies-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.studies-track { display: flex; align-items: center; gap: clamp(26px, 3.4vw, 60px); height: 100%; padding: var(--bar) var(--pad) 0; width: max-content; will-change: transform; }
.studies-intro { flex: 0 0 clamp(300px, 33vw, 520px); }
.study { flex: none; cursor: pointer; }
.study figure { overflow: hidden; background: var(--night-2); }
.study img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.study:hover img { transform: scale(1.04); }
.study.s-wide figure { width: clamp(340px, 40vw, 640px); aspect-ratio: 16 / 11; }
.study.s-tall figure { width: clamp(230px, 22vw, 360px); aspect-ratio: 4 / 5; }
.study.s-sq figure { width: clamp(250px, 25vw, 400px); aspect-ratio: 1; }
.study.s-up { margin-bottom: 9vh; }
.study.s-down { margin-top: 11vh; }
.study-meta { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; margin-top: 18px; }
.study-meta b { font: 300 italic 21px/1 var(--serif); color: var(--snow-mute); }
.study-meta h3 { font: 400 clamp(19px, 1.6vw, 25px)/1.15 var(--serif); }
.study-meta p { grid-column: 2; margin-top: 8px; font: 600 8.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--snow-mute); }
.studies-end { flex: 0 0 clamp(280px, 26vw, 400px); padding-right: 4vw; }
.studies-end h3 { font: 300 clamp(28px, 2.7vw, 44px)/1.12 var(--serif); }
.studies-end p { margin-top: 20px; font: 400 12.5px/1.75 var(--sans); color: var(--snow-soft); }
.studies-end .line-btn, .studies-end .text-link { display: flex; width: fit-content; }
.follow { position: fixed; z-index: 30; left: 0; top: 0; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: var(--snow); color: var(--night); display: grid; place-items: center; font: 600 8.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translate(-100px, -100px) scale(.4); transition: opacity .3s, scale .4s var(--ease); scale: .5; }
.follow.is-on { opacity: 1; scale: 1; }

/* ---------- 05 opportunity: a picture opens to the full screen between two words; then a card and a split ---------- */
.opp { position: relative; height: 360vh; background: var(--night); color: var(--snow); }
.opp-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.opp-tag { position: absolute; z-index: 4; left: var(--pad); top: calc(var(--bar) + 26px); }
.opp-pic { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.opp-pic > img, .opp-b img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opp-pic::after { content: ""; position: absolute; inset: 0; background: rgba(8, 12, 13, .2); }
.opp-b { position: absolute; inset: 0 0 0 auto; width: 100%; overflow: hidden; clip-path: inset(0 0 0 100%); will-change: clip-path; }
.opp-lab { position: absolute; z-index: 2; top: calc(var(--bar) + 24px); font: 300 italic clamp(20px, 1.9vw, 30px)/1 var(--serif); color: rgba(255, 255, 255, .9); opacity: 0; transition: opacity .6s; text-shadow: 0 1px 20px rgba(0, 0, 0, .5); }
.opp-lab-a { left: 46%; }
.opp-lab-b { left: 76%; }
.opp-pin.is-split .opp-lab { opacity: 1; }
.opp-words { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 var(--pad); font: 300 clamp(40px, 7.6vw, 132px)/1 var(--serif); letter-spacing: -.012em; color: rgba(241, 239, 233, .92); pointer-events: none; mix-blend-mode: normal; }
.opp-words span, .opp-words em { will-change: transform, opacity; white-space: nowrap; }
.opp-card { position: absolute; z-index: 4; left: var(--pad); top: 50%; width: min(520px, 42vw); transform: translateY(-46%); padding: clamp(24px, 2.6vw, 40px); background: rgba(14, 18, 19, .9); opacity: 0; pointer-events: none; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.opp-pin.is-card .opp-card { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.opp-lede { font: 400 14px/1.7 var(--sans); }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin-top: 26px; }
.pillars h3 { font: 400 21px/1.15 var(--serif); }
.pillars p { margin-top: 7px; font: 400 11.5px/1.65 var(--sans); color: var(--snow-soft); }
.opp-credit { position: absolute; z-index: 3; right: var(--pad); bottom: 26px; font: 600 8.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .7); opacity: 0; transition: opacity .6s; }
.opp-pin.is-card .opp-credit { opacity: 1; }
.opp-fine { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; padding: 22px 0 30px; margin: 0; }
.opp { padding-bottom: 0; }

/* ---------- 06 detail: four close photographs at different heights ---------- */
.detail-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34ch); gap: 40px; align-items: end; }
.detail-head .tag { grid-column: 1 / -1; }
.detail-head .small { margin: 0; color: var(--soft); }
.detail-row { margin-top: clamp(44px, 8vh, 96px); display: grid; grid-template-columns: 1.15fr .8fr 1fr .9fr; gap: clamp(12px, 1.8vw, 30px); align-items: start; }
.detail-row figure { overflow: hidden; }
.detail-row img { width: 100%; object-fit: cover; transition: transform 1.8s var(--ease); background: #dedad2; }
.detail-row figure:hover img { transform: scale(1.04); }
.d1 img { aspect-ratio: 4 / 5; } .d2 img { aspect-ratio: 3 / 5; } .d3 img { aspect-ratio: 1; } .d4 img { aspect-ratio: 4 / 5.6; }
.d2 { margin-top: 9vh; } .d3 { margin-top: 3vh; } .d4 { margin-top: 14vh; }
.detail-row figcaption { margin-top: 14px; font: 400 19px/1.2 var(--serif); }
.detail-row figcaption b { font: 300 italic 17px/1 var(--serif); color: var(--mute); margin-right: 12px; }

/* ---------- 07 the island: numbered serif list, one picture ---------- */
.island { border-top: 1px solid var(--rule); }
.island-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 110px); align-items: center; margin-top: clamp(40px, 7vh, 80px); }
.rows { border-top: 1px solid var(--rule); }
.rows li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--rule); font: 300 clamp(26px, 2.7vw, 42px)/1.15 var(--serif); color: #b3b5b2; cursor: pointer; transition: color .35s, padding .5s var(--ease); }
.rows li b { font: 600 8.5px/1 var(--sans); letter-spacing: .2em; color: var(--mute); }
.rows li i { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; transition: background .35s; }
.rows li:hover { color: var(--soft); }
.rows li.is-on { color: var(--ink); font-style: italic; padding-left: 16px; }
.rows li.is-on i { background: var(--ink); }
.island-view { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #dedad2; }
.island-view img { width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1.6s var(--ease); }
.island-view img.is-out { opacity: 0; transform: scale(1.03); }
.island-view figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 20px 16px; background: linear-gradient(180deg, rgba(6, 10, 11, 0), rgba(6, 10, 11, .62)); color: #fff; font: 600 8.5px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- 08 the site: heading left, an accordion right ---------- */
.site { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 7vw, 130px); align-items: start; }
.site .small { color: var(--snow-soft); }
.site-top { margin-top: 0; max-width: 46ch; }
.acc { margin-top: clamp(34px, 6vh, 64px); border-top: 1px solid var(--snow-rule); }
.acc-item { border-bottom: 1px solid var(--snow-rule); }
.acc-item > button { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; width: 100%; padding: 22px 0; }
.acc-item b { font: 600 8.5px/1 var(--sans); letter-spacing: .2em; color: var(--snow-mute); }
.acc-item span { font: 300 clamp(24px, 2.5vw, 38px)/1.15 var(--serif); }
.acc-item i { position: relative; width: 26px; height: 26px; border: 1px solid var(--snow-rule); border-radius: 50%; transition: transform .5s var(--ease), border-color .3s; }
.acc-item i::before, .acc-item i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; margin: -.5px 0 0 -4.5px; background: currentColor; }
.acc-item i::after { transform: rotate(90deg); transition: transform .5s var(--ease); }
.acc-item.is-open i::after { transform: rotate(0); }
.acc-item > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.acc-item.is-open > div { grid-template-rows: 1fr; }
.acc-item > div > p { overflow: hidden; padding-left: 54px; max-width: 54ch; font: 400 13px/1.75 var(--sans); color: var(--snow-soft); }
.acc-item.is-open > div > p { padding-bottom: 24px; }

/* ---------- 09 private enquiry: a house at dusk, the heading low on the left, the form on the right ---------- */
.enq { position: relative; min-height: 100vh; color: var(--snow); background: var(--night); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.enq-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.enq-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 15, 16, .55) 0%, rgba(11, 15, 16, .2) 30%, rgba(11, 15, 16, .86) 78%, var(--night) 100%), linear-gradient(90deg, rgba(11, 15, 16, .3), rgba(11, 15, 16, .78)); }
.enq-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 7vw, 130px); align-items: end; padding: calc(var(--bar) + 12vh) var(--pad) clamp(40px, 7vh, 80px); }
.people { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.person { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; padding-top: 22px; border-top: 1px solid var(--snow-rule); }
.person > img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.person h3 { font: 400 23px/1.1 var(--serif); }
.person p { margin: 6px 0 10px; font: 600 8.5px/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--snow-mute); }
.person > div > a { display: block; font: 400 13px/1.8 var(--sans); color: var(--snow-soft); transition: color .3s; overflow-wrap: anywhere; }
.person > div > a:hover { color: var(--snow); }
.social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.social a { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--snow-rule); border-radius: 50%; color: var(--snow-soft); transition: background .3s, color .3s; }
.social a:hover { background: var(--snow); color: var(--night); }
.form { display: grid; gap: 0; }
.form label { display: block; }
.form label span { display: block; font: 600 8.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--snow-mute); margin-top: 22px; }
.form input, .form textarea, .form select { width: 100%; padding: 11px 0; background: none; border: 0; border-bottom: 1px solid var(--snow-rule); color: var(--snow); font: 400 14px/1.5 var(--sans); border-radius: 0; resize: vertical; transition: border-color .3s; appearance: none; -webkit-appearance: none; }
.form select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f1efe9' stroke-width='1'/%3E%3C/svg%3E") right 4px center no-repeat; cursor: pointer; }
.form select option { color: #111; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-bottom-color: var(--snow); }
.form .hp { position: absolute; left: -9999px; }
.solid-btn { justify-self: end; margin-top: 30px; padding: 17px 26px; background: var(--snow); color: var(--night); border: 1px solid var(--snow); font: 600 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; transition: background .35s, color .35s; }
.solid-btn:hover { background: transparent; color: var(--snow); }
.form-note { margin-top: 14px; text-align: right; font: 400 11.5px/1.6 var(--sans); color: var(--snow-mute); }
.form-note.is-ok { color: var(--snow); }
.form-note a { text-decoration: underline; }
.foot { position: relative; z-index: 1; padding: 26px var(--pad) 34px; border-top: 1px solid var(--snow-rule); display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 6vw, 110px); font: 400 10.5px/1.7 var(--sans); color: var(--snow-mute); }
.foot p:first-child { font: 600 8.5px/1.9 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--snow-soft); white-space: nowrap; }

/* ---------- lightbox ---------- */
.box { position: fixed; z-index: 80; inset: 0; background: #080b0c; color: var(--snow); display: grid; grid-template-columns: minmax(0, 330px) 1fr; opacity: 0; transition: opacity .4s var(--ease); }
.box[hidden] { display: none; }
.box.is-open { opacity: 1; }
.box.no-info { grid-template-columns: 1fr; }
.box-info { padding: 90px 0 40px var(--pad); align-self: center; }
.box.no-info .box-info { display: none; }
.box-info .tag { color: var(--snow-mute); }
.box-info h3 { font: 300 clamp(32px, 3vw, 46px)/1.05 var(--serif); margin-top: 20px; }
.box-info dl { margin-top: 26px; border-top: 1px solid var(--snow-rule); }
.box-info dl div { padding: 14px 0; border-bottom: 1px solid var(--snow-rule); }
.box-info dt { font: 600 8.5px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--snow-mute); }
.box-info dd { margin-top: 6px; font: 400 13px/1.6 var(--sans); color: var(--snow-soft); }
.box-view { position: relative; margin: 0; padding: 86px clamp(70px, 7vw, 120px) 74px; display: flex; align-items: center; justify-content: center; min-height: 0; height: 100vh; height: 100dvh; }
.box-view img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; transition: opacity .35s; }
.box-view img.is-out { opacity: 0; }
.box-view figcaption { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font: 600 8.5px/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--snow-soft); padding: 0 90px; }
.box-close { position: absolute; z-index: 3; right: var(--pad); top: 24px; font: 600 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: 13px 18px; border: 1px solid var(--snow-rule); transition: background .3s, color .3s; }
.box-close:hover { background: var(--snow); color: var(--night); }
.box-tabs { position: absolute; z-index: 3; left: var(--pad); right: 190px; top: 24px; display: flex; gap: 6px 22px; flex-wrap: wrap; }
.box-tabs button { font: 600 8.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 8px 0; color: var(--snow-mute); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.box-tabs button.is-on, .box-tabs button:hover { color: var(--snow); border-bottom-color: var(--snow); }
.box-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--snow-rule); font-size: 18px; text-align: center; transition: background .3s, color .3s; }
.box-arrow:hover { background: var(--snow); color: var(--night); }
.box-prev { left: 344px; }
.box.no-info .box-prev { left: 18px; }
.box-next { right: 18px; }
.box-count { position: absolute; right: var(--pad); bottom: 30px; font: 600 9px/1 var(--sans); letter-spacing: .24em; color: var(--snow-mute); }
.jump-veil { position: fixed; inset: 0; z-index: 60; background: var(--night); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.jump-veil.is-on { opacity: 1; transition: opacity .2s linear; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .statement-grid, .island-grid, .site, .enq-in, .detail-head { grid-template-columns: 1fr; }
  .say-pic { width: min(320px, 60vw); justify-self: end; }
  .people { grid-template-columns: 1fr; }
  .opp-card { width: min(560px, calc(100vw - 2 * var(--pad))); }
  .foot { grid-template-columns: 1fr; }
  .walk-note { right: auto; left: var(--pad); bottom: auto; top: calc(var(--bar) + 10px); text-align: left; max-width: 44ch; }
}
@media (max-width: 760px) {
  :root { --bar: 62px; }
  .mark i { display: none; }
  .mark span { font-size: 14px; letter-spacing: .3em; }
  .enquire { padding: 11px 12px; font-size: 8.5px; letter-spacing: .18em; }
  .bar.is-away { transform: translateY(-110%); }
  .hero-copy, .w-left { bottom: 112px; right: var(--pad); max-width: none; }
  .hero h1, .w-left h2 { font-size: clamp(44px, 13.4vw, 66px); }
  .hero h1 em, .w-left h2 em { padding-left: .3em; }
  .walk { height: 480vh; }
  .w-right { top: auto; bottom: 120px; left: var(--pad); text-align: left; }
  .w-right h2 { font-size: 30px; }
  .w-top h2 { font-size: 34px; }
  .w-top h2 em { display: block; }
  .corner { bottom: 60px; }
  .cue { bottom: 10px; }
  .cue i { height: 16px; margin-top: 7px; }
  .replay { bottom: 52px; }
  .say { font-size: clamp(30px, 8.6vw, 44px); }
  .say .in { padding-left: .5em; }
  .facts div { flex-direction: column; gap: 6px; padding: 15px 0; }
  .facts dd { text-align: left; }
  /* the studies become an ordinary sideways strip */
  .studies { height: auto !important; padding: 84px 0 70px; }
  .studies-pin { position: static; height: auto; overflow-x: auto; scrollbar-width: none; }
  .studies-pin::-webkit-scrollbar { display: none; }
  .studies-track { transform: none !important; align-items: flex-start; padding: 0 var(--pad); gap: 20px; }
  .studies-intro { flex-basis: 78vw; }
  .study.s-wide figure, .study.s-tall figure, .study.s-sq figure { width: 74vw; aspect-ratio: 4 / 3; }
  .study.s-up, .study.s-down { margin: 0; }
  .studies-end { flex-basis: 76vw; }
  .follow { display: none; }
  /* the opportunity stacks: picture, words, card */
  .opp { height: auto !important; }
  .opp-pin { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; }
  .opp-pic { position: relative; inset: auto; height: 62svh; clip-path: none !important; }
  .opp-b { clip-path: inset(0 0 0 50%) !important; }
  .opp-lab { opacity: 1; top: auto; bottom: 14px; font-size: 20px; }
  .opp-lab-a { left: 16px; } .opp-lab-b { left: calc(50% + 16px); }
  .opp-words { position: static; transform: none; display: block; padding: 34px var(--pad) 0; font-size: clamp(40px, 11.6vw, 58px); }
  .opp-words span, .opp-words em { display: block; transform: none !important; opacity: 1 !important; white-space: normal; }
  .opp-card { position: static; transform: none !important; opacity: 1; pointer-events: auto; width: auto; margin: 26px var(--pad) 0; }
  .pillars { grid-template-columns: 1fr; }
  .opp-credit { position: static; opacity: 1; padding: 20px var(--pad) 0; }
  .opp-tag { top: 78px; }
  .opp-fine { position: static; padding: 22px var(--pad) 60px; }
  .detail-row { grid-template-columns: 1fr 1fr; }
  .d2, .d3, .d4 { margin-top: 0; }
  .d2 { margin-top: 40px; } .d4 { margin-top: 40px; }
  .enq-in { padding-top: 120px; align-items: start; }
  .solid-btn { justify-self: start; }
  .form-note { text-align: left; }
  .box { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .box-info { padding: 84px var(--pad) 0; }
  .box-info dl { display: none; }
  .box-tabs { right: var(--pad); top: 76px; gap: 2px 14px; }
  .box-view { height: auto; min-height: 60vh; padding: 130px 10px 76px; }
  .box:not(.no-info) .box-view { padding-top: 16px; }
  .box-prev, .box.no-info .box-prev { left: 10px; top: auto; bottom: 14px; transform: none; }
  .box-next { right: auto; left: 72px; top: auto; bottom: 14px; transform: none; }
  .box-view figcaption { bottom: 84px; padding: 0 16px; }
  .box-count { bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; transition: none; }
  .cue i { animation: none; }
  .say span { opacity: 1; }
}

/* the opportunity: the pinned run is its own block, the sources sit on plain dark below it */
.opp { height: auto; }
.opp-run { height: 360vh; }
.opp-fine { position: static; padding: 26px var(--pad) 40px; max-width: none; background: var(--night); }
@media (max-width: 760px) { .opp-run { height: auto; } }

.w-right h2 { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 40px rgba(0, 0, 0, .8); }

.walk { height: 960vh; }
@media (max-width: 760px) { .walk { height: 800vh; } }

.walk-hold { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 04b Homesites: the key with its lots -> fly into one -> the house in 3D -> its plan -> its rooms.
   Choice panel after the "Celeste" reference, the fly-in / 3D / plan / rooms sequence after the "Solenne" reference. ---------- */
.hs { position: relative; background: var(--night); color: var(--snow); }
.hs-stage { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; }
.hs-key, .hs-model, .hs-room { position: absolute; inset: 0; transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.hs-key { display: grid; place-items: center; background: #0d1a1c; }
.hs-map { position: relative; height: 100%; aspect-ratio: 1114 / 1200; transform-origin: 50% 50%; transition: transform 1.6s cubic-bezier(.65, 0, .35, 1), filter 1.2s; }
.hs-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hs-key::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 15, 16, .78) 0%, rgba(11, 15, 16, 0) 30%, rgba(11, 15, 16, 0) 64%, rgba(11, 15, 16, .62) 100%), linear-gradient(180deg, rgba(11, 15, 16, .5) 0%, rgba(11, 15, 16, 0) 22%); }
.hs-pin { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--night); font: 600 10px/1 var(--sans); box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); animation: hs-pulse 2.6s infinite; transition: background .3s, color .3s, scale .3s; }
.hs-pin:hover, .hs-pin.is-hover { background: var(--night); color: #fff; scale: 1.15; }
.hs-pin.wide { width: auto; padding: 0 10px; border-radius: 15px; white-space: nowrap; }
@keyframes hs-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 70% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

.hs-model { display: grid; place-items: center; background: radial-gradient(120% 90% at 40% 45%, #22325a 0%, #18233f 55%, #0f1729 100%); opacity: 0; visibility: hidden; perspective: 1800px; }
.hs-tilt { position: relative; width: min(58vw, 980px); aspect-ratio: 2752 / 1536; margin-right: clamp(0px, 30vw, 560px); transform-style: preserve-3d; transform: rotateX(46deg) rotateZ(-24deg) scale(.92); transition: transform 1.5s cubic-bezier(.65, 0, .35, 1); }
.hs-tilt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 1s var(--ease); }
.hs-plan { opacity: 0; }
.hs-3d { filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .45)); }
.hs-stage.is-plan .hs-tilt { transform: translateX(-70px) scale(.8); }
.hs-stage.is-plan .hs-plan { opacity: 1; }
.hs-model { transition: opacity .9s var(--ease), visibility 0s linear .9s, background 1s var(--ease); }

.hs-room { opacity: 0; visibility: hidden; background: var(--night); }
.hs-room img { width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 6s linear; }
.hs-room::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(11, 15, 16, .72) 0%, rgba(11, 15, 16, 0) 36%), linear-gradient(180deg, rgba(11, 15, 16, .45) 0%, rgba(11, 15, 16, 0) 20%); }
.hs-room-cap { position: absolute; z-index: 2; left: var(--pad); bottom: clamp(30px, 6vh, 64px); }
.hs-room-cap p { font: 600 9.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.hs-room-cap h3 { margin-top: 14px; font: 300 clamp(34px, 4vw, 64px)/1 var(--serif); }
.hs-room-nav { position: absolute; z-index: 2; right: var(--pad); bottom: clamp(30px, 6vh, 64px); display: flex; gap: 10px; }
.hs-room-nav button, .hs-btn { font: 600 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .55); color: #fff; background: rgba(11, 15, 16, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s, color .3s; }
.hs-room-nav button:hover, .hs-btn:hover { background: #fff; color: var(--night); }

.hs-stage[data-view="key"] .hs-key { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.hs-stage[data-view="model"] .hs-key { opacity: 0; visibility: hidden; }
.hs-stage[data-view="model"] .hs-model { opacity: 1; visibility: visible; transition: opacity .9s var(--ease), background 1s var(--ease); }
.hs-stage[data-view="room"] .hs-key { opacity: 0; visibility: hidden; }
.hs-stage[data-view="room"] .hs-room { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.hs-stage.is-diving .hs-map { filter: blur(2px) brightness(1.1); }

.hs-head { position: absolute; z-index: 3; left: var(--pad); top: calc(var(--bar) + clamp(18px, 4vh, 44px)); transition: opacity .6s; }
.hs-head h2 { margin-top: 18px; font: 300 clamp(34px, 3.6vw, 58px)/1.04 var(--serif); max-width: 12ch; }
.hs-stage[data-view="room"] .hs-head { opacity: 0; }

.hs-panel { position: absolute; z-index: 4; right: var(--pad); top: 50%; transform: translateY(-50%); width: clamp(220px, 17vw, 270px); padding: 18px 14px 14px; border-radius: 18px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); transition: opacity .6s, transform .8s var(--ease); }
.hs-panel-title { font: 500 15px/1 var(--serif); letter-spacing: .02em; margin: 0 4px 12px; }
.hs-list { display: grid; gap: 6px; max-height: 64vh; overflow-y: auto; scrollbar-width: none; }
.hs-list::-webkit-scrollbar { display: none; }
.hs-item { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 5px; border-radius: 11px; border: 1px solid transparent; text-align: left; color: rgba(255, 255, 255, .86); transition: background .3s, border-color .3s; }
.hs-item img { width: 56px; height: 38px; border-radius: 7px; object-fit: cover; }
.hs-item b { display: block; font: 600 8.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.hs-item span { display: block; margin-top: 5px; font: 400 12.5px/1.2 var(--sans); }
.hs-item:hover, .hs-item.is-on { background: rgba(255, 255, 255, .16); border-color: rgba(140, 200, 255, .55); }
.hs-stage[data-view="room"] .hs-panel { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(20px); }

.hs-card { position: absolute; z-index: 4; right: calc(var(--pad) + clamp(220px, 17vw, 270px) + 18px); top: 50%; width: clamp(260px, 21vw, 330px); padding: 24px 24px 20px; border-radius: 16px; background: rgba(11, 15, 16, .86); border: 1px solid rgba(255, 255, 255, .12); color: #fff; opacity: 0; pointer-events: none; transform: translateY(-46%); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.hs-stage[data-view="model"] .hs-card { opacity: 1; pointer-events: auto; transform: translateY(-50%); transition-delay: .7s; }
.hs-card-kicker { font: 600 8.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.hs-card h3 { margin-top: 12px; font: 300 32px/1.05 var(--serif); }
.hs-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hs-facts dt { font: 600 7.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; opacity: .6; order: 2; margin-top: 6px; }
.hs-facts div { display: flex; flex-direction: column; }
.hs-facts dd { font: 400 15px/1.1 var(--serif); }
.hs-card-text { margin-top: 14px; font: 400 12px/1.65 var(--sans); color: rgba(255, 255, 255, .78); }
.hs-rooms { display: grid; margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hs-rooms button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font: 500 12px/1 var(--sans); color: #fff; text-align: left; }
.hs-rooms button i { width: 7px; height: 7px; border-radius: 50%; background: #79b8ff; flex: none; margin-right: 10px; }
.hs-rooms button span { flex: 1; }
.hs-rooms button em { font-style: normal; opacity: .5; transition: transform .3s, opacity .3s; }
.hs-rooms button:hover em { opacity: 1; transform: translateX(4px); }
.hs-card-btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.hs-btn { flex: 1; padding: 12px 10px; border-radius: 999px; }
.hs-btn-ghost { border-color: rgba(255, 255, 255, .25); }
.hs-fine { margin-top: 14px; font: 400 9.5px/1.5 var(--sans); color: rgba(255, 255, 255, .5); }
.hs-card[data-plan="none"] #hs-toggle { display: none; }

@media (max-width: 900px) {
  .hs-stage { height: auto; min-height: 0; overflow: visible; }
  .hs-key, .hs-model, .hs-room { position: relative; inset: auto; height: 62vh; }
  .hs-stage[data-view="key"] .hs-model, .hs-stage[data-view="key"] .hs-room, .hs-stage[data-view="model"] .hs-key, .hs-stage[data-view="model"] .hs-room, .hs-stage[data-view="room"] .hs-key, .hs-stage[data-view="room"] .hs-model { display: none; }
  .hs-map { height: 100%; }
  .hs-tilt { width: 92vw; margin: 0; }
  .hs-head { position: relative; top: 0; padding: 84px var(--pad) 22px; left: 0; }
  .hs-panel { position: relative; right: auto; top: auto; transform: none; width: auto; margin: 16px var(--pad); }
  .hs-list { grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; max-height: none; }
  .hs-card { position: relative; right: auto; top: auto; width: auto; margin: 0 var(--pad) 40px; transform: none !important; }
  .hs-stage[data-view="key"] .hs-card { display: none; }
  .hs-stage[data-view="room"] .hs-panel { opacity: 1; pointer-events: auto; transform: none; }
}

.hs-plan { border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }

/* ---------- 04b Homesites, live 3D (homesites3d.js) ---------- */
.hs-3dview { position: absolute; inset: 0; background: radial-gradient(120% 90% at 38% 52%, #22325a 0%, #18233f 52%, #0f1729 100%); transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.hs-3dview canvas { position: absolute; left: 0; top: 0; width: calc(100% - clamp(560px, 42vw, 680px)); height: 100%; display: block; cursor: grab; }
.hs-3dview canvas:active { cursor: grabbing; }
.hs-3dhint { position: absolute; left: 0; width: calc(100% - clamp(560px, 42vw, 680px)); bottom: clamp(22px, 4vh, 40px); text-align: center; font: 600 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: .55; pointer-events: none; }
.hs-3dload { position: absolute; left: 0; width: calc(100% - clamp(560px, 42vw, 680px)); top: 50%; text-align: center; font: 600 9.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; opacity: 0; transition: opacity .4s; pointer-events: none; }
.hs-3dload.is-on { opacity: .7; }
.hs-stage[data-view="model"] .hs-3dview { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.hs-stage[data-view="room"] .hs-3dview { opacity: 0; visibility: hidden; }
.hs-card { right: calc(var(--pad) + clamp(220px, 17vw, 270px) + 18px); }
.hs-card[data-plan="none"] #hs-toggle { display: none; }
@media (max-width: 900px) {
  .hs-3dview { position: relative; height: 62vh; }
  .hs-3dview canvas, .hs-3dhint, .hs-3dload { width: 100%; }
  .hs-stage[data-view="room"] .hs-3dview { display: none; }
  .hs-stage[data-view="model"] .hs-room { display: none; }
  .hs-stage { display: flex; flex-direction: column; }
  .hs-head { order: -2; }
  .hs-card { right: auto; left: auto; }
  .hs-panel { order: -1; }
}

/* the walk: the residence as film, scrubbed by the pointer; night fades in from below */
.hs-walk { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 0s linear 1s; cursor: crosshair; }
.hs-walk video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-walk-night { opacity: 0; }
.hs-stage.is-walking .hs-walk { opacity: 1; visibility: visible; transition: opacity 1s var(--ease); }
.hs-stage.is-walking .hs-card, .hs-stage.is-walking .hs-panel, .hs-stage.is-walking .hs-head, .hs-stage.is-walking .hs-3dhint { opacity: 0 !important; pointer-events: none !important; }
.hs-walk-ui { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(24px, 5vh, 50px); display: flex; align-items: center; gap: 24px; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.hs-walk-time { display: flex; align-items: center; gap: 12px; font: 600 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.hs-walk-time i { display: block; width: 90px; height: 1px; background: rgba(255,255,255,.35); }
.hs-walk-time b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.hs-walk-hint { flex: 1; text-align: center; font: 600 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; opacity: .8; }
.hs-walk-back { flex: none; }
.hs-card-btns { flex-wrap: wrap; }
@media (max-width: 900px) { .hs-walk { position: absolute; } .hs-walk-hint { display: none; } }

/* stage two: the floor plan, centred over the dimmed model; scroll in to enter the film */
.hs-plan-stage { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% - clamp(560px, 42vw, 680px)); z-index: 2; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s linear .9s; overflow: hidden; }
.hs-plan-stage img { width: 86%; max-height: 74%; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.45); transition: transform .25s ease-out; cursor: zoom-in; }
.hs-plan-cap { position: absolute; bottom: clamp(22px, 4vh, 40px); font: 600 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.hs-stage.is-plan2 .hs-plan-stage { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.hs-stage.is-plan2 #hs-canvas { opacity: .15; transition: opacity .9s var(--ease); }
#hs-canvas { transition: opacity .9s var(--ease); }
@media (max-width: 900px) { .hs-plan-stage { width: 100%; } }

.hs-stage.is-plan2 .hs-3dhint { opacity: 0; }

/* 02 the vision, one compact block: the statement on the left; the key as it is today and the figures on the right */
#vision.statement { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(70px, 11vh, 130px); }
#vision .statement-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: center; margin-top: clamp(28px, 5vh, 56px); }
#vision .say { font-size: clamp(32px, 4.3vw, 72px); }
.say-side { display: grid; gap: 18px; }
#vision .say-pic { aspect-ratio: 16 / 10; position: relative; margin: 0; }
#vision .say-pic { overflow: hidden; }
#vision .say-pic img { height: 118%; }
#vision .say-pic figcaption { position: absolute; left: 14px; bottom: 12px; color: #fff; font: 600 8.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
#vision .facts { margin-top: 0; border-top: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
#vision .facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 6px; padding: 14px 12px 14px 0; border-bottom: 0; border-top: 1px solid var(--rule); }
#vision .facts div.wide { grid-column: 1 / -1; }
#vision .facts dd { font: 300 clamp(20px, 1.8vw, 28px)/1 var(--serif); letter-spacing: 0; text-transform: none; text-align: left; color: var(--ink); }
#vision .facts dt { font: 600 8px/1.4 var(--sans); letter-spacing: .2em; color: var(--mute); }
@media (max-width: 760px) {
  #vision .statement-grid { grid-template-columns: 1fr; }
  #vision .say-pic { width: auto; justify-self: stretch; }
  #vision .facts { grid-template-columns: 1fr 1fr; }
  #vision .facts div { flex-direction: column-reverse; }
}

.hs-gallery { margin-top: 12px; color: rgba(255,255,255,.75); }

/* ---------- 05 the investment case: one strong photograph of the key today against a dark field of figures ---------- */
.inv { position: relative; background: var(--night); color: var(--snow); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.inv-pic { position: relative; margin: 0; overflow: hidden; order: 2; }
.inv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.6s cubic-bezier(.2, .7, .2, 1); }
.inv.is-in .inv-pic img { transform: scale(1); }
.inv-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(11, 15, 16, 0) 22%); }
.inv-pic figcaption { position: absolute; right: var(--pad); bottom: 28px; z-index: 1; font: 600 8.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.inv-in { padding: clamp(110px, 16vh, 180px) clamp(28px, 4vw, 64px) clamp(70px, 10vh, 120px) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.inv-title { margin-top: 26px; font: 300 clamp(44px, 5.4vw, 92px)/1 var(--serif); letter-spacing: -.01em; }
.inv-title em { display: block; padding-left: .6em; }
.inv-lede { margin-top: 26px; max-width: 46ch; font: 400 13px/1.75 var(--sans); color: var(--snow-soft); }
.inv-figs { margin-top: clamp(30px, 5vh, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--snow-rule); }
.inv-figs div { padding: 22px 18px 22px 0; border-bottom: 1px solid var(--snow-rule); display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.inv.is-in .inv-figs div { opacity: 1; transform: none; }
.inv.is-in .inv-figs div:nth-child(2) { transition-delay: .08s; }
.inv.is-in .inv-figs div:nth-child(3) { transition-delay: .16s; }
.inv.is-in .inv-figs div:nth-child(4) { transition-delay: .24s; }
.inv.is-in .inv-figs div:nth-child(5) { transition-delay: .32s; }
.inv.is-in .inv-figs div:nth-child(6) { transition-delay: .4s; }
.inv-figs dd { font: 300 clamp(36px, 3.4vw, 58px)/1 var(--serif); }
.inv-figs dt { font: 500 10.5px/1.55 var(--sans); color: var(--snow-mute); max-width: 26ch; }
.inv .line-btn { align-self: flex-start; margin-top: 34px; }
.inv-fine { margin-top: 26px; }
#island .study-meta { display: grid; }
#island .study-meta p { text-transform: none; letter-spacing: 0; font: 400 12px/1.6 var(--sans); max-width: 30ch; }
@media (max-width: 900px) {
  .inv { grid-template-columns: 1fr; min-height: 0; }
  .inv-pic { order: 0; height: 52vh; }
  .inv-pic::after { background: linear-gradient(0deg, var(--night) 0%, rgba(11, 15, 16, 0) 30%); }
  .inv-in { padding-top: 40px; }
  .inv-figs { grid-template-columns: 1fr 1fr; }
}

/* enquiry: the form sits on its own dark glass card so it reads clearly over the photograph */
.form { padding: clamp(26px, 3vw, 44px) clamp(24px, 2.8vw, 42px) clamp(24px, 2.6vw, 36px); background: rgba(9, 12, 13, .62); border: 1px solid rgba(241, 239, 233, .14); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.form label:first-of-type span { margin-top: 0; }
.form input, .form textarea, .form select { border-bottom-color: rgba(241, 239, 233, .26); }

/* 04b residences on a light ground (her note 2026-11-14): pale paper field, dark type, the card and panel as light glass */
#homesites.hs { background: var(--paper); color: var(--ink); }
#homesites .hs-3dview { background: radial-gradient(120% 90% at 38% 52%, #ffffff 0%, #f4f2ee 55%, #e9e5de 100%); }
#homesites .hs-head .tag, #homesites .hs-head h2 { color: var(--ink); }
#homesites .hs-3dhint, #homesites .hs-3dload, #homesites .hs-plan-cap { color: var(--ink); }
#homesites .hs-card { background: rgba(255, 255, 255, .82); color: var(--ink); border-color: rgba(18, 21, 22, .08); box-shadow: 0 24px 60px rgba(18, 21, 22, .10); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#homesites .hs-card-text, #homesites .hs-fine { color: rgba(18, 21, 22, .66); }
#homesites .hs-facts { border-top-color: rgba(18, 21, 22, .12); }
#homesites .hs-rooms { border-top-color: rgba(18, 21, 22, .12); }
#homesites .hs-rooms button { color: var(--ink); border-bottom-color: rgba(18, 21, 22, .08); }
#homesites .hs-rooms button i { background: #2f6ea3; }
#homesites .hs-btn { color: var(--ink); background: transparent; border-color: rgba(18, 21, 22, .4); }
#homesites .hs-btn:hover { background: var(--ink); color: #fff; }
#homesites .hs-gallery { color: rgba(18, 21, 22, .7); border-bottom-color: rgba(18, 21, 22, .2); }
#homesites .hs-panel { background: rgba(255, 255, 255, .6); border-color: rgba(18, 21, 22, .08); color: var(--ink); box-shadow: 0 24px 60px rgba(18, 21, 22, .08); }
#homesites .hs-item { color: rgba(18, 21, 22, .8); }
#homesites .hs-item:hover, #homesites .hs-item.is-on { background: rgba(255, 255, 255, .9); border-color: rgba(47, 110, 163, .45); }
#homesites .hs-walk-ui .hs-btn { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(11, 15, 16, .35); }

/* the walk-through after the first pass: one still, full screen, with the film on request */
.walk-rest { display: none; position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.walk-rest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.walk-rest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 10, 11, .55) 0%, rgba(6, 10, 11, 0) 55%), linear-gradient(0deg, rgba(6, 10, 11, .45) 0%, rgba(6, 10, 11, 0) 40%); }
.walk-rest-copy { position: absolute; z-index: 1; left: var(--pad); bottom: clamp(70px, 14vh, 150px); color: #fff; }
.walk-rest-copy h2 { font: 300 clamp(44px, 6.4vw, 108px)/.98 var(--serif); margin-top: 22px; text-shadow: 0 2px 40px rgba(0, 0, 0, .3); }
.walk-rest-copy h2 em { display: block; padding-left: .62em; }
.walk-rest .line-btn { color: #fff; }
.walk-rest .line-btn:hover { background: #fff; color: var(--night); border-color: #fff; }
.walk.is-rest { height: auto !important; }
.walk.is-rest .walk-stage { display: none; }
.walk.is-rest .walk-rest { display: block; }
.film-view { position: fixed; inset: 0; z-index: 80; background: #000; display: grid; place-items: center; opacity: 0; transition: opacity .4s; }
.film-view.is-on { opacity: 1; }
.film-view video { width: 100%; height: 100%; object-fit: contain; }
.film-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; color: #fff; font: 300 30px/1 var(--sans); background: rgba(255, 255, 255, .12); }

/* investment case v2 (her note: the split with the aerial looked poor): one full-bleed golden-hour view of an estate,
   the statement over it, and the figures on a single dark glass band along the bottom */
.inv { display: block; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.inv-pic { position: absolute; inset: 0; order: 0; }
.inv-pic::after { background: linear-gradient(90deg, rgba(8, 11, 12, .82) 0%, rgba(8, 11, 12, .45) 42%, rgba(8, 11, 12, .08) 75%), linear-gradient(0deg, rgba(8, 11, 12, .7) 0%, rgba(8, 11, 12, 0) 45%); }
.inv-in { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; padding: calc(var(--bar) + clamp(40px, 8vh, 90px)) var(--pad) clamp(28px, 5vh, 48px); justify-content: flex-start; }
.inv-title { text-shadow: 0 2px 40px rgba(0, 0, 0, .35); }
.inv-lede { color: rgba(255, 255, 255, .86); text-shadow: 0 1px 18px rgba(0, 0, 0, .45); }
.inv .line-btn { order: 3; margin-top: 26px; }
.inv-figs { order: 4; margin-top: auto; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(8, 11, 12, .5); backdrop-filter: blur(18px) saturate(1.1); -webkit-backdrop-filter: blur(18px) saturate(1.1); }
.inv-figs div { padding: 22px 20px; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .1); }
.inv-figs div:first-child { border-left: 0; }
.inv-figs dd { font-size: clamp(30px, 2.6vw, 46px); }
.inv-figs dt { color: rgba(255, 255, 255, .62); font-size: 10px; }
@media (max-width: 900px) {
  .inv-figs { grid-template-columns: 1fr 1fr; }
  .inv-figs div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
  .inv-figs div:nth-child(-n+2) { border-top: 0; }
  .inv-pic { position: absolute; height: auto; }
}

.inv-title { font-size: clamp(42px, 5vw, 86px); }
.inv-figs dt { max-width: 24ch; }

/* the hidden film viewer must never sit over the page (it blocked every click) */
.film-view[hidden] { display: none !important; }
.film-view:not(.is-on) { pointer-events: none; }
/* enquiry form: no blur; a soft dark field under it instead (her note 2026-11-14) */
.form { background: rgba(8, 11, 12, .78); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(241, 239, 233, .1); box-shadow: 0 0 140px 60px rgba(6, 9, 10, .55); }
.person > img { object-position: 50% 50%; }

/* the figures never depend on the reveal observer */
.inv .inv-figs div { opacity: 1; transform: none; }

/* 04b residences v3 (her note 2026-11-14): left to right = choose a residence, its card, then the residence itself.
   Warm limestone ground instead of white; the panel and card in deep ink so they read clearly; no blur. */
#homesites.hs { background: #e7e0d5; }
#homesites .hs-3dview { background: radial-gradient(110% 90% at 66% 52%, #f3eee6 0%, #e7e0d5 52%, #d6cdbf 100%); }
#homesites .hs-panel, #homesites .hs-card { background: #14191b; color: #f1efe9; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 30px 70px rgba(40, 32, 20, .22); backdrop-filter: none; -webkit-backdrop-filter: none; }
#homesites .hs-item { color: rgba(241, 239, 233, .82); }
#homesites .hs-item:hover, #homesites .hs-item.is-on { background: rgba(255, 255, 255, .07); border-color: rgba(214, 190, 150, .55); }
#homesites .hs-card-text { color: rgba(241, 239, 233, .66); }
#homesites .hs-facts, #homesites .hs-rooms { border-top-color: rgba(255, 255, 255, .12); }
#homesites .hs-rooms button { color: #f1efe9; border-bottom-color: rgba(255, 255, 255, .08); }
#homesites .hs-rooms button i { background: #d6be96; }
#homesites .hs-btn { color: #f1efe9; border-color: rgba(241, 239, 233, .4); background: transparent; }
#homesites .hs-btn:hover { background: #f1efe9; color: #14191b; }
#homesites .hs-gallery { color: rgba(241, 239, 233, .7); border-bottom-color: rgba(241, 239, 233, .2); }
/* button labels sit exactly in the middle (the letter-spacing after the last letter is balanced) */
.hs-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding-left: calc(10px + .2em); padding-right: 10px; }
/* the walk-through controls */
.hs-walk { cursor: grab; }
.hs-walk:active { cursor: grabbing; }
.hs-walk-look { position: absolute; inset: 0; will-change: transform; }
.hs-walk-ui { gap: 14px; }
.hs-walk-ui .hs-btn { flex: none; min-width: 112px; }
.hs-walk-track { position: relative; flex: 1; height: 34px; cursor: pointer; touch-action: none; }
.hs-walk-track i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(255, 255, 255, .3); border-radius: 2px; }
.hs-walk-track b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); border-radius: 2px; }
.hs-walk-track em { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -6px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.hs-walk-light { display: flex; padding: 3px; border-radius: 999px; background: rgba(11, 15, 16, .55); border: 1px solid rgba(255, 255, 255, .3); }
.hs-walk-light button { font: 600 9.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; padding: 11px 16px 11px calc(16px + .2em); border-radius: 999px; transition: background .3s, color .3s, opacity .3s; }
.hs-walk-light button.is-on { background: #fff; color: #14191b; }
.hs-walk-light button:disabled { opacity: .35; cursor: not-allowed; }
.hs-walk-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 22px; border-radius: 999px; background: rgba(11, 15, 16, .55); color: #fff; font: 600 9.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; pointer-events: none; transition: opacity .8s; flex: none; }
.hs-walk-hint.is-gone { opacity: 0; }
#homesites .hs-walk-ui .hs-btn { color: #fff; border-color: rgba(255, 255, 255, .55); background: rgba(11, 15, 16, .45); }
#homesites .hs-walk-ui .hs-btn:hover { background: #fff; color: #14191b; }
@media (max-width: 900px) { .hs-walk-ui { flex-wrap: wrap; } .hs-walk-track { order: -1; flex-basis: 100%; } .hs-walk-hint { display: block; } }

.form { border: 0 !important; }

/* residences v4 (her note 2026-11-14): order as before (the residence, then the cards); the cards as light wet glass */
#homesites .hs-panel, #homesites .hs-card { background: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, .46) 100%); color: #14191b; border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 60px rgba(70, 56, 36, .14); backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5); }
#homesites .hs-item { color: rgba(20, 25, 27, .82); }
#homesites .hs-item:hover, #homesites .hs-item.is-on { background: rgba(255, 255, 255, .6); border-color: rgba(150, 120, 80, .45); }
#homesites .hs-card-text { color: rgba(20, 25, 27, .66); }
#homesites .hs-facts, #homesites .hs-rooms { border-top-color: rgba(20, 25, 27, .12); }
#homesites .hs-rooms button { color: #14191b; border-bottom-color: rgba(20, 25, 27, .08); }
#homesites .hs-rooms button i { background: #a8875a; }
#homesites .hs-card-btns .hs-btn { color: #14191b; border-color: rgba(20, 25, 27, .38); background: rgba(255, 255, 255, .25); }
#homesites .hs-card-btns .hs-btn:hover { background: #14191b; color: #fff; }
#homesites .hs-gallery { display: inline-flex; margin-top: 26px; color: rgba(20, 25, 27, .7); border-bottom-color: rgba(20, 25, 27, .2); }
#homesites .hs-card-btns { margin-top: 20px; }

/* enquiry form: the dark field under it has no edge; it fades out softly into the photograph */
.form { position: relative; background: transparent !important; box-shadow: none !important; isolation: isolate; }
.form::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 11, 12, .72); filter: blur(48px); transform: scale(1.06); pointer-events: none; }

/* room photographs inside the light residences section: white type over the picture */
#homesites .hs-room, #homesites .hs-room-cap, #homesites .hs-room-cap p, #homesites .hs-room-cap h3 { color: #fff; }
#homesites .hs-room-cap h3 { text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
#homesites .hs-room-nav button { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(11, 15, 16, .35); }
#homesites .hs-room-nav button:hover { background: #fff; color: #14191b; }
#homesites .hs-stage[data-view="room"] .hs-head { opacity: 0; }

/* 08 getting there: how the owner arrives, and what lies within reach of the dock */
.go .site-left .line-btn { margin-top: 34px; }
.go-kicker { font: 600 9px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--snow-mute); margin: 0 0 18px; }
.go-kicker ~ .go-kicker { margin-top: clamp(40px, 7vh, 70px); }
.go-list { list-style: none; border-top: 1px solid var(--snow-rule); }
.go-list li { display: grid; grid-template-columns: clamp(110px, 10vw, 150px) 1fr; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--snow-rule); }
.go-list b { font: 300 clamp(46px, 4.6vw, 72px)/.9 var(--serif); }
.go-list b small { font: 600 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; margin-left: 8px; color: var(--snow-mute); vertical-align: top; }
.go-list h3, .go-near h3 { font: 400 clamp(20px, 1.7vw, 26px)/1.15 var(--serif); }
.go-list p, .go-near p { margin-top: 8px; max-width: 46ch; font: 400 12.5px/1.7 var(--sans); color: var(--snow-soft); }
.go-near { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; }
.go-near li { padding-top: 16px; border-top: 1px solid var(--snow-rule); }
@media (max-width: 760px) { .go-near { grid-template-columns: 1fr; } .go-list li { grid-template-columns: 96px 1fr; gap: 16px; } }

/* hero title in the site's own serif (her note 2026-11-14), as the section titles */
.hero .hero-copy h1 { font: 300 clamp(58px, 11vw, 180px)/.92 var(--serif); letter-spacing: -.01em; }
.hero .hero-sub { font: italic 300 clamp(20px, 2.1vw, 32px)/1.3 var(--serif); }

/* hero title: the site's Cormorant, taller and tighter, close to the density of the old title (option A) */
.hero .hero-copy h1 { font: 400 clamp(58px, 11vw, 180px)/.92 var(--serif); letter-spacing: -.045em; transform: scaleY(1.08); transform-origin: 50% 100%; }

/* hero title: Bodoni Moda (her pick, option B) */
.hero .hero-copy h1 { font: 400 clamp(54px, 10.4vw, 170px)/.95 "Bodoni Moda", var(--serif); letter-spacing: -.04em; transform: none; }

/* hero subtitle: heavier italic and a soft light halo so it reads over the water */
.hero .hero-sub { font: italic 500 clamp(21px, 2.2vw, 34px)/1.3 var(--serif); color: #05161b; text-shadow: 0 0 22px rgba(255, 255, 255, .75), 0 0 6px rgba(255, 255, 255, .5); }

/* hero subtitle (her note): no halo; the sans of the site, set like the kicker above the title, so it reads on water and cloud alike */
.hero .hero-sub { font: 600 clamp(12px, 1.05vw, 16px)/1.6 var(--sans); letter-spacing: .3em; text-transform: uppercase; font-style: normal; color: #05161b; text-shadow: none; margin-top: 26px; }

/* residences: photoreal aerial in place of the 3D reconstruction (interim, until the orbit films) */
#homesites #hs-canvas { opacity: 0 !important; pointer-events: none; }
#homesites .hs-3dhint, #homesites .hs-3dload { display: none; }
.hs-still { position: absolute; z-index: 1; left: var(--pad); top: calc(var(--bar) + 120px); bottom: clamp(40px, 7vh, 80px); width: calc(100% - clamp(560px, 42vw, 680px) - var(--pad) - 30px); object-fit: cover; border-radius: 6px; box-shadow: 0 40px 90px rgba(60, 46, 28, .22); transition: opacity .8s var(--ease); }
.hs-stage.is-plan2 .hs-still, .hs-stage.is-walking .hs-still, .hs-stage[data-view="room"] .hs-still { opacity: 0 !important; }
@media (max-width: 900px) { .hs-still { position: relative; left: auto; top: auto; bottom: auto; width: calc(100% - 2 * var(--pad)); margin: 0 var(--pad); height: 56vh; } }

@media (min-width: 901px) { .hs-still { width: calc(100% - clamp(660px, 52vw, 800px)); } }

/* walk: day/night by the pointer, a quiet scale under the track */
.hs-walk { cursor: ew-resize; }
.hs-walk-dn { display: flex; gap: 22px; font: 600 9px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #fff; opacity: .85; white-space: nowrap; }
.hs-walk-night { transition: none; }

.hs-walk-ui [hidden] { display: none !important; }

/* walk guides: four quiet labels inside the frame, one on each edge */
.hs-walk { cursor: crosshair; }
.hs-walk-guide { position: absolute; inset: 0; pointer-events: none; color: #fff; font: 600 9px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.hs-walk-guide p { position: absolute; display: flex; align-items: center; gap: 10px; opacity: .8; }
.hs-walk-guide i { font-style: normal; font-size: 14px; letter-spacing: 0; opacity: .9; }
.g-left { left: var(--pad); top: 50%; transform: translateY(-50%); }
.g-right { right: var(--pad); top: 50%; transform: translateY(-50%); }
.g-y { left: 50%; transform: translateX(-50%); flex-direction: column; gap: 8px; }
.g-up { top: calc(var(--bar) + 24px); }
.g-down { bottom: clamp(96px, 13vh, 130px); }
.hs-walk-dn { display: none; }
@media (hover: none) { .hs-walk-guide { display: none; } }

.hs-walk-guide p { padding: 11px 16px; border-radius: 999px; background: rgba(11, 15, 16, .42); font-size: 10px; opacity: 1; text-shadow: none; }
.g-y { flex-direction: row; }

/* enquiry form field: a soft radial shade, no blur filter (the filtered box showed clipped straight edges) */
.form::before { inset: -18% -14% !important; filter: none !important; transform: none !important; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(8, 11, 12, .74) 0%, rgba(8, 11, 12, .62) 55%, rgba(8, 11, 12, 0) 100%) !important; }

/* vision facts: on hover the figure grows softly with one gentle pulse, and its label lights up */
#vision .facts dd { display: inline-block; transform-origin: left bottom; transition: transform .7s cubic-bezier(.2, .8, .2, 1), color .5s; }
#vision .facts dt { transition: color .5s, letter-spacing .7s cubic-bezier(.2, .8, .2, 1); }
#vision .facts > div { cursor: default; }
#vision .facts > div:hover dd { animation: factPulse 1.6s cubic-bezier(.2, .8, .2, 1) both; }
#vision .facts > div:hover dt { color: var(--ink); letter-spacing: .26em; }
@keyframes factPulse { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 70% { transform: scale(1.09); } 100% { transform: scale(1.11); } }
@media (prefers-reduced-motion: reduce) { #vision .facts > div:hover dd { animation: none; transform: scale(1.08); } }

/* Lot 1: drone orbit in place of the still; the plan opens full screen from the same top view */
.hs-orbit { cursor: ew-resize; background: #ddd4c6; }
.hs-plan-video { display: none; }
.hs-plan-stage.has-video { left: 0 !important; width: 100% !important; z-index: 3; background: #0b0f10; }
.hs-plan-stage.has-video img { display: none; }
.hs-plan-stage.has-video .hs-plan-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-plan-stage.has-video .hs-plan-cap { z-index: 1; color: #fff; padding: 11px 16px; border-radius: 999px; background: rgba(11, 15, 16, .45); }

/* while the plan opens full screen, the cards step aside; the residence sits high in this film, so keep its top in view */
.hs-stage.is-plan2 .hs-card, .hs-stage.is-plan2 .hs-panel, .hs-stage.is-plan2 .hs-head { opacity: 0 !important; pointer-events: none !important; }
.hs-plan-stage.has-video .hs-plan-video { object-position: 50% 0%; }

/* facts hover: one smooth curve both ways (a slight overshoot on the way in, an unhurried settle on the way out) */
#vision .facts > div:hover dd { animation: none !important; transform: scale(1.11); }
#vision .facts dd { transition: transform .9s cubic-bezier(.34, 1.45, .64, 1), color .5s !important; }
#vision .facts > div:not(:hover) dd { transition: transform 1.1s cubic-bezier(.22, .8, .25, 1), color .5s !important; }

/* the 3D plan (reference layout): the model large on the light ground, rooms marked by soft points */
#homesites .hs-plan-stage { background: #f3f0ea; }
#homesites .hs-plan-wrap { position: relative; width: min(92%, 1400px); }
#homesites .hs-plan-wrap img { display: block; width: 100%; max-height: none; box-shadow: none; border-radius: 0; cursor: default; }
.hs-plan-pts { position: absolute; inset: 0; }
.hs-pt { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; color: #14191b; }
.hs-pt i { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .45), 0 6px 18px rgba(40, 32, 20, .25); }
.hs-pt i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9); animation: ptPulse 2.4s ease-out infinite; }
@keyframes ptPulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.hs-pt span { padding: 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, .88); font: 600 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 24px rgba(40, 32, 20, .12); transition: background .3s, color .3s; }
.hs-pt:hover span { background: #14191b; color: #fff; }
#homesites .hs-plan-cap { color: #14191b; opacity: .7; }
.hs-plan-back { position: absolute; left: var(--pad); bottom: clamp(22px, 4vh, 40px); }
#homesites .hs-plan-stage .hs-plan-back { color: #14191b; border-color: rgba(20, 25, 27, .35); background: rgba(255, 255, 255, .6); }

#homesites .hs-plan-stage { left: 0 !important; width: 100% !important; z-index: 3; }
#homesites .hs-plan-cap { top: calc(var(--bar) + 30px); bottom: auto; }

/* residences cards as clear liquid glass (her note): mostly transparent, strong blur and lift, light caught on the rims */
#homesites .hs-panel, #homesites .hs-card {
  background: linear-gradient(140deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .16) 100%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -1px 1px rgba(255, 255, 255, .35), inset 0 0 36px rgba(255, 255, 255, .22), inset 6px 0 18px -8px rgba(255, 255, 255, .5), 0 26px 60px rgba(70, 56, 36, .14);
  backdrop-filter: blur(16px) saturate(1.9) brightness(1.06); -webkit-backdrop-filter: blur(16px) saturate(1.9) brightness(1.06);
}
#homesites .hs-item:hover, #homesites .hs-item.is-on { background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9); }
#homesites .hs-card-btns .hs-btn { background: rgba(255, 255, 255, .18); border-color: rgba(20, 25, 27, .3); }

/* liquid glass, take 2: clear (no tint, no saturation), read by its rims: a bright top-left edge, a soft lower inner shadow,
   a thin specular line, and a gentle lift; the beige behind is only slightly lightened */
#homesites .hs-panel, #homesites .hs-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .03) 38%, rgba(255, 255, 255, .02) 62%, rgba(255, 255, 255, .10) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(8px) brightness(1.04) !important; -webkit-backdrop-filter: blur(8px) brightness(1.04) !important;
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, .95),
    inset -1px -1px 0 rgba(255, 255, 255, .35),
    inset 0 -18px 30px -18px rgba(120, 100, 70, .16),
    inset 0 22px 30px -22px rgba(255, 255, 255, .7),
    0 1px 0 rgba(255, 255, 255, .6),
    0 30px 60px -20px rgba(70, 56, 36, .22), 0 8px 18px -10px rgba(70, 56, 36, .18) !important;
}
#homesites .hs-panel::before, #homesites .hs-card::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent); pointer-events: none; }
#homesites .hs-item:hover, #homesites .hs-item.is-on { background: rgba(255, 255, 255, .14) !important; border-color: rgba(255, 255, 255, .7) !important; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -10px rgba(70, 56, 36, .25) !important; }
#homesites .hs-card-btns .hs-btn { background: rgba(255, 255, 255, .06) !important; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .8); }

/* Lot 1: the 3D plan model is the first view; room points ride on it */
#homesites .hs-stage.has-model #hs-canvas { opacity: 1 !important; pointer-events: auto; }
#homesites .hs-stage.has-model .hs-still { opacity: 0 !important; pointer-events: none; }
.hs-pts3d { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hs-pts3d .hs-pt { pointer-events: auto; }
.hs-stage:not(.has-model) .hs-pts3d, .hs-stage.is-walking .hs-pts3d, .hs-stage.is-plan2 .hs-pts3d, .hs-stage[data-view="room"] .hs-pts3d { display: none; }

/* residences: every change of view is a clean cut, never one view blended over the next (her note 2026-11-14) */
#homesites .hs-walk, #homesites .hs-plan-stage, #homesites .hs-room, #homesites .hs-3dview, #homesites .hs-card, #homesites .hs-panel, #homesites .hs-head, #homesites .hs-still, #homesites #hs-canvas, #homesites .hs-pts3d { transition: none !important; }

/* the drawn 3D plan as the residence's first view: shown whole at its own proportion, on its own light ground */
#homesites .hs-still.is-plan { top: 50%; bottom: auto; height: auto; aspect-ratio: 5504 / 3072; transform: translateY(-46%); object-fit: cover; background: #f3f0ea; box-shadow: 0 30px 70px -30px rgba(70, 56, 36, .35); }
.hs-still-pts { position: absolute; pointer-events: none; z-index: 2; }
.hs-still-pts .hs-pt { pointer-events: auto; }
.hs-stage.is-walking .hs-still-pts, .hs-stage.is-plan2 .hs-still-pts, .hs-stage[data-view="room"] .hs-still-pts { display: none; }
.hs-still-pts .hs-pt span { font-size: 8px; padding: 7px 11px; }

/* the plan sits straight on the section's ground (no panel of its own); its off-white melts into the beige */
#homesites .hs-still.is-plan { background: transparent !important; box-shadow: none !important; mix-blend-mode: multiply; }
#homesites .hs-plan-stage { background: #ece6dc !important; }
#homesites .hs-plan-wrap img { mix-blend-mode: multiply; }
/* card buttons: solid ink with white type on hover, never invisible */
#homesites .hs-card-btns .hs-btn:hover, #homesites .hs-plan-back:hover { background: #14191b !important; color: #fff !important; border-color: #14191b !important; }

/* residences ground: neutral warm white, no yellow cast (her note) */
#homesites.hs { background: #efeeeb !important; }
#homesites .hs-3dview { background: radial-gradient(110% 90% at 40% 50%, #f7f6f3 0%, #efeeeb 55%, #e6e4df 100%) !important; }
#homesites .hs-plan-stage { background: #f2f1ee !important; }
#homesites .hs-plan-wrap img { mix-blend-mode: normal; filter: drop-shadow(0 30px 40px rgba(60, 50, 40, .18)); }
/* the photo and the card keep a clear gap */
@media (min-width: 901px) { .hs-still { width: calc(100% - clamp(720px, 57vw, 880px)) !important; } }
/* the small 3D plan inset in the photo's lower corner: a glass tile that opens the plan */
.hs-plan-inset { position: absolute; z-index: 3; width: clamp(170px, 15vw, 240px); padding: 10px 10px 8px; border-radius: 14px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 1px 1px 0 #fff, 0 18px 40px -16px rgba(40, 32, 20, .4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: pointer; transition: transform .4s var(--ease); }
.hs-plan-inset:hover { transform: translateY(-3px); }
.hs-plan-inset img { display: block; width: 100%; }
.hs-plan-inset span { display: block; margin-top: 4px; font: 600 8px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #14191b; text-align: center; }
.hs-stage.is-walking .hs-plan-inset, .hs-stage.is-plan2 .hs-plan-inset, .hs-stage[data-view="room"] .hs-plan-inset { display: none; }

#homesites .hs-plan-stage { background: #f3f0ea !important; }
#homesites .hs-plan-wrap img { filter: none; }

/* ===== Residences, final layout (her direction 2026-11-15): [chooser + aerial] [big 3D plan] [card], three equal-height columns ===== */
@media (min-width: 901px) {
  #homesites { --hs-top: calc(var(--bar) + clamp(110px, 15vh, 150px)); --hs-bot: clamp(36px, 6vh, 64px); --hs-l: clamp(230px, 17vw, 290px); --hs-r: clamp(300px, 23vw, 360px); --hs-gap: clamp(28px, 3vw, 56px); }
  #homesites.hs, #homesites .hs-3dview { background: #f3f0ea !important; }
  #homesites .hs-head { top: calc(var(--bar) + clamp(18px, 3vh, 34px)) !important; }
  #homesites .hs-panel { left: var(--pad) !important; right: auto !important; top: var(--hs-top) !important; bottom: var(--hs-bot) !important; transform: none !important; width: var(--hs-l) !important; display: flex; flex-direction: column; }
  #homesites .hs-list { max-height: none; flex: none; }
  #homesites .hs-aerial { margin: 12px 0 0; flex: 1; min-height: 0; position: relative; border-radius: 12px; overflow: hidden; }
  #homesites .hs-aerial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
  #homesites .hs-aerial figcaption { position: absolute; left: 10px; bottom: 9px; font: 600 8px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
  #homesites .hs-card { left: auto !important; right: var(--pad) !important; top: var(--hs-top) !important; bottom: var(--hs-bot) !important; transform: none !important; width: var(--hs-r) !important; overflow-y: auto; display: flex; flex-direction: column; }
  #homesites .hs-stage[data-view="model"] .hs-card { transform: none !important; }
  #homesites .hs-still { left: calc(var(--pad) + var(--hs-l) + var(--hs-gap)) !important; right: calc(var(--pad) + var(--hs-r) + var(--hs-gap)) !important; width: auto !important; top: var(--hs-top) !important; bottom: var(--hs-bot) !important; height: auto !important; aspect-ratio: auto !important; transform: none !important; object-fit: contain !important; border-radius: 0; box-shadow: none !important; background: transparent !important; mix-blend-mode: multiply; }
  #homesites .hs-still:not(.is-plan) { object-fit: cover !important; border-radius: 12px; mix-blend-mode: normal; }
  #homesites .hs-plan-inset { display: none !important; }
}
@media (max-width: 900px) {
  #homesites .hs-plan-inset { display: none !important; }
  #homesites .hs-aerial { margin: 12px 0 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
  #homesites .hs-aerial img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #homesites .hs-aerial figcaption { display: none; }
  #homesites .hs-still { object-fit: contain; background: transparent; }
}

/* ===== 04 The Homesites: final layout (designer spec 2026-11-15): chooser+aerial | 3D plan hero | card ===== */
#homesites.hs { background: #f3f0ea !important; }
#homesites .hs-3dview { position: absolute !important; inset: 0 !important; height: auto !important; background: none !important; }
#homesites #hs-canvas, #homesites .hs-orbit, #homesites .hs-plan-inset, #homesites .hs-pts3d, #homesites .hs-3dhint, #homesites .hs-3dload { display: none !important; }
#homesites .hs-walk, #homesites .hs-plan-stage, #homesites .hs-room { z-index: 5 !important; }
#homesites .hs-main, #homesites .hs-head, #homesites .hs-panel, #homesites .hs-card {
  position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important; width: auto !important; margin: 0 !important; z-index: 2; min-width: 0; min-height: 0;
}
#homesites .hs-head { padding: 0 !important; }
#homesites .hs-head h2 { margin-top: 14px; font-size: clamp(34px, 3.4vw, 56px); max-width: none; }
#homesites .hs-main { grid-area: main; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 24px; row-gap: clamp(16px, 3vh, 36px); }
#homesites .hs-head { grid-column: 1; grid-row: 1; align-self: start; }
#homesites .hs-locator { grid-column: 2; grid-row: 1; align-self: start; width: clamp(84px, 7vw, 116px); margin: 0; cursor: pointer; }
#homesites .hs-locator img { display: block; width: 100%; aspect-ratio: 1114 / 1200; object-fit: cover; border-radius: 8px; box-shadow: 0 14px 30px -16px rgba(40, 32, 20, .45); transition: transform .4s var(--ease); }
#homesites .hs-locator:hover img, #homesites .hs-aerial:hover img { transform: translateY(-2px); }
#homesites .hs-hero { grid-column: 1 / -1; grid-row: 2; margin: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px; }
#homesites .hs-hero-box { min-height: 0; container-type: size; display: grid; place-items: center; }
#homesites .hs-hero-fit { position: relative; width: min(100cqw, calc(100cqh * 5504 / 3072)); aspect-ratio: 5504 / 3072; cursor: zoom-in; }
#homesites .hs-hero .hs-still {
  position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; transform: none !important; aspect-ratio: auto !important;
  object-fit: contain !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
  mix-blend-mode: normal !important; filter: none !important; z-index: 1; opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}
#homesites .hs-hero.is-aerial .hs-still { object-fit: cover !important; border-radius: 6px !important; -webkit-mask-image: none; mask-image: none; box-shadow: 0 30px 70px -30px rgba(60, 46, 28, .3) !important; }
#homesites .hs-hero .hs-still-pts { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; z-index: 2; display: block !important; }
#homesites .hs-hero figcaption, #homesites .hs-locator figcaption, #homesites .hs-aerial figcaption { position: static !important; margin-top: 10px; font: 600 8.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(20, 25, 27, .55) !important; text-shadow: none !important; }
#homesites .hs-hero figcaption { margin-top: 0; }
#homesites .hs-panel { grid-area: rail; display: flex !important; flex-direction: column; padding: 22px 16px 18px !important; border-radius: 18px !important; overflow: hidden; }
#homesites .hs-panel-title { margin: 0 4px 14px; }
#homesites .hs-list { max-height: none !important; overflow: visible !important; gap: 4px; }
#homesites .hs-aerial { margin: auto 0 0 !important; padding-top: 18px; cursor: pointer; flex: none !important; position: static !important; border-radius: 0 !important; overflow: visible !important; }
#homesites .hs-aerial img { position: static !important; display: block; width: 100%; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 34px -18px rgba(40, 32, 20, .5); transition: transform .4s var(--ease), opacity .5s; }
#homesites .hs-card { grid-area: card; display: flex !important; flex-direction: column; padding: clamp(22px, 3vh, 32px) clamp(22px, 2vw, 30px) !important; border-radius: 18px !important; overflow-y: auto; scrollbar-width: none; }
#homesites .hs-card::-webkit-scrollbar { display: none; }
#homesites .hs-card .hs-rooms { margin-top: auto !important; padding-top: 20px; }
#homesites .hs-card .hs-gallery { align-self: flex-start; margin-top: 22px !important; }
#homesites .hs-stage[data-view="room"] :is(.hs-main, .hs-panel, .hs-card),
#homesites .hs-stage.is-plan2 :is(.hs-main, .hs-panel, .hs-card),
#homesites .hs-stage.is-walking :is(.hs-main, .hs-panel, .hs-card) { opacity: 0 !important; pointer-events: none !important; }
@media (min-width: 901px) {
  #homesites .hs-stage {
    display: grid !important; box-sizing: border-box;
    height: 100vh !important; height: 100svh !important; min-height: 640px !important; overflow: hidden !important;
    grid-template-columns: clamp(220px, 17vw, 270px) minmax(0, 1fr) clamp(280px, 22vw, 340px);
    grid-template-rows: min(100%, 720px); grid-template-areas: "rail main card";
    align-content: center; column-gap: clamp(32px, 3.2vw, 64px);
    padding: calc(var(--bar) + clamp(24px, 4vh, 48px)) var(--pad) clamp(28px, 5vh, 56px) !important;
  }
}
@media (min-width: 901px) and (max-height: 700px) { #homesites .hs-aerial img { aspect-ratio: 4 / 3; } #homesites .hs-aerial { padding-top: 12px; } }
@media (max-width: 900px) {
  #homesites .hs-stage { display: flex !important; flex-direction: column; gap: 28px; height: auto !important; min-height: 0 !important; overflow: visible !important; padding: calc(var(--bar) + 28px) var(--pad) 56px !important; }
  #homesites .hs-main { order: 1; row-gap: 20px; }
  #homesites .hs-panel { order: 2; }
  #homesites .hs-card { order: 3; overflow: visible; }
  #homesites .hs-locator { width: 72px; }
  #homesites .hs-hero-box { container-type: normal; display: block; }
  #homesites .hs-hero-fit { width: 100%; }
  #homesites .hs-aerial img { aspect-ratio: 16 / 10; }
  #homesites .hs-card .hs-rooms { margin-top: 18px !important; }
  #homesites .hs-walk, #homesites .hs-plan-stage { position: fixed !important; inset: var(--bar) 0 0 0 !important; width: auto !important; z-index: 35 !important; }
}

/* locator map removed (her note) */
#homesites .hs-locator { display: none !important; }

.hs-pt[hidden] { display: none !important; }

#homesites .hs-card .hs-gallery { display: none !important; }
/* no dead gap in the lot card (her note): the card is as tall as its content, the room list follows the text */
@media (min-width: 901px) { #homesites .hs-card { align-self: start !important; height: auto !important; bottom: auto !important; } }
#homesites .hs-card .hs-rooms { margin-top: 26px !important; }

/* first-visit opening (her note): the hazy sky of the first version over the title; the first scroll clears it into the dive */
#walk .m-haze { position: absolute; inset: -12%; z-index: 2; pointer-events: none; transform-origin: 50% 46%;
  background: linear-gradient(180deg, rgba(150, 180, 205, .55) 0%, rgba(214, 224, 230, .55) 38%, rgba(232, 232, 228, .7) 70%, rgba(222, 205, 182, .55) 100%);
  transition: opacity 1.8s cubic-bezier(.45, 0, .55, 1), transform 2.4s cubic-bezier(.45, 0, .55, 1); }
#walk .m-haze i { position: absolute; border-radius: 50%; filter: blur(38px); background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 55%, rgba(255, 255, 255, 0)); animation: mHaze 26s ease-in-out infinite alternate; }
#walk .m-haze i:nth-child(1) { width: 62%; height: 54%; left: -8%; top: 4%; }
#walk .m-haze i:nth-child(2) { width: 58%; height: 50%; right: -10%; top: 0; animation-duration: 32s; animation-direction: alternate-reverse; }
#walk .m-haze i:nth-child(3) { width: 74%; height: 58%; left: 10%; top: 34%; animation-duration: 38s; }
#walk .m-haze i:nth-child(4) { width: 56%; height: 52%; left: -12%; bottom: -8%; animation-duration: 30s; animation-direction: alternate-reverse; }
#walk .m-haze i:nth-child(5) { width: 60%; height: 54%; right: -8%; bottom: -6%; }
#walk .m-haze i:nth-child(6) { width: 40%; height: 36%; left: 30%; top: 8%; opacity: .8; animation-duration: 44s; }
@keyframes mHaze { from { transform: translate3d(-2.5%, 0, 0) scale(1); } to { transform: translate3d(2.5%, -1.5%, 0) scale(1.07); } }
#walk.m-go .m-haze { opacity: 0; transform: scale(2.4); }
#walk.is-rest .m-haze { display: none; }
#walk .walk-copy { z-index: 3; }
#walk .m-hint { margin-top: clamp(34px, 7vh, 80px); font: 600 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; display: grid; justify-items: center; gap: 14px; color: #05161b; opacity: .8; transition: opacity .6s; }
#walk .m-hint span { width: 1px; height: 46px; background: currentColor; transform-origin: top; animation: mHint 2.2s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes mHint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
#walk.m-go .m-hint { opacity: 0; }

/* the haze of the first version: cool blue sky above, a warm sand glow below (her screenshot) */
#walk .m-haze { background: linear-gradient(180deg, rgba(118, 158, 194, .78) 0%, rgba(170, 194, 212, .62) 22%, rgba(208, 216, 220, .55) 48%, rgba(222, 222, 216, .6) 72%, rgba(214, 190, 160, .72) 100%); }
#walk .m-haze i { background: radial-gradient(closest-side, rgba(244, 246, 247, .85), rgba(236, 240, 242, .4) 55%, rgba(236, 240, 242, 0)); }
/* Walk through more: three walks as small glass cards under the heading */
.walk-more-k { margin-top: 30px; font: 600 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.walk-more { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.wm-card { width: clamp(150px, 13vw, 210px); padding: 6px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); color: #fff; text-align: left; cursor: pointer; transition: background .35s, color .35s, transform .35s; }
.walk-rest .wm-card img { display: block; position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 9px; }
.wm-card span { display: block; padding: 10px 6px 6px; font: 500 12px/1.3 var(--sans); letter-spacing: .02em; }
.wm-card b { display: block; font-weight: 600; font-size: 9px; letter-spacing: .26em; opacity: .7; margin-bottom: 4px; }
.wm-card:hover { background: #14191b; border-color: #14191b; transform: translateY(-2px); }

.film-view:not([hidden]) { position: fixed; inset: 0; z-index: 90; background: #050708; display: grid; place-items: center; }
.film-view video { width: 100%; height: 100%; object-fit: contain; }
.film-close { position: absolute; top: 18px; right: 22px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font-size: 24px; cursor: pointer; }
.film-close:hover { background: #fff; color: #14191b; }
#walk .m-haze { background: linear-gradient(180deg, rgb(146, 178, 204) 0%, rgb(184, 202, 216) 26%, rgb(206, 214, 219) 52%, rgb(216, 217, 214) 74%, rgb(214, 198, 176) 100%); }
#walk .m-haze i { background: radial-gradient(closest-side, rgba(232, 236, 238, .7), rgba(232, 236, 238, .3) 55%, rgba(232, 236, 238, 0)); }

/* ===== 06 The Island: link to the Film & Albums sub-page (albums.html) ===== */
.island-more h3 em { display: block; font-style: italic; color: var(--snow-soft); }
.island-more .line-btn { margin-top: 30px; }
.island-more-m { display: none; }
@media (max-width: 760px) {
  .island-more { display: none; }
  .island-more-m { display: flex; width: fit-content; margin: 34px var(--pad) 0; color: var(--snow); }
}
/* no dead gap in the residence list either (her note): the view from above follows the list */
@media (min-width: 901px) { #homesites .hs-panel { align-self: start !important; height: auto !important; bottom: auto !important; } }
#homesites .hs-aerial { margin: 22px 0 0 !important; }

/* the satellite view now heads the lot card: full width of the card, above the lot name */
#homesites .hs-card > .hs-aerial { margin: 0 0 22px !important; padding: 0 !important; order: -1; }
#homesites .hs-card > .hs-aerial img { aspect-ratio: 16 / 10 !important; border-radius: 12px; }
#homesites .hs-card > .hs-aerial figcaption { display: none !important; }
/* the residence list sits in the middle of the section height (her note) */
@media (min-width: 901px) { #homesites .hs-panel { align-self: center !important; } }

/* left and right columns as a pair: same top and height; the key map fills the rest of the list */
@media (min-width: 901px) {
  #homesites .hs-panel { align-self: stretch !important; height: auto !important; }
  #homesites .hs-card { align-self: stretch !important; }
}
#homesites .hs-keymap { margin: 18px 0 0; flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; cursor: pointer; }
#homesites .hs-keymap img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 34px -18px rgba(40, 32, 20, .5); transition: opacity .5s; }
#homesites .hs-keymap figcaption { margin-top: 10px; font: 600 8.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(20, 25, 27, .55); }
@media (max-width: 900px) { #homesites .hs-keymap img { aspect-ratio: 16 / 10; flex: none; } }

/* cursor-driven walk viewer */
.film-view .fv-hint { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 54px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; margin: 0; font: 600 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .8); pointer-events: none; transition: opacity .8s; }
.film-view .fv-hint span { width: 40px; height: 1px; background: currentColor; opacity: .6; }
.film-view.is-moved .fv-hint { opacity: 0; transition-delay: 1.2s; }
.film-view { cursor: ew-resize; }
.film-view.is-small video { width: min(1100px, 82vw); height: auto; max-height: 76vh; border-radius: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }

/* the haze clears in 1.4 s and leaves the cloud gap in view before the flight begins */
#walk .m-haze { transition: opacity 1.4s cubic-bezier(.45, 0, .55, 1), transform 1.8s cubic-bezier(.45, 0, .55, 1); }

.film-view { cursor: default; }

#walk .m-haze { transition: opacity 1.8s cubic-bezier(.4, 0, .6, 1), transform 2.4s cubic-bezier(.4, 0, .6, 1); }

#walk .m-haze { transition: opacity 1.1s cubic-bezier(.3, 0, .5, 1), transform 1.6s cubic-bezier(.3, 0, .5, 1); }

.film-close { display: grid !important; place-items: center; padding: 0 !important; font: 300 26px/1 var(--sans) !important; text-align: center; }

/* the other walks play in the same section: no titles over them; the older estate film sits in a smaller frame */
#walk.is-alt .walk-copy, #walk.is-alt #walk-corner { display: none !important; }
#walk.is-small .walk-frame video, #walk.is-small .walk-poster { inset: 13vh 15vw; width: auto; height: auto; border-radius: 14px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45); }

/* switching films: no cross-fade between the poster and the film */
#walk.is-alt .walk-frame video { transition: none; }

/* exactly the veil of the first version (her screenshot): blue sky above, warm sand glow below, white cloud puffs */
#walk .m-haze { background: linear-gradient(180deg, rgba(127, 178, 211, .92) 0%, rgba(169, 203, 224, .82) 34%, rgba(240, 220, 192, .78) 72%, rgba(243, 200, 152, .86) 100%) !important; }
#walk .m-haze i { background: radial-gradient(closest-side, rgba(255, 255, 255, .98), rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, 0)) !important; }

/* buttons: one clean outline, no offset inner highlight (her note) */
.hs-btn, .line-btn, .hs-plan-back, .wm-card, .pill, .btn, button.hs-btn, #homesites .hs-card-btns .hs-btn { box-shadow: none !important; }

/* the haze only dissolves (no scaling of the blurred layer, which made the first seconds of the dive stutter) */
#walk .m-haze { will-change: opacity; transform: none !important; transition: opacity 1.1s cubic-bezier(.3, 0, .5, 1) !important; }
#walk.m-go .m-haze { transform: none !important; }
#walk.m-go .m-haze i { animation: none; }

/* ===== performance (2026-11-15) ===== */
/* a thin line while a film is still arriving behind the scroll */
#walk.is-buffering .walk-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 6; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: pkBuf 1.1s linear infinite; }
@keyframes pkBuf { from { background-position: -40% 0; } to { background-position: 140% 0; } }
/* big blurred cloud puffs stay still: animating a 38px blur over half the screen costs every frame */
.hero-clouds i, #walk .m-haze i { animation: none !important; }
/* phones and touch devices: no live backdrop blur on the large glass panels (a solid tint instead) */
@media (max-width: 900px), (pointer: coarse) {
  #homesites .hs-panel, #homesites .hs-card, .inv-figs, .wm-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #homesites .hs-panel, #homesites .hs-card { background: rgba(253, 250, 244, .94) !important; }
  .wm-card { background: rgba(20, 25, 27, .55); }
}

/* loading note while a walk film arrives */
.pk-load { position: fixed; left: 50%; bottom: clamp(28px, 6vh, 60px); transform: translateX(-50%); z-index: 95; padding: 14px 20px 13px; border-radius: 999px; background: rgba(20, 25, 27, .88); color: #fff; font: 600 10px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); }
.pk-load[hidden] { display: none; }
.pk-load i { display: block; width: 120px; height: 2px; background: rgba(255, 255, 255, .22); border-radius: 2px; overflow: hidden; }
.pk-load b { display: block; height: 100%; width: 0; background: #fff; transition: width .2s linear; }

/* a walk with no night film shows no night/day guide */
.hs-walk.no-night .hs-walk-guide .g-x { display: none; }

/* ---- 2026-11-16: phone trio, WhatsApp, form validation (design spec) ---- */
:root { --err: #e3a493; }
@media (max-width: 760px) {
  .walk-rest-copy { left: var(--pad); right: var(--pad); bottom: clamp(56px, 10vh, 110px); }
  .walk-more-k { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; text-align: center; font-size: 9px; }
  .walk-more-k::before, .walk-more-k::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.28); }
  .walk-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .wm-card { width: auto; padding: 4px; border-radius: 12px; text-align: center; }
  .walk-rest .wm-card img { border-radius: 8px; }
  .wm-card span { padding: 9px 2px 7px; font-size: 10.5px; line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
  .wm-card b { font-size: 8px; letter-spacing: .22em; margin-bottom: 5px; }
}
@media (max-width: 340px) { .wm-card span { font-size: 10px; } }
.wa-fab { position: fixed; z-index: 90; right: clamp(16px, 2.2vw, 32px); bottom: calc(clamp(16px, 2.2vw, 32px) + env(safe-area-inset-bottom, 0px)); height: 46px; padding: 0 20px 0 16px; display: inline-flex; align-items: center; gap: 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); background: rgba(11,15,16,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font: 600 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; box-shadow: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .4s, transform .4s, visibility .4s, background .3s, color .3s; }
.wa-fab.is-on { opacity: 1; visibility: visible; transform: none; }
.wa-fab:hover { background: #fff; color: #14191b; }
.wa-fab:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
body:has(.pk-load:not([hidden])) .wa-fab { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 760px) { .wa-fab { width: 46px; padding: 0; justify-content: center; } .wa-fab span { display: none; } .wa-fab svg { width: 19px; height: 19px; } }
@media (max-width: 900px), (pointer: coarse) { .wa-fab { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(20,25,27,.82); } }
.person > div > a.wa-line { display: inline-flex; align-items: center; gap: 12px; margin: 12px 0 4px; padding: 13px 18px; border: 1px solid var(--snow-rule); color: var(--snow); font: 600 9.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; transition: background .35s, color .35s, border-color .35s; }
.person > div > a.wa-line:hover { background: var(--snow); color: #14191b; border-color: var(--snow); }
.wa-line span { transition: transform .4s; }
.wa-line:hover span { transform: translateX(5px); }
.form label:has([required]) > span::after { content: "*"; margin-left: .5em; letter-spacing: 0; opacity: .7; }
.form .field-err { display: block; margin-top: 7px; font: 400 11.5px/1.45 var(--sans); letter-spacing: .01em; color: var(--err); }
.form .field-err:empty { display: none; }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-bottom-color: var(--err) !important; }
.form label:has([aria-invalid="true"]) > span { color: var(--err); }
.form-note.is-err { color: var(--err); }

/* phone: the footer line wraps instead of running off the screen */
@media (max-width: 760px) { .foot p:first-child { white-space: normal; } .foot p { min-width: 0; } }

/* title screen while the opening film arrives: a thin progress line, then the scroll hint returns */
#walk .m-hint .m-bar { display: block; width: clamp(140px, 16vw, 220px); height: 1px; background: rgba(5, 22, 27, .22); overflow: hidden; }
#walk .m-hint .m-bar b { display: block; width: 0; height: 100%; background: #05161b; transition: width .25s linear; }
#walk .m-hint em { font-style: normal; font-variant-numeric: tabular-nums; }