@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root { --ink:#e9ece6; --muted:#a3aaa3; --paper:#111715; --panel:#18211e; --line:rgba(235,240,231,.14); --sage:#9db59d; --sage-dark:#263b33; --clay:#d67c51; --gold:#dfbf7d; --night:#080d0c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--night); font-family:Manrope,Arial,sans-serif; line-height:1.5; overflow-x:hidden; }
body::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; opacity:.34; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:56px 56px; }
img { display:block; width:100%; } a { color:inherit; }
.site-header { position:fixed; z-index:20; top:16px; left:50%; width:min(1280px,calc(100% - 36px)); transform:translateX(-50%); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:12px 16px 12px 20px; color:#152018; background:rgba(255,255,253,.94); border:1px solid rgba(223,191,125,.45); border-radius:14px; backdrop-filter:blur(22px); box-shadow:0 12px 45px rgba(0,0,0,.22); }
.brand { display:inline-flex; grid-column:2; align-items:center; gap:11px; width:fit-content; text-decoration:none; }.brand-mark { display:grid; width:38px; height:38px; place-items:center; overflow:hidden; background:#fff; border:1px solid rgba(189,145,72,.82); border-radius:50%; box-shadow:0 0 0 3px rgba(223,191,125,.18); }.brand-mark img { width:100%; height:100%; max-width:none; object-fit:contain; object-position:center; }.brand strong,.brand small { display:block; }.brand strong { font-size:.88rem; letter-spacing:.02em; }.brand small { color:#687167; font-family:DM Mono,monospace; font-size:.61rem; letter-spacing:.06em; text-transform:uppercase; }
.nav-links { display:flex; grid-column:1; grid-row:1; gap:28px; color:#4e5a50; font-family:DM Mono,monospace; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; }.nav-links a { text-decoration:none; transition:color .25s; }.nav-links a:hover { color:#8d5d35; }.header-call,.button,.floating-call,.location-card a { text-decoration:none; }.header-call { grid-column:3; grid-row:1; justify-self:end; padding:10px 15px; color:#121612; background:var(--gold); border-radius:8px; font-size:.77rem; font-weight:800; }
.hero { position:relative; min-height:94svh; display:grid; align-items:end; overflow:hidden; isolation:isolate; color:#fff; background:var(--night); }.hero-slides { position:absolute; z-index:-3; inset:0; overflow:hidden; background:#111; }.hero-image,.hero-scrim,.hero-grid { position:absolute; inset:0; height:100%; }.hero-image { opacity:0; object-fit:cover; object-position:center; transform:scale(1); transition:opacity 1.1s ease,transform .45s ease-out; filter:saturate(.96) contrast(1.02); }.hero-image.is-active { opacity:1; }.hero-scrim { z-index:-2; background:linear-gradient(90deg,rgba(5,10,9,.84),rgba(5,10,9,.31) 55%,rgba(5,10,9,.08)),linear-gradient(0deg,rgba(5,10,9,.82),transparent 56%); }.hero-grid { z-index:-1; opacity:.08; background:linear-gradient(90deg,transparent 0 49.7%,rgba(223,191,125,.35) 49.8% 50.1%,transparent 50.2%),linear-gradient(0deg,transparent 0 46%,rgba(223,191,125,.35) 46.1% 46.25%,transparent 46.35%); }.hero-orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(2px); pointer-events:none; animation:float 8s ease-in-out infinite; opacity:.42; }.hero-orb-one { top:14%; right:11%; width:clamp(180px,25vw,370px); aspect-ratio:1; background:radial-gradient(circle at 35% 30%,rgba(255,232,177,.75),rgba(223,191,125,.2) 28%,transparent 68%); }.hero-orb-two { right:32%; bottom:10%; width:170px; aspect-ratio:1; background:radial-gradient(circle,rgba(85,147,125,.28),transparent 66%); animation-delay:-4s; }
.hero-content { position:relative; width:min(780px,calc(100% - 36px)); padding:180px 0 172px clamp(18px,7vw,96px); }.eyebrow,.section-kicker { margin:0 0 16px; color:var(--gold); font-family:DM Mono,monospace; font-size:.72rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; } h1,h2 { font-family:'Playfair Display',Georgia,serif; font-weight:500; } h1,h2,h3,p { margin-top:0; } h1 { max-width:800px; margin-bottom:20px; font-size:clamp(4.5rem,10vw,9.8rem); line-height:.82; letter-spacing:-.065em; text-shadow:0 20px 45px rgba(0,0,0,.25); } h2 { margin-bottom:20px; font-size:clamp(2.35rem,4.5vw,4.7rem); line-height:.98; letter-spacing:-.045em; } h3 { margin-bottom:12px; font-size:1.08rem; }.hero-copy { width:min(570px,100%); margin-bottom:29px; color:#d7dcd4; font-size:clamp(1rem,1.7vw,1.2rem); }.benefit-callout { display:grid; gap:4px; width:min(510px,100%); margin-bottom:23px; padding:15px 17px; background:rgba(18,29,25,.68); border:1px solid rgba(223,191,125,.52); border-left:3px solid var(--gold); border-radius:4px; backdrop-filter:blur(12px); box-shadow:0 18px 45px rgba(0,0,0,.2); }.benefit-callout span { color:#d9c390; font-size:.84rem; font-weight:700; }.benefit-callout strong { font-size:clamp(1.05rem,2vw,1.38rem); line-height:1.2; }.hero-actions { display:flex; flex-wrap:wrap; gap:11px; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:49px; padding:13px 19px; border:1px solid transparent; border-radius:6px; cursor:pointer; font:800 .86rem Manrope,Arial,sans-serif; transition:transform .25s,box-shadow .25s,background .25s; }.button:hover { transform:translateY(-3px); }.button.primary { color:#171812; background:var(--gold); box-shadow:0 8px 22px rgba(223,191,125,.18); }.button.secondary { color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.07); }.explore-link { display:flex; gap:14px; width:fit-content; margin-top:42px; align-items:center; color:#e3e4dd; font-family:DM Mono,monospace; font-size:.7rem; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }.explore-link i { display:grid; width:28px; height:28px; place-items:center; border:1px solid rgba(255,255,255,.5); border-radius:50%; font-size:1rem; font-style:normal; animation:bob 2s infinite; }
.hero-strip { position:absolute; left:clamp(18px,7vw,96px); right:clamp(18px,7vw,96px); bottom:32px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; overflow:hidden; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); border-radius:10px; backdrop-filter:blur(12px); }.hero-strip span { display:grid; gap:2px; min-height:83px; padding:16px 18px; background:rgba(8,14,12,.59); color:#d6dbd2; font-size:.78rem; }.hero-strip strong { color:#fff; font-family:'Playfair Display',serif; font-size:1.55rem; font-weight:500; }
.lead-band,.location,.enquiry { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,7vw,112px); padding:clamp(82px,11vw,150px) clamp(18px,7vw,96px); }.lead-band { background:linear-gradient(120deg,#18221f,#0d1210); }.lead-band p,.story-copy p,.location p,.enquiry p,.residence-band p,.split-gallery p { color:var(--muted); font-size:1.02rem; }.lead-band>p { max-width:560px; align-self:center; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding:0 clamp(18px,7vw,96px) clamp(80px,10vw,130px); background:#0d1210; }.feature-grid article { min-height:290px; padding:clamp(28px,4vw,52px); background:linear-gradient(145deg,#19231f,#111916); border:1px solid var(--line); transition:transform .18s ease,box-shadow .25s,border-color .25s; transform-style:preserve-3d; }.feature-grid article:hover { border-color:rgba(223,191,125,.55); box-shadow:0 30px 50px rgba(0,0,0,.3); }.feature-grid span { display:block; margin-bottom:38px; color:var(--gold); font-family:DM Mono,monospace; font-size:.75rem; }.feature-grid p { color:var(--muted); }
.dimensions { padding:clamp(82px,11vw,150px) clamp(18px,7vw,96px); background:#e5e4dc; color:#172019; }.section-heading { width:min(800px,100%); margin-bottom:40px; }.dimension-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; perspective:1000px; }.dimension-grid article { display:grid; align-content:space-between; gap:20px; min-height:190px; padding:24px 18px; background:#f5f4ed; border:1px solid #c7c9be; box-shadow:0 10px 0 #c9cac1,0 23px 30px rgba(16,23,19,.12); transition:transform .18s ease,box-shadow .25s; }.dimension-grid article:hover { box-shadow:0 16px 0 #c9cac1,0 36px 42px rgba(16,23,19,.2); }.dimension-grid span { color:#9b593f; font-family:DM Mono,monospace; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }.dimension-grid strong { font-family:'Playfair Display',serif; font-size:clamp(1.22rem,2vw,1.62rem); font-weight:500; line-height:1.12; }
.image-story,.residence-band { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:clamp(28px,6vw,86px); padding:clamp(78px,10vw,136px) clamp(18px,7vw,96px); background:#12201b; }.image-story img,.split-gallery img,.residence-band img { aspect-ratio:16/11; object-fit:cover; border:1px solid rgba(255,255,255,.15); border-radius:4px; box-shadow:18px 20px 0 rgba(223,191,125,.13),0 30px 60px rgba(0,0,0,.33); }.image-story img { transform:perspective(1000px) rotateY(-5deg) rotateX(2deg); }.amenities { padding:clamp(82px,11vw,150px) clamp(18px,7vw,96px); background:#0a0f0d; }.amenity-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:clamp(28px,5vw,68px); align-items:start; }.amenity-image-frame { position:sticky; top:110px; overflow:hidden; aspect-ratio:16/11; border:1px solid rgba(255,255,255,.15); border-radius:4px; box-shadow:18px 20px 0 rgba(223,191,125,.13),0 30px 60px rgba(0,0,0,.33); }.amenity-image-frame img { width:100%; height:100%; object-fit:cover; object-position:center top; transform:scale(1.42); transform-origin:center top; }.amenity-list { display:grid; gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:5px; }.amenity-list div { display:grid; gap:6px; padding:21px; background:#151e1a; border-left:2px solid transparent; transition:background .25s,border-color .25s,padding .25s; }.amenity-list div:hover { padding-left:28px; background:#1b2822; border-left-color:var(--gold); }.amenity-list strong { font-size:1rem; }.amenity-list span { color:var(--muted); font-size:.9rem; }.amenity-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,36px); margin-top:clamp(32px,5vw,64px); }.amenity-gallery figure { position:relative; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:5px; }.amenity-gallery img { aspect-ratio:16/8; object-fit:cover; transition:transform .6s ease; }.amenity-gallery figure:hover img { transform:scale(1.04); }.amenity-gallery figcaption { position:absolute; right:0; bottom:0; left:0; display:grid; gap:3px; padding:34px 20px 18px; background:linear-gradient(transparent,rgba(5,10,8,.9)); }.amenity-gallery span { color:var(--gold); font-family:DM Mono,monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }.amenity-gallery strong { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:500; }
.split-gallery { display:grid; grid-template-columns:1fr .8fr 1fr; gap:clamp(20px,4vw,48px); align-items:center; padding:clamp(78px,10vw,136px) clamp(18px,7vw,96px); background:radial-gradient(circle at 50% 48%,#34483e,#17221e 50%,#0b100e); }.split-gallery img:first-child { transform:perspective(1000px) rotateY(7deg) rotateX(2deg); }.split-gallery img:last-child { transform:perspective(1000px) rotateY(-7deg) rotateX(2deg); }.residence-band { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); background:#d8bf8d; color:#192019; }.residence-band p { color:#465047; }.residence-band .section-kicker { color:#85523d; }.residence-band img { box-shadow:-18px 20px 0 rgba(30,46,38,.18),0 30px 60px rgba(0,0,0,.24); }
.location { background:#111815; }.location-card { display:grid; align-content:center; gap:17px; min-height:350px; color:#fff; background:#1b2822; border:1px solid var(--line); border-radius:5px; box-shadow:0 30px 60px rgba(0,0,0,.24); }.location-card span { color:var(--gold); font-family:DM Mono,monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }.location-card strong { font-family:'Playfair Display',serif; font-size:clamp(1.35rem,2vw,2rem); font-weight:500; line-height:1.2; }.location-card a { width:fit-content; color:#fff; border-bottom:1px solid var(--gold); font-size:.83rem; font-weight:800; }.map-card { align-content:start; padding:0; overflow:hidden; }.map-card img { aspect-ratio:16/10; object-fit:cover; opacity:.9; }.map-card span,.map-card strong,.map-card a { margin-inline:clamp(22px,4vw,40px); }.map-card a { margin-bottom:clamp(22px,4vw,40px); }.proximity-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:28px; overflow:hidden; background:var(--line); border:1px solid var(--line); }.proximity-grid article { display:grid; gap:8px; padding:18px; background:#17211d; }.proximity-grid span { color:var(--gold); font-family:DM Mono,monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }.proximity-grid strong { line-height:1.2; }.proximity-grid small { color:var(--muted); font-size:.83rem; line-height:1.4; }
.enquiry { align-items:start; background:#e5e4dc; color:#172019; }.enquiry p { color:#566057; }.enquiry-form { display:grid; gap:16px; padding:clamp(22px,4vw,42px); background:#f5f4ed; border:1px solid #c6c9bc; border-radius:5px; box-shadow:13px 14px 0 #bfbdac,0 28px 40px rgba(20,27,23,.17); } label { display:grid; gap:8px; color:#273027; font-size:.86rem; font-weight:800; } input,select { width:100%; min-height:49px; padding:12px 13px; color:#172019; background:#fffefa; border:1px solid #c5c9bc; border-radius:3px; font:inherit; }.button.full { width:100%; }.form-note { margin:0; color:var(--muted); font-size:.82rem; }.site-footer { display:flex; justify-content:space-between; gap:24px; padding:29px clamp(18px,7vw,96px) 92px; color:#d8dfd4; background:#080d0c; }.site-footer p { max-width:840px; margin:0; color:#88938a; font-size:.8rem; }.site-footer a { color:var(--gold); font-family:DM Mono,monospace; font-size:.8rem; font-weight:500; text-decoration:none; }.floating-call { position:fixed; z-index:30; right:18px; bottom:18px; display:none; padding:14px 18px; color:#111611; background:var(--gold); border-radius:5px; box-shadow:0 16px 36px rgba(0,0,0,.3); font-weight:900; }
.popup-open { overflow:hidden; }.enquiry-popup { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:22px; visibility:hidden; opacity:0; transition:opacity .3s ease,visibility .3s; }.enquiry-popup.is-open { visibility:visible; opacity:1; }.popup-backdrop { position:absolute; inset:0; background:rgba(5,9,7,.76); backdrop-filter:blur(7px); }.popup-panel { position:relative; display:grid; grid-template-columns:minmax(280px,.9fr) minmax(380px,1fr); width:min(960px,100%); max-height:min(660px,calc(100svh - 44px)); overflow:auto; background:#fbfaf4; color:#172019; border-radius:14px; box-shadow:0 35px 90px rgba(0,0,0,.52); transform:translateY(20px) scale(.97); transition:transform .35s cubic-bezier(.2,.8,.2,1); }.is-open .popup-panel { transform:none; }.popup-close { position:absolute; z-index:2; top:18px; right:18px; display:grid; width:42px; height:42px; place-items:center; padding:0; color:#182019; background:#e6bd62; border:0; border-radius:50%; cursor:pointer; font-size:2rem; line-height:1; transition:transform .2s; }.popup-close:hover { transform:rotate(90deg); }.popup-visual { position:relative; min-height:560px; overflow:hidden; color:#fff; }.popup-visual img { width:100%; height:100%; object-fit:cover; object-position:center; }.popup-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,9,7,.85),transparent 52%); }.popup-visual div { position:absolute; z-index:1; left:32px; bottom:30px; display:grid; gap:7px; }.popup-visual span { color:#ead190; font-family:DM Mono,monospace; font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; }.popup-visual strong { font-family:'Playfair Display',serif; font-size:1.65rem; font-weight:500; line-height:1.1; }.popup-form { display:grid; align-content:center; gap:13px; padding:42px clamp(30px,4vw,52px); }.popup-brand { display:flex; align-items:center; gap:10px; margin-bottom:7px; font-family:'Playfair Display',serif; font-size:.85rem; line-height:.9; letter-spacing:.08em; }.popup-brand img { width:44px; height:44px; object-fit:contain; border:1px solid #d0b06d; border-radius:50%; }.popup-brand em { font-size:1.22rem; font-style:normal; letter-spacing:-.04em; }.popup-form .section-kicker { margin:0; color:#9a6b35; }.popup-form h2 { margin:0; font-size:clamp(2rem,3vw,2.85rem); }.popup-form > p:not(.section-kicker) { margin:0 0 7px; color:#667168; font-size:.88rem; }.popup-form label { gap:5px; font-size:.72rem; }.popup-form label span { color:#59645b; }.popup-form input { min-height:46px; background:#fff; }.popup-submit { display:flex; justify-content:center; align-items:center; gap:14px; min-height:51px; margin-top:4px; color:#fff; background:#18241e; border:0; border-radius:4px; cursor:pointer; font:800 .9rem Manrope,Arial,sans-serif; transition:background .2s,transform .2s; }.popup-submit:hover { background:#2b4034; transform:translateY(-2px); }.popup-submit:disabled { opacity:.8; cursor:default; }.popup-form small { color:#768077; font-size:.68rem; line-height:1.45; }
[data-reveal] { opacity:0; transform:translateY(36px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1); } [data-reveal].is-visible { opacity:1; transform:none; } .feature-grid article,.amenity-gallery figure { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s; } .feature-grid.is-visible article,.amenity-gallery.is-visible figure { opacity:1; transform:none; } .feature-grid.is-visible article:nth-child(2),.amenity-gallery.is-visible figure:nth-child(2) { transition-delay:.14s; } .feature-grid.is-visible article:nth-child(3) { transition-delay:.28s; } @keyframes float { 50% { transform:translate3d(22px,-20px,0) scale(1.08); } } @keyframes bob { 50% { transform:translateY(5px); } }
@media (max-width:960px) { .site-header { grid-template-columns:1fr auto 1fr; }.brand { grid-column:2; justify-self:center; }.nav-links { display:none; }.header-call { display:inline-flex; grid-column:3; justify-self:end; }.hero-content { padding-bottom:300px; }.hero-strip,.lead-band,.location,.enquiry,.image-story,.residence-band,.amenity-layout,.split-gallery,.dimension-grid { grid-template-columns:1fr; }.hero-strip { left:18px; right:18px; grid-template-columns:repeat(2,1fr); }.feature-grid { grid-template-columns:1fr; padding-bottom:70px; }.feature-grid article { min-height:auto; }.dimension-grid { gap:10px; }.dimension-grid article { min-height:125px; }.amenity-image-frame { position:static; }.image-story img,.split-gallery img { transform:none!important; } }
@media (max-width:720px) { .enquiry-popup { padding:12px; }.popup-panel { grid-template-columns:1fr; max-height:calc(100svh - 24px); }.popup-visual { min-height:185px; }.popup-visual div { left:22px; bottom:20px; }.popup-visual strong { font-size:1.3rem; }.popup-form { padding:28px 24px; }.popup-form h2 { font-size:2rem; }.popup-close { top:12px; right:12px; width:38px; height:38px; font-size:1.7rem; } }
@media (max-width:640px) { .site-header { top:10px; width:calc(100% - 22px); padding:10px 12px; }.brand-mark { width:34px; height:34px; }.brand strong { font-size:.78rem; }.brand small { display:none; }.header-call { display:inline-flex; padding:8px 10px; font-size:.68rem; }.hero { min-height:100svh; }.hero-image { object-position:58% center; }.hero-content { width:100%; padding:135px 18px 282px; } h1 { font-size:clamp(3.7rem,18vw,5.2rem); }.hero-strip { bottom:14px; }.hero-strip span { min-height:72px; padding:12px; font-size:.7rem; }.hero-strip strong { font-size:1.2rem; }.lead-band,.location,.enquiry,.image-story,.residence-band,.amenities,.split-gallery,.dimensions { padding:64px 18px; }.proximity-grid,.amenity-gallery { grid-template-columns:1fr; }.site-footer { display:grid; padding:28px 18px 88px; }.floating-call { display:inline-flex; left:18px; justify-content:center; }.explore-link { margin-top:28px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }