/* Fonts */

@font-face {
	font-family: 'MaiolaPro';
	src: url('fonts/MaiolaPro-BoldItalic.eot');
	src: local('MaiolaPro Bold Italic'), local('MaiolaPro-BoldItalic'),
		url('fonts/MaiolaPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
		url('fonts/MaiolaPro-BoldItalic.woff2') format('woff2'),
		url('fonts/MaiolaPro-BoldItalic.woff') format('woff'),
		url('fonts/MaiolaPro-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'MaiolaPro';
	src: url('fonts/MaiolaPro-Bold.eot');
	src: local('MaiolaPro Bold'), local('MaiolaPro-Bold'),
		url('fonts/MaiolaPro-Bold.eot?#iefix') format('embedded-opentype'),
		url('fonts/MaiolaPro-Bold.woff2') format('woff2'),
		url('fonts/MaiolaPro-Bold.woff') format('woff'),
		url('fonts/MaiolaPro-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'MaiolaPro';
	src: url('fonts/MaiolaPro-Italic.eot');
	src: local('MaiolaPro Italic'), local('MaiolaPro-Italic'),
		url('fonts/MaiolaPro-Italic.eot?#iefix') format('embedded-opentype'),
		url('fonts/MaiolaPro-Italic.woff2') format('woff2'),
		url('fonts/MaiolaPro-Italic.woff') format('woff'),
		url('fonts/MaiolaPro-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'MaiolaPro';
	src: url('fonts/MaiolaPro.eot');
	src: local('MaiolaPro'),
		url('fonts/MaiolaPro.eot?#iefix') format('embedded-opentype'),
		url('fonts/MaiolaPro.woff2') format('woff2'),
		url('fonts/MaiolaPro.woff') format('woff'),
		url('fonts/MaiolaPro.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-Black'), local('WorkSans Black'),
		url('fonts/WorkSans-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-BlackItalic'), local('WorkSans BlackItalic'),
		url('fonts/WorkSans-BlackItalic.woff2') format('woff2');
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-ExtraBold'), local('WorkSans ExtraBold'),
		url('fonts/WorkSans-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-ExtraBoldItalic'), local('WorkSans ExtraBoldItalic'),
		url('fonts/WorkSans-ExtraBoldItalic.woff2') format('woff2');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-Bold'), local('WorkSans Bold'),
		url('fonts/WorkSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-BoldItalic'), local('WorkSans BoldItalic'),
		url('fonts/WorkSans-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-SemiBold'), local('WorkSans SemiBold'),
		url('fonts/WorkSans-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-SemiBoldItalic'), local('WorkSans SemiBoldItalic'),
		url('fonts/WorkSans-SemiBoldItalic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-Regular'), local('WorkSans Regular'),
		url('fonts/WorkSans-Regular.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-Italic'), local('WorkSans Italic'),
		url('fonts/WorkSans-Italic.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-Light'), local('WorkSans Light'),
		url('fonts/WorkSans-Light.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-LightItalic'), local('WorkSans LightItalic'),
		url('fonts/WorkSans-LightItalic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-ExtraLight'), local('WorkSans ExtraLight'),
		url('fonts/WorkSans-ExtraLight.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-ExtraLightItalic'), local('WorkSans ExtraLightItalic'),
		url('fonts/WorkSans-ExtraLightItalic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-Thin'), local('WorkSans Thin'),
		url('fonts/WorkSans-Thin.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'WorkSans';
	src: local('WorkSans-ThinItalic'), local('WorkSans ThinItalic'),
		url('fonts/WorkSans-ThinItalic.woff2') format('woff2');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

/* Vars */

:root {
	--color-black: #141414;
	--color-darkblue: #053053;
	--color-blue: #215584;
	--color-darkgray: #2c2c2c;
	--color-gray: #bababa;
	--color-champagne: #ceae97;
	--color-lightchampagne: #f7f5f2;
	--color-white: #fff;
	
	--font-sans: 'WorkSans', Helvetica, sans-serif;
	--font-serif: 'MaiolaPro', serif;

	--animtime: 200ms;
	--easing: ease-in-out;

	--gap: 20px;
}

@media (min-width: 40rem)
{
	:root { --gap: 30px }
}

@media (min-width: 60rem)
{
	:root { --gap: 40px }
}

@media (min-width: 80rem)
{
	:root { --gap: 60px }
}

@media (min-width: 100rem)
{
	:root { --gap: 80px }
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*, *:before, *:after { box-sizing: inherit }
@-ms-viewport { width: device-width }

body {
	line-height: 1;
	-webkit-text-size-adjust: none;
	-ms-overflow-style: scrollbar;
}

ol, ul { list-style: none }
blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Type */

body, input, select, textarea {
	line-height: 1.5;
	font-family: var(--font-sans);
	font-size: 1em;
	font-weight: 400;
	color: var(--color-black);
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--color-darkblue);
	transition: color var(--animtime) var(--easing), border-bottom-color var(--animtime) var(--easing);
}

a:hover {
	border-bottom-color: transparent;
	color: var(--color-darkblue);
}

a:active { color: var(--color-champagne) }

strong, b {
	font-weight: 600;
	color: var(--color-black);
}

em, i { font-style: italic }

p { margin: 0 0 2em 0 }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 1em 0;
	line-height: 1.65;
	font-family: var(--font-serif);
	font-weight: 600;
	color: var(--color-black);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	border-bottom: 0;
	color: inherit;
}

h1 { font-size: 2.5em }
h2 { font-size: 1.75em }
h3 { font-size: 1.35em }
h4 { font-size: 1.1em }
h5 { font-size: 0.9em }
h6 { font-size: 0.7em }

@media screen and (max-width: 736px) {
	h1 { font-size: 2em }
	h2 { font-size: 1.5em }
	h3 { font-size: 1.25em }
}

sub {
	position: relative;
	top: 0.5em;
	font-size: 0.8em;
}

sup {
	position: relative;
	top: -0.5em;
	font-size: 0.8em;
}

blockquote {
	margin: 0 0 2em 0;
	padding: 0.5em 0 0.5em 2em;
	border-left: solid 4px rgba(212, 212, 255, 0.1);
	font-style: italic;
}

hr {
	margin: 2em 0;
	border: 0;
	border-bottom: solid 1px rgba(212, 212, 255, 0.1);
}

/* Global: Sections */

section { padding: 4em 0 }
section h2 { margin: 0 var(--gap) .5em }
section>p { margin: 0 var(--gap) }

.section_type_0 { padding-top: 0 }

section h2 {
	line-height: 1;
	font-size: 2em;
}

.section_type_1>p:first-of-type::after,
.section_type_4>p:first-of-type::after {
	display: block;
	margin: var(--gap) auto;
	width: calc(var(--gap) * 4);
	height: calc(var(--gap) / 2);
	content: '';
	background: var(--color-champagne);
}

.section_type_2>h2,
.section_type_3>h2,
.section_type_5>h2 { font-style: italic }

.section_type_2>h2:first-of-type::after {
	display: block;
	margin: .5em 0;
	height: 1px;
	content: '';
	background: var(--color-champagne);
}

.section_type_1>h2,
.section_type_2>h2,
.section_type_4>h2,
.section_type_1>p:first-of-type,
.section_type_2>p:first-of-type,
.section_type_4>p:first-of-type { text-align: center }

.section_type_2>h2 { margin-bottom: 0 }

.section_type_1>p:first-of-type,
.section_type_2>p:first-of-type,
.section_type_4>p:first-of-type { font-size: 1.25em }

.section_type_gallery,
.section_type_0,
.section_type_3,
.section_type_4,
.section_type_5 {
	position: relative;
	background-color: var(--color-lightchampagne);
}

.section_type_0+section::before,
.section_type_3+.section_type_3::before,
.section_type_3+.section_type_4::before,
.section_type_4+.section_type_3::before {
	position: absolute;
	display: block;
	width: calc(100% - 2 * var(--gap));
	height: var(--gap);
	top: 0;
	left: var(--gap);
	right: var(--gap);
	content: '';
	opacity: .2;
	background-image: url(logos.svg#w-view), linear-gradient(to bottom, transparent calc(var(--gap) / 2 - 1px), var(--color-darkgray) 1px, transparent calc(var(--gap) / 2));
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: var(--gap) calc(0.717589774802 * var(--gap)), 100% var(--gap);
}

.section_type_3>h2,
.section_type_3>p,
.section_type_5>h2,
.section_type_5>p { text-align: left }

.section_type_0>p+p,
.section_type_3>p+p,
.section_type_5>p+p { margin-top: 1em }

.section_type_0>img {
	margin: 0 0 2em;
	width: 100%;
	height: auto;
}

.section_type_3>img {
	margin: 2em 0;
	width: 100%;
	height: auto;
}

@media (min-width: 60rem)
{
	#home_hero+section,
	.page_copy+section {
		padding-top: calc(6em + 2 * var(--gap));
		margin-top: calc(0px - 2 * var(--gap));
	}

	section:nth-of-type(n+2),
	.section_type_gallery { padding: 6em 0 }
	section h2 { font-size: 2.5em }

	.section_type_0 { padding: 0 0 6em }

	.section_type_1>p:first-of-type::after,
	.section_type_4>p:first-of-type::after { margin: calc(var(--gap) / 2) auto var(--gap) }

	.section_type_0>p,
	.section_type_3>p,
	.section_type_5>p { font-size: 1.0625em }
}

@media (min-width: 80rem)
{
	#home_hero+section,
	.page_copy+section { padding: calc(8em + 2 * var(--gap)) var(--gap) 8em }

	section:nth-of-type(n+2),
	.section_type_gallery { padding: 8em var(--gap) }
	
	.section_type_1>p:first-of-type::after,
	.section_type_4>p:first-of-type::after {
		width: calc(var(--gap) * 3);
		height: calc(var(--gap) / 4);
	}
	
	.section_type_0,
	.section_type_3,
	.section_type_5 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0 var(--gap);
	}

	.section_type_0+section::before,
	.section_type_3+.section_type_3::before,
	.section_type_3+.section_type_4::before,
	.section_type_4+.section_type_3::before { background-size: calc(var(--gap) / 2) calc(0.358794887401 * var(--gap)), 100% var(--gap) }
	
	section h2,
	section>p {
		margin-left: 0;
		margin-right: 0;
	}

	.section_type_0>img,
	.section_type_3>h2 { grid-row: 1/9999 }
	
	.section_type_3:nth-of-type(odd)>h2:first-of-type,
	.section_type_3:nth-of-type(even)>p,
	.section_type_5:nth-of-type(odd)>h2:first-of-type,
	.section_type_5:nth-of-type(odd)>p,
	.section_type_5:nth-of-type(even)>.gallery_items,
	.section_type_3:nth-of-type(even)>h2:first-of-type,
	.section_type_3:nth-of-type(odd)>p,
	.section_type_5:nth-of-type(even)>h2:first-of-type,
	.section_type_5:nth-of-type(even)>p,
	.section_type_5:nth-of-type(odd)>.gallery_items {
		margin-left: 0;
		margin-right: 0;
	}

	.section_type_0>img,
	.section_type_3:nth-of-type(odd)>h2:first-of-type,
	.section_type_5:nth-of-type(odd)>p { grid-column: 1/2 }

	.section_type_3:nth-of-type(even)>h2:first-of-type,
	.section_type_5:nth-of-type(even)>p { grid-column: 3/4 }
	
	.section_type_0>p,
	.section_type_3:nth-of-type(odd)>p,
	.section_type_3:nth-of-type(odd)>img,
	.section_type_5:nth-of-type(odd)>.gallery_items { grid-column: 2/span 2 }

	.section_type_3:nth-of-type(even)>p,
	.section_type_3:nth-of-type(even)>img,
	.section_type_5:nth-of-type(even)>.gallery_items { grid-column: 1/span 2 }

	.section_type_3>h2:first-of-type::after,
	.section_type_5>h2:first-of-type::after {
		display: block;
		margin: .5em 0;
		width: calc(100% + var(--gap));
		height: 1px;
		content: '';
		background: var(--color-champagne);
	}
	
	.section_type_3:nth-of-type(odd)>h2:first-of-type::after,
	.section_type_5:nth-of-type(odd)>h2:first-of-type::after { margin-left: calc(0px - var(--gap)) }

	.section_type_0 { padding: 8em var(--gap) }
	.section_type_0>img { width: 100% }
	
	.section_type_0>p {
		margin-left: 0;
		margin-right: 0;
	}
}

@media (min-width: 100rem)
{
	.section_type:2>h2:first-of-type::after,
	.section_type:3>h2:first-of-type::after { margin: 1em 0 }
}

@media (min-width: 120rem)
{
	section h2 { font-size: 3em }
	
	#home_hero+section,
	.page_copy+section { padding: calc(8em + 2 * var(--gap)) calc(2 * var(--gap)) 8em }

	section:nth-of-type(n+2),
	.section_type_gallery,
	.section_type_0 { padding: 8em calc(2 * var(--gap)) }

	.section_type_0+section::before,
	.section_type_3+.section_type_3::before,
	.section_type_3+.section_type_4::before,
	.section_type_4+.section_type_3::before {
		width: calc(100% - 4 * var(--gap));
		left: calc(2 * var(--gap));
		right: calc(2 * var(--gap));
	}

	.section_type_0>p,
	.section_type_3>p,
	.section_type_5>p { font-size: 1.25em }

	.section_type_3>h2:first-of-type::after,
	.section_type_5>h2:first-of-type::after { width: calc(100% + 2 * var(--gap)) }

	.section_type_3:nth-of-type(odd)>h2:first-of-type::after,
	.section_type_5:nth-of-type(odd)>h2:first-of-type::after { margin-left: calc(0px - 2 * var(--gap)) }

	.page_hero { margin: 0 calc(2 * var(--gap)) }
	.page_hero h1 { font-size: 5em }
	.page_hero_copy p { font-size: 2em }
}

/* Global: CTAs */

.cta {
	display: block;
	padding: 1em 2em;
	width: 100%;
	border: 0;
	text-align: center;
	font-weight: 600;
	font-variant-caps: all-small-caps;
	font-size: 1em;
	letter-spacing: .1em;
	text-decoration: none;
	transition: background-color var(--animtime) var(--easing), color var(--animtime) var(--easing);
}

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

.cta:active {
	color: var(--color-white);
	background-color: var(--color-black);
}

@media (min-width: 45rem)
{
	.cta {
		display: inline-block;
		padding: 1em;
	}
}

@media (min-width: 60rem)
{
	.cta { font-size: 1.0625em }
}

@media (min-width: 120rem)
{
	.cta { font-size: 1.25em }
}

/* Global: Cards */

.cards { margin: calc(2 * var(--gap)) 0 0 }
.card { margin: var(--gap) var(--gap) 0 }

.card_image img {
	width: 100%;
	height: auto;
}

.card_info {
	padding: 2em 0;
	text-align: center;
	background-color: var(--color-white);
}

.card_info h3 {
	margin-bottom: 0;
	font-size: 2em;
	font-style: italic;
	color: var(--color-blue);
}

.card_info h3::after {
	display: block;
	margin: .5em auto;
	width: calc(100% - 2 * var(--gap));
	height: 1px;
	content: '';
	background: var(--color-champagne);
}

.card_info p { margin: 0 var(--gap) }

.card_mini_meta {
	padding: 2em var(--gap);
	border-bottom: 1px solid var(--color-champagne);
	background: var(--color-white);
}

.card_mini_meta h3 a,
.card_mini_meta span a {
	line-height: 1;
	text-decoration: none;
}

.card_mini_meta h3 a:hover,
.card_mini_meta span a:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-blue);
}

.card_mini_meta h3 {
	margin-top: .5em;
	margin-bottom: 0;
	line-height: 1;
	font-size: 1.5em;
	font-style: italic;
}

.card_mini_meta .cta {
	display: inline-block;
	margin-top: 1em;
	background-color: var(--color-champagne);
}

.card_mini_meta .cta:focus,
.card_mini_meta .cta:active { color: var(--color-white) }

.card_mini_meta .cta:hover { background-color: var(--color-blue) }
.card_mini_meta .cta:focus { background-color: var(--color-darkblue) }
.card_mini_meta .cta:active { background-color: var(--color-black) }

@media (min-width: 50rem)
{
	.card {
		display: flex;
		flex-flow: row nowrap;
	}

	.card:nth-child(odd) { flex-direction: row-reverse }

	.card>div { flex: 1 1 50% }

	.card_info h3,
	.card_info p {
		margin: 0;
		padding: 0 var(--gap);
		text-align: left;
	}

	.card_info h3::after {
		position: relative;
		width: calc(100% + var(--gap));
	}

	.card:nth-child(odd) h3::after { right: var(--gap) }
}

@media (min-width: 80rem)
{
	.card { margin: var(--gap) 0 0 }
	.card_info { padding: 3em 0 }
	.card_info p { font-size: 1.25em }
	.card_mini_meta { padding: 2em calc(var(--gap) / 2) }
}

@media (min-width: 120rem)
{
	.card_info { padding: 4em 0 }
	.card { margin: var(--gap) 0 0 }
}

/* Global: Galleries of stuff */

.gallery_items {
	display: block;
	margin-top: 2em;
}

.gallery_items li+li{ margin-top: var(--gap) }

.gallery_item { break-inside: avoid }

.gallery_item a {
	display: block;
	line-height: 0;
}

.gallery_item img {
	width: 100%;
	height: auto;
}

@media (min-width: 30rem)
{
	.section_type_gallery .gallery_items { column-count: 1 }

	.gallery_items {
		column-count: 2;
		column-gap: var(--gap);
	}

	@supports (grid-template-rows: masonry)
	{
		.gallery_items {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: masonry;
			align-tracks: start;
			gap: var(--gap);
			column-count: 1;
		}
	}
}

@media (min-width: 50rem)
{
	.gallery_items { margin: 2em var(--gap) 0 }
}

@media (min-width: 60rem)
{
	.section_type_gallery .gallery_items { column-count: 2 }
}

@media (min-width: 80rem)
{
	.gallery_items {
		grid-column: 2/3;
		margin: 2em 0 0;
	}

	.gallery_items {
		grid-row: 1/span 9999;
		margin-top: 0;
		column-gap: var(--gap);
	}

	.gallery_items li { margin-bottom: var(--gap) }
}

@media (min-width: 100rem)
{
	.section_type_gallery .gallery_items { column-count: 3 }
}

@media (min-width: 120rem)
{
	.gallery_items { margin: 0 }
}

/* Pages: Page hero */

.page_hero { margin: 2em 0 }

.page_hero h1,
.page_hero h2 {
	margin: 0 var(--gap);
	text-align: center;
}

.page_hero h1 { line-height: 1 }

.page_hero h2 {
	line-height: 1.25;
	font-weight: normal;
	font-style: italic;
}

@media (min-width: 60rem)
{
	.page_hero { margin: 1em var(--gap) 2em }
	.page_hero h1 { font-size: 3em }
}

@media (min-width: 80rem)
{
	.page_hero h1 { font-size: 4em }
}

@media (min-width: 100rem)
{
	.page_hero h1 { font-size: 4.5em }
}

@media (min-width: 100rem)
{
	.page_hero { margin: 2em calc(2 * var(--gap)) }
}

/* Pages: Page copy */

.page_copy {
	position: relative;
	padding: var(--gap);
	z-index: 1;
	text-align: center;
	background-color: var(--color-white);
}

.page_copy dl+dl {
	margin-top: 1em;
	border-top: 1px solid var(--color-champagne);
}

.page_copy p {
	margin: 0;
	text-align: left;
	font-family: var(--font-serif);
	font-size: 1.25em;
}

.page_copy p+p { margin-top: 1em }
.page_copy dl+dl dt { margin-top: 1em }
.page_copy dd { font-weight: 600 }
.page_copy a { text-decoration-color: var(--color-champagne) }

@media (min-width: 60rem)
{
	.page_copy { margin: 0 var(--gap) }
}

@media (min-width: 80rem)
{
	.page_copy p { font-size: 1.5em }
}

@media (min-width: 120rem)
{
	.page_copy { margin: 0 calc(2 * var(--gap)) }
}

/* Pages: Wide images */

.wide_image {
	width: 100%;
	height: 25vw;
}

.wide_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Sticky */

#sticky {
	position: sticky;
	width: 100%;
	top: 0;
	padding: .5rem calc(2 * var(--gap));
	z-index: 2;
	text-align: center;
	background: var(--color-darkgray);
	color: var(--color-white);
}

#sticky strong { color: inherit }

#sticky a {
	text-decoration: underline;
	text-decoration-color: var(--color-champagne);
}

#sticky a:hover { color: var(--color-lightchampagne) }
#sticky a:active { color: var(--color-champagne) }

@media (min-width: 60rem)
{
	#sticky { font-size: 1.25em }
}

@media (min-width: 80rem)
{
	#sticky { font-size: 1.5em }
}

/* Top image */

.top_image {
	position: absolute;
	display: block;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	z-index: -1;
	filter: opacity(.15) grayscale(.5);
}

.top_image img {
	max-width: 100%;
	height: 175%;
	height: 175vw;
	object-fit: cover;
	object-position: 50% 0%;
}

@media (min-width: 60rem)
{
	.top_image img {
		height: 150%;
		height: 150vw;
	}
}

@media (min-width: 80rem)
{
	.top_image img {
		height: 100%;
		height: 100vw;
	}
}

/* Header */

header { margin: calc(2 * var(--gap)) var(--gap) }

.logo { display: block }

.logo svg {
	display: block;
	margin: 0 auto;
	max-width: 200px;
	fill: var(--color-black);
	transition: fill var(--animtime) var(--easing);
}

.logo:hover svg { fill: var(--color-darkblue) }

@media (min-width: 60rem)
{
	header {
		display: inline-block;
		margin: calc(2 * var(--gap)) 0 var(--gap) var(--gap);
		vertical-align: middle;
	}

	header svg { width: 200px }
}

@media (min-width: 80rem)
{
	header { margin: var(--gap) 0 calc(var(--gap) / 2) var(--gap) }
}

@media (min-width: 120rem)
{
	header { margin: var(--gap) 0 calc(var(--gap) / 2) calc(2 * var(--gap)) }
}

/* Footer */

footer {
	padding: 2em 0;
	color: var(--color-white);
	background: var(--color-black);
}

footer svg {
	display: block;
	margin: 0 auto 2em;
	max-width: 200px;
	fill: var(--color-white);
}

footer p {
	margin: 0 var(--gap);
	text-align: center;
}

footer li {
	text-align: center;
	line-height: 1.5;
}

footer h3 {
	display: block;
	margin-top: 2em;
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 600;
	font-variant-caps: all-small-caps;
	font-size: 1em;
	letter-spacing: .1em;
	color: var(--color-champagne);
}

footer a:hover,
footer a:active {
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-color: var(--color-champagne);
}

@media (min-width: 40rem)
{
	footer {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: minmax(min-content, max-content);
		gap: var(--gap);
	}

	footer svg,
	footer p { grid-column: 1/span 2 }
	
	footer svg { margin-bottom: 0 }
}

@media (min-width: 50rem)
{
	footer { grid-template-columns: repeat(4, 1fr) }

	footer svg {
		grid-row: 1/2;
		margin: 0 auto 0 var(--gap);
	}

	.footer_links { grid-row: 1/span 2 }
	footer h3 { margin-top: 0 }
	
	footer p,
	footer h3,
	footer li { text-align: left }
}

@media (min-width: 60rem)
{
	footer { padding: 3em 0 }
}

@media (min-width: 120rem)
{
	footer svg,
	footer p { margin: 0 auto 0 calc(2 * var(--gap)) }
}

/* Menu */

#menu { margin: 0 var(--gap) }

#menu_dropdown {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

#menu_dropdown_button {
	display: block;
	padding: 1em 2em;
	width: 100%;
	text-align: center;
	background-color: var(--color-darkblue);
	cursor: pointer;
	transition: background-color var(--animtime) var(--easing), color var(--animtime) var(--easing);
}

