/**
  * Tomorrow
  * ================================================
  */
@font-face {
	font-family: 'Tomorrow';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/assets/fonts/tomorrow/Tomorrow-Light.woff') format('woff');
}
@font-face {
	font-family: 'Tomorrow';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('/assets/fonts/tomorrow/Tomorrow-LightItalic.woff') format('woff');
}
@font-face {
	font-family: 'Tomorrow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/tomorrow/Tomorrow-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Tomorrow';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/tomorrow/Tomorrow-Italic.woff') format('woff');
}
@font-face {
	font-family: 'Tomorrow';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/tomorrow/Tomorrow-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Tomorrow';
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/tomorrow/Tomorrow-MediumItalic.woff') format('woff');
}

/**
 * General Sans
 * ================================================
 * This is a variable font
 * You can control variable axes as shown below:
 * font-variation-settings wght (range from 200.0 to 700.0)
 */
@font-face {
	font-family: 'GeneralSans-Variable';
	font-weight: 200 700;
	font-display: swap;
	font-style: normal;
	src: url('/assets/fonts/generalsans/GeneralSans-Variable.woff2') format('woff2');
}
@font-face {
	font-family: 'GeneralSans-Variable';
	font-weight: 200 700;
	font-display: swap;
	font-style: italic;
	src: url('/assets/fonts/generalsans/GeneralSans-VariableItalic.woff2') format('woff2');
}

/* Base Styles */
:root {
	
	/* COLORS */
	
	--color-yellow: #F5DD26;
	--color-green: #1E9A29;
	
	--color-white: #ffffff;
	--color-black: #000000;
	
	--color-grey: #8F8F8F;
	--color-grey_middle: #8F8F8F;
	--color-grey_light: #E5E5E5;
	--color-grey_dark: #3A3A3A;
	
	--bg-color_light: var(--color-white);
	--bg-color_dark: #282828;

	--color-base: #3A3A3A;
	--color-base_on-light: var(--color-base);
	--color-base_on-dark: #ffffff;
	
	--color-attention: hotpink;


	/* FONTS */

	--font-family_general-sans: 'GeneralSans-Variable';
	--font-family_tomorrow: 'Tomorrow';
	
	--font-family_base: var(--font-family_general-sans);
	--font-family_alt: var(--font-family_tomorrow);
	--font-family_heading: var(--font-family_tomorrow);
	
	--font-weight_light: 300;
	--font-weight_regular: 400;
	--font-weight_medium: 500;
	--font-weight_semibold: 600;
	
	/* PAGE */
	--viewport-margin-inline: 0;
	--page-margin-inline: clamp(16px, calc(-10.345px + 6.897vw), 100px);
	--constrain-width-max: calc(100vw - (var(--page-margin-inline) * 2));

}

html {
	scroll-padding-top: 7.5rem;
	font-size: clamp(12px, 4px + 0.8333333vw, 16px);
	@media (width < 1200px) {
	}	
}

body {
	margin: 0;
	padding: 0;
	
	font-family: var(--font-family_base);
	font-style: normal;
	font-weight: var(--font-weight_regular);
	line-height: 1.4;
	hyphenate-limit-chars: 6 3 3;
	hyphenate-character: "—";
	-webkit-font-smoothing: antialiased;
	
	color: var(--color-base);
	background-color: var(--color-black);
	
	display: grid;
	grid-template-columns:
		[page-start]
		var(--viewport-margin-inline)
			[content-start]
			var(--page-margin-inline)
				[constrain-start] var(--constrain-width-max) [constrain-end]
			var(--page-margin-inline)
			[content-end]
		var(--viewport-margin-inline)
		[page-end];
	grid-template-rows: repeat(20, auto);
	gap: 0;
	
	align-content: start;  /* Pulls rows to the top */
	justify-content: start;
	
	@media (width > 1640px) {
		--viewport-margin-inline: 0;
		--page-margin-inline: 0.5fr;
		--constrain-width-max: 1440px;
	}
	@media (width > 1920px) {
		--viewport-margin-inline: 0.5fr;
		--page-margin-inline: 15rem;
		--constrain-width-max: 1440px;
	}
	
}
picture {
	display: block;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 0.75rem;
}

