@layer base, components, utility;
@import "fonts.css" layer(base);
@import "reset.css" layer(base);


/* @link https://utopia.fyi/type/calculator?c=360,18,1.25,1240,20,1.414,6,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,s,xl,16 */

:root {
  --step--3: clamp(0.4421rem, 0.6308rem + -0.2434vw, 0.576rem);
  --step--2: clamp(0.6252rem, 0.7588rem + -0.1724vw, 0.72rem);
  --step--1: clamp(0.884rem, 0.9065rem + -0.0291vw, 0.9rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.4063rem, 1.2585rem + 0.6568vw, 1.7675rem);
  --step-2: clamp(1.7578rem, 1.4545rem + 1.3481vw, 2.4992rem);
  --step-3: clamp(2.1973rem, 1.6504rem + 2.4303vw, 3.5339rem);
  --step-4: clamp(2.7466rem, 1.826rem + 4.0916vw, 4.997rem);
  --step-5: clamp(3.4332rem, 1.9472rem + 6.6046vw, 7.0657rem);
  --step-6: clamp(4.2915rem, 1.96rem + 10.3626vw, 9.9909rem);
}

/* @link https://utopia.fyi/space/calculator?c=360,18,1.25,1240,20,1.414,6,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,s,xl,16 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

  --box-radius: 8px;
}

:root {
	/*--orange: #E3683B;*/
	/*--orange: #FF671F;*/
	--orange: #DF5A1C;
}

body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
figure,
blockquote,
dl,
dd {
    margin: 0;
}

.h1, .h2, .h3, .h4 {
	line-height: 1.1;
}

h1, .h1 {
	font-size: var(--step-3);
	font-weight: 800;
}

h2, .h2 {
	font-size: var(--step-2);
	font-weight: 800;
}

h3, .h3 {
	font-size: var(--step-1);
	font-weight: 600;
}

h4, .h4 {
	font-size: var(--step-0);
	font-weight: 600;
}

/* some font utility classes */
.fs--1 {
	font-size: var(--step--1);
}

.fs--2 {
	font-size: var(--step--2);
}

.fs--3 {
	font-size: var(--step--2);
}

.fs-0 {
	font-size: var(--step-0);
}

.fs-1 {
	font-size: var(--step-1);
}

.fs-2 {
	font-size: var(--step-2);
}

.fs-3 {
	font-size: var(--step-3);
}

.fs-4 {
	font-size: var(--step-4);
}

.fs-5 {
	font-size: var(--step-5);
}

.fw-100 {
	font-weight: 100;
}

.fw-200 {
	font-weight: 200;
}

.fw-300 {
	font-weight: 300;
}

.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.fw-800 {
	font-weight: 800;
}




body {
	font-family: sora,sans-serif;
	font-size: var(--step-0);
	color: #fff;
	background-color: var(--dark-grey, #3B3B3B);
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	/* better font-rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
	background-color:hsla(238,0%,16%,1);
background-image:
radial-gradient(at 69% 61%, hsla(0,0%,23%,1) 0px, transparent 50%),
radial-gradient(at 97% 93%, hsla(19,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 17% 89%, hsla(3,0%,30%,1) 0px, transparent 50%);
}

.t-up {
	text-transform: uppercase;
}

.t-center {
	text-align: center;
}

.t-highlight {
	color: var(--orange);
}

.short-copy {
	max-width: 40ch;
}

.container {
	width: 100%;
	max-width: 1300px;
  margin-inline: auto;
  padding-inline: var(--space-s);
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  --stack-space: var(--space-m, 1.5rem);
}

.stack--sections {
	--stack-space: var(--space-2xl);
}


.stack > * {
  margin-block: 0;
} 

.stack > * + * {
  margin-block-start: var(--stack-space);
}


.prose {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.prose > * {
  margin-block: 0;
} 

.prose > * + * {
  margin-block-start: var(--space-s, 1.5rem);
}


p {
	max-width: 74ch;
	font-weight: 300;
}

a {
	/*text-decoration: none;*/
}


header {
	background-color: #fff;
	position: relative;
	z-index: 100;
	margin-block-end: var(--space-m);
	padding-inline: var(--space-s);
	padding-block: var(--space-xs);
}

footer {
	background-color: var(--orange);
	margin-top: var(--space-xl);
	padding-block: var(--space-m);
	padding-inline: var(--space-m);
}

.footer__nav-list {
	list-style: none;
	font-size: var(--step--1);
	margin: 0;
	padding: 0;
}

.footer__nav-item a {
	text-decoration: none;
}

.footer__logo {
	width: 260px;
}

.square-logo {
	width: 46px;
	height: 46px;
}

@media screen and (min-width: 460px) {

	.square-logo {
		width: 60px;
		height: 60px;
	}

}

.header-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m, 2rem);
	row-gap: var(--space-2xs);
	align-items: center;
	justify-items: center;
}


