:root {
	--blue:#00537e;
	--navy:#102c3e;
	--ink:#172e3c;
	--muted:#5b6b75;
	--pale:#f2f5f6;
	--line:#d9e1e5
}

* {
	box-sizing:border-box
}

body {
	margin:0;
	font-family:Arial,Helvetica,sans-serif;
	color:var(--ink);
	line-height:1.65
}

a {
	color:inherit;
	text-decoration:none
}

button,input,select,textarea {
	font:inherit
}

button,a,input,textarea,select {
	outline-offset:5px
}

button {
	cursor:pointer
}

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

.wrap {
	width:min(1240px,88%);
	margin:auto
}

.topbar {
	background:var(--navy);
	color:#d8e4eb;
	font-size:12px;
	letter-spacing:.3px;
	padding:8px 0
}

.topbar .wrap {
	display:flex;
	justify-content:space-between
}

header {
	background:white;
	border-bottom:1px solid var(--line);
	position:relative;
	z-index:10
}

.headerinner {
	display:flex;
	align-items:center;
	gap:24px;
	min-height:103px
}

.brand {
	display:inline-flex;
	flex-direction:column;
	line-height:1;
	flex-shrink:0
}

.brandname {
	font-size:30px;
	font-weight:900;
	letter-spacing:-1.8px;
	color:var(--blue)
}

.brandname>span {
	font-weight:400;
	letter-spacing:-1px;
	margin-left:5px
}

.brandsub {
	font-size:10px;
	letter-spacing:4.5px;
	margin-top:9px;
	font-weight:700
}

nav {
	display:flex;
	align-items:center;
	gap:20px;
	margin-left:auto;
	font-size:12px;
	font-weight:700
}

nav>a {
	padding:15px 0;
	white-space:nowrap
}

nav>a.current {
	color:var(--blue);
	box-shadow:0 2px var(--blue)
}

nav a:hover,.textlink:hover {
	color:#2585ae
}

details {
	position:relative
}

summary {
	cursor:pointer
}

details>div {
	position:absolute;
	top:32px;
	right:0;
	width:210px;
	background:white;
	box-shadow:0 8px 25px #102c3e25;
	padding:15px
}

details a {
	display:block;
	padding:9px
}

.button {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	gap:10px;
	background:var(--blue);
	border:1px solid var(--blue);
	color:white;
	padding:14px 23px;
	font-size:13px;
	font-weight:700
}

.button:hover {
	background:#003f61;
	color:white
}

.headercta {
	font-size:12px;
	padding:12px 17px;
	white-space:nowrap
}

.menubutton {
	display:none
}

.hero {
	position:relative;
	min-height:620px;
	background:var(--navy);
	color:white;
	isolation:isolate
}

.heroimage {
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(9,35,51,.95),rgba(9,35,51,.78) 43%,rgba(9,35,51,.1)),url('assets/construction.jpg') center/cover;
	z-index:-1
}

.hero-inner {
	padding:90px 0 100px
}

.eyebrow {
	font-size:11px;
	letter-spacing:2.2px;
	font-weight:700;
	display:block;
	margin-bottom:20px
}

.blue {
	color:var(--blue)
}

h1,h2,h3,p {
	margin-top:0
}

h1 {
	font-size:clamp(38px,4.5vw,65px);
	line-height:1.1;
	letter-spacing:-2px;
	margin-bottom:25px;
	max-width:900px
}

h1 em {
	font-style:normal;
	color:#b4d7e8
}

.hero p {
	font-size:17px;
	max-width:490px;
	color:#dfebf1;
	line-height:1.8
}

.actions {
	display:flex;
	gap:15px;
	margin-top:32px
}

.ghost {
	background:transparent;
	border-color:#b9c7cf80
}

.hero-caption {
	position:absolute;
	bottom:22px;
	right:6%;
	font-size:12px;
	letter-spacing:1px;
	color:#dde7ec
}

.principles {
	background:var(--pale);
	border-bottom:1px solid var(--line)
}

.principles .wrap {
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:24px 0;
	font-size:12px
}

.principles b {
	font-size:16px
}

.principles span {
	border-left:1px solid #c7d4db;
	padding-left:32px
}

section.wrap,section>.wrap {
	padding-top:80px;
	padding-bottom:80px
}

.split {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:85px;
	align-items:start
}

.split>div>p:last-child {
	margin-bottom:0
}

h2 {
	font-size:clamp(29px,3vw,42px);
	letter-spacing:-1.2px;
	line-height:1.18;
	margin-bottom:25px
}

h3 {
	font-size:20px;
	line-height:1.3;
	letter-spacing:-.4px;
	margin-bottom:14px
}

p {
	color:var(--muted);
	font-size:15px
}

.lead {
	font-size:20px;
	line-height:1.6;
	color:var(--ink)
}

