@import url(https://fonts.bunny.net/css?family=libre-franklin:400,700);


:root {
   

/* @link https://utopia.fyi/type/calculator?c=360,16,1.5,1240,18,1.618,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
--learn-background: #024c28;
--learn-text: #9cff45;

--measure-background: #5b0c3c;
--measure-text: #ff85cf;


--build-background: #ff4300;
--build-text: #ffe346;


--strategy-background: #202b4e;
--strategy-text: #7ed4fd;


 --step--2: clamp(0.5628rem, 0.55rem + 0.0566vw, 0.5939rem);
  --step--1: clamp(0.7502rem, 0.7135rem + 0.163vw, 0.8398rem);
  --step-0: clamp(1rem, 0.9233rem + 0.3409vw, 1.1875rem);
  --step-1: clamp(1.333rem, 1.1914rem + 0.6293vw, 1.6791rem);
  --step-2: clamp(1.7769rem, 1.5325rem + 1.0862vw, 2.3743rem);
  --step-3: clamp(2.3686rem, 1.9641rem + 1.7975vw, 3.3572rem);
  --step-4: clamp(3.1573rem, 2.507rem + 2.8905vw, 4.7471rem);
  --step-5: clamp(4.2087rem, 3.1845rem + 4.5522vw, 6.7124rem);
  --step-6: clamp(5.6102rem, 4.0225rem + 7.0567vw, 9.4914rem);
  --step-7: clamp(7.4784rem, 5.0475rem + 10.8044vw, 13.4208rem);

  --mainfont: 'UfficioDisplay', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  --bodyfont:  Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  --bodyfont: 'Libre Franklin', sans-serif;;


  --offwhite: hsl(54 4% 95%);
  --offblack: hsl(0 34% 12%);


--textcards: var(--offwhite);
--backcards:var(--offblack);


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

  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5486rem + 0.0617vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8611rem + 0.0617vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0972rem + 0.1235vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6458rem + 0.1852vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1944rem + 0.2469vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2917rem + 0.3704vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3889rem + 0.4938vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.5833rem + 0.7407vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2431rem + 0.3086vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4792rem + 0.3704vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7917rem + 0.3704vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.9583rem + 0.7407vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.5069rem + 0.8025vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.9167rem + 1.4815vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 3.0139rem + 1.6049vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.8333rem + 2.963vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.8194rem + 1.358vw, 2.5rem);


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


 --grid-max-width: 122.50rem;
  --grid-gutter: var(--space-s-l, clamp(1.125rem, 0.8156rem + 1.375vw, 2.5rem));
  --grid-columns: 12;

}



* {
   box-sizing: border-box;
}


html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--offwhite);
}

body{
	font-family: var(--bodyfont);
	
	color: var(--offblack);
	font-size: var(--step-0);
	margin: 0;
	
	  

}
p {

margin-block: 1rem;
line-height: 1.4;
    letter-spacing: -.15px;

}


hr{width:100%;
    height: 2px;
    background-color: hsl(0 34% 12% / 0.2);
    border:none;

}


ul, li{font-size: inherit;}
li{margin-block: 1rem}

.textblock p {
	line-height: 1.5;
	text-wrap: pretty;
}
.textblock > * + * {
	margin-top: 1em;
}

.note .textblock > p {

	line-height: 1.5;
	font-size: var(--step-0);
	opacity: .8;
	letter-spacing: -.1px;
	text-wrap: pretty;
	font-weight: 500;


}

.note-footer{margin-top: 4rem}

.wrapper-article{display: flex;
flex-direction: column;
gap:1rem}


.wrapper-article h2{margin-top:4rem}

.article-tags {
    font-size: var(--step--1);
}

a{color:unset; font-weight: 700}



h1{
	font-family: var(--mainfont);

	font-size: var(--step-5);
	line-height: .95;
	margin: 0;
	max-width: 15ch;

	letter-spacing: -2px;
}


h1, h2, h3, h4, h5, h6{
	margin-block: 0;
}


blockquote{
	font-size: var(--step-2);
	font-family: var(--mainfont);
	line-height: 1.2em;

	padding: 4rem;
margin:0;
	
		color: var(--textcards);
background-color: var(--backcards);
max-width: 50ch;
margin: auto;
	
}

blockquote > footer{
	font-size: var(--step-0);
	font-family: var(--bodyfont);
	font-weight: 700;
	opacity: .8;
	
}



.logo{

	font-family: var(--mainfont);
	text-transform: uppercase;
	
	line-height: 0.8;
	margin: 0;
	
color: unset;
text-decoration: none;
  
font-size: var(--step-2);



}


.logo.homepage{


	font-size: var(--step-3);
/*@media screen and (max-width: 1680px) {
font-size: 8vw;

	}
			@media screen and (min-width: 2100px){
	font-size: calc(var(--step-4) - 2rem);

	} */

}

.mainfooter > h2{

	letter-spacing: 7px;
	font-size: var(--step-1);
	text-align: center;

		@media screen and (max-width: 768px){
font-size: var(--step-0);
letter-spacing: 3px;
	}
	
}


.mainfooter h2{

	font-family: var(--mainfont);
	text-transform: uppercase;
	font-size: var(--step-3);
	line-height: 0.8;
	margin: 0;
	margin-bottom: 2rem; 
	
}

.mainfooter a{

	color: var(--offwhite);
	
}



h2, .heading2{
	font-family: var(--mainfont);
	
	font-size: var(--step-2);
	font-weight: 600;
	
	line-height: 1;
	margin: 0;

}


h3, .heading3{

	font-family: var(--mainfont);
	font-size: var(--step-1);
	line-height: 1.1;
	margin: 0;

}

.intro{

	display: flex;

	align-items: flex-start;

	align-items: flex-start;
	justify-content: flex-end;
	    align-items: flex-start;
	gap: 0rem;
	flex-direction: column;
gap: var(--grid-gutter);
margin:auto;
width: -webkit-fill-available;


padding:10rem 4rem;
padding-bottom:6rem;

 background-color: unset;
	color:unset;


	
}

.wrapper-intro{
width:100%;
	max-width: var(--grid-max-width);
	margin:0 auto;
		display: flex;
flex-direction: column;
	align-items: flex-start;

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


.intro.center, .intro.center > .wrapper-intro{
display: flex;

	align-items: center;

	text-align: center;
	
}


.intro.bigcover{	height: 80svh;}

.intro.homepage  h1{max-width: 20ch; font-size: var(--step-5); }

h1 strong {  color:#ff85cf; }

.subheadline{font-size: var(--step-2); line-height: 1.3; max-width: 55ch; text-wrap: balance;     letter-spacing: -.5px;}
.intro-blog{
	height: 45svh;
	display: flex;
	align-items: flex-start;
	    justify-content: space-between;
	gap: 0rem;
	flex-direction: column;
	margin: 0 2rem;
 max-width: var(--grid-max-width);
  padding-inline: var(--grid-gutter);
  margin-inline: auto;
width: -webkit-fill-available;

background-color: var(--offwhite);
		@media screen and (max-width: 768px){
height: 30svh;
	}
	
}

.pagination{
	margin-top: 8rem;
	font-weight: 600;
	font-size: 3rem;
	
	padding-bottom: 1rem;
}


.pagination span{
	opacity: .4;
}

.pagination a{
	text-decoration: none;
opacity: 1;
}
main{
	

	margin: auto;
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-direction: column;

 margin: auto;

    

}



.introduction{

	font-size: 1rem;
	text-align: left;
	margin-bottom: 2rem;
	font-weight: 500;
	opacity: .6;
}


section:has(.introduction) > h2{margin-bottom: .5rem}

#flavours{
	width: 90%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0rem;
	padding-bottom: 8rem ;
text-decoration: none;
margin:auto;

	@media screen and (min-width: 2180px){
transform: translateX(-3%);
width: 106%;
	}
	@media screen and (max-width: 1280px){
grid-template-columns: repeat(2, 1fr);

	}



	@media screen and (max-width: 680px){
grid-template-columns: repeat(1, 1fr);

	}
}

#flavours.siblings{
width: 65%;
	grid-template-columns: repeat(3, 1fr);
	margin: auto;
    justify-content: center;
    align-items: center;
    justify-items: center;
	gap: 0rem;
}

#flavours a{

text-decoration: none;
aspect-ratio: 1 / 1;
cursor: pointer;
padding:0;
    width: 100%;
    height: 100%;
}

