/* Clear the shoreline; carry the villa route below the footage. */
.ss-page .coast-next{display:flex;justify-content:center;padding:4px 24px 24px;background:var(--ivory)}
.ss-page .coast-next a{display:inline-flex;align-items:center;gap:20px;min-height:48px;padding:8px 0;border-bottom:1px solid var(--rust);font-size:13px;color:var(--deep)}
.ss-page .coast-next svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2}
.ss-page .coast-next a:focus-visible{outline:2px solid var(--rust);outline-offset:5px}
.ss-page .architecture-slide{border-radius:24px 24px 0 0}

/* Semi-finished story: a compact feature with a visual, precise scope and one action. */
.ss-page #semi-finished{--build-bg:var(--ivory);--build-ink:var(--deep);--build-accent:var(--rust);--build-line:rgba(11,53,64,.2);height:auto;background:var(--ivory);padding:0 6vw}
.ss-page #semi-finished[data-animate]{height:auto}
.ss-page #semi-finished .villa-option,.ss-page #semi-finished[data-animate] .villa-option{position:relative;top:auto;padding:56px 0 64px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"visual lead" "visual details";column-gap:5vw;row-gap:20px;border-block:1px solid var(--line)}
.ss-page #semi-finished .villa-visual{align-self:start;margin-top:8px}
.ss-page #semi-finished .visual-pin,.ss-page #semi-finished[data-animate] .visual-pin{position:relative;top:auto;padding:0;background:transparent}
.ss-page #semi-finished .visual-pin:before{display:none}
.ss-page #semi-finished .visual-timeline,.ss-page #semi-finished[data-animate] .visual-timeline{height:auto}
.ss-page #semi-finished .eyebrow{font-size:10px;margin-bottom:20px;letter-spacing:.08em}
.ss-page #semi-finished .eyebrow:before{display:none}
.ss-page #semi-finished h2{font-size:clamp(44px,4.8vw,72px);line-height:1.04;margin:0;letter-spacing:-.035em}
.ss-page #semi-finished .build-status{margin:0;padding:14px 18px;background:var(--deep);color:var(--ivory);font-size:12px}
.ss-page #semi-finished .build-hint,.ss-page #semi-finished .stage-track{display:none}
.ss-page #semi-finished figcaption{font-size:10px;margin:10px 0 0;color:var(--deep)}
.ss-page #semi-finished .description{font-size:14px;line-height:1.8;margin:0 0 22px;max-width:470px}
.ss-page #semi-finished .handover-scope{font-size:13px;line-height:1.7;border:0;padding:0;gap:24px}
.ss-page #semi-finished .handover-scope dt{font-size:10px;color:var(--deep);font-weight:600;letter-spacing:.06em;margin-bottom:8px}
.ss-page #semi-finished .completion-note{font-size:12px;margin:20px 0;line-height:1.75}
.ss-page #semi-finished .enquiry-link{justify-content:flex-start;gap:24px;font-size:13px;min-height:48px}
@media(max-width:760px){
 .ss-page .architecture-slide{border-radius:18px 18px 0 0}
 .ss-page #semi-finished{padding:0 24px;scroll-margin-top:66px}
 .ss-page #semi-finished .villa-option,.ss-page #semi-finished[data-animate] .villa-option{grid-template-columns:minmax(0,1fr);grid-template-areas:"lead" "visual" "details";padding:36px 0 44px;gap:24px}
 .ss-page #semi-finished .eyebrow{font-size:10px!important;margin-bottom:16px}
 .ss-page #semi-finished h2{font-size:clamp(40px,9.8vw,58px);line-height:1.05}
 .ss-page #semi-finished .villa-visual{width:100%;margin:0}
 .ss-page #semi-finished .build-status{margin:0;font-size:12px;padding:13px 16px}
 .ss-page #semi-finished figcaption{margin:10px 0 0;font-size:11px}
 .ss-page #semi-finished .description{font-size:15px;line-height:1.75;margin-bottom:22px}
 .ss-page #semi-finished .handover-scope{font-size:14px;gap:18px}
 .ss-page #semi-finished .handover-scope dt{font-size:11px;line-height:1.6}
 .ss-page #semi-finished .completion-note{font-size:12px}
 .ss-page #semi-finished .enquiry-link{font-size:14px}
}
/* Keep the hero clear; keyboard users can still reach the playback control. */
.ss-page .hero .hero-video-toggle:not(:focus-visible){width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}

