@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

/* :root {

	--green: #105742;
	--grey: #434343;
	--black: #000000;
	--orange:#E85A00;
	--light-beige:#F6F0ED;
	--yellow: #FFD200;
	--white: #FFFFFF;

	--ws-gap: 1.5em;
	--ws-transition: all .3s ease;

} */

html {
	scroll-padding-top: 8.375em; /* Scroll offset for sticky header */
}



/* HEADINGS ------------------------------ */
h1 {
	font-size: 2.5em;
}

h2 {
	font-size: 2.25em;
}

h3 {
	font-size: 2em;
}

h4, th {
	font-size: 2em;
}

h5 {
	font-size: 1.75em;
	/* margin-block: unset; */
}

h6 {
	font-size: 1.0em;
}

.intro {
	font-size: 1.25em;
}

.highlight-2 h2,
.highlight-2 h3 {
	font-size: 2rem;
}


/* HEADER ------------------------------*/
body>header {
  position: fixed;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--ws-transition);
}

body.scroll>header {
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  background-color: var(--green);
}

body.management>header {
	top: 35px;
}

#brand {
	display: block;
	margin-left: 1rem;
	/* max-width: 12em; */
	padding-block: 1.21875em;
}

.footer-info #brand {
	padding: 0;
	margin: 0;
	margin-bottom: .5rem;
	/* max-width: 14em; */
}

.footer-info  {
	margin: unset;
}

#brand img {
	display: block;
	width: auto;
}

.scroll>header #brand img {
	height: 70px;
}

nav ul {
	margin: 0;
}

#mainnav {
	position: relative;
	background-color: rgba(255, 255, 255, 0.95);
	overflow: visible;
	transform: skewX(-10deg) translateX(10px);
	transform-origin: left center;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

#mainnav ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

#mainnav>ul {
  display: flex;
  padding: 0 1.5em 0 1em;
}

#mainnav>ul>li {
  transform: skewX(10deg);
}

#mainnav>ul>li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: .1em;
  padding-right: .3125em;
}

#mainnav>ul>li>a {
  color: var(--green);
  padding-right: 0.3125em;
	font-size: 1.25em;
	font-weight: 600;
  font-style: italic;
}

#mainnav>ul>li:has(>button)>a {
  padding-right: 0;
}

#mainnav li {
  position: relative;
}

#mainnav a {

  display: inline-block;
  line-height: 1;
  padding: 0.85rem 1em;
  text-decoration: none;
}

#mainnav>ul>li:before {
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	transform: skewX(-10deg);
	border-radius: 8px;
	transition: .3s;
}

#mainnav>ul>li:focus-within::before,
#mainnav>ul>li:hover::before {
	background: var(--green);
}

#mainnav>ul>li:focus-within>a,
#mainnav>ul>li:hover>a {
	color: var(--white);
}

/* Accessible dropdowns */
#mainnav>ul>li>button {
	font-size: 1rem;
	height: 1.5rem;
	padding: 0.25rem;
	margin: 0;
	transform: translateY(2px);
	width: 1.5rem;
}

#mainnav>ul>li>button:after {
		display: block;
		content: '';
		background: var(--green);
		border: 0;
		height: 0.75rem;
		mask-image: url('/images/icons/misc/down-arrow.svg');
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
		padding: 0;
		pointer-events: none;
		width: 0.75rem;
		opacity: .6;
}

#mainnav>ul>li.on::before {
	background: var(--yellow);
}

#mainnav>ul>li>button:before {
	display: none;
}

#mainnav>ul>li.on>button:after {
  opacity: 1;
}

#mainnav>ul>li.on:hover::before,
#mainnav>ul>li.on:focus-within::before {
	background: var(--green);
}

#mainnav>ul>li.on:hover::before {
	background: var(--green);
}

#mainnav>ul>li:focus-within>button:after,
#mainnav>ul>li:hover>button:after {
	opacity: 1;
  background: var(--white);
}


/* Drop-down menu */
#mainnav li ul {
  background: #fff;
	height: auto !important;
  left:0;
  opacity: 0;
  padding: 1em .5em;
  position: absolute;
  top: -200vh;
  width: 265px;
  visibility: hidden;
	border-radius: 5px;
}

/* fade out */
#mainnav li:not(.expand) ul {
	transition:
		opacity .2s ease-out 0.25s,
		visibility .2s ease-out 0.25s,
		top 0s linear 0.7s;
}