.card{
font-family: var(--mainfont);
font-size: var(--step-2);
border-radius: 1rem;
border: 0;
aspect-ratio: 1 / 1;
cursor: pointer;
display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 2rem;
	padding: 5% 15% 0 15%;
	line-height: 1;






		@media screen and (max-width: 1280px){
font-size: var(--step-2);

	}

		 @media screen and (max-width: 768px){
font-size: var(--step-3);
padding: 15% 15% 0 15%;

	 }


		@media screen and (min-width: 1280px) and (max-width: 1620px){
font-size: calc(var(--step-2) * 0.8);
padding-top:10%;

	}
}

.card span{

	font-size: var(--step--1);
	font-family: var(--bodyfont);
	padding: 0.5rem;
	border: 1px solid currentcolor;
	border-radius: .5rem;
	padding-top:0.7rem;

	 @media screen and (max-width: 768px){
font-size: var(--step-0);

	 }

}

.title-service{
display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem; text-align: center;
    margin-top: 3rem;

}



.subheadline-service{

font-size: var(--step--1);
line-height: 120%;
width: 70%;
	font-family: var(--bodyfont);
	font-weight: 400;

	

}

#card-learn{
	transform: rotate(-2deg);
	transition: transform 250ms ease-in-out;
	background-image: url('data:image/svg+xml,<svg width="327.164" xmlns="http://www.w3.org/2000/svg" height="334.246" id="screenshot-01c69789-47a6-8085-8007-12befa01912d" viewBox="25819.873 7227.614 327.164 334.246" style="-webkit-print-color-adjust::exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-01c69789-47a6-8085-8007-12befa01912d"><defs><clipPath id="frame-clip-01c69789-47a6-8085-8007-12befa01912d-render-1599" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="25819.8733631024" y="7227.613553157731" width="327.16388346707026" height="334.2459755360387" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"></rect></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(%23frame-clip-01c69789-47a6-8085-8007-12befa01912d-render-1599)" fill="none"><g class="fills" id="fills-01c69789-47a6-8085-8007-12befa01912d"><rect rx="0" ry="0" x="25819.8733631024" y="7227.613553157731" width="327.16388346707026" height="334.2459755360387" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background" style="fill:%23024c28;fill-opacity:1"></rect></g><g class="frame-children"><g id="shape-01c69789-47a6-8085-8007-12befa01912e" rx="0" ry="0"><g id="shape-01c69789-47a6-8085-8007-12befa019131"><g class="fills" id="fills-01c69789-47a6-8085-8007-12befa019131"><path d="M25934.515625,7542.63623046875C25876.65625,7522.28857421875,25835.1328125,7467.13671875,25835.1328125,7402.36376953125C25835.1328125,7320.32275390625,25901.748046875,7253.7158203125,25983.796875,7253.7158203125C26065.84765625,7253.7158203125,26132.462890625,7320.32275390625,26132.462890625,7402.36376953125C26132.462890625,7467.13671875,26090.939453125,7522.2890625,26033.078125,7542.63623046875L26157.822265625,7667.3935546875L25809.7734375,7667.3916015625L25934.515625,7542.63623046875" style="fill:%239cff45;fill-opacity:1"></path></g></g></g></g></g></g></g></g></g></svg>');
	will-change: transform;
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
color: #024c28;
}

