@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Extralight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Extralight.woff2') format('woff2');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashGrotesk';
  src: url('../fonts/ClashGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

:root {
	--border: 35px;
	--gap: 17px;
	--header: 78px;
	--radius: 9px;
	--spacing: 7.8rem;
	font-size: 32px;
}

@view-transition {
	navigation: auto;
}

@keyframes move-out {
	from {
		filter: blur(0px);
		transform: scale(1);
		opacity: 1;
	}
	to {
		filter: blur(20px);
		transform: scale(1.1);
		opacity: 0;
	}
}

@keyframes move-in {
	from {
		filter: blur(20px);
		transform: scale(1.1);
		opacity: 0;
	}
	to {
		filter: blur(0px);
		transform: scale(1);
		opacity: 1;
	}
}

::view-transition-old(root) {
	animation: 0.8s cubic-bezier(0.87, 0, 0.13, 1) both move-out;
}
::view-transition-new(root) {
	animation: 0.8s cubic-bezier(0.87, 0, 0.13, 1) both move-in;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header) + var(--gap));
}

.skipLink {
	position: fixed;
	top: var(--gap);
	left: var(--gap);
	z-index: 9999;
	padding: 0.5rem 0.75rem;
	background-color: #FFFFFF;
	color: #101415;
	transform: translateY(calc(-100% - var(--gap)));
	transition: transform 0.2s ease-in-out;
}

.skipLink:focus-visible {
	transform: translateY(0);
	outline-color: #101415;
}



a {
	text-decoration: none;
	color: #FFFFFF;
}

p {
	line-height: 1.5;
}


body {
	background-color: #101415;
	font-family: 'ClashGrotesk', sans-serif;
	font-weight: 400;
	color: #FFFFFF;
}

section {
	width: 100vw;
	max-width: 2000px;
	padding-left: var(--border);
	padding-right: var(--border);
	margin-left: auto;
	margin-right: auto;
}

.headerContainer {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	height: 100vh;
	height: 100dvh;

	z-index: 1000;

	pointer-events: none;

}

header {
	height: var(--header);
	display: flex;
	margin-top: var(--header);

	pointer-events: all;
	

	z-index: 500;
}

.logoBar {
	height: var(--header);
	width: 100vw;
	border-radius: var(--radius);
	margin-right: var(--gap);

	background-color: transparent;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);

	display: flex;
	align-items: center;

	transition: all ease-in-out 0.5s;
}

.logoBar a {
	padding-left: calc(var(--header) / 4);
	pointer-events: all;
}

.logoBar a img {
	height: calc(var(--header) * 0.65);
	width: auto;
}



.backdrop {
	height: var(--header);
	min-width: var(--header);
	border-radius: var(--radius);

	background-color: transparent;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);

	display: flex;
	align-items: center;
	justify-content: center;

	transition: all ease-in-out 0.5s;
}

.menu {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
}


.navContainer {
	height: 100%;
	width: 100%;
	margin-top: var(--gap);
	position: relative;
	text-align: right;
	
}

.nav {
	height: 1px;
	width: 1px;

	position: absolute;
	right: 0;

	border-radius: var(--radius);

	background-color: transparent;
	backdrop-filter: blur(30px) brightness(80%);
	-webkit-backdrop-filter: blur(30px) brightness(80%);

	transition: all ease-in-out 0.5s;

	z-index: 490;
}

.darker {
	backdrop-filter: blur(30px) brightness(80%);
	-webkit-backdrop-filter: blur(30px) brightness(80%);
	transition: all ease-in-out 0.5s;
}

.nav.open {
	height: calc(100% - var(--header) - var(--header) - var(--gap) - var(--gap));
	width: 100%;

	transition: all ease-in-out 0.5s;

}


.mainNavContainer {
	height: calc(100% - var(--header) - var(--header) - var(--gap) - var(--gap));

	width: 100vw;
	max-width: 2000px;
		
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;

	padding-top: calc(var(--header) / 2);
	padding-bottom: calc(var(--header) / 2);
	padding-left: var(--header);
	padding-right: var(--header);

	z-index: 495;
}


.mainNav {
	font-variation-settings: wght 700;
	font-weight: 700;
	color: #FFFFFF;
	font-size: 4.7rem;
	
	display: flex;
	justify-content: center;

	user-select: none;
	-webkit-user-select: none;

	z-index: 496;
}

