/*
Theme Name: Lindsey Architecture
Author: Reuben Rink
Author URI: https://www.reubenrink.com
Version: 1.0
Text Domain: lindsey-architecture
*/

*,*::before,*::after{box-sizing:border-box;}html{overflow-y:scroll;font-size:100%;}body{margin:0;padding:0;line-height:1.5;}abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}article,aside,figure,footer,header,main,nav,section{display:block;}ul{list-style:none;}ol{margin-left:1.5em;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:none;}a{font-size:100%;background:transparent;margin:0;padding:0;vertical-align:baseline;}a:hover,a:active{outline:0;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}img,video,svg{max-width:100%;height:auto;display:block;}td,td img{vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}th{vertical-align:bottom;font-weight:700;}td{font-weight:400;}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}pre{white-space:pre-wrap;word-wrap:break-word;}code,kbd,pre,samp{font-family:monospace,sans-serif;}small{font-size:85%;}strong{font-weight:700;}sub,sup{font-size:75%;line-height:0;position:relative;}sup{top:-0.5em;}sub{bottom:-0.25em;}input,button,select,textarea{margin:0;font:inherit;-webkit-appearance:none;appearance:none;}input,select{vertical-align:middle;}button,input[type="button"],input[type="submit"]{cursor:pointer;width:auto;overflow:visible;}label{cursor:pointer;}textarea{overflow:auto;vertical-align:top;}.alignleft,img.alignleft{float:left;margin:15px 15px 15px 0;}.alignright,img.alignright{float:right;margin:15px 0 15px 15px;}.aligncenter,img.aligncenter{display:block;margin:15px auto;}

:root{

	--font-display: "kepler-3-display-variable", "Old Standard TT", times, "times new roman", serif;
	--font-body: "Open Sans", helvetica, tahoma, sans-serif;


	--color-blue: #006ba6;
	--color-teal: #398f9e;
	--color-teal-light: #78a5ad;
	--color-teal-dark: #5a8f98;
	--color-terracotta: #d9673a;
	--color-gold: #fdc689;
	--color-gold-hover: #f5b977;


	--color-taupe: #bab1aa;
	--color-taupe-dark: #968c83;
	--color-taupe-darker: #948980;
	--color-taupe-light-active: #ada095;
	--color-submenu-hover: #f5e9dc;
	--color-link-hover: #337ab7;
	--color-brown: #5b5048;
	--color-rule: #c9bfb8;
	--color-rule-light: #d2cbc5;
	--color-cream: #f0ebe7;
	--color-cream-dark: #e8e1db;
	--color-cream-light: #fdfbef;
	--color-mint: #a7c2c0;
	--color-quote: #a5a5a5;
	--color-quote-home: #999;
	--color-brown-mid: #786f67;
	--color-cyan: #00a5e7;
	--color-text: #333;
	--color-copy: #444;
	--color-white: #fff;


	--overlay-taupe: rgba(150,140,131,.85);
	--overlay-teal: rgba(171,198,202,.9);
	--overlay-white: rgba(255,255,255,.85);
	--overlay-cream: rgba(245,233,220,.85);
	--overlay-portfolio: rgba(120,165,173,.75);


	--fs-hero: 140px;
	--fs-h1: 64px;		--lh-h1: 68px;
	--fs-h2: 28.8px;	--lh-h2: 57.6px;
	--fs-h3: 36px;		--lh-h3: 40px;
	--fs-h4: 20px;		--lh-h4: 25px;
	--fs-h5: 20px;		--lh-h5: 20px;
	--fs-body: 15px;	--lh-body: 28px;
	--fs-nav: 15px;
	--fs-small: 12px;
	--fs-tiny: 10px;


	--ls-wide: .05em;
	--ls-wider: .2em;
	--ls-widest: .4em;


	--container: 100%;
	--wrapper-max: 1400px;
	--header-height: 80px;
}

body{ --header-offset: var(--header-height);}
body.admin-bar{ --header-offset: calc(var(--header-height) + 32px);}
@media screen and (max-width: 782px){ body.admin-bar{ --header-offset: calc(var(--header-height) + 46px);} }
@media screen and (max-width: 600px){ body.admin-bar{ --header-offset: var(--header-height);} }

@media (min-width: 768px)  { :root{ --container: 750px; } }
@media (min-width: 992px)  { :root{ --container: 970px; } }
@media (min-width: 1200px) { :root{ --container: 1170px; } }
@media (min-width: 1585px) { :root{ --container: 1400px; } }

body{ font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-copy); background: var(--color-white);}
body, select, input, textarea{ font-family: var(--font-body);}
.page-wrap{}

a{ color: var(--color-blue); text-decoration: none;}
a:hover, a:focus{ color: var(--color-terracotta); text-decoration: underline;}

.button, button{ display: inline-block; cursor: pointer; margin: 15px auto 5px; padding: 10px 20px; background: var(--color-gold); color: var(--color-text); font-size: inherit; text-transform: uppercase; letter-spacing: var(--ls-wide); text-align: center; border: 0;}
.button:hover, .button:focus, button:hover, button:focus{ background: var(--color-gold-hover); color: #000; text-decoration: none;}
.screen-reader{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;}
:focus{ outline: 2px solid var(--color-teal); outline-offset: 2px;}
:focus:not(:focus-visible){ outline: none;}
:focus-visible{ outline: 2px solid var(--color-teal); outline-offset: 2px;}
a, img, .button, button{ transition: all .3s ease 0s;}

h1, h2, h3, h4, h5, h6{ line-height: 1.2; font-weight: 400;}

h1, h2, h3{
	font-variation-settings: "wdth" 100;
	font-optical-sizing: auto;
}
h1{ font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--color-blue); text-align: center; text-transform: lowercase;}