#card-learn:hover{

	transform: rotate(1deg) translateY(-2rem);

}


#learn{
	background-color: #9cff45;
	color: #024c28;
}

#card-measure{
	transform: rotate(4deg);
	transition: transform 250ms ease-in-out;
	background-image: url('data:image/svg+xml,<svg width="327.164" xmlns="http://www.w3.org/2000/svg" height="334.246" id="screenshot-01c69789-47a6-8085-8007-12bfd3b1b8c4" viewBox="26279.867 7433.918 327.164 334.246" style="-webkit-print-color-adjust::exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-01c69789-47a6-8085-8007-12bfd3b1b8c4"><defs><clipPath id="frame-clip-01c69789-47a6-8085-8007-12bfd3b1b8c4-render-1704" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="26279.86686615925" y="7433.9182014125945" width="327.1635671773547" height="334.2462987447352" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"></rect></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(%23frame-clip-01c69789-47a6-8085-8007-12bfd3b1b8c4-render-1704)" fill="none"><g class="fills" id="fills-01c69789-47a6-8085-8007-12bfd3b1b8c4"><rect rx="0" ry="0" x="26279.86686615925" y="7433.9182014125945" width="327.1635671773547" height="334.2462987447352" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background" style="fill:%235b0c3c;fill-opacity:1"></rect></g><g class="frame-children"><g id="shape-01c69789-47a6-8085-8007-12bfd3b1b8c5" rx="0" ry="0"><g id="shape-01c69789-47a6-8085-8007-12bfd3b1b8c8"><g class="fills" id="fills-01c69789-47a6-8085-8007-12bfd3b1b8c8"><ellipse cx="26444.21032360077" cy="7710.407151399048" rx="196.07452244254435" ry="196.066153055533" transform="matrix(1.000000, -0.000012, 0.000012, -1.000000, -0.090647, 15421.125164)" style="fill:%23ff85cf;fill-opacity:1"></ellipse></g></g><g id="shape-01c69789-47a6-8085-8007-12bfd3b1b8c9"><g class="fills" id="fills-01c69789-47a6-8085-8007-12bfd3b1b8c9"><path d="M26291.392578125,7628.29345703125L26520.919921875,7398.72705078125L26061.873046875,7398.732421875L26291.392578125,7628.29345703125" style="fill:%23ff85cf;fill-opacity:1"></path></g></g></g></g></g></g></g></g></g></svg>');
	will-change: transform;
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  color: #5b0c3c;
}

#card-measure:hover{

transform: rotate(1deg) translateY(-2rem);

}

#measure{
	background-color: #ff85cf;
	color: #5b0c3c;
}