.mainNav .span {
	font-variation-settings: wght 200;
	font-weight: 200;
	transition: all linear 0.2s;

	width: 4rem;
	text-align: right;
	padding-right: var(--gap);
}

.mainNav:hover .span, .mainNav .span.aktiv {
	font-variation-settings: wght 700;
	font-weight: 700;
	transition: all linear 0.2s;
}

.mainNav:nth-child(1) {
	transform: translate(50px, -100px);
	opacity: 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 150ms;
	pointer-events: none;
}

.mainNav:nth-child(2) {
	transform: translate(calc(-20vw + 50px), -100px);
	opacity: 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 100ms;
	pointer-events: none;
}
.mainNav:nth-child(3) {
	transform: translate(calc(-5vw + 50px), -100px);
	opacity: 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 50ms;
	pointer-events: none;
}
.mainNav:nth-child(4) {
	transform: translate(calc(10vw + 50px), -100px);
	opacity: 0;
	transition: all ease-in-out 0.2s;
	transition-delay: 0;
	pointer-events: none;
}

.mainNav:nth-child(1).apear1 {
	transform: translate(0, 0);
	opacity: 1;
	transition: all ease-in-out 0.4s;
	transition-delay: 100ms;
	pointer-events: all;
}

.mainNav:nth-child(2).apear2 {
	transform: translate(-20vw, 0);
	opacity: 1;
	transition: all ease-in-out 0.4s;
	transition-delay: 200ms;
	pointer-events: all;
}

.mainNav:nth-child(3).apear3 {
	transform: translate(-5vw, 0);
	opacity: 1;
	transition: all ease-in-out 0.4s;
	transition-delay: 300ms;
	pointer-events: all;
}

.mainNav:nth-child(4).apear4 {
	transform: translate(10vw, 0);
	opacity: 1;
	transition: all ease-in-out 0.4s;
	transition-delay: 400ms;
	pointer-events: all;
}

@keyframes turn {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(135deg);
	}
}

@keyframes turnback {
	from {
		transform: rotate(135deg);
	}
	to {
		transform: rotate(0);
	}
}

.turnback {
	animation: 0.3s ease-in-out turnback;
	transform: rotate(0deg);
}

.turn {
	animation: 0.2s ease-in-out turn;
	transform: rotate(135deg);
}



h1 {
	font-family: 'ClashDisplay', sans-serif;
  	font-weight:500;
	font-size: 3.125rem;
}

h2 {
	font-weight:600;
	font-variation-settings: wght 600.0;
	font-size: 1.6rem;
}

h2::before {
	content: '// ';
	font-weight:300;
	font-variation-settings: wght 300.0;
	font-size: 1.6rem;
	padding-left: 1px;
}




h3 {
	font-weight:500;
	font-variation-settings: wght 500.0;
	font-size: 3.125rem;
	line-height: 1.25;
}

.serviceH3 {
	line-height: 1;
	padding-bottom: 0.4em;
}

h4 {
	font-weight: 500;
	font-variation-settings: wght 500.0;
	font-size: 1.6rem;
}

.accordionTitle {
	font-weight: 500;
	font-variation-settings: wght 500.0;
	font-size: 1.6rem;
}

h4.spacerbtm {
	padding-bottom: 8rem;
}

h5 {
	font-weight: 600;
	font-variation-settings: wght 600.0;
	font-size: 1.16rem;
}

h6 {
	font-weight: 600;
	font-variation-settings: wght 600.0;
	font-size: 3.125rem;
	color: #101415;
}

.leadText {
	font-weight: 400;
	font-variation-settings: wght 400.0;
	font-size: 1.6rem;
	line-height: 1.5;
}


.hero {
	padding-top: 10rem;
	padding-bottom: 7rem;
	display: flex;
	align-items: flex-start;
}

.hero h1 {
	width: 80%;
}

.sub {
	padding-bottom: 5rem;
}

.sub h1 {
	width: 48%;	
	margin-right: 20%;
}

.contactDetails p {
	padding-bottom: 1rem;
}

.contactDetails .button {
	margin-bottom: var(--gap);
}






.h2button {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: calc(2 * var(--gap));	
}

