/* ## DEV
**************************************************/
	#header-root,#main-root{
		/* background-color: var(--gray10); */
	}
	#pageLayout{
		/* background-color: var(--gray20); */
	}

/* ## Fonts & Typography
**************************************************/
	@font-face {
		font-family: 'inter';
		src: local(''),
			url('./fonts/inter/Inter.woff2') format('woff2');
		font-weight: 1 999;
	}
	body{
		font-family: inter;
		color: var(--brand04);
		line-height: 1.7;
		font-size: 17px;
	}
	p{
		margin-bottom: 1rem;
		&:only-child, &:last-child{
			margin-bottom: 0;
		}
	}
	h1,h2,h3,h4,h5,h6{
		color: var(--brand04);
	}
	:is(h1,h2,h3,h4,h5,h6):is(:first-child){
		margin-top: 0;
	}
	h1{
		font-size: clamp(30px, 20.816px + 2.041vw, 60px);
		line-height: 1.1;
		margin-top: 0;
		color: var(--brand03);
	}

	h2{
		font-size: 3rem;
		margin-bottom: 1rem;
		line-height: 1.1;
	}
	h3{
		font-size: 1.8rem;
		line-height: 1.2;
		margin-bottom: 1rem;
	}


/* ## Colour
**************************************************/
	.txt-white{color:white}

/* ## Layout
**************************************************/
	body{
		background-color: var(--pale);
		margin: 0;
		overflow-x: clip;
	}

	#pageLayout{
		width: 100%;
		max-width: var(--widthDefault);
		z-index: 0;
		display: flex;
		@media(max-width: 810px){
			display: block;
		}
		.sidebar{
			/* border-left: dotted 1px rgba(0, 0, 0, 0.5); */
			/* background: linear-gradient(90deg,rgba(230, 223, 213, 1) 1%, rgba(255, 255, 255, 0) 100%); */
			background: radial-gradient(circle,rgba(230, 223, 213, 1) 1%, rgba(255, 255, 255, 0) 100%);
		}
	}
	#header-root{
		position: sticky;
		top: 80px;
		height: fit-content;
		padding-left: 100px;
		z-index: 20;
		transition: all 1s ease;
		@media(max-width: 810px){
			top: 30px;
			padding-left: 15px;
		}
		.logo-wrap{
			transition: all 0.5s ease;
			width: 110px;
			height: fit-content;
			max-height: 300px;
			border-radius: 20px;
			overflow: clip;
			img.logo{
				max-width: 110px; /*prevent flash of huge*/
				display: block;
			}
		}
	}
	body.scrolled #header-root{
		top: 0;
		.logo-wrap{
			max-height: 78px;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
		}
	}
	main#main-root{
		padding-left: clamp(15px, -47.027px + 7.658vw, 100px);
		padding-right: 20px;
		padding-top: var(--unit-xl);
		padding-bottom: var(--unit-xl);
		min-width: 0 !important;
	}

	footer#footer-root{
		background-color: var(--brand02);
		.inner{
			width: 100%;
			max-width: var(--widthDefault);
			margin-inline: auto;
			padding-inline: var(--unit-md);
		}
	}
/* ## Components
**************************************************/
	div.spacer-xl{height:var(--unit-xl)}
	div.spacer-lg{height:var(--unit-lg)}
	div.spacer-md{height:var(--unit-md)}
	div.spacer-sm{height:var(--unit-sm)}

	.belt{
		position: relative;
		padding-left: var(--unit-md);
		&::before{
			content: '';
			position: absolute;
			width: 100vw;
			height: 100%;
			left: 0;
			top: 0;
			z-index: -1;
			border-radius: 12px 0 0 12px;
		}
	}
	.cols-2{
		display:grid;
		grid-template-columns: 1fr 1fr;
		@media(max-width: 810px){
			grid-template-columns: 1fr;
			.media{
				margin-inline: auto;
			}
		}
	}

/* ## --Buttons
================================= */
	.button-group{
		display: flex;
		gap: 15px;
	}
	.btn{
		padding: 16px 32px;
		background-color: var(--brand02);
		color: var(--brand03);
		font-weight: 600;
		border-radius: 99px;
		font-size: 1.2rem;
		text-decoration: none;
		line-height: 1;
		display: inline-grid;
		place-content: center;
		width: fit-content;
		cursor: pointer;
		&:hover{
			background-color: var(--brand03) !important;
			color: white !important;
		}
	}
	.btn.btn-alt{
		background-color: transparent;
		box-shadow: inset 0 0 0 2px var(--brand03);
		&:hover{
			background-color: var(--brand03);
			color: white;
		}
	}
	#footer-root input.btn{
		background-color: white;
		margin-bottom: var(--unit-sm);
	}

