/* General Reset and Base Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
	background-color: var(--brand-purple);
}

/* Variables and styles */
:root {
	--header-height: 75px;

	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	--brand-red: #cf0515;
	--brand-light-red: #ff7664;
	--brand-purple: #220058;
	--brand-bright-purple: #5e00c1;

	--stroke-primary: hsla(0 0 50% / 40%);

	--content-primary: #000000;
	--content-inverse: #ffffff;

	--hover-background: hsla(0 0 0 / 20%);
	--active-background: hsla(0 0 0 / 40%);
	--hover-background-inverse: hsla(0 0 100% / 20%);
	--active-background-inverse: hsla(0 0 100% / 40%);

	--background-primary: #ffffff;
	--background-secondary: #e9e9e9;
	--background-primary-red-jewel: #faf3f4;
	--background-primary-purple-jewel: #ebe4f5;

	--purple-gradient: linear-gradient(
		to bottom,
		var(--brand-purple),
		var(--brand-bright-purple) 100%
	);

	--red-gradient-overlay: radial-gradient(
		circle at top left,
		hsla(263deg 100% 17% / 0),
		var(--brand-red) 400%
	);

	--highlight-color: var(--brand-red);
	--content-color: var(--content-primary);
	--background-color: var(--background-primary);

	--standard-border: 1px solid var(--stroke-primary);

	--card-shadow: 0 6px 12px -8px hsla(0 0 0 / 25%),
		0 4px 24px -12px hsla(0 0 0 / 25%);
	--card-shadow--hover: 0 18px 32px -12px hsla(0 0 0 / 33%),
		0 12px 64px -18px hsla(0 0 0 / 33%);
}

.inverse-palette {
	--highlight-color: var(--brand-light-red);
	--content-color: var(--content-inverse);
	--background-color: var(--brand-purple);

	&.gradient-bg {
		background: var(--red-gradient-overlay), var(--purple-gradient);
	}
}

body {
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: calc(16 / 16 * 1rem);
	line-height: 1.5;
	color: var(--content-color);
	max-width: 1500px;
	margin: auto;
}

* {
	color: var(--content-color);
}

h1 {
	font-size: calc(32 / 16 * 1rem);
	line-height: calc(39 / 32);
	font-weight: 400;

	@media (min-width: 600px) {
		font-size: calc(42 / 16 * 1rem);
		line-height: calc(51 / 42);
	}

	em {
		font-weight: 550;
	}
}

h2,
blockquote {
	font-size: calc(26 / 16 * 1rem);
	line-height: calc(32 / 26);
	font-weight: 500;

	@media (min-width: 600px) {
		font-size: calc(32 / 16 * 1rem);
		line-height: calc(39 / 32);
	}

	em {
		font-weight: 700;
	}
}

h3 {
	font-size: 1em;
	font-weight: 700;
}

:where(h1, h2, h3, h4, h5, h6, blockquote) {
	em {
		font-style: italic;
		color: var(--highlight-color);
	}
}

p,
li {
	em {
		font-weight: 700;
		font-style: normal;
	}
}

ul,
ol {
	padding-left: 1em;

	li + li {
		margin-top: 0.25em;
	}
}

a {
	color: inherit;
}

svg {
	fill: currentColor;
}

hr {
	border-color: currentColor;
	border-width: 1px 0 0 0;
	border-style: solid;
	color: var(--stroke-primary);
	background: none;
	height: 0;
	width: 100%;
}

blockquote {
	quotes: "\201C""\201D""\2018""\2019";

	&:before {
		content: open-quote;
		display: inline-block;
		margin-inline-end: -0.2em;
	}

	&:after {
		content: close-quote;
		display: inline-block;
		margin-inline-start: -0.2em;
	}
}

/* Utility Classes */

.button {
	display: inline-block;
	padding: 0.6rem 1rem;
	font-weight: 600;
	border-width: 2px;
	border-style: solid;
	border-radius: 0.5rem;
	position: relative;
	text-decoration: none;
	font-size: 1rem;
	cursor: pointer;
	min-height: 3rem;
	align-items: center;
}

