* {padding: 0; margin: 0;  border: 0; box-sizing: border-box;}
*::before, *::after { box-sizing: border-box; }
html {font-size: 20px; scroll-behavior: smooth; overscroll-behavior: none;}
body {font-size: var(--font-size-body); color: var(--mainColor); font-family: var(--primaryFont); font-weight: var(--font-regular); background: var(--backgroundColor); line-height: var(--line-height-regular);  letter-spacing: 1%; -moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased; }
a {text-decoration: none; color: inherit; }
p a:hover {text-decoration: underline;}
ul {list-style-type: none;}
p {margin-bottom: 1.4em;}
br {margin:0; height: 0;}
strong, em { font-style: normal; font-weight: var(--font-regular); }
fieldset legend { display: none;}
address { font-style: normal;}

:root {
    /* Fonts */
    --primaryFont: "Urbanist", system-ui, sans-serif;
    --headerFont: "Urbanist", system-ui, sans-serif;

    /* Font weights */
    --font-regular: 400; 
    --font-medium: 500; 
    --font-semi-bold: 600; 
    --font-bold: 700; 

    /* Font sizes */
    --font-size-huge: calc(3.41 * var(--em));           /* 82px */
    --font-size-h1:  calc(3 * var(--em));               /* 72px */
    --font-size-h2:  calc(2 * var(--em));               /* 48px */
    --font-size-h3:  calc(1.5 * var(--em));             /* 36px */
    --font-size-h4:  calc(1.333 * var(--em));           /* 32px */
    --font-size-h5:  calc(1.25 * var(--em));            /* 30px */
    --font-size-body:  clamp(.9rem, 1.22vw, 1.2rem);    /* 24px */
    --font-size-small:  calc(0.91 * var(--em));         /* 22px */
    --font-size-smaller:  calc(0.83 * var(--em));       /* 20px */
    --font-size-tiny:  calc(.67 * var(--em));           /* 16px */
    --em: var(--font-size-body);    

    /* Colors */  
    --mainColor: var(--myBlack);
    --backgroundColor: var(--myLightGrey);

    --myBlack: #313F4C; 
    --myBlack60: rgba(49, 63, 76, 0.6); 
    --myBlack10: rgba(49, 63, 76, 0.1); 
    --myBlack20: rgba(49, 63, 76, 0.2); 
    --myRed: #DC1818; 
    --myBlue: #4F6F8C; 
    --myGreen: #739071; 
    --myWhite: #F7F5F2; 
    --myAlmostWhite: #F5F5F5; 
    --myActualWhite: #FFFFFF; 
    --myLightGrey: #EAE9E6;
    --myGreen: #739071;

    --odfPink: #EAA0A5;
    --odfCreme: #F9F4EE;

    /* Line heights */
    --line-height-small: 1.1;
    --line-height-regular: 1.2;
    --line-height-large: 1.4; 

    /* Widths */
    --gutterSide: calc(4.5 * var(--em));
    --gutterTop: 1rem;
    --maxWidth: 85rem;
    --maxWidthUltraWide: 150rem;
    --maxWidthNarrow: 65rem;
    --width: calc(100% - calc(var(--gutterSide) * 2));
    --gap: calc(var(--font-size-huge) * 2);
    --gap-big: calc(var(--gap) * 2);

    /* Margins */
    --margin: var(--marginSingular) auto;
    --marginSingular: clamp(3rem, 7vw, 5rem);
    --marginSingularHalf: calc(var(--marginSingular) / 2); 
    --marginSingularQuarter: calc(var(--marginSingular) / 4); 
    --marginSingularTop:  clamp(6.8rem, 9.2vw, 9rem);
    --btnPadding: 0.8em 1.4em;
    --btnPaddingNarrow: 0.8em 1em;
    --btnPaddingWide: 0.8em 2.1em;

    /* Transitions */
    --myEase: cubic-bezier(0.65,0.05,0.36,1);
    --myEaseOut: cubic-bezier(.17,.84,.44,1); 

    /* Shadows */
    --dropShadow: 0px 3px 6px 0 rgba(0,0,0,0.16);
    --blurShadow: 10px 10px 30px 0 rgba(0,0,0,0.16);

    /* Borders */
    --borderRadius: 1em; 
    --halfBorderRadius: calc(var(--borderRadius) / 2);
    --btnBorderRadius: 100vmin; 

    /* Logos */
    --logoWidth: 8.9em; 
}

/* --------------- HEADERS --------------- */
h1,.h1 ,h2,.h2 ,h3,.h3 ,h4,.h4, h5, .h5  {display: block; font-weight: var(--font-semi-bold); font-family: var(--headerFont);  line-height: var(--line-height-small); margin-bottom: 0.875em;  }
h1, .h1 {font-size: var(--font-size-h1); } 
h2, .h2 {font-size: var(--font-size-h2); }
h3, .h3 {font-size: var(--font-size-h3);  }
h4, .h4 {font-size: var(--font-size-h4); } 
h5, .h5 {font-size: var(--font-size-h5); } 
p { margin-bottom: .5em;}
.p { font-size: var(--font-size-body);  }
.huge { font-size: var(--font-size-huge); }
.small { font-size: var(--font-size-small); }
.smaller { font-size: var(--font-size-smaller); }
.tiny { font-size: var(--font-size-tiny); }


/* --------------- GENERAL --------------- */
body { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; }
header, main, footer { max-width: var(--maxWidthUltraWide); width: 100%; margin: 0 auto; position: relative; }
nav#desktop, footer > nav, .container {max-width: var(--maxWidth); width: var(--width); margin: var(--margin); position: relative; }
main { margin-top: var(--marginSingularTop); }
section { position: relative; max-width: var(--maxWidthUltraWide); width: 100%;margin: 0 auto;  display: flex; flex-direction: column; }
section.ultrawide { max-width: var(--maxWidthUltraWide); width: 100%; }
section.narrow { max-width: var(--maxWidthNarrow); }

/* IMAGES */
figure, picture { position: relative;}
picture { display: flex; }
img { width: 100%; height: auto; }
picture.abs img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.video { position: relative; width: 100%; }
.video video { width: 100%; height: auto; }


/* SELECTION */
*::selection { background: var(--myRed); color: var(--scheme-primary); }

/* NO VISIBLE SCROLLBAR */
.no-scrollbar,.overflower { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .overflower::-webkit-scrollbar { display: none; }

/* BUTTONS */
button { all: unset; box-sizing: border-box; margin: 0; padding: 0; border: 0; touch-action: manipulation;  text-align: center; display: block; position: relative;}
button,label { cursor: pointer;  }

.btn { background: var(--scheme-primary, var(--backgroundColor)); color: var(--scheme-background, var(--mainColor)); border-radius: var(--btnBorderRadius); text-align: center;   letter-spacing: unset; overflow: hidden; position: relative;  width: fit-content; display: block;  font-weight: var(--font-medium); isolation: isolate; transition: opacity 250ms; font-size: var(--font-size-body);}
.btn > span { height: 100%; display: flex; padding: var(--btnPadding); transition: transform 500ms var(--myEase), clip-path 500ms var(--myEase); align-items: center;   gap: .5em;}
.btn > span:last-of-type { position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; background: var(--scheme-secondary, var(--backgroundColor));  transform: translateY(-30%);  clip-path: inset(-10% -10% 100% -10%); color: var(--scheme-secondary-color, var(--scheme-primary, var(--mainColor)));}
.btn > span:last-of-type path { fill: var(--scheme-background, var(--backgroundColor));}
.btn > span svg { height: .8em; width: auto; flex-shrink: 0;}
:is(.target:hover .btn ,.btn:hover) > span:first-of-type { transform: translateY(30%);}
:is(.target:hover .btn ,.btn:hover) > span:last-of-type { transform: none; clip-path: inset(-10% -10% -10% -10%);}

.btn.alt { background: var(--scheme-secondary); color: var(--scheme-primary);}
.btn.alt > span:last-of-type { background: var(--scheme-primary); color: var(--scheme-secondary); }

.btn.secondary { background: var(--scheme-background, var(--mainColor)); color: var(--scheme-primary, var(--backgroundColor));  }
.btn.secondary::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--btnBorderRadius);  content: "";  z-index: -1;   border: 2px solid var(--scheme-primary, var(--backgroundColor));}
.btn.secondary  > span:last-of-type {  background: var(--scheme-primary, var(--backgroundColor)); color: var(--scheme-background, var(--backgroundColor));   transform: translateY(30%);   clip-path: inset(100% -10% -10% -10%);  } 
:is(.target:hover .btn.secondary ,.btn.secondary:hover)  > span:first-of-type {  transform: translateY(-30%);}
:is(.target:hover .btn.secondary ,.btn.secondary:hover)  > span:last-of-type {  transform: translateY(0); clip-path: inset(-10% -10% -10% -10%);}

.btn.clean { background: var(--myRed);}
.btn.clean > span {display: flex; padding-right: 3em; color: var(--myWhite);}
.btn.clean > span::after { content: ""; width: 1.8em; height: 1.8em; background: url('/img/waiting.svg') center center / contain no-repeat; position: absolute;right: .6em; transition: transform 500ms var(--myEase);}
.btn.clean > span:last-of-type { background: var(--myWhite); color: var(--myRed); }
:is(.target:hover .btn.clean,.btn.clean:hover) > span::after { transform: rotate(180deg);}

.btn.primary svg path { fill: var(--scheme-background);}
.btn.secondary svg path { fill: var(--scheme-primary);}
.btn.secondary span:last-of-type svg path { fill: var(--scheme-background);}

.buttons { display: flex; gap: 1em; margin-top: 2em; }

/* TAGS */
.tag { display: inline-flex; padding: var(--btnPadding); background: var(--myRed); color: var(--myWhite);  font-size: var(--font-size-tiny); border-radius: 100vmin; font-weight: var(--font-medium);}

