@charset "UTF-8";

:root {
	--section-padding-h: 5vw;
	--section-padding-v: 100px;
	--section-padding-v-top: 140px;
	--section-border-radius: 12px;
	--section-header-color: white;
	--section-text-color: white;
	--section-bkrd-color: #244266;
	--section-bkrd-callout: oklab(0.37 -0.04 -0.06);
	--section-toolbar-bkrd: var(--section-bkrd-callout);
	--section-link-color: #faf33b;
	--section-link-hover: #faf33b;
	--section-highlight-color: var(--section-header-color);
	--section-highlight-text: #1a1a2e;
	--hero-gradient: linear-gradient(329deg, oklab(52.866% -0.06293 -0.09298) 46.64%, oklab(86.588% -0.1128 -0.02224));
	--intro-gradient: linear-gradient(329deg, oklab(36.370999999999995% -0.04257 -0.05254) 35%, oklab(0.5 -0.06 -0.08) 75%, #036f9d);
	--color-header-industries: #f59e48;
	--color-text-industries: var(--section-text-color);
	--color-bkrd-industries: var(--section-bkrd-color);
	--color-bkrd-callout-industries: oklab(28.237000000000002% -0.01706 -0.06131 / 0.616);
	--color-toolbar-industries: var(--color-bkrd-callout-industries);
	--color-link-industries: var(--color-header-industries);
	--color-hover-industries: var(--color-header-industries);
	--color-highlight-industries: var(--color-header-industries);
	--color-highlight-text-industries: var(--section-highlight-text);
	--color-header-infrastructure: #faf33b;
	--color-text-infrastructure: var(--section-text-color);
	--color-bkrd-infrastructure: #062446;
	--color-bkrd-callout-infrastructure: #062446e5;
	--color-toolbar-infrastructure: var(--color-bkrd-callout-infrastructure);
	--color-link-infrastructure: #faf33b;
	--color-hover-infrastructure: #faf33b;
	--color-highlight-infrastructure: var(--color-header-infrastructure);
	--color-highlight-text-infrastructure: var(--section-highlight-text);
	--color-header-color: #021327;
	--color-text-color: #021327;
	--color-bkrd-color: oklab(82.902% 0.00812 0.15802);
	--color-bkrd-callout-color: oklab(0% 0 0 / 0.884);
	--color-toolbar-color: var(--color-bkrd-callout-color);
	--color-link-color: #179759;
	--color-hover-color: white;
	--color-highlight-color: #179759;
	--color-highlight-text-color: white;
	--color-header-economy: #a4ff27;
	--color-text-economy: var(--section-text-color);
	--color-bkrd-economy: #0b2d07;
	--color-bkrd-callout-economy: #12430b;
	--color-toolbar-economy: var(--color-bkrd-callout-economy);
	--color-link-economy: #a4ff27;
	--color-hover-economy: #a4ff27;
	--color-highlight-economy: var(--color-header-economy);
	--color-highlight-text-economy: var(--section-highlight-text);
	--color-header-sustainability: #4af786;
	--color-text-sustainability: var(--section-text-color);
	--color-bkrd-sustainability: #0c2807;
	--color-bkrd-callout-sustainability: rgba(12, 40, 7, 0.9);
	--color-toolbar-sustainability: var(--color-bkrd-callout-sustainability);
	--color-link-sustainability: #4af786;
	--color-hover-sustainability: #4af786;
	--color-highlight-sustainability: var(--color-header-sustainability);
	--color-highlight-text-sustainability: var(--section-highlight-text);
	--color-header-innovation: #1ff6ff;
	--color-text-innovation: var(--section-text-color);
	--color-bkrd-innovation: #32235b;
	--color-bkrd-callout-innovation: #221644df;
	--color-toolbar-innovation: var(--color-bkrd-callout-innovation);
	--color-link-innovation: #1ff6ff;
	--color-hover-innovation: #1ff6ff;
	--color-highlight-innovation: var(--color-header-innovation);
	--color-highlight-text-innovation: var(--section-highlight-text);
	--hero-header-size: clamp(4rem, 13vw, 14rem);
	--hero-fixed-size: 80px;
	--hero-scroll-size: 12vw;
	--h2-size: clamp(40px, 4vw, 3.25em);
	--h3-size: clamp(32px, 3.5vw, 2.75rem);
	--font-body: 'Roboto', sans-serif;
	--font-header: 'Big Shoulders', sans-serif;
}

@media screen and (max-width: 1024px) {
	:root {
		--section-padding-v: 10vh;
	}
}

@media screen and (min-width: 775px) {
	:root {
		--hero-fixed-size: var(--hero-header-size);
		--hero-scroll-size: var(--hero-header-size);
	}
}

body {
	font-size: 110%;
	font-family: var(--font-body);
	line-height: 1.5;
}

#aca-terms-popup h3,
#aca-terms-popup p {
	color: black;
}

#toTop {
	display: none;

	visibility: hidden;
}

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;

	padding: 0.75rem 1rem;

	color: var(--section-text-color);

	background: var(--section-bkrd-callout);

	transform: translateY(-120%);

	transition: transform 0.2s ease;
}