a {
	hyphens: auto;
	hyphenate-character: "";
}
.need-attention {
	background-color: var(--color-attention);
}

.constrain {
	grid-column: constrain;
	container-type: inline-size;
}
ul, ol {
	margin-inline: 1.5rem;
	padding-inline: 0;
}
blockquote {
	position: relative;
	
	margin-block: 0 3.75rem;
	margin-inline: 0;
	padding-block: calc(2.5625rem + 1.5rem) 0;
	
	font-family: var(--font-family_alt);
	font-weight: 400;
	
	&::before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 4.125rem;
		height: 2.5625rem;
		background-image: url('data:image/svg+xml,<svg width="66" height="41" viewBox="0 0 66 41" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.088 40.192H0V22.272L17.664 0H30.848L25.088 23.296V40.192ZM59.904 40.192H34.816V22.272L52.48 0H65.664L59.904 23.296V40.192Z" fill="%23F5DD26"/></svg>');
		background-position: top left;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	cite {
		font-weight: 500;
		font-size: 1rem;
		font-style: normal;
	}
}

form {
	
	.form-row {
		position: relative;
		margin-top: 1rem;
		margin-bottom: 2rem;
		border-bottom: 1px solid var(--color-base);	
		
		&.buttons {
			border-bottom: 0;
		}
		
		&:has(input[type="submit"]) {
			margin-block-start: 3rem;
		}
		
		&:not(.buttons, .submit-result):focus-within {
			background-color: var(--color-grey_light);
			
			&>input,
			&>textarea,
			&>select {
				outline: none;
			}
		}
		
		&.submit,
		&.submit-result {
			border-bottom: none;
		}
		
		&.submit-result {
			padding-block: 0.625rem;
			padding-inline: 1rem;
			font-weight: var(--font-weight_medium);
			
			&.error {
				color: #842029;
				background-color: #f8d7da;
				border-radius: 5px;
			}
			&.success {
				color: #0f5132;
				background-color: #d1e7dd;;
				border-radius: 5px;
			}
		}
	}

	label {
		display: block;
		padding-block: 0.5em;
		font-family: var(--font-family_alt);
		font-size: 1rem;
		font-weight: var(--font-weight_medium);
		line-height: 1;
		letter-spacing: 0.2em;
		text-transform: uppercase;
	}
	
	input,
	textarea,
	select {
		display: block;
		width: 100%;
		height: 2.4rem;
		padding-block: 0.5rem;
		border: 0;
		font-family: var(--font-family_base);
		font-size: 1.25rem;
		font-weight: var(--font-weight_medium);
		background: transparent;
	}
	
	
	@container (width > 680px) {
		
		.form-row {
			gap: 0.5rem;
			display: flex;
			gap: 1rem;
			align-items: top;
		}
		
		label {
			white-space: nowrap;
			font-family: var(--font-family_alt);
			font-size: 1.5rem;
			font-weight: var(--font-weight_medium);
			line-height: 1;
			letter-spacing: 0.2em;
			text-transform: uppercase;
		}
		
		input,
		textarea,
		select {
			flex-grow: 1;
			height: 2.4rem;
			border: 0;
			font-size: 1.25rem;
		}
		
		textarea {
			height: 12rem;
		}
	}

}