#menu_dropdown_button:hover {
	color: var(--color-white);
	background-color: var(--color-blue);
}

#menu_dropdown_button:active {
	color: var(--color-white);
	background-color: var(--color-black);
}

#menu_dropdown_button span {
	font-size: 1em;
	font-weight: 600;
	letter-spacing: .15em;
	font-variant-caps: all-small-caps;
	color: var(--color-white);
}

#menu span::after,
#menu a[href="#"]::after {
	display: inline-block;
	margin-left: .5em;
	vertical-align: middle;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--color-white);
	content: '';
}

#menu_links { display: none }
#menu_dropdown:checked~#menu_links { display: block }

#menu a[href="#"]:focus-within::after,
#menu_dropdown:checked~#menu_dropdown_button span::after { transform: rotate(180deg) }

#menu_links li {
	display: block;
	position: relative;
	margin-top: 1px;
	text-align: center;
}

#menu_links a {
	display: block;
	padding: 1em 2em;
	width: 100%;
	font-weight: 600;
	font-variant-caps: all-small-caps;
	font-size: 1em;
	letter-spacing: .1em;
	text-decoration: none;
}

#menu_links>li>a {
	color: var(--color-white);
	background: var(--color-blue);
}

#menu_links>li>a:hover,
#menu_links>li>a:active { color: var(--color-white) }

