.hero{
	position:relative;
	display:flex;
	flex-direction:column;
	height:100vh;
	padding:var(--navbar-height) var(--grid-sm);
	z-index: 6;
}

.hero-container {
	display:flex;
	flex-direction:column;
	justify-content:center;
	width:100%;
	height:40vh;
	padding:var(--grid-xl) var(--grid-md) 0
}

.hero-container h1 {
	font-size: var(--mb-font-size-display-sm);
	font-weight: var(--mb-font-weight-display);
	line-height: 1.1em;
	color:var(--mb-surface);
	max-width:16ch;
}

.hero .lava-mask-container {
	height: 100vh;
	padding-bottom:var(--grid-xs)
}

.hero .lava-mask{
	height:100%;
	border-radius: var(--mb-border-radius-xxl);
	-webkit-border-radius: var(--mb-border-radius-xxl);
	-moz-border-radius: var(--mb-border-radius-xxl);
	-ms-border-radius: var(--mb-border-radius-xxl);
	-o-border-radius: var(--mb-border-radius-xxl);
	outline:100vh solid var(--mb-background);
}

.hero .hero-graphics-bg{
	display: flex;
	align-items:center;
	justify-content: center;
	width:100%;
	aspect-ratio:1 / 1;
	margin-right:8vw;
	margin-bottom:calc(0px - 30vh + 5vw);
	padding:var(--grid-xxl);
	z-index:-1;
	transform:translateZ(-100px);
	-webkit-transform:translateZ(-100px);
	-moz-transform:translateZ(-100px);
	-ms-transform:translateZ(-100px);
	-o-transform:translateZ(-100px);
}

.hero .hero-graphics-bg span{
	position: relative;
	display: block;
	content:'';
	background-repeat:no-repeat;
	background-size: contain;
	width:100%;
	max-width:36rem;
	aspect-ratio:1 / 1;
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3e%3cpath fill='rgba%28255, 255, 255, 0.1%29'  d='m599.47,424.83v174.35h-174.93v-174.35h174.93ZM181.52,180.91H0s0,418.26,0,418.26h175.49s0-242.84,0-242.84l181.39-.56v-180.87h242.59s0-174.9,0-174.9H181.52s0,180.91,0,180.91Zm660.96,843.09h-417.95v-174.9h242.59s0-180.87,0-180.87l181.39-.56v-242.84h175.49v418.26h-181.52s0,180.91,0,180.91Z'/%3e%3c/svg%3e");
}

.hero .hero-graphics{
	--mb-elevation-light-shadow-color: var(--mb-primary-container-rgb);
	position:absolute;
	display: block;
	width:90%;
	max-width:50rem;
	aspect-ratio: 16 / 11;
	-webkit-aspect-ratio: 16 / 11;
	top:55%;
	right:0;
	overflow:hidden;
	border-top-left-radius: var(--mb-border-radius-xxl);
	border-bottom-left-radius:var(--mb-border-radius-xxl);
	box-shadow:	22px 22px 40px -4px rgba(var(--mb-elevation-dark-shadow-color), 0.2),		-22px -22px 40px -4px rgba(var(--mb-elevation-light-shadow-color), 0.1);
	z-index:1;
	transform:translateZ(100px);
	-webkit-transform:translateZ(100px);
	-moz-transform:translateZ(100px);
	-ms-transform:translateZ(100px);
	-o-transform:translateZ(100px);
}

.hero .hero-graphics .hero-team-pic{
	position:relative;
	display: block;
	width: 100%;
	height:100%;
	content:'';
	background-image: url("../img/about-team.jpg");
	background-repeat:no-repeat;
	background-position: top center;
	background-size:110%;
}

@media(min-width:768px){
	.hero {
		padding:var(--navbar-height) var(--grid-lg);
	}
}

@media(min-width:992px){
	.hero {
		padding:var(--navbar-height) 5vw;
	}

	.hero .hero-graphics-bg{
		justify-content: flex-start;
	}
	.hero .hero-graphics{
		top:54%;
		width:60%;
		max-width:60rem;
	}
}

.intro, 
.mission{
	position:relative;
	display:flex;
	flex-direction: column;
	justify-content: center;
	row-gap:10vh;
	border-bottom-left-radius: var(--mb-border-radius-xxl);
	border-bottom-right-radius: var(--mb-border-radius-xxl);
	z-index:1
}

.intro{
	margin-top:-2px;
	padding:25vh var(--grid-lg) 15vh;
	z-index:5;
	min-height:calc(70vh + 20vw);
}

.mission{
	margin-top: calc(0px - var(--mb-border-radius-xxl) - 0.2rem);
	padding:10vh var(--grid-lg);
	z-index:4;
	min-height:calc(70vh + 20vw);
	overflow:hidden;
}

.intro h2, 
.mission > h2{
	align-self:flex-start;
	font-family:var(--mb-font-headings);
	font-size: var(--mb-font-size-headline-lg);
	font-weight: var(--mb-font-weight-headline);
	line-height: 1.2em;
	width:100%;
	white-space: pre-wrap;
	max-width: 26ch;
}

.intro h2{
	color:var(--mb-primary);
}

.mission > h2{
	color:var(--mb-tertiary);
}