.skip-link:focus-visible {
	transform: translateY(0);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

nav ul {
	display: flex;
	justify-content: space-around;
	align-items: center;

	margin: 0;
	padding: 0;

	list-style: none;
}

@media screen and (max-width: 600px) {
	nav ul {
		justify-content: flex-start;
	}
}

nav ul a {
	padding: 15px;

	color: white;
}

@media screen and (max-width: 1200px) {
	nav ul a {
		flex-direction: column;

		padding: 10px;
	}
}

#industries,
#infrastructure,
#color,
#economy,
#sustainability,
#innovation,
#mosaic {
	content-visibility: auto;
	contain-intrinsic-size: 1000px;
}

section {
	position: relative;

	display: flex;
	align-items: stretch;
}

section img {
	border-radius: var(--section-border-radius);
}

.section-content {
	position: relative;
	z-index: 10;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
	align-items: stretch;

	max-width: 1500px;
	margin: auto;
	padding: var(--section-padding-v-top) var(--section-padding-h) var(--section-padding-v);
}

@media screen and (max-width: 1040px) {
	.section-content {
		gap: 4rem;
	}
}

.background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.background-image {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.background-image img,
.background-image video,
.background-image picture {
	width: 100%;
	height: 100%;

	border-radius: 0;

	object-fit: cover;
}

.background-mid {
	opacity: 0.5;
}

.background-bottom {
	background: var(--section-bkrd-color);
}

.background-above {
	mix-blend-mode: multiply;

	opacity: 0.25;
}

.mosaic {
	counter-reset: item;
}

.mosaic .mosaic-item {
	position: relative;

	box-shadow: 0 1px 1px rgba(3, 7, 18, 0.02), 0 5px 4px rgba(3, 7, 18, 0.03), 0 12px 9px rgba(3, 7, 18, 0.05), 0 20px 15px rgba(3, 7, 18, 0.06), 0 32px 24px rgba(3, 7, 18, 0.08);

	counter-increment: item;
}

.mosaic .mosaic-item::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: counter(item);
	z-index: 10;

	display: none;
	justify-content: center;
	align-items: center;

	color: white;
	font-weight: 900;
	font-size: 200px;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);

	transform: translate(-50%, -50%);
}
/* Dev-mode: show mosaic item numbers v1.0 */
body.dev-mode .mosaic .mosaic-item::after {
	display: flex;
}

.fixed-footer {
	position: fixed;
	bottom: 0;
	z-index: 500;

	width: 100%;

	background-color: var(--section-bkrd-callout);
	background-blend-mode: darken;

	transition: background-color 1.2s ease-in-out;
}

@media screen and (max-width: 600px) {
	.fixed-footer {
		display: none;
	}
}

.fixed-footer a {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;

	font-weight: 600;
	font-size: clamp(12px, 1.25cqw, 14px);
	text-transform: uppercase;
	text-decoration: none;

	transition: color 0.8s ease-in-out;
}

