/* Hero section */
.full-bleed{width:100vw;position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.hero{position:relative}
.hero .slides{position:relative; height: clamp(340px, 60vh, 720px)}
.hero .slide{position:absolute; inset:0; opacity:0; animation:none}
.hero .slide.active{opacity:1}
/* default fade for non-effect cases */
.hero .slide.active:not([class*="effect-"]){animation:fadeIn .6s ease both}
.hero .slide img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05)}
.hero .veil{position:absolute; inset:0; background:radial-gradient(120% 80% at 70% 30%, rgba(0,0,0,.15), rgba(0,0,0,.6)); pointer-events:none}
.hero .overlay{position:absolute; inset:0; display:flex; align-items:flex-end; padding:0 0 34px 0; z-index:3}
.hero .overlay .container{width:100%}
.hero .content{max-width:980px; backdrop-filter:saturate(140%) blur(2px)}
.hero .kicker{display:inline-block; font-size:16px; letter-spacing:.3px; padding:6px 10px; border-radius:999px; color:#e5e7eb; background:rgba(30,41,59,.48); border:1px solid rgba(255,255,255,.18); margin-bottom:10px}
.hero .title{margin:0 0 10px; font-size:40px; line-height:1.15; color:#fff; text-shadow:0 6px 24px rgba(0,0,0,.45)}
.hero .text{color:#cbd5e1; font-size:16px}
.hero .actions{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}
.hero .btn-cta{display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,#22d3ee,#2563eb); color:#fff; border:1px solid rgba(255,255,255,.12); padding:12px 18px; border-radius:12px; box-shadow:0 10px 26px rgba(34,211,238,.25), 0 6px 18px rgba(37,99,235,.28)}
.hero .btn-ghost{display:inline-flex; align-items:center; gap:10px; background:rgba(17,24,39,.55); color:#fff; border:1px solid rgba(255,255,255,.18); padding:12px 16px; border-radius:12px}
.hero .controls{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; z-index:5}
.hero .ctrl{pointer-events:auto; background:rgba(0,0,0,.35); border:1px solid var(--border); color:#fff; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; margin:0 10px}
.hero .dots{position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:8px}
.hero .dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.45)}
.hero .dot.active{background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.22)}
@media (max-width: 768px){ .hero .slides{height:320px} .hero .title{font-size:26px} }
/* Effects */
@keyframes slideInLeft{from{opacity:0; transform:translate3d(-24px,0,0)} to{opacity:1; transform:none}}
@keyframes zoomIn{from{opacity:.2; transform:scale(1.06)} to{opacity:1; transform:scale(1)}}
@keyframes slideUp{from{opacity:0; transform:translate3d(0,24px,0)} to{opacity:1; transform:none}}
@keyframes blurIn{from{opacity:0; filter:blur(8px)} to{opacity:1; filter:blur(0)}}
@keyframes wipeX{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes wipeY{from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes kenburns{from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.06) translate3d(0,0,0)}}
.hero .slide.effect-fade.active{animation:fadeIn .6s ease both}
.hero .slide.effect-slide-left.active{animation:slideInLeft .6s ease both}
.hero .slide.effect-slide-up.active{animation:slideUp .6s ease both}
.hero .slide.effect-zoom-in.active{animation:zoomIn .7s ease both}
.hero .slide.effect-blur-in.active{animation:blurIn .7s ease both}
.hero .slide.effect-wipe-horizontal.active img{animation:wipeX .7s ease both; will-change:clip-path}
.hero .slide.effect-wipe-vertical.active img{animation:wipeY .7s ease both; will-change:clip-path}
.hero .slide.effect-kenburns.active img{animation:kenburns 12s ease both}
/* Tiles mosaic reveal */
.hero .slide .tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(6,1fr);pointer-events:none;z-index:2}
.hero .slide .tiles span{display:block;width:100%;height:100%;background:rgba(0,0,0,.8);opacity:1}
@keyframes tileFade{to{opacity:0}}
.hero .slide.effect-tiles.active .tiles span{animation:tileFade .6s ease forwards;animation-delay:calc(var(--i) * 35ms)}
.hero .slide.effect-diagonal-tiles.active .tiles span{animation:tileFade .6s ease forwards;animation-delay:calc(var(--i) * 35ms)}
/* Mobile opt: fewer tiles */
@media (max-width: 768px){ .hero .slide .tiles{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr)} }

/* About (kept for potential reuse) */
.about-grid{display:grid;gap:18px;align-items:center}
@media (min-width:768px){.about-grid{grid-template-columns:1.1fr 1.4fr}}
.about-photo-wrap{position:relative; display:block; max-height:360px}
.about-photo{width:100%;height:100%;max-height:360px;object-fit:cover;display:block}
.about-photo{clip-path:ellipse(60% 50% at 50% 50%)}
.about-photo-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:40px;clip-path:ellipse(62% 52% at 50% 50%);padding:2px;background:conic-gradient(from 180deg at 50% 50%, rgba(34,211,238,.6), rgba(37,99,235,.6), rgba(34,211,238,.6));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)}