#mainnav li:hover ul,
#mainnav>ul>li.tapped > ul,
#mainnav>ul>li>a:focus + ul,
#mainnav>ul>li.expand>ul {
  opacity: 1;
  top: calc(100% + .2em);
	visibility: visible;
}

/* fade in */
#mainnav>ul>li:is(:hover, .expand)>ul {
    transition:
		opacity .2s ease-in .3s,
		visibility .2s ease-in 0s,
        top 0s linear .3s;
}

#mainnav>ul>li:last-child ul {
	right: 0;
}

#mainnav li ul li {
    display: block;
    width: 100%;
}

#mainnav ul li ul li a {
    background: none;
    color: var(--black);
		font-size: 1.125em;
}

#mainnav li ul li a {
  display: block;
  font-size: .9em;
  line-height: 1.1em;
  padding: .3em .5em;
  text-align: left;
  width: 100%;
	border-radius: 5px;
}

#mainnav li ul li a:is(:hover, :focus) {
	background: var(--yellow);
	color: #000;
}

#mainnav li ul ul {
	display: none;
}


/* ANCILLARY ----------------------------- */
#ancillary {
  font-size: .8em;
  position: absolute;
  right: 0;
  top: 0;
}

#ancillary ul {
	display: inline;
}

#ancillary li {
	display: inline;
}

#ancillary a {
  color: #999;
  display: inline-block;
  padding: .5em .75em;
  text-decoration: none;
}

#ancillary li.on a,
#ancillary a:is(:hover, :focus) {
	color: #666;
}

#ancillary li.on a {
	color: #666;
  text-decoration: none;
}

#ancillary .search {
	display: inline;
}

#ancillary .search input {
	display: inline-block;
}


/* mini-cart */
#ancillary .small-cart {
	display: inline-block;
}

#ancillary #cart-popover {
  background: #FFF;
  box-shadow: 0 0 10px rgba(0,0,0,0.95);
  height: auto;
  display: block;
	opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  transition: ease all 200ms;
  width: 20rem;
  z-index: -1;
}

#ancillary .small-cart.on #cart-popover,
#ancillary .small-cart:hover #cart-popover {
	opacity: 1;
	pointer-events: all;
  z-index: 10;
}

#ancillary #cart-popover:before {
  border-style: solid;
	border-width: 0 10px 8px 10px;
	border-color: transparent transparent #FFF transparent;
	content: '';
  display: block;
  height: 0;
	position: absolute;
  right: 3rem;
	top: -0.5rem;
	width: 0;
}

#ancillary #cart-popover .no-items {
	background: #FFF;
  color: #000;
  font-size: 1em;
	padding: 1em;
	text-align: center;
}

#ancillary #cart-popover .no-items .button {
  color: #FFF;
	display: block;
  margin-top: 0.75rem;
	text-align: center;
}

#ancillary #cart-popover .products {
	overflow: auto;
  max-height: 21.5em;
	padding: 0.25em 1em;
}

#ancillary #cart-popover .products > p {
  font-size: 1rem;
	text-align: center;
}

#ancillary #cart-popover .product {
  display: block;
  height: auto;
  line-height: 1rem;
  overflow: auto;
  padding: 1.25em 1em;
	position: relative;
	text-align: left;
  text-transform: inherit;
}

#ancillary #cart-popover .product + .product {
	border-top: 1px dashed #D1D1D1;
}

#ancillary #cart-popover .product-image {
	position: relative;
	float: left;
	-webkit-transition: ease all 200ms;
	transition: ease all 200ms;
	width: 5em;
}

#ancillary #cart-popover .product-image img {
	display: block;
	max-width: 100%;
	height: auto
}

#ancillary #cart-popover .product-details {
	overflow: auto;
	float: right;
	width: calc(100% - 6em)
}

#ancillary #cart-popover .product-name {
  color: #8A1538;
	font-size: 1.125rem;
  font-weight: 600;
	line-height: 1em;
	margin-bottom: 0.25em;
	white-space: initial;
}

#ancillary #cart-popover .price,
#ancillary #cart-popover .quantity {
	color: #666;
  font-size: 0.875rem;
	margin-bottom: 0.5em;
}

#ancillary #cart-popover .product:hover .product-name {
	color: #007DB5;
}