.main-nav {
 background-color: #fff;
 color: #222;
}

.main-nav__list {
	font-size: var(--step-0);
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m, 2rem);
	row-gap: var(--space-2xs);
	justify-content: flex-start;
	align-items: center;
	justify-content: center;
}

.main-nav__item {
	font-weight: 700;
	text-transform: uppercase;
}

.main-nav__item a {
	color: currentColor;
	text-decoration: none;
}


@media screen and (min-width: 460px) {

	.header-wrap {
		grid-template-columns: auto 1fr;
		justify-items: start;
	}

	.main-nav__list {
		justify-content: flex-start;
	}

}


.sub-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-m, 2rem);
	row-gap: var(--space-2xs);
	justify-content: center;
	align-items: center;
}

.sub-nav__item {

}


.sub-nav__item a {
	text-decoration: none;
}



@media screen and (min-width: 460px) {

	.sub-nav__list {
		justify-content: flex-end;
		padding-inline: var(--space-xs);
	}

}


.hero {
	display: grid;
	grid-template-areas: "hero";
	align-items: center;
	justify-items: center;
	margin-block-start: calc( var(--space-m) * -1 );
	margin-block-end: var(--space-l);
	position: relative;
	--logo-size: 90%;
}

.hero__bg {
	grid-area: hero;
	width: 100%;
	height: 420px;
	position: relative;
}

@media screen and (min-width: 760px) {

	.hero {
		--logo-size: 80%;
	}

	.hero__bg {
		height: 500px;
	}

}


@media screen and (min-width: 1200px) {

	.hero__bg {
		height: 600px;
	}

}

.hero__bg img {
	object-fit: cover;
	position: absolute;
	width: 100%;
	height: 100%;
}

.hero__video {
	width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__logo-mask {
	height: 100%;
	width: 100%;
  grid-area: hero;
  position: relative;
}

.hero__logo-mask-l1 {
	mask-size: 100%, var(--logo-size);
  mask-position: center;
  mask-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
  /*
  background-color: black;
  z-index: 2;
  mask-composite: exclude;
  mix-blend-mode: saturation;
  */
}

.hero__logo-mask-img {
	position: absolute;
  height: 100%;
  width: 100%;
  background-size: var(--logo-size);
  background-repeat: no-repeat;
  background-position: center;
}

	
.hero__main-img {
	grid-area: hero;
	width: 80%;
}

.hero__main-img svg {
	width: 100%;
}

.hero::before {
  content: "";
  grid-area: hero;
  width: 100%;
  height: 100%;
  /*border: 3px solid red;*/
  display: block;
}


.we-are {
	text-transform: uppercase;
	font-size: var(--step-4);
}

.we-are img {
	height: var(--step-4);
	margin-inline: auto;
}

.endcopy p {
	color: var(--orange);
	font-weight: 300;
	font-size: var(--step-3);
	text-align: right;
	line-height: 1.2;
}

.copy-block {
	max-width: 60ch;
	margin-inline: auto;
	font-size: var(--step-0);
}

.copy-block p {
	max-width: 56ch;
}

.copy-block__end p {
	font-weight: 700;
	font-size: var(--step-1);
}

.angle-slabs {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	pointer-events: none;
	z-index: 50;
}

.angle-slabs::before {
	content: "";
	display: block;
	width: 400px;
	height: 100vh;
	border-right: 20px solid #fff;
	background-color: var(--orange);
	position: absolute;
	transform: translateX(-450px) skew(-20deg);
}

.angle-slabs::after {
	content: "";
	display: block;
	width: 400px;
	height: 100vh;
	right: 0;
	bottom: -300px;
	border-left: 20px solid #fff;
	background-color: var(--orange);
	position: absolute;
	transform: translateX(320px) skew(-20deg);
}


@media screen and (min-width: 760px) {

	.angle-slabs::before {
		transform: translateX(-400px) skew(-20deg);
	}


	.angle-slabs::after {
		transform: translateX(380px) skew(-20deg);
	}

}

.sub-page {
	position: relative;
	z-index: 30;
}

.section-nav {
	display: grid;
	gap: var(--space-m);
	/*grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));*/
	grid-template-columns: 1fr;
}

.section-nav--home {
	gap: var(--space-xl);
}

.container--section-nav {
	overflow: hidden;
}


@media screen and (min-width: 460px) {

	.section-nav {
			grid-template-columns: 1fr 1fr;
	}

}

@media screen and (min-width: 760px) {

		.section-nav {
			grid-template-columns: 1fr 1fr 1fr;
			transform: skew(-20deg);
		}


		.container--section-nav {
			overflow: visible;
		}


}


.section-nav--people {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-areas: "l1 mid mid r1"
											 "l2 mid mid r2"
											 "l3 m4  m4  r3";
}

.section-nav__item {
	background-color: var(--orange);
	color: #fff;
	display: grid;
	grid-template-areas: "core";
	justify-items: center;
	overflow: hidden;
	position: relative;
	width: 100%;
  height: 165px;
  transform: skew(-20deg);
  border-radius: var(--box-radius, 6px);
}

.section-nav__item--person {
	height: 240px;
}

.section-nav__selected-item {
	grid-column: 2 / span 2;
	grid-row: 1 / span 2;
	overflow: hidden;
}


.section-nav__bg {
	position: absolute;
	height: 100%;
	width: 100%;
	transform: scale(120%) skew(20deg);
}

.section-nav__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 5;
}

