/* Villa Marais visual polish — presentation only; preserves SEO content and existing functionality. */
:root{--vm-ink:#243b35;--vm-teal:#58b6bc;--vm-cream:#f7f4ee;--vm-copper:#b77855}

/* Stronger first impression without replacing the existing hero copy or image. */
.hero{isolation:isolate}
.hero-shade{background:linear-gradient(100deg,rgba(20,37,31,.86),rgba(20,37,31,.56) 48%,rgba(20,37,31,.18))}
.hero-image{transform:scale(1.025);transition:transform 1.2s cubic-bezier(.2,.65,.2,1)}
.hero:hover .hero-image{transform:scale(1.045)}
.hero-content{animation:vmHeroIn .75s cubic-bezier(.2,.7,.2,1) both}
.hero .eyebrow{letter-spacing:.24em}
.hero-actions .button{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,background-color .2s}
.hero-actions .button:after{content:"";position:absolute;inset:0 auto 0 -120%;width:70%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .65s ease}
.hero-actions .button:hover:after{left:140%}
.hero-actions .button:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(27,53,45,.2)}

/* Premium but quiet treatment for existing content cards. */
.room-card,.feature-card,.local-card,.homepage-faq-item,.about-card,.map-card,.contact-info,.inquiry-form{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.room-card:hover,.feature-card:hover,.local-card:hover,.about-card:hover,.map-card:hover,.contact-info:hover,.inquiry-form:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(36,59,53,.13)}
.room-card,.feature-card,.local-card,.homepage-faq-item{border-top-color:var(--vm-teal)}
.room-card img,.gallery-grid img,.split-image img{transition:transform .55s cubic-bezier(.2,.65,.2,1),filter .35s ease}
.room-card:hover img,.gallery-grid button:hover img,.split-section:hover .split-image img{transform:scale(1.035);filter:saturate(1.05)}

/* Make existing section hierarchy easier to scan without changing wording. */
.section-intro h2,.split-copy h2,.prose h2,.detail-copy h2,.contact-info h2,.about-card h3,.amenity-notes h2{position:relative}
.section-intro h2:after,.split-copy h2:after,.contact-info h2:after{content:"";display:block;width:42px;height:3px;margin:14px auto 0;background:var(--vm-copper);border-radius:9px}
.split-copy h2:after,.contact-info h2:after{margin-left:0}

/* Existing reveal system remains responsible for scroll entry; no important text is hidden. */
.reveal{will-change:transform,opacity}
.booking-band{position:relative;overflow:hidden}
.booking-band:before{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(255,255,255,.18);border-radius:50%;right:-70px;top:-100px;pointer-events:none}

@keyframes vmHeroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:760px){
 .hero-shade{background:linear-gradient(180deg,rgba(20,37,31,.35),rgba(20,37,31,.78))}
 .hero-image{transform:none}
 .hero:hover .hero-image{transform:none}
 .room-card:hover,.feature-card:hover,.local-card:hover,.about-card:hover,.map-card:hover,.contact-info:hover,.inquiry-form:hover{transform:none}
 .section-intro h2:after,.split-copy h2:after,.contact-info h2:after{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
 .hero-content{animation:none}
 .hero-image,.room-card img,.gallery-grid img,.split-image img,.hero-actions .button,.room-card,.feature-card,.local-card,.about-card,.map-card,.contact-info,.inquiry-form{transition:none}
 .hero:hover .hero-image,.room-card:hover img,.gallery-grid button:hover img,.split-section:hover .split-image img{transform:none;filter:none}
}