#ancillary #cart-popover .cart-bottom {
  background: #032839;
  color: #fff;
  font-family: "Gotham A", "Gotham B", sans-serif;
	padding: 1rem 1rem 2rem;
	text-align: center;
  text-transform: capitalize;
}

#ancillary #cart-popover .cart-bottom .cart-total {
  margin: 0 0 1em;
	font-size: 1rem;
}

#ancillary #cart-popover .cart-bottom .checkout .button {
  color: #FFF;
  font-size: 1rem;
	height: auto;
	line-height: 1em;
	padding: 0.7em 2em;
	text-transform: capitalize;
}

/* mobile */
#mobilenav, .toggleNav {
	visibility: hidden;
  display: none;
}

/* MAIN ------------------------------ */
main>div>aside {
  float: left;
	overflow: hidden;
  padding-right: 2em;
  width: 16rem;
}

main>div>#content {
	float: right;
	width: calc(100% - 16rem);
	padding: 2em 0 8em;
	overflow: hidden;
	/* min-height: 600px; */
	position: relative
}

body.fullWidth main>div>#content {
  float: none;
	margin: 0 auto;
  width: 100%;
}


.photoright {
	margin: 0 0 3em 4em;
}

.photoleft {
	margin: 0 4em 3em 0;
}

.wsManagementLogin td:first-child {
  text-align: right;
	width: 40%;
}



#popover .close:is(:hover, :focus) {
	opacity: 0.5;
}

.shareIcons a:is(:hover, :focus) {
	background-color: var(--link-color-hover);
}

.twoCol, .threeCol, .resCol {
	/* column-rule: 1px outset rgba(0,0,0,.15); */
}

.twoCol {
	columns: 2;
}

.threeCol {
	columns: 3;
}

.resCol {
	columns: auto;
	column-width: 13em;
}

.formTable td {
	width: 50%
}

.formTable td {
	padding: 0 0 .5em .5em
}

.formTable td:first-child {
	padding: 0 .5em .5em 0
}

.formTable td[colspan="2"] {
	padding-right: 0
}

.formTable.formLoose,
.formTable.formLoose td {
	width: auto
}


/* Contact Form - table removed ----- */
.form-flex .half {
	width: calc(50% - .5em); /* Full on mobile */
}

.form-flex .third {
	width: calc(33.33% - .5em); /* Full on mobile */
}

.form-flex .quarter {
	width: calc(25% - .5em); /* Half on mobile */
}

/* PLAY / PAUSE BUTTONS ------------------------------ */
button.play-pause:is(:hover,:focus) {
	background: var(--yellow);
}


/* LIGHTBOX GALLERY WYSIWYG TEMPLATE ------------------------------ */

ul.lightbox-gallery {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	padding-inline: 0.625rem;
}

ul.lightbox-gallery li {
	margin-bottom: 1rem;
	width: calc(33.33% - 1rem);
}

ul.lightbox-gallery.two {
	column-count: 2;
}

ul.lightbox-gallery>li>button:is(:hover, :focus-visible) img {
	transform: scale(1.05);
}

.lightbox button:is(:hover,:focus-visible) {
	background: #FFF;
	color: var(--green);
}

.lightbox-controls button:is(:hover,:focus-visible):after {
	background: var(--green);
}


.cta {
	display: flex;
	align-items: center;
	flex-direction: column;
	align-items: center;
}

.cta-text {
	margin: 0 auto;
}

.cta-text h2 {
	font-size: 2.5rem;
}

.home .cta-text h2 {
	text-transform: uppercase;
}

/* FOOTER ------------------------------ */
body>footer .fatFooter {
	display: flex;
	justify-content: space-between;
}

.fatFooter>nav {
	display: flex;
	flex-direction: column;
}

.fatFooter>nav>ul {
	width: 25%;
}

#web-solutions {
	float: right;
	margin-left: 11px;
}

body>footer .wrap nav span:before {
	content: "|";
	margin: 0 0.5em
}



/* HERO ------------------------------ */
.hero-content {
	position: absolute;
	bottom: clamp(4.75em, -1.5em + 13.33vw, 8.5em);
	left: 0;
	z-index: 1;
	padding: 0 1rem;
	width: 100%;
	background-color: transparent;
}

.hero-content h1 {
	font-size: clamp(2em, .75em + 2.67vw, 2.75em);
}

.hero-content h1>span {
  font-size: .54em;
}

