:root{




--colorborder: #4A4643;
--darkgrey: #0F0E0C;
--beige: #A8A3A1;
--lightbeige: #EAE3E1;
--white:#faf8f3;
--accent: #a3a394;
--paddingwebsite:2rem;




--primary: var(--white);
--background: var(--darkgrey);
--primary-muted: var(--beige);

--logocolor: var(--primary:);



/* @link https://utopia.fyi/type/calculator?c=360,16,1.25,1440,18,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */


  --step--2: clamp(0.6331rem, 0.6423rem + -0.0102vw, 0.64rem);
  --step--1: clamp(0.8rem, 0.7853rem + 0.0651vw, 0.844rem);
  --step-0: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1668rem + 0.3698vw, 1.4996rem);
  --step-2: clamp(1.5625rem, 1.417rem + 0.6467vw, 1.999rem);
  --step-3: clamp(1.9531rem, 1.7159rem + 1.0541vw, 2.6647rem);
  --step-4: clamp(2.4414rem, 2.0712rem + 1.6453vw, 3.552rem);
  --step-5: clamp(3.0518rem, 2.4907rem + 2.4934vw, 4.7348rem);


}
body{
    background:var(--background);
    color: var(--primary);
    margin: 0px;

 font-family: 'EuclidCircularA', sans-serif;


line-height: 1.6;

font-size: var(--step-0);
position:relative;

  
}


.global-wrapper{padding:calc(var(--paddingwebsite) / 2); }


h1, h2, h3, h4, h5{ font-weight: 400; margin-block: 0; margin-inline: 0}
h1{font-size: var(--step-3); text-wrap: pretty; line-height: 100%; }
h2{font-size: var(--step-3); max-width: 35ch; text-wrap: pretty;  line-height: 110%; letter-spacing: -1px}
h3{font-size: var(--step-2); max-width: 35ch; text-wrap: pretty;  line-height: 110%; letter-spacing: -.5px}

.sectiontitle{font-size: var(--step--1); color:var(--beige); text-transform: uppercase;letter-spacing: 2px; margin-bottom: 2rem}

header{
    position: fixed;

    width:calc(100% - var(--paddingwebsite)); 
        display: grid;
    grid-template-columns: 0.96fr 1.04fr 1fr;
top:0;
    height: calc(var(--paddingwebsite) / 2);
    z-index:99;
  background:var(--background);
     border-bottom: 1px dashed var(--colorborder);
}


a{color:unset}

.menu{

    width: 100%;
    
    grid-column: 3 / 3;
    background: transparent;
 
   
    display: flex;

    align-items: center;
    text-transform: uppercase; 
    font-size: var(--step--1);
    color:var(--beige);
    letter-spacing: 2px; 





 }



.grid{
	display: grid;
	grid-template-columns: 0.96fr 1.04fr 1fr;
	height:100%;
	border: 1px dashed var(--colorborder);

}

.hero{height:47svw}

.hero > .three{padding: 1rem 2rem 2rem 2rem}

.one{
	
	width: 100%;

    font-size: var(--step-3); max-width: 30ch; text-wrap: pretty;

}


{}

.one > p, .one > h2 {
   
    margin-block: 0em;
   line-height: 130%;

}


.two, .testimonials > figure:nth-child(2){
	
	border-left: 1px dashed var(--colorborder);
	border-right: 1px dashed var(--colorborder);
}




figure{

margin-block: 0;
 
    margin-inline: 0px;

    padding: 0rem;

}




blockquote {
    display: block;
    margin-block:0em;
    margin-inline: 0px;
    font-size: var(--step-0);
max-width: 50ch;
margin: 0;
color: var(--primary-muted);
}
blockquote > span {color:var(--primary)}

figcaption{
  font-size: var(--step--1);
  display: flex;
    flex-direction: column;
     line-height: 140%;
    color:var(--primary-muted);


    


margin-top: 1rem;
}