.button {
	-webkit-appearance: none;
	appearance: none;
	height: 1.8rem;
	width: fit-content;
	display: flex;
	align-items: center;
	border: #FFFFFF solid 1px;
	border-radius: 100px;

	background-color: #FFFFFF00;
	
	font-size: 0.7rem;
	line-height: 1;
	color: #FFFFFF;
	font-weight: 500;
	padding: 0.5rem 0.3rem 0.5rem 0.9rem;
	cursor: pointer;
	transition: all linear 0.8s;
}

button.button {
	font-family: inherit;
	text-align: left;
}

.arrow {
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.1rem;
	width: 1.1rem;
	flex: 0 0 1.1rem;
	border-radius: 100px;
	transform: rotate(0);
	transform-origin: center center;
	transition: all linear 0.3s;
}

.arrow svg {
	width: 0.5488rem; 
	height: 0.5488rem;
}

.button > span:not(.arrow) {
	padding-right: 0.7rem;
	white-space: nowrap;
	transition: all linear 0.3s;
}

.button:hover {
	background-color: #FFFFFF35;
	transition: all linear 0.3s;
}

a:hover .arrow,
.btnW:hover .arrow,
.button:hover .arrow {
	transform: rotate(45deg);
	transform-origin: center center;
	transition: all linear 0.3s;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 4px;
}

footer a:focus-visible,
.light a:focus-visible {
	outline-color: #101415;
}


.button:hover > span:not(.arrow) {
	padding-right: 1.4rem;
	transition: all linear 0.3s;
}


#latestProjects {
	z-index: 5;
}


.foldableContainer {
	margin-bottom: var(--gap);
	display: grid;
	gap: var(--gap);
}

.foldable {
	position: relative;	
	height: 62vh;

	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: var(--radius);

	-webkit-box-shadow: inset 0px -120px 90px -30px #00000050; 
	box-shadow: inset 0px -120px 90px -30px #00000050;
}

.foldable h5 {
	position: absolute;
	bottom: 1rem;
	left: 0.8rem;
	width: 70%;
}

.foldable div {
	position: absolute;
	bottom: 1rem;
	right: 0.8rem;
}

.f1 {
	background-image: url("../project/img/bauhoffer-frank/timoschueler_projekt_bauhoffer-frank_thumb.jpg");
}
.f2 {
	background-image: url("../project/img/ghv-komue/timoschueler_projekt_ghv-komue_thumb.jpg");
}
.f3 {
	background-image: url("../project/img/steuerkanzlei-wanner/timoschueler_projekt_steuerkanzlei-wanner_thumb.jpg");
}


.f1Grow {
	grid-template-columns: 3fr 1fr 1fr;
	transition: all ease-in-out 0.4s;
}
.f2Grow {
	grid-template-columns: 1fr 3fr 1fr;
	transition: all ease-in-out 0.4s;
}
.f3Grow {
	grid-template-columns: 1fr 1fr 3fr;
	transition: all ease-in-out 0.4s;
}


.intro {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	padding-top: calc(var(--spacing) - var(--gap));
	padding-bottom: var(--spacing);
}

.twoSplit {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	padding-bottom: var(--spacing);
}

.twoSplit.half {
	padding-bottom: calc(var(--spacing) / 2);
}

.split {
	width: 48%;
}


.servicesIntroImg img {
	border-radius: var(--radius);
	width: 100%;
	height: auto;
}

.hidden {
	display: none;
}

.service {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	color: #626262;
	padding-left: 0;
	text-align: left;
	font: inherit;
	font-weight: 500;
	font-variation-settings: wght 500.0;
	line-height: 1.25;
	cursor: pointer;
	transition: all ease-in-out 0.4s;
	font-size: 3.5rem;
}

.serviceActive {
	color: #FFFFFF;
	padding-left: var(--header);
	transition: all ease-in-out 0.4s;
}


.imageSlideShow img {
  display: none;
}

.imageSlideShow img.active {
  display: block;
  width: 100%;
  height: auto;
}

.imageSlideShow.serviceSwitching {
	animation: serviceSwitch 0.24s ease-out both;
}