/* ## --Accordion */
	.accordion-item {
		margin-bottom: 12px;
		padding-block: 12px;
		border-bottom: 1px dashed rgb(195, 195, 195);
		.title {
			cursor: pointer;
			display:flex;
			justify-content: space-between;
			align-items: center;
		}
		.indicator {
			width: 30px;
			aspect-ratio: 1;
			transition: all 0.4s ease;
		}
		.content {
			opacity: 0;
			max-height: 0;
			overflow: hidden;
			transition: all 0.25s ease-in-out;
		}
		&.accordion__active{
			.indicator{
				transform: rotate(90deg);
			}
			.content {
				opacity: 1;
			}
		}
	}

/* ## --Forms */
	input, textarea{
		display: block;
		margin-bottom: 4px;
		padding: 16px;
		border-radius: var(--unit-xs);
		border: 1px solid rgba(0, 0, 0, 0.1);
		width: 100%;
		font-size: 1rem;
		&::placeholder{
			font-family: monospace;
			opacity: 0.3;
		}
	}


/* ## Footer
**************************************************/


/* ## Pages
**************************************************/

/* SECTION -Home */
/* ## Hero */
	body.page-welcome{
		#hero.section{
			.headline{
				h2{
					font-size: 36px;
					font-weight: 300;
					color: var(--gray30);
				}
			}
			.media{
				max-width: 500px;
				margin-left: auto;
			}
			.button-group{
				width: 100%;
			}
			@media(max-width: 1200px){
				padding-top: 0;
				grid-template-columns: 1fr;
				.media{
					order: -1;
					margin-left: 0;
				}
			}
		}

/* ## Intro */
	#intro.section{
		@media(max-width: 1200px){
			margin-left: 0;
		}
	}

/* ## Audience */
		#audience.section{
			&.belt::before{
				background-color: var(--brand03);
			}
			.cols-2{
				row-gap: var(--unit-sm);
				column-gap: var(--unit-lg);
			}
			.inner{
				display:grid;
				grid-template-columns: 1fr 1fr;
				gap: var(--unit-md);
				@media(max-width: 1024px){
					grid-template-columns: 1fr;
				}
				.card{
					background-color: var(--pale);
					border-bottom-right-radius: var(--unit-sm);
					align-items: center;
					padding-bottom: 5vh;
					&::before{
						content: '';
						background-size: cover;
						display: block;
						height: 16px;
						margin-bottom: 5vh;
					}
					img{
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					.content{
						padding: var(--unit-sm);
					}
				}
				.card1::before{background-image: url(./images/strip9.webp);}
				.card2::before{background-image: url(./images/strip8.webp);}
				.card3::before{background-image: url(./images/strip4.webp);}
				.card4::before{background-image: url(./images/strip5.webp);}
			}
		}

/* ## About */
		#about.section{
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: var(--unit-md);
			img{
				max-width: 400px;
				display: block;
			}
		}

/* ## Reasons */
		#reasons.section{
			.cols-2{
				grid-template-columns: 2fr 1fr;
			}
			.media{
				order: 2;
				img{
					max-width: 400px;
					display: block;
					margin-left: auto;
				}
			}
			.items{
				columns: 2;
				column-gap: 60px;
				@media(max-width: 1200px){
					columns: 1;
				}
			}
			.item{
				break-inside: avoid;
				margin-bottom: var(--unit-sm);
			}
			h4{
				margin: 0;
			}
			p{
				margin: 0;
			}
			@media(max-width: 960px){
				.cols-2{
					grid-template-columns: 1fr;
				}
				.media{
					order: -1;
					img{
						margin-left: 0;
					}
				}
			}
		}

/* ## Testimonials */
		#testimonials.section{
			max-width: var(--widthDefault);
			margin: 0 auto;
			.swiper-slide{
				min-width: 0;
				background-color: var(--brand03);
				color: white;
				padding: var(--unit-sm);
				border-radius: 12px;
				height: auto;
				opacity: 0.3;
				transition: all 2.5s ease;
				max-width: 400px;
				.content{
					font-style: italic;
				}
				.author{
					font-weight: bolder;
				}
			}
			.swiper-slide.swiper-slide-active{
				opacity: 1;
			}
		}
	}