.fixed-footer a:active {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.fixed-footer a.active {
	color: var(--link-active-color, white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.fixed-footer a:hover,
.fixed-footer a.active:hover {
	color: var(--link-hover-color, white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media screen and (max-width: 600px) {
	.fixed-footer .hash-nav {
		display: none;
	}
}

@media screen and (max-width: 850px) {
	.fixed-footer .nav-text {
		display: none;
	}
}

.fixed-footer .nav-logo a {
	align-items: flex-start;
}

.fixed-footer .nav-logo img {
	height: 40px;
}

.fixed-footer .social-nav {
	display: none;

	visibility: hidden;
}

@media screen and (max-width: 600px) {
	.fixed-footer .social-nav {
		display: block;

		visibility: visible;
	}
}

.fixed-footer .nav-icon {
	width: auto;
	height: clamp(16px, 2cqw, 20px);
}

@media screen and (max-width: 1200px) {
	.fixed-footer .nav-icon {
		height: 16px;
	}
}

@media screen and (max-width: 850px) {
	.fixed-footer .nav-icon {
		height: 22px;
	}
}

.fixed-footer .seperator {
	border-left: 1px solid white;
}

h2 {
	margin-bottom: 2rem;

	color: var(--section-header-color);
	font-weight: 800;
	font-size: var(--h2-size);
	font-family: var(--font-header);
	line-height: 95%;
	text-transform: uppercase;
}

h3 {
	margin-bottom: 2rem;

	color: var(--section-header-color);
	font-weight: 800;
	font-size: var(--h3-size);
	font-family: var(--font-header);
	line-height: 95%;
	text-transform: uppercase;
}
/*
 * HIGHLIGHT ON SCROLL v5.0
 * Background swipe + text color wipe using stacked background layers.
 *
 * Chrome / Safari (default — v3.0 technique):
 *   Three backgrounds on the same element, each animating background-size:
 *     Layer 1 (top):    highlight-text color, clipped to text shape
 *     Layer 2 (middle): highlight-bg color, fills the padding box
 *     Layer 3 (bottom): original header color, clipped to text (always 100%)
 *   Text and background wipe in simultaneously = zero flash.
 *
 * Firefox fallback (@supports -moz-appearance):
 *   Firefox fails to composite mixed background-clip values (text + padding-box).
 *   Falls back to a single background layer + standard color transition,
 *   both synchronized at the same speed so there is no flash of bare dark text.
 *
 * Uses per-section --section-highlight-color and --section-highlight-text.
 */

.highlight-heading {
	/* Give multi-line highlighted headings a little breathing room */
	line-height: 1.1;
}

.highlight {
	margin: -0.05em -0.12em;
	padding: 0.05em 0.12em;

	color: transparent;

	background: linear-gradient(var(--section-highlight-text), var(--section-highlight-text)) no-repeat left/0% 100%, linear-gradient(var(--section-highlight-color), var(--section-highlight-color)) no-repeat left/0% 100%, linear-gradient(var(--section-header-color), var(--section-header-color)) no-repeat left/100% 100%;
	background-clip: text, padding-box, text;
	/* Wrap naturally on multi-line headings */
	box-decoration-break: clone;

	transition: background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1);
	-webkit-text-fill-color: transparent;
}

.highlight-heading.in-view .highlight {
	background-size: 100% 100%, 100% 100%, 100% 100%;
}
/* Firefox fallback — mixed background-clip (text + padding-box) breaks v1.0 */

@supports (-moz-appearance: none) {
	.highlight {
		color: var(--section-header-color);

		background: linear-gradient(var(--section-highlight-color), var(--section-highlight-color)) no-repeat left/0% 100%;
		background-clip: padding-box;
		-webkit-text-fill-color: unset;

		transition: color 1.2s cubic-bezier(0.22, 1, 0.36, 1), background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.highlight-heading.in-view .highlight {
		color: var(--section-highlight-text);

		background-size: 100% 100%;
	}
}

p {
	margin-bottom: 15px;

	color: var(--section-text-color);
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: -0.25px;
}

@media screen and (max-width: 1024px) {
	p {
		font-size: 22px;
	}
}

strong {
	font-weight: 900;
}

.text {
	display: flex;
	flex-direction: column;
	justify-content: center;

	padding: 5vh clamp(32px, 4vw, 50px);

	border-radius: var(--section-border-radius);

	background-color: var(--section-bkrd-callout);
}

.text-icon {
	width: 50px;
	padding-bottom: 15px;

	color: var(--section-header-color);
}

.call-out {
	margin-top: 20px;
	padding: 20px 0;

	border-top: 1px solid rgba(255, 255, 255, 0.4588235294);
	border-bottom: 1px solid rgba(255, 255, 255, 0.4588235294);
}

.call-out p {
	margin-bottom: 0;

	font-weight: 800;
}

header.page-header {
	display: flex;
	justify-content: center;

	width: 100%;
	padding: 25px;
	box-sizing: border-box;
}

@media screen and (min-width: 600px) {
	header.page-header {
		position: absolute;
		top: 0;

		justify-content: space-between;
		align-items: flex-start;
	}
}

header.page-header .aca-logo {
	width: clamp(175px, 25vw, 250px);
}

@media screen and (max-width: 600px) {
	header.page-header .social-channels ul {
		display: none;
	}
}

header.page-header .social-channels ul li {
	display: flex;
	align-items: flex-start;
}

header.page-header .nav-icon {
	width: 25px;
}

header.tagline {
	padding: 0;
	padding-bottom: 5vh;

	color: white;
	font-weight: 400;
	font-size: 1rem;
	font-family: var(--font-body);
	text-align: center;

	will-change: opacity;
}

@media screen and (min-width: 1024px) {
	header.tagline {
		position: absolute;
		bottom: 0;
		right: 0;

		margin-left: auto;
		padding-right: 50px;
	}
}

header.tagline img {
	width: 350px;
	margin: auto;
	margin-bottom: 10px;

	text-align: center;

	border-radius: 0;
}

header.tagline p {
	margin-bottom: 0;

	font-weight: 600;
	font-size: clamp(25px, 2vw, 1.25rem);
	text-transform: uppercase;
}

.scroll-nudge {
	display: flex;
	flex-direction: column;
	align-items: center;

	margin-top: 3rem;

	color: white;
	font-weight: bold;
	font-size: clamp(25px, 2vw, 2rem);
	font-family: var(--font-header);
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
	/* https://smoothshadows.com/#djEsMiw1LDAuMTksMTAsOCwwLCM1YjViNWIsI2YzZjRmNiwjZmZmZmZmLDI%3D */
	text-shadow: 0 0 0 rgba(91, 91, 91, 0.19), 0 1px 2px rgba(91, 91, 91, 0.15), 0 3px 4px rgba(91, 91, 91, 0.11), 0 5px 6px rgba(91, 91, 91, 0.08), 0 8px 10px rgba(91, 91, 91, 0.04);
}

.scroll-nudge--left {
	flex-direction: row;
	gap: 2rem;

	text-align: left;
}

.bounce-arrow {
	width: 40px;
	height: 40px;

	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cG9seWxpbmUgcG9pbnRzPSIxMTIsMTg0IDI1NiwzMjggNDAwLDE4NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjMyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4K');
	background-repeat: no-repeat;
	background-size: contain;
}

a.button {
	display: block;

	width: max-content;
	margin-top: 2rem;
	padding: 8px 2.75rem 6px;
	box-sizing: border-box;

	color: black;
	font-weight: 900;
	font-size: clamp(18px, 4vw, 1.35rem);
	font-family: var(--font-header);
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;

	border: 1px solid transparent;
	border-radius: 24px;

	background-color: var(--section-link-color, var(--section-header-color, white));

	transition: 0.25s all ease-in-out;
}

@media screen and (max-width: 749px) {
	a.button {
		width: 100%;

		font-size: clamp(22px, 4vw, 1.35rem);
		text-align: center;
	}
}

a.button:hover {
	color: black;

	border: 1px solid white;

	background-color: var(--section-link-hover, var(--section-header-color, white));
}

.section-logo {
	position: absolute;
	top: 50px;
	left: 0;

	width: 175px;

	transform: translateX(var(--section-padding-h));
}

@media screen and (max-width: 1040px) {
	.section-logo {
		top: 40px;
	}
}

@media screen and (min-width: 1040px) {
	.logo-right {
		left: auto;
		right: 0;

		transform: translateX(calc(var(--section-padding-h) * -1));
	}
}

#hero {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: center;

	min-height: 100vh;
}

@media screen and (max-width: 1040px) {
	#hero {
		min-height: 0;
	}
}

@media screen and (max-width: 600px) {
	#hero {
		justify-content: flex-start;
	}
}

#hero h1 {
	text-align: center;
	/* https://smoothshadows.com/#djEsMiw1LDAuMTksMTAsOCwwLCM1YjViNWIsI2YzZjRmNiwjZmZmZmZmLDI%3D */
	text-shadow: 0 0 0 rgba(91, 91, 91, 0.19), 0 1px 2px rgba(91, 91, 91, 0.15), 0 3px 4px rgba(91, 91, 91, 0.11), 0 5px 6px rgba(91, 91, 91, 0.18), 0 8px 10px rgba(91, 91, 91, 0.04);

	transition: color 0.3s ease;
}

@media screen and (max-width: 1024px) {
	#hero .hero-intro {
		padding: 25px 25px 10vh;
	}
}