/* TOOLTIP */
.tooltip { position: fixed; top: 0; left: 0; text-align: center;  transition: transform 250ms var(--myEaseOut), opacity 500ms; pointer-events: none; transform: translate(-200rem, -200rem); opacity: 0; pointer-events: none; z-index: 103;}
.tooltip > div { width: 8em; height: 8em; left: -4em; top: -4em; position: relative; background: var(--myWhite); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; color: var(--myBlack); transform: scale(0.3); transition: transform 400ms var(--myEase), left 333ms var(--myEase); border: 2px solid var(--myBlack10); padding: 1em 1em .75em;  } 
.tooltip > div > * { transition: opacity 250ms var(--myEase); font-weight: var(--font-semi-bold);}
.tooltip > div .title { font-size: var(--font-size-tiny);  text-transform: uppercase; color: var(--myBlack60); margin-bottom: .5em;}
.tooltip > div .body { font-size: var(--font-size-body); line-height: var(--line-height-small);}
.tooltip > div .arrow { height: 1.4em; width: 1.4em; margin-top: .33em; background: url('/img/arrow.svg') center center / contain no-repeat; }
.tooltip svg { position: absolute; top: -.3rem; left: -.3rem; width: calc(100% + .6rem); height: calc(100% + .6rem);  transform: rotate(-90deg);   pointer-events: none;}
.tooltip svg circle { stroke: var(--myRed); stroke-width: .15rem; fill: none; stroke-dasharray: 302; stroke-dashoffset: 302; }

.tooltip svg circle { animation: var(--animation, stroke 6s linear paused); }
.tooltip[data-animating=true] svg circle { animation-play-state: running;}


.tooltip[data-visible=true] { opacity: 1; }
.tooltip[data-visible=true] > div { transform: scale(1); } 
.tooltip[data-visible=false] svg circle { animation-play-state: paused;}

.tooltip[data-active=true] > div { transform: scale(0.9);}
.tooltip[data-active=true] svg circle { animation-play-state: paused; }

.tooltip.next > div { transform: scale(0.8) rotate(-15deg); }
.tooltip.next > div > * { opacity: 0;}

.tooltip[data-clean=true] { transition: opacity 500ms, transform 0s;}
.tooltip[data-clean=true] > div { transform: scale(.9); background: var(--myRed) url('/img/reino-r.png') 40% 50% / contain no-repeat; background-size: 50%; }
.tooltip[data-clean=true] > div > * { opacity: 0; }

.has-floater, .has-cleaner { cursor: none;}
.has-floater a { cursor: none;}

.tooltip[data-shrink=true] > div { transform: scale(0);}

/* TOOLTIP */
.line { position: relative; }
.line::after { content: ""; position: absolute; bottom: -.875em; width: 100%; transform-origin: left; height: calc(var(--em) * .24); background: var(--scheme-primary);  left: 0; transform: scaleX(0);  transition: 500ms var(--myEase) 500ms;}
.line[data-active=true]::after { transform: none; }


/* ANIMATED R */
figure.r { max-width: 60rem; display: flex; justify-content: center; align-items: center;  width: 100%; }
figure.r svg { width: 100%; height: auto; }
figure.r svg + svg { position: absolute;  right: 0; width: 107%; left: 0; top:-2.5%; }

figure.r svg path:first-of-type { stroke-dashoffset: 5082; stroke-dasharray: 5082; transition: stroke-dashoffset 2s ease-in-out; }
figure.r svg g path:last-of-type { clip-path: inset(100% 0 0 0); transition: clip-path 1s ease-in-out 333ms }

figure.r[data-active=true] svg path:first-of-type { stroke-dashoffset: 0;}
figure.r[data-active=true] svg g path:last-of-type { clip-path: inset(0 0 0 0);}


/* GROW IMAGES */
picture.grow { transform: scale(.5); transition: transform 500ms var(--myEase) 250ms; overflow: hidden; border-radius: 50%;}
picture.grow img { border-radius: 50%; transform: scale(1.5); transition: transform 500ms var(--myEase) 250ms;}
*[data-active=true] picture.grow { transform: scale(1);}
*[data-active=true] picture.grow img { transform: scale(1);}

/* --------------- COLOR SCHEMES --------------- */
[data-scheme='dark-blue'] { 
    --scheme-primary: var(--myLightGrey);  
    --scheme-secondary: var(--myBlue);
    --scheme-background: var(--myBlack);   
}
[data-scheme='blue'] { 
    --scheme-primary: var(--myLightGrey);  
    --scheme-secondary: var(--myBlack);
    --scheme-background: var(--myBlue);   
}
[data-scheme='green'] { 
    --scheme-primary: var(--myLightGrey);  
    --scheme-secondary: var(--myBlack);
    --scheme-background: var(--myGreen);   
}
[data-scheme='white'] { 
    --scheme-primary: var(--myBlack);  
    --scheme-secondary: var(--myBlue);
    --scheme-secondary-color: var(--myLightGrey);
    --scheme-background: var(--myLightGrey);   
}
[data-scheme] { background: var(--scheme-background); color: var(--scheme-primary);  }

section[data-scheme='white'] + section[data-scheme='white'] .container,
section[data-scheme='blue'] + section[data-scheme='blue'] .container,
section[data-scheme='green'] + section[data-scheme='green'] .container,
section[data-scheme='light-grey'] + section[data-scheme='light-grey'] .container {  margin-top: var(--marginSingularQuarter);}

/* HELPER */
body[data-helping=true] section {  outline: 2px solid var(--myOrange); outline-offset: -4px;}
section:first-of-type div.helper.helper.helper.helper { top: 6rem;}
div.helper.helper.helper.helper { position: absolute; left: 1em; transform: translate(-0%, 0%); top: 1em;  transform-origin: right; color: var(--myWhite); border: 1px solid var(--myRed); background: var(--myRed); z-index: 9; padding: 0.2em .2em .2em 1em;  border-radius: var(--slantedBorderRadius); font-size: .8em; font-weight: var(--font-medium); width: auto;  z-index: 2;  border-radius: 100vmin; display: flex;  align-items: center;  gap: .8em;}
div.helper.helper.helper.helper span { padding: .5em 1em; border-radius: 100vmin; background: var(--myWhite); color: var(--myRed); font-weight: var(--font-semi-bold);}

/* --------------- HEADER --------------- */
header { position: absolute; z-index: 99; --link-padding: .6em; background: var(--myLightGrey); border-bottom: 1px solid var(--myBlack10); }
header img, header svg  { width: var(--logoWidth);  transition: width 500ms var(--myEase); height: auto; }
nav#mobile, .burger, .mobile { display: none;  }

header[data-fixed=true] { position: fixed; top: -2.5em; }

@media only screen and (min-width: 1101px) {
    header[data-scrolled=true] nav#desktop { padding: .5em 0; --logoWidth: 7em;  }
    header[data-scrolled=true] nav#desktop > ul > li:not(:first-of-type) { transform: none; }
    header[data-scrolled=true] nav#desktop > ul > li:not(:first-of-type) > a { padding: var(--link-padding);}
    header[data-scrolled=true] nav#desktop > ul > li:not(:first-of-type).arrow > a { padding-right: calc(var(--link-padding) + .3em);}
    header[data-scrolled=true] nav#desktop > ul > li:last-of-type > a { padding-right: 0;}
}
@media only screen and (max-width: 1100px) {
    input.burger:not(:checked) ~ header[data-scrolled=true] nav#desktop { padding: .5em 0; --logoWidth: 7em;  }
    input.burger:not(:checked) ~ header[data-scrolled=true] nav#desktop > ul > li:not(:first-of-type) { transform: none; }
    input.burger:not(:checked) ~ header[data-scrolled=true] nav#desktop > ul > li:not(:first-of-type) > a { padding: var(--link-padding);}
    input.burger:not(:checked) ~ header[data-scrolled=true] nav#desktop > ul > li:last-of-type > a { padding-right: 0;}

}


nav.preheader { background: var(--myActualWhite); display: flex; height: 2.5em; align-items: center; position: relative;z-index: 2; }
nav.preheader ul { display: flex; align-items: flex-end;  justify-content: flex-end;  gap: 2.5em; font-size: var(--font-size-smaller);  max-width: var(--maxWidth); margin: .5em auto; width: var(--width); }
nav.preheader ul li a {display: flex; align-items: center; gap: .5em; color: var(--myRed); font-weight: var(--font-medium);  transition: color 250ms;}
nav.preheader ul li a:hover { color: var(--myBlack); --ownColor: var(--myBlack); }
nav.preheader ul svg {  height: 1em; width: auto; }
nav.preheader ul svg path { fill: var(--ownColor, var(--myRed)); transition: fill 250ms;}

/* DESKTOP NAV */
nav#desktop { margin: 0 auto; padding: 1.5em 0 1em; transition: padding 500ms var(--myEase);  z-index: 2; background: var(--myLightGrey); }
nav#desktop > ul { display: flex; justify-content: flex-end; align-items: center; }
nav#desktop > ul li {position: relative; display: flex; }
nav#desktop > ul li a { display: flex;  font-size: var(--font-size-body); font-weight: var(--font-semi-bold); transition: padding 500ms var(--myEase);}
nav#desktop > ul > li:first-of-type {margin-right: auto; max-width: var(--logoWidth); }
nav#desktop > ul > li:not(:first-of-type, .burger) {margin-left: 1.2em;  transform: translateY(.5em);  transition: transform 500ms var(--myEase); }
nav#desktop > ul > li:not(:first-of-type, .burger) > a { padding: var(--link-padding) var(--link-padding) 0 var(--link-padding); }
nav#desktop > ul > li:last-of-type > a {padding-right: 0;}

nav#desktop > ul > li:not(:first-of-type, .burger)::after { content: "";  bottom: calc(-.85em - 2px); position: absolute; left: var(--link-padding); width: calc(100% - var(--link-padding) * 2); height: .3em; background: var(--myRed);  transform: scaleY(0); transition: transform 333ms var(--myEase), bottom 500ms var(--myEase); transform-origin: bottom;  }
nav#desktop > ul > li.arrow:not(:first-of-type)::after { width: calc(100% - var(--link-padding)); }
nav#desktop > ul > li:is(.active,:hover)::after { transform: scaleY(1);}
nav#desktop > ul:has(li:hover) li.active:not(:hover)::after { transform: scaleY(0);}
nav#desktop > ul > li.arrow.lang { display: flex; align-items: center; }
nav#desktop > ul > li.arrow.lang.arrow.lang > a { padding-left: calc(var(--link-padding) / 1.5) ;}
nav#desktop > ul > li.arrow.lang::before { content: ""; position: relative; height: 1em; width: 1em; background: url('/img/lang.svg') center center / contain no-repeat;  transform: translateY(calc(var(--link-padding) / 2)); transition: transform 500ms var(--myEase); }
header[data-scrolled=true] nav#desktop > ul > li:not(:first-of-type)::after {  bottom: calc(-.5em - 2px); }
header[data-scrolled=true] nav#desktop > ul > li.arrow.lang::before { transform: none; }