cite {
    font-style: normal !important;color: var(--primary-muted);
}


.testimonials > figure{padding:4rem; display: flex;
    flex-direction: column;
        justify-content: flex-start;}


.line-one-logo{height:1px; background: white}

.logo{
	grid-column: 1 / 3;
z-index:2;
margin: 0px 0 0 2px;
color: var(--logocolor);
}

.logo > svg {height:auto}
.grid-logo{ pointer-events: none; position: absolute;top:calc(var(--paddingwebsite) / 2); left: calc(var(--paddingwebsite) / 2); height:100%; width:calc(100% - var(--paddingwebsite)); border:none}
.lines-logo{pointer-events: none;position: absolute;top:calc(var(--paddingwebsite) / 2 - 6px); left:calc(var(--paddingwebsite) / 2); height:auto;  width:calc(100% - var(--paddingwebsite)); border:none; }


.gridfooterlogo{position: relative;}

.gridfooterlogo > .grid-logo{position: relative; height:auto; overflow: hidden; top:0; left:0; width:100%}
.gridfooterlogo > .grid-logo > .logo{ height: auto;     margin-bottom: -30px;}


.footerlogo > .lines-logo{ top:0; left:0; width:100% }
  .grid.about {
        grid-template-columns: 1.48fr 1.52fr;
        height: auto;
        margin-top: -1px;
    }

.website{border-right: 1px dashed var(--colorborder); height:100%;  }
.estd, .website{color: var(--primary-muted);display: flex; flex-direction: row; justify-content: space-between;align-items: center; padding: 0 5%; text-transform: uppercase;}

.stats{grid-column: 3 / 3; border-left: 1px dashed var(--colorborder); height:100%;
display: grid; grid-template-rows:1.125fr 2.8fr 1.65fr; grid-template-columns: 3.15fr 1.85fr;
}

.renewables{grid-row: 3 / 3; grid-column: 1 / 3;display: flex;
    justify-content: center; }
.renewables > svg {width: 90%; margin: auto}
.privacy{padding: 0 5%;}
.average{grid-row: 2 / 3; height:100%; width: auto;display: flex;
    justify-content: center; border-right: 1px dashed var(--colorborder);padding: 0 5%; }


.grid.casestudy{
	margin-top: -1px;
	height:auto;
    border-bottom: none;
}


.grid.profile{ 

 border-bottom:none;
  border-top:none;
     height:auto;
 grid-template-columns: 1.48fr 1.52fr;
 }

.grid.profile:has(.description){ 

 border-bottom: 1px dashed var(--colorborder);

     
 }




 .grid.footer{ 
 grid-template-columns: 1fr;
height:auto;
border-top: none;
 }


.footer > .left{padding:2rem; display: flex; flex-direction: column; justify-content: flex-end; max-width: 35ch; gap:1rem}


.enquiries-mail{font-size: var(--step-3); text-decoration: none }

.smallprints{

font-size: var(--step--1); color:var(--beige);

}

.grid.testimonials{
    display: grid;
    grid-template-columns: 0.96fr 1.04fr 1fr;
    min-height:30svh;
        height: auto;
    border: 1px dashed var(--colorborder);

}

.three{display: flex;    flex-direction: column;
    justify-content: space-between;padding: 1rem; position: relative;}




.casestudy > div{display: flex;    flex-direction: column;
    justify-content: flex-end;padding: 2rem; position: relative;

border-bottom: 1px dashed var(--colorborder);}
.casestudy > .three{padding:0}


.casestudy > .three > picture{width:100%; }

.casestudy > .three > picture > img{ width:100%;     aspect-ratio: 1 / 1;
    object-fit: cover;}

.three{position: relative; }

.three > button{ position: absolute; bottom: 2rem; right: 2rem; width:50px; height:50px; border-radius:99999px; border:none; background-color:var(--primary); color:var(--background); font-size:var(--step-2); cursor:pointer }

