*{	margin: 0;	padding: 0;	outline-style: none;	outline-width: 0;	-webkit-text-size-adjust: 100%;	-webkit-tap-highlight-color: rgba(0,0,0,0);}html, body{	position: relative;	background-color: #f0f0f0;	color: #333333;	height: 100%;	font-size: 16px;	font-family: 'Syne', sans-serif;	scroll-behavior: smooth;}body.menu-open {	overflow: hidden;}.skip-link {  background: #fff;  color: black;  font-weight: 700;  margin-left: 20px;  margin-top: 80px;  width: calc(100vw - 40px);  padding: 14px;  border-radius: 6px;  position: absolute;  display: block;  transform: translateY(-180px);  transition: transform 0.3s;  box-sizing: border-box;  text-decoration: none;}.skip-link:focus {  transform: translateY(0px);}header {	background-color: rgba(240,240,240,0.99);	width: 100%;	height: 60px;	position: fixed;	top: 0;	left: 0;	z-index: 500;	display: flex;	font-family: 'Roboto', sans-serif;	transition: 0.3s;}.dark header, .menu-open header {	background-color: rgba(240,240,240,0);}/*.dark .header-B, .menu-open .header-B, .dark .header-A, .menu-open .header-A  {	opacity: 0;}*/.menu-open .header-A  {	opacity: 0;}header::after {	content: "";	position: absolute;	display: block;	bottom: 0px;	left: 30px;	right: 30px;	height: 0.5px;	background: rgba(0,0,0,0.3);	z-index: 99999;}.dark header::after {	background: rgba(0,0,0,0);}header div {	height: 60px;	display: flex;	align-items: center;}.header-A {	margin-right: auto;	letter-spacing: 0.15em;	text-transform: uppercase;	font-size: 11px;	padding-left: 80px;	font-weight: 700;	transition: opacity 0.3s;}.header-B {	margin-left: auto;	font-weight: 400;	padding-right: 20px;	transition: opacity 0.3s;}.header-B a {	text-decoration: none;	color: #000;	font-size: 13px;	letter-spacing: 0.05em;	background-repeat: no-repeat;	background-position: center;	margin-right: 10px;	margin-left: 10px;	width: 22px;	height: 22px;}.header-phone, .contact-phone {	background-image: url(../imgs/icon-phone.svg);	background-size: 16px 16px;}.header-email, .contact-email {	background-image: url(../imgs/icon-envelope.svg);	background-size: 17px 17px;}.header-instagram, .contact-instagram {	background-image: url(../imgs/icon-instagram.svg);	background-size: 19px 19px;}.header-houzz, .contact-houzz {	background-image: url(../imgs/icon-houzz.svg);	background-size: 18px 18px;}.dark .header-phone, .menu-open .header-phone {	background-image: url(../imgs/icon-phone-white.svg);}.dark .header-email, .menu-open .header-email {	background-image: url(../imgs/icon-envelope-white.svg);}.dark .header-instagram, .menu-open .header-instagram {	background-image: url(../imgs/icon-instagram-white.svg);}.dark .header-houzz, .menu-open .header-houzz {	background-image: url(../imgs/icon-houzz-white.svg);}.nav-up {	transform: translateY(-60px);}.menu-wrapper {	opacity: 0;	pointer-events: none;	position: fixed;	width: 100%;	height: 100%;	z-index: 200;	background: rgba(29,25,16,0.97);	top: 0;	left: 0;	box-sizing: border-box;	transition: opacity 0.3s;	padding-left: 30px;	padding-right: 30px;	padding-top: 80px;}.menu-wrapper img {	margin-bottom: 30px !important;}.menu-wrapper a:not(.menu-logo) {	display: block;	margin-top: 12px;	margin-bottom: 12px;	text-transform: uppercase;	font-size: 11px;	font-weight: 500;	font-family: 'Roboto', sans-serif;	color: #fff;	letter-spacing: 0.3em;	text-decoration: none;	position: relative;	padding-bottom: 12px;}.menu-wrapper a::after {	display: block;	content: "";	position: absolute;	bottom: 0px;	left: 0px;	width: 50px;	height: 1px;	background: rgba(255,255,255,0.2);}.menu-wrapper a:last-child::after {	display: none;}.menu-wrapper.is-active {	pointer-events: auto;	opacity: 1;}h1 {	margin-bottom: 80px;	transition: opacity 1s;	transition-delay: 4s;	letter-spacing: 0.35em;	text-transform: uppercase;	text-align: center;	font-size: 11px;	font-weight: 500;	font-family: 'Roboto', sans-serif;	color: #fff;}h1:not(.main-intro h1) {	margin-top: auto;}h1 span {	display: block;	font-size: 40px;	font-family: 'Unica One', sans-serif;	font-weight: 400;	margin-bottom: 4px;	letter-spacing: 0.06em;}.contact-details {	font-size: 14px;	font-weight: 500;	font-family: 'Roboto', sans-serif;}.contact-details img {	width: 220px;	display: block;	margin-bottom: 10px;	margin-top: 30px;}.contact-details a {	display: block;	padding-top: 1px;	padding-bottom: 1px;	margin-top: 6px;	margin-bottom: 6px;	text-decoration: none;	background-repeat: no-repeat;	background-position: center left;	padding-left: 25px;}h2 {	font-size: 28px;	font-family: 'Unica One', sans-serif;	font-weight: 400;	letter-spacing: 0.06em;	text-transform: uppercase;	text-align: center;	margin-top: 30px;	margin-bottom: 30px;	margin-left: auto;	margin-right: auto;	max-width: 700px;	position: relative;	padding-top: 24px;	padding-bottom: 24px;	line-height: 1.1;}.alt-h2 {	display: none;}.wide-h2 {	display: none;}.info-page-text h2 {	text-align: left;}h2::before, h2::after {	content: "";	display: block;	position: absolute;	width: 100px;	height: 2px;	background: rgba(0,0,0,0.8);	left: 50%;	margin-left: -50px;}.info-page-text h2::before, .info-page-text h2::after {	left: 0%;	margin-left: 0px;}h2::before {	top: 0px;}h2::after {	bottom: 0px;}.process-wrapper h2 {	margin-bottom: 0px;	padding-bottom: 10px;}.process-wrapper h2::after {	display: none;}.copy-wrapper, .info-page-wrapper {	position: relative;	margin-left: auto;	margin-right: auto;	max-width: 1140px;	padding-left: 30px;	padding-right: 30px;	margin-top: 50px;	margin-bottom: 50px;}.process-wrapper {	max-width: 780px;}.info-page-wrapper {	margin-top: 80px;}.copy, .info-page-text {	position: relative;	font-size: 15px;	line-height: 1.4;	margin-top: 20px;	}.copy {	column-count: 2;	column-gap: 54px;	column-rule-style: solid;	column-rule-width: 0.5px;	column-rule-color: rgba(0,0,0,0.3);	margin-bottom: 20px;}.process-wrapper .copy {	column-count: 1;}.info-page-text {	width: 100%;	display: inline-block;	vertical-align: top;	box-sizing: border-box;}.info-page-image {	width: 100%;	display: inline-block;	vertical-align: top;	margin-top: 10px;	box-sizing: border-box;	/*border-right: 0.5px solid rgba(0,0,0,0.3);*/}.info-page-image img {	width: 100%;	display: block;}.copy p, .info-page-text p {	margin-bottom: 20px;	margin-top: 20px;	/*break-inside: avoid;*/	/*text-align: justify;*/}.avoid-break {	break-inside: avoid;	break-inside: avoid-column;}	.copy p:first-child {	margin-top: 0px;}p a {	color: #000;}.credit {	font-size: 14px;	font-weight: 500;	font-family: 'Roboto', sans-serif;}.credit span {	display: block;	margin-top: 5px;}.read-more {	display: none;	cursor: pointer;	padding: 20px;	padding-top: 12px;	padding-bottom: 12px;	font-size: 11px;	font-weight: 500;	font-family: 'Roboto', sans-serif;	letter-spacing: 0.15em;	text-align: center;	border-top: 0.5px solid rgba(0,0,0,0.3);	border-bottom: 0.5px solid rgba(0,0,0,0.3);}.gallery-wrapper {	position: sticky;	top: 0;	padding: 30px;	height: 100vh;	box-sizing: border-box;}.home-gallery-wrapper {	padding: 0px;}.swiper, .swiper-wrapper, .swiper-slide {	height: 100%;	box-sizing: border-box;}.swiper-slide {	/*width: 100% !important;*/}.swiper {	position: relative;}.swiper-wrapper {		box-sizing: border-box;}.continue {  position: absolute;  bottom: 0;  left: 50%;  width: 42px;  height: 42px;  margin-left: -21px;  z-index: 10;  background: #f0f0f0;  border-radius: 50%;  transition: opacity 0.3s;}.leaving .continue {	opacity: 0;}.continue span {	display: block;	position: relative;	width: 42px; 	height: 42px;  	background-image: url(../imgs/down-arrow.png);  	background-size: 30px 30px;  	background-position: center;  	background-repeat: no-repeat;}.intro-continue {	background: none;}.intro-continue span {	background-image: url(../imgs/down-arrow-light.png);}@keyframes bob {  0% {    -webkit-transform: translateY(0px);    transform: translateY(0px);  }  50% {    -webkit-transform: translateY(4px);    transform: translateY(4px);  }  100% {    -webkit-transform: translateY(0px);    transform: translateY(0px);  }}.bob { 	animation-name: bob; 	animation-duration: 2s; 	animation-delay: 3s; 	animation-timing-function: ease-in-out; 	animation-iteration-count: infinite;}.swiper-pagination {	position: absolute;  	bottom: 18px; 	right: 18px;  	width: 42px;  	height: 42px;	z-index: 150;  	border-radius: 50%;  	left: auto;  	font-size: 11px;	font-weight: 500;	line-height: 42px;	text-align: center;	background: rgba(0,0,0,0.75);	color: white;	opacity: 0;	transition: opacity 0.6s;}.no-overlay .swiper-pagination {	opacity: 1;}.engage .swiper-pagination {	opacity: 1;}.swiper-button-prev, .swiper-button-next {  position: absolute;  top: 50%;  width: 42px;  height: 42px;  margin-top: -21px;  z-index: 10;  cursor: pointer;  display: flex;  align-items: center;  justify-content: center;  color: black;  background: #f0f0f0;  border-radius: 50%;  background-image: url(../imgs/side-arrow.png);  background-size: 30px 30px;  background-position: center;  background-repeat: no-repeat;}.swiper-button-prev::after, .swiper-button-next::after {	content: "";}.swiper-button-prev {	left: -0px;	transform: scaleX(-1);}.swiper-button-next {	right: 0px;}	.swiper:not(.no-overlay)::after {	content: "";	position: absolute;	display: block;	bottom: 0;	left: 0;	width: 100%;	height: 50%;	min-height: 300px;	background: linear-gradient(0deg, rgba(36,36,31,0.798739564185049) 0%, rgba(36,36,31,0.8015406846332283) 20%, rgba(36,36,31,0) 100%);	pointer-events: none;	z-index: 100;	transition: opacity 1s;}.vimeo-wrapper::after {	content: "";	position: absolute;	display: block;	top: 0;	left: 0;	width: 100%;	height: 260px;	background: linear-gradient(180deg, rgba(36,36,31,0.4) 0%, rgba(36,36,31,0.4) 20%, rgba(36,36,31,0) 100%);	pointer-events: none;	z-index: 100;	transition: opacity 1s;}.vimeo-wrapper::before {	content: "";	position: absolute;	display: block;	top: 0;	left: 0;	width: 100%;	height: 100%;	background-image: url(../imgs/overlay.png);	background-size: 2px 2px;	pointer-events: none;	z-index: 105;	opacity: 0.4;}.engage .swiper::after {	opacity: 0;}.caption {	position: absolute;	bottom: 0;	left: 0;	text-transform: uppercase;	font-size: 11px;	font-weight: 500;	font-family: 'Roboto', sans-serif;	background-color: #f0f0f0;	letter-spacing: 0.1em;	padding-top: 8px; 	padding-right: 10px;	padding-left: 8px;	border-top-right-radius: 4px;}.project-title-wrapper {	position: relative;	margin-top: -100vh;	z-index: 50;	pointer-events: none;}.project-title {	position: sticky;	top: 0;	height: 100vh;	display: flex;	flex-direction: column;	justify-content: center;	transition: opacity 1s;	box-sizing: border-box;	padding-left: 30px;	padding-right: 30px;}.project-title img, .menu-wrapper img {	margin-bottom: 8px;	box-sizing: border-box;	max-width: 460px;	margin-left: auto;	margin-right: auto;}.main-intro .project-title {	display: block;	padding-left: 30px;	padding-right: 30px;	padding-top: 80px;}.main-intro h1 {	text-align: left;}	.engage .project-title {	opacity: 0;}.scroll-extend {	position: relative;	height: 75vh;	pointer-events: none;}.scroll-extend-A {	position: relative;	height: 75vh;	pointer-events: none;}.scroll-extend-B {	position: relative;	height: 75vh;	pointer-events: none;}.intro-scroll-extend {	position: relative;	height: 20vh;	pointer-events: none;}.swiper-slide img {	width: 100%;	height: 100%;	object-fit: cover;	display: block;}.image-top img {	object-position: top;}.image-bottom img {	object-position: bottom;}.image-contain img {	object-fit: contain !important;}.white {	background: #fff;}.padded {	padding: 30px;}	.intro-title {	position: absolute;	top: 0;	left: 0;	z-index: 100;	width: 100%;	height: 100%;	text-align: center;	padding-left: 5vw;	padding-right: 5vw;	box-sizing: border-box;	opacity: 1;	transition: opacity 0.8s;	pointer-events: none;	display: flex;	transition: opacity 1s;}.intro-image {	width: 100%;	position: relative;	display: block;}.vimeo-wrapper {	position: relative;	position: -webkit-sticky;	position: sticky;	width: 100%;	top: 0;	left: 0;	width: 100%;	height: 100vh;	z-index: -1;	pointer-events: none;	overflow: hidden;	background: rgba(0,0,0,1);}.vimeo-wrapper iframe {	width: 100vw;	height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */	min-height: 100vh;	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */	position: absolute;	top: 50%;	left: 50%;	transform: translate(-50%, -50%);}.video-load {	height: 100%;	width: 100%;	position: absolute;	top: 0px;	left: 0px;	z-index: 5;	/*	background-image: url(../imgs/video-holding.jpg);	background-position: cover;	*/	background: rgba(38,38,38,1);	opacity: 1;	transition: 0.5s;	transition-delay: 1s;}.video-load .swiper-lazy-preloader {	animation: swiper-preloader-spin 1s infinite linear;}	.video-loaded .video-load {	opacity: 0;}footer {	margin-left: auto;	margin-right: auto;	border-top: 1px solid rgba(0,0,0,0.8);	padding-top: 40px;	padding-bottom: 10px;	margin-top: 70px;	text-align: center;	max-width: 1140px;	box-sizing: border-box;	font-family: sans-serif;	font-size: 10px;}footer img {	height: 60px;	margin-left: 10px;	margin-right: 10px;}footer p {	margin-top: 20px;	margin-bottom: 12px;}@media (max-aspect-ratio: 1/1) and (max-width: 700px) {  .read-more {	display: block;	cursor: pointer;	padding: 20px;	padding-top: 12px;	padding-bottom: 12px;	font-size: 11px;	font-weight: 500;	font-family: 'Roboto', sans-serif;	letter-spacing: 0.15em;	text-align: center;	border-top: 0.5px solid rgba(0,0,0,0.3);	border-bottom: 0.5px solid rgba(0,0,0,0.3);	margin-top: -10px;}.perm-null {	display: none;}.read-more-paragraph {	margin-top: -10px;}.null {	display: none;}.more-active .null {	display: block;}.more-active .read-more {	display: none;}#gallery-1:not(.main-intro) {	margin-top: 60px;}.home #gallery-1, .home #gallery-2 {	margin-bottom: 40px;}.page-intro:not(.main-intro) {	margin-top: 40px;}.continue:not(.main-intro .continue) { 	display: none;}.swiper:not(.no-overlay)::after {	display: none;}.gallery-wrapper:not(.main-intro .gallery-wrapper) {  padding: 0px;  width: 100%;  height: 80vw;  box-sizing: border-box;  position: relative;  }    .project-title-wrapper:not(.main-intro .project-title-wrapper) {	position: relative;	margin-top: 0vh;	z-index: 50;	pointer-events: none;}.project-title-wrapper h1:not(.main-intro .project-title-wrapper h1) {	margin-top: 20px !important;	margin-bottom: 0px;	color: black;	line-height: 1.6;	letter-spacing: 0.15em;}.project-title-wrapper h1 span:not(.main-intro .project-title-wrapper h1 span) {	line-height: 1;	font-size: 28px;}.project-title:not(.main-intro .project-title) {	position: relative;	top: 0;	height: auto;	display: flex;}.engage .project-title:not(.main-intro .engage .project-title) {	opacity: 1;}.scroll-extend-A:not(.main-intro .scroll-extend-A), .scroll-extend-B:not(.main-intro .scroll-extend-B), .scroll-extend:not(.main-intro .scroll-extend) {	display: none;}.copy-wrapper {  margin-top: 25px;  margin-bottom: 25px;}.menu-wrapper a:not(.menu-logo) {		letter-spacing: 0.15em;}.header-houzz {	display: none;}.swiper-pagination {  position: absolute;  bottom: 10px;  right: 10px;  background: rgba(0,0,0,1);  opacity: 1;}.base-h2, .base-logo {	display: none;}    .swiper-button-prev, .swiper-button-next, .continue {    background-color: rgba(240,240,240,0);    }    .swiper-button-prev, .swiper-button-next {  background-image: url(../imgs/side-arrow-white.png); }     .copy {  column-count: 1;}	.caption {		display: none;	}		.home-gallery-wrapper .swiper::after { width: 100%; }    .info-page-text h2::before, .info-page-text h2::after {  left: 50%;  margin-left: -50px;}.info-page-text h2 {	text-align: center;}}@media all and (min-width: 700px) {	.header-phone {		display: none;	}		.info-page-wrapper {		margin-top: 80px;	}		.info-page-text {		width: 50%;		display: inline-block;		vertical-align: top;		padding-left: 16px;		box-sizing: border-box;	}	.info-page-image {		width: 50%;		display: inline-block;		vertical-align: top;		margin-top: 70px;		box-sizing: border-box;		padding-right: 16px;		/*border-right: 0.5px solid rgba(0,0,0,0.3);*/	}		.info-page-image {		margin-top: 70px;		}		.copy, .info-page-text {		margin-top: 50px;	}		.copy {		margin-bottom: 50px;	}		.wide-h2 {	display: block;	margin-top: -30px;	}		.mobile-h2 {	display: none;	}		.copy p:last-child, .info-page-text p {	margin-bottom: 0px;}				}@media all and (min-width: 980px) {	.info-page-image {		padding-right: 27px;	}		.info-page-text {		padding-left: 27px;	}		h2 {		font-size: 40px;		margin-top: 60px;		margin-bottom: 60px;		padding-top: 50px;		padding-bottom: 50px;		line-height: 1.2;	}		.under-img-h2 {		margin-top: -20px;	}		.base-h2 {		margin-bottom: 0px;	}		.wide-h2 {	margin-top: -20px;	}			}@media all and (max-height: 450px) {}/* * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */.hamburger-wrapper {	position: fixed;	background: radial-gradient(circle, rgba(29,25,16,0.2) 0%, rgba(29,25,16,0.2) 50%, rgba(29,25,16,0) 100%);}.hamburger{	background-color: transparent;	padding: 15px;	display: inline-block;	cursor: pointer;	transition-property: opacity, filter;	transition-duration: 0.15s;	transition-timing-function: linear;	color: inherit;	font-size: inherit;	font-family: inherit;	font-weight: inherit;	font-style: inherit;	font-variant: inherit;	text-transform: none;	border: none;	margin-left: 15px;	margin-top: 0px;	overflow: visible;	line-height: 0;	transition: background-color 0.5s;	position: fixed;	top: 0px;	z-index: 9999;}.hamburger-box{	width: 28px;	height: 30px;	display: inline-block;	position: relative;}.hamburger-inner{	display: block;	top: 50%;	margin-top: -1px;}.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{	width: 28px;	height: 1.5px;	background-color: #333;	border-radius: 0px;	position: absolute;	transition-property: transform;	transition-duration: 0.15s;	transition-timing-function: ease;}.dark .hamburger-inner, .dark .hamburger-inner::before, .dark .hamburger-inner::after{	background-color: #fff;}.hamburger-inner::before, .hamburger-inner::after{	content: "";	display: block;}.hamburger-inner::before { top: -8px; }.hamburger-inner::after { bottom: -8px; }.hamburger--squeeze .hamburger-inner{	transition-duration: 0.075s;	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}.hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; }.hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }.hamburger--squeeze.is-active .hamburger-inner{	transform: rotate(45deg);	transition-delay: 0.12s;	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);	}.hamburger--squeeze.is-active .hamburger-inner::before{	top: 0;	opacity: 0;	transition: top 0.075s ease, opacity 0.075s 0.12s ease;}.hamburger--squeeze.is-active .hamburger-inner::after{	bottom: 0;	transform: rotate(-90deg);	transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);}.hamburger--squeeze.is-active .hamburger-inner, .hamburger--squeeze.is-active .hamburger-inner::before, .hamburger--squeeze.is-active .hamburger-inner::after{	background-color: #fff;}