/* Revision 2: target visual balance 40% browns / 30% light / 30% greens.
   Applied to interface surfaces; original render colours are preserved. */
.project,.legacy{background:var(--sage)}
.project .project-values>div,.project .manifesto{border-color:color-mix(in srgb,var(--olive) 35%,transparent)}
.legacy .legacy-card{background:color-mix(in srgb,var(--sage) 70%,white)}
.legacy .timeline-tabs{border-color:var(--olive)}
.faq{background:color-mix(in srgb,var(--olive) 88%,black);color:white}
.project .project-copy>p,.project .project-values p,.project .section-index,.legacy .section-index,.legacy .section-heading>div p{color:var(--ink)}
.faq .eyebrow,.faq h2 em{color:var(--sage)}
.faq .faq-list details{border-color:#ffffff55}
.faq .faq-list details>p{color:white}
.faq .faq-list summary span{color:var(--sage)}
.faq .text-link{color:white;border-color:var(--sage)}
.residences,.rentals{background:var(--bronze);color:white}
.residences .section-index,.residences .eyebrow,.rentals .eyebrow{color:var(--sage)}
.residences h2 em,.rentals h2 em{color:color-mix(in srgb,var(--sand) 35%,white)}
.residences .section-heading>p,.rentals .rental-copy>p,.rentals .rental-copy>small{color:white}
.residences .type-nav{border-color:#ffffff55}
.residences .type-nav button{color:white}
.residences .type-nav button[aria-pressed=true]{color:var(--sage);border-color:var(--sage)}
.residences .residence-detail{background:var(--cream);color:var(--ink);padding:30px}
.residences .residence-detail .eyebrow{color:var(--bronze)}
.rentals .rental-line,.rentals .text-link{border-color:#ffffff55}
.rentals .rental-line>span{color:var(--sage)}
.simulator-inputs{background:var(--sage)}
.simulator-inputs select,.simulator-inputs input:not([type=range]){background:color-mix(in srgb,var(--sage) 60%,white)}
.location .map-panel{background:var(--olive)}
.map-panel>img{filter:grayscale(1) brightness(.5);opacity:.75}
.map-tint{background:linear-gradient(120deg,#7d7b6e85,transparent)}
.map-selection{background:var(--sage)}
.footer{background:white}
.hero h1 em{color:var(--sage)}
.hero .button.pale{background:rgb(135 82 63 / 40%);color:#fff;border:1px solid rgb(255 255 255 / 35%);backdrop-filter:blur(4px)}
.aerial-block{margin-top:50px;border-top:1px solid color-mix(in srgb,var(--olive) 35%,transparent);padding-top:35px}
.aerial-head{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:24px}
.aerial-head h3{font-size:34px;margin-top:8px}
.aerial-head small{font-size:10px;color:var(--bronze)}
.aerial-main{display:block;width:100%;position:relative;padding:0;background:var(--olive);overflow:hidden}
.aerial-main img{width:100%;aspect-ratio:1.9;object-fit:cover;object-position:center}
.aerial-caption{font-size:9px;letter-spacing:.1em;margin-top:15px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
.aerial-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:20px}
.aerial-thumbs button{padding:0;opacity:.6;border-bottom:2px solid transparent}
.aerial-thumbs button[aria-pressed=true]{opacity:1;border-color:var(--bronze)}
.aerial-thumbs img{width:100%;aspect-ratio:1.65;object-fit:cover}
.aerial-thumbs span{display:block;font-size:9px;padding:8px 0}
/* Palm shadow texture is from the supplied brochure, not invented architecture. */
.button,.round,.amenity-nav button,.type-nav button,.poi-tabs button,.timeline-tabs button,.view-tools button,.header-contact,.text-link,.download-link,.sound-toggle,.poi-item,.gallery-thumbs button,.aerial-thumbs button,.lang,.menu-toggle,.faq-list summary{position:relative;isolation:isolate;transition:transform .3s ease,background-color .3s ease,color .3s ease,border-color .3s ease;transform-origin:center;overflow:hidden}
.button:before,.round:before,.amenity-nav button:before,.type-nav button:before,.poi-tabs button:before,.timeline-tabs button:before,.header-contact:before,.text-link:before,.download-link:before,.poi-item:before{content:'';position:absolute;inset:-35%;z-index:-1;background:url('assets/p1-613.webp') center/cover;opacity:0;filter:grayscale(1);transform:translateX(-5%) rotate(-3deg);pointer-events:none;transition:opacity .3s}
@media(hover:hover){
 .button:hover,.round:hover,.amenity-nav button:hover,.type-nav button:hover,.poi-tabs button:hover,.timeline-tabs button:hover,.header-contact:hover,.text-link:hover,.download-link:hover,.poi-item:hover{transform:scale(1.035);background:var(--sage);color:var(--ink)!important;border-color:var(--olive)}
 .button:hover:before,.round:hover:before,.amenity-nav button:hover:before,.type-nav button:hover:before,.poi-tabs button:hover:before,.timeline-tabs button:hover:before,.header-contact:hover:before,.text-link:hover:before,.download-link:hover:before,.poi-item:hover:before{opacity:.13;animation:palm-breeze 4s ease-in-out infinite alternate}
 .view-tools button:hover,.lang:hover,.sound-toggle:hover,.menu-toggle:hover,.faq-list summary:hover{transform:scale(1.03);color:var(--sage);background:var(--bronze)}
 .gallery-thumbs button:hover,.aerial-thumbs button:hover{transform:scale(1.045);opacity:1;outline:1px solid var(--bronze);outline-offset:2px}
 .desktop-nav a:hover,.mobile-menu a:hover,.footer a:hover,.contact-whatsapp:hover,.mobile-cta a:hover,.address a:hover{color:var(--bronze);background:var(--sage);transform:scale(1.035)}
 .aerial-main:hover img{transform:scale(1.02);transition:transform .5s ease}
 input:not([type=range]):not([type=checkbox]):hover,select:hover{background:color-mix(in srgb,var(--sage) 55%,white);border-color:var(--olive)}
}
@keyframes palm-breeze{from{transform:translateX(-5%) rotate(-3deg)}to{transform:translateX(5%) rotate(3deg)}}
.reveal-heading{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.3,1);will-change:opacity,transform}
.reveal-heading.waiting{opacity:0;transform:translateX(-32px)}
.reveal-heading.entered{opacity:1;transform:translateX(0)}
@container(max-width:700px){.residences .residence-detail{padding:24px}.aerial-head{align-items:flex-start;gap:15px}.aerial-head h3{font-size:27px}.aerial-head .round{height:36px;width:36px}.aerial-main img{aspect-ratio:1.2}.aerial-thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.aerial-thumbs span{font-size:8px}.aerial-caption{font-size:8px}}
@media(prefers-reduced-motion:reduce){.reveal-heading.waiting{opacity:1;transform:none}.reveal-heading{will-change:auto}.button:before,.round:before{animation:none!important}}

/* Hero video keeps the existing crop, overlay and poster fallback. */
.hero-background{overflow:hidden}.hero-video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 55%;pointer-events:none}
@container(max-width:700px){.hero-video{object-position:42% center}}


.hero .button.pale:hover,.hero .button.pale:focus-visible{background:rgb(100 57 42 / 55%);color:#fff!important;border-color:rgb(255 255 255 / 65%)}
.hero .button.pale:focus-visible{outline-color:#fff}

/* Location: light brand surfaces and the supplied, correctly labelled reference. */
.location.section{background:linear-gradient(135deg,#faf5eb 0%,#eee0cf 100%)}
.location .map-panel{min-height:0;background:#f5edde;align-self:start;overflow:hidden}
.map-reference{position:relative;display:block;width:100%;padding:0;overflow:hidden;cursor:zoom-in}
.map-reference>img{display:block;width:100%;height:auto;filter:none;opacity:1}
.map-highlight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.map-highlight circle{fill:rgb(255 255 255 / 35%);stroke:var(--bronze);stroke-width:4}
.map-expand{position:absolute;bottom:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgb(255 255 255 / 85%);color:var(--ink);font-size:24px}
.location .map-selection{position:static;background:rgb(255 255 255 / 55%);padding:20px 24px}
.location .poi-tabs{gap:8px;border:0;flex-wrap:wrap}
.location .poi-tabs button{padding:11px 13px;min-height:44px;background:rgb(135 82 63 / 9%);border:1px solid rgb(135 82 63 / 18%);border-radius:4px;color:var(--ink)}
.location .poi-tabs button[aria-pressed=true]{background:rgb(135 82 63 / 19%);border-color:var(--bronze);box-shadow:inset 0 -2px var(--bronze)}
.location .poi-tabs button:hover{background:rgb(135 82 63 / 24%)}
@container(max-width:700px){.location .map-panel{min-height:0}.location .map-selection{padding:16px}.location .poi-tabs{gap:6px}.location .poi-tabs button{padding:10px 12px}}
.amenities.section{background:linear-gradient(135deg,#faf5eb 0%,#eee0cf 100%)}


/* Shared radius for previously square surfaces; circular controls stay circular. */
:root{--corner-radius:5px}
:where(section,header,footer,nav,figure,dialog,video,img:not(.leaflet-tile),a,button,input,select,textarea,.button,.gallery-main,.aerial-main,.gallery-thumbs,.aerial-thumbs,.map-panel,.map-selection,.residence-carousel,.residence-detail,.legacy-stage,.legacy-card,.contact-form,.mobile-menu,.mobile-cta){border-radius:var(--corner-radius)}
.contact-form input:not([type=checkbox]),.contact-form select{border-radius:var(--corner-radius)}
.site .button,.site .amenity-nav button,.site .type-nav button,.site .poi-tabs button,.site .timeline-tabs button,.site .poi-item,.gallery-thumbs button,.aerial-thumbs button{border-radius:var(--corner-radius)}

.legacy-frame{border-radius:var(--corner-radius)}


/* FAQ and contact revision — 24 October 2026. */
.faq.section{background:linear-gradient(135deg,#e5eddf,#d4dfcd);color:var(--ink);gap:6%;grid-template-columns:.85fr 1.15fr;align-items:start}
.faq .eyebrow,.faq h2 em{color:var(--bronze)}
.faq-intro{font-size:13px;max-width:340px;line-height:1.8;margin-bottom:26px}
.faq-visual{margin:0 0 24px;position:relative;overflow:hidden;max-width:420px}
.faq-visual img{width:100%;aspect-ratio:1.2;object-fit:cover;display:block}
.faq-visual figcaption{position:absolute;inset:auto 0 0;padding:35px 20px 18px;background:linear-gradient(transparent,#302018c9);color:#fff;font-size:8px;letter-spacing:.15em}
.faq .text-link{color:var(--ink);border-color:var(--bronze)}
.faq-list{display:grid;gap:10px;min-width:0}
.faq .faq-list details{border:1px solid #87523f26;background:#faf7f0;border-radius:5px;overflow:hidden;transition:background .2s,border-color .2s}
.faq .faq-list details[open]{background:#fffdf8;border-color:#87523f80;box-shadow:0 8px 24px #4933200a}
.faq .faq-list summary{padding:20px;display:grid;grid-template-columns:30px 1fr 28px;align-items:center;gap:14px;transform:none;text-align:left}
.faq .faq-list summary .faq-number{font-family:Vera;font-size:24px;color:var(--bronze);transform:none}
.faq .faq-list summary .faq-question{font-family:inherit;font-size:12px;line-height:1.6;color:var(--ink);transform:none}
.faq .faq-list summary .faq-toggle{display:grid;place-items:center;border:1px solid #87523f38;border-radius:50%;width:28px;height:28px;font-size:22px;color:var(--bronze);transition:transform .2s}
.faq .faq-list details[open] .faq-toggle{transform:rotate(45deg)}
.faq .faq-list details>p{padding:0 60px 24px 64px;color:#51443b;font-size:12px;line-height:1.9}
.faq .faq-list summary:hover{background:#efe4d6;color:var(--ink)}
.faq-list summary:focus-visible{outline:2px solid var(--bronze);outline-offset:-4px}
.contact-whatsapp{display:inline-flex;align-items:center;gap:10px;padding:12px 0;line-height:1.5}
.whatsapp-icon{width:23px;height:23px;flex-shrink:0}
.footer{background:#38251e;color:#fbf5ec}
.footer-top>img{filter:brightness(0) invert(1)}
.footer .footer-bottom{color:#dfcfc2;border-color:#dfcfc23b}
.footer a:focus-visible{outline:2px solid #dfcfc2;outline-offset:4px}
.form-verification{margin:20px 0;color:var(--muted);font-size:10px;line-height:1.7;overflow:hidden}
#contact-recaptcha:empty{display:none}
.form-verification p{margin:8px 0}
.contact-form button:disabled{opacity:.6;cursor:wait}
@container(max-width:700px){
 .faq.section{grid-template-columns:1fr;gap:28px}
 .faq-visual{max-width:none}.faq-visual img{aspect-ratio:1.7}
 .faq-intro{max-width:none;font-size:12px}
 .faq .faq-list summary{padding:17px 14px;gap:9px;grid-template-columns:26px 1fr 26px}
 .faq .faq-list summary .faq-question{font-size:12px}
 .faq .faq-list summary .faq-number{font-size:21px}
 .faq .faq-list details>p{padding:0 18px 20px 49px;font-size:12px}
}

/* Comfortable horizontal spacing for text controls; image and circular controls retain their geometry. */
.site button:not(.round):not(.menu-toggle):not(.gallery-main):not(.aerial-main):not(.construction-photo-button):not(.dialog-close):not(.gallery-thumbs button):not(.aerial-thumbs button),.view-tools button{padding-inline:16px}
.site .button{padding-inline:24px}
.site .text-link,.site .download-link,.site .contact-whatsapp,.site .header-contact,.site .explore,.site .mobile-cta a{padding-inline:18px}
.site .aerial-thumbs span{padding-inline:8px}
@container(max-width:700px){.site .button{padding-inline:20px}.site .amenity-nav button,.site .type-nav button,.site .poi-tabs button{padding-inline:12px}}
.form-verification[hidden]{display:none}

/* Draw the FAQ toggle geometrically to avoid font baseline offsets. */
.faq .faq-list summary .faq-toggle{position:relative;display:block;font-size:0;line-height:0;flex-shrink:0}
.faq .faq-list summary .faq-toggle::before,.faq .faq-list summary .faq-toggle::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.faq .faq-list summary .faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}

/* Header texture and compact mobile contact bar. */
.header{background:#493022 url('assets/p20-553.webp') center/cover;color:#fff8ee}
.header .logo{filter:brightness(0) invert(1)}
.header .lang span{color:#e2cfc0}
.header .header-contact{border-color:#e2cfc0}
.header .menu-toggle span{background:#fff8ee}
.header .desktop-nav a:after{background:#e2cfc0}
@container(max-width:700px){
 .mobile-cta{height:30px;min-height:30px;padding:3px 12px;gap:10px}
 .mobile-cta .mobile-price{font-size:9px;line-height:1.2;max-width:230px;color:var(--ink)}
 .site .mobile-cta a:last-child{flex-shrink:0;font-size:9px;line-height:18px;padding:3px 12px;height:24px;display:flex;align-items:center;justify-content:center}
}

/* Cream foreground throughout the textured header. */
.header{color:#eee0cf}
.header .logo{filter:brightness(0) saturate(100%) invert(93%) sepia(15%) saturate(349%) hue-rotate(343deg) brightness(96%) contrast(94%)}
.header .lang,.header .lang span,.header .header-contact,.header .desktop-nav a{color:#eee0cf}
.header .header-contact{border-color:#eee0cf}
.header .menu-toggle span,.header .desktop-nav a:after{background:#eee0cf}
.header .lang:hover,.header .header-contact:hover,.header .desktop-nav a:hover{color:#eee0cf!important;background:rgb(238 224 207 / 12%)}
.header a:focus-visible,.header button:focus-visible{outline-color:#eee0cf}