@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Lexend:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

body,html{
	font-family: var(--mainfont);
	font-size:14px;
}

:root{

	--c1-h: 194;
	--c1-s: 81%;
	--c1-l: 50%;

	--c1: hsl(var(--c1-h),
	 var(--c1-s), 
	var(--c1-l));

	--c1-alt: hsl(var(--c1-h),
		 calc(var(--c1-s) *1.025),
		calc(var(--c1-l) * .85)
	);

	--c1-darker: hsl(var(--c1-h),
		 calc(var(--c1-s) *1.025),
		calc(var(--c1-l) * .7)
	);

	--c1-lighter: hsl(var(--c1-h),
		 calc(var(--c1-s) *1.025), 
		calc(var(--c1-l) * 1.2)
	);

	--c2-h: 22;
	--c2-s: 90%;
	--c2-l: 58%;

	--c2: hsl(var(--c2-h),
	 var(--c2-s), 
	var(--c2-l));

	--c2-alt: hsl(var(--c2-h),
		 calc(var(--c2-s) *1.025),
		calc(var(--c2-l) * .85)
	);

	--c2-darker: hsl(var(--c2-h),
		 calc(var(--c2-s) *1.025),
		calc(var(--c2-l) * .80)
	);

	--c2-lighter: hsl(var(--c2-h),
		 calc(var(--c2-s) *1.025), 
		calc(var(--c2-l) * 1.2)
	);


	--mainfont: 'DM Sans', sans-serif;
	--subfont: 'Lexend', sans-serif;
	--serif: 'Playfair Display', serif;

}

*{
	box-sizing:border-box;
}

.cw{
	width:100%;
	max-width:1100px;
	margin:0px auto;
}

.section{
	padding:4em;
	padding-inline:2em;
}

.img-block{
	display:block;
	max-width:100%;
	height:auto;
}

.img-block.fw{
	width:100%;
}


/*typography*/

h1,h2,h3,h4,h5,h6,p{
	margin:0;
	font-family: var(--subfont);
	letter-spacing: -.025em;
}

.s-t{
	font-size:3em;
	line-height:1.25em;
	font-weight:600;
}

.s-h{
	font-size:1.5em;
	line-height:1.25em;
	font-weight:600;
}

.s-sh{
	font-size:1.25em;
	line-height:1.25em;
	font-weight:600;
}

p{	
	font-weight:400;
	line-height:1.75em;
}

/*topbar*/

.topbar{
	padding:.75em 2em;
	position: sticky;
	top:0;
	left:0;
	z-index:100;
	background:#fff;
}

.tb-logo{
	display:block;
	max-width:14em;
	aspect-ratio:28/9;
	object-fit: contain;

}

.topbar .cw{
	display:flex;
	justify-content: space-between;
	align-items: center;
	gap:2em;
}

.tb-cta{
	background:var(--c2);
	color:#fff;text-decoration: none;
	padding:.75em 1em;
	font-weight:700;
}

.tb-cta:hover{
	background:var(--c2-darker);
}

.inline-cta{
	display:inline-block;
	padding:1em 1.5em;
	text-align: center;
	text-decoration: none;
	margin-bottom:1em;
	margin-inline:1em;
	text-transform: uppercase;
	font-weight:700;
}

.inline-cta.c2{
	background:var(--c2);
	color:#fff;

}

.inline-cta.c2:hover{
	background:var(--c2-darker);
}

.inline-cta.c1{
	background:var(--c1);
	color:#fff;

}

.inline-cta.c1:hover{
	background:var(--c1-darker);
}

/*hero*/

.hero{
	background:url('../img/hero.jpg');
	color:#fff;
	position: relative;
	isolation:isolate;
	background-position: center;
	background-size:cover;
}

.hero .cw{
	padding-right:calc(15% + 6em);
}


.hero::before{
	content:'';
	position: absolute;
	inset:0;
	z-index:-1;
	background:rgba(0,0,0,.5);
}

.hero h1,
.hero h2,
.hero p{
	margin-bottom:1rem;
}

ul{
	padding-left:1.25em;
	text-align: left;
}

ul li{
	margin-bottom:.375em;
	line-height:1.5em;
}

.small-text{
	font-size:.7em;
}

/*fluid section key benefits*/

.key-benefits{
	background:var(--c1);
	color:#fff;
}

.fluid-section{
	position: relative;
	overflow:clip;
	isolation:isolate;
	padding-inline:2em;
}

.cw-flex{
	display:grid;
	grid-template-columns: 2fr 5fr;
}

.key-benefits .left{
	padding-block:2.75em;
}

.key-benefits h2{
	font-size:2em;
}

.key-benefits .right::before{
	content:'';
	position: absolute;
	width:100%;
	height:100%;
	background:#3c4049;
	z-index:-1;
}

.key-benefits .right{
	display:flex;
	align-items: center;
	font-size:.8em;
	font-weight:400;
}

.key-benefits .right > a{
	padding:1.5em 2.75em;
	margin-inline:auto;
	text-align: center;
	letter-spacing: -.025em;
	transition:.3s;
	text-decoration: none;
	color:inherit;
}