#card-reduce{
	transform: rotate(-3deg);
	transition: transform 250ms ease-in-out;
		background-image: url('data:image/svg+xml,<svg width="327.164" xmlns="http://www.w3.org/2000/svg" height="334.246" id="screenshot-01c69789-47a6-8085-8007-12c36a40ac2c" viewBox="26934.161 7751.854 327.164 334.246" style="-webkit-print-color-adjust::exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-01c69789-47a6-8085-8007-12c36a40ac2c"><defs><clipPath id="frame-clip-01c69789-47a6-8085-8007-12c36a40ac2c-render-1816" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="26934.161353904656" y="7751.853792634057" width="327.1635910597033" height="334.246274339951" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"></rect></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(%23frame-clip-01c69789-47a6-8085-8007-12c36a40ac2c-render-1816)" fill="none"><g class="fills" id="fills-01c69789-47a6-8085-8007-12c36a40ac2c"><rect rx="0" ry="0" x="26934.161353904656" y="7751.853792634057" width="327.1635910597033" height="334.246274339951" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background" style="fill:%23ff7000;fill-opacity:1"></rect></g><g class="frame-children"><g id="shape-01c69789-47a6-8085-8007-12c36a40ac2d" rx="0" ry="0"><g id="shape-01c69789-47a6-8085-8007-12c36a40ac30"><g class="fills" id="fills-01c69789-47a6-8085-8007-12c36a40ac30"><path d="M27103.3359375,7910.97119140625L27332.857421875,7681.4111328125L26873.8125,7681.40625L27103.3359375,7910.97119140625" style="fill:%23ffe346;fill-opacity:1"></path></g></g><g id="shape-01c69789-47a6-8085-8007-12c36a40ac31"><g class="fills" id="fills-01c69789-47a6-8085-8007-12c36a40ac31"><path d="M27103.337890625,8077.078125L27332.859375,7847.517578125L26873.814453125,7847.51220703125L27103.337890625,8077.078125" style="fill:%23ffe346;fill-opacity:1"></path></g></g></g></g></g></g></g></g></g></svg>');
	will-change: transform;
	background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  color: #ff4300;
	

}

#card-reduce:hover{

transform: rotate(-1deg) translateY(-2rem);

}

#build{
	background-color: #ffe346;
	color: #ff4300;
	
}

#card-strategy{
	transform: rotate(4deg);
	transition: transform 250ms ease-in-out;
background-image: url('data:image/svg+xml,<svg width="327.164" xmlns="http://www.w3.org/2000/svg" height="334.246" id="screenshot-01c69789-47a6-8085-8007-12c3b96a63b1" viewBox="27533.197 7867.524 327.164 334.246" style="-webkit-print-color-adjust::exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-01c69789-47a6-8085-8007-12c3b96a63b1"><defs><clipPath id="frame-clip-01c69789-47a6-8085-8007-12c3b96a63b1-render-1998" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="27533.196935410615" y="7867.523880310203" width="327.1638129561543" height="334.24604758945407" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"></rect></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(%23frame-clip-01c69789-47a6-8085-8007-12c3b96a63b1-render-1998)" fill="none"><g class="fills" id="fills-01c69789-47a6-8085-8007-12c3b96a63b1"><rect rx="0" ry="0" x="27533.196935410615" y="7867.523880310203" width="327.1638129561543" height="334.24604758945407" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background" style="fill:%237ed4fd;fill-opacity:1"></rect></g><g class="frame-children"><g id="shape-01c69789-47a6-8085-8007-12c3b96a63b2" rx="0" ry="0"><g id="shape-01c69789-47a6-8085-8007-12c3b96a63b7" style="display:none"><g class="fills" id="fills-01c69789-47a6-8085-8007-12c3b96a63b7"><path d="M27667.4296875,7984.78662109375L27344.419921875,7952.27392578125L27634.81640625,8307.75L27667.4296875,7984.78662109375" style="fill:%237ed4fd;fill-opacity:1"></path></g></g><g id="shape-01c69789-47a6-8085-8007-12c3b96a63b8" style="display:none"><g class="fills" id="fills-01c69789-47a6-8085-8007-12c3b96a63b8"><path d="M27795.921875,7879.6982421875L27472.916015625,7847.18603515625L27763.30859375,8202.662109375L27795.921875,7879.6982421875" style="fill:%237ed4fd;fill-opacity:1"></path></g></g></g><g id="shape-01c69789-47a6-8085-8007-12c3b96a63b3"><g class="fills" id="fills-01c69789-47a6-8085-8007-12c3b96a63b3"><rect rx="0" ry="0" x="27246.715880351952" y="7978.376343234335" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="332.2492608259401" height="335.6020153281554" style="fill:%23202b4e;fill-opacity:1"></rect></g></g><g id="shape-01c69789-47a6-8085-8007-12c3b96a63b4"><g class="fills" id="fills-01c69789-47a6-8085-8007-12c3b96a63b4"><rect rx="0" ry="0" x="27578.967641452535" y="7640.398926721692" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="332.2492608259401" height="335.6020153281554" style="fill:%23202b4e;fill-opacity:1"></rect></g></g></g></g></g></g></g></g></svg>');
	will-change: transform;
	background-repeat: no-repeat;
  background-attachment: fixed;