a.button {
	display: inline-block;
}
button,
submit,
reset,
a.button,
input[type=button],
input[type=reset],
input[type=submit] {
	width: auto;
	height: auto;
	padding-block: 1rem;
	padding-inline: 1.25rem;
	flex-grow: 0;
	font-family: var(--font-family_alt);
	font-size: 1rem;
	font-weight: var(--font-weight_medium);
	line-height: 1;
	letter-spacing: 0.2em;	
	
	text-transform: uppercase;
	color: var(--color-base);
	border: 0;
	
	cursor: pointer;
	
	--button-color_normal: var(--color-yellow);
	--button-color_hover: oklch(from var(--color-yellow) calc(l + 0.05) c h);
	--button-color_active: var(--color-green);
	
	background-image: linear-gradient(45deg, var(--button-color_normal) 0%, var(--button-color_normal) calc(100% - 12px), transparent calc(100% - 12px) );

	&:hover,
	&:focus-visible {
		background-image: linear-gradient(45deg, var(--button-color_hover) 0%, var(--button-color_hover) calc(100% - 12px), transparent calc(100% - 12px) );
	}
	&:active {
		background-image: linear-gradient(45deg, var(--button-color_active) 0%, var(--button-color_active) calc(100% - 12px), transparent calc(100% - 12px) );
	}
	
	&:any-link {
		text-decoration: none;
	}
	
	@supports (corner-shape: bevel) {
		border-top-right-radius: 16px;
		corner-top-right-shape: bevel;
		background-color: var(--color-yellow);

		&:hover,
		&:focus-visible {
			background-color: oklch(from var(--color-yellow) calc(l + 0.05) c h);;		
		}
		&:active {
			background-color: var(--color-green);
		}
	}
}
/* Site Header Styles */

.site-header {
	color: var(--color-white);
	background-color: rgba(0, 0, 0, 0);

	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	grid-column: content;
	grid-row: 1 / 2;
	position: sticky;
	top: 0;
	z-index: 3;
		
	font-family: var(--font-family_alt);
	font-size: clamp(0.625rem, 0rem + 1.1111cqi, 1rem);
	font-weight: var(--font-weight_regular);
	line-height: normal;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	
	a:any-link:not(.button) {
		display: inline-block;
		color: var(--color-white);
		text-decoration: none;	
	}
	a:any-link:not(.button):hover,
	a:any-link:not(.button):focus-visible {
		color: var(--color-yellow);
	}
	a:any-link:not(.button):active {
		color: var(--color-green);
	}	
	
	.constrain {
		display: grid;
		align-items: center;
	}
	
	.main-navigation {
		padding-block: 2.25rem; 
		display: grid;
		grid-template-columns: [logo-start menu-start] auto [logo-end toggle-start] auto [toggle-end menu-end];
		grid-template-rows: repeat(2, auto);
		gap: 0;
		white-space: wrap;
		
		.home-link {
			grid-column: logo;
			grid-row: 2/3;
			justify-self: start;
			align-self: center;
			display: block !important;
		}
		.logo {
			display: block;
			height: 3rem;
			width: auto;
		}
	}

	.mobile-menu-toggle {
		grid-column: toggle;
		grid-row: 2/3;
		justify-self: end;
		align-self: center;
		padding: 0;
		cursor: pointer;
		font-size: 2rem;
		font-weight: var(--font-weight_regular);
		text-align: right;
		line-height: 3rem;
		color: white;
		background-color: transparent;
		background-image: none;
		border: 0;
		corner-shape: square;
		
		&:hover,
		&:focus-visible {
			color: var(--color-yellow);
			background-color: transparent;
			background-image: none;
		}
		&:active {
			color: var(--color-green);
			background-color: transparent;
			background-image: none;
		}
	}
				
	.header-menu-list {
		grid-area: menu;
		justify-self: start;
		
		margin: 1rem 0 0 0;
		padding: 0;
		list-style: none;
		
		font-size: 2rem;
		
		.menu-item {
			margin-block: 1rem;
		}
	}
	
	&.scrolled,
	&:has(.mobile-menu-toggle[aria-expanded='true']) {
		color: var(--color-white);
		background-color: rgba(0, 0, 0, 1);
	}

	
			
	@media (width > 1020px) {
		
		.main-navigation {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			gap: 2rem 3rem;
			white-space: nowrap;
			
			.logo {
				height: clamp(1.75rem, -0.3333rem + 3.7037cqi, 3rem);
				width: auto;
			}

			.header-menu-list {
				margin: 0;
				padding: 0;
				display: flex;
				gap: 2rem 2rem;
				align-items: center;
				justify-content: space-between;
				
				padding-block: 0;
				
				animation: none;
				
				font-size: revert;
				line-height: revert;
		
				.menu-item {
					margin-block: 0;
				}
			}

		}
	}
}