#hero .hero-heading,
#hero .hero-word {
	font-weight: 900;
	font-family: var(--font-header);
	line-height: 0.9;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

#hero .hero-heading {
	display: flex;
	flex-direction: column;
	align-items: center;

	color: #ffffff;
}

@media screen and (max-width: 775px) {
	#hero .hero-heading {
		margin-bottom: 25px;
	}
}

#hero .hero-static-text {
	display: block;

	font-size: var(--hero-fixed-size);
}

#hero .hero-scroller {
	display: flex;
	justify-content: center;

	margin-top: -0.1em;
}

#hero .hero-scroller-mask {
	position: relative;

	height: var(--hero-scroll-size);

	overflow: hidden;
}

#hero .hero-word-list {
	margin: 0;
	padding: 0;
}

#hero .hero-word {
	display: flex;
	justify-content: center;
	align-items: center;

	height: var(--hero-scroll-size);

	font-size: var(--hero-scroll-size);
}

#intro {
	--section-bkrd-callout: #0e384cd4;
	--section-toolbar-bkrd: var(--section-bkrd-callout);
	--section-highlight-color: white;
	--section-highlight-text: black;
	align-items: center;

	min-height: 100vh;
	margin-top: -15vh;
}

@media screen and (max-width: 1040px) {
	#intro {
		min-height: 0;
	}
}

#intro .section-content {
	grid-template-columns: 1fr;
}

@media screen and (min-width: 960px) {
	#intro .section-content {
		grid-template-columns: 55% 1fr;
	}
}

@media screen and (min-width: 1600px) {
	#intro .section-content {
		grid-template-columns: repeat(2 1fr);
	}
}

#intro .scroll-nudge {
	font-size: 25px;
	line-height: 1.1;
}

#intro .section-left {
	grid-row: 2;

	display: flex;
	align-items: center;
}

@media screen and (min-width: 960px) {
	#intro .section-left {
		grid-row: 1;
	}
}

#intro .section-right {
	min-height: 0;
}

@media screen and (min-width: 960px) {
	#intro .section-right {
		height: 100%;
	}
}

#intro .mosaic {
	display: grid;
	gap: 1.25rem;

	height: 300px;
	min-height: 0;
}

@media screen and (min-width: 960px) {
	#intro .mosaic {
		grid-auto-flow: dense;
		grid-template-columns: repeat(7, minmax(0, 1fr));

		height: 100%;
	}

	#intro .mosaic .item-1 {
		grid-row: 1;
		grid-column: 1/7;
	}

	#intro .mosaic .item-2 {
		grid-row: 2;
		grid-column: 1/3;
	}

	#intro .mosaic .item-3 {
		grid-row: 2;
		grid-column: 3/7;
	}

	#intro .mosaic .item-4 {
		grid-row: 3;
		grid-column: 1/7;
	}

	#intro .mosaic .item-5 {
		grid-row: 4;
		grid-column: 1/4;
	}

	#intro .mosaic .item-6 {
		grid-row: 4;
		grid-column: 4/7;
	}
}

@media screen and (min-width: 1100px) {
	#intro .mosaic {
		grid-auto-flow: dense;
		grid-template-columns: repeat(3, 1fr);
	}

	#intro .mosaic .item-1 {
		grid-row: span 6;
		grid-column: 1;
	}

	#intro .mosaic .item-2 {
		grid-row: span 4;
		grid-column: 1;
	}

	#intro .mosaic .item-3 {
		--mosaic-final-y: -25px;
		grid-row: span 4;
		grid-column: 2;

		transform: translateY(var(--mosaic-final-y));
	}

	#intro .mosaic .item-4 {
		--mosaic-final-y: -25px;
		grid-row: span 5;
		grid-column: 2;

		transform: translateY(var(--mosaic-final-y));
	}

	#intro .mosaic .item-5 {
		--mosaic-final-y: 25px;
		grid-row: span 5;
		grid-column: 3;

		transform: translateY(var(--mosaic-final-y));
	}

	#intro .mosaic .item-5 img {
		object-position: -200px;
	}

	#intro .mosaic .item-6 {
		--mosaic-final-y: 25px;
		grid-row: span 4;
		grid-column: 3;

		transform: translateY(var(--mosaic-final-y));
	}
}