background-position: -69px;
    background-size: 149%;
  color: #202b4e;
}

#card-strategy:hover{

transform: rotate(1deg) translateY(-2rem);

}

#strategy{
background-color: #7ed4fd;
 color: #202b4e;
 
}

[popover]{
padding: 1rem;


border-radius: 1rem;

border: .5rem solid currentcolor;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: var(--step-0);

  


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


    margin: 1rem;

	}


}


[popover]:popover-open{display: flex;}

[popover] h2{
	font-family: var(--mainfont);
	font-size: var(--step-3);
	text-transform: none;
}


[popover] h3{
	font-family: var(--mainfont);
	font-size: var(--step-1);
	text-transform: none;
	margin: 0;
	line-height: 1;
	margin-top: 1rem;
}

.container-popover{
	
	
	   max-width: 60ch;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 74svh;
    padding: 4rem;

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

padding: 2rem 0;
max-height:calc(94svh - 8rem);
	}

}

[popover]::backdrop {
  background-color: hsl(54 4% 95% / 40%);
backdrop-filter: blur(15px);
}


.closepopover{

	font-family: var(--mainfont);
	font-size: var(--step-0);
	color: currentcolor;
	font-weight: 800;
	background-color: transparent;
	border: 0;
	position: sticky;
	top: 2rem;
	right: 2rem;
	cursor: pointer;

margin-right: 0;
        margin-left: auto;


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

top: 1rem;
	right: .5rem;
	}

}
#why-decarbonade{

height: 80svh;
max-height: 980px;
display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 20rem 0;

    @media screen and (max-width: 768px){
height: auto;
max-height: none;

	}

}
.arguments, .figures{
	max-width: 1680px;
	padding: 0 2rem;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);

height: 80svh;
max-height: 980px;
align-items: center;
font-size: 1rem;
line-height: 1;
text-align: center;


@media screen and (max-width: 768px){
grid-template-columns: repeat(1, 1fr);
padding:0;
height: auto;
max-height: none;
	}


}
.arguments {
	margin-top: 4rem;
}


.rounded-card{

	color: var(--textcards);
background-color: var(--backcards);
	
	display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    text-align: left;
   
	
   border-radius: 6rem;
width:100%;
height:100%;
}

.rounded-card > div{

	 	
	padding: 20% 10%;
	display: flex;
	flex-direction: column;
	gap:2rem;

}


.rounded-card ul{
	
	margin: 0;


}


.button.link{

color: var(--textcards);
background-color: var(--backcards);
	padding:2rem;

 border-radius: 4rem;
 text-decoration: none;
 display:flex;
 justify-content: space-between;
  width: max-content;
  gap: 2rem;
  padding-top: 2.25rem;
}

.button.link:after{

content:"→";

}


.button.link:hover{

color: var(--backcards);
background-color: var(--textcards);

}



.rounded-card li{
	list-style-type:disclosure-closed;
	list-style-position: inside;

		margin-bottom: .5rem;
	font-size: 1.125rem;
	opacity: .9;
	font-weight: 500;

}
.title-argument h3{line-height: 1}

.figures{
	margin-top: 8rem;

}

.figure{	aspect-ratio: 1/1;
	padding: 15%;


@media screen and (max-width: 768px){
aspect-ratio: auto;
	}


}


	.figure h3 {
font-family: var(--mainfont);
font-size: var(--step-2);
display: flex;
    flex-direction: column;
    align-content: center;
    align-items:  center;
    justify-content:  center;
    text-align: center;

}
	.figure h3 > span{

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

		

	}


.logo1_list {
  
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-top: .5rem;
    padding-bottom: .5rem;
    display: flex;
  gap: 4rem;
    max-width: 1480px;
padding:0 2rem;

    @media screen and (max-width: 768px){
padding:1rem;
gap: 2rem;
	}
}


.logo-client{max-height: 50px; max-width: 200px;


@media screen and (max-width: 768px){
 max-width: 100px;
  
	}

}