@supports (animation-timeline: scroll()) {
	.site-header:not(:has(.mobile-menu-toggle[aria-expanded='true'])) {
		animation: header-scroll linear forwards;
		animation-timeline: scroll(root block);
		animation-range: exit 0rem exit 1.4rem;
	}
}

@keyframes header-scroll {
	0% {
		background-color: transparent;
	}
	100% {
		color: white;
		background-color: black;
	}
}
.site-main {

	grid-column: content;
	grid-row: 1 / span 10;
	
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	
	z-index: 1;
	
	color: black;
	background-color: white;

	font-size: 1.25rem;
	
	.section {
		padding-block: 7.5rem;
		
		display: grid;
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
		grid-column: content;
		grid-row: calc(counter(section-counter,integer) + 2) / span 1;
	}
	
	.light {
		color: var(--color-base_on-light);
		background-color: var(--bg-color_light);
	}
	
	.dark {
		color: var(--color-base_on-dark);
		background-color: var(--bg-color_dark);
	}

	
	:is(h1, h2, h3, h4, h5, h6) {
		font-family: var(--font-family_heading);
		font-weight: var(--font-weight_regular);
		line-height: 1.2;
		hyphens: auto;
		
		& > .brow {
			margin-block: 0 1.5rem;
			display: block;
			font-size: 1.25rem;
			font-weight: var(--font-weight_medium);
			text-transform: uppercase;
			letter-spacing: 0.2em;
		}
		& .rule {
			display: inline-block;
			width: 0.6em;
			vertical-align: bottom;
			margin-block: 0.05em;
			margin-inline: 0 0.2em;
			border-bottom: 0.1em solid var(--color-yellow);
		}
	}
	
	h2 {
		margin-block: 0;
		font-family: var(--font-family_heading);
		font-weight: var(--font-weight_regular);
		font-size: 3rem;
		line-height: 1.2;
		letter-spacing: normal;
	}
	
	em {
		font-style: inherit;
		font-weight: 500;
	}
	
}
.hero {
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	grid-column: content;
	grid-row: 1 / span 2;

	& > .hero-content {
		width: 100%;
		display: grid;
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
		grid-column: constrain;
		grid-row: 2 / 3;
		
		container-type: inline-size;
		container-name: hero-content;
		
		&>:not(.statistics,.learn-more){
			margin-block: 1.25rem 0;
			line-height: 1.2;
		}
		
		@media (width > 800px) {
			width: 75%;
		}
	}
	
	.title {
		margin-block: 0;
		font-size: clamp(2.75rem, 2.2955rem + 2.2727vw, 4rem);
		font-weight: var(--font-weight_regular);
		line-height: 1.2;
	}
	
	.larger {
		font-family: var(--font-family_alt);
		font-size: 1.5rem;
		font-style: normal;
		font-weight: var(--font-weight_light);
		line-height: 1.2;
	}
	
	.learn-more {
		display: block;
		margin-block: 3rem;
		font-family: var(--font-family_alt);
		font-size: 1;
		font-weight: var(--font-weight_medium);
		letter-spacing: 0.2em;
	}
	
	a:any-link {
		color: var(--color-white);
		text-decoration: underline;
		text-decoration-color: var(--color-yellow);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
		text-transform: uppercase;
	}
	
	a:hover,
	a:focus-visible {
		color: var(--color-yellow);
		text-decoration: underline;
		text-decoration-color: var(--color-yellow);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
	a:active {
		color: var(--color-green);
		text-decoration: none;
	}
	
	.statistics {
		margin-block: 1rem 0;
		margin-inline: 0;
		padding-block-start: 0.5rem;
		padding-inline: 0;
		list-style: none;
		border-top: 1px solid var(--color-yellow);
		font-family: var(--font-family_alt);
		text-transform: uppercase;
		white-space: nowrap;
		
		.figure {
			font-size: 3rem;
			font-weight: var(--font-weight_regular);
			display: block;
			line-height: 1;
		}
		.measure {
			font-size: 1rem;
			font-weight: var(--font-weight_medium);
			display: block;
			letter-spacing: 0.2em;
		}

		display: grid;
		gap: 3rem;
		grid-template-columns: repeat(auto-fit, minmax(min(12rem, 25%), 1fr) minmax(min(12rem, 25%), 1fr));						

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}
	
	background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(/assets/media/hero-bg.webp);
	background-repeat: no-repeat;
	background-size: 1920px 1060px;	 
	background-position: right max(-200px, -14vw) bottom;
	
	
	@media (width > 1020px) {
		background-image: url(/assets/media/hero-bg.webp);
	}
	@media (width > 1640px) {
		background-position: left bottom;
	}
}
.partners-logos {	
	&.section {
		padding-block: 3.5rem;
	}
}
.partners-logos-list {
	margin-inline: 0;
	margin-block: 0;
	list-style: none;
	
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	justify-content: space-around;
	align-items: center;

	img {
		min-width: 0;
		max-width: 100%;
	}
	.sterling-heights {
		max-width: 170px;
		flex: 29 2 auto;
	}
	.warren {
		/* max-width: 18.615%; */
		max-width: 164px;
		flex: 18 2 auto;
	}
	.mckeon-group {
		/* max-width: 25.539%; */
		max-width: 225px;
		flex: 25 2 auto;
	}
	.aecom {
		/* max-width: 16.686%; */
		max-width: 147px;
		flex: 16 2 auto;
	}
	.basedon {
		/* max-width: 19.864%; */
		max-width: 175px;
		flex: 19 2 auto;
	}
	
	@container (width > 800px) {
		flex-wrap: nowrap;
		justify-content: space-between;		
	}
}
.alliance {
	
	.alliance-grid{
		display: grid;
		grid-template-columns: [introduction-start quotes-start] 1fr [introduction-end quotes-end];
		grid-template-rows: [introduction-start] auto [introduction-end quotes-start] auto [quotes-end];
		gap: 3rem 8.5rem;
		
		
		.introduction {
			grid-area: introduction;
		}
		.quotes {
			grid-area: quotes;
			
			blockquote:last-child {
				margin-block-end: 0;
			}
		}
		
		@container (width > 800px) {
			grid-template-columns: [introduction-start] 49% [introduction-end quotes-start] 41% [quotes-end];			
			grid-template-rows: [introduction-start quotes-start] 1fr [introduction-end quotes-end];			
		}
	}
	
	
}
.foundation-list {
	margin-block: 2rem;
	column-count: 1;
	column-gap: 2rem;
	
	li {
		margin-block: 0 1.3em;
		margin-inline-end: 2em;
	}
	
	@container (width > 680px) {
		column-count: 2;
	}
}
.map-corridor {
	margin-block: 7.5rem;	
}

.heading-corridor-assets {
	margin-block: 0 4rem;
	padding-bottom: 0.625rem;
	font-size: 1.25rem;
	font-weight: var(--font-weight_medium);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-white);
}

