.page-hero{
  min-height:620px;
  display:flex;
  align-items:flex-end;
  color:white;
  background:
    linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.58)),
    url("../images/villas-hero.webp")
    center/cover;
}
.page-hero-content{padding:0 0 90px;max-width:820px}
.page-hero h1{font-size:clamp(48px,6vw,70px)}
.page-hero p{font-size:18px;max-width:650px;color:rgba(255,255,255,.9);margin:22px 0 0}
.stay-intro{background:var(--ivory);text-align:center}
.stay-intro-inner{max-width:820px;margin:auto}
.stay-intro p{color:var(--muted);font-size:17px;max-width:720px;margin:24px auto 0}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:45px}
.room-card{background:white;border:1px solid var(--line);overflow:hidden}
.room-image{display:block;width:100%;height:370px;object-fit:cover;object-position:center}
.room-body{padding:30px}
.room-body h2{font-size:31px}
.room-body p{color:var(--muted);font-size:14px}
.room-meta{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0 18px}
.room-meta span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);padding:6px 8px;color:var(--muted)}
.room-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.room-actions .btn{min-height:44px;padding:0 18px}
.experience-strip{display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.experience-image{background:url("../images/more-than-room.webp") center/cover}
.experience-copy{background:var(--green);color:white;padding:80px max(7vw,50px);display:flex;flex-direction:column;justify-content:center}
.experience-copy p{max-width:520px;color:rgba(255,255,255,.78)}
.experience-list{display:grid;grid-template-columns:1fr 1fr;gap:15px 30px;margin:25px 0}
.experience-list div{border-top:1px solid rgba(255,255,255,.18);padding-top:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.booking-banner{background:var(--ivory);text-align:center;padding:95px 20px}
.booking-banner p{max-width:620px;margin:20px auto 28px;color:var(--muted)}
@media(max-width:900px){
 .room-grid{grid-template-columns:1fr}
 .experience-strip{grid-template-columns:1fr}
 .experience-image{min-height:450px}
}
@media(max-width:560px){
 .page-hero{min-height:590px}
 .page-hero-content{padding-bottom:70px}
 .room-image{height:300px}
 .experience-copy{padding:65px 30px}
 .experience-list{grid-template-columns:1fr}
}