:root {
	--orange:oklch(0.6829 0.1517 42.85);
	--padding:clamp(1rem,5vw,3rem);
	--padding_x2: calc(var(--padding) * 2);
	--padding_x4: calc(var(--padding) * 4);
	--nav_width:300px;
	--ease-out:cubic-bezier(0.16, 1, 0.3, 1);
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter:stable;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	vertical-align:middle;
	max-width:100%;
	height:auto;
	background-repeat: no-repeat;
	background-size:cover;
	font-style: italic;
	shape-margin:1rem;
}

.skip-nav-link {
	position:absolute;
	left:1rem;
	top:0;
	background-color:#000;
	color:#fff;
	padding:0.5rem 1.5rem;
	border-radius: 0 0 0.25rem 0.25rem;
	z-index:100;
	transform:translateY(-120%);
	transition:transform 0.325s ease-out;
}

	.skip-nav-link:focus {
		transform:translateY(0);
	}



::selection {
	background-color:var(--orange);
	color:#000;
}

.orange-bg *::selection {
	background-color:#000;
	color:#fff;
}

body {
	background-color:#e2e2e2;
	color:#000;
	font-family: 'Teko-Variable';
	overflow-x:clip;
}

header {
	position:fixed;
	z-index:1000;
	top:0;
	left:0;
	width:100%;
	padding:var(--padding);
	padding-bottom:0;
	pointer-events: none;
	padding-right:var(--padding_x2);
	clear:left;
	display:grid;
	align-items:center;
	grid-template-columns: max-content 1fr max-content max-content;

	& * {
		pointer-events: all;
	}
	
	& > *:not(nav){
		/* filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); */
		filter:drop-shadow(0 0 5px #fff6);
	}

	& nav {
		position:fixed;
		width:var(--nav_width);
		max-width:100vw;
		left:calc(-1 * var(--nav_width));
		height:100vh;
		top:0;
		background-color:#000;
		padding:3rem;
		z-index:5;
		transition:left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
		overflow-y:auto;

		& #logo {
			margin-block:4rem 1rem;
			display:block;
		}

		& ul {
			list-style: none;

			& a {
				display:block;
				text-decoration: none;
				padding-block:0.5rem;
				text-align:right;
				font-size:2rem;
				width:100%;
				color:#fff;

				&:hover,
				&.active {
					color:var(--orange);
				}
			}
		}
	}

	& #burger {
		position:relative;
		width:2.75rem;
		z-index:1001;
		/* filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); */
		filter:contrast(0%) brightness(0%) drop-shadow(0 0 5px #fff6);;

		&:hover {
			filter:drop-shadow(0 0 5px #fff6);
		}

		& input {
			position:absolute;
			width:100%;
			height:100%;
			margin:0;
			opacity:0;
			cursor:pointer;
		}
		
		&:has(input:checked) ~ nav {
			left:0;
		}

		&:has(input:checked) {
			filter:unset;
		}
	}

	& .social {
		display:flex;
		gap:1rem;

		& a {
			filter:contrast(0%) brightness(0%);

			&:hover {
				filter:unset;
			}
		}

		& img {
			height:2.2rem;
		}
	}

	& .black-btn {
		margin-left:1.1rem;
	}
	
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom:2lh;
	text-wrap:balance;
	color:var(--orange);
	font-weight:500;
	letter-spacing: -0.02em;
	line-height:0.75;
}

main :is(p,li) {
	font-size:1.3rem;
	line-height:1.5;
	margin-bottom:1rem;
	clear:left;
	max-width:90ch;

	& strong {
		font-weight:500;
	}
}

main :is(ul,ol) {
	margin-block:2rem;
	padding-left:1.5rem;

	& li {
		padding-left:0.5rem;

		&::marker {
			color:var(--orange);
		}
	}
}

.align_left { float:left; }
.align_right { float:right; }
.align_center { text-align: center; }
img.align_left { margin:0.5rem 1rem 1rem 0; }
img.align_right { margin:0.5rem 0 1rem 1rem; }
img.align_center { display:block; margin-left:auto; margin-right:auto; }

input, textarea, label, hr{
	clear:left;
	width:100%;
	margin-bottom:0.75rem;
	color:#fff;
}

label {
	color:#fff;
	margin:0;
	font-size:1.2rem;
}

input, textarea {
	background-color:#000;
	border:none;
	padding:0.75rem;
	font-size:1rem;
}

form {
	display:grid;
}

form button.black-btn {
	border:none;
	outline:none;
	cursor:pointer;
	font-size:1.4rem;
	margin-left:auto;

	&:hover {
		background-color:#fff;
		color:#000;
	}
}

.errortext {
	color:#9d0000;
	font-weight:bold;
}

.orange-text { color:var(--orange); }
.black-text { color:#000; }
.white-text { color:#fff; }
.orange-bg { background-color:var(--orange); }

.no-select {
	user-select:none;
}

.black-btn {
	background-color:#000;
	padding:0.5rem 3rem;
	text-decoration: none;
	color:#fff;

	&:hover {
		background-color:var(--orange);
	}

	.orange-bg &:hover {
		background-color:#fff;
		color:#000;
	}
}

.testimonials {
	border-left:var(--padding) solid #000;;
	padding:7.5vw 5vw;
	display:grid;
	grid-template-columns: repeat(3,1fr);
	gap:var(--padding);
	align-items:center;
	background-color:#fff;

	& .test {
		& p {
			text-align: center;
			font-size:4rem;
			font-weight:500;
			line-height: 0.85;
			display:inline;

			&.giver {
				color:var(--orange);
				font-size:2rem;
			}
		} 
	}
}
  
footer {
	padding:3rem var(--padding);
	background-color:#000;
  	clear:both;
	width:100%;
	color:var(--orange);
	display:grid;
	grid-template-columns: max-content 1fr;
	gap:1rem;
	overflow-y:clip;

	& .virtuoso {
		font-size:24vw;
		margin:0;
		line-height:0.5;
		margin-bottom:-20%;
	}

	& .copyright {
		width:100%;
		text-align: right;
	}
}

.anim-delay {
    animation-delay: calc(var(--delay) * 0.1s);
}

.slide_from_bottom,
.slide_from_top,
.slide_from_left,
.slide_from_right,
.fade_in {
	opacity:0;
	animation-duration: 1s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
	animation-timing-function: var(--ease_out);
}

.slide_from_top.run {
	animation-name: slide_from_top;
}

.slide_from_bottom.run {
	animation-name: slide_from_bottom;
}

.slide_from_left.run {
	animation-name: slide_from_left;
}

.slide_from_right.run {
	animation-name: slide_from_right;
}

.fade_in.run {
	animation-name: fade_in;
}

@keyframes slide_from_bottom {
	0% {opacity: 0; transform: translateY(100px);}
	100%{opacity:1; transform: translateY(0);}
}
@keyframes slide_from_top {
	0% {opacity: 0; transform: translateY(-100px);}
	100%{opacity:1; transform: translateY(0);}
}
@keyframes slide_from_left {
	0% {opacity: 0; transform: translateX(-100px);}
	100%{opacity:1; transform: translateX(0);}
}
@keyframes slide_from_right {
	0% {opacity: 0; transform: translateX(100px);}
	100%{opacity:1; transform: translateX(0);}
}
@keyframes fade_in {
	0% {opacity: 0;}
	100%{opacity:1;}
}

@keyframes hover-vertical {
	0%, 100% { transform: translateY(0); } 
	10%, 30%, 50%, 70% { transform: translateY(-8px); } 
	20%, 40%, 60% { transform: translateY(8px); } 
	80% { transform: translateY(6.4px); } 
	90% { transform: translateY(-6.4px);} 
}

.hover-vertical { 
    animation: hover-vertical 25s cubic-bezier(0.455, 0.030, 0.515, 0.955) 0s infinite normal none; 
}

@media screen and (max-width:1200px) {
	.testimonials {
		& .test {
			& p {
				font-size:3rem;
			}
		}
	}
}

@media screen and (max-width:900px) {
	.testimonials {
		& .test {
			& p {
				font-size:2.5rem;
			}
		}
	}
}

@media screen and (max-width:800px) {
	.testimonials {
		grid-template-columns: 1fr;
		gap:3rem;
		padding-block:3rem;

		& .test {
			& p {
				font-size:4rem;
			}
		}
	}
}

@media screen and (max-width:500px) {
	header {
		& .social {
			gap:0.5rem;
		}

		& .black-btn {
			margin-left:0.5rem;
		}
	}

	.testimonials {
		& .test {
			& p {
				font-size:3rem;
			}
		}
	}
}

@media screen and (max-width:375px) {
	header {
		& .black-btn {
			display:none;
		}
	}
}