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

/* Scrolltrigger animations */
.fade {opacity:0;transition:opacity 1s}
.fadeLeft {opacity:0;transform:translate3d(-100px, 0, 0);transition:opacity 1s, transform 1s;transition-timing-function:cubic-bezier(.175, .885, .32, 1.275)}
.fadeRight {opacity:0;transform:translate3d(100px, 0, 0);transition:opacity 1s, transform 1s;transition-timing-function:cubic-bezier(.175, .885, .32, 1.275)}
.fadeUp {opacity:0;transform:translate3d(0, 100px, 0);transition:opacity 1s, transform 1s}
.animate {opacity:1;transform:translateX(0);transform:translateY(0)}

	


/* Font Imports */
@font-face {
    font-family:'Sprint Sans';
    src:url('fonts/SprintSans-Regular.woff2') format('woff2');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}
@font-face {
    font-family:'Bandeins Sans';
    src:url('fonts/BandeinsSans-Regular.woff2') format('woff2'),
        url('fonts/BandeinsSans-Regular.woff') format('woff');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}




/* Fonts */
body {font-stretch:normal; color:#101010; -webkit-font-smoothing:antialiased;  -moz-osx-font-smoothing:grayscale; font-family:"Sprint Sans"}
h1, h2, h3, h4, h5, h6, p.arrow-icon, .title {font-family:'Bandeins Sans'; margin:0.5em 0}
h1 {font-size:7vw; line-height:100%; letter-spacing:-0.02em}
h2 {font-size:2.5em; line-height:125%}
h3 {font-size:1.5em; line-height:125%}
h4 {font-size:1.5em; line-height:150%}
h5 {font-size:1em; line-height:150%}
h6 {font-size:1em; line-height:125% text-transform:uppercase; font-weight:400}
p {line-height:150%; font-weight:400; margin:0.75em 0}

section p:last-of-type{margin-bottom:0}

p.arrow-icon {font-size:100%; line-height:140%;letter-spacing:0.02em; margin:2em 0 1em 0}

h1 .medium {font-size:4em}
h1 span.light{color:#0f0f0f1a}
h1 span.small{font-size:66%}

	@media only screen and (min-width:2000px) {
  		body {font-size:125%}
  		h1 {font-size:7vw}
  		p.has-medium-font-size {font-size:100%!important}
  	}
  	@media only screen and (min-width:2500px) {
  		body {font-size:150%}
  		h1 {font-size:6vw}
  	}
  	@media only screen and (min-width:3000px) {
  		body {font-size:200%}
  		h1 {font-size:5vw}
  	}
  	@media only screen and (min-width:768px) {
  		.page-id-45 h1 {margin-bottom:0}
  	}
	
  	@media only screen and (max-width:767px) {
  		h1 {font-size:3em}
  		h2 {font-size:2em}
  		h3 {font-size:1.5em}
  		h4 {font-size:1.25em; margin-top:1.5em}
		p {line-height:150%; font-weight:400; margin:1em 0}
		p br {display:none}
  	}







/* Links */
a {text-decoration:none; color:#101010}
.btn, .submit-btn {display:inline-block; background:#101010; border:0; font-size:17px; line-height:100%; margin:1.5em 0 0; padding:12px 20px 8px; border-radius:30px; text-transform:uppercase}
.btn a {color:white; padding:0; cursor:pointer}
.submit-btn {color:white; padding:0 !important; cursor:pointer; text-indent:0; height:50px; margin-top:7.5vh}
.submit-btn .body-copy {padding:17px 25px}
.btn.btn-alt {background:white; border:1px solid #101010; padding:11px 19px 8px}
.btn.btn-alt a {color:#101010}

/* Arrow-icon */
.accordion .btn,
.cta .btn {position:relative; padding-right:40px}
.accordion .btn:after,
.cta .btn:after {content:""; width:12px; height:12px; background-size:100%; position:absolute; right:15px; top:14px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='13' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0v12m0 0H0m12 0L.5.5' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E")}







/* Common Layout */
.wrapper {margin:0 2.5vw}
section {margin:0}
.section-spacer {height:10vh}

hr {height:1px; margin:0 0 2vh 0; border:0; background:#101010; display:block; width:100%}
hr.nomarg {margin:0}

	@media only screen and (max-width:767px) {
		.wrapper {margin:0 4vw}
		.section-spacer {height:5vh}
		.page-id-20 hr:nth-of-type(2) {display:none}
	}






/* .header Bar */
header{width:100%; position:relative; z-index:5; padding:2.5vw 0; background:white}
.home header {padding:0}
	header .logo {padding:0}
		header .logo img {width:auto; height:auto; max-width:100%; max-height:52px; display:inline-block; vertical-align:middle}
		.title-area.home img {max-height:250px}
				
		/* Menu System */
		.toggleNav {position:absolute; z-index:12; right:2.5vw; top:2.5vw; color:white;
	
		display: inline-block;
		    background: #101010;
		    border: 0;
		    font-size: 17px;
		    line-height: 100%;
		    padding: 12px 20px 8px;
		    border-radius: 30px;
		    text-transform: uppercase;
		
	
	
	}
			.toggleNav a {color:white}
		.open-menu .toggleNav {position:fixed} 
			.open-menu .toggleNav a {} 
		
		.menu-panel {background:#436D65; position:fixed; z-index:11; overflow-y:auto; width:25% !important; top:0px; right:-100%; width:100%; height:100%; box-sizing:border-box; left:auto; transition:right 0.25s ease-in-out}
		.container.open-menu .menu-panel {left:auto;right:0px}
		
		.menu {padding:0}
		#menu * {box-sizing:border-box}
		#menu {list-style:none;margin:0;padding:17vw 0 0; display:block;clear:both}
		#menu li {position:relative;overflow:hidden; transition:all .4s ease; font-size:2.85vw; padding:0.15em 2.5vw; display:block}
		#menu li a {padding:0; font-weight:400; text-decoration:none; color:white}
        ul#menu {text-align: right}

	@media only screen and (max-width:1024px) {
		#menu {padding:100px 0 0}
		.menu-panel {width:300px !important}
		#menu li {font-size:2em; padding:0.15em 4vw}
		.title-area.home img {max-width:50%}
	}
	@media only screen and (max-width:767px) {
		header{padding:4vw 0}
		.toggleNav {right:4vw; top:4vw; font-size:0.9em}	
	}	
	@media only screen and (max-width:500px) {
		.menu-panel {width:250px !important}
		#menu li {font-size:1.75em}
	}
		





/* Banner */
.hero-banner {margin:0 0 20vh}
	.hero-banner figure {position:relative; z-index:1; width:100%; aspect-ratio:5 / 2 !important; overflow:hidden; display:block}
		 .hero-banner img {flex-grow:1;object-fit:cover; width:auto; height:auto; min-width:100%; min-height:100%; position:relative;z-index:1; top:50%;transform:translateY(-50%)}

	@media only screen and (max-width:767px) {
		.hero-banner {margin:0}
		.hero-banner figure {aspect-ratio:5 / 6 !important}
	}	 





/* Title Area */
.title-area {margin:10vh 0; position:relative}
.home .title-area {margin:2.5vw 0 10vh}
	.title-area .two-columns {align-items:end}
	.title-area h1 {text-transform:uppercase}
	.home .title-area .arrow-icon {margin:0}
	
	.title-area.no-gap-top {margin-top:0}
	.title-area.no-gap-bottom {margin-bottom:0}
	

	@media only screen and (min-width:768px) {
		.home .title-area .right-column .arrow-icon { text-align:right; left:auto; right:0px;}
		.title-area .arrow-icon {margin-bottom:0.5em}
		.title-area .right-column p:first-of-type {margin-top:0} 
	}
	@media only screen and (max-width:767px) {
		.title-area {margin:5vh 0}
		.title-area h1 {padding:0 0 0.5em}
		.home .title-area {margin:4vh 0 5vh}
		.home .title-area .arrow-icon {margin:5vh 0 0}
		.title-area span.light.small{display:block}
		.single-service .title-area.no-gap-bottom{margin:10vh 0}
		.single-service .title-area.no-gap-bottom h1{display:none}


	}
	.right-column.gap-left.align-right .arrow-icon.position-bottom{calc(2em - 2px);}




/* Service Listings & Case Study Pages */
.services h2 {margin:0.5em 0}

	/* Service Single Page*/
	.single-service .title-area h1,
	.single-project .title-area h1 {text-transform:none}
	.single-service .hero-banner {margin-top:10vh 0 0 !important}
	
	.single-project .arrow-icon {margin:1em 0}
	.single-project .left-column figure.eight-seven{margin-bottom:2em}
	.single-service .projects-slider {border-top:1px solid #101010; padding-top:12vh; margin-top:15vh}

	@media only screen and (min-width:1024px) {
		.single-service .forty-sixty .right-column.gap-right figure { width:calc(100% - 80px)}
		.single-service .section-spacer,
		.single-project .section-spacer {height:20vh}
		.single-project .left-column figure.eight-seven{margin-bottom:2em}

	}
	@media only screen and (max-width:767px) {
		.single-service .projects-slider {padding-top:10vh}
		.single-project .forty-sixty .left-column p.arrow-icon {margin-top:2em}
		.single-service .two-columns .clip-top-right.four-five{margin-top:3em}
		.single-service figure.right.eight-seven{padding-top:5vh}
		.single-service .two-columns .left-column{margin-top:1em}
		.single-project .left-column figure.eight-seven{margin-bottom:1em}
	}





/* Columns */
.align-right {text-align:right}

.two-columns .border-top {border-top:solid 1px #101010;padding-top:2em}

.three-columns{display:grid;grid-template-columns:repeat(3, 1fr);grid-column-gap:2em}
    .three-columns .column {border-bottom:solid 1px #101010}



	@media only screen and (max-width:1200px) {
		.cta .position-bottom {position:relative !important;bottom:0}
	}
	@media only screen and (min-width:768px) {
		.two-columns{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;grid-column-gap:2em;grid-row-gap:2em;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}
			.two-columns .left-column,
			.two-columns .right-column {height:100%; position:relative}
			.two-columns.vertically-align{align-items:center}
			.two-columns.vertically-align .right-column,.two-columns.bottom-align .left-column,.two-columns.vertically-align .left-column {height:auto}
			.two-columns.bottom-align{align-items:end}
			.two-columns.sixty-forty {grid-template-columns:60% auto}
			.two-columns.forty-sixty {grid-template-columns:auto 60%}
			.gap-left {padding-left:80px}
			.gap-right {padding-right:80px}
			.gap-top {padding-top:80px}
			
			.position-bottom {position:absolute !important;bottom:0}
			.position-bottom.right{right:0}
			.arrow-icon.position-bottom{bottom:-5px}

			.two-columns.sixty-forty .arrow-icon,
			.two-columns.forty-sixty .arrow-icon {margin-bottom:-2px}

			.single-project  .two-columns.forty-sixty .left-column p:first-of-type{margin-top:0 }
				
	}
	@media only screen and (max-width:767px) {
		.two-columns figure {margin:2em 0 1em 0}
		.three-columns{grid-template-columns:repeat(1, 1fr); grid-row-gap:4em; grid-column-gap:0em}
		.align-right {text-align:left}
		.two-columns.forty-sixty .right-column-gap-right figure.clip-top-left {margin-top:2em}
		.two-columns .left-column, figure.clip-bottom-right.eight-seven,
		.two-columns.vertically-align figure.clip-top-right.eight-seven {margin-top:2em}
		.two-columns.vertically-align figure.clip-top-left.eight-seven {margin-top:3em}
		.two-columns .left-column figure.clip-bottom-right.clip-bottom-right.four-five{margin-bottom:3em}
		.two-columns.sixty-forty figure.square {margin:2em 0}
		.two-columns.forty-sixty .left-column.gap-right.gap-top figure.eight-seven{margin-bottom:0}
		.single-project .two-columns.vertically-align .left-column.gap-left.gap-right {padding-bottom:3em}
		.single-project .two-columns.vertically-align .right-column .clip-top-right.eight-seven {padding-top:5vh}



	}






/* Clip Images */
.clip-top-left {clip-path:polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px); overflow:hidden}
.clip-bottom-right {clip-path:polygon(0 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%); overflow:hidden}
.clip-bottom-left {clip-path:polygon(0 0, 100% 0, 100% 100%, 80px 100%, 0 calc(100% - 80px));overflow:hidden}
.clip-top-right {clip-path:polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%) !important;overflow:hidden}
.clip-top-left-bottom-right {clip-path:polygon(80px 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%, 0 80px)}
.no-clip {clip-path:none !important}

/* Aspect Ratio */
figure {position:relative;z-index:1; width:100%; overflow:hidden; display:block}
figure.square {aspect-ratio:1 / 1}
figure.portrait {aspect-ratio:2 / 3}
figure.landscape {aspect-ratio:3 / 2}
figure.rectangle {aspect-ratio:2 / 1}
figure.four-five {aspect-ratio:4 / 5}
figure.five-four {aspect-ratio:5 / 4}
figure.seven-eight {aspect-ratio:7 / 8}
figure.eight-seven {aspect-ratio:8 / 7}



figure img {flex-grow:1;object-fit:cover; width:auto; height:auto; min-width:100%; min-height:100%; position:relative;z-index:1; top:0}

.project-template-default figure img {flex-grow:1;object-fit:contain; width:auto; height:auto; min-width:100%; min-height:10%; }
.project-template-default figure.eight-seven, 
.project-template-default .hero-banner figure {aspect-ratio: auto !important;}
.project-template-default .hero-banner figure img {aspect-ratio: auto !important;}
.project-template-default .hero-banner img {object-fit:contain; min-height:10%; top:0%;transform:translateY(0%)}



	@media only screen and (max-width:767px) {
		.clip-top-left {clip-path:polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0 50px); overflow:hidden}
		.clip-bottom-right {clip-path:polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%); overflow:hidden}
		.clip-bottom-left {clip-path:polygon(0 0, 100% 0, 100% 100%, 50px 100%, 0 calc(100% - 50px));overflow:hidden}
		.clip-top-right {clip-path:polygon(0 0, calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%) !important;overflow:hidden}
		.clip-top-left-bottom-right {clip-path:polygon(50px 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px)}		
	}





/* Button hover effect */
[h-effect] {position:relative;overflow:hidden}
.w-inline-block {max-width:100%;display:inline-block}
[h-effect] [h-item] {display:block}
[h-effect] [h-item]:nth-child(2) {position:absolute;top:0;left:0}





/* Opacity scroll */
.content{text-align:center;padding:50px;color:#101010}
.fade-text{transition:opacity 0.2s ease;/* Smooth transition for opacity */}





/* Accordion */

	@media only screen and (min-width:768px) {
		
		.accordion {width:100%; min-height:1px; margin:18vh 0; clear:both;  border-bottom:1px solid black}
		.accordion-item {cursor:pointer; display:block; height:90px; overflow:hidden; text-decoration:none; padding:1em 0; margin:0; border-top:1px solid black; transition:all 0.5s ease}	
		.accordion-item:hover {height:60vh}	
		
		.accordion .grid {display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;grid-column-gap:2em;grid-row-gap:0px; margin:0}
		.accordion-item:hover .title,
		.accordion .accordion-item--default .title {font-size:3.5em}
		
		.accordion-item .arrow-icon {font-size:85%; padding-bottom:1em}	
		.accordion-item .arrow-icon:before {top:0px}

		.accordion .title {transition:all .25s; font-size:1.75em; margin:0}

		.accordion-item .description p {display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:1.5em; margin:0.25em 0 0.75em}
		.accordion-item:hover .description p {display:-webkit-box;-webkit-line-clamp:17;-webkit-box-orient:vertical;overflow:auto;text-overflow:none;height:auto}

		.accordion .btn {color:white; margin:0.75em 0 0; position:relative}


		.accordion-desktop {width:100%; min-height:50px; margin:0; clear: both;}
		.accordion-item-desktop {cursor: pointer;display: block;text-decoration: none; padding:1.25em 0;margin: 0;border-top: 1px solid black;}
		.data.duplicate {padding:0 0 2em; margin-top:-2em; display:none; opacity:0;}
		.accordion-item-desktop.open .data.duplicate {opacity:1;}

		.accordion-grid {display: grid;grid-template-columns: 1fr 1fr; gap: 20px; align-items:center;}
		.accordion-desktop p.arrow-icon {margin: 0;}

		.accordion-grid p {margin:0 0 1em; padding:0;}
		.accordion-grid p.limited {transition:.1s ease-in-out; display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;height:1.5em; margin:0; padding:0;}
		.accordion-item-desktop .accordion-grid.firstline {}
		.accordion-item-desktop.open .accordion-grid p.limited {opacity:0;}
		.data.duplicate .accordion-grid {align-items:start; margin-top:0px;}
		.accordion-item-desktop.open h3 {font-size:3em;}



		.accordion-mobile {display:none}
	}
	@media only screen and (min-width:768px) and (max-width:1300px) {
		.accordion-item:hover .description p {-webkit-line-clamp:12}
	}
	@media only screen and (min-width:1801px) {
		.accordion-item:hover {height:50vh}
	}
	@media only screen and (max-width:767px) {
		.accordion {display:none}
		
		/* Mobile Accordion */
		.mobile-testimonials {margin:15vh 0; border-bottom:1px solid black}
		.accordion-mobile { width:100%; min-height:50px; margin:0; clear:both}
			.accordion-item-mobile {cursor:pointer; display:block; text-decoration:none; padding:1em 0; margin:0; border-top:1px solid black}
			.accordion-mobile h3.title {font-family:'Bandeins Sans'; font-size:1.5em; margin:0.25em 0 0}
			.accordion-mobile p.arrow-icon {margin:0}
			.accordion-mobile .data {padding:0 0 1em 0; display:block; display:none}
			.accordion-mobile .btn{margin:1.5em 0}
		
		.page-id-101 .mobile-testimonials {margin:8vh 0 10vh 0}
	}










/* Radio Btns */
.radio-group {display:flex; flex-direction:column; gap:15px; margin:3vw 0 1vw}
	.radio-group label {display:flex;align-items: center;gap:10px;text-transform:uppercase; line-height:100%}
	.radio-group input[type="radio"] {width:12px;height:12px;appearance:none;border:1px solid #101010;cursor:pointer;display:inline-block; vertical-align:middle; position:relative;margin:0 0 2px}
	.radio-group input[type="radio"]:checked {background-color:#101010}

	@media only screen and (min-width:1025px) {
		.page-id-54 .title-area .two-columns {align-items:end}
	    .page-id-54 .title-area .two-columns .right-column{height:auto}
	}
	@media only screen and (min-width:768px) {
		.page-id-54 h1 {margin-bottom:0;height:auto}
		.page-id-54  .title-area .left-column {height:auto}
	}

	@media only screen and (max-width:767px) {
		.radio-group {margin:5vh 0 8vh 0}
	}




/* Page transition */
.load_grid {z-index:100002;width:100%;height:100vh;display:grid;grid-column-gap:0px;grid-row-gap:0px;grid-template-rows:auto auto auto auto auto auto auto auto;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;grid-auto-columns:1fr;display:none;position:fixed;top:0%;bottom:0%;left:0%;right:0%}
.load_grid-item {width:100%;height:100%;background-color:#436D65}







/* Arrow Icon */
.arrow-icon {position:relative; padding:0 0 0 22px; text-align:left; text-transform:uppercase}
.arrow-icon:before{content:""; position:absolute; top:0px; left:0px; margin-right:5px; width:16px; height:16px; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 11V0L0 11H11Z' fill='black'/%3E%3C/svg%3E");background-size:11px; background-position:center center; background-repeat:no-repeat}
p.arrow-icon:before{top:2px}





/* Reposition in Column */

figure.position-top-right.half-width{position:absolute;right:0}

.completion p.arrow-icon{position:absolute;bottom:0;right:80px}

.image-with-text-right-center .two-columns {align-items:center}
    .image-with-text-right-center .left-column-gap-left {padding-right:80px}
.large-right-column-image-text .two-columns-right-larger,.two-image-left-text-right .two-columns {align-items:end}
.large-left-image-with-right-image-text .two-columns-left-larger, {align-items:normal}

	@media only screen and (max-width:767px) {
		.completion p.arrow-icon{right:50px}
	}
	
	




 /* Two Columns Left Larger */
.two-columns-left-larger{position:relative; display:grid; grid-template-columns:60% auto; grid-template-rows:1fr; grid-column-gap:0px; align-items:end}

/* Projects */
    .project {border-bottom:solid 1px #101010}  
	.project figure { transition:.5s ease; position:relative;z-index:1; width:100%; aspect-ratio:6 / 4; overflow:hidden; display:block; clip-path:polygon(80px 0, 100% 0, 100% 100%, 0 100%, 0 80px)}
		.project figure img {flex-grow:1;object-fit:cover; width:auto; min-width:100%; min-height:100%; position:relative;z-index:1; top:50%;transform:translateY(-50%);width:100%}
		.project .arrow-icon {margin:1em 0}
		
	.projects-title-area h2 {text-transform:uppercase}

	

	.project figure::after, .project:nth-of-type(3n) figure::after, .services figure::after { content: ""; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 40px); height: 100%; background-image: url('https://rsds.wpgstage.com/wp-content/uploads/2024/11/Banner-optimized.svg'); background-repeat: no-repeat; background-size: contain; opacity: 0; transition: opacity 0.3s ease-in-out}
		.project:nth-of-type(3n) figure::after{ top: 65%; background-image: url('https://rsds.wpgstage.com/wp-content/uploads/2024/11/banner2.svg')}
    	.project figure:hover::after,.project:nth-of-type(3n) figure:hover::after, .services figure:hover::after { opacity: 1; z-index:1 }

		.project-types {margin:0 0 7vh}

		.single-project .two-columns .right-column.gap-left p:first-of-type{margin-top:0}

	@media only screen and (min-width:768px) {
		.projects-grid {display:grid;grid-template-columns:repeat(2, 1fr);grid-column-gap:2em;grid-row-gap:10vh; margin-bottom:10vh }
		.projects-grid .project:nth-of-type(3n) { grid-column:1 / span 2}	
		    .project:nth-of-type(3n) figure {aspect-ratio:5 / 2; clip-path:polygon(80px 0, 100% 0, 100% calc(100% - 80px), calc(100% - 80px) 100%, 0 100%, 0 80px)}	
		.projects-grid .project:nth-of-type(3n+2) figure {clip-path:polygon(0 0, calc(100% - 80px) 0, 100% 80px, 100% 100%, 0 100%);overflow:hidden}
		
		.single-project .title-area h1.medium {font-size:4.8vw !important}
		.single-project  .two-columns.forty-sixty .left-column p:first-of-type{margin-top:0 }
		.project-types:first-of-type h4{margin-top:0}
		.single-project .right-column.gap-left.align-right .arrow-icon.position-bottom{margin-bottom:calc(2em - 2px) !important;}
	}  
	@media only screen and (max-width:767px) {
		.projects-grid {margin-bottom:5vh}
		.projects-grid .project {margin:8vw 0; padding:4vw 0}
		.projects-grid .project:first-of-type {margin-top:0; padding-top:0}
		.projects-grid .project:last-of-type {margin-bottom:0}
		.project figure {clip-path:polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0 50px)}
		.project:nth-of-type(3n) figure::after { top: 75%;background-image: url('https://rsds.wpgstage.com/wp-content/uploads/2024/11/Banner-optimized.svg')}
		.project figure::after, .project:nth-of-type(3n) figure::after, .services figure::after {display:none}
		.projects-slider{margin-top:3em}
		.single-project .projects-slider{margin-top:6em}
		.single-project .hero {margin-bottom:6em}

		
		
	}




/* Button */
.button {background-color:black;color:white; padding:10px 20px; border:none; border-radius:25px;cursor:pointer;font-size:16px}



/* Swiper */
.projectsSwiper {padding-top:50px; margin-top:-50px}
.swiper-button-next,.swiper-button-prev{display:inline-block; position:absolute;top:0px;right:0px;color:inherit;width:80px; height:40px;padding:0;margin:0;padding:0 20px 0 0}
.swiper-button-prev {left:auto !important;right:80px; padding:0 0 0 20px; width:100px}
.swiper-button-next::before,
.swiper-button-prev::before{content:'Next';margin:0;font-size:1em;height:40px;line-height:40px; text-transform:uppercase; position:absolute; right:20px; top:0px}
.swiper-button-prev::before{content:'Previous'; left:20px; right:auto}
.swiper-button-next::after,
.swiper-button-prev::after{font-size:0.85em !important;height:40px;width:20px;line-height:40px;position:absolute;right:0px;top:0px;text-align:center}
.swiper-button-prev::after{right:auto;left:0px}

	@media only screen and (max-width:767px) {
		.projectsSwiper {padding-top:50px; margin-top:0px}
		.swiper-button-prev {left:0px !important;right:auto}
	}




/* About Pages */


	@media only screen and (min-width:768px) {
		section.stages:first-of-type{backgound:red}
		.stages .two-columns {align-items:start}
		.stages .right-column p.arrow-icon {margin-top:0}
	}
	@media only screen and (max-width:767px) {
		.page-id-20 .two-columns.forty-sixty .btn {margin-bottom:5vh}
		.page-id-20 .images-container {display:none}
		.stage {margin:2em 0}
		.desktop-only {display:none}
		.stages .right-column {margin-top:4em}
	}





/* Featured project */
.featured-project {margin:10vh -2.5vw; text-align:center; min-height:100vh; position:relative; padding:30vh 0 0}
.featured-img-text {position:absolute; z-index:1; top:0px; left:0px; width:100%; height:100%}
.featured-img-text img {width:100%; height:auto; display:block}
.featured-project .feauted-img { position:relative; z-index:2; margin:0 auto; display:inline-block}
	.featured-project .feauted-img img {width:auto; height:auto; max-height:45vw; display:inline-block}

	@media only screen and (min-width:768px) {
		.featured-project p.arrow-icon {position:absolute; z-index:4; bottom:60px; left:10vw; width:40vw; color: black; mix-blend-mode: color-dodge}	
        p.arrow-icon.white {color: white;bottom: 76px}
		.featured-project .btn {position:absolute; z-index:3; bottom:3px; left:10vw}	
		.featured-project .btn.btn-alt {position:absolute; z-index:3; top:25.5vw; right:24vw; left:auto; bottom:auto}
		.mobile-only {display:none}
	}
	@media only screen and (max-width:767px) {
		.featured-project {margin:5vh -4vw 0; padding:20vh 0 0; min-height:10vh; text-align:left}
		.featured-project .feauted-img {text-align:center; display:block}
		.featured-project .feauted-img img {max-width:66vw}
		.featured-project p.arrow-icon {margin:2em 2vw}
		.featured-project .btn {margin:0 4vw;   text-align:left}
		.clear {display:block; width:100%; height:1em}
		.featured-project .btn.btn-alt {position:absolute; z-index:3; top:35%; right:4vw; left:auto; bottom:auto}
		.featured-project .arrow-icon.white {display:none}
	}





/* Call to action */
.cta {margin:20vh 0}
.cta .btn {margin:1.5em 0}
.cta p.arrow-icon {margin:0 0 -3px}

	@media only screen and (min-width:1240px) {
		.cta figure.four-five {aspect-ratio:5 / 5}
	}
	@media only screen and (min-width:1540px) {
		.cta figure.four-five {aspect-ratio:5 / 4}
	}
	

	@media only screen and (min-width:768px) {
		.cta .right-column {padding-bottom:60px}
		.cta p.arrow-icon {max-width:450px}
	}
	@media only screen and (max-width:767px) {
		.cta {margin:10vh 0}
		.cta figure {margin:0 0 1.5em}
		.cta figure, .cta figure img {max-width:50vw}
		.cta .left-column {display: flex ; justify-content: flex-end} }
		.cta h2{margin-top:25px}
		.cta .btn {margin:1.5em 0 3em 0}
		





/* Contact Page */

.contact-form {margin:10vh 0}

	/* Form Styling */
	.wpcf7 p {font-size:4vw; font-family:'Bandeins Sans'}
	.wpcf7 input, .wpcf7 label, .wpcf7 select, .wpcf7 button, .wpcf7 textarea {border:0; max-width:100%; outline:none; border-bottom:1px solid #101010; text-align:center; font-family:"Bandeins Sans"; font-size:16px; padding:1em 0}
	.wpcf7 input.wpcf7-submit{display:inline-block;background:#101010;color:white;border:0;line-height:100%;padding:12px 20px;border-radius:30px;text-transform:uppercase;cursor:pointer}
	.wpcf7 .wpcf7-acceptance input,
	.wpcf7 .wpcf7-acceptance label {border:0; font-size:16px; padding:0}
	.wpcf7 .wpcf7-not-valid-tip {font-size:16px; display:inline-block; padding:0}

	/* Contact Form 7 output */
	div.wpcf7-response-output {border:0 !important; padding:0 !important; margin:0 !important; color:red}
	div.wpcf7-mail-sent-ok {}
	.wpcf7-not-valid-tip {display:block; padding:0; color:red !important}

	@media only screen and (min-width:768px) {
		.title-area.contact p.arrow-icon{ position:absolute; bottom:0px; right:0px}
	}
	@media only screen and (max-width:767px) {
		.contact-form {margin:10vh 0}
		.wpcf7 p {font-size:2em}
		.wpcf7-list-item {margin:0 !important}
		.submit-btn {display:block;max-width: fit-content;margin: 2em 0 1em 0}
	}
	@media only screen and (max-width:500px) {
		.wpcf7 p {font-size:1.75em}
	}




/* Footer */
.footer {background-color:#436D65; padding:2.5vw 0 2vw}
.footer, .footer a {color:white}
.footer ul, .footer ul li {list-style-type:none; margin:0; padding:0}
.footer ul li {padding:0.25em 0; display:block}
.footer img {height:auto !important}
.credits {border-top:1px solid white; margin-top:2vw ; padding-top:2vw; text-transform:uppercase; font-size:0.85em}
.quicklinks-grid {display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;grid-column-gap:3em;grid-row-gap:3em}

.footer .right-column {text-align:right}

	@media only screen and (min-width:768px) {
		.footer .two-columns {margin-bottom:3em}	
		.footer .two-columns.credits {margin-bottom:0}
	}
	@media only screen and (max-width:767px) {
		.footer {padding:1.5em 0.5em}
		.footer .right-column {text-align:left}
		.footer .right-column.align-right img {width:22% !important; display:inline-block; vertical-align:middle}
		.footer .column {padding:0 0 2em}
		.footer .logo img {display:none}
		.quicklinks-grid {grid-column-gap:1em;grid-row-gap:0em}
		.two-columns.credits {margin-top:2em; padding-top:2em; display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;grid-column-gap:0;grid-row-gap:0;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}
	}






/* Parallax images */
.parallax-section {position:relative; overflow:hidden}
.text-wrapper {padding:15vh 0 0}
.text-container {position:relative; z-index:3; margin:0}
.text-container h1 {margin:0; padding:0; line-height:125%; font-size:8.5vw; color:#101010;text-transform:uppercase}
.images-container {position:absolute; z-index:1; width:100%;min-height:325vh;pointer-events:none;overflow:hidden}
.parallax-image {z-index:1;position:absolute;max-width:28%}
.parallax-image img {mix-blend-mode:lighten}
.image-1 {top:0;right:2vw;transform:translateY(50%)}
.image-2 {top:40%;left:2vw;transform:translateY(50%)}
.image-3 {top:40%;right:16.66%;transform:translateY(50%)}
.image-4 {bottom:42%; left:16.66%;transform:translateY(50%)}

	/* Testimonials page */
	.page-id-101 .images-container {min-height:210vh}
	.page-id-101 .image-1 { top: -5%}
	.page-id-101 .image-3 {top:30%; right:35%}
	.page-id-101 .image-2 {top:100%}
	


	@media only screen and (min-width:1024px) {
		.image-4 {bottom:42%}
		
	}
	@media only screen and (min-width:1600px) {
		.images-container { min-height: 300vh}
		.page-id-101 .images-container {min-height:180vh}
		.image-4 {bottom:28%}
		.page-id-101 .image-1 { top: 0}
	}	
	@media only screen and (min-width:2400px) {
		.image-4 {bottom:25%}
		.images-container {min-height:240vh}
		.page-id-101 .images-container{min-height:130vh}
		.page-id-101 .image-3 { top: 40%}
	}	
	@media only screen and (max-width:768px) {
		.images-container {min-height:300vh}
	}
	@media only screen and (max-width:767px) {
		.text-wrapper {padding:5vh 0}
		.text-container h1 {font-size:8vw}
		
		.image-1 {top:0px; right:0}
		.home .image-1 {top:7%; right:0}
		.image-2 {top:30%; left:0}
		.image-3 {top:17%; right:35%; clip-path: polygon(50px 0, 100% 0, 100% 50px, 50px 100%, 0 100%, 0 50px)}
		.image-4 {bottom:75%}
		.page-id-101 .image-3 {clip-path: polygon(50px 0, 100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 50px)}
		
		.page-id-101 .images-container {height:66vh}
		.page-id-101 .image-1 {top:-90%}
		.page-id-101 .image-2 {top:-50%}
		.page-id-101 .image-3 {top:75%; right:auto; left:10vw}
		.page-id-101 .images-container { min-height: 60vh}
		
	}






/* 404 Page */
.fourOfour {text-align:center; padding:20vh 0}




/* new page load animations (Jonathan 271124)*/

:root {--panel-width: calc(100% / 10);--darkblue: #436D65;--white: #fff;--lightgray: #436D65}
.panels .panel {position: fixed;top: 0;left: 0;bottom: 0;width: calc(var(--panel-width) + 1px);clip-path: inset(100% 0 0 0);background: var(--lightgray);transition: all 1s cubic-bezier(0.25, 1, 0.25, 1);z-index: 100003}
.panels .panel:nth-child(2) {left: var(--panel-width)}
.panels .panel:nth-child(3) {left: calc(var(--panel-width) * 2)}
.panels .panel:nth-child(4) {left: calc(var(--panel-width) * 3)}
.panels .panel:nth-child(5) {left: calc(var(--panel-width) * 4)}
.panels .panel:nth-child(6) {left: calc(var(--panel-width) * 5)}
.panels .panel:nth-child(7) {left: calc(var(--panel-width) * 6)}
.panels .panel:nth-child(8) {left: calc(var(--panel-width) * 7)}
.panels .panel:nth-child(9) {left: calc(var(--panel-width) * 8)}
.panels .panel:nth-child(10) {left: calc(var(--panel-width) * 9)}
.main-content>div>* {opacity: 0;transition: all 0.5s ease-out}
.loaded .panels .panel {clip-path: inset(0);transition-delay: calc(var(--index) * 0.06s)}
.loaded.second-round .panels .panel {clip-path: inset(0 0 100% 0)}
.loaded.third-round {overflow: auto}
.loaded.third-round .main-content>div>* {opacity: 1;transform: none}