.narrow {
	max-width:750px
}

.textlink {
	font-size:13px;
	font-weight:700;
	color:var(--blue);
	border:0;
	background:transparent;
	padding:0;
	text-align:left;
	display:inline-block;
	margin-top:12px
}

.pale {
	background:var(--pale)
}

.sectionhead {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:25px
}

.sectionhead h2 {
	margin-bottom:30px
}

.cards {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px
}

.cards article {
	padding:30px;
	background:white;
	border:1px solid var(--line);
	border-top:3px solid var(--blue)
}

.num {
	font-size:12px;
	letter-spacing:1px;
	color:var(--blue);
	display:block;
	margin-bottom:30px
}

.cards h3 {
	font-size:22px
}

.cards p {
	font-size:14px
}

.projectgrid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:30px
}

.project {
	background:var(--pale)
}

.project img {
	width:100%;
	height:285px;
	object-fit:cover
}

.project>div {
	padding:28px
}

.project small {
	font-size:10px;
	color:var(--blue);
	letter-spacing:1.4px
}

.project h3 {
	font-size:25px;
	margin-top:10px
}

.project p {
	max-width:430px
}

.note {
	font-size:12px;
	line-height:1.7
}

.blueband {
	background:var(--blue);
	color:white
}

.blueband p {
	color:#d5e6ee
}

.blueband h3 {
	margin-bottom:6px
}

.light {
	color:white;
	border-bottom:1px solid #7da9c1;
	padding-bottom:5px
}

.industrylinks {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	margin-top:30px;
	gap:0 30px
}

.industrylinks a {
	padding:22px 0;
	border-bottom:1px solid var(--line);
	font-weight:700;
	font-size:15px
}

.cta {
	background:#e7eef2
}

.cta>.wrap {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	padding-top:50px;
	padding-bottom:50px
}

.cta h2 {
	margin-bottom:0;
	font-size:35px
}

.cta .eyebrow {
	margin-bottom:10px
}

footer {
	background:var(--navy);
	color:#dee7ed;
	padding:60px 0 20px
}

footer .brandname {
	color:white
}

footer p {
	color:#bccbd5;
	font-size:13px
}

footer .brand+p {
	margin-top:25px
}

.footergrid {
	display:grid;
	grid-template-columns:1.2fr 1fr 1fr;
	gap:70px
}

.footergrid>div>a:not(.brand) {
	display:block;
	color:#c4d2db;
	font-size:13px;
	margin:8px 0;
	overflow-wrap:anywhere
}

footer h3 {
	font-size:14px;
	color:white;
	letter-spacing:1px
}

.footerbottom {
	display:flex;
	justify-content:space-between;
	border-top:1px solid #ffffff24;
	padding-top:20px;
	margin-top:45px;
	font-size:10px;
	color:#a6bac8
}

.pagehero {
	background:var(--navy);
	color:white
}

.pagehero>.wrap {
	padding-top:25px;
	padding-bottom:60px
}

.breadcrumb {
	font-size:11px;
	color:#bacdd8;
	margin-bottom:45px
}

.pagehero h1 {
	font-size:clamp(34px,4vw,54px);
	margin-bottom:16px
}

.pagehero p {
	color:#cadae4;
	font-size:18px;
	margin:0
}

.pagehero .eyebrow {
	font-size:10px;
	color:#b2d2e1
}

.featureimg {
	height:400px;
	width:100%;
	object-fit:cover
}

figure {
	margin:0
}

figcaption {
	font-size:11px;
	color:var(--muted);
	margin-top:10px
}

.draftnote {
	background:#edf2f5;
	border-left:3px solid #8ba6b6;
	padding:19px 22px;
	font-size:13px;
	color:#526773;
	margin:30px 0
}

.filters {
	display:flex;
	gap:10px;
	margin:30px 0
}

.filters button {
	border:1px solid var(--line);
	background:white;
	padding:9px 20px;
	font-size:13px
}

.filters button.active {
	background:var(--blue);
	color:white;
	border-color:var(--blue)
}

.contactgrid {
	display:grid;
	grid-template-columns:.8fr 1.2fr;
	gap:90px
}

form {
	background:var(--pale);
	padding:35px
}

form h3 {
	font-size:25px
}

.formgrid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
	margin:25px 0
}

label {
	display:flex;
	flex-direction:column;
	gap:6px;
	font-size:12px;
	font-weight:700
}

input,select,textarea {
	padding:10px;
	border:1px solid #c6d2d9;
	background:white;
	min-width:0;
	width:100%;
	border-radius:0;
	font-size:14px;
	color:var(--ink)
}

textarea {
	resize:vertical
}

.wide {
	grid-column:1/-1
}

.upload {
	padding:25px;
	border:1px dashed #9db0bc;
	text-align:center;
	font-size:14px;
	color:var(--muted)
}