@media screen and (max-width: 960px) {
	#intro .mosaic .item-1 {
		grid-row: 1;
		grid-column: span 2;
	}

	#intro .mosaic .item-2 {
		grid-row: 1;
		grid-column: span 4;
	}

	#intro .mosaic .item-3 {
		display: none;
	}

	#intro .mosaic .item-4 {
		grid-row: 2;
		grid-column: span 4;
	}

	#intro .mosaic .item-5 {
		display: none;
	}

	#intro .mosaic .item-6 {
		grid-row: 2;
		grid-column: span 2;
	}
}

#intro .mosaic .mosaic-item {
	border: 5px solid white;
	border-radius: var(--section-border-radius);

	overflow: hidden;
}

#intro .mosaic .mosaic-item img,
#intro .mosaic .mosaic-item picture {
	width: 100%;
	height: 100%;

	border-radius: 0;

	object-fit: cover;
}

@media screen and (min-width: 960px) {
	#intro .mosaic .mosaic-item img,
	#intro .mosaic .mosaic-item picture {
		position: absolute;
		inset: 0;
	}
}

#industries {
	--section-header-color: var(--color-header-industries);
	--section-text-color: var(--color-text-industries);
	--section-bkrd-color: var(--color-bkrd-industries);
	--section-bkrd-callout: var(--color-bkrd-callout-industries);
	--section-toolbar-bkrd: var(--color-toolbar-industries);
	--section-link-color: var(--color-link-industries);
	--section-link-hover: var(--color-hover-industries);
	--section-highlight-color: var(--color-highlight-industries);
	--section-highlight-text: var(--color-highlight-text-industries);
	align-items: center;

	min-height: 100vh;
}

#industries .section-content {
	grid-template-columns: 52% 1fr;
}

@media screen and (max-width: 1040px) {
	#industries .section-content {
		grid-template-columns: 1fr;
	}
}

#industries .section-left {
	display: flex;
}

@media screen and (max-width: 1040px) {
	#industries .section-left {
		grid-row: 2;
	}
}

#industries .section-right img,
#industries .section-right picture {
	width: 100%;
	height: 100%;

	object-fit: cover;
}

@media screen and (max-width: 1040px) {
	#industries .section-right img,
	#industries .section-right picture {
		height: 250px;
	}
}

#industries .background-mid {
	mix-blend-mode: multiply;

	opacity: 0.25;
}

#infrastructure {
	--section-header-color: var(--color-header-infrastructure);
	--section-text-color: var(--color-text-infrastructure);
	--section-bkrd-callout: var(--color-bkrd-callout-infrastructure);
	--section-toolbar-bkrd: var(--color-toolbar-infrastructure);
	--section-link-color: var(--color-link-infrastructure);
	--section-link-hover: var(--color-hover-infrastructure);
	--section-highlight-color: var(--color-highlight-infrastructure);
	--section-highlight-text: var(--color-highlight-text-infrastructure);
	align-items: center;

	min-height: 100vh;

	overflow: hidden;
}

@media screen and (max-width: 749px) {
	#infrastructure {
		--section-bkrd-callout: var(--color-bkrd-infrastructure);
		position: relative;

		display: grid;
	}
}

@media screen and (max-width: 1040px) {
	#infrastructure .text {
		padding-top: 100px;
	}
}

@media screen and (max-width: 749px) {
	#infrastructure .section-content {
		grid-template-columns: 1fr;
		gap: 0;

		margin-top: 250px;
		padding: 0;
	}

	#infrastructure .section-content .text {
		border-radius: 0;
	}
}

@media screen and (min-width: 750px) {
	#infrastructure .section-content {
		grid-template-columns: 1fr 60%;
	}
}

@media screen and (min-width: 1250px) {
	#infrastructure .section-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 1040px) {
	#infrastructure .section-logo {
		transform: translateX(clamp(32px, 4vw, 50px));
	}
}

@media screen and (max-width: 1040px) {
	#infrastructure .text {
		padding-top: calc(var(--section-padding-v) * 2);
	}
}

@media screen and (max-width: 749px) {
	#infrastructure .background {
		height: 250px;
	}
}

#infrastructure .background-top img {
	width: 120%;

	mix-blend-mode: multiply;

	object-fit: cover;
}

#infrastructure .background-mid {
	mix-blend-mode: normal;

	opacity: 1;

	transition: opacity 2.5s ease;
}

#infrastructure .background-mid img,
#infrastructure .background-mid picture {
	width: 120%;
	height: 100%;
	max-width: none;
}

#infrastructure #background-clouds img {
	/* animation: infrastructureCloudDrift 34s ease-in-out infinite alternate; */
}

#infrastructure #background-above img {
	width: 130%;
	max-width: none;
	/* animation: infrastructureAboveDrift 34s ease-in-out infinite alternate; */
}

#infrastructure #background-clouds-storm {
	opacity: 0;

	transition: opacity 2.5s linear;
}

#infrastructure #background-clouds-storm img {
	width: 130%;
	max-width: none;
	/* animation: infrastructureStormCloudDrift 36s ease-in-out infinite alternate; */
}

