@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&family=Caveat:wght@500;600&display=swap');
:root{--teal:#004e50;--deep:#003d3f;--gold:#ffc928;--cream:#fffdf6;--ink:#073b40;--mint:#eef8f5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;color:var(--ink);font-family:'DM Sans',sans-serif;background:var(--cream)}a{color:inherit;text-decoration:none}.topbar{height:72px;position:absolute;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 5.5%;background:linear-gradient(180deg,#001d30c9,transparent);color:#fff}.brand{display:flex;align-items:center;gap:12px;font-family:'Playfair Display',serif;font-size:21px}.brand small,.footer-brand small{display:block;color:var(--gold);font-size:13px;text-align:center}.palm{color:var(--gold);font-size:38px}.nav{display:flex;align-items:center;gap:27px;font-size:13px;font-weight:700}.nav a:not(.btn){padding:12px 0}.nav a.active{color:var(--gold);border-bottom:2px solid var(--gold)}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:28px;padding:12px 20px;font-weight:700;font-size:13px;transition:transform .25s,box-shadow .25s;cursor:pointer}.btn:hover{transform:translateY(-3px);box-shadow:0 8px 22px #002e3340}.btn-gold{background:var(--gold);color:#172b23}.btn-outline{border:1.5px solid #fff;color:white;background:#001b273d}.btn-teal{background:var(--teal);color:#fff;width:100%;margin-top:10px}.hero{height:560px;position:relative;display:flex;align-items:center;color:white;background:#123d3c url('../images/hero.jpg') center 54%/cover no-repeat;overflow:hidden}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#001a1ad9 0%,#001c1a91 42%,#001b1a05 78%),linear-gradient(0deg,#001d1d25,transparent)}.hero-copy{position:relative;margin-left:6.5%;margin-top:45px;animation:rise .9s both}.eyebrow{font-family:'Playfair Display',serif;font-size:19px;margin:0 0 4px}.hero h1{font-family:'Playfair Display',serif;font-size:clamp(38px,4.3vw,62px);line-height:1.02;margin:0 0 12px}.hero h1 em{font-style:normal;color:var(--gold)}.hero h3{font-family:'Playfair Display',serif;font-size:20px;margin:0 0 12px}.hero-copy>p:not(.eyebrow){line-height:1.55;font-size:14px}.hero-actions{display:flex;gap:14px;margin-top:24px}.signboard{position:absolute;right:5%;top:37%;background:#653813d9;border:5px solid #98652a;box-shadow:0 10px 25px #0008;padding:18px 22px;text-align:center;transform:rotate(-3deg);font-family:'Playfair Display',serif;color:var(--gold);font-size:20px}.signboard small{display:block;color:#fff0c4;font-size:12px;margin-top:6px}.hero-tag{position:absolute;right:5%;bottom:42px;text-align:center;font-family:'Caveat',cursive;font-size:23px;text-shadow:0 2px 6px #000}.scroll-cue{position:absolute;bottom:8px;left:50%;animation:bob 1.6s infinite}.perks{display:grid;grid-template-columns:repeat(5,1fr);padding:20px 4%;background:#fffdf6;box-shadow:0 5px 22px #003d3f0c}.perks>div{text-align:center;border-right:1px solid #e2ded0;padding:0 8px}.perks>div:last-child{border:0}.perks span{display:block;font-size:29px;color:var(--teal);margin-bottom:4px}.perks b,.perks small{display:block}.perks b{font-size:13px}.perks small{font-size:11px;color:#667c7c;margin-top:4px}.section{padding:34px 4%}.about{display:grid;grid-template-columns:1.15fr 1fr;gap:5%;align-items:center;background:var(--mint);padding:28px 4%}.about-photo{height:270px;border-radius:5px;position:relative;background:#d8e3c5 url('../images/beach.jpg') center/cover}.photo-label{position:absolute;left:25px;top:80px;background:#4b2605dc;color:var(--gold);padding:12px;font-weight:700;transform:rotate(-7deg)}.script{font-family:'Caveat',cursive;color:var(--teal);font-size:34px;font-weight:500;margin:0 0 8px}.about p{font-size:13px;line-height:1.55;margin:7px 0}.tagline{margin-top:12px!important;font-size:26px!important}.section-heading{text-align:center;margin-bottom:18px}.section-heading h2{font-family:'Playfair Display',serif;font-size:26px;margin:0;color:var(--teal)}.section-heading p{font-size:13px;margin:3px 0}.room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.room-card{border:1px solid #d7e1dc;border-radius:5px;overflow:hidden;background:#fff;box-shadow:0 5px 18px #002c2c0a;transition:transform .3s,box-shadow .3s}.room-card:hover{transform:translateY(-6px);box-shadow:0 12px 26px #003d3f22}.room-image{height:150px;background:#d8c5a5 center/cover;position:relative}.room-image span{display:none}.room-1{background-image:url('../images/room-standard.jpg')}.room-2{background-image:url('../images/room-twin.jpg')}.room-3{background-image:url('../images/room-deluxe.jpg')}.room-4{background-image:url('../images/room-family.jpg')}.room-info{padding:12px 14px}.room-info h3{font-size:14px;margin:0 0 7px}.room-info p{font-size:11px;margin:5px 0;color:#315e60}.room-info>b{display:block;font-size:12px;margin-top:12px}.room-info>b small{font-weight:400}.facilities{display:grid;grid-template-columns:1.6fr 1fr;background:linear-gradient(110deg,#003e41,#005354);color:#fff;min-height:190px}.facility-copy{padding:22px 4%}.facility-copy h2{font-family:'Playfair Display',serif;margin:0;font-size:24px}.facility-copy p{font-size:12px;margin:5px 0 22px}.facility-list{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.facility-list>div{text-align:center;border-right:1px solid #ffffff42;font-size:10px;padding:0 3px}.facility-list span{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border:1px solid #ffffffa6;border-radius:50%;font-size:22px;margin:0 auto 8px}.facility-photo{background:url('../images/facilities.jpg') center/cover;min-height:190px}.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;min-height:120px}.gallery-grid>div{height:115px;border-radius:4px;background-position:center;background-size:cover;transition:transform .3s}.gallery-grid>div:hover{transform:scale(1.035)}.g1{background-image:url('../images/facilities.jpg')}.g2{background-image:url('../images/garden.jpg')}.g3{background-image:url('../images/balcony.jpg')}.g4{background-image:url('../images/room-deluxe.jpg')}.g5{background-image:url('../images/beach.jpg')}.reviews{background:#edf8f4;padding-top:22px}.reviews .section-heading{margin-bottom:12px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.review-grid blockquote{background:#fff;border-radius:6px;margin:0;padding:18px;font-size:12px;line-height:1.5;box-shadow:0 4px 15px #003d3f0b}.review-grid b{display:block;color:var(--teal);margin-top:10px}.booking-cta{background:linear-gradient(100deg,#003b39,#075d53);color:#fff;padding:26px 5%;display:flex;justify-content:space-between;align-items:center;gap:25px}.booking-cta h2{font-family:'Playfair Display',serif;margin:0}.booking-cta p{font-size:13px;margin:5px 0}.booking-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.booking-form label{font-size:11px;display:grid;gap:5px}.booking-form input,.booking-form select{padding:10px;border-radius:5px;border:1px solid #bdd1ca;background:#fff;min-width:120px}footer{background:#002f32;color:#fff;font-size:11px}.footer-main{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:20px;padding:24px 5%;align-items:center}.footer-brand{font-family:'Playfair Display',serif;font-size:15px}.copyright{border-top:1px solid #ffffff2e;padding:12px 4%;font-size:10px;color:#bdd1ca;display:flex;justify-content:space-between}.menu-toggle{display:none;background:none;color:#fff;border:0;font-size:25px}.reveal{animation:rise .7s both}@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@media(max-width:900px){.topbar{padding:0 4%;height:66px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:62px;left:0;right:0;padding:20px;background:#003b3fee;flex-direction:column;gap:10px}.nav.open{display:flex}.hero{height:560px}.hero-copy{margin-left:5%;margin-right:4%}.signboard,.hero-tag{display:none}.perks{grid-template-columns:repeat(3,1fr);gap:20px}.perks>div{border:0}.about{grid-template-columns:1fr}.room-grid{grid-template-columns:repeat(2,1fr)}.facility-list{grid-template-columns:repeat(4,1fr);row-gap:18px}.facilities{grid-template-columns:1fr}.facility-photo{min-height:150px}.gallery-grid{grid-template-columns:repeat(3,1fr)}.review-grid{grid-template-columns:1fr}.booking-cta{align-items:flex-start;flex-direction:column}.footer-main{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.brand{font-size:16px}.brand small{font-size:11px}.palm{font-size:28px}.hero{height:530px;background-position:60% center}.hero-copy{margin-top:55px}.hero h1{font-size:39px}.hero h3{font-size:16px}.hero-copy>p:not(.eyebrow){font-size:13px}.hero-actions{flex-wrap:wrap}.perks{grid-template-columns:repeat(2,1fr);padding:20px 3%}.section{padding:28px 4%}.about-photo{height:210px}.room-grid{grid-template-columns:1fr}.room-image{height:190px}.facility-list{grid-template-columns:repeat(3,1fr)}.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-grid>div{height:105px}.booking-form{display:grid;grid-template-columns:1fr 1fr;width:100%}.booking-form .btn{grid-column:1/-1}.footer-main{grid-template-columns:1fr}.copyright{display:block;line-height:1.8}.copyright span{display:block}.desktop{display:none}}

/* v1.0.1 visual alignment: stronger photography and sketch-like spacing */
.hero{background-position:center 48%;}
.about-photo{background-position:center 58%;}
.room-image{background-position:center;background-size:cover;}
.facility-photo{background-position:center 58%;}
.gallery-grid>div{min-height:115px;}


/* v1.0.2 — closer alignment to the approved reference sketch */
.topbar{padding-left:5.4%;padding-right:5.4%;height:68px}
.brand{font-size:20px}
.nav{gap:25px}
.hero{height:368px;background-position:center 47%;background-size:cover}
.hero-shade{background:linear-gradient(90deg,#001a1ad9 0%,#001c1a7e 43%,#001b1a10 83%),linear-gradient(0deg,#001d1d2a,transparent)}
.hero-copy{margin-top:40px}
.hero h1{font-size:clamp(38px,3.8vw,53px)}
.signboard{right:5%;top:34%;padding:15px 18px}
.hero-tag{bottom:34px;font-size:21px}
.perks{padding:13px 4%}
.perks span{font-size:27px}
.about{padding:10px 4%;gap:4.5%}
.about-photo{height:222px}
.rooms.section{padding-top:13px;padding-bottom:12px}
.section-heading{margin-bottom:12px}
.section-heading h2{font-size:25px}
.room-image{height:113px}
.room-info{padding:10px 12px}
.room-info p{margin:4px 0}
.facilities{min-height:155px}
.facility-copy{padding:17px 4%}
.facility-photo{min-height:155px}
.gallery.section{padding-top:10px;padding-bottom:14px}
.gallery-grid{min-height:85px}
.gallery-grid>div{height:84px;min-height:84px}
.reviews{padding-top:10px;padding-bottom:12px}
.review-grid blockquote{padding:13px;font-size:11px}
.footer-main{padding:17px 5%}
.copyright{padding:9px 4%}
@media(max-width:900px){
 .hero{height:520px}
 .about{padding:22px 4%}
 .room-image{height:150px}
 .gallery-grid>div{height:105px}
}
@media(max-width:520px){
 .hero{height:530px}
 .room-image{height:190px}
 .gallery-grid>div{height:105px}
}


/* v1.0.3 — centered, colorful animated facilities section */
.facilities{display:block;position:relative;overflow:hidden;padding:25px 4% 27px;background:radial-gradient(ellipse at 15% 15%,#08716d 0%,transparent 40%),radial-gradient(ellipse at 88% 80%,#075b79 0%,transparent 40%),linear-gradient(115deg,#003638,#005956 52%,#003d50);isolation:isolate}
.facilities:before,.facilities:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);pointer-events:none;z-index:-1}
.facilities:before{width:240px;height:240px;top:-140px;left:20%;background:#ffc92824;animation:facilityGlow 7s ease-in-out infinite alternate}
.facilities:after{width:280px;height:280px;bottom:-180px;right:15%;background:#ff6b9d1f;animation:facilityGlow 8s ease-in-out infinite alternate-reverse}
.facility-copy{padding:0;text-align:center}
.facility-copy h2{font-family:'Playfair Display',serif;font-size:27px;margin:0;color:#fff}
.facility-copy>p{font-size:13px;color:#d6f4ec;margin:5px 0 24px}
.facility-list{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:13px}
.facility-list>div{position:relative;border:1px solid #ffffff3d;border-radius:14px;padding:15px 5px 13px;background:linear-gradient(145deg,#ffffff12,#ffffff05);box-shadow:0 6px 18px #001c2633;backdrop-filter:blur(5px);font-size:11px;font-weight:600;color:#f4fffb;transition:transform .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease;animation:facilityFloat 4.5s ease-in-out infinite}
.facility-list>div:nth-child(2n){animation-delay:.35s}
.facility-list>div:nth-child(3n){animation-delay:.7s}
.facility-list>div:hover{transform:translateY(-8px) scale(1.04);background:#ffffff1c;border-color:#ffc928;box-shadow:0 12px 28px #001c2655}
.facility-list span{display:flex;align-items:center;justify-content:center;width:49px;height:49px;border:1px solid #ffffff80;border-radius:16px;font-size:25px;margin:0 auto 10px;background:linear-gradient(135deg,#ffc928,#ff9b43);color:#073f3e;box-shadow:0 5px 18px #ffc92836;transition:transform .3s,filter .3s}
.facility-list>div:nth-child(2) span{background:linear-gradient(135deg,#74e6ff,#2999ed);color:#033c56}
.facility-list>div:nth-child(3) span{background:linear-gradient(135deg,#ff9bd0,#ec5f9f);color:#5e1643}
.facility-list>div:nth-child(4) span{background:linear-gradient(135deg,#c6a5ff,#8b65ee);color:#2d195a}
.facility-list>div:nth-child(5) span{background:linear-gradient(135deg,#a9f3b4,#35c98b);color:#064d38}
.facility-list>div:nth-child(6) span{background:linear-gradient(135deg,#ffd78a,#ff9e42);color:#64380b}
.facility-list>div:nth-child(7) span{background:linear-gradient(135deg,#fff29a,#f3c629);color:#5c4a00}
.facility-list>div:hover span{transform:rotate(-7deg) scale(1.1);filter:saturate(1.25)}
.facility-photo{display:none}
@keyframes facilityFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes facilityGlow{from{transform:scale(.9);opacity:.65}to{transform:scale(1.15);opacity:1}}
@media(max-width:900px){.facilities{padding:24px 4%}.facility-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
@media(max-width:520px){.facilities{padding:22px 4%}.facility-copy h2{font-size:24px}.facility-copy>p{margin-bottom:18px}.facility-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.facility-list>div{padding:13px 5px;font-size:11px}.facility-list span{width:45px;height:45px}}
@media(prefers-reduced-motion:reduce){.facility-list>div,.facilities:before,.facilities:after{animation:none!important;transition:none!important}}

/* v1.0.4: real photographic assets replace blank screenshot crops */
.hero{background-image:url('../images/hero.jpg');background-color:#003d3f;background-size:cover;background-position:center 52%}.about-photo{background-image:url('../images/beach.jpg');background-size:cover;background-position:center}.room-1{background-image:url('../images/room-standard.jpg')}.room-2{background-image:url('../images/room-twin.jpg')}.room-3{background-image:url('../images/room-deluxe.jpg')}.room-4{background-image:url('../images/room-family.jpg')}.facility-photo{background-image:url('../images/facilities.jpg')}.g1{background-image:url('../images/facilities.jpg')}.g2{background-image:url('../images/garden.jpg')}.g3{background-image:url('../images/balcony.jpg')}.g4{background-image:url('../images/room-deluxe.jpg')}.g5{background-image:url('../images/beach.jpg')}


/* v1.0.5 — animated, colorful availability search directly below the hero */
.booking-search{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:24px 5%;background:linear-gradient(110deg,#003a3c 0%,#00635e 48%,#073e5d 100%);border-top:3px solid #ffc928;border-bottom:3px solid #ffc928}
.booking-search:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(115deg,transparent 15%,#ffffff0b 38%,transparent 62%);background-size:220% 100%;animation:searchShimmer 6s linear infinite}
.booking-search .booking-heading{display:flex;align-items:center;gap:13px;position:relative;z-index:1}
.booking-search .booking-heading h2{font-family:'Playfair Display',serif;font-size:24px;color:#fff;margin:0}
.booking-search .booking-heading p{font-size:12px;color:#d8f5ed;margin:5px 0 0}
.booking-spark{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,#ffc928,#ff9e43);color:#064343;font-size:27px;box-shadow:0 0 25px #ffc92842;animation:sparkPulse 2.5s ease-in-out infinite}
.booking-search .booking-form{position:relative;z-index:1;display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.booking-search .booking-form label{display:grid;gap:7px;color:#fff;font-size:11px;font-weight:700;margin:0}
.booking-search .booking-form label span{white-space:nowrap}
.booking-search .booking-form input,.booking-search .booking-form select{min-width:135px;padding:12px 11px;border-radius:10px;border:1px solid #ffffff50;background:#ffffff;color:#123f3f;font-family:inherit;font-size:12px;box-shadow:0 5px 15px #001c2630;transition:transform .25s,box-shadow .25s,border-color .25s}
.booking-search .booking-form input:focus,.booking-search .booking-form select:focus{outline:none;border-color:#ffc928;box-shadow:0 0 0 3px #ffc92838,0 8px 20px #001c2638;transform:translateY(-2px)}
.booking-search .search-submit{min-height:42px;gap:10px;box-shadow:0 6px 18px #ffc92830;animation:buttonBreathe 3s ease-in-out infinite}
.booking-search .search-submit span{font-size:18px;transition:transform .2s}
.booking-search .search-submit:hover span{transform:translateX(4px)}
.booking-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(20px);pointer-events:none}
.booking-glow.glow-one{width:180px;height:180px;right:26%;top:-110px;background:#ffc92845;animation:searchGlow 6s ease-in-out infinite alternate}
.booking-glow.glow-two{width:190px;height:190px;left:35%;bottom:-150px;background:#3bd6ce2b;animation:searchGlow 7s ease-in-out infinite alternate-reverse}
@keyframes searchShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes sparkPulse{0%,100%{transform:rotate(0) scale(1);box-shadow:0 0 18px #ffc92835}50%{transform:rotate(8deg) scale(1.07);box-shadow:0 0 30px #ffc92865}}
@keyframes buttonBreathe{0%,100%{box-shadow:0 6px 18px #ffc92828}50%{box-shadow:0 8px 26px #ffc92865}}
@keyframes searchGlow{from{transform:translateX(-10px) scale(.85);opacity:.6}to{transform:translateX(15px) scale(1.2);opacity:1}}
@media(max-width:1100px){.booking-search{align-items:flex-start;flex-direction:column}.booking-search .booking-form{width:100%}.booking-search .booking-form label{flex:1}.booking-search .booking-form input,.booking-search .booking-form select{width:100%;min-width:0}}
@media(max-width:600px){.booking-search{padding:22px 5%}.booking-search .booking-heading h2{font-size:21px}.booking-search .booking-form{display:grid;grid-template-columns:1fr 1fr}.booking-search .booking-form label:nth-child(3){grid-column:1/-1}.booking-search .search-submit{grid-column:1/-1;width:100%}}
@media(prefers-reduced-motion:reduce){.booking-search:before,.booking-spark,.booking-search .search-submit,.booking-glow{animation:none!important}}