body.resizing nav#desktop, nav#desktop > ul li a { transition: 0s; }

/* MOBILE NAV */
nav#mobile { position: fixed; top: 0; background: var(--myLightGrey); clip-path: inset(-1em -1em 100% -1em); transition: clip-path 500ms var(--myEase), transform 500ms var(--myEase);  z-index: 0; height: 100vh; height: 100dvh; width: 100%; display: none; flex-direction: column; align-items: center; background: var(--backgroundColor); }
nav#mobile > ul { display: flex;flex-direction: column; height: 100%; padding: var(--gutterSide); }
nav#mobile > ul > li { display: flex; transition: 500ms var(--myEase); margin-bottom: .5em;}
nav#mobile > ul > li > a { padding: 0.5em;   font-weight: var(--font-semi-bold); position: relative;  width: max-content;}
nav#mobile > ul > li > a::before { content: "";  bottom: -0.25em; position: absolute; left: var(--link-padding); width: calc(100% - var(--link-padding) * 2); height: .3em; background: var(--myRed);  transform: scaleY(0); transition: transform 333ms var(--myEase); transform-origin: bottom;} 
nav#mobile > ul > li:is(.active,[data-open=true], :hover) > a::before { transform: scaleY(1); } 
nav#mobile > ul:has([data-open=true], li:hover) > li.active:not(:hover) > a::before {  transform: scaleY(0);}

/* Burger */
input.burger { display: none; }
label.burger {  width: 1.2rem; height: calc(0.8rem + 3px); transition: 500ms var(--myEase);  z-index: 99;  display: none; align-items: center; margin-bottom: 0em;}
label.burger::before { content: ""; position: absolute; --_excess: -.25rem;   top: var(--_excess); left: var(--_excess); width: calc(100% + var(--_excess) * -2); height: calc(100% + var(--_excess) * -2);}
label.burger > span { width: 1.2rem; height: 3px; position: absolute; background: var(--mainColor); transition: 500ms var(--myEase);  border-radius: 100vmin;}
label.burger > span:nth-of-type(2) { transform: translateY(-.4rem); }
label.burger > span:nth-of-type(1) { transform: none }
label.burger > span:nth-of-type(3) { transform: translateY(.4rem); }

header[data-scrolled=true] label.burger { margin-bottom: 0;}

/* Burger checked */
input.burger:checked ~ header label.burger { transform: rotate(-180deg)  }
input.burger:checked ~ header label.burger span:nth-of-type(1) { transform: rotate(45deg);}
input.burger:checked ~ header label.burger span:nth-of-type(2) { transform: scaleX(0);}
input.burger:checked ~ header label.burger span:nth-of-type(3) { transform: rotate(-45deg);}
input.burger:checked ~ header nav#mobile { clip-path: inset(-1em -1em -1em -1em); transform: translateY( var(--marginSingularTop)); }

/* Submenu bit */
header li.arrow { position: relative; }
nav#desktop li.arrow ul.sub { position: absolute; padding: 1em 1em; bottom: calc(-.75em - 1px); left: var(--link-padding); transform: translateY(100%); white-space: nowrap;  background: var(--myActualWhite);   pointer-events: none; transition: clip-path 333ms var(--myEase);  clip-path: inset(-1em -1em 100% -1em); }
nav#desktop li.arrow:hover { z-index: 2;  }
nav#desktop li.arrow ul.sub > li:not(:last-of-type) { margin-bottom: .5em; }
nav:is(#desktop,#mobile) li.arrow ul.sub > li a  { align-items: center; gap: .5em; display: flex;}
nav:is(#desktop,#mobile) li.arrow ul.sub > li a::before { content: ""; display: inline-block; background: url("/img/arrow.svg") center center / contain no-repeat; height: 1.2em; width: 1.2em; position: relative;   transition: transform 250ms var(--myEase);}
nav:is(#desktop,#mobile) li.arrow ul.sub > li.active a::before {  background-image: url('/img/arrow-red.svg');}
nav:is(#desktop,#mobile) li.arrow ul.sub > li a:hover::before  {transform: translateX(.25em);}
nav#desktop li.arrow:is(:nth-last-of-type(1), :nth-last-of-type(2), :nth-last-of-type(3), :nth-last-of-type(4)) ul.sub { left: unset; right: 0;  }
nav#desktop li.arrow ul.sub li a { padding: .25em 0; font-weight: var(--font-medium);}
nav#desktop li.arrow ul.sub::before { content: ""; position: absolute; left: 0; top: 0; transform: translateY(-100%); height: .9em; width: 100%; background: transparent; }

header[data-scrolled=true] nav#desktop li.arrow ul.sub  { bottom: calc(-.5em - 1px); }

nav#desktop li.arrow.arrow.arrow a { display: flex; align-items: center; padding-right: calc(var(--link-padding) + .3em);}
nav#desktop li.arrow:hover ul.sub {   clip-path: inset(-1em -1em -1em -1em); pointer-events: all; }
nav#desktop li.arrow > a::before,nav#desktop li.arrow > a::after { content: ""; position: absolute; right: .1em; width: .4em; height: 2px; border-radius: .5em; background: var(--mainColor); transform: translateY(-.1em) rotate(var(--r, 45deg)) translateY(.16em);  transition: transform 333ms var(--myEase); }
nav#desktop li.arrow > a::before { --r: -45deg; }
nav#desktop li.arrow > a::before { --r: -45deg; }
nav#desktop li.arrow > a:hover::after { transform: translateY(.1em) rotate(-45deg) translateY(-.16em); }
nav#desktop li.arrow > a:hover::before { transform: translateY(.1em) rotate(-135deg) translateY(.16em); }

nav#mobile > ul { display: flex; flex-direction: column; align-items: flex-start;  }
nav#mobile li.arrow { flex-direction: column; align-items: flex-start; padding-right: 1.2em;  display: grid; grid-template-rows: 2.4em 0fr;   overflow: hidden; width: 100%; pointer-events: none; }
nav#mobile li.arrow > * { pointer-events: all;}
nav#mobile li.arrow button { width: 1.6em; height: 1.6em;  position: absolute; right: 0; top: .4em;   display: flex; align-items: center; justify-content: center; transition: transform 250ms; }
nav#mobile li.arrow button::before,nav#mobile li.arrow button::after  { content: ""; position: absolute; right: .1em; width: .6em; height: 3px; border-radius: .5em; background: var(--mainColor); transform: translateY(-.1em) rotate(var(--r, 45deg)) translateY(.22em);  transition: transform 333ms var(--myEase); }
nav#mobile li.arrow button::after { --r: -45deg; }
nav#mobile li.arrow > div {  overflow: hidden; width: calc(100% + 1.2em);   }
nav#mobile li.arrow ul.sub { position: relative; transform: none; left: var(--link-padding); padding: 1.5em 1em;  display: block; background: var(--myActualWhite); font-weight: var(--font-medium); }
nav#mobile li.arrow ul.sub > li:not(:last-of-type) { margin-bottom: 1.25em; }
nav#mobile li.arrow ul.sub > li > a { align-items: flex-start; }
nav#mobile li.arrow ul.sub > li > a::before { top: 0.05em; flex-shrink: 0;}

nav#mobile li.arrow[data-open=true] { grid-template-rows: 2.4em 1fr;}
nav#mobile li.arrow[data-open=true] button::before { transform: translateY(.1em) rotate(-45deg) translateY(-.22em); }
nav#mobile li.arrow[data-open=true] button::after {transform: translateY(.1em) rotate(-135deg) translateY(.22em); }
/* End submenu bit */

/* --------------- FOOTER --------------- */

footer > .box { position: absolute; right: 0; height: calc(100% + 3em); width: auto; width: 65%; max-width: 58rem; min-width: 45rem; overflow: hidden;    bottom: 0;}
footer > .box figure { width: auto; height: 100%; width: 100%;  position: absolute; bottom: -2em;  right: -3em; }
footer > nav { display: grid;  grid-gap: 1em;  grid-template-columns: 2fr 1fr; color: var(--myAlmostWhite); margin-bottom: 2em;}
footer > nav > .cta h2 { font-weight: var(--font-bold); max-width: 14em; margin-bottom: .33em;}
footer > nav > .cta .btn { margin-top: 1.5em; }

footer > nav > ul {  display: flex; flex-direction: column; align-items: flex-end; gap: .5em; font-size: var(--font-size-small);}
footer > nav ul li a:hover {text-decoration: underline;}

footer > nav > .bottom { margin: 4em 0 1em; display: flex; align-items: flex-end;  gap: 3em;  font-size: var(--font-size-small); padding-bottom: 4em; border-bottom: .2em solid var(--myWhite);}
footer > nav > .bottom ul { display: flex; flex-direction: column; gap: .5em; }
footer > nav > .bottom img { max-width: 10em; }

footer > nav > p  { font-size: var(--font-size-smaller); }
footer > nav > p > span { display: inline-block; margin: 0 .5em 0 1em;}
footer > nav > p a { padding: .5em .75em; border-radius: 100vmin;  transition: color 250ms, background 250ms; display: inline-block; }
footer > nav > p a:hover  { color: var(--odfCreme); background: var(--odfPink);  text-decoration: none;}

ul.socials { display: flex; align-items: center; gap: 1em; --icon-size: 2.4rem; margin-top: 4em; }
ul.socials li { position: relative; display: flex; justify-content: center; align-items: center;  }
ul.socials li a {min-width: var(--icon-size); min-height: var(--icon-size); display: flex; justify-content: center; align-items: center; border: 2px solid var(--myWhite); border-radius: 50%;}
ul.socials li svg { max-width: calc((var(--icon-size) / 2)); max-height: calc((var(--icon-size) / 2)); }

/* ========================================================== */
/* =================== SECTION CARROUSEL===================== */
/* ========================================================== */
section.carrousel { height: clamp(35rem, 50vw, 70rem); max-height: calc(100vh - 2rem); min-height: 35rem;  z-index: 10; }

section.carrousel .blocks {  display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  overflow: hidden;}
section.carrousel article { flex-shrink: 0; width: 100%;   transition: transform 750ms var(--myEase);  position: relative; }
section.carrousel article > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
section.carrousel article > .inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;  flex-shrink: 0;   width: 100%; }
section.carrousel article > .inner > div { position: relative; z-index: 2;max-width: var(--maxWidth); width: var(--width); margin: 0 auto 4em;  color: var(--myWhite);}
section.carrousel article > .inner > div > .h1 { max-width: 9.5em; margin-bottom: .5em;}
section.carrousel article > .inner > div > .h1 ~ * { font-weight: var(--font-regular); max-width: 22em; line-height: var(--line-height-regular);}
section.carrousel article > .inner :is(.video,picture) { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  overflow: hidden;}
section.carrousel article > .inner :is(.video,picture)::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent ,var(--myBlack));  z-index: 1; opacity: .7;}
section.carrousel article > .inner :is(.video,picture) :is(img,video) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1);  transition: transform 500ms var(--myEase);}
section.carrousel article > .inner:first-of-type :is(.video,picture) :is(img,video) { transform: scale(1.05); }
section.carrousel article div.nav { display: none; background: none;  align-items: flex-start;}
section.carrousel article div.nav .buttons { align-items: flex-start;  margin: 0;}