#infrastructure .button {
	margin-left: auto;
}

@keyframes infrastructureCloudDrift {
	0% {
		transform: translateX(-2%);
	}

	100% {
		transform: translateX(2%);
	}
}

@keyframes infrastructureAboveDrift {
	0% {
		transform: translateX(-2%);
	}

	100% {
		transform: translateX(2%);
	}
}

@keyframes infrastructureStormCloudDrift {
	0% {
		transform: translateX(2%);
	}

	100% {
		transform: translateX(-2%);
	}
}

#economy {
	--section-header-color: var(--color-header-economy);
	--section-text-color: var(--color-text-economy);
	--section-bkrd-color: var(--color-bkrd-economy);
	--section-bkrd-callout: var(--color-bkrd-callout-economy);
	--section-toolbar-bkrd: var(--color-toolbar-economy);
	--section-link-color: var(--color-link-economy);
	--section-link-hover: var(--color-hover-economy);
	--section-highlight-color: var(--color-highlight-economy);
	--section-highlight-text: var(--color-highlight-text-economy);
	align-items: center;

	min-height: 100vh;
}

@media screen and (max-width: 786px) {
	#economy .section-content {
		grid-template-columns: 1fr;
	}
}

@media screen and (min-width: 786px) {
	#economy .section-content {
		grid-template-columns: 40% 1fr;
	}
}

#economy .section-right {
	display: flex;
}

#economy .background-top {
	mix-blend-mode: color-burn;
}

#economy video {
	height: 100%;

	border-radius: var(--section-border-radius);

	object-fit: cover;
}

@media screen and (max-width: 786px) {
	#economy video {
		height: 425px;
	}
}

#sustainability {
	--section-header-color: var(--color-header-sustainability);
	--section-text-color: var(--color-text-sustainability);
	--section-bkrd-color: var(--color-bkrd-sustainability);
	--section-bkrd-callout: var(--color-bkrd-callout-sustainability);
	--section-toolbar-bkrd: var(--color-toolbar-sustainability);
	--section-link-color: var(--color-link-sustainability);
	--section-link-hover: var(--color-hover-sustainability);
	--section-highlight-color: var(--color-highlight-sustainability);
	--section-highlight-text: var(--color-highlight-text-sustainability);
	align-items: center;

	min-height: 100vh;
}

@media screen and (max-width: 732px) {
	#sustainability .section-content {
		grid-template-columns: 1fr;

		margin-top: 150px;
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

@media screen and (min-width: 733px) {
	#sustainability .section-content {
		grid-template-columns: 60% 1fr;
	}
}

@media screen and (max-width: 1040px) {
	#sustainability .section-content {
		padding: 0;
	}
}

@media screen and (min-width: 1440px) {
	#sustainability .section-content {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 1040px) {
	#sustainability .section-logo {
		transform: translateX(clamp(32px, 4vw, 50px));
	}
}

@media screen and (max-width: 767px) {
	#sustainability .text {
		padding-top: 125px;

		background-color: transparent;
	}
}

@media screen and (max-width: 732px) {
	#sustainability .clouds-layer {
		display: none;
	}
}

@media screen and (max-width: 732px) {
	#sustainability .background-bottom picture {
		height: auto;
		mask-image: linear-gradient(to bottom, black 50%, transparent);
	}
}

#innovation {
	--section-header-color: var(--color-header-innovation);
	--section-text-color: var(--color-text-innovation);
	--section-bkrd-color: var(--color-bkrd-innovation);
	--section-bkrd-callout: var(--color-bkrd-callout-innovation);
	--section-toolbar-bkrd: var(--color-toolbar-innovation);
	--section-link-color: var(--color-link-innovation);
	--section-link-hover: var(--color-hover-innovation);
	--section-highlight-color: var(--color-highlight-innovation);
	--section-highlight-text: var(--color-highlight-text-innovation);
	align-items: center;

	min-height: 110vh;

	overflow-x: clip;
	/* As a breakpoint */
}

#innovation .section-content {
	grid-template-columns: 55% 1fr;

	padding-top: calc(var(--section-padding-v) / 2);
}

@media screen and (max-width: 1040px) {
	#innovation .section-content {
		grid-template-columns: 1fr;

		padding-inline: 0;
		padding-top: calc(var(--section-padding-v) * 1.5);
	}
}

#innovation .section-left {
	position: relative;
}

@media screen and (max-width: 1024px) {
	#innovation .section-left {
		order: 2;
	}
}

#innovation .section-right {
	height: 200px;
}

@media screen and (min-width: 1024px) {
	#innovation .section-right {
		height: auto;
	}
}

#innovation .button {
	z-index: 100;
}

#innovation .innovation-orbit {
	position: relative;
	z-index: 2;

	height: 100%;
}

#innovation .quantum-wrap {
	position: absolute;
	inset: 0;

	display: flex;
	justify-content: flex-end;
	align-items: center;

	width: 100%;
	height: 100%;

	perspective: 700px;

	overflow: hidden;
}

@media screen and (max-width: 1024px) {
	#innovation .quantum-wrap {
		top: 150px;

		justify-content: center;
		align-items: flex-start;
	}
}

#innovation .innovation-image {
	position: absolute;
	aspect-ratio: 1/1;

	border-radius: 50%;

	overflow: hidden;
}

