:root { --ink:#10263c; --navy:#071829; --paper:#f6f4ef; --gold:#c79542; --line:rgba(16,38,60,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.65; }
.site-header { height:79px; padding:0 clamp(22px,5vw,80px); display:flex; align-items:center; justify-content:space-between; background:#fff; position:sticky; top:0; z-index:30; box-shadow:0 1px 0 rgba(16,38,60,.08); }
.brand { display:flex; align-items:center; height:52px; }
.brand img { display:block; width:82px; max-height:50px; object-fit:contain; object-position:left center; }
.nav-links { display:flex; align-items:center; gap:25px; }
.nav-links a { font-size:11px; letter-spacing:.07em; color:var(--ink); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--gold); }
.nav-links .nav-cta { color:#fff; background:var(--ink); padding:12px 15px; margin-left:4px; }
.nav-cta span { color:var(--gold); font-size:16px; margin-left:9px; }
.menu-toggle { display:none; }
.hero { height:min(calc(100vh - 79px),960px); min-height:490px; background:#071829; overflow:hidden; position:relative; }
.hero img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.flower-drift { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }.flower-drift img { position:absolute; width:360px; height:auto; object-fit:contain; opacity:.68; filter:drop-shadow(0 8px 10px rgba(0,0,0,.13)); animation:petal-drift 15s linear infinite; }.flower-drift img:nth-child(1) { left:-10%; top:-5%; animation-duration:18s; }.flower-drift img:nth-child(2) { left:40%; top:-58%; width:280px; opacity:.43; animation-delay:-6s; animation-duration:21s; }.flower-drift img:nth-child(3) { right:-15%; top:-30%; width:230px; opacity:.5; animation-delay:-11s; animation-duration:17s; }.hero > img:first-child { position:relative; z-index:0; }.flower-drift img { width:360px; height:auto; } @keyframes petal-drift { 0% { transform:translate3d(0,-5%,0) rotate(0deg); } 50% { transform:translate3d(24vw,46vh,0) rotate(125deg); } 100% { transform:translate3d(48vw,110vh,0) rotate(250deg); } }
.section { padding:clamp(64px,7vw,108px) clamp(22px,8vw,126px); }
.eyebrow { text-transform:uppercase; color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.2em; }
.display { font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(43px,5.4vw,82px); line-height:.98; letter-spacing:-.025em; margin:20px 0 0; }
.display em { font-weight:400; color:var(--gold); }
.intro { background:#f6f4ef; padding-bottom:clamp(58px,7vw,100px); }
.intro-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:10%; align-items:end; }
.intro-copy { max-width:440px; margin-bottom:5px; }
.intro-copy p { margin:0 0 17px; }
.text-link { display:inline-flex; align-items:center; gap:13px; color:var(--ink); text-decoration:none; margin-top:15px; font-weight:600; font-size:12px; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--gold); padding-bottom:5px; }
.text-link span { color:var(--gold); font-size:19px; }
.stats { border-top:1px solid var(--line); margin-top:66px; display:grid; grid-template-columns:repeat(4,1fr); }
.stats div { padding:23px 20px 0; border-right:1px solid var(--line); }.stats div:first-child { padding-left:0; }.stats div:last-child { border:0; }
.stats strong { display:block; font-family:'DM Serif Display',serif; font-weight:400; font-size:34px; line-height:1.1; }.stats span { font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:#66717b; }
.story-section { display:grid; grid-template-columns:1.15fr .85fr; gap:7%; padding-top:0; padding-bottom:0; background:#e9e5dd; align-items:center; }
.story-reverse { grid-template-columns:.85fr 1.15fr; background:#fff; }.story-reverse .story-media { order:2; }
.story-media { height:min(48vw,690px); position:relative; overflow:hidden; }
.story-media img,.location-visual img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s cubic-bezier(.2,.7,.2,1); }.story-media:hover img,.location-visual:hover img { transform:scale(1.04); }
.image-caption { position:absolute; bottom:19px; left:20px; padding:7px 10px; background:#ffffffdc; color:var(--ink); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.story-content { padding-block:55px; }.story-content p { max-width:445px; margin:25px 0 0; }
.amenities { background:var(--navy); color:#fff; }.amenities-head { display:grid; grid-template-columns:1.1fr 1fr; gap:7%; align-items:end; }.amenities-head .eyebrow { grid-column:1/-1; }.amenities-head .display { margin-top:0; }.amenities-head>p { max-width:345px; color:#cbd3da; margin:0 0 5px; }
.amenity-carousel { height:min(54vw,720px); margin-top:48px; position:relative; overflow:hidden; background:#0a1b2a; }.amenity-slides,.amenity-slide { height:100%; }.amenity-slide { position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity .7s ease,visibility .7s; }.amenity-slide.active { opacity:1; visibility:visible; }.amenity-slide img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.67); transform:scale(1.03); transition:transform 5.5s ease; }.amenity-slide.active img { transform:scale(1); }.amenity-slide figcaption { position:absolute; left:clamp(25px,5vw,74px); bottom:clamp(88px,9vw,128px); }.amenity-slide figcaption span { text-transform:uppercase; font-size:10px; letter-spacing:.2em; }.amenity-slide h3 { font-family:'DM Serif Display',serif; font-size:clamp(40px,5vw,76px); line-height:.95; font-weight:400; margin:13px 0; }.carousel-ui { position:absolute; left:clamp(25px,5vw,74px); right:clamp(25px,5vw,74px); bottom:28px; display:flex; align-items:center; justify-content:space-between; }.carousel-controls { display:flex; align-items:center; gap:13px; }.carousel-button { display:grid; place-items:center; width:43px; height:43px; padding:0; border:1px solid rgba(255,255,255,.6); border-radius:50%; color:#fff; background:transparent; font-size:20px; cursor:pointer; transition:background .2s,color .2s; }.carousel-button:hover { background:#fff; color:var(--ink); }.carousel-count { font-size:10px; letter-spacing:.16em; font-weight:700; }.carousel-count i { display:inline-block; width:22px; height:1px; background:var(--gold); margin:0 6px 3px; }.carousel-cta { background:var(--gold); color:var(--navy); text-decoration:none; text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.13em; padding:14px 17px; }.carousel-cta span { font-size:16px; margin-left:10px; }.amenity-list { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.25); margin-top:35px; }.amenity-list span { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.25); font-size:12px; }
.residences { background:#f6f4ef; }.residences-title { display:flex; justify-content:space-between; align-items:end; }.residences-title p { max-width:345px; margin:0; }.plan-grid { display:grid; grid-template-columns:1fr 1fr; margin-top:50px; }.plan-card { min-height:440px; background:#e5e0d6; padding:31px 34px; display:flex; flex-direction:column; justify-content:space-between; }.plan-card.dark { background:var(--ink); color:#fff; }.plan-number { font-family:'DM Serif Display',serif; color:var(--gold); font-size:17px; }.plan-type { text-transform:uppercase; color:var(--gold); font-size:11px; font-weight:700; letter-spacing:.18em; }.plan-card h3 { font-family:'DM Serif Display',serif; font-size:43px; line-height:1; margin:15px 0; }.plan-card p { font-size:13px; line-height:1.65; }.protected-plan { display:none; position:relative; overflow:hidden; height:245px; margin:22px -12px; background:#fff; }.protected-plan img { width:100%; height:100%; display:block; object-fit:cover; filter:blur(10px); transform:scale(1.08); transition:filter .5s,transform .5s; }.protected-plan::after { content:''; position:absolute; inset:0; background:rgba(7,24,41,.22); }.protected-plan button { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; background:var(--navy); color:#fff; border:1px solid var(--gold); padding:12px 15px; text-transform:uppercase; letter-spacing:.1em; font-size:9px; font-weight:700; cursor:pointer; }.protected-plan button span { color:var(--gold); font-size:15px; margin-left:8px; }.plans-unlocked .protected-plan img { filter:none; transform:none; }.plans-unlocked .protected-plan::after,.plans-unlocked .protected-plan button { display:none; }.plan-card footer { display:flex; justify-content:space-between; gap:15px; align-items:end; }.plan-card footer strong { font-family:'DM Serif Display',serif; font-size:20px; font-weight:400; }.plan-link { padding:0; background:none; border:0; border-bottom:1px solid var(--gold); color:inherit; font-size:10px; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }.plan-link span { color:var(--gold); font-size:15px; }.price-note { text-align:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin:26px 0 0; }
.location { display:grid; grid-template-columns:1.1fr .9fr; gap:7%; padding-top:0; padding-bottom:0; background:#fff; align-items:stretch; }.location-visual { min-height:650px; overflow:hidden; }.location-copy { align-self:center; padding-block:60px; }.location-copy>p { margin:28px 0 0; }.nearby { margin-top:45px; border-top:1px solid var(--line); padding-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }.nearby h4 { font-size:11px; text-transform:uppercase; letter-spacing:.13em; margin:0 0 10px; }.nearby p { font-size:12px; margin:0; line-height:1.85; }
.status { background:var(--gold); color:var(--navy); min-height:71px; padding:18px 7%; display:flex; align-items:center; justify-content:center; gap:25px; text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:700; }.status i { display:block; width:5px; height:5px; background:var(--navy); transform:rotate(45deg); }
.footer { background:var(--navy); color:#fff; padding:clamp(75px,10vw,145px) clamp(22px,8vw,126px) 22px; }.footer-inner { text-align:center; }.footer .display { font-size:clamp(48px,6vw,91px); }.footer-inner>p { color:#ced4da; margin:26px 0; }.footer-actions { display:flex; justify-content:center; gap:13px; align-items:center; margin-top:34px; }.phone { color:#fff; text-decoration:none; padding:14px 17px; font-size:14px; letter-spacing:.06em; }.button { background:var(--gold); color:var(--navy); text-decoration:none; padding:14px 19px; text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.13em; }.button span { font-size:16px; margin-left:14px; }.footer-bottom { border-top:1px solid rgba(255,255,255,.2); margin-top:100px; padding-top:17px; color:#aeb9c3; display:flex; justify-content:space-between; gap:40px; font-size:9px; line-height:1.55; }.footer-bottom span:last-child { max-width:560px; text-align:right; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .8s ease,transform .8s ease; }.reveal.in-view { opacity:1; transform:none; }
.floating-enquiry { position:fixed; right:24px; bottom:26px; z-index:20; background:var(--gold); color:var(--navy); border:0; box-shadow:0 9px 30px #07182945; padding:14px 17px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; cursor:pointer; }.floating-enquiry span { font-size:17px; margin-left:8px; }.modal { display:none; position:fixed; z-index:50; inset:0; place-items:center; padding:20px; }.modal.open { display:grid; }.modal-backdrop { position:absolute; inset:0; background:#071829b8; backdrop-filter:blur(4px); }.enquiry-dialog { position:relative; z-index:1; width:min(100%,460px); padding:42px; background:var(--paper); box-shadow:0 20px 70px #0006; }.modal-close,.chat-close { position:absolute; top:14px; right:16px; border:0; background:none; color:var(--ink); font-size:29px; line-height:1; cursor:pointer; }.enquiry-dialog h2 { font-family:'DM Serif Display',serif; font-weight:400; font-size:49px; line-height:.96; margin:17px 0; }.enquiry-dialog h2 em { color:var(--gold); }.enquiry-dialog>p { font-size:13px; margin-bottom:24px; }.enquiry-form { display:grid; gap:14px; }.enquiry-form label { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.enquiry-form input { display:block; width:100%; margin-top:6px; padding:13px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:15px 'DM Sans',sans-serif; outline:0; }.enquiry-form input:focus { border-color:var(--gold); }.enquiry-form button { margin-top:6px; border:0; background:var(--ink); color:#fff; padding:15px; text-transform:uppercase; font-size:10px; letter-spacing:.13em; font-weight:700; cursor:pointer; }.enquiry-form button span { color:var(--gold); font-size:16px; margin-left:10px; }.enquiry-form small { color:#66717b; font-size:9px; line-height:1.5; }
.chat-widget { position:fixed; z-index:21; right:24px; bottom:84px; }.chat-toggle { border:0; padding:5px 14px 5px 5px; display:flex; align-items:center; gap:8px; border-radius:30px; color:#fff; background:var(--navy); box-shadow:0 9px 28px #07182945; font:600 11px 'DM Sans',sans-serif; cursor:pointer; }.chat-toggle img { width:34px; height:34px; border-radius:50%; object-fit:cover; }.chat-panel { display:none; width:330px; margin-bottom:12px; overflow:hidden; background:#fff; border-radius:5px; box-shadow:0 14px 45px #07182938; }.chat-panel.open { display:block; }.chat-panel header { background:var(--navy); color:#fff; padding:17px 19px; display:flex; align-items:center; gap:10px; }.chat-panel header img { width:43px; height:43px; border-radius:50%; object-fit:cover; }.chat-panel header strong,.chat-panel header span { display:block; }.chat-panel header strong { font-size:14px; }.chat-panel header span { color:#d1d9df; font-size:10px; }.chat-close { color:#fff; z-index:1; font-size:24px; }.chat-body { padding:16px; }.chat-bubble { margin:0; padding:11px 13px; background:#eef0f1; border-radius:0 12px 12px; font-size:12px; line-height:1.5; }.quick-questions { display:grid; gap:8px; margin-top:13px; }.quick-questions button { border:1px solid #d7dce0; background:#fff; color:var(--ink); padding:9px 10px; border-radius:4px; text-align:left; font:11px 'DM Sans',sans-serif; cursor:pointer; }.quick-questions button:hover { border-color:var(--gold); }.chat-reply { min-height:0; margin:12px 0 0; color:#53616b; font-size:11px; line-height:1.5; }
@media(max-width:800px) { .site-header{height:68px}.nav-links{position:absolute;display:none;flex-direction:column;align-items:stretch;left:0;right:0;top:68px;padding:22px;background:#fff;box-shadow:0 12px 20px #10263c20}.nav-links.open{display:flex}.menu-toggle{display:flex;border:0;background:transparent;flex-direction:column;gap:5px}.menu-toggle i{display:block;width:24px;height:1px;background:var(--ink)}.hero{height:auto;min-height:0}.hero img{height:auto;min-height:0;object-fit:contain}.section{padding:60px 22px}.intro-grid,.story-section,.location{display:flex;flex-direction:column;gap:0}.display{font-size:48px}.stats{margin-top:45px;grid-template-columns:1fr 1fr}.stats div{padding:16px 10px;border-bottom:1px solid var(--line)}.stats div:nth-child(2){border-right:0}.story-reverse .story-media{order:0}.story-media{width:calc(100% + 44px);margin-inline:-22px;height:105vw}.story-content{padding-block:46px}.story-content p{margin-top:20px}.amenities-head{display:block}.amenities-head .display{margin-top:18px}.amenities-head>p{margin-top:22px}.amenity-carousel{height:125vw;min-height:500px;margin-top:42px}.amenity-slide figcaption{left:24px;bottom:108px;right:24px}.amenity-slide h3{font-size:49px}.carousel-ui{left:24px;right:24px;bottom:23px}.carousel-button{width:39px;height:39px}.carousel-controls{gap:8px}.carousel-cta{padding:13px 12px;font-size:9px}.amenity-list{grid-template-columns:1fr 1fr;column-gap:20px}.residences-title{display:block}.residences-title p{margin-top:22px}.plan-grid{grid-template-columns:1fr;margin-top:40px}.plan-card{min-height:390px;padding:28px}.protected-plan{display:block}.location-visual{width:calc(100% + 44px);margin-inline:-22px;min-height:110vw}.location-copy{padding-block:55px}.nearby{grid-template-columns:1fr}.status{gap:10px;flex-wrap:wrap;line-height:1.7}.status i{margin:0 6px}.footer-bottom{margin-top:70px;display:block}.footer-bottom span{display:block}.footer-bottom span:last-child{text-align:left;margin-top:14px}.footer-actions{flex-direction:column}.phone{order:2}.floating-enquiry{right:16px;bottom:17px}.chat-widget{right:16px;bottom:74px}.chat-panel{width:min(330px,calc(100vw - 32px))}.chat-toggle span{display:none}.chat-toggle{padding:5px;border-radius:50%}.enquiry-dialog{padding:34px 25px}.enquiry-dialog h2{font-size:44px} }
@media(max-width:800px) { .flower-drift img { width:170px; opacity:.5; }.flower-drift img:nth-child(2) { width:140px; }.flower-drift img:nth-child(3) { width:120px; }.site-header{height:68px}.nav-links{position:absolute;display:none;flex-direction:column;align-items:stretch;left:0;right:0;top:68px;padding:22px;background:#fff;box-shadow:0 12px 20px #10263c20}.nav-links.open{display:flex}.menu-toggle{display:flex;border:0;background:transparent;flex-direction:column;gap:5px}.menu-toggle i{display:block;width:24px;height:1px;background:var(--ink)}.hero{height:auto;min-height:0}.hero img{height:auto;min-height:0;object-fit:contain}.section{padding:60px 22px}.intro-grid,.story-section,.location{display:flex;flex-direction:column;gap:0}.display{font-size:48px}.stats{margin-top:45px;grid-template-columns:1fr 1fr}.stats div{padding:16px 10px;border-bottom:1px solid var(--line)}.stats div:nth-child(2){border-right:0}.story-reverse .story-media{order:0}.story-media{width:calc(100% + 44px);margin-inline:-22px;height:105vw}.story-content{padding-block:46px}.story-content p{margin-top:20px}.amenities-head{display:block}.amenities-head .display{margin-top:18px}.amenities-head>p{margin-top:22px}.amenity-carousel{height:125vw;min-height:500px;margin-top:42px}.amenity-slide figcaption{left:24px;bottom:108px;right:24px}.amenity-slide h3{font-size:49px}.carousel-ui{left:24px;right:24px;bottom:23px}.carousel-button{width:39px;height:39px}.carousel-controls{gap:8px}.carousel-cta{padding:13px 12px;font-size:9px}.amenity-list{grid-template-columns:1fr 1fr;column-gap:20px}.residences-title{display:block}.residences-title p{margin-top:22px}.plan-grid{grid-template-columns:1fr;margin-top:40px}.plan-card{min-height:390px;padding:28px}.protected-plan{display:block}.location-visual{width:calc(100% + 44px);margin-inline:-22px;min-height:110vw}.location-copy{padding-block:55px}.nearby{grid-template-columns:1fr}.status{gap:10px;flex-wrap:wrap;line-height:1.7}.status i{margin:0 6px}.footer-bottom{margin-top:70px;display:block}.footer-bottom span{display:block}.footer-bottom span:last-child{text-align:left;margin-top:14px}.footer-actions{flex-direction:column}.phone{order:2}.floating-enquiry{right:16px;bottom:17px}.chat-widget{right:16px;bottom:74px}.chat-panel{width:min(330px,calc(100vw - 32px))}.chat-toggle span{display:none}.chat-toggle{padding:5px;border-radius:50%}.enquiry-dialog{padding:34px 25px}.enquiry-dialog h2{font-size:44px} }
/* Floor plan previews stay visible and protected until the enquiry is submitted. */
.protected-plan { display:block; }
.protected-plan { height:auto; aspect-ratio:1.12 / 1; background:#fff; }.protected-plan img { object-fit:contain; }
.footer-enquiry { display:grid; grid-template-columns:.85fr 1fr; gap:clamp(35px,8vw,120px); align-items:start; max-width:970px; margin:82px auto 0; padding:42px 0; border-top:1px solid rgba(255,255,255,.24); border-bottom:1px solid rgba(255,255,255,.24); }.footer-enquiry h3 { font:400 clamp(32px,3.6vw,50px)/.98 'DM Serif Display',serif; margin:14px 0; }.footer-enquiry h3 em { color:var(--gold); }.footer-enquiry p { margin:0; color:#c5cdd4; font-size:13px; }.footer-form { grid-template-columns:1fr 1fr; align-items:end; }.footer-form label { color:#cbd3da; }.footer-form input { color:#fff; border-color:rgba(255,255,255,.3); }.footer-form button { grid-column:1 / -1; background:var(--gold); color:var(--navy); }.footer-form small { grid-column:1 / -1; color:#aeb9c3; }
@media(max-width:800px) { .protected-plan { aspect-ratio:1 / 1.12; }.footer-enquiry { grid-template-columns:1fr; gap:26px; margin-top:60px; padding:35px 0; }.footer-form { grid-template-columns:1fr; }.footer-form button,.footer-form small { grid-column:auto; } }
@media(max-width:800px) { .hero .flower-drift img { width:170px; height:auto; }.hero .flower-drift img:nth-child(2) { width:140px; }.hero .flower-drift img:nth-child(3) { width:120px; } }