h2{ font-family: var(--font-body); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 400; text-transform: uppercase; color: var(--color-brown-mid);}

h3{ display: flex; flex-direction: row; justify-content: center; overflow: hidden; font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; font-style: italic; text-transform: capitalize; color: var(--color-teal); text-align: center;}
h3:before, h3:after{ content: '\a0'; position: relative; top: .5em; height: 1px; background: var(--color-rule); flex-grow: 1;}
h4{ font-family: var(--font-body); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 800; text-transform: uppercase; color: var(--color-brown);}
h5{ font-family: var(--font-body); font-size: var(--fs-h5); line-height: var(--lh-h5); text-transform: uppercase; color: var(--color-brown);}
h6{ font-family: var(--font-body); font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase; color: var(--color-brown);}
p{ margin-top: 1em;}
p:first-child{ margin-top: 0;}

.wrapper, .container{ width: var(--container); max-width: 100%; margin: 0 auto; padding: 0 15px;}
.container{ display: flex;}
.wrapper:after{ content: ""; display: table; clear: both;}

.header{ background: var(--color-taupe); color: var(--color-white); min-height: var(--header-height); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: 0 5px 8px 0 rgba(0,0,0,.5);}
.header-inner{ width: var(--container); max-width: 100%; margin: 0 auto; padding: 0; min-height: var(--header-height); display: flex; align-items: stretch; position: relative;}
.header a{ color: var(--color-white); text-decoration: none;}
.header a:hover, .header a:focus{ color: var(--color-cream-dark); text-decoration: none;}
.page-wrap{ padding-top: var(--header-height);}

body.admin-bar .header{ top: 32px;}

@media screen and (max-width: 782px) {
	body.admin-bar .header{ top: 46px;}
}

@media screen and (max-width: 600px) {
	body.admin-bar .header{ top: 0;}
}

:target{ scroll-margin-top: calc(var(--header-offset) + 20px);}
html{ scroll-padding-top: calc(var(--header-height) + 20px);}

.header-brand{ display: flex; align-items: center; flex: 0 0 auto; height: var(--header-height); padding: 0 40px 0 20px; background: transparent url("images/logo-angled-bg.png") no-repeat right top; position: relative;}
.header-brand:before{ content: ""; position: absolute; top: 0; right: 100%; width: 100vw; height: var(--header-height); background: var(--color-white);}
.header-brand .logo{ width: 80px; height: 80px; max-width: none;}

.brandname{ font-size: 16px; line-height: 20px; letter-spacing: normal; color: var(--color-white); margin: 40px 0 0; align-self: flex-start; flex: 0 0 auto;}
.brandname b{ font-weight: 800;}
.brandname a{ color: var(--color-white); transition: none;}

.brandname a:hover, .brandname a:focus{ color: var(--color-white);}

.nav{ margin-left: auto; align-self: flex-start; margin-top: 35px; display: flex;}
.nav > ul{ float: none; display: flex;}

.nav > ul > li > a{ padding: 10px 15px; line-height: 24px; letter-spacing: normal;}
nav ul{ list-style: none; position: relative; float: left; margin: 0; padding: 0;}
nav ul a{ display: block; text-decoration: none; font-size: var(--fs-nav); text-transform: uppercase; letter-spacing: var(--ls-wide); padding: 10px 15px;}
nav ul li{ position: relative; float: left; margin: 0; padding: 0;}

.nav > ul > li > a:hover,
.nav > ul > li > a:focus,
.nav > ul > li.current-menu-item > a,
.nav > ul > li.current-menu-parent > a,
.nav > ul > li.current-menu-ancestor > a,
.nav > ul > li.is-open > a,
.nav > ul > li:hover > a{ color: var(--color-white); background: var(--color-taupe-light-active);}