@media (max-width: 500px) {
	#innovation .innovation-image:nth-child(2) {
		top: -5cqh;
		right: 0;

		width: min(240px, 70%);
	}

	#innovation .innovation-image:nth-child(1),
	#innovation .innovation-image:nth-child(4),
	#innovation .innovation-image:nth-child(5) {
		display: none;
	}

	#innovation .innovation-image:nth-child(3) {
		top: 0;
		left: 0;

		width: min(300px, 60%);
	}
}

@media screen and (min-width: 501px) and (max-width: 675px) {
	#innovation .innovation-image:nth-child(2) {
		top: -5cqh;
		left: -5cqh;

		width: 230px;
	}

	#innovation .innovation-image:nth-child(1),
	#innovation .innovation-image:nth-child(5) {
		display: none;
	}

	#innovation .innovation-image:nth-child(3) {
		top: 16px;
		left: 27vw;

		width: 203px;
	}

	#innovation .innovation-image:nth-child(4) {
		bottom: 2cqi;
		right: -7cqi;

		width: 260px;
	}
}

@media (min-width: 676px) {
	#innovation .innovation-image:nth-child(1) {
		top: 5cqh;
		left: 17cqh;

		width: 200px;
	}

	#innovation .innovation-image:nth-child(2) {
		top: -4cqi;
		left: -7cqi;

		width: 230px;
	}

	#innovation .innovation-image:nth-child(3) {
		top: -14px;
		left: 37vw;

		width: 183px;
	}

	#innovation .innovation-image:nth-child(4) {
		bottom: 2cqi;
		right: -7cqi;

		width: 260px;
	}

	#innovation .innovation-image:nth-child(5) {
		bottom: -6cqi;
		right: 12cqi;

		width: 213px;
	}
}

@media (min-width: 1024px) {
	#innovation .innovation-image:nth-child(1) {
		top: 15cqh;
		left: unset;
		right: 0;

		width: 200px;
	}

	#innovation .innovation-image:nth-child(2) {
		top: 1cqi;
		left: 3cqi;

		width: 230px;
	}

	#innovation .innovation-image:nth-child(3) {
		top: 34vh;
		left: 10vw;

		width: 180px;
	}

	#innovation .innovation-image:nth-child(4) {
		left: -3cqi;
		bottom: 2cqi;

		width: 260px;
	}

	#innovation .innovation-image:nth-child(5) {
		bottom: 11cqh;
		right: 0;

		width: 213px;
	}
}

#innovation .innovation-image img,
#innovation .innovation-image picture {
	width: 100%;
	height: 100%;

	object-fit: cover;
}

#innovation .background-top {
	mix-blend-mode: color-burn;

	opacity: 0.75;
}

#color {
	--section-header-color: var(--color-header-color);
	--section-text-color: var(--color-text-color);
	--section-bkrd-color: var(--color-bkrd-color);
	--section-bkrd-callout: var(--color-bkrd-callout-color);
	--section-toolbar-bkrd: var(--color-toolbar-color);
	--section-link-color: var(--color-link-color);
	--section-link-hover: var(--color-hover-color);
	--section-highlight-color: var(--color-highlight-color);
	--section-highlight-text: var(--color-highlight-text-color);
	align-items: flex-start;

	min-height: 100vh;

	overflow-x: hidden;
}

#color .button {
	color: var(--color-link-color);
}

#color .text-icon {
	color: var(--color-link-color);
}

#color .section-content {
	display: block;
	gap: 2rem;
	align-items: start;

	max-width: 1024px;
	margin: 0;
	margin-bottom: 240px;
}

@media screen and (min-width: 700px) {
	#color .section-content {
		width: 500px;
	}
}

@media screen and (min-width: 701px) {
	#color .section-content {
		width: 75vw;
	}
}

@media screen and (min-width: 1024px) {
	#color .section-content {
		display: grid;
		align-items: center;

		margin-inline: auto;
	}
}

#color .section-left {
	padding-right: 2rem;
}

@media screen and (min-width: 1024px) {
	#color .section-left {
		border-right: 1px solid black;
	}
}

#color .button {
	background-color: white;
}

#color .background-image video {
	object-position: bottom;
}

@media screen and (max-width: 960px) {
	#color .background-image video {
		object-position: right;
	}
}

#color .background-mid {
	mix-blend-mode: normal;

	opacity: 1;
}

#color .background-top {
	position: relative;
}

#color .background-top .art {
	position: absolute;
	z-index: 50;

	width: auto;
}

#color .art-1 {
	left: 0;
	right: auto;

	display: none;

	min-height: 400px;
	max-height: 560px;
	/* baseline: flush to right edge */
	transform: translateX(0%);
}

@media (max-width: 1250px) {
	#color .art-1 {
		transform: translateX(-10%);
	}
}

@media (min-width: 1250px) {
	#color .art-1 {
		max-height: 700px;

		transform: translateX(-64%) translateY(-15%);
	}
}

@media (min-width: 1600px) {
	#color .art-1 {
		max-height: 600px;

		transform: translateX(-36%) translatey(-60%);
	}
}

@media (min-width: 1900px) {
	#color .art-1 {
		max-height: 510px;

		transform: translateX(10%) translatey(-50%);
	}
}

@media (min-width: 2300px) {
	#color .art-1 {
		display: none;
	}
}

#color .art-2 {
	left: auto;
	right: 0;

	min-height: 400px;
	max-height: 500px;
}

