/* @group FONTS */

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/Newsreader-VariableFont_opsz,wght.woff2') format('woff2 supports variations'),
       url('../fonts/Newsreader-VariableFont_opsz,wght.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader Italic';
  src: url('../fonts/Newsreader-Italic-VariableFont_opsz,wght.woff2') format('woff2 supports variations'),
       url('../fonts/Newsreader-Italic-VariableFont_opsz,wght.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Flex';
  src: url('../fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-display: swap;
}

/* @end */

/* @group ROOT */

:root {
	
	--min-width: 320px;
	
	--color-base: 						#2E3F49;
	--color-primary: 				#522583;
	--color-primary-shade: 	#C4BED9;
	--color-background:			#FFFFFF;
	
	--font-family-serif: 				'Newsreader', Helvetica, Arial, serif;
	--font-family-serif-italic: 'Newsreader Italic', Helvetica, Arial, serif;
	--font-family-sans-serif: 		'Roboto Flex', Times, Arial, serif;
	
	--font: 		400 clamp(19px, 2.0vw, 20px)/1.3rem var(--font-family-serif);
	--font-h1: 	500 clamp(35px, 4.8vw, 48px)/1.1em var(--font-family-serif);
	--font-h2: 	500 clamp(24px, 3.1vw, 31px)/1.15em var(--font-family-serif);
	--font-h3: 	600 1rem/1.3em var(--font-family-serif);
	
	--font-italic-lg:	400 clamp(24px, 3.1vw, 31px)/1.3em var(--font-family-serif-italic);
	
	--font-sans-serif:			400 clamp(17px, 1.8vw, 18px)/1.4em var(--font-family-sans-serif);
	--font-sans-serif-sm:		400 16px/1.4em var(--font-family-sans-serif);
	--font-sans-serif-lg:		400 clamp(20px, 2.4vw, 24px)/1.4em var(--font-family-sans-serif);
	--font-sans-serif-xl:		500 3rem/.85em var(--font-family-sans-serif);
	
	--max-width-inner: 57rem;
	--max-width-outer: 70rem;
	
	--padding-inline: clamp(1rem, 6vw, 3rem);
	
	--spacing:			clamp(1.5rem, 4vw, 2rem);
	--spacing-lg: 		clamp(2rem, 6vw, 3rem);
	--spacing-xl: 		clamp(3rem, 8vw, 4rem);
	--spacing-xxl: 	clamp(4rem, 12vw, 6rem);
	--spacing-xxxl: clamp(6rem, 20vw, 10rem);
	
}

@media (max-width: 1259px) {
	
	:root {
		--max-width-inner: var(--max-width-outer);
	}
	
}

/* @end */

/* @group BASE */

html {
	scroll-behavior: smooth;
}

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

h1 {
	color: var(--color-primary);
	font: var(--font-h1);
}

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

h1:has(+ p) {
	margin-bottom: .4em;
}

h2 {
	color: var(--color-primary);
	font: var(--font-h2);
}

* + h2 {
	margin-top: 2em;
}

h2:has(+ *) {
	margin-bottom: .5em;
}

h3 {
	font: var(--font-h3);
}

* + h3 {
	margin-top: 2em;
}

h2 + h3 {
	margin-top: 1em;
}

h3:has(+ *) {
	margin-bottom: 1em;
}

h3:has(> strong) {
	display: flex;
	align-items: center;
}

	h3 strong {
		padding-right: .1em;
		font: var(--font-sans-serif-xl);
	}
	
h4 {
	font: var(--font-sans-serif);
	letter-spacing: 0.03em;
}

h4:has(+ *) {
	margin-bottom: 1em;
}

* + h4 {
	margin-top: 1.3rem;
}

p:has(+ *) {
	margin-bottom: 1em;
}

p:has(+ h1) {
	color: var(--color-primary);
	font: var(--font-sans-serif);
	margin-bottom: 2em;
	letter-spacing: .03em;
}

h1 + p {
	color: var(--color-primary);
	font: var(--font-sans-serif-lg);
}

strong {
	font-weight: 600;
}

/* @group Links */

.menu a,
.colophon__links a {
	transition: color .15s ease-in-out 0s;
}

.menu a:hover,
.menu a.active,
.colophon a:hover,
.colophon a.active {
	color: var(--color-background);
}

.main a {
	text-decoration: underline;
	text-decoration-color: var(--color-primary-shade);
	text-decoration-thickness: 1px;
	text-underline-offset: .1em;
	transition: all .15s ease-in-out 0s
}

	.main a:hover {
		color: var(--color-primary);
		text-decoration-color: var(--color-primary);
	}

.footer a[href^="mailto:"],
.footer a[href^="tel:"],
.footer a[href*="maps.app"],
.footer a[href*="calendly.com"],
.footer a[href*="linkedin"] {
	display: inline-flex;
	align-items: baseline;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: .1em;
	transition: text-decoration .15s ease-in-out 0s;
}

	.footer a[href^="mailto:"]:hover,
	.footer a[href^="tel:"]:hover,
	.footer a[href*="maps.app"]:hover,
	.footer a[href*="calendly.com"]:hover,
	.footer a[href*="linkedin"]:hover {
		text-decoration-color: currentColor;
		text-underline-offset: .1em;
	}

	.footer a[href^="mailto:"]::before,
	.footer a[href^="tel:"]::before,
	.footer a[href*="maps.app"]::before,
	.footer a[href*="calendly.com"]::before,
	.footer a[href*="linkedin"]::before {
	  content: "";
		position: relative;
		top: .1em;
		flex: 0 0 1em;
	  -webkit-mask-size: cover;
	  mask-size: cover;
	  width: 1em;
	  height: 1em;
		margin-right: .5em;
	  background-color: currentColor;
		transition: transform .15s ease-in-out 0s;
	}
	
	.footer a[href^="mailto:"]::before {
	  -webkit-mask-image: url(../images/paper-plane.svg);
	  mask-image: url(../images/paper-plane.svg);
	}
	
	.footer a[href^="tel:"]::before {
	  -webkit-mask-image: url(../images/phone-bubble.svg);
	  mask-image: url(../images/phone-bubble.svg);
	}
	
	.footer a[href*="maps.app"]::before {
	  -webkit-mask-image: url(../images/map.svg);
	  mask-image: url(../images/map.svg);
	}
	
	.footer a[href*="calendly.com"]::before {
	  -webkit-mask-image: url(../images/calendar.svg);
	  mask-image: url(../images/calendar.svg);
	}
	
	.footer a[href*="linkedin"]::before {
	  -webkit-mask-image: url(../images/linkedin.svg);
	  mask-image: url(../images/linkedin.svg);
	}
	
	.footer a[href^="mailto:"]:hover::before,
	.footer a[href^="tel:"]:hover::before,
	.footer a[href*="maps.app"]:hover::before,
	.footer a[href*="calendly.com"]:hover::before,
	.footer a[href*="linkedin"]:hover::before {
		transform: scale(1.1);
	}

/* @end */

/* @group Lists */

.main ul:not([class]):has(+ *) {
    margin-bottom: 1em;
}

	.main ul:not([class]) li {
	   display: flex;
	}
	
		.main ul:not([class]) li::before {
	    content: "•";
	    flex: 0 0 1.25em;
			padding-right: .25em;
			text-align: center;
		}
	
	.main ul:not([class]) li:has(+ li) {
	   margin-bottom: .5em;
	}
	

/* @end */

/* @end */

/* @group Menu-toggle */

.menu-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 3rem;
	color: var(--color-background);
	background-color: var(--color-primary);
	text-align: center;
}

.menu-toggle:hover {
	cursor: pointer;
}

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 2rem;
	height: 2rem;
}

	.hamburger > * {
		display: block;
		position: absolute;
		top: 50%;
		height: 1.5px;
		width: 100%;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
		transform: translateY(-50%);
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(calc(-50% + .4em));
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .4em));
	}
	
	.hamburger--open > *:nth-child(1),
	.hamburger--open > *:nth-child(3) {
		width: 80%;
		margin-inline: auto;
	}
	
	.hamburger--open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger--open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger--open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @group Logo */