.upload small {
	font-size:11px
}

.formmessage {
	font-size:13px;
	margin:15px 0 0
}

dt {
	font-size:10px;
	font-weight:700;
	letter-spacing:1.7px;
	color:var(--blue);
	margin-top:22px
}

dd {
	margin:5px 0 0;
	font-size:15px;
	overflow-wrap:anywhere
}

li {
	color:var(--muted);
	font-size:14px;
	margin:8px 0
}

dialog {
	border:0;
	max-width:620px;
	width:90%;
	padding:45px;
	color:var(--ink)
}

dialog::backdrop {
	background:#0a243bd4
}

.close {
	position:absolute;
	right:18px;
	top:15px;
	background:none;
	border:0;
	font-size:20px
}

dialog .button {
	margin-top:25px
}

.skip {
	position:absolute;
	top:-100px;
	left:20px;
	background:white;
	padding:15px;
	z-index:100
}

.skip:focus {
	top:0
}

[hidden] {
	display:none!important
}

@media(min-width:1500px) {
	.hero {
		min-height:660px
	}
}

@media(max-width:1150px) {
	nav {
		gap:12px;
		font-size:11px
	}
	.headerinner {
		gap:18px
	}
	.brandname {
		font-size:26px
	}
	.headercta {
		padding:10px
	}
	.split {
		gap:45px
	}
}

@media(max-width:950px) {
	.menubutton {
		display:block;
		margin-left:auto;
		background:white;
		border:1px solid var(--line);
		padding:8px 13px;
		font-size:13px
	}
	nav {
		display:none;
		position:absolute;
		top:100%;
		left:0;
		right:0;
		background:white;
		margin:0;
		padding:20px 6%;
		box-shadow:0 10px 15px #102c3e15;
		flex-direction:column;
		align-items:stretch;
		font-size:14px;
		gap:0
	}
	nav.open {
		display:flex
	}
	nav a {
		padding:10px
	}
	nav details {
		padding:10px
	}
	details>div {
		position:static;
		box-shadow:none;
		width:auto
	}
	nav>a.current {
		box-shadow:none
	}
	.cards {
		grid-template-columns:repeat(2,1fr)
	}
	.principles span {
		padding-left:16px;
		font-size:11px
	}
	.contactgrid {
		gap:35px
	}
	.hero-inner {
		padding-top:80px
	}
	.industrylinks {
		grid-template-columns:1fr 1fr
	}
}

@media(max-width:640px) {
	.wrap {
		width:88%
	}
	.topbar span {
		font-size:9px
	}
	.topbar a {
		font-size:10px
	}
	.headerinner {
		min-height:83px;
		gap:10px
	}
	.headercta {
		display:none
	}
	.brandname {
		font-size:28px
	}
	.hero {
		min-height:610px
	}
	.heroimage {
		background-position:63% center
	}
	.hero-inner {
		padding-top:65px;
		padding-bottom:85px
	}
	h1 {
		letter-spacing:-1.3px;
		font-size:40px
	}
	.hero p {
		font-size:16px
	}
	.actions {
		flex-direction:column;
		align-items:flex-start;
		gap:12px
	}
	.principles .wrap {
		flex-wrap:wrap;
		gap:14px
	}
	.principles b {
		width:100%
	}
	.principles span {
		border:0;
		padding:0;
		font-size:10px
	}
	.split,.projectgrid,.cards,.contactgrid {
		grid-template-columns:1fr;
		gap:25px
	}
	section.wrap,section>.wrap {
		padding-top:50px;
		padding-bottom:50px
	}
	h2 {
		font-size:32px
	}
	.sectionhead {
		display:block;
		margin-bottom:24px
	}
	.sectionhead h2 {
		margin-bottom:12px
	}
	.cards article {
		padding:26px
	}
	.num {
		margin-bottom:20px
	}
	.project img {
		height:230px
	}
	.industrylinks {
		grid-template-columns:1fr
	}
	.cta>.wrap {
		align-items:flex-start;
		flex-direction:column
	}
	.cta h2 {
		font-size:30px
	}
	.footergrid {
		grid-template-columns:1fr;
		gap:30px
	}
	.footerbottom {
		flex-direction:column;
		gap:10px
	}
	.formgrid {
		grid-template-columns:1fr
	}
	form {
		padding:24px
	}
	.wide {
		grid-column:auto
	}
	.pagehero h1 {
		font-size:36px
	}
	.breadcrumb {
		margin-bottom:30px
	}
	.featureimg {
		height:280px
	}
	.filters {
		flex-wrap:wrap
	}
	.filters button {
		padding:8px 14px
	}
	.hero-caption {
		font-size:10px
	}
	.lead {
		font-size:18px
	}
	dialog {
		padding:35px 25px
	}
}