.hero {
	min-height:760px;
	display:flex;
	align-items:flex-end;
	position:relative;
	background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.48)),
	url("../images/hero.webp") center/cover}

.hero-content {
	color:white;
	padding:0 0 105px;
	max-width:760px
}

.hero .kicker {
	font-size:11px;
	letter-spacing:.22em;
	text-transform:uppercase;
	margin-bottom:18px
}

.hero h1 {
	font-size:clamp(46px,6vw,82px);
	max-width:780px
}

.hero p{
	font-size:18px;
	max-width:620px;
	margin:24px 0 30px;
	color:rgba(255,255,255,.92)
}

.actions{
	display:flex;
	gap:12px;
	flex-wrap:wrap
}

.trust{
	background:var(--green);
	color:white
}

.trust-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr)
}

.trust-item{
	padding:28px 20px;
	text-align:center;
	border-right:1px solid rgba(255,255,255,.16)
}

.trust-item:last-child{
	border:0}.trust strong{display:block;
	font:28px Georgia,serif
}

.trust span{
	font-size:10px;
	letter-spacing:.12em;
	text-transform:uppercase;
	opacity:.82
}

.intro {
	background:var(--ivory);
	text-align:center
}

.intro-inner {
	max-width:820px;
	margin:auto
}

.intro p {
	color:var(--muted);
	font-size:17px;
	margin:25px auto 0;
	max-width:700px
}

.section-head {
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:30px;
	margin-bottom:42px
}

.section-head p {
	max-width:470px;
	color:var(--muted);
	margin:0
}

.cards {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px
}

.card {
	background:white;
	border:1px solid var(--line)
}

.card-img {
	display:block;
	width:100%;
	height:330px;
	object-fit:cover;
	object-position:center
}

.card-body {
	padding:26px
}

.card h3{
	font-size:30px
}

.card p {
	color:var(--muted);
	font-size:14px
}

.feature {
	display:grid;
	grid-template-columns:1.05fr .95fr;
	min-height:680px
}

.feature-img {
	background:url("../images/private-villa-experience.webp") center/cover
}

.feature-copy{
	background:var(--green);
	color:white;
	padding:80px max(7vw,50px);
	display:flex;
	flex-direction:column;
	justify-content:center

}

.feature-copy p{
	color:rgba(255,255,255,.78);
	max-width:500px;
	font-size:16px
}

.feature-copy .eyebrow{
	color:#d7b39f
}

.why{
	background:var(--ivory)}

.why-grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:18px;
	margin-top:50px
}

.why-item{
	padding:28px 18px;
	border-top:1px solid var(--line)
}

.why-item h3{
	font-size:23px;
	margin-bottom:10px
}

.why-item p{
	font-size:13px;
	color:var(--muted);margin:0
}

.reviews{
	text-align:center
}

.rating{
	font:64px Georgia,serif;
	color:var(--green);
	margin:22px 0 0

}

.review-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
	margin-top:45px;
	text-align:left
}

.review{
	padding:30px;background:var(--ivory)
}

.review p{
	font:20px/1.5 Georgia,serif
}

.review small{
	color:var(--muted);
	letter-spacing:.08em;
	text-transform:uppercase;
	font-size:10px
}

.location{
	display:grid;
	grid-template-columns:1fr 1fr
}

.location-copy{
	background:#e8e3d8;
	padding:90px max(7vw,40px);
	display:flex;flex-direction:column;
	justify-content:center
}

.location-copy p{
	max-width:500px;
	color:var(--muted)
}

.map-placeholder{
	min-height:560px;
	background:linear-gradient(rgba(53,72,59,.2),rgba(53,72,59,.2)),
		url("../images/sanur-beach.webp") center/cover
}

.gallery-grid{
	display:grid;
	grid-template-columns:2fr 1fr 1fr;
	grid-template-rows:280px 280px;
	gap:8px;
	margin-top:45px
}

.gallery-grid div{
	background-size:cover;
	background-position:center
}

.g1{
	grid-row:span 2;
	background-image:url("../images/katala-villas-gallery.webp")
}

.g2{
	background-image:url("../images/garden-gallery.webp")
}

.g3{
	background-image:url("../images/public-pool-gallery.webp")

}

.g4{
	background-image:url("../images/restaurant-gallery.webp")
}

.g5{
	background-image:url("../images/garden2-gallery.webp")
}

.cta{
	padding:120px 20px;
	text-align:center;
	color:white;
	background:linear-gradient(rgba(20,30,24,.55),rgba(20,30,24,.65)),
		url("../images/katala-villas-gallery.webp") center/cover}

.cta h2{
	font-size:clamp(42px,5vw,70px)
}

.cta p{
	max-width:600px;margin:20px auto 30px;
	color:rgba(255,255,255,.85)
}

@media(max-width:900px){
	.trust-grid{
		grid-template-columns:repeat(2,1fr)
	}.cards,.review-grid{
		grid-template-columns:1fr
	}
	.why-grid{
		grid-template-columns:repeat(2,1fr)
	}
	.feature,.location{
		grid-template-columns:1fr
	}
	.feature-img{
		min-height:480px
	}
	.map-placeholder{
		min-height:420px
	}
	.gallery-grid{
		grid-template-columns:1fr 1fr;
		grid-template-rows:240px 240px 240px
	}
	.g1{
		grid-row:span 2
	}
	.g5{
		grid-column:span 2
	}
}

@media(max-width:560px){
	.hero{
		min-height:650px
	}
	.hero-content{
		padding-bottom:70px
	}
	.hero h1{
		font-size:47px
	}
	.hero p{
		font-size:16px
	}
	.trust-item{
		padding:20px 8px
	}
	.trust strong{
		font-size:24px
	}
	.section-head{
		display:block
	}
	.section-head p{
		margin-top:18px
	}
	.why-grid{
		grid-template-columns:1fr
	}
	.feature-copy{
		padding:65px 30px
	}
	.gallery-grid{
		grid-template-columns:1fr;
		grid-template-rows:repeat(5,260px)
	}
	.g1,.g5{
		grid-row:auto;grid-column:auto
	}
}