.corridor-assets-list {
	margin-inline: 0;
	padding-inline: 0;
	list-style: none;
	display: grid;
	gap: 3.25rem;
	@container (width > 500px) {
		grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 6.5rem) / 3)), 1fr));
		grid-template-rows: repeat(auto-fit, auto auto 1fr auto);
	} 
}
.corridor-assets-item {
	position: relative;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 4;
	gap: 3rem;
	
	background-color: var(--color-grey_dark);
}
.corridor-assets-image {
	position: relative;
	margin: 0;
	padding: 0;
	background-color: #222222;

	img {
		aspect-ratio: 668/363;	
	}
	
	
	&.fpo {
		img {
			visibility: hidden;
		}
		
		&:after {
			position: absolute;
			display: grid;
			align-self: center;
			justify-self: center;
			content: "IMAGE COMING SOON";
			inset: 0;
			font-family: var(--font-family_alt);
			font-size: 1.5rem;
			font-weight: var(--font-weight_medium);
		}
	}
}
.corridor-assets-info {
	padding-inline: 1.5rem;
	
	&>.asset-name {
		margin-block-start: 0;
		margin-block-end: 1rem;
		font-family: var(--font-family_heading);
		font-size: 1.5rem;
		font-style: normal;
		font-weight: 500;
		line-height: 1.2;
		text-transform: uppercase;
	}
	&>.asset-description {
		margin-block-start: 1rem;
		margin-block-end: 3rem;
		line-height: 1.4;	
	}
}
.corridor-assets-url {
	padding-inline: 1.5rem;
	font-size: 1rem;
	
	&>a:any-link {
		color: var(--color-yellow);
		text-decoration: none;
		
		&::after {
			position: absolute;
			inset: 0;
			content: "";
		}
	}
	&>a:hover,
	&>a:focus-visible {
		color: var(--color-white);
		text-decoration: underline;
		text-decoration-color: var(--color-white);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
	&>a:active {
		color: var(--color-green);
		text-decoration: none;
	}
}
.partners {
	
	.heading-section {
		
	}
	
	.introduction {
		width: min(60rem, 100%);
	}

	& .partners {
		display: grid;
		grid-template-columns: [executive-start advisory-start] 1fr [executive-end advisory-end];
		grid-template-rows: [executive-start] auto [executive-end advisory-start] auto [advisory-end];
		gap: 3rem;

		&>.partners-group {
			gap: 3rem 0;
		}	
		
		@container (width > 1000px) {
			grid-template-columns: [executive-start] 32.6% [executive-end advisory-start] 62.5% [advisory-end];
			grid-template-rows: [executive-start advisory-start] auto [executive-end advisory-end];
		}
	}
	
	.heading-partners-group {
		margin-block: 0;
		padding-bottom: 0.625rem;
		font-size: 1.25rem;
		font-weight: var(--font-weight_medium);
		letter-spacing: 0.2em;
		text-transform: uppercase;
		border-bottom: 1px solid var(--color-base);
	}		
		
	.partner-logo {
		height: 55px;
		margin: 0;
		display: grid;
		align-items: center;
		justify-items: start;
		
		&>.string-heights {
			width: min(77px, 100%);
			height: auto;
		}
		&>.warren {
			width: min(65px, 100%);
			height: auto;
		}
		&>.mckeon-group {
			width: min(225px, 100%);
			height: auto;
		}
		&>.aecom {
			width: min(147px, 100%);
			height: auto;
		}
		&>.basedon {
			width: min(175px, 100%);
			height: auto;
		}
	}	
	
	.executive-committee {
		grid-area: executive;
		
		.committee-logos {
			margin-block: 4rem 3rem;
			display: flex;
			flex-wrap: wrap;
			justify-items: flex-start;
			gap: 2.875rem;
		}
		.committee-logo {
			margin: 0;
			padding: 0;
		}
		
		.committee-list {
			margin-block: 0;
			grid-column: 1 / span 2;
			grid-row: 2/3;
			margin-inline: 0;
			pading-inline: 0;
			font-size: 1rem;
			line-height: 1.4;
		}
		.committee-name {
			margin-inline: 0;
			pading-inline: 0;
			font-weight: var(--font-weight_semibold);
		}
		.committee-title {
			margin-inline: 0;
			margin-block-end: 0.375rem;
			pading-inline: 0;
			&:last-child {
				margin-block: 0;
			}
		}
	}
	.advisory-partners {
		grid-area: advisory;
		container-type: inline-size;
		
		.advisory-list {
			margin-block: 0;
			margin-inline: 0;
			padding-inline: 0;
			font-size: 1rem;
			list-style: none;
			
			@container (width > 500px) {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(max(250px, calc((100% - 4rem) / 3)), 1fr));
				grid-template-rows: repeat(auto-fit, auto 1fr);
				gap: 0 2rem;
			}			
		}
		.advisory-item {
			
			.advisory-logo {
				margin-block: 4rem 3rem;
				margin-inline: 0;
				display: grid;
				justify-self: start;
				align-items: center;
			}
			.advisory-description {
				margin-block: 0;
				grid-row: 2/3;
			}
		}
	}
	.sterling-heights {
		max-width: 177px;
	}
	.warren {
		max-width: 165px;
	}
	.mckeon-group {
		max-width: 225px;
	}
	.aecom {
		max-width: 147px;
	}
	.basedon {
		max-width: 175px;
	}
}

