/* #region @keyframes */
@keyframes heroFadeDown {
	from {
		opacity: 0;
		translate: 0 -2rem;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes homeEngagementsSlider {

	0%,
	100% {
		opacity: 0;
		translate: 100%;
	}

	4% {
		opacity: 1;
		translate: 0;
	}

	20% {
		opacity: 1;
		translate: 0;
	}

	24% {
		opacity: 0;
		translate: -100%;
	}
}

@keyframes mobileNavFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* #endregion */
/* #region @prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-delay: 0s !important;
		animation-duration: 0s !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0s !important;
	}
}

/* #endregion */
/* #region Elements */
@view-transition {
	navigation: auto;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

a {
	color: var(--teal700);
	text-underline-offset: 3px;
	transition: var(--transition);
}

body {
	background-color: black;
	color: var(--black900);
	font-family: var(--font-sans);
}

button {
	border: 0;
	font-family: var(--font-sans);
	font-size: var(--fz16);
}

h1, h2, h3 {
	line-height: 1.2;
	text-wrap: balance;
}

hr {
	border: 0;
	border-top: 1px solid lightgrey;
	margin: 2rem 0;
}

html {
	scroll-behavior: smooth;
	scrollbar-gutter: stable;

	&:has(.nav.open) {
		overflow: hidden;
	}
}

img {
	display: inline-block;
	max-width: 100%;
}

p {
	font-size: var(--fz18);
	line-height: 1.5;
	text-wrap: pretty;

	+ p {
		margin-top: 1.2rem;
	}
}

sup {
	font-size: .5em;
	margin-inline: .1rem;
	position: relative;
	top: -.7em;
	vertical-align: 0;
}

ul {
	list-style: none;
	padding: 0;
}

/* #endregion */
/* #region Global */
.btn {
	background-color: var(--teal700);
	border: 2px solid transparent;
	color: white;
	display: inline-block;
	font-size: var(--fz16);
	font-weight: 600;
	letter-spacing: 1px;
	padding: 1.2rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: var(--transition);

	&:hover {
		border-color: white;
		text-decoration: none;
	}
}

.content {
	margin-inline: auto;
	width: min(85%, var(--content-max-width, 1200px));
}

.skip {
	background-color: var(--teal900);
	color: white;
	left: 1rem;
	padding: .5rem 1rem;
	position: absolute;
	text-decoration: none;
	top: -100%;

	&:focus {
		top: 1rem;
	}
}

.smtext {
	font-size: var(--fz14);
	margin-top: 1rem;
}

/* #endregion */
/* #region Nav */
.nav {
	align-items: center;
	display: flex;
	gap: 1em 2vw;
	justify-content: center;
	padding-top: var(--px16);

	@media (width < 800px) {
		backdrop-filter: blur(3px);
		background-color: var(--teal700-90);
		display: none;
		flex-direction: column;
		left: 0;
		opacity: 0;
		padding-bottom: 2em;
		position: absolute;
		top: 100%;
		width: 100%;
		z-index: 10;

		&.open {
			animation: mobileNavFadeIn .3s ease forwards;
			display: flex;
		}
	}

	a {
		border-bottom: 2px solid transparent;
		color: var(--white-70);
		display: inline-block;
		font-size: var(--fz16);
		font-weight: 500;
		letter-spacing: 1px;
		line-height: 1;
		padding-bottom: .5em;
		text-decoration: none;
		text-transform: uppercase;
		transition: var(--transition);

		@media (width < 800px) {
			border: none;
			color: white;
		}

		&:hover {
			border-color: white;
			color: white;
		}
	}
}

.nav-toggle {
	background-color: var(--teal900);
	border: none;
	color: white;
	cursor: pointer;
	display: none;
	font-size: var(--fz20);
	height: 50px;
	margin-top: var(--px16);
	width: 50px;

	@media (width < 800px) {
		display: grid;
		margin-inline: auto;
		place-items: center;
	}

	.fa-xmark {
		display: none;
	}

	&.open {
		.fa-bars {
			display: none;
		}

		.fa-xmark {
			display: block;
			font-size: var(--fz24);
		}
	}
}

/* #endregion */
/* #region Header */
.header {
	background-color: var(--teal700-90);
	padding-block: 1.2rem;
	position: fixed;
	text-align: center;
	width: 100%;
	z-index: 10;

	.logo {
		display: block;
		margin-inline: auto;
		transition: var(--transition);
		width: 250px;

		@media (width < 1100px) {
			width: 200px;
		}

		&.scrolled {
			width: 150px;
			transition: var(--transition);
		}
	}
}

/* #endregion */
/* #region Footer */
.footer {
	background-color: black;
	color: var(--white-70);
	padding-block: 4rem 8rem;
	text-align: center;

	a {
		color: var(--teal500);
		transition: var(--transition);

		&:hover {
			color: white;
			text-decoration: underline;
		}
	}

	p {
		font-size: var(--fz16);
	}

	.links {
		font-size: var(--fz14);
		letter-spacing: 1px;
		margin-top: 3rem;
		text-transform: uppercase;

		a + a {
			margin-left: .6em;
		}
	}
}

/* #endregion */
/* #region Hero */
.hero {
	background: linear-gradient(var(--black-30), var(--black-30)), url("https://ripcord.sirv.com/Colchester/iStock-583971628.jpg?cy=200") center/cover no-repeat;
	color: white;
	padding-block: 35vh 25vh;
	text-align: center;

	@media (width < 1000px) {
		padding-top: 16rem;
	}

	@media (width < 500px) {
		padding-top: 12rem;
	}

	h1 {
		animation: heroFadeDown 1.2s ease .5s both;
		font-size: var(--fz72);
		font-weight: 500;
		letter-spacing: -1px;
		margin: 0 auto 2.5rem;
		max-width: 18ch;

		@media (width < 1400px) {
			font-size: var(--fz60);
		}
	}

	.btn {
		animation: heroFadeDown 1.2s ease 1s both;
	}
}

/* #endregion */
/* #region Home-Engagements */
.home-engagements {
	background: linear-gradient(var(--black-90), var(--black-70)), url("https://ripcord.sirv.com/Colchester/background-transaction.jpg") center/cover;
	color: lightgrey;
	padding-block: 6rem;

	a {
		color: var(--teal500);

		&:hover {
			color: white;
		}
	}

	h2 {
		font-size: var(--fz36);
		font-weight: 500;
		margin-bottom: 4rem;
		text-align: center;
	}

	p:first-of-type {
		margin-bottom: .2em;
	}
}

.slider {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	overflow: hidden;

	div {
		animation: homeEngagementsSlider 30s infinite both;
		color: white;
		font-size: var(--fz24);
		grid-column: 1/-1;
		grid-row: 1;
		opacity: 0;
		width: 100%;

		&:nth-child(1) {
			animation-delay: 0s;
		}

		&:nth-child(2) {
			animation-delay: 6s;
		}

		&:nth-child(3) {
			animation-delay: 12s;
		}

		&:nth-child(4) {
			animation-delay: 18s;
		}

		&:nth-child(5) {
			animation-delay: 24s;
		}
	}
}

.sliderbox {
	margin-inline: auto;
	width: 60%;

	@media (width < 900px) {
		width: 90%;
	}
}

/* #endregion */
/* #region Home-Intro */
.home-intro {
	background: linear-gradient(to right, var(--white-70), white 33%, white 67%, var(--white-70)), url("https://ripcord.sirv.com/DLDocko/freepik-80532.jpg") center/cover no-repeat;
	padding-block: 5rem 6rem;
	text-align: center;

	a {
		text-decoration: none;
	}

	h2 {
		font-size: var(--fz32);
		font-weight: 600;
		margin-bottom: .7em;
		text-transform: uppercase;
	}

	p {
		font-size: var(--fz20);
		margin: 0 auto;
		max-width: 55rem;
	}
}

/* #endregion */
/* #region Modal */
.modal {
	background-color: var(--black-70);
	height: 100%;
	left: 0;
	opacity: 0;
	overflow: auto;
	position: fixed;
	top: 0;
	transition: var(--transition);
	visibility: hidden;
	width: 100%;
	z-index: 10;

	&.visible {
		opacity: 1;
		visibility: visible;
	}
}

.modal-close {
	background-color: white;
	border: 2px solid currentColor;
	color: var(--teal500);
	float: right;
	font-size: var(--fz28);
	font-weight: 500;
	line-height: 1;
	margin: 0 0 2rem 2rem;
	padding-inline: .3rem;
	transition: var(--transition);

	&:hover,
	&:focus {
		background-color: var(--teal700);
		border-color: var(--teal700);
		color: white;
		cursor: pointer;
	}
}

.modal-content {
	background-color: white;
	border: 1px solid grey;
	margin: 10% auto;
	padding: min(3rem, 10%);
	width: min(700px, 80%);

	a[href^="mailto:"] {
		display: block;
	}

	p {
		color: var(--black900);
		font-size: var(--fz16);

		@media (width < 500px) {
			font-size: var(--fz14);
		}

		+ a {
			margin-top: 1rem;
		}
	}
}

.modal-trigger {
	cursor: pointer;
}

/* #endregion */
/* #region Sub */
.sub {
	background-color: white;
	padding-bottom: 6rem;

	a:hover {
		text-decoration: underline;
	}

	h1 {
		font-size: var(--fz36);
		font-weight: 600;
		margin-bottom: .8em;
		text-transform: uppercase;
	}

	h2 {
		font-size: var(--fz28);
		font-weight: 600;
		margin-block: 1em .4em;
	}

	h3 {
		font-size: var(--fz20);
		font-weight: 600;
	}

	li {
		line-height: 1.4;
		margin-left: .5rem;
		padding-left: .5rem;
	}

	li + li {
		margin-top: .7rem;
	}

	ul {
		font-size: var(--fz18);
		list-style: disc;
		margin: 1.3em 0 2em 1.3em;
	}
}

.subhero {
	background: var(--subhero-bg) center / cover no-repeat;
	filter: grayscale(1);
	height: 25rem;
	margin-bottom: 4rem;

	@media (width < 500px) {
		height: 20rem;
		margin-bottom: 2rem;
	}

	&.about {
		--subhero-bg: url("https://ripcord.sirv.com/Colchester/shutterstock_32505145.jpg");
	}

	&.careers {
		--subhero-bg: url("https://ripcord.sirv.com/Colchester/AdobeStock_194123026.jpeg");
	}

	&.contact {
		--subhero-bg: url("https://ripcord.sirv.com/Colchester/shutterstock_56992912.jpg");
	}

	&.engagements {
		--subhero-bg: url("https://ripcord.sirv.com/Colchester/shutterstock_28821871.jpg");
	}

	&.experience {
		--subhero-bg: url("https://ripcord.sirv.com/Colchester/shutterstock_84174688.jpg");
	}

	&.professionals {
		--subhero-bg: url("https://ripcord.sirv.com/Colchester/shutterstock_86159071.jpg");
	}

	&.services {
		--subhero-bg: url("https://ripcord.sirv.com/Colchester/shutterstock_28818970.jpg");
	}
}

/* #endregion */
/* #region Sub-Cares */
.sub-cares-grid {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;

	a {
		text-align: center;
	}

	img {
		max-height: 90px;
		max-width: 180px;
	}
}

/* #endregion */
/* #region Sub-Contact */
.sub-contact-grid {
	display: grid;
	gap: 1rem 10vw;
	grid-template-columns: auto 1fr;
	justify-content: start;

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

/* #endregion */
/* #region Sub-Engagements */
.filter-btn {
	background-color: lightgrey;
	border-radius: var(--radius);
	color: black;
	cursor: pointer;
	font-size: var(--fz14);
	letter-spacing: 1px;
	margin: .5rem .3rem 0 0;
	padding: .75rem 1.25rem;
	text-transform: uppercase;
	transition: var(--transition);

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

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

.filter-btn-grid {
	align-items: end;
	display: grid;
	grid-auto-rows: max-content;
	grid-gap: 2rem;
	grid-template-columns: repeat(3, auto);
	justify-content: center;
	justify-items: center;
	margin-bottom: 3rem;

	@media (width < 1100px) {
		grid-template-columns: auto;
	}
}

.filter-category {
	text-align: center;

	> div {
		font-size: var(--fz14);
		letter-spacing: 1px;
		margin-bottom: .4em;
		text-transform: uppercase;
	}
}

.filter-show {
	display: block;
}

.sub-engagements-grid {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
	justify-content: center;

	img {
		border: 2px solid lightgrey;
		box-shadow: 1px 1px 2px 1px lightgrey;
		filter: saturate(0);
		padding: .5rem;
		transition: var(--transition);

		&:hover, &:focus-visible {
			border-color: var(--teal500);
			box-shadow: 6px 6px 4px 1px lightgrey;
			filter: saturate(1);
			outline: none;
			scale: 1.03;
			translate: -.2rem -.2rem;
		}
	}

	.modal-content a {
		display: block;
		font-size: var(--fz14);
		letter-spacing: 1px;
		margin-top: 1rem;
		text-transform: uppercase;
		width: max-content;
	}
}

/* #endregion */
/* #region Sub-Professionals */
.sub-professionals-grid {
	display: grid;
	gap: 3rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	justify-items: center;
	margin-top: 4rem;
	transition: var(--transition);

	@media (width < 800px) {
		justify-content: center;
	}

	h2 {
		margin-top: 0;
	}
}

.sub-professionals-grid .modal-content {
	background: linear-gradient(150deg, white 60%, var(--teal300));

	a {
		margin-bottom: .3em;
	}

	h2 {
		font-size: var(--fz24);
		font-weight: 600;
		margin-bottom: .3em;
	}

	img {
		background-image: url("https://ripcord.sirv.com/Colchester/bio-back.jpg?cx=20");
		border: 2px solid lightgrey;
		margin-bottom: .5rem;
		width: 150px;

		@media (width < 500px) {
			width: 120px;
		}
	}

	.pip {
		background-color: var(--teal100);
		height: 4px;
		margin-block: 1.5rem;
		width: min(2rem, 10%);
	}

	.role {
		font-size: var(--fz14);
		font-weight: 600;
		letter-spacing: 1px;
		margin-bottom: .3em;
		text-transform: uppercase;
	}
}

.sub-professionals-thumbnail {
	font-size: var(--fz14);
	text-align: center;

	h2 {
		font-size: var(--fz18);
		font-weight: 500;
		margin-bottom: .2em;
	}

	img {
		background-image: url("https://ripcord.sirv.com/Colchester/bio-back.jpg?cx=20");
		border: 2px solid lightgrey;
		filter: saturate(0);
		margin-bottom: .5rem;
		transition: var(--transition);

		&:hover {
			border-color: var(--teal700);
			filter: saturate(1);
		}
	}

	.role {
		font-size: var(--fz12);
		font-weight: 600;
		letter-spacing: 1px;
		margin-bottom: .3em;
		text-transform: uppercase;
	}
}

/* #endregion */