.intro p,
.mission p {
	align-self:flex-end;
	font-size: var(--mb-font-size-lead);
	font-weight: var(--mb-font-weight-lead);
	color:var(--mb-on-surface-variant);
	max-width: 35ch;
}

.mission .ziggy-container {
	top:0
}

.mission .ziggy-container .ziggy{
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform-origin: center;
}


.header_t1{
	display: flex;
	flex-direction:column;
	padding-top:15vh;
}

.header_t1 h2{
	font-size: var(--mb-font-size-display-sm);
	font-weight: var(--mb-font-weight-display);
	line-height: 1.2em;
	color:var(--mb-on-surface-variant)
}


@media(min-width:768px){
	.intro{
		padding:40vh var(--grid-xl) 15vh;
	}
	.mission{
		padding: 10vh var(--grid-xl)
	}
}

@media(min-width:992px){
	.intro, 
	.mission{
		min-height:100vh;
	}

	.intro{
		padding:40vh 12vh 15vh;
	}

	.mission{
		padding: 10vh 12vh
	}

	.mission .ziggy-container .ziggy{
		background-size: 26vw;
	}
}

.values{
	position:relative;
	display:flex;
	flex-direction: column;
	justify-content: center;
	row-gap:10vh;
	margin-top: calc(0px - var(--mb-border-radius-xxl) - 0.2rem);
	padding:10vh var(--grid-lg);
	z-index:3;
	min-height:100vh;
	overflow:hidden;
}


.values .section-bg {
	position:absolute;
	display:flex;
	justify-content:center;
	width: 100%;
	height:100%;
	top:0;
	top:-100vh;
	left:0;
	opacity:0.3;
	z-index:0;
	transform:translateZ(-100px);
	-webkit-transform:translateZ(-100px);
	-moz-transform:translateZ(-100px);
	-ms-transform:translateZ(-100px);
	-o-transform:translateZ(-100px);
}


.values .section-bg span{
	width: 95vw;
	height:95vw;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 742 742'%3e%3cpath fill='white' d='m447.68,370.94l-76.68,76.68-76.94-76.94,76.68-76.68,76.94,76.94Zm-76.67,189.37l-79.84-79.84-183.96,183.96,77.18,77.18,106.81-106.81,80.02,79.53,79.55-79.55,106.7,106.7,76.93-76.93-183.82-183.82-79.57,79.57Zm76.67-189.63l-76.68-76.68-76.94,76.94,76.68,76.68,76.94-76.94Zm2.9-109.8l183.82-183.82L557.48.13l-106.7,106.7-79.55-79.55-80.02,79.53L184.4,0l-77.18,77.18,183.96,183.96,79.84-79.84,79.57,79.57Zm-156.58,110l76.68,76.68,76.94-76.94-76.68-76.68-76.94,76.94Zm266.31-.27l-79.84,79.84,183.96,183.96,77.18-77.18-106.81-106.81,79.53-80.02-79.55-79.55,106.7-106.7-76.93-76.93-183.82,183.82,79.57,79.57Zm-299.43-79.57L77.05,107.21.13,184.14l106.7,106.7-79.55,79.55,79.53,80.02L0,557.22l77.18,77.18,183.96-183.96-79.84-79.84,79.57-79.57Z'/%3e%3c/svg%3e");
	background-repeat:no-repeat;
	background-size:cover;
}

.values .list-primary {
	max-width:100%;
}

.values .list-primary > li{
	position:relative;
	max-width: 40em;
	flex-direction:column;
	align-items:flex-start;
	row-gap:var(--grid-md);
	padding-left: var(--grid-lg)
}

.values .list-primary > li::before{
	position:absolute;
	display:block;
	content:'';
	width:calc(100% - var(--grid-xs));
	height:100%;
	top:0;
	right:0;
	background-color: var(--mb-surface);
	border-radius: var(--mb-border-radius-md);
	-webkit-border-radius: var(--mb-border-radius-md);
	-moz-border-radius: var(--mb-border-radius-md);
	-ms-border-radius: var(--mb-border-radius-md);
	-o-border-radius: var(--mb-border-radius-md);
}

.values .list-primary li > h3{
	font-size:var(--mb-font-size-title-md);
}

.value1{
	background-color:var(--mb-tertiary)!important;
	align-self:flex-end;
}

.value1 h3{
	color:var(--mb-tertiary)
}

.value2{
	background-color:#2c79b3!important;
	align-self:center;
}

.value2 h3{
	color:#2c79b3
}

.value3{
	background-color:var(--mb-primary)!important;
}

.value3 h3{
	color:var(--mb-primary)
}

.value4{
	background-color:#35b178!important;
	align-self:center;
}

.value4 h3{
	color:#35b178
}

.value5{
	background-color:var(--mb-secondary)!important;
	align-self:flex-end;
}

.value5 h3{
	color:var(--mb-secondary)
}

@media(min-width:768px){
	.values{
		padding: 10vh var(--grid-xl)
	}

	.values .section-bg span{
		width: 80vw;
		height:80vw;
	}
}

@media(min-width:992px){
	.values{
		padding: 10vh 12vw
	}

	.values .section-bg span{
		width:75vw;
		height: 75vw;
	}
}