section.carrousel[data-animating=true] article:nth-of-type(1) :is(.video,picture) :is(img,video) { transform: scale(1); }

section.carrousel .box { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 3em); overflow: hidden; pointer-events: none;}  
section.carrousel .box figure { position: absolute; bottom: 0; right: 0;  width: 73%;  z-index: 2; transform: translate(14%, 0); }

 
body.touch-device section.carrousel article > a { display: none; }
body.touch-device section.carrousel article div.nav { display: flex; margin-top: 1.4em; }
body.touch-device section.carrousel .buttons button:first-of-type { display: none; }
body.touch-device section.carrousel .buttons button:last-of-type {  font-size: 1.4em; margin-left: .5em; background: var(--myWhite); }
body.touch-device section.carrousel .buttons button:last-of-type::before { border: none;}
body.touch-device section.carrousel .buttons button:last-of-type span:first-of-type path { fill: var(--myBlue); }

@media only screen and (max-width: 1250px) {
    section.carrousel .box figure { bottom: unset; top: 5%; }
}
@media only screen and (max-width: 768px) {
    section.carrousel .box { height: calc(100% + 5em);}
    section.carrousel .box figure { top: 2%;  width: auto; height: 17em; }
    section.carrousel .box figure svg { width: auto; height: 100%; }
}


/* ========================================================== */
/* ================ FULLSCREEN BLUR CLEANER ================= */
/* ========================================================== */
section.blur {  width: 100%; padding-bottom: 56.25%;  height: 0; }
section.blur .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
section.blur :is(.video,picture) { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  overflow: hidden;}
section.blur :is(.video,picture) :is(img,video) { position: absolute; top: 0; left: 0; width: 100%; height: 100%;   object-fit: cover;}
section.blur :is(.video,picture) img.mobile { display: none; }
section.blur h2 {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -69%); z-index: 2;   text-align: center; width: calc(100% - var(--em) * 9); max-width: var(--maxWidth); margin-bottom: 0;  font-weight: var(--font-regular); font-size: calc(var(--font-size-h1) * .988); color: var(--myWhite);}
section.blur h2 em { font-weight: var(--font-semi-bold);}
section.blur :is(figure, figure img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  object-fit: unset;}
section.blur figure { transform: scale(1.08);}
section.blur canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 8;  clip-path: inset(0 0 0 0); filter: blur(0.3rem); transition: opacity 1000ms var(--myEase), filter 500ms var(--myEase); z-index: 2;  transform: scale(1.08);  object-fit: cover;}
section.has-blur .button { position: absolute; bottom: 0; left: 0; right: 0; width: fit-content; margin: 0 auto 2em; z-index: 11;  display: flex; justify-content: center; align-items: center; }
section.has-blur .button::before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ""; cursor: initial; width: calc(100% + 3em);  height: calc(100% + 3em); }
section.has-blur .button > button { transition: transform 500ms var(--myEase);  }
section.has-blur .button > a.btn { position: absolute; transform: translateY(calc(100% + 2.5em));  width: max-content; transition: transform 500ms var(--myEase) 500ms;}

section.has-blur.clean canvas { opacity: 0; }
section.has-blur.clean .button button { transform: translateY(calc(100% + 2.5em)); }
section.has-blur.clean .button a.btn { transform: none;}

body.touch-device section.blur .has-cleaner { cursor: initial;}

@media only screen and (max-width: 768px) { 
    section.blur {  padding-bottom: 177%;}
    section.blur :is(.video,picture) img.mobile { display: block; }
    section.blur :is(.video,picture) img.desktop { display: none; }
    section.blur h2 { font-size: var(--font-size-h2);}
}


/* ========================================================== */
/* ===================== TITLE AND TEXT ===================== */
/* ========================================================== */
section.gap .container { display: grid; grid-template-columns: 1fr 1.35fr; grid-gap: 0 var(--gap-big); align-items: flex-start; }
section.text .container .md h3 { font-size: var(--font-size-h2); font-weight: var(--font-medium);}
section.text .container .md h4 { font-size: var(--font-size-h3); font-weight: var(--font-medium);}

@media only screen and (max-width: 950px) { 
    section.gap .container { grid-template-columns: 1fr; grid-gap: 1.5em var(--gap-big); max-width: 35em;}
}


/* ========================================================== */
/* ====================== OUR SERVICES ====================== */
/* ========================================================== */
section.services .md p { font-weight: var(--font-medium); }
section:is(.services,.related)  .overflower { grid-column: -1/1; margin-top: 4em; }
section.related:not(.services) .overflower > ul { grid-template-columns: 1fr 1fr 1fr;}
section.related .overflower > ul {  display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2em 1em; width: 100%; }
section.related .overflower > ul > li { height: 100%;}
section.related .overflower > ul > li > a { height: 100%;   display: flex; flex-direction: column; }
section.related .overflower > ul > li > a .top { flex-grow: 1;}

li.servicecard { width: 100%; }
li.servicecard figure { overflow: hidden; border-radius: var(--borderRadius); position: relative;   margin-bottom: .8em; }
li.servicecard figure img { border-radius: var(--borderRadius); transition: 500ms var(--myEase);}
li.servicecard figure picture::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--myBlack); content: ""; opacity: .2;  transition: opacity 500ms var(--myEase);}
li.servicecard figure > .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; padding: 2em; flex-direction: column; text-align: center; justify-content: space-between;}
li.servicecard figure > .inner p { margin-bottom: 0;}
li.servicecard span.btn { width: 100%; }
li.servicecard span.btn > span {  text-align: center; justify-content: center; }

li.servicecard a:hover figure img { transform: scale(1.05);}
li.servicecard a:hover picture::after { opacity: .8;}

@media only screen and (max-width: 1100px) {
    li.servicecard figure > .inner { padding: 1em;  }
}
@media only screen and (max-width: 950px) {
    section:is(.services, .related) .container { max-width: 100%; width: 100%; grid-gap: 0; }
    section:is(.services, .related) .container > :is(h2, .md) { margin-left: var(--gutterSide); width: var(--width); }
    section:is(.services, .related) .container h2 { margin-bottom: 2em;}
    
    section:is(.services,.related) .overflower { overflow: auto; scroll-snap-type: x mandatory;  margin-top: 1em;}
    section:is(.services,.related) .overflower > ul { display: flex; align-items: stretch; }
    section:is(.services,.related) .overflower > ul > li { width: 13rem; flex-shrink: 0; scroll-snap-align: center; height: auto; }
    section:is(.services,.related) .overflower > ul::after { position: relative; flex-shrink: 0; width: var(--gutterSide); height: 1em; opacity: 0; pointer-events: none; content: "";}
    section:is(.services,.related) .overflower > ul > li:first-of-type { margin-left: var(--gutterSide); }
    section:is(.services,.related) .btn { order: 2; margin-top: 2em; display: block; width: fit-content;}
}

@media only screen and (max-width: 768px) {
    section.services .md p { font-size: var(--font-size-h3);}
}



/* ========================================================== */
/* ====================== OUR CLIENTS ======================= */
/* ========================================================== */
section.slider {  max-width: 100vw; width: 100%; padding: var(--marginSingular) 0 var(--marginSingular) 0;  user-select: none; overflow: hidden;  display: flex; flex-direction: column; align-items: center; }
section.slider .container { margin: 0 auto var(--marginSingular); }
section.slider > ul { display: flex;  width: max-content; align-items: center; --m:0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, var(--m), 0, 0, 1); will-change: transform;  margin-bottom: 1em; }
section.slider > ul ul { display: flex; --slider-gap: .5em;  }

section.clients > ul ul li { font-size: var(--font-size-h3); white-space: nowrap; display: flex; align-items: center; justify-content: center; margin-right: var(--slider-gap); position: relative; width: 7em;  padding: .5em 1em; border: 2px solid var(--myBlack10); border-radius: 100vmin; height: 2.2em;}
section.clients > ul ul li :is(a,span) { display: flex; align-items: center; }
section.clients > ul ul li picture { max-height: 2.2em; display: flex; justify-content: center;  }
section.clients > ul ul li img { position: relative; width: auto;object-fit: contain;  max-height: 2.2em; max-width: 100%;}
section.clients[data-scheme=midnight] img { filter: brightness(0) invert(1); }
section.slider nav.buttons { margin-bottom: 2em; }