#menu_links>li>a:hover { background-color: var(--color-darkblue) }
#menu_links>li>a:active { background-color: var(--color-black) }

#menu_links ul a {
	color: var(--color-black);
	background: var(--color-white);
}

#menu_links ul a:hover { background-color: var(--color-champagne) }

#menu_links ul a:active {
	color: var(--color-white);
	background-color: var(--color-black);
}

#menu_links ul {
	display: none;
	z-index: 2;
}

#menu_links li:focus-within ul { display: block }

@media (min-width: 60rem)
{
	#menu {
		display: inline-block;
		margin: calc(2 * var(--gap) - 1em) var(--gap) calc(var(--gap) - 1em) 0;
		float: right;
		vertical-align: middle;
	}

	#menu_dropdown_button { display: none }

	#menu_links,
	#menu_links>li { display: inline-block }

	#menu_links>li {
		margin-top: 0;
		text-align: unset;
	}

	#menu_links>li>a {
		padding: 1em .75em;
		width: unset;
		color: var(--color-black);
		background: transparent;
	}

	#menu_links>li:last-of-type>a {
		color: var(--color-white);
		background: var(--color-darkblue);
	}

	#menu span::after,
	#menu a[href="#"]::after { border-top: 6px solid var(--color-black) }

	#menu_links a:focus+ul,
	#menu_links li:hover ul,
	#menu_links li:focus-within ul {
		position: absolute;
		top: 100%;
		left: -.25em;
	}

	#menu_links li li { text-align: left }
	
	#menu_links ul a {
		padding: 1em;
		width: 16rem;
		color: var(--color-white);
		background-color: var(--color-darkblue);
		transition: background-color var(--animtime) var(--easing);
	}
	
	#menu_links>li>a:focus-within { background-color: var(--color-darkblue) }
	#menu_links ul a:hover { background-color: var(--color-blue) }
	#menu_links ul a:active { background-color: var(--color-black) }
	
	#menu a[href="#"]:focus-within::after,
	#menu a[href="#"]:hover::after { border-top: 6px solid var(--color-white) }
	
	#menu_links>li>a:focus-within { color: white }
}

