@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
	--site-pad: 2rem;
	--bar-height-lg: 7rem;
	--bar-height-sm: 5rem;
	--yellow: #f2b22c;
	--orange: #fd9e56;
	--blue-dark: #022942;
	--blue-light: #045687;
	--serif: "PT Serif", serif;
	--sans: "Montserrat", sans-serif;
}

/* 🔸 Reset */

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

img {
	width: 100%;
	margin: 0;
}
button {
	background: none;
	border: none;
	cursor: pointer;
}

/* 🔸 Typography */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
a,
q,
span,
button,
input,
textarea,
label {
	font-family: var(--sans);
	color: var(--blue-dark);
	line-height: 1em;
}
h1 {
	color: var(--blue-light);
	font-size: 1.875rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.2em;
}
h2 {
	font-size: 2rem;
	font-weight: 600;
	line-height: 2.3rem;
}
p {
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.3125rem;
	color: #000;
}

/* 🔸 Utility */

html {
	scroll-behavior: smooth;
}
.no-scroll {
	overflow: hidden;
	width: 100%;
}
.container {
	width: 100%;
	max-width: calc(960px + var(--site-pad) + var(--site-pad));
	margin: 0 auto;
	padding: 0 var(--site-pad);
}
.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.bar {
	inset: 0 0 auto 0;
	background: var(--blue-dark);
	position: fixed;
	transition: background 0.3s linear, border 0.3s linear;
	z-index: 100;
	border-bottom: 4px solid transparent;
}
.bar .group {
	position: relative;
	height: var(--bar-height-sm);
	transition: height 0.3s ease;
}
.bar .logo {
	position: absolute;
	inset: 50% auto auto 0;
	translate: 0 -50%;
	width: 69px;
	height: 69px;
	opacity: 0;
	transition: opacity 0.3s linear;
}
.bar nav {
	position: absolute;
	inset: auto 50% 0.5rem auto;
	translate: 50% 0;
	display: flex;
	gap: 1rem;
	transition: translate 0.3s ease, inset 0.3s ease;
}
.bar nav a {
	font-size: 1rem;
	font-weight: 700;
	padding: 0.7em 1em;
	text-decoration: none;
	position: relative;
	color: #fff;
	white-space: nowrap;
	transition: color 0.3s linear;
}
.bar nav a::before {
	content: "";
	position: absolute;
	inset: auto 1em 0 1em;
	height: 3px;
	background: #fff;
	scale: 0 1;
	transition: scale 0.1s ease;
	border-radius: 2rem;
}
.bar nav a:hover::before {
	scale: 1 1;
}
.bar.scrolled {
	background: #fff;
	border-bottom: 4px solid var(--yellow);
}
.bar.scrolled .group {
	height: var(--bar-height-lg);
}
.bar.scrolled .logo {
	opacity: 1;
}
.bar.scrolled nav {
	inset: auto 0 1.5rem auto;
	translate: 0 0;
}
.bar.scrolled nav a {
	color: var(--blue-dark);
}
.bar.scrolled nav a::before {
	background: var(--blue-dark);
}
.bar button {
	width: 2rem;
	height: 2rem;
	position: absolute;
	inset: 50% 0 auto auto;
	translate: 0 -50%;
	display: none;
}
.bar button svg {
	fill: #fff;
	width: 100%;
}
.bar.scrolled button svg {
	fill: var(--blue-dark);
}
@media screen and (max-width: 800px) {
	.bar nav,
	.bar.scrolled nav {
		position: absolute;
		inset: 0 calc(var(--site-pad) * -1) auto auto;
		flex-direction: column;
		align-items: flex-start;
		background: var(--blue-light);
		padding: 6rem 2rem 3rem 2rem;
		translate: unset;
		transform: translate(100%, 0);
		width: 100%;
		transition: translate 0.3s ease;
	}
	.bar .active nav {
		translate: -100% 0;
	}
	.bar .active .open_nav {
		display: none;
	}
	.bar .active .close_nav {
		display: block;
	}
	.bar nav a,
	.bar.scrolled nav a {
		font-size: 1.5rem;
		color: #fff;
	}
	.bar .open_nav {
		display: block;
	}
	.bar.scrolled .active .close_nav svg {
		fill: #fff;
	}
}
#about,
#leadership,
#news,
#contact {
	scroll-margin-top: 116px;
}
/* page */
.hero {
	position: relative;
	border-bottom: 8px solid var(--blue-dark);
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	z-index: -1;
	opacity: 0.15;
}
.hero .group {
	padding: 6.25rem 0 5rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 48.75rem;
	margin: var(--bar-height-sm) auto 0 auto;
	text-align: center;
}
.hero .logo {
	width: 100%;
	max-width: 26.25rem;
	margin: 0 0 3.3125rem 0;
}
.hero .txt {
	max-width: 32rem;
}
.com {
	background: var(--blue-dark);
	overflow: hidden;
	position: relative;
	z-index: 2;
	border-top: 5px solid var(--yellow);
}
.com::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 85%;
	height: 100%;
	min-width: 800px;
	background: url("./images/angle_shape.svg") top right / cover no-repeat;
	z-index: -1;
}
.com .wrapper {
	padding: 3.75rem 0;
}