.picture-two{display: none; position: absolute; height:100%; width: 100%;}    



.casestudy:last-child::after{
content:none;
   }
.casestudy:last-child > div{
border-bottom:none;
   }

.menu ul{list-style-type: none; display: flex;
    gap: 1rem;

margin-block:0; padding-inline: 0}

.section-casestudies{position: relative;}
.section-casestudies > h2{ position:absolute; top: .5rem; left:.5rem; z-index:9; margin-block:0; font-size:var(--step--1); color: var(--beige); text-transform:uppercase;letter-spacing:2px }
.section-casestudies > h2::after{content:"\2193"; margin-left:.25rem}



.casestudies > div{position: sticky; top:0; background: var(--background)}


.casestudies > div:nth-child(1){ top: 0rem; }
.casestudies > div:nth-child(2){ top: 6rem; }
.casestudies > div:nth-child(3){ top: 12rem; }
.casestudies > div:nth-child(4) { top: 18rem; }
.casestudies > div:nth-child(5) { top: 24rem; }



    .two{
    
    font-size: var(--step-0);
   color: var(--beige);

   padding-top:0 !important;
    
}

.two p{ max-width: 60ch;     font-size: var(--step-1) }
.two p > span{color:var(--primary)}


.about > .one {


 	position: sticky;
 	top:0;

 display: flex;
    padding: 4rem ;

    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap:2rem;
}

.about > .two{display: grid; grid-template-columns: 1fr 1fr }

 .process{

 	height: auto;
 	position: relative;
 	top:0;
    background: var(--background);
    padding:4rem;
     padding-bottom: 2rem;
     display: flex;
     flex-direction: column;
     padding-bottom: 6rem;

 }   


.process-content > svg {width:100px; height:auto; margin-bottom: 15svh }
.process-content > h3 {font-size: var(--step-0); text-transform: uppercase;letter-spacing: 2px; color:var(--primary)}

.process:nth-child(1){ border-right:1px dashed var(--colorborder); border-bottom:1px dashed var(--colorborder);  }
.process:nth-child(3){ border-right:1px dashed var(--colorborder);}
.process:nth-child(4){  border-top:1px dashed var(--colorborder); }




.process-content{

    max-width: 45ch;
    
    
   
    color: var(--primary-muted);
    display: flex;
    flex-direction: column;
    gap:1rem;
    font-size: var(--step--1); 
}

.services{list-style-type: none; text-transform: uppercase;letter-spacing: 1px; padding: 0; font-size: var(--step--1);   margin-block: 0;display: flex; flex-direction: column;gap:.5rem}

.casestudy h3 {
   margin-bottom: 0rem;

    font-size: var(--step-2);
    margin-block: 0em;


}










.name{font-size: var(--step--1); color:var(--beige);max-width: 60ch; line-height: 140%;  }

.description{grid-column:1 / 2;  border-right: 1px dashed var(--colorborder);

font-size: var(--step-0); 
color: var(--primary);
text-wrap: balance;
    position: relative;
    padding:4rem;
}


.description > div{
 display: flex;
    flex-direction: column;
    justify-content: flex-start;

height: 80svh;
color: var(--primary-muted);

}

.description p {font-size: var(--step-1)}

.about-title{    position: relative; color:var(--primary)}
.profilepic{width:100px; border-radius: 99999px; position:absolute; right:2rem; top:-4rem; transform:rotateZ(10deg); border: 1.5px dashed var(--colorborder); padding:4px; background: var(--background) }

.contactlinks{ display:flex; flex-direction:column;justify-content: space-between ;   font-size:var(--step-0); 


  border-left: 1px dashed var(--colorborder);   border-right: 1px dashed var(--colorborder);;




   }
.contactlinks > a{height:100%; padding:4rem; font-size: var(--step-2); text-decoration: none; display: flex; flex-direction: column;justify-content: center;}
.maillinks {background: hsl(from var(--primary-muted) h s l / 20% );}
.contactlinks > a > span{

font-size: var(--step--1);

    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;

}

