:root{
			--teal:#159d92;
			--teal-dark:#087d75;
			--teal-soft:#e5f7f4;
			--ink:#202b35;
			--muted:#707b83;
			--line:#e8edef;
			--bg:#fbfcfc;
			--white:#fff;
			--danger:#df6262;
			--shadow:0 14px 40px rgba(24,45,51,.10);
		}
		*{box-sizing:border-box;margin:0;padding:0}
		html{scroll-behavior:smooth}
		body{
			font-family:"Plus Jakarta Sans",sans-serif;
			background:#eef2f1;
			color:var(--ink);
			line-height:1.5;
		}
		button,a{font:inherit}
		a{text-decoration:none;color:inherit}
		img{display:block;width:100%}
		.page{
			width:100%;
			max-width:560px;
			margin:auto;
			min-height:100vh;
			background:var(--bg);
			overflow:hidden;
			position:relative;
		}
		.container{padding-left:22px;padding-right:22px}
		/* Header */
		.topbar{
			position:absolute;
			top:0;left:0;right:0;
			z-index:20;
			padding:18px 22px;
			display:flex;
			justify-content:space-between;
			align-items:center;
		}
		.brand{
			display:flex;
			align-items:center;
			gap:9px;
			color:#fff;
			text-shadow:0 2px 8px rgba(0,0,0,.22);
		}
		.brand-icon{
			width:43px;height:43px;
			border:2px solid rgba(255,255,255,.95);
			border-radius:13px;
			display:grid;place-items:center;
			font-size:23px;
		}
		.brand-name{
			font-family:"Manrope",sans-serif;
			font-size:19px;
			font-weight:800;
			letter-spacing:-.7px;
		}
		.brand-name span{color:#54c8be}
		.brand-sub{font-size:10px;opacity:.9;margin-top:-2px}
		.menu{
			width:49px;height:49px;
			border:0;border-radius:15px;
			background:rgba(255,255,255,.95);
			color:var(--ink);
			box-shadow:0 7px 22px rgba(0,0,0,.13);
			font-size:24px;
			cursor:pointer;
		}
		/* Hero */
		.hero{
			min-height:710px;
			position:relative;
			padding:138px 22px 0;
			overflow:hidden;
			background:
			linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.94) 33%,rgba(255,255,255,.25) 70%,rgba(255,255,255,0) 100%),
			linear-gradient(180deg,rgba(255,255,255,0) 55%,#fbfcfc 100%),
			url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1200&q=88") center/cover;
		}
		.hero:after{
			content:"";
			position:absolute;
			left:0;right:0;bottom:0;height:190px;
			background:linear-gradient(transparent,var(--bg));
		}
		.hero-content{position:relative;z-index:2}
		.pill{
			display:inline-flex;
			margin-top: 20px;
			padding:8px 15px;
			border-radius:99px;
			background:var(--teal);
			color:#fff;
			font-size:12px;
			font-weight:800;
			letter-spacing:.7px;
			margin-bottom:17px;
		}
		h1{
			font-family:"Manrope",sans-serif;
			font-size:45px;
			line-height:1.02;
			letter-spacing:-2px;
			max-width:340px;
			margin-bottom:15px;
		}
		h1 span{color:var(--teal)}
		.hero-text{
			max-width:360px;
			color:#4d5961;
			font-size:15px;
			line-height:1.55;
			font-weight: 500;
		}
		.hero-stats{
			position:absolute;
			z-index:4;
			left:22px;right:22px;
			bottom:104px;
			display:grid;
			grid-template-columns:repeat(4,1fr);
			gap:7px;
			padding:11px;
			background:rgba(255,255,255,.92);
			border:1px solid rgba(255,255,255,.8);
			border-radius:21px;
			box-shadow:var(--shadow);
			backdrop-filter:blur(10px);
		}
		.stat{
			text-align:center;
			padding:5px 2px;
			border-right:1px solid #e8ecec;
		}
		.stat:last-child{border:0}
		.stat-icon{width:40px;height:45px;object-fit:contain;margin:0 auto 1px}
		.stat strong{display:block;font-family:"Manrope",sans-serif;font-size:15px}
		.stat small{display:block;color:var(--muted);font-size:10px}
		.hero-buttons{
			position:absolute;
			z-index:5;
			bottom:36px;
			left:22px;right:22px;
			display:grid;
			grid-template-columns:1fr 1fr;
			gap:10px;
		}
		.btn{
			min-height:53px;
			border-radius:16px;
			display:flex;
			align-items:center;
			justify-content:center;
			gap:8px;
			font-weight:800;
			font-size:14px;
			border:1px solid var(--line);
			background:#fff;
			box-shadow:0 8px 20px rgba(24,45,51,.08);
		}
		.btn-icon{
			width:34px;
			height:34px;
			object-fit:contain;
			flex:0 0 24px;
		}
		.btn-icon2{
			width:34px;
			height:30px;
			object-fit:contain;
			flex:0 0 24px;
		}

		.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
		.btn-primary:hover{background:var(--teal-dark)}
		.btn-outline{color:var(--ink)}
		/* Availability */
		.availability{
			margin:-17px 22px 0;
			position:relative;
			z-index:10;
			background:#fff;
			border:1px solid var(--line);
			border-radius:22px;
			padding:18px;
			display:flex;
			align-items:center;
			gap:13px;
			box-shadow:var(--shadow);
		}
		.av-icon{
			width:51px;height:51px;
			flex:0 0 51px;
			border-radius:16px;
			background:var(--teal-soft);
			color:var(--teal);
			display:grid;place-items:center;
			font-size:23px;
		}
		.av-icon img{width:40px;height:40px;object-fit:contain;margin:0 auto}
		.availability small{
			color:#657077;
			font-size:10px;
			font-weight:800;
			letter-spacing:.4px;
		}
		.availability strong{
			display:block;
			font-family:"Manrope",sans-serif;
			font-size:24px;
			line-height:1.2;
		}
		.availability .detail{
			margin-left:auto;
			min-width:90px;
			height:43px;
			border:1px solid var(--line);
			border-radius:13px;
			display:grid;place-items:center;
			font-size:12px;
			font-weight:800;
		}
		/* Sections */
		section{padding:34px 0}
		.section-label{
			display:flex;align-items:center;gap:8px;
			color:#3f4a50;
			font-size:11px;
			font-weight:800;
			letter-spacing:.8px;
			margin-bottom:8px;
		}
		.section-label:before{
			content:"";
			width:10px;height:10px;border-radius:50%;
			background:var(--teal);
		}
		.section-title{
			font-family:"Manrope",sans-serif;
			font-size:28px;
			line-height:1.15;
			letter-spacing:-1px;
		}
		.section-title span{color:var(--teal)}
		/* Facilities */
		.facility-grid{
			margin-top:23px;
			display:grid;
			grid-template-columns:repeat(5,1fr);
			border-top:1px solid var(--line);
			border-bottom:1px solid var(--line);
		}
		.facility{
			text-align:center;
			padding:12px 4px 13px;
			border-right:1px solid var(--line);
		}
		.facility:nth-child(5n){border-right:0}
		.facility:nth-child(n+6){border-top:1px solid var(--line)}
		.facility-icon{
			height:52px;
			width:100%;
			display:grid;
			place-items:center;
			margin-bottom:6px;
		}
		.facility-icon img{
			width:48px;
			height:48px;
			object-fit:contain;
			margin:0 auto;
		}
		.facility b{font-size:10px;line-height:1.25;display:block;position:relative;z-index:2}
		.facility span{font-size:9px;color:#68737a;display:block;position:relative;z-index:2}
		/* Rooms */
		.room-section{padding-top:38px}
		.section-row{
			display:flex;align-items:end;justify-content:space-between;
			margin-bottom:18px;
		}
		.see-all{color:var(--teal);font-size:12px;font-weight:800}
		.room-scroll{
			display:flex;
			gap:14px;
			overflow-x:auto;
			padding-bottom:8px;
			margin-right:-22px;
			scrollbar-width:none;
		}
		.room-scroll::-webkit-scrollbar{display:none}
		.room-card{
			flex:0 0 238px;
			background:#fff;
			border:1px solid var(--line);
			border-radius:19px;
			overflow:hidden;
			box-shadow:0 7px 22px rgba(24,45,51,.06);
		}
		.room-image{
			height:150px;
			background-size:cover;
			background-position:center;
		}
		.room-body{padding:13px}
		.room-title{
			font-family:"Manrope",sans-serif;
			font-size:17px;
			margin-bottom:5px;
		}
		.room-meta{
			display:flex;gap:11px;
			color:#69747b;
			font-size:10px;
			margin-bottom:11px;
		}
		.room-price{
			font-family:"Manrope",sans-serif;
			color:var(--teal);
			font-size:18px;
		}
		.room-price span{
			color:#7b858b;
			font-family:"DM Sans";
			font-size:10px;
			font-weight:500;
		}
		.status{
			display:inline-flex;
			align-items:center;
			gap:5px;
			background:#e8f8f3;
			color:#20786e;
			padding:5px 8px;
			border-radius:99px;
			font-size:9px;
			font-weight:800;
		}
		.status:before{
			content:"";
			width:6px;height:6px;border-radius:50%;background:#18ae84;
		}
		.status.full{background:#fff0f0;color:#b85a5a}
		.status.full:before{background:var(--danger)}
		/* Gallery - horizontal slider */
		.gallery{
			display:flex;
			gap:11px;
			overflow-x:auto;
			overflow-y:hidden;
			margin-top:20px;
			padding:2px 2px 12px 0;
			scroll-snap-type:x mandatory;
			-webkit-overflow-scrolling:touch;
			scrollbar-width:none;
		}
		.gallery::-webkit-scrollbar{display:none}
		.gallery-item{
			position:relative;
			flex:0 0 76%;
			height:205px;
			border-radius:18px;
			background-size:cover;
			background-position:center;
			scroll-snap-align:start;
			cursor:pointer;
			box-shadow:0 7px 20px rgba(24,45,51,.08);
			overflow:hidden;
		}
		.gallery-item:after{
			content:"⊕";
			position:absolute;
			right:11px;
			bottom:11px;
			width:32px;height:32px;
			border-radius:50%;
			display:grid;
			place-items:center;
			background:rgba(255,255,255,.92);
			color:var(--teal);
			font-size:17px;
			font-weight:800;
			box-shadow:0 5px 15px rgba(0,0,0,.12);
		}
		.gallery-hint{
			display:flex;
			align-items:center;
			justify-content:space-between;
			margin-top:8px;
			color:#778188;
			font-size:9px;
		}
		.gallery-hint strong{color:var(--teal)}
		/* Gallery popup */
		.gallery-modal{
			position:fixed;
			z-index:200;
			inset:0;
			display:none;
			align-items:center;
			justify-content:center;
			padding:20px;
			background:rgba(8,24,27,.92);
			backdrop-filter:blur(7px);
		}
		.gallery-modal.open{display:flex}
		.gallery-modal-inner{
			width:min(520px,100%);
			position:relative;
		}
		.gallery-modal-img{
			width:100%;
			max-height:78vh;
			object-fit:contain;
			border-radius:16px;
			box-shadow:0 20px 60px rgba(0,0,0,.35);
		}
		.gallery-close{
			position:absolute;
			right:0;
			top:-52px;
			width:43px;height:43px;
			border:0;
			border-radius:14px;
			background:#fff;
			color:var(--ink);
			font-size:25px;
			cursor:pointer;
		}
		.gallery-prev,.gallery-next{
			position:absolute;
			top:50%;
			transform:translateY(-50%);
			width:42px;height:42px;
			border:0;
			border-radius:50%;
			background:rgba(255,255,255,.94);
			color:var(--teal-dark);
			font-size:22px;
			cursor:pointer;
			box-shadow:0 7px 20px rgba(0,0,0,.15);
		}
		.gallery-prev{left:-8px}
		.gallery-next{right:-8px}
		.gallery-counter{
			text-align:center;
			color:#fff;
			font-size:10px;
			margin-top:10px;
			opacity:.9;
		}
		@media(max-width:560px){
			.gallery-item{flex-basis:82%;height:205px}
			.gallery-modal{padding:12px}
			.gallery-prev{left:2px}
			.gallery-next{right:2px}
		}
		/* Location */
		.location-card{
			margin-top:20px;
			background:#fff;
			border:1px solid var(--line);
			border-radius:21px;
			overflow:hidden;
			box-shadow:0 8px 25px rgba(24,45,51,.06);
		}
		.map{
			height:210px;
			background:
			linear-gradient(135deg,rgba(21,157,146,.07),rgba(255,255,255,.7)),
			repeating-linear-gradient(30deg,#edf2f1 0,#edf2f1 2px,#f8faf9 2px,#f8faf9 36px);
			position:relative;
			display:grid;place-items:center;
		}
		.map:before{
			content:"";
			width:75%;
			height:2px;
			background:#cddbd8;
			position:absolute;
			transform:rotate(-20deg);
		}
		.map-pin{
			position:relative;
			z-index:2;
			width:62px;height:62px;
			border-radius:50% 50% 50% 5px;
			transform:rotate(-45deg);
			background:var(--teal);
			display:grid;place-items:center;
			box-shadow:0 9px 25px rgba(21,157,146,.3);
		}
		.map-pin:after{
			content:"";
			width:20px;height:20px;
			border-radius:50%;
			background:#fff;
		}
		.location-info{padding:18px}
		.location-info h3{font-family:"Manrope",sans-serif;font-size:19px}
		.location-info p{font-size:12px;color:var(--muted);margin-top:3px}
		.location-link{
			margin-top:13px;
			display:inline-flex;
			color:var(--teal);
			font-size:12px;font-weight:800;
		}
		/* CTA */
		.cta{
			margin:5px 22px 35px;
			border-radius:24px;
			padding:25px 20px;
			color:#fff;
			background:linear-gradient(135deg,#0b8c83,#126b65);
			position:relative;
			overflow:hidden;
		}
		.cta:after{
			content:"";
			position:absolute;
			width:180px;height:180px;
			border-radius:50%;
			right:-70px;top:-85px;
			background:rgba(255,255,255,.09);
		}
		.cta h2{
			font-family:"Manrope",sans-serif;
			font-size:24px;
			line-height:1.15;
			position:relative;z-index:1;
		}
		.cta p{
			color:#d8f2ef;
			font-size:12px;
			margin:8px 0 17px;
			max-width:290px;
		}
		.cta .btn{width:100%;position:relative;z-index:1}
		/* Bottom navigation */
		.bottom-nav{
			position:sticky;
			bottom:0;
			z-index:30;
			height:76px;
			padding:7px 12px calc(7px + env(safe-area-inset-bottom));
			background:rgba(255,255,255,.95);
			backdrop-filter:blur(16px);
			border-top:1px solid var(--line);
			display:grid;
			grid-template-columns:repeat(5,1fr);
		}
		.nav-item{
			display:flex;
			flex-direction:column;
			align-items:center;
			justify-content:center;
			gap:2px;
			color:#899398;
			font-size:9px;
			font-weight:700;
		}
		.nav-item i{font-style:normal;font-size:20px;line-height:1}
		.nav-item.active{color:var(--teal)}
		.nav-center{
			width:57px;height:57px;
			margin:-23px auto 0;
			border-radius:50%;
			background:var(--teal);
			color:#fff;
			display:grid;place-items:center;
			font-size:23px;
			box-shadow:0 9px 24px rgba(21,157,146,.35);
			border:5px solid var(--bg);
		}
		/* Floating WhatsApp */
		.whatsapp{
			position:fixed;
			z-index:40;
			right:max(18px,calc((100vw - 560px)/2 + 18px));
			bottom:90px;
			width:57px;height:57px;
			border-radius:50%;
			background:#20b96f;
			color:#fff;
			display:grid;place-items:center;
			box-shadow:0 10px 28px rgba(32,185,111,.30);
		}
		.whatsapp img{
			width:31px;
			height:31px;
			object-fit:contain;
		}
		.wa-label{
			position:absolute;
			right:62px;
			white-space:nowrap;
			background:#fff;
			color:#4c565b;
			padding:6px 10px;
			border-radius:10px;
			font-size:10px;
			box-shadow:0 5px 15px rgba(0,0,0,.08);
		}
		/* Desktop preview */
		@media(min-width:561px){
			.page{box-shadow:0 0 70px rgba(0,0,0,.10)}
		}
		@media(max-width:390px){
			h1{font-size:40px}
			.hero{min-height:690px}
			.facility b{font-size:9px}
			.facility span{font-size:8px}
			.facility-icon{height:48px}
			.facility-icon img{width:43px;height:43px}
			.hero-stats{padding:8px}
			.stat strong{font-size:13px}
			.stat-icon{width:32px;height:32px}
		}

		/* === LOCATION + CONTACT SIDE BY SIDE === */
		.location-contact-grid{
			display:grid;
			grid-template-columns:1fr 1fr;
			gap:10px;
			padding:0 12px 28px;
		}
		.location-half,
		.contact-half{
			min-width:0;
		}
		.location-half .container{
			padding:0;
		}
		.location-half .section-label,
		.location-half .section-title{
			margin-left:8px;
		}
		.location-half .section-title{
			font-size:21px;
			letter-spacing:-.7px;
		}
		.location-half .location-card{
			margin-top:12px;
			height:205px;
			border-radius:18px;
		}
		.location-half .map{
			height:120px;
		}
		.location-half .map-pin{
			width:44px;
			height:44px;
		}
		.location-half .map-pin:after{
			width:14px;
			height:14px;
		}
		.location-half .location-info{
			padding:12px;
		}
		.location-half .location-info h3{
			font-size:14px;
		}
		.location-half .location-info p{
			font-size:9px;
			line-height:1.35;
		}
		.location-half .location-link{
			margin-top:8px;
			font-size:9px;
		}
		.contact-half.cta{
			margin:96px 0 0;
			padding:20px 16px;
			height:205px;
			min-height:205px;
			border-radius:18px;
			display:flex;
			flex-direction:column;
			justify-content:center;
		}
		.contact-half.cta h2{
			font-size:21px;
		}
		.contact-half.cta p{
			font-size:10px;
			line-height:1.45;
			margin:7px 0 14px;
		}
		.contact-half.cta .btn{
			font-size:10px;
			min-height:43px;
			padding:7px 8px;
		}
		.contact-half .btn-icon{
			width:19px;
			height:19px;
			flex-basis:19px;
		}

		/* === IMAGE BOTTOM NAV === */
		.bottom-nav .nav-item img{
			width:28px;
			height:28px;
			object-fit:contain;
			margin-bottom:1px;
		}
		.bottom-nav .nav-center{
			width:57px;
			height:57px;
			padding:0;
		}
		.bottom-nav .nav-center img{
			width:27px;
			height:27px;
			object-fit:contain;
			filter:brightness(0) invert(1);
		}
		.bottom-nav .nav-item.active img{
			width:28px;
			height:28px;
		}

		/* Keep the two halves side-by-side on phones */
		@media(max-width:390px){
			.location-contact-grid{
				gap:7px;
				padding-left:8px;
				padding-right:8px;
			}
			.location-half .section-label,
			.location-half .section-title{
				margin-left:5px;
			}
			.location-half .section-label{
				font-size:8px;
			}
			.location-half .section-title{
				font-size:18px;
			}
			.location-half .map{height:105px}
			.location-half .location-info{padding:9px}
			.location-half .location-info h3{font-size:12px}
			.location-half .location-info p{font-size:8px}
			.location-half .location-link{font-size:8px}
			.contact-half.cta{
				height:172px;
				min-height:0;
				margin-top:95px;
				padding:15px 11px;
			}
			.contact-half.cta h2{font-size:18px}
			.contact-half.cta p{font-size:8px}
			.contact-half.cta .btn{font-size:8px}
			.contact-half .btn-icon{width:16px;height:16px;flex-basis:16px}
		}

		/* ===== MODERN TYPOGRAPHY ===== */
		body{
			-webkit-font-smoothing:antialiased;
			-moz-osx-font-smoothing:grayscale;
			text-rendering:optimizeLegibility;
			letter-spacing:-0.01em;
		}
		h1,.section-title,.room-title,.location-info h3,.cta h2,.brand-title,.av-value{
			letter-spacing:-0.035em;
		}
		h1{
			font-weight:800;
		}
		.section-title{
			font-weight:800;
		}
		.hero-desc,.location-info p,.cta p{
			letter-spacing:-0.005em;
		}
		.btn,.nav-item,.see-all,.av-detail,.status,.pill,.section-label{
			letter-spacing:-0.01em;
		}
		.stat-value{
			font-weight:800;
		}