/* Decorative palm shadows remain behind the content on iOS and desktop. */
.villa-depth.ambient-background{perspective:none;background:#f2f1e9}
.ambient-background picture,.ambient-background img,.ambient-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%}
.ambient-background::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,#fffcf24d,#f8faf650);pointer-events:none}
.ambient-video{opacity:0;transition:opacity .7s ease;pointer-events:none}
.ambient-video.is-playing{opacity:1}
.ambient-toggle{position:fixed;inset-inline-end:16px;bottom:20px;z-index:10;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:6px;background:#ffffffb8;color:#29463e;box-shadow:0 2px 15px #18382d0b;cursor:pointer}
.ambient-toggle[hidden]{display:none}
.ambient-toggle svg{width:18px;height:18px;fill:currentColor}
.ambient-toggle .ambient-play,.ambient-toggle.is-paused .ambient-pause{display:none}
.ambient-toggle.is-paused .ambient-play{display:block}
.ambient-toggle:focus-visible,.film-start:focus-visible{outline:2px solid #866439;outline-offset:4px}
.video-walks{margin-top:28px;scroll-margin-top:90px}
.video-walks h3{font-size:clamp(25px,4vw,34px);font-weight:400;margin:0 0 16px}
.film-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:850px;margin-inline:auto}
.film-card{min-width:0;margin:0}
.film-frame{position:relative;aspect-ratio:9/16;max-height:470px;margin-inline:auto;overflow:hidden;border-radius:6px;background:#e7e7df}
.film-frame img,.film-frame video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.film-frame video{visibility:hidden}
.film-card.is-loaded video{visibility:visible;background:#101713}
.film-card.is-loaded img{visibility:hidden}
.film-start{position:absolute;inset:0;width:100%;height:100%;padding:0;display:grid;place-items:center;cursor:pointer;border:0;background:linear-gradient(0deg,#0f271f48,transparent 45%);color:#fff}
.film-start[hidden]{display:none}
.film-start svg{width:54px;height:54px;padding:16px;border-radius:50%;fill:currentColor;background:#14392b55;backdrop-filter:blur(5px)}
.film-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:10px;font-size:14px;line-height:1.4}
.film-card time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.film-fallback{position:absolute;inset:40% 8% auto;z-index:2;background:#fff;padding:12px;text-align:center}
.film-fallback[hidden]{display:none}
@media(max-width:900px){
 .ambient-toggle{bottom:calc(86px + env(safe-area-inset-bottom));inset-inline-end:12px;background:#ffffffe0}
 .film-track{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(70vw,260px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:0 3px 12px;overscroll-behavior-x:contain}
 .film-card{scroll-snap-align:start}
 .film-frame{max-height:none}
 .film-card figcaption{font-size:13px}
 .video-walks{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){.ambient-video{transition:none}}

/* Phone-first fluid layout: no fixed device width or page cropping. */
:root{--page-gutter:clamp(16px,5vw,40px)}
.shell,.hero-copy{width:min(1240px,calc(100% - var(--page-gutter)*2));margin-inline:auto}
.brochure-shell{width:min(1120px,calc(100% - var(--page-gutter)*2));margin-inline:auto}
.split > *,.brochure-grid > *,.rental-row > *,.hero-dimensions > *{min-width:0}
main p,main h1,main h2,main h3,main summary{overflow-wrap:break-word}
@media(max-width:900px){
 .hero{padding-block:clamp(32px,9vw,56px) 28px}
 .hero h1,.brochure-cover h1{font-size:clamp(38px,10.5vw,64px)}
 .hero .actions{width:100%}
 .hero .actions .button{flex:1 1 135px;white-space:normal;text-align:center}
 .hero-dimensions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .explorer-tabs button,.gallery-nav button,.gallery-nav a{min-height:44px}
 .brochure-nav{flex-wrap:wrap;padding-block:8px}
 .visit-form input,.visit-form textarea,.visit-form select{min-width:0;max-width:100%;font-size:16px}
 .mobile-contact{padding-inline:max(16px,env(safe-area-inset-left))!important}
}
@media(max-width:374px){
 .hero-facts{gap:6px 12px}
 .hero-dimensions{gap:10px}
 .hero .actions .button{font-size:12px}
 .mobile-contact a{gap:8px}
 .mobile-contact-price{font-size:22px}
}