.logo {
	color: var(--color-background);
	background-color: var(--color-primary);
	font-size: 1.6rem;
	transition: all .2s ease-in-out 0s;
}

	.logo__title {
		font-family: var(--font-family-serif);
		font-weight: 500;
		line-height: 1em;
	}
	
	.logo__claim {
		margin-top: -.2em;
		line-height: 1.1em;
		font-family: var(--font-family-sans-serif);
		font-size: .62em;
		letter-spacing: .05em;
	}
	
	.header .logo__claim {
		padding-left: .15em;
	}
	
	.colophon .logo__claim {
		padding-left: .075em;
	}

/* @end */

/* @group Menu */

.menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
	justify-content: center;
	color: var(--color-primary-shade);
	background-color: var(--color-primary);
	font: var(--font-sans-serif);
	transition: all .2s ease-in-out 0s;
}

	@media (max-width: 1199px) {
		
		.menu {
			flex-direction: column;
			align-items: center;
			padding-block: 2rem;
			padding-inline: 1.5rem;
			font: var(--font-sans-serif-lg);
		}
		
			.menu > * {
				padding-block: .5em;
			}
		
	}

/* @end */

/* @group Header */

.header {
	
}

	.header__container {
		max-width: var(--max-width-outer);
		margin-inline: auto;
		padding-inline: var(--padding-inline);
	}

	.header__logo {
		text-align: center;
	}

	@media (max-width: 1199px) {
		
			.header__menu-toggle {
				position: fixed;
				z-index: 30;
				top: 0;
				left: 0;
				right: 0;
			}
			
			.header__logo {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 20;
				min-height: 4rem;
				padding-bottom: 1rem;
				transform: translateY(3rem);
				transition: transform .2s ease-in-out 0s;
			}
			
			.header__logo--fixed {
				transform: translateY(-200%);
			}
				
			.header__logo--fixed.header__logo--open,
			.header__logo--open {
				transform: translateY(3rem); /* height of menu-toggle */
			}
			
			.header__menu {
				position: fixed;
				z-index: 10;
				top: 0;
				left: 0;
				right: 0;
				transform: translateY(-200%);
			}
			
			.header__menu--open {
				transform: translateY(7rem);
			}
		
	}

	@media (min-width: 1200px) {
		
		.header {
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			right: 0;
			background-color: var(--color-primary);
		}
		
			.header__container {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 9rem;
				padding-top: 1.5rem;
				padding-bottom: 1rem;
			}
		
			.header--fixed .header__container {
				flex-direction: row;
				align-items: center;
				column-gap: 2rem;
				height: 3.5rem;
				padding-top: 1rem;
			}
			
			.header__menu-toggle {
				display: none;
			}
		
				.header__logo--fixed .logo__claim {
					display: none;
				}
				
			.header__menu--fixed {
				justify-content: end;
			}
		
	}