@media (min-width: 80rem)
{
	#menu { margin: calc(var(--gap) - 1em) var(--gap) calc(var(--gap) / 2 - 1em) 0 }
	
	#menu_links>li>a,
	#menu_links ul a { padding: 1em 1.5em }

	#menu_links a:focus+ul { left: 0 }
}

@media (min-width: 120rem)
{
	#menu { margin: calc(var(--gap) - 1em) calc(2 * var(--gap)) calc(var(--gap) / 2 - 1em) 0 }
	
	#menu_links>li>a,
	#menu_links ul a { padding: 1em 2em }
}

/* Hero */

#home_hero { margin: 4em 0 0 }

#home_hero h1,
#home_hero p {
	margin-left: var(--gap);
	margin-right: var(--gap);
	text-align: center;
}

#home_hero h1 {
	margin-bottom: 0;
	line-height: 1;
	font-size: 3em;
	font-weight: normal;
}

#home_hero h1::after {
	display: block;
	margin: var(--gap) auto;
	width: calc(var(--gap) * 4);
	height: calc(var(--gap) / 2);
	content: '';
	background: var(--color-champagne);
}

#home_hero p {
	line-height: 1.5;
	font-size: 1.25em;
	font-weight: 500;
	letter-spacing: -.025em;
}

#hero_ctas {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	gap: calc(var(--gap) / 2);
	margin: 1em var(--gap);
	text-align: center;
}