@media only screen and (max-width: 768px) {
    section.slider .container { margin-bottom: 2em;}
    section.clients > ul ul li { width: 6rem; }
    section.slider > p {padding: 1em 3em 0;}
}



/* ========================================================== */
/* =============== IMAGES, TEXT AND COUNTERS ================ */
/* ========================================================== */
section.counters .container { display: grid; grid-template-columns: 1fr 1.1fr; grid-gap: var(--gap); align-items: flex-start;  } 

figure.circles { display: flex; flex-direction: column;  align-items: flex-end;  }
figure.circles picture:first-of-type { width: 50%; margin-left: auto; }
figure.circles picture:last-of-type { width: 110%; margin: -20% 30% 0 0; }
figure.circles :is(picture:last-of-type, picture:last-of-type img) { transition-delay: 500ms;}

section.counters .container h3 { font-size: var(--font-size-h2); font-weight: var(--font-regular);}
section.counters .container h4 { font-size: var(--font-size-h3); font-weight: var(--font-medium);}
section.counters div.line { margin: 3em auto; height: 1px; display: block; }

ul.counters { width: calc(100% - 2em);  display: flex; justify-content: space-between; margin: 0 auto;  gap: 2em;}
ul.counters li { display: flex; flex-direction: column; align-items: center; text-align: center;}
ul.counters li .counter { font-size: var(--font-size-huge);}
ul.counters li .counter em { color: var(--scheme-primary);}

@media only screen and (max-width: 1100px) {
    section.counters { overflow: hidden;}
    section.counters .container > h2 { margin-bottom: 2em;}
    section.counters .container { grid-template-columns: 1fr; max-width: 35em;  grid-gap: 0;}
    section.counters .container figure { order: 2; }
    figure.circles picture:first-of-type { margin-right: -10%; }
    figure.circles picture:last-of-type { width: 80%; }
}

@media only screen and (max-width: 768px) {
    ul.counters {  flex-direction: column; align-items: center; }
    section.counters .buttons { justify-content: center; }
}

/* ========================================================== */
/* ==================== FULLSCREEN MEDIA ==================== */
/* ========================================================== */
section.media { height: clamp(20rem, 60vw, 60rem); }
section.media :is(.video, picture, img, video) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}


/* ========================================================== */
/* ====================== LATEST NEWS ======================= */
/* ========================================================== */
section.news .container > ul { grid-column: -1/1; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1em; margin-top: var(--marginSingular);}

li.newscard { position: relative; }
li.newscard figure { border-radius: var(--borderRadius); overflow: hidden; }
li.newscard img {border-radius: var(--borderRadius); transition: 500ms var(--myEase) 0s;}
li.newscard .inner {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: .8em 1em;  pointer-events: none; z-index: 2; }
li.newscard .over { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--scheme-primary); border-radius: var(--borderRadius);  color: var(--scheme-background);  padding: 3em 1em 3em; display: flex; flex-direction: column; justify-content: center; transition: clip-path 500ms var(--myEase), transform 500ms var(--myEase); clip-path: inset(-2% 100% -2% -2%); transform: translateX(-30%);}
li.newscard .over svg { position: absolute; bottom: .8em; right: 1em; height: 1.5em; width: 1.5em; }
li.newscard .over svg path { fill: var(--scheme-background);}
li.newscard .over p { margin: 0; }
li.newscard h2 { padding-top: .8em; }

li.newscard:not(.large) a:hover img { transform: translateX(10%); transition-delay: 100ms;}
li.newscard:not(.large) a:hover .over { clip-path: inset(-2% -2% -2% -2%); transform: none;}


@media only screen and (max-width: 950px) {
    section:is(.services,.related) .overflower > ul > li:is(.newscard, .jobcard) { width: 16rem; }
    section.news .container > ul { grid-template-columns: 1fr 1fr; margin-top: 2em;  }
    section.news .container > ul li:nth-of-type(3) { display: none; }
}

@media only screen and (max-width: 950px) {
    section.news .container > ul { grid-template-columns: 1fr; margin-top: 1em;  }
}

/* ========================================================== */
/* ===================== RELATED NEWS ======================= */
/* ========================================================== */
section.related .container > .btn { margin-left: auto; margin-top: auto; }

@media only screen and (max-width: 950px) {
    section.related .container > .btn { margin: 2em auto;  }
}


/* ========================================================== */
/* ================= BLUR CLEANER CARROUSEL ================= */
/* ========================================================== */
section.is-carrousel:not(.carrousel) .blocks { display: flex; overflow: hidden;  max-width: 100vw;}
section.is-carrousel:not(.carrousel) .block { display: grid; grid-template-columns: 1fr 1.5fr; max-width: 130rem; margin: 0 auto;  flex-shrink: 0; width: 100%;    transition: transform 750ms var(--myEase); }

section.half-blur figure {  height: 0; padding-bottom:  120%;  overflow: hidden;}
section.half-blur figure img.mobile { display: none; }
section.half-blur figure .inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;  position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.half-blur figure canvas {  clip-path: inset(0 0 0 0); filter: blur(0.3rem); transition: opacity 1000ms var(--myEase), filter 500ms var(--myEase); z-index: 2; object-fit: cover;}
section.half-blur figure :is(canvas, img) { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  object-fit: cover;  transform: scale(1.08);  }
section.half-blur[data-animating=true] figure { pointer-events: none;}

section.half-blur article { padding: 1em 0; }
section.half-blur article h3 { font-size: var(--font-size-h2); font-weight: var(--font-regular);}
section.half-blur article h4 { font-size: var(--font-size-h3); font-weight: var(--font-medium);}
section.half-blur article { max-width: 38em; margin: auto; width: var(--width);}
section.half-blur .bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 3em; flex-wrap: wrap;}
section.half-blur a.btn {font-size: 1.3em;}

section:is(.is-carrousel,.has-buttons) .buttons { margin-top: 0; }
section:is(.is-carrousel,.has-buttons) .buttons button {  background: var(--scheme-background);  border-radius: 50%; font-size: 1.5rem;}
section:is(.is-carrousel,.has-buttons) .buttons button::before { border-radius: 50%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; border: 2px solid var(--scheme-primary);}
section:is(.is-carrousel,.has-buttons) .buttons button:first-of-type { transform: scaleX(-1);  }
section:is(.is-carrousel,.has-buttons) .buttons button > span { padding: 0; width: 2em; height: 2em; display: flex; justify-content: center; }
section:is(.is-carrousel,.has-buttons) .buttons button > span:first-of-type svg path { fill: var(--scheme-primary); }
section:is(.is-carrousel,.has-buttons) .buttons button > span:last-of-type { background: var(--scheme-primary);}
section:is(.is-carrousel,.has-buttons) .buttons button > span:last-of-type path { fill: var(--scheme-background);}
section:is(.is-carrousel,.has-buttons) .buttons button .circle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); width: 100%; height: 100%;  z-index: 2;}
section:is(.is-carrousel,.has-buttons) .buttons button .circle circle { fill: none;  stroke: var(--myRed); stroke-width: .25rem; stroke-dasharray: 302; stroke-dashoffset: 302; } 
section.is-carrousel .block:first-of-type circle {  animation: var(--animation, stroke 16s linear ); }
section.is-carrousel .block:only-of-type circle {  animation: none; }

section.is-carrousel[data-active=false] .block article button circle,
section.is-carrousel .block figure:hover ~ article button circle,
section:is(.is-carrousel,.has-buttons) .buttons button:hover circle { animation-play-state: paused;}


@media only screen and (max-width: 1300px) { 
    section.half-blur article h3 { font-size: var(--font-size-h4); }
}

@media only screen and (max-width: 1100px) { 
    section.has-blur .button > a.btn { font-size: calc(var(--em) * 1); }
    section.half-blur article { padding: 2em 0; }
    section.half-blur figure img.desktop { display: none; }
    section.half-blur figure img.mobile { display: block; }
    section.is-carrousel:not(.carrousel) .block { grid-template-columns: 1fr; }
    section.is-carrousel:not(.carrousel) .block figure { padding-bottom: 75%;}
    section.half-blur .bottom a.btn { font-size: 1em;  }
    section.half-blur .bottom button.btn { font-size: 1.3em;  }
    section.half-blur .bottom .buttons { gap: .5em;}
    section.has-blur .button { margin-bottom: 1em;}

}


/* ========================================================== */
/* ==================== REQUEST INVOICE ===================== */
/* ========================================================== */
section.invoice > a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
section.invoice .container { display: grid; grid-template-columns: 1fr 1fr;  align-items: center;    isolation: isolate; max-width: var(--maxWidthNarrow);}
section.invoice .container .btn { margin-top: 2em; display: none; }
section.invoice h2 { font-weight: var(--font-regular); margin-bottom: .5em; max-width: 10em; width: calc(100% + 2.5em);}
section.invoice h2 em { font-weight: var(--font-bold); }
section.invoice h2 + * { max-width: 20em; font-weight: var(--font-regular);}
section.invoice :is(picture, .video) { display: flex; flex-direction: column; align-items: flex-end;  z-index: -1; }
section.invoice :is(img,video) { border-radius: 50%; width: 105%;  margin-right: 0%; display: block; height: auto; max-width: unset; }

body.touch-device section.invoice > a { display: none; }
body.touch-device section.invoice .container .btn { display: block; }

@media only screen and (max-width: 950px) {
    section.invoice { overflow: hidden;}
    section.invoice .container { grid-template-columns: 1fr; max-width: 35em; }
    section.invoice :is(picture, .video) { margin: -2em -2em 0 6em;}
    section.invoice h2.huge { font-size: var(--font-size-h1); }
}



/* ========================================================== */
/* ==================== MISSION & VISION ==================== */
/* ========================================================== */
section.mission .container { display: grid; grid-template-columns: 1fr 1.1fr; grid-gap: var(--gap); align-items: flex-start; }
section.mission article > div:first-of-type { margin: var(--marginSingular) 0  calc(var(--marginSingular) * 2);}
section.mission h2:first-of-type { color: var(--myRed); margin-bottom: 0.5em;}
section.mission h3 { font-size: var(--font-size-h2); font-weight: var(--font-regular);}
section.mission h4 { font-size: var(--font-size-h3); font-weight: var(--font-medium);}

