:root {
	--color-brand:			 #546b2e;
	--color-brand-mid:	 #779C3D;
	--color-brand-light: #5ae874;
	
	--typescale: 1.333;
	--type-step-5: calc(1rem * pow(var(--typescale), 5));
	--type-step-4: calc(1rem * pow(var(--typescale), 4));
	--type-step-3: calc(1rem * pow(var(--typescale), 3));
	--type-step-2: calc(1rem * pow(var(--typescale), 2));
	--type-step-1: calc(1rem * pow(var(--typescale), 1));
	--type-step-0: 1rem;
	--type-step--1: .875rem;
	
	line-height: 1.5;
	font-size: 1rem;
	scroll-behavior: smooth;
}

	* {
		margin: 0;
		padding: 0;
		background-repeat: no-repeat;
		box-sizing: border-box;
	}
	
	img {
			max-width: 100%;
			height: auto;
			display: block;
	}

	@view-transition {
		navigation: auto;
	}
	
	.sr-only {
		left:-9999rem;
		top:auto;
		width:1px;
		height:1px;
		overflow: hidden;
		position: absolute;
	}
	
	body {
		font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		font-optical-sizing: auto;
		font-weight: 400 800;
		font-style: normal;
		
		background: #fff;
		background: #D6F5D6;
		background: #DBF0DB;
		background: #fef2ed;
		
		> * {
			
		}
	}
	
	h1, h2, h3, .top-nav {
		/* font-family: "din-condensed", sans-serif; */
		color: var(--color-brand);
		/* font-family: "dharma-gothic-e", sans-serif;
		font-family: "roc-grotesk", sans-serif; */
		/* font-family: "mongoose", sans-serif; */
		/* font-family: "bebas-neue", sans-serif;
		
		font-family: "pf-fuel-grime", sans-serif;
		font-family: "veneer-three", sans-serif; */

		font-weight: 700;
		font-style: normal;
		/* text-transform: uppercase; */
	}
	

	h1 {
		/* font-size: 2.986rem; */
		/* font-size: 13vw; */
		/* line-height: .75; */
		/* letter-spacing: -0.075rem; */
		
		font-size: var(--type-step-3);
		font-weight: 700;
	}
	
	h2 {
		/* font-size: 2.074rem; */
		/* line-height: 1; */
		/* letter-spacing: -0.075rem; */
		
		font-size: var(--type-step-2);
		font-weight: 700;
		letter-spacing: -0.05rem;
		
		 + * {
			 margin-block-start: .5rlh;
		 }
	}
	
	h3 {
		/* font-size: 2.488rem; */
		/* font-size: 2.074rem; */
		/* line-height: 1; */
		/* letter-spacing: -0.025rem; */
		
		font-size: var(--type-step-1);
		font-weight: 700;
		
		 + * {
			 margin-block-start: 0;
		 }
		 
		 + h4 {
			 margin-block-start: 0;
		 }
	}
	
	p {
		max-inline-size: 40rem;
	}
	
	a {
		transition: all .2s ease-in-out;
		color: inherit;
		font-weight: 500;
		text-decoration-color: var(--color-brand-light);
		text-underline-offset: .2rlh;
		text-decoration-thickness: 2px;
		
		&:hover {
			text-decoration-color: var(--color-brand);
		}
	}
	
	nav ul {
		list-style-type: none;
		display: flex;
		flex-wrap: wrap;
		gap: 1rlh;
	}
	
	.top-nav {
		position: sticky;
		top: 0;
		z-index: 100;
		background: hsla(0,0%,100%,0.92);
		
		/* background: hsla(120,40%,90%,0.9); */
		backdrop-filter: blur(6px);
		font-weight: 700;
		padding: 1rlh 6vw .5rlh 6vw;
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		gap: 2rlh;
		/* mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgb(0, 0, 0) 20%); */
		/* h1 {
			flex-basis: 20%;
		} */
		
		img {
			width: 25rem;
		}
		
		a {
			text-decoration: none;
			/* border-bottom: 3px solid transparent;
			text-underline-offset: 6px; */
		}

		ul {
			align-items: end;
			line-height: .9;
			transition: all .2s ease-in-out;
			height: 4rem;
			margin-block-start: .25rlh;
		}
		
		li {
			transition: all .2s ease-in-out;
			
			a {
				color: var(--color-brand-mid);
				font-weight: 700;
				/* text-transform: uppercase; */
				/* letter-spacing: -0.025rem; */
			}
			
			&.active {
				/* margin-block-end: -.25rem; */
				
				a {
					color: var(--color-brand);
				 letter-spacing: -0.025rem;
					border-bottom-color: var(--color-brand);
					/* font-size: var(--type-step-2); */
				}
			}
		}
	

	}
	
	.flow {
		> * + * {
			margin-block-start: 1rlh;
		}
	}
	
	section {
		/* min-height: 60vh; */
		padding: 3rlh 6vw;
		/* scroll-margin-top: 6rlh; */
		
		> * + * {
			margin-block-start: 1rlh;
		}
	}
	
	.people {
		display: grid;
		gap: 2rlh;
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
		
		h3 {
			margin-block-start: .5rlh;
		}
		
		h4 + p {
			margin-block-start: .5rlh;
		}
		
		span {
			font-weight: 400;
		}
	}
	
	.flex {
		display: flex;
		flex-wrap: wrap;
		gap: 2rlh;
		
		&.small {
			gap: .25rlh;
			align-items: center;
		}
	}
	
	#contact {
		padding-block-end: 6rlh;
	}

footer {
	padding: 3rlh 6vw;
}