#hero_cta_consultation:not(:hover):not(:active) {
	background: var(--color-darkblue);
	color: var(--color-white);
}

#hero_cta_services:not(:hover):not(:active) {
	background: var(--color-gray);
	color: var(--color-black);
}

#hero_pictures {
	margin: 4em 0 0;
	display: flex;
	flex-flow: row nowrap;
}

.hero_picture {
	flex: 1 1 33.3333%;
	height: 50vw;
	background-color: var(--color-gray);
}

.hero_picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

@media (min-width: 45rem)
{
	#hero_ctas { flex-flow: row nowrap }
}

@media (min-width: 60rem)
{
	#home_hero { margin: 8em 0 0 }

	#home_hero h1 { font-size: 4em }
	#home_hero strong { 
		display: block;
		font-size: 1.125em;
	}

	#hero_ctas { justify-content: center }

	.cta {
		padding: 1em 2em;
		width: unset;
	}

	#hero_pictures {
		margin: 4em var(--gap) 0;
		gap: var(--gap);
	}

	.hero_picture { height: 30vw }
}

@media (min-width: 80rem)
{
	#home_hero { margin: 12em 0 0 }

	#home_hero h1::after {
		width: calc(var(--gap) * 3);
		height: calc(var(--gap) / 4);
	}
}