@media only screen and (max-width: 1100px) {
    section.mission { overflow: hidden;}
    section.mission .container { grid-template-columns: 1fr; max-width: 35em;}
    section.mission .container figure { order: 2;}
    section.mission article > div:first-of-type { margin: 0 0 3em 0; }
}



/* ========================================================== */
/* ======================== TIMELINE ======================== */
/* ========================================================== */
section.timeline { height: clamp(20rem, 60vw, 45rem); min-height: 20rem;}
section.timeline .blocks { position: relative;  height: 100%;  z-index: 3;  margin: 0 auto;  width: 100%;  max-width: 100vw;}
section.timeline .block.block {  height: 100%; display: block;  transition: transform 750ms var(--myEase) }
section.timeline .block > div { max-width: var(--maxWidth); width: var(--width); margin: 0 auto;  display: grid; grid-template-columns: 1.8fr 1fr; height: 100%; }
section.timeline .block article { height: calc(100% - var(--marginSingular) * 2); display: flex; flex-direction: column;  margin: var(--marginSingular) 0; }
section.timeline .block .year { font-size: calc(8 * var(--em)); font-weight: var(--font-semi-bold); line-height: 0.75; }
section.timeline .bottom { display: flex; align-items: flex-end;  justify-content: space-between; margin-top: auto; }

section.timeline .box { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 3em); overflow: hidden; pointer-events: none;}   
section.timeline .box figure { position: absolute; bottom: 0; right: 0;  width: 73%;  z-index: 2; transform: translate(14%, 0); }
section.timeline .box :is(.video,picture) { position: absolute; right: 0; bottom: 3em; width: 30%;  max-width: 25rem;  z-index: 0; height: 80%;  clip-path: polygon(40% 2%, 50.07% 3.19%, 84.36% 13.68%, 99.6% 20%, 100% 100%, 0% 100%); transition: opacity 1000ms ease 1.25s; opacity: 0;}
section.timeline .box :is(.video,picture) :is(img,video) { object-fit: cover; }

section.timeline .box :is(.video,picture)[data-visible=false] { opacity: 0; transition: opacity 500ms ease 1250ms; }
section.timeline .box :is(.video,picture)[data-visible=true] { opacity: 1;  }


@media only screen and (max-width: 1600px) { 
    section.timeline .box :is(.video, picture) { height: 75%; }
}
@media only screen and (max-width: 1250px) { 
    section.timeline { max-width: 100vw;}
    section.timeline .block > div { grid-template-columns: 1fr; max-width: 40em; margin-left: var(--gutterSide); margin-right: 0; } 
}
@media only screen and (max-width: 1100px) { 
    section.timeline { height: auto; }
    section.timeline .block > div { margin: 0 auto; }
    section.timeline .box { display: none; }
    section.timeline .bottom { margin-top: 4em; }
    
}
@media only screen and (max-width: 768px) { 
    section.timeline { height: auto; }
    section.timeline .block .year { font-size: calc(var(--em) * 6);}
    section.timeline .block .buttons .btn { font-size: 1.2em;}
}



/* ========================================================== */
/* ======================= HERO TITLE ======================= */
/* ========================================================== */
section.hero { text-align: center;}
section.hero h2 { max-width: 14em; margin: var(--margin);  font-weight: var(--font-regular);}
section.hero strong { font-weight: var(--font-bold);}


@media only screen and (max-width: 1100px) { 
    section.hero h2 { font-size: var(--font-size-h2); margin: 1em auto;}
} 



/* ========================================================== */
/* ======================= MVO PLANET ======================= */
/* ========================================================== */
section.planet { --size: 10.8em; }
section.planet .container { margin-bottom: 2em;}
section.planet .articles { width: 100%; position: relative; }
section.planet article { opacity: 0; pointer-events: none;  padding: 2em 1.5em; background: var(--myWhite); border-radius: var(--borderRadius); position: absolute; width: 100%; top: calc(var(--size) / 4 + var(--i, 0) * var(--size) / 4);  transition: opacity 500ms var(--myEase), transform 500ms var(--myEase); transform: translateX(-2em) scale(0.9);}
section.planet article h2 { font-size: var(--font-size-h3); font-weight: var(--font-regular); }
section.planet article h3 { font-size: var(--font-size-h4); font-weight: var(--font-regular); }
section.planet article strong { font-weight: var(--font-semi-bold);}
section.planet article[data-active=true] { opacity: 1; pointer-events: all; transform: none;}