.mainfooter{

min-height: 100svh;

display: flex;
align-items: center;
justify-content: center;
gap: 0rem;
flex-direction: column;
background-image: url('data:image/svg+xml,<svg width="1547" xmlns="http://www.w3.org/2000/svg" height="1256" id="screenshot-cbb7a08b-fc5b-805c-8007-12f615cc67c0" viewBox="20215.513 10808.365 1547 1256" style="-webkit-print-color-adjust::exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-cbb7a08b-fc5b-805c-8007-12f615cc67c0"><defs><clipPath id="frame-clip-cbb7a08b-fc5b-805c-8007-12f615cc67c0-render-1122" class="frame-clip frame-clip-def"><rect rx="0" ry="0" x="20215.512979473046" y="10808.364947773302" width="1547" height="1256" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"></rect></clipPath></defs><g class="frame-container-wrapper"><g class="frame-container-blur"><g class="frame-container-shadows"><g clip-path="url(%23frame-clip-cbb7a08b-fc5b-805c-8007-12f615cc67c0-render-1122)" fill="none"><g class="fills" id="fills-cbb7a08b-fc5b-805c-8007-12f615cc67c0"><rect rx="0" ry="0" x="20215.512979473046" y="10808.364947773302" width="1547" height="1256" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" class="frame-background"></rect></g><g class="frame-children"><g id="shape-cbb7a08b-fc5b-805c-8007-12f6121640fc"><g class="fills" id="fills-cbb7a08b-fc5b-805c-8007-12f6121640fc"><ellipse cx="20463.512979473046" cy="11816.364947773302" rx="248" ry="248" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill:%23ff85cf;fill-opacity:1"></ellipse></g></g><g id="shape-cbb7a08b-fc5b-805c-8007-12f6121640fd"><g class="fills" id="fills-cbb7a08b-fc5b-805c-8007-12f6121640fd"><ellipse cx="21194.512979473046" cy="11721.364947773302" rx="248" ry="248" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill:%239cff45;fill-opacity:1"></ellipse></g></g><g id="shape-cbb7a08b-fc5b-805c-8007-12f6121640fe"><g class="fills" id="fills-cbb7a08b-fc5b-805c-8007-12f6121640fe"><ellipse cx="21514.512979473046" cy="11056.364947773302" rx="248" ry="248" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill:%23ffe346;fill-opacity:1"></ellipse></g></g><g id="shape-cbb7a08b-fc5b-805c-8007-12f6121640ff"><g class="fills" id="fills-cbb7a08b-fc5b-805c-8007-12f6121640ff"><ellipse cx="20537.512979473046" cy="11259.364947773302" rx="248" ry="248" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill:%237ed4fd;fill-opacity:1"></ellipse></g></g></g></g></g></g></g></g></svg>');	will-change: transform;
	
  background-size: cover;
margin-top: 10svh;



}



.decarbonade-round{
	position: absolute;
top:-22%;

@media screen and (max-width: 768px){
width: 140%;

	}




}


.contact{
	border-radius: 99999999px;
	color: hsl(54 4% 95%);
	background-color: hsl(0 34% 12%);
	aspect-ratio: 1/1;
	padding: 2rem;
	max-width: 480px;
	width: 100%;
	display: flex;
align-items: center;
justify-content: center;
gap: 0rem;
flex-direction: column;
text-align: center;
position: relative;


@media screen and (max-width: 768px){
max-width:none;
width:55%;

	}

}


.menu > a{
	text-transform: uppercase;
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1;
    margin: 0;
    text-decoration: none;
    color: unset;
}



.mainheader{

color: var(--colorheadernav);
	width:calc(100% - 8rem);
height:0;
     position: relative;
     margin:auto;
 
}

.header-wrapper{
display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0rem;
	flex-direction: row;

     

  margin-inline: auto;
  position: absolute; 
  width:100%;
  margin:auto;
  top:4rem;
  max-width: var(--grid-max-width);
  left:50%;
  transform: translateX(-50%);

}

.note{

max-width: 65ch;
    margin: auto;
    text-wrap: pretty;
	 text-decoration: none; font-weight: 400; line-height: 1.4; font-size: var(--step-0);   gap: 2rem;     align-items: start; padding: 6rem 4rem;
   
}
.note > div{display: flex; flex-direction: column;}


.note-tags-label{

	font-family: var(--bodyfont);
	font-size: var(--step-0);
}


.note-title{font-family: var(--mainfont)}

.blog-prevnext .article-excerpt, .keepreading{


@media screen and (max-width: 60rem) {
	padding-inline: 0 !important}

}

.note > header{

@media screen and (min-width: 60rem) {
	position: sticky; top: 2rem}}
figure{
	margin-block: 0;
	margin-inline: 0; 
}
.keepreading{font-family: var(--bodyfont); font-size: 1rem; text-transform: uppercase;   padding-inline: var(--grid-gutter); margin-bottom: 1rem}
figure > img{
object-fit: cover;
    width: 100%;
}


.cover-note{

margin-bottom: 2rem;

}

.wrapper{ width: 100%; margin: 0 2rem;display: flex; align-items: flex-start; flex-direction: column;}

section{padding-inline: var(--grid-gutter);}
.wrapper-layouts{
    margin: auto;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--offwhite);
    width: 100%;
}

.container-section{

	   max-width: var(--grid-max-width);
    margin-inline: auto;
}



.grid{
   
    margin-block: 0;

    padding-inline: 0px;
 
	display: flex;
	flex-direction: column;
gap: 4rem;
	
   
    margin-top: 2rem;

max-width: 66ch;

}

