:root { --ink:#17313a; --cream:#f4efe5; --paper:#fbf8f1; --sage:#8fa89f; --line:rgba(23,49,58,.18); }
body { color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
.site-header { height:112px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:36px; padding:0 4vw; background:var(--paper); }
.brand { display:inline-flex; width:max-content; align-items:center; text-decoration:none; }
.brand img { width:auto; height:96px; object-fit:contain; }
.site-header nav { display:flex; gap:32px; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.site-header nav a { text-decoration:none; }
.header-cta { justify-self:end; padding-bottom:7px; border-bottom:1px solid; font-size:11px; font-weight:600; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.menu-button { display:none; }
.hero { position:relative; height:calc(100svh - 112px); min-height:650px; overflow:hidden; color:white; }
.hero>img { width:100%; height:100%; object-fit:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,35,40,.74) 0%,rgba(9,35,40,.15) 58%,rgba(9,35,40,.12)); }
.hero-copy { position:absolute; left:8vw; top:50%; max-width:760px; transform:translateY(-48%); }
.kicker { font-size:11px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; }
.hero h1 { margin:25px 0 24px; font:400 clamp(70px,10vw,150px)/.75 "Italiana",serif; letter-spacing:-.045em; }
.hero h1 i { margin-left:8vw; white-space:nowrap; font-weight:400; }
.hero-copy p { max-width:480px; margin-left:9vw; font-size:15px; line-height:1.7; }
.hero-copy a { display:inline-flex; gap:22px; margin:28px 0 0 9vw; color:white; font-size:11px; font-weight:600; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.hero-card { position:absolute; right:4vw; bottom:0; width:240px; min-height:250px; display:flex; flex-direction:column; justify-content:space-between; padding:30px; color:var(--ink); background:var(--cream); }
.hero-card span,.hero-card small { font-size:9px; font-style:normal; letter-spacing:.11em; line-height:1.5; text-transform:uppercase; }
.hero-card strong { font:400 46px/.78 "Italiana",serif; }
.intro { display:grid; grid-template-columns:.7fr 1.5fr 1fr; gap:6vw; padding:150px 8vw; align-items:start; }
.section-number,.gallery-heading>span,.amenities>div>span { font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.intro h2,.gallery-heading h2,.amenities h2 { margin:0; font:400 clamp(48px,6vw,90px)/.92 "Italiana",serif; letter-spacing:-.03em; }
.intro>div:nth-child(2) p { max-width:510px; margin:36px 0 0; font-size:16px; line-height:1.8; }
.intro-note { padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.intro-note p { margin:0 0 35px; font:400 26px/1.25 "Italiana",serif; }
.intro-note span { font-size:10px; letter-spacing:.08em; line-height:1.6; text-transform:uppercase; }
.feature-image { position:relative; height:min(72vw,840px); margin:0 4vw; overflow:hidden; }
.feature-image img { width:100%; height:100%; object-fit:cover; }
.feature-caption { position:absolute; z-index:2; left:4vw; bottom:4vw; padding:24px 30px; color:var(--ink); background:rgba(251,248,241,.9); backdrop-filter:blur(8px); }
.feature-image span { display:block; margin-bottom:8px; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.feature-image strong { font:400 clamp(28px,4vw,55px)/.95 "Italiana",serif; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); margin:0 4vw; padding:54px 0 90px; border-bottom:1px solid var(--line); }
.stats div { display:flex; flex-direction:column; align-items:center; gap:8px; border-right:1px solid var(--line); text-align:center; }
.stats div:last-child { border:0; }
.stats strong { font:400 52px/1 "Italiana",serif; }
.stats span { font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.gallery-section { padding:145px 4vw; }
.gallery-heading { display:grid; grid-template-columns:.6fr 1.4fr .7fr; align-items:end; margin:0 4vw 70px; }
.gallery-heading p { justify-self:end; margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.editorial-gallery { display:grid; grid-template-columns:1fr 1fr 1fr; grid-auto-rows:310px; gap:14px; }
.gallery-item { position:relative; overflow:hidden; padding:0; border:0; color:white; background:#c8d3ce; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery-item:hover img { transform:scale(1.035); }
/* Keep the entire evening panorama visible at every tile size, including on hover. */
.gallery-item--uncropped { background:var(--ink); }
.gallery-item--uncropped img { object-fit:contain; transform:none; }
.gallery-item--uncropped:hover img { transform:none; }
.gallery-item span { position:absolute; left:20px; bottom:18px; padding:7px 10px; background:rgba(15,36,42,.7); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.gallery-item.tall { grid-row:span 2; }
.gallery-item.wide { grid-column:span 2; }
.amenities { display:grid; grid-template-columns:1fr 1fr; gap:8vw; padding:130px 8vw; background:var(--cream); }
.amenities h2 { margin-top:25px; font-size:clamp(50px,6vw,84px); }
.amenities ul { margin:0; padding:0; list-style:none; }
.amenities li { display:grid; grid-template-columns:90px 1fr; gap:35px; padding:25px 0; border-bottom:1px solid var(--line); }
.amenities li b { font:400 23px/1 "Italiana",serif; }
.amenities li span { font-size:13px; line-height:1.65; }
.enquire { position:relative; min-height:680px; display:grid; place-items:center; overflow:hidden; color:white; text-align:center; }
.enquire:after { content:""; position:absolute; inset:0; background:rgba(11,39,45,.52); }
.enquire>img { position:absolute; width:100%; height:100%; object-fit:cover; }
.enquire>div { position:relative; z-index:1; padding:80px 20px; }
.enquire span { font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.enquire h2 { margin:18px 0; font:400 clamp(65px,9vw,125px)/.9 "Italiana",serif; }
.enquire p { margin:0 auto 34px; font-size:14px; }
.enquire a { display:inline-block; padding:16px 23px; border:1px solid white; font-size:11px; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
footer { min-height:170px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:30px 4vw; background:var(--ink); color:white; }
footer p { justify-self:center; font-size:10px; letter-spacing:.08em; text-align:center; text-transform:uppercase; } footer>span { justify-self:end; font-size:10px; }
footer .brand img { height:124px; }
/* Motion is confined to concept 01. Photos remain usable without JavaScript. */
.feature-image .living-slide { position:absolute; inset:0; opacity:0; object-position:50% 57%; transition:opacity 1.8s ease-in-out; }
.feature-image .living-slide.is-active { opacity:1; }
.motion-ready .hero>img { animation:hero-sea-zoom 32s ease-in-out infinite alternate; transform-origin:76% 74%; }
.motion-ready .enquire>img { animation:sea-drift 24s ease-in-out infinite alternate; transform-origin:65% 55%; }
.motion-ready .living-slide { animation:room-drift 18s ease-in-out infinite alternate; transform-origin:42% 48%; }
.motion-paused .hero>img,.motion-paused .enquire>img,.motion-paused .living-slide { animation-play-state:paused; }
.motion-toggle,.music-toggle,.slideshow-controls button { min-height:44px; border:1px solid rgba(255,255,255,.65); color:white; background:rgba(13,35,40,.76); font:500 14px/1.2 "DM Sans",sans-serif; cursor:pointer; }
.motion-toggle,.music-toggle { padding:10px 16px; border-radius:3px; }
.hero-controls { position:absolute; z-index:3; left:4vw; bottom:24px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; max-width:calc(100% - 8vw); }
.music-toggle { display:inline-flex; align-items:center; gap:8px; }
.music-toggle[aria-pressed="true"] { color:var(--ink); background:var(--paper); }
.hero-audio { max-width:100%; }
.music-status { position:absolute; bottom:calc(100% + 10px); left:0; padding:10px 14px; max-width:320px; border-radius:3px; color:white; background:rgba(13,35,40,.9); font-size:14px; line-height:1.4; }
.music-status:empty { display:none; }
.slideshow-controls { position:absolute; z-index:3; display:flex; gap:8px; right:24px; top:24px; }
.slideshow-controls button[data-slide] { min-width:44px; border-radius:50%; }
.slideshow-controls button[aria-pressed="true"] { color:var(--ink); background:var(--paper); }
.slideshow-controls[hidden],.motion-toggle[hidden],.music-toggle[hidden],.hero-audio[hidden] { display:none; }
.slideshow-controls button:focus-visible,.motion-toggle:focus-visible,.music-toggle:focus-visible { outline:3px solid white; outline-offset:4px; }
@keyframes sea-drift { from { transform:scale(1); } to { transform:scale(1.07); } }
@keyframes hero-sea-zoom { from { transform:scale(1); } to { transform:scale(1.28); } }
@keyframes room-drift { from { transform:scale(1); } to { transform:scale(1.035); } }
@media(max-width:800px) { .feature-image .living-slide { object-position:46% 50%; } .slideshow-controls { top:16px; right:16px; gap:6px; } .feature-caption { right:4vw; } }
@media(prefers-reduced-motion:reduce) { .motion-ready .hero>img,.motion-ready .enquire>img,.motion-ready .living-slide { animation:none; } .feature-image .living-slide { transition:none; } }
@media(max-width:800px){.site-header{grid-template-columns:1fr auto;height:96px}.site-header .brand img{height:80px}.site-header nav{position:absolute;z-index:80;top:96px;left:0;right:0;display:none;flex-direction:column;padding:28px 5vw;background:var(--paper)}.site-header nav.is-open{display:flex}.menu-button{display:block;border:0;background:none;color:inherit;font:600 10px/1 sans-serif;letter-spacing:.12em;text-transform:uppercase}.header-cta{display:none}.hero{height:calc(100svh - 96px);min-height:620px}.hero-copy{left:6vw;right:6vw}.hero h1{font-size:clamp(64px,20vw,100px)}.hero h1 i{margin-left:0;white-space:normal}.hero-copy p,.hero-copy a{margin-left:0}.hero-card{display:none}.intro{grid-template-columns:1fr;padding:90px 7vw}.intro h2{font-size:58px}.feature-image{height:82vh}.stats{grid-template-columns:1fr 1fr}.stats div{padding:24px;border-bottom:1px solid var(--line)}.stats div:last-child{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.editorial-gallery{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.gallery-item.wide{grid-column:span 2}.gallery-heading{grid-template-columns:1fr;gap:20px}.gallery-heading h2{font-size:55px}.gallery-heading p{justify-self:start}.amenities{grid-template-columns:1fr;padding:90px 7vw}.amenities li{grid-template-columns:70px 1fr}.enquire{min-height:600px}footer{grid-template-columns:1fr;gap:22px;text-align:center}footer .brand,footer p,footer>span{justify-self:center}}