section.planet figure { display: flex; align-items: flex-start; }
section.planet figure ul { display: flex; flex-direction: column; align-items: center;   position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 69%; } 
section.planet figure ul li { width: var(--size); height: var(--size); background: var(--myWhite); border-radius: 50%;  position: relative;  overflow: hidden;}
section.planet figure ul li::before { content: "";  background: radial-gradient(50% 50% at 50% 50%, var(--myActualWhite) 5%, #F6C1C1 56.5%, #EE9090 75.5%, #E44F4F 92.5%, #DC1818 100%);  position: absolute; top: 0; left: 0; width: 100%; height: 100%;   border-radius: 50%; transform: scale(3); opacity: 0; transition: transform 500ms var(--myEase), opacity 500ms var(--myEase);}
section.planet figure ul li[data-active=true]::before { opacity: 1; transform: none;}
section.planet figure ul li button {  height: 100%; width: 100%; border-radius: 50%; font-size: var(--font-size-h3); font-weight: var(--font-semi-bold); text-transform: uppercase;}
section.planet figure ul li:nth-of-type(1) { margin-right: auto; }
section.planet figure ul li:nth-of-type(2) { margin: calc(var(--size) / -6.5) 0; }
section.planet figure ul li:nth-of-type(3) { margin-left: auto; }
section.planet figure > svg { max-width: 100%; height: auto; }
section.planet figure > svg path { fill: var(--scheme-primary);}

@media only screen and (max-width: 1400px) { 
    section.planet .container:nth-of-type(2) { grid-gap: var(--gap);}
    section.planet article { top: 0em; }
}
@media only screen and (max-width: 950px) { 
    section.planet figure { order: -1; }
    section.planet article[data-active="true"] { position: relative; }
    
}
@media only screen and (max-width: 635px) { 
    section.planet .container:nth-of-type(2) { grid-gap: 1.5em;}
    section.planet figure ul li { --size: 30vw;  }
    section.planet figure ul li button { font-size: 4vw;}
}




/* ========================================================== */
/* ======================== ALL NEWS ======================== */
/* ========================================================== */
section.has-filter .container { display: flex; flex-direction: column; align-items: flex-start;  }

fieldset.filter {  display: grid; grid-template-columns: repeat(var(--len, 1), 1fr); grid-gap: 1.5em; margin: 1em 0 2em;  }
fieldset.filter .select { position: relative; min-width: 8em; display: flex; align-items: center; padding-top: .8em; font-size: var(--font-size-h4); display: flex; flex-direction: column; align-items: flex-start; user-select: none; } 
fieldset.filter .select::before { height: .2em; position: absolute; top: 0;left: 0; width: 100%; background: var(--ownColor, var(--scheme-primary));  content: "";  transition: background 250ms; }
fieldset.filter .select label { display: flex; align-items: center; position: relative; padding-right: 1em; font-weight: var(--font-semi-bold);   color: var(--ownColor, var(--scheme-primary)); transition: color 250ms;  margin-top: auto; }
fieldset.filter .select label::before,fieldset.filter .select label::after { content: ""; height: 3px; width: .5em; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.22em); background: var(--ownColor, var(--scheme-primary));  right: 0; border-radius: 100vmin; transition: background 250ms;}
fieldset.filter .select label::after { --r: -45deg;}
fieldset.filter .select select { background: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent;  cursor: pointer;  appearance: none; -webkit-appearance: none;}
fieldset.filter .select span { font-size: var(--font-size-tiny); margin-bottom: .1em; display: none; }

fieldset.filter select option[data-visible=false] { display: none; }
fieldset.filter .select[data-active=true] { padding-top: .5em;}
fieldset.filter .select[data-active=true]::before { --ownColor: var(--myRed); }
fieldset.filter .select[data-active=true] span { display: block; }

fieldset.filter .select:hover { --ownColor: var(--myRed); }
fieldset.filter ~ ul.list li[data-visible=false] { display: none; }

section.has-filter .container > ul { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 1em; }

li.newscard.large :is(figure, img) { border-radius: var(--borderRadius) var(--borderRadius) 0 0; }
li.newscard.large .under { border-radius:  0 0 var(--borderRadius) var(--borderRadius); background: var(--myWhite); padding: 1.25em 1.25em 2em;  transition: background 250ms, color 250ms; color: var(--myBlack);}
li.newscard.large .under h2 { padding: 0;  margin-bottom: .33em; }
li.newscard.large .under time { opacity: .5;  display: block; margin-bottom: 1.5em;}
li.newscard.large a:hover img { transform: scale(1.05);}

@media only screen and (max-width: 1100px) { 
    section.has-filter .container > ul { grid-template-columns: 1fr 1fr;}
}

@media only screen and (max-width: 700px) { 
    section.has-filter .container { max-width: 30em;}
    section.has-filter .container fieldset.filter { display: flex; flex-direction: column; align-items: flex-start; }
    section.has-filter .container > ul { grid-template-columns: 1fr;}
}



/* ========================================================== */
/* ====================== CONTACT FORM ====================== */
/* ========================================================== */
section.contact article .h3 { font-weight: var(--font-regular);  padding-top: 0.5em; }
section.contact article a:hover { text-decoration: underline;}


@media only screen and (max-width: 950px) { 
    section.contact article .h3 { padding-top: 1em; }
}

body.jobs.apply section.contact .container { grid-gap: 0 var(--gap);  }
body.jobs.apply section.contact .container form { max-width: unset;}

/* ========================================================== */
/* ======================= GOOGLE MAPS ====================== */
/* ========================================================== */
section.map iframe { width: 100%; border-radius: var(--borderRadius); }


/* ========================================================== */
/* ========================= REVIEWS ======================== */
/* ========================================================== */
section.reviews .buttons { margin: auto 0 0 auto; }
section.reviews circle {  animation: var(--animation, stroke 15s linear ); }
section.reviews .container { margin-bottom: 0; }
section.reviews .overflower { grid-column: -1/1; margin-top: 2em; overflow: hidden; overflow: auto; scroll-snap-type: x mandatory;  scroll-behavior: smooth; max-width: 100vw; margin-bottom: var(--marginSingular);}
section.reviews .overflower ul { margin: 0 auto; max-width: var(--maxWidth); width: var(--width);  gap: 1em; display: flex;  }
section.reviews .overflower ul::after { width: 1px; content: ""; height: 1em; opacity: 0; flex-shrink: 0;}
section.reviews:has(.overflower:hover) circle { animation-play-state: paused;}
section.reviews > .buttons { display: none; }

li.reviewcard { flex-shrink: 0; width: clamp(15.5rem, 40vw, 50rem); background: var(--myWhite); padding: 1.5em;  scroll-snap-align: center;  display: grid; grid-template-columns: 1fr auto; align-items: flex-start; }
li.reviewcard .stars { display: flex; align-items: center; gap: .1em; }
li.reviewcard .stars span { width: 1.2em; height: 1.2em; background: url('/img/star.svg') center center / contain no-repeat; }
li.reviewcard picture { height: 1.2em;  margin-bottom: 2em;  position: relative; }
li.reviewcard img { height: 100%; width: auto;  }
li.reviewcard .md { grid-column: -1/1;}
li.reviewcard h3 { margin-bottom: 0.25em;}
li.reviewcard .h5 { font-size: var(--font-size-body);}

section.reviews[data-scheme='dark-blue'] ul li { color: var(--myBlack); }

@media only screen and (max-width: 950px) { 
    section.reviews .container { width: 100%; max-width: 100%;}
    section.reviews .container .buttons { display: none; }
    section.reviews .container h2 { margin-left: var(--gutterSide); width: var(--width);}
    section.reviews > .buttons { display: flex; margin: 2em auto 2em;}
}

/* ========================================================== */
/* ===================== IMAGE WITH TEXT ==================== */
/* ========================================================== */
section.image-text { display: grid; grid-template-columns: 1fr 1.5fr; max-width: 130rem; margin: 0 auto; width: 100%; }
section.image-text figure {  height: 100%; overflow: hidden; width: 100%;  }
section.image-text figure :is(img, picture) { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  object-fit: cover;  transform: scale(1.08);  }

section.image-text article { max-width: 38em; margin: var(--margin); padding: 0; width: var(--width);}
section.image-text article h2 { max-width: 15em; margin-bottom: 0.5em;}
section.image-text article h2 ~ * { max-width: calc(var(--em) * 30);}

@media only screen and (max-width: 950px) { 
    section.image-text { grid-template-columns: 1fr; }
    section.image-text figure :is(img, picture) { position: relative; }
    section.image-text figure { height: auto; }
    section.image-text article { margin: 0; padding: 2em var(--gutterSide) 1.5em; }
}


/* ========================================================== */
/* ======================== ALL JOBS ======================== */
/* ========================================================== */
li.jobcard { position: relative; }
li.jobcard h2 { padding-top: .8em;  margin: .25em 0 .33em;}
li.jobcard h2 + strong { color: var(--myLightGrey);  margin-bottom: 0; font-weight: var(--font-medium); opacity: .6;}
li.jobcard .top { background: var(--scheme-primary);   padding: 1.25em 1.25em 1.25em;  border-radius: var(--borderRadius) var(--borderRadius) 0 0; color: var(--scheme-background);}

li.jobcard .under { border-radius:  0 0 var(--borderRadius) var(--borderRadius); background: var(--myWhite); padding: 1.25em 1.25em 1.25em;  transition: background 250ms, color 250ms; color: var(--myBlack);}
ul.details { display: grid; grid-template-columns: 1fr 1fr; grid-gap: .8em;  margin-top: 1.2em;}
ul.details li { display: flex; gap: .4em; color: var(--myBlack60); font-size: var(--font-size-small);  font-weight: var(--font-medium); align-items: center; }
ul.details li::before {content: ""; position: relative; height: 1.2em; width: 1.2em;  background: var(--bg) center center / contain no-repeat; }
li.jobcard .under .btn { margin-top: 1.5em; }

section[data-scheme='blue'] li.jobcard {   --scheme-primary: var(--myBlack);  --scheme-secondary: var(--myBlue);--scheme-secondary-color: var(--myLightGrey);--scheme-background: var(--myLightGrey);   }
section[data-scheme='dark-blue'] li.jobcard {  --scheme-primary: var(--myBlue);  --scheme-secondary: var(--myBlue);--scheme-secondary-color: var(--myLightGrey);--scheme-background: var(--myLightGrey);   }

/* ========================================================== */
/* ========================== INTRO ========================= */
/* ========================================================== */
section.intro .container { display: grid; grid-gap: var(--font-size-h1) calc(var(--font-size-h1) * 2);  align-items: flex-start;  grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, auto); grid-template-areas: 
"a p"
". p"
"d p"
"d p"
"d p"
"d ."
"d ."
"d u"; }
section.intro .btn { opacity: 0.8; grid-area: a; }
section.intro .btn:hover { opacity: 1;}
section.intro .btn svg { transform: scaleX(-1);  }
section.intro picture {  grid-area: p;}
section.intro .container div {  grid-area: d; margin-top: auto; }
section.intro .container div p { margin-bottom: 0; font-weight: var(--font-regular); }
section.intro .container div h1 { margin-bottom: .25em; font-weight: var(--font-bold);}
section.intro ul { grid-area: u; display: flex; flex-wrap: wrap; gap: 2em 5em;  }
section.intro ul li { display: flex; flex-direction: column; align-self: inherit;  gap: .5em;}
section.intro ul li strong { opacity: .8; }
section.intro ul li span { font-weight: var(--font-medium);}

/* Job specific */
section.intro ul.details { grid-template-columns: 1fr 1fr; display: grid; max-width: 22em; grid-gap: 1em; } 
section.intro ul.details li { flex-direction: row; color: var(--scheme-primary);  }
section.intro ul.details li strong { font-weight: var(--font-medium);}
section:is(.intro, .title) ul.details li::before { display: none; }
section.intro ul.details svg path { fill: var(--scheme-primary);}

@media only screen and (max-width: 950px) {
    section.intro .container { grid-template-rows: unset; grid-template-columns: 1fr; grid-template-areas:  unset; max-width: 35em; margin-top: 1.5em; }
    section.intro .btn { grid-area: unset;  font-size: 1em; order: 2; }
    section.intro picture {  grid-area: unset;  }
    section.intro .container div {  grid-area: unset;  }
    section.intro ul { grid-area: unset;  order: 3;}
}

/* ========================================================== */
/* =================== CONTENT WITH IMAGES ================== */
/* ========================================================== */
section.content:not(.title) .container { border-bottom: .25em solid var(--scheme-primary); padding-bottom: 4em;}


/* ========================================================== */
/* ==================== CONTENT WITH TITLE ================== */
/* ========================================================== */
section.title article .btn { margin-top: 2em; }

@media only screen and (min-width: 1100px) {
    section.title .sticky { position: sticky; top: 5em; display: flex; flex-direction: column; }
    section.title .sticky .btn { margin-top: 2em; }
}
@media only screen and (max-width: 950px) {
    section.title .sticky { margin-bottom: 2em;}
    section.title .sticky > *:not(.btn) { display: none; }
    section.title .sticky .btn { position: fixed; left: 0; right: 0; margin: 0 auto;  z-index: 99; box-shadow: var(--dropShadow); bottom: 1em; }
    
}


/* ========================================================== */
/* ======================= INTRO IMAGE ====================== */
/* ========================================================== */
section.intro.image { min-height: clamp(20rem, 50vw, 50rem);  align-items: stretch; }
section.intro.image .container { flex-grow: 1; } 
section.intro.image picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
section.intro.image picture::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, var(--myBlack), transparent); opacity: .7;}
section.intro.image .btn.secondary { background: none;}

@media only screen and (max-width: 950px) { 
    section.intro.image picture,
    section.intro.image picture img { position: relative; height: auto; }
}


/* ========================================================== */
/* ======================== PREFOOTER ======================= */
/* ========================================================== */
section.prefooter { display: flex; margin-top: auto;  }
section.prefooter ul { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: var(--font-size-h1);}
section.prefooter ul li { line-height: 1.6;}
section.prefooter ul li strong { display: block; font-weight: var(--font-medium); font-size: var(--font-size-h5); display: flex; align-items: center; gap: .6em; color: var(--myRed); margin-bottom: 1em;}
section.prefooter ul li strong svg { height: 1em; width: auto; }
section.prefooter ul li strong svg path { fill: var(--myRed);}
section.prefooter ul li p { color: var(--scheme-secondary);  margin-bottom: 1em;}
section.prefooter ul li a:hover { text-decoration: underline;}

@media only screen and (max-width: 768px) {
    section.prefooter .container { max-width: 20em; }
    section.prefooter ul { grid-template-columns: 1fr; }
}


/* --------------- FORM --------------- */
form.custom { 
    --form-main-color: var(--scheme-primary);  
    --form-border-color: var(--scheme-primary); 
    --form-label-color: var(--scheme-primary); 
    --form-input-background-color: transparent;  
    --form-label-background-color: transparent; 
    --form-asterisk-color: var(--highlightColor); 
    --form-color-focus: var(--scheme-primary); 
    --form-color-error: var(--myRed); 
 }