.nav > ul > li.menu-item-has-children > a::after{
	content: ""; display: inline-block; width: 0; height: 0; margin-left: 2px;
	vertical-align: middle;
	border-top: 4px dashed currentColor;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.nav ul ul{ display: none; position: absolute; top: 100%; left: 0; z-index: 1000;
	min-width: 160px; margin: 0; padding: 5px 0; list-style: none; text-align: left;
	background: var(--color-white);
	border: 1px solid rgba(0,0,0,.15); border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 6px 12px rgba(0,0,0,.176);
	background-clip: padding-box;}
.nav ul ul li{ float: none; width: 100%;}
.nav ul ul a{ display: block; padding: 8px 20px; font-size: 15px; line-height: 1.42857;
	color: var(--color-teal-light); text-transform: uppercase; letter-spacing: normal;
	white-space: nowrap;}
.nav ul ul a:hover, .nav ul ul a:focus{ color: var(--color-link-hover); background: var(--color-submenu-hover);}
.nav ul ul li.current-menu-item > a{ color: var(--color-link-hover); background: var(--color-submenu-hover);}
nav ul ul ul{ top: 0; left: 100%;}

.nav > ul > li.is-open > ul{ display: block;}

.nav-toggle{ display: none; position: relative; align-self: flex-start; margin: 35px 10px 8px auto; padding: 9px 10px; background: none; border: 1px solid var(--color-taupe-darker); border-radius: 0; cursor: pointer; color: var(--color-white);}
.nav-toggle-label{ float: left; font-size: 11px; line-height: 15px; color: var(--color-white);}
.nav-toggle .icon-bar{ display: block; width: 20px; height: 2px; margin-left: 40px; border-radius: 1px; background: var(--color-white);}
.nav-toggle .icon-bar + .icon-bar{ margin-top: 4px;}
.nav-toggle:hover, .nav-toggle:focus{ background: var(--color-taupe-darker); color: var(--color-white);}

.nav-collapse{ display: none;}

.breadcrumbs{ color: #666; font-size: 12px; line-height: 24px; padding: 20px 0 12px; margin: 0 0 25px; text-transform: uppercase; letter-spacing: normal;}
.breadcrumbs a{ color: #666;}
.breadcrumbs a:hover{ color: var(--color-teal);}

.category-intro{ display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 auto 30px;}
.category-intro-heading,
.category-intro-copy{ width: 50%; padding: 0 15px;}

.category-intro-heading{ position: sticky; top: calc(var(--header-offset) + 20px); align-self: flex-start;}

.category-intro h1,
.additional-projects h2{ width: 100%; font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 400; letter-spacing: -3px; color: var(--color-blue);
	text-align: center; text-transform: lowercase; padding: 10px 20px 20px; margin: 0 0 30px;}

.category-intro-copy p{ margin-top: 0; margin-bottom: 1em;}
.category-intro-copy p:last-child{ margin-bottom: 0;}

@media (min-width: 768px){
	.category-intro h1{ text-align: right;}
}
@media (min-width: 992px){
	.category-intro h1,
	.additional-projects h2{ font-size: 100px; line-height: 90px; letter-spacing: -5px;}
}

@media (max-width: 767px){
	.category-intro-heading,
	.category-intro-copy{ width: 100%;}
	.category-intro-heading{ position: static;}
	.category-intro h1{ margin-bottom: 15px;}
}

.home-hero{ background: var(--color-cream-light);}

.home-slider{ position: relative;}

.home-slider:not(.slick-initialized) .home-slide + .home-slide{ display: none;}

.home-slide{ position: relative;}
.home-slide-image{ display: block; position: relative; z-index: 1; width: 100%; height: auto;}

.home-slide-message{ position: relative; z-index: 2; max-width: var(--wrapper-max); margin: 0 auto;}

.home-slide-name{ margin: 0; padding: 15px 20px; background: var(--overlay-taupe); color: var(--color-white); font-family: var(--font-display); font-variation-settings: "wdth" 100; font-optical-sizing: auto; font-size: 48px; line-height: 40px; font-weight: 400; text-transform: lowercase; text-align: center;}

.home-slide-left p{ margin: 0; padding: 0;}
.home-slide-left .button{ display: block; margin: 0; padding: 10px 20px; background: var(--color-gold); color: var(--color-text); font-size: 12px; line-height: 20px; text-transform: uppercase; letter-spacing: var(--ls-wide); text-align: center;}

.home-slide-tagline{ margin: 0; padding: 10px 20px; background: var(--overlay-teal); color: var(--color-brown-mid); font-family: var(--font-display); font-variation-settings: "wdth" 100; font-optical-sizing: auto; font-size: 16px; line-height: 24px; font-weight: 700; font-style: italic; text-transform: capitalize;}

.home-slide-copy{ margin: 0; padding: 20px; background: var(--overlay-cream); color: #444; font-size: var(--fs-body); line-height: 1.4em;}

@media (min-width: 768px){

	.home-slide-message{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; height: 50%; max-width: 1200px; margin: auto;}
	.home-slide-left{ position: absolute; left: 0; right: 50%; width: 50%; text-align: right;}
	.home-slide-right{ position: absolute; left: 50%; right: 0; width: 50%; text-align: left;}
	.home-slide-name{ display: inline-block; width: 90%; padding: 10px 20px 0 0; font-size: var(--fs-hero); line-height: 1; text-align: right;}
	.home-slide-left .button{ display: inline-block; font-size: 14px;}
	.home-slide-tagline{ display: inline-block; padding: 15px 15px 15px 30px; font-size: 24px; line-height: 30px; overflow-wrap: break-word;}
	.home-slide-copy{ display: block; width: 90%; padding: 20px 30px;}
}

@media (min-width: 992px){
	.home-slide-message{ height: 25%;}
}

.home-slider .slick-dots{ margin: 0; padding: 14px 0; list-style: none; text-align: center;}
.home-slider .slick-dots li{ display: inline-block; margin: 0 6px;}
.home-slider .slick-dots button{ display: block; width: 30px; height: 7px; padding: 0; border: 0; border-radius: 0; background: var(--color-taupe); box-shadow: inset 0 0 3px rgba(0,0,0,.3); font-size: 0; line-height: 0; color: transparent; cursor: pointer; transition: background .3s;}
.home-slider .slick-dots button:hover{ background: var(--color-taupe-dark);}
.home-slider .slick-dots .slick-active button{ background: var(--color-gold);}

@media (min-width: 768px){

	.home-slider .slick-dots{ position: absolute; right: 0; bottom: 20px; left: 0; z-index: 999; padding: 0;}
	.home-slider .slick-dots button{ background: rgba(255,255,255,.5);}
	.home-slider .slick-dots button:hover{ background: rgba(255,255,255,.75);}
	.home-slider .slick-dots .slick-active button{ background: rgba(253,198,137,.9);}
}

.home-intro{ padding: 40px 0;}
.home-intro .wrapper{ text-align: center; line-height: 2em;}
.home-intro-copy p{ margin: 0 0 22px;}
.home-intro-copy p:last-child{ margin-bottom: 0;}
.home-values{ margin: 22px 0; font-weight: 700; color: var(--color-blue);}
.home-intro .testimonial{ margin-top: 30px;}

.home-intro .testimonial-quote,
.home-intro .testimonial-source{ font-size: var(--fs-body); line-height: var(--lh-body); font-style: italic; color: var(--color-quote-home);}

.home-intro-copy p,
.home-intro .testimonial-quote{ text-wrap: pretty;}
.home-values{ text-wrap: balance;}

@media (min-width: 768px){

	.home-intro .wrapper{ padding: 0 10%;}
}

.interior-banner{ position: relative; overflow: hidden; width: 100%; min-height: 160px; aspect-ratio: var(--banner-ratio, 2555 / 460); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;}

@media (min-width: 768px){ .interior-banner{ min-height: 320px;} }
@media (min-width: 992px){ .interior-banner{ min-height: 400px;} }
@media (min-width: 1200px){ .interior-banner{ min-height: 460px;} }

.breadcrumb-sep{ margin: 0; color: var(--color-taupe);}

.project-tiles{ list-style: none; margin: 0; padding: 0;}
.project-tiles:after{ content: ""; display: table; clear: both;}

.project-tile{ position: relative; display: block; margin: 10px auto 20px; overflow: hidden; text-align: center; vertical-align: top;}
.project-tile img{ display: block; width: 100%; height: auto; transition: filter .5s ease-in-out, opacity .5s ease-in-out;}

.project-tile .shade{ display: block; position: relative; z-index: 5; width: 100%; padding: 15px 20px; text-align: center;}
.project-tile .name_title{ margin: 0 auto; font-size: 15px; line-height: 18px; text-transform: uppercase; color: var(--color-brown); overflow-wrap: break-word;}
.project-tile .tile-button{ display: inline-block; max-width: 125px; margin-top: 15px; padding: 5px 10px; background: var(--color-brown); color: var(--color-white); font-size: 10px; line-height: 20px; text-transform: uppercase; letter-spacing: var(--ls-wider);}

.project-tile .tile-link{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10;}

@media (min-width: 640px){
	.project-tile{ float: left; max-width: 47%; margin: 10px 1.25% 20px;}
}

@media (min-width: 768px){
	.project-tile{ border: 1px solid var(--color-taupe); transition: border-color 1s;}
	.project-tile:hover{ border-color: var(--color-brown);}

	.project-tile img{ width: calc(100% + 10px); max-width: none; margin: -5px; filter: blur(3px); opacity: .4;}
	.project-tile:hover img{ filter: blur(0); opacity: 1;}
	.project-tile .shade{ position: absolute; top: 0; right: 0; left: 0; height: 50%; display: flex; align-items: center; justify-content: center; padding: 10px; transition: background .5s;}
	.project-tile:hover .shade{ background: var(--overlay-white);}
	.project-tile .shade:before,
	.project-tile .shade:after{ content: ""; position: absolute; left: 0; right: 0; width: 30px; height: 1px; margin: 0 auto; background: var(--color-mint);}
	.project-tile .shade:before{ top: 0;}
	.project-tile .shade:after{ bottom: 0;}
	.project-tile .tile-button{ display: none;}
}

@media (min-width: 992px){
	.project-tile{ max-width: 22.5%; margin: 10px 10px 20px;}
}

.additional-projects{ padding: 30px 0 10px;}
.additional-projects h4{ margin: 0 0 10px; font-size: 19.2px; line-height: 27px; font-weight: 400; color: var(--color-text); text-align: center;}

.portfolio-hero{ position: relative; overflow: hidden; min-height: 160px; margin: 0; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;}

.portfolio-hero .wrapper{ padding: 0;}
.portfolio-hero-inner{ display: flex; margin: 0 -15px;}

.portfolio-hero-tiles{ position: relative; width: 100%; margin-left: auto;}

.portfolio-hero-tiles:before{ content: ""; position: absolute; top: 0; left: 0; bottom: -20px; width: 200%; z-index: 0; background: var(--overlay-portfolio);}
.portfolio-hero-tiles > *{ position: relative; z-index: 1;}

@media (min-width: 768px){
	.portfolio-hero{ min-height: 320px;}
	.portfolio-hero-tiles{ width: 50%;}
	.portfolio-hero-tiles:before{ filter: blur(5px);}
}
@media (min-width: 992px){ .portfolio-hero{ min-height: 400px;} }
@media (min-width: 1200px){ .portfolio-hero{ min-height: 460px;} }

.category-list{ display: block; clear: both; list-style: none; margin: 10px auto 50px; padding: 0;}
.category-list:after{ content: ""; display: table; clear: both;}

.category-list > li{ position: relative; display: block; min-height: 140px; margin-bottom: 20px; padding: 0; background: var(--color-cream); text-align: center;}
.category-list > li > a{ display: block; padding-bottom: 40px; color: inherit; text-decoration: none;}

.category-list h4{ margin: 0 auto; padding: 25px 10px 0; background: var(--color-taupe); border-bottom: 1px solid var(--color-taupe); color: var(--color-white); font-family: var(--font-body); font-size: 24px; line-height: 15px; font-weight: 400; text-align: center; text-transform: uppercase;}
.category-list p{ margin: 0; padding: 15px 20px 10px; background: var(--color-cream); border: 1px solid var(--color-cream); font-size: 14px; line-height: 18px; font-style: italic; text-align: center;}

.category-list > li > a:after{ content: "View Projects"; position: absolute; left: 0; right: 0; bottom: 5px; width: 100px; margin: 0 auto; padding: 5px 10px; border-top: 1px solid var(--color-cyan); color: var(--color-cyan); font-size: 10px; line-height: 12px; text-align: center; text-transform: uppercase; letter-spacing: var(--ls-wide);}
.category-list > li > a:hover:after{ color: var(--color-terracotta);}

@media (min-width: 600px){
	.category-list > li{ float: left; width: 48%; margin: 0 2% 2% 0; text-align: left;}

	.category-list > li > a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
}
@media (min-width: 768px){
	.category-list > li{ min-height: 180px;}
}
@media (min-width: 992px){
	.category-list > li{ width: 18%; margin: 0 2% 0 0;}
	.category-list p{ font-size: 15px; line-height: 18px;}
}

.category-tiles{ list-style: none; margin: 0; padding: 0;}
.category-tiles:after{ content: ""; display: table; clear: both;}

.category-tile{ position: relative; float: left; width: 100%; margin: 0 0 20px; overflow: hidden;}

.category-tile .tile-media{ position: relative; z-index: 1; aspect-ratio: 480 / 386; overflow: hidden; background: var(--color-cream);}
.category-tile .tile-media img{ display: block; width: 100%; height: 100%; object-fit: cover;}

.category-tile .shade{ padding: 15px 20px; background: var(--overlay-cream);}
.category-tile .shade h4{ margin: 0 auto 5px; font-size: 20px; line-height: 25px; font-weight: 800; text-transform: uppercase; text-align: center; letter-spacing: var(--ls-wide); color: var(--color-brown);}
.category-tile .shade h4:after{ content: ""; display: block; width: 100%; height: 1px; background: var(--color-teal);}

.category-tile .shade h4 strong{ display: block; margin: 10px auto; font-family: var(--font-display); font-variation-settings: "wdth" 100; font-optical-sizing: auto; font-size: 16px; line-height: 22px; font-weight: 700; font-style: italic; text-align: center; text-transform: capitalize; letter-spacing: normal; color: var(--color-teal);}

.category-tile .shade p{ margin: 0; font-size: 12px; line-height: 16px;}
.category-tile .shade .button{ display: block; margin: 0 auto; padding: 0; background: none; text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-terracotta);}

.category-tile .tile-link{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;}

@media (min-width: 480px){
	.category-tiles{ padding: 20px;}
	.category-tile{ width: 47.5%; margin: 5px; border: 1px solid var(--color-mint);}
}

@media (min-width: 768px){
	.category-tile{ width: 47%; max-width: 49%;}
	.category-tile .shade{ position: absolute; right: 0; bottom: 40px; left: 0; z-index: 5; height: 100%; padding: 5px 10px; transform: translate3d(0,100%,0); transition: transform .35s;}
	.category-tile:hover .shade{ transform: translate3d(0,40px,0); padding: 0 20px;}
	.category-tile:hover .shade h4{ margin: 20px auto 0; transition: margin .5s;}

	.category-tile .tile-media img{ transition: filter .5s, transform .5s;}
	.category-tile:hover .tile-media img{ filter: blur(3px); transform: scale(1.04);}
}

@media (min-width: 992px){
	.category-tile:hover .shade{ padding: 5% 20px;}
}

.project-header{ padding: 0 0 30px;}
.project-header .wrapper{ max-width: 1020px;}

.project-title{ margin: 10px auto 25px; font-family: var(--font-display); font-variation-settings: "wdth" 100; font-optical-sizing: auto; font-size: 36px; line-height: 42px; font-weight: 700; font-style: italic; text-align: center; text-transform: none; letter-spacing: normal; color: var(--color-teal);}

.project-description p{ margin-top: 0; margin-bottom: 1em;}
.project-description p:last-child{ margin-bottom: 0;}

.project-meta{ display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 30px 0 0; padding: 20px 0 0; border-top: 1px solid var(--color-rule);}
.project-meta dt{ margin: 0 0 4px; font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase; color: var(--color-brown);}
.project-meta dd{ margin: 0; font-size: var(--fs-body); line-height: var(--lh-body);}

.project-detail{ margin-top: 30px;}
.project-detail h6{ margin: 0 0 6px;}
.project-detail p{ margin-top: 0; margin-bottom: .75em;}
.project-detail p:last-child{ margin-bottom: 0;}

.project-gallery-section{ padding: 0 0 40px;}

.project-gallery{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px;}
.project-gallery a{ display: block; position: relative; overflow: hidden; aspect-ratio: 3 / 2;}
.project-gallery img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform .35s;}
.project-gallery a:hover img{ opacity: .85; transform: scale(1.03);}

@media (min-width: 600px){
	.project-gallery{ grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 992px){
	.project-gallery{ grid-template-columns: repeat(4, 1fr);}
}

.project-return{ padding: 0 0 50px; text-align: center;}

.people-section{ padding: 30px 0 40px;}

.people-grid{ list-style: none; margin: 0; padding: 0; text-align: center;}

.person{ position: relative; display: block; margin: 0 auto 15px; padding-bottom: 20px; text-align: center; vertical-align: top;}

.person-link{ display: block; position: relative; margin: 0 auto 10px; max-width: 320px;}
.person-link img{ display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; opacity: .9; filter: grayscale(100%); transition: opacity .35s, filter .35s;}
.person-link:hover img,
.person-link:focus-visible img{ opacity: 1; filter: grayscale(0);}

.person .name_title{ font-family: var(--font-body); font-size: 20px; line-height: 24px; font-weight: 300; text-transform: uppercase; text-align: center; color: var(--color-blue);}
.person .name_title:after{ content: ""; display: block; width: 25%; height: 1px; margin: 10px auto; background: var(--color-terracotta);}
.person .subtitle{ font-size: 15px; line-height: 28px; font-style: italic; text-align: center; color: var(--color-taupe-dark);}

@media (min-width: 768px){
	.person{ display: inline-block; width: 29%; margin: 0 1.5% 30px; vertical-align: top;}
}
@media (min-width: 992px){
	.person{ width: 28%; margin: 0 2.5% 30px;}
}

.bio-sources{ display: none;}

.fancybox__content.bio-outer{ display: block; position: relative; width: 100%; max-width: 860px; padding: 15px 15px 30px; background: #f9f9f9; border-radius: 4px; box-shadow: 0 10px 25px rgba(0,0,0,.5);}

.bioWrap{ max-width: 800px; margin: 0 auto; padding: 5px; max-height: 70vh; overflow-y: auto;}
.bioWrap:after{ content: ""; display: table; clear: both;}

.bioWrap .image{ display: block; margin: 0 auto 20px; text-align: center;}
.bioWrap .image img{ display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%;}

.bioWrap h3{ margin: 0 0 15px; padding: 0; overflow: hidden; border-bottom: 1px solid var(--color-rule-light); font-family: var(--font-body); font-size: 2em; line-height: 1.1em; font-weight: 300; font-style: normal; text-align: center; text-transform: uppercase; color: var(--color-blue);}
.bioWrap h3:before, .bioWrap h3:after{ display: none;}
.bioWrap h5{ margin: 0 0 30px; font-size: 1em; font-weight: 700; font-style: italic; text-align: center; text-transform: none; color: var(--color-taupe-dark);}

.bioWrap .bio-copy p{ margin-top: 0; margin-bottom: 1em;}
.bioWrap .bio-copy p:last-child{ margin-bottom: 0;}

@media (min-width: 768px){
	.bioWrap .image{ float: left; width: 320px; margin: 0 30px 10px 0; text-align: left;}
	.bioWrap h5{ font-size: 1.15em;}
}

.bio-scroll-hint{ position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; margin: 0 80px; padding: 8px 10px; font-size: 10px; line-height: 14px; text-align: center; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-white); opacity: 0; pointer-events: none; transition: opacity .3s;
	background: linear-gradient(to right, rgba(186,177,170,0) 0%, var(--color-taupe) 20%, var(--color-taupe) 80%, rgba(186,177,170,0) 100%);}
.can-scroll .bio-scroll-hint{ opacity: 1;}

.fancybox__container .fancybox__caption{ max-width: 90vw; margin: 0 auto; padding: 4px 28px; background: rgba(0,0,0,.8); border-radius: 15px; font-family: var(--font-body); font-size: 13px; line-height: 24px; font-weight: 700; text-align: center; white-space: nowrap; color: var(--color-white);}

@media (max-width: 600px){
	.fancybox__container .fancybox__caption{ white-space: normal; border-radius: 12px;}
}

.fancybox__container .fancybox__content > .f-button.is-close-btn{ top: -19px; right: -19px; width: 38px; height: 38px; border-radius: 50%; background: var(--color-brown); color: var(--color-white); opacity: 1; transition: background .2s;}
.fancybox__container .fancybox__content > .f-button.is-close-btn:hover,
.fancybox__container .fancybox__content > .f-button.is-close-btn:focus-visible{ background: var(--color-terracotta); color: var(--color-white);}
.fancybox__container .fancybox__content > .f-button.is-close-btn svg{ width: 20px; height: 20px; stroke-width: 2.5;}

@media (min-width: 992px){
	.bioWrap .image{ width: 360px; margin: 0 50px 30px 0;}
}

.interior-section{ padding: 0 0 30px;}

.interior-columns{ display: flex; flex-wrap: wrap; margin: 0 -15px;}
.interior-col{ width: 100%; padding: 0 15px;}

@media (min-width: 768px){
	.interior-col{ width: 50%;}
}

.interior-col-left h1{ width: 100%; margin: 0 0 30px; padding: 10px 20px 20px; font-size: 64px; line-height: 68px; letter-spacing: -3px; color: var(--color-blue); text-align: center; text-transform: lowercase;}

@media (min-width: 768px){
	.interior-col-left h1{ text-align: right;}
}
@media (min-width: 992px){
	.interior-col-left h1{ font-size: 100px; line-height: 90px; letter-spacing: -5px;}
}

.interior-col p{ margin: 0 0 22px;}
.interior-col p:last-child{ margin-bottom: 0;}
.interior-col ul{ margin: 0 0 10px 18px; padding: 0; list-style: square;}
.interior-col li{ font-size: var(--fs-body); line-height: var(--lh-body);}

.interior-col h2{ margin: 1em 0 .25em;}

.detail-section{ padding: 0;}

.detail-section h3{ margin: 10px 0;}

.detail-intro{ margin: 0;}
.detail-intro p{ margin: 0 0 22.5px; font-size: var(--fs-body); line-height: var(--lh-body);}
.detail-footnote{ margin: 0; font-size: var(--fs-body); line-height: var(--lh-body);}

.detail-list{ clear: both; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; margin: 10px auto 50px; padding: 0; list-style: none;}
.detail-list li{ position: relative; width: 100%; margin: 20px auto; padding-bottom: 20px; text-align: center; border-bottom: 1px solid var(--color-cream);}
.detail-list h4{ position: relative; margin: 0 auto; padding: 0 0 10px; font-size: 25px; line-height: 50px; font-weight: 400; text-transform: uppercase; text-align: center; color: var(--color-taupe);}
.detail-list h4:after{ content: ""; display: block; width: 25%; height: 1px; margin: 10px auto 0; background: var(--color-terracotta);}
.detail-list p{ margin: 0; padding: 10px 20px; font-size: 16.5px; line-height: 26.4px; font-style: italic; text-align: center; color: var(--color-copy);}

@media (min-width: 600px){
	.detail-list li{ width: 49.5%; min-height: 150px; margin: 3% 0; padding: 3%; border-right: 1px solid var(--color-cream); border-bottom: 0;}
}
@media (min-width: 600px) and (max-width: 767px){
	.detail-list li:nth-child(2n){ border-right: 0;}
	.detail-list li:nth-child(n+3):before{ content: ""; position: absolute; top: -20px; left: 0; right: 0; width: 90%; height: 1px; margin: 0 auto; background: var(--color-cream);}
}

@media (min-width: 768px){
	.detail-list li{ width: 33%; margin: 0 auto 30px;}
	.detail-list li:nth-child(3n), .detail-list li:last-child{ border-right: 0;}
	.detail-list li:nth-child(n+4){ border-bottom: 0;}
	.detail-list li:nth-child(n+4):before{ content: ""; position: absolute; top: -30px; left: 0; right: 0; width: 90%; height: 1px; margin: 0 auto; background: var(--color-cream);}
}

.news-group{ margin: 0 0 30px;}
.news-group:last-child{ margin-bottom: 0;}
.news-group-heading{ margin: 0 0 22px;}

.news-list{ margin: 0; padding: 0;}
.news-list a{ text-decoration: none;}
.news-meta{ color: var(--color-copy);}

.news-group-bullets .news-list{ margin: 0 0 10px 18px; list-style: square;}
.news-group-bullets .news-list li{ font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-copy);}
.news-group-bullets .news-list a{ color: var(--color-blue);}

.news-group-rows .news-list{ margin: 0; list-style: none;}
.news-group-rows .news-list li{ padding: 10px 20px; border-bottom: 1px solid #ccc; font-size: var(--fs-body); line-height: var(--lh-body); transition: background .2s, color .2s;}
.news-group-rows .news-list li:hover{ background: #eee; color: var(--color-terracotta);}
.news-group-rows .news-list a{ display: block; font-style: italic; color: var(--color-text);}
.news-group-rows .news-list li:hover a{ color: var(--color-terracotta);}

.news-group-rows .news-meta{ font-size: inherit; line-height: inherit; color: inherit;}

.contact-details{ margin: 0 0 25px;}
.contact-details h4{ margin: 0 0 10px; font-size: 19.2px; line-height: 26.88px; font-weight: 400; color: var(--color-text);}
.contact-details p{ margin: 0;}

@media (min-width: 768px){
	.contact-details{ padding-right: 20px; text-align: right;}
}

.map-wrapper{ margin: 0 0 25px;}
.map-wrapper iframe{ display: block; width: 100%; height: 320px; border: 0;}
.map-wrapper-notice{ padding: 10px 15px; background: var(--color-cream); color: var(--color-terracotta); font-size: var(--fs-small);}

.contact-form .gform_wrapper{ margin: 0;}
.contact-form .gfield{ margin: 0 0 18px;}
.contact-form label{ display: block; margin: 0 0 4px; font-size: 13px; line-height: 20px; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-brown);}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{ width: 100%; padding: 10px 12px; border: 1px solid var(--color-rule); background: var(--color-white); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);}
.contact-form textarea{ min-height: 160px;}
.contact-form input:focus,
.contact-form textarea:focus{ outline: 2px solid var(--color-teal); outline-offset: 1px;}
.contact-form input[type="submit"]{ display: inline-block; width: auto; padding: 10px 20px; border: 0; background: var(--color-gold); color: var(--color-text); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); cursor: pointer;}
.contact-form input[type="submit"]:hover{ background: var(--color-terracotta); color: var(--color-white);}

.alignnone{ margin: 0 0 15px;}

.wp-caption{ max-width: 100%;}
.wp-caption-text{ margin: 6px 0 0; font-size: 13px; line-height: 20px; font-style: italic; text-align: center; color: var(--color-taupe-dark);}

@media (max-width: 599px){
	.alignleft, img.alignleft,
	.alignright, img.alignright{ float: none; margin: 15px 0;}
}

.testimonials{ padding: 20px 0 50px;}
.testimonial{ margin: 0 0 30px; padding: 0; border: 0;}
.testimonial:last-child{ margin-bottom: 0;}
.testimonial-quote{ margin: 0 0 22px; font-size: 18px; line-height: 28px; font-style: italic; color: var(--color-quote);}
.testimonial-quote:before{ content: "\201C";}
.testimonial-quote:after{ content: "\201D";}
.testimonial-source{ display: block; font-size: 18px; line-height: 28px; font-style: normal; color: var(--color-quote);}
.testimonial-source:before{ content: "-";}

.content p:first-child{ margin-top: 0;}
.content ul{ list-style: disc; margin: 15px 0 0 30px;}
.content ol{ margin: 15px 0 0 30px;}
.content img{ max-width: 100%; height: auto;}

.navigation{ padding: 0; text-align: center;}
.navigation ul{ list-style: none; margin: 0; padding: 0;}
.navigation li{ display: inline-block;}
.navigation li a, .navigation li span{ display: inline-block; padding: 6px 12px; text-decoration: none; color: var(--color-white); background-color: var(--color-taupe);}
.navigation li a:hover, .navigation li span.current{ background-color: var(--color-brown); color: var(--color-white);}
.navigation li span.dots{ background: none; color: var(--color-taupe-dark);}

.load-more-wrap{ text-align: center; margin-top: 30px;}
.load-more-btn{ padding: 12px 30px; cursor: pointer;}
.load-more-btn:disabled{ opacity: 0.6; cursor: default;}

.search-results .wrapper, .error404 .wrapper{ padding: 60px 0;}
.search-results .page-title, .error404 .page-title{ margin-bottom: 30px;}
.search-results article{ margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--color-cream);}
.search-results article:first-child{ border-top: 0; padding-top: 0; margin-top: 0;}
.search-results .entry{ margin-top: 10px;}
.search-form{ display: flex; gap: 8px; margin-top: 20px;}
.search-input{ flex: 1; padding: 10px 14px; border: 1px solid var(--color-rule); border-radius: 0; font-size: 1rem;}
.search-submit{ padding: 10px 20px; cursor: pointer;}