/* Gallery carousel */
.gallery-carousel{margin-top:40px}
.gallery-track{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.gallery-track::-webkit-scrollbar{height:8px}
.gallery-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:999px}
.gallery-item{flex:0 0 auto; width:280px; height:180px; border-radius:14px; overflow:hidden; scroll-snap-align:center; position:relative}
.gallery-item img{width:100%;height:100%;object-fit:cover}
.gallery-controls{display:flex;justify-content:center;gap:10px;margin-top:10px}
.gallery-btn{background:#111;color:#fff;border:1px solid var(--border);width:36px;height:36px;border-radius:50%;display:grid;place-items:center}

/* Lightbox */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:1000;padding:24px}
.lightbox-overlay.active{display:flex}
.lightbox-content{position:relative;max-width:min(96vw,1400px);max-height:90vh}
.lightbox-img{max-width:100%;max-height:90vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:-12px;right:-12px;background:#111;color:#fff;border:1px solid rgba(255,255,255,.2);width:40px;height:40px;border-radius:999px;display:grid;place-items:center;cursor:pointer}
.lightbox-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.lightbox-nav button{pointer-events:auto;background:rgba(0,0,0,.4);color:#fff;border:1px solid rgba(255,255,255,.2);width:44px;height:44px;border-radius:999px;display:grid;place-items:center}

/* Sticky reservation widget */
.sticky-reserve{position:sticky; bottom:16px; z-index:40; margin:0 auto; max-width:1200px; display:flex; justify-content:flex-end; padding:0 20px}
.reserve-form{display:flex; gap:10px; align-items:end; background:rgba(17,24,39,.7); border:1px solid rgba(255,255,255,.12); padding:10px; border-radius:14px; backdrop-filter:saturate(130%) blur(6px)}
.reserve-row{display:flex; flex-direction:column; gap:6px}
.reserve-row label{font-size:12px; color:#cbd5e1}
.reserve-row input{height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; padding:0 10px}
.reserve-btn{height:38px}
@media (max-width: 768px){
  .reserve-form{flex-wrap:wrap}
  .sticky-reserve{padding:0 12px}
}

/* Featured villas */
.badge{display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; background:rgba(217,183,154,.12); color:#d9b79a; border:1px solid rgba(217,183,154,.35)}

/* Testimonials */
.testimonials .rating-pill{display:inline-block; padding:6px 10px; border-radius:999px; background:#14532d; color:#a7f3d0; border:1px solid rgba(16,185,129,.35)}
.t-slider{display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.t-card{flex:0 0 auto; width:320px; scroll-snap-align:start; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px}
.t-head{display:flex; align-items:center; gap:10px}
.t-avatar{width:44px; height:44px; border-radius:50%; object-fit:cover}
.t-name{font-weight:600}
.t-meta{font-size:12px; color:#9ca3af}
.t-rating{margin-left:auto; font-weight:700; color:#fbbf24}
.t-body{margin-top:8px; color:#e5e7eb; font-size:14px; line-height:1.5}

/* FAQs */
.faq-list{display:grid; gap:10px}
.faq-item{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:4px 10px}
.faq-item summary{cursor:pointer; padding:8px 6px; font-weight:600}
.faq-item[open] summary{border-bottom:1px solid rgba(255,255,255,.08)}
.faq-answer{padding:10px 6px; color:#cbd5e1}

/* Utilities */
.section{padding:40px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.section-title{margin:0}
.grid{display:grid; gap:18px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 960px){ .cols-3{grid-template-columns:1fr} .cols-2{grid-template-columns:1fr} }

/* Theme accents */
:root{ --gold:#d9b79a; --gold-2:#cba776 }
.gold-sep{height:2px; background:linear-gradient(90deg, transparent 0, var(--gold) 12%, var(--gold-2) 50%, var(--gold) 88%, transparent 100%); border-radius:999px; margin:32px 0; position:relative}
.gold-sep::after{content:""; position:absolute; right:8%; top:50%; transform:translateY(-50%); width:72px; height:8px; border-radius:999px; background:linear-gradient(90deg, var(--gold), var(--gold-2)); opacity:.9}

/* Framed imagery */
.framed{border:4px solid #fff; border-radius:18px; box-shadow:0 10px 26px rgba(0,0,0,.25)}
.rounded-lg{border-radius:18px}
.rounded-xl{border-radius:22px}

/* Apply frames in specific contexts */
.gallery-item{border-radius:18px; overflow:hidden}
.gallery-item.framed{border:4px solid #fff; box-shadow:0 10px 26px rgba(0,0,0,.25)}