.intro.blog{margin-bottom:0}

ul{padding-inline: 0;list-style-position: inside}
.blog-grid{    
        margin-block: 0;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  gap:2rem;
  padding-top: 4rem;
  margin: auto;
    }
.keepreading{margin: auto; text-align: center; margin-bottom: 1rem}

.pagination-grid{display: flex; flex-direction:row; gap:1rem; margin:auto;}

  .pagination-grid > article {width:50%;}

  .blog-prevnext{margin: auto; width: 100%}
.casestudies-snippet{display: grid; grid-template-columns: 1fr 1fr}

@media screen and (max-width: 768px){
  .pagination-grid{flex-direction:column;}
  .pagination-grid > article{width:100%;}
  .blog-grid{grid-template-columns: 1fr;}
  .casestudies-snippet{grid-template-columns: 1fr;}
  .note{padding: 3rem var(--grid-gutter);}
  .intro{padding-inline: var(--grid-gutter);}
  .mainheader{width: calc(100% - 2 * var(--grid-gutter));}
}


.casestudies-snippet .article-excerpt{border-radius: 16px; padding: 2rem}


 .casestudies-snippet .article-excerpt > a {   grid-template-columns: 1fr; }

 .article-excerpt > a h2{  font-size: var(--step-2); }

  .casestudies-snippet .article-excerpt > a h2{  font-size: var(--step-4); }

.blog-grid > li {list-style-type: none; margin-block:0}

.article-excerpt > a{ text-decoration: none; font-weight: 400; line-height: 1.4; font-size: var(--step-0);  display: grid; grid-template-columns: 1fr; gap: 2rem;     align-items: end; padding: 2rem; 
 margin-top:-2px;
}

.blog-grid > li:last-child > .article-excerpt > a{border-bottom: none; padding-bottom:4rem }



.article-excerpt{   

background-color: white; height:100%;

}
.tags {
display: flex;

flex-wrap: wrap;
gap:1rem;

}

.tags li{
list-style-type: none;
margin-block:0;

}

.tags a{
text-decoration: none;
opacity: 1;
text-transform: uppercase;
    line-height: 1;
    display: block;


}
.active-tag{background-color: var(--offblack); color:var(--offwhite);}

.article-excerpt:hover{background-color: var(--offblack); color:var(--offwhite);}
.article-date{font-size: var(--step--1); margin-top: 1rem; opacity: .8; }
.article-excerpt h2 {font-family: var(--mainfont); text-transform: unset; font-size: var(--step-4); text-wrap:pretty; margin-bottom: .5rem;}
.article-excerpt-text{opacity: .8}


.article-excerpt header{display: flex; flex-direction: column; gap:1rem}

.layoutgrid {
  --columns: 12;
  --gutter: 4rem;
display: grid;
          
  grid-gap: var(--grid-gutter);
    width: auto;
margin: auto;

}


.layoutgrid img{border-radius: 16px; overflow: hidden;}
span > img{border-radius: 0 !important}

.layoutgrid.small{max-width: 65ch; margin:auto; text-wrap: pretty} 

.layoutgrid.medium{max-width: 75rem; margin:auto; text-wrap: pretty} 

@media screen and (min-width: 60rem) {
    .layoutgrid {
        grid-template-columns: repeat(12, 1fr);
    }



}

.layoutgrid > .column {

 
          grid-column: span var(--columns);
          display: flex;
    flex-direction: column;
    width:100%;

}



.layouts{
	display: flex;
	flex-direction: column;
	width:auto;

	  width: -webkit-fill-available;
}


/** SPACING **/


.pb-sm{
    padding-bottom: 1rem;
}

 .pb-default {
        padding-bottom: 1.5rem;
    }

.pb-md {
    padding-bottom: 2rem;
}

.pb-lg {
    padding-bottom: 2rem;
}

.pb-xl {
    padding-bottom: 4rem;
}

.pt-sm{
    padding-top: 1rem;
}


 

    .pt-default{
    padding-top: 1.5rem;
}


.pt-md {
    padding-top: 2rem;
}

.pt-lg {
    padding-top: 2rem;
}

.pt-xl {
    padding-top: 4rem;
}

.pt-none {
  padding-top:0;
}

.pb-none {
  padding-bottom:0;
}

@media only screen and (min-width: 980px) {
    
   .pb-default {
        padding-bottom: 2rem;
    }
       .pb-tiny{
    padding-bottom: .5rem;
}
    .pb-md {
        padding-bottom: 4rem;
    }

    .pb-lg {
        padding-bottom: 8rem;
    }

    .pb-xl {
        padding-bottom: 12rem;
    }

    .pt-default{
    padding-top: 2rem;
}
   .pt-tiny{
    padding-top: .5rem;
}


    .pt-md {
        padding-top: 4rem;
    }

    .pt-lg {
        padding-top: 8rem;
    }

    .pt-xl {
        padding-top: 12rem;
    }
}