form.custom { position: relative;  width: 100%;  margin-left: auto;  max-width: 35rem; }
form.custom :is(textarea, input, select) { padding: 0.6em 0em; color: var(--form-main-color);  width: 100%;  transition: border 250ms var(--myEase), padding 250ms var(--myEase);}
form.custom :is(textarea, input, select):focus-visible {  outline: none;  border-bottom: 2px solid var(--myRed);  padding: 0.6em .25em;}
form.custom :is(input, select):focus-visible ~ label { padding-left: .25em; }
form.custom :is(textarea, input, select)::placeholder { opacity: 0; }
form.custom fieldset { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em;}
form.custom fieldset h2 { margin-bottom: 0;}
form.custom fieldset .divider:not(:first-of-type) { margin-top: 2em;  }
form.custom fieldset div { display: flex; flex-direction: column-reverse; position: relative;  }
form.custom fieldset > div {margin-bottom: 1em; }
form.custom fieldset div.double,form.custom fieldset small, form.custom fieldset div.double,form.custom fieldset small ~ * { grid-column: -1/1;}
form.custom fieldset input { position: relative; top: 0; left: 0; width: 100%; height: 100%;  border-bottom: 2px solid var(--form-border-color);  background: var(--form-input-background-color);  font-family: var(--primaryFont); font-size: var(--font-regular); color: var(--scheme-primary);}
form.custom fieldset div:not(.field) label {  position: absolute; color: var(--form-main-color); top: 0.7em; left: 0em; opacity: .85; pointer-events: none;  transform-origin: left; transition: 250ms var(--myEase);  white-space: nowrap;   color: var(--form-label-color);  font-weight: var(--font-semi-bold); max-width: 100%; overflow: hidden; text-overflow: ellipsis;}
form.custom fieldset div:not(.field) textarea { min-width: 100%;  max-width: 100%; resize: none; padding: 0.75em; color: var(--form-main-color);  font-family: var(--primaryFont); border: 2px solid var(--form-border-color); background: var(--form-input-background-color); font-size: var(--font-regular); border-radius: .2em;}
form.custom fieldset div:not(.field) textarea + label { left: .75em;}
form.custom fieldset div:not(.field) textarea:focus-visible {  border: 2px solid var(--myRed); padding: .75em; }
form.custom fieldset div:not(.field) :is(textarea, input, select)[required] + label::after { content: "*"; display: inline-block; margin-left: 0.15em;  color: var(--form-asterisk-color); transition: 250ms var(--myEase);  }

form.custom fieldset div:not(.field) :is(input:is(:focus, :not(:placeholder-shown)), select[data-active=true]) + label { transform: translate(0em, calc(-120%)) scale(0.7);  opacity: .5;  max-width: unset;}
form.custom fieldset div:not(.field) textarea:is(:focus, :not(:placeholder-shown)) + label { transform: translate(-.75em, calc(-120% - 0.75em)) scale(0.7);opacity: .5; }
form.custom fieldset div:not(.field) :is(:is(input, textarea):is(:focus, :not(:placeholder-shown)), select[data-active=true]) + label:after { opacity: 0; }
form.custom fieldset input[type="email"]:not(:focus, :placeholder-shown):invalid + label::after { content: "Invalid"; display: inline-block; margin-left: 0.5em; padding: 0 0.5em;color: var(--form-color-error);}

form.custom fieldset .select { position: relative;  display: flex; align-items: center; min-height: 2.5em; }
form.custom fieldset .select select { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color:var(--scheme-background); background: transparent; border-bottom: 2px solid var(--scheme-primary);   cursor: pointer;  z-index: 2;  appearance: none; -webkit-appearance: none; border-radius: 0;}
form.custom fieldset .select select:focus-visible { border-bottom: 2px solid var(--myRed); }
form.custom fieldset .select span {position: absolute; color: var(--form-main-color); top: 0.7em; left: 0em; opacity: .85; pointer-events: none;  transform-origin: left; transition: 250ms var(--myEase);  white-space: nowrap;   color: var(--form-label-color);  font-weight: var(--font-semi-bold); opacity: 0; background: var(--scheme-background); z-index: 2; }
form.custom fieldset .select select[data-active=true]  ~ span { opacity: 1;}

form.custom fieldset .select::before,form.custom fieldset .select::after { content: ""; height: 3px; top: 50%; width: .5em; position: absolute; transform: translate(40%, -.05em) rotate(var(--r, 45deg)) translateY(.22em); background: var(--ownColor, var(--scheme-primary));  right: 0.2em; border-radius: 100vmin; transition: background 250ms var(--myEase);}
form.custom fieldset .select::after { --r: -45deg }

form.custom fieldset .field { flex-direction: column;  }
form.custom fieldset .field ul { display: flex; flex-wrap: wrap; gap: 1em; border-top: 2px solid var(--scheme-primary); padding-top: 1em; }
form.custom fieldset .field ul li { position: relative; display: flex; }
form.custom fieldset .field ul input { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; }
form.custom fieldset .field ul input:focus { border: none; outline: none;}
form.custom fieldset .field ul input:focus-visible + label::before { outline: 3px solid var(--myRed);}

form.custom fieldset .field ul label:hover::before { background: var(--scheme-secondary);}
form.custom fieldset .field ul label { padding-left: 1.5em;  }
form.custom fieldset .field ul label::before,form.custom fieldset .field ul label::after { content: ""; position: absolute; left: 0; top: 0.1em;  width: 1em; height: 1em; border: 1px solid var(--scheme-primary); border-radius: 50%; transition: background 250ms; }
form.custom fieldset .field ul label::after { background: url("/img/check.svg") center center / contain no-repeat; left: 0px;  background-size: 60%; transform-origin: bottom; transition: transform 250ms var(--myEase); transform: scale(0); border: none;}
form.custom fieldset .field ul input:checked ~ label::after { transform: none;}

form.custom small { font-size: .6rem; opacity: 1;   transform-origin: top left; margin: calc(var(--em) * -1) 0 .5rem; margin-left: var(--halfBorderRadius);}
form.custom small a { text-decoration: underline;}

.grecaptcha-badge { visibility: hidden; } 

/* --------------- STANDARD SECTION --------------- */
section.content article img { width: 100%;  border-radius: var(--borderRadius); }
section.content article h2:first-child { margin: 0 0 .7em;}
section.content article h2 { margin: 1.25em 0 .7em; }
section.content article :is(h2,h3,h4,h5) { font-weight: var(--font-medium);}

section.content article p { margin-bottom: 1.2em;}
section.content article p a { font-weight: var(--font-semi-bold); color: var(--scheme-secondary); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: .1em; transition: color 250ms;}
section.content article p a:hover{ color: var(--myRed);}
section.content article p strong { font-weight: var(--font-semi-bold); }
section.content article ul { list-style: initial;  padding-left: 1em; margin: .5em 0 1em;}
section.content article ul li { margin-bottom: 0.25em; }
section.content article ol { list-style: numeric;  padding-left: 1em; margin: .5em 0 1em;}
section.content article ol li {margin-bottom: 0.5em;}
section.content article :is(ul, ol) li::marker { font-weight: var(--font-medium); font-size: 0.9em;  }
section.content article blockquote { padding-left: 1em; border-left: .25em solid var(--scheme-primary); font-size: 1.2rem;  margin: 1.5rem 0;}

/* --------------- COOKIE BANNER COLORS --------------- */
section.odf__cookies.odf__cookies { 
    --odf_main_color: black;
    --odf_background_color: white; 
    --odf_highlight_color: maroon; 
}

/* --------------- MEDIA QUERIES --------------- */
/* MIN */


/* MAX */
@media only screen and (max-width: 1250px) {
    /* --------------- ROOT --------------- */
    :root { 
        --gutterSide: calc(1.75 * var(--em)) ;
        --gap: var(--font-size-huge);
    }
}
@media only screen and (max-width: 1100px) {
    /* --------------- ROOT --------------- */
    :root { 
        --logoWidth: 8em; 
        --gutterTop: 1em; 
        --gutterSide: calc(1.5 * var(--em));
        --marginSingularTop:  6.1rem;
    }
    /* --------------- HEADER --------------- */
    nav#mobile, .mobile { display: block; }
    label.burger { display: flex; }
    nav#desktop { padding: 1em 0;}
    nav#desktop > ul > li.arrow.lang, 
    nav#desktop li:not(:first-of-type, .burger) { display: none; }
    
    /* --------------- FOOTER --------------- */
    footer > nav { grid-template-columns: 1fr auto; grid-gap: 0 1em;}
    
}
@media only screen and (max-width: 900px) {    
    /* --------------- FOOTER --------------- */
    footer > .box {  width: 80%; min-width: unset;}
    footer > .box > figure  { top: 2em; right: -2em; bottom: unset; height: auto; min-width: 16rem; }
    footer > nav { grid-template-columns: 1fr; grid-gap: 2em;}
    footer > nav > ul { align-items: flex-start;}
    footer > nav > .cta p { max-width: 90%;}
    footer > nav > .bottom { flex-direction: column;  align-items: flex-start; margin: 0;  padding-bottom: 2em; gap: 2em;}
    footer > nav > p { display: flex; align-items: center; flex-direction: column; gap: 1em;}
    footer > nav > p span { display: none; }
    ul.socials { margin: 0; }

}
@media only screen and (max-width: 768px) {    
    /* --------------- ROOT --------------- */
    :root {
        --logoWidth: 7em; 
        --marginSingularTop:  5.4rem;
        --gutterSide:  var(--em);
        
        --font-size-h1:  calc(2.2 * var(--em));               /* 72px */
        --font-size-h2:  calc(1.66 * var(--em));               /* 48px */
        --font-size-h3:  calc(1.25 * var(--em));             /* 36px */
        --font-size-h4:  calc(1.11 * var(--em));           /* 32px */
        --font-size-h5:  calc(1.05 * var(--em));            /* 30px */
    }
    /* --------------- HEADER --------------- */
    header { transition: top 500ms var(--myEase); }
    header[data-fixed="true"] { top: -2em; }
    input.burger:checked ~ header {position: fixed;  top: 0;}
    nav.preheader { height: 2em;}
    nav.preheader ul {gap: 1.5em;}
    nav.preheader ul li:is(:nth-last-of-type(1),:nth-last-of-type(2)) { display: none; }
    
}
@media only screen and (max-width: 500px) {    
    form.custom fieldset { grid-template-columns: 1fr;}
}

/* --------------- REDUCED MOTION --------------- */
@media (prefers-reduced-motion) { }
  

/* --------------- ANIMATIONS --------------- */
@keyframes stroke { to { stroke-dashoffset: 0; } }