.button-primary {
	border-color: transparent;
	background-color: var(--brand-purple);
	color: var(--content-inverse);

	&:after {
		content: "";
		position: absolute;
		inset: 0;
	}

	&:hover:after {
		background-color: var(--hover-background-inverse);
	}

	&:active:after {
		background-color: var(--active-background-inverse);
	}
}

.button-inverse {
	border-color: transparent;
	background-color: var(--background-primary);
	color: var(--content-primary);

	&:after {
		content: "";
		position: absolute;
		inset: 0;
	}

	&:hover:after {
		background-color: var(--hover-background-inverse);
	}

	&:active:after {
		background-color: var(--active-background-inverse);
	}
}

.button-outline {
	border-color: currentColor;
	color: var(--content-inverse);
	background-color: transparent;

	&:hover {
		background-color: var(--hover-background);
	}

	&:active {
		background-color: var(--active-background);
	}
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.card {
	box-shadow: var(--card-shadow);
	border-radius: 16px;
	background-color: var(--background-color);
	padding: 2rem;
	border: var(--standard-border);

	&.inverse-palette {
		background-image: var(--red-gradient-overlay);
	}
}

.icon {
	aspect-ratio: 1;

	&.icon-32 {
		width: 32px;
	}
}

.logo {
	width: clamp(100px, 35vw, 140px);
	aspect-ratio: calc(141 / 38);
}

.background-logo {
	position: absolute;
	opacity: 0.1;
	aspect-ratio: 1;
	animation: gentle-scale 20s ease-in-out infinite alternate;

	@media (max-width: 849px) {
		top: 0;
		width: 130%;
		left: -40%;
	}

	@media (min-width: 850px) {
		top: 50%;
		left: 0;
		translate: 0 -20%;
		width: 90%;
	}
}

dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100dvw;
	height: 100dvh;
	translate: -50% -50%;
	max-width: 1000px;
	max-height: none;
	box-shadow: var(--card-shadow);
	border: var(--standard-border);

	@media (min-width: 600px) {
		height: 90dvh;
		width: 90dvw;
		border-radius: 0.5rem;
	}

	&::backdrop {
		background: var(--active-background);
		backdrop-filter: blur(0.25rem);
	}

	& > * {
		padding: 2rem;
	}

	.title-bar {
		position: sticky;
		top: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: var(--standard-border);
		padding: 0.5rem 0.5rem 0.5rem 2rem;
		background: var(--background-primary);
		z-index: 1;

		button {
			background: none;
			border: none;
			font-size: 2rem;
			aspect-ratio: 1;
			line-height: 1;
			width: 3rem;
			cursor: pointer;

			&:focus {
				outline: none;
			}
		}
	}

	.modal-content {
		display: flex;
		gap: 2rem;
		position: absolute;
		inset: 4rem 0 0;

		@media (max-width: 699px) {
			flex-direction: column;
		}

		& > *:first-child {
			min-width: 340px;

			@media (max-width: 699px) {
				border-bottom: var(--standard-border);
				padding-bottom: 2rem;
			}

			@media (min-width: 700px) {
				border-right: var(--standard-border);
				padding-right: 2rem;
			}
		}

		.headline {
			display: flex;
			flex-direction: column;
			gap: 2rem;
			justify-content: space-between;
			align-items: flex-start;
		}

		blockquote {
			margin-bottom: 1rem;
		}
	}
}

/* Layout Helpers */

.narrow-container {
	max-width: 75ch;
}

:where(h1, h2, h3, p, ul, ol) {
	& + :where(h1, h2, h3, p, ul, ol) {
		margin-top: 1em;
	}
	& + :where(.button-group) {
		margin-top: 2em;
	}
}

* + hr,
hr + * {
	margin-top: 4rem;
}

/* Sections */
:where(nav, header, section, footer) {
	background-color: var(--background-color);
	border-bottom: var(--standard-border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: clamp(4rem, 15vw, 6rem) 0;
	position: relative;
	overflow: hidden;

	& > * {
		width: 90%;
		max-width: 1000px;
	}
}

nav {
	position: sticky;
	height: calc(var(--header-height) - 1px);
	top: 0;
	z-index: 100;
	padding: 0;
	background-image: linear-gradient(
		var(--hover-background),
		var(--hover-background)
	);

	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;

		@media (max-width: 1000px) {
			width: 100%;
			padding-left: 5%;
		}
	}

	a:has(.logo) {
		display: flex;
	}

	.links {
		display: flex;

		a {
			padding: 1.5rem clamp(1rem, 4vw, 2rem);
			border-left: var(--standard-border);
			text-decoration: none;

			&:last-child {
				border-right: var(--standard-border);
			}

			&:hover {
				background-color: var(--hover-background);
			}

			&:active {
				background-color: var(--active-background);
			}
		}
	}
}