/* @end */

/* @group Overlay */

.overlay {
	pointer-events: none;
	position: fixed;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,.5);
	opacity: 0;
	transition: opacity .2s ease-in-out 0s;
}

	.overlay--open {
		pointer-events: auto;
		opacity: 1;
	}
	
	@media (min-width: 1200px) {
		
		.overlay {
			display: none;
		}
		
	}

/* @end */

/* @group Main */

.main {
	
}

	@media (max-width: 999px) {
		
		.main {
			padding-top: 7rem; /* space for logo and menu-toggle */
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.main {
			padding-top: 9rem; /* space for logo and menu */
		}
		
	}

/* @end */

/* @group Hero */

.hero {
	position: relative;
	margin-inline: auto;
	margin-bottom: var(--spacing-xl);
	max-width: var(--max-width-outer);
}

	.hero__image {
		width: 100%;
		height: auto;
	}
	
	.hero__caption {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		color: var(--color-background);
		font: var(--font-h1);
		text-shadow: 0 0 .2em rgb(0,0,0,.8);
	}
	
		.hero__caption > * {
			width: 100%;
			max-width: var(--max-width-inner);
			margin-inline: auto;
			padding-inline: var(--padding-inline);
		}
	
		.hero__caption img {
			width: 2.5em;
			height: auto;
			display: block;
			margin-bottom: .2em;
		}
		
			.hero__caption img:hover {
				cursor: pointer;
			}
		
			.hero__text::before {
				content: "";
				display: block;
				width: 2.5em;
				padding-bottom: .6em;
				border-top: 1px solid currentColor;
			}

/* @end */

/* @group Stand-up animation */

.stand-up-animation {
	animation: stand-up-animation 7s ease-out forwards;
  transform-origin: 50% 100%;
}

@keyframes stand-up-animation {
  0% { transform: rotate(0deg); }
  5% { transform: rotate(-65deg); }
  10% { transform: rotate(55deg); }
  15% { transform: rotate(-50deg); }
  20% { transform: rotate(40deg); }
  25% { transform: rotate(-25deg); }
  30% { transform: rotate(20deg); }
  35% { transform: rotate(-18deg); }
  40% { transform: rotate(15deg); }
  45% { transform: rotate(-12deg); }
  50% { transform: rotate(10deg); }
  55% { transform: rotate(-6deg); }
  60% { transform: rotate(5deg); }
  65% { transform: rotate(-2.5deg); }
  70% { transform: rotate(2.5deg); }
  75% { transform: rotate(-1.25deg); }
  80% { transform: rotate(1.25deg); }
  85% { transform: rotate(-0.625deg); }
  90% { transform: rotate(0.625deg); }
  95% { transform: rotate(-0.3125deg); }
  100% { transform: rotate(0deg); }
}

/* @end */

/* @group Intro */

.intro {
	display: grid;
	column-gap: var(--spacing-lg);
	row-gap: var(--spacing);
	max-width: var(--max-width-inner);
	margin-bottom: var(--spacing-xxl);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
}

.intro:first-child {
	margin-top: var(--spacing-xl);
}

.intro:has(+ .text) {
	margin-bottom: var(--spacing-lg);
}

.intro + .text {
	margin-top: unset;
}

.intro:has(> .intro__figure) {
	max-width: var(--max-width-outer);
}

	.intro img {
		width: 100%;
		height: auto;
	}
	
	.intro__figure--illustration {
		
	}
	
		.intro__figure--illustration img {
			width: 100%;
			height: auto;
			background-color: var(--color-primary);
			outline: 1px solid var(--color-background);
			outline-offset: -1rem;
		}
		
	@media (max-width: 799px) {
		
			.intro__figure--illustration {
				margin-inline: calc(-1 * var(--padding-inline));
			}
		
	}
	
	@media (max-width: 1199px) {
		
		.intro:has(+ .text) {
			margin-bottom: var(--spacing);
		}
		
	}
	
	@media (min-width: 1200px) {
		
		.intro:has(> .intro__figure) {
			grid-template-columns: 1fr 2fr;
		}
		
			.intro__text {
				order: -1;
			}
		
	}

/* @end */

/* @group Text */

.text {
	max-width: var(--max-width-inner);
	margin-bottom: var(--spacing-xxl);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
}

.text:first-child {
	margin-top: var(--spacing-xl);
}

.text:has(+ .link) {
	margin-bottom: var(--spacing-lg);
}

.text + .link {
	margin-top: unset;
}

	@media (min-width: 800px) {
		
		.text {
			columns: 2;
			column-gap: var(--spacing-xl);
		}
		
			.text > *:not(ul),
			.text p {
				break-inside: avoid;
			}
			
			.text h1 {
				column-span: all;
			}
			
			.text h1 + h3,
			.text h1:first-child + h2 {
				margin-top: unset;
			}
			
			.text h3 {
				break-after: avoid;
			}
	
	}

/* @end */

/* @group Illustration */

.illustration {
	display: grid;
	max-width: var(--max-width-outer);
	margin-inline: auto;
}

.illustration:first-child {
	margin-top: var(--spacing-xl);
}

.illustration:not(:has(+ .illustration)) {
	margin-bottom: var(--spacing-xl);
}

	.illustration h3 {
		color: var(--color-primary);
	}

	.illustration__figure {
		
	}
	
		.illustration__figure img {
			width: 100%;
			height: auto;
			background-color: var(--color-primary);
			outline: 1px solid var(--color-background);
			outline-offset: -1rem;
		}
		
	.illustration__text {
		padding: var(--padding-inline);
	}
		
	@media (max-width: 799px) {
		
		.illustration:not(:has(+ .illustration)) {
			margin-bottom: unset;
		}
		
			.illustration__text {
				padding-top: var(--spacing);
				padding-bottom: var(--spacing-xl);
			}
		
	}
	
	@media (min-width: 800px) {
		
		.illustration {
			grid-template-columns: 1fr 1fr;
		}
				
			.illustration:nth-of-type(2n + 1) .illustration__text {
				order: -1;
			}
		
	}
	
	@media (min-width: 1260px) {
		
		.illustration {
			padding-inline: var(--padding-inline);
		}
		
	}

/* @end */

/* @group Image */

.image {
	max-width: var(--max-width-inner);
	margin-bottom: var(--spacing-xxl);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
}

	.image__figure img {
		width: 100%;
		height: auto;
	}

/* @end */

/* @group Link */

.link {
	max-width: var(--max-width-inner);
	margin-inline: auto;
	margin-bottom: var(--spacing-xxl);
	padding-inline: var(--padding-inline);
	font-weight: 700;
}

.link:first-child {
	margin-top: var(--spacing-xl);
}

	.link > * {
		padding-top: calc(1em - 1px);
		border-top: 1px solid var(--color-primary);
	}
	
		.link a {
			color: var(--color-primary);
			text-decoration: underline;
			text-decoration-color: transparent;
			text-decoration-thickness: 1px;
			text-underline-offset: .1em;
			transition: all .15s ease-in-out 0s
		}
		
			.link a:hover {
				text-decoration-color: currentColor;
			}
	
			.link a::after {
				content: "»";
				display: inline-block;
				padding-left: .4em;
			}
			
				.link a:hover::after {
					text-decoration-color: transparent;
				}

/* @end */

/* @group Quote */

.quote {
	max-width: var(--max-width-inner);
	margin-bottom: var(--spacing-xxl);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
	color: var(--color-primary);
	font: var(--font-italic-lg);
	font-style: italic;
	font-weight: 400;
}

.quote:first-child {
	margin-top: var(--spacing-xl);
}

	.quote__citation {
		margin-top: 1em;
		color: var(--color-base);
		font: var(--font-sans-serif-sm);
	}

	@media (min-width: 600px) {
		
			.quote > * {
				padding-left: 33.333333333%;
			}
		
	}

/* @end */

/* @group Video */

.video {
	display: grid;
	row-gap: var(--spacing);
	max-width: var(--max-width-outer);
	margin-bottom: var(--spacing-xxl);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
}

.video:first-child {
	margin-top: var(--spacing-xl);
}

	.video__player {
		position: relative;
	  padding-bottom: 56.25%; /* 16:9 */
	  height: 0;
	}
	
		.video__player iframe {
			position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		}
		
	@media (min-width: 800px) and (max-width: 999px) {
		
			.video__text {
				padding-left: 50%;
			}
		
	}

	@media (min-width: 1000px) {
		
		.video {
			grid-template-columns: 2fr 1fr;
		}
		
			.video__text {
				padding-left: var(--spacing);
			}
		
	}
	
	@media (min-width: 1200px) {
		
			.video__text {
				padding-top: var(--spacing);
			}
		
	}

/* @end */

/* @group Footer & Colophon */

.footer {
	margin-top: var(--spacing-xxxl);
	padding-top: 2rem;
	color: var(--color-background);
	background-color: var(--color-primary);
}
	
.colophon {
	max-width: var(--max-width-outer);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
}

	.colophon h3 {
		color: currentColor;
		border-bottom: 1px solid currentColor;
		font: var(--font-sans-serif-sm);
	}

	.colophon__logo {
		margin-bottom: 3rem;
	}
	
	.colophon__contact {
		display: grid;
		gap: 2rem;
		margin-bottom: var(--spacing-xl);
		font: var(--font-sans-serif);
	}
	
.bottombar {
	max-width: var(--max-width-outer);
	margin-inline: auto;
	padding-inline: var(--padding-inline);
}

	.bottombar__links {
		flex-grow: 2;
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1rem, 4vw, 2rem);
		padding-bottom: 2rem;
		color: var(--color-primary-shade);
		font: var(--font-sans-serif);
	}
	
	.bottombar__stand-up {
		padding-bottom: 1rem;
		text-align: right;
	}
	
		.bottombar__stand-up img {
			width: 5rem;
			height: auto;
		}
	
		.bottombar__stand-up img:hover {
			cursor: pointer;
		}
	
	@media (min-width: 600px) {
		
		.bottombar {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}
		
	}
	
	@media (min-width: 600px) and (max-width: 999px) {
		
			.colophon__contact {
				grid-template-columns: 1fr 1fr;
			}
			
				.colophon__contact > *:first-child {
					grid-column: span 2;
				}
		
	}
	
	@media (min-width: 1000px) {
		
			.colophon__contact {
				grid-template-columns: 2fr 1fr 1fr;
			}
		
	}

/* @end */