.flyover {
	padding-block: 0 !important;
	padding-inline: 0;
	
	img {
		width: 100%;
		height: auto;
		grid-column: content;	
	}
}
.ahead {
	
	.heading-section {
		
	}
	.introduction {
		width: min(60rem, 100%);
	}
	.road-ahead-phases-list {
		margin-block: 3.75rem;
		margin-inline: 0;
		padding-inline: 0;
		list-style: none;
		
		font-family: var(--font-family_alt);
		
		border-bottom: 1px solid var(--color-base);
	}
	
	.road-ahead-phases-item {
	
		--phase-status-color: var(--color-grey_middle);
		
		position: relative;
		padding-block: 3.75rem;
		border-top: 1px solid var(--color-base);
	
		&>.phase-stutus-checkmark {
			grid-area: checkmark;
			align-self: center;
			display: block;
			width: 8rem;
			aspect-ratio: 1/1;
			margin-block-end: 2.25rem;
			mask-repeat: no-repeat;
			mask-size: contain;
			mask-position: center;
			mask-image: url(/assets/media/checkmark.svg);
			background-color: var(--phase-status-color);
		}
		
		&>.phase-status-content {
			grid-area: content;
		}
			
		.phase-title {
			margin-block-end: 2.125rem;
			font-size: 3rem;
			font-weight: 400;
			line-height: 1.2;
			text-transform: uppercase;
		
			&>.rule {
				margin-inline: 0.1em;
			}
			
			&>.phase {
				display: block;
				margin-block-end: 2.125rem;
			}
			
			&>.phase-status {
				display: block;
				color: var(--phase-status-color);
				font-size: 1.25rem;
				font-weight: 600;
				line-height: 1.2;
				letter-spacing: 0.2em;
				
				text-transform: uppercase;
			}
		}
		
		.phase-description {
			font-size: 2.25rem;
			font-weight: 300;
			line-height: 1.2;
			
			&>em {
				font-weight: 400;
			}
			
			&:last-child {
				margin-block-end: 0;
			}
		}
		
		&.currently-underway {
			--phase-status-color: var(--color-green);
		}
		
		@container (width > 800px) {
			display: grid;
			grid-template-columns: [content-start] 1fr [content-end checkmark-start] 30.8% [checkmark-end];
			gap: 0 2.99%;
	
			
			&>.phase-stutus-checkmark {
				margin-block-end: 0;
				width: min(216px, 100%);
				justify-self: center;
				align-self: center;
			}
			
					
			.phase-title {
				display: flex;
				flex-wrap: wrap;
				gap: 2.125rem 3.375rem;
				align-items: center;
				
				&>.phase {
					margin-block-end: 0;
				}
			}			
		}
	}
	
	.guiding-principle {
		margin-block: 2.125rem 0;
		font-size: 2.25rem;
		font-weight: 300;
		line-height: 1.2;
	}
	
}