/* add the orange tint */
.section-nav__bg::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-color: #000; /* DarkOrange or any orange hex code */
	mix-blend-mode: color;
	z-index: 10;
}

.section-nav__bg::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--orange); /* DarkOrange or any orange hex code */
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 15;
}


@media screen and (min-width: 760px) {

	.section-nav__item {
		height: 340px;
		transform: skew(0deg);
	}

	.section-nav__bg {
		transform: scale(150%) skew(20deg);
	}

	.section-nav__item--person {
		height: 240px;
	}


}


.section-nav__copy {
	width: 100%;
	position: relative;
	padding: var(--space-s) var(--space-m);
	grid-area: core;
	text-align: center;
	padding-inline: var(--space-s);
}

.section-nav__copy > * {
	transform: skew(20deg);
}

.section-nav__person-details {
	/*transform: skew(20deg);*/
	display: grid;
	grid-template-areas: "core";
	height: 100%;
}

.section-nav__person-details > * {
	grid-area: core;
	transform: skew(20deg) translateX(20%);
}

.section-nav__person-img {
	max-width: initial;
	justify-self: center;
	height: 100%;
	width: 140%;
	object-fit: cover;
	transform: skew(20deg);
}

.section-nav__person-video {
	z-index: 100;
}

.section-nav__person-copy {
	padding-block: var(--space-m);
}


.section-nav__logo {
	height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.section-nav__logo img {
	max-width: initial;
  width: 140px;
  transform: skew(20deg);
}


.section-nav__logo img {
	width: 200px;
	object-fit: contain;
}


.people-list {
	translate: -12% 0;
	animation: grid-shift;
	animation-timeline: scroll();
}

@keyframes grid-shift {
	from {
		translate: -12% 0;
	}

	to {
		translate: 12%;
	}
}


.sub-page__main {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	overflow: hidden;
}

.sub-page__content {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-m);
	padding-inline: var(--space-m);
}

.sub-page__extra-content {
	grid-column-start: 1;
}

.sub-page__carousel {
	grid-column-start: 1;
}


@media screen and (min-width: 760px) {

	.sub-page__main {
		display: grid;
		grid-template-columns: 250px 1fr;
		overflow: visible;
	}

	
	.sub-page__content--with-carousel {
		grid-template-columns: 40ch 1fr;
		padding-inline: 0;
	}
	

}


@media screen and (min-width: 1200px) {

	.sub-page__main {
		grid-template-columns: 200px 1fr;
	}

	.sub-page__carousel {
		grid-column-start: 2;
  	grid-row-start: 1;
  	grid-row-end: span 2;
	}

}


.page-intro__headline-img {
	display: flex;
	justify-content: start;
	height: 220px;
}