@keyframes serviceSwitch {
	from {
		opacity: 0.58;
		transform: translateY(0.35rem) scale(0.995);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.hidden {
  display: none;
}


.footerTop {
	background-color: #FFFFFF;
	border-radius: var(--radius);
	margin-bottom: var(--gap);
	padding: var(--header);
}

.footerTop .twoSplit {
	padding-bottom: 0;
}

.footerTop p {
	color: #101415;
	line-height: 1.5;
}


.buttonInvert {
	height: 1.8rem;
	width: fit-content;
	display: flex;
	align-items: center;
	border: #101415 solid 1px;
	border-radius: 100px;

	background-color: #10141500;
	
	font-size: 0.7rem;
	line-height: 1;
	color: #101415;
	font-weight: 500;
	padding: 0.5rem 0.3rem 0.5rem 0.9rem;
	transition: all linear 0.8s;

	margin-top: 1rem;
}

.buttonInvert .arrow {
	background-color: #101415;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.1rem;
	width: 1.1rem;
	flex: 0 0 1.1rem;
	border-radius: 100px;
	transform: rotate(0);
	transform-origin: center center;
	transition: all linear 0.3s;
}

.buttonInvert .arrow svg path {
	stroke: #FFFFFF;
}

.buttonInvert > span:not(.arrow) {
	padding-right: 0.7rem;
	white-space: nowrap;
	transition: all linear 0.3s;
}

.buttonInvert:hover {
	background-color: #10141535;
	transition: all linear 0.3s;
}

.buttonInvert:hover > span:not(.arrow) {
	padding-right: 1.4rem;
	transition: all linear 0.3s;
}

.btnW {
	display: block;
	width: fit-content;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	padding: 0;
	cursor: pointer;
}

.btnW:disabled {
	cursor: wait;
	opacity: 0.7;
}


footer {
	background-color: #FFFFFF;
	border-radius: var(--radius) var(--radius) 0 0;
	padding: 1.5rem var(--header) 1.5rem var(--header);
	
	display: flex;
	align-items: center;
	justify-content: space-between;
}

footer p, footer a {
	color: #101415;
	line-height: 1;
	font-size: 0.7rem;
	font-weight: 500;
}

.insta {
	display: flex;
	align-items: center;
}

.insta p {
	padding-left: 0.5rem;
}

.insta img {
	height: 0.8rem;
}

.footerLegal a {
	padding-left: 3rem;
	
}



.galleryGrid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr 1fr 1fr;
	padding-bottom: var(--spacing);
	

}

.gridItem {
	position: relative;	
	height: fit-content;
	width: fit-content;
	border-radius: var(--radius);
	object-fit: cover;
	overflow: hidden;
}


.gridItem img {
	border-radius: var(--radius);
	transform: scale(105%);
	transition: all ease-in-out 0.4s;
}

.gridItem:hover img {
	border-radius: var(--radius);
	transform: scale(100%);
	transition: all ease-in-out 0.4s;
}

.gridItem .shadow {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: var(--radius);
	
	-webkit-box-shadow: inset 0px -120px 90px -30px #00000050; 
	box-shadow: inset 0px -120px 90px -30px #00000050;
}

.gridItem h5 {
	position: absolute;
	bottom: 1rem;
	left: 0.8rem;
	width: 70%;
}

.gridItem div {
	position: absolute;
	bottom: 1rem;
	right: 0.8rem;
}



.accordionContainer {
	width: 100%;
	border-bottom: 1px solid #FFFFFF;
}

.accordionContainer:first-child {
	border-top: 1px solid #FFFFFF;
}

.anchorSection,
.accordionContainer {
	scroll-margin-top: calc(var(--header) + var(--gap));
}


.accordionTop {
	width: 100%;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	height: var(--header);
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;

			
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.accordionImg {
	padding-right: var(--gap);
	transform-origin: center center;
}

.accordionContainer p {
	height: auto;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding-bottom: 0;
	transition: all ease-in-out 0.4s;
}

.accordionContainer p.show {
	height: auto;
	max-height: 1000px;
	opacity: 1;
	overflow: hidden;
	padding-bottom: 1.25rem;
	transition: all ease-in-out 0.4s;
}





.embla, .embla2, .embla3, .embla4 {
  overflow: hidden;
	max-width: 100vw;
	margin: auto;
}

.embla4 {
	margin-bottom: var(--spacing)
}

.embla__container {
	backface-visibility: hidden;
  display: flex;
	align-items: center;
	touch-action: pan-y pinch-zoom;
	margin-left: calc(var(--gap) * -1);
}
.embla__slide {
  flex: 0 0 max-content;
  min-width: 0;
	padding-left: var(--gap);
}

.embla__slide img {
	height: 20rem;
	width: auto;
	max-width: none;
	border-radius: var(--radius);
	margin-bottom: calc(var(--spacing) / 2);
}

.embla__slide img.l {
	height: 21.5rem;
}

.embla__slide img.s {
	height: 18.5rem;
}

.embla__slide span {
	font-family: 'ClashDisplay', sans-serif;
  	font-weight:500;
	font-size: 3.125rem;
	color: #FFFFFF;
	line-height: 1.1;
	height: auto;
	border-radius: var(--radius);
	margin-bottom: calc(var(--spacing) / 2);
}


.contactRows {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--gap);


}

.contactRowsItem {
	width: 100%;
	
}



.contactRowsItem input, .contactRowsItem textarea {
	height: 3.2rem;
	width: 100%;
	border-radius: var(--radius);
	border-style: none;
	z-index: 10;
	position: relative;
	margin-bottom: var(--gap);

	padding: 1.7rem 0.5rem 0.5rem 0.5rem ;
	
}

.contactRowsItem textarea {
	height: calc(6.4rem + var(--gap));

}

.contactRowsItem var {
 font-size: 0.7rem;
 font-weight: 500;
	color: #10141535;
	position: absolute;
	padding-top: 0.5rem;
	padding-left: 0.5rem;



	z-index: 20;

}

.checkbox {
	font-size: 0.7rem;
	font-weight: 500;
}


.contactRowsSend {
	display: flex;
	padding-bottom: var(--spacing);
	align-items: flex-start;
	justify-content: space-between;

}

.checkbox > input {
    height: 0.7rem;
    width: 0.7rem;
		-webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    outline: none;
    background-color: #fff;
		transform: translateY(0.3em);
		margin-right: 0.5rem;
  }

.checkbox > input:checked {
    border: 2px solid #ffffff;
    background-color: #000000;
}

.checkbox a {
	text-decoration: underline;
}

textarea:focus {
	outline: none !important;
}

input:focus {
	outline: none !important;
}



.legal {
	padding-bottom: var(--spacing);
}

.legal p {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.legal a {
	text-decoration: underline;
}


.legal h3 {
	font-weight: 600;
	font-variation-settings: wght 600.0;
	font-size: 2rem;
	line-height: 1;
}



.projecthero {
	height: 100vh;
	height: 100dvh;
	display: flex;
	align-items: flex-end;
	padding-bottom: var(--spacing);
	margin-bottom: calc(2 * var(--header));
}

.projecthero h1 {
	width: 80%;
}

.projectheroBG {
	height: 100vh;
	height: 100dvh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: -5;
}
.projectheroBG img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	overflow: hidden;
}

.projecthero .projectClient {
	font-weight: 500;
	font-variation-settings: wght 500.0;
	font-size: 1.6rem;
	line-height: 1.5;
}

.projecthero .projectClient::before {
	content: '';
	padding-left: 0;
}


.projectDescription {
	display: flex;
	margin-bottom: calc(2 * var(--header));
}

.projectDescription .leadText {
	width: 65%;
	margin-right: calc(2 * var(--header));
}

.projectDescription b {
	font-weight: 600;
}

.projectDescription p a {
	color: inherit;
	text-decoration: none;
}

.projectDescription .button {
	margin-top: 1rem;
}


.projectGridS {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr 1fr;
	padding-bottom: var(--gap);
}

.projectGridL {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
	padding-bottom: var(--gap);
}

.projectGridItem {
	position: relative;	
	height: fit-content;
	width: fit-content;
	border-radius: var(--radius);
	object-fit: cover;
	overflow: hidden;
}

video {
	display: block;
	width: 100%;	
}

.nextUp {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 2fr 1fr;

	margin-top: var(--header);
	margin-bottom: calc(var(--header) + var(--gap));

}

.nextUp.last {
	grid-template-columns: 3fr;
}

.nextUpAll {
	background-color: #FFFFFF;
	border-radius: var(--radius);
	padding-left: var(--header);

	display: flex;
	flex-direction: column;
	justify-content: center;
}

.last .nextUpAll {
	padding-top: 2.6rem;
	padding-bottom: 2.6rem;
}

.nextUpAll h6 {
	margin-bottom: 1rem;
}

.nextUpAll .buttonInvert {
	margin-top: 0;
}



@media (max-width: 1750px) {
	.service {
		font-size: 3rem;
}
}



@media (max-width: 1400px) {

:root {
	--border: 35px;
	--gap: 15px;
	--header: 78px;
	--radius: 9px;
	--spacing: 7.8rem;
	font-size: 30px;
}

.foldable {
	height: 48vh;
}

.f1Grow {
	grid-template-columns: 2fr 1fr 1fr;
}
.f2Grow {
	grid-template-columns: 1fr 2fr 1fr;
}
.f3Grow {
	grid-template-columns: 1fr 1fr 2fr;
}

.service {
		font-size: 2.5rem;
}

}

@media (max-width: 1150px) {

		:root {
	--border: 35px;
	--gap: 13px;
	--header: 78px;
	--radius: 9px;
	--spacing: 6.8rem;
	font-size: 26px;
}

.hero h1 {
	width: 100%;
}

.sub h1 {
	width: 60%;	
	margin-right: 10%;
}

}

@media (max-width: 1024px) {
		:root {
	--border: 35px;
	--gap: 11px;
	--header: 60px;
	--radius: 9px;
	--spacing: 6.8rem;
	font-size: 24px;
}

header {
	margin-top: calc(var(--header) / 2);	
}

.nav.open {
	height: calc(100% - calc(var(--header) / 2) - var(--header) - var(--gap) - var(--gap));
}


.mainNavContainer {
	height: calc(100% - calc(var(--header) / 2) - var(--header) - var(--gap) - var(--gap));

}


.foldable {
	height: 38vh;
}

.plus {
	transform: scale(0.7);
}

@keyframes turn {
	from {
		transform: scale(0.7) rotate(0);
	}
	to {
		transform: scale(0.7) rotate(135deg);
	}
}

@keyframes turnback {
	from {
		transform: scale(0.7) rotate(135deg);
	}
	to {
		transform: scale(0.7) rotate(0);
	}
}

.turnback {
	animation: 0.3s ease-in-out turnback;
	transform: scale(0.7) rotate(0deg);
}

.turn {
	animation: 0.2s ease-in-out turn;
	transform: scale(0.7) rotate(135deg);
}

.projectDescription .leadText {
	width: 65%;
	margin-right: var(--header);
}

.leadText {
	font-size: 1.4rem;
}

}

@media (max-height: 1024px) {
		:root {
	--border: 35px;
	--gap: 11px;
	--header: 60px;
	--radius: 9px;
	--spacing: 6.8rem;
	font-size: 24px;
}

header {
	margin-top: calc(var(--header) / 2);	
}

.nav.open {
	height: calc(100% - calc(var(--header) / 2) - var(--header) - var(--gap) - var(--gap));
}


.mainNavContainer {
	height: calc(100% - calc(var(--header) / 2) - var(--header) - var(--gap) - var(--gap));

}

.foldable {
	height: 70vh;
    
}

.plus {
	transform: scale(0.7);
}

@keyframes turn {
	from {
		transform: scale(0.7) rotate(0);
	}
	to {
		transform: scale(0.7) rotate(135deg);
	}
}

@keyframes turnback {
	from {
		transform: scale(0.7) rotate(135deg);
	}
	to {
		transform: scale(0.7) rotate(0);
	}
}

.turnback {
	animation: 0.3s ease-in-out turnback;
	transform: scale(0.7) rotate(0deg);
}

.turn {
	animation: 0.2s ease-in-out turn;
	transform: scale(0.7) rotate(135deg);
}

.projectDescription .leadText {
	width: 65%;
	margin-right: var(--header);
}

.leadText {
	font-size: 1.4rem;
}

}

@media (max-width: 900px) {
	:root {
	--border: 25px;
	--gap: 9px;
	--header: 60px;
	--radius: 6px;
	--spacing: 6.8rem;
	font-size: 20px;
}


.arrow svg {
	width: 17.561px; 
	height: 17.561px;
	transform: scale(0.6);
}

.f1Grow {
	grid-template-columns: 1fr 1fr 1fr;
}
.f2Grow {
	grid-template-columns: 1fr 1fr 1fr;
}
.f3Grow {
	grid-template-columns: 1fr 1fr 1fr;
}

.contactRows {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.nextUp {
	grid-template-columns: 1fr 1fr;
}

.galleryGrid {
	grid-template-columns: 1fr 1fr;
}

}

@media (max-height: 850px) {
		:root {
	--border: 25px;
	--gap: 9px;
	--header: 60px;
	--radius: 6px;
	--spacing: 6.8rem;
	font-size: 20px;
}

.arrow svg {
	width: 17.561px; 
	height: 17.561px;
	transform: scale(0.6);
}


}


@media (max-width: 770px) {

		:root {
	--border: 25px;
	--gap: 9px;
	--header: 50px;
	--radius: 6px;
	--spacing: 5.8rem;
	font-size: 19px;
}
    
    .foldable {
	height: 38vh;
    
}

.arrow svg {
	transform: scale(0.55);
}

			.twoSplit {
	flex-direction: column;
}

.twoSplit.half {
	padding-bottom: calc(var(--spacing) / 2);
}

.split {
	width: 100%;
	margin-bottom: 1rem;
}

.services {
	flex-direction: column-reverse;
}

.servicesIntroTxt {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.hero {
	flex-direction: column;
}

.sub h1 {
	width: 75%;	
}

.contactDetails {
	margin-top: 2rem;
}


.mainNavContainer {
	align-items: flex-start;
	padding-left: calc(var(--header) / 2);
	padding-right: calc(var(--header) / 2);
}



.mainNav:nth-child(1) {
	transform: translate(0, 0);
}

.mainNav:nth-child(2) {
	transform: translate(0, 0);
}
.mainNav:nth-child(3) {
	transform: translate(0, 0);
}
.mainNav:nth-child(4) {
	transform: translate(0, 0);
}

.mainNav:nth-child(1).apear1 {
	transform: translate(0, 0);
}

.mainNav:nth-child(2).apear2 {
	transform: translate(0, 0);
}

.mainNav:nth-child(3).apear3 {
	transform: translate(0, 0);
}

.mainNav:nth-child(4).apear4 {
	transform: translate(0, 0);
}


.plus {
	transform: scale(0.6);
}

@keyframes turn {
	from {
		transform: scale(0.6) rotate(0);
	}
	to {
		transform: scale(0.6) rotate(135deg);
	}
}

@keyframes turnback {
	from {
		transform: scale(0.6) rotate(135deg);
	}
	to {
		transform: scale(0.6) rotate(0);
	}
}

.turnback {
	animation: 0.3s ease-in-out turnback;
	transform: scale(0.6) rotate(0deg);
}

.turn {
	animation: 0.2s ease-in-out turn;
	transform: scale(0.6) rotate(135deg);
}

}


@media (max-width: 500px) {
		:root {
	--border: 25px;
	--gap: 9px;
	--header: 50px;
	--radius: 6px;
	--spacing: 5.8rem;
	font-size: 18px;
}

h1 {
	font-size: 2.125rem;
}

h2 {
	font-size: 1.4rem;
}

h2::before {
	font-size: 1.4rem;
}

.projecthero .projectClient {
	font-size: 1.4rem;
}

h6 {
	font-size: 2.125rem;
}


		.mainNav {
	font-size: 2.7rem;
}

.mainNav .span {
	width: 2rem;
}

.f1Grow {
	grid-template-columns: 1fr;
}
.f2Grow {
	grid-template-columns: 1fr;
}
.f3Grow {
	grid-template-columns: 1fr;
}

.intro {
	width: 100%;
}

.servicesIntroTxt {
	display: grid;
	grid-template-columns: 1fr;
}

.projecthero h1 {
	width: 100%;
}

.projectDescription {
	display: flex;
	flex-direction: column;
	margin-bottom: 3rem;
}

.projectDescription .leadText {
	width: 100%;
	padding-bottom: 2rem;
	margin-right: 0;
}

.projectGridS {
	grid-template-columns: 1fr;
}

.nextUp {
	grid-template-columns: 1fr;
}

.nextUpAll {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;

}

.galleryGrid {
	grid-template-columns: 1fr;
}


}


@media (max-height: 450px) {
		:root {
	--border: 25px;
	--gap: 9px;
	--header: 50px;
	--radius: 6px;
	--spacing: 5.8rem;
	font-size: 18px;
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-delay: 0ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0ms !important;
		transition-duration: 0.001ms !important;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation: none !important;
	}
}

h1 {
	font-size: 2.125rem;
}

h2 {
	font-size: 1.4rem;
}

h2::before {
	font-size: 1.4rem;
}

.projecthero .projectClient {
	font-size: 1.4rem;
}

h6 {
	font-size: 2.125rem;
}


		.mainNav {
	font-size: 2.7rem;
}

.mainNav .span {
	width: 2rem;
}

}