@media (min-width: 120rem)
{
	#home_hero { margin: 16em 0 0 }

	#home_hero h1,
	#home_hero p,
	#hero_ctas,
	#hero_pictures {
		margin-left: calc(2 * var(--gap));
		margin-right: calc(2 * var(--gap));
	}

	#home_hero h1 { font-size: 5em }
}

/* Home: Services */

#home_services { background: var(--color-lightchampagne) }

/* Home: Testimonials */

#home_testimonials {
	text-align: center;
	background-image: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.85)), url(img/bg-home_testimonials.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

#home_testimonials_cards { margin: calc(2 * var(--gap)) 0 0 }

.home_testimonial_card {
	margin: var(--gap) var(--gap) 0;
	padding: 2em calc(2 * var(--gap));
	text-align: center;
	background: var(--color-white);
}

.home_testimonial_card p {
	margin: 0;
	line-height: 1.5;
}

.home_testimonial_card h3 {
	margin: 0;
	line-height: 1;
	font-style: italic;
	color: var(--color-blue);
}

.home_testimonial_card h3::before {
	display: block;
	margin: 1em auto;
	width: 100%;
	height: 1px;
	content: '';
	background: var(--color-champagne);
}

#home_testimonials>a {
	margin: 2em var(--gap) 0;
	width: unset;
}

#home_testimonials>a:not(:hover):not(:active) {
	color: var(--color-black);
	background: var(--color-champagne);
}