.page-intro__headline-img img {
	max-width: initial;
	clip-path: polygon(0% 0%,100% 0%, 72% 100%,0% 100%);
	max-height: 450px;
}


@media screen and (min-width: 760px) {

	.page-intro__headline-img {
		justify-self: end;
		justify-content: end;
		height: auto;
	}

}


.no-js .carousel {
	
}

.no-js .carousel__track {
	display: flex;
	overflow-x: scroll;
	scroll-behavior: smooth; 
	scroll-snap-type: x mandatory;
	width: 800px;
}

.no-js .carousel__track::-webkit-scrollbar {
	display: none;
}

.no-js .carousel__item {
	scroll-snap-align: start;
}

.js .carousel {
	overflow: hidden;
	/*clip-path: polygon(28% 0%,100% 0%, 72% 100%,0% 100%);*/
	transform: skew(-20deg);
}
.js .carousel__track {
		display: flex;
}
.js .carousel__item {
	flex: 0 0 100%;
	min-width: 0;
	overflow: hidden;
}


.carousel__img {
	max-width: initial;
	height: 100%;
	object-fit: cover;
	transform: scale(1.3) skew(20deg);
}


.carousel__dots {
	display: flex;
	justify-content: center;
	margin-top: -50px;
	position: relative;
	transform: skew(20deg);
	gap: 10px;
}

.carousel__dot {
	-webkit-tap-highlight-color: var(--orange);
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  touch-action: manipulation;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}


.carousel__dot--selected {
  background-color: var(--orange);
}


.page-blocks__item {
	background-color: var(--orange);
	padding: var(--space-l);
	clip-path: polygon(0% 0%,100% 0%, 80% 100%,0% 100%);
}




/* the view transition stuff */
/*
@view-transition {
  navigation: auto;
}
*/

.sub-page {
	view-transition-name: subpage-article;
}

.vt-subpage-title {
	view-transition-name: subpage-title;
}


/* Create a custom animation */
@keyframes move-out {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

/* Apply the custom animation to the old and new page states */


::view-transition-old(subpage-article) {
  animation: 1s ease-in both move-out;
}

::view-transition-new(subpage-article) {
  animation: 1s ease-in both move-in;
}

/*
::view-transition-old(entry-title-14) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(entry-title-14) {
  animation: 0.4s ease-in both move-in;
}
*/


.people-nav {
	display: flex;
}


.people-nav__item-list {
	display: flex;

	flex-wrap: wrap;
	justify-content: center;
	--people-gap: var(--space-xs);
	--max-person-count: 30;
	gap: var(--people-gap);
}

@keyframes delay-z-out {
  0% {
    z-index: 100;
  }

  99% {
    z-index: 100;
  }

  100% {
    z-index: 1;
  }
}

@keyframes delay-z-in {
  0% {
    z-index: 1;
  }

  100% {
    z-index: 100;
  }
}

.people-nav__item {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	justify-content: center;
	transform: skew(-20deg);
	width: 250px;
	height: 250px;
	--slide-time: 0.5s;
	/*animation: var(--slide-time) delay-z-out;*/
	transition: z-index 0s 0.1s;
	position: relative;
	z-index: 10;
	
}

.people-nav__item.person-selected {
	/*animation: 0s delay-z-in;*/
	transition: z-index 0s 0s;
  z-index: 100;
}


/*
.people-nav__item > * {
	transform: skew(20deg);
}
*/

.people-nav__img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: var(--box-radius,6px);
}

.people-nav__img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transform: scale(1.4) skew(20deg);
	border-radius: var(--box-radius,6px);
}


/* add the orange tint */
.people-nav__img::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-color: #000; /* DarkOrange or any orange hex code */
	mix-blend-mode: color;
	z-index: 1;
	transition: opacity 0.3s;
	border-radius: var(--box-radius,6px);
}

.people-nav__img::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--orange); /* DarkOrange or any orange hex code */
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.3s;
	border-radius: var(--box-radius,6px);
}

/* remove the tint */
.people-nav__item:hover .people-nav__img::after {
	opacity: 0;
}

.people-nav__item:hover .people-nav__img::before {
	opacity: 0;
}


/* keep the tint if selected */
.people-nav__item.person-selected:hover .people-nav__img::after {
	opacity: 1;
}

.people-nav__item.person-selected:hover .people-nav__img::before {
	opacity: 1;
}



