
/* Seaside palette and project-specific sections. */
:root{--ss-button-bg:#000;--ss-button-hover:#333;--ss-ink:#000;--ss-muted:#666;--ss-light:#F0EEEA}
.ss-section{padding-left:5.5%;padding-right:5.5%}
.ss-cover{background:#333}.ss-cover-shade{background:linear-gradient(180deg,#0006,#0003 35%,#0008)}
.ss-cover-project-logo{width:290px;max-height:145px;object-fit:contain}.ss-cover-content h1{font-size:clamp(32px,3.2vw,48px)}
.ss-header-links{gap:23px}.ss-cover-caption{font-size:10px}
.ss-intro-content .ss-introduction{color:#555}.ss-intro-eyebrow{color:#666}.ss-heading-accent{color:#000}
.ss-facts{border-top:1px solid #ddd;padding-top:36px}.ss-facts strong{font-size:64px}.ss-facts>div>span{font-size:16px;font-weight:400;color:#555}

.ss-amenities-shell{background:#F0EEEA}
.ss-eyebrow{display:block;font-size:10px;letter-spacing:2.5px;color:#666;font-weight:500}
.ss-amenity-layout{display:grid;grid-template-columns:0.8fr 1fr;gap:95px;align-items:center;padding-top:75px;padding-bottom:75px}
.ss-amenity-copy h2{font-weight:500;margin:18px 0 22px;font-size:clamp(34px,3.6vw,51px)}
.ss-amenity-copy>p{font-size:16px;max-width:490px;color:#666}
.ss-amenity-tabs{display:flex;gap:10px;margin:29px 0}.ss-amenity-tabs button{border:1px solid #bfbdb9;border-radius:30px;background:transparent;padding:10px 22px;font-size:13px;color:#000;transition:background .2s,color .2s}.ss-amenity-tabs button[aria-selected=true]{background:#000;color:#fff;border-color:#000}
.ss-amenity-copy [role=tabpanel]{min-height:180px}.ss-amenity-copy [role=tabpanel][hidden]{display:none}.ss-amenity-copy h3{font-size:22px;font-weight:500;letter-spacing:-.5px}
.ss-amenity-list{display:grid;grid-template-columns:1fr 1fr;gap:13px 24px;list-style:none;margin:25px 0 0;padding:0;font-size:14px;color:#555}.ss-amenity-list li{padding-left:15px;position:relative}.ss-amenity-list li:before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:#000;left:0;top:10px}
.ss-amenity-visual{position:relative;min-width:0}.ss-amenity-visual img{width:100%;height:auto;object-fit:contain;border-radius:20px}
.ss-luxury{padding-top:80px;padding-bottom:55px}.ss-luxury-grid>img{object-fit:cover;object-position:42% center}.ss-feature-card{background:#F0EEEA;border:1px solid #e5e3df}.ss-feature-card p{color:#666}
.ss-brochure{padding-top:35px}.ss-brochure-visual{height:590px}.ss-brochure-visual img{height:100%;width:100%;object-fit:cover}.ss-brochure-form{background:#F0EEEA}.ss-brochure-form h2{font-size:38px;font-weight:500}
.ss-gallery-grid{gap:18px}.ss-gallery-item{border-radius:12px}.ss-gallery-filters button[aria-pressed=true]{background:#000;border-color:#000;color:#fff}.ss-gallery-filters button{color:#444;border-color:#d5d5d5}.ss-gallery-heading p{color:#666}
.ss-location-heading h2{color:#000}.ss-location-heading>p,.ss-location-eyebrow,.ss-location-note{color:#666}
.ss-location-arrow{background:#000;border-color:#ffffff70}.ss-location-arrow:hover{background:#333}
.ss-plans{padding-top:30px;padding-bottom:75px}.ss-plans-heading h2{margin:15px 0 20px;font-size:44px;font-weight:500}.ss-plans-heading>p{font-size:16px}.ss-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:35px 0 20px}.ss-plan-card{border:1px solid #d8d5ce;border-radius:16px;padding:30px;background:#fff}.ss-plan-number{color:#999;font-size:12px;letter-spacing:2px}.ss-plan-card h3{font-size:25px;font-weight:500;margin:34px 0 18px;max-width:240px}.ss-plan-card p{font-size:15px;color:#666}.ss-plan-card strong{font-size:26px;color:#000;font-weight:400}.ss-plan-request{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;border-top:1px solid #ddd;padding:22px 0 0;margin-top:28px;font-size:14px;text-align:left}.ss-small-note{font-size:12px;color:#666}

.ss-whatsapp{background:transparent;border:0}.ss-whatsapp img{filter:none}.ss-contact-story:after{background:linear-gradient(180deg,#000c,#0007 70%,#000c)}.ss-contact-card,.ss-footer{background:#F0EEEA}.ss-footer-project,.ss-contact-form h3{color:#000}.ss-footer-phone,.ss-footer-label{color:#000}.ss-footer-logo img{filter:brightness(0)}.ss-lead-form label,.ss-consent{color:#444}.ss-lead-form input[type=checkbox]{accent-color:#000}
.ss-menu-logo{width:190px}.ss-menu-logo img{width:100%;height:auto;filter:brightness(0)}
@media(min-width:1800px){.ss-section{padding-left:55px;padding-right:55px}}
@media(max-width:1100px){.ss-header-links{gap:18px}.ss-header-links a:nth-child(4){display:none}.ss-amenity-layout{gap:35px}.ss-facts strong{font-size:56px}}
@media(max-width:800px){.ss-amenity-layout{grid-template-columns:1fr;gap:32px}.ss-amenity-copy [role=tabpanel]{min-height:140px}.ss-plan-grid{gap:12px}.ss-plan-card{padding:23px}.ss-plan-card h3{font-size:22px}}
@media(max-width:767px){.ss-section{padding-left:6%;padding-right:6%}.ss-cover-caption{font-size:8px}.ss-cover-project-logo{width:245px}.ss-cover-shade{background:linear-gradient(180deg,#0007,#0005 40%,#0009)}.ss-cover-content h1{font-size:32px}.ss-facts{padding-top:25px}.ss-facts strong{font-size:38px}.ss-facts>div>span{font-size:12px}.ss-amenity-layout{padding-top:55px;padding-bottom:50px}.ss-amenity-copy h2{font-size:36px}.ss-amenity-tabs{gap:8px}.ss-amenity-tabs button{padding:9px 18px}.ss-amenity-list{font-size:13px;gap:12px}.ss-brochure-visual{height:300px}.ss-brochure-form h2{font-size:32px}.ss-plans{padding-top:30px;padding-bottom:50px}.ss-plans-heading h2,.ss-plan-grid{grid-template-columns:1fr;gap:16px}.ss-plan-card{padding:26px}.ss-plan-card h3{max-width:none;margin:20px 0 15px}.ss-plan-request{margin-top:20px;padding-top:18px}.ss-facts>div:nth-child(3) strong{font-size:35px}.ss-brochure{padding-top:20px}}
@media(prefers-reduced-motion:reduce){.ss-amenity-tabs button{transition:none}}

/* Keep the light footer and photo headings legible. */
.ss-footer{color:#000}.ss-footer-bottom{border-top-color:#ccc}.ss-footer-socials a,.ss-footer-top{border-color:#bbb}.ss-footer a:focus-visible,.ss-footer button:focus-visible{outline-color:#000}.ss-contact-story .ss-heading-accent{color:#fff}.ss-contact-story p{color:#fff}

/* Compact brochure form; both desktop panels stretch to the same grid row. */
.ss-brochure-form{padding:24px 20px}
.ss-brochure-form h2.ss-section-heading{font-size:28px;line-height:1.2;margin-bottom:20px}
.ss-brochure-form .ss-lead-form{gap:12px}
.ss-brochure-form .ss-lead-form>label:not(.ss-consent):not(.ss-honeypot),.ss-brochure-form .ss-phone-label{font-size:14px;line-height:1.5}
.ss-brochure-form .ss-lead-form label>input:not([type=checkbox]):not([name=website]){height:42px;margin-top:5px;padding:8px 12px;font-size:14px}
.ss-brochure-form .ss-phone-label{margin-bottom:5px}
.ss-brochure-form .ss-country-toggle{min-height:42px;padding:8px 10px}
.ss-brochure-form .ss-international-phone>input{height:42px;padding:8px 12px;font-size:14px}
.ss-brochure-form .ss-message-label textarea{min-height:64px;height:64px;margin-top:5px;padding:10px 12px}
.ss-brochure-form .ss-lead-form .ss-consent{margin:0;font-size:10px;line-height:1.6}
.ss-brochure-form .ss-lead-form .ss-button{min-height:46px;padding:11px 20px;font-size:14px}
@media(min-width:1101px){.ss-brochure{align-items:stretch}.ss-brochure-visual{height:auto;min-height:590px}.ss-brochure-form{min-height:590px;display:flex;flex-direction:column;justify-content:center}}
@media(max-width:767px){.ss-brochure-form{padding:26px 20px}.ss-brochure-form h2.ss-section-heading{font-size:26px;margin-bottom:20px}}

/* Hero image focal point across screen sizes. */
.ss-cover-visual > img{object-position:center 60%}

/* Static level diagram with a lightweight automatic amenity tour. */
.ss-facts>div:nth-child(3) strong{font-size:clamp(32px,3.4vw,48px)}
.ss-amenity-tabs button{position:relative;overflow:hidden}
.ss-amenity-tabs button:after{content:'';position:absolute;bottom:3px;left:18px;right:18px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;opacity:.65}
[data-ss-autoplay=true] .ss-amenity-tabs button[aria-selected=true]:after{animation:ss-amenity-tab-progress 4s linear forwards}
.ss-amenity-copy [role=tabpanel]:not([hidden]){animation:ss-amenity-panel-in .3s ease-out}
@keyframes ss-amenity-tab-progress{to{transform:scaleX(1)}}
@keyframes ss-amenity-panel-in{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){.ss-facts strong{font-size:32px}.ss-facts>div:nth-child(3) strong{font-size:clamp(20px,5.5vw,25px)}}
@media(prefers-reduced-motion:reduce){.ss-amenity-tabs button:after,.ss-amenity-copy [role=tabpanel]:not([hidden]){animation:none}}

/* Full-width residence showcase with readable image-backed cards. */
.ss-plans-shell{width:100%;background:#F0EEEA}
.ss-plans{padding-top:70px;padding-bottom:70px}
.ss-plans-heading{display:flex;flex-direction:column;align-items:center;text-align:center}
.ss-plans-heading>p{max-width:600px}
.ss-plan-card{position:relative;isolation:isolate;overflow:hidden;min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;background:#222;color:#fff;border:0;padding:30px}
.ss-plan-background{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.ss-plan-card:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0002 0%,#0006 35%,#000d 100%)}
.ss-plan-card .ss-plan-number{position:absolute;top:26px;left:30px;color:#fff}
.ss-plan-card h3{color:#fff;margin:0 0 18px}
.ss-plan-card p,.ss-plan-card strong,.ss-plan-request{color:#fff}
.ss-plan-request{border-top-color:#ffffff70}
.ss-plan-request:hover{text-decoration:underline;text-underline-offset:4px}
.ss-plan-card :focus-visible{outline:2px solid #fff;outline-offset:4px}
.ss-plans .ss-small-note{text-align:center}
.ss-destination:after{background:linear-gradient(180deg,#0002,#0003 25%,#000c 100%)}
@media(max-width:767px){.ss-plans{padding-top:50px;padding-bottom:50px}.ss-plan-card{min-height:360px;padding:26px}.ss-plan-card .ss-plan-number{left:26px}}

.ss-footer-enquire{background:#000;color:#fff;border-color:#000}
.ss-footer-enquire:hover{background:#333;color:#fff;border-color:#333}

.ss-header-links a,.ss-nav a,.ss-footer nav a{text-transform:uppercase}

/* Center the complete footer on mobile, including its bottom legal area. */
@media(max-width:767px){
 .ss-footer{text-align:center}
 .ss-footer-main{grid-template-columns:1fr}
 .ss-footer-logo{margin:-15px auto 10px}
 .ss-footer-description{margin-left:auto;margin-right:auto}
 .ss-footer nav{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;grid-template-columns:repeat(2,max-content);column-gap:40px;text-align:left}
 .ss-footer-enquire{margin-left:auto;margin-right:auto;justify-content:center;text-align:center}
 .ss-footer-bottom{flex-direction:column;align-items:center;text-align:center}
 .ss-footer-bottom>span{flex-basis:auto;width:100%}
 .ss-footer-socials{width:100%;justify-content:center}
 .ss-footer-legal{width:100%;margin-left:0;flex-direction:column;align-items:center;justify-content:center;gap:16px}
}

@media(max-width:767px){.ss-footer-description br{display:block}}

@media(max-width:767px){.ss-cover-header-actions{align-items:center}.ss-header .ss-menu-toggle{display:flex;align-items:center;justify-content:center;align-self:center;height:38px;padding:0 0 0 6px;line-height:0}.ss-header .ss-menu-toggle svg{display:block;transform:translateY(1px)}}

/* Tablet: balanced facts and comfortable contact fields. */
@media(min-width:768px) and (max-width:1100px){
 .ss-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px;align-items:start;padding-top:32px}
 .ss-facts>div{min-width:0;gap:8px}
 .ss-facts strong{display:flex;align-items:center;justify-content:center;min-height:64px;font-size:52px;line-height:1.15;white-space:nowrap}
 .ss-facts>div:nth-child(3) strong{font-size:42px}
 .ss-facts>div>span{font-size:15px;line-height:1.5}
 .ss-facts>.ss-button{grid-column:1/-1;justify-self:center;width:210px;margin-top:0}
 .ss-contact-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .ss-contact-story{padding:32px 28px}
 .ss-contact-story h2.ss-section-heading{font-size:36px;line-height:1.15;margin:18px 0 16px}
 .ss-contact-form{padding:32px 28px}
 .ss-contact-form h3{font-size:28px}
 .ss-contact-form .ss-lead-form{gap:20px 18px;margin-top:24px}
}
@media(min-width:768px) and (max-width:1000px){
 .ss-contact-card{grid-template-columns:minmax(0,1fr)}
 .ss-contact-story{min-height:340px;padding:32px 36px}
 .ss-contact-story p{max-width:560px}
 .ss-contact-call{margin-top:28px;padding-top:18px}
 .ss-contact-form{padding:34px 36px}
 .ss-contact-form>p{max-width:none}
}