@media (min-width: 60rem)
{
	#home_testimonials_cards {
		display: flex;
		flex-flow: row nowrap;
		gap: var(--gap);
		margin: calc(2 * var(--gap)) var(--gap) 0;
	}

	.home_testimonial_card {
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
		flex: 1 1 33.3333%;
		margin: 0;
		padding: 2em;
		text-align: left;
	}

	.home_testimonial_card p {
		flex-grow: 1;
		flex-shrink: 0;
	}

	.home_testimonial_card h3 {
		flex-grow: 0;
		flex-shrink: 1;
	}

	.home_testimonial_card h3::after {
		margin-right: .25em;
		float: left;
		content: '\2014';
	}
}

@media (min-width: 80rem)
{
	#home_testimonials_cards { margin: calc(2 * var(--gap)) 0 0 }
}

@media (min-width: 100rem)
{
	.home_testimonial_card p { font-size: 1.125em }
	#home_testimonials>a { margin: 2em calc(2 * var(--gap)) 0 }
}

/* Home: Projects */

#home_projects {
	background-color: var(--color-black);
	text-align: center;
}

#home_projects h2,
#home_projects>p { color: var(--color-white) }

#home_projects .cta {
	margin: 2em var(--gap) 0;
	width: unset;
}

#home_projects .cta:not(:hover):not(:active) {
	color: var(--color-black);
	background: var(--color-champagne);
}

@media (min-width: 45rem)
{
	#home_projects .cta { margin: 1em auto 0 }
}

@media (min-width: 80rem)
{
	#home_projects::before {
		position: absolute;
		display: block;
		width: 329px;
		height: 236px;
		top: 50%;
		left: calc(0px - 1.5 * var(--gap));
		content: '';
		opacity: .05;
		background-color: var(--color-lightchampagne);
		-webkit-mask: url('logos.svg#w-view');
		mask: url('logos.svg#w-view');
		-webkit-mask-size: cover;
		mask-size: cover;
	}

	#home_projects .gallery_items { grid-row: 1/span 3 }
	#home_projects .gallery_items li+li { margin-top: 0 }

	#home_projects .cta {
		grid-column: 2/3;
		margin-left: 0;
	}

	#home_projects .cta { grid-row: 4/5 }
}

/* Home: About */

#home_about {
	text-align: center;
	background-image: linear-gradient(to bottom, rgba(255,255,255,.85), rgba(255,255,255,.85)), url(img/bg-home_about.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

#home_about .cta {
	margin: 2em var(--gap) 0;
	width: unset;
}

#home_about .cta:not(:hover):not(:active) {
	color: var(--color-white);
	background: var(--color-darkblue);
}

@media (min-width: 45rem)
{
	#home_about .cta { margin: 2em auto 0 }
}

@media (min-width: 60rem)
{
	#home_about {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(min-content, max-content);
		gap: 0 var(--gap);
	}

	#home_about h2 {
		grid-column: 1/2;
		grid-row: 1/-1;
		text-align: left;
	}

	#home_about p {
		grid-column: 2/3;
		text-align: left;
		font-size: 1.125em;
	}

	#home_about .cta {
		grid-column: 2/3;
		margin: 2em auto 0 0;
	}
}

/* Contact */

.contact,
.contact_cta { background: var(--color-darkblue) }

.contact h2,
.contact a,
.contact strong,
.contact p,
.contact_cta h2,
.contact_cta p { color: var(--color-white) }

.contact fieldset {
	position: relative;
	margin: 1em var(--gap);
}

.contact input:not([type="submit"]),
.contact textarea {
	display: block;
	width: 100%;
	padding: .5em;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: var(--color-blue);
	border-radius: 0;
	line-height: 1.5;
	font-size: 1.125em;
	font-weight: 500;
	color: var(--color-white);
	background-color: var(--color-darkblue);
	transition: background var(--animtime) var(--easing), color var(--animtime) var(--easing);
}

.contact textarea { resize: vertical }

.contact input:required {
	background-image: url('logos.svg#asterisk-view');
	background-size: 1em 1em;
	background-position: right 50%;
	background-repeat: no-repeat;
}

.contact input:focus,
.contact textarea:focus {
	color: var(--color-black);
	outline: 1px solid var(--color-champagne);
	background: var(--color-white);
}

.contact label {
	position: relative;
	font-weight: 400;
	font-variant-caps: all-small-caps;
	font-size: 1em;
	letter-spacing: .1em;
	color: var(--color-white);
	opacity: .5;
}

.contact input[required]~label::after {
	position: absolute;
	display: block;
	margin: auto;
	top: 0;
	bottom: 0;
	right: .5em;
	content: '\002a';
	font-family: var(--font-serif);
	font-size: 2em;
	color: var(--color-blue);
}

.contact button,
.contact_cta>a {
	margin: 2em var(--gap) 0;
	padding: .75em 1.5em;
	border: 0;
	width: unset;
}

.contact button { font-size: 1.25em }

.contact button:not(:hover):not(:active),
.contact_cta a:not(:hover):not(:active) {
	background-color: var(--color-champagne);
}

.contact legend {
	margin: .5em var(--gap) 0;
	font-style: italic;
	color: var(--color-white);
}

#contact_map { margin: 4em var(--gap) 2em }

.contact a {
	text-decoration: underline;
	text-decoration-color: var(--color-blue);
}

