/* @group FONTS */

@font-face {
 	font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

@font-face {
 	font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
 	font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
 	font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

@font-face {
 	font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* @end */

/* @group ROOT */

:root {
	
	--color-light: 						#fff;
	--color-dark: 							#000;
	--color-grey: 							#8f8f98;
	
	--color-base: 							var(--color-dark);
	--color-active:						var(--color-grey); /* Lighter Grey */
	
	--color-primary: 					#ceda8d; /* Green */
	--color-secondary: 				#66afce; /* Blue */
	
	--color-background-body: 	var(--color-light);
	--color-background-light:	#fff;
	--color-background-dark: 	#191919;
	
	--color-gradient: linear-gradient(90deg,
										var(--color-primary) 0%,
										#9bc5ad 40%,
										var(--color-secondary) 100%);
	
	--font-family: 'Poppins', Verdana, Arial, sans-serif;
	
	--font-xs:			500 clamp(14px, 1.6vw, 16px)/1.1em var(--font-family);
	--font-sm:			400 clamp(16px, 1.8vw, 18px)/1.4em var(--font-family);
	--font: 				400 clamp(16px, 2.2vw, 22px)/1.8em var(--font-family);
	--font-md:			300 clamp(20px, 3.3vw, 33px)/1.5em var(--font-family);
	--font-lg: 			700 clamp(28px, 4.6vw, 44px)/1.2em var(--font-family);
	--font-xl: 			500 clamp(34px, 5.5vw, 55px)/1.25em var(--font-family);
	
	--spacing: 			clamp(2rem, 6vw, 4rem);	
	--spacing-sm: 	clamp(1rem, 3vw, 2rem);
	
	--padding-inline:	clamp(1.2rem, 3.6vw, 1.8rem);
	
	--container: 		1000px;
	--container-lg: 1400px;
	
	--container-padding-inline: clamp(1.2rem, 3.6vw, 1.8rem);
}

@media (max-width: 799px) {
	
	:root {
		
		--body-min-width: 320px;
		
	}
	
}

/* @end */

/* @group BASE */

html,
body {
	min-width: var(--body-min-width);
	background-color: var(--color-background-body);
	color: var(--color-base);
	font: var(--font);
}

body.inverse {
	--color-base: var(--color-light);
	--color-background-body: var(--color-background-dark);
}

strong {
	color: var(--color-base);
	font-weight: 600;
}

h1 {
	max-width: 14em;
	margin-inline: auto;
	background: var(--color-gradient);
  -webkit-background-clip: text;
	background-clip: text;
  -webkit-text-fill-color: transparent;
	color: transparent;
	font: var(--font-xl);
	text-align: center;
}

h1:has(+ *) {
	margin-bottom: 1.2em;
}

h2 {
	color: var(--color-base);
	font: var(--font-lg);
}

.person h2 {
	font: var(--font-md);
	font-weight: 700;
}

h2:not(:first-child) {
	margin-top: 4rem;
}

h2:not(:last-child) {
	margin-bottom: 2rem;
}

h2 + h2:not(:first-child) {
	margin-top: unset;
}

h2 + h2:not(:last-child) {
	margin-bottom: 3.8rem;
}

h3:not(:first-child) {
	margin-top: 2.4em;
}

h3:not(:last-child) {
	margin-bottom: 1em;
}

p:not(:last-child) {
	margin-bottom: 1.8em;
}

p:not(:last-child):has(+ ul) {
	margin-bottom: .9em;
}

.main__text ul:not(:last-child),
.person ul:not(:last-child) {
	margin-bottom: 1.8em;
}

	.main__text ul li,
	.person ul li {
		display: flex;
	}
	
	.main__text ul li:not(:last-child) {
		margin-bottom: .9em;
	}
	
		.main__text ul li::before,
		.person ul li::before {
			content: "·";
			flex: 0 0 .5em;
			margin-right: .5em;
		}
		
blockquote {
	/*font: var(--font-md);*/
	font-weight: 600;
	text-wrap: balance;
}

	.main blockquote p {
		color: var(--color-base);
	}
		
blockquote:not(:last-child) {
	margin-bottom: 1.8rem;
}

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

/* @end */

/* @group Links & Buttons */

.main a,
.footer a {
	text-decoration: underline;
	text-decoration-thickness: .06em;
	text-decoration-color: var(--color-active);
	text-underline-offset: .15em;
	transition: text-decoration .2s ease-in-out 0s;
}

	.colophon a:hover {
		text-decoration-color: var(--color-background-light);
	}
	
.main a,
.bottombar a {
	text-decoration-color: transparent;
}

	.main a:hover {
		text-decoration-color: var(--color-active);
	}
	
	.bottombar a:hover {
		text-decoration-color: currentColor;
	}
	
.main__text a:not([class]) {
	text-decoration-color: var(--color-grey);
}

	.main__text a:not([class]):hover {
		text-decoration-color: var(--color-base);
	}
	
.button {
	display: inline-block;
	padding-block: .4em;
	padding-inline: 1em;
	background-color: var(--color-base);
	color: var(--color-background-body);
	border-radius: 2.2em;
}

/* @end */

/* @group Header */

.header {
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	left: 0;
	padding: clamp(1.2rem, 3.6vw, 1.8rem) clamp(1.2rem, 3.6vw, 2rem);
}

.header--on-hero {
	color: var(--color-background-light);
}

.header--fixed {
	background-color: var(--color-background-dark);
	color: var(--color-background-light);
}

	.header--fixed .logo__image {
		display: none;
	}

.header--offcanvasOpen {
	color: var(--color-background-light);
}
	
	.header--offcanvasOpen .logo__image {
		display: block !important;
	}
	
	@media (min-width: 800px) {
		
		.header--fixed {
			padding-block: 1em;
		}
		
	}


/* @end */

/* @group Topbar */

.topbar {
	display: flex;
	align-items: baseline;
	font: var(--font-xs);
	transition: all .3s ease-in-out 0s;
}
	.topbar__menu {
		display: flex;
		column-gap: 2em;
		margin-left: auto;
	}
	
	.topbar__languages {
		margin-left: 2rem;
	}
	
	.topbar__offcanvas-toggle {
		margin-left: auto;
	}
	
	@media (max-width: 799px) {
		
		.topbar {
			align-items: end;
		}
		
			.topbar__menu {
				display: none;
			}
			
			.topbar__languages {
				display: none !important;
			}
		
	}
	
	@media (min-width: 800px) {
		
			.topbar__logo {
				align-self: start;
			}
	}

/* @end */

/* @group Logo */

.logo {
	display: block;
	width: 7em;
}

	.logo svg {
		display: block;
		width: 100%;
		height: auto;
	}
	
	.logo__image {
		margin-bottom: 0.8em;
	}

/* @end */

/* @group Menu */

.menu {
	
}

	.menu > *:hover {
		text-decoration: underline;
		text-decoration-thickness: .1em;
		text-underline-offset: .2em;
	}

	.menu > *.active {
		color: var(--color-active);
	}

/* @end */

/* @group Languages */

.languages {
	display: flex;
}

	.languages > *:not(:last-child) {
		
	}
	
		.languages > *:not(:last-child):after {
			content: "";
			display: inline-block;
			width: .1em;
			height: .7em;
			margin-left: .5em;
			background-color: currentColor;
		}
		
	.languages > *:last-child {
		margin-left: .5em;
	}
	
	.languages > *.active {
		color: var(--color-active);
	}
	
	@media (min-width: 800px) {
		
		.languages {
			font: var(--font-xs);
		}
		
	}

/* @end */

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 2.2rem;
	height: .7rem;
}

	.hamburger > * {
		display: block;
		position: absolute;
		height: .12em;
		width: 100%;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
	}
	
	.hamburger > * {
		left: 0;
	}
	
	.hamburger > *:nth-child(1) {
		top: 0;
	}

	.hamburger > *:nth-child(2) {
		bottom: 0;
	}
	
	/* offcanvasOpen */
	
	.hamburger.offcanvasOpen {
		height: 2rem;
	}
	
	.hamburger.offcanvasOpen > *:nth-child(1) {
		top: 50%;
		transform: rotate(45deg);
	}
	
	.hamburger.offcanvasOpen > *:nth-child(2) {
		top: 50%;
		transform: rotate(-45deg);
	}

/* @end */

/* @group Offcanvas toggle */

.offcanvas-toggle {
	position: relative;
	vertical-align: top;
}

.offcanvas-toggle--offcanvasOpen {
	align-self: start;
}

	.offcanvas-toggle__label {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-indent: -999px;
	}
	
	@media (min-width: 800px) {
		
		.offcanvas-toggle {
			display: none;
		}
		
	}

/* @end */

/* @group Offcanvas */

.offcanvas {
	position: fixed;
	z-index: 10;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	row-gap: 4rem;
	min-width: var(--body-min-width);
	padding: 10rem 2.5rem 2.5rem;
	background-color: var(--color-background-dark);
	color: var(--color-background-light);
	font: var(--font-xl);
	transform: translateX(-100vw);
  transition: transform 0.3s ease;
}
		
.offcanvas.offcanvasOpen {
	transform: translateX(0);
}

	.offcanvas__languages {
		font: var(--font-md);
	}

	.offcanvas__menu {
		display: flex;
		flex-direction: column;
		row-gap: .3em;
	}

	@media (min-width: 800px) {
		
		.offcanvas {
			display: none;
		}
		
	}

/* @end */

/* @group Intro */

.intro-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100svh;
	min-height: 30rem;
	background-color: var(--color-background-dark);
}

.intro {
	padding-inline: var(--container-padding-inline);
	text-align: center;
}

	.intro__heading {
		margin-bottom: unset;
		color: var(--color-light);
		font-size: clamp(40px, 16vw, 160px);
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		opacity: 0;
		filter: blur(.5em);
		animation: heading 5s;
		animation-delay: .5s;
		animation-fill-mode: forwards;
		transform: translate3d(0, 0, 0);
		will-change: transform;
	}
	
	@keyframes heading {

	  0% {
			opacity: 0;
			filter: blur(.5em);
	  }
	  20% {
			filter: blur(.5em);
	  }
	  50% {
			opacity: 1;
	  }
	  100% {
			opacity: 1;
			filter: blur(0);
		}
	  
	}
	
	.intro__subheading {
		max-width: 17em;
		margin-top: .3em;
		margin-inline: auto;
		color: var(--color-grey);
		font: var(--font-md);
		opacity: 0;
		animation: subheading 4s;
		animation-delay: 5s;
		animation-fill-mode: forwards;
	}
	
	@keyframes subheading {

	  0% {
			opacity: 0;
	  }
	  100% {
			opacity: 1;
		}
	  
	}
	
	@media (max-width: 999px) {
		
		
	}
	
	@media (max-width: 999px) and (orientation: landscape) {
		
		
	}
	
	@media (min-width: 1000px) {
		

		
	}

/* @end */

/* @group Illustration */

.illustration {
	
}

	.illustration__circle {
		position: absolute;
		height: auto;
	}
	
	.illustration__circle--1 {
		top: 47.435%;
		left: 47.435%;
		width: 5.1325%;
	}
	
	.illustration__circle--2 {
		top: 31.3125%;
		left: 31.3125%;
		width: 37.3675%;
	}
	
	.illustration__circle--3 {
		top: 15.2625%;
		left: 15.2625%;
		width: 69.4725%;
	}
	
	.illustration__circle--4 {
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.illustration__placeholder {
		width: 100%;
		height: auto;
	}

/* @group Animation */

	.illustration__circle {
		animation-name: circle;
		animation-duration: 2.7s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}
	
	.illustration__circle--1 {
		animation-delay: .9s;
	}
	
	.illustration__circle--2 {
		animation-delay: .6s;
	}
	
	.illustration__circle--3 {
		animation-delay: .3s;
	}
	
	.illustration__circle--4 {
		animation-delay: 0s;
	}
	
	@keyframes circle {
	
			0% {
				opacity: 1;
				transform: scale(1);
		  }
			
			43% {
				opacity: 1;
				transform: scale(1);
			}
						
			64% {
				opacity: 0;
				transform: scale(.85);
			}
			
			79% {
				opacity: 0;
				transform: scale(.85);
			}
						
			100% {
				opacity: 1;
				transform: scale(1);
		  }
	
	}
	
/* @end */

/* @end */

/* @group Hero */

.hero {
	
}

	.hero img {
		width: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}
	
	@media (max-width: 999px) {
		
			.hero img {
				height: auto;
			}
		
	}
	
	@media (min-width: 1000px) {
		
			.hero img {
				height: 100vh;
			}
		
	}

/* @end */

/* @group Main */

.main {
	box-sizing: content-box;
	max-width: var(--container-lg);
	margin-inline: auto;
	padding-top: clamp(2.6rem, 8vw, 6rem);
	padding-bottom: clamp(7rem, 15vw, 10rem);
	padding-inline: var(--padding-inline);
}

	.main p {
		color: var(--color-grey);
	}

	.main__title {
		margin-bottom: clamp(3.3rem, 12vw, 8rem);
		font: var(--font-sm);
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
		text-transform: uppercase;
	}
	
	.main--no-hero .main__title {
		margin-top: clamp(6rem, 12vw, 8rem);
		margin-bottom: clamp(6rem, 12vw, 8rem);
	}
	
	.main__heading {
		animation: fade-in 3s;
	}
	
	.main__intro {
		margin-bottom: clamp(2.5rem, 9vw, 5rem);
		font: var(--font-lg);
		font-weight: 300;
		line-height: 1.3em;
	}
	
		.main__intro strong {
			font: var(--font-lg);
			color: var(--color-dark);
		}
	
	.main__text {
		max-width: var(--container);
		margin-inline: auto;
	}
	
	.main__text p:has(a:only-child):not(:last-child) {
		margin-bottom: 1.2em;
	}
	
	@media (max-width: 999px) {
		
		.main__heading {
			margin-bottom: clamp(3.3rem, 12vw, 8rem);
		}
		
	}
	
	@media (min-width: 1000px) {
		
			.main__heading {
				position: absolute;
				top: 50vh;
				left: 50vw;
				transform: translateY(-50%) translateX(-50%);
			}
			
			.main__heading--left {
				left: 25%;
				box-sizing: border-box;
				width: 50vw;
				padding-left: var(--padding-inline);
			}
			
				.main__heading--left h1 {
					max-width: 11.5em;
					margin-inline: auto;
				}
		
	}
	
	/* @group Animation */

	@keyframes fade-in {
		
	  0% {
			opacity: 0;
	  }
	  100% {
			opacity: 1;
		}
	  
	}

/* @end */

/* @end */

/* @group Cards & Card */

.cards {
	
}

	.cards > * {
		padding-top: clamp(2.5rem, 9vw, 5rem);
		border-top: 1px solid var(--color-base);
	}

	.cards > *:not(:last-child) {
		margin-bottom: clamp(2.5rem, 9vw, 5rem);
	}

.card {
	display: grid;
	column-gap: 4rem;
	row-gap: 1.5em;
}

	.card__header {
		font: var(--font-md);
		color: var(--color-base);
	}

		.card__header a {
			display: block;
		}
		
	.card__body {
		color: var(--color-grey);
	}
		
	.card__button {
		margin-top: 1.5em;
		color: var(--color-base);
	}
	
		.card__button a::before {
			content: url(../images/more.svg);
			display: inline-block;
			width: 1.7em;
			height: 1.7em;
			margin-right: .6em;
			vertical-align: top;
		}
		
	@media (max-width: 1199px) {
		
		.cards {
			max-width: var(--container);
			margin-inline: auto;
		}
		
			.card__header h2 {
				margin-bottom: unset;
			}
		
	}

	@media (min-width: 1200px) {
		
		.card {
			grid-template-columns: calc(400px - 4rem) 1fr;
		}
	}

/* @end */

/* @group Gallery */

.gallery {
	margin-top: clamp(6rem, 12vw, 8rem);
}

	@media (max-width: 599px) {
		
		.gallery {
			display: flex;
			flex-direction: column;
			align-items: center;
			--gallery-gap: clamp(5rem, 25vw, 7rem);
			row-gap: var(--gallery-gap);
			margin-inline: calc(-1 * var(--padding-inline));
		}
		
			.gallery img {
				width: calc(100% - 2 * var(--padding-inline));
			}
		
			.gallery img.portrait {
				width: calc(75% - 2 * var(--padding-inline));
			}
		
			.gallery > *:nth-child(1) {
				
			}
			
			.gallery > *:nth-child(2) {
				align-self: end;
			}
			
			.gallery > *:nth-child(3) {
				align-self: start;
				margin-top: calc(-1.5 * var(--gallery-gap));
			}
			
			.gallery > *:nth-child(4) {
				align-self: end;
			}
			
			.gallery > *:nth-child(5) {
				z-index: 2;
				align-self: start;
				margin-bottom: calc(-1.25 * var(--gallery-gap));
			}
			
			.gallery > *:nth-child(6) {
				align-self: end;
			}
			
			.gallery > *:nth-child(7) {
				align-self: start;
			}
			
			.gallery > *:nth-child(8) {
				align-self: end;
			}
			
			.gallery > *:nth-child(9) {
				align-self: start;
			}
		
	}
	
	@media (min-width: 600px) and (max-width: 999px) {
		
		.gallery {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-items: start;
		}
		
			.gallery img.portrait {
				width: 75%;
			}
			
			.gallery > *:nth-child(1) {
				order: 2;
				justify-self: end;
			}
			
			.gallery > *:nth-child(2) {
				order: 1;
				margin-top: 19%;
				margin-left: 20%;
			}
			
			.gallery > *:nth-child(3) {
				order: 3;
				margin-top: 20%;
			}
			
			.gallery > *:nth-child(4) {
				order: 4;
				margin-top: -8%;
				margin-left: -12%;
			}
			
			.gallery > *:nth-child(5) {
				z-index: 2;
				order: 6;
				grid-column: 1;
				margin-left: calc(-1 * var(--padding-inline));
			}
			
			.gallery > *:nth-child(6) {
				order: 7;
				margin-top: 40%;
				margin-left: calc(-2 * var(--padding-inline));
			}
			
			.gallery > *:nth-child(7) {
				order: 5;
				grid-column: 2;
				margin-top: -20%;
				margin-left: var(--padding-inline);
			}
			
			.gallery > *:nth-child(8) {
				order: 8;
				justify-self: start;
				margin-top: -10%;
			}
			
			.gallery > *:nth-child(9) {
				order: 9;
				margin-top: 50%;
			}

	}
	
	@media (min-width: 1000px) {
		
		.gallery {
			display: grid;
			align-items: start;
			grid-template-columns: repeat(3, 1fr);
		}
		
			.gallery img.portrait {
				width: 75%;
			}
		
			.gallery > *:nth-child(1) {
				order: 2;
				grid-column: 3;
				justify-self: end;
			}
			
			.gallery > *:nth-child(2) {
				order: 1;
				justify-self: end;
				margin-top: 37%;
				margin-right: -17.25%;
			}
			
			.gallery > *:nth-child(3) {
				order: 3;
				margin-top: -15%;
				margin-bottom: 15%;
			}
			
			.gallery > *:nth-child(4) {
				order: 4;
				grid-column: 3;
				margin-left: -51.25%;
			}
			
			.gallery > *:nth-child(5) {
				z-index: 2;
				order: 6;
				margin-left: 36%;
			}
			
			.gallery > *:nth-child(6) {
				order: 7;
				justify-self: end;
				margin-top: 52%;
			}
			
			.gallery > *:nth-child(7) {
				order: 5;
				margin-top: 41.25%;
			}
			
			.gallery > *:nth-child(8) {
				order: 8;
				justify-self: end;
				margin-top: -7.25%;
				margin-right: -11%;
			}
			
			.gallery > *:nth-child(9) {
				order: 9;
				grid-column: 3;
				margin-top: 60.75%;
				margin-left: -51.5%;
			}
		
	}

/* @end */

/* @group Person */

.person {
	max-width: var(--container);
	margin-inline: auto;
}

	.person__header {
		display: grid;
		column-gap: 2rem;
		row-gap: 2rem;
	}

	h1.person__title {
		margin-bottom: unset;
		line-height: 1.05em;
	}
	
	.person__quote {
		color: var(--color-base);
		font: var(--font-lg);
	}
	
	.person__button {
		display: block;
		margin-top: 3.6em;
		color: var(--color-base);
	}
	
		.person__button a::before {
			content: url(../images/back.svg);
			display: inline-block;
			width: 1.7em;
			height: 1.7em;
			margin-right: .6em;
			vertical-align: top;
		}
	
	@media (max-width: 999px) {
		
			.person__header {
				margin-bottom: 2.75rem;
			}
		
			.person__image {
				width: 16rem;
				margin-inline: auto;
			}
		
	}
	
	@media (min-width: 1000px) {
		
			.person__header {
				grid-template-columns: 1fr 400px;
				margin-bottom: 5rem;
			}
			
			h1.person__title {
				margin-inline: unset;
				max-width: 6em;
				text-align: left;
			}
			
			.person__image {
				grid-row: span 2;
			}
			
			.person__quote {
				align-self: end;
			}
		
	}

/* @end */

/* @group Footer */

.footer {
	padding-block: 2em;
	padding-inline: var(--container-padding-inline);
	background-color: var(--color-background-dark);
	color: var(--color-background-light);
	font: var(--font-sm);
}

/* @end */

/* @group Colophon */

.colophon {
	display: flex;
	column-gap: 2rem;
	row-gap: 1em;
	flex-wrap: wrap;
	max-width: var(--container-lg);
	margin-bottom: 4em;
	margin-inline: auto;
}

	.colophon__site-title {
		font-size: 1.05em;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}

	@media (max-width: 999px) {
		
		.colophon {
			flex-direction: column;
		}
		
	}

	@media (min-width: 1000px) {
	
		.colophon > *:first-child {
			width: calc(200px - 2rem);
		}
	
		.colophon > *:last-child {
			margin-left: auto;
		}
		
	}

/* @end */

/* @group Bottombar */

.bottombar {
	max-width: var(--container-lg);
	margin-right: auto;
	margin-left: auto;
	color: var(--color-grey);
	font: var(--font-xs);
	text-align: right;
}

/* @end */