/* Section labels stand on typography alone, without decorative dashes. */
.ss-page .tiny-rule,.ss-page .short-rule,.ss-page .vertical-line,.ss-page .eyebrow::before,.ss-page .eyebrow::after{display:none}

/* Quiet, usable horizontal rails for the island tabs and room gallery. */
.ss-page :is(.island-tabs,.room-gallery){scrollbar-width:thin;scrollbar-color:#597570 #e4e2d9}
@supports selector(::-webkit-scrollbar){
 .ss-page :is(.island-tabs,.room-gallery){scrollbar-width:auto;scrollbar-color:auto}
 .ss-page :is(.island-tabs,.room-gallery)::-webkit-scrollbar{height:5px}
 .ss-page :is(.island-tabs,.room-gallery)::-webkit-scrollbar-track{background:#e4e2d9;border-radius:8px}
 .ss-page :is(.island-tabs,.room-gallery)::-webkit-scrollbar-thumb{background:#597570;border-radius:8px}
 .ss-page :is(.island-tabs,.room-gallery)::-webkit-scrollbar-thumb:hover{background:var(--deep)}
 .ss-page :is(.island-tabs,.room-gallery)::-webkit-scrollbar-button{display:none;width:0;height:0}
}

@media(max-width:760px){.ss-page .island-tabs{padding-bottom:10px}}

/* A wider coastal frame and a compact reading sequence on phones. */
@media(max-width:760px){
 .ss-page .hero{--mobile-view-height:clamp(210px,62.5vw,420px);padding-bottom:108px}
 .ss-page .hero .hero-photo{margin-bottom:24px}
 .ss-page .hero .hero-title .eyebrow{margin-bottom:12px}
 .ss-page .hero .hero-title h1{font-size:clamp(48px,14.5vw,78px);line-height:1}
 .ss-page .hero .hero-description{margin-top:16px;max-width:390px}
 .ss-page .hero .hero-price{margin-top:16px}
 .ss-page .hero .hero-actions{margin-top:18px;flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 18px}
 .ss-page .hero .hero-actions>a{width:auto;min-height:48px;font-size:12px}
 .ss-page .hero .hero-actions .action-primary{padding:12px 14px;gap:12px}
 .ss-page .hero .hero-actions .text-link{justify-content:flex-start;gap:10px}
 .ss-page .hero .hero-photo .hero-image{animation:none}
}
@media(max-width:359px){
 .ss-page .hero .hero-actions{flex-direction:column;align-items:stretch;gap:0}
 .ss-page .hero .hero-actions>a{width:100%}
 .ss-page .hero .hero-actions .text-link{justify-content:center}
}

/* Consistent reading rhythm and touch targets throughout the phone journey. */
.ss-page :is(section[id],.aerial-site[id]){scroll-margin-top:78px}
.ss-page :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--rust);outline-offset:4px}
@media(max-width:760px){
 .ss-page :is(.introduction,.interiors,.island-guide,.living,.questions,.visit,.connections){padding-top:56px;padding-bottom:56px}
 .ss-page .architecture{margin-top:56px;gap:32px}
 .ss-page .architecture-copy{padding-bottom:0}
 .ss-page .architecture-gallery{height:clamp(360px,105vw,520px);min-height:0;margin-left:0}
 .ss-page .aerial{padding:56px 24px 40px}
 .ss-page .aerial-site{gap:20px;margin-bottom:32px}
 .ss-page .villa-collection{padding-top:56px;padding-bottom:40px}
 .ss-page .interiors .section-heading{margin-bottom:28px}
 .ss-page .table-story{padding:40px 24px}
 .ss-page .community-panel{padding:32px 24px}
 .ss-page .island-guide-copy{padding-top:28px}
 .ss-page .living-heading{margin-bottom:28px}
 .ss-page .room-gallery-note{flex-wrap:wrap;row-gap:6px}
 .ss-page .aerial-note{font-size:12px;line-height:1.65}
 .ss-page .collection-heading>p,.ss-page .plans-note{font-size:14px;line-height:1.7}
 .ss-page :is(.gallery-arrow,.aerial-prev,.aerial-next){min-width:44px;min-height:44px}
 .ss-page .text-link{min-height:44px;align-items:center}
 .ss-page :is(input,select,textarea){font-size:16px}
 .ss-page .viewing-contact>a{min-height:44px;display:inline-flex;align-items:center}
 .ss-page .faq-list summary{padding-block:20px;line-height:1.5}
 .ss-page :is(.room-gallery,.island-tabs){overscroll-behavior-x:contain}
}

.ss-page .island-tabs button:focus-visible{outline-offset:-3px}