.footer{ background: var(--color-white); font-size: var(--fs-small); line-height: 16px; text-align: center; padding: 30px 15px;}
.footer-social{ margin: 0 auto 20px;}
.footer-social ul{ margin: 0 auto; padding: 0; display: block; list-style: none;}
.footer-social li{ list-style: none; margin: 0; display: inline-block; vertical-align: top; padding: 5px; width: 38px; box-sizing: border-box;}
.footer-social a{ display: block; text-decoration: none;}
.footer-social img{ width: 28px; height: 28px; opacity: .85;}
.footer-social a:hover img, .footer-social a:focus img{ opacity: 1;}

.footer-address{ color: var(--color-taupe-dark); text-transform: uppercase; letter-spacing: var(--ls-wider); padding: 0; margin: 0;}
.footer-address strong{ color: var(--color-blue); display: block; font-size: 1.2em; margin-bottom: 10px;}
.footer-address a{ text-decoration: none;}
.footer-address a:hover strong, .footer-address a:focus strong{ color: var(--color-terracotta);}
.footer-address:after{ content: ""; display: block; width: 25%; height: 1px; background: var(--color-teal-light); margin: 20px auto; padding: 0;}
.copyright{ font-size: var(--fs-tiny); line-height: 15px; color: var(--color-taupe-dark); text-transform: uppercase; letter-spacing: var(--ls-widest); margin: 0 auto; padding: 0 15px;}

