:root { --ivory: #f2ede6; --paper: #f5f0e8; --stone: #d4c9b8; --ink: #1c1410; --sage: #5a6650; --deep: #2a1e14; --water: #8a9e82; --gold: #b8956a; --gold-light: #d4b48c; --line: #1c14102e; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { background: var(--ivory); color: var(--ink); font-family: 'Montserrat', Arial, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, select { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { color: #fff; background: var(--sage); } .section-shell { padding-inline: clamp(24px, 7vw, 134px); } .eyebrow { letter-spacing: .22em; text-transform: uppercase; margin: 0 0 24px; font-size: 10px; font-weight: 500; line-height: 1.4; } .eyebrow.dark { color: var(--sage); } h2 { letter-spacing: -.055em; margin: 0; font-size: clamp(3rem, 6.5vw, 7.4rem); font-weight: 300; line-height: .94; } .text-link { color: inherit; letter-spacing: .11em; text-transform: uppercase; cursor: pointer; background: 0; border: 0; border-bottom: 1px solid; padding: 0 0 8px; font-size: 10px; line-height: 1.6; display: inline-block; transition: opacity .2s; } .text-link:hover { opacity: .55; } .lead-copy { letter-spacing: -.02em; font-weight: 300; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.45; } .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s, transform .8s cubic-bezier(.22,.61,.36,1); } .reveal.is-visible { opacity: 1; transform: none; } .editorial-image { position: relative; overflow: hidden; } .editorial-image img { object-fit: cover; width: 100%; height: 100%; } .site-header { z-index: 50; color: #fff; border-bottom: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 88px; padding: 0 clamp(24px, 4vw, 76px); transition: background .35s, color .35s, height .35s, border-color .35s; position: fixed; inset: 0 0 auto; isolation: isolate; transform: translateZ(0); } .site-header.is-scrolled { height: 72px; color: var(--ink); border-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ivory); box-shadow: 0 8px 24px rgba(28,20,16,.07); } .brand { letter-spacing: .32em; font-size: 17px; font-weight: 400; } .site-header nav { letter-spacing: .08em; gap: 34px; font-size: 11px; display: flex; } .site-header nav a { transition: opacity .2s; } .site-header nav a:hover { opacity: .55; } .nav-cta { color: inherit; letter-spacing: .15em; text-transform: uppercase; background: 0; border: 0; border-bottom: 1px solid currentColor; justify-self: end; padding: 8px 0; font-size: 10px; transition: opacity .2s; } .nav-cta:hover { opacity: .55; } .menu-toggle { display: none; background: none; border: none; color: inherit; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; justify-self: end; } .mobile-menu { display: none; position: fixed; inset: 0; background: var(--deep); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 32px; z-index: 49; } .mobile-menu.open { display: flex; } .mobile-menu a, .mobile-menu button { font-size: 14px; letter-spacing: .2em; text-transform: uppercase; background: none; border: none; color: #fff; font-weight: 300; } .hero { color: #fff; background: #2a1e14; display: grid; place-items: center; min-height: 100svh; position: relative; overflow: hidden; } .hero-image { object-fit: cover; object-position: center 54%; width: 100%; height: 100%; position: absolute; inset: 0; } .hero-video-bg { position: absolute; inset: 0; background: #2a1e14; } .hero-shade { background: linear-gradient(#07100d70, #07100d14 43%, #07100d8a); position: absolute; inset: 0; } .hero-content { z-index: 2; text-align: center; padding: 120px 24px 82px; position: relative; } .hero h1 { letter-spacing: .15em; margin: 0; font-size: clamp(4.2rem, 11vw, 9.375rem); font-weight: 200; line-height: .84; } .hero-line { letter-spacing: .07em; margin: 30px 0 0; font-size: clamp(1rem, 1.45vw, 1.35rem); font-weight: 300; opacity: .8; } .hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 44px; } .button { letter-spacing: .15em; text-transform: uppercase; border: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; font-size: 9px; transition: background .25s, color .25s, border-color .25s; } .button-light { color: var(--ink); background: #fff; } .button-light:hover { background: var(--ivory); } .button-ghost { border: 1px solid rgba(255,255,255,.7); } .button-ghost:hover { background: rgba(255,255,255,.13); } .button-dark { color: #fff; background: var(--deep); } .button-dark:hover { background: var(--sage); } .button-gold { color: var(--ink); background: var(--gold); } .button-gold:hover { background: var(--gold-light); } .scroll-cue { z-index: 2; letter-spacing: .18em; text-transform: uppercase; font-size: 8px; position: absolute; bottom: 22px; left: clamp(20px, 3vw, 50px); color: rgba(255,255,255,.5); } .vision { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 80px 9vw; padding-top: clamp(110px, 13vw, 230px); padding-bottom: clamp(100px, 12vw, 210px); } .vision-heading { grid-column: 1; grid-row: 1; } .vision-copy { grid-column: 2; grid-row: 1; max-width: 520px; padding-bottom: 8px; } .vision-copy p { margin: 0 0 24px; font-size: 14px; line-height: 1.85; } .vision-image { grid-column: 1 / -1; margin-inline: calc(-1 * clamp(24px, 7vw, 134px)); margin-top: calc(clamp(110px, 13vw, 230px) - 80px); } .vision-sticky { height: 100vh; height: 100svh; overflow: hidden; } .vision-frame { width: 100%; height: 100%; } .vision-image.is-animated { height: 160vh; height: 160svh; margin-top: calc(clamp(110px, 13vw, 230px) - 80px - 28vh); margin-top: calc(clamp(110px, 13vw, 230px) - 80px - 28svh); } .vision-image.is-animated .vision-sticky { position: sticky; top: 0; } .vision-image.is-animated .vision-frame { clip-path: inset(28%); will-change: clip-path; } @media (max-width: 767px) { .vision-image.is-animated { margin-top: calc(clamp(110px, 13vw, 230px) - 80px - 18vh); margin-top: calc(clamp(110px, 13vw, 230px) - 80px - 18svh); } .vision-image.is-animated .vision-frame { clip-path: inset(18% 6%); } } @media (prefers-reduced-motion: reduce) { .vision-image.is-animated { height: auto; margin-top: calc(clamp(110px, 13vw, 230px) - 80px); } .vision-image.is-animated .vision-sticky { position: static; } .vision-image.is-animated .vision-frame { clip-path: none; will-change: auto; } } .proof { color: #fff; background: var(--deep); padding: clamp(84px, 9vw, 150px) clamp(24px, 7vw, 134px); } .proof-intro { border-bottom: 1px solid rgba(255,255,255,.22); display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 46px; } .proof-intro p:last-child { letter-spacing: -.035em; margin: 0; font-size: clamp(1.5rem, 2.7vw, 2.6rem); font-weight: 300; } .proof-row { display: grid; grid-template-columns: repeat(4, 1fr); } .proof-item { border-right: 1px solid rgba(255,255,255,.12); min-width: 0; padding: 44px 4vw 10px 0; } .proof-item:not(:first-child) { padding-left: 4vw; } .proof-item:last-child { border-right: 0; } .proof-value { letter-spacing: -.055em; white-space: nowrap; margin: 0 0 10px; font-size: clamp(2.3rem, 4vw, 4.7rem); font-weight: 300; line-height: 1; } .proof-value span { font-size: .45em; margin-left: 4px; opacity: .6; } .proof-item p:last-child { font-size: 11px; letter-spacing: .06em; opacity: .55; margin: 0; } .proof-action { text-align: right; margin-top: 50px; } .proof-action .text-link { color: #fff; } .residence-choice { padding-top: clamp(105px, 10vw, 165px); } .section-intro { padding-bottom: clamp(70px, 8vw, 120px); } .choice-grid { display: grid; grid-template-columns: 1fr 1fr; transition: grid-template-columns .55s cubic-bezier(.22,.61,.36,1); } .choice-grid:has(.choice-panel:first-child:hover) { grid-template-columns: 62fr 38fr; } .choice-grid:has(.choice-panel:last-child:hover) { grid-template-columns: 38fr 62fr; } .choice-panel { color: #fff; min-height: min(70vh, 820px); position: relative; overflow: hidden; display: block; } .choice-panel-bg { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.22,.61,.36,1); } .choice-panel:hover .choice-panel-bg { transform: scale(1.04); } .choice-bg-1 { background: linear-gradient(170deg, #3a2a1e 0%, #241a10 60%, #160e08 100%); } .choice-bg-2 { background: linear-gradient(170deg, #2e2216 0%, #1e1610 60%, #120e08 100%); } .choice-bg-3 { background: linear-gradient(170deg, #261e14 0%, #181210 60%, #0e0a08 100%); } .choice-bg-4 { background: linear-gradient(170deg, #201a10 0%, #14100c 60%, #0a0806 100%); } .choice-shade { background: linear-gradient(rgba(8,6,4,.12), rgba(8,6,4,.7)); position: absolute; inset: 0; z-index: 1; } .choice-content { z-index: 2; position: absolute; bottom: clamp(40px, 6vw, 80px); left: clamp(22px, 4vw, 40px); right: 20px; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; } .choice-panel:hover .choice-content { opacity: 1; transform: translateY(0); } .choice-label-static { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; pointer-events: none; transition: opacity .35s ease; white-space: nowrap; } .choice-panel:hover .choice-label-static { opacity: 0; } .choice-label-static span { font-size: 11px; font-weight: 300; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); } .choice-content p { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; margin: 0 0 10px; } .choice-content h3 { font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.05; margin: 0 0 8px; } .choice-content .size { display: block; font-size: 10px; letter-spacing: .1em; opacity: .6; margin-bottom: 16px; } .choice-content .price { display: block; font-size: 13px; font-weight: 300; letter-spacing: .02em; margin-bottom: 20px; opacity: .85; } .choice-link { color: inherit; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.5); width: fit-content; padding-bottom: 6px; display: block; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; transition: opacity .2s; } .choice-link:hover { opacity: .6; } .amenities-section { background: var(--paper); padding: clamp(100px, 12vw, 180px) clamp(24px, 7vw, 134px); } .amenities-top { text-align: center; max-width: 680px; margin: 0 auto clamp(56px, 7vw, 88px); } .amenities-top h2 { margin-bottom: 20px; } .amenities-body { font-size: 14px; font-weight: 300; line-height: 1.85; color: var(--sage); max-width: 58ch; margin: 0 auto; } .amenity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .amenity-card { display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 3.5vw, 40px) 20px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--stone); text-align: center; opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .amenity-card.in { opacity: 1; transform: translateY(0); } .amenity-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .amenity-icon i { font-size: 28px; color: var(--ink); line-height: 1; } .amenity-name { font-size: 11px; font-weight: 400; letter-spacing: .05em; color: var(--ink); line-height: 1.5; } .amenities-cta { text-align: center; margin-top: clamp(48px, 6vw, 72px); } .location-section { display: grid; grid-template-columns: 340px 1fr; min-height: clamp(480px, 60vw, 700px); } .location-c-left { background: var(--deep); padding: clamp(52px, 7vw, 100px) clamp(32px, 4vw, 60px); display: flex; flex-direction: column; gap: 32px; } .location-c-kicker { font-size: 9px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.3); } .location-c-h { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 200; letter-spacing: -.03em; color: #fff; line-height: 1.05; } .location-c-h em { font-style: italic; color: var(--gold); } .location-c-list { display: flex; flex-direction: column; border-top: 0.5px solid rgba(255,255,255,.08); flex: 1; } .location-c-item { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 0.5px solid rgba(255,255,255,.07); } .location-c-name { font-size: 11px; font-weight: 300; color: rgba(255,255,255,.5); } .location-c-time { font-size: 22px; font-weight: 200; letter-spacing: -.03em; color: #fff; line-height: 1; } .location-c-unit { font-size: 10px; font-weight: 300; color: var(--gold); } .location-c-map { position: relative; overflow: hidden; } .location-c-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; } .payment-section { background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; overflow: hidden; } .payment-left { padding: clamp(72px, 9vw, 140px) clamp(36px, 6vw, 100px); display: flex; flex-direction: column; justify-content: center; border-right: 0.5px solid var(--line); } .payment-tag { display: inline-block; font-size: 9px; font-weight: 400; letter-spacing: .12em; border: 0.5px solid rgba(23,32,29,.25); padding: 5px 14px; color: rgba(23,32,29,.55); margin-bottom: 24px; } .payment-left h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 200; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; margin-bottom: 28px; } .payment-left-body { font-size: 13px; font-weight: 300; line-height: 1.9; color: var(--sage); max-width: 44ch; margin-bottom: 36px; } .payment-left-body strong { font-weight: 500; color: var(--ink); } .payment-btns { display: flex; gap: 12px; flex-wrap: wrap; } .payment-btn-dark { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--ink); border: none; padding: 15px 24px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .2s; } .payment-btn-dark:hover { background: var(--sage); } .payment-btn-outline { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); background: transparent; border: 0.5px solid rgba(23,32,29,.35); padding: 15px 24px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all .2s; } .payment-btn-outline:hover { background: var(--ink); color: #fff; } .payment-right { background: var(--beige, #e6dfd4); display: flex; flex-direction: column; } .payment-step { flex: 1; padding: clamp(36px, 5vw, 56px) clamp(32px, 5vw, 72px); border-bottom: 0.5px solid rgba(23,32,29,.1); display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); opacity: 0; transform: translateX(24px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .payment-step:last-child { border-bottom: none; } .payment-step.in { opacity: 1; transform: translateX(0); } .payment-pct { font-size: clamp(2rem, 3.5vw, 3.8rem); font-weight: 100; letter-spacing: -.04em; color: var(--ink); line-height: 1; white-space: nowrap; min-width: clamp(80px, 8vw, 110px); } .payment-pct-suf { font-size: clamp(1rem, 1.5vw, 1.6rem); font-weight: 100; color: var(--ink); } .payment-step-title { font-size: 14px; font-weight: 400; letter-spacing: .01em; color: var(--ink); margin-bottom: 6px; } .payment-step-body { font-size: 12px; font-weight: 300; line-height: 1.75; color: var(--sage); } .developer { background: var(--paper); display: grid; grid-template-columns: 1.25fr .75fr; min-height: 700px; } .developer-image { min-height: 600px; position: relative; overflow: hidden; } .dev-img-placeholder { width: 100%; height: 100%; min-height: 600px; background: linear-gradient(160deg, #2a1e14 0%, #1c1410 100%); display: flex; align-items: flex-end; padding: 32px; } .developer-copy { align-self: center; padding: clamp(70px, 8vw, 140px) clamp(35px, 6vw, 100px); } .dev-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--line); } .dev-stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; } .dev-stat:nth-child(even) { border-right: 0; padding-left: 24px; } .dev-stat:nth-child(odd) { padding-right: 24px; } .dev-stat-num { font-size: clamp(2rem, 3.5vw, 3.8rem); font-weight: 200; letter-spacing: -.04em; line-height: 1; color: var(--ink); margin-bottom: 6px; } .dev-stat-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); } .gallery-section { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #1c1410; } .gallery-slides { display: flex; height: 100%; transition: transform 1.1s cubic-bezier(.77,0,.18,1); } .gallery-slide { flex: 0 0 100%; height: 100%; position: relative; } .gs1 { background: linear-gradient(180deg,#2a1e14 0%,#1c1410 60%,#120e0a 100%); } .gs2 { background: linear-gradient(180deg,#241a10 0%,#18120e 60%,#100c08 100%); } .gs3 { background: linear-gradient(180deg,#2e2218 0%,#1e1812 60%,#141008 100%); } .gs4 { background: linear-gradient(180deg,#20180e 0%,#16120a 60%,#0e0c06 100%); } .gs5 { background: linear-gradient(180deg,#261e14 0%,#1a1410 60%,#110e0a 100%); } .gallery-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%); pointer-events: none; } .gallery-dots { position: absolute; top: 28px; right: clamp(24px, 4vw, 52px); display: flex; gap: 8px; z-index: 5; } .gallery-dot { width: 7px; height: 7px; border-radius: 50%; border: 0.5px solid rgba(255,255,255,.45); background: transparent; cursor: pointer; transition: background .3s, border-color .3s; } .gallery-dot.active { background: var(--gold); border-color: var(--gold); } .gallery-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 52px); display: flex; justify-content: space-between; align-items: flex-end; z-index: 5; } .gallery-caption {} .gallery-cap-label { font-size: 8px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 6px; } .gallery-cap-title { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.85); letter-spacing: .02em; transition: opacity .4s; } .gallery-right { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; } .gallery-counter { font-size: 11px; font-weight: 200; letter-spacing: .06em; color: rgba(255,255,255,.4); } .gallery-counter em { font-style: normal; color: #fff; font-weight: 300; } .gallery-arrows { display: flex; gap: 8px; } .gallery-arrow { width: 48px; height: 48px; border: 0.5px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,.7); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .gallery-arrow:hover { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(0,0,0,.4); } .masterplan-section { color: #fff; background: #2a1e14; padding: clamp(100px, 12vw, 190px) 0; } .masterplan-top { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 6vw; padding-bottom: clamp(48px, 6vw, 80px); } .fp-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,.12); margin: 0 0 clamp(40px, 6vw, 80px); } .fp-tab { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: rgba(255,255,255,.35); background: none; border: none; border-bottom: 1px solid transparent; margin-bottom: -1px; padding: 14px 28px 14px 0; margin-right: 24px; transition: color .2s; } .fp-tab:first-child { padding-left: 0; } .fp-tab.active { color: #fff; border-bottom-color: var(--gold); } .fp-tab:hover { color: rgba(255,255,255,.7); } .fp-image { width: 100%; cursor: zoom-in; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); position: relative; overflow: hidden; min-height: clamp(280px, 40vw, 580px); display: flex; align-items: center; justify-content: center; } .fp-image img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; padding: 20px; } .fp-ghost { width: 55%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); position: relative; } .fp-ghost::before { content: ''; position: absolute; top: 25%; left: 0; right: 42%; bottom: 0; border: 1px solid rgba(255,255,255,.08); } .fp-ghost::after { content: ''; position: absolute; top: 0; left: 55%; right: 0; bottom: 48%; border: 1px solid rgba(255,255,255,.08); } .fp-label { position: absolute; bottom: 12px; right: 14px; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.2); } .fp-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: clamp(28px, 4vw, 48px) 0; background: rgba(255,255,255,.08); } .fp-detail { background: #2a1e14; padding: 24px; } .fp-detail-val { font-size: clamp(1.4rem, 2.5vw, 2.4rem); font-weight: 200; letter-spacing: -.02em; margin-bottom: 6px; } .fp-detail-key { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; opacity: .45; } .masterplan-action { text-align: center; padding-top: 46px; } .enquiry { color: #fff; background: var(--deep); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 10vw, 180px); padding-top: clamp(110px, 13vw, 210px); padding-bottom: clamp(110px, 12vw, 190px); } .enquiry-eyebrow { color: rgba(255,255,255,.45); } .enquiry h2 { color: #fff; } .enquiry-body { font-size: 14px; font-weight: 300; line-height: 1.8; opacity: .55; margin-top: 24px; } .enquiry-phone { margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); } .enquiry-phone p { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .4; margin-bottom: 8px; } .enquiry-phone a { font-size: clamp(1.4rem, 2.5vw, 2.2rem); font-weight: 200; letter-spacing: -.01em; color: #fff; } .lead-form { display: grid; grid-template-columns: repeat(2, 1fr); align-content: start; gap: 22px 18px; } .full-field { grid-column: 1 / -1; } .field { position: relative; } .field label { display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .45; margin-bottom: 10px; } .field input, .field select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 14px; font-weight: 300; padding: 10px 0; outline: none; transition: border-color .2s; appearance: none; } .field input::placeholder { color: rgba(255,255,255,.25); } .field input:focus, .field select:focus { border-color: var(--gold); } .field select option { background: var(--deep); color: #fff; } .choice-group { border: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; grid-column: 1 / -1; } .choice-chip { border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.5); background: transparent; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; transition: all .2s; } .choice-chip:hover, .choice-chip.selected { border-color: var(--gold); color: #fff; } .submit-button { height: 55px; width: 100%; color: var(--ink); letter-spacing: .18em; text-transform: uppercase; background: #fff; border: 0; margin-top: 10px; font-size: 9px; font-weight: 500; transition: background .2s; grid-column: 1 / -1; } .submit-button:hover { background: var(--ivory); } .privacy-note { color: rgba(255,255,255,.35); font-size: 9px; line-height: 1.6; grid-column: 1 / -1; margin-top: -8px; } footer { background: var(--ink); color: rgba(255,255,255,.5); padding: clamp(48px, 6vw, 80px) clamp(24px, 7vw, 134px); } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 40px; margin-bottom: 32px; } .footer-brand { font-size: 17px; font-weight: 400; letter-spacing: .32em; color: #fff; margin-bottom: 8px; } .footer-dev { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .4; } .footer-links { display: flex; gap: 32px; align-items: center; } .footer-links a { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); transition: color .2s; } .footer-links a:hover { color: #fff; } .footer-copy { font-size: 10px; line-height: 1.7; opacity: .35; max-width: 800px; } footer > div:nth-of-type(2) { margin-bottom: 24px !important; } footer > div:nth-of-type(2) img { opacity: .45 !important; } footer > div:nth-of-type(2) span { color: rgba(255,255,255,.45); opacity: 1 !important; } @media (max-width: 960px) { .vision { grid-template-columns: 1fr; } .vision-heading { grid-column: 1; grid-row: auto; } .vision-copy { grid-column: 1; grid-row: auto; max-width: none; } .proof-row { grid-template-columns: repeat(2, 1fr); } .choice-grid { grid-template-columns: repeat(2, 1fr); } .amenity-grid { grid-template-columns: repeat(2, 1fr); } .location-section { grid-template-columns: 1fr; } .location-c-map { min-height: 320px; } .developer { grid-template-columns: 1fr; } .enquiry { grid-template-columns: 1fr; } .masterplan-top { grid-template-columns: 1fr; } .payment-section { grid-template-columns: 1fr; } .footer-top { flex-direction: column; gap: 28px; } .site-header { grid-template-columns: auto 1fr auto; column-gap: 18px; } .site-header nav { display: none; } .desktop-enquire { grid-column: 2; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; grid-column: 3; min-width: 44px; min-height: 44px; } } @media (max-width: 600px) { .amenity-grid { grid-template-columns: repeat(2, 1fr); } .choice-grid { grid-template-columns: 1fr; } .proof-row { grid-template-columns: 1fr 1fr; } .payment-steps { grid-template-columns: 1fr; } .lead-form { grid-template-columns: 1fr; } .full-field { grid-column: 1; } .choice-group { grid-column: 1; } .submit-button { grid-column: 1; } .privacy-note { grid-column: 1; } .fp-details { grid-template-columns: 1fr 1fr; } .hero-actions { flex-direction: column; align-items: center; } .gt1 { grid-column: span 12; grid-row: span 1; } .gt2, .gt3, .gt4, .gt5, .gt6 { grid-column: span 6; } } .modal-overlay { position: fixed; inset: 0; background: rgba(10,6,4,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s cubic-bezier(.22,.61,.36,1), visibility 0s linear .35s; } .modal-overlay.open { opacity: 1; visibility: visible; pointer-events: all; transition-delay: 0s; } .modal-card { background: #f5f0e8; width: 100%; max-width: 560px; padding: clamp(32px, 5vw, 52px); transform: translateY(24px); transition: transform .4s cubic-bezier(.22,.61,.36,1); max-height: 90svh; overflow-y: auto; } .modal-overlay.open .modal-card { transform: translateY(0); } .modal-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .modal-eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .modal-h { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 200; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; } .modal-close { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: rgba(28,20,16,.35); background: none; border: none; cursor: pointer; flex-shrink: 0; margin-left: 16px; transition: color .2s; } .modal-close:hover { color: var(--ink); } .modal-sub { font-size: 12px; font-weight: 300; line-height: 1.8; color: var(--sage); margin-bottom: 22px; } .modal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } .modal-chip { font-size: 9px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; border: 0.5px solid rgba(28,20,16,.2); color: rgba(28,20,16,.45); cursor: pointer; transition: all .2s; user-select: none; } .modal-chip.sel { border-color: var(--ink); color: var(--ink); background: rgba(28,20,16,.05); } .modal-form { display: flex; flex-direction: column; gap: 16px; } .modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .modal-field { display: flex; flex-direction: column; gap: 7px; } .modal-label { font-size: 8px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(28,20,16,.4); } .modal-input { background: transparent; border: none; border-bottom: 0.5px solid rgba(28,20,16,.2); color: var(--ink); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 300; padding: 10px 0; outline: none; transition: border-color .2s; } .modal-input::placeholder { color: rgba(28,20,16,.25); } .modal-input:focus { border-color: var(--gold); } .modal-btn { font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; background: var(--ink); color: #fff; border: none; padding: 17px; cursor: pointer; margin-top: 6px; transition: background .2s; } .modal-btn:hover { background: var(--sage); } .modal-btn.success { background: var(--sage); pointer-events: none; } .modal-note { font-size: 9px; font-weight: 300; text-align: center; color: rgba(28,20,16,.3); line-height: 1.6; } @media (max-width: 480px) { .modal-row { grid-template-columns: 1fr; } } @media (max-width: 600px) { .modal-input, .field input, .field select { font-size: 16px; } } .logo-img-light { height: 52px; width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); } .site-header.is-scrolled .logo-img-light { filter: brightness(0); } .logo-img-dark { height: 52px; width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); margin-bottom: 10px; } .logo-img-dev { height: 28px; width: auto; max-width: 120px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.6; } .logo-img-dev-dark { height: 48px; width: auto; max-width: 160px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.8; } .choice-panel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gallery-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vision-img { width: 100%; height: 100%; object-fit: cover; } .dev-section-img { width: 100%; height: 100%; min-height: 600px; object-fit: cover; } .rp-hero { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; border: 1.5px dashed rgba(184,149,106,.4); margin: 24px; } .rp-icon { font-size: 32px; opacity: .4; } .rp-title { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); } .rp-spec { font-size: 10px; font-weight: 300; letter-spacing: .06em; color: rgba(255,255,255,.3); line-height: 1.6; } .rp-fp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); line-height: 1.6; } .rp-fp span { font-size: 9px; font-weight: 300; text-transform: none; color: rgba(255,255,255,.2); margin-top: 6px; display: block; letter-spacing: .04em; } .float-group { position: fixed; bottom: 28px; right: 28px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .wa-float, .ri-float { display: flex; align-items: center; gap: 10px; padding: 14px 22px; box-shadow: 0 4px 24px rgba(0,0,0,.18); transition: background .2s, box-shadow .2s; cursor: pointer; border: none; text-decoration: none; font-family: 'Montserrat', sans-serif; } .wa-float { background: #f5f0e8; color: #1c1410; } .wa-float:hover { background: #fff; box-shadow: 0 6px 32px rgba(0,0,0,.24); } .wa-float svg { width: 20px; height: 20px; color: #25D366; flex-shrink: 0; } .ri-float { background: #2a1e14; color: #f2ede6; } .ri-float:hover { background: #5a6650; box-shadow: 0 6px 32px rgba(0,0,0,.24); } .ri-float svg { width: 18px; height: 18px; color: #f2ede6; flex-shrink: 0; } .wa-label, .float-label { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .wa-label { color: #1c1410; } .float-label { color: #f2ede6; } @media (max-width: 600px) { .wa-float { bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; width: 54px; height: 54px; justify-content: center; gap: 0; padding: 0; } .wa-float svg { width: 22px; height: 22px; } .wa-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } @media (max-width: 600px) { .hero-content { padding: 88px 20px 64px; } .hero h1 { max-width: 100%; font-size: clamp(3.2rem, 14.5vw, 4.2rem); letter-spacing: .1em; } .hero-line { font-size: 0.85rem; letter-spacing: .04em; margin-top: 20px; line-height: 1.55; } } @media (max-width: 390px) { .hero-content { padding: 80px 18px 56px; } } @media (max-width: 340px) { .hero h1 { font-size: 3.2rem; letter-spacing: .07em; } } @media (max-width: 700px) { .fp-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; flex-wrap: nowrap; padding-bottom: 0; } .fp-tabs::-webkit-scrollbar { display: none; } .fp-tab { flex-shrink: 0; padding: 14px 20px 14px 0; margin-right: 16px; font-size: 9px; letter-spacing: .14em; } } @media (max-width: 600px) { .fp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .fp-tab { width: 100%; margin-right: 0; padding: 14px 8px; text-align: left; } } @media (max-width: 960px) { .footer-links { flex-wrap: wrap; gap: 16px 24px; } } @media (max-width: 600px) { footer { padding: 44px 24px calc(94px + env(safe-area-inset-bottom)); } .footer-top { gap: 30px; padding-bottom: 28px; margin-bottom: 24px; } .footer-dev { max-width: 36ch; font-size: 9px; line-height: 1.7; opacity: .58; } .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 16px 24px; } .footer-links a { font-size: 9px; line-height: 1.45; color: rgba(255,255,255,.64); } footer > div:nth-of-type(2) { gap: 14px !important; margin-bottom: 18px !important; } footer > div:nth-of-type(2) span { font-size: 9px !important; color: rgba(255,255,255,.52); } .footer-copy { font-size: 9px; line-height: 1.65; opacity: .48; } } @media (max-width: 960px) { .developer-image { min-height: 360px; } .dev-section-img { min-height: 360px; } } @media (max-width: 600px) { .developer-image { min-height: 280px; } .dev-section-img { min-height: 280px; } } @media (max-width: 960px) { .payment-left { border-right: none; border-bottom: 0.5px solid var(--line); } .payment-btns { flex-direction: column; align-items: flex-start; gap: 10px; } .payment-btn-dark, .payment-btn-outline { width: 100%; max-width: 320px; justify-content: center; } } @media (max-width: 600px) { .choice-grid, .choice-grid:has(.choice-panel:first-child:hover), .choice-grid:has(.choice-panel:last-child:hover) { grid-template-columns: 1fr; transition: none; } .choice-content { opacity: 1; transform: none; } .choice-label-static { display: none; } .choice-panel { min-height: min(60vh, 480px); } .choice-content h3 { font-size: 1.15rem; } .choice-content .size { font-size: 9px; letter-spacing: .07em; } } @media (max-width: 960px) { .vision-copy { padding-bottom: 0; } } @media (max-width: 360px) { .amenity-card { padding: 20px 12px 16px; } .amenity-name { font-size: 10px; } } @media (max-width: 600px) { .location-c-left { gap: 20px; padding: 40px 24px 36px; } .location-c-item { padding: 12px 0; } } @media (max-width: 600px) { .fp-image { min-height: clamp(220px, 70vw, 380px); } } @media (max-width: 600px) { .enquiry { padding-top: clamp(64px, 13vw, 110px); padding-bottom: clamp(64px, 12vw, 110px); } } @media (max-width: 390px) { .modal-overlay { padding: 16px; } .modal-card { padding: 28px 22px; } } @media (max-width: 600px) { .gallery-bottom { padding-bottom: 80px; } .gallery-cap-title { font-size: 13px; } } @media (max-width: 600px) { .logo-img-light { height: 40px; max-width: 160px; } } @media (max-width: 600px) { .proof-value { font-size: clamp(1.8rem, 8vw, 3rem); white-space: normal; } } @media (max-width: 375px) { .section-intro { padding-bottom: clamp(40px, 8vw, 80px); } } @media (max-width: 600px) { .masterplan-section { overflow-x: hidden; } } @media (max-width: 600px) { .residence-choice { padding-top: clamp(48px, 8vw, 80px); } .residence-choice .section-intro { padding-bottom: clamp(32px, 6vw, 56px); } .residence-choice h2 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; } } .payment-btns-mobile { display: none; } @media (max-width: 960px) { .payment-btns { display: none; } .payment-btns-mobile { display: flex; flex-direction: column; gap: 12px; padding: clamp(32px, 6vw, 48px) clamp(24px, 5vw, 40px); background: var(--paper); } .payment-btns-mobile .payment-btn-dark, .payment-btns-mobile .payment-btn-outline { width: 100%; max-width: 100%; justify-content: center; } } .footer-disclaimer { font-size: 10px; font-weight: 300; letter-spacing: .04em; line-height: 1.8; color: var(--stone); opacity: .55; margin-top: 12px; max-width: 860px; } .footer-disclaimer strong { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .map-directions-link { display: inline-flex; align-items: center; gap: 7px; position: absolute; bottom: 16px; right: 16px; background: var(--deep); color: var(--ivory); font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 10px 16px; z-index: 2; transition: background .2s; } .map-directions-link:hover { background: var(--sage); } .map-directions-link svg { width: 13px; height: 13px; flex-shrink: 0; } @font-face{font-family:Montserrat;src:url('Montserrat.ttf');font-weight:100 900;font-display:swap}:root{--ivory:#fff;--paper:#fff;--stone:#dedbd5;--ink:#292824;--sage:#78766e;--deep:#292824;--water:#99958b;--gold:#a18e73;--gold-light:#ded6c9;--line:#29282424;--beige:#faf9f6}body,button,input,select,textarea{font-family:Montserrat,Arial,sans-serif}body{background:white}h1,h2,h3{font-weight:200}p,input,label,button{font-weight:300}.masterplan-section,.enquiry,footer,.footer,.location-c-left,.payment-left,.payment-right{background:#fff!important;color:#292824!important}.masterplan-section :is(h2,p,label),.enquiry :is(h2,p,label),footer :is(p,a),.location-c-left :is(h2,p,span),.payment-left :is(h2,p){color:#292824!important}.masterplan-section,.enquiry,.payment-section{border-top:1px solid #e8e6e1}.location-c-item,.location-c-list{border-color:#dedbd5}.choice-grid,.choice-grid:has(.choice-panel:hover){grid-template-columns:1fr 1fr;gap:20px;margin:0 4%}.choice-content{opacity:1!important;transform:none!important}.choice-label-static{display:none!important}.choice-panel{min-height:650px}.choice-panel-bg{transform:none!important}.choice-shade{background:linear-gradient(transparent 25%,rgba(0,0,0,.62))}.choice-content h3{font-size:clamp(24px,2.7vw,43px);font-weight:200}.section-intro{padding-bottom:60px}.residence-choice{padding-top:100px;padding-bottom:90px}.payment-right{border-left:1px solid #e8e6e1}.payment-pct,#ps3 .payment-pct{font-size:clamp(48px,5vw,74px);font-weight:200;min-width:120px}.payment-pct-suf{font-size:.4em}.masterplan-section :is(button,.fp-tab){color:#78766e;border-color:#dedbd5}.masterplan-section .fp-tab.active{color:#292824;border-color:#292824}.enquiry :is(input,select){color:#292824!important;background:transparent!important;border-color:#ccc!important}.enquiry input::placeholder{color:#888!important}.enquiry select option{color:#292824;background:white}.location-c-h em{color:#a18e73!important}.location-c-left{border:1px solid #e8e6e1}.gallery-section{height:80svh}.developer{background:#faf9f6}.modal-card{background:white;color:#292824}.modal-card :is(input,select){color:#292824}.footer-disclaimer{color:#777!important}.vision{background:white}.vision-scroll-reveal{height:auto!important}.vision-sticky{position:relative!important;height:70vh!important}.vision-frame{clip-path:none!important}.fp-caption,.fp-info,.fp-title{color:#292824!important}.reveal{scroll-margin-top:90px}@media(max-width:767px){.choice-grid,.choice-grid:has(.choice-panel:hover){grid-template-columns:1fr;margin:0 6%;gap:20px}.choice-panel{min-height:510px}.residence-choice{padding-top:65px;padding-bottom:60px}.section-intro{padding-bottom:35px}.payment-right{border-left:0}.payment-pct,#ps3 .payment-pct{font-size:58px;min-width:105px}.gallery-section{height:65svh;min-height:420px}.vision-sticky{height:440px!important}} .header-study.site-header{position:fixed;inset:0 0 auto;height:100px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5%;background:transparent!important;border:0!important;box-shadow:none!important;color:white!important;isolation:isolate;transition:transform .5s ease,opacity .5s ease,height .5s ease;z-index:100}.header-study:before{content:"";position:absolute;inset:0 0 -50px;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.28) 60%,transparent);pointer-events:none;transition:opacity .5s}.header-study .menu-toggle{display:flex!important;justify-self:start;gap:12px;align-items:center;font:300 10px Montserrat,Arial,sans-serif;color:inherit;border:0;background:none;min-height:44px;cursor:pointer;letter-spacing:.08em}.hamburger{width:22px;height:9px;border-top:1px solid;border-bottom:1px solid;display:inline-block}.header-brand{text-align:center;color:inherit;font-size:35px;font-weight:200;letter-spacing:.16em;line-height:1}.header-brand span{display:block;font-size:8px;letter-spacing:.28em;margin-top:8px}.header-enquire{justify-self:end;display:flex;gap:20px;align-items:center;background:none;border:0;border-bottom:1px solid #ffffff70;color:inherit;font:300 10px Montserrat,Arial,sans-serif;min-height:44px;cursor:pointer}.header-enquire svg{width:24px;height:12px;fill:none;stroke:currentColor;stroke-width:1}.header-study.is-away{opacity:0;transform:translateY(-110%);pointer-events:none}.header-study:focus-within{opacity:1!important;transform:none!important;pointer-events:auto!important}.header-option-2 .header-study:before{inset:0;background:#1515155c;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);mask-image:linear-gradient(#000 75%,transparent)}.header-option-2 .header-study.is-away{transform:none;opacity:0}.header-option-3 .header-study{inset:18px 4% auto;height:78px;padding:0 30px}.header-option-3 .header-study:before{inset:0;background:#1515159c;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 45px #0003}.header-option-3 .header-study.is-away{transform:translateY(-130%)}.header-option-4 .header-study.is-away{transform:none;opacity:1;pointer-events:auto;height:65px}.header-option-4 .header-study.is-away :is(.menu-toggle,.header-enquire){opacity:0;pointer-events:none}.header-option-4 .header-study.is-away:before{opacity:.55}.header-option-4 .header-study .header-brand{transition:transform .5s}.header-option-4 .header-study.is-away .header-brand{transform:scale(.75)}.header-option-5 .header-study.is-scrolled:not(.is-away){color:#292824!important;background:#ffffffed!important;box-shadow:0 5px 25px #00000009!important}.header-option-5 .header-study.is-scrolled:before{opacity:0}.header-option-5 .header-study.is-scrolled .header-enquire{border-color:#29282460}.header-study button:focus-visible,.header-brand:focus-visible{outline:1px solid currentColor;outline-offset:5px}.mobile-menu{z-index:150!important}.header-study .menu-toggle{transition:opacity .3s}.header-enquire{transition:opacity .3s}@media(max-width:767px){.header-study.site-header{height:80px;padding:0 6%}.header-brand{font-size:29px}.header-brand span{font-size:7px}.menu-word{display:none}.header-enquire{gap:8px;font-size:9px}.header-enquire svg{width:18px}.header-option-3 .header-study{inset:12px 4% auto;height:70px;padding:0 18px}}@media(prefers-reduced-motion:reduce){.header-study,.header-study *,.header-study:before{transition:none!important}} .header-option-1 .header-study{grid-template-columns:130px 1fr 130px;padding:0 4%} .header-option-1 .header-brand{grid-column:1;grid-row:1;justify-self:start} .header-option-1 .header-study>.menu-toggle,.header-option-1 .header-study>.header-enquire{display:none!important} .header-option-1 .header-centre-nav{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;gap:clamp(15px,2vw,32px)} .header-option-1 .header-centre-nav a,.header-option-1 .header-centre-nav button{font:300 10px Montserrat,Arial,sans-serif;letter-spacing:.025em;color:inherit;background:none;border:0;white-space:nowrap;cursor:pointer;padding:15px 0;min-height:44px} .header-option-1 .header-centre-nav button{border-bottom:1px solid #ffffff70} @media(max-width:1050px){.header-option-1 .header-study{grid-template-columns:90px 1fr 90px;padding:0 3%}.header-option-1 .header-centre-nav{gap:14px}.header-option-1 .header-centre-nav a,.header-option-1 .header-centre-nav button{font-size:9px}} @media(max-width:767px){.header-option-1 .header-study{grid-template-columns:1fr auto 1fr;padding:0 6%}.header-option-1 .header-centre-nav{display:none}.header-option-1 .header-brand{grid-column:2;justify-self:center}.header-option-1 .header-study>.menu-toggle{display:flex!important;grid-column:1;grid-row:1}.header-option-1 .header-study>.header-enquire{display:flex!important;grid-column:3;grid-row:1}} @media(min-width:768px){ .header-option-1 .header-study{grid-template-columns:100px 1fr auto;gap:30px} .header-option-1 .header-centre-nav{justify-content:flex-start} .header-option-1 .header-study>.header-enquire{display:flex!important;grid-column:3;grid-row:1;justify-self:end} } @media(min-width:768px) and (max-width:1050px){.header-option-1 .header-study{grid-template-columns:75px 1fr auto;gap:16px}.header-option-1 .header-centre-nav{gap:12px}} .header-option-1 .header-study .header-brand{display:none!important} @media(min-width:768px){.header-option-1 .header-study{grid-template-columns:1fr auto}.header-option-1 .header-centre-nav{grid-column:1}.header-option-1 .header-study>.header-enquire{grid-column:2}} @media(max-width:767px){.header-option-1 .header-study{grid-template-columns:1fr auto}.header-option-1 .header-study>.header-enquire{grid-column:2}} @media(min-width:768px){.header-option-1 .header-study{grid-template-columns:100px minmax(0,1fr) 100px;gap:16px}.header-option-1 .header-centre-nav{grid-column:2;justify-content:center}.header-option-1 .header-study>.header-enquire{grid-column:3;justify-self:end}} @media(min-width:768px) and (max-width:1050px){.header-option-1 .header-study{grid-template-columns:75px minmax(0,1fr) 75px;gap:10px}} .header-study :is(nav a,nav button,.menu-toggle){text-transform:uppercase;letter-spacing:.1em!important}.header-option-1 .header-study>.header-enquire{display:none!important}@media(min-width:768px){.header-option-1 .header-study{grid-template-columns:1fr}.header-option-1 .header-centre-nav{grid-column:1;justify-content:center}} .expand-study{height:185vh;background:#fff;position:relative;scroll-margin-top:0;--progress:0}.expand-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}.expand-frame{position:absolute;inset:0;clip-path:inset(calc(9% * (1 - var(--progress))) calc(7% * (1 - var(--progress))));overflow:hidden}.expand-frame>img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - .06 * var(--progress)));display:block}.expand-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0009,#0002 85%)}.expand-copy{position:absolute;z-index:1;left:9%;right:9%;top:50%;transform:translateY(calc(-50% + 20px * (1 - var(--progress))));color:white;opacity:calc(.45 + .55 * var(--progress))}.expand-heading>span{font-size:9px;letter-spacing:.2em}.expand-copy h2{font-family:Montserrat,Arial,sans-serif;font-size:clamp(36px,4.5vw,66px);font-weight:200;line-height:1.13;letter-spacing:-.04em;margin:25px 0}.expand-detail p{font-size:13px;line-height:1.85;font-weight:300;max-width:400px;color:#fff}.expand-detail button{display:inline-flex;gap:30px;align-items:center;background:none;border:0;border-bottom:1px solid #ffffff90;color:inherit;font:300 10px Montserrat,Arial,sans-serif;padding:16px 0;margin-top:23px;cursor:pointer;min-height:44px}.expand-detail svg{width:26px;height:12px;fill:none;stroke:currentColor;stroke-width:1}.expand-1 .expand-copy{text-align:center}.expand-1 p{margin:auto}.expand-1 .expand-shade{background:#0005}.expand-2 .expand-copy{top:auto;bottom:12%;transform:translateY(calc(20px * (1 - var(--progress))))}.expand-2 h2{font-size:clamp(40px,5.3vw,78px)}.expand-3 .expand-copy{display:flex;gap:8%;align-items:end;justify-content:space-between;top:auto;bottom:13%;transform:translateY(calc(20px * (1 - var(--progress))))}.expand-3 .expand-heading{flex:1.3}.expand-3 .expand-detail{flex:1;padding-bottom:8px}.expand-3 h2{margin-bottom:0}.expand-4 .expand-copy{left:auto;right:10%;width:390px;padding:38px;background:#fffffff2;color:#292824}.expand-4 h2{font-size:40px}.expand-4 p{color:#746e64;font-size:12px}.expand-4 button{border-color:#29282490}.expand-4 .expand-shade{background:#0001}.expand-5 .expand-copy{top:20%;transform:translateY(calc(20px * (1 - var(--progress))))}.expand-5 h2{font-size:clamp(32px,3.5vw,51px)}.expand-5 .expand-shade{background:linear-gradient(110deg,#0009,transparent 85%)}.expand-detail button:focus-visible{outline:2px solid currentColor;outline-offset:6px}@media(max-width:767px){.expand-study{height:160svh}.expand-copy{left:10%;right:10%}.expand-copy h2,.expand-2 h2{font-size:37px}.expand-heading>span{font-size:8px;letter-spacing:.12em}.expand-detail p{font-size:12px}.expand-3 .expand-copy{display:block;bottom:12%}.expand-3 h2{margin-bottom:22px}.expand-4 .expand-copy{left:10%;right:10%;width:auto;padding:26px}.expand-4 h2{font-size:33px}.expand-5 .expand-copy{top:22%}.expand-5 h2{font-size:34px}}@media(prefers-reduced-motion:reduce){.expand-study{height:100svh;--progress:1!important}.expand-sticky{position:relative}.expand-frame{clip-path:none}.expand-frame>img{transform:none}.expand-copy{opacity:1}} .expand-study{--reveal:0} .expand-study .expand-copy{display:block;text-align:center;left:10%;right:10%;top:50%;bottom:auto;width:auto;max-width:720px;margin:0 auto;padding:0;background:transparent;color:white;opacity:var(--reveal);visibility:hidden;pointer-events:none;transform:translateY(calc(-50% + 16px * (1 - var(--reveal))))} .expand-study.text-visible .expand-copy{visibility:visible;pointer-events:auto} .expand-study .expand-copy h2{font-size:clamp(27px,3vw,43px);font-weight:300;line-height:1.25;margin:20px 0} .expand-study .expand-heading>span{font-size:8px;letter-spacing:.18em} .expand-study .expand-detail{padding:0} .expand-study .expand-detail p{font-size:12px;line-height:1.85;color:#fff;max-width:500px;margin:0 auto} .expand-study .expand-detail button{display:flex;justify-content:center;align-items:center;width:328px;max-width:100%;height:52px;min-height:52px;padding:0 25px;margin:30px auto 0;border:0;border-radius:0;background:rgba(24,25,24,.76);color:#fff;font:300 15px Montserrat,Arial,sans-serif;letter-spacing:0;transition:background .2s} .expand-study .expand-detail button svg{display:none} .expand-study .expand-detail button:hover{background:rgba(15,16,15,.94)} .expand-2 .expand-detail button{background:rgba(20,21,20,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .expand-3 .expand-detail button{background:rgba(24,25,24,.65);border:1px solid rgba(255,255,255,.35)} .expand-4 .expand-detail button{background:rgba(24,25,24,.85);width:280px;height:48px;min-height:48px;font-size:13px} .expand-5 .expand-detail button{background:linear-gradient(90deg,rgba(24,25,24,.5),rgba(24,25,24,.82),rgba(24,25,24,.5));width:360px} .expand-study .expand-shade{background:rgba(0,0,0,calc(.1 + .28 * var(--reveal)))} @media(max-width:767px){.expand-study .expand-copy{left:9%;right:9%}.expand-study .expand-copy h2{font-size:29px}.expand-study .expand-detail p{font-size:11px}.expand-study .expand-detail button{font-size:14px;height:50px;min-height:50px;margin-top:25px}} @media(prefers-reduced-motion:reduce){.expand-study .expand-copy{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)}} .before-intro{padding:100px 8% 65px;background:white;color:#292824;scroll-margin-top:90px}.before-intro .expand-copy{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;color:#292824;max-width:none}.before-intro .expand-heading>span{font-size:9px;letter-spacing:.18em;color:#8b8276}.before-intro .expand-copy h2{font-size:clamp(30px,3.5vw,49px);line-height:1.2;font-weight:200;margin:22px 0}.before-intro .expand-detail p{color:#777269;font-size:13px;line-height:1.9;max-width:470px}.before-intro .expand-detail button{background:#292a28;color:white;border:0;border-radius:0;min-height:50px;width:280px;max-width:100%;justify-content:center;font-size:13px;padding:12px 25px;margin-top:27px}.before-intro .expand-detail button svg{display:none}.before-1{text-align:center}.before-1 .expand-detail p{margin:auto}.before-2 .expand-copy{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:center}.before-3{text-align:center;padding-bottom:35px}.before-3 .expand-heading h2{font-size:clamp(30px,4vw,55px)}.before-3 .expand-detail{display:flex;align-items:center;justify-content:space-between;gap:50px;text-align:left;margin-top:35px;padding-top:30px;border-top:1px solid #ddd8cf}.before-3 .expand-detail button{margin:0;flex-shrink:0}.before-4 .expand-copy{max-width:950px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:8%;border-left:1px solid #b5a58d;padding-left:45px}.before-4 .expand-heading h2{font-size:37px}.before-5 .expand-copy{max-width:750px;margin:auto;text-align:left}.before-5 .expand-copy h2{font-size:clamp(35px,4.6vw,64px)}.before-5 .expand-detail{padding-left:18%;margin-top:30px}.before-intro+ .expand-study .expand-shade{background:transparent}.before-intro+ .expand-study{height:165vh}.before-intro .expand-detail button:hover{background:#484840}.before-intro .expand-detail button:focus-visible{outline:2px solid #a18e73;outline-offset:5px}@media(max-width:767px){.before-intro{padding:65px 7% 35px}.before-intro .expand-copy h2{font-size:33px}.before-2 .expand-copy,.before-4 .expand-copy{display:block}.before-3 .expand-detail{display:block;text-align:center;margin-top:20px;padding-top:22px}.before-3 .expand-detail button{margin-top:23px}.before-4 .expand-copy{padding-left:22px}.before-5 .expand-detail{padding-left:0}.before-intro .expand-detail p{font-size:12px}.before-intro+ .expand-study{height:150svh}}@media(prefers-reduced-motion:reduce){.before-intro+ .expand-study{height:100svh}} .collection-intro{padding:100px 8% 65px;background:#fff;color:#292824;scroll-margin-top:100px}.collection-intro h2{font-family:Montserrat,Arial,sans-serif;font-weight:200;font-size:clamp(34px,4.2vw,62px);line-height:1.15;letter-spacing:-.045em;margin:23px 0}.ci-kicker,.ci-caption>span{font-size:9px;letter-spacing:.18em;color:#938a7c}.collection-intro p{font-size:13px;font-weight:300;line-height:1.9;color:#7a756c;max-width:460px}.ci-1{text-align:center}.ci-1 p{margin:25px auto 0;max-width:610px}.ci-2{display:grid;grid-template-columns:1.4fr 1fr;gap:9%;align-items:center}.ci-2 h2{margin-bottom:0}.ci-3{display:grid;grid-template-columns:90px 1fr;gap:35px}.ci-number{font-size:14px;color:#aaa08e;padding-top:7px;border-top:1px solid #c7bba7}.ci-3 h2{max-width:850px}.ci-3 p{margin-top:30px}.ci-4{text-align:center}.ci-4 h2{max-width:900px;margin:23px auto}.ci-rule{height:1px;width:65px;background:#b5a68c;margin:30px auto}.ci-4 p{margin:auto;max-width:590px}.ci-5{display:grid;grid-template-columns:1.4fr 1fr;gap:10%;align-items:end}.ci-caption{border-left:1px solid #ddd6ca;padding:15px 0 15px 35px}.ci-caption p{margin-top:20px}.render-action{position:absolute;bottom:13%;left:0;right:0;display:flex;justify-content:center;opacity:var(--reveal);visibility:hidden;transform:translateY(calc(14px * (1 - var(--reveal))));pointer-events:none}.text-visible .render-action{visibility:visible;pointer-events:auto}.render-action button{position:relative;width:220px;height:48px;border:0;border-radius:0;background:#222222b8;color:#fff;font:300 13px Montserrat,Arial,sans-serif;cursor:pointer;transition:background .3s}.render-action button:hover{background:#171717df}.moving-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.moving-frame rect{fill:none;stroke:#fff;stroke-width:1;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .7s ease}.render-action button:hover rect,.render-action button:focus-visible rect{stroke-dashoffset:0}.render-action button:focus-visible{outline:2px solid white;outline-offset:5px}.collection-intro+.expand-study .expand-shade{background:linear-gradient(transparent 60%,#0003)}@media(max-width:767px){.collection-intro{padding:65px 7% 35px}.collection-intro h2{font-size:35px}.collection-intro p{font-size:12px}.ci-2,.ci-5{display:block}.ci-2 p{margin-top:25px}.ci-3{grid-template-columns:30px 1fr;gap:20px}.ci-3 h2{font-size:32px}.ci-caption{margin-top:25px;padding:0 0 0 20px}.render-action button{width:200px;height:46px;font-size:12px}.render-action{bottom:13%}}@media(hover:none){.moving-frame rect{stroke-dashoffset:0;opacity:.65}}@media(prefers-reduced-motion:reduce){.render-action{opacity:1;visibility:visible;pointer-events:auto;transform:none}.moving-frame rect{transition:none;stroke-dashoffset:0}} .collection-intro.agreed-vision{display:block;text-align:left;padding:100px 8% 65px} .agreed-vision h2{max-width:1000px;margin:23px 0 28px;font-size:clamp(34px,4.2vw,62px);font-weight:200;line-height:1.15;letter-spacing:-.045em} .agreed-vision p{max-width:630px;margin:0;font-size:13px;line-height:1.9} @media(max-width:767px){.collection-intro.agreed-vision{padding:65px 7% 35px}.agreed-vision h2{font-size:35px}.agreed-vision p{font-size:12px}} .cinema{--surface:#f0eeea;--surface2:#e3e0da;--text:#302e2a;--muted:#777168;--shadow:rgba(33,29,24,.11);--ivory:var(--surface);--paper:var(--surface);--ink:var(--text);--sage:var(--muted);background:var(--surface);color:var(--text)} .cinema-2{--surface:#242524;--surface2:#1b1d1c;--text:#eeeae2;--muted:#b7b2a8;--shadow:#0006;--line:#ffffff25} .cinema-3{--surface:#d9d3c9;--surface2:#bdb7ad;--text:#302f2c;--muted:#6b665d;--shadow:#24201825} .cinema :is(.collection-intro,.residence-choice,.amenities-section,.payment-left,.payment-right,.enquiry,.developer,.location-c-left,footer,.footer){background:var(--surface)!important;color:var(--text)!important} .cinema :is(.payment-left,.payment-right,.location-c-left,.enquiry) :is(h2,p,label,span){color:var(--text)!important} .cinema :is(.collection-intro,.residence-choice,.amenities-section,.payment-section,.enquiry){background:linear-gradient(180deg,var(--surface2) -130px,var(--surface) 180px)!important;box-shadow:inset 0 45px 70px -70px var(--shadow)} .cinema .cinematic-intro{display:block;text-align:left;padding:110px 9% 70px;position:relative} .cinema .cinematic-intro h2{font-size:clamp(35px,4.2vw,62px);max-width:950px;color:var(--text);font-weight:200;line-height:1.16;margin:25px 0} .cinema .cinematic-intro p{max-width:630px;color:var(--muted);font-size:13px;line-height:1.9} .cinema .ci-kicker{color:var(--muted)} .cinema .expand-study{background:var(--surface)} .cinema .hero{box-shadow:0 25px 55px var(--shadow)} .cinema .choice-panel{box-shadow:0 18px 45px var(--shadow)} .cinema .choice-shade{background:linear-gradient(180deg,transparent 10%,#1117 65%,#111b)} .cinema .gallery-section:after{content:"";position:absolute;inset:0;box-shadow:inset 0 70px 85px -70px #000b,inset 0 -70px 85px -70px #000b;pointer-events:none} .cinema .payment-right{background:var(--surface2)!important;border:0} .cinema .payment-step{border-color:color-mix(in srgb,var(--text) 15%,transparent)} .cinema .amenity-card{border-color:color-mix(in srgb,var(--text) 16%,transparent)} .cinema .amenity-icon{color:var(--muted)} .cinema .amenity-name,.cinema .amenities-body{color:var(--muted)} .cinema .developer{box-shadow:0 0 55px var(--shadow)} .cinema .location-c-left{border:0!important;background:var(--surface2)!important} .cinema .enquiry :is(input,select){color:var(--text)!important;border-color:var(--muted)!important} .cinema .enquiry input::placeholder{color:var(--muted)!important} .cinema footer :is(p,a),.cinema .footer-disclaimer{color:var(--muted)!important} .cinema-2 .button-dark,.cinema-2 .payment-btn-dark{background:#e7e1d7;color:#292824} .cinema-2 .payment-btn-outline{color:#e7e1d7;border-color:#e7e1d7} .cinema-2 .enquiry button[type=submit]{background:#e7e1d7;color:#292824} .cinema-2 .dev-section-img,.cinema-2 .vision-img{filter:brightness(.9)} .cinema-3 .choice-grid{gap:30px;margin:0 6%} .cinema-3 .gallery-section{margin:0 3%;height:85vh;box-shadow:0 28px 65px var(--shadow)} @media(max-width:767px){.cinema .cinematic-intro{padding:70px 7% 40px}.cinema .cinematic-intro h2{font-size:35px}.cinema-3 .choice-grid{gap:20px}.cinema-3 .gallery-section{height:65svh;margin:0}} .cinema .agreed-vision h2{color:var(--text)}.cinema .agreed-vision p{color:var(--muted)} .cinema-1{--surface:#f5f0e8;--surface2:#eae1d5;--text:#342c25;--muted:#807366;--shadow:rgba(65,45,28,.10);--stone:#d8c9b7;--gold:#aa8c68;--gold-light:#d7c0a0;--line:#543c2424;--deep:#382d23} .cinema-1 .ci-kicker{color:#93806b} .cinema-1 .payment-right,.cinema-1 .location-c-left{background:#eee6da!important} .cinema-1 .amenity-card{border-color:#dcd0c1} .cinema-1 .button-dark,.cinema-1 .payment-btn-dark{background:#382d23;color:#fffaf3} .cinema-1 .render-action button{background:rgba(48,38,29,.75)} .cinema-1 .render-action button:hover{background:rgba(48,38,29,.93)} .cinema-1 footer{background:#382d25!important;color:#faf4ea!important;border-top:1px solid #655344;box-shadow:inset 0 25px 45px -35px #0008} .cinema-1 footer .logo-img-dark{filter:brightness(0) invert(1)!important;opacity:1!important} .cinema-1 footer :is(p,a,.footer-dev,.footer-copy,.footer-disclaimer,.footer-disclaimer strong){color:#eee3d5!important;opacity:1!important} .cinema-1 footer .footer-links a{color:#fff8ee!important} .cinema-1 footer a:hover{color:#fff!important;text-decoration:underline;text-underline-offset:5px} .cinema-1 footer a:focus-visible{outline:2px solid #fff8ee;outline-offset:5px} body.cinema.cinema-1 footer{background:#2a1e14!important;background-image:none!important;color:#fff7ec!important;border-top:1px solid #65503c;box-shadow:none!important} body.cinema.cinema-1 footer :is(.footer-dev,.footer-copy,.footer-disclaimer,.footer-links,a,p,strong){color:#f2e7d8!important;opacity:1!important} body.cinema.cinema-1 footer .footer-links a{color:#fffaf2!important} body.cinema.cinema-1 footer .logo-img-dark{filter:brightness(0) invert(1)!important;opacity:1!important} .brochure-grid{padding:100px 7%;background:var(--surface);scroll-margin-top:90px}.bg-heading{position:relative;margin-bottom:45px}.bg-heading>span{font-size:9px;letter-spacing:.2em;color:var(--muted)}.bg-heading h2{font-size:clamp(35px,4.4vw,62px);font-weight:200;line-height:1.15;letter-spacing:-.045em;margin-top:22px}.bg-heading p{position:absolute;right:0;bottom:0;font-size:12px;line-height:1.9;color:var(--muted)}.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px 22px}.bg-image{height:270px;overflow:hidden;box-shadow:0 12px 28px #3b2a1612}.bg-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.bg-card:hover img{transform:scale(1.025)}.bg-label{display:flex;gap:16px;align-items:baseline;padding:20px 0}.bg-label span{font-size:9px;color:#a19079}.bg-label h3{font-size:16px;font-weight:300;line-height:1.5;color:var(--text)}.bg-enquire{display:block;margin:45px auto 0;background:#342c25;color:white;border:0;width:240px;min-height:48px;font:300 11px Montserrat,Arial,sans-serif;cursor:pointer}.bg-2 .bg-grid{grid-template-columns:repeat(2,1fr);gap:28px}.bg-2 .bg-card{position:relative}.bg-2 .bg-image{height:360px}.bg-2 .bg-label{position:absolute;bottom:0;left:0;right:0;padding:55px 25px 25px;background:linear-gradient(transparent,#0009)}.bg-2 .bg-label h3,.bg-2 .bg-label span{color:#fff}.bg-3 .bg-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:280px;gap:18px}.bg-3 .bg-card{position:relative;overflow:hidden}.bg-3 .bg-card:first-child{grid-column:span 2}.bg-3 .bg-card:last-child{grid-column:span 2}.bg-3 .bg-image{height:100%}.bg-3 .bg-label{position:absolute;inset:auto 0 0;padding:40px 24px 22px;background:linear-gradient(transparent,#0009)}.bg-3 .bg-label h3,.bg-3 .bg-label span{color:white}.bg-4 .bg-grid{gap:35px}.bg-4 .bg-image{height:380px}.bg-4 .bg-card:nth-child(3n+2){transform:translateY(55px)}.bg-4 .bg-grid{padding-bottom:55px}.bg-enquire:focus-visible{outline:2px solid #a18e73;outline-offset:5px}@media(max-width:767px){.brochure-grid{padding:65px 6%}.bg-heading p{position:static;margin-top:22px}.bg-grid,.bg-2 .bg-grid,.bg-3 .bg-grid{grid-template-columns:1fr 1fr;gap:22px 12px}.bg-image,.bg-4 .bg-image{height:220px}.bg-label{gap:8px;padding:14px 0}.bg-label h3{font-size:13px}.bg-label span{font-size:8px}.bg-2 .bg-image{height:260px}.bg-2 .bg-label,.bg-3 .bg-label{padding:40px 14px 17px}.bg-3 .bg-grid{grid-auto-rows:250px}.bg-3 .bg-card:first-child,.bg-3 .bg-card:last-child{grid-column:span 2}.bg-4 .bg-card:nth-child(3n+2){transform:none}.bg-4 .bg-grid{padding-bottom:0}}@media(max-width:380px){.bg-grid,.bg-2 .bg-grid{grid-template-columns:1fr}.bg-image{height:260px}}@media(prefers-reduced-motion:reduce){.bg-image img{transition:none}.bg-card:hover img{transform:none}} .bg-4 .bg-heading p{position:static;max-width:620px;margin-top:20px;font-size:16px;line-height:1.8;color:var(--muted)} .bg-4 .bg-heading{margin-bottom:40px} @media(max-width:767px){.bg-4 .bg-heading p{font-size:15px;margin-top:16px}.bg-4 .bg-heading{margin-bottom:30px}} .modal-card.retreat-modal{display:grid;grid-template-columns:.85fr 1.15fr;width:min(1000px,94vw);max-width:1000px;padding:0!important;background:#f5f0e8;max-height:90svh;overflow:auto;color:#342c25}.retreat-visual{position:relative;min-height:580px}.retreat-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.retreat-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,#0008)}#enquiry-caption{position:absolute;bottom:30px;left:28px;right:20px;color:#fff;font-size:14px;z-index:1}.retreat-form-side{padding:38px 38px 28px}.retreat-form-side .modal-h{font-size:clamp(27px,3vw,39px);color:#342c25;font-weight:200;line-height:1.2}.retreat-form-side .modal-sub{font-size:12px;line-height:1.8;color:#756859;margin:20px 0}.retreat-form-side .modal-label{color:#786858;font-size:9px}.retreat-form-side .modal-input{background:transparent;color:#342c25;border-color:#cbbfae;font-size:13px}.retreat-form-side .modal-input::placeholder{color:#958777}.retreat-form-side .modal-field{margin-bottom:18px}.retreat-form-side .modal-btn{display:flex;justify-content:center;align-items:center;gap:20px;background:#342c25;color:#fff;font-size:10px;letter-spacing:.08em;min-height:50px}.retreat-form-side .modal-btn svg{width:22px;height:14px;stroke:currentColor;fill:none;stroke-width:1.4}.retreat-form-side .modal-note{color:#897b6b;font-size:10px;line-height:1.7}.retreat-form-side .modal-close{color:#756859;min-height:35px}.retreat-form-side .modal-card-top{gap:15px}@media(max-width:650px){.modal-card.retreat-modal{display:block;width:94vw}.retreat-visual{min-height:170px;height:170px}.retreat-form-side{padding:25px}.retreat-visual #enquiry-caption{bottom:20px}.retreat-form-side .modal-h{font-size:29px}} .ui-arrow{display:inline-block;width:22px;height:22px;flex:0 0 22px;vertical-align:middle}.arrow-left{transform:rotate(180deg)}.arrow-down{transform:rotate(90deg)}.arrow-diagonal{transform:rotate(-45deg)}.payment-btn-dark,.payment-btn-outline,.modal-btn{align-items:center;justify-content:center;gap:12px}.payment-btn-dark .ui-arrow,.payment-btn-outline .ui-arrow{margin-left:8px}.gallery-arrow{display:inline-flex;align-items:center;justify-content:center}.gallery-arrow .ui-arrow{width:24px;height:24px}.gallery-arrow::before,.gallery-arrow::after{content:none!important} body.cinema.cinema-1{--surface:#f6f2eb;--surface2:#eae3d8;--text:#3c3831;--muted:#70675d;--shadow:rgba(60,49,37,.12);--stone:#d8cbbb;--gold:#9a8061;--gold-light:#dac8b0;--line:#5b493329;--deep:#3c3831} .cinema-1 .ci-kicker{color:#7c6955}.cinema-1 .payment-right,.cinema-1 .location-c-left{background:#eae3d8!important} .cinema-1 .button-dark,.cinema-1 .payment-btn-dark,.bg-enquire,.retreat-form-side .modal-btn,.submit-button,.ri-float{background:#3c3831;color:#fffaf3} .cinema-1 .payment-btn-outline{color:#3c3831;border-color:#3c3831}.cinema-1 .render-action button{background:rgba(48,42,36,.8)} body.cinema.cinema-1 footer{background:#302a24!important;border-color:#736251}body.cinema.cinema-1 footer :is(.footer-dev,.footer-copy,.footer-disclaimer,.footer-links,a,p,strong){color:#f7eee3!important} .project-wordmark{display:block;font-size:24px;font-weight:300;letter-spacing:.16em;line-height:1.6}.developer-copy .project-wordmark{font-size:13px;letter-spacing:.12em} .modal-card.retreat-modal{background:#f6f2eb;color:#3c3831}.retreat-form-side .modal-h,.retreat-form-side .modal-input{color:#3c3831}.retreat-form-side :is(.modal-sub,.modal-label,.modal-note,.modal-close){color:#70675d}.retreat-form-side .modal-input{border-color:#bbae9c}.retreat-form-side .modal-input::placeholder{color:#81786d} .form-status:empty{display:none}.form-status{font-size:13px;line-height:1.65;color:#3c3831;margin-top:16px}.privacy-note a,.modal-note a{color:inherit;text-underline-offset:3px} body.cinema .hero{min-height:650px;height:95svh;max-height:1000px}body.cinema .hero h1{font-size:clamp(64px,10vw,150px);font-weight:200;letter-spacing:.16em;color:white}body.cinema .hero-line{color:white;font-weight:300;opacity:1;max-width:700px;line-height:1.7;margin:28px auto 30px;text-shadow:0 2px 14px #0008}.hero-shade{background:linear-gradient(180deg,#0005,#0003 35%,#0006)}body .choice-grid,body .choice-grid:has(.choice-panel:first-child:hover),body .choice-grid:has(.choice-panel:last-child:hover){grid-template-columns:repeat(3,minmax(0,1fr))}.choice-panel{min-height:600px}.choice-content{padding:30px}.choice-content h3{font-size:clamp(25px,2.3vw,36px)}.choice-panel .size{font-size:14px;line-height:1.8;letter-spacing:.015em}.hero .button-light{background:#302a24c9;color:white;border-color:#fff9}body.cinema .payment-step .payment-pct,body.cinema #ps3 .payment-pct{font-size:clamp(40px,3.5vw,56px)!important;font-weight:200!important;min-width:170px;white-space:nowrap}body.cinema .payment-pct span{font-size:.45em;font-weight:200}.payment-step{gap:24px}:focus-visible{outline:2px solid currentColor;outline-offset:5px}.bg-enquire{cursor:pointer}.hero-image{object-position:50% center}.form-status{max-width:48ch}.mobile-menu:not(.open){visibility:hidden}.developer-copy .project-wordmark{font-size:20px}.hero-content{width:100%} @media(max-width:900px){body .choice-grid,body .choice-grid:has(.choice-panel:first-child:hover),body .choice-grid:has(.choice-panel:last-child:hover){grid-template-columns:1fr}.choice-panel{min-height:530px}.choice-content h3{font-size:32px}.choice-content{padding:30px}.choice-panel .size{max-width:38ch}.hero-content{padding-left:7%;padding-right:7%}body.cinema .hero{height:90svh;min-height:600px}body.cinema .hero h1{font-size:clamp(48px,12vw,80px)}body.cinema .hero-line{font-size:16px}.hero-image{object-position:57% center}body.cinema .payment-step .payment-pct,body.cinema #ps3 .payment-pct{font-size:44px!important;min-width:150px}.payment-step{gap:18px}.footer-dev{line-height:1.8}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.reveal,.payment-step{opacity:1!important;transform:none!important}} 
.utility-page{margin:0;background:#f6f2eb;color:#3c3831;font-family:Montserrat,Arial,sans-serif;font-weight:300}.utility-page main{max-width:840px;margin:auto;padding:70px 7% 90px;min-height:78vh}.utility-page a{color:inherit;text-underline-offset:5px}.utility-page h1{font-size:clamp(32px,6vw,58px);font-weight:200;line-height:1.15;margin:50px 0 25px}.utility-page h2{font-size:20px;font-weight:400;margin:35px 0 12px}.utility-page p{font-size:14px;line-height:1.9}.utility-page footer{background:#302a24!important;color:#f5eee5!important;padding:35px 7%}.utility-page footer :is(p,a){color:#f5eee5!important}.utility-page .eyebrow{letter-spacing:.22em;font-size:12px}.utility-page .button{display:inline-block;background:#3c3831;color:#fffef4;padding:18px 28px;margin-top:25px;text-decoration:none;font-size:12px;letter-spacing:.13em}
@media(max-width:600px){.payment-step{flex-direction:column;align-items:flex-start;gap:20px;padding:32px 7%}body.cinema .payment-step .payment-pct,body.cinema #ps3 .payment-pct{font-size:44px!important}.payment-step-body{font-size:14px}}

/* High-contrast hero call to action. */
body.cinema .hero .button-light{background:#f5eee2;color:#302a24;border:1px solid #f5eee2;opacity:1;box-shadow:0 6px 22px #0003;font-weight:400}body.cinema .hero .button-light:hover{background:#fffaf2;color:#302a24;border-color:#fffaf2}body.cinema .hero .button-light:focus-visible{outline:2px solid #fff;outline-offset:5px}

/* The Wilds: four collections in the approved cinematic layout. */
body .choice-grid,body .choice-grid:has(.choice-panel:first-child:hover),body .choice-grid:has(.choice-panel:last-child:hover){grid-template-columns:repeat(2,minmax(0,1fr))}.handover-details{font-size:13px;line-height:1.8;margin-top:24px;max-width:48ch}.location-description{font-size:15px;line-height:1.8;max-width:35ch;margin:24px 0 30px}.hero-image{object-position:center}.choice-content h3{font-size:clamp(28px,2.7vw,40px)}body.cinema .hero h1{font-size:clamp(52px,8.5vw,132px);letter-spacing:.1em}.choice-panel{min-height:600px}
@media(max-width:767px){body .choice-grid,body .choice-grid:has(.choice-panel:first-child:hover),body .choice-grid:has(.choice-panel:last-child:hover){grid-template-columns:1fr}.choice-panel{min-height:520px}body.cinema .hero h1{font-size:clamp(38px,10vw,68px);letter-spacing:.08em}.hero-image{object-position:54% center}}

body.cinema .hero h1{font-size:clamp(40px,7vw,108px);letter-spacing:.06em}.payment-step{grid-template-columns:1fr}.payment-step-title{font-size:clamp(23px,2.3vw,34px);font-weight:200}.bg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:767px){body.cinema .hero h1{font-size:clamp(34px,9vw,60px)}.bg-grid{grid-template-columns:1fr}}