.people-nav__info {
	position: absolute;
	height: calc( 501px + var(--people-gap));
	width: calc( 501px + var(--people-gap));
	transform: translate3d(100%, 0, 0);
	transition: transform var(--slide-time), opacity var(--slide-time);
	background-color: #fff;
	color: #222;
	opacity: 0;
	display: grid;
	grid-template-columns: calc( 500px + var(--people-gap));
	grid-template-areas: "core";
	overflow: hidden;
	z-index: 10;
	border-radius: var(--box-radius,8px);
}

.people-nav__info > * {
	grid-area: core;
}

.people-nav__copy {
	color: #fff;
	padding: var(--space-m);
	order: 2;
	pointer-events: none;
	transform: translateX(25%) skew(20deg);
}

.people-nav__video {
	transform: scale(1) skew(20deg) translateX(-10%);
	width: 139%;
}

.people-nav__close {
	order: 3;
  position: relative;
  height: 40px;
  width: fit-content;
  transform: skew(20deg);
  align-self: start;
  justify-self: end;
  border: 0;
  background-color: transparent;
  margin: var(--space-s);
}

.people-nav__close span {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

.people-nav__close .icon {
	width: 24px;
	height: 24px;
}


.people-nav__item.person-selected .people-nav__info {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}


.testimonial {
	/*
	color: #fff;
	padding: var(--space-m);
	*/
	position: relative;
}

.testimonial__icon {
	width: 80px;
  color: var(--orange);
}

@media screen and (min-width: 760px) {

	.testimonial__icon {
		width: 102px;
	  position: absolute;
	  left: -116px;
	  top: 20px;
	}

}

.testimonial__copy {
	font-style: italic;
	color: var(--orange);
	max-width: 40ch;
}

.testimonial__person {
	font-weight: bold;
	display: block;
	font-size: var(--step--1);
}

.testimonial__title {
	display: block;
	font-size: var(--step--1);
}



/* swup page transitions */

html.is-changing .transition-fade {
	transition: opacity 0.25s;
	opacity: 1;
}

/* Define the styles for the unloaded pages */
html.is-animating .transition-fade {
	opacity: 0;
}


html.is-changing .page-intro__headline-img {
	transition: transform 0.3s ease-in-out;
	transform: translateX(0);
}

html.is-animating .page-intro__headline-img {
	transform: translateX(-100%);
}




.angled-boxes {
	display: flex;
}



.angled-boxes__item-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	--people-gap: var(--space-m);
	gap: var(--people-gap);
}

.angled-boxes__item-list--narrow {

}

@keyframes delay-z-out {
  0% {
    z-index: 100;
  }

  99% {
    z-index: 100;
  }

  100% {
    z-index: 1;
  }
}

@keyframes delay-z-in {
  0% {
    z-index: 1;
  }

  100% {
    z-index: 100;
  }
}

.angled-boxes__item {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	justify-content: center;
	transform: skew(-20deg);
	width: 250px;
	height: 250px;
	--slide-time: 0.5s;
	animation: var(--slide-time) delay-z-out;
	position: relative;
	z-index: 1;
}

.angled-boxes__item--narrow {
	width: 170px;
}

.angled-boxes__item.person-selected {
	background-color: pink;
	animation: 0s delay-z-in;
  z-index: 100;
}


.angled-boxes__img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	border-radius: var(--box-radius,6px);
}

.angled-boxes__img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transform: scale(1.4) skew(20deg);
}


.angled-boxes__img--narrow {
	background-color: #fff;
}

.angled-boxes__item--narrow img {
	transform: scale(1) skew(20deg);
}

.angled-boxes__img--orange img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(90%);
}

/* add the orange tint */
.angled-boxes__img--orange::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--orange); /* DarkOrange or any orange hex code */
	/*filter: grayscale(90%);*/
	mix-blend-mode: multiply;
	pointer-events: none;
	transition: opacity 0.4s;
}


.angled-boxes__item:hover .angled-boxes__img--orange img {
	filter: none;
}

.angled-boxes__item:hover .angled-boxes__img--orange::after {
	opacity: 0;
}