header {
	min-height: 70vh;

	@media (min-width: 850px) {
		padding-top: max(15vh, 4rem);
		padding-bottom: max(20vh, 6rem);
	}

	.container {
		display: flex;
		gap: 5%;
		flex-wrap: wrap;
	}

	h1 {
		max-width: 18ch;
		padding-bottom: min(10%, 3rem);
		animation: fly-in 800ms cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s both;

		.highlight-text {
			&:nth-last-of-type(2):before {
				animation-delay: 0.9s;
			}
			&:last-of-type:before {
				animation-delay: 1.5s;
			}
		}
	}

	.main-content {
		flex: 1;
		animation: fade-in 800ms ease-in 1s both;
		min-width: 300px;

		@media (min-width: 650px) {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: flex-end;

			& > * {
				width: 100%;
				min-width: 300px;
				max-width: 45ch;
			}
		}
	}
}

.our-network {
	.container {
		animation: fade-in 800ms ease-in 1.5s both;
		display: grid;
		gap: 5rem;
		grid-template-columns: 1fr;

		@media (min-width: 950px) {
			grid-template-columns: 1fr 2fr;
		}
	}

	.description {
		max-width: 500px;
	}

	.expertise-grid {
		display: grid;
		gap: 1rem;
		grid-template-columns: 1fr;

		@media (min-width: 600px) {
			grid-template-columns: 1fr 1fr;
		}
	}

	.card {
		animation: fade-in 800ms ease-in both;

		&:nth-of-type(1) {
			animation-delay: 1.7s;
		}

		&:nth-of-type(2) {
			animation-delay: 1.9s;
		}

		&:nth-of-type(3) {
			animation-delay: 2.1s;
		}

		&:nth-of-type(4) {
			animation-delay: 2.3s;
		}

		@media (max-width: 599px) {
			&:nth-of-type(2n) {
				background-color: var(--brand-bright-purple);
			}
		}

		@media (min-width: 600px) {
			&:nth-of-type(2),
			&:nth-of-type(3) {
				background-color: var(--brand-bright-purple);
			}
		}
	}
}

.partner-section {
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.partner-header {
		max-width: 60ch;
		text-align: center;

		.logos {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 1rem;
			margin-top: 2rem;

			img {
				height: 50px;
			}
		}

		.button-group {
			justify-content: center;
		}
	}

	.case-studies {
		width: 100%;
		padding-top: 4rem;
		max-width: none;

		.card {
			display: flex;
			flex-direction: column;
			gap: 2rem;
			justify-content: space-between;
			cursor: pointer;
			height: 100%;
			min-height: fit-content;

			@media (max-width: 1299px) {
				width: clamp(200px, 80%, 600px);
				margin-right: 1rem;

				&:not(.is-selected) {
					opacity: 0.6;
				}
			}

			@media (min-width: 1300px) {
				width: clamp(200px, 100%, 400px);
				opacity: 0.6;
				margin-right: 2rem;

				/* Style the selected card and the cards on either side of it, 
                including when the selected card is the first card in the set 
                when we want to grab the last card, and vice versa */

				&.is-selected,
				&.is-selected + .card,
				&:has(+ .is-selected),
				&.is-selected:first-child ~ :last-child,
				:first-child:has(~ &.is-selected:last-child) {
					opacity: 1;
				}
			}

			button {
				margin-top: 1rem;
			}
		}
	}
}

.source {
	.client,
	.role {
		font-style: italic;
	}

	.client {
		font-weight: bolder;
	}

	.role {
		margin-top: 0;
	}
}

.join-team-section {
	background-color: var(--background-primary-purple-jewel);
}

footer {
	.container {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: 4rem;

		@media (max-width: 550px) {
			flex-direction: column;
		}
	}

	.logo {
		width: 200px;
	}
}