.mastodon {background: hsl(from var(--primary-muted) h s l / 12% );color:var(--primary-muted)}
.linkedin {background: hsl(from var(--primary-muted) h s l / 6% );color:var(--primary-muted)}

.bookacall{font-size: var(--step-3) !important; text-decoration: none}


.linkscall{display: flex; flex-direction: column;justify-content: center; background: hsl(from var(--primary-muted) h s l / 40% );
 outline:1px hsl(from var(--primary-muted) h s l / 40% ) solid}

.intro{height: auto;}


.contactlinks > a:hover{background: var(--primary-muted); color:var(--background)}
.intropart{grid-column: 1 / 4;  position: relative; padding: 2rem;  font-size: var(--step-3);}

.intro-section{height:100svh; display: flex; align-items: center;
    flex-direction: column;
    justify-content: center;

font-size: var(--step-3);

margin:auto;
height:100svh;position: sticky; top:0; 

view-timeline-name: --introOut; 
animation-timeline:  --introOut;
animation-name: fadeOutIntro;

text-align: center;

}


.intro-section h2,.intro-section p {max-width: none; margin: 0}
.more{
text-transform: uppercase; letter-spacing: 3px; width: 120%; }

.more-section{ height: auto;  overflow: hidden;

position:fixed;
 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  width:100%;
display:none;
opacity: 1;


}

.less-section{
position:fixed;
 top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  width:100%;
display:none;
opacity: 1;
;

}

.less{ height: 100svh; display: flex; align-items: center;}


.section-text-animation-less{

    height: 400svh;
 
}


.section-text-animation-more{

    height: 700svh;
    margin-bottom:200svh;
   
}

.section-intro{

    height:300svh;
}

@keyframes fadeOutIntro {
  0%,30% {
    opacity: 0;
  }

35%,70% {
    opacity: 1;
  }
  75%, 100% {
    opacity: 0;
  }
}


.description-services{font-size: var(--step-1); max-width: 50ch; color:var(--primary-muted)}

/* MOBILE */

@media only screen and (max-width: 980px) {

.section-text-animation{

    height: 600svh;
}


.intropart{padding:0rem; padding-left:1rem;}

                .global-wrapper{padding:10px;}

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

            .section-casestudies > h2{margin-top: -2rem; margin-left: 1rem}


            .casestudies > div:nth-child(1){ top: 0rem; }
            .casestudies > div:nth-child(2){ top: 3rem; }
            .casestudies > div:nth-child(3){ top: 6rem; }
            .casestudies > div:nth-child(4) { top: 9rem; }


            .grid-logo{top:11px; left: 11px; width: calc(100% - 20px)}
                .hero{height:76svh}



              .grid.casestudy, .grid.about, .grid.about, .grid.testimonials, .grid.profile, .grid.footer  {
                    grid-template-columns: 1fr;
                    height: auto;
                }


             .process{

                height: auto;
                position: relative;
               
             } 

                .two{
                
                border:none;

            }


            .about > .one{position: relative; height: auto}


                .logo {
                    grid-column: 1 / 2;
                }

                .line-45{display: none}


            .enquiries-mail,.one {
                font-size: var(--step-2);
              
            }


            h1{ margin-left: 0rem; 
                margin-block: 0;
            margin-bottom: 2rem;
            }


            .casestudy > .three {
                padding: 0;
                grid-row: 1 / 2;
            }


}

/* ONLY DESKTOP */

@media only screen and (min-width: 980px) {
.casestudy::after{
content:"";
   grid-column: 2 / 3;
border-left: 1px dashed var(--colorborder);
    border-right: 1px dashed var(--colorborder);
width:100%;
height:45svh}

}

/* FONT */

@font-face {
  font-family: 'EuclidCircularA';
  src: url('EuclidCircularA-Regular-WebTrial.woff');
  font-weight: 400;
}