.key-benefits .right .bi{
	display:block;
	text-align: center;
	font-size:3em;
	margin-bottom:.5em;
}

.key-benefits .right > a:hover{
	color:var(--c1);
}

/*section2*/

.section2 h2{
	font-weight:300;
	margin-bottom:1rem;
}

.section2 p,
.section2 ul{
	margin-bottom:1em;
}

.s2-grid{
	display:grid;
	grid-template-columns: minmax(0,4fr) minmax(0,1fr);
	gap:3em;
}

.ul-2col{
	-webkit-column-count: 2; 
	-moz-column-count: 2;
	 column-count: 2;
}

/*section3*/

.section3{
	background:url('../img/s3.jpg');
	color:#fff;
	position: relative;
	isolation:isolate;

	background-position: center;
	background-size:cover;
	padding-block:10em;
}

.section3::before{
	content:'';
	position: absolute;
	inset:0;
	background:rgba(0,0,0,.25);
	z-index:-1;
}

.section3 h2{
	font-weight:400;
	margin-bottom:1rem;
}

.section3 h3{
	font-weight:300;
	margin-bottom:1em;
}

/*section4*/

.section4 h2{
	margin-bottom:.5em;
	font-weight:300;
}

.section4 p{
	margin-bottom:1em;
}

.img-grid{
	display:grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	font-size:.9em;
	gap:0 2em;
}

.img-grid .img-subgrid{
	display:grid;
	grid-template-columns: subgrid;
	grid-template-rows:subgrid;
	grid-column: span 2;
	grid-row:span 2;
	gap:0;

}

.img-subgrid .subgrid-inner{
	display:grid;
	grid-template-columns: subgrid;
	grid-template-rows:subgrid;
	grid-column: span 2;
}

.subgrid-inner > div{

	background:#f3f3f3;
}

.img-grid div{
	position: relative;
	isolation:isolate;
	overflow:clip;
}

.img-grid img{
	position: absolute;
	width:100%;
	height:100%;
	inset:0;
	object-fit: cover;
	transition:.3s;
}

.subgrid-inner > div{
	padding:3em 2em;
	transition:.3s;
}

.img-subgrid p{
	margin-top:1em;
}

.img-subgrid > div.alt{
	grid-column: 2;
}

.subgrid-inner:nth-child(even){
	direction: rtl;
}

.img-grid .s-sh{
	letter-spacing: -.025em;
}

.spacer{
	height:4em;
}

.subgrid-inner:hover img{
	transform:scale(1.1);
}

.subgrid-inner:hover > div{
	background:var(--c1);
	color:#fff;
}


/*info section*/

.info-section:nth-child(even){

	background:#f3f3f3;
}

.info-section h2{
	font-weight:300;
	margin-bottom:.5em;
}

.info-section p{
	margin-bottom:1em;
}

.trust-column img{
	margin-inline:auto;
	margin-bottom:2em;
}

.info-section .s2-grid{
	grid-template-columns: minmax(0,5fr) minmax(0,2fr);
}

.info-section .s2-grid img{
	aspect-ratio:4/3;
	object-fit: cover;
}

/*prefooter*/

.prefooter-cta{
	background:var(--c1);
	color:#fff;
}

.prefooter-cta h2,
.prefooter-cta h3{
	font-weight:300;
}

.prefooter-cta .cw{
	display:flex;
	justify-content: space-between;
	align-items: center;
	gap:2em;
}

/*footer*/

footer{
	background:#000;
	color:#606060;
	font-size:.9em;
}

footer p{
	margin-bottom:1em;
}

footer a{
	color:var(--c1);
}

footer a:hover{
	color:#fff;
}

@media(max-width:1024px){
	.hero h1{
		font-size:2.25em !important;
	}
}

@media(max-width:900px){
	.hero .cw{
		padding-right:0;
	}

	.img-grid{
		grid-template-columns: repeat(2,minmax(0,1fr));
	}

	.section{
		padding-inline:1.25em;
	}
}

@media(max-width:767px){

	.tb-logo{
		max-width:7em;
	}

	.fluid-section{
		padding-inline:0;
	}

	.fluid-section .cw-flex{
		display:block;
		text-align: center;
	}

	.cw-flex > div{
		position: relative;
		padding-inline:1.5em;
	}

	.cw-flex > div::before{
		left:0;
		top:0;
	}

	.s2-grid,
	.prefooter-cta .cw{
		display:block;
		text-align: center;
	}

	.prefooter-cta .inline-cta{
		margin-top:2em;
	}

	footer{
		text-align: center;
	}

	footer .tb-logo{
		margin-inline:auto;
	}
}

@media(max-width:560px){
	.img-grid,
	.img-subgrid,
	.img-subgrid{
		display:block !important;
		direction: ltr;
		text-align: center;
	}

	.subgrid-inner > div:has(img){
		padding-block:8em;
	}

	.key-benefits .right{
		flex-wrap:wrap;
	}

	.key-benefits .right .bi{
		font-size:2em;
		margin-bottom: 0;
	}
}