@media (max-width: 700px) {
	#color .art-2 {
		display: none;
	}
}

@media (max-width: 960px) {
	#color .art-2 {
		max-height: 400px;

		transform: translateX(59%) translatey(-20%);
	}
}

@media (min-width: 961px) {
	#color .art-2 {
		transform: translateX(70%) translateY(-17%);
	}
}

@media (min-width: 1600px) {
	#color .art-2 {
		max-height: 600px;

		transform: translateX(46%) translatey(-20%);
	}
}

@media (min-width: 2150px) {
	#color .art-2 {
		max-height: 550px;

		transform: translateX(0%) translateY(-2vh);
	}
}

@media (min-width: 2800px) {
	#color .art-2 {
		display: none;
	}
}

#mosaic {
	--section-toolbar-bkrd: oklab(15.853% 0.0234 -0.05379 / 0.59);
	display: flex;
	flex-direction: column;

	height: 100vh;
	min-height: 0;
	max-height: 100vh;

	background-color: white;
}

@media screen and (max-width: 725px) {
	#mosaic {
		height: auto;
		min-height: 0;
		max-height: none;
	}
}

#mosaic .section-content {
	display: block;
	flex: 1;

	max-width: none;
	min-height: 0;
	padding: 1rem;
}

#mosaic .mosaic-grid {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1rem;

	height: 100%;
}

@media screen and (max-width: 725px) {
	#mosaic .mosaic-grid {
		height: calc(100vh - 2rem);
	}
}

#mosaic .mosaic-item {
	position: relative;

	border-radius: var(--section-border-radius);

	overflow: hidden;

	counter-increment: item;
}

#mosaic .mosaic-item::after {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;

	display: flex;
	justify-content: center;
	align-items: center;

	color: white;
	font-size: 200px;

	transform: translate(-50%, -50%);
}

#mosaic .mosaic-item img,
#mosaic .mosaic-item picture {
	width: 100%;
	height: 100%;

	object-fit: cover;
}

#mosaic {
	/* Grid positions */
}

#mosaic .mosaic-1 {
	grid-row: 1/3; /* Span 2 rows */
	grid-column: 1;
}

@media screen and (max-width: 725px) {
	#mosaic .mosaic-1 {
		grid-row: 1/2; /* Span 2 rows */
	}
}

#mosaic .mosaic-3 {
	grid-row: 1;
	grid-column: 4;
}

#mosaic .mosaic-4 {
	grid-row: 3;
	grid-column: 1/3; /* Span columns 1-2 */
}

#mosaic .mosaic-5 {
	grid-row: 3;
	grid-column: 3;
}

#mosaic .mosaic-6 {
	grid-row: 2/4; /* Span rows 2-3 */
	grid-column: 4;
}

@media screen and (max-width: 725px) {
	#mosaic .mosaic-6 {
		grid-row: 3/4; /* Span 2 rows */
	}
}

#mosaic .mosaic-7 {
	grid-row: 1/2; /* Span 2 rows */
	grid-column: 2/4; /* Span columns 2-3 */
}

#mosaic {
	/* Center title box */
}

#mosaic .mosaic-title-box {
	grid-row: 2/3; /* Span 2 rows */
	grid-column: 2/4; /* Span columns 2-3 */

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	padding: 25px;

	color: white;

	background-color: #036f9d;
}

@media screen and (max-width: 725px) {
	#mosaic .mosaic-title-box {
		grid-column: 1/5; /* Span columns 2-3 */
	}
}

#mosaic .mosaic-title {
	margin-bottom: 0;
	padding: 10px;

	color: var(--color-mosaic-title);
	font-weight: 900;
	font-size: clamp(2rem, 3.5vw, 3.5rem);
	font-family: var(--font-header);
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}

@media screen and (max-width: 725px) {
	#mosaic .mosaic-title {
		font-size: max(40px, 8cqi);
	}
}

footer:not(.fixed-footer) {
	display: flex;
	flex-flow: column wrap;
	gap: 20px;
	align-items: center;

	padding: 20px;

	font-size: 16px;

	background-color: black;
}

@media screen and (min-width: 850px) {
	footer:not(.fixed-footer) {
		display: grid;
		grid-template-columns: 200px 1fr;
		align-items: center;
	}
}

footer:not(.fixed-footer) a {
	color: white;
}

footer:not(.fixed-footer) .address {
	grid-row: 2;
	grid-column: 2;
}

footer:not(.fixed-footer) .address ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;

	margin: 0;
	padding: 0;

	list-style: none;
}

@media screen and (min-width: 850px) {
	footer:not(.fixed-footer) .address ul {
		justify-content: flex-end;
	}

	footer:not(.fixed-footer) .address ul li:not(:last-of-type) {
		padding-right: 10px;

		border-right: 1px solid white;
	}
}

footer:not(.fixed-footer) .footer-logo {
	grid-row: span 2;

	width: 200px;
	max-width: 200px;
}

footer:not(.fixed-footer) .address,
footer:not(.fixed-footer) .copyright {
	display: flex;
	gap: 20px;
	justify-content: end;

	color: white;
	text-align: center;
}

@media screen and (max-width: 725px) {
	footer:not(.fixed-footer) .address,
	footer:not(.fixed-footer) .copyright {
		flex-direction: column;

		margin-bottom: 25px;
	}
}