/* NAV */

.site-nav {
  position: absolute;
  top: 2rem;
  right: 1rem;
  background-color: #fdfdfd;
  border-radius: 5px;
  text-align: left;
}
.site-nav .nav-trigger {
  display: none;
}
.site-nav .menu-icon {
  float: right;
  width: 36px;
  height: 26px;
  line-height: 0;
  padding-top: 10px;
  text-align: center;
}
.site-nav .menu-icon > svg path {
  fill: rgb(66.25, 66.25, 66.25);
}
.site-nav label[for=nav-trigger] {
  display: block;
  float: right;
  width: 36px;
  height: 36px;
  z-index: 2;
  cursor: pointer;
}
.site-nav input ~ .trigger {
  clear: both;
  display: none;
}
.site-nav input:checked ~ .trigger {
  display: block;
  padding-bottom: 5px;
}

.languages ul{
	padding-inline: 0;
	margin-block: 0;
}


.languages li{
	list-style-type: none;
}
.languages input ~ .trigger {
  clear: both;
  display: none;
}
.languages input:checked ~ .trigger {
  display: block;
  padding-bottom: 5px;
  position: absolute;
          background: var(--colorheadernav);
          color: var(--backgroundcolorheadernav);
        padding: 1rem;
            transform: translate(-.5rem, .25rem);
            border-radius: 1rem;
}

.site-nav a{text-decoration: none; font-weight: 600}

.site-nav .page-link {
  
  line-height: 1.5;
  display: block;
  padding: 5px 10px;
  margin-left: 20px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
}
.site-nav .page-link:not(:last-child) {
  margin-right: 0;
}



.languages input ~ .trigger {
 
  display: block;
 
}
.languages input:checked ~ .trigger {
  display: block;
  padding-bottom: 5px;
}
 .languages label[for=nav-trigger] {
    display: block;

    position: absolute;
    top: 9px;
    right: 1rem;
    background-color: #fdfdfd;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    text-align: right;

  }
@media screen and (min-width: 961px) {
		.languages label[for=language-trigger]::after {
		 content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  right: -16px;
  top: 3px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93bi1pY29uIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==') no-repeat center / contain;
  mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93bi1pY29uIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==') no-repeat center / contain;
}

		label[for=services-trigger]{position: relative;margin-right: 1rem; cursor: pointer;}

label[for=services-trigger]::after {
  content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  right: -16px;
  top: 0px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93bi1pY29uIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==') no-repeat center / contain;
  mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tZG93bi1pY29uIGx1Y2lkZS1jaGV2cm9uLWRvd24iPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==') no-repeat center / contain;
}

}







.languages input:checked ~ label[for=language-trigger]::after, .languages input:checked ~ label[for=services-trigger]::after{
transform: rotate(180deg) translateY(0px);

}



@media screen and (min-width: 960px) {
  .site-nav {
    position: static;
    float: right;
    border: none;
    background-color: inherit;
            display: flex;
        gap: 1rem;
    
  }
  .site-nav label[for=nav-trigger] {
    display: none;
  }
  .site-nav .menu-icon {
    display: none;
  }
  .site-nav input ~ .trigger {
    display: flex;
  }

  .languages input ~ .trigger {
 
  display: none;
}
.languages input:checked ~ .trigger {
  display: block;
  padding-bottom: 5px;
}
 .languages label[for=language-trigger] {
    

    cursor: pointer;
 display: flex;
 position:relative;

  }
  .site-nav .page-link {
    display: inline;
    padding: 0;
    margin-left: auto;
  }
 
}

/* Mobile menu */
@media screen and (max-width: 959px) {
  .site-nav {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fdfdfd;
    border-radius: 5px;
    z-index: 50;
            display: flex;
        flex-direction: column;
        align-items: flex-end;
    
  }

   .site-nav a, .site-nav label {color:var(--offblack)}

  .site-nav > .page-link { display: none; }

 
.site-nav li {margin-block: 0}

  .site-nav > input:checked ~ .page-link { display: block; }

  .services a{text-transform: capitalize; text-align: right}

  .languages.page-link a{text-transform: capitalize; opacity: .8; text-align: right}
.site-nav > .trigger:last-child{margin-bottom: 1rem}
  .site-nav .page-link {
    margin-left: 0;
    padding: 0rem 1rem;
  }

 
  .site-nav input:checked ~ .trigger{padding: 0}

  .site-nav > .trigger .page-link { display: block; }

  .languages input ~ .trigger {
    display: flex;
    opacity: .9;
    flex-direction: column;
    align-items: flex-end;
}
}


@font-face {
  font-family: 'UfficioDisplay';
  src: url("../fonts/UfficioDisplay-700.woff2") format("woff2");
  font-weight: 700;
}