* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: #fff;
	color: #2a2a2a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.45;
}
a { color: #a1a1a1; text-decoration: none; }
img { max-width: 100%; height: auto; }
.container { width: min(960px, calc(100% - 40px)); margin: 0 auto; }
.site-header { padding: 40px 0 0; background: #fff; text-align: center; }
.logo img { display: block; max-width: 200px; margin: 0 auto 20px; }
.hamburger { display: none; }
.nav { display: flex; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 10px 0 18px; }
.nav > li { position: relative; }
.nav a {
	display: block;
	padding: 5px 15px;
	color: #b9b9b9;
	font-family: "Quattrocento Sans", Arial, sans-serif;
	font-size: 14px;
	letter-spacing: .07em;
	line-height: 19px;
	text-transform: uppercase;
}
.nav > li.active > a,
.nav a:hover,
.subnav li.active a { color: #333; }
.subnav {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 160px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #b9b9b9;
	text-align: left;
	z-index: 5;
}
.has-sub:hover .subnav,
.has-sub:focus-within .subnav { display: block; }
.subnav a { border-bottom: 1px solid #b9b9b9; }
.subnav li:last-child a { border-bottom: 0; }
.content-wrap { padding: 10px 0 40px; }
.footer-wrap { border-top: 2px solid #f7f7f7; padding: 28px 0 36px; text-align: center; font-size: 12px; color: #2a2a2a; }
.tagline { margin: 28px 0 10px; text-align: center; }
.slideshow { position: relative; overflow: hidden; background: #f7f7f7; }
.slide { display: none; }
.slide.is-active { display: block; }
.slide img { display: block; width: 100%; max-height: 620px !important;}
.team-img {margin: 25px;}
.team-img img { display: block; width: 100%; max-height: 620px !important;}
.slide-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: rgba(255,255,255,.7);
	color: #333;
	font-size: 32px;
	line-height: 1;
	width: 36px;
	height: 48px;
	cursor: pointer;
}
.slide-btn.prev { left: 8px; }
.slide-btn.next { right: 8px; }
.prose.center, .page-title-block { text-align: center; }
.prose p { margin: 0 0 1em; }
.prose figure, .page-title-block figure { margin: 10px 0 24px; }
.gallery { display: grid; gap: 10px; }
.gallery-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-2 { grid-template-columns: repeat(2, 1fr); }
.tile { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #eee; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile span {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 12px;
	color: #fff;
	font-family: "Quattrocento Sans", Arial, sans-serif;
	background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15));
}
h1 { margin: 10px 0 16px; font-family: "Quattrocento Sans", Arial, sans-serif; font-size: 32px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
h1.align-right, .page-title-block h1 { text-align: right; }
.project { display: grid; grid-template-columns: 24% 1fr; column-gap: 24px; align-items: start; }
.project-copy h1 { margin-top: 0; font-size: 20px; text-align: left; }
.project-copy p { margin: 0; }
.project-images figure { margin: 0 0 28px; }
.project-images img { display: block; width: 100%; height: auto; max-height: 650px !important;}
.back-link { grid-column: 1 / -1; }
.back-link { text-align: right; }
.back-link a { color: #a1a1a1; }
hr { border: 0; border-top: 1px solid #ddd; margin: 18px 0; }
.principal { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start; margin: 24px 0 36px; }
.principal.reverse { grid-template-columns: .8fr 1.2fr; }
.principal h2 { margin: 0 0 12px; font-size: 18px; }
.principal h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.bio-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 14px; }
.bio-cols p { margin: 0 0 12px; }
.contact-grid { display: grid; grid-template-columns: 36% 1fr; gap: 40px; margin-top: 18px; }
.contact-details { font-size: 14px; }
.map { margin: 10px 0 20px; text-align: center; }
.map a { display: inline-block; cursor: pointer; }
.map a:hover img { opacity: .85; }
.contact-details .map-link { color: inherit; cursor: pointer; }
.contact-details .map-link:hover { text-decoration: underline; }
form label { display: block; margin: 0 0 12px; font-family: "Quattrocento Sans", Arial, sans-serif; }
form input, form textarea {
	display: block;
	width: min(370px, 100%);
	margin-top: 6px;
	padding: 10px;
	border: 1px solid #b9b9b9;
	background: #fafafa;
	font: inherit;
}
form button {
	border: 2px solid #333;
	background: #333;
	color: #fff;
	padding: 8px 16px;
	font-family: "Quattrocento Sans", Arial, sans-serif;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
}
form button:hover { background: #fff; color: #333; }
.required-note, form span { color: #333; }
.form-error { color: #a33; }
#contactForm .field-error {
	display: block;
	color: #dc3545;
	margin-top: 5px;
}
#contactForm .field-error:empty { display: none; }
#contactForm [aria-invalid="true"] { border-color: #dc3545; }
.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.88);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 20;
	padding: 40px 20px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1100px, 100%); max-height: 80vh; }
.lightbox-caption { color: #fff; margin: 12px 0 0; }
.lightbox-close {
	position: absolute;
	top: 12px;
	right: 18px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 42px;
	cursor: pointer;
}
@media (max-width: 800px) {
	.hamburger {
		display: block;
		position: absolute;
		top: 12px;
		left: 12px;
		width: 42px;
		height: 36px;
		border: 0;
		background: transparent;
		cursor: pointer;
	}
	.hamburger span, .hamburger span:before, .hamburger span:after {
		display: block;
		width: 22px;
		height: 2px;
		background: #3e3e3e;
		position: relative;
		content: "";
	}
	.hamburger span:before { position: absolute; top: -7px; }
	.hamburger span:after { position: absolute; top: 7px; }
	.site-header { position: relative; padding-top: 16px; }
	.nav-wrap { display: none; }
	body.nav-open .nav-wrap { display: block; }
	.nav, .subnav { display: block; position: static; border: 0; text-align: center; }
	.gallery-3, .gallery-4, .gallery-2,
	.project, .principal, .principal.reverse, .bio-cols, .contact-grid { grid-template-columns: 1fr; }
}