.contact_info p,
.contact_info dl {
	margin: .5em var(--gap) 0;
	text-align: center;
}

.contact_info dt {
	color: var(--color-white);
	opacity: .75;
}

.contact_info dd { color: var(--color-blue) }
.contact_info dd+dt { margin-top: 2em }

#contact_hero_copy { background-color: var(--color-lightchampagne) }

.contact_cta { text-align: center }

.contact_cta>p:first-of-type::after { display: none }

@media (min-width: 40rem)
{
	.contact_info p { font-size: 1.125em }

	#contact_hero_copy {
		display: flex;
		flex-flow: row nowrap;
	}
	
	#contact_hero_copy dl+dl {
		padding: 0 1em;
		border-top: none;
		border-left: 1px solid var(--color-champagne);
	}
	
	#contact_hero_copy dl:first-of-type { padding: 0 1em 0 0 }
	#contact_hero_copy dl:last-of-type { padding: 0 0 0 1em }

	#contact_hero_copy dl { flex: 1 1 auto }
	#contact_hero_copy dl+dl,
	#contact_hero_copy dl+dl dt { margin-top: 0 }
}

@media (min-width: 60rem)
{
	.contact {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto auto 1fr auto;
		grid-column-gap: var(--gap);
	}

	.contact h2,
	.contact>p:first-of-type { grid-column: 1/-1 }
	.contact h2 { grid-row: 1/2 }
	.contact>p:first-of-type { grid-row: 2/3 }
	.contact fieldset { margin: 1em 0 }
	.contact legend { margin: .5em 0 0 }
	.contact button { margin: 2em 0 0 }
	#contact_map { margin: 0 0 1em }
	
	.contact_info p {
		grid-column: 2/3;
		margin: 0 var(--gap) 0 0;
		text-align: left;
	}

	.contact form {
		grid-row: 3/-1;
		margin: calc(2 * var(--gap)) 0 0 var(--gap);
	}

	.contact_info { margin: calc(2 * var(--gap)) var(--gap) 0 0 }
	
	.contact_info p,
	.contact_info dl { text-align: left }

	.contact_info dd,
	#contact_hero_copy dd { font-size: 1.125em }
}

@media (min-width: 80rem)
{
	.contact form,
	.contact_info { margin: var(--gap) 0 0 }
	#contact_map { margin: 0 0 1em }
	
	.contact_info p,
	.contact_info dd,
	#contact_hero_copy dd { font-size: 1.25em }
	
	#contact_hero_copy dd { margin-top: .5em }
}

@media (min-width: 100rem)
{
	#contact_hero_copy dt { font-size: 1.25em }
	#contact_hero_copy dd { font-size: 1.5em }
}

/* Project gallery filters */

#gallery_filter { margin-bottom: 2em }

#gallery_filter~.gallery_items li { margin-bottom: 0 }
#gallery_filter~.gallery_items li+li { margin-top: 0 }
#gallery_filter~.gallery_items .card_mini { margin-bottom: var(--gap) }

#gallery_filter>span { margin: 0 var(--gap) }
#gallery_filters>li { position: relative }

#gallery_filters>li>ul {
	display: none;
	z-index: 2;
}

#gallery_filters>li>a {
	display: block;
	margin: 0 var(--gap);
	padding: .5em 0;
	font-weight: 500;
	letter-spacing: .1em;
	font-variant-caps: all-small-caps;
	text-decoration: none;
}

#gallery_filters>li>a:hover,
#gallery_filters>li>a:focus,
#gallery_filters>li>a:active { text-decoration: underline }

#gallery_filters>li>a:hover { text-decoration-color: var(--color-darkblue) }

#gallery_filters>li>a:focus,
#gallery_filters>li>a:active {
	font-weight: 600;
	text-decoration-color: var(--color-blue);
}

#gallery_filters>li>a { position: relative }

#gallery_filters>li:not(:first-of-type)>a::after {
	display: inline-block;
	margin-left: .5em;
	vertical-align: middle;
	width: 0;
	height: 0;
	border-top: 6px solid var(--color-champagne);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	content: '';
}

#gallery_filters>li:focus-within ul { display: block }
#gallery_filters>li:not(:first-of-type):focus-within>a { font-weight: 600 }

#gallery_filters>li:not(:first-of-type):focus-within>a::after {
	border-top: 0;
	border-bottom: 6px solid var(--color-blue);
}

#gallery_filters>li li { display: block }
#gallery_filters>li li+li { margin-top: 1px }

#gallery_filters ul a {
	display: block;
	padding: 1em var(--gap);
	text-decoration: none;
	background-color: var(--color-white);
	transition: background-color var(--animtime) var(--easing), color var(--animtime) var(--easing);
}

#gallery_filters ul a:hover {
	text-decoration: underline;
	background-color: var(--color-champagne);
}

#gallery_filters ul a.active {
	font-weight: 600;
	color: var(--color-white);
	background-color: var(--color-darkblue);
}

@media (min-width: 60rem)
{
	#gallery_filters,
	#gallery_filter>span,
	#gallery_filters>li { display: inline-block }
	
	#gallery_filter>span { margin: 0 1em 0 0 }

	#gallery_filters>li>a {
		margin: 0;
		padding: 1em .5em;
	}

	#gallery_filters ul {
		position: absolute;
		top: 100%;
		left: 0;
	}

	#gallery_filters ul a {
		padding: 1em;
		width: 20em;
	}
}