.error404 .content{ padding: 60px 0 100px; text-align: center;}

@media (min-width: 992px) {
	.brandname{ font-size: 24px; letter-spacing: .07em;}
}

@media (max-width: 900px) {
	:root{ --fs-hero: 72px; --fs-h1: 40px; --lh-h1: 44px; --fs-h3: 28px; --lh-h3: 32px;}
}

@media (max-width: 991px) {
	.nav > ul > li > a{ padding: 10px 10px 10px 5px; font-size: 14px;}
}

@media (max-width: 767px) {
	.nav{ display: none;}
	.nav-toggle{ display: block;}
	.brandname{ display: none;}

	.nav-collapse{ display: block; max-height: 0; overflow: hidden; background: var(--color-teal-light); color: var(--color-white); transition: max-height .35s ease;}
	.nav-collapse.is-open{ max-height: 340px; overflow-y: auto;}

	.nav-collapse ul{ float: none; margin: 0; padding: 0; list-style: none;}
	.nav-collapse li{ position: relative; float: none; width: 100%;}
	.nav-collapse a{ display: block; padding: 10px; font-size: 14px; line-height: 24px; letter-spacing: normal; text-transform: uppercase; color: var(--color-white);}
	.nav-collapse a:hover, .nav-collapse a:focus{ color: var(--color-white); text-decoration: none;}
	.nav-collapse li.is-open > a{ background: var(--color-taupe-light-active);}

	.nav-collapse .menu-item-has-children > a:after{
		content: ""; display: inline-block; width: 0; height: 0; margin-left: 2px;
		vertical-align: middle;
		border-top: 4px dashed currentColor;
		border-right: 4px solid transparent;
		border-left: 4px solid transparent;
	}


	.nav-collapse ul ul{ display: none; padding: 10px 0; background: var(--color-teal-dark);}
	.nav-collapse li.is-open > ul{ display: block;}
	.nav-collapse ul ul a{ padding: 10px 15px 10px 25px; color: #eee;}
}

@media (max-width: 600px) {
	:root{ --fs-hero: 52px; --fs-h1: 32px; --lh-h1: 36px;}
}

@media print {
	.header, .footer, .nav, .search-form{ display: none;}
	body{ font-size: 12pt; color: #000;}
	a{ color: #000; text-decoration: underline;}
	a[href]::after{ content: " (" attr(href) ")";}
}