.angled-boxes__logo {
	height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.angled-boxes__logo img {
	max-width: initial;
  width: 140px;
  transform: skew(20deg);
}


.angled-boxes__logo img {
	width: 174px;
	object-fit: contain;
}


.angled-boxes__info {
	position: absolute;
	height: calc( 500px + var(--people-gap));
	width: calc( 500px + var(--people-gap));
	transform: translate3d(100%, 0, 0);
	transition: transform var(--slide-time), opacity var(--slide-time);
	background-color: #fff;
	color: #222;
	opacity: 0;
	display: grid;
	grid-template-columns: calc( 500px + var(--people-gap));
	grid-template-areas: "core";
	overflow: hidden;
}

.angled-boxes__info > * {
	grid-area: core;
}

.angled-boxes__copy {
	color: #fff;
	padding: var(--space-m);
	order: 2;
	pointer-events: none;
	transform: translateX(10%) skew(20deg);
}

.angled-boxes__video {
	transform: scale(1.4) skew(20deg);
}

.angled-boxes__close {
	order: 3;
  position: relative;
  height: 40px;
  width: fit-content;
  transform: skew(20deg);
  align-self: start;
  justify-self: end;
  border: 0;
  background-color: transparent;
  margin: var(--space-s);
}

.angled-boxes__close span {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}

.angled-boxes__close .icon {
	width: 24px;
	height: 24px;
}


.angled-boxes__item.person-selected .angled-boxes__info {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}


.trapezium-grid {
	display: grid;
	grid-gap: var(--space-l);
	grid-template-columns: 1fr;
	padding-inline: var(--space-s);
}

@media screen and (min-width: 760px) {

	.trapezium-grid {
		grid-gap: var(--space-l);
		grid-template-columns: 1fr 1fr;
		padding-inline: var(--space-2xl);
	}

}

.trapezium {
	color: #fff;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas: "img title";
}

.trapezium:nth-child(even) {
	grid-template-columns: 2fr 1fr;
	grid-template-areas: "title img";
}

.trapezium--service {
	height: 220px;
}


.trapezium__img {
	grid-area: img;
	height: 100%;
	position: relative;
	overflow: hidden;
	transform: skewX(-20deg);
	border-top-left-radius: var(--box-radius, 6px);
	border-bottom-left-radius: var(--box-radius, 6px);
}


/*
.trapezium__img-clip {
	transform: skew(20deg);
	position: relative;
	height: 100%;
}
*/

.trapezium__img img {
	transform: scale(174%) skewX(20deg);
	height: 100%;
	object-fit: cover;
}

.trapezium__header {
	grid-area: title;
	background-color: var(--orange);
	background: linear-gradient(90deg, rgb(221, 89, 28) 0%, 44.5364%, rgb(85, 64, 53) 89.0728%, 94.5364%, rgb(68, 60, 57) 100%);
	padding: var(--space-m);
	text-align: right;
	margin-inline-start: -20%;
  padding-inline-start: 30%;
  border-radius: var(--box-radius, 6px);
}

.trapezium:nth-child(even) .trapezium__header {
	margin-inline-start: 0;
  padding-inline-start: var(--space-m);
  margin-inline-end: -20%;
  padding-inline-end: 30%;
  text-align: left;
}


.trapezium:nth-child(4n+1) .trapezium__header,
.trapezium:nth-child(4n) .trapezium__header {
	background: linear-gradient(90deg, rgb(65, 65, 65) 0%, 0%, rgb(65, 65, 65) 0%, 50%, rgb(100, 100, 100) 100%);
}

.trapezium:nth-child(even) .trapezium__img {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: var(--box-radius, 6px);
	border-bottom-right-radius: var(--box-radius, 6px);
}


.trapezium__body {
	grid-area: copy;
	background-color: var(--orange);
	padding: var(--space-m);
	text-align: right;
}

.trapezium:nth-child(even) .trapezium__body {
	text-align: left;

}

/* person homescreen list animation */

/* Hide everyone by default */
.js-slot-box {
  display: none; 
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  /* transform: scale(0.9);*/
}

/* Only show the first 5 */
.js-slot-box:nth-child(-n+6) {
  display: block;
  opacity: 1;
  /*transform: scale(1);*/
}

.js-slot-box img {
	transition: opacity 0.5s ease-in-out;
}

/* A utility class for the fading effect during the swap */
.js-slot-box:nth-child(-n+6).js-fade-out img{
  opacity: 0;
  /*transform: scale(0.9);*/
}

.js-slot-box:nth-child(-n+6).js-fade-in img {
  opacity: 0;
  /*transform: scale(0.9);*/
}