.hero-video button.play-pause {
	bottom: clamp(4rem, -1.8333rem + 12.44vw, 7.5rem);
}

button.play-pause:is(:hover,:focus) {
	background: var(--yellow);
}


/* CALLOUTS ------------------------------ */
.callouts .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

.callouts a {
	width: calc(50% - 2rem);
	margin-bottom: 0;
}

.home .callouts:before {
	aspect-ratio: 1400 / 98;
	background: linear-gradient( 180deg ,rgba(0, 88, 71, 0.8) 0%, rgba(0, 88, 71, 1) 99%, rgba(0, 88, 71, 1) 100% );
	content: '';
	display: block;
	left: 0;
	mask-image: url('/images/jagged-edge-tall.svg');
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: cover;
	position: absolute;
	top: 0;
	transform: translateY(calc(-100% + 2px));
	width: 100%;
}

.pageHeader.portfolio-header:before {
		display: none;
}

.pageHeader.portfolio-header.no-media .portfolio-header-right {
		padding-block: 9.375rem 6.25rem;
}

.pageHeader.portfolio-header.no-media .portfolio-header-right > * {
		max-width: calc(74rem);
		margin-inline: auto;
}

.pageHeader.portfolio-header :is(img, video) {
	height: 100%;
	height: 600px;
}

.portfolio-header:not(.no-media) .portfolio-header-right:before  {
  content: "";
  position: absolute;
  left: -80px;
  top: 0;
  bottom: 0;
  width: 100%;
  background: inherit;
  transform: skewX(-12deg);
  transform-origin: left;
}


.projects__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr); /* two cards side-by-side */
}

.cta {
    flex-direction: row;
    gap: 2em;
    /* justify-content: space-between; */
}

.cta-images {
    align-items: flex-start;
    display: flex;
	height: calc(100% + 10em);
    justify-content: center;
    margin: -10em 0 0;
    position: relative;
    width: 40%;
}

.cta-images figure:first-child,
.cta-images figure:last-child {
    background: #fff;
    box-shadow: 0 8px 6px 4px rgba(0, 0, 0, 0.15) , 0 -12px 14px 0 inset rgba(240, 235, 233, 1);
    margin: 0;
    padding: 3% 3% 6%;
}

.cta-images figure:before {
    display: none;
}

.cta-images figure:first-child {
    width: 70%;
}

.cta-images figure:first-child img {
    margin: 0;
}

.cta-images figure:last-child {
    bottom: 50%;
    position: absolute;
    transform: rotate(4deg) translate(100%, 100%);
    width: 45%;
}

.cta-images figure:last-child img {
    margin: 0;
}

.cta-text {
	margin: 0;
	padding: 5.75em 1.25em 4em 8%;
	width: 50%;
}

.cta-text .inner-wrap {
	max-width: 34.375em;
}

@media screen and (max-width: 1400px) {
	/* .cta-images figure:last-child {
		max-width: 50%;
	} */
}

@media screen and (min-width: 1000px) {
	.pageHeader.portfolio-header:not(.no-media) {
		display: flex;
		flex-wrap: nowrap;
	}

	.pageHeader.portfolio-header:not(.no-media) .portfolio-header-left {
		width: 55%;
	}

	.pageHeader.portfolio-header:not(.no-media) .portfolio-header-right {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 45%;
		flex-shrink: 0;
	}

	.project-details-description {
		display: flex;
		align-items: flex-start;
	}

	.project-details-credit {
		width: 300px;
		flex-shrink: 0;
		margin-left: 100px;
	}

	.project__images img {
		height: 100%;
	}

	.project__content {
		padding: 1.75em 0.875em 0 0;
	}

	.home .callouts a {
		width: calc(25% - 2rem);
	}

	.interior .callouts a {
		width: calc(33% - 2rem);
	}

	.project {
		display: grid;
		grid-template-columns: 215px calc(calc(100% - 215px) - 1.75rem);
		gap: 1.75em;
	}

	.home .project__images {
		grid-template-columns: none;
		/* grid-template-rows: 1.5fr 1fr; */
	}

	.home .project__images figure:first-child img {
		aspect-ratio: 215 / 247;
	}

	.home .project__images figure:last-child img {
		aspect-ratio: 215 / 173;
	}

	.portfolio-header .slider-controls {
		bottom: 70px;
	}
}

@media screen and (min-width: 1200px) {
	.home .cta-text {
		max-width: 750px;
	}
}