h2:has(+.news-list) {
	margin-block-end: 6rem;
	text-align: center;
}
.news-list {
	margin-inline: 0;
	padding-inline: 0;
	list-style: none;
	
	display: grid;
	gap: 4rem 3.25rem;
	
	font-family: var(--font-family_alt);
	
	@container (width > 500px) {
		grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 6.5rem) / 3)), 1fr));
		grid-template-rows: auto auto;
	}
}
.news-item {
	position: relative;
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	gap: 0;
}
.news-image {
	aspect-ratio: 888/450;
}
.news-info {
	display: grid;
	gap: 0;
	padding-block: 2.5rem;
	align-items: top;
	
	&>.news-date {
		margin-block: 0;
		font-size: 0.875rem;
		font-weight: var(--font-weight_medium);
		line-height: 1;
		letter-spacing: 0.175rem;
		text-transform: uppercase;	
	}
	&>.news-source {
		margin-block: 0;
		font-size: 1rem;
		font-weight: var(--font-weight_regular);
		line-height: 1;
		letter-spacing: 0.2rem;
		text-transform: uppercase;
	}
	&>.news-title {
		margin-block: 1rem 1.5rem;
		font-size: 1.5rem;
		font-weight: var(--font-weight_medium);
		line-height: 1.2;
		text-transform: uppercase;
	}

	.news-link {
		font-size: 1rem;
		font-weight: var(--font-weight_medium);
		line-height: 1;
		letter-spacing: 0.2rem;
		text-transform: uppercase;
		
		&:hover,
		&:focus-visible {
			color: var(--color-yellow);
		}
		&:active {
			color: var(--color-green);			
		}
		
		&>a:any-link {
			color: var(--color-white);
			text-decoration: underline;
			text-decoration-color: var(--color-yellow);
			text-decoration-thickness: 1px;
			text-underline-offset: 0.2em;
			
			&::after {
				position: absolute;
				inset: 0;
				content: "";
			}
		}
		&>a:hover,
		&>a:focus-visible {
			color: var(--color-yellow);
			text-decoration: underline;
			text-decoration-color: var(--color-yellow);
			text-decoration-thickness: 1px;
			text-underline-offset: 0.2em;
		}
		&>a:active {
			color: var(--color-green);
			text-decoration: none;
		}
	}
}