/* Jobs pages */

.job-listings {
	background-color: var(--background-primary-purple-jewel);
	padding-block: 2rem;

	.new-flag {
		display: inline-block;
		font-size: 0.8em;
		font-weight: bolder;
		background: var(--background-primary-purple-jewel);
		padding: 0.1em 0.3em;
		vertical-align: middle;
		border-radius: 4px;
		margin-left: 0.3em;
		margin-top: -0.2em;
	}

	table {
		display: block;
		box-shadow: var(--card-shadow);
		border-radius: 16px;
		background-color: var(--background-color);
		border: var(--standard-border);
		border-collapse: collapse;
		overflow: hidden;
	}

	td,
	th {
		text-align: left;

		& > a {
			display: block;
			text-decoration: none;
		}
	}

	td {
		&:nth-child(3) {
			/*Job title*/
			font-weight: 600;
		}
	}

	tr:not(:has(th)):hover {
		background-color: var(--background-primary-purple-jewel);
	}

	@media (max-width: 699px) {
		tr:has(th) {
			display: none;
		}

		td {
			text-align: left;

			& > a {
				padding: 0 1rem;
			}

			&:first-child > a {
				padding-top: 1rem;
			}

			&:last-child > a {
				padding-bottom: 1rem;
			}
		}

		tr,
		tbody {
			width: 100%;
			display: flex;
			flex-direction: column;
			border-bottom: var(--standard-border);
		}
	}

	@media (min-width: 700px) {
		td,
		th {
			border-bottom: var(--standard-border);

			& > a {
				padding: 1rem 0;
			}

			&:first-child > a {
				padding-left: 1rem;
			}

			&:last-child > a {
				padding-right: 1rem;
			}
		}

		th {
			font-weight: 600;
			padding: 1rem 0;

			&:first-child {
				padding-left: 1rem;
				width: 9rem;
			}

			&:nth-child(2) {
				width: 7rem;
			}

			&:last-child {
				padding-right: 1rem;
			}
		}
	}
}

/* Custom Flickity styles for the carousel buttons */

.flickity-button {
	--flickity-button-width: 3rem;

	@media (max-width: 700px) {
		--flickity-button-width: 2.5rem;
	}

	background: var(--brand-purple);
	color: var(--content-primary);
	border: var(--standard-border);

	&,
	svg {
		transition: all 0.1s ease-out;
	}
}

.flickity-button:hover {
	--flickity-button-width: 3.5rem;

	@media (max-width: 700px) {
		--flickity-button-width: 2.5rem;
	}

	background: var(--brand-purple);

	svg {
		fill: var(--highlight-color);
	}
}

.flickity-button:active {
	--flickity-button-width: 3.25rem;

	@media (max-width: 700px) {
		--flickity-button-width: 2.25rem;
	}

	background: var(--content-primary);
	opacity: 1;
}

.flickity-button:focus {
	box-shadow: 0 0 0 5px var(--highlight-color);
}

.flickity-prev-next-button {
	width: var(--flickity-button-width);
	height: calc(2 * var(--flickity-button-width));

	&.previous {
		left: calc(-0.1 * var(--flickity-button-width));
		border-radius: 0 var(--flickity-button-width) var(--flickity-button-width) 0;
		border-left-width: 0;
	}

	&.next {
		right: calc(-0.1 * var(--flickity-button-width));
		border-radius: var(--flickity-button-width) 0 0 var(--flickity-button-width);
		border-right-width: 0;
	}
}

/* Animations */
@keyframes gentle-scale {
	from {
		scale: 100%;
	}
	to {
		scale: 120%;
	}
}

@keyframes fly-in {
	from {
		opacity: 0;
		translate: 0 50%;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes highlight {
	0% {
		left: 0;
		right: 100%;
	}
	50% {
		left: 0;
		right: 0.2em;
	}
	100% {
		left: calc(100% - 0.2em);
		right: 0.2em;
	}
}

.highlight-text {
	position: relative;

	&:before {
		content: "";
		position: absolute;
		height: 0.05em;
		background-color: var(--content-color);
		bottom: 0.1em;
		left: 0;
		right: 0;
		animation: highlight 1s ease-in-out both;
		z-index: -1;
	}
}