.com .txt {
	width: 45%;
}
.com h2 {
	color: var(--blue-light);
	max-width: 18.75rem;
	margin: 0 0 1.875rem 0;
}
.com p:not(:last-child) {
	margin: 0 0 1.2rem 0;
}
.com .images {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.com .image {
	width: 100%;
	height: 100%;
	text-align: right;
}
.com .image img {
	width: 60%;
	height: 100%;
	object-fit: cover;
	object-position: top right;
}
@media screen and (min-width: 1000px) {
	.com .wrapper {
		padding: 6vw 0;
	}
}
@media screen and (max-width: 744px) {
	.com .txt {
		width: 60%;
	}
	.com::before {
		opacity: 0.85;
	}
	.com .image img {
		width: 100%;
	}
}
@media screen and (max-width: 600px) {
	.com .txt {
		width: 100%;
	}
	.com::before {
		width: 200%;
	}
}
.improving {
	background: linear-gradient(0deg, #022942 36.11%, rgba(2, 41, 66, 0.4) 100%),
		url("./images/camo.png") center center / cover no-repeat,
		linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-dark) 100%);
	background-blend-mode: normal, soft-light, normal;
	padding: 11.125rem 0 3.125rem 0;
}
.improving h2 {
	color: #fff;
	text-align: center;
	margin: 0 0 3.125rem 0;
}
.improving .group {
	display: flex;
	gap: 2rem;
}
.improving .group > * {
	flex: 1;
	text-align: center;
}
.improving .icon {
	display: grid;
	place-content: center;
	height: 5.9375rem;
	margin: 0 0 1rem 0;
}
.improving h3 {
	color: #fff;
	font-size: 1rem;
	margin: 0 0 1rem 0;
	line-height: 1.2em;
}
.improving p {
	color: #fff;
}
.improving .icon img {
	width: auto;
	height: 100%;
}
@media screen and (max-width: 750px) {
	.improving {
		padding: 8rem 0 5rem 0;
	}
	.improving .group {
		flex-direction: column;
		align-items: center;
	}
	.improving .group > * {
		max-width: 500px;
	}
}
.leadership {
	display: grid;
}
.team {
	padding: 2.8125rem 0;
	background: #e7e7e7;
}
.team .container {
	overflow: hidden;
}
.team .txt {
	padding: 1rem 0 0 0;
	text-align: left;
}
.team h2 {
	margin: 0 0 2.25rem 0;
	color: var(--blue-light);
	text-align: center;
}
.team .group {
	/* remove max widht and adjust columns to 4 when we add the board back */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding: 0 1rem;
	max-width: 784px;
	justify-self: center;
	gap: 1rem;
}
.team .group > * {
	width: 100%;
	max-width: 14rem;
	padding: 1rem;
	border-radius: 1.9em;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transition: box-shadow 0.1s linear;
}
.team .img,
.popup .img {
	border-radius: 0.9375rem;
	overflow: hidden;
}
.team .img img,
.popup .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.team .txt .popup .txt {
	padding: 1.25rem 0 0 0;
	text-align: left;
}
.team .name,
.popup .name {
	color: var(--blue-light);
	font-family: var(--sans);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1em;
	margin: 0 0 0.6em 0;
}
.team .position,
.popup .position {
	font-family: var(--serif);
	color: #000;
	font-weight: 700;
	font-size: 0.875rem;
	font-style: italic;
	line-height: 1em;
	margin: 0 0 0.6em 0;
}
.team .company,
.popup .company {
	font-family: var(--serif);
	color: #000;
	font-weight: 400;
	font-size: 0.625rem;
	line-height: 1.2em;
}
.team .cta {
	margin: 2rem auto 1rem 0;
	font-family: var(--sans);
	color: var(--blue-light);
	font-weight: 600;
	transition: opacity 0.1s linear;
}
.team .spacer {
	height: 3rem;
}
.team .group > *:hover,
.team .group > *:focus-within {
	box-shadow: 0 0 2rem rgba(0, 0, 0, 0.01);
	background: #fff;
}
.team .group > *:hover .cta,
.team .group > *:focus-within .cta {
	opacity: 1;
}
@media screen and (max-width: 830px) {
	.team .group {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.team .group > * {
		max-width: unset;
	}
}
@media screen and (max-width: 600px) {
	.team .group {
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem;
	}
	.team .txt {
		text-align: center;
		margin: 0 auto;
	}
	.team h2 {
		text-align: center;
	}
	.team .name {
		font-size: 1.8rem;
	}
	.team .position {
		font-size: 1.5rem;
	}
	.team .company {
		font-size: 1rem;
		line-height: 1.4em;
	}
	.team .cta {
		margin: 1.5rem auto 0 auto;
		display: block;
		opacity: 1;
		font-size: 1.2rem;
	}
}
body:has(.popup) {
	overflow: hidden;
}
.popup {
	position: relative;
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.popup .outer {
	position: absolute;
	inset: 0;
	background: rgba(2, 41, 66, 0.8);
}
.popup .box {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	padding: 4rem;
	background: #fff;
	border-radius: 1rem;
	z-index: 1001;
	overflow: hidden;
	width: 85%;
	max-width: 37.5rem;
}
.popup .close_popup {
	fill: var(--blue-dark);
	width: 5rem;
	height: 5rem;
	position: absolute;
	inset: 0 0 auto auto;
	padding: 2rem;
}
.popup .close_popup:hover,
.popup .close_popup:focus-within {
	fill: var(--blue-light);
}
.popup .content {
	display: flex;
	flex-direction: column;
	max-height: 70vh;
}
.popup .header {
	display: flex;
	gap: 1.5rem;
	padding: 0 0 1rem 0;
	border-bottom: 2px solid var(--blue-dark);
	margin: 0 0 2rem 0;
	flex: 1;
}
.popup .img {
	flex: 2;
	max-width: 12rem;
}
.popup .txt {
	flex: 4;
}
.popup .company {
	font-size: 1rem;
}
.popup .bio_txt p:not(:last-child) {
	margin: 0 0 1.2rem 0;
}

.popup .content .bio_txt {
	overflow-y: auto;
	flex: 1;
	padding: 0 2rem 0 0;
}
@media screen and (max-width: 600px) {
	.popup .box {
		padding: 2rem;
	}
}
.news {
	background: var(--blue-dark);
	padding: 2.8125rem 0;
}
.news h2 {
	margin: 0 0 2.25rem 0;
	color: var(--yellow);
}
.news .header {
	padding: 1rem;
	border: 1px solid var(--blue-light);
	border-bottom: none;
	border-radius: 1rem 1rem 0 0;
}
.news .group {
	display: flex;
	gap: 3rem;
}
.news .group > * {
	flex: 1;
}
.news h3 {
	color: var(--yellow);
	font-family: var(--sans);
	font-size: 1.375rem;
	line-height: 1.75rem;
	font-weight: 400;
}

.news .img {
	border-radius: 0 0 1rem 1rem;
	overflow: hidden;
}
.news .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.news .featured {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.news .featured .txt {
	padding: 0 0 0 1rem;
	border-left: 1px solid var(--blue-light);
}
.news .featured p {
	color: #fff;
	font-size: 1rem;
	line-height: 1.3125rem;
	font-weight: 400;
	margin: 1rem 0 2.5rem 0;
}
.btn {
	padding: 0.9em 1.4em;
	border-radius: 10rem;
	background: var(--yellow);
	color: var(--blue-dark);
	font-size: 0.875rem;
	font-weight: 400;
	text-decoration: none;
	display: inline-block;
	border: 1px solid transparent;
}
.btn:hover,
.btn:focus-within {
	background: var(--blue-light);
	color: #fff;
}
.news .feed {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
}
.news .feed .wrapper {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.news .feed .wrapper a {
	text-decoration: none;
	padding: 1.5rem;
	border: 1px solid var(--blue-light);
	border-radius: 1rem;
	display: block;
}
.news .feed .wrapper a:hover,
.news .feed .wrapper a:focus-within,
.news .featured:hover .header,
.news .featured:focus-within .header {
	background: rgba(4, 86, 135, 0.25);
}
.news .feed h3 {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3125rem;
}
.news .feed span {
	color: #fff;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1.3125rem;
	margin: 1.5rem 0 0 0;
	display: block;
}

@media screen and (max-width: 650px) {
	.news .group {
		flex-direction: column;
	}
}

.connect {
	background: var(--blue-dark);
	position: relative;
	z-index: 2;
	border-bottom: 2rem solid var(--yellow);
	overflow: hidden;
}
.connect::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 80%;
	height: 100%;
	min-width: 800px;
	background: url("./images/angle_shape_2.svg") top right / cover no-repeat;
	z-index: -1;
}
.connect .wrapper {
	padding: 3.75rem 0;
}

.connect .txt {
	width: 45%;
}
.connect h2 {
	max-width: 18.75rem;
	margin: 0 0 1.875rem 0;
}
.connect p {
	font-family: var(--sans);
}
.connect p:not(:last-child) {
	margin: 0 0 1.2rem 0;
}
.connect .images {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.connect .image {
	width: 60vw;
	height: 100%;
	margin: 0 0 0 auto;
}
.connect .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top right;
}
@media screen and (min-width: 1000px) {
	.connect .wrapper {
		padding: 6vw 0;
	}
}
@media screen and (max-width: 744px) {
	.connect .txt {
		width: 70%;
	}
}
@media screen and (max-width: 600px) {
	.connect .txt {
		width: 100%;
	}
}
.btn.linkedin {
	border: 1px solid var(--blue-dark);
	background: transparent;
	padding: 0.9em 3.5em 0.9em 1.4em;
	position: relative;
}
.btn.linkedin::after {
	content: "";
	position: absolute;
	inset: 50% 1em auto auto;
	translate: 0 -50%;
	background: url("./images/linkedin.svg") center center / contain no-repeat;
	width: 1.5rem;
	height: 1.5rem;
}
.btn.linkedin:hover,
.btn.linkedin:focus-within {
	background: var(--yellow);
	border: 1px solid transparent;
	color: var(--blue-dark);
}
@media screen and (max-width: 600px) {
	.connect {
		display: flex;
		flex-direction: column;
	}
	.connect .images {
		position: unset;
		height: 250px;
	}
	.connect .image img {
		object-position: top right;
	}
	.connect::before {
		display: none;
	}
	.connect {
		background: #fff;
	}
	.connect .image {
		width: 100%;
	}
}
.know {
	background: linear-gradient(0deg, #022942 36.11%, rgba(2, 41, 66, 0.4) 100%),
		url("./images/camo.png") center center / cover no-repeat,
		linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-dark) 100%);
	background-blend-mode: normal, soft-light, normal;
	padding: 2.5rem 0;
	border-bottom: 4px solid var(--yellow);
}
.know .group {
	display: flex;
	gap: 1rem;
}
.know .group > div {
	flex: 1;
}
.know .group .wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}
.know .group .logo {
	max-width: 220px;
}
.know .txt h2 {
	color: var(--yellow);
	margin: 0 0 0.4em 0;
}
.know .txt p {
	font-family: var(--sans);
	color: #fff;
	margin: 0 0 1.2em 0;
}

@media screen and (max-width: 650px) {
	.know .group {
		flex-direction: column;
		text-align: center;
		gap: 2rem;
	}
	.know .txt h2 {
		display: none;
	}
}
footer {
	background: #747474;
	padding: 2rem 0;
	text-align: center;
}
footer p {
	font-family: var(--sans);
	color: #fff;
	font-size: 0.625rem;
}
.news-story {
	border-bottom: 10px solid var(--blue-dark);
	padding: 140px 0 60px 0;
}
.news-story p {
	padding-top: 25px;
}
.news-story h2,
.news-story a {
	color: var(--blue-light);
}
.news-story img {
	float: right;
	width: 50%;
	padding: 30px 0 30px 30px;
}
@media screen and (max-width: 650px) {
	.news-story img {
		float: none;
		width: 100%;
		padding: 30px 0 0 0;
	}
}