.connect {
	.heading-section {
		margin-block: 0 1.5rem;
	}
	.introduction {
		margin-block: 1.5rem;
		font-family: var(--font-family_alt);		
		font-size: 2.25rem;
		font-weight: var(--font-weight_light);
		line-height: 1.4;
		
		&.larger {
			margin-block-end: 2rem;
			font-size: clamp(2.75rem, 2.2955rem + 2.2727vw, 4rem);
			font-weight: var(--font-weight_regular);
			line-height: 1.2;
		}
	}
	
	.connect-form {
		margin-block: 6rem 0;
	}
}
/* Site Footer Styles */

.site-footer {
	padding-block: 11.25rem;
	
	color: var(--color-base_on-dark);
	background-color: var(--bg-color_dark);

	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	grid-column: content;
	
	font-family: var(--font-family_alt);
	font-weight: var(--font-weight_regular);
	line-height: normal;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	
	a:any-link:not(.button) {
		display: inline-block;
		color: var(--color-white);
		text-decoration: none;	
	}
	a:any-link:not(.button):hover,
	a:any-link:not(.button):focus-visible {
		color: var(--color-yellow);
	}
	a:any-link:not(.button):active {
		color: var(--color-green);
	}	
	
	.footer-navigation {
		margin-block-end: 10rem;
		white-space: nowrap;
		
		.logo {
			margin-block-end: 3rem;
		}
		
		.footer-menu-list {
			list-style: none;
			margin: 0;
			padding: 0;
			
			display: flex;
			flex-direction: column;
			gap: 1.25rem 2rem;
			align-items: start;
			justify-content: space-between;
			
			font-size: revert;
			line-height: revert;
		
			.menu-item {
				margin-block: 0;
			}
			
 		}
		
		@container (width > 700px) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 1rem 3rem;
			
			.footer-menu-list {
				flex-direction: row;
				align-items: center;				
			}
		}

	}
	
	.partners-legalese {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		justify-content: space-between;
		gap: 3rem;
	}
	
	.partners-list {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 1.25rem;
		
		.partner-item {
			margin-block: 1.25rem;
			
			&:first-child,
			&:last-child {
				margin-block: 0;
			}
			&>a:any-link {
				color: var(--color-white);
				text-decoration: underline;
				text-decoration-color: var(--color-yellow);
				text-decoration-thickness: 1px;
				text-underline-offset: 0.2em;
				
				&::after {
					position: absolute;
					inset: 0;
					content: "";
				}
			}
			&>a:hover,
			&>a:focus-visible {
				color: var(--color-yellow);
				text-decoration: underline;
				text-decoration-color: var(--color-yellow);
				text-decoration-thickness: 1px;
				text-underline-offset: 0.2em;
			}
			&>a:active {
				color: var(--color-green);
				text-decoration: none;
			}
		}		
	}
	.social-legalese {
		max-width: 350px;
		font-size: 1rem;
		font-weight: var(--font-weight_light);
		
		.copyright {
			margin-block-end: 0;
		}
	}
	
}